feat:完善整体样式

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

View File

@@ -1,7 +1,7 @@
<template>
<div class="box-4">
<Title1 title="交通信息" />
<div class="flex justify-evenly pt-10 pb-20">
<div class="traffic-info flex justify-evenly pt-10 pb-20">
<div v-for="item in list" class="cell">
<img class="icon" :src="item.icon" alt="" width="64" height="64" />
<div>
@@ -318,12 +318,15 @@
<style lang="scss" scoped>
.box-4 {
margin-top: vh(120);
width: vw(750);
width: vw(774);
height: vh(950);
padding-left: vw(8);
box-sizing: border-box;
background-image: url('@/assets/images/bg-5.png');
background-size: 100% 100%;
.traffic-info {
height: vh(80);
}
.cell {
display: flex;
align-items: center;
@@ -403,25 +406,33 @@
background-size: 100% 100%;
.car {
@extend .icon;
padding-left: vw(90);
width: vw(352);
height: vw(70);
padding-left: vw(90);
margin-left: vw(10);
display: flex;
flex-direction: column;
justify-content: center;
background-image: url('@/assets/images/icon-6.png');
background-size: 100% 100%;
}
.ship {
@extend .icon;
padding-left: vw(90);
width: vw(352);
height: vw(70);
padding-left: vw(90);
margin-left: vw(10);
display: flex;
flex-direction: column;
justify-content: center;
background-image: url('@/assets/images/icon-7.png');
background-size: 100% 100%;
}
.label {
margin-bottom: vh(6);
font-weight: 400;
font-size: vw(14);
color: rgba(255, 255, 255, 0.9);
margin-bottom: vh(6);
}
.value {
font-weight: bold;
@@ -437,7 +448,7 @@
.table {
position: absolute;
left: vw(160);
width: vw(200);
width: vw(226);
height: vh(96);
z-index: 2;
background: rgba(0, 150, 255, 0.17);