From 987b1e9cd7bba59c9670dd5a7e102433d5d583d3 Mon Sep 17 00:00:00 2001
From: xvv <cccccc420590@163.com>
Date: Sat, 3 Aug 2024 13:48:02 +0800
Subject: [PATCH] =?UTF-8?q?=E5=89=8D=E7=AB=AF=E8=A1=A5=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ruoyi-ui/src/api/gw/home.js                   |  14 +
 ruoyi-ui/src/views/home.vue                   |  75 ++++-
 ruoyi-ui/src/views/officialWebsite/xufang.vue | 317 ++++++++++--------
 3 files changed, 247 insertions(+), 159 deletions(-)

diff --git a/ruoyi-ui/src/api/gw/home.js b/ruoyi-ui/src/api/gw/home.js
index 065a8c5..0d80136 100644
--- a/ruoyi-ui/src/api/gw/home.js
+++ b/ruoyi-ui/src/api/gw/home.js
@@ -31,3 +31,17 @@ export function getBaseInfo(){
     method: "get"
   })
 }
+export function imitationList(query){
+  return request({
+    url: "/api/imitation/list",
+    method: "get",
+    params: query
+  })
+}
+
+export function imitationId(id){
+  return request({
+    url: "api/imitation/" + id,
+    method: "get"
+  })
+}
diff --git a/ruoyi-ui/src/views/home.vue b/ruoyi-ui/src/views/home.vue
index 33f7eab..544649e 100644
--- a/ruoyi-ui/src/views/home.vue
+++ b/ruoyi-ui/src/views/home.vue
@@ -116,21 +116,25 @@
       </div>
       <div class="new-gang"></div>
       <div class="news11-list">
-        <div class="news11-list-item" v-for="(item, index) in this.nationalVirtualLass" :key="index"  @click="goDeatail(item)">
+        <div class="news11-list-item" v-for="(item, index) in this.xlist" :key="index"  @click="goDeatails(item)">
           <div class="img">
-            <img :src="item.contentImg" class="imgWO" style="width: 100%; height: 100% ">
+            <div class="yl-right" v-if="item.imitationType == 1" > 国一流</div>
+            <div class="yl-right" v-if="item.imitationType == 2" > 省一流</div>
+            <img :src=" imgurl + item.imitationImage" class="imgWO" style="width: 100%; height: 100% ">
           </div>
           <div class="tt">
-            {{ item.contentTitle }}
+            {{ item.imitationTitle }}
           </div>
           <div class="tags">
-            <div class="p">{{ indexList[2].categoryName }}</div>
+            <div class="p">{{ item.imitationSchool }} | {{item.imitationTeach}} </div>
             <div class="icon"><i class="el-icon-user"></i>
-              {{ item.count }}
+              {{ item.imitationCount }}
             </div>
           </div>
           <div class="backmo">
-          {{item.summary}}
+            <p>{{ item.imitationTitle }}</p>
+            <div style="color: #54a3fd">{{ item.imitationSchool }} | {{item.imitationTeach}}</div>
+            <p class="psize"> {{item.imitationSummary}}</p>
           </div>
         </div>
 <!--        动画-->
@@ -146,9 +150,10 @@
 <script>
 import {Swiper, SwiperSlide} from "vue-awesome-swiper";
 import "swiper/css/swiper.min.css";
-import {getTab, getbanner, getBaseInfo} from "@/api/gw/home";
+import { getTab, getbanner, getBaseInfo, imitationList, imitationId } from '@/api/gw/home'
 import headers from '@/views/officialWebsite/Components/header.vue'
 import footers from '@/views/officialWebsite/Components/footer.vue'
