Merge branch 'master' of http://61.139.16.27:26684/DEV_ZZ/rsxm-master
This commit is contained in:
@ -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 {
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user