调整
This commit is contained in:
@ -2,13 +2,19 @@
|
||||
<div class="training-products-container">
|
||||
<div class="products-section">
|
||||
<div class="products-grid">
|
||||
<div class="product-card" v-for="(item, index) in products" :key="index">
|
||||
<div
|
||||
class="product-card"
|
||||
v-for="(item, index) in products"
|
||||
:key="index"
|
||||
>
|
||||
<div class="icon">
|
||||
<img :src="item.icon" :alt="item.name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="label">{{ item.name }}</div>
|
||||
<div class="value">{{ animatedValues.products[index] }}<span>人</span></div>
|
||||
<div class="value">
|
||||
{{ animatedValues.products[index] }}<span>人</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -17,28 +23,28 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { ref, onMounted } from "vue";
|
||||
|
||||
const products = ref([
|
||||
{
|
||||
name: '退役军人',
|
||||
name: "退役军人",
|
||||
count: 54,
|
||||
icon: require('@/assets/images/42.png')
|
||||
icon: require("@/assets/images/42.png")
|
||||
},
|
||||
{
|
||||
name: '困难毕业生',
|
||||
name: "毕业生",
|
||||
count: 570,
|
||||
icon: require('@/assets/images/43.png')
|
||||
icon: require("@/assets/images/43.png")
|
||||
},
|
||||
{
|
||||
name: '领金人员',
|
||||
name: "领金人员",
|
||||
count: 11,
|
||||
icon: require('@/assets/images/44.png')
|
||||
icon: require("@/assets/images/44.png")
|
||||
},
|
||||
{
|
||||
name: '长期失业人员',
|
||||
name: "长期失业人员",
|
||||
count: 7,
|
||||
icon: require('@/assets/images/45.png')
|
||||
icon: require("@/assets/images/45.png")
|
||||
}
|
||||
]);
|
||||
|
||||
@ -53,7 +59,9 @@ const animateNumber = (startValue, endValue, duration, updateCallback) => {
|
||||
const animate = () => {
|
||||
const currentTime = Date.now();
|
||||
const progress = Math.min((currentTime - startTime) / duration, 1);
|
||||
const currentValue = Math.floor(startValue + (endValue - startValue) * progress);
|
||||
const currentValue = Math.floor(
|
||||
startValue + (endValue - startValue) * progress
|
||||
);
|
||||
|
||||
updateCallback(currentValue);
|
||||
|
||||
@ -67,7 +75,12 @@ const animateNumber = (startValue, endValue, duration, updateCallback) => {
|
||||
|
||||
onMounted(() => {
|
||||
products.value.forEach((item, index) => {
|
||||
animateNumber(0, item.count, 2000, (value) => animatedValues.value.products[index] = value);
|
||||
animateNumber(
|
||||
0,
|
||||
item.count,
|
||||
2000,
|
||||
(value) => (animatedValues.value.products[index] = value)
|
||||
);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@ -128,7 +141,7 @@ onMounted(() => {
|
||||
color: #8cc8ff;
|
||||
margin-bottom: 8px;
|
||||
font-family: "YSBTH";
|
||||
@include textColor(#003D63, #ffffff);
|
||||
@include textColor(#003d63, #ffffff);
|
||||
}
|
||||
|
||||
.value {
|
||||
|
||||
Reference in New Issue
Block a user