提交修改

1

package-lock.json

@@ -14,6 +14,21 @@
         "lodash": "^4.2.0"
       }
     },
+    "@babel/runtime": {
+      "version": "7.15.4",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.15.4.tgz",
+      "integrity": "sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==",
+      "requires": {
+        "regenerator-runtime": "^0.13.4"
+      },
+      "dependencies": {
+        "regenerator-runtime": {
+          "version": "0.13.9",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
+          "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
+        }
+      }
+    },
     "@babel/types": {
       "version": "7.0.0-beta.35",
       "resolved": "https://registry.npm.taobao.org/@babel/types/download/@babel/types-7.0.0-beta.35.tgz",
@@ -33,12 +48,35 @@
         }
       }
     },
+    "@popperjs/core": {
+      "version": "2.10.2",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.10.2.tgz",
+      "integrity": "sha512-IXf3XA7+XyN7CP9gGh/XB0UxVMlvARGEgGXLubFICsUMGz6Q+DU+i4gGlpOxTjKvXjkJDJC8YdqdKkDj9qZHEQ=="
+    },
     "@types/q": {
       "version": "1.5.4",
       "resolved": "https://registry.npm.taobao.org/@types/q/download/@types/q-1.5.4.tgz?cache=0&sync_timestamp=1596840197978&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40types%2Fq%2Fdownload%2F%40types%2Fq-1.5.4.tgz",
       "integrity": "sha1-FZJUFOCtLNdlv+9YhC9+JqesyyQ=",
       "dev": true
     },
+    "@vant/icons": {
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/@vant/icons/-/icons-1.7.1.tgz",
+      "integrity": "sha512-66LPEq89w4kl258nALZcRNd14eUJC8VajvTJwvZKOaZawz6CUeVZ6ybhedTUhQhRjeA8SyWD7dFt4ALf33Sabw=="
+    },
+    "@vant/popperjs": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@vant/popperjs/-/popperjs-1.1.0.tgz",
+      "integrity": "sha512-8MD1gz146awV/uPxYjz4pet22f7a9YVKqk7T+gFkWFwT9mEcrIUEg/xPrdOnWKLP9puXyYtm7oVfSDSefZ/p/w==",
+      "requires": {
+        "@popperjs/core": "^2.9.2"
+      }
+    },
+    "@vue/babel-helper-vue-jsx-merge-props": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.2.1.tgz",
+      "integrity": "sha512-QOi5OW45e2R20VygMSNhyQHvpdUwQZqGPc748JLGCYEy+yp8fNFNdbNIGAgZmi9e+2JHPd6i6idRuqivyicIkA=="
+    },
     "accepts": {
       "version": "1.3.7",
       "resolved": "https://registry.npm.taobao.org/accepts/download/accepts-1.3.7.tgz",
@@ -10911,6 +10949,18 @@
         "spdx-expression-parse": "^3.0.0"
       }
     },
+    "vant": {
+      "version": "2.12.30",
+      "resolved": "https://registry.npmjs.org/vant/-/vant-2.12.30.tgz",
+      "integrity": "sha512-kvbG+X5ZdHxjWELalsoIP0T+LMAZZ/5ITVdETsvrQAycvcPISNK+0eO0wT+kVRLfwBMEvuljWSJGOWisDObJRA==",
+      "requires": {
+        "@babel/runtime": "7.x",
+        "@vant/icons": "^1.7.1",
+        "@vant/popperjs": "^1.1.0",
+        "@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
+        "vue-lazyload": "1.2.3"
+      }
+    },
     "vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npm.taobao.org/vary/download/vary-1.1.2.tgz",
@@ -10967,6 +11017,11 @@
       "integrity": "sha1-UylVzB6yCKPZkLOp+acFdGV+CPI=",
       "dev": true
     },
