【技术实战】Vue技术实战【四】

需求实战一

效果展示

代码展示

<template>
    <ARow>
        <ACol>
            <a-statistic-countdown
                :value="deadline"
                format="HH:mm:ss:SSS"
                class="countdown"

            />
        </ACol>
    </ARow>

</template>
<script setup lang="ts">
const deadline=Date.now() + 1000 * 60 * 60 * 24 * 2 + 1000 * 30;
</script>
<style scoped>
.countdown {
    font-size: 48px;
    color: #fff;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
</style>

代码解读

这段代码是一个Vue组件，用于展示一个倒计时。代码中使用了Ant Design Vue库中的a-statistic-countdown组件来实现倒计时功能。

 

在模板部分，使用了<ARow>和<ACol>组件来创建一个行列布局，将倒计时组件放置在列中。倒计时组件的value属性绑定到deadline变量，表示倒计时的截止时间。format属性指定了倒计时的显示格式为"HH:mm:ss:SSS"，即时、分、秒和毫秒。class属性设置了倒计时组件的样式为countdown。

 

在脚本部分，使用Date.now()获取当前时间戳，并通过加法运算计算出倒计时的截止时间。这里的计算是将当前时间加上2天（1000 * 60 * 60 * 24 * 2毫秒）和30秒（1000 * 30毫秒）。

 

在样式部分，使用了scoped关键字将样式限定在当前组件中。.countdown选择器设置了倒计时组件的样式，包括字体大小、颜色、内边距、边框圆角和阴影效果。

 

这段代码可以用于在Vue项目中展示一个带有倒计时功能的UI组件，可以根据需要进行修改和扩展。

需求实战二

效果展示

代码展示

<template>
    <ARow>
        <ACol>
            <a-statistic-countdown
                :value="deadline"
                format="HH:mm:ss:SSS"
                style="
          margin-right: 50px;
          font-size: 48px;
          color: #00aaff;
          text-shadow: 0 0 10px #00aaff, 0 0 20px #00aaff, 0 0 30px #00aaff;
          animation: heartbeat 1s infinite;
          background: linear-gradient(45deg, #000000, #000000);
          background-clip: text;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          border: 2px solid #00aaff;
          border-radius: 10px;
          padding: 10px;
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.5), 0 0 10px rgba(0, 170, 255, 0.5);
        "
            />
        </ACol>
    </ARow>
</template>
<script setup lang="ts">
const deadline = Date.now() + 1000 * 60 * 60 * 24 * 2 + 1000 * 30;
</script>
<style scoped>
@keyframes heartbeat {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}
</style>

代码解读

这段代码是一个Vue组件模板，用于展示一个倒计时的统计数字。具体解读如下：

 

1. 在模板中，使用了<a-statistic-countdown>组件来展示倒计时。:value="deadline"表示将deadline变量的值作为倒计时的截止时间。format="HH:mm:ss:SSS"表示倒计时的显示格式为时:分:秒:毫秒。

 

2. 在样式中，设置了一系列样式属性来美化倒计时的显示效果。其中包括字体大小、颜色、文本阴影、动画效果、背景渐变、边框、圆角、内边距和阴影等。

 

3. 在脚本中，定义了一个deadline变量，表示倒计时的截止时间。这里使用了Date.now()获取当前时间戳，并加上2天和30秒的时间作为截止时间。

 

4. 在样式中，定义了一个名为heartbeat的关键帧动画，实现了一个心跳效果。动画从初始状态开始，通过transform: scale()属性来改变元素的大小，从而实现心跳效果。

 

总体来说，这段代码实现了一个带有动态倒计时效果的统计数字展示组件，并通过一系列样式属性和动画效果来增强其视觉效果。

需求实战三

样式展示

代码展示

<template>
    <div class="countdown-container">
        <ARow>
            <ACol>
                <a-statistic-countdown
                    :value="deadline"
                    format="HH:mm:ss:SSS"
                    class="countdown"
                />
            </ACol>
        </ARow>
    </div>
</template>

<script setup lang="ts">

const deadline = Date.now() + 1000 * 60 * 60 * 24 * 2 + 1000 * 30;
</script>

<style scoped>
.countdown-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width:200px;
    height:200px;
    overflow: hidden;
}

.countdown {
    font-size: 48px;
    color: #00aaff;
    text-shadow: 0 0 10px #00aaff, 0 0 20px #00aaff, 0 0 30px #00aaff;
    animation: heartbeat 1s infinite;
    background-clip: text;

    border: 2px solid #00aaff;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5), 0 0 10px rgba(0, 170, 255, 0.5);
}

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

代码解读

这段代码是一个 Vue 组件，用于展示一个倒计时的效果。具体解读如下：

 

1. 在 HTML 模板中，使用了 a-statistic-countdown 组件来展示倒计时的数值。:value="deadline" 绑定了 deadline 变量作为倒计时的截止时间，format="HH:mm:ss:SSS" 设置了倒计时的数值格式为小时、分钟、秒和毫秒。

 

2. 在 <script> 标签中，使用 const 定义了一个 deadline 变量，它的值为当前时间加上两天和三十秒的时间间隔。

 

3. 在 <style> 标签中，使用了 CSS 样式来设置倒计时的样式。.countdown-container 类用于设置倒计时的容器样式，其中使用了 display: flex; 和其他属性来实现居中对齐。.countdown 类设置了倒计时数字的样式，包括字体大小、颜色、文本阴影等效果。@keyframes heartbeat 是一个动画样式，用于实现倒计时数字的心跳效果。