111

111

src/App.vue

@@ -19,15 +19,21 @@ export default {
 </script>
 
 <style>
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
 #app {
   font-family: "Avenir", Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
-  margin-top: 60px;
+  /* margin-top: 60px; */
 }
 .width1200 {
   width: 1200px;
+  margin: 0 auto;
 }
 </style>

src/components/HelloWorld.vue

@@ -1,113 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <h2>Essential Links</h2>
-    <ul>
-      <li>
-        <a
-          href="https://vuejs.org"
-          target="_blank"
-        >
-          Core Docs
-        </a>
-      </li>
-      <li>
-        <a
-          href="https://forum.vuejs.org"
-          target="_blank"
-        >
-          Forum
-        </a>
-      </li>
-      <li>
-        <a
-          href="https://chat.vuejs.org"
-          target="_blank"
-        >
-          Community Chat
-        </a>
-      </li>
-      <li>
-        <a
-          href="https://twitter.com/vuejs"
-          target="_blank"
-        >
-          Twitter
-        </a>
-      </li>
-      <br>
-      <li>
-        <a
-          href="http://vuejs-templates.github.io/webpack/"
-          target="_blank"
-        >
-          Docs for This Template
-        </a>
-      </li>
-    </ul>
-    <h2>Ecosystem</h2>
-    <ul>
-      <li>
-        <a
-          href="http://router.vuejs.org/"
-          target="_blank"
-        >
-          vue-router
-        </a>
-      </li>
-      <li>
-        <a
-          href="http://vuex.vuejs.org/"
-          target="_blank"
-        >
-          vuex
-        </a>
-      </li>
-      <li>
-        <a
-          href="http://vue-loader.vuejs.org/"
-          target="_blank"
-        >
-          vue-loader
-        </a>
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/awesome-vue"
-          target="_blank"
-        >
-          awesome-vue
-        </a>
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  data () {
-    return {
-      msg: 'Welcome to Your Vue.js App'
-    }
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h1, h2 {
-  font-weight: normal;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/components/footerSection.vue

@@ -4,54 +4,70 @@
       <div class="footer-info">
         <div class="width1200">
           <div class="attention">
-            <h2>扫码关注</h2>
             <div class="qrcode">
-              <!-- <div class="qrcode-item">
-              <img src="../assets/images/qrcode1.png"
-                   alt />
-              <p>微信订阅号</p>
+              <div class="qrcode-item">
+                <img src="../assets/images/logoWhile.png"
+                     width="136px"
+                     height="40px"
+                     alt="">
+              </div>
             </div>
-            <div class="qrcode-item">
-              <img src="../assets/images/qrcode2.png"
-                   alt />
-              <p>微信服务号</p>
-            </div>
-            <div class="qrcode-item">
-              <img src="../assets/images/qrcode3.png"
-                   alt />
-              <p>新浪官方微博</p>
+
+            <div class="qrcode">
+              <div class="qrcode-item">
+                <img src="../assets/images/public-code.jpg"
+                     width="74px"
+                     height="74px"
+                     alt />
+                <p>微信订阅号</p>
+              </div>
             </div>
-            <div class="qrcode-item">
-              <img src="../assets/images/qrcode4.png"
-                   alt
-                   style="width:110px; height:110px" />
-              <p>淘器商城</p> -->
+            <div class="qrcode">
+              <div class="qrcode-item">
+                <img src="../assets/images/download.png"
+                     width="74px"
+                     height="74px"
+                     alt />
+                <p>下载地址</p>
+              </div>
             </div>
           </div>
-        </div>
-        <div class="friend-ship">
-          <h2>友情链接</h2>
-          <div class="friendship-item">
-            <a target="view_window"
-               href="http://www.key-in.com.cn/index.aspx">key官网</a>
-            <a target="view_window"
-               href="https://www.zhipin.com/gongsi/d78af7ed9688ea8e0nV-39m-.html">招聘信息</a>
-            <a target="view_window"
-               href="https://www.clapnet.cn/books/books_search.html?key=%u5510%u5609%u5B8F">文联出版社</a>
-            <a target="view_window"
-               href="https://www.dayamusic.com/class/index.html">网络E学堂</a>
+          <div class="friend-ship">
+            <div class="line-wrap">
+              <h2>友情链接</h2>
+              <div class="item-Wrap">
+                <div class="friendship-item">
+                  <a target="view_window"
+                     href="http://www.key-in.com.cn/index.aspx">key官网</a>
+                </div>
+                <div class="friendship-item">
+                  <a target="view_window"
+                     href="http://www.key-in.com.cn/index.aspx">key官网</a>
+                </div>
+                <div class="friendship-item">
+                  <a target="view_window"
+                     href="http://www.key-in.com.cn/index.aspx">key官网</a>
+                </div>
+              </div>
+            </div>
+            <div class="hotLine">
+              <h2>咨询热线</h2>
+              <p>4008851569<span>（周一至周五 09:00~21:00）</span></p>
+            </div>
           </div>
+
         </div>
       </div>
-    </div>
-    <div class="footer-coptyright">
-      <div class="width1200">
-        <p>
-          深圳大雅乐盟网络教育股份有限公司 深ICP备
-          <br />©2018 xxxxxxx，Inc. All right reserved.
-        </p>
+      <div class="footer-coptyright">
+        <div class="width1200">
+          <p>
+            Copyright © 2020 武汉市景明云乐网络科技有限公司
+            <br /> All Rights Reserved. 鄂ICP备20013567号-1
+          </p>
+        </div>
       </div>
     </div>
+
   </div>
   </div>
 </template>
@@ -65,56 +81,77 @@ export default {
 <style lang="less" scoped>
 .footerSection {
   overflow: hidden;
+  margin: 0 auto;
+  background: #39393b;
 }
 
 .footer-info {
-  background: #19928a;
-  padding: 26px 0;
+  background: #39393b;
+  padding: 77px 0 15px;
   .width1200 {
-    overflow: hidden;
-  }
-  h2 {
-    color: #ffffff;
-    font-size: 24px;
-    line-height: 31px;
-    padding-bottom: 27px;
-    font-weight: bold;
-  }
-  .attention {
-    float: left;
-    .qrcode-item {
-      display: inline-block;
-      font-size: 0;
-      padding-right: 24px;
-      p {
-        font-size: 12px;
-        color: #fff;
-        padding: 8px 0;
-        text-align: center;
-      }
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    h2 {
+      color: #ffffff;
+      font-size: 14px;
+      line-height: 31px;
+      text-align: left;
     }
-  }
-  .friend-ship {
-    float: right;
-    width: 378px;
-    .friendship-item {
-      a {
-        font-size: 16px;
-        color: #fff;
-        line-height: 37px;
-        width: 126px;
+    .attention {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-around;
+      .qrcode-item {
         display: inline-block;
-        &:hover,
-        &:after {
+        font-size: 0;
+        padding-right: 24px;
+        p {
+          font-size: 12px;
           color: #fff;
+          padding: 8px 0;
+          text-align: center;
+        }
+      }
+    }
+    .friend-ship {
+      width: 378px;
+      .item-Wrap {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        .friendship-item {
+          a {
+            font-size: 12px;
+            color: #fff;
+            line-height: 37px;
+            width: 126px;
+            display: inline-block;
+            text-align: left;
+            &:hover,
+            &:after {
+              color: #fff;
+            }
+          }
+        }
+      }
+      .hotLine {
+        text-align: left;
+        color: #fff;
+        p {
+          font-size: 16px;
+          span {
+            font-size: 12px;
+          }
         }
       }
     }
   }
 }
 .footer-coptyright {
+  border-top: 1px solid #585858;
   // background: url("../assets/images/footerBg.png") no-repeat center;
-  background-size: cover;
+  // background-size: cover;
   height: 82px;
   p {
     text-align: center;

src/components/headerSection.vue

@@ -1,6 +1,5 @@
 <template>
   <div>
-    <div class="wall"></div>
     <div class="headerSection">
       <div class="header-container width1200">
         <router-link :to="{ path: '/' }"
@@ -16,19 +15,21 @@
                        :to="{ path: '/' }">首页</router-link>
           <router-link :class="checkActive==2?'active':''"
                        @click.native="change(2)"
-                       :to="{ path: '/brand' }">大雅</router-link>
+                       :to="{ path: '/brand' }">产品</router-link>
           <router-link :class="checkActive==3?'active':''"
                        @click.native="change(3)"
-                       :to="{ path: '/service' }">雅事</router-link>
+                       :to="{ path: '/service' }">咨询</router-link>
           <router-link :class="checkActive==4?'active':''"
                        @click.native="change(4)"
-                       :to="{ path: '/platform' }">乐盟</router-link>
+                       :to="{ path: '/platform' }">指南</router-link>
           <router-link :class="checkActive==5?'active':''"
                        @click.native="change(5)"
-                       :to="{ path: '/suggest' }">乐说</router-link>
+                       :to="{ path: '/suggest' }">关于我们</router-link>
+          <div class="bandBtn">合作机构</div>
         </div>
       </div>
     </div>
+    <div class="wall"></div>
   </div>
 
 </template>
@@ -38,7 +39,7 @@ export default {
   props: ['name'],
   data () {
     return {
-      checkActive: -1
+      checkActive: 1
     }
   },
   methods: {
@@ -50,39 +51,94 @@ export default {
 </script>
 
 <style lang="less" scoped>
+.bandBtn {
+  width: 112px;
+  height: 30px;
+  background: #2dc7aa;
+  border-radius: 4px;
+  color: #fff;
+  margin-left: 70px;
+  line-height: 30px;
+  cursor: pointer;
+  position: relative;
+  top: 8px;
+}
+.wall {
+  height: 82px;
+}
 .headerSection {
   background-color: #fff;
   position: fixed;
   width: 100%;
-  top: 0;
-  .wall {
-    height: 60px;
-  }
+  top: 0px;
+
   .header-container {
-    margin: 22px auto;
-    overflow: hidden;
+    margin: 0 auto;
+    // overflow: hidden;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    height: 80px;
+    padding-top: 17px;
   }
   .logo {
-    float: left;
+    // float: left;
     width: 159px;
     height: 48px;
   }
   .menu {
+    display: flex;
+    flex-direction: row;
     font-size: 16px;
-    float: right;
     a {
       margin-left: 80px;
       color: #565757;
       line-height: 48px;
       text-decoration: none;
+      position: relative;
+      // display: block;
+      text-decoration: none;
+      text-transform: uppercase;
+      transition: 0.5s;
+      &::after {
+        position: absolute;
+        content: "";
+        top: 60%;
+        left: 0;
+        width: 100%;
+        height: 3px;
+        background-color: #000;
+        z-index: 100;
+        transform: scaleX(0);
+        transform-origin: right;
+        transition: transform 0.5s;
+      }
       &:hover,
       &.hover {
-        color: #19928a;
+        color: #000000;
+        font-weight: 600;
+      }
+      &:hover::after {
+        transform: scaleX(1);
+        transform-origin: left;
       }
     }
   }
-  .active {
-    color: #19928a !important;
+  a.active {
+    color: #000 !important;
+    font-weight: 600;
+    &::after {
+      position: absolute;
+      content: "";
+      top: 60%;
+      left: 0;
+      width: 100%;
+      height: 3px;
+      background-color: #000;
+      z-index: 100;
+      transform: scaleX(1);
+      transform-origin: left;
+    }
   }
 }
 </style>

src/router/index.js

@@ -1,6 +1,5 @@
 import Vue from 'vue'
 import Router from 'vue-router'
-import HelloWorld from '@/components/HelloWorld'
 import Index from '@/views/index'
 
 Vue.use(Router)

src/views/index/index.vue

@@ -1,6 +1,54 @@
 <template>
   <div>
-
+    <div class="topBanner">
+      <img src="@/assets/images/topBanner.png"
+           alt=""
+           width="100%">
+      <div class="goinBox">立即入驻</div>
+    </div>
+    <div class="inner width1200">
+      <div class="goodList">
+        <div class="listItem">
+          <img src="@/assets/images/good2.png"
+               alt="">
+          <p class="title">生源拓展</p>
+          <p class="subTitle">线上化招考全流程<br /> 不受地域限制扩张生源地</p>
+        </div>
+        <div class="listItem">
+          <img src="@/assets/images/good1.png"
+               alt="">
+          <p class="title">高效管理</p>
+          <p class="subTitle">覆盖考级生命周期<br /> 极大的提升管理效率</p>
+        </div>
+        <div class="listItem">
+          <img src="@/assets/images/good3.png"
+               alt="">
+          <p class="title">节省成本</p>
+          <p class="subTitle">全线上运营模式<br /> 节省支出成本</p>
+        </div>
+      </div>
+      <div class="titleWrap">
+        <img src="@/assets/images/title1.png"
+             width="100%"
+             alt="">
+      </div>
+      <div class="suggest">
+        <div class="suggestList">
+          <div class="suggestItem">
+            <div class="suggestTitle">在线报名</div>
+            <div class="msg">考生在线报名，考级信息一手掌握</div>
+          </div>
+          <div class="suggestItem">
+            <div class="suggestTitle">在线报名</div>
+            <div class="msg">考生在线报名，考级信息一手掌握</div>
+          </div>
+          <div class="suggestItem">
+            <div class="suggestTitle">在线报名</div>
+            <div class="msg">考生在线报名，考级信息一手掌握</div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 <script>
@@ -10,5 +58,85 @@ export default {
   }
 }
 </script>
-<style lang="">
+<style lang="less" scoped>
+img {
+  vertical-align: middle;
+}
+.topBanner {
+  position: relative;
+  .goinBox {
+    width: 150px;
+    height: 44px;
+    background: #2dc7aa;
+    border-radius: 4px;
+    line-height: 44px;
+    font-size: 16px;
+    color: #ffffff;
+    position: absolute;
+    left: 365px;
+    bottom: 147px;
+    cursor: pointer;
+  }
+}
+.inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .goodList {
+    margin-top: 92px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    width: 1092px;
+    .listItem {
+      padding: 33px 80px 50px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      width: 340px;
+      height: 350px;
+      background: #ffffff;
+      cursor: pointer;
+      border-radius: 8px;
+      border: 1px solid #cdcdcd;
+      img {
+        border: 1px dotted #999;
+        border-radius: 4px;
+      }
+      &:hover {
+        box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.06);
+      }
+      .title {
+        margin: 13px 0;
+        height: 33px;
+        font-size: 24px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #2c2c2c;
+        line-height: 33px;
+        font-weight: 500;
+        width: 180px;
+      }
+      .subTitle {
+        font-weight: 400;
+        color: #788393;
+        line-height: 20px;
+        font-size: 14px;
+        width: 180px;
+      }
+    }
+  }
+  .titleWrap {
+    margin-top: 118px;
+  }
+  .suggest {
+    margin-top: 118px;
+    width: 740px;
+    .suggestList {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-around;
+    }
+  }
+}
 </style>