+    "vue-lazyload": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/vue-lazyload/-/vue-lazyload-1.2.3.tgz",
+      "integrity": "sha512-DC0ZwxanbRhx79tlA3zY5OYJkH8FYp3WBAnAJbrcuoS8eye1P73rcgAZhyxFSPUluJUTelMB+i/+VkNU/qVm7g=="
+    },
     "vue-loader": {
       "version": "13.7.3",
       "resolved": "https://registry.npm.taobao.org/vue-loader/download/vue-loader-13.7.3.tgz?cache=0&sync_timestamp=1597130758101&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-loader%2Fdownload%2Fvue-loader-13.7.3.tgz",

package.json

@@ -19,6 +19,7 @@
     "plyr": "^3.6.2",
     "qs": "^6.9.4",
     "swiper": "^6.2.0",
+    "vant": "^2.12.30",
     "vue": "^2.5.2",
     "vue-awesome-swiper": "^4.1.1",
     "vue-count-to": "^1.0.13",

src/App.vue

@@ -1,22 +1,51 @@
 <template>
-  <div id="app">
-    <HeaderSection />
-    <router-view />
-    <FooterSection />
+  <div>
+    <div id="app" v-if="!isPhone">
+      <HeaderSection />
+      <router-view />
+      <FooterSection />
+    </div>
+    <div v-else>
+      <Mheader />
+      <router-view />
+      <Mfooter />
+    </div>
   </div>
 </template>
 
 <script>
-import HeaderSection from '@/components/headerSection'
-import FooterSection from '@/components/footerSection'
-import 'animate.css'
+import HeaderSection from "@/components/headerSection";
+import FooterSection from "@/components/footerSection";
+import Mheader from "@/components/Mheader";
+import Mfooter from "@/components/Mfooter";
+import { isMobile } from "@/util";
+import "animate.css";
 export default {
   components: {
     HeaderSection,
-    FooterSection
+    FooterSection,
+    Mheader,
+    Mfooter,
   },
-  name: 'App'
-}
+  name: "App",
+  data() {
+    return {};
+  },
+  mounted() {},
+  methods: {
+    // isMobile() {
+    //   let flag = navigator.userAgent.match(
+    //     /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
+    //   );
+    //   return flag;
+    // },
+  },
+  computed: {
+    isPhone() {
+      return isMobile();
+    },
+  },
+};
 </script>
 
 <style>
@@ -25,6 +54,20 @@ export default {
   padding: 0;
   margin: 0;
 }
+div {
+  -webkit-touch-callout: none; /* iOS Safari */
+
+  -webkit-user-select: none; /* Chrome/Safari/Opera */
+
+  -khtml-user-select: none; /* Konqueror */
+
+  -moz-user-select: none; /* Firefox */
+
+  -ms-user-select: none; /* Internet Explorer/Edge */
+
+  user-select: none; /* Non-prefixed version, currently
+not supported by any browser */
+}
 #app {
   font-family: "Avenir", Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;

src/components/Mfooter.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="footer">
+    <div class="footer-top">
+      <div class="left">
+        <h4>咨询热线</h4>
+        <p>400-8851569</p>
+        <p class="lefTtop">周一至周五 9:00~6:00</p>
+        <h4>友情链接</h4>
+        <p><span>大雅乐盟 </span> <span>key官网</span></p>
+      </div>
+      <div class="right">
+        <div class="codeItem" style="margin-right:.47rem;">
+          <img src="../assets/images/public-code.jpg" alt="" />
+          <p>关注公众号</p>
+        </div>
+        <div class="codeItem">
+          <img src="../assets/images/download.png" alt="" />
+          <p>下载App</p>
+        </div>
+      </div>
+    </div>
+    <div class="footer-bottom">
+      <p>Copyright © 2020 武汉市景明云乐网络科技有限公司</p>
+      <p>All Rights Reserved. 鄂ICP备20013567号-1</p>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {};
+  },
+};
+</script>
+<style lang="less" scoped>
+.footer {
+  background: #262d45;
+  .footer-top {
+    padding: 0.64rem 0.4rem 0.2rem;
+    background: #262d45;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    .left {
+      h4 {
+        height: 0.3rem;
+        font-size: 0.22rem;
+        color: #ffffff;
+        line-height: 0.3rem;
+        letter-spacing: 1px;
+        margin-bottom: 0.1rem;
+        font-weight: 400;
+      }
+      p {
+        color: #cecece;
+        line-height: 0.33rem;
+        letter-spacing: 1px;
+        font-size: 0.24rem;
+      }
+      .lefTtop {
+        margin-bottom: 0.35rem;
+      }
+    }
+    .right {
+      display: flex;
+      flex-direction: row;
+      .codeItem {
+        img {
+          width: 1.04rem;
+          height: 1.04rem;
+          display: block;
+          margin: 0 auto .2rem;
+        }
+      }
+      p {
+        height: .25rem;
+        font-size: .18rem;
+        color: #cecece;
+        line-height: .25rem;
+        letter-spacing: 1px;
+        text-align: center;
+      }
+    }
+  }
+  .footer-bottom {
+    border-top: 1px solid #585858;
+    height: 1rem;
+    padding: 0.14rem 0 0.21rem;
+    font-size: 0.18rem;
+    line-height: 0.32rem;
+    color: #cecece;
+    text-align: center;
+  }
+}
+</style>