+
 export default {
   components: {
     Swiper,
@@ -162,7 +167,7 @@ export default {
   },
   data() {
     return {
-
+      imgurl:process.env.VUE_APP_BASE_API,
       Serial:0,
       baseInfo:"",
       categoryQuery: {
@@ -171,6 +176,7 @@ export default {
         pageSize: 10
       },
       input4:'',
+      xlist:[],
       indexList:[],
       newList:[[], []],
       noticeList: [],
@@ -295,6 +301,14 @@ export default {
         this.$router.push('/contact');
       }
     },
+    goDeatails(data){
+
+      imitationId(data.id).then(res=>{
+        console.log(res,'调用成功')
+      })
+      window.open(data.link, '_blank');
+
+    },
     goDeatail(data){
       console.log(data)
       if(data.linkType == 0){
@@ -304,6 +318,9 @@ export default {
         });
       }
       if(data.linkType == 1){
+        imitationId(data.id).then(res=>{
+          console.log(res,'调用成功')
+        })
         window.open(data.link, '_blank');
       }
     },
@@ -349,6 +366,13 @@ export default {
       })
     },
     getWebBaseInfo() {
+      imitationList().then(res =>{
+        console.log(res,'虚')
+        var firstEightItems = res.rows.slice(0, 8);
+        firstEightItems.forEach(item => {
+          this.xlist.push(item);
+        });
+      })
       getBaseInfo().then(res => {
         this.baseInfo = res.data
         this.baseInfo.webImg = process.env.VUE_APP_BASE_API + this.baseInfo.webImg
@@ -618,15 +642,10 @@ export default {
 
 
 ::v-deep .new-banner .swiper-pagination-bullet {
-
-
   width: 10px !important;
-
   height: 10px !important;
-
   opacity: 1;
   margin: 0 5px !important;
-
   border-radius: 50%;
   background: #EEEEEE;
 }
@@ -869,7 +888,7 @@ export default {
   margin-top: 50px;
   display: flex;
   flex-wrap: wrap;
-  justify-content: space-between;
+
 }
 
 .backmo{
@@ -889,6 +908,7 @@ export default {
   height: 324px;
   margin-bottom: 20px;
   position: relative;
+  margin-right: 10px;
 }
 
 .news11 .news11-list .news11-list-item:hover>.backmo {
@@ -899,6 +919,7 @@ export default {
   transition: background-color 0.5s;
   background-color: rgba(0, 0, 0, 0.46) !important;
   color: #fff;
+  border-radius: 10px;
 
 }
 .news11 .news11-list .news11-list-item .img {
@@ -907,6 +928,18 @@ export default {
   border-radius: 10px ;
   overflow: hidden;
   margin-bottom: 15px;
+  position: relative;
+  overflow: hidden;
+}
+.yl-right{
+  position: absolute;
+  background: #da4925;
+  left: 0px;
+  top: 0px;
+  color: #fff;
+  border-radius: 0px 0px 10px 0px;
+  font-size: 12px;
+  padding: 5px ;
 }
 
 .news11 .news11-list .news11-list-item .img img {
@@ -914,7 +947,7 @@ export default {
 }
 
 .news11 .news11-list .news11-list-item .tt {
-
+  height: 55px;
   line-height: 28px;
   font-size: 18px;
   overflow: hidden;
@@ -929,6 +962,18 @@ export default {
   -webkit-line-clamp: 2;
   /** 显示的行数 **/
 }
+.psize{
+  overflow: hidden;
+  /** 隐藏超出的内容 **/
+  word-break: break-all;
+  text-overflow: ellipsis;
+  /** 多行 **/
+  display: -webkit-box;
+  /** 对象作为伸缩盒子模型显示 **/
+  -webkit-box-orient: vertical;
+  /** 设置或检索伸缩盒对象的子元素的排列方式 **/
+  -webkit-line-clamp: 8;
+}
 
 .news11 .news11-list .news11-list-item .tags {
   display: flex;
diff --git a/ruoyi-ui/src/views/officialWebsite/xufang.vue b/ruoyi-ui/src/views/officialWebsite/xufang.vue
index 5f7d5ff..e4f25ec 100644
--- a/ruoyi-ui/src/views/officialWebsite/xufang.vue
+++ b/ruoyi-ui/src/views/officialWebsite/xufang.vue
@@ -7,73 +7,47 @@
         <img src="../../assets/gw/ny-banner.jpg" alt="">
       </div>
     </div>
-
-    <div class="navigation">
-      <div class="content">
-        <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' : '']"
-          @click="getCurrentActive(index)">
-          {{ item.categoryName }}
-        </div> -->
-
-      </div>
-    </div>
-    <!-- <div class="top-swiper">
-      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 class="news11">
+      <div class="news11-list">
+        <div class="news11-list-item" v-for="(item, index) in this.xlist" :key="index"  @click="goDeatail(item)">
+          <div class="img">
+            <div class="yl-right" v-if="item.imitationType == 1" > 国一流</div>
+            <div class="yl-right" v-if="item.imitationType == 2" > 省一流</div>
+            <img :src=" imgurl + item.imitationImage" class="imgWO" style="width: 100%; height: 100% ">
           </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 class="tt">
+            {{ item.imitationTitle }}
+          </div>
+          <div class="tags">
+            <div class="p">{{ item.imitationSchool }} | {{item.imitationTeach}} </div>
+            <div class="icon"><i class="el-icon-user"></i>
+              {{ item.imitationCount }}
             </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 class="backmo">
+            <p>{{ item.imitationTitle }}</p>
+            <div style="color: #54a3fd">{{ item.imitationSchool }} | {{item.imitationTeach}}</div>
+            <p class="psize"> {{item.imitationSummary}}</p>
+          </div>
         </div>
-        <div class="tt">{{ item.contentTitle }}</div>
-        <div class="desc">
-          {{ item.summary }}
-        </div>
-        <div class="time">{{ item.publishDate }}</div>
+        <!--        动画-->
       </div>
+      <div class="pagin" >
+        <el-pagination
+          background
+          layout="prev, pager, next"
+          v-show="total>0"
+          :total="total"
+          :current-page.sync="queryParams.pageNum"
+          :page-size.sync="queryParams.pageSize"
+          @size-change="getWebBaseInfo"
+          @current-change="getWebBaseInfo">
+        </el-pagination>
+      </div>
+
     </div>
 
-    <!-- </div> -->
-    <div class="page-box">
-      <el-pagination background layout="prev, pager, next" :total="1000" class="" />
-    </div>
-  </div>
+
 
     <!-- 详情数据穿透 -->
     <div class="team" v-if="isShowDetails">
@@ -88,6 +62,7 @@
 import { Swiper, SwiperSlide } from "vue-awesome-swiper";
 import "swiper/css/swiper.min.css";
 import { getPageData, getPageColumn } from "@/api/officialWebsite/getPageData";
+import { getTab, getbanner, getBaseInfo, imitationList, imitationId } from '@/api/gw/home'
 import headers from '@/views/officialWebsite/Components/header.vue'
 import footers from '@/views/officialWebsite/Components/footer.vue'
 export default {
@@ -103,6 +78,12 @@ export default {
   },
   data() {
     return {
+      xlist:[],
+      total: 0,
+      queryParams: {
+        pageNum: 1,
+        pageSize: 8,
+      },
       isShowDetails:false,
       detailsContent:"",
       imgurl: process.env.VUE_APP_BASE_API,
@@ -127,7 +108,6 @@ export default {
         slidesPerView: 'auto',
         // centeredslides: true,
         paginationclickable: true,
-        spaceBetween: 0,//模块之间的间隔
         on: {
           slidechangeTransitionEnd: function () {
             //处理手动操作轮播图后后不再自动轮播
@@ -147,17 +127,22 @@ export default {
   created() {
     // 页面加载完毕调用
     this.initPageData();
+    this.getWebBaseInfo()
   },
   computed: {
 
   },
 
   methods: {
-    showDetails(value){
-      debugger;
-      this.isShowDetails = true;
-      this.detailsContent = value.contentDetail;
+    goDeatail(data){
+
+        imitationId(data.id).then(res=>{
+          console.log(res,'调用成功')
+        })
+        window.open(data.link, '_blank');
+
     },
+
     // 触发导航
     getCurrentActive(value) {
       if (this.currentActive == value) {
@@ -165,8 +150,14 @@ export default {
       }
       this.currentActive = value
     },
-    initPageData() {
+    getWebBaseInfo() {
+      imitationList(this.queryParams).then(res =>{
+          this.xlist = res.rows
+          this.total = res.total
+      })
 
+    },
+    initPageData() {
       let routeParam = {
         "categoryId": this.$route.query.id,
         "pageNum": 1,
@@ -223,82 +214,7 @@ export default {
   margin: 10px auto;
 }
 
-/* 圆形分页按钮样式 */
-::v-deep .el-pagination .el-pager li:not(.disabled) {
-  border-radius: 100%;
-  /* 圆形 */
-  width: 50px;
-  height: 50px;
-  /* 按钮高度 */
-  line-height: 50px;
-  /* 文字垂直居中 */
-  text-align: center;
-  /* 文字水平居中 */
-  margin: 0 15px;
-  /* 按钮间距 */
-  border-radius: 50%;
-  width: 50px;
-  height: 50px;
-  background: #FFFFFF;
 
-  border: 1px solid #DDDDDD;
-}
-
-/* 选中的页码按钮样式 */
-::v-deep .el-pagination .el-pager .active {
-  background-color: #005375;
-  ;
-  /* 背景颜色 */
-  color: #fff;
-  /* 文字颜色 */
-}
-
-::v-deep .el-pagination.is-background .btn-next,
-::v-deep .el-pagination.is-background .btn-prev {
-
-  background-color: #f4f4f5;
-  color: #333;
-  margin: 0 15px;
-  border-radius: 50%;
-  width: 50px;
-  height: 50px;
-  background: #FFFFFF;
-
-  border: 1px solid #DDDDDD;
-}
-
-::v-deep .el-pagination .btn-next .el-icon,
-::v-deep .el-pagination .btn-prev .el-icon {
-  font-size: 18px;
-}
-
-.top-box {
-  width: 100%;
-  /* height: 1000px; */
-  /* background: url(''); */
-  /* background-size: cover; */
-  /* 背景图片铺满盒子 */
-  /* background-repeat: no-repeat; */
-  /* 禁止背景图片重复 */
-  position: relative;
-}
-
-.tab-box {
-  width: 100%;
-  box-sizing: border-box;
-  padding: 20px 2%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
-  background-color: #005375;
-  font-weight: bold;
-  font-size: 18px;
-  color: #FFFFFF;
-  /* position: absolute; */
-  z-index: 3;
-
-}
 
 .d-s {
   display: flex;
@@ -416,7 +332,6 @@ export default {
 
 ::v-deep .top-swiper .swiper-pagination {
   position: absolute;
-
   display: flex;
   justify-content: flex-end;
   width: 97%;
@@ -427,11 +342,9 @@ export default {
   font-size: 30px;
   color: #00A0E8;
 }
-
 ::v-deep .top-swiper .swiper-pagination-current {
   font-size: 30px;
 }
-
 ::v-deep .swiper-pagination-total {
   font-size: 24px;
   margin-top: 8px;
@@ -693,5 +606,121 @@ export default {
 
 }
 
+.news11-list {
+  width: 80%;
+  margin: 0 auto;
+  margin-top: 50px;
+  display: flex;
+  flex-wrap: wrap;
 
+}
+.news11 .news11-list .news11-list-item {
+  width: 24%;
+  height: 324px;
+  margin-bottom: 20px;
+  position: relative;
+  margin-right: 10px;
+}
+
+.news11 .news11-list .news11-list-item:hover>.backmo {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 15px;
+  transition: background-color 0.5s;
+  background-color: rgba(0, 0, 0, 0.46) !important;
+  color: #fff;
+  border-radius: 10px;
+
+}
+.news11 .news11-list .news11-list-item .img {
+  width: 100%;
+  height: 194px;
+  border-radius: 10px ;
+  overflow: hidden;
+  margin-bottom: 15px;
+  position: relative;
+  overflow: hidden;
+}
+.yl-right{
+  position: absolute;
+  background: #da4925;
+  left: 0px;
+  top: 0px;
+  color: #fff;
+  border-radius: 0px 0px 10px 0px;
+  font-size: 12px;
+  padding: 5px ;
+}
+
+.news11 .news11-list .news11-list-item .img img {
+  aspect-ratio: 16/9;
+}
+
+.news11 .news11-list .news11-list-item .tt {
+  height: 55px;
+  line-height: 28px;
+  font-size: 18px;
+  overflow: hidden;
+  /** 隐藏超出的内容 **/
+  word-break: break-all;
+  text-overflow: ellipsis;
+  /** 多行 **/
+  display: -webkit-box;
+  /** 对象作为伸缩盒子模型显示 **/
+  -webkit-box-orient: vertical;
+  /** 设置或检索伸缩盒对象的子元素的排列方式 **/
+  -webkit-line-clamp: 2;
+  /** 显示的行数 **/
+}
+.psize{
+  overflow: hidden;
+  /** 隐藏超出的内容 **/
+  word-break: break-all;
+  text-overflow: ellipsis;
+  /** 多行 **/
+  display: -webkit-box;
+  /** 对象作为伸缩盒子模型显示 **/
+  -webkit-box-orient: vertical;
+  /** 设置或检索伸缩盒对象的子元素的排列方式 **/
+  -webkit-line-clamp: 8;
+}
+
+.news11 .news11-list .news11-list-item .tags {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+}
+.backmo{
+  width: 0%;
+  height: 0%;
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  overflow: hidden;
+
+}
+
+.news11 .news11-list .news11-list-item .tags .p {
+  font-size: 14px;
+  color: #005375;
+  font-weight: 700;
+}
+
+.news11 .news11-list .news11-list-item .tags i {
+  color: #999999;
+}
+
+.news11 .news11-list .news11-list-item .tags .icon {
+  color: #999999;
+  font-size: 14px;
+}
+.pagin{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 50px;
+}
 </style>