Merge branch 'zhaoj'

src/pages/ysgc/FallsFlow.vue

@@ -0,0 +1,190 @@
+<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>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+  <script>
+export default {
+  props: ["Plist"],
+  data() {
+    return {
+      screenWidth: document.body.clientWidth,
+      col: 4,
+      list: [],
+      categoryId: "",
+      type: 1,
+    };
+  },
+  created() {
+  },
+  mounted() {
+    // 监听屏幕宽度变化
+    window.onresize = () =>
+      (() => {
+        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;
+        console.log("小于1480,col=", this.col);
+      } else {
+        this.col = 4;
+        console.log("不小于1480,col=", this.col);
+      }
+    },
+  },
+  methods: {
+    // 瀑布流
+    imgList() {
+      //   console.log('屏幕宽度',document.body.clientWidth);
+      if (this.Plist.length !== 0) {
+        const res = [];
+        for (let i = 0; i < this.col; i++) {
+          res.push({
+            h: 0,
+            a: [],
+          });
+        }
+        this.Plist.forEach((img,index) => {    
+          let obj = res[0];
+          let imgs
+          if(!document.getElementById('imgsId'))
+          {
+            imgs = document.createElement('img')
+            imgs.id = "imgsId"
+          }
+          else{
+            imgs = document.getElementById('imgsId')
+          }
+          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);
+          // 计算图片缩放后的高度，并记录
+          const height = (img.h * 454) / img.w;
+          obj.h += height;
+        });
+        return res;
+      }
+    },
+  },
+};
+</script>
+  <style lang="scss" scoped>
+.flow {
+  display: flex;
+}
+
+.fallimgItem {
+  width: 315px;
+  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/FallsImg.vue

@@ -0,0 +1,176 @@
+<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/index.vue

@@ -1,50 +1,25 @@
 <template>
   <common-header/>
   <div class="ysgc">
-    <ResourceSearch></ResourceSearch>
     <div class="ysgc-kind">
       <ul class="specail">
-        <li class="kind-name">
-          <h3>特色课程展</h3>
-          <p>辅导机构课程 场馆课程</p>
-          <div class="btn-more">
-            <button>查看更多</button>
-          </div>
-        </li>
-        <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">
-              <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>
-        </li>
-      </ul>
-      <ul class="specail">
-        <li class="kind-name">
-          <h3>艺术联盟</h3>
-          <p>辅导机构课程 场馆课程</p>
-          <div class="btn-more">
-            <button>查看更多</button>
-          </div>
-        </li>
-        <li class="kc" v-for="kc in 1" :key="kc">
-          <img class="kc-back" src="../../assets/ysgc/kc3.png" alt="" />
-          <div class="kc-des">
-            <p class="kc-name">传送门</p>
-          </div>
+        <li class="kc" v-for="kc in topWorks" :key="kc">
+          <img class="kc-back" :src="kc.img" alt="" />
         </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>
   </div>
 </template>
@@ -52,6 +27,92 @@
 import ResourceSearch from "../../components/ResourceSearch/index.vue";
 import commonHeader from "@/components/header/index.vue";
 import { ref } from "vue";
+import FallsFlow from "./FallsFlow.vue";
+const https = ref(window.GLOBAL_CONFIG.api);
+const activeName = ref('first')
+const handleClick = (tab, event) => {
+  console.log(tab, event)
+}
+
+const topWorks = ref([]);
+const stuWorks= ref([]);
+const jsWorks = ref([]);
+const getPic = async () => {
+  let m = await import("@/assets/ysgc/kc.png");
+  let m1 = await import("@/assets/ysgc/kc1.png");
+  let m2 = await import("@/assets/ysgc/kc2.png");
+  let m3 = await import("@/assets/ysgc/kc3.png");
+  let m4 = await import("@/assets/ysgc/kc4.png");
+  let m5 = await import("@/assets/ysgc/kc5.png");
+  let m6 = await import("@/assets/ysgc/kc6.png");
+  let m7 = await import("@/assets/ysgc/kc7.png");
+  let m8 = await import("@/assets/ysgc/kc8.png");
+  let m9 = await import("@/assets/ysgc/kc9.png");
+  let m10 = await import("@/assets/ysgc/kc10.png");
+  let m11 = await import("@/assets/ysgc/kc11.png");
+  let m12 = await import("@/assets/ysgc/kc12.png");
+  let m13 = await import("@/assets/ysgc/kc13.png");
+  let m14 = await import("@/assets/ysgc/kc14.png");
+  let m15 = await import("@/assets/ysgc/kc15.png");
+  let m16 = await import("@/assets/ysgc/kc16.png");
+  // 顶部图片
+  topWorks.value.push(
+    {
+      img: m3.default,
+    },
+    {
+      img: m2.default,
+    },
+    {
+      img: m1.default,
+    },
+    {
+      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,
+  },
+  );
+};
+getPic();
 </script>
 <style lang="scss" scoped>
 .ysgc {
@@ -61,120 +122,64 @@ import { ref } from "vue";
     width: 1650px;
     min-width: 1280px;
     margin: 0 auto;
-    margin-top: -180px;
     .specail {
-      // width: 100%;
+      width: 100%;
       display: flex;
+      justify-content: center;
       flex-wrap: wrap;
-      li {
-        margin: 0 27px 27px 0;
-        overflow: hidden;
-      }
-      .kind-name {
-        width: 332px;
-        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/ysgc/tskc.png");
-        background-position: center -15px;
-        h3 {
-          width: 263px;
-          height: 37px;
-          font-size: 26px;
-          font-family: PingFangSC, PingFangSC-Medium;
-          font-weight: 500;
-          text-align: left;
-          color: #050026;
-          line-height: 37px;
-        }
-        p {
-          width: 246px;
-          height: 22px;
-          font-size: 16px;
-          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;
-          }
-        }
-      }
+      margin: 42px auto;
       .kc {
+        margin-right: 25px;
         width: 337px;
-        height: 278px;
-        background: #ffffff;
+        overflow: hidden;
         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;
-            }
-          }
-        }
-        .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;
-          }
+      }
+      .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;
         }
       }
     }
   }
 }
