首页

liuyg

2021-08-07 a68d219adb5667a0e6e4d83e68c9d3bd3176153c

首页

 public/img/anjian.jpg

 public/img/big-img-close.png

 public/img/bjkeji.png

 public/img/bjkeji2.jpg

 public/img/fangyi.jpg

 public/img/tiwen.jpg

 public/img/tongji.jpg

 public/img/yijianbaoj.jpg

 src/views/wel/index.vue

@@ -1,40 +1,150 @@
<template>
  <div>
    <el-row>
      <el-col :span="24">
        <third-register></third-register>
      </el-col>
    </el-row>


  <div id="homeL">
    <div class="homeL-up">
      <span class="h1">保安服务企业管理平台</span>
      <span class="h2">Security service enterprise management platform</span>
    </div>
    <div class="homeL-bar">
      <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>

<script>
  import {mapGetters} from "vuex";

  export default {
    name: "wel",
    data() {
      return {
        activeNames: ['1', '2', '3', '5'],
        logActiveNames: ['23']
      };
export default {
  data() {
    return {
      a: 1,
    };
  },
  methods: {
    down1() {
      this.$router.push({ path: "/securityGuard/index" });
    },
    computed: {
      ...mapGetters(["userInfo"]),
    down2() {
      this.$router.push({ path: "/securityUnit/index" });
    },
    methods: {
      handleChange(val) {
        window.console.log(val);
      }
    down3() {
      this.$router.push({ path: "/dispatch/dispatch" });
    },
  };
    down4() {
      this.$router.push({ path: "/traincompany/index" });
    },
    down5() {
      this.$router.push({ path: "/desk/index" });
    },
  },
  mouted() {},
};
</script>

<style>
  .el-font-size {
    font-size: 14px;
<style lang="scss">
#homeL {
  width: 100%;
  height: 96%;
  //   border: 1px solid #000;
  .homeL-up {
    width: 100%;
    height: 70%;
    // border: 1px solid rgb(39, 164, 185);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-image: url("../../../public/img/bjkeji.png");
    background-color: #fff;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    color: #4ba3fe;
    .h1,
    .h2 {
      position: relative;
      left: 18%;
    }
    .h1 {
      font-size: 54px;
    }
    .h2 {
      font-size: 28px;
    }
  }
</style>

  .homeL-bar {
    width: 100%;
    height: 30%;
    position: relative;
    top: 2.5px;
    // border: 1px solid rgb(51, 22, 180);
    display: flex;
    align-items: center;
    justify-content: center;
    .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: 99%;
        height: 99%;
        transition: all 0.3s ease;
      }
      span {
        position: relative;
        top: -30px;
        left: -50px;
        font-weight: 600;
        font-size: 30px;
        color: #fff;
        display: inline-block;
        // border: 1px solid rgb(180, 22, 75);
      }
    }
    .down1 {
      background-image: url("../../../public/img/yijianbaoj.jpg");
    }
    .down2 {
      background-image: url("../../../public/img/fangyi.jpg");
    }
    .down3 {
      background-image: url("../../../public/img/anjian.jpg");
    }
    .down4 {
      background-image: url("../../../public/img/tiwen.jpg");
    }
    .down5 {
      background-image: url("../../../public/img/tongji.jpg");
    }
  }
}
</style>