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

<template>
  <div :style="{height: screenHeight,width: screenWidth}">
    <el-menu
      :style="{width: screenWidth}"
      mode="horizontal"
      :background-color="menuColor"
      text-color="#FFF"
      active-text-color="#FFF"
      @select="handleSelect"
    >
      <img class="logo" src="@/assets/home_images/homepage_logo@2x.png">
      <!-- <el-menu-item style="margin-left: 18.5%" index="4">项目管理</el-menu-item> -->
      <!-- <el-menu-item index="10">测试管理</el-menu-item> -->
      <!-- <el-menu-item index="1">环境管理</el-menu-item> -->
      <!-- <el-menu-item index="2">Mock服务</el-menu-item>
      <el-menu-item index="3">数据中心</el-menu-item>
      <el-menu-item index="6">虚拟硬件</el-menu-item>
      <el-menu-item index="7">上线质检</el-menu-item> -->
      <!-- <el-menu-item index="8">统计分析</el-menu-item> -->
      <!-- <el-menu-item index="9">工具集合</el-menu-item> -->
      <!-- <el-menu-item index="5" disabled>自动化</el-menu-item> -->
      <div class="div-login">
        <svg-icon icon-class="yonghu" />
        <el-dropdown style="color: #ffffff" @command="handleCommand">
          <span class="el-dropdown-link">
            {{ username }}
            <i class="el-icon-arrow-down el-icon--right" />
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="a">退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-menu>
    <div style="color: #FFFF">
      <div class="div-introduction">
        <div>
          <img class="image-title" style="width: 470px" src="@/assets/home_images/banner_title@2x.png">
          <br>
          <span style="font-size: 17pt;">一站式质量效率平台，普惠你的工作</span><br>
          <el-button plain class="enter-button" @click.native="handleSelect('4')"><svg-icon icon-class="project-enter" />项目管理</el-button>
          <el-button plain class="enter-button" @click.native="handleSelect('1')"><svg-icon icon-class="env-enter" />环境管理</el-button>
          <el-button plain class="enter-button" @click.native="handleSelect('9')"><svg-icon icon-class="tool-enter" />工具集合</el-button>
        </div>
        <div class="home-carousel">
          <el-carousel :height="imgHeight + 'px'" indicator-position="outside">
            <el-carousel-item v-for="(item, index) in abc_img" :key="index">
              <img ref="image" :src="item.thumb" style="width: 100%; cursor: pointer;" @load="loadImage()" @click="image_carousel(item)">
            </el-carousel-item>
          </el-carousel>
          <img src="@/assets/home_images/home_inage.png" style="position: absolute; left: 45%; width: 60%;">
        </div>
      </div>
      <a href="#content1">
        <img
          class="img-arrow"
          style="width: 30px;"
          src="@/assets/home_images/banner_icon_arrow@3x.png"
        >
      </a>
      <img style="width: 100%;z-index: -1;" src="@/assets/home_images/home.jpg">
    </div>
    <div id="content1" />
    <div class="div-main" style="height: 600pt;width 100%;text-align: center;">
      <div style="font-size: 21pt;margin-top: 54pt;color: #333333;">功能介绍</div>

      <el-card disabled shadow="hover" style="margin-left: 0;margin-top: 42pt" @click.native="handleSelect('4')">
        <img class="image-module-logo" src="@/assets/home_images/功能介绍_icon_流程管控@3x.png">
        <div class="div-title">项目管理</div>
        <div class="div-module-introduction">简单、明了、一站式流程管理</div>
      </el-card>
      <el-card shadow="hover" @click.native="handleSelect('10')">
        <img class="image-module-logo" src="@/assets/home_images/功能介绍_icon_测试管理@3x.png" fit="contain">
        <div class="div-title">测试管理</div>
        <div class="div-module-introduction">全面综合的个性化环境服务</div>
      </el-card>
      <el-card shadow="hover" @click.native="handleSelect('1')">
        <img class="image-module-logo" src="@/assets/home_images/功能介绍_icon_环境平台@3x.png" fit="contain">
        <div class="div-title">环境平台</div>
        <div class="div-module-introduction">全面综合的个性化环境服务</div>
      </el-card>
      <!-- <el-card shadow="hover" @click.native="handleSelect('2')">
        <img class="image-module-logo" src="@/assets/home_images/功能介绍_icon_服务mock@3x.png">
        <div class="div-title">Mock服务</div>
        <div class="div-module-introduction">灵活稳定的Mock服务</div>
      </el-card>
      <br>
      <el-card shadow="hover" style="margin-left: 0;margin-top: 36pt;" @click.native="handleSelect('3')">
        <img class="image-module-logo" src="@/assets/home_images/功能介绍_icon_数据中心@3x.png">
        <div class="div-title">数据中心</div>
        <div class="div-module-introduction">数据构造、统计、备份、分析</div>
      </el-card>
      <el-card shadow="hover" @click.native="handleSelect('6')">
        <img class="image-module-logo" src="@/assets/home_images/功能介绍_icon_虚拟硬件@3x.png">
        <div class="div-title">虚拟硬件</div>
        <div class="div-module-introduction">设备一键生成，自由管控</div>
      </el-card>
      <el-card shadow="hover" @click.native="handleSelect('7')">
        <img class="image-module-logo" src="@/assets/home_images/功能介绍_icon_上线质检@3x.png">
        <div class="div-title">上线质检</div>
        <div class="div-module-introduction">强管控上线过程，保障上线质量</div>
      </el-card> -->
      <br>
      <el-card shadow="hover" style="margin-left: 0;margin-top: 36pt" @click.native="handleSelect('8')">
        <img class="image-module-logo" src="@/assets/home_images/功能介绍_icon_质量度量@3x.png">
        <div class="div-title">统计分析</div>
        <div class="div-module-introduction">通过各维度数据分析质量问题</div>
      </el-card>
      <el-card shadow="hover" @click.native="handleSelect('9')">
        <img class="image-module-logo" src="@/assets/home_images/功能介绍_icon_工具合集@3x.png">
        <div class="div-title">工具集合</div>
        <div class="div-module-introduction">通过各维度数据分析质量问题</div>
      </el-card>
      <el-card shadow="never" @click.native="handleSelect('5')">
        <img class="image-module-logo" src="@/assets/home_images/功能介绍_icon_自动化未上线@3x.png">
        <div class="div-title" style="color: #999999">自动化-敬请期待</div>
        <div class="div-module-introduction">简洁优雅实现自动化</div>
      </el-card>
      <!-- <el-card class="expect" shadow="never">
        <div class="div-title" style="color: #999999" />
        <div class="div-module-introduction" />
      </el-card> -->
    </div>
    <div style="font-size: 12px; color: #FFF; height: 240px;width 100%;background-image: linear-gradient(to bottom right,#3e99fd,#1040db); text-align: center;">
      <div style="font-size: 20px; padding: 30px 0 10px; font-weight: 600;">质惠综合测试平台</div>
      <div style="padding: 0px 0 40px;">普惠质量技术部 效率工具FT</div>
      <div>流程管控-廖子君&nbsp;&nbsp;&nbsp; | &nbsp;&nbsp;&nbsp;Mock服务-赵福贵&nbsp;&nbsp;&nbsp; | &nbsp;&nbsp;&nbsp;环境平台-李嘉嘉/刘青&nbsp;&nbsp;&nbsp; | &nbsp;&nbsp;&nbsp;虚拟硬件-魏洁文&nbsp;&nbsp;&nbsp; | &nbsp;&nbsp;&nbsp;数据中心-王丽莎&nbsp;&nbsp;&nbsp; | &nbsp;&nbsp;&nbsp;自动化-陈雅琪/程如意</div>
      <div style="padding: 20px 0 40px;">产品设计-朱晓菲&nbsp;&nbsp;&nbsp; | &nbsp;&nbsp;&nbsp;UI设计-余霖&nbsp;&nbsp;&nbsp; | &nbsp;&nbsp;&nbsp;前端-秦志鹏/王子乾&nbsp;&nbsp;&nbsp; | &nbsp;&nbsp;&nbsp;FT负责人-叶宏钢/廖子君</div>
      <div style="font-size: 10px;">© 2019. All Rights Reserved</div>
    </div>
    <float-menu class="float-menu-home" />
  </div>
