【技术实战】Vue功能样式实战【六】

转载作者：我是一只小鸟更新时间：2023-08-13 06:31:10

25

4

需求实战一

样式展示

代码展示

                        
                          <template>
    <ARow>
        <ACol style="background-color:#F1F4F5 ">
            <div class="info-card">
                <div class="info-title">
                    数据总和
                </div>
                <div class="info-value">
                    100
                </div>
            </div>

        </ACol>
    </ARow>
</template>
<script setup lang="ts">

</script>
<style scoped>
:deep(.info-card){
    width: 318px;
    height: 116px;
    background-color: #FFFFFF;
    box-shadow: 0px 2px 10px 1px rgba(23,179,163,0.07);
    border-radius: 4px;
}

:deep(.info-title){
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
    line-height: 21px;
    padding:20px 0 20px 30px;
}

:deep(.info-value){
    font-size: 36px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #333333;
    line-height: 21px;
    padding:0 0 0 30px;
}
</style>

代码解读

这段代码是一个Vue组件的模板部分，用于展示一个信息卡片。具体解释如下:

- <template> 标签用于定义组件的模板部分。 - <ARow> 和 <ACol> 是自定义的组件，用于布局。<ARow> 表示一行，<ACol> 表示一列。 - <ACol> 标签内部有一个 style 属性，用于设置背景颜色为 #F1F4F5。 - <div class="info-card"> 是一个具有 info-card 类名的 div 元素，表示信息卡片的容器。 - <div class="info-title"> 是一个具有 info-title 类名的 div 元素，表示信息卡片的标题。 - <div class="info-value"> 是一个具有 info-value 类名的 div 元素，表示信息卡片的数值.

接下来是 <script setup lang="ts"> 标签，用于编写组件的逻辑部分，这里是空的，没有任何代码.

最后是 <style scoped> 标签，用于定义组件的样式。:deep() 是一个深度选择器，用于选择组件内部的元素。.info-card 表示选择具有 info-card 类名的元素，设置了宽度、高度、背景颜色、阴影和边框圆角等样式。.info-title 和 .info-value 分别表示选择具有对应类名的元素，设置了字体大小、字体样式、颜色、行高和内边距等样式.

这段代码的作用是创建一个信息卡片组件，显示一个标题为 "数据总和"，数值为 "100" 的信息。信息卡片具有特定的样式，包括背景颜色、阴影和边框圆角等.

需求实战二

样式展示

代码展示

                        
                          <template>
    <div class="info-card">
        <div class="info-title">
            数据总和
        </div>
        <div class="info-value">
            100
        </div>
        <div class="animation-container">
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
        </div>
    </div>
</template>


<script setup lang="ts"></script>


<style scoped>
.info-card {
    width: 318px;
    height: 200px;
    background-color: #17b3a3;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}


.info-title {
    font-size: 24px;
    font-weight: bold;
    color: #FFFFFF;
}


.info-value {
    font-size: 48px;
    font-weight: bold;
    color: #FFFFFF;
}


.animation-container {
    display: flex;
    position: absolute;
    bottom: 25px;
}


.circle {
    width: 10px;
    height: 10px;
    background-color: #FFFFFF;
    border-radius: 50%;
    margin: 0 4px;
    transform: scale(0);
    animation: pulse 1.5s infinite cubic-bezier(0.215, 0.61, 0.355, 1) alternate;
}


.circle:nth-child(1) {
    animation-delay: 0.1s;
}


.circle:nth-child(2) {
    animation-delay: 0.2s;
}
.circle:nth-child(3) {
    animation-delay: 0.3s;
}
.circle:nth-child(4) {
    animation-delay: 0.4s;
}
.circle:nth-child(5) {
    animation-delay: 0.5s;
}
.circle:nth-child(6) {
    animation-delay: 0.6s;
}


@keyframes pulse {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    50% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0);
    }
}
</style>

代码解读

这段代码是一个Vue组件的模板部分，用于展示一个带有动画效果的信息卡片。具体解释如下:

- <template> 标签用于定义组件的模板部分。 - <div class="info-card"> 是一个具有 info-card 类名的 div 元素，表示信息卡片的容器。 - <div class="info-title"> 是一个具有 info-title 类名的 div 元素，表示信息卡片的标题。 - <div class="info-value"> 是一个具有 info-value 类名的 div 元素，表示信息卡片的数值。 - <div class="animation-container"> 是一个具有 animation-container 类名的 div 元素，用于容纳动画效果的圆圈。 - <div class="circle"> 是一个具有 circle 类名的 div 元素，表示一个圆圈.

