提交修改

1

config/index.js

@@ -12,16 +12,23 @@ module.exports = {
     assetsPublicPath: '/',
     proxyTable: {
       '/api-user': {
-        target: 'https://test.kj.colexiu.com/',
+        target: 'https://kj.colexiu.com/',
         changeOrigin: true,
         pathRewrite: {
           '^api-user': ''
         }
       },
+      '/api-auth': {
+        target: 'https://kj.colexiu.com/',
+        changeOrigin: true,
+        pathRewrite: {
+          '^api-auth': ''
+        }
+      },
     },
 
     // Various Dev Server settings
-    host: 'localhost', // can be overwritten by process.env.HOST
+    host: '192.168.3.58', // can be overwritten by process.env.HOST
     port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
     autoOpenBrowser: false,
     errorOverlay: true,

package-lock.json

@@ -10939,6 +10939,11 @@
       "resolved": "https://registry.npm.taobao.org/vue-awesome-swiper/download/vue-awesome-swiper-4.1.1.tgz",
       "integrity": "sha1-j3qyIa0AMCHXVrhqphj0KZJJAP4="
     },
+    "vue-count-to": {
+      "version": "1.0.13",
+      "resolved": "https://registry.npmjs.org/vue-count-to/-/vue-count-to-1.0.13.tgz",
+      "integrity": "sha512-6R4OVBVNtQTlcbXu6SJ8ENR35M2/CdWt3Jmv57jOUM+1ojiFmjVGvZPH8DfHpMDSA+ITs+EW5V6qthADxeyYOQ=="
+    },
     "vue-echarts": {
       "version": "5.0.0-beta.0",
       "resolved": "https://registry.npmjs.org/vue-echarts/-/vue-echarts-5.0.0-beta.0.tgz",

package.json

@@ -21,6 +21,7 @@
     "swiper": "^6.2.0",
     "vue": "^2.5.2",
     "vue-awesome-swiper": "^4.1.1",
+    "vue-count-to": "^1.0.13",
     "vue-echarts": "^5.0.0-beta.0",
     "vue-loader-plugin": "^1.3.0",
     "vue-router": "^3.0.1"

src/components/footerSection.vue

@@ -7,13 +7,12 @@
             <div class="qrcode">
               <div class="qrcode-item"
                    style="padding-right:50px">
-                <img src="../assets/images/logoWhile.png"
-                     width="136px"
-                     height="40px"
+                <img src="../assets/images/logoWhile1.png"
+                     width="142px"
+                     height="65px"
                      alt="">
               </div>
             </div>
-
             <div class="qrcode">
               <div class="qrcode-item">
                 <img src="../assets/images/public-code.jpg"
@@ -66,8 +65,6 @@
         </div>
       </div>
     </div>
-
-  </div>
   </div>
 </template>
 
@@ -81,12 +78,12 @@ export default {
 .footerSection {
   overflow: hidden;
   margin: 0 auto;
-  background: #39393b;
+  background: #262D45;
 }
 
 .footer-info {
   color: #cecece;
-  background: #39393b;
+  background: #262D45;
   padding: 77px 0 35px;
   .width1200 {
     display: flex;

src/components/headerSection.vue

@@ -1,23 +1,22 @@
 <template>
-  <div class="headerSection">
+  <div class="headerSection"  :class="isTop?'':'top'">
     <div class="header-container width1200">
-      <router-link :to="{ path: '/' }" class="logo">
+      <router-link :to="{ path: '/index' }" class="logo">
         <img src="../assets/images/logoWhile.png" width="100%" alt="" />
       </router-link>
       <div class="menu">
-        <a
-          :class="checkActive == 1 ? 'active' : ''"
-          @click="change(1, 'banner')"
-          >产品服务</a
+        <router-link active-class="active" :to="{ path: '/index' }"
+          >产品服务</router-link
         >
-        <a :class="checkActive == 2 ? 'active' : ''" @click="change(2, 'infos')"
-          >成功案例</a
+        <!-- :class="checkActive == 2 ? 'active' : ''"     @click="checkActive = 1"
+          :class="checkActive == 1 ? 'active' : ''"   :class="checkActive == 3 ? 'active' : ''" @click="checkActive = 2"  @click="checkActive = 3"-->
+        <router-link active-class="active" :to="{ path: '/project' }"
+          >成功案例</router-link
         >
-        <a
-          :class="checkActive == 3 ? 'active' : ''"
-          @click="change(3, 'detail')"
-          >关于我们</a
+        <router-link active-class="active" :to="{ path: '/aboutUs' }"
+          >关于我们</router-link
         >
+        <!--   @click="change(3, 'detail')" -->
         <div class="bandBtn" @click="goKu">机构入驻</div>
       </div>
     </div>
@@ -33,6 +32,7 @@ export default {
     return {
       checkActive: 1,
       topList: [],
+      isTop: false,
     };
   },
   created() {},
@@ -42,22 +42,24 @@ export default {
     if (url.path.indexOf("detile") != -1) {
       this.checkActive = 5;
     }
-    this.$nextTick((res) => {
-      this.topList = this.getTop([
-        "banner",
-        "infos",
-        "detail",
-        "videoList",
-        "consult",
-        "aboutUs",
-      ]);
+    window.addEventListener("scroll", (e) => {
+      //函数体
+      let scrollTop =
+        document.documentElement.scrollTop | document.body.scrollTop;
+      scrollTop > 0 ? (this.isTop = true) : (this.isTop = false);
     });
+    // this.$nextTick((res) => {
+    //   this.topList = this.getTop([
+    //     "banner",
+    //     "infos",
+    //     "detail",
+    //     "videoList",
+    //     "consult",
+    //     "aboutUs",
+    //   ]);
+    // });
 
-    window.addEventListener(
-      "scroll",
-        this.onContentScroll,
-      true
-    );
+    window.addEventListener("scroll", this.onContentScroll, true);
     Bus.$on("gotoDetail", (res) => {
       // 控制页面滚动
       this.change(3, "detail");
@@ -76,21 +78,20 @@ export default {
       return arr;
     },
     change(num, name) {
-      let url = this.$route.path;
-      let top = document.getElementById(name).offsetTop - 76;
-      const currentY =
-        document.documentElement.scrollTop || document.body.scrollTop;
-      if (url != "/") {
-        this.$router.push("/");
-        this.checkActive = num;
-
-        scrollAnimation(currentY, top);
-        // scrollTo(0, top);
-      } else {
-        this.checkActive = num;
-        scrollAnimation(currentY, top);
-        // scrollTo(0, top);
-      }
+      // let url = this.$route.path;
+      // let top = document.getElementById(name).offsetTop - 76;
+      // const currentY =
+      //   document.documentElement.scrollTop || document.body.scrollTop;
+      // if (url != "/") {
+      //   this.$router.push("/");
+      //   this.checkActive = num;
+      //   scrollAnimation(currentY, top);
+      //   // scrollTo(0, top);
+      // } else {
+      //   this.checkActive = num;
+      //   scrollAnimation(currentY, top);
+      //   // scrollTo(0, top);
+      // }
     },
     goKu() {
       window.open("https://kj.colexiu.com/#/login?returnUrl=%2F", "_blank");
@@ -99,7 +100,7 @@ export default {
     onContentScroll(e) {
       // this.topList = this.getTop(['banner', 'infos', 'detail', 'videoList', 'consult', 'aboutUs'])
       let target = e.target || e.srcElement;
-      if (target&&target.scrollingElement) {
+      if (target && target.scrollingElement) {
         this.scrollTop = target.scrollingElement.scrollTop;
         if (this.scrollTop < this.topList[1]) {
           this.checkActive = 1;
@@ -137,7 +138,7 @@ export default {
   width: 112px;
   height: 30px;
   background: #2dc7aa;
-  // border-radius: 4px;
+  border-radius: 15px;
   color: #fff;
   margin-left: 70px;
   line-height: 30px;
@@ -150,13 +151,21 @@ export default {
 .wall {
   height: 82px;
 }
+  .headerSection.top {
+    background-color: transparent!important;
+    .header-container{
+      border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+    }
+
+  }
 .headerSection {
-  background-color: rgba(0,0,0,.4);
+  background-color: rgba(0, 0, 0, 0.4);
   position: fixed;
   width: 100%;
   top: 0px;
-  z-index: 1000;
+  z-index: 1200;
   // backdrop-filter: saturate(180%) blur(20px);
+
   .header-container {
     margin: 0 auto;
     // overflow: hidden;
@@ -165,12 +174,13 @@ export default {
     flex-direction: row;
     justify-content: space-between;
     height: 70px;
-    border-bottom: 1px solid rgba(255,255,255,.2);
+
+     border-bottom: 1px solid transparent;
   }
   .logo {
     // float: left;
-    width: 159px;
-    height: 48px;
+    width: 136px;
+    height: 39px;
   }
   .menu {
     display: flex;

src/components/silder.vue

@@ -1,82 +1,76 @@
 <template>
   <div class="silderWrap">
     <div class="silderList">
-      <div class="silderItem"
-           @click="visiable =true">
-        <img src="@/assets/images/silder/silder4.svg"
-             alt />
+      <div class="silderItem" @click="visiable = true">
+        <img src="@/assets/images/silder/silder4.svg" alt />
         <p>申请入驻</p>
         <div class="line"></div>
       </div>
-      <el-popover placement="left"
-                  trigger="hover"
-                  popper-class="Mopopver">
+      <el-popover placement="left" trigger="hover" popper-class="Mopopver">
         <div>
           <p class="hoverTitle">咨询电话：</p>
           <p class="hoverMsg">400-8851569</p>
         </div>
-        <div class="silderItem"
-             slot="reference">
-          <img src="@/assets/images/silder/silder2.svg"
-               alt />
+        <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"
-                  popper-class="Mopopver">
+      <el-popover placement="left" trigger="hover" popper-class="Mopopver">
         <div>
           <div class="code-item">
-            <img src="../assets/images/download.png"
-                 width="111px"
-                 height="111px"
-                 alt />
+            <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 />
+        <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"
-                  popper-class="Mopopver">
+      <el-popover placement="left" trigger="hover" popper-class="Mopopver">
         <div>
           <div class="code-item">
-            <img src="../assets/images/public-code.jpg"
-                 width="111px"
-                 height="111px"
-                 alt />
+            <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 />
+        <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 class="goTop" v-if="showgo" @click="gotop">
+      <img src="@/assets/images/silder/silder5.svg" alt />
     </div>
-    <el-dialog title="申请入驻"
-               :visible.sync="visiable"
-               append-to-body
-               width="450px"
-               :close-on-click-modal="false"
-               destroy-on-close>
-      <el-form ref="form"
+
+    <el-dialog
+      title="申请入驻"
+      :visible.sync="visiable"
+      append-to-body
+      width="410px"
+      :close-on-click-modal="false"
+      destroy-on-close
+    >
+
+       <submitForm />
+
+
+      <!-- <el-form ref="form"
                :model="form"
                :rules="maskRules">
         <el-form-item prop="name">
@@ -100,18 +94,20 @@
           <div class="submitBtn"
                @click="submitInfo">提交</div>
         </el-form-item>
-      </el-form>
+      </el-form> -->
     </el-dialog>
   </div>
 </template>
 <script>
 import axios from "axios";
-import qs from 'qs'
-import Bus from '../views/index/blocks/eventBus'
-import { scrollAnimation } from '@/util/scroll'
+import qs from "qs";
+import Bus from "../views/index/blocks/eventBus";
+import { scrollAnimation } from "@/util/scroll";
+import submitForm from "./submitForm.vue";
 export default {
+  components: { submitForm },
   props: ["showForm"],
-  data () {
+  data() {
     return {
       showgo: false,
       visiable: false,
@@ -136,13 +132,13 @@ export default {
       },
     };
   },
-  created () {
-    Bus.$on('joinIn', (res => {
-      console.log(res)
-      this.visiable = res
-    }))
+  created() {
+    Bus.$on("joinIn", (res) => {
+      console.log(res);
+      this.visiable = res;
+    });
   },
-  mounted () {
+  mounted() {
     var vm = this;
     window.onscroll = function () {
       if (document.documentElement.scrollTop > 300) {
@@ -153,23 +149,23 @@ export default {
     };
   },
   methods: {
-    gotop () {
-      const currentY = document.documentElement.scrollTop || document.body.scrollTop
-      scrollAnimation(currentY, 0)
+    gotop() {
+      const currentY =
+        document.documentElement.scrollTop || document.body.scrollTop;
+      scrollAnimation(currentY, 0);
     },
-    submitInfo () {
-
-       //
-       let url = 'https://test.kj.colexiu.com/'
-       if(location.hostname == 'colexiu.com'){
-         url = 'https://kj.colexiu.com/'
-       }
+    submitInfo() {
+      let url = "https://test.kj.colexiu.com/";
+      if (location.hostname == "colexiu.com") {
+        url = "https://kj.colexiu.com/";
+      }
       this.$refs["form"].validate((res) => {
         if (res) {
           console.log("发送请求");
           axios({
-            url: url+"api-user/tenantApply/add",
+            url: url + "api-user/tenantApply/add",
             method: "post",
+
             data: qs.stringify(this.form),
             headers: {
               "Content-type": "application/x-www-form-urlencoded",
@@ -187,19 +183,18 @@ export default {
     },
   },
   watch: {
-    showForm (val) {
-      console.log('调用')
+    showForm(val) {
+      console.log("调用");
       this.visiable = val;
     },
-    visiable (val) {
+    visiable(val) {
       this.$emit("changeStatus", val);
 
-      if (!val) {
-        this.$nextTick(() => {
-          this.$refs["form"].resetFields();
-        })
-
-      }
+      // if (!val) {
+      //   this.$nextTick(() => {
+      //     this.$refs["form"].resetFields();
+      //   });
+      // }
     },
   },
 };

src/components/submitForm.vue

@@ -0,0 +1,192 @@
+<template>
+  <div>
+    <el-form ref="form" :model="form" :rules="maskRules" :inline="true">
+      <el-form-item prop="name">
+        <el-input
+          v-model="form.name"
+          class="loginInput"
+          placeholder="机构名称"
+        ></el-input>
+      </el-form-item>
+      <br />
+      <el-form-item prop="city">
+        <el-input
+          v-model="form.city"
+          class="loginInput"
+          placeholder="城市"
+        ></el-input>
+      </el-form-item>
+      <br />
+      <el-form-item prop="linkman">
+        <el-input
+          v-model="form.linkman"
+          class="loginInput"
+          placeholder="联系人姓名"
+        ></el-input>
+      </el-form-item>
+      <br />
+      <el-form-item prop="mobileNo">
+        <el-input
+          v-model="form.mobileNo"
+          class="loginInput"
+          placeholder="请输入手机号"
+        ></el-input>
+      </el-form-item>
+      <!--       class="phoneInput"     class="phoneInput" -->
+      <el-form-item prop="smsCode" class="codeWrap">
+        <el-input
+          v-model="form.smsCode"
+          class="loginInput"
+          placeholder="请输入验证码"
+        ></el-input>
+        <div class="line"></div>
+        <div class="codeBox" @click="getCode">
+          {{ time > 0 ? `${time}秒` : "发送验证码" }}
+        </div>
+      </el-form-item>
+
+      <div class="submitBtn" @click="submitInfo">申请免费试用</div>
+    </el-form>
+  </div>
+</template>
+<script>
+import axios from "axios";
+import qs from "qs";
+export default {
+  data() {
+    return {
+      form: {
+        name: "",
+        city: "",
+        linkman: "",
+        mobileNo: "",
+        smsCode: "",
+      },
+      time: 0,
+      url: "https://kj.colexiu.com/",
+      maskRules: {
+        name: [{ required: true, message: "请输入机构名称" }],
+        city: [{ required: true, message: "请输入所在城市" }],
+        linkman: [{ required: true, message: "请输入联系人姓名" }],
+        mobileNo: [
+          { required: true, message: "请输入手机号" },
+          {
+            pattern: /^1[3456789]\d{9}$/,
+            message: "请输入正确的手机号",
+            trigger: "blur",
+          },
+        ],
+        smsCode: [{ required: true, message: "请输入验证码" }],
+      },
+    };
+  },
+  mounted() {},
+  methods: {
+    submitInfo() {
+      // let url = "https://test.kj.colexiu.com/";
+      // if (location.hostname == "colexiu.com") {
+      //   url = "https://kj.colexiu.com/";
+      // }
+      this.$refs["form"].validate((res) => {
+        if (res) {
+          axios({
+            url: this.url + "api-user/tenantApply/add",
+            method: "post",
+            data: qs.stringify(this.form),
+            headers: {
+              "Content-type": "application/x-www-form-urlencoded",
+              "Access-Control-Allow-Origin": "*",
+            },
+          }).then((res) => {
+            if (res.data.code === 200) {
+              this.$message.success("发送成功");
+            } else {
+              this.$message.error("发送失败");
+            }
+          });
+        }
+      });
+    },
+    getCode() {
+      console.log("获取验证码");
+      if (this.time > 0) {
+        return;
+      }
+      this.$refs["form"].validateField("mobileNo", (valid) => {
+        console.log("验证通过发起请求", valid);
+        if (!valid) {
+          axios({
+            url: this.url + "api-auth/code/sendSms",
+            method: "post",
+            data: { mobile: this.form.mobileNo },
+            headers: {
+              "Content-type": "application/x-www-form-urlencoded",
+              "Access-Control-Allow-Origin": "*",
+            },
+          }).then((res) => {
+            if (res.data.code == 200) {
+              this.$message.success("发送成功");
+              const timer = setInterval(() => {
+                if (this.time > 0) {
+                  this.time--;
+                } else {
+                  this.time = 0;
+                  clearInterval(timer);
+                }
+              }, 1000);
+            } else {
+              this.$message.error("发送失败");
+            }
+          });
+        }
+      });
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.loginInput {
+  width: 370px;
+}
+.phoneInput {
+  width: 285px;
+}
+.codeWrap {
+  position: relative;
+}
+.codeBox {
+  width: 116px;
+  height: 36px;
+  background-color: #fff;
+  line-height: 38px;
+  position: absolute;
+  right: 1px;
+  top: 2px;
+  cursor: pointer;
+  color: #808080;
+  text-align: center;
+}
+.line {
+  position: absolute;
+  width: 1px;
+  height: 15px;
+  border: 1px solid #e5e5e5;
+  right: 118px;
+  top: 14px;
+}
+.submitBtn {
+  margin-top: 30px;
+  width: 300px;
+  height: 50px;
+  line-height: 50px;
+  border-radius: 25px;
+  background-color: #2dc7aa;
+  color: #fff;
+  position: relative;
+  left: 50%;
+  margin-left: -150px;
+}
+.el-form-item {
+  margin-bottom: 13px;
+}
+</style>

src/main.js

@@ -18,3 +18,7 @@ new Vue({
   components: { App },
   template: '<App/>'
 })
+
+router.afterEach((to,from,next)=>{
+  window.scrollTo(0,0)
+})

src/router/index.js

@@ -1,12 +1,6 @@
 import Vue from 'vue'
 import Router from 'vue-router'
 import Index from '@/views/index'
-import consult from '@/views/consult'
-import detile1 from '@/views/consult/detile1.vue'
-import detile2 from '@/views/consult/detile2.vue'
-import detile3 from '@/views/consult/detile3.vue'
-import detile4 from '@/views/consult/detile4.vue'
-import detile5 from '@/views/consult/detile5.vue'
 import aboutUs from '@/views/aboutUs'
 import project from '@/views/project'
 //detile1
@@ -18,38 +12,13 @@ export default new Router({
     {
       path: '/',
       name: 'Index',
+      redirect: '/index',
       component: Index
     },
     {
-      path: '/consult',
-      name: 'consult',
-      component: consult
-    },
-    // detile1
-    {
-      path: '/detile1',
-      name: 'detile1',
-      component: detile1
-    },
-    {
-      path: '/detile2',
-      name: 'detile2',
-      component: detile2
-    },
-    {
-      path: '/detile3',
-      name: 'detile3',
-      component: detile3
-    },
-    {
-      path: '/detile4',
-      name: 'detile4',
-      component: detile4
-    },
-    {
-      path: '/detile5',
-      name: 'detile5',
-      component: detile5
+      path: '/index',
+      name: 'Index',
+      component: Index
     },
     {
       path: '/aboutUs',

src/views/aboutUs/index.vue

@@ -1,84 +1,431 @@
 <template>
   <div class="container">
-    <div class="topBanner">
-      <!-- <h2 class="msg">关于我们</h2> -->
+    <header class="banner">
+      <img src="./images/banner.png" class="bannerIMg" width="100%" alt="" />
+      <div class="bannerWrap">
+        <div class="font">
+          <img src="./images/font.png" width="100%" alt="" />
+        </div>
+        <div class="animateList" ref="animateList">
+          <div class="imgWrap" data-depth="0.1">
+            <img src="./images/11.png" width="100%" alt="" />
+          </div>
+          <div class="imgWrap" data-depth="0.2">
+            <img src="./images/22.png" width="100%" alt="" />
+          </div>
+          <div class="imgWrap" data-depth="0.3">
+            <img src="./images/33.png" width="100%" alt="" />
+          </div>
+          <div class="imgWrap" data-depth="0.4">
+            <img src="./images/44.png" width="100%" alt="" />
+          </div>
+          <div class="imgWrap" data-depth="0.5">
+            <img src="./images/55.png" width="100%" alt="" />
+          </div>
+        </div>
+      </div>
+    </header>
+    <div class="chioseList">
+      <div class="chioseWrap width1200">
+        <h2>为什么<span>选择酷乐秀</span></h2>
+        <div class="chioseItemList">
+          <div class="chioseItem">
+            <p class="title">
+              <count-to :endVal="19" :decimals="0" :class="'num'" />年
+            </p>
+            <p class="subTitle">器乐教学领域技术研究</p>
+            <p class="concat">
+              酷乐秀技术团队通过对器乐教学多年的深入研究，深谙器乐教育行业痛点，通过独有的专利技术赋能器乐教育发展。
+            </p>
+          </div>
+          <div class="chioseItem">
+            <p class="title">
+              <count-to :endVal="10" :decimals="0" :class="'num'" />万+
+            </p>
+            <p class="subTitle">10w注册用户的信赖之选</p>
+            <p class="concat">
+              团队所研发的软件产品经历10万多注册学员的使用与赞赏，陪伴学员从入门到精通的乐器学习之路，为学员带来极佳的学习体验。
+            </p>
+          </div>
+          <div class="chioseItem">
+            <p class="title">
+              <count-to :endVal="60" :decimals="0" :class="'num'" />万+
+            </p>
+            <p class="subTitle">在线直播课堂经验</p>
+            <p class="concat">
+              专属器乐教学的线上课堂经历过60多万节线上课程的验证，独创的音乐模式课堂深受老师与学员好评。
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="aboutShow">
+      <!-- <img src="./images/aboutShow.png" alt="" /> -->
+      <div class="aboutShowLeft">
+        <img src="./images/aboutShowL.png" alt="" />
+        <div class="textWrap">
+          <h2>关于酷乐秀</h2>
+          <p>
+            酷乐秀是武汉市景明云乐网络科技有限公司专为全国管乐教学机构研发的服务平台。为合作机构提供远程视频直播的技术支持，独创“音乐演奏模式”高度还原乐器演奏的现场感及音色。并开创管乐智能评测功能，为广大管乐学习者带来福音
+          </p>
+          <p>
+            景明云乐汇聚了在音乐在线教育，云计算，AI智能行业的顶尖人才
+            ，运用在音乐教育行业积累的十八年经验结合在语音视频领域多年研究，高度还原了乐器线上演奏场景，并已成功平稳运行六十多万课时。
+          </p>
+        </div>
+      </div>
+      <div class="aboutShowRight">
+        <img src="./images/aboutShowR.png" alt="" />
+      </div>
     </div>
-    <div class="msgWrap">
-      <div class="msgInfo">
-        <p>酷乐秀是武汉市景明云乐网络科技有限公司专为全国音乐等级考试和音乐类比赛研发的服务平台。为合作机构提供远程视频直播、录播考级的技术支持，独创“音乐演奏模式”高度还原乐器演奏的现场感及音色。同步还原线下考级场景，让合作机构和考生公平公正，省时省力的通过酷乐秀实现考级完整生命周期。</p>
-        <p>景明云乐汇聚了在音乐在线教育，云计算，AI智能行业的顶尖人才 ，运用在音乐教育行业积累的十八年经验结合在语音视频领域多年研究，高度还原了乐器线上演奏场景，并已成功平稳运行二十多万课时。</p>
-        <img src='@/assets/images/aboutUs/about.png'
-             width="100%"
-             style="margin-top:50px"
-             alt />
+    <div class="why">
+      <h2>全方位<span>贴心服务</span></h2>
+      <div class="whyList width1200">
+        <div class="whyItem">
+          <div class="imgWrap">
+            <img src="./images/1111.png" alt="" />
+          </div>
+          <div class="right">
+            <h4>售前咨询</h4>
+            <p>一对一客服全程服务 解答您的所有问题</p>
+          </div>
+        </div>
+        <div class="whyItem">
+          <div class="imgWrap">
+            <img src="./images/2222.png" alt="" />
+          </div>
+          <div class="right">
+            <h4>免费试用</h4>
+            <p>平台提供14天免费试用 让您先体验后选择</p>
+          </div>
+        </div>
+        <div class="whyItem">
+          <div class="imgWrap">
+            <img src="./images/3333.png" alt="" />
+          </div>
+          <div class="right">
+            <h4>全程培训辅导</h4>
+            <p>三端操作一对一辅导 助您快速上手解决管理难题</p>
+          </div>
+        </div>
+        <div class="whyItem">
+          <div class="imgWrap">
+            <img src="./images/4444.png" alt="" />
+          </div>
+          <div class="right">
+            <h4>技术支持</h4>
+            <p>专业人员提供技术支持 7x24小时服务提供保障</p>
+          </div>
+        </div>
       </div>
     </div>
     <silder />
   </div>
 </template>
 <script>
-import silder from '@/components/silder.vue'
+import silder from "@/components/silder.vue";
+import Parallax from "parallax-js";
+import countTo from "vue-count-to";
 export default {
-  components: { silder },
-  data () {
+  components: { silder, "count-to": countTo },
+  data() {
     return {
-      showForm: false
-    }
+      showForm: false,
+    };
+  },
+  mounted() {
+    const parallaxInstance = new Parallax(this.$refs.animateList, {
+      // relativeInput: true,
+      hoverOnly: true,
+    });
   },
   methods: {
-    changeStatus () { }
-  }
+    changeStatus() {},
+  },
 };
 </script>
 <style lang="less" scoped>
-.container {
-  background-color: #f6f7f9;
+@keyframes jump {
+  0% {
+    margin-top: 0;
+  }
+  50% {
+    margin-top: -10px;
+  }
+  100% {
+    margin-top: 0;
+  }
 }
-.topBanner {
-  background: url("../../assets/images/aboutUs/about-banner.png") center;
-  background-size: cover;
-  background-repeat: no-repeat;
+.banner {
+  vertical-align: center;
+  .bannerIMg {
+    height: 588px;
+    display: block;
+  }
   position: relative;
-  height: 470px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  .msg {
-    margin-top: 194px;
-    font-size: 50px;
-    font-family: PingFangSC-Semibold, PingFang SC;
-    font-weight: 600;
-    color: #ffffff;
-    line-height: 70px;
-    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.32);
+  // width: 100%;
+  // background: url("../images/banner.png") no-repeat center;
+  // background-color: #2a2c41;
+  // background-size: 100% 100%;
+  // height: 763px;
+
+  .bannerWrap {
+    width: 1180px;
+    top: 0;
+    position: absolute;
+    left: 50%;
+    margin-left: -590px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+     .font {
+      width: 45%;
+      margin-top: 245px;
+    }
+    .animateList {
+      margin-top: 75px;
+      width: 45%;
+      position: relative;
+      .imgWrap {
+        position: absolute;
+        img {
+          top: 0;
+          width: 100%;
+        }
+      }
+    }
   }
-}
-.msgWrap {
-  margin-top: 100px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding-bottom: 200px;
-  .msgInfo {
-    width: 950px;
+
+  .content {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+
+    color: rgba(255, 255, 255, 0.8);
+    > div {
+      padding-top: 30px;
+      overflow: hidden;
+      margin-top: -6px;
+    }
     h3 {
-      font-size: 36px;
-      font-family: PingFangSC-Medium, PingFang SC;
-      font-weight: 500;
-      color: #000000;
-      line-height: 50px;
-      margin-bottom: 78px;
+      margin-top: 30px;
+    }
+    .buttonWrap {
+      padding-top: 0;
     }
-    p {
+    .join {
+      display: inline-block;
+      width: 150px;
+      height: 46px;
+      // margin: 0 auto;
+      margin-top: 56px;
+      margin-right: 8px;
+      line-height: 46px;
       font-size: 16px;
-      font-family: PingFangSC-Regular, PingFang SC;
-      font-weight: 400;
-      color: #1a1a1a;
-      line-height: 36px;
-      margin-bottom: 30px;
-      text-indent: 32px;
+      background: #2dc7aa;
+      border: 1px solid #2dc7aa;
+      width: 184px;
+      height: 46px;
+      color: #ffffff;
+      cursor: pointer;
+      &:hover {
+        background-color: #2ac0a3;
+      }
+    }
+    .goinBox {
+      display: inline-block;
+      width: 150px;
+      height: 46px;
+      // margin: 0 auto;
+      margin-top: 56px;
+      margin-right: 12px;
+      line-height: 46px;
+      font-size: 16px;
+      width: 184px;
+      height: 46px;
+      border: 1px solid #c5c5c5;
+      color: #ffffff;
+      cursor: pointer;
+      &:hover {
+        background-color: #2dc7aa;
+        border: 1px solid #2dc7aa;
+      }
+    }
+  }
+}
+.chioseWrap {
+  margin-bottom: 108px;
+  h2 {
+    padding-top: 60px;
+    font-size: 33px;
+    color: #000000;
+    line-height: 64px;
+    margin-bottom: 60px;
+    font-weight: 400;
+    span {
+      font-weight: bold;
+    }
+  }
+  .chioseItemList {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    .chioseItem {
+      width: 376px;
+      height: 353px;
+      background: #ffffff;
+      border-radius: 8px;
+      border: 1px solid #dddddd;
+      padding: 0 40px;
+      &:hover {
+        background: url("./images/chioseBg.png") no-repeat center;
+        background-size: cover;
+        background-color: #fff;
+        border: 1px solid #e8f7f4;
+        box-shadow: 0px 4px 10px 0px rgba(211, 225, 223, 0.47);
+      }
+      .title {
+        margin-top: 63px;
+        margin-bottom: 40px;
+        color: #10aaae;
+        font-size: 24px;
+        .num {
+          font-size: 54px;
+        }
+      }
+      .subTitle {
+        height: 28px;
+        font-size: 20px;
+        font-weight: 600;
+        color: #000000;
+        line-height: 28px;
+        margin-bottom: 18px;
+      }
+      .concat {
+        font-size: 14px;
+        font-weight: 400;
+        color: #6a7388;
+        line-height: 26px;
+        text-align: left;
+      }
+    }
+  }
+}
+.aboutShow {
+  // showBg
+  width: 100%;
+  // height: 480px;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  .aboutShowLeft {
+    width: 56%;
+    position: relative;
+    .textWrap {
+      position: absolute;
+      width: 623px;
+      right: 73px;
+      top: 9%;
       text-align: left;
+      color: #fff;
+      h2 {
+        margin-bottom: 6%;
+        font-size: 36px;
+        font-weight: 500;
+      }
+      p {
+        font-size: 16px;
+        font-weight: 400;
+        color: #ffffff;
+        line-height: 30px;
+        margin-bottom: 5%;
+        text-indent: 32px;
+      }
+    }
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .aboutShowRight {
+    width: 44%;
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  // img {
+  //   width: 100%;
+  //   display: block;
+  // }
+}
+.why {
+  height: 475px;
+  background: url("./images/whyBg.png") no-repeat center;
+  h2 {
+    padding-top: 60px;
+    font-size: 33px;
+    color: #000000;
+    line-height: 64px;
+    margin-bottom: 60px;
+    font-weight: 400;
+    span {
+      font-weight: bold;
+    }
+  }
+  .whyList {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    .whyItem {
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      width: 275px;
+      padding: 40px 14px 0 24px;
+      height: 161px;
+      background: #ffffff;
+      box-shadow: 0px 4px 10px 0px rgba(211, 225, 223, 0.47);
+      border-radius: 8px;
+       border: 1px solid transparent;
+
+      &:hover {
+        background: url("./images/careBg.png") no-repeat center;
+        background-size: cover;
+        border: 1px solid #e8f7f4;
+        background-color: #fff;
+        img {
+          animation: 1s 0.1s jump infinite;
+        }
+      }
+      .imgWrap {
+        margin-right: 28px;
+        img {
+          width: 64px;
+          height: 64px;
+        }
+      }
+      .right {
+        h4 {
+          font-size: 20px;
+          font-weight: 600;
+          color: #000000;
+          line-height: 28px;
+          text-align: left;
+        }
+        p {
+          margin-top: 9px;
+          font-weight: 400;
+          color: #6a7388;
+          line-height: 22px;
+          font-size: 14px;
+          text-align: left;
+        }
+      }
     }
   }
 }
-</style>
+</style>

src/views/consult/detile1.vue

@@ -1,54 +0,0 @@
-<template>
-  <div class="container">
-    <div class="msgWrap">
-      <h2>承办单位和定点机构有什么区别？</h2>
-      <p>“承办单位”指与文化和旅游部艺术发展中心考级中心直接签约的授权代理法人单位，悬挂牌匾由文化和旅游部艺术发展中心统一规制和颁发。</p>
-      <p>“定点机构”是指与文化和旅游部艺术发展中心考级中心在各地的艺术考级承办单位合作的艺术相关机构，悬挂牌匾由文化和旅游部艺术发展中心考级中心统一规制，各地承办单位按照统一的编号规则颁发。</p>
-      <p>目前，文化和旅游部艺术发展中心在各地的艺术考级相关机构悬挂牌匾只有“考级办公室或考级委员会”和“定点机构”两种规制。</p>
-            <p class="bottom">来源：文化和旅游部艺术发展中心考级中心</p>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  data() {
-    return {};
-  },
-};
-</script>
-<style lang="less" scoped>
-.container {
-  background: #f4f4f4;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  .msgWrap {
-    width: 1000px;
-    background-color: #fff;
-    min-height: 500px;
-    margin: 70px auto 244px;
-    padding: 66px 75px;
-    text-align: left;
-    h2 {
-      font-size: 34px;
-      font-family: PingFangSC-Medium, PingFang SC;
-      font-weight: 500;
-      color: #1a1a1a;
-      line-height: 48px;
-      margin-bottom: 90px;
-    }
-    p {
-      font-size: 16px;
-      font-family: PingFangSC-Regular, PingFang SC;
-      font-weight: 400;
-      color: #1a1a1a;
-      line-height: 36px;
-      margin-bottom: 30px;
-      text-indent: 32px;
-    }
-    .bottom {
-        text-align: right;
-    }
-  }
-}
-</style>

src/views/consult/detile2.vue

@@ -1,63 +0,0 @@
-<template>
-  <div class="container">
-    <div class="msgWrap">
-      <h2>乐器演奏不清晰不连贯的原因有哪些？</h2>
-      <p>
-        你在练什么乐器？你是否经常吹不清楚，拉不流畅，弹不连贯？
-        <br />答案肯定很不乐观，这是器乐学习者的通病，初学者入门阶段大量存在。也许这一时期手生技疏情有可原，但如果一首乐曲练了很长一段时间毛病依然如故，那就非得好好找出原因来了。
-        <br />不管你学的是管乐、弦乐还是弹拨乐，演奏不清晰不流畅的根本原因都一样，主要有以下几个方面：
-        <br />
-      </p>
-      <h4>一、不善于慢练</h4>
-      <p>很多快速的跑动乐句没经过一音一句的慢练过程。这是造成旋律含混不清，导致音乐磕磕碰碰的重要原因。我们都知道慢工出细活，可编编有人性子急不愿意慢，把原本慢的曲子也弹得快，快的曲子则弹得更快，怎么会不出现问题？乐曲也好，练习曲也罢，首要任务是把每个音都交代清楚，如果中板速度奏不清楚，就要减速为慢板，慢板还弹不清就再减为甚慢板……总之不要怕慢，要敢于慢条斯理，不管它原始速度多少，不然弹得乱七八糟，弹得定型就难得改过来了。</p>
-      <h4>二、不注意指法</h4>
-      <p>甚至自己瞎编乱造。指法也是乐句连贯的保证，要穿指的时候你不穿，你去跳；该扩指的地方你不扩，也去跳，那不结巴才怪呢！你是初学者，没资格无能力编制个人指法，必须尊重科学，老老实实按曲谱标注指法演奏才是。</p>
-      <h4>三、不练练习曲</h4>
-      <p>或练习曲练得很少，致使手指独立性灵活性差。乐曲弹得顺，旋律拉得畅，显然和手指机能密切相关，而手指功能良好与否，有赖于基本功训练，大量练习曲的练习。许多乐器学习者，喜欢一味弹奏流行歌曲，不重视基本功，不重视手指机能，以致于老是给听众呈现混浊的曲调还蒙在鼓里。</p>
-      <p >虽然还有其他原因，如音位调性不熟悉，双手配合不协调，大脑反映较迟钝等等，但上述三条才是最主要最常见的原因。希望广大乐器自学者和初学者，对照以上条目，查找影响自己演奏清晰度、流畅性和连贯性的毛病与陋习，有针对性地进行整改，促使个人的技能训练尽可能正规，从而不断提高个人的演奏水平。</p>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  data() {
-    return {};
-  },
-};
-</script>
-<style lang="less" scoped>
-.container {
-  background: #f4f4f4;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  .msgWrap {
-    width: 1000px;
-    background-color: #fff;
-    min-height: 500px;
-    margin: 70px auto 244px;
-    padding: 66px 75px;
-    text-align: left;
-    h2 {
-      font-size: 34px;
-      font-family: PingFangSC-Medium, PingFang SC;
-      font-weight: 500;
-      color: #1a1a1a;
-      line-height: 48px;
-      margin-bottom: 90px;
-    }
-    h4 {
-        margin-bottom: 10px;
-    }
-    p {
-      font-size: 16px;
-      font-family: PingFangSC-Regular, PingFang SC;
-      font-weight: 400;
-      color: #1a1a1a;
-      line-height: 36px;
-      margin-bottom: 30px;
-      text-indent: 32px;
-    }
-  }
-}
-</style>

src/views/consult/detile3.vue

@@ -1,87 +0,0 @@
-<template>
-  <div class="container">
-    <div class="msgWrap">
-      <h2>十级琴霸的备考建议，考级琴童人手一份！</h2>
-      <p>考级冲刺月，很多考生都已进入紧张的备考阶段，每天练习音阶琶音、背谱等考试项目。以下是来自十级琴霸的备考忠告， 赶紧对照下文，看看接下来的一个多月里，你每天需要练习多久。</p>
-      <h5>正在备战考级的同学们注意啦！</h5>
-      <p>
-        >如果考级曲目中还有一首没练好，建议在未来的一个月中每天坚持3、4小时以上的练琴时间。
-        <br />如果有两首，那么请你沉迷于练琴，不可自拔
-        <br />曲子都已经练好了的同学，每天也需要两个小时的巩固练习
-      </p>
-      <img src="@/assets/images/consult/infoMsg.png" alt="" width="100%">
-      <p>如果考级前仅剩的一个多月的宝贵时间，最重要的是制定合理的练琴计划，规划好练琴时间和进度。我们先来做一个粗略的计算：<p>
-          <h5>考 1-3级的孩子把考级曲目加上基本练习从头到尾演奏一遍的时间大概在需要15分钟， 4-7级的孩子需要20-25分钟，8-10级则要30分钟。</h5>
-      <p>甚至自己瞎编乱造。指法也是乐句连贯的保证，要穿指的时候你不穿，你去跳；该扩指的地方你不扩，也去跳，那不结巴才怪呢！你是初学者，没资格无能力编制个人指法，必须尊重科学，老老实实按曲谱标注指法演奏才是。</p>
-      <p>在考级之前，提高练琴效率是关键，尤其每周回课后的总结十分必要。<span>课后先花20分钟的时间整理一下思路，才能达到事半功倍的效果！</span> 这二十分钟要做些什么？下面这张思维导图告诉你。</p>
-       <img src="@/assets/images/consult/infoImg.jpg" alt="" width="100%">
-       <p>除了提高练琴效率外，还要保证大量的练琴时间，并明确考级的要求，不能盲目练习。</p>
-      <h4>一、完整性</h4>
-      <p>完整性指的是考级的所有曲目都能从头到尾完整地演奏下来，几乎没有不连贯、忘谱的情况出现。 完整性是演奏音乐最基本的要求。
-演奏时出现中途间断、不连贯的情况有以下几个原因：第一是技术不过关，在演奏难点片段的时候习惯性中断；第二是背谱不熟练，在演奏中忘谱也是造成不连贯的因素之一；第三是因为紧张的情绪造成思维反应迟钝甚至混乱，从而影响到手指的运动。
-</p>
-<h4>二、准确性</h4>
-<p>准确性不仅仅指的是音高和节奏，它还包括速度、音乐风格、情感把握等方面的准确性。
-准确性首先要求在练习的过程中不能粗心大意，其次在老师的纠正和引导下做出正确的练习，最后在考试过程中牢记自己经常会出现的错误，尽量避免。
-</p>
-<h4>三、技巧性</h4>
-<p>每首考级作品都会有需要考察的技术难点， 技术难点是在考试中的一个重要评分项，也是钢琴技术水平的重要体现。
-在练习一首作品时，一定要明确作品的技术难点。 慢练，是解决技术难点最有效的方法， 在慢练的过程中要注意指法、手型、手指触键方式等的正确性，然后慢慢加速，最终克服技术难点。
-</p>
-<h4>四、音乐性</h4>
-<p>音乐性包括对乐句乐段的划分，强弱起伏以及风格的把握等方面。对于音乐性最好的训练方法就多听。孩子对音乐的理解层面还比较浅显，甚至只能做出最基本的强弱变化，多欣赏音乐家们的演奏可以提升他们对音乐的认知。但对于即将面临考级的孩子来说，就需要非常有针对性地多听考试曲目，结合老师上课所传授的内容，理解音乐中的情感。</p>
- <img src="@/assets/images/consult/infoImg1.png" alt="" width="100%">
-      <p>但是，音乐性的表现是建立在一定的技术水平上的，没有好的技术，也无法表现出音乐。当考级进入冲刺阶段时，希望每个备考的孩子都能准备充分、从容应对！</p>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  data() {
-    return {};
-  },
-};
-</script>
-<style lang="less" scoped>
-.container {
-  background: #f4f4f4;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  img {  margin-bottom: 30px;}
-  .msgWrap {
-    width: 1000px;
-    background-color: #fff;
-    min-height: 500px;
-    margin: 70px auto 244px;
-    padding: 66px 75px;
-    text-align: left;
-    h2 {
-      font-size: 34px;
-      font-family: PingFangSC-Medium, PingFang SC;
-      font-weight: 500;
-      color: #1a1a1a;
-      line-height: 48px;
-      margin-bottom: 90px;
-    }
-    h4,
-    h5 {
-      margin-bottom: 10px;
-      font-size: 16px;
-      line-height: 36px;
-    }
-    p {
-      font-size: 16px;
-      font-family: PingFangSC-Regular, PingFang SC;
-      font-weight: 400;
-      color: #1a1a1a;
-      line-height: 36px;
-      margin-bottom: 30px;
-      text-indent: 32px;
-      span {
-          font-weight: 600;
-      }
-    }
-  }
-}
-</style>

src/views/consult/detile4.vue

@@ -1,79 +0,0 @@
-<template>
-  <div class="container">
-    <div class="msgWrap">
-      <h2>武汉中考改革定了，音乐等艺术等科目纳入“新中考”</h2>
-      <p> <span>2020年，武汉市教育局公布《推进高中阶段学校考试招生制度改革的实施方案（试行）》（以下简称“新中考”方案），即从当年初一入学的学生开始实施。</span> 2023年，形成基于初中学业水平考试成绩、学生综合素质评价结果的“新中考”招生录取模式、管理机制。</p>
-      <h3>学业水平考试有哪些科目</h3>
-      <p>
-        武汉市初中学业水平考试的科目为： <span> 语文、数学、外语、物理、化学、生物、道德与法治、历史、地理、体育与健康、音乐、美术、综合实践活动（信息技术教育）、生命安全教育、心理健康教育，共15科。</span>综合实践活动（研究性学习、社区服务与社会实践以及劳动与技术教育）的学习情况，统一记入学生综合素质评价的相关内容。
-      </p>
-        <img src="@/assets/images/consult/infoImg2.jpg" alt="" width="100%">
-      <p>含地理、生物、音乐、美术、综合实践活动（信息技术教育）、生命安全教育、心理健康教育等，<span>只进行学业水平考试，不纳入高中阶段学校招生录取计分，其结果以等级形式呈现，纳入学生综合素质评价内容，并作为初中学生毕业及普通高中招生录取的依据之一。</span> <p>
-
-          <h5>具体为：</h5>
-      <p>语文、数学、外语、物理和化学、道德与法治和历史，均以卷面原始分计入招生录取总分。理化生实验操作、体育与健康，以原始得分计入招生录取总分。 </p>
-      <p>生物和地理（合卷）、音乐、美术、生命安全教育和心理健康教育（合卷）、综合实践活动（信息技术教育）按80分及以上、79－70分、69－60分、59分以下为A、B、C、D四个等级呈现。以等级方式纳入高中阶段学校招生录取依据。</p>
-      <p>综合素质各维度评定为C等或以上、所有科目学业考试成绩合格的毕业年级学生，方可授予初中毕业证书。学业考试成绩不合格的学生，按科目种类申请参加由区教育局7月10日前组织的一次补考。</p>
-      <p>报考普通高中学校的学生，其以等级形式呈现的成绩中，最多只允许有一个最低等级（D等）成绩的科目。</p>
-      <p>可以看出，此次改革重点在思想品德、学业水平、身心健康、艺术素养和社会实践5个方面，设定评价内容和要求，反映学生的全面发展情况和个性特长，注重考查学生的日常行为规范养成和突出表现。
-近年来，国家政策的支持推动了艺术教育的蓬勃发展。自2013年以来，国家一直着力于对学生艺术素质提升的推动工作。
-</p>
-  <img src="@/assets/images/consult/infoImg4.png" alt="" width="100%">
-       <img src="@/assets/images/consult/infoImg3.png" alt="" width="100%">
-       <p>家长务必要重视孩子的音乐教育，学习乐器的孩子们也一定要抓住这个机会，巩固乐理知识不仅能辅助乐器的学习，还能成为高中招生录取的“垫脚石”。从小从早学好相关科目的基础知识，不管是对提高素质教育水平，还是对升学考试都有直接的帮助。</p>
-    
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  data() {
-    return {};
-  },
-};
-</script>
-<style lang="less" scoped>
-.container {
-  background: #f4f4f4;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  img {  margin-bottom: 30px;}
-  .msgWrap {
-    width: 1000px;
-    background-color: #fff;
-    min-height: 500px;
-    margin: 70px auto 244px;
-    padding: 66px 75px;
-    text-align: left;
-    h2 {
-      font-size: 34px;
-      font-family: PingFangSC-Medium, PingFang SC;
-      font-weight: 500;
-      color: #1a1a1a;
-      line-height: 48px;
-      margin-bottom: 90px;
-    }
-    h3 { color: #1a1a1a; margin-bottom: 20px;}
-    h4,
-    h5 {
-         color: #1a1a1a;
-      margin-bottom: 10px;
-      font-size: 16px;
-      line-height: 36px;
-    }
-    p {
-      font-size: 16px;
-      font-family: PingFangSC-Regular, PingFang SC;
-      font-weight: 400;
-      color: #1a1a1a;
-      line-height: 36px;
-      margin-bottom: 30px;
-      text-indent: 32px;
-      span {
-          font-weight: 600;
-      }
-    }
-  }
-}
-</style>

src/views/consult/detile5.vue

@@ -1,95 +0,0 @@
-<template>
-  <div class="container">
-    <div class="msgWrap">
-      <h2>收好你的考级证书，它可能是你考入名校的垫脚石！</h2>
-      <p> 2020年暑期考级刚刚结束，相信很多琴童都已经拿到了考级证书，记得把你们的证书收好，它们将在你高考时有大用处！</p>
-      <img src="@/assets/images/consult/infoImg-5-1.png"
-           alt=""
-           width="100%">
-      <p>
-        在很多“211”、“985”高校中都设有艺术特长生，在报考高水平艺术团时，很多院校都对等级证书有所要求，有些学校甚至把<span>“报考项目需获得社会考级最高等级证书”</span>作为门槛。拥有高级别考级证书的孩子，等于拥有了高考降分的机会，往往在冲刺阶段占有更加有利的条件。拥有高级别考级证书、或比赛及演出获奖证书，在报考很多高校高水平艺术团等都享受本科
-        <span>第一批次最终模拟投档线下20分以内，有的高校甚至40分以内。</span>
-      </p>
-
-      <p>比如 <span>南京大学</span> 在2019年的高水平艺术团招生简章中，拥有考级证书就是报考的硬性条件：
-      <p>
-        <img src="@/assets/images/consult/infoImg-5-2.png"
-             alt=""
-             width="100%">
-      <p><span>‍北京邮电大学</span> 也明确写出，器乐类学生需要业余9级及以上的证书。
-      <p>
-        <img src="@/assets/images/consult/infoImg-5-3.png"
-             alt=""
-             width="100%">
-
-      <p>除此以外，包括 <span>中国政法大学、复旦大学、南开大学、浙江大学、华中科技大学、东南大学、南京航空航天大学、南京理工大学</span> 在内的多所高校，都在高水平艺术团的招生简章中，对证书与比赛方面做出了相应的要求。</p>
-      <img src="@/assets/images/consult/infoImg-5-4.png"
-           alt=""
-           width="100%">
-      <img src="@/assets/images/consult/infoImg-5-5.png"
-           alt=""
-           width="100%">
-      <img src="@/assets/images/consult/infoImg-5-6.png"
-           alt=""
-           width="100%">
-      <p>近年，各大高校为储备高水平艺术人才，相继出台了高水平艺术团的招生计划，这一政策无疑让拥有艺术特长的莘莘学子离自己梦寐以求的学府更近了一步。艺术没有止境，坚持下去，说不定哪天它就会变成你考入名校的垫脚石！</p>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  data () {
-    return {};
-  },
-};
-</script>
-<style lang="less" scoped>
-.container {
-  background: #f4f4f4;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  img {
-    margin-bottom: 30px;
-  }
-  .msgWrap {
-    width: 1000px;
-    background-color: #fff;
-    min-height: 500px;
-    margin: 70px auto 244px;
-    padding: 66px 75px;
-    text-align: left;
-    h2 {
-      font-size: 34px;
-      font-family: PingFangSC-Medium, PingFang SC;
-      font-weight: 500;
-      color: #1a1a1a;
-      line-height: 48px;
-      margin-bottom: 90px;
-    }
-    h3 {
-      color: #1a1a1a;
-      margin-bottom: 20px;
-    }
-    h4,
-    h5 {
-      color: #1a1a1a;
-      margin-bottom: 10px;
-      font-size: 16px;
-      line-height: 36px;
-    }
-    p {
-      font-size: 16px;
-      font-family: PingFangSC-Regular, PingFang SC;
-      font-weight: 400;
-      color: #1a1a1a;
-      line-height: 36px;
-      margin-bottom: 30px;
-      text-indent: 32px;
-      span {
-        font-weight: 600;
-      }
-    }
-  }
-}
-</style>

src/views/consult/index.vue

@@ -1,155 +0,0 @@
-<template>
-  <div class="container">
-    <div class="topBanner">
-    </div>
-    <div class="infoWrap">
-      <div class="infoList">
-        <div class="infoItem"
-             @click="gotoDetail(1)">
-          <img src="@/assets/images/consult/infoMsg.png"
-               width="100%"
-               alt />
-          <!-- <p class="time"></p> -->
-          <div class="textwarp">
-            <h2>承办单位和定点机构有什么区别</h2>
-            <p class="info">承办单位”指与文化和旅游部艺术发展中心考级中心直接签约的授权代理法人单位，悬挂牌匾由文化和旅游部艺术发展中心统一规制和颁发。</p>
-          </div>
-        </div>
-        <div class="infoItem"
-             @click="gotoDetail(2)">
-          <img src="@/assets/images/consult/infoMsg2.png"
-               width="100%"
-               alt />
-          <div class="textwarp">
-            <h2>乐器演奏不清晰不连贯的原因有哪些</h2>
-            <p class="info"> 你在练什么乐器？你是否经常吹不清楚，拉不流畅，弹不连贯？
-              答案肯定很不乐观，这是器乐学习者的通病，初学者入门阶段大量存在。也许这一时期手生技疏情有可原，但如果一首乐曲练了很长一段时间毛病依然如故，那就非得好好找出原因来了。</p>
-          </div>
-        </div>
-        <div class="infoItem"
-             @click="gotoDetail(3)">
-          <img src="@/assets/images/consult/infoMsg1.png"
-               width="100%"
-               alt />
-          <!-- <p class="time"></p> -->
-          <div class="textwarp">
-            <h2>十级琴霸的备考建议</h2>
-            <p class="info">考级冲刺月，很多考生都已进入紧张的备考阶段，每天练习音阶琶音、背谱等考试项目。以下是来自十级琴霸的备考忠告， 赶紧对照下文，看看接下来的一个多月里，你每天需要练习多久。</p>
-          </div>
-        </div>
-        <div class="infoItem"
-             @click="gotoDetail(4)">
-          <img src="@/assets/images/consult/infoMsg3.png"
-               width="100%"
-               alt />
-          <!-- <p class="time"></p> -->
-          <div class="textwarp">
-            <h2>音乐等艺术等科目纳入“新中考”</h2>
-            <p class="info">2020年，武汉市教育局公布《推进高中阶段学校考试招生制度改革的实施方案（试行）》（以下简称“新中考”方案），即从当年初一入学的学生开始实施。</p>
-          </div>
-        </div>
-      </div>
-    </div>
-    <silder />
-  </div>
-</template>
-<script>
-import silder from '@/components/silder.vue'
-export default {
-  components: { silder },
-  data () {
-    return {};
-  },
-  methods: {
-    gotoDetail (num) {
-      let newpage = this.$router.resolve({
-        name: `detile${num}`,
-      });
-      window.open(newpage.href, '_blank');
-    },
-    changeStatus () { }
-  },
-};
-</script>
-<style lang="less" scoped>
-.container {
-  background-color: #f6f7f9;
-}
-.topBanner {
-  background: url("../../assets/images/consult/consultBanner.png") center;
-  background-size: cover;
-  background-repeat: no-repeat;
-  position: relative;
-  height: 470px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  .msg {
-    margin-top: 194px;
-    font-size: 50px;
-    font-family: PingFangSC-Semibold, PingFang SC;
-    font-weight: 600;
-    color: #ffffff;
-    line-height: 70px;
-    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.32);
-  }
-}
-.infoWrap {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-
-  .infoList {
-    width: 988px;
-    margin-top: 60px;
-    text-align: left;
-
-    .infoItem {
-      display: flex;
-      flex-direction: row;
-      justify-content: flex-start;
-      background-color: #fff;
-      width: 988px;
-      img {
-        width: 304px;
-        height: 210px;
-      }
-      margin-bottom: 56px;
-      cursor: pointer;
-      .textwarp {
-        margin-left: 24px;
-        width: 660px;
-        h2 {
-          margin-top: 20px;
-          font-size: 26px;
-          font-family: PingFangSC-Regular, PingFang SC;
-          font-weight: 400;
-          color: #1a1a1a;
-          line-height: 33px;
-          height: 57px;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-        }
-        .info {
-          margin-top: 10px;
-          height: 60px;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          font-size: 14px;
-          font-family: PingFangSC-Regular, PingFang SC;
-          font-weight: 400;
-          color: #808080;
-          line-height: 20px;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          display: -webkit-box;
-          -webkit-line-clamp: 2;
-          -webkit-box-orient: vertical;
-          padding-right: 34px;
-        }
-      }
-    }
-  }
-}
-</style>

src/views/index/blocks/aboutUs.vue

@@ -1,58 +0,0 @@
-<template>
-  <div class="aboutWrap">
-    <h2>关于酷乐秀</h2>
-    <div class="detailWrap">
-      <div class="text">
-        <p>酷乐秀是武汉市景明云乐网络科技有限公司专为全国音乐等级考试和音乐类比赛研发的服务平台。为合作机构提供远程视频直播、录播考级的技术支持，独创“音乐演奏模式”高度还原乐器演奏的现场感及音色。同步还原线下考级场景，让合作机构和考生公平公正，省时省力的通过酷乐秀实现考级完整生命周期。 </p>
-        <p>景明云乐汇聚了在音乐在线教育，云计算，AI智能行业的顶尖人才 ，运用在音乐教育行业积累的十八年经验结合在语音视频领域多年研究，高度还原了乐器线上演奏场景，并已成功平稳运行三十多万课时。</p>
-      </div>
-      <img src="../images/about.png"
-           width="400px"
-           height="237px"
-           alt="">
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  data () {
-    return {
-
-    }
-  }
-}
-</script>
-<style lang="less" scoped>
-.aboutWrap {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  background-color: #fff;
-  padding-bottom: 200px;
-  h2 {
-    height: 48px;
-    line-height: 48px;
-    color: #2c2c2c;
-    margin: 73px 0 87px;
-    font-weight: 500;
-    font-size: 34px;
-  }
-  .detailWrap {
-    width: 1000px;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    .text {
-      width: 540px;
-      color: #626262;
-      line-height: 28px;
-      font-size: 15px;
-      p {
-        text-align: left;
-        text-indent: 30px;
-        margin-bottom: 20px;
-      }
-    }
-  }
-}
-</style>

src/views/index/blocks/banner.vue

@@ -45,12 +45,12 @@
     flex-direction: row;
     justify-content: space-between;
     .font {
-      width: 35%;
-      margin-top: 258px;
+      width: 45%;
+      margin-top: 245px;
     }
     .animateList {
-      margin-top: 75px;
-      width: 40%;
+      margin-top: 35px;
+      width: 48%;
       position: relative;
       .imgWrap {
         position: absolute;

src/views/index/blocks/consult.vue

@@ -1,518 +0,0 @@
-<template>
-  <div class="consult">
-    <div class="mask">
-      <h2>行业资讯</h2>
-      <div class="maskCore">
-        <!-- <div class="client-love-work">
-          <div class="swiper">
-            <swiper ref="mySwiper"
-                    class="current-swiper"
-                    :options="swiperOptions">
-              <swiper-slide>
-                <div class="textItem"
-                     @click="gotoDetail(1)">
-                  <img src="../images/consult1.png"
-                       alt=""
-                       width="369px">
-                  <div class="textWrap">
-                    <h4>承办单位和定点机构有什么区别</h4>
-                    <p>承办单位”指与文化和旅游部艺术发展中心考级中心直接签约的授权代理法人单位，悬挂牌匾由文化和旅游部艺术发展中心统一规制和颁发。</p>
-                  </div>
-                </div>
-              </swiper-slide>
-              <swiper-slide>
-                <div class="textItem"
-                     @click="gotoDetail(2)">
-                  <img src="../images/consult2.png"
-                       alt=""
-                       width="369px">
-                  <div class="textWrap">
-                    <h4>乐器演奏不清晰不连贯的原因有哪些？</h4>
-                    <p>你在练什么乐器？你是否经常吹不清楚，拉不流畅，弹不连贯？答案肯定很不乐观，这是器乐学习者的通病，初学者入门阶段大量存在。也许这一时期手生技疏情有可原，但如果一首乐曲练了很长一段时间毛病依然如故，那就非得好好找出原因来了。</p>
-                  </div>
-                </div>
-              </swiper-slide>
-              <swiper-slide>
-                <div class="textItem"
-                     @click="gotoDetail(3)">
-                  <img src="../images/consult3.png"
-                       alt=""
-                       width="369px">
-                  <div class="textWrap">
-                    <h4>十级琴霸的备考建议</h4>
-                    <p>考级冲刺月，很多考生都已进入紧张的备考阶段，每天练习音阶琶音、背谱等考试项目。以下是来自十级琴霸的备考忠告， 赶紧对照下文，看看接下来的一个多月里，你每天需要练习多久。</p>
-                  </div>
-                </div>
-              </swiper-slide>
-              <swiper-slide>
-                <div class="textItem"
-                     @click="gotoDetail(4)">
-                  <img src="../images/consult4.png"
-                       alt=""
-                       width="369px">
-                  <div class="textWrap">
-                    <h4>音乐等艺术等科目纳入“新中考”</h4>
-                    <p>2020年，武汉市教育局公布《推进高中阶段学校考试招生制度改革的实施方案（试行）》（以下简称“新中考”方案），即从当年初一入学的学生开始实施。</p>
-                  </div>
-                </div>
-              </swiper-slide>
-            </swiper>
-            <div class="swiper-button-next swiper-button-white"
-                 @click="onNext"
-                 slot="button-next"></div>
-            <div class="swiper-button-prev swiper-button-white"
-                 @click="onPrev"
-                 slot="button-prev"></div>
-
-            <swiper ref="leftSwiper"
-                    class="left-swiper"
-                    :options="leftOptions">
-              <swiper-slide>
-                <div class="textItem"
-                     @click="gotoDetail(4)">
-                  <img src="../images/consult4.png"
-                       alt=""
-                       width="369px">
-                  <div class="textWrap">
-                    <h4>音乐等艺术等科目纳入“新中考”</h4>
-                    <p>2020年，武汉市教育局公布《推进高中阶段学校考试招生制度改革的实施方案（试行）》（以下简称“新中考”方案），即从当年初一入学的学生开始实施。</p>
-                  </div>
-                </div>
-              </swiper-slide>
-              <swiper-slide>
-                <div class="textItem"
-                     @click="gotoDetail(1)">
-                  <img src="../images/consult1.png"
-                       alt=""
-                       width="369px">
-                  <div class="textWrap">
-                    <h4>承办单位和定点机构有什么区别</h4>
-                    <p>承办单位”指与文化和旅游部艺术发展中心考级中心直接签约的授权代理法人单位，悬挂牌匾由文化和旅游部艺术发展中心统一规制和颁发。</p>
-                  </div>
-                </div>
-              </swiper-slide>
-              <swiper-slide>
-                <div class="textItem"
-                     @click="gotoDetail(2)">
-                  <img src="../images/consult2.png"
-                       alt=""
-                       width="369px">
-                  <div class="textWrap">
-                    <h4>乐器演奏不清晰不连贯的原因有哪些？</h4>
-                    <p>你在练什么乐器？你是否经常吹不清楚，拉不流畅，弹不连贯？答案肯定很不乐观，这是器乐学习者的通病，初学者入门阶段大量存在。也许这一时期手生技疏情有可原，但如果一首乐曲练了很长一段时间毛病依然如故，那就非得好好找出原因来了。</p>
-                  </div>
-                </div>
-              </swiper-slide>
-              <swiper-slide>
-                <div class="textItem"
-                     @click="gotoDetail(3)">
-                  <img src="../images/consult3.png"
-                       alt=""
-                       width="369px">
-                  <div class="textWrap">
-                    <h4>十级琴霸的备考建议</h4>
-                    <p>考级冲刺月，很多考生都已进入紧张的备考阶段，每天练习音阶琶音、背谱等考试项目。以下是来自十级琴霸的备考忠告， 赶紧对照下文，看看接下来的一个多月里，你每天需要练习多久。</p>
-                  </div>
-                </div>
-              </swiper-slide>
-            </swiper>
-
-            <swiper ref="rightSwiper"
-                    class="right-swiper"
-                    :options="rightOptions">
-              <swiper-slide>
-                <div class="textItem"
-                     @click="gotoDetail(2)">
-                  <img src="../images/consult2.png"
-                       alt=""
-                       width="369px">
-                  <div class="textWrap">
-                    <h4>乐器演奏不清晰不连贯的原因有哪些？</h4>
-                    <p>你在练什么乐器？你是否经常吹不清楚，拉不流畅，弹不连贯？答案肯定很不乐观，这是器乐学习者的通病，初学者入门阶段大量存在。也许这一时期手生技疏情有可原，但如果一首乐曲练了很长一段时间毛病依然如故，那就非得好好找出原因来了。</p>
-                  </div>
-                </div>
-              </swiper-slide>
-              <swiper-slide>
-                <div class="textItem"
-                     @click="gotoDetail(3)">
-                  <img src="../images/consult3.png"
-                       alt=""
-                       width="369px">
-                  <div class="textWrap">
-                    <h4>十级琴霸的备考建议</h4>
-                    <p>考级冲刺月，很多考生都已进入紧张的备考阶段，每天练习音阶琶音、背谱等考试项目。以下是来自十级琴霸的备考忠告， 赶紧对照下文，看看接下来的一个多月里，你每天需要练习多久。</p>
-                  </div>
-                </div>
-              </swiper-slide>
-              <swiper-slide>
-                <div class="textItem"
-                     @click="gotoDetail(4)">
-                  <img src="../images/consult4.png"
-                       alt=""
-                       width="369px">
-                  <div class="textWrap">
-                    <h4>音乐等艺术等科目纳入“新中考”</h4>
-                    <p>2020年，武汉市教育局公布《推进高中阶段学校考试招生制度改革的实施方案（试行）》（以下简称“新中考”方案），即从当年初一入学的学生开始实施。</p>
-                  </div>
-                </div>
-              </swiper-slide>
-              <swiper-slide>
-                <div class="textItem"
-                     @click="gotoDetail(1)">
-                  <img src="../images/consult1.png"
-                       alt=""
-                       width="369px">
-                  <div class="textWrap">
-                    <h4>承办单位和定点机构有什么区别</h4>
-                    <p>承办单位”指与文化和旅游部艺术发展中心考级中心直接签约的授权代理法人单位，悬挂牌匾由文化和旅游部艺术发展中心统一规制和颁发。</p>
-                  </div>
-                </div>
-              </swiper-slide>
-            </swiper>
-          </div>
-        </div> -->
-        <swiper ref="rightSwiper"
-                class="right-swiper"
-                :options="rightOptions">
-          <swiper-slide class="swiper-slide">
-            <div class="textItem"
-                 @click="gotoDetail(2)">
-              <img src="../images/consult2.png"
-                   alt=""
-                   width="369px">
-              <div class="textWrap">
-                <h4>乐器演奏不清晰不连贯的原因有哪些？</h4>
-                <p>你在练什么乐器？你是否经常吹不清楚，拉不流畅，弹不连贯？答案肯定很不乐观，这是器乐学习者的通病，初学者入门阶段大量存在。也许这一时期手生技疏情有可原，但如果一首乐曲练了很长一段时间毛病依然如故，那就非得好好找出原因来了。</p>
-              </div>
-            </div>
-          </swiper-slide>
-          <swiper-slide class="swiper-slide">
-            <div class="textItem"
-                 @click="gotoDetail(3)">
-              <img src="../images/consult3.png"
-                   alt=""
-                   width="369px">
-              <div class="textWrap">
-                <h4>十级琴霸的备考建议</h4>
-                <p>考级冲刺月，很多考生都已进入紧张的备考阶段，每天练习音阶琶音、背谱等考试项目。以下是来自十级琴霸的备考忠告， 赶紧对照下文，看看接下来的一个多月里，你每天需要练习多久。</p>
-              </div>
-            </div>
-          </swiper-slide>
-          <swiper-slide class="swiper-slide">
-            <div class="textItem"
-                 @click="gotoDetail(4)">
-              <img src="../images/consult4.png"
-                   alt=""
-                   width="369px">
-              <div class="textWrap">
-                <h4>音乐等艺术等科目纳入“新中考”</h4>
-                <p>2020年，武汉市教育局公布《推进高中阶段学校考试招生制度改革的实施方案（试行）》（以下简称“新中考”方案），即从当年初一入学的学生开始实施。</p>
-              </div>
-            </div>
-          </swiper-slide>
-          <swiper-slide class="swiper-slide">
-            <div class="textItem"
-                 @click="gotoDetail(1)">
-              <img src="../images/consult1.png"
-                   alt=""
-                   width="369px">
-              <div class="textWrap">
-                <h4>承办单位和定点机构有什么区别</h4>
-                <p>承办单位”指与文化和旅游部艺术发展中心考级中心直接签约的授权代理法人单位，悬挂牌匾由文化和旅游部艺术发展中心统一规制和颁发。</p>
-              </div>
-            </div>
-          </swiper-slide>
-          <!-- <swiper-slide class="swiper-slide">
-            <div class="textItem"
-                 @click="gotoDetail(5)">
-              <img src="../images/consult5.png"
-                   alt=""
-                   width="369px">
-              <div class="textWrap">
-                <h4>收好你的考级证书，它可能是你考入名校的垫脚石！</h4>
-                <p>2020年暑期考级刚刚结束，相信很多琴童都已经拿到了考级证书，记得把你们的证书收好，它们将在你高考时有大用处！</p>
-              </div>
-            </div>
-          </swiper-slide> -->
-        </swiper>
-        <div class="prev"
-             @click="onPrev"></div>
-        <!--    -->
-        <div class="next"
-             @click="onNext"></div>
-      </div>
-
-    </div>
-  </div>
-</template>
-<script>
-import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
-// import 'swiper/swiper.scss'
-import 'swiper/swiper-bundle.css'
-export default {
-  components: {
-    Swiper,
-    SwiperSlide
-  },
-  directives: {
-    swiper: directive
-  },
-  data () {
-    return {
-      // swiperOptions: {
-      //   loop: true,
-      //   allowTouchMove: false
-      // },
-      // leftOptions: {
-      //   loop: true,
-      //   allowTouchMove: false
-      // },
-      rightOptions: {
-        watchSlidesProgress: true,
-        slidesPerView: "auto",
-        centeredSlides: true,
-        allowTouchMove: false,
-        loop: true,
-        autoplay: false,
-
-        on: {
-          progress: function () {
-            for (let i = 0; i < this.slides.length; i++) {
-              let modify = 1;
-              var slide = this.slides.eq(i);
-              var slideProgress = this.slides[i].progress;
-              if (Math.abs(slideProgress) > 1) {
-                modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
-              }
-              let translate = slideProgress * modify * 130 + "px";
-              let scale = 1 - Math.abs(slideProgress) / 9;
-              let zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
-              slide.transform(
-                "translateX(" + translate + ") scale(" + scale + ")"
-              );
-              slide.css("zIndex", zIndex);
-              slide.css("opacity", 1);
-              if (Math.abs(slideProgress) > 1) {
-                slide.css("opacity", 0);
-              }
-            }
-          },
-          setTransition: function (swiper, transition) {
-            for (var i = 0; i < this.slides.length; i++) {
-              var slide = this.slides.eq(i);
-              slide.transition(transition);
-            }
-          }
-        }
-      }
-    }
-  },
-  mounted () {
-  },
-  computed: {
-    // swiper () {
-    //   return this.$refs.mySwiper.$swiper
-    // },
-    // leftSwiper () {
-    //   return this.$refs.leftSwiper.$swiper
-    // },
-    rightSwiper () {
-      return this.$refs.rightSwiper.$swiper
-    }
-  },
-  methods: {
-    onNext () {
-      // this.swiper.slideNext();
-      // this.leftSwiper.slideNext()
-      this.rightSwiper.slideNext()
-    },
-    onPrev () {
-      // this.swiper.slidePrev();
-      // this.leftSwiper.slidePrev();
-      this.rightSwiper.slidePrev();
-    },
-    gotoDetail (num) {
-      let newpage = this.$router.resolve({
-        name: `detile${num}`,
-      });
-      window.open(newpage.href, '_blank');
-    },
-    prev () {
-      this.$refs.carousel.prev();
-    },
-    next () {
-      this.$refs.carousel.next();
-    }
-  }
-}
-</script>
-<style lang="less" scoped>
-.consult {
-  background: url("../images/consult_bg.png") no-repeat center;
-  background-size: cover;
-  background-position: top center;
-  background-attachment: fixed;
-  .mask {
-    padding: 101px 0 252px 0;
-    background-color: rgba(0, 0, 0, 0);
-    overflow: hidden;
-    height: 745px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    h2 {
-      height: 48px;
-      font-size: 34px;
-      font-family: PingFangSC-Medium, PingFang SC;
-      font-weight: 500;
-      color: #ffffff;
-      line-height: 48px;
-      margin-bottom: 78px;
-    }
-    .maskCore {
-      width: 960px;
-      position: relative;
-      .swiper-slide {
-        width: 369px;
-      }
-      .textItem {
-        width: 369px;
-        height: 414px;
-        background-color: #fff;
-        cursor: pointer;
-        .textWrap {
-          padding: 24px 24px 48px;
-          h4 {
-            width: 100%;
-            height: 25px;
-            font-size: 18px;
-            font-family: PingFangSC-Regular, PingFang SC;
-            font-weight: 600;
-            color: #1a1a1a;
-            line-height: 25px;
-            white-space: nowrap;
-            text-overflow: ellipsis;
-            margin-bottom: 24px;
-            overflow: hidden;
-          }
-          p {
-            text-align: left;
-            color: #808080;
-            line-height: 20px;
-            height: 63px;
-            font-size: 14px;
-            overflow: hidden;
-          }
-        }
-      }
-      .prev {
-        position: absolute;
-        width: 40px;
-        height: 40px;
-        background: url("../images/arrow.png") no-repeat center;
-        background-size: 40px 40px;
-        left: -115px;
-        top: 190px;
-        transform: rotate(180deg);
-        cursor: pointer;
-        &:hover {
-          background: url("../images/active-arrow.png") no-repeat center;
-          background-size: 40px 40px;
-        }
-      }
-      .next {
-        cursor: pointer;
-        position: absolute;
-        width: 40px;
-        height: 40px;
-        background: url("../images/arrow.png") no-repeat center;
-        background-size: 40px 40px;
-        right: -115px;
-        top: 190px;
-        &:hover {
-          background: url("../images/active-arrow.png") no-repeat center;
-          background-size: 40px 40px;
-        }
-      }
-    }
-  }
-}
-
-// .client-love-work {
-//   .swiper {
-//     max-width: 1200px;
-//     margin: 0 auto 40px;
-//     position: relative;
-//     .swiper-container {
-//       width: 369px;
-//       height: 414px;
-//       // border-radius: 8px;
-//       position: relative;
-//       z-index: 99;
-//       box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
-//     }
-//     .left-swiper,
-//     .right-swiper {
-//       position: absolute;
-//       z-index: 1;
-//       transform: scale(0.85);
-//       opacity: 0.7;
-//       .swiper-slide {
-//         .swiper-box {
-//           background: rgba(0, 0, 0, 0.7);
-//         }
-//       }
-//     }
-//     .left-swiper {
-//       left: 0;
-//       top: 0;
-//       // img {
-//       //     left: 0;
-//       // }
-//     }
-//     .right-swiper {
-//       top: 0;
-//       right: 0;
-//       // img {
-//       //     right: 0;
-//       // }
-//     }
-//   }
-//   .swiper-slide {
-//     position: relative;
-//     overflow: hidden;
-//     .swiper-box {
-//       position: absolute;
-//       top: 0;
-//       left: 0;
-//       width: 100%;
-//       height: 100%;
-//       text-align: center;
-//       background: rgba(0, 92, 185, 0.7);
-//     }
-//   }
-//   .swiper-button-prev,
-//   .swiper-button-next {
-//     cursor: pointer;
-//     position: absolute;
-//     width: 40px;
-//     height: 40px;
-//     background: url("../images/arrow.png") no-repeat center;
-//     background-size: 40px 40px;
-//     right: -115px;
-//     top: 190px;
-//     &:hover {
-//       background: url("../images/active-arrow.png") no-repeat center;
-//       background-size: 40px 40px;
-//     }
-//     &::after {
-//       content: "";
-//     }
-//   }
-//   .swiper-button-prev {
-//     left: -115px;
-//     top: 190px;
-//     transform: rotate(180deg);
-//   }
-// }
-</style>

src/views/index/blocks/detail.vue

@@ -1,98 +0,0 @@
-<template>
-  <div class="container">
-    <ol class="detail items width1200">
-      <h2>考生指引</h2>
-      <li>1.考前请确认下载“酷乐秀”最新版本APP</li>
-      <li>2.打开“酷乐秀”APP后需要允许“酷乐秀”APP使用手机权限</li>
-      <li>3.已通过H5链接报名的考生首次登录“酷乐秀”APP请使用短信验证码登录</li>
-      <li>4.请使用“网络检测”、“设备检测”功能确保您所使用的考试网络环境与手机设备处在能够完成直播考试的状态</li>
-      <li>5.考试当天请确保考试时保证网络通畅、手机不要开启其他应用，保证手机中有至少2G存储空间</li>
-      <li>6.考生需在考试当天通过“准考证”进入考场进行签到</li>
-      <li>7.进入考场后，点击【设备检查及考试引导】再次对网络、手机进行检测，并仔细阅读【考试引导】</li>
-      <li>8.签到完成后请仔细阅读【考试注意事项】，底部按钮会显示当前您还需要等待多少位考生和预计等待时间，请随时注意底部按钮的文字和颜色变化</li>
-      <li>9.当您的网络出现波动，影响直播考试时，评委会切换到下一位考生继续考试，您需要根据系统提示点击【确定】，再次进行设备检查及【考试引导】，确认网络状况正常后重新进行【签到】，重新排队等待考试</li>
-      <li>10.直播考试若网络状况较差时，评审会要求您使用【录播】完成考试，系统会提示您【当前状态无法正常完成在线直播考试，主考官建议您录播上传考试视频】，请根据提示点击【去录播】</li>
-      <li>11.进入录播界面后仔细阅读系统指引，在录播规定时间内完成视频录制并上传，点击【完成考试】后不可继续录制视频，请确认完成所有考级曲目录制后点击【完成考试】，考试结束</li>
-    </ol>
-    <div class="width1200">
-      <div class="otherWrap">
-        <a :href="src"
-           target="_blank">查看更多 ></a>
-      </div>
-
-    </div>
-
-  </div>
-</template>
-<script>
-
-export default {
-
-  data () {
-    return {
-      src: require('@/assets/matters.pdf'), // pdf文件地址
-    }
-  },
-  methods: {
-
-  }
-}
-</script>
-<style lang="less" scoped>
-.container {
-  background: url("../images/detail.png") no-repeat center;
-  background-size: cover;
-  background-attachment: fixed;
-  color: #fff;
-  height: 847px;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  .otherWrap {
-    width: 100%;
-    margin-top: 25px;
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    padding-left: 100px;
-    a {
-      // color: #2dc7aa;
-      color: #fff;
-      text-decoration: none;
-      &:hover {
-        // color: #25ab92;
-        color: #cecece;
-        text-decoration: underline;
-      }
-    }
-  }
-}
-.detail {
-  width: 1084px;
-  margin: 75px auto 0;
-
-  h2 {
-    text-align: center;
-    font-size: 34px;
-    line-height: 48px;
-    margin-bottom: 42px;
-    font-weight: 500;
-  }
-  &.items {
-    padding-left: 40px;
-    li {
-      display: block;
-      text-align: left;
-      font-size: 15px;
-      line-height: 34px;
-      margin-bottom: 20px;
-      text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.26);
-    }
-  }
-  a {
-    position: absolute;
-    left: 0;
-    bottom: 0;
-  }
-}
-</style>

src/views/index/blocks/helpList.vue

@@ -1,42 +1,50 @@
 <template>
   <div class="helpContainer">
-
     <h2 class="title"><span>学练考秀</span>助力学生成长</h2>
     <div class="wrapList">
-      <div class="helpItem">
+      <div class="helpItem" @mouseover="nohover(1)" @mouseleave="ishover(1)" @click="clickItem('1')">
         <div class="item left">
           <img src="../images/xue.png" alt="" />
         </div>
         <div class="item right">
-          <p class="itemTitle">随时随地在线学习 <span><img src="../images/arrow.png" alt=""></span></p>
-          <p class="subTitle">定制化网络课堂，真实反应学生演奏情况</p>
+          <p class="itemTitle">
+            随时随地云学习 <span><img :src="arrow1" alt="" /></span>
+          </p>
+          <p class="subTitle">定制化网络教室随时高保真开课，碎片化时间全利用</p>
         </div>
       </div>
-      <div class="helpItem">
+      <div class="helpItem" @mouseover="nohover(2)" @mouseleave="ishover(2)" @click="clickItem('2')">
         <div class="item left">
           <img src="../images/lian.png" alt="" />
         </div>
         <div class="item right">
-          <p class="itemTitle">自主产权器乐练习云教练 <span><img src="../images/arrow.png" alt=""></span></p>
-          <p class="subTitle">器乐练习云教练，学生爱练，家长放心</p>
+          <p class="itemTitle">
+            器乐练习云教练 <span><img :src="arrow2" alt="" /></span>
+          </p>
+          <p class="subTitle">客制化教材汇编多器乐指法展示，随练随出智能评测</p>
         </div>
       </div>
-      <div class="helpItem">
+      <div class="helpItem" @mouseover="nohover(3)" @mouseleave="ishover(3)"  @click="clickItem('3')">
         <div class="item left">
           <img src="../images/kao.png" alt="" />
         </div>
         <div class="item right">
-          <p class="itemTitle">开考提醒、考级成果即时可得 <span><img src="../images/arrow.png" alt=""></span></p>
-          <p class="subTitle">在线直播考级，省钱省力提高效率</p>
+          <p class="itemTitle">
+            首家直播云考场 <span><img :src="arrow3" alt="" /></span>
+          </p>
+          <p class="subTitle">无延迟考级考场省事省力效率高，考级成果即时可得</p>
         </div>
       </div>
-      <div class="helpItem">
+      <div class="helpItem" @mouseover="nohover(4)" @mouseleave="ishover(4)">
         <div class="item left">
           <img src="../images/xiu.png" alt="" />
         </div>
         <div class="item right">
-          <p class="itemTitle">展示自己，成就未来 <span><img src="../images/arrow.png" alt=""></span></p>
-          <p class="subTitle">学员秀场展示教学成果，机构学员双赢</p>
+          <p class="itemTitle">
+            学习成果云展示 <span></span>
+            <!-- <img :src="arrow4" alt="" /> -->
+          </p>
+          <p class="subTitle">每时每刻记录技能成长精彩蜕变，桃李天下春晖四方</p>
         </div>
       </div>
     </div>
@@ -45,7 +53,23 @@
 <script>
 export default {
   data() {
-    return {};
+    return {
+      arrow1: require("../images/arrow.png"),
+      arrow2: require("../images/arrow.png"),
+      arrow3: require("../images/arrow.png"),
+      arrow4: require("../images/arrow.png"),
+    };
+  },
+  methods: {
+    nohover(index) {
+      this[`arrow${index}`] = require("../images/active-arrow.png");
+    },
+    ishover(index) {
+      this[`arrow${index}`] = require("../images/arrow.png");
+    },
+    clickItem(num){
+      this.$emit('gotorecommend',num)
+    }
   },
 };
 </script>
@@ -125,10 +149,12 @@ export default {
           margin-top: 22px;
           font-size: 16px;
           color: #6a7388;
+          text-align: left;
         }
       }
       &:hover {
         box-shadow: 0px 1px 15px 0px rgba(211, 225, 223, 0.72);
+        border:1px solid #E8F7F4;
         position: relative;
         transform: translateY(-10px);
         transition: all 0.3s;

src/views/index/blocks/infos.vue

@@ -1,182 +0,0 @@
-<template>
-  <div class="container">
-    <div class="infos width1200">
-      <header class="headers">
-        <span @click="setActive(0)"
-              :class="{active: active === 0}">考级生命周期</span>
-        <span @click="setActive(1)"
-              :class="{active: active === 1}">生源拓展</span>
-        <span @click="setActive(2)"
-              :class="{active: active === 2}">高效管理</span>
-        <span @click="setActive(3)"
-              :class="{active: active === 3}">节省成本</span>
-        <span @click="setActive(4)"
-              :class="{active: active === 4}">零投入使用</span>
-      </header>
-      <div class="content">
-        <transition name="fade">
-          <template v-if="active === 0">
-            <div>
-              <p class="desc first">信息化赋能打造<strong>全流程线上考级模式</strong><br />随时随地保证用户数据安全，<strong>打破时间空间限制</strong>将考级生命周期完整呈现</p>
-              <lifecycle />
-            </div>
-          </template>
-        </transition>
-        <transition name="fade">
-          <template v-if="active === 1">
-            <div>
-              <p class="desc">招考<strong>不受地域限制</strong>，支持多层级代理单位，拓展生源</p>
-              <viewmap />
-            </div>
-          </template>
-        </transition>
-        <transition name="fade">
-          <template v-if="active === 2">
-            <div>
-              <p class="desc">考级全流程节点跟进，<strong>极大提升管理效率</strong></p>
-              <efficient />
-            </div>
-          </template>
-        </transition>
-        <transition name="fade">
-          <template v-if="active === 3">
-            <div>
-              <p class="desc">线上化招考流程极大<strong>节省考级成本</strong></p>
-              <safe />
-            </div>
-          </template>
-        </transition>
-        <transition name="fade">
-          <template v-if="active === 4">
-            <div>
-              <p class="desc"><strong>零投入</strong>，平台研发完善可立即使用</p>
-              <zero />
-            </div>
-          </template>
-        </transition>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import viewmap from '@/components/map'
-import lifecycle from '@/components/lifecycle'
-import safe from '@/components/safe'
-import efficient from '@/components/efficient'
-import zero from '@/components/zero'
-
-export default {
-  name: 'infos',
-  components: {
-    viewmap,
-    lifecycle,
-    safe,
-    efficient,
-    zero,
-  },
-  data () {
-    return {
-      active:  0
-    }
-  },
-  methods: {
-    setActive (index) {
-      this.active = index
-    }
-  }
-}
-</script>
-<style lang="less" scoped>
-.fade-enter {
-  visibility: hidden;
-  opacity: 0;
-}
-.fade-leave-to {
-  display: none;
-}
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.5s ease;
-}
-.fade-enter-to,
-.fade-leave {
-  visibility: visible;
-  opacity: 1;
-}
-.container {
-  height: 958px;
-  background-color: #f6f7f9;
-}
-.desc {
-  position: relative;
-  font-size: 16px;
-  line-height: 30px;
-  color: #696969;
-  display: inline-block;
-  margin: 50px 0;
-  > strong {
-    color: #2dc7aa;
-    font-weight: normal;
-  }
-  &.first::before {
-    left: 105px;
-  }
-  &::before {
-    top: -8px;
-    left: -25px;
-    position: absolute;
-    display: block;
-    content: "";
-    background: url("../images/icon.png") no-repeat center;
-    background-size: cover;
-    width: 40px;
-    height: 40px;
-  }
-}
-.infos {
-  min-height: 500px;
-  .headers {
-    display: flex;
-    justify-content: center;
-    padding: 20px 0;
-    padding-top: 50px;
-    border-bottom: 2px solid #eaeaea;
-    > span {
-      margin-left: 50px;
-      color: #242424;
-      cursor: pointer;
-      display: inline-block;
-      padding: 10px 15px;
-      text-decoration: none;
-      position: relative;
-      // display: block;
-      text-decoration: none;
-      text-transform: uppercase;
-      transition: 0.5s;
-      font-size: 18px;
-      &::after {
-        position: absolute;
-        content: "";
-        top: 145%;
-        left: 12%;
-        width: 80%;
-        height: 2px;
-        background-color: #2dc7aa;
-        z-index: 100;
-        transform: scaleX(0);
-        transform-origin: right;
-        transition: transform 0.5s;
-      }
-      &.active {
-        color: #2dc7aa;
-        &::after {
-          transform: scaleX(1);
-          transform-origin: left;
-        }
-      }
-    }
-  }
-  // .content {
-  // }
-}
-</style>

src/views/index/blocks/loginList.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="containers">
+    <h2 class="title">{{ title }}</h2>
+    <div class="formWrap">
+      <submitForm />
+    </div>
+  </div>
+</template>
+<script>
+import submitForm from "./submitForm";
+export default {
+  props: ["title"],
+  components: { submitForm },
+  data() {
+    return {};
+  },
+};
+</script>
+<style lang="less" scoped>
+.containers {
+  height: 620px;
+  background: url("../images/colourBG.png") no-repeat center;
+  background-size: cover;
+  padding-top: 60px;
+  .title {
+    margin-bottom: 60px;
+    font-size: 33px;
+    color: #000;
+  }
+  .formWrap {
+    width: 600px;
+    margin: 0 auto;
+  }
+}
+</style>

src/views/index/blocks/moreLoginList.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="container">
+    <h2>多端登录各司其职</h2>
+    <div class="imgList width1200">
+      <img src="../images/11.png" alt="" />
+      <img src="../images/22.png" alt="" />
+      <img src="../images/33.png" alt="" />
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {};
+  },
+};
+</script>
+<style lang="less" scoped>
+.container {
+  background: url("../images/moreLoinBg.png") no-repeat center;
+  background-size: cover;
+  background-attachment: fixed;
+  color: #fff;
+  height: 878px;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  h2 {
+    height: 64px;
+    font-size: 33px;
+    font-weight: 600;
+    color: #ffffff;
+    line-height: 64px;
+    margin: 60px 0;
+  }
+  .imgList {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    img {
+      width: 376px;
+      cursor: pointer;
+      &:hover {
+        transform: scale(1.05);
+        transition: .2s;
+      }
+    }
+  }
+}
+</style>

src/views/index/blocks/recommend.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="recommend">
-    <img class="bg" src="../images/helpBg.png" alt="" />
+    <!-- <img class="bg" src="../images/helpBg.png" alt="" /> -->
     <div class="recommendDetail width1200">
       <el-tabs v-model="activeName" stretch>
         <el-tab-pane label="器乐练习云教练" name="1">
@@ -97,6 +97,9 @@ export default {
 <style lang="less" scoped>
 .recommend {
   position: relative;
+  background-color: #f4f5f7;
+ padding-top: 40px;
+ padding-bottom: 30px;
   .bg {
     width: 100%;
     height: 830px;
@@ -126,9 +129,11 @@ export default {
     background-color: #01c1b5;
   }
   .recommendDetail {
-    position: absolute;
-    left: 50%;
-    margin-left: -590px;
+    // position: absolute;
+    // left: 50%;
+    // margin-left: -590px;
+
+
     top: 60px;
     .commendItem {
       margin-top: 60px;
@@ -155,7 +160,11 @@ export default {
         }
       }
       .commendItemRight {
-        width: 763px;
+        width: 589px;
+        height: 458px;
+        img {
+          width: 100%;
+        }
       }
     }
   }

src/views/index/blocks/submitForm.vue

@@ -0,0 +1,212 @@
+<template>
+  <div>
+    <el-form ref="form" :model="form" :rules="maskRules" :inline="true">
+      <el-form-item prop="name">
+        <el-input
+          v-model="form.name"
+          class="loginInput"
+          placeholder="机构名称"
+        ></el-input>
+      </el-form-item>
+      <br />
+      <el-form-item prop="city">
+        <el-input
+          v-model="form.city"
+          class="loginInput"
+          placeholder="城市"
+        ></el-input>
+      </el-form-item>
+      <br />
+      <el-form-item prop="linkman">
+        <el-input
+          v-model="form.linkman"
+          class="loginInput"
+          placeholder="联系人姓名"
+        ></el-input>
+      </el-form-item>
+      <br />
+      <el-form-item prop="mobileNo">
+        <el-input
+          v-model="form.mobileNo"
+          class="phoneInput"
+          placeholder="请输入手机号"
+        ></el-input>
+      </el-form-item>
+      <el-form-item prop="smsCode" class="codeWrap">
+        <el-input
+          v-model="form.smsCode"
+          class="phoneInput"
+          placeholder="请输入验证码"
+        ></el-input>
+        <div class="line"></div>
+        <div class="codeBox" @click="getCode">
+          {{ time > 0 ? `${time}秒` : "发送验证码" }}
+        </div>
+      </el-form-item>
+
+      <div class="submitBtn" @click="submitInfo">申请免费试用</div>
+    </el-form>
+  </div>
+</template>
+<script>
+import axios from "axios";
+import qs from "qs";
+export default {
+  data() {
+    return {
+      form: {
+        name: "",
+        city: "",
+        linkman: "",
+        mobileNo: "",
+        smsCode: "",
+      },
+      time: 0,
+      url: "https://kj.colexiu.com/",
+      maskRules: {
+        name: [{ required: true, message: "请输入机构名称" }],
+        city: [{ required: true, message: "请输入所在城市" }],
+        linkman: [{ required: true, message: "请输入联系人姓名" }],
+        mobileNo: [
+          { required: true, message: "请输入手机号" },
+          {
+            pattern: /^1[3456789]\d{9}$/,
+            message: "请输入正确的手机号",
+            trigger: "blur",
+          },
+        ],
+        smsCode: [{ required: true, message: "请输入验证码" }],
+      },
+    };
+  },
+  mounted() {},
+  methods: {
+    submitInfo() {
+      // let url = "https://test.kj.colexiu.com/";
+      // if (location.hostname == "colexiu.com") {
+      //   url = "https://kj.colexiu.com/";
+      // }
+      this.$refs["form"].validate((res) => {
+        if (res) {
+          axios({
+            url: this.url + "api-user/tenantApply/add",
+            method: "post",
+            data: qs.stringify(this.form),
+            headers: {
+              "Content-type": "application/x-www-form-urlencoded",
+              "Access-Control-Allow-Origin": "*",
+            },
+          }).then((res) => {
+            if (res.data.code === 200) {
+              this.$message.success("发送成功");
+            } else {
+              this.$message.error("发送失败");
+            }
+          });
+        }
+      });
+    },
+    getCode() {
+      console.log("获取验证码");
+      if (this.time > 0) {
+        return;
+      }
+      this.$refs["form"].validateField("mobileNo", (valid) => {
+        console.log("验证通过发起请求", valid);
+        if (!valid) {
+          axios({
+            url: this.url + "api-auth/code/sendSms",
+            method: "post",
+            data: { mobile: this.form.mobileNo },
+            headers: {
+              "Content-type": "application/x-www-form-urlencoded",
+              "Access-Control-Allow-Origin": "*",
+            },
+          }).then((res) => {
+            if (res.data.code == 200) {
+              this.$message.success("发送成功");
+              const timer = setInterval(() => {
+                if (this.time > 0) {
+                  this.time--;
+                } else {
+                  this.time = 0;
+                  clearInterval(timer);
+                }
+              }, 1000);
+            } else {
+              this.$message.error("发送失败");
+            }
+          });
+        }
+      });
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+/deep/.el-input__inner {
+  height: 50px;
+}
+.loginInput {
+  width: 585px;
+}
+.phoneInput {
+  width: 285px;
+}
+.codeWrap {
+  position: relative;
+}
+.codeBox {
+  width: 116px;
+  height: 46px;
+  background-color: #fff;
+  line-height: 46px;
+  position: absolute;
+  right: 1px;
+  top: 2px;
+  cursor: pointer;
+  color: #808080;
+  text-align: center;
+}
+.line {
+  position: absolute;
+  width: 1px;
+  background-color: #e5e5e5;
+  height: 15px;
+  // border: 1px solid #e5e5e5;
+  right: 118px;
+  top: 18px;
+}
+.submitBtn {
+  margin-top: 45px;
+  width: 420px;
+  height: 50px;
+  line-height: 50px;
+  border-radius: 25px;
+  background-color: #2dc7aa;
+  color: #fff;
+  position: relative;
+  left: 50%;
+  margin-left: -210px;
+}
+.el-form-item {
+  margin-bottom: 20px;
+  // border: 1px solid #e5e5e5;
+}
+/deep/input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
+/* WebKit browsers */
+color: #808080;
+}
+/deep/input:-moz-placeholder, textarea:-moz-placeholder {
+/* Mozilla Firefox 4 to 18 */
+color: #808080;
+}
+/deep/input::-moz-placeholder, textarea::-moz-placeholder {
+/* Mozilla Firefox 19+ */
+color: #808080;
+}
+/deep/input:-ms-input-placeholder, textarea:-ms-input-placeholder {
+/* Internet Explorer 10+ */
+color: #808080;
+}
+</style>