按钮

liuyg

2021-05-07 a878e17d51c76cc2e98cc254e9107d258601ec35

按钮

 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%;
    }
  }
}