接下来是 <script setup lang="ts"> 标签，用于编写组件的逻辑部分，这里是空的，没有任何代码.

最后是 <style scoped> 标签，用于定义组件的样式。.info-card 表示选择具有 info-card 类名的元素，设置了宽度、高度、背景颜色、边框圆角等样式，并使用了 Flex 布局使内容垂直居中。.info-title 和 .info-value 分别表示选择具有对应类名的元素，设置了字体大小、字体样式、颜色等样式。.animation-container 表示选择具有 animation-container 类名的元素，设置了绝对定位和底部偏移量。.circle 表示选择具有 circle 类名的元素，设置了圆圈的样式，包括宽度、高度、背景颜色、边框圆角、外边距和动画效果.

动画效果使用了 @keyframes 关键字定义了一个名为 pulse 的关键帧动画，通过改变透明度和缩放来实现圆圈的闪烁效果。.circle:nth-child(n) 选择了第 n 个具有 circle 类名的元素，并设置了不同的动画延迟时间，以实现圆圈的依次闪烁效果.

这段代码的作用是创建一个带有动画效果的信息卡片组件，显示一个标题为 "数据总和"，数值为 "100" 的信息。信息卡片具有特定的样式，包括背景颜色、边框圆角和居中对齐等。同时，信息卡片底部有一组圆圈，通过动画效果实现闪烁的效果.

需求实战三

样式展示

代码展示

                        
                          <template>
    <div class="info-card">
        <div class="info-title">
            数据总和
        </div>
        <div class="info-value">
            100
        </div>
        <div class="animation-container">
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
        </div>
    </div>
</template>


<script setup lang="ts"></script>


<style scoped>
.info-card {
    width: 318px;
    height: 200px;
    background-color: rgba(23, 179, 163, 0.5);
    backdrop-filter: blur(10px);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.1) 75%, transparent 75%, transparent);
    background-size: 20px 20px;

}


.info-title {
    font-size: 24px;
    font-weight: bold;
    color: #FFFFFF;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}


.info-value {
    font-size: 48px;
    font-weight: bold;
    color: #FFFFFF;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}


.animation-container {
    display: flex;
    position: absolute;
    bottom: 25px;
}


.circle {
    width: 10px;
    height: 10px;
    background-color: #FFD700;
    border-radius: 50%;
    margin: 0 4px;
    transform: scale(0);
    animation: pulse 1.5s infinite cubic-bezier(0.215, 0.61, 0.355, 1) alternate;
}


.circle:nth-child(1) {
    animation-delay: 0.1s;
}


.circle:nth-child(2) {
    animation-delay: 0.2s;
}
.circle:nth-child(3) {
    animation-delay: 0.3s;
}
.circle:nth-child(4) {
    animation-delay: 0.4s;
}
.circle:nth-child(5) {
    animation-delay: 0.5s;
}
.circle:nth-child(6) {
    animation-delay: 0.6s;
}


@keyframes pulse {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    50% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0);
    }
}
</style>

代码解读

这段代码是一个Vue组件的模板部分，用于展示一个带有动画效果和背景模糊的信息卡片。具体解释如下:

- <template> 标签用于定义组件的模板部分。 - <div class="info-card"> 是一个具有 info-card 类名的 div 元素，表示信息卡片的容器。 - <div class="info-title"> 是一个具有 info-title 类名的 div 元素，表示信息卡片的标题。 - <div class="info-value"> 是一个具有 info-value 类名的 div 元素，表示信息卡片的数值。 - <div class="animation-container"> 是一个具有 animation-container 类名的 div 元素，用于容纳动画效果的圆圈。 - <div class="circle"> 是一个具有 circle 类名的 div 元素，表示一个圆圈.

接下来是 <script setup lang="ts"> 标签，用于编写组件的逻辑部分，这里是空的，没有任何代码.

最后是 <style scoped> 标签，用于定义组件的样式。.info-card 表示选择具有 info-card 类名的元素，设置了宽度、高度、背景颜色、背景模糊、边框圆角、阴影和背景图案等样式，并使用了 Flex 布局使内容垂直居中。.info-title 和 .info-value 分别表示选择具有对应类名的元素，设置了字体大小、字体样式、颜色和文字阴影等样式。.animation-container 表示选择具有 animation-container 类名的元素，设置了绝对定位和底部偏移量。.circle 表示选择具有 circle 类名的元素，设置了圆圈的样式，包括宽度、高度、背景颜色、边框圆角、外边距和动画效果.

