1

ant-design-vue-jeecg/src/views/cms/pages/professionalSummary/professionalSummary.vue

@@ -45,6 +45,30 @@
           <el-image :src="item.originUrl?item.originUrl:defaultUrl" />
         </div>
       </div>
+        <el-row class="jsfc" >
+          <el-col :span="4" v-for="(o, index) in 5" :key="o" class="jsfc-item">
+            <el-card :body-style="{ padding: '0px' }" shadow="hover">
+              <img src="../../assets/01.png"
+                   class="image" style="width:100%;height: 300px;object-fit:cover">
+              <div style="padding: 14px;">
+                <span>张三老师</span>
+                <div class="bottom clearfix">
+                  <time class="time"></time>
+                  <el-button type="text" class="button" @click="goToTeacherDetail()">查看详情</el-button>
+                </div>
+              </div>
+            </el-card>
+            <div class="zzc"><span @click="goToTeacherList">查看更多</span><i class="el-icon-arrow-right"></i></div>
+          </el-col>
+        </el-row>
+<!--      <el-carousel :interval="5000" arrow="always">-->
+<!--        <el-carousel-item v-for="(item, index) in carouselItems" :key="index">-->
+<!--          <div class="carousel-slide">-->
+<!--            &lt;!&ndash; Customize your slide content here &ndash;&gt;-->
+<!--            {{ item.content }}-->
+<!--          </div>-->
+<!--        </el-carousel-item>-->
+<!--      </el-carousel>-->
     </div>
     <FooterView></FooterView>
   </div>
@@ -68,7 +92,13 @@ export default {
       url:{
         detail:"/cms/front/getArticleListByColumn"
       },
-      originalList:[]
+      originalList:[],
+      carouselItems: [
+        { content: 'Item 1' },
+        { content: 'Item 2' },
+        { content: 'Item 3' },
+        // Add more items as needed
+      ]
     }
 
   },
@@ -90,6 +120,7 @@ export default {
         return '/cms/TeacherDemeanor'
       }
     },
+
     getList(){
       getAction(this.url.detail,{columnId:"1640260238858096641"}).then((res) => {
         console.log("res.result.records")
@@ -115,6 +146,22 @@ export default {
           }
       }
       )
+    },
+    goToTeacherDetail(){
+      this.$router.push({
+        path:"/cms/teacherDetails",
+        query:{
+          teacherInfo:{},
+        }
+      })
+    },
+    goToTeacherList(){
+      this.$router.push({
+        path:"/cms/teacherDemeanor",
+        query:{
+
+        }
+      })
     }
   },
   components: {
@@ -216,4 +263,49 @@ export default {
 .bigbox:nth-child(even) .image {
   order: 2;
 }
+.custom-carousel {
+  width: 100%;
+  overflow: hidden;
+}
+
+.carousel-slide {
+  display: inline-block;
+  width: 25%; /* Adjust the width based on the number of items you want to display */
+  padding: 10px;
+  box-sizing: border-box;
+  text-align: center;
+}
+  .jsfc{
+    height: 380px;display:flex;justify-content: space-between;align-items: center;
+    .zzc{
+      opacity: 0;
+    }
+  }
+.jsfc .jsfc-item:last-child{
+  position: relative;
+  .zzc{
+    position: absolute;
+    width: 100%;
+    height: 388px;
+    background: linear-gradient(to right,transparent,#000);
+    opacity: 0.4;
+    top: 0;
+    display: flex;
+    align-items: flex-end;
+    justify-content:  center;
+    flex-direction: column;
+    padding-right: 20px;
+    span{
+      width: 1em;
+      color: #fff;
+      margin-bottom: 10px;
+      cursor: pointer;
+      transition: all 0.3s;
+      font-size: 14px;
+      &:hover{
+        color: #409EFF;
+      }
+    }
+  }
+}
 </style>