From a878e17d51c76cc2e98cc254e9107d258601ec35 Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Fri, 07 May 2021 17:39:51 +0800
Subject: [PATCH] 按钮
---
src/views/dataL/homeL.vue | 57 ++++++++++++++++++++++++++++++++++++---------------------
1 files changed, 36 insertions(+), 21 deletions(-)
diff --git a/src/views/dataL/homeL.vue b/src/views/dataL/homeL.vue
index 116a923..02cec46 100644
--- a/src/views/dataL/homeL.vue
+++ b/src/views/dataL/homeL.vue
@@ -5,11 +5,21 @@
<span class="h2">IoT security cloud service platform</span>
</div>
<div class="homeL-bar">
- <div class="down1" @click="down1"><span>一键报警</span></div>
- <div class="down2" @click="down2"><span>防疫健康码</span></div>
- <div class="down3" @click="down3"><span>安检包裹</span></div>
- <div class="down4" @click="down4"><span>体温检测</span></div>
- <div class="down5" @click="down5"><span>统计分析</span></div>
+ <div class="outS" @click="down1">
+ <div class="down1"><span>一键报警</span></div>
+ </div>
+ <div class="outS" @click="down2">
+ <div class="down2"><span>防疫健康码</span></div>
+ </div>
+ <div class="outS" @click="down3">
+ <div class="down3"><span>违禁物品</span></div>
+ </div>
+ <div class="outS" @click="down4">
+ <div class="down4"><span>体温检测</span></div>
+ </div>
+ <div class="outS" @click="down5">
+ <div class="down5"><span>统计分析</span></div>
+ </div>
</div>
</div>
</template>
@@ -27,7 +37,6 @@
},
down2() {
this.$router.push({ path: "/healthcode/healthcode" });
-
},
down3() {
this.$router.push({ path: "/parcel/parcel" });
@@ -63,10 +72,10 @@
color: #fff;
.h1 {
- font-size: 50px;
+ font-size: 54px;
}
.h2 {
- font-size: 14px;
+ font-size: 28px;
}
}
.homeL-bar {
@@ -78,16 +87,32 @@
display: flex;
align-items: center;
justify-content: center;
- div {
+ .outS {
width: 20%;
height: 100%;
// border: 1px solid rgb(180, 22, 75);
display: flex;
align-items: center;
justify-content: center;
+ }
+ .down1,
+ .down2,
+ .down3,
+ .down4,
+ .down5 {
+ width: 96%;
+ height: 96%;
+ background-repeat: no-repeat;
+ background-size: 100% 100%;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 5px;
&:hover {
- width: 20%;
- height: 97%;
+ width: 99%;
+ height: 99%;
+ transition: all 0.3s ease;
}
span {
position: relative;
@@ -102,28 +127,18 @@
}
.down1 {
background-image: url("../../../public/img/yijianbaoj.jpg");
- background-repeat: no-repeat;
- background-size: 100% 100%;
}
.down2 {
background-image: url("../../../public/img/fangyi.jpg");
- background-repeat: no-repeat;
- background-size: 100% 100%;
}
.down3 {
background-image: url("../../../public/img/anjian.jpg");
- background-repeat: no-repeat;
- background-size: 100% 100%;
}
.down4 {
background-image: url("../../../public/img/tiwen.jpg");
- background-repeat: no-repeat;
- background-size: 100% 100%;
}
.down5 {
background-image: url("../../../public/img/tongji.jpg");
- background-repeat: no-repeat;
- background-size: 100% 100%;
}
}
}
--
Gitblit v1.9.3