111

111

build/utils.js

@@ -47,7 +47,8 @@ exports.cssLoaders = function (options) {
     if (options.extract) {
       return ExtractTextPlugin.extract({
         use: loaders,
-        fallback: 'vue-style-loader'
+        fallback: 'vue-style-loader',
+        publicPath: '../../'
       })
     } else {
       return ['vue-style-loader'].concat(loaders)

build/webpack.prod.conf.js

@@ -23,6 +23,7 @@ const webpackConfig = merge(baseWebpackConfig, {
   },
   devtool: config.build.productionSourceMap ? config.build.devtool : false,
   output: {
+    publicPath: './',
     path: config.build.assetsRoot,
     filename: utils.assetsPath('js/[name].[chunkhash].js'),
     chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')

config/index.js

@@ -20,7 +20,7 @@ module.exports = {
     notifyOnErrors: true,
     poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
 
-    
+
     /**
      * Source Maps
      */
@@ -43,7 +43,7 @@ module.exports = {
     // Paths
     assetsRoot: path.resolve(__dirname, '../dist'),
     assetsSubDirectory: 'static',
-    assetsPublicPath: '/',
+    assetsPublicPath: './',
 
     /**
      * Source Maps

package-lock.json

@@ -4,6 +4,35 @@
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
+    "@babel/helper-module-imports": {
+      "version": "7.0.0-beta.35",
+      "resolved": "https://registry.npm.taobao.org/@babel/helper-module-imports/download/@babel/helper-module-imports-7.0.0-beta.35.tgz",
+      "integrity": "sha1-MI41DnMXUs200PBY3x1wSSXGTgo=",
+      "dev": true,
+      "requires": {
+        "@babel/types": "7.0.0-beta.35",
+        "lodash": "^4.2.0"
+      }
+    },
+    "@babel/types": {
+      "version": "7.0.0-beta.35",
+      "resolved": "https://registry.npm.taobao.org/@babel/types/download/@babel/types-7.0.0-beta.35.tgz",
+      "integrity": "sha1-z5M6mpo4SEynJLM1uI2Dcm1auWA=",
+      "dev": true,
+      "requires": {
+        "esutils": "^2.0.2",
+        "lodash": "^4.2.0",
+        "to-fast-properties": "^2.0.0"
+      },
+      "dependencies": {
+        "to-fast-properties": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npm.taobao.org/to-fast-properties/download/to-fast-properties-2.0.0.tgz",
+          "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=",
+          "dev": true
+        }
+      }
+    },
     "@types/q": {
       "version": "1.5.4",
       "resolved": "https://registry.npm.taobao.org/@types/q/download/@types/q-1.5.4.tgz?cache=0&sync_timestamp=1596840197978&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40types%2Fq%2Fdownload%2F%40types%2Fq-1.5.4.tgz",
@@ -261,6 +290,14 @@
       "integrity": "sha1-3TeelPDbgxCwgpH51kwyCXZmF/0=",
       "dev": true
     },
+    "async-validator": {
+      "version": "1.8.5",
+      "resolved": "https://registry.npm.taobao.org/async-validator/download/async-validator-1.8.5.tgz?cache=0&sync_timestamp=1596623572478&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fasync-validator%2Fdownload%2Fasync-validator-1.8.5.tgz",
+      "integrity": "sha1-3D4I7B/Q3dtn5ghC8CwM0c7G1/A=",
+      "requires": {
+        "babel-runtime": "6.x"
+      }
+    },
     "atob": {
       "version": "2.1.2",
       "resolved": "https://registry.npm.taobao.org/atob/download/atob-2.1.2.tgz",
@@ -531,8 +568,7 @@
     "babel-helper-vue-jsx-merge-props": {
       "version": "2.0.3",
       "resolved": "https://registry.npm.taobao.org/babel-helper-vue-jsx-merge-props/download/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
-      "integrity": "sha1-Iq69OzOQIyjlEyk6jkmSs4T58bY=",
-      "dev": true
+      "integrity": "sha1-Iq69OzOQIyjlEyk6jkmSs4T58bY="
     },
     "babel-helpers": {
       "version": "6.24.1",
@@ -573,6 +609,15 @@
         "babel-runtime": "^6.22.0"
       }
     },
+    "babel-plugin-component": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npm.taobao.org/babel-plugin-component/download/babel-plugin-component-1.1.1.tgz",
+      "integrity": "sha1-mwI6I/9cmq4P1WxaGLnKuMTUXuo=",
+      "dev": true,
+      "requires": {
+        "@babel/helper-module-imports": "7.0.0-beta.35"
+      }
+    },
     "babel-plugin-syntax-async-functions": {
       "version": "6.13.0",
       "resolved": "https://registry.npm.taobao.org/babel-plugin-syntax-async-functions/download/babel-plugin-syntax-async-functions-6.13.0.tgz",
@@ -1060,7 +1105,6 @@
       "version": "6.26.0",
       "resolved": "https://registry.npm.taobao.org/babel-runtime/download/babel-runtime-6.26.0.tgz",
       "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
-      "dev": true,
       "requires": {
         "core-js": "^2.4.0",
         "regenerator-runtime": "^0.11.0"
@@ -2007,8 +2051,7 @@
     "core-js": {
       "version": "2.6.11",
       "resolved": "https://registry.npm.taobao.org/core-js/download/core-js-2.6.11.tgz",
-      "integrity": "sha1-OIMUafmSK97Y7iHJ3EaYXgOZMIw=",
-      "dev": true
+      "integrity": "sha1-OIMUafmSK97Y7iHJ3EaYXgOZMIw="
     },
     "core-util-is": {
       "version": "1.0.2",
@@ -3126,6 +3169,11 @@
         "regexp.prototype.flags": "^1.2.0"
       }
     },
+    "deepmerge": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npm.taobao.org/deepmerge/download/deepmerge-1.5.2.tgz",
+      "integrity": "sha1-EEmdhohEza1P7ghC34x/bwyVp1M="
+    },
     "define-properties": {
       "version": "1.1.3",
       "resolved": "https://registry.npm.taobao.org/define-properties/download/define-properties-1.1.3.tgz",
@@ -3418,6 +3466,19 @@
       "integrity": "sha1-oynTE5yzPoZSp+fbTFribilLn2A=",
       "dev": true
     },
+    "element-ui": {
+      "version": "2.13.2",
+      "resolved": "https://registry.npm.taobao.org/element-ui/download/element-ui-2.13.2.tgz?cache=0&sync_timestamp=1589795164194&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Felement-ui%2Fdownload%2Felement-ui-2.13.2.tgz",
+      "integrity": "sha1-WCv0eqqqr+I+oZWPriF6aHrQZEc=",
+      "requires": {
+        "async-validator": "~1.8.1",
+        "babel-helper-vue-jsx-merge-props": "^2.0.0",
+        "deepmerge": "^1.2.0",
+        "normalize-wheel": "^1.0.1",
+        "resize-observer-polyfill": "^1.5.0",
+        "throttle-debounce": "^1.0.1"
+      }
+    },
     "elliptic": {
       "version": "6.5.3",
       "resolved": "https://registry.npm.taobao.org/elliptic/download/elliptic-6.5.3.tgz?cache=0&sync_timestamp=1592492805287&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Felliptic%2Fdownload%2Felliptic-6.5.3.tgz",
@@ -6023,6 +6084,11 @@
         "sort-keys": "^1.0.0"
       }
     },
+    "normalize-wheel": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npm.taobao.org/normalize-wheel/download/normalize-wheel-1.0.1.tgz",
+      "integrity": "sha1-rsiGr/2wRQcNhWRH32Ls+GFG7EU="
+    },
     "npm-run-path": {
       "version": "2.0.2",
       "resolved": "https://registry.npm.taobao.org/npm-run-path/download/npm-run-path-2.0.2.tgz",
@@ -9163,8 +9229,7 @@
     "regenerator-runtime": {
       "version": "0.11.1",
       "resolved": "https://registry.npm.taobao.org/regenerator-runtime/download/regenerator-runtime-0.11.1.tgz?cache=0&sync_timestamp=1595456367497&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fregenerator-runtime%2Fdownload%2Fregenerator-runtime-0.11.1.tgz",
-      "integrity": "sha1-vgWtf5v30i4Fb5cmzuUBf78Z4uk=",
-      "dev": true
+      "integrity": "sha1-vgWtf5v30i4Fb5cmzuUBf78Z4uk="
     },
     "regenerator-transform": {
       "version": "0.10.1",
@@ -9301,6 +9366,11 @@
       "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
       "dev": true
     },
+    "resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npm.taobao.org/resize-observer-polyfill/download/resize-observer-polyfill-1.5.1.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fresize-observer-polyfill%2Fdownload%2Fresize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha1-DpAg3T0hAkRY1OvSfiPkAmmBBGQ="
+    },
     "resolve": {
       "version": "1.17.0",
       "resolved": "https://registry.npm.taobao.org/resolve/download/resolve-1.17.0.tgz",
@@ -10237,6 +10307,11 @@
       "integrity": "sha1-ry2LvJsE907hevK02QSPgHrNGKg=",
       "dev": true
     },
+    "throttle-debounce": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npm.taobao.org/throttle-debounce/download/throttle-debounce-1.1.0.tgz?cache=0&sync_timestamp=1597223572823&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fthrottle-debounce%2Fdownload%2Fthrottle-debounce-1.1.0.tgz",
+      "integrity": "sha1-UYU9o3vmihVctugns1FKPEIuic0="
+    },
     "through2": {
       "version": "2.0.5",
       "resolved": "https://registry.npm.taobao.org/through2/download/through2-2.0.5.tgz?cache=0&sync_timestamp=1593478693312&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fthrough2%2Fdownload%2Fthrough2-2.0.5.tgz",
@@ -10798,6 +10873,11 @@
         }
       }
     },
+    "vue-loader-plugin": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npm.taobao.org/vue-loader-plugin/download/vue-loader-plugin-1.3.0.tgz",
+      "integrity": "sha1-gJDSAyw3coOv44yOLNriJVuI194="
+    },
     "vue-router": {
       "version": "3.4.3",
       "resolved": "https://registry.npm.taobao.org/vue-router/download/vue-router-3.4.3.tgz",

package.json

@@ -10,7 +10,9 @@
     "build": "node build/build.js"
   },
   "dependencies": {
+    "element-ui": "^2.13.2",
     "vue": "^2.5.2",
+    "vue-loader-plugin": "^1.3.0",
     "vue-router": "^3.0.1"
   },
   "devDependencies": {
@@ -18,6 +20,7 @@
     "babel-core": "^6.22.1",
     "babel-helper-vue-jsx-merge-props": "^2.0.3",
     "babel-loader": "^7.1.1",
+    "babel-plugin-component": "^1.1.1",
     "babel-plugin-syntax-jsx": "^6.18.0",
     "babel-plugin-transform-runtime": "^6.22.0",
     "babel-plugin-transform-vue-jsx": "^3.5.0",

src/assets/images/silder/silder3.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="25px" viewBox="0 0 16 25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 62 (91390) - https://sketch.com -->
+    <title>编组</title>
+    <desc>Created with Sketch.</desc>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="画板" transform="translate(-596.000000, -185.000000)" fill="#000000" fill-rule="nonzero">
+            <g id="编组-14备份" transform="translate(572.000000, 31.000000)">
+                <g id="编组" transform="translate(24.000000, 154.000000)">
+                    <path d="M13.4672665,0 L2.4512916,0 C1.10097351,0 0.00629900475,1.09467451 0.00629900475,2.44499259 L0.00629900475,22.0049333 C0.00629900475,23.3552514 1.10097351,24.4499259 2.4512916,24.4499259 L13.4672665,24.4499259 C14.8175846,24.4499259 15.9122591,23.3552514 15.9122591,22.0049333 L15.9122591,2.44499259 C15.9122591,1.09467451 14.8175846,0 13.4672665,0 Z M14.6897628,21.3936851 C14.6897628,22.4064321 13.8687653,23.2274296 12.8560183,23.2274296 L3.06253975,23.2274296 C2.04979276,23.2274296 1.22879531,22.4064321 1.22879531,21.3936851 L1.22879531,3.05624072 C1.22879531,2.04349373 2.04979276,1.22249629 3.06253975,1.22249629 L12.8560183,1.22249629 C13.8687653,1.22249629 14.6897628,2.04349373 14.6897628,3.05624072 L14.6897628,21.3936851 Z" id="形状"></path>
+                    <polygon id="路径" points="1.22879531 4.35472092 14.6897628 4.35472092 14.6897628 5.5772172 1.22879531 5.5772172"></polygon>
+                    <polygon id="路径" points="1.22879531 18.4134283 14.6908772 18.4134283 14.6908772 19.6359246 1.22879531 19.6359246"></polygon>
+                    <path d="M6.73678276,21.469669 C6.73678276,22.1448351 7.284113,22.6921653 7.95927906,22.6921653 C8.63444512,22.6921653 9.18177535,22.1448351 9.18177535,21.469669 C9.18177535,20.7945029 8.63444512,20.2471727 7.95927906,20.2471727 C7.284113,20.2471727 6.73678276,20.7945029 6.73678276,21.469669 L6.73678276,21.469669 Z" id="路径"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/images/silder/silder5.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="9px" viewBox="0 0 16 9" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 62 (91390) - https://sketch.com -->
+    <title>编组</title>
+    <desc>Created with Sketch.</desc>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="画板" transform="translate(-596.000000, -344.000000)" fill="#000000" fill-rule="nonzero">
+            <g id="编组-14备份" transform="translate(572.000000, 31.000000)">
+                <g id="编组" transform="translate(24.000000, 313.000000)">
+                    <path d="M15.7332771,7.5012987 L9.28194158,1.24329004 L7.99988819,0 L6.7178348,1.24329004 L0.266499261,7.5012987 C-0.0888330869,7.84415584 -0.0888330869,8.4 0.266499261,8.74285714 C0.620046018,9.08571429 1.19322031,9.08571429 1.54855266,8.74285714 L7.99988819,2.48484848 L14.4530093,8.74285714 C14.8065561,9.08571429 15.3797304,9.08571429 15.7350627,8.74285714 C16.0886095,8.4 16.0886095,7.84415584 15.7332771,7.5012987 Z" id="路径"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/components/headerSection.vue

@@ -71,7 +71,7 @@ export default {
   position: fixed;
   width: 100%;
   top: 0px;
-
+  z-index: 1000;
   .header-container {
     margin: 0 auto;
     // overflow: hidden;

src/components/silder.vue

@@ -0,0 +1,175 @@
+<template>
+  <div class="silderWrap">
+    <div class="silderList">
+      <div class="silderItem">
+        <img src="@/assets/images/silder/silder4.svg"
+             alt="">
+        <p>申请入驻</p>
+        <div class="line"></div>
+      </div>
+      <el-popover placement="left"
+                  trigger="hover">
+        <div>
+          <p class="hoverTitle">咨询电话：</p>
+          <p class="hoverMsg">4008851569</p>
+        </div>
+        <div class="silderItem"
+             slot="reference">
+          <img src="@/assets/images/silder/silder2.svg"
+               alt="">
+          <p>电话咨询</p>
+          <div class="line"></div>
+        </div>
+      </el-popover>
+      <el-popover placement="left"
+                  trigger="hover">
+        <div>
+          <div class="code-item">
+            <img src="../assets/images/download.png"
+                 width="111px"
+                 height="111px"
+                 alt />
+            <p>扫码下载APP</p>
+          </div>
+        </div>
+        <div class="silderItem"
+             slot="reference">
+          <img src="@/assets/images/silder/silder3.svg"
+               alt="">
+          <p>APP下载</p>
+          <div class="line"></div>
+        </div>
+      </el-popover>
+      <el-popover placement="left"
+                  trigger="hover">
+        <div>
+          <div class="code-item">
+            <img src="../assets/images/public-code.jpg"
+                 width="111px"
+                 height="111px"
+                 alt />
+            <p>微信订阅号</p>
+          </div>
+        </div>
+        <div class="silderItem"
+             slot="reference">
+          <img src="@/assets/images/silder/silder1.svg"
+               alt="">
+          <p>关注微信</p>
+          <!-- <div class="line"></div> -->
+        </div>
+      </el-popover>
+    </div>
+    <div class="goTop"
+         v-if="showgo"
+         @click="gotop">
+      <img src="@/assets/images/silder/silder5.svg"
+           alt="">
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data () {
+    return {
+      showgo: false
+    }
+
+  }, mounted () {
+    var vm = this;
+    window.onscroll = function () {
+      if (document.documentElement.scrollTop > 300) {
+        vm.showgo = true;
+      } else {
+        vm.showgo = false;
+      }
+    }
+  },
+  methods: {
+    gotop () {
+      scrollTo(0, 0);
+    }
+  }
+}
+</script>
+<style lang="less">
+.silderWrap {
+  position: fixed;
+  top: 50%;
+  right: 70px;
+  z-index: 200;
+  .silderList {
+    background-color: #fff;
+    width: 64px;
+    height: 268px;
+
+    border: 1px solid #ececec;
+    .silderItem {
+      cursor: pointer;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding: 11px 0 0;
+      font-size: 12px;
+      overflow: hidden;
+      p {
+        margin-top: 8px;
+        color: #666666;
+      }
+      .line {
+        margin-top: 10px;
+        width: 48px;
+        height: 1px;
+        background-color: #ececec;
+      }
+      &:hover {
+        p {
+          color: #2dc7aa;
+        }
+        img {
+          filter: drop-shadow(#2dc7aa 80px 0);
+          transform: translateX(-80px);
+        }
+      }
+    }
+  }
+  .code-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  .hoverTitle {
+    font-size: 12px;
+
+    font-weight: 400;
+    color: #999999;
+    line-height: 17px;
+  }
+  .hoverMsg {
+    font-size: 16px;
+
+    font-weight: 500;
+    color: #1a1a1a;
+    line-height: 22px;
+  }
+  .goTop {
+    cursor: pointer;
+    margin-top: 20px;
+    background-color: #fff;
+    width: 64px;
+    height: 64px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-top: 28px;
+    border: 1px solid #ececec;
+    overflow: hidden;
+    &:hover {
+      img {
+        filter: drop-shadow(#2dc7aa 80px 0);
+        transform: translateX(-80px);
+      }
+    }
+  }
+}
+</style>

src/main.js

@@ -3,7 +3,9 @@
 import Vue from 'vue'
 import App from './App'
 import router from './router'
-
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
+Vue.use(ElementUI);
 Vue.config.productionTip = false
 
 /* eslint-disable no-new */

src/views/index/index.vue

@@ -1,9 +1,9 @@
 <template>
   <div>
     <div class="topBanner">
-      <img src="@/assets/images/topBanner.png"
+      <!-- <img src="@/assets/images/topBanner.png"
            alt=""
-           width="100%">
+           width="100%"> -->
       <div class="goinBox">立即入驻</div>
     </div>
     <div class="inner width1200">
@@ -34,27 +34,183 @@
       </div>
       <div class="suggest">
         <div class="suggestList">
-          <div class="suggestItem">
+          <div class="suggestItem "
+               :class="suggestIndex ===1?'active':''"
+               @click="suggestIndex=1">
             <div class="suggestTitle">在线报名</div>
             <div class="msg">考生在线报名，考级信息一手掌握</div>
           </div>
-          <div class="suggestItem">
-            <div class="suggestTitle">在线报名</div>
-            <div class="msg">考生在线报名，考级信息一手掌握</div>
+          <div class="suggestItem"
+               :class="suggestIndex ===2?'active':''"
+               @click="suggestIndex=2">
+            <div class="suggestTitle">高品质直播考场</div>
+            <div class="msg">高保真、高品质的音视频输出， 最大限度还原真实考场</div>
           </div>
-          <div class="suggestItem">
-            <div class="suggestTitle">在线报名</div>
-            <div class="msg">考生在线报名，考级信息一手掌握</div>
+          <div class="suggestItem"
+               :class="suggestIndex ===3?'active':''"
+               @click="suggestIndex=3">
+            <div class="suggestTitle">在线录播</div>
+            <div class="msg">录播考试兼容各种考试场景</div>
+          </div>
+        </div>
+        <div class="suggestImgList">
+          <div class="suggestImg"
+               v-show="suggestIndex ===1">
+            <img src="@/assets/images/phone1.png"
+                 alt=""
+                 width="100%">
+          </div>
+          <div class="suggestImg"
+               v-show="suggestIndex ===2">
+            <img src="@/assets/images/phone2.png"
+                 alt=""
+                 width="100%">
+          </div>
+          <div class="suggestImg"
+               v-show="suggestIndex ===3">
+            <img src="@/assets/images/phone3.png"
+                 alt=""
+                 width="100%">
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="inner2">
+      <div class="width1200">
+        <div class="titleWrap">
+          <img src="@/assets/images/title2.png"
+               width="100%"
+               alt="">
+        </div>
+        <div class="suggest">
+          <div class="suggestList">
+            <div class="suggestItem "
+                 :class="mapIndex ===1?'active':''"
+                 @click="mapIndex=1">
+              <div class="suggestTitle">生源拓展</div>
+              <!-- <div class="msg">考生在线报名，考级信息一手掌握</div> -->
+            </div>
+            <div class="suggestItem"
+                 :class="mapIndex ===2?'active':''"
+                 @click="mapIndex=2">
+              <div class="suggestTitle">考级生命周期</div>
+              <!-- <div class="msg">高保真、高品质的音视频输出， 最大限度还原真实考场</div> -->
+            </div>
+          </div>
+          <div class="suggestImgList">
+            <div class="suggestImg"
+                 v-show="mapIndex ===1">
+              <img src="@/assets/images/map.png"
+                   alt=""
+                   width="100%">
+              <p class="mapMsg">支持<span>多级下属合作单位</span>线上招生，打破生源地空间限制，将招考范围<span>推向全国</span></p>
+            </div>
+            <div class="suggestImg"
+                 v-show="mapIndex ===2">
+              <img src="@/assets/images/map1.png"
+                   style="margin-top: 73px;"
+                   alt=""
+                   width="100%">
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="inner width1200 inner3">
+      <div class="titleWrap">
+        <img src="@/assets/images/title3.png"
+             alt="">
+      </div>
+      <div class="suggest">
+        <div class="suggestList">
+          <div class="suggestItem "
+               :class="onlineIndex ===1?'active':''"
+               @click="onlineIndex=1">
+            <div class="suggestTitle">直播互动</div>
+            <!-- <div class="msg">考生在线报名，考级信息一手掌握</div> -->
+          </div>
+          <div class="suggestItem"
+               :class="onlineIndex ===2?'active':''"
+               @click="onlineIndex=2">
+            <div class="suggestTitle">在线评审</div>
+            <!-- <div class="msg">高保真、高品质的音视频输出， 最大限度还原真实考场</div> -->
+          </div>
+        </div>
+        <div class="suggestImgList"
+             style="margin-top:118px">
+          <div class="suggestImg"
+               v-show="onlineIndex ===1">
+            <img src="@/assets/images/look.png"
+                 alt=""
+                 width="712px">
+            <p class="mapMsg">支持<span>多级下属合作单位</span>线上招生，打破生源地空间限制，将招考范围<span>推向全国</span></p>
+          </div>
+          <div class="suggestImg"
+               v-show="onlineIndex ===2">
+            <img src="@/assets/images/look1.png"
+                 alt=""
+                 width="712px">
+            <p class="mapMsg">支持<span>多级下属合作单位</span>线上招生，打破生源地空间限制，将招考范围<span>推向全国</span></p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="inner inner4">
+      <!-- <img src="@/assets/images/index-bg.png"
+           width="100%"
+           alt=""> -->
+      <div class="textwrap">
+        <h2>技术赋能考级，为行业带来崭新一页</h2>
+        <p class="desc">酷乐秀是武汉市景明云乐科技有限公司研发的专为为全国音乐等级考试提供线上考级服务，是全国首家拥有音乐类专业直播技术的服务平台。独有“音乐演奏模式”高保真还原乐器演奏的现场感及音色，为远程视频直播、录播考级提供技术支持，考生可通过酷乐秀实现考级完整生命周期。同步还原线下考级场景，为合作机构和考生提供公平公正，省时省力的考试体验。</p>
+        <div class="cardList">
+          <div class="cardItem">
+            <img src="@/assets/images/card1.png"
+                 width="110px"
+                 height="88px"
+                 alt="">
+            <h4>技术保障</h4>
+            <p>资深技术团队开发</p>
+          </div>
+          <div class="cardItem">
+            <img src="@/assets/images/card2.png"
+                 width="110px"
+                 height="88px"
+                 alt="">
+            <h4>深度融合</h4>
+            <p>全面深入音乐教育行业</p>
+          </div>
+          <div class="cardItem">
+            <img src="@/assets/images/card3.png"
+                 width="110px"
+                 height="88px"
+                 alt="">
+            <h4>技术保障</h4>
+            <p>资深技术团队开发</p>
           </div>
         </div>
       </div>
+
     </div>
+    <silder />
+    <el-dialog title="申请入驻"
+               :visible.sync="dialogTableVisible">
+
+      </el-table>
+    </el-dialog>
   </div>
 </template>
 <script>
+import silder from '@/components/silder.vue'
 export default {
+  components: {
+    silder
+  },
   data () {
-    return {}
+    return {
+      suggestIndex: 1,
+      mapIndex: 1,
+      onlineIndex: 1,
+    }
   }
 }
 </script>
@@ -63,7 +219,12 @@ img {
   vertical-align: middle;
 }
 .topBanner {
+  background: url("../../assets/images/topBanner.png") center;
+  background-size: cover;
+  background-repeat: no-repeat;
   position: relative;
+  height: 465px;
+
   .goinBox {
     width: 150px;
     height: 44px;
@@ -73,10 +234,26 @@ img {
     font-size: 16px;
     color: #ffffff;
     position: absolute;
-    left: 365px;
+    left: 20%;
     bottom: 147px;
     cursor: pointer;
   }
+  @media screen and (min-width: 1200px) and (max-width: 1500px) {
+    /*当屏幕尺寸小于600px时，应用下面的CSS样式*/
+    .goinBox {
+      width: 150px;
+      height: 44px;
+      background: #2dc7aa;
+      border-radius: 4px;
+      line-height: 44px;
+      font-size: 16px;
+      color: #ffffff;
+      position: absolute;
+      left: 5%;
+      bottom: 147px;
+      cursor: pointer;
+    }
+  }
 }
 .inner {
   display: flex;
@@ -100,7 +277,6 @@ img {
       border-radius: 8px;
       border: 1px solid #cdcdcd;
       img {
-        border: 1px dotted #999;
         border-radius: 4px;
       }
       &:hover {
@@ -110,7 +286,6 @@ img {
         margin: 13px 0;
         height: 33px;
         font-size: 24px;
-        font-family: PingFangSC-Medium, PingFang SC;
         font-weight: 500;
         color: #2c2c2c;
         line-height: 33px;
@@ -127,15 +302,121 @@ img {
     }
   }
   .titleWrap {
-    margin-top: 118px;
+    margin-top: 85px;
+  }
+}
+.suggest {
+  margin-top: 85px;
+  width: 740px;
+  .suggestList {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    // margin-bottom: 71px;
+    .suggestItem {
+      width: 220px;
+      cursor: pointer;
+      .suggestTitle {
+        height: 30px;
+        line-height: 30px;
+        font-size: 22px;
+        color: #2c2c2c;
+        margin-bottom: 32px;
+        border-radius: 4px;
+        display: inline-block;
+        padding: 0 21px;
+      }
+      .msg {
+        color: #788393;
+        line-height: 20px;
+        font-size: 14px;
+      }
+    }
+    .suggestItem.active {
+      .suggestTitle {
+        height: 38px;
+        line-height: 38px;
+        font-size: 22px;
+        color: #fff;
+        margin-bottom: 28px;
+        background-color: #2dc7aa;
+      }
+    }
+  }
+}
+.inner2 {
+  background: #f6f7f9;
+  padding-bottom: 150px;
+  .width1200 {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .titleWrap {
+    padding-top: 84px;
   }
-  .suggest {
-    margin-top: 118px;
-    width: 740px;
-    .suggestList {
+}
+.mapMsg {
+  margin-top: 73px;
+  color: #333;
+  font-size: 16px;
+  span {
+    color: #2dc7aa;
+  }
+}
+.inner3 {
+  padding-bottom: 190px;
+}
+.inner4 {
+  background: url("../../assets/images/index-bg.png") center;
+  background-size: cover;
+  background-repeat: no-repeat;
+  color: #fff;
+  position: relative;
+  height: 900px;
+  .textwrap {
+    position: absolute;
+    width: 1074px;
+    top: 132px;
+    left: 50%;
+    margin-left: -537px;
+    h2 {
+      margin-bottom: 66px;
+    }
+    .desc {
+      line-height: 44px;
+      font-size: 18px;
+    }
+    .cardList {
       display: flex;
       flex-direction: row;
       justify-content: space-around;
+      margin-top: 100px;
+      .cardItem {
+        width: 312px;
+        height: 298px;
+        background: #ffffff;
+        box-shadow: 0px 7px 9px 0px rgba(107, 107, 107, 0.11);
+        border-radius: 6px;
+        border: 1px solid #d1d1d1;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        img {
+          margin-top: 50px;
+        }
+        h4 {
+          color: #2c2c2c;
+          font-size: 24px;
+          line-height: 33px;
+          margin-bottom: 14px;
+        }
+        p {
+          color: #788393;
+          font-size: 14px;
+        }
+      }
     }
   }
 }