协同备课 同步教研静态页面

package-lock.json

@@ -8,6 +8,7 @@
       "name": "vant-js-template",
       "version": "0.0.0",
       "dependencies": {
+        "@element-plus/icons-vue": "^2.0.9",
         "@vueuse/core": "^9.1.0",
         "axios": "^0.27.2",
         "dayjs": "^1.11.5",
@@ -1740,8 +1741,6 @@
         "node": ">=12.0.0"
       }
     },
-<<<<<<< HEAD
-=======
     "node_modules/scss": {
       "version": "0.2.4",
       "resolved": "https://registry.npmjs.org/scss/-/scss-0.2.4.tgz",
@@ -1753,7 +1752,6 @@
         "node": ">= 0.2.0"
       }
     },
->>>>>>> master
     "node_modules/scule": {
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/scule/-/scule-0.3.2.tgz",

src/pages/zhjy/zhjytbjy/index.vue

@@ -1,8 +1,8 @@
 <template>
-  <common-header/>
+  <common-header />
   <div class="content">
     <div class="title">
-      同步教研 <span>智慧校园</span><span>-同步教研</span>
+      同步教研 <span>智慧教研-</span><span>同步教研</span>
     </div>
     <div class="jy-header">
       <p>同步教研</p>
@@ -48,7 +48,7 @@
     </div>
 
     <div class="list-right">
-      <div>
+      <div @click="tbjynrDetail">
         <img src="@/assets/img/zhjy/img_11.png" alt="" />
         <div>
           <p>走进生肖文化——寅虎卯兔</p>
@@ -56,7 +56,7 @@
           <div><img src="@/assets/img/zhjy/img_3.png" alt="" />尚老师</div>
         </div>
       </div>
-      <div>
+      <div @click="tbjynrDetail">
         <img src="@/assets/img/zhjy/img_2.png" alt="" />
         <div>
           <p>走进生肖文化——寅虎卯兔</p>
@@ -64,7 +64,7 @@
           <div><img src="@/assets/img/zhjy/img_3.png" alt="" />尚老师</div>
         </div>
       </div>
-      <div>
+      <div @click="tbjynrDetail">
         <img src="@/assets/img/zhjy/img_1.png" alt="" />
         <div>
           <p>走进生肖文化——寅虎卯兔</p>
@@ -72,7 +72,7 @@
           <div><img src="@/assets/img/zhjy/img_3.png" alt="" />尚老师</div>
         </div>
       </div>
-      <div>
+      <div @click="tbjynrDetail">
         <img src="@/assets/img/zhjy/img_7.png" alt="" />
         <div>
           <p>走进生肖文化——寅虎卯兔</p>
@@ -81,7 +81,7 @@
         </div>
       </div>
 
-      <div>
+      <div @click="tbjynrDetail">
         <img src="@/assets/img/zhjy/img_3.png" alt="" />
         <div>
           <p>走进生肖文化——寅虎卯兔</p>
@@ -89,7 +89,7 @@
           <div><img src="@/assets/img/zhjy/img_3.png" alt="" />尚老师</div>
         </div>
       </div>
-      <div>
+      <div @click="tbjynrDetail">
         <img src="@/assets/img/zhjy/img_8.png" alt="" />
         <div>
           <p>走进生肖文化——寅虎卯兔</p>
@@ -98,8 +98,24 @@
         </div>
       </div>
     </div>
-    <div class="block">
-      <el-pagination layout="prev, pager, next" :total="1000"> </el-pagination>
+    <div class="footer">
+      <div
+        style="
+          width: 1280px;
+          height: 50px;
+
+          position: relative;
+          margin: 0 auto;
+        "
+      >
+        <el-pagination
+          background
+          layout="prev, pager, next"
+          :total="1000"
+          style="position: absolute; top: 0; right: 0"
+        >
+        </el-pagination>
+      </div>
     </div>
   </div>
 </template>
@@ -108,8 +124,8 @@
 import commonHeader from "@/components/header/index.vue";
 export default {
   name: "index",
-  components:{
-    commonHeader
+  components: {
+    commonHeader,
   },
   data() {
     return {
@@ -117,6 +133,11 @@ export default {
       njActiveName: "b",
     };
   },
+  methods: {
+    tbjynrDetail() {
+      this.$router.push({ name: "zhjy_zhjytbjy_tbjynr" });
+    },
+  },
 };
 </script>
 <style lang="scss" scoped>
@@ -209,7 +230,7 @@ export default {
   margin: 0 auto;
   display: flex;
   flex-direction: column;
-  margin-bottom: 50px;
+  margin-bottom: 20px;
   div {
     display: flex;
     span {
@@ -231,11 +252,16 @@ export default {
   display: flex;
   flex-wrap: wrap;
   margin: 0 auto;
-  div {
-    width: 50%;
+  & > div {
+    box-sizing: border-box;
+    width: calc(50% - 40px);
     height: 150px;
     display: flex;
     margin-bottom: 20px;
+    box-shadow: 0px 15px 24px 0px rgba(161, 153, 168, 0.18);
+    &:nth-of-type(odd) {
+      margin-right: 40px;
+    }
     img {
       height: 150px;
       margin-right: 12px;
@@ -289,11 +315,12 @@ export default {
   }
 }
 
-.block {
-  width: 350px;
+.footer {
+  width: 100%;
   height: 50px;
-  margin: 0 auto;
-  margin-top: 50px;
+  margin-top: 100px;
+
+  display: inline-block;
 }
 </style>
 

src/pages/zhjy/zhjytbjy/tbjynr/index.vue

@@ -0,0 +1,227 @@
+<template>
+  <common-header />
+  <div class="content">
+    <div class="title">
+      <div>内容 <span>智慧教研-同步教研-</span><span>内容</span></div>
+    </div>
+    <div class="bk-header">
+      <p>六年级数学《从课本到培优》</p>
+      <p><span>责任教师:吴雷霞 </span><span>机构名称:桐乡市互联网学校</span></p>
+      <p>
+        简介：<br />
+        小学数学《从课本到培优
+        》课程（4-6年级）由桐乡市互联网学校嘉兴市数学名师吴雷霞团队研发。本课程在结构安排上与教材同步，紧扣教学大纲所囊括的知识要点。在难度设置上，
+        先选取中低难度问题，由浅入深，循序渐进，从每一课时中选取具有思维深度的问题进行讲解和练习，达到对课本知识的深入拓展,轻松实现从课本到培优。课程着重以思维训练为核心，
+        培养学生学会独立思考，体会数学的基本思想和思维方式。
+      </p>
+    </div>
+    <div class="class-list">
+      <p>课程章节大纲</p>
+      <div>01单元</div>
+      <ul>
+        <li>章节一<span>进入</span></li>
+        <li>章节二<span>进入</span></li>
+        <li>02 行程问题</li>
+        <li>03 过桥问题</li>
+        <li>04 流水问题</li>
+        <li>05 工程问题</li>
+        <li>06 有趣的进制</li>
+        <li>07 生活中的百分数问题</li>
+        <li>08 百分数应用题</li>
+        <li>09 圆柱的表面积（一）</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+import commonHeader from "@/components/header/index.vue";
+export default {
+  name: "index",
+  components: {
+    commonHeader,
+  },
+  data() {
+    return {
+      kmActiveName: "b",
+      njActiveName: "b",
+    };
+  },
+  methods: {},
+};
+</script>
+
+<style lang="scss" scoped>
+.content {
+  width: 100%;
+  min-width: 1280px;
+  margin: 0 auto;
+}
+.title {
+  width: 100%;
+
+  height: 60px;
+  line-height: 60px;
+  font-size: 18px;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 400;
+  color: #050026;
+  background: #ffffff;
+  margin-bottom: 40px;
+  box-shadow: 0px 1px 10px 0px rgba(17, 46, 74, 0.1);
+  div {
+    width: 1280px;
+
+    margin: 0 auto;
+    span:first-of-type {
+      width: 56px;
+      height: 20px;
+      font-size: 14px;
+      font-family: PingFangSC, PingFangSC-Regular;
+      font-weight: 400;
+      text-align: left;
+      color: #949494;
+      line-height: 20px;
+      margin-left: 30px;
+    }
+    span:last-of-type {
+      width: 56px;
+      height: 20px;
+      font-size: 14px;
+      font-family: PingFangSC, PingFangSC-Regular;
+      font-weight: 400;
+      text-align: left;
+      color: #000000;
+      line-height: 20px;
+    }
+  }
+}
+.bk-header {
+  width: 1280px;
+  height: 322px;
+  margin: 0 auto;
+  background: url("@/assets/img/zhjyzxxx/xtbk_bg.png");
+  background-size: 100% 322px;
+  background-repeat: no-repeat;
+  padding-top: 40px;
+  padding-left: 40px;
+  border-radius: 12px;
+  p:first-of-type {
+    width: 364px;
+    height: 40px;
+    font-size: 28px;
+    font-family: PingFangSC, PingFangSC-Semibold;
+    font-weight: 600;
+    text-align: left;
+    color: #ffffff;
+    line-height: 40px;
+    margin-bottom: 13px;
+  }
+  span {
+    display: inline-block;
+    width: 220px;
+    height: 22px;
+    font-size: 16px;
+    font-family: PingFangSC, PingFangSC-Regular;
+    font-weight: 400;
+    text-align: left;
+    color: #ffffff;
+    line-height: 22px;
+    margin-bottom: 32px;
+  }
+  p:last-of-type {
+    width: 1138px;
+    height: 83px;
+    font-size: 14px;
+    font-family: PingFangSC, PingFangSC-Regular;
+    font-weight: 400;
+    text-align: left;
+    color: #ffffff;
+    line-height: 20px;
+  }
+}
+.class-list {
+  width: 1280px;
+  height: 812px;
+  margin: 0 auto;
+  margin-top: 35px;
+  background: #ffffff;
+  border-radius: 12px;
+
+  box-shadow: 2px 10px 24px 0px rgba(161, 153, 168, 0.18);
+  padding: 20px;
+  p {
+    width: 96px;
+    height: 32px;
+    font-size: 16px;
+    font-family: PingFangSC, PingFangSC-Semibold;
+    font-weight: 600;
+    text-align: left;
+    color: #171721;
+    line-height: 32px;
+    margin: 26px 19px;
+  }
+  div {
+    width: 1240px;
+    height: 40px;
+    background: #00a3ff;
+    border-radius: 16px 16px 0px 0px;
+    padding-left: 26px;
+    font-size: 14px;
+    font-family: PingFangSC, PingFangSC-Semibold;
+    font-weight: 600;
+    text-align: left;
+    color: #ffffff;
+    line-height: 40px;
+  }
+  ul {
+    li {
+      width: 1220px;
+      height: 50px;
+      line-height: 50px;
+      padding-left: 20px;
+      font-size: 14px;
+      font-family: PingFangSC, PingFangSC-Semibold;
+      font-weight: 600;
+      text-align: left;
+      color: #050026;
+      margin: 15px;
+      //   opacity: 0.05;
+
+      background: rgba(#00a3ff, 0.05);
+      border-radius: 16px 16px 0px 0px;
+      &:nth-of-type(1),
+      &:nth-of-type(2) {
+        display: flex;
+        justify-content: space-between;
+        padding-left: 20px;
+        border-bottom: 3px dashed #979797;
+        span {
+          display: inline-block;
+          width: 102px;
+          height: 32px;
+          border: 1px solid #00a3ff;
+
+          border-radius: 17px;
+          font-size: 12px;
+          font-family: PingFangSC, PingFangSC-Medium;
+          font-weight: 500;
+          text-align: center;
+          color: #00a3ff;
+
+          line-height: 32px;
+          margin-right: 60px;
+        }
+      }
+    }
+  }
+}
+.footer {
+  width: 100%;
+  height: 50px;
+  margin-top: 100px;
+  border: 1px solid blue;
+  display: inline-block;
+}
+</style>
+

src/pages/zhjy/zhjyxtbk/index.vue

@@ -1,8 +1,8 @@
 <template>
-  <common-header/>
+  <common-header />
   <div class="content">
     <div class="title">
-      协同备课 <span>智慧校园</span><span>-协同备课</span>
+      协同备课 <span>智慧教研-</span><span>协同备课</span>
     </div>
     <div class="jy-header">
       <p>协同备课</p>
@@ -22,7 +22,7 @@
           <el-tab-pane label="二年级" name="d"></el-tab-pane>
           <el-tab-pane label="三年级" name="e"></el-tab-pane>
           <el-tab-pane label="四年级" name="f"></el-tab-pane>
-           <el-tab-pane label="五年级" name="g"></el-tab-pane>
+          <el-tab-pane label="五年级" name="g"></el-tab-pane>
           <el-tab-pane label="六年级" name="h"></el-tab-pane>
           <el-tab-pane label="初一" name="i"></el-tab-pane>
           <el-tab-pane label="初二" name="j"></el-tab-pane>
@@ -31,7 +31,6 @@
           <el-tab-pane label="高二" name="m"></el-tab-pane>
           <el-tab-pane label="高三" name="n"></el-tab-pane>
           <el-tab-pane label="其他" name="o"></el-tab-pane>
-
         </el-tabs>
       </div>
 
@@ -47,75 +46,70 @@
         </el-tabs>
       </div>
     </div>
-
-    <div class="ysgc-kind">
-      <ul class="specail">
-        <li class="kc" v-for="kc in 4" :key="kc">
-          <img class="kc-back" src="@/assets/img/zhjyzxxx/img_5.png" alt="" />
-          <div class="kc-des">
-            <p class="kc-name">安徒生世界插画</p>
-            <div class="rate">
-              <img
-                v-for="star in 5"
-                :key="star"
-                src="@/assets/img/zhjyzxxx/star.png"
-                alt=""
-              />
-            </div>
-          </div>
-          <div class="zan">
-            <img src="@/assets/img/zhjyzxxx/zan.png" /> 10w+
-            <img src="@/assets/img/zhjyzxxx/xin.png" alt="" />14w+
-          </div>
-        </li>
-      </ul>
-    </div>
-    <div class="ysgc-kind">
-      <ul class="specail">
-        <li class="kc" v-for="kc in 4" :key="kc">
-          <img class="kc-back" src="@/assets/img/zhjyzxxx/img_3.png" alt="" />
-          <div class="kc-des">
-            <p class="kc-name">安徒生世界插画</p>
-            <div class="rate">
-              <img
-                v-for="star in 5"
-                :key="star"
-                src="@/assets/img/zhjyzxxx/star.png"
-                alt=""
-              />
-            </div>
-          </div>
-          <div class="zan">
-            <img src="@/assets/img/zhjyzxxx/zan.png" /> 10w+
-            <img src="@/assets/img/zhjyzxxx/xin.png" alt="" />14w+
+    <div class="list-right">
+      <div>
+        <img src="@/assets/img/zhjy/img.png" alt="" />
+        <div>
+          <p>走进生肖文化——寅虎卯兔</p>
+          <p>领略生肖传奇，品味传统文化！</p>
+          <div>
+            <img src="@/assets/img/zhjy/img_3.png" alt="" />尚老师<span
+              @click="xtbknrDetail"
+              >查看</span
+            >
           </div>
-        </li>
-      </ul>
-    </div>
-    <div class="ysgc-kind">
-      <ul class="specail">
-        <li class="kc" v-for="kc in 4" :key="kc">
-          <img class="kc-back" src="@/assets/img/zhjyzxxx/img_1.png" alt="" />
-          <div class="kc-des">
-            <p class="kc-name">安徒生世界插画</p>
-            <div class="rate">
-              <img
-                v-for="star in 5"
-                :key="star"
-                src="@/assets/img/zhjyzxxx/star.png"
-                alt=""
-              />
-            </div>
+        </div>
+      </div>
+      <div>
+        <img src="@/assets/img/zhjy/img_8.png" alt="" />
+        <div>
+          <p>走进生肖文化——寅虎卯兔</p>
+          <p>领略生肖传奇，品味传统文化！</p>
+          <div>
+            <img src="@/assets/img/zhjy/img_3.png" alt="" />尚老师<span
+              @click="xtbknrDetail"
+              >查看</span
+            >
           </div>
-          <div class="zan">
-            <img src="@/assets/img/zhjyzxxx/zan.png" /> 10w+
-            <img src="@/assets/img/zhjyzxxx/xin.png" alt="" />14w+
+        </div>
+      </div>
+      <div>
+        <img src="@/assets/img/zhjy/img_1.png" alt="" />
+        <div>
+          <p>走进生肖文化——寅虎卯兔</p>
+          <p>领略生肖传奇，品味传统文化！</p>
+          <div>
+            <img src="@/assets/img/zhjy/img_3.png" alt="" />尚老师<span
+              @click="xtbknrDetail"
+              style="
+                border: 1px solid #00a3ff;
+                background: none;
+                color: #00a3ff;
+              "
+              >结束备课</span
+            >
           </div>
-        </li>
-      </ul>
+        </div>
+      </div>
     </div>
-    <div class="block">
-      <el-pagination layout="prev, pager, next" :total="1000"> </el-pagination>
+    <div class="footer">
+      <div
+        style="
+          width: 1280px;
+          height: 50px;
+
+          position: relative;
+          margin: 0 auto;
+        "
+      >
+        <el-pagination
+          background
+          layout="prev, pager, next"
+          :total="1000"
+          style="position: absolute; top: 0; right: 0"
+        >
+        </el-pagination>
+      </div>
     </div>
   </div>
 </template>
@@ -124,8 +118,8 @@
 import commonHeader from "@/components/header/index.vue";
 export default {
   name: "index",
-  components:{
-    commonHeader
+  components: {
+    commonHeader,
   },
   data() {
     return {
@@ -133,6 +127,11 @@ export default {
       njActiveName: "b",
     };
   },
+  methods: {
+    xtbknrDetail() {
+      this.$router.push({ name: "zhjy_zhjyxtbk_xtbknr" });
+    },
+  },
 };
 </script>
 
@@ -161,7 +160,7 @@ export default {
     text-align: left;
     color: #949494;
     line-height: 20px;
-  margin-left: 30px;
+    margin-left: 30px;
   }
   span:last-of-type {
     width: 56px;
@@ -227,6 +226,7 @@ export default {
   margin: 0 auto;
   display: flex;
   flex-direction: column;
+  margin-bottom: 20px;
   div {
     display: flex;
 
@@ -244,130 +244,98 @@ export default {
     }
   }
 }
-.ysgc-kind {
-  // width: 1650px;
+
+.list-right {
   width: 1280px;
+  display: flex;
+  flex-wrap: wrap;
   margin: 0 auto;
-  .specail {
-    width: 100%;
+
+  & > div {
+    box-sizing: border-box;
+    width: calc(50% - 40px);
+    height: 150px;
     display: flex;
-    flex-wrap: wrap;
-    li {
-      margin: 0 13px 17px 0;
-      overflow: hidden;
-      box-shadow: 0px 10px 24px 0px rgba(161, 153, 168, 0.18);
+    margin-bottom: 20px;
+    box-shadow: 0px 15px 24px 0px rgba(161, 153, 168, 0.18);
+    &:nth-of-type(odd) {
+      margin-right: 40px;
     }
-    .kind-name {
-      width: 300px;
-      height: 274px;
-      background: #ffffff;
-      border-radius: 12px;
-      box-shadow: 0px 10px 24px 0px rgba(161, 153, 168, 0.18);
-      padding: 49px 20px;
-      box-sizing: border-box;
-      background-image: url("@/assets/img/zhjyzxxx/img_1.png");
-      background-position: center -15px;
-      h3 {
-        width: 263px;
-        height: 37px;
-        font-size: 26px;
+    img {
+      height: 150px;
+      margin-right: 12px;
+      border-radius: 12px 0px 0px 12px;
+    }
+    & > div {
+      display: inline-block;
+      display: flex;
+      flex-direction: column;
+
+      margin-top: 10px;
+      position: relative;
+      p:first-of-type {
+        display: inline-block;
+        vertical-align: top;
+        font-size: 16px;
         font-family: PingFangSC, PingFangSC-Medium;
         font-weight: 500;
         text-align: left;
         color: #050026;
-        line-height: 37px;
+        line-height: 22px;
       }
-      p {
-        width: 246px;
-        height: 22px;
-        font-size: 16px;
+      p:last-of-type {
+        display: inline-block;
+        font-size: 14px;
         font-family: PingFangSC, PingFangSC-Regular;
         font-weight: 400;
         text-align: left;
-        color: #050026;
-        line-height: 22px;
-        margin-top: 25px;
-      }
-      .btn-more {
-        width: 111px;
-        height: 31px;
-        padding: 2px;
-        box-sizing: border-box;
-        border-radius: 38px;
-        margin-top: 45px;
-        background: linear-gradient(127deg, #3f64ff 10%, #8f78f8 91%);
-        button {
-          width: 100%;
-          height: 100%;
-          padding-left: 6px;
-          background: #fff;
-          border-radius: 38px;
-          font-weight: 400;
-          font-size: 14px;
-          color: #6c5dd3;
-          line-height: 20px;
-          letter-spacing: 0.6px;
-          border-image: linear-gradient(127deg, #3f64ff 10%, #8f78f8 91%) 1 1;
-        }
-      }
-    }
-    .kc {
-      width: 300px;
-      height: 278px;
-      background: #ffffff;
-      border-radius: 12px;
-      box-shadow: 0px 10px 24px 0px rgba(161, 153, 168, 0.18);
-      position: relative;
-      .kc-back {
-        width: 100%;
-      }
-      .kc-des {
-        padding: 11px 6px;
-        box-sizing: border-box;
-        .kc-name {
-          height: 22px;
-          font-size: 16px;
-          font-family: PingFangSC, PingFangSC-Regular;
-          font-weight: 400;
-          color: #000000;
-          line-height: 22px;
-        }
-        .rate {
-          display: flex;
-          margin: 11px 0;
-          img {
-            margin-right: 6px;
-          }
-        }
+        color: #949494;
+        line-height: 20px;
       }
-      .zan {
-        position: absolute;
-        top: 0;
-        right: 0;
-        width: 173px;
-        height: 34px;
-        line-height: 34px;
+      div {
+        width: 300px;
+        height: 20px;
+        display: inline-block;
         font-size: 14px;
-        color: #fff;
-        display: flex;
-        padding-left: 20px;
-        background: rgba(0, 0, 0, 0.59);
-        border-radius: 0px 12px 0px 12px;
+        font-family: PingFangSC, PingFangSC-Medium;
+        font-weight: 500;
+        text-align: left;
+        color: #050026;
+        line-height: 20px;
+        margin-top: 60px;
         img {
           display: inline-block;
-          width: 17px;
-          height: 16px;
-          margin: 8px 5px 0 10px;
+          width: 24px;
+          height: 24px;
+          border-radius: 50%;
+          margin-right: 8px;
+        }
+        span {
+          display: inline-block;
+          width: 71px;
+          height: 26px;
+          line-height: 26px;
+          opacity: 0.8;
+          background: linear-gradient(90deg, #00a3ff, #57c38f);
+          border-radius: 13px;
+          font-size: 14px;
+          font-family: PingFangSC, PingFangSC-Regular;
+          font-weight: 400;
+          text-align: center;
+          color: #ffffff;
+          letter-spacing: 0.6px;
+          float: right;
         }
       }
     }
   }
 }
-.block {
-  width: 350px;
+.footer {
+  width: 100%;
   height: 50px;
-  margin: 0 auto;
-  margin-top: 50px;
+  margin-top: 100px;
+
+  display: inline-block;
 }
 </style>
 

src/pages/zhjy/zhjyxtbk/xtbknr/index.vue

@@ -0,0 +1,227 @@
+<template>
+  <common-header />
+  <div class="content">
+    <div class="title">
+      <div>内容 <span>智慧教研-协同备课-</span><span>内容</span></div>
+    </div>
+    <div class="bk-header">
+      <p>六年级数学《从课本到培优》</p>
+      <p><span>责任教师:吴雷霞 </span><span>机构名称:桐乡市互联网学校</span></p>
+      <p>
+        简介：<br />
+        小学数学《从课本到培优
+        》课程（4-6年级）由桐乡市互联网学校嘉兴市数学名师吴雷霞团队研发。本课程在结构安排上与教材同步，紧扣教学大纲所囊括的知识要点。在难度设置上，
+        先选取中低难度问题，由浅入深，循序渐进，从每一课时中选取具有思维深度的问题进行讲解和练习，达到对课本知识的深入拓展,轻松实现从课本到培优。课程着重以思维训练为核心，
+        培养学生学会独立思考，体会数学的基本思想和思维方式。
+      </p>
+    </div>
+    <div class="class-list">
+      <p>课程章节大纲</p>
+      <div>01单元</div>
+      <ul>
+        <li>章节一<span>备课</span></li>
+        <li>章节二<span>备课</span></li>
+        <li>02 行程问题</li>
+        <li>03 过桥问题</li>
+        <li>04 流水问题</li>
+        <li>05 工程问题</li>
+        <li>06 有趣的进制</li>
+        <li>07 生活中的百分数问题</li>
+        <li>08 百分数应用题</li>
+        <li>09 圆柱的表面积（一）</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+import commonHeader from "@/components/header/index.vue";
+export default {
+  name: "index",
+  components: {
+    commonHeader,
+  },
+  data() {
+    return {
+      kmActiveName: "b",
+      njActiveName: "b",
+    };
+  },
+  methods: {},
+};
+</script>
+
+<style lang="scss" scoped>
+.content {
+  width: 100%;
+  min-width: 1280px;
+  margin: 0 auto;
+}
+.title {
+  width: 100%;
+
+  height: 60px;
+  line-height: 60px;
+  font-size: 18px;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 400;
+  color: #050026;
+  background: #ffffff;
+  margin-bottom: 40px;
+  box-shadow: 0px 1px 10px 0px rgba(17, 46, 74, 0.1);
+  div {
+    width: 1280px;
+
+    margin: 0 auto;
+    span:first-of-type {
+      width: 56px;
+      height: 20px;
+      font-size: 14px;
+      font-family: PingFangSC, PingFangSC-Regular;
+      font-weight: 400;
+      text-align: left;
+      color: #949494;
+      line-height: 20px;
+      margin-left: 30px;
+    }
+    span:last-of-type {
+      width: 56px;
+      height: 20px;
+      font-size: 14px;
+      font-family: PingFangSC, PingFangSC-Regular;
+      font-weight: 400;
+      text-align: left;
+      color: #000000;
+      line-height: 20px;
+    }
+  }
+}
+.bk-header {
+  width: 1280px;
+  height: 322px;
+  margin: 0 auto;
+  background: url("@/assets/img/zhjyzxxx/xtbk_bg.png");
+  background-size: 100% 322px;
+  background-repeat: no-repeat;
+  padding-top: 40px;
+  padding-left: 40px;
+  border-radius: 12px;
+  p:first-of-type {
+    width: 364px;
+    height: 40px;
+    font-size: 28px;
+    font-family: PingFangSC, PingFangSC-Semibold;
+    font-weight: 600;
+    text-align: left;
+    color: #ffffff;
+    line-height: 40px;
+    margin-bottom: 13px;
+  }
+  span {
+    display: inline-block;
+    width: 220px;
+    height: 22px;
+    font-size: 16px;
+    font-family: PingFangSC, PingFangSC-Regular;
+    font-weight: 400;
+    text-align: left;
+    color: #ffffff;
+    line-height: 22px;
+    margin-bottom: 32px;
+  }
+  p:last-of-type {
+    width: 1138px;
+    height: 83px;
+    font-size: 14px;
+    font-family: PingFangSC, PingFangSC-Regular;
+    font-weight: 400;
+    text-align: left;
+    color: #ffffff;
+    line-height: 20px;
+  }
+}
+.class-list {
+  width: 1280px;
+  height: 812px;
+  margin: 0 auto;
+  margin-top: 35px;
+  background: #ffffff;
+  border-radius: 12px;
+
+  box-shadow: 2px 10px 24px 0px rgba(161, 153, 168, 0.18);
+  padding: 20px;
+  p {
+    width: 96px;
+    height: 32px;
+    font-size: 16px;
+    font-family: PingFangSC, PingFangSC-Semibold;
+    font-weight: 600;
+    text-align: left;
+    color: #171721;
+    line-height: 32px;
+    margin: 26px 19px;
+  }
+  div {
+    width: 1240px;
+    height: 40px;
+    background: #00a3ff;
+    border-radius: 16px 16px 0px 0px;
+    padding-left: 26px;
+    font-size: 14px;
+    font-family: PingFangSC, PingFangSC-Semibold;
+    font-weight: 600;
+    text-align: left;
+    color: #ffffff;
+    line-height: 40px;
+  }
+  ul {
+    li {
+      width: 1220px;
+      height: 50px;
+      line-height: 50px;
+      padding-left: 20px;
+      font-size: 14px;
+      font-family: PingFangSC, PingFangSC-Semibold;
+      font-weight: 600;
+      text-align: left;
+      color: #050026;
+      margin: 15px;
+      //   opacity: 0.05;
+
+      background: rgba(#00a3ff, 0.05);
+      border-radius: 16px 16px 0px 0px;
+      &:nth-of-type(1),
+      &:nth-of-type(2) {
+        display: flex;
+        justify-content: space-between;
+        padding-left: 20px;
+        border-bottom: 3px dashed #979797;
+        span {
+          display: inline-block;
+          width: 102px;
+          height: 32px;
+          border: 1px solid #00a3ff;
+
+          border-radius: 17px;
+          font-size: 12px;
+          font-family: PingFangSC, PingFangSC-Medium;
+          font-weight: 500;
+          text-align: center;
+          color: #00a3ff;
+
+          line-height: 32px;
+          margin-right: 60px;
+        }
+      }
+    }
+  }
+}
+.footer {
+  width: 100%;
+  height: 50px;
+  margin-top: 100px;
+  border: 1px solid blue;
+  display: inline-block;
+}
+</style>
+

src/pages/zhjy/zhjyzxxx/index.vue

@@ -1,8 +1,8 @@
 <template>
-  <common-header/>
+  <common-header />
   <div class="content">
     <div class="title">
-      在线学习 <span>智慧校园</span><span>-在线学习</span>
+      在线学习 <span>智慧教研-</span><span>在线学习</span>
     </div>
     <div class="jy-header">
       <p>在线学习</p>
@@ -45,11 +45,23 @@
           <el-tab-pane label="毛笔" name="f"></el-tab-pane>
         </el-tabs>
       </div>
+
+      <div>
+        <span>分类</span>
+        <el-tabs v-model="flActiveName" @tab-click="handleClick">
+          <el-tab-pane label="全部" name="a"></el-tab-pane>
+          <el-tab-pane label="word" name="b"></el-tab-pane>
+          <el-tab-pane label="ppt" name="c"></el-tab-pane>
+          <el-tab-pane label="pdf" name="d"></el-tab-pane>
+          <el-tab-pane label="excel" name="e"></el-tab-pane>
+          <el-tab-pane label="视频" name="f"></el-tab-pane>
+        </el-tabs>
+      </div>
     </div>
 
     <div class="ysgc-kind">
       <ul class="specail">
-        <li class="kc" v-for="kc in 4" :key="kc">
+        <li class="kc" v-for="kc in 5" :key="kc">
           <img class="kc-back" src="@/assets/img/zhjyzxxx/img_3.png" alt="" />
           <div class="kc-des">
             <p class="kc-name">安徒生世界插画</p>
@@ -71,7 +83,7 @@
     </div>
     <div class="ysgc-kind">
       <ul class="specail">
-        <li class="kc" v-for="kc in 4" :key="kc">
+        <li class="kc" v-for="kc in 5" :key="kc">
           <img class="kc-back" src="@/assets/img/zhjyzxxx/img_4.png" alt="" />
           <div class="kc-des">
             <p class="kc-name">安徒生世界插画</p>
@@ -93,7 +105,7 @@
     </div>
     <div class="ysgc-kind">
       <ul class="specail">
-        <li class="kc" v-for="kc in 4" :key="kc">
+        <li class="kc" v-for="kc in 5" :key="kc">
           <img class="kc-back" src="@/assets/img/zhjyzxxx/img_5.png" alt="" />
           <div class="kc-des">
             <p class="kc-name">安徒生世界插画</p>
@@ -113,8 +125,18 @@
         </li>
       </ul>
     </div>
-    <div class="block">
-      <el-pagination layout="prev, pager, next" :total="1000"> </el-pagination>
+    <div class="footer">
+      <div
+        style="width: 1280px; height: 50px; position: relative; margin: 0 auto"
+      >
+        <el-pagination
+          background
+          layout="prev, pager, next"
+          :total="1000"
+          style="position: absolute; top: 0; right: 0"
+        >
+        </el-pagination>
+      </div>
     </div>
   </div>
 </template>
@@ -123,13 +145,14 @@
 import commonHeader from "@/components/header/index.vue";
 export default {
   name: "index",
-  components:{
-    commonHeader
+  components: {
+    commonHeader,
   },
   data() {
     return {
       kmActiveName: "b",
       njActiveName: "b",
+      flActiveName: "b",
     };
   },
 };
@@ -226,6 +249,7 @@ export default {
   margin: 0 auto;
   display: flex;
   flex-direction: column;
+  margin-bottom: 20px;
   div {
     display: flex;
 
@@ -311,8 +335,8 @@ export default {
       }
     }
     .kc {
-      width: 300px;
-      height: 278px;
+      width: 240px;
+      height: 200x;
       background: #ffffff;
       border-radius: 12px;
       box-shadow: 0px 10px 24px 0px rgba(161, 153, 168, 0.18);
@@ -362,11 +386,12 @@ export default {
     }
   }
 }
-.block {
-  width: 350px;
+.footer {
+  width: 100%;
   height: 50px;
-  margin: 0 auto;
-  margin-top: 50px;
+  margin-top: 100px;
+
+  display: inline-block;
 }
 </style>
 

src/router/index.js

@@ -1,18 +1,18 @@
-import {createRouter, createWebHashHistory} from "vue-router";
+import { createRouter, createWebHashHistory } from "vue-router";
 
 export default createRouter({
-    history: createWebHashHistory(),
-    routes: [
-        {
-            path: '',
-            redirect: '/home'
-        },
-        {
-            path: '/home',
-            name: 'home',
-            title: '首页',
-            component: () => import("~/pages/home/index.vue"),
-        },
+	history: createWebHashHistory(),
+	routes: [
+		{
+			path: '',
+			redirect: '/home'
+		},
+		{
+			path: '/home',
+			name: 'home',
+			title: '首页',
+			component: () => import("~/pages/home/index.vue"),
+		},
 
 		{
 			path: '/zhjy',
@@ -30,18 +30,28 @@ export default createRouter({
 			component: () => import("~/pages/zhjy/zhjyxtbk/index.vue"),
 		},
 		{
+			path: '/zhjy/zhjyxtbk/xtbknr',
+			name: "zhjy_zhjyxtbk_xtbknr",
+			component: () => import("~/pages/zhjy/zhjyxtbk/xtbknr/index.vue"),
+		},
+		{
 			path: '/zhjy/zhjytbjy',
 			name: "zhjy_zhjytbjy",
 			component: () => import("~/pages/zhjy/zhjytbjy/index.vue"),
 		},
 		{
+			path: '/zhjy/zhjytbjy/tbjynr',
+			name: "zhjy_zhjytbjy_tbjynr",
+			component: () => import("~/pages/zhjy/zhjytbjy/tbjynr/index.vue"),
+		},
+		{
 			path: '/ysgc',
 			name: 'ysgc',
 			component: () => import("~/pages/ysgc/index.vue"),
 		},
 		{
-			path:'/ysgc_detail',
-			name:'ysgc_detail',
+			path: '/ysgc_detail',
+			name: 'ysgc_detail',
 			component: () => import('~/pages/ysgc/ysgc_detail/index.vue')
 		},
 		{
@@ -54,18 +64,18 @@ export default createRouter({
 			name: 'tskcz',
 			component: () => import('~/pages/szmsg/tskcz/index.vue'),
 		},
-    {
-      path: '/resource',
-	  name: 'resource',
-      title:'首页',
-      component: () => import("~/pages/courseResources.vue"),
-    },
-    {
-      path: '/resourceAll',
-	  name: 'resourceAll',
-      title:'首页',
-      component: () => import("~/pages/courseResourcesAll.vue"),
-    },
+		{
+			path: '/resource',
+			name: 'resource',
+			title: '首页',
+			component: () => import("~/pages/courseResources.vue"),
+		},
+		{
+			path: '/resourceAll',
+			name: 'resourceAll',
+			title: '首页',
+			component: () => import("~/pages/courseResourcesAll.vue"),
+		},
 		{
 			path: '/zbkt',
 			title: '直播课堂',
@@ -108,11 +118,11 @@ export default createRouter({
 			]
 		},
 		{
-            path: '/resourceChapter',
-            name: 'resourceChapter',
-            title: '课程资源章节',
-            component: () => import("~/pages/courseResourcesChapter.vue"),
-        },
+			path: '/resourceChapter',
+			name: 'resourceChapter',
+			title: '课程资源章节',
+			component: () => import("~/pages/courseResourcesChapter.vue"),
+		},
 	]
 
 })