提交

src/pages/szmsg/index.vue

@@ -5,8 +5,8 @@
     <div class="ysgc-kind">
       <ul class="specail">
         <li class="kind-name">
-          <router-link to="/tskcz">
-            <h3>特色课程展</h3>
+          <router-link to="/tzkc">
+            <h3>拓展课程</h3>
             <p>辅导机构课程 场馆课程</p>
             <div class="btn-more">
               <button>查看更多</button>
@@ -16,29 +16,32 @@
         <li class="kc" v-for="kc in 4" :key="kc">
           <img class="kc-back" src="../../assets/ysgc/kc3.png" alt="" />
           <div class="kc-des">
-            <p class="kc-name">安徒生世界插画</p>
-            <div class="rate">
+            <p class="kc-name">学生二</p>
+            <!-- <div class="rate">
               <img
                 v-for="star in 5"
                 :key="star"
                 src="../../assets/ysgc/star.png"
                 alt=""
               />
-            </div>
+            </div> -->
           </div>
-          <div class="zan">
+          <!-- <div class="zan">
             <img src="../../assets/ysgc/zan.png" /> 10w+
             <img src="../../assets/ysgc/xin.png" alt="" />14w+
-          </div>
+          </div> -->
         </li>
       </ul>
       <ul class="specail">
         <li class="kind-name">
-          <h3>艺术联盟</h3>
+          <router-link to="/yslm">
+            <h3>艺术联盟</h3>
           <p>辅导机构课程 场馆课程</p>
           <div class="btn-more">
             <button>查看更多</button>
           </div>
+          </router-link>
+          
         </li>
         <li class="kc" v-for="kc in 1" :key="kc">
           <img class="kc-back" src="../../assets/ysgc/kc3.png" alt="" />
@@ -145,7 +148,7 @@ import { ref } from "vue";
             font-size: 16px;
             font-family: PingFangSC, PingFangSC-Regular;
             font-weight: 400;
