当青训营遇上码上掘金

一、介绍

首先了解“拟态化”，它用于描述界面对象，反映了现实世界中的对象对应到数字界面中的显示方式。此设计概念利用了用户对实际对象现有认知和思维，该设计风格让用户无需花费额外时间学习新的界面，当UI元素与显示世界类似物结合时，可以减轻用户的认知负担。

新拟态风格与扁平化风格完全相反，可以理解成“加高光、加渐变、加阴影”，其原理是为界面的UI元素赋予真实感。原生名词有几种叫法：Neumorphism/soft UI，翻译过来就是“新拟态”/软UI，是一种具有流线感的设计风格，介于扁平与投影之间。

名片是展示个人信息的一种工具，作为传递信息的工具理应做到简介明了，让人直接读取到其中的信息。由此设计了一款这款名片。

基本结构

左侧：基本信息介绍
- 包含姓名以及简介
中间：头像
- 主体为头像
右侧：个人兴趣爱好
- 展示自己的兴趣爱好
- 还有主要的技术栈

二、代码

使用vue+scss进行设计，主要为了展现新拟态扁平化的风格

html部分

主要为一个profile_wrap容器包含三个信息展示模块

  <div class="profile_wrap">
    <div class="container">
      <div class="components">
        <div class="left_card">
          <div class="profile_title">
            <h1>个人简介</h1>
            <div class="name">
              <h2>Galaxy</h2>
              <h3>A Web Developer</h3>
            </div>
            <div class="introduction">
              <p>
                一名普普通通大学生，
                通信工程专业，喜欢前端开发。
                
              </p>
            </div>
          </div>
        </div>
        <div class="middle_img">
          <img
              class="profile_img"
              src="https://pic.imgdb.cn/item/63e757fd4757feff337e57da.jpg">
        </div>
    <div class="right_card">
      <div class="favour">
        <ul>
          <h2>兴趣爱好</h2>
          <li>摄影</li>
          <li>敲代码</li>
          <li>阅读名著</li>
        </ul>
        <ul>
          <h2>技术栈</h2>
          <li>HTML、CSS、JAVASCRIPT</li>
          <li>Vue、React、TypeScript</li>
          <li>Python、flask</li>
          <li>Java、Spring、C/C++</li>
        </ul>
      </div>
    </div>

      </div>
    </div>

  </div>
复制代码

css部分

使用grid布局


*{
  margin: 0;
  padding: 0;
}
#app {
 width: 100%;
  height: 100%;
}
:root {
  --primary-light: #8abdff;
  --primary: #6d5dfc;
  --primary-dark: #5b0eeb;

  --white: #FFFFFF;
  --greyLight-1: #E4EBF5;
  --greyLight-2: #c8d0e7;
  --greyLight-3: #bec8e4;
  --greyDark: #9baacf;
}

$shadow: .3rem .3rem .6rem var(--greyLight-2),
-.2rem -.2rem .5rem var(--white);
$inner-shadow: inset .2rem .2rem .5rem var(--greyLight-2),
inset -.2rem -.2rem .5rem var(--white);

.profile_wrap {
  overflow-y: scroll;
  background: var(--greyLight-1);
}

.container {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Poppins', sans-serif;
  background: var(--greyLight-1);
}

.components {
  width: 75rem;
  height: 40rem;
  border-radius: 3rem;
  box-shadow: .8rem .8rem 1.4rem var(--greyLight-2),
  -.2rem -.2rem 1.8rem var(--white);
  padding: 4rem;
  display: grid;
  grid-template-columns: 18rem 21rem 18rem;
  grid-column-gap: 5rem;
  grid-row-gap: 2.5rem;
  align-items: center;
}
.left_card{
  .profile_title{
    font-size: 2.5rem;
    font-weight: 600;
    color: var(--greyDark);
    margin-bottom: 1rem;
    h1{
      font-size: 3.5rem;
      font-weight: 700;
      color: var(--primary);
    }
    .name{
      opacity: 0;
      transform: translateX(3rem);
      font-size: 1rem;
      font-weight: 600;
      margin: 1rem 0;
      color: var(--greyDark);
      transition: all ease-in-out 0.3s;
    }
    &:hover{
      .name,.introduction{
        opacity: 1;
      transform: translateX(0);
      }
    }
    .introduction{
      opacity: 0;
      transform: translateX(3rem);
      transition-delay: .1s;
      p{
        font-size: 1rem;
        font-weight: 400;
        text-indent: 1rem;
        color: var(--greyDark);
      }
    }
  }

}
.middle_img{
  width: 100%;
  height:50%;
  border-radius: 50%;
  box-shadow: $shadow;
  background: var(--greyLight-3);
  display: flex;
  justify-content: center;
  align-items: center;
  img{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-shadow: $inner-shadow;
  }
  &:hover{
    box-shadow: $inner-shadow;
    img{

    }
  }
}

.right_card{
  .favour{
    h2{
      font-size: 2rem;
      font-weight: 600;
      color: var(--primary-dark);
      margin-bottom: 1rem;
    }
    ul{
      list-style: none;
      box-shadow: $shadow;
      padding: 1rem;
      border-radius: 1rem;
      margin: 2rem 0;
      li{
        height: 0;
        //display: none;
        overflow: hidden;
        font-size: 1rem;
        font-weight: 500;
        color: var(--greyDark);
        margin-bottom: 1rem;
        transform: translateX(3rem);
        transition: transform 3s ease-in-out, height 0.5s ease-in-out;
      }
      &:hover{
        li{
          display: block;
          height: auto;
          transition: all .5s ease-in-out;
          transform: translateX(0);
          &:nth-child(1){
            transition-delay: .2s;
          }
          &:nth-child(2){
            transition-delay: .4s;
          }
          &:nth-child(3){
            transition-delay: .6s;
          }
          &:nth-child(4){
            transition-delay: .8s;
          }
          &:nth-child(5){
            transition-delay: 1s;
          }
          &:hover{
            transform: translateX(3rem);
          }
        }
      }
    }
  }
}


  
复制代码

js部分

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    
  },
});
</script>

<template>
  <div class="profile_wrap">
    <div class="container">
      <div class="components">
        <div class="left_card">
          <div class="profile_title">
            <h1>个人简介</h1>
            <div class="name">
              <h2>Galaxy</h2>
              <h3>A Web Developer</h3>
            </div>
            <div class="introduction">
              <p>
                一名普普通通大学生，
                通信工程专业，喜欢前端开发。
                
              </p>
            </div>
          </div>
        </div>
        <div class="middle_img">
          <img
              class="profile_img"
              src="https://pic.imgdb.cn/item/63e757fd4757feff337e57da.jpg">
        </div>
    <div class="right_card">
      <div class="favour">
        <ul>
          <h2>兴趣爱好</h2>
          <li>摄影</li>
          <li>敲代码</li>
          <li>阅读名著</li>
        </ul>
        <ul>
          <h2>技术栈</h2>
          <li>HTML、CSS、JAVASCRIPT</li>
          <li>Vue、React、TypeScript</li>
          <li>Python、flask</li>
          <li>Java、Spring、C/C++</li>
        </ul>
      </div>
    </div>

      </div>
    </div>

  </div>
</template>
<style lang="scss">

</style>

复制代码

三、运行效果和总结

总结：由于本人专业非计算机专业，前端等技术皆为自身兴趣所致，从不后悔选择的所学专业，也未曾放弃过对新技术的学习。

世间走一遭，命运当握自己手中。

「青训营 X 码上掘金」制作一款新拟态名片

一、 介绍