105 lines
2.0 KiB
Vue
105 lines
2.0 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">评分80分以上精选咨洵数量</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 {
|
|||
|
|
background: #f5f8fe;
|
|||
|
|
border: 1rpx solid #e3ecfd;
|
|||
|
|
|
|||
|
|
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>
|