提交一下啊

1

src/components/Mheader.vue

@@ -37,9 +37,9 @@
           <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  :title-class="path=='/index'?'active':''"	 title="产品服务" @click="goto('/index')" />
+          <van-cell   :title-class="path=='/project'?'active':''" title="成功案例" @click="goto('/project')" />
+          <van-cell  :title-class="path=='/aboutUs'?'active':''" title="关于我们" @click="goto('/aboutUs')" />
         </van-cell-group>
       </div>
     </van-popup>
@@ -49,7 +49,7 @@
       closeable
       close-icon-position="top-right"
       position="bottom"
-      :style="{ height: '300px' }"
+      :style="{ height: '6.8rem' }"
       get-container="#app"
     >
       <div class="joinWrap">
@@ -94,9 +94,17 @@ export default {
       this.$router.push(to);
     },
   },
+  computed:{
+    path(){
+    return  this.$route.path
+    }
+  }
 };
 </script>
 <style lang="less" scoped>
+.active {
+  color: #2dc7aa;
+}
 /deep/.van-nav-bar__right:active {
   opacity: 1;
 }
@@ -130,6 +138,7 @@ export default {
   border-bottom: 1px solid rgba(255, 255, 255, 0.2);
 }
 .headerSection {
+  z-index: 1000;
   background-color: rgba(0, 0, 0, 0.4);
 }
 .navRight {

src/main.js

@@ -50,7 +50,4 @@ if (isMobile()) {
 }
 
 
-const originalPush = router.prototype.push;
-router.prototype.push = function push(location) {
-   return originalPush.call(this, location).catch(err => err)
-}
+

src/views/aboutUs/index.vue

@@ -1,147 +1,161 @@
 <template>
-  <div class="container">
-    <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="container" v-if="!isPhone">
+      <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="imgWrap" data-depth="0.4">
-            <img src="./images/44.png" width="100%" alt="" />
+          <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 class="imgWrap" data-depth="0.5">
-            <img src="./images/55.png" width="100%" alt="" />
+        </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="20" :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="300" :decimals="0" :class="'num'" />万+
+              </p>
+              <p class="subTitle">在线直播课堂经验</p>
+              <p class="concat">
+                专属器乐教学的线上课堂经历过300多万节线上课程的验证，独创的音乐模式课堂深受老师与学员好评。
+              </p>
+            </div>
           </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="300" :decimals="0" :class="'num'" />万+
+      <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 class="subTitle">在线直播课堂经验</p>
-            <p class="concat">
-              专属器乐教学的线上课堂经历过300多万节线上课程的验证，独创的音乐模式课堂深受老师与学员好评。
+            <p>
+              景明云乐汇聚了在音乐在线教育，云计算，AI智能行业的顶尖人才
+              ，运用在音乐教育行业积累的十八年经验结合在语音视频领域多年研究，高度还原了乐器线上演奏场景，并已成功平稳运行六十多万课时。
             </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 class="aboutShowRight">
+          <img src="./images/aboutShowR.png" alt="" />
         </div>
       </div>
-      <div class="aboutShowRight">
-        <img src="./images/aboutShowR.png" alt="" />
-      </div>
-    </div>
-    <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 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>
-        <div class="whyItem">
-          <div class="imgWrap">
-            <img src="./images/3333.png" alt="" />
-          </div>
-          <div class="right">
-            <h4>全程培训辅导</h4>
-            <p>三端操作一对一辅导 助您快速上手解决管理难题</p>
+          <div class="whyItem">
+            <div class="imgWrap">
+              <img src="./images/2222.png" alt="" />
+            </div>
+            <div class="right">
+              <h4>免费试用</h4>
+              <p>平台提供14天免费试用 让您先体验后选择</p>
+            </div>
           </div>
-        </div>
-        <div class="whyItem">
-          <div class="imgWrap">
-            <img src="./images/4444.png" alt="" />
+          <div class="whyItem">
+            <div class="imgWrap">
+              <img src="./images/3333.png" alt="" />
+            </div>
+            <div class="right">
+              <h4>全程培训辅导</h4>
+              <p>三端操作一对一辅导 助您快速上手解决管理难题</p>
+            </div>
           </div>
-          <div class="right">
-            <h4>技术支持</h4>
-            <p>专业人员提供技术支持 7x24小时服务提供保障</p>
+          <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>
+    <div v-else>
+      <minAboutus />
     </div>
-    <silder />
   </div>
 </template>
 <script>
 import silder from "@/components/silder.vue";
 import Parallax from "parallax-js";
 import countTo from "vue-count-to";
+import { isMobile } from "@/util";
+import minAboutus from "./minAboutus"
 export default {
-  components: { silder, "count-to": countTo },
+  components: { silder, "count-to": countTo,minAboutus },
   data() {
     return {
       showForm: false,
     };
   },
   mounted() {
-    const parallaxInstance = new Parallax(this.$refs.animateList, {
-      // relativeInput: true,
-      hoverOnly: true,
-    });
+    if (this.$refs.animateList) {
+      const parallaxInstance = new Parallax(this.$refs.animateList, {
+        // relativeInput: true,
+        hoverOnly: true,
+      });
+    }
   },
   methods: {
     changeStatus() {},
   },
+  computed: {
+    isPhone() {
+      return isMobile();
+    },
+  },
 };
 </script>
 <style lang="less" scoped>
@@ -178,7 +192,7 @@ export default {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-     .font {
+    .font {
       width: 45%;
       margin-top: 245px;
     }
@@ -390,7 +404,7 @@ export default {
       background: #ffffff;
       box-shadow: 0px 4px 10px 0px rgba(211, 225, 223, 0.47);
       border-radius: 8px;
-       border: 1px solid transparent;
+      border: 1px solid transparent;
 
       &:hover {
         background: url("./images/careBg.png") no-repeat center;

src/views/aboutUs/minAboutus.vue

@@ -0,0 +1,251 @@
+<template>
+  <div>
+    <div class="banner">
+      <img src="./images/minBanner.png" alt="" />
+    </div>
+    <div class="whyShow">
+      <h2>为什么<span>选择酷乐秀</span></h2>
+      <div class="chioseItemList">
+        <div class="chioseItem">
+          <p class="title">
+            <count-to :endVal="20" :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="300" :decimals="0" :class="'num'" />万+
+          </p>
+          <p class="subTitle">在线直播课堂经验</p>
+          <p class="concat">
+            专属器乐教学的线上课堂经历过300多万节线上课程的验证，独创的音乐模式课堂深受老师与学员好评。
+          </p>
+        </div>
+      </div>
+    </div>
+    <div class="aboutShow">
+      <h2>关于<span>酷乐秀</span></h2>
+      <img class="showImg" src="./images/minAboutShow.png" alt="" />
+      <p class="concatP first">
+        酷乐秀是武汉市景明云乐网络科技有限公司专为全国管乐教学机构研发的服务平台。为合作机构提供远程视频直播的技术支持，独创“音乐演奏模式”高度还原乐器演奏的现场感及音色。并开创管乐智能评测功能，为广大管乐学习者带来福音。
+      </p>
+      <p class="concatP">
+        景明云乐汇聚了在音乐在线教育，云计算，AI智能行业的顶尖人才
+        ，运用在音乐教育行业积累的十八年经验结合在语音视频领域多年研究，高度还原了乐器线上演奏场景，并已成功平稳运行六十多万课时。
+      </p>
+    </div>
+    <div class="careServe">
+      <h2>全方位<span>贴心服务</span></h2>
+      <div class="careList">
+        <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>
+  </div>
+</template>
+<script>
+import countTo from "vue-count-to";
+export default {
+  components: {
+    "count-to": countTo,
+  },
+  data() {
+    return {};
+  },
+};
+</script>
+<style lang="less" scoped>
+img {
+  display: block;
+}
+.banner {
+  img {
+    width: 100%;
+  }
+}
+.whyShow {
+  padding: 0.5rem 0.4rem 0;
+  h2 {
+    text-align: center;
+    font-size: 0.38rem;
+    font-weight: 400;
+    color: #000000;
+    line-height: 0.64rem;
+    margin-bottom: 0.44rem;
+    span {
+      font-weight: 600;
+    }
+  }
+  .chioseItemList {
+    .chioseItem {
+      text-align: center;
+      margin-bottom: 0.5rem;
+      width: 6.7rem;
+      height: 3.34rem;
+      background: #ffffff;
+      border-radius: 8px;
+      box-shadow: 0px 4px 10px 0px rgba(211, 225, 223, 0.47);
+      padding: 0 0.44rem;
+      .title {
+        margin-top: 0.17rem;
+        margin-bottom: 0.26rem;
+        color: #10aaae;
+        font-size: 0.34rem;
+        .num {
+          font-size: 0.75rem;
+        }
+      }
+      .subTitle {
+        height: 0.42rem;
+        font-size: 0.3rem;
+        font-weight: 600;
+        color: #000000;
+        line-height: 0.42rem;
+        margin-bottom: 0.23rem;
+      }
+      .concat {
+        font-size: 0.22rem;
+        font-weight: 400;
+        color: #6a7388;
+        line-height: 0.36rem;
+        text-align: left;
+      }
+    }
+  }
+}
+
+.aboutShow {
+  background: #2c454c;
+  padding: 0.5rem 0.4rem 0.4rem;
+  .showImg {
+    width: 100%;
+    margin-bottom: 0.45rem;
+  }
+  h2 {
+    color: #fff;
+    font-size: 0.38rem;
+    font-weight: 400;
+    color: #ffffff;
+    line-height: 0.64rem;
+    text-align: center;
+    margin-bottom: 0.45rem;
+    span {
+      font-weight: 600;
+    }
+  }
+  .first {
+    margin-bottom: 0.6rem;
+  }
+  .concatP {
+    font-size: 0.22rem;
+    font-weight: 400;
+    color: #ffffff;
+    line-height: 0.42rem;
+    text-indent: 0.44rem;
+  }
+}
+.careServe {
+  background: linear-gradient(135deg, #f0eef3 0%, #d8eff3 100%);
+  padding: 0.5rem 0.4rem 0.57rem;
+  h2 {
+    color: #000;
+    font-size: 0.38rem;
+    font-weight: 400;
+    line-height: 0.64rem;
+    text-align: center;
+    margin-bottom: 0.45rem;
+    span {
+      font-weight: 600;
+    }
+  }
+  .careList {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    .whyItem {
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      width: 3.26rem;
+      padding: 0.3rem 0.14rem 0 0.24rem;
+      height: 1.92rem;
+      background: #ffffff;
+      box-shadow: 0px 5px 12px 0px rgba(211, 225, 223, 0.47);
+      border-radius: 0.1rem;
+      border: 1px solid #e8f7f4;
+      margin-bottom: .24rem;
+      .imgWrap {
+        margin-right: 0.23rem;
+        img {
+          width: 0.85rem;
+          height: 0.85rem;
+        }
+      }
+      .right {
+        h4 {
+          font-size: 0.28rem;
+          font-weight: 600;
+          color: #000000;
+          line-height: 0.4rem;
+          text-align: left;
+        }
+        p {
+          margin-top: 0.08rem;
+          font-weight: 400;
+          color: #6a7388;
+          line-height: 0.28rem;
+          font-size: 0.2rem;
+          text-align: left;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/index/blocks/minMoreLogin.vue

@@ -0,0 +1,102 @@
+<template>
+  <swiper ref="oneSwiper" class="swiper" :options="swiperOptions">
+    <swiper-slide class="swiper-slide">
+      <div class="minMoreLogin">
+        <h2>多端登录各司其职</h2>
+
+        <div class="cloundItem">
+          <!-- <h4>器乐练习云教练</h4> -->
+          <img src="../images/min11.png" alt="" />
+          <!-- <p class="concat">
+            你在练什么乐器？你是否经常吹不清楚，拉不流畅，弹不连贯？答案肯定很不乐观，这是器乐学习者的通病，初学者入门阶段大量存在。也许这一时期手生技疏情有可原，但如果一首乐曲练了很长一段时间毛病依然如故，那就非得好好找出原因来了。
+          </p> -->
+        </div>
+      </div>
+    </swiper-slide>
+    <swiper-slide class="swiper-slide">
+      <div class="minMoreLogin">
+        <h2>多端登录各司其职</h2>
+
+        <div class="cloundItem">
+          <!-- <h4>器乐练习云教练</h4> -->
+          <img src="../images/min22.png" alt="" />
+          <!-- <p class="concat">
+            你在练什么乐器？你是否经常吹不清楚，拉不流畅，弹不连贯？答案肯定很不乐观，这是器乐学习者的通病，初学者入门阶段大量存在。也许这一时期手生技疏情有可原，但如果一首乐曲练了很长一段时间毛病依然如故，那就非得好好找出原因来了。
+          </p> -->
+        </div>
+      </div>
+    </swiper-slide>
+    <swiper-slide class="swiper-slide">
+      <div class="minMoreLogin">
+        <h2>多端登录各司其职</h2>
+
+        <div class="cloundItem">
+          <!-- <h4>器乐练习云教练</h4> -->
+          <img src="../images/min33.png" alt="" />
+          <!-- <p class="concat">
+            你在练什么乐器？你是否经常吹不清楚，拉不流畅，弹不连贯？答案肯定很不乐观，这是器乐学习者的通病，初学者入门阶段大量存在。也许这一时期手生技疏情有可原，但如果一首乐曲练了很长一段时间毛病依然如故，那就非得好好找出原因来了。
+          </p> -->
+        </div>
+      </div>
+    </swiper-slide>
+    <div class="swiper-pagination" slot="pagination"></div>
+  </swiper>
+</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";
+export default {
+  components: {
+    Swiper,
+    SwiperSlide,
+  },
+  directives: {
+    swiper: directive,
+  },
+  data() {
+    return {
+      swiperOptions: {
+        pagination: {
+          el: ".swiper-pagination",
+        },
+        loop: true,
+        autoplay: {
+          disableOnInteraction: true,
+          delay: 1000,
+        },
+      },
+    };
+  },
+  computed: {
+    swiper() {
+      return this.$refs.oneSwiper.$swiper;
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.minMoreLogin {
+  background-color: #2d6b78;
+  padding: 0.5rem 0.66rem 1.13rem;
+  h2 {
+    height: 0.64rem;
+    font-size: 0.38rem;
+    font-weight: 600;
+    color: #ffffff;
+    line-height: 0.64rem;
+    text-align: center;
+    margin-bottom: 0.5rem;
+  }
+  .cloundItem {
+    width: 6.17rem;
+    height: 6.64rem;
+    img {
+      width: 100%;
+      display: block;
+    }
+  }
+}
+</style>

src/views/index/minIndex.vue

@@ -90,19 +90,26 @@
         <div class="swiper-pagination" slot="pagination"></div>
       </swiper>
     </div>
+    <minMoreLogin />
+    <div class="moreInfo">
+      <h2>了解更多</h2>
+        <minForm />
+    </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'
+import minMoreLogin from "./blocks/minMoreLogin";
+import minForm from "@/components/minForm"
 export default {
   components: {
     Swiper,
     SwiperSlide,
+    minMoreLogin,
+    minForm
   },
   directives: {
     swiper: directive,
@@ -218,4 +225,22 @@ img {
     }
   }
 }
+.moreInfo {
+  width: 100%;
+  // height: 6.29rem;
+  background: linear-gradient(135deg, #f0eef3 0%, #d8eff3 100%);
+  padding: .5rem .4rem .63rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  h2 {
+    height: 0.64rem;
+    font-size: 0.38rem;
+    color: #000000;
+    line-height: 0.64rem;
+    font-weight: 400;
+    text-align: center;
+  }
+
+}
 </style>

src/views/project/blocks/minClient.vue

@@ -0,0 +1,342 @@
+<template>
+  <div>
+    <swiper ref="oneSwiper" class="swiper" :options="swiperOptions">
+      <swiper-slide class="swiper-slide">
+        <div class="minClient"  @click="showDetail(0)">
+          <h2>客户<span>案例</span></h2>
+          <p class="subTitle">
+            酷乐秀为众多器乐教学机构提供良策，<br />
+            解决招生、教务、教学诸多难题
+          </p>
+          <div class="teacherItem">
+            <div class="teacherHead">
+              <div class="headWrap">
+                <img src="../images/teacher1.png" alt="" />
+              </div>
+              <div class="right">
+                <p>宋老师</p>
+                <p>杭州 某音乐培训机构</p>
+              </div>
+            </div>
+
+            <p class="subTitle">
+              “从网校搭建到日常运维，拥有一个技术团队为我们全程服务”
+            </p>
+            <p class="concat">
+              线上教育是未来的一大趋势，就目前而言其优势已十分明显，在创业初期，搭建属于自己的网校面临成本、运维、研发、售后等多方面的问题，如何在控制成本的同时实现高效的服务是一大难题。幸运的是，我们遇到了“酷乐秀”这个专业的平台，帮我们提供专业的线上解决方案。
+            </p>
+            <img
+              src="../images/down.png"
+              class="down"
+              alt=""
+
+            />
+          </div>
+        </div>
+      </swiper-slide>
+      <swiper-slide class="swiper-slide">
+        <div class="minClient"  @click="showDetail(1)">
+          <h2>客户<span>案例</span></h2>
+          <p class="subTitle">
+            酷乐秀为众多器乐教学机构提供良策，<br />
+            解决招生、教务、教学诸多难题
+          </p>
+          <div class="teacherItem">
+            <div class="teacherHead">
+              <div class="headWrap">
+                <img src="../images/teacher2.png" alt="" />
+              </div>
+              <div class="right">
+                <p>王老师</p>
+                <p>武汉 某小学竖笛老师</p>
+              </div>
+            </div>
+
+            <p class="subTitle">
+              “学生们在家练习的质量提升了很多，课上的效率也更高了，这的确让我省心不少。”
+            </p>
+            <p class="concat">
+              为丰富学生的课外生活，提高学生综合素养，学校在小学部成立了竖笛社团。由于新增的学生日益增多，我个人的精力实属有限，除了上课的学习外，还需要学生课下自觉练习。但学生在家练习没有指导，常常吹错音也不知道，长期如此，不仅没有提升，也浪费了大量的时间和精力。
+            </p>
+            <img
+              src="../images/down.png"
+              class="down"
+              alt=""
+
+            />
+          </div>
+        </div>
+      </swiper-slide>
+      <swiper-slide class="swiper-slide">
+        <div class="minClient"  @click="showDetail(2)">
+          <h2>客户<span>案例</span></h2>
+          <p class="subTitle">
+            酷乐秀为众多器乐教学机构提供良策，<br />
+            解决招生、教务、教学诸多难题
+          </p>
+          <div class="teacherItem">
+            <div class="teacherHead">
+              <div class="headWrap">
+                <img src="../images/teacher3.png" alt="" />
+              </div>
+              <div class="right">
+                <p>李老师</p>
+                <p>南京 某少儿音乐教育机构</p>
+              </div>
+            </div>
+
+            <p class="subTitle">
+              “我们终于恢复了疫情前上课的节奏，教学效率甚至更高效。”
+            </p>
+            <p class="concat">
+              自去年始受疫情影响，我们一直在寻找一个合适的平台将线下课搬到线上。在此过程中我们遇到重重阻碍，比如上课时语音有延迟，无法查看学生真实演奏情况等问题。当时想解决这个问题可能需要购买昂贵的直播设备，这无疑是雪上加霜。
+            </p>
+            <img
+              src="../images/down.png"
+              class="down"
+              alt=""
+
+            />
+          </div>
+        </div>
+      </swiper-slide>
+      <div class="swiper-pagination" slot="pagination"></div>
+    </swiper>
+      <van-dialog v-model="dialogVisible" className='dialog'>
+      <div class="teacherItem dialog">
+        <div class="teacherHead">
+          <div class="headWrap">
+            <img :src="detail.headerImg" alt="" />
+          </div>
+          <div class="right">
+            <p>{{ detail.name }}</p>
+            <p>{{ detail.submitTitle }}</p>
+          </div>
+        </div>
+
+        <p class="subTitle">
+          {{ detail.wrapTitle }}
+        </p>
+        <p class="concat" v-for="(item, index) in detail.list" :key="index">
+          {{ item }}
+        </p>
+        <!-- <img src="./images/down.png" class="down" alt="" /> -->
+      </div>
+   </van-dialog>
+  </div>
+</template>
+<script>
+import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
+import Swiper2, { Navigation, Pagination } from "swiper";
+Swiper2.use([Navigation, Pagination]);
+export default {
+  props:['detailList'],
+  components: {
+    Swiper,
+    SwiperSlide,
+  },
+  directives: {
+    swiper: directive,
+  },
+  data() {
+    return {
+      swiperOptions: {
+        pagination: {
+          el: ".swiper-pagination",
+        },
+        loop: true,
+        autoplay: {
+          disableOnInteraction: false,
+          delay: 3000,
+        },
+      },
+      dialogVisible: false,
+      detail: {
+        headerImg: "",
+        name: "",
+        submitTitle: "",
+        wrapTitle: "",
+        list: [],
+      },
+    };
+  },
+  methods: {
+    showDetail(index) {
+      console.log('调用')
+      this.detail = { ...this.detailList[index] };
+      this.dialogVisible = true;
+    },
+  },
+  computed: {
+    swiper() {
+      return this.$refs.oneSwiper.$swiper;
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+img {
+  display: block;
+}
+@keyframes down {
+  0% {
+    top: 0;
+  }
+  25% {
+    top: 2px;
+  }
+  50% {
+    top: 4px;
+  }
+  75% {
+    top: 2px;
+  }
+  100% {
+    top: 0px;
+  }
+}
+.minClient {
+  text-align: center;
+  background: #304a52;
+  padding: 0.5rem 0.4rem 1.2rem;
+  h2 {
+    height: 0.64rem;
+    font-size: 0.38rem;
+    font-weight: 400;
+    color: #ffffff;
+    line-height: 0.64rem;
+    margin-bottom: 0.26rem;
+    span {
+      font-weight: 600;
+    }
+  }
+  .subTitle {
+    font-size: 0.26rem;
+    font-weight: 400;
+    color: #ffffff;
+    line-height: 0.42rem;
+    margin-bottom: 0.64rem;
+  }
+  .teacherItem {
+    cursor: pointer;
+    background-color: #fff;
+    width: 6.7rem;
+    background: #ffffff;
+    border-radius: 8px;
+    border: 1px solid #dfdfdf;
+    filter: blur(0px);
+    padding: 0.45rem;
+    overflow: hidden;
+    .teacherHead {
+      border-bottom: 1px dotted #d6d6d6;
+      padding-bottom: 22px;
+      display: flex;
+      flex-direction: row;
+      .headWrap {
+        margin-right: 0.3rem;
+        img {
+          width: 0.9rem;
+          height: 0.9rem;
+        }
+      }
+      .right {
+        text-align: left;
+        font-size: 0.28rem;
+        font-weight: 400;
+        color: #000000;
+        line-height: 0.4rem;
+      }
+    }
+
+    .subTitle {
+      font-size: 0.28rem;
+      font-weight: 500;
+      color: #000000;
+      line-height: 0.48rem;
+      text-align: left;
+      margin-top: 0.33rem;
+      margin-bottom: 0.15rem;
+    }
+    .concat {
+      font-size: 0.22rem;
+      font-weight: 400;
+      color: #6a7388;
+      line-height: 0.36rem;
+      text-align: left;
+      // height: 110px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 3;
+      -webkit-box-orient: vertical;
+      text-indent: 0.44px;
+    }
+    .down {
+      margin: 0 auto;
+      width: 0.3rem;
+      height: 0.3rem;
+      animation: 1s 0.1s down infinite;
+      margin-top: 0.3rem;
+      position: relative;
+    }
+  }
+}
+/deep/.van-dialog__confirm, /deep/.van-dialog__confirm:active{
+  color: #2dc7aa;
+}
+/deep/.dialog{
+
+ .teacherItem {
+    cursor: pointer;
+    background-color: #fff;
+    width: 6.7rem;
+    background: #ffffff;
+    border-radius: 8px;
+    border: 1px solid #dfdfdf;
+    filter: blur(0px);
+    padding: 0.45rem;
+    overflow: hidden;
+    .teacherHead {
+      border-bottom: 1px dotted #d6d6d6;
+      padding-bottom: .3rem;
+      display: flex;
+      flex-direction: row;
+      .headWrap {
+        margin-right: 0.3rem;
+        img {
+          width: 0.9rem;
+          height: 0.9rem;
+        }
+      }
+      .right {
+        text-align: left;
+        font-size: 0.28rem;
+        font-weight: 400;
+        color: #000000;
+        line-height: 0.4rem;
+      }
+    }
+
+    .subTitle {
+      font-size: 0.28rem;
+      font-weight: 500;
+      color: #000000;
+      line-height: 0.48rem;
+      text-align: left;
+      margin-top: 0.33rem;
+      margin-bottom: 0.15rem;
+    }
+    .concat {
+      font-size: 0.24rem;
+      font-weight: 400;
+      color: #6a7388;
+      line-height: 0.36rem;
+      text-align: left;
+      // height: 110px;
+
+      text-indent: 0.44px;
+    }
+ }
+}
+</style>
+

src/views/project/index.vue

@@ -1,161 +1,169 @@
 <template>
   <div>
-    <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.3">
-            <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 v-if="!isPhone">
+      <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="imgWrap" data-depth="0.3">
-            <img src="./images/33.png" width="100%" alt="" />
+          <div class="animateList" ref="animateList">
+            <div class="imgWrap" data-depth="0.3">
+              <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>
         </div>
-      </div>
-    </header>
-    <div class="serveWrap">
-      <h2>服务<span>流程</span></h2>
-      <p class="subtitle">关注客户需求，提供专业服务，用更好方案和服务助您前行</p>
-      <div class="imgList width1200">
-        <div class="imgItem">
-          <div class="box">
-            <img src="./images/111.png" alt="" />
-            <p>采购服务</p>
+      </header>
+      <div class="serveWrap">
+        <h2>服务<span>流程</span></h2>
+        <p class="subtitle">
+          关注客户需求，提供专业服务，用更好方案和服务助您前行
+        </p>
+        <div class="imgList width1200">
+          <div class="imgItem">
+            <div class="box">
+              <img src="./images/111.png" alt="" />
+              <p>采购服务</p>
+            </div>
+            <img class="arrow" src="./images/arrow.png" alt="" />
           </div>
-          <img class="arrow" src="./images/arrow.png" alt="" />
-        </div>
-        <div class="imgItem" style="zindex: 999">
-          <div class="box">
-            <img src="./images/222.png" alt="" />
-            <p>设计方案</p>
+          <div class="imgItem" style="zindex: 999">
+            <div class="box">
+              <img src="./images/222.png" alt="" />
+              <p>设计方案</p>
+            </div>
+            <img class="arrow" src="./images/arrow.png" alt="" />
           </div>
-          <img class="arrow" src="./images/arrow.png" alt="" />
-        </div>
-        <div class="imgItem" style="zindex: 998">
-          <div class="box">
-            <img src="./images/333.png" alt="" />
-            <p>快速实施</p>
+          <div class="imgItem" style="zindex: 998">
+            <div class="box">
+              <img src="./images/333.png" alt="" />
+              <p>快速实施</p>
+            </div>
+            <img class="arrow" src="./images/arrow.png" alt="" />
           </div>
-          <img class="arrow" src="./images/arrow.png" alt="" />
-        </div>
-        <div class="imgItem" style="zindex: 997">
-          <div class="box">
-            <img src="./images/444.png" alt="" />
-            <p>全程辅导</p>
+          <div class="imgItem" style="zindex: 997">
+            <div class="box">
+              <img src="./images/444.png" alt="" />
+              <p>全程辅导</p>
+            </div>
+            <!-- <img class="arrow" src="./images/arrow.png" alt="" /> -->
           </div>
-          <!-- <img class="arrow" src="./images/arrow.png" alt="" /> -->
         </div>
       </div>
-    </div>
-    <div class="customerWrap">
-      <h2>客户<span>案例</span></h2>
-      <p class="subtitle">
-        酷乐秀为众多器乐教学机构提供良策，解决招生、教务、教学诸多难题
-      </p>
-      <div class="teacherList width1200">
-        <div class="teacherItem">
-          <div class="teacherHead">
-            <div class="headWrap">
-              <img src="./images/teacher1.png" alt="" />
-            </div>
-            <div class="right">
-              <p>宋老师</p>
-              <p>杭州 某音乐培训机构</p>
+      <div class="customerWrap">
+        <h2>客户<span>案例</span></h2>
+        <p class="subtitle">
+          酷乐秀为众多器乐教学机构提供良策，解决招生、教务、教学诸多难题
+        </p>
+        <div class="teacherList width1200">
+          <div class="teacherItem">
+            <div class="teacherHead">
+              <div class="headWrap">
+                <img src="./images/teacher1.png" alt="" />
+              </div>
+              <div class="right">
+                <p>宋老师</p>
+                <p>杭州 某音乐培训机构</p>
+              </div>
             </div>
-          </div>
 
-          <p class="subTitle">
-            “从网校搭建到日常运维，拥有一个技术团队为我们全程服务”
-          </p>
-          <p class="concat">
-            线上教育是未来的一大趋势，就目前而言其优势已十分明显，在创业初期，搭建属于自己的网校面临成本、运维、研发、售后等多方面的问题，如何在控制成本的同时实现高效的服务是一大难题。幸运的是，我们遇到了“酷乐秀”这个专业的平台，帮我们提供专业的线上解决方案。
-          </p>
-          <img
-            src="./images/down.png"
-            class="down"
-            alt=""
-            @click="showDetail(0)"
-          />
-        </div>
-        <div class="teacherItem">
-          <div class="teacherHead">
-            <div class="headWrap">
-              <img src="./images/teacher2.png" alt="" />
-            </div>
-            <div class="right">
-              <p>王老师</p>
-              <p>武汉 某小学竖笛老师</p>
+            <p class="subTitle">
+              “从网校搭建到日常运维，拥有一个技术团队为我们全程服务”
+            </p>
+            <p class="concat">
+              线上教育是未来的一大趋势，就目前而言其优势已十分明显，在创业初期，搭建属于自己的网校面临成本、运维、研发、售后等多方面的问题，如何在控制成本的同时实现高效的服务是一大难题。幸运的是，我们遇到了“酷乐秀”这个专业的平台，帮我们提供专业的线上解决方案。
+            </p>
+            <img
+              src="./images/down.png"
+              class="down"
+              alt=""
+              @click="showDetail(0)"
+            />
+          </div>
+          <div class="teacherItem">
+            <div class="teacherHead">
+              <div class="headWrap">
+                <img src="./images/teacher2.png" alt="" />
+              </div>
+              <div class="right">
+                <p>王老师</p>
+                <p>武汉 某小学竖笛老师</p>
+              </div>
             </div>
+
+            <p class="subTitle">
+              “学生们在家练习的质量提升了很多，课上的效率也更高了，这的确让我省心不少。”
+            </p>
+            <p class="concat">
+              为丰富学生的课外生活，提高学生综合素养，学校在小学部成立了竖笛社团。由于新增的学生日益增多，我个人的精力实属有限，除了上课的学习外，还需要学生课下自觉练习。但学生在家练习没有指导，常常吹错音也不知道，长期如此，不仅没有提升，也浪费了大量的时间和精力。
+            </p>
+            <img
+              src="./images/down.png"
+              class="down"
+              alt=""
+              @click="showDetail(1)"
+            />
           </div>
+          <div class="teacherItem">
+            <div class="teacherHead">
+              <div class="headWrap">
+                <img src="./images/teacher3.png" alt="" />
+              </div>
+              <div class="right">
+                <p>李老师</p>
+                <p>南京 某少儿音乐教育机构</p>
+              </div>
+            </div>
 
-          <p class="subTitle">
-            “学生们在家练习的质量提升了很多，课上的效率也更高了，这的确让我省心不少。”
-          </p>
-          <p class="concat">
-            为丰富学生的课外生活，提高学生综合素养，学校在小学部成立了竖笛社团。由于新增的学生日益增多，我个人的精力实属有限，除了上课的学习外，还需要学生课下自觉练习。但学生在家练习没有指导，常常吹错音也不知道，长期如此，不仅没有提升，也浪费了大量的时间和精力。
-          </p>
-          <img
-            src="./images/down.png"
-            class="down"
-            alt=""
-            @click="showDetail(1)"
-          />
+            <p class="subTitle">
+              “我们终于恢复了疫情前上课的节奏，教学效率甚至更高效。”
+            </p>
+            <p class="concat">
+              自去年始受疫情影响，我们一直在寻找一个合适的平台将线下课搬到线上。在此过程中我们遇到重重阻碍，比如上课时语音有延迟，无法查看学生真实演奏情况等问题。当时想解决这个问题可能需要购买昂贵的直播设备，这无疑是雪上加霜。
+            </p>
+            <img
+              src="./images/down.png"
+              class="down"
+              alt=""
+              @click="showDetail(2)"
+            />
+          </div>
         </div>
-        <div class="teacherItem">
+      </div>
+      <loginList :title="'即刻入驻'" />
+      <el-dialog :visible.sync="dialogVisible" width="511px">
+        <div class="teacherItem dialog">
           <div class="teacherHead">
             <div class="headWrap">
-              <img src="./images/teacher3.png" alt="" />
+              <img :src="detail.headerImg" alt="" />
             </div>
             <div class="right">
-              <p>李老师</p>
-              <p>南京 某少儿音乐教育机构</p>
+              <p>{{ detail.name }}</p>
+              <p>{{ detail.submitTitle }}</p>
             </div>
           </div>
 
           <p class="subTitle">
-            “我们终于恢复了疫情前上课的节奏，教学效率甚至更高效。”
+            {{ detail.wrapTitle }}
           </p>
-          <p class="concat">
-            自去年始受疫情影响，我们一直在寻找一个合适的平台将线下课搬到线上。在此过程中我们遇到重重阻碍，比如上课时语音有延迟，无法查看学生真实演奏情况等问题。当时想解决这个问题可能需要购买昂贵的直播设备，这无疑是雪上加霜。
+          <p class="concat" v-for="(item, index) in detail.list" :key="index">
+            {{ item }}
           </p>
-          <img
-            src="./images/down.png"
-            class="down"
-            alt=""
-            @click="showDetail(2)"
-          />
+          <!-- <img src="./images/down.png" class="down" alt="" /> -->
         </div>
-      </div>
+      </el-dialog>
+      <silder />
+    </div>
+    <div v-else>
+      <!-- h5 -->
+      <minProject :detailList="detailList"/>
     </div>
-    <loginList :title="'即刻入驻'" />
-    <el-dialog :visible.sync="dialogVisible" width="511px">
-      <div class="teacherItem dialog">
-        <div class="teacherHead">
-          <div class="headWrap">
-            <img :src="detail.headerImg" alt="" />
-          </div>
-          <div class="right">
-            <p>{{ detail.name }}</p>
-            <p>{{ detail.submitTitle }}</p>
-          </div>
-        </div>
-
-        <p class="subTitle">
-          {{ detail.wrapTitle }}
-        </p>
-        <p class="concat" v-for="(item, index) in detail.list" :key="index">
-          {{ item }}
-        </p>
-        <!-- <img src="./images/down.png" class="down" alt="" /> -->
-      </div>
-    </el-dialog>
-    <silder />
   </div>
 </template>
 <style lang="less" scoped>
@@ -165,16 +173,16 @@ img {
 }
 @keyframes down {
   0% {
-    margin-top:  29px;
+    margin-top: 29px;
   }
-    25% {
+  25% {
     margin-top: 31px;
   }
   50% {
     margin-top: 32px;
   }
-  75%{
-      margin-top: 34px;
+  75% {
+    margin-top: 34px;
   }
   100% {
     margin-top: 35px;
@@ -422,8 +430,8 @@ img {
         .headWrap {
           margin-right: 13px;
           img {
-              width: 65px;
-          height: 65px;
+            width: 65px;
+            height: 65px;
           }
         }
         .right {
@@ -486,8 +494,8 @@ img {
     .headWrap {
       margin-right: 13px;
       img {
-          width: 65px;
-          height: 65px;
+        width: 65px;
+        height: 65px;
       }
     }
     .right {
@@ -548,7 +556,7 @@ img {
 <script>
 const detailList = [
   {
-    headerImg: require("./images/teacher1.png"),
+    headerImg: require("@/views/project/images/teacher1.png"),
     name: "宋老师",
     submitTitle: "杭州 某音乐培训机构",
     wrapTitle: "“从网校搭建到日常运维，拥有一个技术团队为我们全程服务”",
@@ -560,7 +568,7 @@ const detailList = [
     ],
   },
   {
-    headerImg: require("./images/teacher2.png"),
+    headerImg: require("@/views/project/images/teacher2.png"),
     name: "王老师",
     submitTitle: "武汉 某小学竖笛老师",
     wrapTitle:
@@ -573,7 +581,7 @@ const detailList = [
     ],
   },
   {
-    headerImg: require("./images/teacher3.png"),
+    headerImg: require("@/views/project/images/teacher3.png"),
     name: "李老师",
     submitTitle: "南京 某少儿音乐教育机构",
     wrapTitle: "“我们终于恢复了疫情前上课的节奏，教学效率甚至更高效。”",
@@ -585,14 +593,17 @@ const detailList = [
     ],
   },
 ];
+import { isMobile } from "@/util";
+import minProject from "./minProject.vue";
 // import Bus from "./eventBus";
 import Parallax from "parallax-js";
 import loginList from "../index/blocks/loginList.vue";
-  import silder from "@/components/silder.vue";
+import silder from "@/components/silder.vue";
 export default {
   components: {
     loginList,
-    silder
+    silder,
+    minProject,
   },
   data() {
     return {
@@ -604,15 +615,19 @@ export default {
         wrapTitle: "",
         list: [],
       },
+      detailList,
       headList: [],
     };
   },
   name: "banner",
   mounted() {
-    const parallaxInstance = new Parallax(this.$refs.animateList, {
-      // relativeInput: true,
-      hoverOnly: true,
-    });
+    if (this.$refs.animateList) {
+      const parallaxInstance = new Parallax(this.$refs.animateList, {
+        // relativeInput: true,
+        hoverOnly: true,
+      });
+    }
+
     // parallaxInstance.friction(0.1, 0.1)
   },
   methods: {
@@ -627,5 +642,10 @@ export default {
       this.dialogVisible = true;
     },
   },
+  computed: {
+    isPhone() {
+      return isMobile();
+    },
+  },
 };
 </script>

src/views/project/minProject.vue

@@ -0,0 +1,175 @@
+<template>
+  <div>
+    <div class="banner">
+      <img src="./images/minBanner.png" alt="" />
+    </div>
+    <div class="serverList">
+      <h2>服务<span>流程</span></h2>
+      <p class="subTitle">关注客户需求，提供专业服务</p>
+      <p class="subTitle last">用更好方案和服务助您前行</p>
+
+      <div class="serverItemList">
+        <div class="serverItem">
+          <div class="box">
+            <img src="./images/111.png" alt="" />
+            <p>采购服务</p>
+          </div>
+          <img class="arrow" src="./images/arrow.png" alt="" />
+        </div>
+        <div class="serverItem">
+          <div class="box">
+            <img src="./images/222.png" alt="" />
+            <p>设计方案</p>
+          </div>
+          <img class="arrow arrow1" src="./images/arrow.png" alt="" />
+        </div>
+        <div class="serverItem">
+          <div class="box">
+            <img src="./images/444.png" alt="" />
+            <p>快速实施</p>
+          </div>
+          <!-- <img class="arrow " src="./images/arrow.png" alt="" /> -->
+        </div>
+        <div class="serverItem">
+          <div class="box">
+            <img src="./images/333.png" alt="" />
+            <p>全程辅导</p>
+          </div>
+          <img class="arrow arrow2" src="./images/arrow.png" alt="" />
+        </div>
+      </div>
+    </div>
+    <minClient :detailList="detailList" />
+    <div class="moreInfo">
+      <h2>即刻入驻</h2>
+      <minForm />
+    </div>
+  </div>
+</template>
+<script>
+import minClient from "./blocks/minClient.vue";
+import minForm from "@/components/minForm"
+export default {
+  props: ["detailList"],
+  components: { minClient,minForm },
+  data() {
+    return {};
+  },
+};
+</script>
+<style lang="less" scoped>
+/deep/.swiper-pagination-bullet-active {
+  background-color: #2dc7aa;
+}
+.banner {
+  img {
+    display: block;
+    width: 100%;
+  }
+}
+.serverList {
+  background: #f8fbfc;
+  padding: 0.5rem 0.4rem 0.72rem;
+  h2 {
+    height: 0.64rem;
+    font-size: 0.38rem;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #000000;
+    line-height: 0.64rem;
+    text-align: center;
+    margin-bottom: 0.4rem;
+    span {
+      font-weight: 600;
+    }
+  }
+  .subTitle {
+    text-align: center;
+    font-size: 0.26rem;
+    font-weight: 400;
+    color: #6a7388;
+  }
+  .last {
+    margin-bottom: 0.94rem;
+  }
+  .serverItemList {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    z-index: 300;
+    flex-wrap: wrap;
+    .serverItem {
+      position: relative;
+      background: #ffffff;
+      border-radius: 4px;
+      border: 1px solid #dfdfdf;
+      width: 3.1rem;
+      height: 1.73rem;
+      padding: 0.38rem 0.22rem 0.1rem;
+      margin-right: 0.46rem;
+      margin-bottom: 0.4rem;
+      &:nth-child(2n) {
+        margin-right: 0rem;
+      }
+      .box {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        z-index: 1100;
+        position: relative;
+        p {
+          margin-top: 0.3rem;
+          font-size: 0.28rem;
+          font-weight: 500;
+          color: #000000;
+          line-height: 0.4rem;
+          margin-left: 0.22rem;
+        }
+        img {
+          width: 1.08rem;
+          height: 1.25rem;
+        }
+      }
+      .arrow {
+        position: absolute;
+        width: 0.76rem;
+        height: 0.5rem;
+        right: -0.76rem;
+        top: 50%;
+        margin-top: -0.25rem;
+        z-index: 400;
+      }
+      .arrow.arrow1 {
+        transform: rotate(90deg);
+        top: 123%;
+        right: 50%;
+        margin-right: -0.38rem;
+      }
+      .arrow.arrow2 {
+        transform: rotate(180deg);
+        left: -0.76rem;
+        top: 50%;
+      }
+    }
+  }
+}
+.moreInfo {
+  width: 100%;
+  // height: 6.29rem;
+  background: linear-gradient(135deg, #f0eef3 0%, #d8eff3 100%);
+  padding: .5rem .4rem .63rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  h2 {
+    height: 0.64rem;
+    font-size: 0.38rem;
+    color: #000000;
+    line-height: 0.64rem;
+    font-weight: 400;
+    text-align: center;
+  }
+
+}
+</style>