动画效果使用了 @keyframes 关键字定义了一个名为 pulse 的关键帧动画，通过改变透明度和缩放来实现圆圈的闪烁效果。.circle:nth-child(n) 选择了第 n 个具有 circle 类名的元素，并设置了不同的动画延迟时间，以实现圆圈的依次闪烁效果.

这段代码的作用是创建一个带有动画效果和背景模糊的信息卡片组件，显示一个标题为 "数据总和"，数值为 "100" 的信息。信息卡片具有特定的样式，包括背景颜色、背景模糊、边框圆角、阴影和背景图案等。同时，信息卡片底部有一组圆圈，通过动画效果实现闪烁的效果.

需求实战四

样式展示

代码展示

                        
                          <template>
    <div class="home-component">
        <ARow style="padding:0 0 30px 0">
            <div class="info-card">
                <div class="info-title">
                    数据总和
                </div>
                <transition name="number-transition">
                    <div class="info-value" :class="{ init:init,changed: isNumberIncreased, decreased: isNumberDecreased }">
                        {{ animatedValue }}
                    </div>
                </transition>
                <div class="animation-container">
                    <div class="circle"></div>
                    <div class="circle"></div>
                    <div class="circle"></div>
                    <div class="circle"></div>
                    <div class="circle"></div>
                    <div class="circle"></div>
                </div>
            </div>
        </ARow>
        <ARow>
            <ACol span="10">
                <div class="button-container">
                    <a-button class="increase-button" type="primary" @click="addNumber">增加数值</a-button>
                </div>
            </ACol>
            <ACol span="4">
            </ACol>
            <ACol span="10">
                <div class="button-container">
                    <a-button class="decrease-button" type="primary" @click="minNumber">减少数值</a-button>
                </div>
            </ACol>
        </ARow>
    </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';

const value = ref(100);
const isNumberIncreased = ref(false);
const isNumberDecreased = ref(false);

const animatedValue = ref(value.value);
const init=ref(true)


const addNumber = () => {
        const startValue = value.value;
        const endValue = startValue + 10;
        animateNumber(startValue, endValue);
        value.value = endValue;
        init.value=false;
    isNumberDecreased.value = false;

    isNumberIncreased.value = true;

};

const minNumber = () => {
        const startValue = value.value;
        const endValue = startValue - 10;
        animateNumber(startValue, endValue);
        value.value = endValue;
        init.value=false;
    isNumberIncreased.value = false;

    isNumberDecreased.value = true;
};
const animateNumber = (startValue:any, endValue:any) => {
    const duration = 1000; // 动画持续时间，单位为毫秒
    const frameRate = 10; // 每秒帧数
    const totalFrames = duration / (1000 / frameRate);
    const frameIncrement = (endValue - startValue) / totalFrames;

    let currentFrame = 0;
    const timer = setInterval(() => {
        currentFrame++;
        animatedValue.value = Math.round(startValue + frameIncrement * currentFrame);

        if (currentFrame === totalFrames) {
            clearInterval(timer);
        }
    }, 1000 / frameRate);
};

watch(value, () => {
    animatedValue.value = value.value;
});
</script>

<style scoped>
.home-component {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.info-card {
    width: 318px;
    height: 200px;
    background-color: rgba(23, 179, 163, 0.5);
    backdrop-filter: blur(10px);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    background-image: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.1) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0.1) 75%,
        transparent 75%,
        transparent
    );
    background-size: 20px 20px;
}

.info-title {
    font-size: 24px;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.info-value {
    font-size: 48px;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.info-value.init {
    color: #ffffff;
    transform: scale(1.2);
}
.info-value.changed {
    color: #13c40d;
    transform: scale(1.2);
}
.info-value.decreased {
    color: #eb5766;
    transform: scale(1.2);
}
.animation-container {
    display: flex;
    position: absolute;
    bottom: 25px;
}

.circle {
    width: 10px;
    height: 10px;
    background-color: #ffd700;
    border-radius: 50%;
    margin: 0 4px;
    transform: scale(0);
    animation: pulse 1.5s infinite cubic-bezier(0.215, 0.61, 0.355, 1) alternate;
}

.circle:nth-child(1) {
    animation-delay: 0.1s;
}

.circle:nth-child(2) {
    animation-delay: 0.2s;
}

.circle:nth-child(3) {
    animation-delay: 0.3s;
}

.circle:nth-child(4) {
    animation-delay: 0.4s;
}

.circle:nth-child(5) {
    animation-delay: 0.5s;
}

.circle:nth-child(6) {
    animation-delay: 0.6s;
}

@keyframes pulse {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    50% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0);
    }
}

