<template>
  <div class="sale-wrapper">
    <div class="title">销量监管</div>
    <div class="mod mod1" @click="clickItem1">车辆识别管理</div>
    <div class="mod mod2" @click="clickItem2">语音对讲指挥调度</div>
    <div class="mod mod3" @click="clickItem3">视频监控</div>
    <div class="mod mod4" @click="clickItem4">销量综合监管</div>
    <div class="mod mod5" @click="clickItem5">数据监测</div>
    <div class="mod mod6" @click="clickItem6">过磅自动称重管理</div>
    <div class="mod mod7" @click="clickItem7">车辆逃逸告警</div>

  </div>
</template>

<script>
export default {
  methods: {
    clickItem1() {
      console.log('clickItem clickItem')
      this.$store.commit('SET_SALE_ITEM1', true)
    },
    clickItem2() {
      console.log('clickItem clickItem')
      this.$store.commit('SET_SALE_ITEM2', true)
    },
    clickItem3() {
      console.log('clickItem clickItem')
      this.$store.commit('SET_SALE_ITEM3', true)
    },
    clickItem4() {
      console.log('clickItem clickItem')
      this.$store.commit('SET_SALE_ITEM4', true)
    },
    clickItem5() {
      console.log('clickItem clickItem')
      this.$store.commit('SET_SALE_ITEM5', true)
    },
    clickItem6() {
      console.log('clickItem clickItem')
      this.$store.commit('SET_SALE_ITEM6', true)
    },
    clickItem7() {
      console.log('clickItem clickItem')
      this.$store.commit('SET_SALE_ITEM7', true)
    },
  },
  computed: {
    showItem1 () {
      console.log('showItem1')
      return this.$store.state.showSaleItem1
    },
    showItem2 () {
      return this.$store.state.showSaleItem2
    },
    showItem3 () {
      return this.$store.state.showSaleItem3
    },
    showItem4 () {
      return this.$store.state.showSaleItem4
    },
    showItem5 () {
      return this.$store.state.showSaleItem5
    },
    showItem6 () {
      return this.$store.state.showSaleItem6
    },
    showItem7 () {
      return this.$store.state.showSaleItem7
    }
  },
  components: {
  }
}
</script>

<style lang="scss" scoped>
  .sale-wrapper {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-image: url('../../assets/images/bgggggg.png');
    background-size: 100% 100%;
    z-index: 9999;
    .title {
      position: absolute;
      top: 38.17%;
      left: 50%;
      transform: translateX(-50%);
      font-family: "SourceHanSansCN-Regular";
      color: #2bf7f0;
      font-size: 60px;
    }
    .mod {
      width: 252px;
      height: 322px;
      display: flex;
      justify-content: center;
      align-items: flex-end;
      padding-bottom: 70px;
      font-family: "SourceHanSansCN-Regular";
      color: #ffffff;
      font-size: 28px;
      background-position-y: top;
      &:hover {
        cursor: pointer;
      }
    }
    .mod1 {
      position: absolute;
      left: 604px;
      top: 136px;
      background-image: url("../../assets/images/车辆.png");
      background-position: center;
      background-repeat: no-repeat;
    }
    .mod2 {
      position: absolute;
      left: 172px;
      top: 317px;
      background-image: url("../../assets/images/语音.png");
      background-position: center;
      background-repeat: no-repeat;
    }
    .mod3 {
      position: absolute;
      left: 380px;
      top: 568px;
      background-image: url("../../assets/images/视频.png");
      background-position: center;
      background-repeat: no-repeat;
    }
    .mod4 {
      position: absolute;
      left: 809px;
      top: 643px;
      background-image: url("../../assets/images/销量综合监管.png");
      background-position: center;
      background-repeat: no-repeat;
    }
    .mod5 {
      position: absolute;
      left: 1243px;
      top: 560px;
      background-image: url("../../assets/images/数据监测.png");
      background-position: center;
      background-repeat: no-repeat;
    }
    .mod6 {
      position: absolute;
      left: 1505px;
      top: 327px;
      background-image: url("../../assets/images/过磅.png");
      background-position: center;
      background-repeat: no-repeat;
    }
    .mod7 {
      position: absolute;
      left: 1112px;
      top: 128px;
      background-image: url("../../assets/images/车辆逃逸告警.png");
      background-position: center;
      background-repeat: no-repeat;
    }
  }
</style>