This commit is contained in:
lcw
2025-10-23 12:46:36 +08:00
2 changed files with 45 additions and 35 deletions

View File

@ -2,13 +2,19 @@
<div class="training-products-container"> <div class="training-products-container">
<div class="products-section"> <div class="products-section">
<div class="products-grid"> <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"> <div class="icon">
<img :src="item.icon" :alt="item.name" /> <img :src="item.icon" :alt="item.name" />
</div> </div>
<div class="info"> <div class="info">
<div class="label">{{ item.name }}</div> <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> </div>
</div> </div>
@ -17,28 +23,28 @@
</template> </template>
<script setup> <script setup>
import { ref, onMounted } from 'vue'; import { ref, onMounted } from "vue";
const products = ref([ const products = ref([
{ {
name: '退役军人', name: "退役军人",
count: 54, count: 230,
icon: require('@/assets/images/42.png') icon: require("@/assets/images/42.png")
}, },
{ {
name: '困难毕业生', name: "毕业生",
count: 570, count: 570,
icon: require('@/assets/images/43.png') icon: require("@/assets/images/43.png")
}, },
{ {
name: '领金人员', name: "就业困难人员",
count: 11, count: 27,
icon: require('@/assets/images/44.png') icon: require("@/assets/images/44.png")
}, },
{ {
name: '长期失业人员', name: "其他",
count: 7, count: 58,
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 animate = () => {
const currentTime = Date.now(); const currentTime = Date.now();
const progress = Math.min((currentTime - startTime) / duration, 1); 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); updateCallback(currentValue);
@ -67,7 +75,12 @@ const animateNumber = (startValue, endValue, duration, updateCallback) => {
onMounted(() => { onMounted(() => {
products.value.forEach((item, index) => { 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> </script>
@ -128,7 +141,7 @@ onMounted(() => {
color: #8cc8ff; color: #8cc8ff;
margin-bottom: 8px; margin-bottom: 8px;
font-family: "YSBTH"; font-family: "YSBTH";
@include textColor(#003D63, #ffffff); @include textColor(#003d63, #ffffff);
} }
.value { .value {

View File

@ -2,13 +2,12 @@
<div class="bigScrenn cppBox"> <div class="bigScrenn cppBox">
<!-- 第一部分 --> <!-- 第一部分 -->
<div class="none-Cont"> <div class="none-Cont">
<Head title='"产教评"融合培训平台'></Head> <Head title='"产教评"融合培训平台'></Head>
<div class="conttent"> <div class="conttent">
<div class="bt-Title tc"><span>三产技能人才分析</span></div> <div class="bt-Title tc"><span>三产技能人才分析</span></div>
<ul class="conttentOne flex just-between"> <ul class="conttentOne flex just-between">
<li class="childOne"> <li class="childOne">
<div class="title-small">产值及技能人才比对</div> <div class="title-small">崇州产值与服务企业技能人才需求</div>
<div class="childCnt"> <div class="childCnt">
<Czjjnrcdd></Czjjnrcdd> <Czjjnrcdd></Czjjnrcdd>
</div> </div>
@ -92,17 +91,17 @@
</template> </template>
<script setup> <script setup>
import Czjjnrcdd from './components/czjjnrcdd.vue'; import Czjjnrcdd from "./components/czjjnrcdd.vue";
import Czjjnrcdb from './components/czjjnrcdb.vue'; import Czjjnrcdb from "./components/czjjnrcdb.vue";
import TrainingInstitutions from './components/trainingInstitutions.vue'; import TrainingInstitutions from "./components/trainingInstitutions.vue";
import Pxxm from './components/pxxm.vue'; import Pxxm from "./components/pxxm.vue";
import Qyzdpxb from './components/qyzdpxb.vue'; import Qyzdpxb from "./components/qyzdpxb.vue";
import sjpx from './components/sjpx.vue'; import sjpx from "./components/sjpx.vue";
import Zyzgzs from './components/zyzgzs.vue'; import Zyzgzs from "./components/zyzgzs.vue";
import zdpxqt from './components/zdpxqt.vue'; import zdpxqt from "./components/zdpxqt.vue";
import pxcg from './components/pxcg.vue'; import pxcg from "./components/pxcg.vue";
import bfzs from './components/bfzs.vue'; import bfzs from "./components/bfzs.vue";
import pfjgfb from './components/pfjgfb.vue'; import pfjgfb from "./components/pfjgfb.vue";
import Head from "@/views/largeScreen/layout/head.vue"; import Head from "@/views/largeScreen/layout/head.vue";
import { qcckPost, qcckGet } from "@/api/qcckApi.js"; import { qcckPost, qcckGet } from "@/api/qcckApi.js";
import emitter from "@/utils/eventBus.js"; import emitter from "@/utils/eventBus.js";
@ -115,9 +114,7 @@ import {
onBeforeUnmount onBeforeUnmount
} from "vue"; } from "vue";
const { proxy } = getCurrentInstance(); const { proxy } = getCurrentInstance();
const data = reactive({ const data = reactive({});
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>