87 lines
2.0 KiB
Vue
87 lines
2.0 KiB
Vue
<template>
|
||
<!-- 重点保供企业分布 -->
|
||
<ul class="flex align-center"
|
||
style="width: 100%; height: 100%">
|
||
<li class="itemQs tc"
|
||
v-for="it in list"
|
||
:key="it">
|
||
<div><img :src="it.icon"></div>
|
||
<div class="text">{{ it.label }}</div>
|
||
<div class="line"></div>
|
||
<div class="info">
|
||
<Statis :count="it.gwqk" :height="4"
|
||
:len="3" danw="rem"/>
|
||
</div>
|
||
<div class="num">（{{ it.dw }}）</div>
|
||
</li>
|
||
</ul>
|
||
</template>
|
||
|
||
<script setup>
|
||
import Statis from "@/components/statis.vue";
|
||
import * as echarts from "echarts";
|
||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||
import emitter from "@/utils/eventBus.js";
|
||
import { onMounted, nextTick, reactive, ref } from "vue";
|
||
const list = ref([
|
||
{ label: '第一产业', gwqk: 3, dw: '家', icon: require('@/assets/images/icon_37.png') },
|
||
{ label: '第二产业', gwqk: 93, dw: '家', icon: require('@/assets/images/icon_38.png') },
|
||
{ label: '第三产业', gwqk: 32, dw: '家', icon: require('@/assets/images/icon_39.png') },
|
||
])
|
||
onMounted(() => {
|
||
});
|
||
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
@mixin textColor($color1, $color2) {
|
||
background-image: linear-gradient(0deg, $color1 0%, $color2 100%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
|
||
.itemQs {
|
||
flex: 1 0 0;
|
||
img {
|
||
width: 2.567vw;
|
||
}
|
||
.text {
|
||
font-size: 1.2vw;
|
||
font-weight: 600;
|
||
font-weight: bolder;
|
||
@include textColor(#03c087, #ffffff);
|
||
}
|
||
|
||
.line {
|
||
margin: 0.208vw auto 0.313vw;
|
||
width: 3.542vw;
|
||
height: 0.208vw;
|
||
background: url("~@/assets/images/icon_27.png") no-repeat center center;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.info {
|
||
font-size: 1.042vw;
|
||
line-height: 1.563vw;
|
||
font-family: "DigifaceWide";
|
||
}
|
||
|
||
.num {
|
||
text-align: center;
|
||
font-size: 1.9rem;
|
||
line-height: 1.25vw;
|
||
font-family: "DigifaceWide";
|
||
}
|
||
}
|
||
|
||
::v-deep .fp-box li {
|
||
width: 0.729vw;
|
||
margin-right: 0.3vw;
|
||
height: 4rem;
|
||
span{
|
||
height: 4rem;
|
||
line-height: 4rem;
|
||
font-size: 4rem;
|
||
}
|
||
}
|
||
|
||
</style> |