-            color: #000000;
+            color: #050026;
             line-height: 22px;
           }
           .rate {

src/pages/szmsg/tskcz/index.vue

@@ -5,7 +5,7 @@
       特色课程展 <span>数字美术馆</span><span>-特色课程展</span>
     </div>
     <div class="header">
-      <p>特色课程展</p>
+      <p>拓展课程</p>
       <div class="search">
         <input v-model="searMsg" type="text" placeholder="搜索关键字" />
         <span class="inp-sear"></span>
@@ -14,38 +14,6 @@
 
     <div class="nav">
       <div>
-        <span>年级</span>
-        <el-tabs v-model="njActiveName" @tab-click="handleClick">
-          <el-tab-pane label="全部" name="a"></el-tab-pane>
-          <el-tab-pane label="幼儿园" name="b"></el-tab-pane>
-          <el-tab-pane label="一年级" name="c"></el-tab-pane>
-          <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="third"></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="g"></el-tab-pane>
-          <el-tab-pane label="高一" name="k"></el-tab-pane>
-          <el-tab-pane label="高二" name="l"></el-tab-pane>
-          <el-tab-pane label="高三" name="m"></el-tab-pane>
-          <el-tab-pane label="其他" name="m"></el-tab-pane>
-        </el-tabs>
-      </div>
-
-      <div>
-        <span>科目</span>
-        <el-tabs v-model="kmActiveName" @tab-click="handleClick">
-          <el-tab-pane label="全部" name="a"></el-tab-pane>
-          <el-tab-pane label="音乐" name="b"></el-tab-pane>
-          <el-tab-pane label="美术" name="c"></el-tab-pane>
-          <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-tabs>
-      </div>
-      <div>
         <span>分类</span>
         <el-tabs v-model="kmActiveName" @tab-click="handleClick">
           <el-tab-pane label="全部" name="a"></el-tab-pane>
@@ -55,29 +23,31 @@
       </div>
     </div>
 
-    <div v-for="ys in 3" :key="ys" class="ysgc-kind">
+    <div v-for="ys in 2" :key="ys" class="ysgc-kind">
       <ul class="specail">
         <li class="kc" v-for="kc in 4" :key="kc">
-          <img
+          <router-link to="/tzkc_detail">
+            <img
             class="kc-back"
             src="@/assets/ysgc/kc3.png"
             alt=""
           />
           <div class="kc-des">
-            <p class="kc-name">安徒生世界插画</p>
-            <div class="rate">
+            <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">
+            </div> -->
+             <!-- <div class="zan">
             <img src="@/assets/ysgc/zan.png" /> 10w+
             <img src="@/assets/ysgc/xin.png" alt="" />14w+
+          </div> -->
           </div>
+          </router-link>
         </li>
       </ul>
     </div>
@@ -87,21 +57,13 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import commonHeader from "@/components/header/index.vue";
-export default {
-  name: "index",
-  components:{
-    commonHeader
-  },
-  data() {
-    return {
-      kmActiveName: "b",
-      njActiveName: "b",
-      searMsg:'',
-    };
-  },
-};
+import { ref } from "vue";
+const name=ref('index');
+const kmActiveName = ref('a')
+const njActiveName = ref('a')
+const searMsg = ref('');
 </script>
 
 <style lang="scss" scoped>

src/pages/szmsg/tzkc/tzkc_detail/index.vue

@@ -0,0 +1,150 @@
+<template>
+  <common-header />
+  <div class="tzkc_detail">
+    <div class="top">
+      <div class="top_nav">
+        <div class="title">详情</div>
+        <div class="sub_title">
+          艺术广场 - 学生优秀作业 - <span class="t_detail">详情</span>
+        </div>
+      </div>
+    </div>
+    <div class="content">
+      <div class="ad">
+        <img class="img" src="../../../../assets/ysgc/tzkc1.png" alt="" />
+        <div class="notice">
+          <h3 class="n_title">通知公告</h3>
+          <div class="n_nav">
+            <el-timeline>
+              <el-timeline-item
+                v-for="(activity, index) in activities"
+                :key="index"
+                :icon="activity.icon"
+                :type="activity.type"
+                :color="activity.color"
+                :size="activity.size"
+                :hollow="activity.hollow"
+                :timestamp="activity.timestamp"
+              >
+                {{ activity.content }}
+              </el-timeline-item>
+            </el-timeline>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+  
+<script setup>
+import commonHeader from "@/components/header/index.vue";
+import { MoreFilled } from "@element-plus/icons-vue";
+import { ref } from "vue";
+const name = ref("index");
+const kmActiveName = ref("a");
+const njActiveName = ref("a");
+const searMsg = ref("");
+const activities = [
+  {
+    content:
+      "各省（区、市）、各高校要根据本地实际情况，按照构建社会主义和谐文化的要求，蹈…",
+    timestamp: "一小时前",
+    type: "primary",
+    hollow: true,
+  },
+  {
+    content:
+      "就理论学习、文化艺术、体育竞赛、心理健康和网络文化等各方面广泛开展校园文化活动.形成浓郁的校园文化氛围…",
+    timestamp: "一小时前",
+    type: "primary",
+    hollow: true,
+  },
+  {
+    content:
+      "邀请主办单位领导、著名大学校长、教育专家、高校学工处长、宣传部长、团学组织干部等，就校园文化的基本…",
+    timestamp: "一小时前",
+    type: "primary",
+    hollow: true,
+  },
+  {
+    content:
+      "构建和谐校园过程中的独特作用、途径和方式以及有效载体等进行全方位探讨，为校园文化建设提供理论支…",
+    timestamp: "一小时前",
+    type: "primary",
+    hollow: true,
+  },
+  {
+    content:
+      "构建和谐校园过程中的独特作用、途径和方式以及有效载体等进行全方位探讨，为校园文化建设提供理论支…",
+    timestamp: "一小时前",
+    type: "primary",
+    hollow: true,
+  },
+];
+</script>
+  
+<style lang="scss" scoped>
+.tzkc_detail {
+  width: 100%;
+  margin: 0 auto;
+  background-color: #fcfeff;
+  background-image: url("../../../../assets/ysgc/back.png");
+  background-size: 100%;
+  background-repeat: no-repeat;
+  .top {
+    width: 100%;
+    height: 60px;
+    line-height: 60px;
+    background: #ffffff;
+    box-shadow: 0px 1px 10px 0px rgba(17, 46, 74, 0.1);
+    .top_nav {
+      width: 1650px;
+      min-width: 1280px;
+      margin: 0 auto;
+      display: flex;
+      padding: 0 10px;
+      box-sizing: border-box;
+      .title {
+        font-size: 18px;
+        font-family: PingFangSC, PingFangSC-Regular;
+        font-weight: 400;
+        color: #050026;
+        margin-right: 45px;
+      }
+      .sub_title {
+        font-size: 14px;
+        color: #949494;
+        .t_detail {
+          color: #000;
+        }
+      }
+    }
+  }
+  .content {
+    width: 1650px;
+    min-width: 1280px;
+    margin: 24px auto;
+    .ad {
+      width: 100%;
+      height: 451px;
+      display: flex;
+      .img {
+        width: 1062px;
+        margin-right: 40px;
+      }
+      .notice {
+        width: 320px;
+        height: 451px;
+        background: #ffffff;
+        border-radius: 12px;
+        padding: 33px 24px;
+        box-sizing: border-box;
+        box-shadow: 0px 10px 24px 0px rgba(161, 153, 168, 0.18);
+        overflow-y: scroll;
+      }
+    }
+  }
+}
+</style>
+  
+  

src/pages/szmsg/yslm/index.vue

@@ -0,0 +1,72 @@
+<template>
+    <common-header/>
+    <div class="content">
+      <div class="title">
+        特色课程展 <span>数字美术馆</span><span>-艺术联盟</span>
+      </div>
+      <div class="img">
+        <a href="http://www.namoc.org/quanjing/2016/20170116_msd/index.html">
+        <img src="../../../assets/ysgc/xsysz.png" alt="">
+        </a>
+      </div>
+    </div>
+  </template>
+  
+  <script setup>
+  import commonHeader from "@/components/header/index.vue";
+  import { ref } from "vue";
+  const name=ref('index');
+  const kmActiveName = ref('a')
+  const njActiveName = ref('a')
+  const searMsg = ref('');
+  </script>
+  
+  <style lang="scss" scoped>
+  .content {
+    width: 100%;
+    min-width: 1280px;
+    margin: 0 auto;
+  }
+  .title {
+    width: 1280px;
+    height: 55px;
+    line-height: 55px;
+    font-size: 18px;
+    font-family: PingFangSC, PingFangSC-Regular;
+    font-weight: 400;
+    color: #050026;
+    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: 10px;
+    }
+    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;
+    }
+  }
+  .img{
+    width: 100%;
+    min-width: 1280;
+    margin: 0 auto;
+    img{
+        width: 100%;
+    }
+  }
+ 
+  </style>
+  
+  