.button-container {
    display: flex;
    justify-content: center;
    padding: 30px 0;
    animation: bounce 2s infinite;
    animation-delay: 1s;
}

.increase-button,
.decrease-button {
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    border: none;
    transform: scale(1.05) rotate(360deg);
    transition: transform 1s;
    border-radius: 5px;
}

.increase-button {
    background-color: #38b2ac;
    margin-right: 10px;
}

.decrease-button {
    background-color: #eb5766;
    margin-left: 10px;
}

.increase-button:hover,
.decrease-button:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.4);
}
</style>

代码解读

这段代码是一个Vue组件的模板部分，用于展示一个带有动画效果和交互功能的信息卡片。具体解释如下:

- <template> 标签用于定义组件的模板部分。 - <div class="home-component"> 是一个具有 home-component 类名的 div 元素，表示整个组件的容器。 - <ARow> 和 <ACol> 是自定义的组件，用于布局。<ARow> 表示一行，<ACol> 表示一列。 - <div class="info-card"> 是一个具有 info-card 类名的 div 元素，表示信息卡片的容器。 - <div class="info-title"> 是一个具有 info-title 类名的 div 元素，表示信息卡片的标题。 - <transition> 标签用于添加过渡效果，name 属性指定过渡效果的名称。 - <div class="info-value"> 是一个具有 info-value 类名的 div 元素，表示信息卡片的数值。使用了动态绑定 :class 来根据条件添加不同的类名，实现数值变化时的样式变化。 - {{ animatedValue }} 是一个插值表达式，用于显示动态绑定的 animatedValue 变量的值。 - <div class="animation-container"> 是一个具有 animation-container 类名的 div 元素，用于容纳动画效果的圆圈。 - <div class="circle"> 是一个具有 circle 类名的 div 元素，表示一个圆圈.

接下来是 <script setup lang="ts"> 标签，用于编写组件的逻辑部分。通过 import 导入了 ref 和 watch 方法，用于创建响应式数据和监听数据变化。定义了一些变量和方法，包括 value、isNumberIncreased、isNumberDecreased、animatedValue、init、addNumber、minNumber 和 animateNumber。addNumber 方法用于增加数值，minNumber 方法用于减少数值，animateNumber 方法用于实现数值变化的动画效果。使用 watch 监听 value 的变化，并更新 animatedValue 的值.

最后是 <style scoped> 标签，用于定义组件的样式。.home-component 表示选择具有 home-component 类名的元素，设置了居中对齐等样式。.info-card 表示选择具有 info-card 类名的元素，设置了宽度、高度、背景颜色、背景模糊、边框圆角、阴影和背景图案等样式。.info-title 和 .info-value 分别表示选择具有对应类名的元素，设置了字体大小、字体样式、颜色和文字阴影等样式。.info-value.init、.info-value.changed 和 .info-value.decreased 分别表示根据条件添加的类名，用于实现数值变化时的样式变化。.animation-container 表示选择具有 animation-container 类名的元素，设置了绝对定位和底部偏移量。.circle 表示选择具有 circle 类名的元素，设置了圆圈的样式，包括宽度、高度、背景颜色、边框圆角、外边距和动画效果.

动画效果使用了 @keyframes 关键字定义了一个名为 pulse 的关键帧动画，通过改变透明度和缩放来实现圆圈的闪烁效果。.circle:nth-child(n) 选择了第 n 个具有 circle 类名的元素，并设置了不同的动画延迟时间，以实现圆圈的依次闪烁效果.

这段代码的作用是创建一个带有动画效果和交互功能的信息卡片组件。信息卡片显示一个标题为 "数据总和"，数值初始值为 "100"，并根据用户点击增加或减少数值，同时显示数值的变化动画效果。信息卡片具有特定的样式，包括背景颜色、背景模糊、边框圆角、阴影和背景图案等。同时，信息卡片底部有一组圆圈，通过动画效果实现闪烁的效果.

最后此篇关于【技术实战】Vue功能样式实战【六】的文章就讲到这里了,如果你想了解更多关于【技术实战】Vue功能样式实战【六】的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！。

25

4

0

文章推荐：【网络流】总结

文章推荐： SQL注入学习手册【笔记】

文章推荐：用Python语言进行多元时间序列ARIMAX模型分析

文章推荐： JDK中动态库加载路径问题，一文讲清