src/components/Mheader.vue

@@ -0,0 +1,173 @@
+<template>
+  <div>
+    <van-nav-bar
+      :fixed="true"
+      :border="false"
+      class="headerSection"
+      :class="isTop ? '' : 'top'"
+    >
+      <template #left>
+        <router-link :to="{ path: '/index' }" class="logo">
+          <img src="../assets/images/logoWhile.png" width="100%" alt="" />
+        </router-link>
+      </template>
+      <template #right>
+        <div class="navRight">
+          <div class="bandBtn" @click="goKu">机构入驻</div>
+          <img
+            class="menu"
+            src="../assets/images/menu.png"
+            width="100%"
+            alt=""
+            @click="showPopup"
+          />
+        </div>
+      </template>
+    </van-nav-bar>
+    <van-popup
+      v-model="show"
+      closeable
+      close-icon-position="top-right"
+      position="right"
+      :style="{ width: '100%', height: '100%' }"
+      get-container="#app"
+    >
+      <div>
+        <div class="imgwrap">
+          <img src="../assets/images/logo.png" width="100%" alt="" />
+        </div>
+        <van-cell-group>
+          <van-cell title="产品服务" @click="goto('/index')" />
+          <van-cell title="成功案例" @click="goto('/project')" />
+          <van-cell title="关于我们" @click="goto('/aboutUs')" />
+        </van-cell-group>
+      </div>
+    </van-popup>
+    <van-popup
+      class="join"
+      v-model="joinIn"
+      closeable
+      close-icon-position="top-right"
+      position="bottom"
+      :style="{ height: '300px' }"
+      get-container="#app"
+    >
+      <div class="joinWrap">
+        <h2 class="joinTitle">机构入驻</h2>
+        <minForm @close='joinIn=false'/>
+      </div>
+    </van-popup>
+  </div>
+</template>
+<script>
+import minForm from "./minForm.vue";
+export default {
+  components: { minForm },
+  data() {
+    return {
+      isTop: false,
+      show: false,
+      joinIn: false,
+    };
+  },
+  mounted() {
+    window.addEventListener("scroll", (e) => {
+      //函数体
+      let scrollTop =
+        document.documentElement.scrollTop | document.body.scrollTop;
+      scrollTop > 0 ? (this.isTop = true) : (this.isTop = false);
+    });
+  },
+  beforeDestroy() {
+    window.removeEventListener("scroll", () => {});
+  },
+  methods: {
+    goKu() {
+      // window.open("https://kj.colexiu.com/#/login?returnUrl=%2F", "_blank");
+      this.joinIn = true;
+    },
+    showPopup() {
+      this.show = true;
+    },
+    goto(to) {
+      this.show = false;
+      this.$router.push(to);
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+/deep/.van-nav-bar__right:active {
+  opacity: 1;
+}
+/deep/.van-nav-bar__content {
+  height: 1.1rem;
+  align-items: center;
+}
+/deep/.van-popup__close-icon--top-right {
+  top: 0.38rem;
+}
+/deep/.van-nav-bar__left,
+/deep/.van-nav-bar__right {
+  padding: 0 0.4rem;
+}
+.join {
+  border-radius: 20px 20px 0px 0px;
+}
+.logo {
+  width: 1.8rem;
+  height: 0.54rem;
+}
+.imgwrap {
+  padding-left: 0.4rem;
+  img {
+    width: 1.8rem;
+    height: 0.54rem;
+  }
+}
+.headerSection.top {
+  background-color: transparent !important;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+}
+.headerSection {
+  background-color: rgba(0, 0, 0, 0.4);
+}
+.navRight {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  .bandBtn {
+    width: 1.56rem;
+    height: 0.53rem;
+    background: #2dc7aa;
+    border-radius: 27px;
+    line-height: 0.53rem;
+    color: #fff;
+    margin-right: 0.3rem;
+  }
+  .menu {
+    width: 0.4rem;
+    height: 0.3rem;
+  }
+}
+.joinWrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .joinTitle {
+    height: 0.64rem;
+    font-size: 0.38rem;
+    font-weight: 600;
+    color: #000000;
+    line-height: 0.64rem;
+    width: 100%;
+    text-align: center;
+    margin: .4rem 0 0;
+  }
+  .joinTitle {
+    color: #000;
+    font-weight: bold;
+  }
+}
+</style>

src/components/headerSection.vue

@@ -48,23 +48,17 @@ export default {
         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");
     });
   },
