diff --git a/src/views/home/components/box-1.vue b/src/views/home/components/box-1.vue index d8c10bb..d6a8b6d 100644 --- a/src/views/home/components/box-1.vue +++ b/src/views/home/components/box-1.vue @@ -6,14 +6,11 @@
-
- {{ item.name }} -
+ +
+ + {{ item.name }} +
@@ -241,24 +238,35 @@ } .item { position: relative; - flex: 1; - padding-left: vw(70); height: vh(52); margin: 0 vh(10); + flex: 1; + z-index: 1; display: flex; align-items: center; background-size: 100% 100%; - .label { + &-icon { position: absolute; + width: 100%; + height: auto; + z-index: -1; + } + &-label { + position: absolute; + left: vw(80); top: vh(-10); font-weight: 400; font-size: vw(14); color: rgba(255, 255, 255, 0.7); } - .countup-wrap { - color: #02f9fa; - font-size: vw(28); - font-weight: bold; + &-value { + position: absolute; + left: vw(80); + .countup-wrap { + color: #02f9fa; + font-size: vw(28); + font-weight: bold; + } } } .unit { diff --git a/src/views/home/components/box-3.vue b/src/views/home/components/box-3.vue index 335c5c4..dd4dc86 100644 --- a/src/views/home/components/box-3.vue +++ b/src/views/home/components/box-3.vue @@ -218,22 +218,22 @@
-
-
-
景区
-
调度
-
空余
-
-
-
-
白帝城
-
{{ item.started_count }}
-
{{ item.not_started_count }}
-
+
+
+
+
景区
+
调度
+
空余
+
+
+
+
白帝城
+
{{ item.started_count }}
+
{{ item.not_started_count }}
@@ -320,7 +320,7 @@ margin-top: vh(120); width: vw(750); height: vh(950); - padding: vw(8); + padding-left: vw(8); box-sizing: border-box; background-image: url('@/assets/images/bg-5.png'); background-size: 100% 100%; @@ -357,13 +357,14 @@ background-image: url('@/assets/images/bg-3.png'); background-size: 100% 100%; } + .icon { + width: vw(45); + height: auto; + } .stop-box { display: flex; gap: vw(20); - .icon { - width: vw(45); - height: auto; - } + & > div { flex: 1; height: vh(70); @@ -395,28 +396,24 @@ flex: 1; & > div { position: relative; - flex: 1; - height: vh(113); + height: vh(110); display: flex; align-items: center; background-image: url('@/assets/images/bg-4.png'); background-size: 100% 100%; - .icon { - padding-left: vw(90); - width: vw(352); - height: vh(70); - display: flex; - flex-direction: column; - justify-content: center; - box-sizing: border-box; - } .car { @extend .icon; + padding-left: vw(90); + width: vw(352); + height: vw(70); 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); background-image: url('@/assets/images/icon-7.png'); background-size: 100% 100%; } @@ -441,7 +438,7 @@ position: absolute; left: vw(160); width: vw(200); - height: vh(100); + height: vh(96); z-index: 2; background: rgba(0, 150, 255, 0.17); .header { @@ -509,8 +506,7 @@ } } .hotel { - flex: 1; - margin-left: vw(6); + margin: 0 vw(6); & > div:nth-child(1) { display: flex; width: vw(360); @@ -547,11 +543,10 @@ } } & > div:nth-child(2) { - padding-top: vh(10); + padding-top: vh(6); margin-top: vh(6); width: vw(360); - height: vh(156); - background-image: url('@/assets/images/bg-4.png'); + background-image: url('@/assets/images/bg-3.png'); background-size: 100% 100%; } } diff --git a/src/views/home/components/occupancy.vue b/src/views/home/components/occupancy.vue index e42442f..29e0995 100644 --- a/src/views/home/components/occupancy.vue +++ b/src/views/home/components/occupancy.vue @@ -161,6 +161,6 @@