refactor: smart-park优化
This commit is contained in:
parent
cbfc42e23d
commit
09a04301f6
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 362 B After Width: | Height: | Size: 362 B |
|
Before Width: | Height: | Size: 205 B After Width: | Height: | Size: 205 B |
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 379 B After Width: | Height: | Size: 379 B |
|
Before Width: | Height: | Size: 785 B After Width: | Height: | Size: 785 B |
|
Before Width: | Height: | Size: 967 B After Width: | Height: | Size: 967 B |
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 1.0 KiB |
|
Before Width: | Height: | Size: 34 KiB After Width: | Height: | Size: 34 KiB |
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 21 KiB |
|
Before Width: | Height: | Size: 402 B After Width: | Height: | Size: 402 B |
|
Before Width: | Height: | Size: 308 KiB After Width: | Height: | Size: 308 KiB |
|
Before Width: | Height: | Size: 927 B After Width: | Height: | Size: 927 B |
|
Before Width: | Height: | Size: 195 KiB After Width: | Height: | Size: 195 KiB |
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 2.4 KiB |
|
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 2.4 KiB |
|
Before Width: | Height: | Size: 3.9 KiB After Width: | Height: | Size: 3.9 KiB |
|
|
@ -27,4 +27,6 @@
|
|||
font-size: 12px;
|
||||
color: var(--color-info-secondary);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -1,2 +1 @@
|
|||
@use "@/assets/styles/views/src/smart-parking";
|
||||
@use "@/assets/styles/views/src/manage-forms";
|
||||
|
|
|
|||
|
|
@ -0,0 +1,32 @@
|
|||
<script lang="ts" setup>
|
||||
import { TimeSelectType } from '@/components/TimeSelect/type';
|
||||
|
||||
defineProps({
|
||||
timeList: Array<TimeSelectType>,
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<select class="time-select" name="timeSelect">
|
||||
<option v-for="(item, index) in timeList" :key="index" :value="item.value">
|
||||
{{ item.label }}
|
||||
</option>
|
||||
</select>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.time-select {
|
||||
float: left;
|
||||
width: 100px;
|
||||
height: 26px;
|
||||
font-size: 14px;
|
||||
background: rgba(24, 69, 135, 0.55);
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(14, 95, 255, 0.38);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
export interface TimeSelectType {
|
||||
value: string | number;
|
||||
label: string | number;
|
||||
}
|
||||
|
|
@ -17,9 +17,9 @@ const routes: RouteConfigsTable[] = [
|
|||
},
|
||||
|
||||
{
|
||||
path: '/smart-parking',
|
||||
path: '/smart-park',
|
||||
name: 'smartParking',
|
||||
component: () => import('@/views/smart-parking/index.vue'),
|
||||
component: () => import('@/views/smart-park/index.vue'),
|
||||
meta: { title: '智慧智能监管中心', subtitle: '车辆监控中心' },
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
<script lang="ts" setup></script>
|
||||
|
||||
<template>
|
||||
<div class="content-container">
|
||||
<ul class="card-list">
|
||||
<div class="manage-forms-content-container">
|
||||
<ul class="manage-forms-card-list">
|
||||
<li>进出口</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content-container {
|
||||
.manage-forms-content-container {
|
||||
width: 759px;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,90 @@
|
|||
<script lang="ts" setup></script>
|
||||
|
||||
<template>
|
||||
<ul>
|
||||
<li>
|
||||
<h1>报税金额</h1>
|
||||
<p class="c-warning-secondary">¥1551154545</p>
|
||||
</li>
|
||||
<li>
|
||||
<div class="flex-x-between">
|
||||
<div>
|
||||
<h1>企业数量</h1>
|
||||
<p class="c-primary-secondary">783</p>
|
||||
</div>
|
||||
<div>111</div>
|
||||
</div>
|
||||
<div class="enterprise-type">
|
||||
<span class="mr-[13px]">
|
||||
<i class="bg-primary-secondary" />
|
||||
国营企业 345
|
||||
</span>
|
||||
<span>
|
||||
<i class="bg-warning-secondary" />
|
||||
私营企业 345
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="flex-x-between">
|
||||
<h1>总投资金额</h1>
|
||||
<span class="font-size-[12px]">环比变化</span>
|
||||
<span class="font-size-[12px]">+123%</span>
|
||||
</div>
|
||||
<p class="c-primary-secondary">¥1551154545</p>
|
||||
</li>
|
||||
<li>
|
||||
<div class="flex-x-between">
|
||||
<h1>税收总金额</h1>
|
||||
<span class="font-size-[12px]">环比变化</span>
|
||||
<span class="font-size-[12px]">-123%</span>
|
||||
</div>
|
||||
<p class="c-primary-secondary">¥1551154545</p>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-content: flex-start;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
li {
|
||||
//margin: 15px 0 0 0;
|
||||
padding: 9px 16px 0 19px;
|
||||
margin: 15px 0 0 0;
|
||||
width: 242px;
|
||||
height: 124px;
|
||||
background: url('@/assets/images/manage-forms/bg/frame-1.png') no-repeat center;
|
||||
background-size: cover;
|
||||
|
||||
h1 {
|
||||
margin: 0 0 2px 0;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.enterprise-type {
|
||||
width: 100%;
|
||||
|
||||
span {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
i {
|
||||
display: inline-block;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
<script lang="tsx" setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
import formatter from '@/utils/digte-formatter';
|
||||
|
||||
const money = ref('1386114');
|
||||
|
||||
/** 显示金额 */
|
||||
const displayContent = () => {
|
||||
formatter(money);
|
||||
return (
|
||||
<>
|
||||
<span>¥</span>
|
||||
{money.value.split('').map((item, index) => (
|
||||
<span key={index}>{item}</span>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="money-digit">
|
||||
<component :is="displayContent()" />
|
||||
</div>
|
||||
<div>
|
||||
<div class="progress">111</div>
|
||||
<ul class="import-export-value flex-x-between">
|
||||
<li>
|
||||
进口额
|
||||
<i>¥1551154545</i>
|
||||
</li>
|
||||
<li class="thin-line h-[20px]" />
|
||||
<li>
|
||||
<i>¥1551154545</i>
|
||||
出口额
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.money-digit {
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
margin: 26px 0 0 0;
|
||||
color: var(--color-primary-secondary);
|
||||
font-size: 45px;
|
||||
text-align: center;
|
||||
|
||||
span {
|
||||
float: left;
|
||||
margin: 0 3.5px;
|
||||
width: 49px;
|
||||
height: 69px;
|
||||
background: url('@/assets/images/manage-forms/bg/bg-count.png') no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.progress {
|
||||
margin: 21px 0 0 0;
|
||||
}
|
||||
|
||||
.import-export-value {
|
||||
font-size: 18px;
|
||||
|
||||
i {
|
||||
font-style: normal;
|
||||
font-size: 20px;
|
||||
color: var(--color-primary-secondary);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<script lang="ts" setup>
|
||||
import { PropType } from 'vue';
|
||||
|
||||
defineProps<{
|
||||
color: PropType<string>;
|
||||
title: PropType<string | number>;
|
||||
description: PropType<string>;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="manage-device">
|
||||
<h1>{{ title.toString() }}</h1>
|
||||
<p>{{ description }}</p>
|
||||
<div class="device-carriage">
|
||||
<i :style="{ color }" class="i-mdi:electricity" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.manage-device {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 120px;
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 0 2px 0;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.device-carriage {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 74px;
|
||||
height: 46px;
|
||||
background: url('@/assets/images/manage-forms/bg/device-carriage.png') no-repeat center;
|
||||
background-size: cover;
|
||||
|
||||
i {
|
||||
//color: #ff7e5f;
|
||||
font-size: 26px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,48 +1,48 @@
|
|||
<script lang="tsx" setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
import formatter from '@/utils/digte-formatter';
|
||||
import TimeSelect from '@/components/TimeSelect/index.vue';
|
||||
import { TimeSelectType } from '@/components/TimeSelect/type';
|
||||
import EnterpriseInfo from '@/views/manage-forms/components/manage-left/compontens/enterprise-info.vue';
|
||||
import ImportExportValue from '@/views/manage-forms/components/manage-left/compontens/import-export-value.vue';
|
||||
import ManageDevice from '@/views/manage-forms/components/manage-left/compontens/manage-device.vue';
|
||||
|
||||
const money = ref('1386114');
|
||||
const devices = ref([
|
||||
[
|
||||
{ color: '#ff7e5f', title: 738, description: '设备总数1' },
|
||||
{ color: '#ff7e5f', title: 738, description: '设备总数' },
|
||||
{ color: '#fff', title: 738, description: '设备总数' },
|
||||
{ color: '#ff7e5f', title: 738, description: '设备总数' },
|
||||
],
|
||||
[
|
||||
{ color: '#2a65ea', title: '7.3k㎡', description: '设备总数' },
|
||||
{ color: '#2a65ea', title: 738, description: '设备总数' },
|
||||
{ color: '#fff', title: 738, description: '设备总数' },
|
||||
{ color: '#2a65ea', title: 738, description: '设备总数' },
|
||||
],
|
||||
]);
|
||||
|
||||
const displayContent = () => {
|
||||
formatter(money);
|
||||
return (
|
||||
<>
|
||||
<span>¥</span>
|
||||
{money.value.split('').map((item, index) => (
|
||||
<span key={index}>{item}</span>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
};
|
||||
const timeList = ref<TimeSelectType[]>([
|
||||
{ label: '2020.09', value: '2021' },
|
||||
{ label: '2020.09', value: '2021' },
|
||||
{ label: '2020.09', value: '2021' },
|
||||
]);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="manage-forms-slide flex-y-between">
|
||||
<div class="common-bg money">
|
||||
<div class="title">
|
||||
<h1>园区进出口额</h1>
|
||||
<div class="flex-x-between">
|
||||
<div class="title">
|
||||
<h1>园区进出口额</h1>
|
||||
</div>
|
||||
<div>
|
||||
<span class="all-data">总数据</span>
|
||||
<TimeSelect :time-list="timeList" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="money-digit">
|
||||
<component :is="displayContent()" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="progress">111</div>
|
||||
<ul class="import-export-value flex-x-between">
|
||||
<li>
|
||||
进口额
|
||||
<i>¥1551154545</i>
|
||||
</li>
|
||||
<li class="thin-line h-[20px]" />
|
||||
<li>
|
||||
<i>¥1551154545</i>
|
||||
出口额
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<import-export-value />
|
||||
</div>
|
||||
|
||||
<div class="enterprise-info common-bg">
|
||||
|
|
@ -53,47 +53,7 @@ const displayContent = () => {
|
|||
<span class="title-description">截止时间至2021.12.30</span>
|
||||
</div>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<h1>报税金额</h1>
|
||||
<p class="c-warning-secondary">¥1551154545</p>
|
||||
</li>
|
||||
<li>
|
||||
<div class="flex-x-between">
|
||||
<div>
|
||||
<h1>企业数量</h1>
|
||||
<p class="c-primary-secondary">783</p>
|
||||
</div>
|
||||
<div>111</div>
|
||||
</div>
|
||||
<div class="enterprise-type">
|
||||
<span class="mr-[13px]">
|
||||
<i class="bg-primary-secondary" />
|
||||
国营企业 345
|
||||
</span>
|
||||
<span>
|
||||
<i class="bg-warning-secondary" />
|
||||
私营企业 345
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="flex-x-between">
|
||||
<h1>总投资金额</h1>
|
||||
<span class="font-size-[12px]">环比变化</span>
|
||||
<span class="font-size-[12px]">+123%</span>
|
||||
</div>
|
||||
<p class="c-primary-secondary">¥1551154545</p>
|
||||
</li>
|
||||
<li>
|
||||
<div class="flex-x-between">
|
||||
<h1>税收总金额</h1>
|
||||
<span class="font-size-[12px]">环比变化</span>
|
||||
<span class="font-size-[12px]">-123%</span>
|
||||
</div>
|
||||
<p class="c-primary-secondary">¥1551154545</p>
|
||||
</li>
|
||||
</ul>
|
||||
<enterprise-info />
|
||||
</div>
|
||||
|
||||
<div class="common-bg plan">
|
||||
|
|
@ -103,6 +63,11 @@ const displayContent = () => {
|
|||
</div>
|
||||
<span class="title-description">截止时间至2021.12.30</span>
|
||||
</div>
|
||||
<ul v-for="(parent, pIndex) in devices" :key="pIndex" class="flex-x-around mt-[12px]">
|
||||
<li v-for="(item, index) in parent" :key="index">
|
||||
<manage-device :color="item.color" :description="item.description" :title="item.title" />
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -112,36 +77,16 @@ const displayContent = () => {
|
|||
width: 100%;
|
||||
height: 246px;
|
||||
|
||||
.money-digit {
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
margin: 26px 0 0 0;
|
||||
color: var(--color-primary-secondary);
|
||||
font-size: 45px;
|
||||
.all-data {
|
||||
float: left;
|
||||
margin: 0 7px 0 0;
|
||||
width: 62px;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
|
||||
span {
|
||||
float: left;
|
||||
margin: 0 3.5px;
|
||||
width: 49px;
|
||||
height: 69px;
|
||||
background: url('@/assets/images/manage-forms/bg/bg-count.png') no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.progress {
|
||||
margin: 21px 0 0 0;
|
||||
}
|
||||
|
||||
.import-export-value {
|
||||
font-size: 18px;
|
||||
|
||||
i {
|
||||
font-style: normal;
|
||||
font-size: 20px;
|
||||
color: var(--color-primary-secondary);
|
||||
}
|
||||
background: rgba(24, 69, 135, 0.55);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -149,49 +94,6 @@ const displayContent = () => {
|
|||
padding: 10px 15px;
|
||||
width: 530px;
|
||||
height: 354px;
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-content: flex-start;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
li {
|
||||
//margin: 15px 0 0 0;
|
||||
padding: 9px 16px 0 19px;
|
||||
margin: 15px 0 0 0;
|
||||
width: 242px;
|
||||
height: 124px;
|
||||
background: url('@/assets/images/manage-forms/bg/frame-1.png') no-repeat center;
|
||||
background-size: cover;
|
||||
|
||||
h1 {
|
||||
margin: 0 0 2px 0;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.enterprise-type {
|
||||
width: 100%;
|
||||
|
||||
span {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
i {
|
||||
display: inline-block;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.plan {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,21 @@
|
|||
<script lang="ts" setup>
|
||||
import SmartPartFooter from '@/views/smart-park/smart-park-footer.vue';
|
||||
import SmartPartContent from '@/views/smart-park/smart-park-main/index.vue';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="smart-park">
|
||||
<div class="smart-park__arrow left-[38px]">
|
||||
<img alt="左箭头" src="@/assets/images/smart-park/arrow/arrow-left.png" />
|
||||
</div>
|
||||
<smart-part-content />
|
||||
<smart-part-footer />
|
||||
<div class="smart-park__arrow right-[38px]">
|
||||
<img alt="左箭头" src="@/assets/images/smart-park/arrow/arrow-right.png" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
@import 'style.scss';
|
||||
</style>
|
||||
|
|
@ -3,8 +3,12 @@
|
|||
<template>
|
||||
<footer>
|
||||
<ul class="flex-x-around">
|
||||
<li v-for="index in new Array(5)" :key="index" class="rectangle flex-y-center">
|
||||
<img alt="车辆管理" src="@/assets/images/smart-parking/car/car-39.png" />
|
||||
<li
|
||||
v-for="index in new Array(5)"
|
||||
:key="index"
|
||||
class="smart-park__footer--nav-item flex-y-center"
|
||||
>
|
||||
<img alt="车辆管理" src="@/assets/images/smart-park/car/car-39.png" />
|
||||
<span class="text-white hover">车辆管理</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -18,10 +22,11 @@ footer {
|
|||
height: 125px;
|
||||
}
|
||||
|
||||
.rectangle {
|
||||
.smart-park__footer--nav-item {
|
||||
width: 138px;
|
||||
height: 125px;
|
||||
background: #0e094d55;
|
||||
background: rgba(16, 11, 87, 0.55);
|
||||
border-radius: 10px;
|
||||
|
||||
img {
|
||||
width: 67px;
|
||||
|
|
@ -15,7 +15,7 @@ defineProps({
|
|||
<img
|
||||
alt="arrow-item"
|
||||
class="float-left h-[16px]"
|
||||
src="@/assets/images/smart-parking/arrow/arrow-item.png"
|
||||
src="@/assets/images/smart-park/arrow/arrow-item.png"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -3,8 +3,8 @@ defineProps({
|
|||
percent: Number,
|
||||
});
|
||||
|
||||
import ArrowDown from '@/assets/images/smart-parking/arrow/arrow-down.png';
|
||||
import ArrowUp from '@/assets/images/smart-parking/arrow/arrow-up.png';
|
||||
import ArrowDown from '@/assets/images/smart-park/arrow/arrow-down.png';
|
||||
import ArrowUp from '@/assets/images/smart-park/arrow/arrow-up.png';
|
||||
|
||||
const calPercentItem = (percent: number): Element => {
|
||||
return percent > 25 ? (
|
||||
|
|
@ -22,7 +22,7 @@ const calPercentItem = (percent: number): Element => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="main-center-percent">
|
||||
<div class="smart-park__main-percent-item">
|
||||
<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>
|
||||
|
|
@ -31,7 +31,7 @@ const calPercentItem = (percent: number): Element => {
|
|||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.main-center-percent {
|
||||
.smart-park__main-percent-item {
|
||||
position: absolute;
|
||||
width: 86px;
|
||||
height: 86px;
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<script lang="ts" setup>
|
||||
import SmartPartCenter from '@/views/smart-park/smart-park-main/smart-park-center.vue';
|
||||
import SmartPartSidebarLeft from '@/views/smart-park/smart-park-main/smart-park-sidebar-left.vue';
|
||||
import SmartPartSidebarRight from '@/views/smart-park/smart-park-main/smart-park-sidebar-right.vue';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="pt-[78px] mx-auto flex-center w-[1620px] h-[650px]">
|
||||
<smart-part-sidebar-left />
|
||||
<smart-part-center />
|
||||
<smart-part-sidebar-right />
|
||||
</main>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
<script lang="ts" setup>
|
||||
import CentralItem from '@/views/smart-park/smart-park-main/components/central-item.vue';
|
||||
import CentralPercent from '@/views/smart-park/smart-park-main/components/central-percent.vue';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="smart-park__center flex-center">
|
||||
<div class="h-[570px] flex-y-between">
|
||||
<div class="smart-park__center-title">
|
||||
<h1>卡口车辆监控</h1>
|
||||
</div>
|
||||
|
||||
<!-- 中间布局 -->
|
||||
<div class="smart-park__center-inner">
|
||||
<div class="pos-relative">
|
||||
<central-item :count="45" class="top-[37px] left-[40px] w-[175px]" door="西北门" />
|
||||
<central-percent :percent="44" class="top-[73px] left-[193px]" />
|
||||
</div>
|
||||
<div class="pos-relative">
|
||||
<central-item :count="67" class="top-[37px] left-[120px] w-[175px]" door="东北门" />
|
||||
<central-percent :percent="25" class="top-[73px] right-[192px]" />
|
||||
</div>
|
||||
<div class="pos-relative">
|
||||
<central-item :count="345" class="top-[45px] left-[34px] w-[175px]" door="西南门" />
|
||||
<central-percent :percent="25" class="top-[40px] left-[193px]" />
|
||||
</div>
|
||||
<div class="pos-relative">
|
||||
<central-item :count="145" class="top-[45px] left-[130px] w-[175px]" door="东南门" />
|
||||
<central-percent :percent="44" class="top-[40px] left-[66px]" />
|
||||
</div>
|
||||
|
||||
<div class="smart-park__center-content">
|
||||
<div class="smart-park__center-content-headline flex-center">
|
||||
<h1>智能管控</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.smart-park__center {
|
||||
width: 824px;
|
||||
height: 650px;
|
||||
background: url('@/assets/images/smart-park/bg/bg-middle.png') no-repeat center;
|
||||
background-size: cover;
|
||||
|
||||
// 中间部分标题
|
||||
&-title {
|
||||
height: 61px;
|
||||
background: url('@/assets/images/smart-park/bg/bg-main-title.png') no-repeat center;
|
||||
background-size: cover;
|
||||
|
||||
h1 {
|
||||
color: #fff;
|
||||
font-size: 22px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
// 中间部分四个部分
|
||||
&-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/smart-park/bg/bg-main-1.png') no-repeat center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
// 中心智能管控
|
||||
&-content {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 138px;
|
||||
height: 138px;
|
||||
|
||||
&-headline {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url('@/assets/images/smart-park/bg/bg-main-center.png');
|
||||
background-size: cover;
|
||||
font-size: 19px;
|
||||
animation: rotate 30s linear infinite;
|
||||
|
||||
h1 {
|
||||
width: 53px;
|
||||
color: var(--color-primary-secondary);
|
||||
text-align: center;
|
||||
animation: rotate-reverse 30s linear infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,43 +1,43 @@
|
|||
<script lang="ts" setup></script>
|
||||
|
||||
<template>
|
||||
<div class="smart-parking-common-card-container">
|
||||
<div class="smart-park__sidebar smart-park__sidebar--left">
|
||||
<div class="pt-[55px] pl-[25px]" style="transform: rotateY(180deg)">
|
||||
<!-- 路况 -->
|
||||
<div class="smart-parking-common-title">
|
||||
<h1 class="c-white">实时道路情况</h1>
|
||||
<div class="smart-park__sidebar-title">
|
||||
<h1>实时道路情况</h1>
|
||||
</div>
|
||||
|
||||
<!-- 汽车列表 -->
|
||||
<ul class="mt-[32px]">
|
||||
<li class="car-item flex-x-around">
|
||||
<img alt="car-1" src="@/assets/images/smart-parking/car/car-1.png" />
|
||||
<p class="c-white">入卡口（西北门）</p>
|
||||
<li class="smart-park__sidebar--left-item flex-x-around">
|
||||
<img alt="car-1" src="@/assets/images/smart-park/car/car-1.png" />
|
||||
<p>入卡口（西北门）</p>
|
||||
<span class="dashed-circle c-primary-secondary border-b-primary-secondary">畅通</span>
|
||||
</li>
|
||||
<li class="car-item flex-x-around">
|
||||
<img alt="car-1" src="@/assets/images/smart-parking/car/car-1.png" />
|
||||
<p class="c-white">入卡口（东北门）</p>
|
||||
<li class="smart-park__sidebar--left-item flex-x-around">
|
||||
<img alt="car-1" src="@/assets/images/smart-park/car/car-1.png" />
|
||||
<p>入卡口（东北门）</p>
|
||||
<span class="dashed-circle c-primary-secondary border-b-primary-secondary">畅通</span>
|
||||
</li>
|
||||
<li class="car-item flex-x-around">
|
||||
<img alt="car-1" src="@/assets/images/smart-parking/car/car-2.png" />
|
||||
<p class="c-white">入卡口（东北门）</p>
|
||||
<li class="smart-park__sidebar--left-item flex-x-around">
|
||||
<img alt="car-1" src="@/assets/images/smart-park/car/car-2.png" />
|
||||
<p>入卡口（东北门）</p>
|
||||
<span class="dashed-circle c-warning border-b-warning">拥堵</span>
|
||||
</li>
|
||||
<li class="car-item flex-x-around">
|
||||
<img alt="car-1" src="@/assets/images/smart-parking/car/car-1.png" />
|
||||
<p class="c-white">入卡口（东南门）</p>
|
||||
<li class="smart-park__sidebar--left-item flex-x-around">
|
||||
<img alt="car-1" src="@/assets/images/smart-park/car/car-1.png" />
|
||||
<p>入卡口（东南门）</p>
|
||||
<span class="dashed-circle c-primary-secondary border-b-primary-secondary">畅通</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- 建议 -->
|
||||
<div class="suggest c-white">
|
||||
<div class="smart-park__sidebar--left-suggest">
|
||||
<h5>车流量建议</h5>
|
||||
<p>
|
||||
高峰时段大量车流量容易造成拥堵，主要由XXX企业、XXX企业的车辆构成，
|
||||
<span class="c-warning-secondary">可建议XXX企业向后延迟15min错峰入园。</span>
|
||||
<span>可建议XXX企业向后延迟15min错峰入园。</span>
|
||||
高峰时段大量车流量容易造成拥堵， 主要由XXX企业、XXX企业的车辆构成
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -46,15 +46,15 @@
|
|||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.smart-parking-common-card-container {
|
||||
.smart-park__sidebar--left {
|
||||
margin: 0 20px 0 0;
|
||||
transform: rotateY(180deg);
|
||||
|
||||
.car-item {
|
||||
&-item {
|
||||
width: 330px;
|
||||
height: 61px;
|
||||
margin: 0 0 9px 0;
|
||||
background: url('@/assets/images/smart-parking/bg/bg-frame.png') no-repeat center;
|
||||
background: url('@/assets/images/smart-park/bg/bg-frame.png') no-repeat center;
|
||||
background-size: cover;
|
||||
|
||||
img {
|
||||
|
|
@ -62,18 +62,24 @@
|
|||
}
|
||||
|
||||
p {
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.suggest {
|
||||
&-suggest {
|
||||
margin: 24px 0 0 0;
|
||||
padding: 15px 14px 17px 20px;
|
||||
width: 330px;
|
||||
height: 157px;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
background: url('@/assets/images/smart-parking/bg/bg-suggest.png') no-repeat center;
|
||||
background: url('@/assets/images/smart-park/bg/bg-suggest.png') no-repeat center;
|
||||
background-size: cover;
|
||||
|
||||
span {
|
||||
color: var(--color-warning-secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<script lang="ts" setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
|
||||
import { renderEcharts } from '@/views/smart-parking/components/parking-content/data';
|
||||
import { renderEcharts } from '@/views/smart-park/smart-park-main/charts';
|
||||
|
||||
const weekDataChart = ref<HTMLDivElement>();
|
||||
|
||||
|
|
@ -11,35 +11,35 @@ onMounted(() => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="smart-parking-common-card-container ml-[20px]">
|
||||
<div class="smart-park__sidebar ml-[20px]">
|
||||
<div class="pt-[55px] pl-[25px]">
|
||||
<!-- 路况 -->
|
||||
<div class="smart-parking-common-title">
|
||||
<h1 class="c-white">近7天车流量概览</h1>
|
||||
<div class="smart-park__sidebar-title">
|
||||
<h1>近7天车流量概览</h1>
|
||||
</div>
|
||||
|
||||
<!-- 汽车列表 -->
|
||||
<ul class="flex-x-around mt-[32px] w-[331px]">
|
||||
<li class="detail-item flex-y-between">
|
||||
<span class="bg-frame c-white">最高进园车流量</span>
|
||||
<span class="bg-frame c-primary-secondary">897</span>
|
||||
<li class="smart-park__sidebar-flow-item flex-y-between">
|
||||
<span>最高进园车流量</span>
|
||||
<span>897</span>
|
||||
</li>
|
||||
<li class="detail-item flex-y-between">
|
||||
<span class="bg-frame c-white">最高进园车流量</span>
|
||||
<span class="bg-frame c-primary-secondary">494</span>
|
||||
<li class="smart-park__sidebar-flow-item flex-y-between">
|
||||
<span>最高进园车流量</span>
|
||||
<span>494</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- 七天数据 -->
|
||||
<div class="w-[325px] h-[205px]">
|
||||
<div ref="weekDataChart" class="week-data" />
|
||||
<div ref="weekDataChart" class="smart-park__sidebar-week-data" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.detail-item {
|
||||
.smart-park__sidebar-flow-item {
|
||||
width: 162px;
|
||||
height: 111px;
|
||||
text-align: center;
|
||||
|
|
@ -47,23 +47,25 @@ onMounted(() => {
|
|||
span:nth-child(1) {
|
||||
width: 161px;
|
||||
height: 40px;
|
||||
color: #fff;
|
||||
line-height: 40px;
|
||||
font-size: 16px;
|
||||
background: url('@/assets/images/smart-parking/bg/bg-frame-2.png') no-repeat center;
|
||||
background: url('@/assets/images/smart-park/bg/bg-frame-2.png') no-repeat center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
span:nth-child(2) {
|
||||
width: 161px;
|
||||
height: 66px;
|
||||
color: var(--color-primary-secondary);
|
||||
line-height: 66px;
|
||||
font-size: 34px;
|
||||
background: url('@/assets/images/smart-parking/bg/bg-frame-3.png') no-repeat center;
|
||||
background: url('@/assets/images/smart-park/bg/bg-frame-3.png') no-repeat center;
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.week-data {
|
||||
.smart-park__sidebar-week-data {
|
||||
margin: 71px 0 0 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
.smart-parking {
|
||||
.smart-park {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.arrow {
|
||||
&__arrow {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
|
|
@ -13,21 +13,22 @@
|
|||
}
|
||||
}
|
||||
|
||||
.smart-parking-common-card-container {
|
||||
&__sidebar {
|
||||
width: 380px;
|
||||
height: 650px;
|
||||
background: url('@/assets/images/smart-parking/bg/bg-side.png') no-repeat center;
|
||||
background: url('@/assets/images/smart-park/bg/bg-side.png') no-repeat center;
|
||||
background-size: cover;
|
||||
transition: transform 0.8s;
|
||||
transform-style: preserve-3d;
|
||||
|
||||
.smart-parking-common-title {
|
||||
.smart-park__sidebar-title {
|
||||
width: 218px;
|
||||
height: 59px;
|
||||
background: url('@/assets/images/smart-parking/bg/bg-road-condition.png') no-repeat center;
|
||||
background: url('@/assets/images/smart-park/bg/bg-road-condition.png') no-repeat center;
|
||||
background-size: cover;
|
||||
|
||||
h1 {
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
<script lang="ts" setup>
|
||||
import RoadCondition from '@/views/smart-parking/components/parking-content/road-condition.vue';
|
||||
import TrafficOverview from '@/views/smart-parking/components/parking-content/traffic-overview.vue';
|
||||
import TruckMonitor from '@/views/smart-parking/components/parking-content/truck-monitor.vue';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="pt-[78px] mx-auto flex-center w-[1620px] h-[650px]">
|
||||
<road-condition />
|
||||
<truck-monitor />
|
||||
<traffic-overview />
|
||||
</main>
|
||||
</template>
|
||||
|
|
@ -1,115 +0,0 @@
|
|||
<script lang="ts" setup>
|
||||
import TruckMonitorCenterItem from '@/views/smart-parking/components/parking-content/truck-monitor-center-item.vue';
|
||||
import TruckMonitorCenterPercent from '@/views/smart-parking/components/parking-content/truck-monitor-center-percent.vue';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="main-center flex-center">
|
||||
<div class="h-[570px] flex-y-between">
|
||||
<div class="main-center-title">
|
||||
<h1 class="c-white">卡口车辆监控</h1>
|
||||
</div>
|
||||
|
||||
<!-- 中间布局 -->
|
||||
<div class="main-inner">
|
||||
<div class="pos-relative">
|
||||
<truck-monitor-center-item
|
||||
:count="45"
|
||||
class="top-[37px] left-[40px] w-[175px]"
|
||||
door="西北门"
|
||||
/>
|
||||
<truck-monitor-center-percent :percent="44" class="top-[73px] left-[193px]" />
|
||||
</div>
|
||||
<div class="pos-relative">
|
||||
<truck-monitor-center-item
|
||||
:count="67"
|
||||
class="top-[37px] left-[120px] w-[175px]"
|
||||
door="东北门"
|
||||
/>
|
||||
<truck-monitor-center-percent :percent="25" class="top-[73px] right-[192px]" />
|
||||
</div>
|
||||
<div class="pos-relative">
|
||||
<truck-monitor-center-item
|
||||
:count="345"
|
||||
class="top-[45px] left-[34px] w-[175px]"
|
||||
door="西南门"
|
||||
/>
|
||||
<truck-monitor-center-percent :percent="25" class="top-[40px] left-[193px]" />
|
||||
</div>
|
||||
<div class="pos-relative">
|
||||
<truck-monitor-center-item
|
||||
:count="145"
|
||||
class="top-[45px] left-[130px] w-[175px]"
|
||||
door="东南门"
|
||||
/>
|
||||
<truck-monitor-center-percent :percent="44" class="top-[40px] left-[66px]" />
|
||||
</div>
|
||||
|
||||
<div class="main-inner-center">
|
||||
<div class="main-inner-middle flex-center">
|
||||
<h1 class="c-primary-secondary">智能管控</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.main-center {
|
||||
width: 824px;
|
||||
height: 650px;
|
||||
background: url('@/assets/images/smart-parking/bg/bg-middle.png') no-repeat center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
// 中间部分标题
|
||||
.main-center-title {
|
||||
height: 61px;
|
||||
background: url('@/assets/images/smart-parking/bg/bg-main-title.png') no-repeat center;
|
||||
background-size: cover;
|
||||
|
||||
h1 {
|
||||
font-size: 22px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
// 中间部分四个部分
|
||||
.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/smart-parking/bg/bg-main-1.png') no-repeat center;
|
||||
background-size: cover;
|
||||
|
||||
// 中心智能管控
|
||||
.main-inner-center {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 138px;
|
||||
height: 138px;
|
||||
|
||||
.main-inner-middle {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url('@/assets/images/smart-parking/bg/bg-main-center.png');
|
||||
background-size: cover;
|
||||
font-size: 19px;
|
||||
animation: rotate 30s linear infinite;
|
||||
}
|
||||
|
||||
h1 {
|
||||
width: 53px;
|
||||
text-align: center;
|
||||
animation: rotate-reverse 30s linear infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
<script lang="ts" setup>
|
||||
import ParkingContent from '@/views/smart-parking/components/parking-content/index.vue';
|
||||
import ParkingFooter from '@/views/smart-parking/components/parking-footer/index.vue';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="smart-parking">
|
||||
<div class="arrow left-[38px]">
|
||||
<img alt="左箭头" src="@/assets/images/smart-parking/arrow/arrow-left.png" />
|
||||
</div>
|
||||
<parking-content />
|
||||
<parking-footer />
|
||||
<div class="arrow right-[38px]">
|
||||
<img alt="左箭头" src="@/assets/images/smart-parking/arrow/arrow-right.png" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -3,7 +3,7 @@ import PageList from '@/views/welcome/components/welcome-content/page-list.vue';
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex-y-around welcome">
|
||||
<div class="welcome flex-y-around">
|
||||
<div class="mt-[158px]">
|
||||
<p class="c-white">
|
||||
<img alt="welcome" src="@/assets/images/welcome/icon/welcome.png" />
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ const router = useRouter();
|
|||
|
||||
<template>
|
||||
<ul class="page-list flex-x-between">
|
||||
<li class="flex-y-center" @click="router.push('/smart-parking')">
|
||||
<li class="flex-y-center" @click="router.push('/smart-park')">
|
||||
<img alt="car" src="@/assets/images/welcome/icon/center/car.png" />
|
||||
<span>智慧停车</span>
|
||||
</li>
|
||||
|
|
|
|||
Loading…
Reference in New Issue