xiangan_pc/src/components/360View/shrink.vue

<template>
  <div v-move class="key-indicators-shrink">
    <div class="icon-circle" @click="shrinkClick">
      <i :class="arrowType === 2 ? 'el-icon-arrow-right':'el-icon-arrow-left'" />
    </div>
    <img :src="require('@/assets/img/selBg.png')" alt="" :class="active">
    <img class="imgCur" :src="require('@/assets/img/unselBg.png')" alt="" @click="handleType(1)">
    <img class="imgOne" :src="require('@/assets/img/unselBg.png')" alt="" @click="handleType(2)">
    <img class="imgTwo" :src="require('@/assets/img/unselBg.png')" alt="" @click="handleType(3)">
    <img class="imgThree" :src="require('@/assets/img/unselBg.png')" alt="" @click="handleType(4)">
    <span class="dataBase dataOne" :class="[active === 'imgCur' ? 'fontColor' : '']" @click="handleType(1)">关键指标</span>
    <span class="dataBase dataTwo" :class="[active === 'imgOne' ? 'fontColor' : '']" @click="handleType(2)">数据集</span>
    <span class="dataBase dataThree" :class="[active === 'imgTwo' ? 'fontColor' : '']" @click="handleType(3)">病历收集</span>
    <span class="dataBase dataFour" :class="[active === 'imgThree' ? 'fontColor' : '']" @click="handleType(4)">常用业务</span>
  </div>
</template>

<script>

export default {
  directives: {
    move(el, bindings) {
      el.onmousedown = (e) => {
        // const init = e.clientX
        // const parent = document.getElementById('drawerKey')
        // const initWidth = parent.offsetWidth
        // document.onmousemove = function(e) {
        //   const end = e.clientX
        //   const newWidth = init - end + initWidth
        //   parent.style.width = newWidth + 'px'
        // }
        // document.onmouseup = function() {
        //   document.onmousemove = document.onmouseup = null
        // }
      }
    }
  },
  props: {
    arrowType: {
      type: Number,
      default: 1 // 1外面 2里面
    }
  },
  data() {
    return {
      active: 'imgCur',
      drawerFlag: false
    }
  },
  mounted() {

  },
  methods: {
    shrinkClick() {
      this.active = 'imgCur'
      if (this.arrowType === 1) {
        this.$emit('display', true)
        document.getElementsByClassName('key-indicators-shrink')[0].style.zIndex = 999
      } else {
        this.$emit('display', false)
        document.getElementsByClassName('key-indicators-shrink')[0].style.zIndex = 9999
      }
    },
    handleType(type) {
      this.$emit('changeType', type)
      if (type === 1) {
        this.active = 'imgCur'
      } else if (type === 2) {
        this.active = 'imgOne'
      } else if (type === 3) {
        this.active = 'imgTwo'
      } else if (type === 4) {
        this.active = 'imgThree'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.key-indicators-shrink {
  width: 32px;
  height: 100%;
  position: relative;
  background: linear-gradient(90deg, rgba(47, 130, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
  .icon-circle {
    border-radius: 50%;
    width: 24px;
    height: 24px;
    border: 2px solid rgba(30, 121, 255, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 18px;
    margin-left: 3px;
    cursor: pointer;
  }
  .el-icon-arrow-right,.el-icon-arrow-left {
    color: #1C76FD;
    font-weight: 700;
  }
  img {
    width: 32px;
    height: 142px;
  }
  .dataBase{
    position: absolute;
    display: inline-block;
    color: #1C76FD;
    margin-left: 6px;
    writing-mode: vertical-rl;
    letter-spacing: 3px;
    cursor: pointer;
  }
  .fontColor{
    color: white !important;
  }
  .dataOne{
    top: 80px;
  }
  .dataTwo{
    top: 210px;
  }
  .dataThree{
    top: 328px;
  }
  .dataFour{
    top: 455px;
  }
  .imgCur{
    position: absolute;
    left: 0;
    top: 43px;
  }
  .imgOne{
    position: absolute;
    left: 0;
    top: 163px;
  }
  .imgTwo{
    position: absolute;
    left: 0;
    top: 287px;
  }
  .imgThree{
    position: absolute;
    left: 0;
    top: 411px;
  }
}
</style>