diff --git a/packages/park/index/index.css b/packages/park/index/index.css index a289d36a..a9bef538 100644 --- a/packages/park/index/index.css +++ b/packages/park/index/index.css @@ -3,16 +3,25 @@ page { padding-top: 20rpx; } - /* 车辆信息容器样式 */ +.container-box{ + height: 83vh; + overflow-y: auto; +} + .car-info-container { - width: 100%; + width: 92%; background-color: #ffffff; padding: 30rpx; border-bottom: 1rpx solid #eeeeee; box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05); } +.car-info{ + display: flex; + justify-content: space-between; +} + /* 车牌样式 */ .license-plate { display: flex; @@ -27,6 +36,7 @@ page { border-radius: 8rpx; } + .plate-type { background-color: #1890ff; color: white; @@ -40,6 +50,62 @@ page { font-size: 32rpx; color: #333333; font-weight: 500; + display: flex; + align-items: center; + padding: 15rpx 30rpx; + border-radius: 10rpx; +} + +/* 蓝色车牌样式 */ +.plate-color-blue { + background-color: #1890ff; + color: white; +} + +/* 黄色车牌样式 */ +.plate-color-yellow { + background-color: #ffc53d; + color: black; +} + +/* 黑色车牌样式 */ +.plate-color-black { + background-color: #333333; + color: white; +} + +/* 白色车牌样式 */ +.plate-color-white { + background-color: white; + color: black; + border: 1rpx solid #dddddd; +} + +/* 绿色车牌样式 */ +.plate-color-green { + background-color: #37bd75; + color: white; +} + +/* 渐变绿底黑字车牌样式 */ +.plate-color-gradient-green { + background: linear-gradient(180deg, #ffffff 0%, #2fe259 100%); + color: black; +} + +/* 黄绿双拼底黑字车牌样式 */ +.plate-color-yellow-green { + background: linear-gradient(90deg, #ffc53d 30%, #37bd75 0%); + color: black; +} + +.plate-energy{ + font-size: 24rpx; + padding: 7rpx 15rpx; + margin-left: 15rpx; + border-radius: 10rpx; + background-color: #f2f3f4; + color: #37bd75; } /* 添加车辆按钮样式 */ diff --git a/packages/park/index/index.vue b/packages/park/index/index.vue index c7ac872a..76ef0698 100644 --- a/packages/park/index/index.vue +++ b/packages/park/index/index.vue @@ -1,12 +1,28 @@