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
2024-12-25 12:52:26 +08:00
parent 1d301b2d8f
commit 45c85763dd
10 changed files with 151 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/views/home/components/box-2.vue
View File

@@ -44,7 +44,19 @@
<span class="statistic-value">通畅</span>
</div>
</div>
<Title3 title="景区排队人数" />
<div class="flex rela">
<Title3 title="景区排队人数" />
<div class="dropdown">
<Dropdown
label="选择排队景区"
:options="[
{ label: '山峡之巅', value: 100 },
{ label: '白帝城', value: 100 },
{ label: '龙桥河', value: 100 }
]"
/>
</div>
</div>
<div class="pt-20">
<Line
:width="370"
@@ -218,6 +230,12 @@
width: vw(60);
height: auto;
}
.dropdown {
position: absolute;
right: vw(8);
bottom: -30%;
z-index: 990;
}
.item {
position: relative;
flex: 1;
@@ -366,7 +384,7 @@
margin-top: vh(20);
width: 100%;
height: vh(106);
background-color: radial-gradient(to right, #0a4190 0%, rgba(0, 77, 136, 0.6) 100%);
background: linear-gradient(to right, rgba(0, 77, 136, 0) 0%, rgba(0, 77, 136, 0.6) 100%);
.title {
width: vw(253);
height: vh(28);

35
src/views/home/components/box-3.vue
View File

@@ -56,13 +56,8 @@
</div>
<div class="progress-box">
<span class="text">工单完成数</span>
<div class="progress">
<el-progress
:percentage="50"
:show-text="false"
color="linear-gradient( to right,
#00C4F9 0%, #00C4F9 100%)"
/>
<div class="progress-1">
<el-progress :percentage="50" :show-text="false" />
</div>
<span class="value">50%</span>
</div>
@@ -80,13 +75,8 @@
</div>
<div class="progress-box">
<span class="text">工单完成数</span>
<div class="progress">
<el-progress
:percentage="50"
:show-text="false"
color="linear-gradient( to right,
#DA3637 0%, #DA3637 100%)"
/>
<div class="progress-2">
<el-progress :percentage="50" :show-text="false" />
</div>
<span class="value">50%</span>
</div>
@@ -120,8 +110,8 @@
</template>
<script setup>
import ScrollNumber from '@/components/ScrollNumber/index.vue'
import countup from 'vue-countup-v3'
import ScrollNumber from '@/components/ScrollNumber/index.vue'
let count = ref('6945959')
</script>
@@ -225,6 +215,21 @@
}
.progress {
width: vw(100);
:deep(.el-progress-bar__outer) {
background-color: #0858ae !important;
}
}
.progress-1 {
@extend .progress;
:deep(.el-progress-bar__inner) {
background: linear-gradient(to right, #0566bb 0%, #00c4f9 100%);
}
}
.progress-2 {
@extend .progress;
:deep(.el-progress-bar__inner) {
background: linear-gradient(to right, #0566bb 0%, #d6383a 100%);
}
}
.value {
margin-left: vw(10);