数据穿透优化

ruoyi-ui/src/views/officialWebsite/practice.vue

@@ -40,35 +40,41 @@
           </div>
 
           <!-- 实践项目 -->
-          <div v-if="item.id == '1813831932748894208'" class="list">
+          <div v-else-if="item.id == '1813831932748894208'" class="swiper-list">
             <div class="item" v-for="(item, index) in teachingAchievements2" :key="index">
               <div class="img">
-                <img :src="imgurl + item.contentImg" alt="">
+                <img :src="imgurl + item.contentImg" alt="" class="imgWO">
               </div>
               <div class="tt">{{ item.contentTitle }}</div>
               <div class="desc">
-                <div class="desc" v-html="item.summary"></div>
+                {{ item.summary }}
               </div>
-
+              <div class="time">{{ item.publishDate }}</div>
             </div>
           </div>
 
-          <!-- 实践项目 -->
+          <!-- 自制仪器设备 -->
-          <div v-if="item.id == '1813832045458231296'" class="list">
+          <div v-else-if="item.id == '1813832045458231296'" class="swiper-list">
             <div class="item" v-for="(item, index) in teachingAchievements3" :key="index">
               <div class="img">
                 <img :src="imgurl + item.contentImg" alt="">
               </div>
               <div class="tt">{{ item.contentTitle }}</div>
-              <div class="desc">
+              <!-- <div class="desc">
-                <div class="desc" v-html="item.summary"></div>
+                {{ item.summary }}
-              </div>
+              </div> -->
 
             </div>
+
           </div>
 
           <!-- 通用 -->
           <div class="neirong" v-html="pageContextList[index]" v-else></div>
+
+          <!-- 详情数据穿透 -->
+          <div class="team" v-if="currentActive == 999 && isShowDetails">
+            <div class="neirong" v-html="detailsContent"></div>
+          </div>
         </div>
       </div>
 
@@ -100,6 +106,7 @@
           </div>
         </div>
       </div> -->
+
       <!-- 实践项目 -->
       <!-- <div class="xjxm" v-if="currentActive == 2">
         <div class="list">
@@ -115,6 +122,7 @@
           </div>
         </div>
 
+
         <div class="page">
           <el-pagination background layout="prev, pager, next" :total="1000" class="">
           </el-pagination>