src/pages/ysgc/FallsFlow.vue

@@ -1,14 +1,19 @@
 <template>
   <div class="flow">
-    <div v-for="v in imgList()" :key="v">
-      <div v-for="img in v.a" :key="img">
-        <div class="fallimgItem img">
-          <img ref="allImage" :src="img.img" alt="" />
-          <!-- 悬浮遮罩层 -->
-          <div class="img_mask">
-            <div class="author"></div>
+    <div class="flow_lie" v-for="v in imgList()" :key="v">
+      <div class="w_img" v-for="img in v.a" :key="img">
+        <router-link to="/ysgc_detail">
+          <div class="fallimgItem img">
+            <img ref="allImage" :src="img.img" alt="" />
           </div>
-        </div>
+          <div class="des">
+            <p class="name">书中花园</p>
+            <div class="author">
+              <img src="../../assets/ysgc/star.png" alt="" />
+              <span class="author_name">尚老师</span>
+            </div>
+          </div>
+        </router-link>
       </div>
     </div>
   </div>
@@ -19,14 +24,13 @@ export default {
   data() {
     return {
       screenWidth: document.body.clientWidth,
-      col: 4,
+      col: 5,
       list: [],
       categoryId: "",
       type: 1,
     };
   },
-  created() {
-  },
+  created() {},
   mounted() {
     // 监听屏幕宽度变化
     window.onresize = () =>
@@ -34,21 +38,15 @@ export default {
         this.screenWidth = document.body.clientWidth;
       })();
     //   this.imgList()
-    // if (this.screenWidth < 1480) {
-    //   console.log("小于1480");
-    // } else {
-    //   console.log("不小于1480");
-    // }
   },
   watch: {
-    // 监听屏幕宽度变化，确定列数为4列还是3列
     screenWidth(val) {
       this.screenWidth = val;
       if (this.screenWidth < 1480) {
-        this.col = 3;
+        this.col = 4;
         console.log("小于1480,col=", this.col);
       } else {
-        this.col = 4;
+        this.col = 5;
         console.log("不小于1480,col=", this.col);
       }
     },
@@ -56,7 +54,6 @@ export default {
   methods: {
     // 瀑布流
     imgList() {
-      //   console.log('屏幕宽度',document.body.clientWidth);
       if (this.Plist.length !== 0) {
         const res = [];
         for (let i = 0; i < this.col; i++) {
@@ -65,25 +62,23 @@ export default {
             a: [],
           });
         }
-        this.Plist.forEach((img,index) => {    
+        this.Plist.forEach((img, index) => {
           let obj = res[0];
-          let imgs
-          if(!document.getElementById('imgsId'))
-          {
-            imgs = document.createElement('img')
-            imgs.id = "imgsId"
+          let imgs;
+          if (!document.getElementById("imgsId")) {
+            imgs = document.createElement("img");
+            imgs.id = "imgsId";
+          } else {
+            imgs = document.getElementById("imgsId");
           }
-          else{
-            imgs = document.getElementById('imgsId')
-          }
-          imgs.src = img.img
-          img.h = imgs.height
-          img.w = imgs.width
+          imgs.src = img.img;
+          img.h = imgs.height;
+          img.w = imgs.width;
           for (let i = 1; i < res.length; i++) {
             if (res[i].h < obj.h) {
               obj = res[i];
             }
-          } 
+          }
           // 存储图片数据
           obj.a.push(img);
           // 计算图片缩放后的高度，并记录
@@ -96,91 +91,134 @@ export default {
   },
 };
 </script>
-  <style lang="scss" scoped>
+  
+<style lang="scss" scoped>
 .flow {
+  width: 1650px;
   display: flex;
+  .flow_lie {
+    width: 315px;
+    margin-right: 18px;
+    .w_img {
+      position: relative;
+      .des {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 80px;
+        padding: 8px;
+        box-sizing: border-box;
+        .name {
+          font-size: 16px;
+          color: #000;
+          line-height: 26px;
+          font-family: PingFangSC, PingFangSC-Regular;
+        }
+        .author {
+          width: 100%;
+          margin-top: 8px;
+          display: flex;
+          img {
+            width: 24px;
+            height: 24px;
+            border-radius: 50%;
+            margin-right: 5px;
+          }
+          .author_name {
+            font-size: 14px;
+            font-family: PingFangSC, PingFangSC-Medium;
+            color: #050026;
+          }
+        }
+      }
+    }
+  }
 }
 
 .fallimgItem {
   width: 315px;
-  position: relative;
-  margin: 20px 10px;
-  min-width: 377px;
+  // position: relative;
+  margin: 20px 0;
+  min-width: 315px;
+  padding-bottom: 80px;
+  border-radius: 12px;
+  box-shadow: 0px 10px 24px 0px rgba(161, 153, 168, 0.18);
   img {
     width: 100%;
     height: 100%;
     display: block;
+    border: 1px dashed #ccc;
   }
-  .img_mask {
-    width: 100%;
-    height: 100%;
-    border-radius: 15px;
-    position: absolute;
-    left: 0;
-    top: 0;
-    background-color: rgba(0, 0, 0, 0.4);
-    padding: 20px 10px;
-    box-sizing: border-box;
-    // display: none;
-    opacity: 0;
-    transition: 0.5s linear;
-    .img_mask_top {
-      width: 100%;
-      height: 50px;
-      display: flex;
-      justify-content: flex-end;
-      .heart,
-      .car {
-        float: right;
-        width: 50px;
-        height: 50px;
-        background-color: rgba(0, 0, 0, 0.6);
-        border-radius: 5px;
-        line-height: 50px;
-        margin-right: 20px;
-        text-align: center;
-        i {
-          color: #fff;
-          font-size: 25px;
-        }
-      }
-    }
-    .author {
-      width: 93%;
-      color: hsla(0, 0%, 100%, 0.8);
-      display: flex;
-      justify-content: space-between;
-      position: absolute;
-      left: 10px;
-      bottom: 20px;
-      opacity: 1 important;
-      line-height: 36px;
-      font-size: 28px;
-      .left {
-        display: flex;
-        position: relative;
-        .img1 {
-          width: 36px;
-          height: 36px;
-          border-radius: 50%;
-          vertical-align: middle;
-        }
-        .user_name {
-          color: hsla(0, 0%, 100%, 0.8);
-          font-size: 16px;
-          font-weight: 100;
-          margin-left: 16px;
-          vertical-align: middle;
-        }
-      }
-      .left:hover .avatar_imgItem {
-        display: block !important;
-      }
-      .score {
-        font-weight: 100;
-      }
-    }
-  }
+  // .img_mask {
+  //   width: 100%;
+  //   height: 100%;
+  //   border-radius: 15px;
+  //   position: absolute;
+  //   left: 0;
+  //   top: 0;
+  //   background-color: rgba(0, 0, 0, 0.4);
+  //   padding: 20px 10px;
+  //   box-sizing: border-box;
+  //   opacity: 0;
+  //   transition: 0.5s linear;
+  //   .img_mask_top {
+  //     width: 100%;
+  //     height: 50px;
+  //     display: flex;
+  //     justify-content: flex-end;
+  //     .heart,
+  //     .car {
+  //       float: right;
+  //       width: 50px;
+  //       height: 50px;
+  //       background-color: rgba(0, 0, 0, 0.6);
+  //       border-radius: 5px;
+  //       line-height: 50px;
+  //       margin-right: 20px;
+  //       text-align: center;
+  //       i {
+  //         color: #fff;
+  //         font-size: 25px;
+  //       }
+  //     }
+  // }
+  // .author {
+  //   width: 93%;
+  //   color: hsla(0, 0%, 100%, 0.8);
+  //   display: flex;
+  //   justify-content: space-between;
+  //   position: absolute;
+  //   left: 10px;
+  //   bottom: 20px;
+  //   opacity: 1 important;
+  //   line-height: 36px;
+  //   font-size: 28px;
+  //   .left {
+  //     display: flex;
+  //     position: relative;
+  //     .img1 {
+  //       width: 36px;
+  //       height: 36px;
+  //       border-radius: 50%;
+  //       vertical-align: middle;
+  //     }
+  //     .user_name {
+  //       color: hsla(0, 0%, 100%, 0.8);
+  //       font-size: 16px;
+  //       font-weight: 100;
+  //       margin-left: 16px;
+  //       vertical-align: middle;
+  //     }
+  //   }
+  //   .left:hover .avatar_imgItem {
+  //     display: block !important;
+  //   }
+  //   .score {
+  //     font-weight: 100;
+  //   }
+  // }
+  // }
 }
 .fallimgItem:hover .img_mask {
   // display: block;

src/pages/ysgc/FallsImg.vue

@@ -1,176 +0,0 @@
-<template>
-  <!-- <router-link :to="{ name: 'ysgc_detail', params: { id: imgbox.id } }"> -->
-    <div class="fallimgItem img">
-      <img ref = "allImage" :src="imgbox.img" alt="" />
-      <!-- 悬浮遮罩层 -->
-      <div class="img_mask">
-        <!-- 右上角两个小按钮 -->
-        <!-- <div class="img_mask_top">
-          <div class="heart">
-            <i class="iconfont">&#xe8ab;</i>
-          </div>
-          <div class="car">
-            <i class="iconfont">&#xe73d;</i>
-          </div>
-        </div> -->
-        <!-- 作者部分 -->
-        <div class="author">
-          <!-- 左边头像和名称 -->
-          <!-- <router-link
-            :to="{
-              name: 'author',
-              params: { id: imgbox.user_data.id, name: imgbox.user_data.name },
-            }"
-          > -->
-            <!-- <div
-              class="left"
-              @mouseover="getAuthorId(imgbox.user_data.id)"
-              @mouseleave="clearAuthorWorks"
-            >
-              <img
-                class="img1"
-                :src="imgbox.user_data.avatar"
-                v-if="imgbox.user_data.avatar !== ''"
-              />
-              <img
-                class="img1"
-                src="https://static.7mx.com/static/img/avatar-default.48c7f8a.svg"
-                v-else
-              />
-              <span class="user_name">{{ imgbox.user_data.name }}</span>
-              <AuthorList :authorWorks="authorWorks"></AuthorList>
-            </div> -->
-          <!-- </router-link> -->
-
-          <!-- 死的，没找到数据 -->
-          <!-- <div class="score">88.87</div> -->
-        </div>
-      </div>
-    </div>
-  <!-- </router-link> -->
-</template>
-<script>
-  // niyekeyi不用这个组件，把这个组件写到页面里
-  nis
-// import { mapState, mapActions, mapMutations } from "vuex";
-// import AuthorList from "./AuthorList.vue";
-export default {
-  // components: { AuthorList },
-  props: ["imgbox"],
-  data() {
-    return {
-      authorWorks:[],
-    }
-  },
-  computed: {
-    // ...mapState("explore", ["authorWorks"]),
-  },
-  mounted(){
-    var img = this.$refs.allImage
-    // console.log(img.height);
-    this.$emit("height",img.height)
-  },  
-  methods: {
-    // ...mapMutations("explore", ["setAuthorWorks","setAuthorIdName"]),
-    // ...mapActions("explore", ["getAuthor"]),
-    // 鼠标移入获取对应作者id
-    // getAuthorId(id) {
-    //   this.getAuthor([id, 3]);
-    // },
-    // 鼠标移除,清除作品列表
-    // clearAuthorWorks() {
-    //   // 重新设为空
-    //   this.setAuthorWorks([]);
-    // },
-
-
-  },
-};
-</script>
-<style lang="scss" scoped>
-.fallimgItem {
-      width: 454px;
-    position: relative;
-    margin: 20px 10px;
-    min-width: 377px;
-    img {
-      width: 100%;
-      height: 100%;
-      display: block;
-    }
-    .img_mask {
-      width: 100%;
-      height: 100%;
-      border-radius: 15px;
-      position: absolute;
-      left: 0;
-      top: 0;
-      background-color: rgba(0, 0, 0, 0.4);
-      padding: 20px 10px;
-      box-sizing: border-box;
-      // display: none;
-      opacity: 0;
-      transition: 0.5s linear;
-      .img_mask_top {
-        width: 100%;
-        height: 50px;
-        display: flex;
-        justify-content: flex-end;
-        .heart,
-        .car {
-          float: right;
-          width: 50px;
-          height: 50px;
-          background-color: rgba(0, 0, 0, 0.6);
-          border-radius: 5px;
-          line-height: 50px;
-          margin-right: 20px;
-          text-align: center;
-          i {
-            color: #fff;
-            font-size: 25px;
-          }
-        }
-      }
-      .author {
-        width: 93%;
-        color: hsla(0, 0%, 100%, 0.8);
-        display: flex;
-        justify-content: space-between;
-        position: absolute;
-        left: 10px;
-        bottom: 20px;
-        opacity: 1 important;
-        line-height: 36px;
-        font-size: 28px;
-        .left {
-          display: flex;
-          position: relative;
-          .img1 {
-            width: 36px;
-            height: 36px;
-            border-radius: 50%;
-            vertical-align: middle;
-          }
-          .user_name {
-            color: hsla(0, 0%, 100%, 0.8);
-            font-size: 16px;
-            font-weight: 100;
-            margin-left: 16px;
-            vertical-align: middle;
-          }
-        }
-        .left:hover .avatar_imgItem{
-          display: block !important;
-        }
-        .score {
-          font-weight: 100;
-        }
-      }
-    }
-  }
-  .fallimgItem:hover .img_mask {
-    // display: block;
-    opacity: 1;
-  }
-</style>

src/pages/ysgc/api.js

@@ -0,0 +1,8 @@
+import request from '@/utils/request.js'
+
+export const ysgc_list = (data={}) =>{
+    return request({
+        url:'/ysgc/zp/index',
+        data,
+    })
+}

src/pages/ysgc/index.vue

@@ -1,41 +1,160 @@
 <template>
-  <common-header/>
+  <common-header />
   <div class="ysgc">
     <div class="ysgc-kind">
       <ul class="specail">
         <li class="kc" v-for="kc in topWorks" :key="kc">
-          <img class="kc-back" :src="kc.img" alt="" />
+          <router-link to="/ysgc_detail">
+            <img class="kc-back" :src="kc.img" alt="" />
+          </router-link>
         </li>
       </ul>
-      <el-tabs
-        v-model="activeName"
-        type="card"
-        class="work-tabs"
-        @tab-click="handleClick"
-      >
-        <el-tab-pane label="学生优秀作品" name="first">
-          
-        </el-tab-pane>
-        <el-tab-pane label="教师优秀作品" name="second">
-          <FallsFlow v-if="activeName == 'second'" :Plist="jsWorks"></FallsFlow>
-        </el-tab-pane>
-      </el-tabs>
+        <div class="activityContent">
+          <div class="activityItem" @click="changeActiveName('first')" :class="activeName == 'first' ? 'activityItem-active' :''">学生优秀作品</div>
+          <div @click="changeActiveName('second')" :class="activeName == 'second' ? 'activityItem-active' :''" class="activityItem">教师优秀作品</div>
+        </div>
+        <div class="el-tabs__content">
+          <div v-show="activeName == 'first'">
+          <div class="nav">
+            <div class="nav-list">
+              <span class="kindName">年级</span>
+              <el-tabs v-model="njActiveName" @tab-click="handleClick">
+                <el-tab-pane label="全部" name="a"></el-tab-pane>
+                <el-tab-pane label="幼儿园" name="b"></el-tab-pane>
+                <el-tab-pane label="一年级" name="c"></el-tab-pane>
+                <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="third"></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="g"></el-tab-pane>
+                <el-tab-pane label="高一" name="k"></el-tab-pane>
+                <el-tab-pane label="高二" name="l"></el-tab-pane>
+                <el-tab-pane label="高三" name="m"></el-tab-pane>
+                <el-tab-pane label="其他" name="m"></el-tab-pane>
+              </el-tabs>
+            </div>
+
+            <div class="nav-list">
+              <span class="kindName">科目</span>
+              <el-tabs v-model="kmActiveName" @tab-click="handleClick">
+                <el-tab-pane label="全部" name="a"></el-tab-pane>
+                <el-tab-pane label="音乐" name="b"></el-tab-pane>
+                <el-tab-pane label="美术" name="c"></el-tab-pane>
+                <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-tabs>
+            </div>
+            <div class="nav-list">
+              <span class="kindName">分类</span>
+              <el-tabs v-model="flActiveName" @tab-click="handleClick">
+                <el-tab-pane label="全部" name="a"></el-tab-pane>
+                <el-tab-pane label="学校" name="b"></el-tab-pane>
+                <el-tab-pane label="机构" name="c"></el-tab-pane>
+              </el-tabs>
+            </div>
+          </div>
+          <div class="inp">
+            <input v-model="searMsg" type="text" placeholder="搜索关键字" />
+            <span class="inp-sear"></span>
+          </div>
+          <ul class="stuWorks">
+            <li class="s-works" v-for="s in 18" :key="s">
+              <router-link to="/ysgc_detail">
+                <div class="img">
+                  <img class="kc-back" src="../../assets/ysgc/kc3.png" alt="" />
+                  <!-- 悬浮遮罩层 -->
+                  <div v-show="is_Sq=='1'" class="img_mask">
+                    <img class="play" src="" alt="">
+                  </div>
+                </div>
+
+                <div class="kc-des">
+                  <p class="kc-name">安徒生世界插画</p>
+                  <div class="rate">
+                    <img
+                      v-for="star in 5"
+                      :key="star"
+                      src="../../assets/ysgc/star.png"
+                      alt=""
+                    />
+                  </div>
+                </div>
+                <div class="zan">
+                  <img src="../../assets/ysgc/zan.png" /> 10w+
+                  <img src="../../assets/ysgc/xin.png" alt="" />14w+
+                </div>
+              </router-link>
+            </li>
+          </ul>
+          </div>
+          <div v-show="activeName == 'second'">
+            <div class="nav" >
+              <div class="nav-list">
+                <span class="kindName">年级</span>
+                <el-tabs v-model="njActiveName" @tab-click="handleClick">
+                  <el-tab-pane label="全部" name="a"></el-tab-pane>
+                  <el-tab-pane label="幼儿园" name="b"></el-tab-pane>
+                  <el-tab-pane label="一年级" name="c"></el-tab-pane>
+                  <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="third"></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="g"></el-tab-pane>
+                  <el-tab-pane label="高一" name="k"></el-tab-pane>
+                  <el-tab-pane label="高二" name="l"></el-tab-pane>
+                  <el-tab-pane label="高三" name="m"></el-tab-pane>
+                  <el-tab-pane label="其他" name="m"></el-tab-pane>
+                </el-tabs>
+              </div>
+
+              <div class="nav-list">
+                <span class="kindName">科目</span>
+                <el-tabs v-model="kmActiveName" @tab-click="handleClick">
+                  <el-tab-pane label="全部" name="a"></el-tab-pane>
+                  <el-tab-pane label="音乐" name="b"></el-tab-pane>
+                  <el-tab-pane label="美术" name="c"></el-tab-pane>
+                  <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-tabs>
+              </div>
+            </div>
+            <div class="inp">
+              <input v-model="searMsg" type="text" placeholder="搜索关键字" />
+              <span class="inp-sear"></span>
+            </div>
+            <FallsFlow v-if="activeName == 'second'" :Plist="jsWorks"></FallsFlow>
+          </div>
+        </div>
     </div>
   </div>
 </template>
 <script setup>
-import ResourceSearch from "../../components/ResourceSearch/index.vue";
 import commonHeader from "@/components/header/index.vue";
+import { ysgc_list } from "./api";
 import { ref } from "vue";
 import FallsFlow from "./FallsFlow.vue";
 const https = ref(window.GLOBAL_CONFIG.api);
-const activeName = ref('first')
+const name = ref("index");
+const kmActiveName = ref("b");
+const njActiveName = ref("b");
+const flActiveName = ref("b");
+const is_Sq = ref('0');
+const searMsg = ref("");
+const activeName = ref("first");
 const handleClick = (tab, event) => {
-  console.log(tab, event)
-}
+  console.log(tab, event);
+};
 
 const topWorks = ref([]);
-const stuWorks= ref([]);
+const stuWorks = ref([]);
 const jsWorks = ref([]);
 const getPic = async () => {
   let m = await import("@/assets/ysgc/kc.png");
@@ -70,49 +189,66 @@ const getPic = async () => {
       img: m4.default,
     }
   );
-  stuWorks.value.push(m1,m);
-  jsWorks.value.push({
-    img:m1.default,
-  },
-  {
-    img:m5.default,
-  },
-  {
-    img:m6.default,
-  },
-  {
-    img:m7.default,
-  },
-  {
-    img:m8.default,
-  },
-  {
-    img:m2.default,
-  },
-  {
-    img:m14.default,
-  },
-  {
-    img:m9.default,
-  },
-  {
-    img:m13.default,
-  },
-  {
-    img:m15.default,
-  },
-  {
-    img:m10.default,
-  },
-  {
-    img:m12.default,
-  },
-  {
-    img:m16.default,
-  },
+  stuWorks.value.push(m1, m);
+  jsWorks.value.push(
+    {
+      img: m1.default,
+    },
+    {
+      img: m5.default,
+    },
+    {
+      img: m6.default,
+    },
+    {
+      img: m7.default,
+    },
+    {
+      img: m8.default,
+    },
+    {
+      img: m2.default,
+    },
+    {
+      img: m14.default,
+    },
+    {
+      img: m9.default,
+    },
+    {
+      img: m13.default,
+    },
+    {
+      img: m15.default,
+    },
+    {
+      img: m10.default,
+    },
+    {
+      img: m12.default,
+    },
+    {
+      img: m16.default,
+    }
   );
 };
 getPic();
+
+const yz_top_display = "";
+const yz_type = "";
+let listData = {
+  yz_type: "2",
+  yz_top_display: "1",
+};
+function getList() {
+  ysgc_list(listData).then((res) => {
+    console.log(res);
+  });
+}
+getList();
+function changeActiveName(val){
+  activeName.value = val
+}
 </script>
 <style lang="scss" scoped>
 .ysgc {
@@ -125,12 +261,12 @@ getPic();
     .specail {
       width: 100%;
       display: flex;
-      justify-content: center;
+      justify-content: space-between;
       flex-wrap: wrap;
       margin: 42px auto;
       .kc {
         margin-right: 25px;
-        width: 337px;
+        width: 347px;
         overflow: hidden;
         border-radius: 12px;
         box-shadow: 0px 10px 24px 0px rgba(161, 153, 168, 0.18);
@@ -163,23 +299,165 @@ getPic();
   }
 }
 
-::v-deep .work-tabs {
-  // width: 1560px;
-  margin: 0 auto;
-  .el-tabs{
+  .el-tabs {
     width: 100%;
-    .el-tabs__header{
-      .el-tabs__nav{
+    .el-tabs__header {
+      .el-tabs__nav {
         margin: 0 auto;
-      } 
+      }
     }
   }
   .el-tabs__content {
-  padding: 32px;
-  color: #6b778c;
-  font-size: 32px;
-  // font-weight: 600;
+    color: #6b778c;
+    font-size: 32px;
+    .nav {
+      .nav-list {
+        display: flex;
+        .kindName {
+          display: inline-block;
+          width: 50px;
+          height: 100%;
+          line-height: 64px;
+          font-size: 16px;
+          color: #000;
+          font-weight: 600;
+        }
+      }
+    }
+    .stuWorks {
+      display: flex;
+      flex-wrap: wrap;
+      .s-works {
+        position: relative;
+        width: 260px;
+        height: 234px;
+        margin-top: 30px;
+        border-radius: 12px;
+        margin-right: 15px;
+        box-shadow: 0px 10px 24px 0px rgba(161, 153, 168, 0.18);
+        .img {
+          position: relative;
+          width: 100%;
+          .img_mask{
+            position: absolute;
+            top: 0;
+            border-radius: 12px 12px 0 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.59);
+          }
+        }
+        .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 {
+              width: 15px;
+              margin-right: 6px;
+            }
+          }
+        }
+        .zan {
+          position: absolute;
+          top: 0;
+          right: 0;
+          width: 173px;
+          height: 34px;
+          line-height: 34px;
+          font-size: 14px;
+          color: #fff;
+          display: flex;
+          padding-left: 20px;
+          background: rgba(0, 0, 0, 0.59);
+          border-radius: 0px 12px 0px 12px;
+          img {
+            display: inline-block;
+            width: 17px;
+            height: 16px;
+            margin: 8px 5px 0 10px;
+          }
+        }
+      }
+    }
+    .is-active {
+      // width: 32px;
+      // height: 21px;
+      font-size: 16px;
+      font-family: PingFangSC, PingFangSC-Regular;
+      font-weight: 400;
+      // text-align: center;
+      color: #00a3ff;
+      // line-height: 21px;
+      background: #e2f2ff;
+    }
+  }
+  .inp {
+    width: 497px;
+    margin: 30px 0 17px 0;
+    height: 50px;
+    line-height: 50px;
+    position: relative;
+    input {
+      background: #ffffff;
+      border-radius: 8px;
+      border: 1px solid #00a3ff;
+      outline: none;
+      width: 100%;
+      height: 100%;
+      padding-left: 17px;
+      font-size: 16px;
+    }
+    .inp-sear {
+      display: block;
+      width: 26px;
+      height: 26px;
+      background: #00a3ff;
+      border-radius: 6px;
+      position: absolute;
+      top: 18px;
+      right: 15px;
+      background-image: url("../../assets/ysgc/search.png");
+      background-size: 60%;
+      background-position: center;
+      background-repeat: no-repeat;
+      cursor: pointer;
+    }
+  }
+.activityContent{
+  width: 590px;
+  height: 80px;
+  background: #ffffff;
+  border: 1px solid #dbe7ec;
+  border-radius: 10px;
+  margin: auto;
+  padding: 10px 8px;
+  box-sizing: border-box;
+  display: flex;
+  .activityItem{
+    width: 281px;
+    height: 60px;
+    line-height: 60px;
+    text-align: center;
+    background: #fff;
+    font-size: 30px;
+    color: #666666;
+    border-radius: 10px;
+    cursor: pointer;
+  }
+  .activityItem-active{
+    background: #e8f3fa;
+    font-size: 30px;
+    color: #000;
+  }
 }
-} 
-
 </style>

src/pages/ysgc/ysgc_detail/index.vue

@@ -1,5 +1,184 @@
 <template>
-    <div>
-        详情
+  <common-header />
+  <div class="ysgc_detail">
+    <div class="top">
+      <div class="top_nav">
+        <div class="title">详情</div>
+        <div class="sub_title">
+          艺术广场 - 学生优秀作业 - <span class="t_detail">详情</span>
+        </div>
+      </div>
     </div>
-</template>
+    <div class="content">
+      <h3 class="con_title">美术 +</h3>
+      <div class="art">
+        <div class="author">
+          <img src="../../../assets/ysgc/tx.png" alt="" class="avt" />
+          <span class="name">Maxwills</span>
+        </div>
+        <div class="evaluate">
+          <ul class="eva">
+            <li class="each_eva" v-for="e in 3" :key="e">
+              <div class="eva_person">
+                <span class="eva_name"> 于枫 </span>
+                <span class="eva_time"> 2021-01-23 11:15 </span>
+              </div>
+              <p class="eva_nav">
+                我认为，大多数设计师只是试图从他们已经做过的事情中努力，在讲故事方面并没有什么特别之处，而我的回归，将伴随着一个伟大的演讲
+              </p>
+            </li>
+          </ul>
+          <div class="addComment">
+            <input v-model="commentMsg" type="text" />
+            <button class="add">评价</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import commonHeader from "@/components/header/index.vue";
+import { ref } from "vue";
+const commentMsg = ref("");
+</script>
+
+<style lang="scss" scoped>
+.ysgc_detail {
+  width: 100%;
+  margin: 0 auto;
+  background-color: #fcfeff;
+  background-image: url("../../../assets/ysgc/back.png");
+  background-size: 100%;
+  background-repeat: no-repeat;
+  .top {
+    width: 100%;
+    height: 60px;
+    line-height: 60px;
+    background: #ffffff;
+    box-shadow: 0px 1px 10px 0px rgba(17, 46, 74, 0.1);
+    .top_nav {
+      width: 1650px;
+      min-width: 1280px;
+      margin: 0 auto;
+      display: flex;
+      padding: 0 10px;
+      box-sizing: border-box;
+      .title {
+        font-size: 18px;
+        font-family: PingFangSC, PingFangSC-Regular;
+        font-weight: 400;
+        color: #050026;
+        margin-right: 45px;
+      }
+      .sub_title {
+        font-size: 14px;
+        color: #949494;
+        .t_detail {
+          color: #000;
+        }
+      }
+    }
+  }
+  .content {
+    width: 1650px;
+    min-width: 1280px;
+    margin: 0 auto;
+    .con_title {
+      height: 40px;
+      line-height: 40px;
+      font-size: 18px;
+      font-family: PingFangSC, PingFangSC-Medium;
+      font-weight: 500;
+      color: #050026;
+      margin: 10px 0;
+    }
+    .art {
+      width: 100%;
+      height: 838px;
+      margin-bottom: 10px;
+      background-image: url("../../../assets/ysgc/kc11@2x.png");
+      background-size: 100%;
+      position: relative;
+      .author {
+        position: absolute;
+        top: 30px;
+        right: 30px;
+        display: flex;
+        .avt {
+          width: 59px;
+          height: 59px;
+          border-radius: 50%;
+        }
+        .name {
+          height: 59px;
+          line-height: 59px;
+          font-size: 16px;
+          color: #fff;
+          font-weight: 500;
+          margin-left: 10px;
+        }
+      }
+      .evaluate {
+        width: 650px;
+        height: 440px;
+        overflow: hidden;
+        position: absolute;
+        bottom: 24px;
+        left: 7.5px;
+        color: #fff;
+        .eva {
+          width: 100%;
+          .each_eva {
+            width: 637px;
+            height: 104px;
+            margin-top: 10px;
+            opacity: 0.6;
+            background: #050026;
+            border-radius: 10px;
+            color: #fff;
+            padding: 20px;
+            box-sizing: border-box;
+            .eva_person {
+              .eva_name {
+                font-size: 14px;
+                font-weight: 600;
+                margin-right: 8px;
+              }
+              .eva_time {
+                font-size: 12px;
+              }
+            }
+            .eva_nav {
+              font-size: 14px;
+              margin: 10px 5px;
+            }
+          }
+        }
+        .addComment {
+          width: 100%;
+          margin: 20px 0;
+          input {
+            width: 530px;
+            height: 47px;
+            opacity: 0.8;
+            border: 2px solid #b4caf7;
+            border-radius: 10px;
+            background-color: #fff;
+            color: #000;
+            padding-left: 10px;
+            box-sizing: border-box;
+            margin-right: 5px;
+          }
+          .add {
+            width: 111px;
+            height: 32px;
+            background: linear-gradient(90deg, rgba(0,163,255, 0.7) 20%, #57c38f);
+            border-radius: 38px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/router/index.js

@@ -50,10 +50,21 @@ export default createRouter({
 			component: () => import("~/pages/szmsg/index.vue"),
 		},
 		{
-			path: '/tskcz',
-			name: 'tskcz',
-			component: () => import('~/pages/szmsg/tskcz/index.vue'),
+			path: '/tzkc',
+			name: 'tzkc',
+			component: () => import('~/pages/szmsg/tzkc/index.vue'),
 		},
+		{
+			path:'/tzkc_detail',
+			name:'tzkc_detail',
+			component: () =>import('~/pages/szmsg/tzkc/tzkc_detail/index.vue')
+		},
+		{
+			path:'/yslm',
+			name:'yslm',
+			component: () => import('~/pages/szmsg/yslm/index.vue')
+		},
+		
     {
       path: '/resource',
 	  name: 'resource',