实战：Mailivery模拟登录
问题情景混淆群内的小伙伴遇到这么个问题，Mailivery 这个网站登录后，明明提交的表单（邮箱和密码也正确）、请求头等等都没问题，为啥一直重定向到登录页面呢？唉，该出手时就出手啊，我也看看咋回事
实战-行业攻防应急响应
实战-行业攻防应急响应简介：服务器场景操作系统 Ubuntu 服务器账号密码：root/security123 分析流量包在/home/security/security.pcap 相
实战：如何优雅的从Skywalking切换到OpenTelemetry
背景最近公司将我们之前使用的链路工具切换为了 OpenTelemetry. 我们的技术栈是： OTLP C
This Monitor 实战
一同一类的方法都用 synchronized 修饰 1 代码 package concurrent; import java.util.concurrent.TimeUnit; public c
ThreadLocal 实战
一简单例子 1 代码 package concurrent.threadlocal; /** * ThreadLocal测试 * * @author cakin */ public class T
实战：工作中对并发问题的处理
1. 问题背景问题发生在快递分拣的流程中，我尽可能将业务背景简化，让大家只关注并发问题本身。分拣业务针对每个快递包裹都会生成一个任务，我们称它为 task。task 中有两个字段需要
Elasticsearch搜索功能的实现（五）--实战
实战环境 elastic search 8.5.0 + kibna 8.5.0 + springboot 3.0.2 + spring data elasticsearch 5.0.2 +
Win10下yolov8tensorrt模型加速部署【实战】
Win10下yolov8 tensorrt模型加速部署【实战】 TensorRT-Alpha 基于tensorrt+cuda c++实现模型end2end的gpu加速，支持win10、
yolov8tensorrt模型加速部署【实战】
yolov8 tensorrt模型加速部署【实战】 TensorRT-Alpha 基于tensorrt+cuda c++实现模型end2end的gpu加速，支持win10、linux，
实战！微服务认证中心如何扩展授权模式实现多种方式登录？
目录如下：为什么需要自定义授权类型? 前面介绍OAuth2.0的基础知识点时介绍过支持的4种授权类型，分别如下：授权码模式简化模式客户端模式密码模式
实战！退出登录时如何借助外力使JWT令牌失效？
今天这篇文章介绍一下如何在修改密码、修改权限、注销等场景下使JWT失效。文章的目录如下：解决方案 JWT最大的一个优势在于它是无状态的，自身包含了认证鉴权所需要的所有信息，服务器端
实战！聊聊如何解决MySQL深分页问题
前言大家好，我是捡田螺的小男孩。(求个星标置顶) 我们日常做分页需求时，一般会用limit实现，但是当偏移量特别大的时候，查询效率就变得低下。本文将分四个方案，讨论如何优化MySQL百万数
实战！工作中常用到哪些设计模式
前言大家好，我是捡田螺的小男孩。平时我们写代码呢，多数情况都是流水线式写代码，基本就可以实现业务逻辑了。如何在写代码中找到乐趣呢，我觉得，最好的方式就是：使用设计模式优化自己
ARM汇编逆向iOS 实战
我们先讲一些arm汇编的基础知识。（我们以armv7为例，最新iphone5s上的64位暂不讨论）基础知识部分：首先你介绍一下寄存器： r0-r3:用于函数参数及返回值的传递 r4-r6
Class Monitor 实战
一同一类的静态方法都用 synchronized 修饰 1 代码 package concurrent; import java.util.concurrent.TimeUnit; public
实战-DRF快速写接口(认证权限频率)
DRF快速写五个接口，比你用手也快··· 实战-DRF快速写接口开发环境 Python3.6 Pycharm专业版2021.2.3 Sqlite3 Django 2.2 djangorestfram
Apache Thrift 实战
一添加依赖 org.apache.thrift libthrift 0.11.0 二编写 IDL 通过 IDL（.thrift 文件）定义数据结构、异常和接口等数据，供各种编程语言使用 nam
Redis 实战——不公平信号量
我正在阅读 Redis in action e-book关于semaphores的章节.这是使用redis实现信号量的python代码 def acquire_semaphore(conn, semn
WPF必须掌握的技能之自定义控件——实战:自制上传文件显示进度按钮
自定义控件在WPF开发中是很常见的，有时候某些控件需要契合业务或者美化统一样式，这时候就需要对控件做出一些改造。目录按钮设置圆角
使用python 写一个静态服务(实战)
师父布置的任务，让我写一个服务练练手，搞清楚socket的原理和过程后跑了一个小demo，很有成就感，代码内容也比较清晰易懂，很有教育启发意义。代码 ?

首页

博学

6Ren·AI

商城

【技术实战】Vue功能样式实战【六】

需求实战一

样式展示

代码展示

代码解读

需求实战二

样式展示

代码展示

代码解读

需求实战三

样式展示

代码展示

代码解读

需求实战四

样式展示

代码展示

代码解读