</template>

<style scoped>
.home-carousel {
  width: 50%;
  border-top:30px solid #f5f5f5;
  border-right:30px solid #f5f5f5;
  border-left:30px solid #f5f5f5;
  border-radius: 12px;
  background: #f5f5f5;
}

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
.el-dropdown:hover {
  cursor: pointer;
}
.logo {
  position: absolute;
  width: 90px;
  left: 7.8%;
  top: 23%;
}
div.div-login {
  margin-top: 10px;
  color: #ffffff;
  display: inline-block;
  position: absolute;
  font-size: 10pt;
  top: 22%;
  right: 8.3%;
}
div.div-introduction {
  position: absolute;
  font-size: 37pt;
  top: 17.5%;
  left: 8.3%;
  line-height: 50px;
  width: 80%;
  display: flex;
  justify-content: space-between;
}
img.img-arrow {
  position: absolute;
  cursor: pointer;
  width: 2.1%;
  top: 95%;
  left: 48.95%;
}
.enter-button {
  margin-top: 6vh;
  margin-right: 20px;
  padding: 14px 10px;
  color: rgb(64,158,255);
}
.enter-button svg {
  margin-right: 10px;
  font-size: 18px;
}
.el-menu {
  border: none;
  height: 68px;
  position: fixed;
  z-index: 10;
}
.el-menu-item {
  padding-top: 1.5pt;
  height: 100%;
}
.is-active {
  color: #0fe3ff !important;
  border-color: #0fe3ff !important;
}
.el-menu-item:hover {
  color: #0fe3ff !important;
  background-color: transparent !important;
}
.float-menu-home {
  position: fixed;
  right: 10px;
  top: 70%;
  z-index: 10;
}
.el-card {
  display: inline-block;
  width: 22%;
  height: 180pt;
  margin-left: 56pt;
  text-align: center;
  border: none;
}
</style>