+  beforeDestroy(){
+ window.removeEventListener('scroll')
+  },
   methods: {
     getTop(nameList) {
       let arr = [];

src/components/minForm.vue

@@ -0,0 +1,265 @@
+<template>
+  <div>
+    <p class="errorP">{{ errorMsg }}</p>
+
+    <div class="imputWrap">
+      <input
+        class="minINput"
+        type="text"
+        v-model="form.name"
+        placeholder="机构名称"
+      />
+    </div>
+    <div class="imputWrap">
+      <input
+        class="minINput"
+        type="text"
+        v-model="form.city"
+        placeholder="所在城市"
+      />
+    </div>
+    <div class="imputWrap">
+      <input
+        class="minINput"
+        type="text"
+        v-model="form.linkman"
+        placeholder="联系人姓名"
+      />
+    </div>
+    <div class="halfBox">
+      <div class="imputWrap">
+        <input
+          class="minINput halfe"
+          type="text"
+          v-model="form.mobileNo"
+          placeholder="手机号码"
+        />
+      </div>
+      <div class="imputWrap">
+        <input class="minINput halfe" type="text" v-model="form.smsCode" />
+        <div class="line"></div>
+        <div class="codeBox" @click="getCode">
+          {{ time > 0 ? `${time}秒` : "发送验证码" }}
+        </div>
+      </div>
+    </div>
+    <div class="submitBtn" @click="submitInfo">申请免费试用</div>
+  </div>
+</template>
+<script>
+import axios from "axios";
+import qs from "qs";
+export default {
+  data() {
+    return {
+      errorMsg: "",
+      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: "请输入验证码" }],
+      },
+    };
+  },
+  methods: {
+    submitInfo() {
+      // let url = "https://test.kj.colexiu.com/";
+      // if (location.hostname == "colexiu.com") {
+      //   url = "https://kj.colexiu.com/";
+      // }
+      if (!this.validate()) {
+        return;
+      }
+      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.$toast("提交成功");
+          this.$emit('close')
+        } else {
+          this.$toast("提交失败");
+        }
+      });
+    },
+
+    getCode() {
+      console.log("获取验证码");
+      if (this.time > 0) {
+        return;
+      }
+
+      if (!this.form.mobileNo) {
+        this.errorMsg = "请输入手机号";
+        return false;
+      } else if (!this.form.mobileNo.match(/^1[3456789]\d{9}$/)) {
+        this.errorMsg = "请输入正确的手机号";
+        return false;
+      } else {
+        this.errorMsg = "";
+      }
+
+      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.$toast("发送成功");
+          const timer = setInterval(() => {
+            if (this.time > 0) {
+              this.time--;
+            } else {
+              this.time = 0;
+              clearInterval(timer);
+            }
+          }, 1000);
+        } else {
+          this.$toast("发送失败");
+        }
+      });
+    },
+    validate() {
+      if (!this.form.name) {
+        this.errorMsg = "请输入机构名称";
+        return false;
+      } else if (!this.form.city) {
+        this.errorMsg = "请输入所在城市";
+        return false;
+      } else if (!this.form.linkman) {
+        this.errorMsg = "请输入联系人姓名";
+        return false;
+      } else if (!this.form.mobileNo) {
+        this.errorMsg = "请输入手机号";
+        return false;
+      } else if (!this.form.mobileNo.match(/^1[3456789]\d{9}$/)) {
+        this.errorMsg = "请输入正确的手机号";
+        return false;
+      } else if (!this.form.smsCode) {
+        this.errorMsg = "请输入验证码";
+        return false;
+      } else {
+        this.errorMsg = "";
+        return true;
+      }
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+/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;
+}
+
+.errorP {
+  font-size: 0.26rem;
+  color: red;
+  text-align: center;
+}
+.halfBox {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+.imputWrap {
+  position: relative;
+  top: -0.3rem;
+  margin: 0;
+  padding: 0;
+  display: block;
+  margin-bottom: 0.18rem;
+  height: 0.78rem;
+  .halfe.minINput {
+    width: 3.3rem;
+  }
+  .minINput {
+    background-color: #fbfaff;
+    width: 6.7rem;
+    height: 0.77rem;
+    border: 1px solid #e5e5e5;
+    font-size: 0.26rem;
+    box-sizing: border-box;
+    padding-left: 0.25rem;
+    border-radius: 0.07rem;
+  }
+}
+.line {
+  position: absolute;
+  width: 1px;
+  height: 0.21rem;
+  background: #e5e5e5;
+  right: 1.82rem;
+  top: 0.7rem;
+  z-index: 10;
+}
+.codeBox {
+  width: 1.7rem;
+  height: 0.74rem;
+  background-color: #fbfaff;
+  line-height: 0.74rem;
+  position: absolute;
+  right: 1px;
+  top: 0.45rem;
+  cursor: pointer;
+  color: #808080;
+  text-align: center;
+  font-size: 0.24rem;
+  padding: 0 0.1rem;
+}
+.submitBtn {
+  width: 5.82rem;
+  height: 0.84rem;
+  border-radius: 0.42rem;
+  text-align: center;
+  color: #fff;
+  font-size: 0.28rem;
+  font-weight: bold;
+  background-color: #2dc7aa;
+  line-height: 0.84rem;
+  margin: 0.45rem auto 0;
+}
+</style>

src/components/submitForm.vue

@@ -1,9 +1,10 @@
 <template>
-  <div>
+  <div class="formWrap" :class="isMini ? 'mini' : ''">
     <el-form ref="form" :model="form" :rules="maskRules" :inline="true">
       <el-form-item prop="name">
         <el-input
           v-model="form.name"
+          :class="isMini ? 'mini' : ''"
           class="loginInput"
           placeholder="机构名称"
         ></el-input>
@@ -12,6 +13,7 @@
       <el-form-item prop="city">
         <el-input
           v-model="form.city"
+          :class="isMini ? 'mini' : ''"
           class="loginInput"
           placeholder="城市"
         ></el-input>
@@ -20,6 +22,7 @@
       <el-form-item prop="linkman">
         <el-input
           v-model="form.linkman"
+          :class="isMini ? 'mini' : ''"
           class="loginInput"
           placeholder="联系人姓名"
         ></el-input>
@@ -28,6 +31,7 @@
       <el-form-item prop="mobileNo">
         <el-input
           v-model="form.mobileNo"
+          :class="isMini ? 'mini' : ''"
           class="loginInput"
           placeholder="请输入手机号"
         ></el-input>
@@ -37,15 +41,18 @@
         <el-input
           v-model="form.smsCode"
           class="loginInput"
+          :class="isMini ? 'mini' : ''"
           placeholder="请输入验证码"
         ></el-input>
-        <div class="line"></div>
-        <div class="codeBox" @click="getCode">
+        <div class="line" :class="isMini ? 'mini' : ''"></div>
+        <div class="codeBox" @click="getCode" :class="isMini ? 'mini' : ''">
           {{ time > 0 ? `${time}秒` : "发送验证码" }}
         </div>
       </el-form-item>
 
-      <div class="submitBtn" @click="submitInfo">申请免费试用</div>
+      <div class="submitBtn" :class="isMini ? 'mini' : ''" @click="submitInfo">
+        申请免费试用
+      </div>
     </el-form>
   </div>
 </template>
@@ -53,6 +60,7 @@
 import axios from "axios";
 import qs from "qs";
 export default {
+  props: ["isMini"],
   data() {
     return {
       form: {
@@ -80,7 +88,8 @@ export default {
       },
     };
   },
-  mounted() {},
+  mounted() {
+  },
   methods: {
     submitInfo() {
       // let url = "https://test.kj.colexiu.com/";
@@ -145,6 +154,17 @@ export default {
 };
 </script>
 <style lang="less" scoped>
+.formWrap.mini{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.loginInput.mini {
+  width: 6.7rem;
+}
+.phoneInput.mini {
+  width: 3.3rem;
+}
 .loginInput {
   width: 370px;
 }

src/main.js

@@ -6,6 +6,13 @@ import router from './router'
 import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
 import VueAwesomeSwiper from 'vue-awesome-swiper'
+import Vant from 'vant';
+import 'vant/lib/index.css';
+import {
+  isMobile
+} from "@/util"
+
+Vue.use(Vant);
 
 
 Vue.use(ElementUI);
@@ -15,10 +22,35 @@ Vue.config.productionTip = false
 new Vue({
   el: '#app',
   router,
-  components: { App },
+  components: {
+    App
+  },
   template: '<App/>'
 })
 
-router.afterEach((to,from,next)=>{
-  window.scrollTo(0,0)
+router.afterEach((to, from, next) => {
+  window.scrollTo(0, 0)
 })
+
+if (isMobile()) {
+  console.log('H5调用')
+  const setHtmlFontSize = () => {
+    const htmlDom = document.getElementsByTagName('html')[0];
+    let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
+    if (htmlWidth >= 750) {
+      htmlWidth = 750;
+    }
+    if (htmlWidth <= 320) {
+      htmlWidth = 320;
+    }
+    htmlDom.style.fontSize = `${htmlWidth / 7.5}px`;
+  };
+  window.onresize = setHtmlFontSize;
+  setHtmlFontSize();
+}
+
+
+const originalPush = router.prototype.push;
+router.prototype.push = function push(location) {
+   return originalPush.call(this, location).catch(err => err)
+}

src/router/index.js

@@ -12,7 +12,7 @@ export default new Router({
     {
       path: '/',
       name: 'Index',
-      redirect: '/index',
+      redirect:'/index',
       component: Index
     },
     {
@@ -32,3 +32,9 @@ export default new Router({
     },
   ]
 })
+
+const originalPush = Router.prototype.push
+Router.prototype.push = function push(location) {
+   return originalPush.call(this, location).catch(err => err)
+}
+

src/util/index.js

@@ -0,0 +1,6 @@
+export const isMobile=()=> {
+  let flag = navigator.userAgent.match(
+    /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
+  );
+  return flag;
+}

src/views/aboutUs/index.vue

@@ -42,18 +42,18 @@
             <p class="title">
               <count-to :endVal="10" :decimals="0" :class="'num'" />万+
             </p>
-            <p class="subTitle">10w注册用户的信赖之选</p>
+            <p class="subTitle">10w在读学员的信赖之选</p>
             <p class="concat">
-              团队所研发的软件产品经历10万多注册学员的使用与赞赏，陪伴学员从入门到精通的乐器学习之路，为学员带来极佳的学习体验。
+              团队所研发的软件产品经历10万多在读学员的使用与赞赏，陪伴学员从入门到精通的乐器学习之路，为学员带来极佳的学习体验。
             </p>
           </div>
           <div class="chioseItem">
             <p class="title">
-              <count-to :endVal="60" :decimals="0" :class="'num'" />万+
+              <count-to :endVal="300" :decimals="0" :class="'num'" />万+
             </p>
             <p class="subTitle">在线直播课堂经验</p>
             <p class="concat">
-              专属器乐教学的线上课堂经历过60多万节线上课程的验证，独创的音乐模式课堂深受老师与学员好评。
+              专属器乐教学的线上课堂经历过300多万节线上课程的验证，独创的音乐模式课堂深受老师与学员好评。
             </p>
           </div>
         </div>

src/views/index/index.vue

@@ -1,12 +1,16 @@
 <template>
-  <div class="container">
-    <banner id='banner' />
-    <helpList id='helpList' @gotorecommend="gotorecommend"/>
-    <recommend id='recommend' ref='recommend'/>
-    <moreLoginList id='moreLoginList'/>
-    <loginList id='loginList' :title="'了解更多'"/>
-    <silder :showForm='showForm'
-            @changeStatus='changeStatus' />
+  <div >
+    <div class="container" v-if="!isPhone">
+      <banner id="banner" />
+      <helpList id="helpList" @gotorecommend="gotorecommend" />
+      <recommend id="recommend" ref="recommend" />
+      <moreLoginList id="moreLoginList" />
+      <loginList id="loginList" :title="'了解更多'" />
+      <silder :showForm="showForm" @changeStatus="changeStatus" />
+    </div>
+    <div v-else>
+      <minIndex />
+    </div>
   </div>
 </template>
 <style lang="less" scoped>
@@ -15,40 +19,45 @@
 }
 </style>
 <script>
-import helpList from './blocks/helpList.vue'
-import banner from './blocks/banner'
-import recommend from './blocks/recommend'
-import moreLoginList from './blocks/moreLoginList'
-import loginList from './blocks/loginList.vue'
-import silder from '@/components/silder.vue'
+import { isMobile } from "@/util";
+import helpList from "./blocks/helpList.vue";
+import banner from "./blocks/banner";
+import recommend from "./blocks/recommend";
+import moreLoginList from "./blocks/moreLoginList";
+import loginList from "./blocks/loginList.vue";
+import silder from "@/components/silder.vue";
+import minIndex from "./minIndex"
 export default {
-  name: 'indexpage',
+  name: "indexpage",
   components: {
     banner,
     silder,
     helpList,
     recommend,
     moreLoginList,
-    loginList
+    loginList,
+    minIndex
   },
-  data () {
+  data() {
     return {
-      showForm: false
-    }
+      showForm: false,
+    };
   },
   methods: {
-    changeStatus (val) {
-      console.log(val)
+    changeStatus(val) {
+      console.log(val);
       this.showForm = val;
     },
-    gotorecommend(num){
-
-      document.getElementById('recommend').scrollIntoView()
-      this.$refs.recommend.activeName = num
-      console.log( )
-
-
-    }
-  }
-}
+    gotorecommend(num) {
+      document.getElementById("recommend").scrollIntoView();
+      this.$refs.recommend.activeName = num;
+      console.log();
+    },
+  },
+  computed: {
+    isPhone() {
+      return isMobile();
+    },
+  },
+};
 </script>

src/views/index/minIndex.vue

@@ -0,0 +1,221 @@
+<template>
+  <div>
+    <div class="banner">
+      <img src="./images/minBanner.png" alt="" />
+    </div>
+    <div class="helpList">
+      <h2>学练考秀<span>助力学生成长</span></h2>
+      <div class="helpWrapList">
+        <div class="helpItem">
+          <img src="./images/xue.png" alt="" />
+          <p class="subTitle">随时随地在线学习</p>
+          <p class="concat">定制化网络课堂，真实反应学生演奏情况</p>
+        </div>
+        <div class="helpItem">
+          <img src="./images/kao.png" alt="" />
+          <p class="subTitle">首家直播云考场</p>
+          <p class="concat">无延迟考级考场省事省力效率高，考级成果即时可得</p>
+        </div>
+        <div class="helpItem">
+          <img src="./images/lian.png" alt="" />
+          <p class="subTitle">器乐练习云教练</p>
+          <p class="concat">客制化教材汇编多器乐指法展示，随练随出智能评测</p>
+        </div>
+        <div class="helpItem">
+          <img src="./images/xiu.png" alt="" />
+          <p class="subTitle">学习成果云展示</p>
+          <p class="concat">每时每刻记录技能成长精彩蜕变，桃李天下春晖四方</p>
+        </div>
+      </div>
+    </div>
+    <div class="cloundList">
+      <swiper ref="oneSwiper" class="swiper" :options="swiperOptions">
+        <swiper-slide class="swiper-slide">
+          <div class="cloundItem">
+            <h4>器乐练习云教练</h4>
+            <img src="./images/commendItem1.png" alt="" />
+            <p class="concat">
+              你在练什么乐器？你是否经常吹不清楚，拉不流畅，弹不连贯？答案肯定很不乐观，这是器乐学习者的通病，初学者入门阶段大量存在。也许这一时期手生技疏情有可原，但如果一首乐曲练了很长一段时间毛病依然如故，那就非得好好找出原因来了。
+            </p>
+          </div>
+        </swiper-slide>
+        <swiper-slide class="swiper-slide">
+          <div class="cloundItem">
+            <h4>器乐直播云教室</h4>
+            <img src="./images/commendItem2.png" alt="" />
+            <p class="concat">
+              全国首家线教学场景，高保真技术，智能降噪音质高度还原。白板互动教学，内置白板书写工具；自有教学资源共享教学，本地曲谱上传，能够为学员提供线下教学体验不到的便利。
+            </p>
+          </div>
+        </swiper-slide>
+        <swiper-slide class="swiper-slide">
+          <div class="cloundItem">
+            <h4>器乐直播云考场</h4>
+            <img src="./images/commendItem3.png" alt="" />
+            <p class="concat">
+              器乐考级监考评分一体化平台，线上考级全流程覆盖，信息化赋能打造全流程线上考级模式。随时随地保证用户数据安全，打破时间空间限制将考级生命周期（招考-排考-考核-统计-制证-结算）完整呈现。
+            </p>
+          </div>
+        </swiper-slide>
+        <swiper-slide class="swiper-slide">
+          <div class="cloundItem">
+            <h4>客制化教材汇编</h4>
+            <img src="./images/commendItem4.png" alt="" />
+            <p class="concat">
+              客制化各机构的教学教案，汇编成电子文本教材
+              ，多媒体教材，音视频动态指法联动展示。提高机构教学质量，增强教学特色；
+            </p>
+          </div>
+        </swiper-slide>
+        <swiper-slide class="swiper-slide">
+          <div class="cloundItem">
+            <h4>全闭环网校平台</h4>
+            <img src="./images/commendItem5.png" alt="" />
+            <p class="concat">
+              为器乐教学机构打造保护私域流量的独立网校平台，覆盖前端招生、课前、授课、课后服务等全流程管理，能够极大地提升运营及管理的效率以及服务质量；总览招生、教务、财务、员工概况及变化趋势，多维度衡量招生情况、续费率，精准统计课时及学费消耗，实时了解机构日常经营情况；
+            </p>
+          </div>
+        </swiper-slide>
+        <swiper-slide class="swiper-slide">
+          <div class="cloundItem">
+            <h4>全流程教务管理</h4>
+            <img src="./images/commendItem6.png" alt="" />
+            <p class="concat">
+              学员到期、欠费、剩余课时等信息一目了然.智能检测排课冲突，自动生成对应课程表.即时通讯自动生成群组
+              ，实时跟进教学进度，促进回款转化。
+            </p>
+          </div>
+        </swiper-slide>
+
+        <div class="swiper-pagination" slot="pagination"></div>
+      </swiper>
+    </div>
+  </div>
+</template>
+<script>
+import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
+import Swiper2, { Navigation, Pagination } from "swiper";
+Swiper2.use([Navigation, Pagination]);
+// import 'swiper/swiper.scss'
+import "swiper/swiper-bundle.css";
+// import 'swiper/css/swiper.css'
+export default {
+  components: {
+    Swiper,
+    SwiperSlide,
+  },
+  directives: {
+    swiper: directive,
+  },
+  data() {
+    return {
+      swiperOptions: {
+        pagination: {
+          el: ".swiper-pagination",
+        },
+        loop: true,
+        autoplay: {
+          disableOnInteraction: true,
+          delay: 1000,
+        },
+      },
+    };
+  },
+  mounted() {},
+  computed: {
+    swiper() {
+      return this.$refs.oneSwiper.$swiper;
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+/deep/.swiper-pagination-bullet-active {
+  background-color: #2dc7aa;
+}
+img {
+  display: block;
+}
+.banner {
+  img {
+    width: 100%;
+    display: block;
+  }
+}
+.helpList {
+  background-color: #fff;
+  padding: 0 0.4rem;
+  h2 {
+    text-align: center;
+    color: #000;
+    font-size: 0.38rem;
+    font-weight: bold;
+    margin: 0.5rem auto;
+    span {
+      font-weight: 400;
+    }
+  }
+  .helpWrapList {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    margin-bottom: 0.73rem;
+    .helpItem {
+      padding: 0.25rem 0.25rem 0;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      width: 3.24rem;
+      height: 3.28rem;
+      background: #ffffff;
+      border-radius: 0.04rem;
+      border: 1px solid #dfdfdf;
+      filter: blur(0px);
+      margin-bottom: 0.25rem;
+      img {
+        width: 0.7rem;
+        height: 0.98rem;
+      }
+      .subTitle {
+        font-weight: 500;
+        color: #000000;
+        line-height: 0.42rem;
+        font-size: 0.3rem;
+        margin: 0.2rem 0;
+      }
+      .concat {
+        font-size: 0.22rem;
+        font-weight: 400;
+        color: #6a7388;
+        line-height: 0.36rem;
+      }
+    }
+  }
+}
+.cloundList {
+  background-color: #f4f5f7;
+  .cloundItem {
+    padding: 0.5rem;
+    h4 {
+      width: 100%;
+      font-size: 0.38rem;
+      font-weight: 600;
+      color: #000000;
+      line-height: 53px;
+      text-align: center;
+    }
+    img {
+      width: 6.5rem;
+      height: 5rem;
+      margin: 0 auto;
+    }
+    .concat {
+      font-size: 0.22rem;
+      font-weight: 400;
+      color: #6a7388;
+      line-height: 0.42rem;
+    }
+  }
+}
+</style>