+
+::v-deep .work-tabs {
+  // width: 1560px;
+  margin: 0 auto;
+  .el-tabs{
+    width: 100%;
+    .el-tabs__header{
+      .el-tabs__nav{
+        margin: 0 auto;
+      } 
+    }
+  }
+  .el-tabs__content {
+  padding: 32px;
+  color: #6b778c;
+  font-size: 32px;
+  // font-weight: 600;
+}
+} 
+
 </style>

src/pages/ysgc/ysgc_detail/index.vue

@@ -0,0 +1,5 @@
+<template>
+    <div>
+        详情
+    </div>
+</template>

src/router/index.js

@@ -14,102 +14,106 @@ export default createRouter({
             component: () => import("~/pages/home/index.vue"),
         },
 
-        {
-            path: '/zhjy',
-            name: 'zhjy',
-            component: () => import("~/pages/zhjy/index.vue"),
-        },
-        {
-            path: '/zhjy/zhjyzxxx',
-            name: "zhjy_zhjyzxxx",
-            component: () => import("~/pages/zhjy/zhjyzxxx/index.vue"),
-        },
-        {
-            path: '/zhjy/zhjyxtbk',
-            name: "zhjy_zhjyxtbk",
-            component: () => import("~/pages/zhjy/zhjyxtbk/index.vue"),
-        },
-        {
-            path: '/zhjy/zhjytbjy',
-            name: "zhjy_zhjytbjy",
-            component: () => import("~/pages/zhjy/zhjytbjy/index.vue"),
-        },
-        {
-            path: '/ysgc',
-            name: 'ysgc',
-            component: () => import("~/pages/ysgc/index.vue"),
-        },
-        {
-            path: '/szmsg',
-            name: 'szmsg',
-            component: () => import("~/pages/szmsg/index.vue"),
-        },
-        {
-            path: '/tskcz',
-            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:'/zbkt',
-            title: '直播课堂',
-            children: [
-                {
-                    path: '',
-                    name: 'zbkt',
-                    component: () => import("~/pages/zbkt/index.vue"),
-                },
-                {
-                    path: 'ssys',
-                    children: [
-                        {
-                            path: '',
-                            name: 'ssys',
-                            component: () => import("~/pages/zbkt/ssys/index.vue"),
-                        },
-                    ]
-                },
-                {
-                    path: 'wlzb',
-
-                    children: [
-                        {
-                            path: '',
-                            name: 'wlzb',
-                            component: () => import("~/pages/zbkt/wlzb/index.vue"),
-                        },
-                    ]
-                },
-                {
-                    path: 'ztzb',
-                    children: [
-                        {
-                            path: '',
-                            name: 'ztzb',
-                            component: () => import("~/pages/zbkt/ztzb/index.vue"),
-                        },
-                    ]
-                }
-            ]
-        },
-        {
+		{
+			path: '/zhjy',
+			name: 'zhjy',
+			component: () => import("~/pages/zhjy/index.vue"),
+		},
+		{
+			path: '/zhjy/zhjyzxxx',
+			name: "zhjy_zhjyzxxx",
+			component: () => import("~/pages/zhjy/zhjyzxxx/index.vue"),
+		},
+		{
+			path: '/zhjy/zhjyxtbk',
+			name: "zhjy_zhjyxtbk",
+			component: () => import("~/pages/zhjy/zhjyxtbk/index.vue"),
+		},
+		{
+			path: '/zhjy/zhjytbjy',
+			name: "zhjy_zhjytbjy",
+			component: () => import("~/pages/zhjy/zhjytbjy/index.vue"),
+		},
+		{
+			path: '/ysgc',
+			name: 'ysgc',
+			component: () => import("~/pages/ysgc/index.vue"),
+		},
+		{
+			path:'/ysgc_detail',
+			name:'ysgc_detail',
+			component: () => import('~/pages/ysgc/ysgc_detail/index.vue')
+		},
+		{
+			path: '/szmsg',
+			name: 'szmsg',
+			component: () => import("~/pages/szmsg/index.vue"),
+		},
+		{
+			path: '/tskcz',
+			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: '/zbkt',
+			title: '直播课堂',
+			children: [
+				{
+					path: '',
+					name: 'zbkt',
+					component: () => import("~/pages/zbkt/index.vue"),
+				},
+				{
+					path: 'ssys',
+					children: [
+						{
+							path: '',
+							name: 'ssys',
+							component: () => import("~/pages/zbkt/ssys/index.vue"),
+						},
+					]
+				},
+				{
+					path: 'wlzb',
+					name: 'wlzb',
+					children: [
+						{
+							path: '',
+							component: () => import("~/pages/zbkt/wlzb/index.vue"),
+						},
+					]
+				},
+				{
+					path: 'ztzb',
+					children: [
+						{
+							path: '',
+							name: 'ztzb',
+							component: () => import("~/pages/zbkt/ztzb/index.vue"),
+						},
+					]
+				}
+			]
+		},
+		{
             path: '/resourceChapter',
             name: 'resourceChapter',
             title: '课程资源章节',
             component: () => import("~/pages/courseResourcesChapter.vue"),
         },
-    ]
+	]
 
 })