thoth-frontend-test/src/views/home/floatMenu.vue

<template>
  <div class="div-menu">
    <div class="div-button-QRCode" @mouseover="QRCodeClassName = 'Float_icon_二维码_蓝色';display = 'display: none;';feedbackClassName = 'Float_icon_反馈';" @mouseout="QRCodeClassName = 'Float_icon_二维码'"><svg-icon :icon-class="QRCodeClassName" /></div>
    <el-card class="QRCode">
      <div class="QRCode-title">D-Chat客服群</div>
      <el-image :src="imgUrl" style="margin: 0" />
    </el-card>
    <div class="div-button-feedback" @mouseover="feedbackClassName = 'Float_icon_反馈_蓝色';display = 'display: block;'" @mouseout="display === 'display: none;'?feedbackClassName = 'Float_icon_反馈':feedbackClassName = 'Float_icon_反馈_蓝色'"><svg-icon :icon-class="feedbackClassName" /></div>
    <el-card class="feedback" :style="display">
      <div style="font-size: 12pt;color: #666666;display: inline-block">意见反馈</div>
      <div style="float: right;display: inline-block;" @click="feedBackClose"><svg-icon icon-class="float_反馈_icon_close" /></div><br>
      <div style="display:inline-block;font-size: 10pt;color: #666666;margin-top: 20pt">反馈类型</div>
      <el-select v-model="feedBackForm.type" placeholder="请选择" size="small" style="margin-left:10pt;width: 78%;">
        <el-option
          v-for="(item,index) in typeOptions"
          :key="index"
          :label="item"
          :value="item"
        />
      </el-select>
      <div style="display:inline-block;font-size: 10pt;color: #666666;">反馈模块</div>
      <el-select v-model="feedBackForm.moduleName" placeholder="请选择" size="small" style="margin: 10pt 0 10pt 10pt;width: 78%;">
        <el-option
          v-for="(item,index) in moduleNameOptions"
          :key="index"
          :label="item"
          :value="item"
        />
      </el-select>
      <textarea v-model="feedBackForm.content" style="padding: 10pt;width: 100%;height: 90pt;font-size: 10pt;color: #666666" placeholder="输入反馈信息" />
      <el-button style="float: right;margin-top: 20pt" type="info" size="small" @click="feedbackSummit()">反馈提交</el-button>
    </el-card>
  </div>
</template>

<style scoped>
.div-menu {
  width: 33pt;
  height: 70.5pt;
  background: #FFFFFF;
  box-shadow: 0 1px 10px 0 rgba(0,0,0,0.10);
  border-radius: 2px;
}
.div-menu:hover {
  cursor: pointer;
}
.QRCode-title {
  margin-bottom: 12.75pt;
  font-size: 9pt;
  color: #333333;
  text-align: center;
}
.QRCode {
  position: absolute;
  display: none;
  width: 183pt;
  height: 207pt;
  right: 120%;
  bottom: 0;
  padding: 0;
}
.div-button-QRCode:hover ~ .QRCode {
  display: block;
}
.div-button-QRCode {
  text-align: center;
  padding-top: 30%;
  height: 50%;
}
.div-button-feedback {
  width: 100%;
  text-align: center;
  padding-top: 30%;
  border-top: 0.5pt solid #E0E0E0;
}
.feedback {
  position: absolute;
  display: none;
  width: 300pt;
  height: 277.5pt;
  bottom: 0;
  right: 120%;
  padding: 5pt 10pt 5pt 10pt;
}
.el-card:hover{
  cursor: default;
}
</style>

<script>
import imgUrl from '@/assets/home_images/客服群二维码.png'

export default {
  name: 'FloatMenu',
  data() {
    return {
      isActive: true,
      imgUrl: imgUrl,
      feedbackClassName: 'Float_icon_反馈',
      QRCodeClassName: 'Float_icon_二维码',
      display: 'display: none;',
      feedBackForm: {
        type: '',
        moduleName: '',
        content: ''
      },
      typeOptions: ['反馈问题', '提出建议', '其他'],
      moduleNameOptions: ['流程管控', '自动化', '数据中心', '环境平台', 'Mock服务', '虚拟硬件', '其他']
    }
  },
  methods: {
    openWiki() {
      window.open('http://wiki.intra.xiaojukeji.com/pages/viewpage.action?pageId=174012208')
    },
    feedBackClick() {
      if (this.display === 'display: none;') {
        this.feedbackClassName = 'Float_icon_反馈_蓝色'
        this.display = 'display: block;'
      } else {
        this.feedBackClose()
      }
    },
    feedBackClose() {
      this.feedbackClassName = 'Float_icon_反馈'
      this.display = 'display: none;'
    },
    feedbackSummit() {
      this.feedBackClose()
    }
  }
}
</script>