linwe
2023-12-21 ad0a536bd7534a8eaf477d41294de21c7d7b25df
src/views/wel/index.vue
@@ -1,34 +1,176 @@
<template>
  <div>
  </div>
    <div id="homeL">
        <div class="homeL-up">
            <span class="h1">基层智治综合协同平台</span>
            <span class="h2">Grassroots intelligent governance integrated cooperation 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>E呼即办</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 class="outS" @click="down6" v-show="globalUserInfo.role_name == 'administrator'">
                <div class="down6"><span>驾驶舱</span></div>
            </div>
        </div>
    </div>
</template>
<script>
  import {mapGetters} from "vuex";
import { getStore } from "@/util/store"
  export default {
    name: "wel",
    data() {
      return {
        activeNames: ['1', '2', '3', '5'],
        logActiveNames: ['31']
      };
    },
    computed: {
      ...mapGetters(["userInfo"]),
export default {
    data () {
        return {
            a: 1,
            globalUserInfo: getStore({ name: "userInfo" }),
        }
    },
    methods: {
      handleChange(val) {
        window.console.log(val);
      }
        down1 () {
            this.$router.push({ path: "/userHouse/houseHoldList" })
        },
        down2 () {
            this.$router.push({ path: "/userHouse/houseList" })
        },
        down3 () {
            this.$router.push({ path: "/cGovernance/taskECall" })
        },
        down4 () {
            this.$router.push({ path: "/task/reportForRepairs" })
        },
        down5 () {
            this.$router.push({ path: "/grid/gridWorkLog/index" })
        },
        down6 () {
            window.open('http://srgdjczzxtpt.com:2181/databoard/dashboard')
        },
    },
  };
    mouted () { },
}
</script>
<style lang="scss">
#homeL {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 96.6%;
<style>
  .el-font-size {
    font-size: 14px;
  }
</style>
    //   border: 1px solid #000;
    .homeL-up {
        width: 100%;
        height: 74%;
        // 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: 22%;
        }
        .h1 {
            font-size: 54px;
        }
        .h2 {
            font-size: 28px;
        }
    }
    .homeL-bar {
        height: 0;
        flex: 1;
        width: 100%;
        display: flex;
        align-items: center;
        .outS {
            width: 0;
            flex: 1;
            height: 94.6%;
            display: flex;
            justify-content: center;
        }
        .down1,
        .down2,
        .down3,
        .down4,
        .down5,
        .down6 {
            width: 96%;
            height: 100%;
            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.png");
        }
        .down2 {
            background-image: url("../../../public/img/fangyi.png");
        }
        .down3 {
            background-image: url("../../../public/img/anjian.png");
        }
        .down4 {
            background-image: url("../../../public/img/tiwen.png");
        }
        .down5 {
            background-image: url("../../../public/img/tongji.png");
        }
        .down6 {
            background-image: url("../../../public/img/jsc.png");
        }
    }
}
</style>