update

src/pages/major-set/filterType.json

@@ -198,35 +198,5 @@
       "top2": "582px",
       "right2": "305px"
     }
-  ],
-  "3": [
-    {
-      "class": "li wow bounceInLeft animated vi delay1 duration2",
-      "class2": "li2 wow bounceInLeft animated vi delay1 duration2 animated",
-      "span": "",
-      "span1": "组织学生前往不同城市、走访不同教育理念的代表性幼儿园（传统园、蒙氏园、瑞吉欧园等），包括教育实践、学术访谈等环节，为学生们提供了深度交流学习的机会。*时长约10小时",
-      "li1stateLeft": false,
-      "li1stateRight": false,
-      "name": "li1stateLeft",
-      "ref": "li01",
-      "top1": "131px",
-      "right1": "345px",
-      "top2": "114px",
-      "right2": "440px"
-    },
-    {
-      "class": "li wow bounceInLeft animated vi delay3 duration2",
-      "class2": "li2 wow bounceInLeft animated vi delay3 duration2 animated",
-      "span": "",
-      "span1": "蒙氏生活实践/文化实用教育法、蒙氏感知教育法、蒙氏语言与文学教育法、蒙氏数学教育法四门课为线下实践课程，美方与中方教授组成的教学团组织学生在不同城市的幼儿园实地巡回授课，包括真实教学演练、教具使用、角色扮演、教授讲座、场景模拟等实践训练。*时长约16小时每门课x4门课",
-      "li1stateLeft": false,
-      "li1stateRight": false,
-      "name": "li1stateLeft",
-      "ref": "li02",
-      "top1": "450px",
-      "right1": "475px",
-      "top2": "333px",
-      "right2": "550px"
-    }
   ]
 }

src/pages/major-set/index.vue

@@ -131,34 +131,57 @@
         <div class="major-kc-left">
           <button @mouseover="buhover(1)" :class="{'hover-bt': course === 1}">儿童心理发展课程</button>
           <button @mouseover="buhover(2)" :class="{'hover-bt': course === 2}">儿童教育实践课程</button>
-          <button @mouseover="buhover(3)" :class="{'hover-bt': course === 3}">实践课程内容</button>
+          <div class="div-child-btn" @mouseover="newChildOver">实践课程内容</div>
+          <!-- <button @mouseover="buhover(3)" :class="{'hover-bt': course === 3}">实践课程内容</button> -->
         </div>
         <div class="major-kc-right">
-          <div class="major-kc-svg">
-            <img :src="require('@/assets/images/major-set/xl1.png')" alt />
-          </div>
-          <ul class="ul-1">
-            <li
-              v-for="(item, index) in FilterJson[course]"
-              :class="[{'show_anima_li_left': item.li1stateLeft, 'show_anima_li_right': item.li1stateRight}, item.class]"
-              :key="index"
-              :ref="item.ref"
-              :style="{top: item.top1, right: item.right1}"
-            >
-              <div class="div-son"></div>
-            </li>
-          </ul>
-          <ul class="ul-2">
-            <li
-              v-for="(item, index) in FilterJson[course]"
-              :class="[{'show_anima_li_left': item.li1stateLeft, 'show_anima_li_right': item.li1stateRight}, item.class2]"
-              :key="index"
-              :style="{top: item.top2, right: item.right2}"
-            >
-              <span class="yw">{{item.span}}</span>
-              <span>{{item.span1}}</span>
-            </li>
-          </ul>
+          <template v-if="!newChildIsShow">
+            <div class="major-kc-svg">
+              <img :src="require('@/assets/images/major-set/xl1.png')" alt />
+            </div>
+            <ul class="ul-1">
+              <li
+                v-for="(item, index) in FilterJson[course]"
+                :class="[{'show_anima_li_left': item.li1stateLeft, 'show_anima_li_right': item.li1stateRight}, item.class]"
+                :key="index"
+                :ref="item.ref"
+                :style="{top: item.top1, right: item.right1}"
+              >
+                <div class="div-son"></div>
+              </li>
+            </ul>
+            <ul class="ul-2">
+              <li
+                v-for="(item, index) in FilterJson[course]"
+                :class="[{'show_anima_li_left': item.li1stateLeft, 'show_anima_li_right': item.li1stateRight}, item.class2]"
+                :key="index"
+                :style="{top: item.top2, right: item.right2}"
+              >
+                <span class="yw">{{item.span}}</span>
+                <span>{{item.span1}}</span>
+              </li>
+            </ul>
+          </template>
+          <template v-else>
+            <div class="new-child-content">
+              <div class="content-text">
+                <div class="circle-box">
+                  <div class="child-circle"></div>
+                </div>
+                <div class="text">
+                  组织学生前往不同城市、走访不同教育理念的代表性幼儿园（传统园、蒙氏园、瑞吉欧园等），包括教育实践、学术访谈等环节，为学生们提供了深度交流学习的机会。*时长约10小时
+                </div>
+              </div>
+              <div class="content-text">
+                <div class="circle-box">
+                  <div class="child-circle"></div>
+                </div>
+                <div class="text">
+                  蒙氏生活实践/文化实用教育法、蒙氏感知教育法、蒙氏语言与文学教育法、蒙氏数学教育法四门课为线下实践课程，美方与中方教授组成的教学团组织学生在不同城市的幼儿园实地巡回授课，包括真实教学演练、教具使用、角色扮演、教授讲座、场景模拟等实践训练。*时长约16小时每门课x4门课
+                </div>
+              </div>
+            </div>
+          </template>
         </div>
       </div>
       <div class="layout_com_page_banner major-kc-sy" :style="{'min-height':700 + 'px'}">
@@ -326,10 +349,14 @@ export default {
       dowUp: false,
       presentts: 0,
       scrollTopts: 0,
-      ones: true
+      ones: true,
+      newChildIsShow: false
     }
   },
   methods: {
+    newChildOver() {
+      this.newChildIsShow = true
+    },
     dyScroll(present, scrollTop) {
       this.presentts = present
       this.scrollTopts = scrollTop
@@ -362,6 +389,7 @@ export default {
       }
     },
     buhover(number) {
+      this.newChildIsShow = false
       this.course = number
       this.dyScroll(this.presentts, this.scrollTopts)
     },
@@ -899,4 +927,51 @@ export default {
 .nowrap {
   white-space: nowrap;
 }
+.div-child-btn{
+  font-size: 22px;
+  color: #AF1B40;
+  line-height: 30px;
+  position: relative;
+  cursor: pointer;
+  &::after{
+    content: '';
+    position: absolute;
+    top: -100%;
+    left: 50%;
+    transform: translateX(-50%);
+    border-left: 1px dashed rgba(175, 27, 64, 1);
+    height: 34px;
+  }
+}
+.new-child-content{
+  position: absolute;
+  top: 50%;
+  left: 140px;
+  transform: translateY(-50%);
+  .content-text{
+    display: flex;
+    margin-bottom: 30px;
+    .circle-box{
+      width: 28px;
+      height: 28px;
+      background: rgba(175, 27, 64, .5);
+      border-radius: 50%;
+      margin-top: 5px;
+      .child-circle{
+        width: 20px;
+        height: 20px;
+        background: #AF1B40;
+        margin: 4px auto;
+        border-radius: 50%;
+      }
+    }
+    .text{
+      font-size: 18px;
+      color: #222222;
+      line-height: 36px;
+      width: 568px;
+      margin-left: 16px;
+    }
+  }
+}
 </style>