lixuefeng/fengjie-datascreen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat：完善整体样式

Browse Source
This commit is contained in:
zjc
2025-01-02 18:32:49 +08:00
parent d67ac75031
commit ab1ab210a9
23 changed files with 744 additions and 305 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/views/home/components/box-1.vue
View File

@@ -6,9 +6,10 @@
</template>
</Title1>
<div class="flex pt-20">
<!-- :class="{ core: index == 0, queue: index == 1, congestion: index == 2 }" -->
<div class="item" v-for="(item, index) in homeData?.scenicSpot" :key="index">
<img class="item-icon" src="@/assets/images/core.png" alt="" />
<img v-if="index == 0" class="item-icon" src="@/assets/images/core.png" />
<img v-if="index == 1" class="item-icon" src="@/assets/images/queue.png" />
<img v-if="index == 2" class="item-icon" src="@/assets/images/congestion.png" />
<span class="item-label">{{ item.name }}</span>
<div class="item-value flex align-end rela">
<countup :end-val="item.value" /><span class="unit">个</span>
@@ -89,19 +90,19 @@
<Title2 title="景区承载量" />
<div class="statistic">
<div class="statistic-item">
<gauge id="gauge1" />
<gauge :value="80" />
<span class="statistic-title">三峡之巅</span>
</div>
<div class="statistic-item">
<gauge id="gauge2" />
<gauge :value="50" />
<span class="statistic-title">三峡之巅</span>
</div>
<div class="statistic-item">
<gauge id="gauge3" />
<gauge :value="50" />
<span class="statistic-title">三峡之巅</span>
</div>
<div class="statistic-item">
<gauge id="gauge4" />
<gauge :value="50" />
<span class="statistic-title">三峡之巅</span>
</div>
</div>
@@ -152,7 +153,7 @@
<Title1 title="游客画像" />
<div class="flex">
<div class="box-1">
<div class="age-box">
<Title3 title="年龄/性别占比" />
<age />
<div class="count">总人数：<countup :end-val="ageRateTotal" /></div>
@@ -161,7 +162,8 @@
v-for="(item, index) in homeData?.userPortrait.genderRate"
:key="index"
>
<img class="icon" src="@/assets/images/man.png" />
<img v-if="item.name == '男'" class="icon" src="@/assets/images/man.png" />
<img v-if="item.name == '女'" class="icon" src="@/assets/images/woman.png" />
<div class="bg">
<span class="text">{{ item.name }}性</span>
<div class="progress">
@@ -183,7 +185,7 @@
</div>
<div class="box-1">
<Title3 title="购票来源" />
<div class="count">总人数：<countup :end-val="channelTotal" /></div>
<div class="count">游客总数：<countup :end-val="channelTotal" /></div>
<ticket />
</div>
</div>
@@ -253,7 +255,7 @@
}
&-label {
position: absolute;
left: vw(80);
left: vw(70);
top: vh(-10);
font-weight: 400;
font-size: vw(14);
@@ -261,7 +263,7 @@
}
&-value {
position: absolute;
left: vw(80);
left: vw(70);
.countup-wrap {
color: #02f9fa;
font-size: vw(28);
@@ -274,15 +276,6 @@
font-size: vw(14);
margin-bottom: vh(4);
}
.core {
background-image: url('@/assets/images/core.png');
}
.queue {
background-image: url('@/assets/images/queue.png');
}
.congestion {
background-image: url('@/assets/images/congestion.png');
}
.box {
width: vw(384);
height: vh(320);
@@ -327,16 +320,22 @@
}
}
}
.box-1 {
width: vw(253);
.age-box {
width: vw(290);
height: vh(290);
background-image: url('@/assets/images/bg-3.png');
background-size: 100% 100%;
&:nth-child(1) {
margin-right: vw(10);
margin-right: vw(8);
}
}
.box-1 {
width: vw(240);
height: vh(290);
background-image: url('@/assets/images/bg-3.png');
background-size: 100% 100%;
&:nth-child(2) {
margin-right: vw(10);
margin-right: vw(8);
}
}
.count {
@@ -375,8 +374,11 @@
color: rgba(255, 255, 255, 0.9);
}
.progress {
width: vw(120);
width: vw(170);
margin-left: vw(4);
:deep(.el-progress-bar__outer) {
background-color: #0858ae !important;
}
}
.man {
font-weight: bold;