<style scoped>
.image-module-logo {
  margin-top: 25pt;
  width: 20%;
  height: 60px;
  object-fit: contain;
}
div.div-title {
  font-size: 13.5pt;
  color: #333333;
  margin-top: 21pt;
}
div.div-module-introduction {
  font-size: 10.5pt;
  color: #999999;
  margin-top: 7.5pt;
}
.el-card:hover {
  cursor: pointer;
}
.el-card.expect:hover {
  cursor: not-allowed;
}
</style>

<style scoped>
img.img-arrow {
  animation: arrow 1.5s infinite ease-in-out;
  -webkit-animation: arrow 1.5s infinite ease-in-out;
}
@keyframes arrow {
  0% {
    opacity: 0;
    -webkit-transform: translate(0, 0px);
  }
  50% {
    opacity: 1;
    -webkit-transform: translate(0, -5px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(0, -10px);
  }
}
@-webkit-keyframes arrow {
  0% {
    opacity: 0;
    -webkit-transform: translate(0, 0px);
  }
  50% {
    opacity: 1;
    -webkit-transform: translate(0, -5px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(0, -10px);
  }
}
</style>

<script>
import { mapGetters } from 'vuex'
import FloatMenu from './floatMenu'
import { logoutUrl, envUrl, toolsUrl } from '@/apiConfig/requestIP.js'
import { settingUserGetBiz } from '@/api/projectIndex'
import { materialGetMaterialList } from '@/api/monthly/index.js'

export default {
  components: {
    FloatMenu
  },
  data() {
    return {
      abc_img: [],
      activeIndex2: '1',
      imgHeight: 300,
      menuColor: 'transparent',
      processManage: true,
      screenWidth: '100%',
      screenHeight: '1395pt'
    }
  },
  computed: {
    username() {
      return localStorage.getItem('realname')
    },
    ...mapGetters([
      'bizId'
    ])
  },
  mounted() {
    this.materialGetMaterialList()
    window.addEventListener('resize', () => {
      this.imgHeight = this.$refs.image[0].height
    })
    window.addEventListener('scroll', this.handleScroll, true)
    window.onresize = () => {
      return (() => {
        if (document.body.clientWidth < 1300) {
          this.screenWidth = '1300px'
        } else {
          this.screenWidth = '100%'
        }
      })()
    }
  },
  created() {
    this.settingUserGetBiz()
  },
  methods: {
    loadImage() {
      this.imgHeight = this.$refs.image[0].height
    },
    image_carousel(e) {
      this.$router.push({ name: '月刊详情', query: { id: e.id }})
    },
    async materialGetMaterialList() {
      const res = await materialGetMaterialList({ pageSize: 5 })
      if (res.code === 200) {
        this.abc_img = res.data
      }
    },
    async settingUserGetBiz() { // 获取人员默认业务线
      const res = await settingUserGetBiz()
      if (res.code === 200 && res.data) {
        this.$store.dispatch('global/setBizId', res.data.bizId)
        localStorage.setItem('bizId', res.data.bizId)
      }
    },
    handleSelect(key, keyPath) {
      switch (key) {
        case '1':
          // this.$router.push({ name: 'env' })
          window.open(envUrl, '_self')
          break
        case '2':
          this.$router.push({ name: 'Interface' })
          break
        case '3':
          this.$router.push({ name: 'jar包管理' })
          break
        case '4' :
          if (!this.bizId || this.bizId === -1) {
            this.$router.push({ name: '业务线选择' })
          } else {
            this.$router.push({ name: '项目' })
          }
          break
        case '6':
          this.$router.push({ name: '单车' })
          break
        case '7':
          this.$router.push({ name: '上线质检' })
          break
        case '8':
          this.$router.push({ name: '统计分析' })
          break
        case '9':
          // this.$router.push({ name: 'Interface' })
          window.open(toolsUrl, '_self')
          break
        case '10':
          this.$router.push({ name: '测试用例' })
          break
      }
    },
    handleScroll() {
      const scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop
      if (scrollTop > 1) {
        this.menuColor = 'rgb(64,158,255)'
      } else {
        this.menuColor = 'transparent'
      }
    },
    handleCommand(command) {
      switch (command) {
        case 'a':
          location.href = logoutUrl
          break
      }
    }
  }
}
</script>