「青训营 X 码上掘金」主题 1——我的名片当青训营遇上码上掘金主题介绍名片是向人介绍自我的重要工具，作为一名程序员

当青训营遇上码上掘金

主题介绍

名片是向人介绍自我的重要工具，作为一名程序员用代码做自我介绍是一件非常酷炫的事情。请大家围绕“我的名片”这个主题进行代码创作。

实现思路

存放信息
放置图片
完善ui
设置动画

最终作品

技术详解

盒子的阴影实现

box-shadow: offset-x offset-y blur spread color inset;

box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展] [阴影颜色] [投影方式];

参数解释：

offset-x：必需，取值正负都可。offset-x水平阴影的位置。
offset-y：必需，取值正负都可。offset-y垂直阴影的位置。
spread：可选，取值正负都可。spread代表阴影的周长向四周扩展的尺寸，正值，阴影扩大，负值阴影缩小。
color:可选。阴影的颜色。如果不设置，浏览器会取默认颜色，通常是黑色。可以是rgb``(``250``,``0``,``0``)

less的使用

官方链接：less.bootcss.com/

宽高可以很好地抽离出来

@width: 10px;
@height: @width + 10px;
#header {
width: @width; 
height: @height; 
}

样式混合

#menu a {
color: #111;
.bordered();
}
.post a {
color: red;
.bordered(); 
}

伪选择器 &:after {

  &:hover { color: $hover; }
  &:visited { color: $visited; }

$hover可以定义此变量

导入变量全局使用

可以导入一个 .less 文件，此文件中的所有变量就可以全部使用了。

sass

官方文档 www.sass.hk/guide/ 混合器使用@mixin标识符定义。看上去很像其他的CSS @标识符，

BEM的使用

可以增加代码的可读性

 &__wrapper {
        max-width 108rem;
        padding: 3rem 0;
    }
    &__headingContainer {
        background-color: steelblue;
    }
    &__header {
        font-size: 2.4rem;
        font-weight: 700;
    }

 &--active {
            @extend .nav__item;
            border-bottom: 1px solid red;
        }

伪类用&--active ，语义化更强，分别代表不同的含义,_表示是子类，--是各种激活状态。

vw,vh

vw单位可以根据窗口的宽度自动改变大小，1vw等于窗口宽度的1%， vh单位可以根据窗口的高度自动改变大小，1vh等于窗口高度的1%，

图片宽高自适应

如何保证只改变宽度，而使得图片等比例变化。在height中设置100%的属性保证照片自适应。 width：100%不同，设为100%已经固定了宽度，宽度始终不变，而宽度自适应是会自动更改宽度 css设置

事件触发

可以使用 v-on 指令 (简写为 @) 来监听 DOM 事件，并在事件触发时执行对应的 JavaScript。用法：v-on:click="methodName" 或 @click="handler"。

图片呈现

图片加载可以图片上传图床，在style直接编写风格代码

<img src="https://img1.imgtp.com/2023/01/27/ShZX4im0.png" style="width:30px;top:209px">

如果想设置背景图片就直接 `background-image: url();` @click编写其触发事件，js中的setup中进行变量初始化以及方法的定义。

图片点击链接可以跳转到我的github博客

完整代码

<template>
<div id="main">
    <div id="contain">
                <div id="img">
                    <a href="https://liasazhang.github.io/">
                    <img src="https://s1.ax1x.com/2023/01/31/pSw5wc9.jpg" alt="pSw5wc9.jpg" border="0" />
                    </a>
                </div>
                
                  <button class="count" @click="addCount"> 小趴菜菜籽</button>
                 <p>大二开始接触的前端，之前自己手写了一个调色盘,手写过很多shi山，前端后端微信小程序安卓都有过接触，但显然写的东西只是为了赶项目赶比赛而堆积的，复用性组件化是什么，不存在的。</p>
       
    </div>
    
</div>
</template>

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

export default defineComponent({
  setup() {
    const count = ref(0);
    function addCount() {
      count.value += 1;
    }
    return {
      count,
      addCount,
    };
  },
});
</script>

<style lang="less" scoped>

#main{
    position: relative;
    width: 100vw;
    height: 100vh;
    /* background-image: url(); */
    background-size: 100% 100%;
    background-color:  #FF6355;
    #contain{
        height: wrap-content;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        border-radius: 25px;
        border: 1px solid black;
        background-color:#FF6355 !important;
        box-shadow: -5px -5px 10px rgb(255, 250, 250),
                     5px 5px 20px red;
        img{
        height: 290px;
         border-radius: 25px;
        }    

        p{
             color:pink;
             font-size:20px;
              margin: 10px 55px;
    
        }
        button{
            margin: 10px 45px;
            font-size:25px;
            width:wrap-content;
             height: wrap-content;
            border-radius: 25px;
            color:pink;
            border:red 1px solid;
            background-color: rgba(255, 250, 250, 0.1);
            &:active{
              color: red;
              border-bottom: 1px solid red;
            }
           
         } 
         
     
    }
}

</style>

「青训营 X 码上掘金」主题 1——我的名片