105 lines
2.2 KiB
Vue
105 lines
2.2 KiB
Vue
<template>
|
||
<view class="info-summary">
|
||
<view class="left">
|
||
<view style="display: flex; align-items: center; gap: 10rpx">
|
||
<img src="@/assets/zixun/title_text.png" class="banner_title" />
|
||
<text class="date">({{ dayjs(new Date().getTime()).format("MM/DD") }})</text>
|
||
</view>
|
||
|
||
<text class="sub_title">覆盖行业、产业，风口的精选资讯数量</text>
|
||
</view>
|
||
<view class="right">
|
||
<!-- <text class="num">{{ count }}</text> -->
|
||
<countTo :startVal="lastCount" :endVal="count" :duration="5000" class="num"></countTo>
|
||
|
||
<text class="sub_title" style="margin-left: 5rpx">条</text>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, watch, onUnmounted, reactive } from "vue";
|
||
// import { defineProps } from "vue";
|
||
import dayjs from "dayjs/esm/index";
|
||
import countTo from "@/components/count-to/vue-countTo.vue";
|
||
|
||
// 定义接收的 props，date 为日期，count 为数量
|
||
const props = defineProps({
|
||
count: {
|
||
type: Number,
|
||
required: true,
|
||
},
|
||
});
|
||
|
||
const lastCount = ref(0);
|
||
watch(
|
||
() => props.count,
|
||
(newValue, oldValue) => {
|
||
lastCount.value = newValue;
|
||
},
|
||
{
|
||
deep: true,
|
||
}
|
||
);
|
||
</script>
|
||
|
||
<style scoped>
|
||
.info-summary {
|
||
/* border: 1rpx solid #e3ecfd; */
|
||
|
||
|
||
background: #FFFFFF;
|
||
border-radius: 20px;
|
||
border: 1px solid #FFFFFF;
|
||
border-image: linear-gradient(180deg, rgba(227, 236, 253, 1), rgba(245, 248, 254, 1)) 1 1;
|
||
|
||
|
||
border-radius: 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 30rpx;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.left {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.banner_title {
|
||
width: 210rpx;
|
||
height: 36rpx;
|
||
}
|
||
|
||
.date {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #333333;
|
||
/* line-height: 33rpx; */
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.sub_title {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 22rpx;
|
||
color: #999999;
|
||
line-height: 30rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-top: 10rpx;
|
||
}
|
||
|
||
.num {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 50rpx;
|
||
color: #3f80fa;
|
||
line-height: 59rpx;
|
||
text-align: right;
|
||
font-style: normal;
|
||
}
|
||
</style>
|