提交勇哥优化

1

src/views/aboutUs/minAboutus.vue

@@ -164,7 +164,7 @@ img {
 
 .aboutShow {
   background: #2c454c;
-  padding: 0.5rem 0.4rem 0.4rem;
+  padding: 0.5rem 0.4rem 0.6rem;
   .showImg {
     width: 100%;
     margin-bottom: 0.45rem;

src/views/index/blocks/minMoreLogin.vue

@@ -1,5 +1,5 @@
 <template>
-  <swiper ref="oneSwiper" class="swiper" :options="swiperOptions">
+  <swiper ref="oneSwiper" class="swiper minMoreLogins" :options="swiperOptions">
     <swiper-slide class="swiper-slide">
       <div class="minMoreLogin">
         <h2>多端登录各司其职</h2>
@@ -77,9 +77,14 @@ export default {
 };
 </script>
 <style lang="less" scoped>
+.minMoreLogins {
+  /deep/.swiper-pagination-bullets {
+    bottom: 0.36rem;
+  }
+}
 .minMoreLogin {
   background-color: #2d6b78;
-  padding: 0.5rem 0.66rem 1.13rem;
+  padding: 0.5rem 0.66rem 1.5rem;
   h2 {
     height: 0.64rem;
     font-size: 0.38rem;

src/views/index/blocks/recommend.vue

@@ -3,7 +3,6 @@
     <!-- <img class="bg" src="../images/helpBg.png" alt="" /> -->
     <div class="recommendDetail width1200">
       <el-tabs v-model="activeName" stretch>
-
         <el-tab-pane label="器乐直播云教室" name="1">
           <div class="commendItem">
             <div class="commendItemLeft animate__animated animate__slideInLeft">
@@ -19,8 +18,8 @@
             </div>
           </div>
         </el-tab-pane>
-                <el-tab-pane label="器乐练习云教练" name="2">
-          <div class="commendItem" >
+        <el-tab-pane label="器乐练习云教练" name="2">
+          <div class="commendItem">
             <div class="commendItemLeft animate__animated animate__slideInLeft">
               <h4 class="commendTitle">
                 器乐练习云教练
@@ -67,7 +66,7 @@
               <h4 class="commendTitle">客制化教材汇编</h4>
               <p>
                 客制化各机构的教学教案，汇编成电子文本教材
-                ，多媒体教材，音视频动态指法联动展示。提高机构教学质量，增强教学特色；
+                ，多媒体教材，音视频动态指法联动展示。提高机构教学质量，增强教学特色。
               </p>
             </div>
             <div
@@ -82,7 +81,7 @@
             <div class="commendItemLeft animate__animated animate__slideInLeft">
               <h4 class="commendTitle">全闭环网校平台</h4>
               <p>
-                为器乐教学机构打造保护私域流量的独立网校平台，覆盖前端招生、课前、授课、课后服务等全流程管理，能够极大地提升运营及管理的效率以及服务质量；总览招生、教务、财务、员工概况及变化趋势，多维度衡量招生情况、续费率，精准统计课时及学费消耗，实时了解机构日常经营情况；
+                为器乐教学机构打造保护私域流量的独立网校平台，覆盖前端招生、课前、授课、课后服务等全流程管理，能够极大地提升运营及管理的效率以及服务质量；总览招生、教务、财务、员工概况及变化趋势，多维度衡量招生情况、续费率，精准统计课时及学费消耗，实时了解机构日常经营情况。
               </p>
             </div>
             <div
@@ -112,7 +111,16 @@
     </div>
 
     <div class="fiedxVideoWrap" v-if="dialogVisible">
-      <van-icon name="cross" size="30" class='close-i' @click="()=>{ dialogVisible=false}"/>
+      <van-icon
+        name="cross"
+        size="30"
+        class="close-i"
+        @click="
+          () => {
+            dialogVisible = false;
+          }
+        "
+      />
 
       <video
         poster="../images/videoBG.png"
@@ -134,6 +142,7 @@ export default {
       dialogVisible: false,
     };
   },
+
   methods: {
     gotoXiu() {
       //
@@ -191,7 +200,7 @@ export default {
     position: fixed;
     width: 800px;
     height: 450px;
-    top:50%;
+    top: 50%;
     left: 50%;
     margin-top: -225px;
     margin-left: -400px;
@@ -201,10 +210,10 @@ export default {
       position: absolute;
       right: 12px;
       top: 12px;
-       z-index: 2501;
-       &:hover {
-         opacity: .8;
-       }
+      z-index: 2501;
+      &:hover {
+        opacity: 0.8;
+      }
     }
   }
   .video {
@@ -223,7 +232,6 @@ export default {
       justify-content: space-between;
       align-items: center;
 
-
       .commendItemLeft {
         width: 492px;
         text-align: left;
@@ -242,7 +250,7 @@ export default {
             margin-left: 10px;
             cursor: pointer;
             &:hover {
-                  opacity: .8;
+              opacity: 0.8;
             }
           }
         }
@@ -257,8 +265,8 @@ export default {
           margin-top: 20px;
           cursor: pointer;
           font-size: 15px;
-          &:hover{
-            opacity: .8;
+          &:hover {
+            opacity: 0.8;
           }
         }
       }

src/views/index/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div >
+  <div>
     <div class="container" v-if="!isPhone">
       <banner id="banner" />
       <helpList id="helpList" @gotorecommend="gotorecommend" />
@@ -9,7 +9,7 @@
       <!-- <silder :showForm="showForm" @changeStatus="changeStatus" /> -->
     </div>
     <div v-else>
-      <minIndex />
+      <minIndex ref="minIndex"/>
     </div>
   </div>
 </template>
@@ -19,7 +19,6 @@
 }
 </style>
 <script>
-
 import { isMobile } from "@/util";
 import helpList from "./blocks/helpList.vue";
 import banner from "./blocks/banner";
@@ -27,7 +26,8 @@ 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"
+import minIndex from "./minIndex";
+let that;
 export default {
   name: "indexpage",
   components: {
@@ -37,16 +37,27 @@ export default {
     recommend,
     moreLoginList,
     loginList,
-    minIndex
+    minIndex,
   },
   data() {
     return {
       showForm: false,
     };
   },
-  mounted(){
-    console.log(this.$router)
+  created() {
+    that = this;
+  },
+  beforeRouteEnter(to, from, next) {
+    next((vm) => {
+      if (from.name == "level" && vm.$refs.recommend) {
+        vm.$refs.recommend.activeName = "3";
+      }
+       if (from.name == "level" && vm.$refs.minIndex) {
+        vm.$refs.minIndex.gotoDetail(3);
+      }
+    });
   },
+
   methods: {
     changeStatus(val) {
       console.log(val);

src/views/index/minIndex.vue

@@ -6,21 +6,21 @@
     <div class="helpList">
       <h2>学练考秀<span>助力学生成长</span></h2>
       <div class="helpWrapList">
-        <div class="helpItem">
+        <div class="helpItem" @click="gotoDetail(1)">
           <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">
+        <div class="helpItem" @click="gotoDetail(2)">
           <img src="./images/lian.png" alt="" />
           <p class="subTitle">器乐练习云教练</p>
           <p class="concat">客制化教材汇编多器乐指法展示，随练随出智能评测</p>
         </div>
+        <div class="helpItem" @click="gotoDetail(3)">
+          <img src="./images/kao.png" alt="" />
+          <p class="subTitle">首家直播云考场</p>
+          <p class="concat">无延迟考级考场省事省力效率高，考级成果即时可得</p>
+        </div>
         <div class="helpItem">
           <img src="./images/xiu.png" alt="" />
           <p class="subTitle">学习成果云展示</p>
@@ -28,42 +28,46 @@
         </div>
       </div>
     </div>
-    <div class="cloundList">
+    <div class="cloundList" id="cloundList">
       <swiper ref="oneSwiper" class="swiper" :options="swiperOptions">
         <swiper-slide class="swiper-slide">
-          <div class="cloundItem" @click="openVideo">
-            <h4>
-              器乐练习云教练
-              <img class="player" src="./images/player.png" alt="" />
-            </h4>
-            <img src="./images/commendItem1.png" alt="" />
+          <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/commendItem2.png" alt="" />
+            <h4>
+              器乐练习云教练
+              <!-- <img class="player" src="./images/player.png" alt="" /> -->
+            </h4>
+            <img src="./images/commendItem1.png" alt="" />
             <p class="concat">
-              全国首家线教学场景，高保真技术，智能降噪音质高度还原。白板互动教学，内置白板书写工具；自有教学资源共享教学，本地曲谱上传，能够为学员提供线下教学体验不到的便利。
+              你在练什么乐器？你是否经常吹不清楚，拉不流畅，弹不连贯？答案肯定很不乐观，这是器乐学习者的通病，初学者入门阶段大量存在。也许这一时期手生技疏情有可原，但如果一首乐曲练了很长一段时间毛病依然如故，那就非得好好找出原因来了。
             </p>
+            <p class="lookMore" @click="openVideo">查看视频 >></p>
           </div>
         </swiper-slide>
+
         <swiper-slide class="swiper-slide">
-          <div class="cloundItem" @click="gotoXiu">
+          <div class="cloundItem">
             <h4>
-              器乐直播云考场<img
+              器乐直播云考场
+              <!-- <img
                 class="player"
                 src="./images/arrow2.png"
                 alt=""
-              />
+              /> -->
             </h4>
             <img src="./images/commendItem3.png" alt="" />
             <p class="concat">
               器乐考级监考评分一体化平台，线上考级全流程覆盖，信息化赋能打造全流程线上考级模式。随时随地保证用户数据安全，打破时间空间限制将考级生命周期（招考-排考-考核-统计-制证-结算）完整呈现。
             </p>
+            <p class="lookMore" @click="gotoXiu">云考场详情 >></p>
           </div>
         </swiper-slide>
         <swiper-slide class="swiper-slide">
@@ -72,7 +76,7 @@
             <img src="./images/commendItem4.png" alt="" />
             <p class="concat">
               客制化各机构的教学教案，汇编成电子文本教材
-              ，多媒体教材，音视频动态指法联动展示。提高机构教学质量，增强教学特色；
+              ，多媒体教材，音视频动态指法联动展示。提高机构教学质量，增强教学特色。
             </p>
           </div>
         </swiper-slide>
@@ -81,7 +85,7 @@
             <h4>全闭环网校平台</h4>
             <img src="./images/commendItem5.png" alt="" />
             <p class="concat">
-              为器乐教学机构打造保护私域流量的独立网校平台，覆盖前端招生、课前、授课、课后服务等全流程管理，能够极大地提升运营及管理的效率以及服务质量；总览招生、教务、财务、员工概况及变化趋势，多维度衡量招生情况、续费率，精准统计课时及学费消耗，实时了解机构日常经营情况；
+              为器乐教学机构打造保护私域流量的独立网校平台，覆盖前端招生、课前、授课、课后服务等全流程管理，能够极大地提升运营及管理的效率以及服务质量；总览招生、教务、财务、员工概况及变化趋势，多维度衡量招生情况、续费率，精准统计课时及学费消耗，实时了解机构日常经营情况。
             </p>
           </div>
         </swiper-slide>
@@ -140,6 +144,7 @@ Swiper2.use([Navigation, Pagination]);
 import "swiper/swiper-bundle.css";
 import minMoreLogin from "./blocks/minMoreLogin";
 import minForm from "@/components/minForm";
+import { scrollAnimation } from "@/util/scroll";
 export default {
   components: {
     Swiper,
@@ -175,6 +180,18 @@ export default {
     openVideo() {
       this.showVideo = true;
     },
+    gotoDetail(index) {
+      // Bus.$emit('gotoDetail')
+      let url = this.$route.path;
+      let tops = document.querySelector(".headerSection").offsetHeight;
+      let top = document.getElementById("cloundList").offsetTop - tops;
+      const currentY =
+        document.documentElement.scrollTop || document.body.scrollTop;
+      scrollAnimation(currentY, top);
+      // 控制swiper到指定位置
+      this.$refs.oneSwiper.$swiper.slideTo(index, 1000, true);
+      // scrollTo(0, top);
+    },
   },
   computed: {
     swiper() {
@@ -184,6 +201,15 @@ export default {
 };
 </script>
 <style lang="less" scoped>
+.cloundList {
+  /deep/.swiper-pagination {
+    z-index: 0;
+  }
+  /deep/.swiper-pagination-bullets{
+    bottom:.36rem;
+  }
+}
+
 /deep/.swiper-pagination-bullet-active.swiper-pagination-bullet {
   background-color: #2dc7aa !important;
 }
@@ -273,7 +299,7 @@ img {
 .cloundList {
   background-color: #f4f5f7;
   .cloundItem {
-    padding: 0.5rem 0.5rem 0.8rem;
+    padding: 0.5rem 0.5rem 1rem;
     h4 {
       width: 100%;
       font-size: 0.38rem;
@@ -305,6 +331,18 @@ img {
       color: #6a7388;
       line-height: 0.42rem;
     }
+    .lookMore {
+      color: #2dc7aa;
+      margin-top: 0.2rem;
+      cursor: pointer;
+      font-size: 0.24rem;
+      position: relative;
+      z-index: 11;
+
+      &:active {
+        opacity: 0.8;
+      }
+    }
   }
 }
 .moreInfo {

src/views/level/blocks/minDetail.vue

@@ -64,7 +64,7 @@ export default {
     overflow: scroll;
     padding-bottom: 0.2rem;
     li {
-      margin-bottom: 0.46rem;
+      margin-bottom: 0.3rem;
       font-size: 0.22rem;
       line-height: 0.42rem;
       text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.26);

src/views/level/blocks/showApp.vue

@@ -11,7 +11,7 @@
             <video
               class="videoH"
               src="@/assets/video/student-remind.mp4"
-                poster="@/assets/video/student-remind.jpg"
+              poster="@/assets/video/student-remind.jpg"
               controls
             ></video>
           </div>
@@ -27,7 +27,7 @@
             <video
               class="videoH"
               src="@/assets/video/text.mp4"
-                poster="@/assets/video/student-remind.jpg"
+              poster="@/assets/video/student-remind.jpg"
               controls
             ></video>
           </div>
@@ -42,7 +42,7 @@
           <div class="cloundItem">
             <video
               class="videoH"
-               poster="@/assets/video/replay.jpg"
+              poster="@/assets/video/replay.jpg"
               src="@/assets/video/replay.mp4"
               controls
             ></video>
@@ -58,14 +58,14 @@
           <div class="cloundItem">
             <video
               class="videoH"
-                poster="@/assets/video/onlineText.jpg"
+              poster="@/assets/video/onlineText.jpg"
               src="@/assets/video/onlineText.mp4"
               controls
             ></video>
           </div>
         </div>
       </swiper-slide>
-            <swiper-slide class="swiper-slide">
+      <swiper-slide class="swiper-slide">
         <div class="appItem">
           <p class="msg">
             <span>结果查询：</span>
@@ -73,7 +73,7 @@
           </p>
           <div class="cloundItem">
             <video
-            poster="@/assets/video/query.jpg"
+              poster="@/assets/video/query.jpg"
               class="videoH"
               src="@/assets/video/query.mp4"
               controls
@@ -109,6 +109,11 @@ export default {
           disableOnInteraction: true,
           delay: 1000,
         },
+        preloadImages: false,
+        lazyLoading: true,
+
+        lazyLoadingInPrevNext: true, // 设置为true允许将延迟加载应用到最接近的slide的图片（前一个和后一个slide）。
+        lazy: { loadPrevNext: true },
       },
     };
   },
@@ -122,9 +127,9 @@ export default {
 <style lang="less" scoped>
 .showApp {
   padding-top: 0.58rem;
-    /deep/.swiper-pagination {
-      bottom:.4rem;
-    }
+  /deep/.swiper-pagination {
+    bottom: 0.4rem;
+  }
   .appItem {
     padding-bottom: 1.5rem;
     .msg {
@@ -133,7 +138,7 @@ export default {
       color: #808080;
       line-height: 0.42rem;
       padding: 0 0.6rem;
-      height:2.1rem;
+      height: 2.1rem;
       span {
         font-weight: bold;
         color: #000;

src/views/level/minLevel.vue

@@ -77,7 +77,7 @@ img {
     position: absolute;
     display: inline-block;
     text-align: center;
-    bottom: 2.4rem;
+    bottom: 1.15rem;
     left: 50%;
     margin-left: -1.4rem;
     width: 2.8rem;

src/views/project/blocks/minClient.vue

@@ -2,7 +2,7 @@
   <div>
     <swiper ref="oneSwiper" class="swiper" :options="swiperOptions">
       <swiper-slide class="swiper-slide">
-        <div class="minClient" @click="showDetail(0)">
+        <div class="minClient" >
           <h2>客户<span>案例</span></h2>
           <p class="subTitle">
             酷乐秀为众多器乐教学机构提供良策，<br />
@@ -25,12 +25,12 @@
             <p class="concat">
               线上教育是未来的一大趋势，就目前而言其优势已十分明显，在创业初期，搭建属于自己的网校面临成本、运维、研发、售后等多方面的问题，如何在控制成本的同时实现高效的服务是一大难题。幸运的是，我们遇到了“酷乐秀”这个专业的平台，帮我们提供专业的线上解决方案。
             </p>
-            <img src="../images/down.png" class="down" alt="" />
+            <img src="../images/down.png" class="down" alt="" @click="showDetail(0)" />
           </div>
         </div>
       </swiper-slide>
       <swiper-slide class="swiper-slide">
-        <div class="minClient" @click="showDetail(1)">
+        <div class="minClient" >
           <h2>客户<span>案例</span></h2>
           <p class="subTitle">
             酷乐秀为众多器乐教学机构提供良策，<br />
@@ -53,12 +53,12 @@
             <p class="concat">
               为丰富学生的课外生活，提高学生综合素养，学校在小学部成立了竖笛社团。由于新增的学生日益增多，我个人的精力实属有限，除了上课的学习外，还需要学生课下自觉练习。但学生在家练习没有指导，常常吹错音也不知道，长期如此，不仅没有提升，也浪费了大量的时间和精力。
             </p>
-            <img src="../images/down.png" class="down" alt="" />
+            <img src="../images/down.png" class="down" alt="" @click="showDetail(1)" />
           </div>
         </div>
       </swiper-slide>
       <swiper-slide class="swiper-slide">
-        <div class="minClient" @click="showDetail(2)">
+        <div class="minClient">
           <h2>客户<span>案例</span></h2>
           <p class="subTitle">
             酷乐秀为众多器乐教学机构提供良策，<br />
@@ -81,7 +81,7 @@
             <p class="concat">
               自去年始受疫情影响，我们一直在寻找一个合适的平台将线下课搬到线上。在此过程中我们遇到重重阻碍，比如上课时语音有延迟，无法查看学生真实演奏情况等问题。当时想解决这个问题可能需要购买昂贵的直播设备，这无疑是雪上加霜。
             </p>
-            <img src="../images/down.png" class="down" alt="" />
+            <img src="../images/down.png" class="down" alt=""  @click="showDetail(2)" />
           </div>
         </div>
       </swiper-slide>
@@ -147,7 +147,6 @@ export default {
   },
   methods: {
     showDetail(index) {
-      console.log("调用");
       this.detail = { ...this.detailList[index] };
       this.dialogVisible = true;
     },