提交一下

1

src/views/index/blocks/banner.vue

@@ -1,15 +1,19 @@
 <template>
   <header class="banner">
-    <img src="../images/banner.png" width="100%" alt="" />
+    <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">
-        <div class="imgWrap">
+      <div class="animateList" ref='animateList'>
+        <div class="imgWrap" data-depth="0.6">
           <img src="../images/1.png" width="100%" alt="" />
-          <!-- <img src="../images/2.png" width="100%" alt="" />
-        <img src="../images/3.png" width="100%" alt="" /> -->
+        </div>
+        <div class="imgWrap" data-depth="0.4">
+          <img src="../images/2.png" width="100%" alt="" />
+        </div>
+        <div class="imgWrap" data-depth="0.2">
+          <img src="../images/3.png" width="100%" alt="" />
         </div>
       </div>
     </div>
@@ -23,13 +27,14 @@
   animation-delay: 0.6s;
 }
 .banner {
+  .bannerIMg {  height: 588px;}
   position: relative;
   // width: 100%;
   // background: url("../images/banner.png") no-repeat center;
   // background-color: #2a2c41;
   // background-size: 100% 100%;
   // height: 763px;
-  max-height: 588px;
+
   .bannerWrap {
     width: 1180px;
     top: 0;
@@ -41,9 +46,10 @@
     justify-content: space-between;
     .font {
       width: 35%;
-      margin-top: 44%;
+      margin-top: 258px;
     }
     .animateList {
+      margin-top: 75px;
       width: 40%;
       position: relative;
       .imgWrap {
@@ -119,8 +125,16 @@
 </style>
 <script>
 import Bus from "./eventBus";
+import Parallax from 'parallax-js'
 export default {
   name: "banner",
+  mounted(){
+     const parallaxInstance = new Parallax(this.$refs.animateList, {
+      // relativeInput: true,
+      hoverOnly: true,
+    })
+    // parallaxInstance.friction(0.1, 0.1)
+  },
   methods: {
     joinIn() {
       Bus.$emit("joinIn", true);

src/views/index/blocks/recommend.vue

@@ -3,7 +3,84 @@
     <img class="bg" src="../images/helpBg.png" alt="" />
     <div class="recommendDetail width1200">
       <el-tabs v-model="activeName" stretch>
-        <el-tab-pane label="长笛" name="1"></el-tab-pane>
+        <el-tab-pane label="器乐练习云教练" name="1">
+          <div class="commendItem" >
+            <div class="commendItemLeft animate__animated animate__slideInLeft">
+              <h4 class="commendTitle">器乐练习云教练</h4>
+              <p>
+                拥有完全自主知识产权的器乐练习云教练，具有五线谱自动转化，五线谱跟播，演奏指法跟播，演奏速度自定义，原音/伴奏一键切换等辅助练习功能。智能评测功能，通过演奏音频采集与标准曲谱比对，实时提供智能点评报告，自动提示练习对错，让学生和家长能够及时发现乐器练习过程中存在的问题，提高练习效率，可谓是学生学习乐器的“随身教练”。
+              </p>
+            </div>
+            <div class="commendItemRight animate__animated animate__slideInRight">
+              <img src="../images/commendItem1.png" alt="" />
+            </div>
+          </div>
+        </el-tab-pane>
+        <el-tab-pane label="器乐直播云教室" name="2">
+               <div class="commendItem" >
+            <div class="commendItemLeft animate__animated animate__slideInLeft">
+              <h4 class="commendTitle">器乐直播云教室</h4>
+              <p>
+                全国首家线教学场景，高保真技术，智能降噪音质高度还原。白板互动教学，内置白板书写工具；自有教学资源共享教学，本地曲谱上传，能够为学员提供线下教学体验不到的便利。
+              </p>
+            </div>
+            <div class="commendItemRight animate__animated animate__slideInRight">
+              <img src="../images/commendItem2.png" alt="" />
+            </div>
+          </div>
+        </el-tab-pane>
+        <el-tab-pane label="器乐直播云考场" name="3">
+               <div class="commendItem" >
+            <div class="commendItemLeft animate__animated animate__slideInLeft">
+              <h4 class="commendTitle">器乐直播云考场</h4>
+              <p>
+                器乐考级监考评分一体化平台，线上考级全流程覆盖，信息化赋能打造全流程线上考级模式。随时随地保证用户数据安全，打破时间空间限制将考级生命周期（招考-排考-考核-统计-制证-结算）完整呈现。器乐考级监考评分一体化平台，线上考级全流程覆盖，信息化赋能打造全流程线上考级模式。随时随地保证用户数据安全，打破时间空间限制将考级生命周期（招考-排考-考核-统计-制证-结算）完整呈现。
+              </p>
+            </div>
+            <div class="commendItemRight animate__animated animate__slideInRight">
+              <img src="../images/commendItem3.png" alt="" />
+            </div>
+          </div>
+        </el-tab-pane>
+        <el-tab-pane label="客制化教材汇编" name="4">
+               <div class="commendItem" >
+            <div class="commendItemLeft animate__animated animate__slideInLeft">
+              <h4 class="commendTitle">客制化教材汇编</h4>
+              <p>
+                客制化各机构的教学教案，汇编成电子文本教材 ，多媒体教材，音视频动态指法联动展示。提高机构教学质量，增强教学特色；
+              </p>
+            </div>
+            <div class="commendItemRight animate__animated animate__slideInRight">
+              <img src="../images/commendItem4.png" alt="" />
+            </div>
+          </div>
+        </el-tab-pane>
+        <el-tab-pane label="全闭环网校平台" name="5">
+               <div class="commendItem" >
+            <div class="commendItemLeft animate__animated animate__slideInLeft">
+              <h4 class="commendTitle">全闭环网校平台</h4>
+              <p>
+                为器乐教学机构打造保护私域流量的独立网校平台，覆盖前端招生、课前、授课、课后服务等全流程管理，能够极大地提升运营及管理的效率以及服务质量；总览招生、教务、财务、员工概况及变化趋势，多维度衡量招生情况、续费率，精准统计课时及学费消耗，实时了解机构日常经营情况；
+              </p>
+            </div>
+            <div class="commendItemRight animate__animated animate__slideInRight">
+              <img src="../images/commendItem5.png" alt="" />
+            </div>
+          </div>
+        </el-tab-pane>
+        <el-tab-pane label="全流程教务管理" name="6">
+               <div class="commendItem" >
+            <div class="commendItemLeft animate__animated animate__slideInLeft">
+              <h4 class="commendTitle">全流程教务管理</h4>
+              <p>
+                学员到期、欠费、剩余课时等信息一目了然.智能检测排课冲突，自动生成对应课程表.即时通讯自动生成群组 ，实时跟进教学进度，促进回款转化。
+              </p>
+            </div>
+            <div class="commendItemRight animate__animated animate__slideInRight">
+              <img src="../images/commendItem6.png" alt="" />
+            </div>
+          </div>
+        </el-tab-pane>
       </el-tabs>
     </div>
   </div>
@@ -22,6 +99,7 @@ export default {
   position: relative;
   .bg {
     width: 100%;
+    height: 830px;
   }
   /deep/.el-tabs__item {
     height: 60px;
@@ -29,9 +107,15 @@ export default {
     font-size: 18px;
   }
   ::v-deep .el-tabs__nav-scroll {
-    width: 700px;
+    width: 100%;
     margin: 0 auto;
   }
+  /deep/.el-tabs--top .el-tabs__item.is-top:last-child {
+    padding-right: 40px !important;
+  }
+  /deep/.el-tabs__item.is-top:nth-child(2) {
+    padding-left: 40px;
+  }
   /deep/.el-tabs__item.is-active {
     color: #01c1b5;
   }
@@ -42,7 +126,38 @@ export default {
     background-color: #01c1b5;
   }
   .recommendDetail {
-
+    position: absolute;
+    left: 50%;
+    margin-left: -590px;
+    top: 60px;
+    .commendItem {
+      margin-top: 60px;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      .commendItemLeft {
+        width: 492px;
+        text-align: left;
+        h4 {
+          height: 41px;
+          font-size: 29px;
+          font-weight: 600;
+          color: #000000;
+          line-height: 41px;
+          margin-bottom: 30px;
+        }
+        p {
+          font-size: 14px;
+          font-weight: 400;
+          color: #6a7388;
+          line-height: 30px;
+        }
+      }
+      .commendItemRight {
+        width: 763px;
+      }
+    }
   }
 }
 </style>