@@ -158,6 +166,8 @@ export default {
   },
   data() {
     return {
+      isShowDetails:false,
+      detailsContent:"",
       imgurl: process.env.VUE_APP_BASE_API,
       teachingAchievements: [],
       teachingAchievements2: [],
@@ -196,12 +206,18 @@ export default {
   },
 
   methods: {
+    showDetails(value){
+      this.isShowDetails = true;
+      this.currentActive = 999;
+      this.detailsContent = value.contentDetail;
+    },
     // 触发导航
     getCurrentActive(value) {
       if (this.currentActive == value) {
         return
       }
-      this.currentActive = value
+      this.currentActive = value;
+      this.isShowDetails = false;
     },
     initPageData() {
 
@@ -220,17 +236,19 @@ export default {
           });
 
           this.pageContextList.push(context);
-
+          //实践平台
           if (cloumnItem.id == "1813831828977618944") {
             cloumnItem.children.list.forEach(element => {
               this.teachingAchievements.push(element);
             });
           }
+          //实践项目
           if (cloumnItem.id == "1813831932748894208") {
             cloumnItem.children.list.forEach(element => {
               this.teachingAchievements2.push(element);
             });
           }
+          //自制仪器设备
           if (cloumnItem.id == "1813832045458231296") {
             cloumnItem.children.list.forEach(element => {
               this.teachingAchievements3.push(element);
@@ -611,7 +629,7 @@ export default {
 
 .list .item .img {
   width: 100%;
-  height: 287px;
+  height: 19rem;
   border-radius: 0px 0px 0px 0px;
   overflow: hidden;
 }
@@ -945,4 +963,71 @@ export default {
   margin-bottom: -85px;
   /* padding-bottom: 20px; */
 }
+
+.swiper-list {
+  width: 80%;
+  margin: 30px auto;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  margin-top: 50px;
+}
+
+.swiper-list .item {
+  width: 31%;
+  height: 432px;
+  margin-bottom: 30px;
+  position: relative;
+  ;
+}
+
+.swiper-list .item .img {
+  width: 100%;
+  height: 287px;
+  border-radius: 0px 0px 0px 0px;
+  overflow: hidden;
+}
+
+.swiper-list .item .img img {
+  height: 100%;
+}
+
+.swiper-list .item .tt {
+  font-weight: bold;
+  font-size: 20px;
+  color: #005375;
+  margin: 15px 0;
+}
+
+.swiper-list .item .desc {
+  overflow: hidden;
+  /** 隐藏超出的内容 **/
+  word-break: break-all;
+  text-overflow: ellipsis;
+  /** 多行 **/
+  display: -webkit-box;
+  /** 对象作为伸缩盒子模型显示 **/
+  -webkit-box-orient: vertical;
+  /** 设置或检索伸缩盒对象的子元素的排列方式 **/
+  -webkit-line-clamp: 2;
+  /** 显示的行数 **/
+  font-size: 18px;
+  color: #999999;
+  line-height: 24px;
+}
+
+.swiper-list .item .time {
+  position: absolute;
+  bottom: 0;
+  font-weight: 500;
+  font-size: 18px;
+  color: #005375;
+}
+
+.equip-img {
+  width: 100%;
+  height: 19rem;
+  border-radius: 0px 0px 0px 0px;
+  overflow: hidden;
+}
 </style>

ruoyi-ui/src/views/officialWebsite/team.vue

@@ -62,7 +62,7 @@
       </div>
 
       <!-- main -->
-
+      <!-- 详情数据穿透 -->
         <div class="team" v-if="currentActive == 999 && isShowDetails">
           <div class="neirong" v-html="detailsContent"></div>
         </div>
@@ -96,7 +96,7 @@ export default {
       imgurl: process.env.VUE_APP_BASE_API,
       pageContextList: [],
       teachingAchievements: [],
-      detailsContent:[],
+      detailsContent:"",
       teachingTeam: [],
       nav: [
         // { name: '教学团队' },

ruoyi-ui/src/views/officialWebsite/xufang.vue

@@ -13,25 +13,71 @@
         <div class="left"> <img src="../../assets/gw/home.png" alt="">
           <p><a href="/gw">首页</a><i class="el-icon-arrow-right"></i> <span href="">虚拟专业频道</span></p>
         </div>
-        <div class="nav-item" v-for="(item, index) in nav" v-bind:class="[index === currentActive ? 'active' : '']"
+        <!-- <div class="nav-item" v-for="(item, index) in nav" v-bind:class="[index === currentActive ? 'active' : '']"
           @click="getCurrentActive(index)">
           {{ item.categoryName }}
-        </div>
+        </div> -->
 
       </div>
     </div>
-    <div class="top-swiper">
+    <!-- <div class="top-swiper">
-      <!-- main -->
+      main
       <div v-for="(item, index) in nav " :key=index>
         <div class="teaching-list" v-if="currentActive == index">
           <div class="neirong" v-html="pageContextList[index]"></div>
         </div>
       </div>
+    </div> -->
+
+    <!-- <div class="list"> -->
+      <div v-if="!isShowDetails">
+    <!-- 顶部块 -->
+    <div class="top-swiper">
+
+      <swiper ref="mySwiper" :options="swiperOptions" style="width: 100%">
+        <swiper-slide class="banner-box" v-for="(item, index) in teachingAchievements" :key="index" >
+          <div class="left">
+            <img :src="imgurl + item.contentImg" alt="" class="imgWO">
+            <!-- <img src="../../assets/gw/Snipaste_2024-07-23_22-51-23.jpg" alt="" > -->
+          </div>
+          <div class="right">
+            <div class="time">{{ item.publishDate }}</div>
+            <div class="tt">{{ item.contentTitle }}</div>
+            <div class="desc">
+              {{ item.summary }}
+            </div>
+            <div class="more" @click="showDetails(item)">
+              <i class="el-icon-right"></i>
+            </div>
+          </div>
+        </swiper-slide>
+      </swiper>
+      <div class="swiper-pagination"></div>
+
+    </div>
+    <!-- 下部块 -->
+    <div class="list">
+      <div class="item" v-for="(item, index) in teachingAchievements " :key="index">
+        <div class="img">
+          <img :src="imgurl + item.contentImg" alt="" class="imgWO">
+        </div>
+        <div class="tt">{{ item.contentTitle }}</div>
+        <div class="desc">
+          {{ item.summary }}
+        </div>
+        <div class="time">{{ item.publishDate }}</div>
+      </div>
     </div>
 
+    <!-- </div> -->
     <div class="page-box">
-      <el-pagination background layout="prev, pager, next" :total="1000" class="">
+      <el-pagination background layout="prev, pager, next" :total="1000" class="" />
-      </el-pagination>
+    </div>
+  </div>
+
+    <!-- 详情数据穿透 -->
+    <div class="team" v-if="isShowDetails">
+      <div class="neirong" v-html="detailsContent"></div>
     </div>
 
     <footers></footers>
@@ -57,6 +103,11 @@ export default {
   },
   data() {
     return {
+      isShowDetails:false,
+      detailsContent:"",
+      imgurl: process.env.VUE_APP_BASE_API,
+      topSwiperData: {},
+      teachingAchievements: [],
       pageContextList: [],
       swiperOptions: {
         navigation: {
@@ -93,7 +144,7 @@ export default {
 
     }
   },
-  mounted() {
+  created() {
     // 页面加载完毕调用
     this.initPageData();
   },
@@ -102,6 +153,11 @@ export default {
   },
 
   methods: {
+    showDetails(value){
+      debugger;
+      this.isShowDetails = true;
+      this.detailsContent = value.contentDetail;
+    },
     // 触发导航
     getCurrentActive(value) {
       if (this.currentActive == value) {
@@ -126,6 +182,18 @@ export default {
           });
 
           this.pageContextList.push(context);
+          // 虚拟专业频道
+          if (cloumnItem.id == "1818243334464999424") {
+            if (cloumnItem.children) {
+              //取首条数据作为顶部块展示
+              // this.topSwiperData = cloumnItem.children.list[0];
+              //除首条以外，用作下部块展示
+              for (let i = 0; i < cloumnItem.children.list.length; i++) {
+
+                this.teachingAchievements.push(cloumnItem.children.list[i]);
+              };
+            }
+          }
 
           // cloumnItem.categoryName
         });
@@ -149,10 +217,12 @@ export default {
   width: 240px;
   border-radius: 50px;
 }
-.page-box{
+
+.page-box {
   width: 82%;
   margin: 10px auto;
 }
+
 /* 圆形分页按钮样式 */
 ::v-deep .el-pagination .el-pager li:not(.disabled) {
   border-radius: 100%;
@@ -622,4 +692,6 @@ export default {
   line-height: 18px;
 
 }
+
+
 </style>