-
@@ -56,95 +76,150 @@ export default {
position: relative;
width: 100vw;
height: 100vh;
- // .system_title {
- // display: flex;
- // justify-content: center;
- // align-items: center;
- // width: 100vw;
- // height: 6vh;
- // position: absolute;
- // z-index: 2;
- // background: url('~@/assets/homepage/title_back.png') no-repeat;
- // background-size: cover;
-
- // .system_title_icon {
- // margin-right: 2vw;
- // width: 4vw;
- // height: 8vh;
- // background: url("../../assets/首页_slices/logo.png") no-repeat center /
- // cover;
- // }
-
- // .system_title_text {
- // width: 20vw;
- // height: 6vh;
- // font-size: 2.2rem;
- // font-weight: 600;
- // font-family: 'YouSheBiaoTiHei';
- // color: #fff;
- // text-align: center;
- // line-height: 6vh;
- // }
- // }
.under_btn {
position: absolute;
- left: 32.5vw;
+ left: 28vw;
right: 32.5vw;
- bottom: 5vh;
- width: 35vw;
- height: 12vh;
+ bottom: 1vh;
+ width: 45vw;
+ height: 11vh;
// background: #33a59f;
display: flex;
z-index: 2;
- .under_btn_item {
- width: 13vw;
- height: 12vh;
- // border: 1px solid #b1335d;
- display: flex;
- justify-content: center;
- align-items: center;
-
- // * 导航样式
- .item_check {
- width: 5.5vw;
- height: 5.5vw;
- background-image: url('@/assets/picture/icon_home_nor.png');
- background-repeat: no-repeat;
- background-size: 100% 100%;
- cursor: pointer;
-
- &:hover {
- background-image: url('@/assets/picture/icon_home_sel.png');
- background-repeat: no-repeat;
- background-size: 100% auto;
+ // 第二期样式
+ .under_box {
+ height: auto;
+ width: 45vw;
+ position: relative;
+ // background-color: orange;
+ .under_icon_box {
+ display: flex;
+ z-index: 3;
+ position: absolute;
+ top: 0vw;
+ width: 45vw;
+ height: 6vh;
+ // background-color: red;
+ .icon1 {
+ width: 3vw;
+ height: 6vh;
+ background-image: url(../../assets/home/icon_1.png);
+ background-size: 100% 100%;
+ margin-left: 4.25vw;
+ }
+ .icon2 {
+ width: 3vw;
+ height: 6vh;
+ background-image: url(../../assets/home/icon1.png);
+ background-size: 100% 100%;
+ // background-color: #fff;
+ margin-left: 5.25vw;
+ }
+ .icon3 {
+ width: 3vw;
+ height: 6vh;
+ // background-color: #fff;
+ background-image: url(../../assets/home/icon_3.png);
+ background-size: 100% 100%;
+ margin-left: 5.25vw;
+ }
+ .icon4 {
+ width: 3vw;
+ height: 6vh;
+ // background-color: #fff;
+ background-image: url(../../assets/home/icon_4.png);
+ background-size: 100% 100%;
+ margin-left: 5vw;
+ }
+ .icon5 {
+ width: 3vw;
+ height: 6vh;
+ background-image: url(../../assets/home/icon_5.png);
+ background-size: 100% 100%;
+ // background-color: #fff;
+ margin-left: 5.25vw;
}
}
-
- .item_check_back {
- width: 5.5vw;
- height: 5.5vw;
- background-image: url('@/assets/picture/under_button.png');
- background-repeat: no-repeat;
+ .under_bottom {
+ position: absolute;
+ width: 45vw;
+ height: 6vh;
+ background-image: url(../../assets/home/icon_7.png);
background-size: 100% 100%;
- font-size: 1.2rem;
- font-family: PingFangSC, PingFang SC;
- font-weight: 500;
- color: #ecf4f9;
- line-height: 10.5vh;
- text-shadow: 0px 0px 9px #00a2ff;
- text-align: center;
- cursor: pointer;
-
- &:hover {
- color: #00f5ff;
- // * 强行增亮
- filter: brightness(140%);
- background-size: 100% auto;
+ // background-color: #fff;
+ bottom: 0vh;
+ }
+ .under_center_box {
+ position: absolute;
+ bottom: 2vh;
+ width: 45vw;
+ height: 10vh;
+ // background-color: red;
+ display: flex;
+ .under_center {
+ width: 5vw;
+ height: 9.5vh;
+ // background-color: blue;
+ background-image: url(../../assets//home/icon_6.png);
+ background-size: 100% 100%;
+ margin-top: 2vh;
+ margin-left: 3.2vw;
}
}
}
+
+ // 第一期样式
+ // .under_btn_item {
+ // background-color: orange;
+ // width: 13vw;
+ // height: 12vh;
+ // // border: 1px solid #b1335d;
+ // display: flex;
+ // justify-content: center;
+ // align-items: center;
+
+ // // * 导航样式
+ // .item_check {
+ // background-color: pink;
+ // width: 5.5vw;
+ // height: 5.5vw;
+ // background-image: url('@/assets/picture/icon_home_nor.png');
+ // background-repeat: no-repeat;
+ // background-size: 100% 100%;
+ // cursor: pointer;
+
+ // &:hover {
+ // background-image: url('@/assets/picture/icon_home_sel.png');
+ // background-repeat: no-repeat;
+ // background-size: 100% auto;
+ // }
+ // }
+
+ // .item_check_back {
+ // width: 5.5vw;
+ // height: 5.5vw;
+ // background-image: url('@/assets/picture/under_button.png');
+ // background-repeat: no-repeat;
+ // background-size: 100% 100%;
+ // font-size: 1.2rem;
+ // font-family: PingFangSC, PingFang SC;
+ // font-weight: 500;
+ // color: #ecf4f9;
+ // line-height: 10.5vh;
+ // text-shadow: 0px 0px 9px #00a2ff;
+ // text-align: center;
+ // cursor: pointer;
+
+ // &:hover {
+ // color: #00f5ff;
+ // // * 强行增亮
+ // filter: brightness(140%);
+ // background-size: 100% auto;
+ // }
+ // }
+ // }
}
}
diff --git a/src/views/sensingDevice/components/mancarStatistics.vue b/src/views/sensingDevice/components/mancarStatistics.vue
index 14303ac..8845c8c 100644
--- a/src/views/sensingDevice/components/mancarStatistics.vue
+++ b/src/views/sensingDevice/components/mancarStatistics.vue
@@ -5,220 +5,39 @@
人车统计