Large-Visual-Screen
/
vehicle-monitor
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 中间部分完成

This commit is contained in:
Bunny 2025-02-26 18:27:17 +08:00
parent cf441ed054
commit d2c3715feb
8 changed files with 133 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/layout/arrow/arrow-down.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 362 B

BIN
src/assets/images/layout/arrow/arrow-item.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 205 B

BIN
src/assets/images/layout/arrow/arrow-up.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 379 B

104
src/layout/components/AppMain/MainCenter.vue
View File

@ -1,4 +1,7 @@
<script lang="ts" setup></script>
<script lang="ts" setup>
import MainCenterItem from '@/layout/components/AppMain/components/MainCenterItem.vue';
import MainCenterPercent from '@/layout/components/AppMain/components/MainCenterPercent.vue';
</script>
<template>
<div class="main-center flex-center">
@ -9,10 +12,22 @@
<!-- 中间布局 -->
<div class="main-inner">
<div class="main-inner-1">智能管控</div>
<div class="main-inner-2">智能管控</div>
<div class="main-inner-3">智能管控</div>
<div class="main-inner-3">智能管控</div>
<div class="pos-relative">
<MainCenterItem :count="45" class="top-[37px] left-[40px] w-[175px]" door="西北门" />
<MainCenterPercent :percent="44" class="top-[73px] left-[193px]" />
</div>
<div class="pos-relative">
<MainCenterItem :count="67" class="top-[37px] left-[120px] w-[175px]" door="东北门" />
<MainCenterPercent :percent="25" class="top-[73px] right-[192px]" />
</div>
<div class="pos-relative">
<MainCenterItem :count="345" class="top-[45px] left-[34px] w-[175px]" door="西南门" />
<MainCenterPercent :percent="25" class="top-[40px] left-[193px]" />
</div>
<div class="pos-relative">
<MainCenterItem :count="145" class="top-[45px] left-[130px] w-[175px]" door="东南门" />
<MainCenterPercent :percent="44" class="top-[40px] left-[66px]" />
</div>
<div class="main-inner-center">
<div class="main-inner-middle flex-center">
@ -30,50 +45,55 @@
height: 650px;
background: url('@/assets/images/bg/bg-middle.png') no-repeat center;
background-size: cover;
}
.main-center-title {
height: 61px;
background: url('@/assets/images/bg/bg-main-title.png');
// 中间部分标题
.main-center-title {
height: 61px;
background: url('@/assets/images/bg/bg-main-title.png') no-repeat center;
background-size: cover;
h1 {
font-size: 22px;
text-align: center;
}
}
// 中间部分四个部分
.main-inner {
margin: 28px 0 77px 0;
width: 666px;
position: relative;
height: 400px;
background: url('@/assets/images/bg/bg-main-1.png') no-repeat center;
background-size: cover;
h1 {
font-size: 22px;
text-align: center;
}
}
// 中心智能管控
.main-inner-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 138px;
height: 138px;
// 中间部分四个部分
.main-inner {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
position: relative;
margin: 28px 0 77px 0;
width: 666px;
height: 400px;
background: url('@/assets/images/bg/bg-main-1.png') no-repeat center;
background-size: cover;
.main-inner-middle {
width: 100%;
height: 100%;
background: url('@/assets/images/bg/bg-main-center.png');
background-size: cover;
animation: rotate 30s linear infinite;
}
// 中心智能管控
.main-inner-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 138px;
height: 138px;
h1 {
width: 53px;
font-size: 19px;
text-align: center;
animation: rotate-reverse 30s linear infinite;
.main-inner-middle {
width: 100%;
height: 100%;
background: url('@/assets/images/bg/bg-main-center.png');
background-size: cover;
animation: rotate 30s linear infinite;
}
h1 {
width: 53px;
font-size: 19px;
text-align: center;
animation: rotate-reverse 30s linear infinite;
}
}
}
</style>

13
src/layout/components/AppMain/MainLeft.vue
View File

@ -1,7 +1,7 @@
<script lang="ts" setup></script>
<template>
<div class="left mr-[20px ]">
<div class="left mr-[20px]">
<div class="pt-[55px] pl-[25px]" style="transform: rotateY(180deg)">
<!-- 路况 -->
<div class="road-condition w-[218px] h-[59px]">
@ -13,27 +13,27 @@
<li class="flex-x-around w-[330px] h-[60px]">
<img alt="car-1" src="@/assets/images/layout/car/car-1.png" />
<p class="c-white">入卡口（西北门）</p>
<span class="dashed-circle c-[#66FFFF] border-b-[#66FFFF]">畅通</span>
<span class="dashed-circle c-primary-secondary border-b-primary-secondary">畅通</span>
</li>
<li class="flex-x-around w-[330px] h-[60px]">
<img alt="car-1" src="@/assets/images/layout/car/car-1.png" />
<p class="c-white">入卡口（东北门）</p>
<span class="dashed-circle c-[#66FFFF] border-b-[#66FFFF]">畅通</span>
<span class="dashed-circle c-primary-secondary border-b-primary-secondary">畅通</span>
</li>
<li class="flex-x-around w-[330px] h-[60px]">
<img alt="car-1" src="@/assets/images/layout/car/car-2.png" />
<p class="c-white">入卡口（东北门）</p>
<span class="dashed-circle c-[#FFBE44] border-b-[#FFBE44]">拥堵</span>
<span class="dashed-circle c-warning border-b-warning">拥堵</span>
</li>
<li class="flex-x-around w-[330px] h-[60px]">
<img alt="car-1" src="@/assets/images/layout/car/car-1.png" />
<p class="c-white">入卡口（东南门）</p>
<span class="dashed-circle c-[#66FFFF] border-b-[#66FFFF]">畅通</span>
<span class="dashed-circle c-primary-secondary border-b-primary-secondary">畅通</span>
</li>
</ul>
<!-- 建议 -->
<div class="suggest">
<div class="suggest c-white">
<h5>车流量建议</h5>
<p>
高峰时段大量车流量容易造成拥堵，主要由XXX企业、XXX企业的车辆构成，
@ -64,7 +64,6 @@
padding: 15px 14px 17px 20px;
width: 330px;
height: 157px;
color: #fff;
font-size: 14px;
background: url('@/assets/images/bg/bg-suggest.png') no-repeat center;
background-size: cover;

22
src/layout/components/AppMain/components/MainCenterItem.vue Normal file
View File

@ -0,0 +1,22 @@
<script lang="ts" setup>
defineProps({
count: Number,
door: String,
});
</script>
<template>
<div class="flex-y-between position-relative">
<h1 class="font-size-[34px] c-primary-secondary">{{ count }}</h1>
<div class="mt-[-12px] font-size-[16px] c-white">今日 进出车辆数/辆</div>
<div class="mt-[7px] font-size-[18px] c-primary">{{ door }}</div>
<div class="flex-center mt-[8px] c-primary">
<span class="float-left font-size-[14px] c-primary-secondary">查看</span>
<img
alt="arrow-item"
class="float-left h-[16px]"
src="@/assets/images/layout/arrow/arrow-item.png"
/>
</div>
</div>
</template>

41
src/layout/components/AppMain/components/MainCenterPercent.vue Normal file
View File

@ -0,0 +1,41 @@
<script lang="tsx" setup>
defineProps({
percent: Number,
});
import ArrowDown from '@/assets/images/layout/arrow/arrow-down.png';
import ArrowUp from '@/assets/images/layout/arrow/arrow-up.png';
const calPercentItem: Element = (percent: number) => {
return percent > 25 ? (
<div class="flex-center font-size-[20px] c-warning">
<img alt="arrow" class="mt-2 h-[23px]" src={ArrowUp} />
<span>{percent}%</span>
</div>
) : (
<div class="flex-center font-size-[20px] c-primary-secondary">
<img alt="arrow" class="mt-2 h-[23px]" src={ArrowDown} />
<span>{percent}%</span>
</div>
);
};
</script>
<template>
<div class="main-center-percent">
<div class="flex-y-around mt-[16px] mr-[13px] mb-[20px] ml-[13px]">
<component :is="calPercentItem(percent)" />
<span class="font-size-[15px] text-center c-info">环比</span>
</div>
</div>
</template>
<style lang="scss" scoped>
.main-center-percent {
position: absolute;
width: 86px;
height: 86px;
background: url('@/assets/images/bg/bg-main-2.png') no-repeat center;
background-size: cover;
}
</style>

2
uno.config.ts
View File

@ -16,11 +16,13 @@ export default defineConfig({
'flex-x-around': 'flex items-center justify-around',
'flex-y-center': 'flex flex-col flex-wrap justify-center items-center',
'flex-y-between': 'flex flex-col flex-wrap justify-between items-center',
'flex-y-around': 'flex flex-col flex-wrap justify-around items-center',
},
theme: {
colors: {
primary: '#027AFF',
'primary-secondary': '#00FFFF',
info: '#7CC1FF',
warning: '#FFBE44',
'warning-secondary': '#FEDB65',
},