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

refactor: 抽取调整样式到公共

This commit is contained in:
Bunny 2025-03-04 21:38:16 +08:00
parent 2ad4e35f57
commit cbfc42e23d
7 changed files with 44 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/assets/styles/views/src/manage-forms.scss
View File

@ -11,7 +11,7 @@
.common-bg {
padding: 10px 15px;
background: rgba(14, 95, 255, 0.2);
background: rgba(14, 95, 255, 0.20);
}
.title {

35
src/assets/styles/views/src/smart-parking.scss Normal file
View File

@ -0,0 +1,35 @@
.smart-parking {
width: 100%;
height: 100%;
.arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
img {
width: 65px;
}
}
.smart-parking-common-card-container {
width: 380px;
height: 650px;
background: url('@/assets/images/smart-parking/bg/bg-side.png') no-repeat center;
background-size: cover;
transition: transform 0.8s;
transform-style: preserve-3d;
.smart-parking-common-title {
width: 218px;
height: 59px;
background: url('@/assets/images/smart-parking/bg/bg-road-condition.png') no-repeat center;
background-size: cover;
h1 {
font-size: 18px;
}
}
}
}

3
src/assets/styles/views/views.scss
View File

@ -1 +1,2 @@
@use "@/assets/styles/views/src/manage-forms";
@use "@/assets/styles/views/src/smart-parking";
@use "@/assets/styles/views/src/manage-forms";

22
src/views/smart-parking/components/parking-content/index.vue
View File

@ -11,25 +11,3 @@ import TruckMonitor from '@/views/smart-parking/components/parking-content/truck
<traffic-overview />
</main>
</template>
<style lang="scss" scoped>
.card-container {
width: 380px;
height: 650px;
background: url('@/assets/images/smart-parking/bg/bg-side.png') no-repeat center;
background-size: cover;
transition: transform 0.8s;
transform-style: preserve-3d;
::v-deep(.road-condition) {
width: 218px;
height: 59px;
background: url('@/assets/images/smart-parking/bg/bg-road-condition.png') no-repeat center;
background-size: cover;
h1 {
font-size: 18px;
}
}
}
</style>

6
src/views/smart-parking/components/parking-content/road-condition.vue
View File

@ -1,10 +1,10 @@
<script lang="ts" setup></script>
<template>
<div class="card-container">
<div class="smart-parking-common-card-container">
<div class="pt-[55px] pl-[25px]" style="transform: rotateY(180deg)">
<!-- 路况 -->
<div class="road-condition">
<div class="smart-parking-common-title">
<h1 class="c-white">实时道路情况</h1>
</div>
@ -46,7 +46,7 @@
</template>
<style lang="scss" scoped>
.card-container {
.smart-parking-common-card-container {
margin: 0 20px 0 0;
transform: rotateY(180deg);

4
src/views/smart-parking/components/parking-content/traffic-overview.vue
View File

@ -11,10 +11,10 @@ onMounted(() => {
</script>
<template>
<div class="card-container ml-[20px]">
<div class="smart-parking-common-card-container ml-[20px]">
<div class="pt-[55px] pl-[25px]">
<!-- 路况 -->
<div class="road-condition">
<div class="smart-parking-common-title">
<h1 class="c-white">近7天车流量概览</h1>
</div>

20
src/views/smart-parking/index.vue
View File

@ -4,7 +4,7 @@ import ParkingFooter from '@/views/smart-parking/components/parking-footer/index
</script>
<template>
<div class="layout">
<div class="smart-parking">
<div class="arrow left-[38px]">
<img alt="左箭头" src="@/assets/images/smart-parking/arrow/arrow-left.png" />
</div>
@ -15,21 +15,3 @@ import ParkingFooter from '@/views/smart-parking/components/parking-footer/index
</div>
</div>
</template>
<style scoped>
.layout {
width: 100%;
height: 100%;
.arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
img {
width: 65px;
}
}
}
</style>