添加首页

src/router/index.js

@@ -6,6 +6,9 @@ Vue.use(Router)
 /* Layout */
 import Layout from '@/layout'
 
+/* Home */
+import Home from '@/views/home/index'
+
 /**
  * Note: sub-menu only appear when route children.length >= 1
  * Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
@@ -45,6 +48,12 @@ export const constantRoutes = [
 
   {
     path: '/',
+    component: Home,
+    hidden: true
+  },
+
+  {
+    path: '/home',
     component: Layout,
     redirect: '/dashboard',
     children: [{

src/views/home/floatMenu.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="div-menu">
+    <el-button icon="el-icon-question" size="small" plain @click="openWiki" /><br>
+    <el-button class="button-dingding" icon="el-icon-chat-dot-square" size="small" plain /><br>
+    <el-card class="dingding-image">
+      <el-image :src="imgUrl" style="margin: 0" />
+    </el-card>
+  </div>
+</template>
+
+<style scoped>
+.el-button {
+  opacity: 0.7;
+}
+.div-menu {
+  width: auto;
+}
+.dingding-image {
+  display: none;
+  width: 250px;
+  height: 320px;
+  right: 110%;
+  bottom: -7%;
+  padding: 0;
+}
+.button-dingding:hover ~ .dingding-image {
+  display: block;
+  position: absolute;
+}
+</style>
+
+<script>
+import imgUrl from '@/assets/dingding.jpg'
+
+export default {
+  name: 'FloatMenu',
+  data() {
+    return {
+      isActive: true,
+      imgUrl: imgUrl
+    }
+  },
+  methods: {
+    openWiki() {
+      window.open('http://wiki.intra.xiaojukeji.com/pages/viewpage.action?pageId=174012208')
+    }
+  }
+}
+</script>

src/views/home/index.vue

@@ -0,0 +1,224 @@
+<template>
+  <div style="height: 1395pt">
+    <el-menu
+      class="el-menu-home"
+      mode="horizontal"
+      :background-color="menuColor"
+      text-color="#FFF"
+      active-text-color="#FFF"
+      @select="handleSelect"
+    >
+      <el-image class="logo" :src="logoImage" fit="fill" />
+      <el-menu-item style="margin-left: 18.5%" index="1">流程管控</el-menu-item>
+      <el-menu-item index="2">自动化</el-menu-item>
+      <el-menu-item index="3">数据中心</el-menu-item>
+      <el-menu-item index="4">环境平台</el-menu-item>
+      <el-menu-item index="5">服务mock</el-menu-item>
+      <el-menu-item index="6">虚拟硬件</el-menu-item>
+      <div class="div-login">登录</div>
+    </el-menu>
+    <div style="color: #FFFF">
+      <div class="div-introduction"><span>Thoth综合测试平台</span><br><span style="font-size: 17pt">打造让每个研发测试都离不开的一站式综合工具平台</span></div>
+      <img class="img-arrow" src="@/assets/home_images/banner_icon_arrow@3x.png">
+      <el-image style="width: 100%;height 100%;z-index: -1;" :src="bannerImage" fit="scale-down" />
+    </div>
+    <div style="height: 600pt;width 100%;text-align: center;">
+      <div style="font-size: 21pt;margin-top: 54pt;color: #333333;">功能介绍</div>
+      <el-card style="margin-left: 0;margin-top: 42pt" shadow="hover">
+        <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">
+        <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">
+        <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 style="margin-left: 0;margin-top: 36pt;" shadow="hover">
+        <img class="image-module-logo" src="@/assets/home_images/功能介绍_icon_服务mock@3x.png">
+        <div class="div-title">服务mock</div>
+        <div class="div-module-introduction">这是一段关于该功能的结束,结束文字控在两行内</div>
+      </el-card>
+      <el-card shadow="hover">
+        <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">
+        <img class="image-module-logo" src="@/assets/home_images/功能介绍_icon_badcase挖掘@3x.png">
+        <div class="div-title">bad case 挖掘</div>
+        <div class="div-module-introduction">这是一段关于该功能的结束,结束文字控在两行内</div>
+      </el-card>
+    </div>
+    <div style="height: 180pt;width 100%;background-color: #1B2341;">
+      <el-row style="top: 25%;left: 15.3%;">
+        <el-col :span="10">
+          <div class="div-footer1">
+            <div>Thoth综合测试平台</div>
+            <span style="margin-top: 18pt">普惠质量技术部 效率工具FT</span>
+            <br>
+            <span>© 2019. All Rights Reserved</span>
+          </div>
+        </el-col>
+        <el-col :span="10">
+          <div class="div-footer2">
+            <div style="visibility: hidden;">1</div>
+            <span style="margin-top: 18pt">服务mock-赵富贵</span>
+            <span>数据中心-王丽莎</span>
+            <span>FT负责人-叶宏钢</span>
+            <br>
+            <span>虚拟硬件-魏杰文</span>
+            <span>环境平台-李嘉嘉</span>
+            <span>产品设计-郑莉</span>
+            <br>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+    <float-menu class="float-menu-home" />
+  </div>
+</template>
+
+<style scoped>
+.logo {
+  position: absolute;
+  width: 7.5%;
+  left: 7.8%;
+  top: 18%;
+}
+div.div-login {
+  color: #ffffff;
+  display: inline-block;
+  position: absolute;
+  padding: 0.6% 1.8% 0.6% 1.8%;
+  top: 18%;
+  right: 8.3%;
+  border: 0.5pt solid #ffffff;
+  border-radius: 2px;
+}
+div.div-introduction{
+  position: absolute;
+  font-size: 37pt;
+  top: 50%;
+  left: 8.3%;
+}
+img.img-arrow {
+  position: absolute;
+  width: 2.1%;
+  top: 90%;
+  left: 48.95%;
+}
+div.div-footer1,
+div.div-footer2 {
+  font-weight: bold;
+  color: #FFFFFF;
+  font-size: 13.5pt;
+}
+div.div-footer1 > span {
+  margin-bottom: 10px;
+  display: inline-block;
+  font-size: 10.5pt;
+  font-weight: normal;
+  color: #FFFFFF;
+}
+div.div-footer2 > span {
+  margin-bottom: 10px;
+  display: inline-block;
+  width: 150px;
+  font-size: 10.5pt;
+  font-weight: normal;
+  color: #FFFFFF;
+}
+.el-menu {
+  border: none;
+  position: fixed;
+  z-index: 10;
+  width: 100%;
+}
+.el-menu-item {
+  border-bottom: none !important;
+  height: 100%;
+}
+.is-active {
+  background-color: #27a0e4 !important;
+}
+.el-menu-item:hover {
+  background-color: #27a0e4 !important;
+}
+.float-menu-home {
+  position: fixed;
+  right: 10px;
+  top: 70%;
+  z-index: 10;
+}
+.el-card {
+  display: inline-block;
+  width: 222pt;
+  height: 180pt;
+  margin-left: 56pt;
+  text-align: center;
+  border: none;
+}
+</style>
+
+<style scoped>
+img.image-module-logo {
+  margin-top: 15%;
+  width: 20%;
+}
+div.div-title {
+  font-size: 13.5pt;
+  color: #333333;
+  margin-top: 21pt;
+}
+div.div-module-introduction {
+  font-size: 10.5pt;
+  color: #999999;
+  margin-top: 10pt;
+}
+</style>
+
+<script>
+import FloatMenu from './floatMenu'
+import logoImage from '@/assets/home_images/nav_logo@3x.png'
+import bannerImage from '@/assets/home_images/banner_pic@3x.png'
+
+export default {
+  components: {
+    FloatMenu
+  },
+  data() {
+    return {
+      activeIndex2: '1',
+      menuColor: 'transparent',
+      logoImage: logoImage,
+      bannerImage: bannerImage
+    }
+  },
+  mounted() {
+    window.addEventListener('scroll', this.handleScroll, true)
+  },
+  methods: {
+    handleSelect(key, keyPath) {
+      console.log(key, keyPath)
+    },
+    handleScroll() {
+      const scrollTop =
+        window.pageYOffset ||
+        document.documentElement.scrollTop ||
+        document.body.scrollTop
+      if (scrollTop > 1) {
+        this.menuColor = '#1B2341'
+      } else {
+        this.menuColor = 'transparent'
+      }
+    }
+  }
+}
+</script>