smart-power-ui/src/views/systemIndex.vue

<template>
  <div class="app-container system-home">
    <div class="top-wrap">
      <div v-for="(doctTop, index) in topOption" :Key="index">
        <div class="icon-wrap">
          <img :src="doctTop.leftImg" class="top-img" alt="dark" />
          <span :class="'jg-span ' +  doctTop.spanClass"></span>
        </div>
        <div class="info-block">
          <span>{{doctTop.title}}</span>
          <div class="info-wrap" :style="{'color': doctTop.valueColor}">{{topValue[doctTop.value]}}</div>
        </div>
      </div>
    </div>
    <div class="cneter-wrap">
      <div>
        <div>项目</div>info
      </div>
      <div>
        <div>设备</div>
      </div>
      <div>
        <div>告警</div>
      </div>
      <div>
        <div>工单</div>
      </div>
    </div>
    <div class="right-tigs">日志公告等信息</div>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      // 版本号
      version: "3.3.0",
      topValue: {
        farstValue: 53,
        twoValue: 124,
        threeValue: 666,
        lastVlaue: 89
      },
      topOption: [
        {
          leftImg: "/images/quickStart_icon_subuserCounts.992898a.png",
          spanClass: "span-bg1",
          valueColor: "#b176e9",
          value: "farstValue",
          title: "系统用户 (单位: 人)"
        },
        {
          leftImg: "/images/quickStart_icon_subuserCounts.992898a.png",
          spanClass: "span-bg1",
          valueColor: "#b176e9",
          value: "twoValue",
          title: "用户用户 (单位: 人)"
        },
        {
          leftImg: "/images/quickStart_icon_subuserCounts.992898a.png",
          spanClass: "span-bg1",
          valueColor: "#b176e9",
          value: "threeValue",
          title: "个人用户 (单位: 人)"
        },
        {
          leftImg: "/images/quickStart_icon_subuserCounts.992898a.png",
          spanClass: "span-bg1",
          valueColor: "#b176e9",
          value: "lastVlaue",
          title: "在线人数 (单位: 人)"
        },
        // {
        //   leftImg: "/images/quickStart_icon_subuserCounts.992898a.png",
        //   spanClass: "span-bg1",
        //   valueColor: "#b176e9",
        //   value: "lastVlaue",
        //   title: "注册用户 (单位: 人)"
        // }
      ]
    };
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    }
  }
};
</script>

<style lang="scss">
.system-home {
  display: flex;
  width: 100%;
  height: calc(100vh - 85px);
  overflow: auto;
  flex-wrap: wrap;
  .top-wrap {
    width: calc(100%);
    display: flex;
    justify-content: space-between;
    > div {
      width: calc((100% - 60px) / 4);
      height: 120px;
      display: flex;
      padding: 10px 10px;
      color: #f7f7f7;
      align-items: center;
      justify-content: space-around;
      box-shadow: 0px 0px 5px #a5a4a4;
      .icon-wrap {
        width: 35%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        .top-img {
          width: 55%;
          height: 60%;
        }
        .jg-span {
          display: block;
          width: 3px;
          background: #c7c3c3;
          height: 70px;
          margin: 0 10px;
          background: -webkit-linear-gradient(
            bottom,
            #2196f36e,
            #b176e9 50%,
            #2196f36e
          );
        }
        .span-bg1 {
          background: -webkit-linear-gradient(
            bottom,
            #2196f36e,
            #b176e9 50%,
            #2196f36e
          );
        }
      }
      .info-block {
        width: calc(100% - 35%);
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        height: 75%;
        align-items: center;
        justify-content: left;
        .info-wrap {
          color: #b176e9;
          font-size: 1.5vw;
          width: 100%;
          height: 70%;
          align-items: center;
          display: flex;
        }
        > span {
          color: #9c9c9c;
          font-size: 14px;
          display: block;
          height: 20px;
          text-align: left;
          padding-right: 10px;
          position: relative;
          top: 0px;
          left: -6px;
        }
      }
    }
  }
  .cneter-wrap {
    height: calc(100% - 150px);
    width: calc(100% - 320px);
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: center;
    > div {
      width: calc((100% - 20px) / 2);
      height: calc((100% - 20px) / 2);
      /* border: 1px solid #333; */
      margin-bottom: 20px;
      box-shadow: 0px 0px 3px #a5a4a4;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      > div {
        height: 45px;
        border-bottom: 1px solid #9c9c9c;
        width: 100%;
        padding: 10px;
        font-size: 16px;
      }
    }
    > div:hover {
      box-shadow: 0px 0px 5px #a5a4a4;
    }
  }
  .right-tigs {
    width: 300px;
    height: calc(100% - 150px);
    box-shadow: 0px 0px 5px #a5a4a4;
    margin-left: 20px;
    margin-top: 20px;
  }
}
</style>