122 lines
3.3 KiB
Vue
122 lines
3.3 KiB
Vue
<template>
|
|
<section class="driving-3">
|
|
<img class="rotating-visual" src="/imgs/driving/3-item-1.png" alt="" />
|
|
<span v-for="item in smallBallCounts" :key="item.name" class="small-ball-count"
|
|
:style="{ left: `${item.left}px`, top: `${item.top}px`, fontSize: `${item.fontSize}px` }">{{
|
|
constructionStats[item.key] }}</span>
|
|
<div class="total-count">
|
|
<span>总施工量</span>
|
|
<strong>{{ formatNumber(constructionStats.total) }}</strong>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { reactive } from 'vue'
|
|
|
|
const constructionStats = reactive({
|
|
protection: 6,
|
|
database: 6,
|
|
signal: 183,
|
|
generalAffairs: 19,
|
|
power: 82,
|
|
vehicle: 1,
|
|
track: 20,
|
|
fleet: 30,
|
|
total: 63935
|
|
})
|
|
|
|
const smallBallCounts = [
|
|
{ name: '保护区', key: 'protection', left: 125, top: 105, fontSize: 30 },
|
|
{ name: '数据库', key: 'database', left: 354, top: 121, fontSize: 38 },
|
|
{ name: '通号', key: 'signal', left: 541, top: 158, fontSize: 34 },
|
|
{ name: '总务', key: 'generalAffairs', left: 787, top: 108, fontSize: 30 },
|
|
{ name: '供电', key: 'power', left: 190, top: 278, fontSize: 38 },
|
|
{ name: '车辆', key: 'vehicle', left: 700, top: 256, fontSize: 38 },
|
|
{ name: '轨行区', key: 'track', left: 117, top: 486, fontSize: 34 },
|
|
{ name: '车队', key: 'fleet', left: 765, top: 480, fontSize: 36 }
|
|
]
|
|
|
|
const formatNumber = value => Number(value ?? 0).toLocaleString('en-US')
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.driving-3 {
|
|
position: absolute;
|
|
left: 2155.13px;
|
|
top: 123.99px;
|
|
width: 866.87px;
|
|
height: 926.8px;
|
|
opacity: 1;
|
|
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: url('/imgs/driving/3-bg.png') no-repeat center center;
|
|
background-size: cover;
|
|
}
|
|
|
|
.rotating-visual {
|
|
position: absolute;
|
|
top: 328px;
|
|
left: 250px;
|
|
width: 380px;
|
|
height: 379px;
|
|
object-fit: contain;
|
|
transform-origin: center;
|
|
animation: driving-3-rotate 18s linear infinite;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.small-ball-count {
|
|
position: absolute;
|
|
z-index: 2;
|
|
color: #fff;
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
text-align: center;
|
|
text-shadow: 0 2px 4px rgba(0, 38, 118, .7);
|
|
transform: translateX(-50%);
|
|
white-space: nowrap;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.total-count {
|
|
position: absolute;
|
|
top: 451px;
|
|
left: 250px;
|
|
z-index: 2;
|
|
display: flex;
|
|
width: 380px;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
color: #fff;
|
|
text-align: center;
|
|
pointer-events: none;
|
|
|
|
span {
|
|
font-size: 42px;
|
|
line-height: 52px;
|
|
text-shadow: 0px 0px 10px rgba(30, 121, 255, 0.8);
|
|
}
|
|
|
|
strong {
|
|
margin-top: 18px;
|
|
font-size: 50px;
|
|
font-weight: 600;
|
|
line-height: 62px;
|
|
text-shadow: 0px 1px 4px rgba(7, 44, 137, 0.5);
|
|
}
|
|
}
|
|
|
|
@keyframes driving-3-rotate {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
</style>
|