esua-epdc-admin/src/views/main-index.vue

<template>
  <div class="aui-main-index">
    <div class="click-item">
      <div class="item-left" @mouseover="mouseOver('1')" @mouseleave="mouseLeave()" @click="mainIndexClick">
        <img class="item-guanlipingtai" :src="guanlipingtai">
        <div :class="isSelectleft ? 'noselect-item-title' : 'select-item-title'">
          <div class="circular"></div>
          <div class="name">党群e家管理平台</div>
        </div>
        <img class="item-zhuangshi" :src="zhuangshi">
      </div>
      <div class="item-left" @mouseover="mouseOver('2')" @mouseleave="mouseLeave()">
        <img class="item-guanlipingtai" :src="shujukeshihua">
        <div :class="isSelectRight ? 'noselect-item-title' : 'select-item-title'">
          <div class="circular"></div>
          <div class="name">数据分析可视化平台</div>
        </div>
        <img class="item-zhuangshi" :src="zhuangshi">
      </div>
    </div>
  </div>
</template>

<script>
import guanlipingtai from '@/assets/img/guanlipingtai@2x.png'
import shujukeshihua from '@/assets/img/shujukeshihua@2x.png'
import zhuangshi from '@/assets/img/zhuangshi@2x.png'
export default {
  data () {
    return {
      guanlipingtai: guanlipingtai,
      shujukeshihua: shujukeshihua,
      zhuangshi: zhuangshi,
      isSelectleft: false,
      isSelectRight: false
    }
  },
  created () {
  },
  methods: {
    mouseOver (e) {
      if (e === '1') {
        this.isSelectleft = true
        this.isSelectRight = false
      } else if (e === '2') {
        this.isSelectleft = false
        this.isSelectRight = true
      }
    },
    mouseLeave () {
      this.isSelectleft = false
      this.isSelectRight = false
    },
    mainIndexClick () {
      this.$emit('mainIndexByValue', true)
    }

  }
}
</script>
<style  lang="scss" scoped>
.aui-main-index {
  height: 100vh;
  width: 100%;
  position: absolute;
  background: url(~@/assets/img/main_index_bg.png) no-repeat;
  background-size: 100% 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.click-item{
  width: 100%;
  height: calc(45% + 21px + 72px);
  margin-top: 10%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14%;
  box-sizing: border-box;
  .item-left{
    cursor: pointer;
    height: 100%;
    width: 31%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction:column;
    .item-guanlipingtai{
      width: 100%;
      height: calc(100% - 21px - 72px);
    }
    .select-item-title {
      padding: 0 10px;
      box-sizing: border-box;
      text-align: center;
      width: auto;
      height: 21px;
      line-height: 21px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      background: #FFFFFF;
      border: 1px solid #B9B9B9;
      border-radius: 11px;
      font-weight: 500;
      color: #002FEC;
      .circular{
        width: 7px;
        height: 7px;
        background: #0065F6;
        border-radius: 50%;
      }
      .name{
        margin-left: 5px;
      }
    }
    .noselect-item-title{
      padding: 0 10px;
      box-sizing: border-box;
      text-align: center;
      width: auto;
      height: 21px;
      line-height: 21px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      background: #007AFA;
      border: 1px solid #FFFFFF;
      border-radius: 11px;
      font-weight: 500;
      color: #FFFFFF;
      .circular{
        width: 7px;
        height: 7px;
        background: #FFFFFF;
        border-radius: 50%;
      }
      .name{
        margin-left: 5px;
      }
    }
    .item-zhuangshi{
      margin-top: 3px;
      width: 13px;
      height: 69px;
    }
  }
}
</style>