更新

ruoyi-ui/src/views/officialWebsite/Components/header.vue

@@ -16,7 +16,7 @@
            @click="tabClick(item.jumpUrl, item.id,index)"
       >
         <div>
-          <img v-if="item.iconUrl" :src=" imgurl +item.iconUrl " alt="" style="width: 25px;height: 25px">
+          <img v-if="item.iconUrl" :src=" imgurl +item.iconUrl " alt="" style="width: 20px;height: 20px">
         </div>
         <div class="bsize">{{ item.label }}</div>
       </div>
@@ -500,7 +500,8 @@ export default {
 .tab-boxs {
   width: 100%;
   box-sizing: border-box;
-  padding: 0px 50px;
+  //padding: 0px 50px;
+  padding-left: 40px;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -526,15 +527,15 @@ export default {
 }
 
 .logo-box img {
-  width: 50px;
+  width: 47px;
-  height: 50px;
+  height: 47px;
 }
 
 .logo-size {
   font-weight: 600;
-  font-size: 22px;
+  font-size: 16px;
   color: #FFFFFF;
-  margin-left: 20px;
+  margin-left: 10px;
 
 }
 
@@ -558,7 +559,7 @@ export default {
 
 .bsize {
   font-weight: 500;
-  font-size: 16px;
+  font-size: 15px;
   color: #FFFFFF;
 }
 

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

@@ -1,51 +1,64 @@
 <template>
   <div class="container">
+
     <div class="top-box">
-      <headers  :msg='msg'></headers>
+      <headers :msg="msg"></headers>
 
       <div class="ny-banner">
-        <img src="../../assets/gw/zxgg.jpg" alt="">
+        <img src="../../assets/gw/zxgkbanner.png" alt="">
       </div>
     </div>
     <!-- new -->
     <div class="navigation">
       <div class="content">
         <div></div>
-<!--        <div class="left"><img src="../../assets/gw/home.png" alt="">-->
+        <!--        <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>-->
+        <!--          <p><a href="/gw">首页</a><i class="el-icon-arrow-right"></i> <span href="">中心概况</span></p>-->
-<!--        </div>-->
+        <!--        </div>-->
         <div class="right">
           <div class="nav-item" v-for="(item, index) in nav" v-bind:class="[index === currentActive ? 'active' : '']"
-               @click="getCurrentActive(index)">
+               @click="getCurrentActive(index)"
+          >
             {{ item.categoryName }}
           </div>
         </div>
       </div>
     </div>
     <div class="about-conts" v-bind:class="[currentActive == 0 ? 'bj' : '']">
+      <div class="left_img" ref="leftImg">
+        <img src="../../assets/images/l_img.png" alt="">
+      </div>
+      <div class="right_img" ref="rightImg">
+        <img src="../../assets/images/l_img.png" alt="">
+      </div>
       <!-- main -->
       <div v-for="(item, index) in nav " :key=index>
-        <div class="about-conts-item1" v-if="currentActive == index && currentActive !== 1">
+        <div class="about-conts-item1" v-if="currentActive == index ">
           <div class="neirong" v-html="pageContext"></div>
+
         </div>
-        <div class="about-conts-item1" v-if="currentActive == index && currentActive === 1">
+<!--        <div class="about-conts-item1" v-if="currentActive == index && currentActive === 1">-->
-          <div class="dataClass">
+<!--          <div class="dataClass">-->
-            <div class="ddj" v-for="(item, index) in dataList" @click="goDeatail(item)">
+<!--            <div class="ddj" v-for="(item, index) in dataList" @click="goDeatail(item)">-->
-              {{ item.contentTitle  }}
+<!--              {{ item.contentTitle }}-->
+<!--            </div>-->
+<!--          </div>-->
+
+<!--        </div>-->
+
       </div>
     </div>
+    <div class="bottom_img" ref="bottomImg">
     </div>
-      </div>
+    <footers style="position: relative"></footers>
-    </div>
-    <footers></footers>
   </div>
 </template>
 
 <script>
-import {Swiper, SwiperSlide} from "vue-awesome-swiper";
+import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
-import "swiper/css/swiper.min.css";
+import 'swiper/css/swiper.min.css'
-import { getListById, getCategoryByParentId} from "@/api/officialWebsite/getPageData";
+import { getListById, getCategoryByParentId } from '@/api/officialWebsite/getPageData'
-import {getinfo} from "@/api/gw/home";
+import { getinfo } from '@/api/gw/home'
 import headers from '@/views/officialWebsite/Components/header.vue'
 import footers from '@/views/officialWebsite/Components/footer.vue'
 
@@ -64,19 +77,18 @@ export default {
 
   data() {
     return {
-      msg:1,
+      msg: 1,
       dataList: [],
-      pageContext: "",
+      pageContext: '',
-      nav: [
+      nav: [],
-      ],
       currentActive: 0,
       isMounted: false,
-      orgList: "",
+      orgList: '',
       postList: [],
-      content: "",
+      content: '',
-      leaderList: "",
+      leaderList: '',
-      queryForm:{
+      queryForm: {
-        categoryId: this.$route.query.id || "",
+        categoryId: this.$route.query.id || '',
         pageNum: 1,
         pageSize: 10
       }
@@ -86,10 +98,38 @@ export default {
   mounted() {
     // 页面加载完毕调用
     // debugger;
-    this.initPageData();
+    this.initPageData()
+    // 在组件挂载后添加滚动监听
+    window.addEventListener('scroll', this.handleScroll)
+  },
+
+  beforeDestroy() {
+    // 在组件销毁前移除滚动监听
+    window.removeEventListener('scroll', this.handleScroll)
   },
 
   methods: {
+    handleScroll() {
+      let browserHeight = document.documentElement.clientHeight
+      console.log("高度",document.documentElement.clientHeight)
+      const leftImg = this.$refs.leftImg
+      const rightImg = this.$refs.rightImg
+      const bottomImg = this.$refs.bottomImg
+      const scrollPosition = window.scrollY
+      if (scrollPosition > 450) {
+        leftImg.style.top = '100px'
+        leftImg.style.position = 'fixed'
+        rightImg.style.top = '0px'
+        rightImg.style.position = 'fixed'
+        bottomImg.style.bottom="0"
+      } else {
+        leftImg.style.top = '250px'
+        leftImg.style.position = 'absolute'
+        rightImg.style.top = '150px'
+        rightImg.style.position = 'absolute'
+        bottomImg.style.bottom="-300px"
+      }
+    },
     // 触发导航
     getCurrentActive(value) {
       if (this.currentActive == value) {
@@ -98,7 +138,7 @@ export default {
       this.currentActive = value
       if (value === 1) {
         this.getContentByCategoryId(this.nav[value].id)
-      }else {
+      } else {
         this.getContent()
       }
     },
@@ -110,12 +150,12 @@ export default {
     initPageData() {
       getCategoryByParentId(this.queryForm.categoryId).then(res => {
         this.nav = res.data
-        if (this.currentActive === 0){
+        if (this.currentActive === 0) {
           this.getContent()
         }
       })
     },
-    getContent(){
+    getContent() {
       this.queryForm.categoryId = this.nav[this.currentActive].id
       getinfo(this.queryForm).then(res => {
         this.pageContext = res.data.list[0].contentDetail
@@ -126,7 +166,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 /* .container {
   background: #F5F5F5;
 } */
@@ -134,6 +174,32 @@ export default {
   background: #F5F5F5;
 }
 
+.container {
+  //position: relative;
+}
+
+.b_img {
+  position: absolute;
+  top: 0;
+  left: 0px;
+  overflow: hidden;
+
+  img {
+    width: 100%;
+  }
+}
+
+.r_img {
+  position: absolute;
+  top: 0;
+  right: 0px;
+  overflow: hidden;
+
+  img {
+    width: 100%;
+  }
+}
+
 .top-box {
   width: 100%;
   /* height: 1000px; */
@@ -267,13 +333,35 @@ export default {
 
 .about-conts {
   padding: 40px 0;
+  padding-bottom: 0px;
+  position: relative;
+  background-image: url("../../assets/images/top_.png");
+  background-repeat: no-repeat;
+  background-position: top;
+  //z-index: -2;
+  background-position: top;
+
 }
 
+//.bottom_img {
+//  width: 100%;
+//  height: 400px;
+//  position: fixed; /* 固定在页面 */
+//  bottom: 0px; /* 固定在底部 */
+//  left: 0; /* 确保元素从页面左侧开始 */
+//  background-image: url("../../assets/images/bottom_.png");
+//  background-repeat: no-repeat;
+//  //z-index: -1;
+//  background-size: cover;
+//}
+
+
 .about-conts .about-conts-item1 {
   padding: 30px 2%;
   width: 76%;
   margin: 0 auto;
   background-color: #fff;
+  z-index: 999!important;
 }
 
 .about-conts .about-conts-item2 {
@@ -524,11 +612,13 @@ export default {
   gap: 10px;
 
 }
-.ddj:hover{
+
+.ddj:hover {
   background-color: #00afff;
   color: #fff;
 }
-.ddj{
+
+.ddj {
   border: 1px solid black;
   font-size: 18px;
   margin: 10px;
@@ -538,4 +628,62 @@ export default {
   cursor: pointer;
 }
 
+.neirong {
+  background: #fff;
+}
+
+@keyframes bounce {
+  0%, 20%, 50%, 80%, 100% {
+    transform: translateY(0);
+  }
+  40% {
+    transform: translateY(-30px);
+  }
+  60% {
+    transform: translateY(-15px);
+  }
+}
+
+.left_img {
+  position: absolute;
+  left: 15px;
+  top: 250px;
+  display: inline-block;
+  animation-name: bounce;
+  animation-duration: 2s; /* 设置整个动画持续时间为两秒 */
+  animation-timing-function: ease-in-out; /* 控制速度曲线 */
+  animation-iteration-count: infinite; /* 循环播放次数 */
+  //position: fixed; /* 固定在页面 */
+  //top: 0px; /* 固定在底部 */
+
+}
+
+.right_img {
+  position: absolute;
+  right: 15px;
+  top: 150px;
+  display: inline-block;
+  animation-name: bounce;
+  animation-duration: 2s; /* 设置整个动画持续时间为两秒 */
+  animation-timing-function: ease-in-out; /* 控制速度曲线 */
+  animation-iteration-count: infinite; /* 循环播放次数 */
+}
+
+@keyframes fadeOut {
+  from { opacity: 1; }
+  to { opacity: 0; display: none; }
+}
+.bottom_img {
+  width: 100%;
+  height: 400px;
+  position: fixed; /* 固定在页面 */
+  display: block;
+  bottom: -300px;
+  left: 0; /* 确保元素从页面左侧开始 */
+  background-image: url("../../assets/images/bottom_.png");
+  background-repeat: no-repeat;
+  //z-index: -1;
+  background-size: cover;
+  transition: all 1s linear;
+}
 </style>

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

@@ -1,7 +1,7 @@
 <template>
   <div class="container">
     <div class="top-box">
-      <headers :msg='msg'></headers>
+      <headers :msg="msg"></headers>
 
       <div class="ny-banner">
         <img src="../../assets/gw/hzqy.png" alt="">
@@ -10,15 +10,22 @@
 
     <div class="navigation">
       <div class="content">
-<!--        <div class="left"><img src="../../assets/gw/home.png" alt="">-->
+        <!--        <div class="left"><img src="../../assets/gw/home.png" alt="">-->
-<!--          <p><span href="/">首页</span><i class="el-icon-arrow-right"></i> <span href="">合作企业</span></p>-->
+        <!--          <p><span href="/">首页</span><i class="el-icon-arrow-right"></i> <span href="">合作企业</span></p>-->
-<!--        </div>-->
+        <!--        </div>-->
 
       </div>
     </div>
 
     <div class="list">
+      <div class="left_img" ref="leftImg">
+        <img src="../../assets/images/l_img.png" alt="">
+      </div>
+      <div class="right_img" ref="rightImg">
+        <img src="../../assets/images/l_img.png" alt="">
+      </div>
 
+      <div class="list1">
         <div class="item" v-for="(item, index) in teachingAchievements" :key="index" @click="goDeatail(item)">
           <div class="img">
             <img :src="imgurl + item.contentImg" alt="">
@@ -28,23 +35,27 @@
         </div>
       </div>
 
-    <div class="page-box">
-<!--      <el-pagination background layout="prev, pager, next" :total="1000" class="">-->
-<!--      </el-pagination>-->
-<!--      <page-util :category-id="categoryId" @event-message="handleDataFromPage" />-->
     </div>
 
-    <footers></footers>
+    <div class="page-box">
+      <!--      <el-pagination background layout="prev, pager, next" :total="1000" class="">-->
+      <!--      </el-pagination>-->
+      <!--      <page-util :category-id="categoryId" @event-message="handleDataFromPage" />-->
+    </div>
+    <div class="bottom_img"  ref="bottomImg">
+    </div>
+
+    <footers style="position: relative"></footers>
   </div>
 </template>
 
 <script>
-import {Swiper, SwiperSlide} from "vue-awesome-swiper";
+import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
-import "swiper/css/swiper.min.css";
+import 'swiper/css/swiper.min.css'
-import {getPageData, getListById,getCategoryByParentId} from "@/api/officialWebsite/getPageData";
+import { getPageData, getListById, getCategoryByParentId } from '@/api/officialWebsite/getPageData'
 import headers from '@/views/officialWebsite/Components/header.vue'
 import footers from '@/views/officialWebsite/Components/footer.vue'
-import {getTab, getinfo} from "@/api/gw/home";
+import { getTab, getinfo } from '@/api/gw/home'
 import PageUtil from '@/views/officialWebsite/Components/page'
 
 export default {
@@ -53,13 +64,13 @@ export default {
     SwiperSlide,
     headers,
     footers,
-    "page-util": PageUtil
+    'page-util': PageUtil
   },
   name: 'HelloWorld',
 
   data() {
     return {
-      msg:10,
+      msg: 10,
       imgurl: process.env.VUE_APP_BASE_API,
       teachingAchievements: [],
       pageContextList: [],
@@ -69,16 +80,49 @@ export default {
       ],
       currentActive: 0,
       isMounted: false,
-      categoryId: "",
+      categoryId: ''
     }
   },
   created() {
     // 页面加载完毕调用
-    this.initPageData();
+    this.initPageData()
+  },
+  mounted() {
+    // 页面加载完毕调用
+    // debugger;
+    this.initPageData()
+    // 在组件挂载后添加滚动监听
+    window.addEventListener('scroll', this.handleScroll)
+  },
+
+  beforeDestroy() {
+    // 在组件销毁前移除滚动监听
+    window.removeEventListener('scroll', this.handleScroll)
   },
   computed: {},
 
   methods: {
+    handleScroll() {
+      let browserHeight = document.documentElement.clientHeight
+      console.log("高度",document.documentElement.clientHeight)
+      const leftImg = this.$refs.leftImg
+      const rightImg = this.$refs.rightImg
+      const bottomImg = this.$refs.bottomImg
+      const scrollPosition = window.scrollY
+      if (scrollPosition > 450) {
+        leftImg.style.top = '100px'
+        leftImg.style.position = 'fixed'
+        rightImg.style.top = '0px'
+        rightImg.style.position = 'fixed'
+        bottomImg.style.bottom="0"
+      } else {
+        leftImg.style.top = '250px'
+        leftImg.style.position = 'absolute'
+        rightImg.style.top = '150px'
+        rightImg.style.position = 'absolute'
+        bottomImg.style.bottom="-300px"
+      }
+    },
     // 触发导航
     getCurrentActive(value) {
       if (this.currentActive == value) {
@@ -89,9 +133,9 @@ export default {
 
     initPageData() {
       let routeParam = {
-        "categoryId": this.$route.query.id,
+        'categoryId': this.$route.query.id,
-        "pageNum": 1,
+        'pageNum': 1,
-        "pageSize": 10
+        'pageSize': 10
       }
       getCategoryByParentId(routeParam.categoryId).then(res => {
         getListById(res.data[0].id).then(response => {
@@ -99,7 +143,7 @@ export default {
         })
       })
     },
-    handleDataFromPage(data){
+    handleDataFromPage(data) {
       this.teachingAchievements = data
     }
   }
@@ -307,13 +351,22 @@ export default {
 
 
 .list {
-  width: 80%;
+//width: 80%; //margin: 30px auto; display: flex;
-  margin: 30px auto;
-  display: flex;
   flex-wrap: wrap;
   /*justify-content: space-between;*/
   margin-top: 50px;
+  padding-bottom: 0px;
+  position: relative;
+  background-image: url("../../assets/images/top_.png");
+  background-repeat: no-repeat;
+  background-position: top;
+}
 
+.list1 {
+  width: 76%;
+  margin: 30px auto;
+  display: flex;
+  flex-wrap: wrap;
 }
 
 .list .item {
@@ -491,4 +544,57 @@ export default {
   line-height: 18px;
 
 }
+
+@keyframes bounce {
+  0%, 20%, 50%, 80%, 100% {
+    transform: translateY(0);
+  }
+  40% {
+    transform: translateY(-30px);
+  }
+  60% {
+    transform: translateY(-15px);
+  }
+}
+
+.left_img {
+  position: absolute;
+  left: 0px;
+  top: 200px;
+  display: inline-block;
+  animation-name: bounce;
+  animation-duration: 2s; /* 设置整个动画持续时间为两秒 */
+  animation-timing-function: ease-in-out; /* 控制速度曲线 */
+  animation-iteration-count: infinite; /* 循环播放次数 */
+
+}
+
+.right_img {
+  position: absolute;
+  right: 0px;
+  top: 100px;
+  display: inline-block;
+  animation-name: bounce;
+  animation-duration: 2s; /* 设置整个动画持续时间为两秒 */
+  animation-timing-function: ease-in-out; /* 控制速度曲线 */
+  animation-iteration-count: infinite; /* 循环播放次数 */
+}
+
+@keyframes fadeOut {
+  from { opacity: 1; }
+  to { opacity: 0; display: none; }
+}
+.bottom_img {
+  width: 100%;
+  height: 400px;
+  position: fixed; /* 固定在页面 */
+  display: block;
+  bottom: -300px;
+  left: 0; /* 确保元素从页面左侧开始 */
+  background-image: url("../../assets/images/bottom_.png");
+  background-repeat: no-repeat;
+//z-index: -1;
+  background-size: cover;
+  transition: all 1s linear;
+}
 </style>

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

@@ -22,27 +22,36 @@
         </div>
       </div>
     </div>
-    <div class="committee-cont" v-show="currentActive == 0">
+<!--    <div class="committee-cont" v-show="currentActive == 0">-->
-      <div >
+<!--      <div >-->
+
+
+<!--      </div>-->
+<!--    v-if="currentActive !== 0"-->
+<!--    </div>-->
+
+    <div class="committee-cont"  >
+      <div class="left_img" ref="leftImg">
+        <img src="../../assets/images/l_img.png" alt="">
+      </div>
+      <div class="right_img" ref="rightImg">
+        <img src="../../assets/images/l_img.png" alt="">
+      </div>
+      <!-- main -->
+      <div v-if="currentActive == 0" style="width: 75%;background: #fff;">
         <div class="n-box"   v-for="(item,index) in onelist" @click="goDeatail(item)" >
           <div>
-            <div class="v-time" >{{item.publishDate}}</div>
+            <div class="v-time" >{{item.publishDate}}111</div>
-            <div class="v-title">{{item.contentTitle}}</div>
+            <div class="v-title">{{item.contentTitle}}111</div>
-            <div class="v-size">{{item.summary || '' }}</div>
+            <div class="v-size">{{item.summary || '' }}11</div>
           </div>
           <div>
             <img :src=" imgurl + item.contentImg"  style="width: 420px; height: 263px; ">
           </div>
         </div>
-
+        <page-util style="background: #fff;z-index: 999;position:relative" :category-id="categoryId" @event-message="handleDataFromPage" />
       </div>
-      <page-util style="margin-top: 30px" :category-id="categoryId" @event-message="handleDataFromPage" />
+      <div v-else>
-    </div>
-
-    <div class="committee-cont" v-if="currentActive !== 0" >
-      <!-- main -->
-      <div>
-
         <div class="about-conts-item1" v-if="currentActive == 2">
           <div class="noticeRsr" v-html="twolist" >
           </div>
@@ -55,9 +64,11 @@
           </div>
         </div>
       </div>
-    </div>
 
-    <footers></footers>
+    </div>
+    <div class="bottom_img"  ref="bottomImg">
+    </div>
+    <footers style="position: relative;"></footers>
   </div>
 </template>
 
@@ -109,8 +120,38 @@ export default {
   computed: {
 
   },
+  mounted() {
+    // 在组件挂载后添加滚动监听
+    window.addEventListener('scroll', this.handleScroll)
+  },
+
+  beforeDestroy() {
+    // 在组件销毁前移除滚动监听
+    window.removeEventListener('scroll', this.handleScroll)
+  },
 
   methods: {
+    handleScroll() {
+      let browserHeight = document.documentElement.clientHeight
+      console.log("高度",document.documentElement.clientHeight)
+      const leftImg = this.$refs.leftImg
+      const rightImg = this.$refs.rightImg
+      const bottomImg = this.$refs.bottomImg
+      const scrollPosition = window.scrollY
+      if (scrollPosition > 450) {
+        leftImg.style.top = '100px'
+        leftImg.style.position = 'fixed'
+        rightImg.style.top = '0px'
+        rightImg.style.position = 'fixed'
+        bottomImg.style.bottom="0"
+      } else {
+        leftImg.style.top = '250px'
+        leftImg.style.position = 'absolute'
+        rightImg.style.top = '150px'
+        rightImg.style.position = 'absolute'
+        bottomImg.style.bottom="-300px"
+      }
+    },
     getContentDetail(){
       this.routeParam.categoryId = this.nav[this.currentActive].id
       getPageData(this.routeParam).then(res => {
@@ -199,7 +240,9 @@ export default {
 
   border: 1px solid #DDDDDD;
 }
-
+.about-conts-item1{
+  background: #fff;
+}
 /* 选中的页码按钮样式 */
 ::v-deep .el-pagination .el-pager .active {
    background-color: #005375 !important;
@@ -359,13 +402,20 @@ export default {
 }
 
 .committee-cont {
-  width: 80%;
+  //width: 80%;
-  margin: 15px auto;
+  //margin: 15px auto;
-  padding: 30px 0;
+  //padding: 30px 0;
-  background: #fff;
+  //box-sizing: border-box;
-  box-sizing: border-box;
   padding: 15px;
   border-radius: 8px;
+  display: flex;
+  justify-content: center;  /* 水平居中 */
+  align-items: center;      /* 垂直居中 */
+  padding-bottom: 0px;
+  position: relative;
+  background-image: url("../../assets/images/top_.png");
+  background-repeat: no-repeat;
+  background-position: top;
 }
 
 .committee-cont .news {
@@ -641,4 +691,57 @@ export default {
   font-size: 18px;
   color: #999999;
 }
+
+@keyframes bounce {
+  0%, 20%, 50%, 80%, 100% {
+    transform: translateY(0);
+  }
+  40% {
+    transform: translateY(-30px);
+  }
+  60% {
+    transform: translateY(-15px);
+  }
+}
+
+.left_img {
+  position: absolute;
+  left: 15px;
+  top: 250px;
+  display: inline-block;
+  animation-name: bounce;
+  animation-duration: 2s; /* 设置整个动画持续时间为两秒 */
+  animation-timing-function: ease-in-out; /* 控制速度曲线 */
+  animation-iteration-count: infinite; /* 循环播放次数 */
+
+}
+
+.right_img {
+  position: absolute;
+  right: 15px;
+  top: 150px;
+  display: inline-block;
+  animation-name: bounce;
+  animation-duration: 2s; /* 设置整个动画持续时间为两秒 */
+  animation-timing-function: ease-in-out; /* 控制速度曲线 */
+  animation-iteration-count: infinite; /* 循环播放次数 */
+}
+
+@keyframes fadeOut {
+  from { opacity: 1; }
+  to { opacity: 0; display: none; }
+}
+.bottom_img {
+  width: 100%;
+  height: 400px;
+  position: fixed; /* 固定在页面 */
+  display: block;
+  bottom: -300px;
+  left: 0; /* 确保元素从页面左侧开始 */
+  background-image: url("../../assets/images/bottom_.png");
+  background-repeat: no-repeat;
+//z-index: -1;
+  background-size: cover;
+  transition: all 1s linear;
+}
 </style>

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

@@ -24,6 +24,13 @@
       </div>
     </div>
     <div class="committee-cont">
+      <div class="left_img" ref="leftImg">
+        <img src="../../assets/images/l_img.png" alt="">
+      </div>
+      <div class="right_img" ref="rightImg">
+        <img src="../../assets/images/l_img.png" alt="">
+      </div>
+      <div style="width: 76%;margin: 0 auto;background: #FFFFFF;">
         <div class="tabber-box " v-if="currentActive == 6">
           <div>
             <el-steps :active="active" finish-status="success" align-center>
@@ -151,7 +158,8 @@
                   <div class="d-s">
                     <el-form-item label="队员1" prop="teammateOne">
                       <el-select v-model="preliminaryForm.teammateOne" placeholder="第一个队友">
-                      <el-option v-for="item in preliminaryForm.tdStudentList" :key="item.userId" :label="item.stuName"
+                        <el-option v-for="item in preliminaryForm.tdStudentList" :key="item.userId"
+                                   :label="item.stuName"
                                    :value="item.userId"
                         >
                         </el-option>
@@ -159,7 +167,8 @@
                     </el-form-item>
                     <el-form-item label="队员2" prop="teammateTwo">
                       <el-select v-model="preliminaryForm.teammateTwo" placeholder="第二个队友">
-                      <el-option v-for="item in preliminaryForm.tdStudentList" :key="item.userId" :label="item.stuName"
+                        <el-option v-for="item in preliminaryForm.tdStudentList" :key="item.userId"
+                                   :label="item.stuName"
                                    :value="item.userId"
                         >
                         </el-option>
@@ -270,7 +279,8 @@
           </div>
 
           <div class="step-box" v-if="active == 4">
-          <div class="step-box-title" style="font-size: 18px;margin-top: 8%;color: red">（地区选拔赛前无需上传资料）</div>
+            <div class="step-box-title" style="font-size: 18px;margin-top: 8%;color: red">（地区选拔赛前无需上传资料）
+            </div>
             <file-upload style="margin-top: 5%" :fileSize="200" :fileType="['zip', 'rar', '7z']"
                          v-model="preliminaryForm.hitRegInfo.dsFile"
             ></file-upload>
@@ -287,12 +297,16 @@
               <el-row>
                 <el-col :span="12">
                   <h3>个人选拔赛成绩</h3>
-                <p style="color: red; font-size: 20px" v-if="studentForm.trialsScore">{{ studentForm.trialsScore }}</p>
+                  <p style="color: red; font-size: 20px" v-if="studentForm.trialsScore">{{
+                      studentForm.trialsScore
+                    }}</p>
                   <p style="font-size: 20px" v-else>暂无</p>
                 </el-col>
                 <el-col :span="12">
                   <h3>虚拟赛成绩</h3>
-                <p style="color: red; font-size: 20px" v-if="studentForm.virtualScore">{{ studentForm.virtualScore }}</p>
+                  <p style="color: red; font-size: 20px" v-if="studentForm.virtualScore">{{
+                      studentForm.virtualScore
+                    }}</p>
                   <p style="font-size: 20px" v-else>暂无</p>
                 </el-col>
               </el-row>
@@ -449,7 +463,7 @@
           </div>
 
         </div>
-      <div v-show="currentActive == 2 || currentActive == 4 || currentActive === 3  || currentActive == 5">
+        <div v-show="currentActive == 2 || currentActive == 4 || currentActive === 3  || currentActive == 5" style="z-index: 999;position:relative">
           <page-util :category-id="categoryId" @event-message="handleDataFromPage"/>
         </div>
         <div class="anniu" v-show=" registerStatus == 1 &&currentActive == 0" @click="toRegister">
@@ -460,8 +474,12 @@
         </div>
 
       </div>
+      <div class="bottom_img" ref="bottomImg">
+      </div>
+    </div>
 
-    <footers></footers>
+
+    <footers style="position: relative"></footers>
   </div>
 </template>
 
@@ -651,6 +669,13 @@ export default {
     console.log('组件创建')
     // 页面加载完毕调用
     this.initPageData()
+    // 在组件挂载后添加滚动监听
+    window.addEventListener('scroll', this.handleScroll)
+  },
+
+  beforeDestroy() {
+    // 在组件销毁前移除滚动监听
+    window.removeEventListener('scroll', this.handleScroll)
   },
   computed: {},
   created() {
@@ -659,6 +684,27 @@ export default {
 
   },
   methods: {
+    handleScroll() {
+      let browserHeight = document.documentElement.clientHeight
+      console.log('高度', document.documentElement.clientHeight)
+      const leftImg = this.$refs.leftImg
+      const rightImg = this.$refs.rightImg
+      const bottomImg = this.$refs.bottomImg
+      const scrollPosition = window.scrollY
+      if (scrollPosition > 450) {
+        leftImg.style.top = '100px'
+        leftImg.style.position = 'fixed'
+        rightImg.style.top = '0px'
+        rightImg.style.position = 'fixed'
+        bottomImg.style.bottom = '0'
+      } else {
+        leftImg.style.top = '250px'
+        leftImg.style.position = 'absolute'
+        rightImg.style.top = '150px'
+        rightImg.style.position = 'absolute'
+        bottomImg.style.bottom = '-300px'
+      }
+    },
     regChoose(data, status) {
       data.status = status
       console.log(data)
@@ -1155,14 +1201,19 @@ export default {
 }
 
 .committee-cont {
-  width: 80%;
+  //width: 80%;
-  margin: 40px auto;
+  //margin: 40px auto;
   background: #fff;
   border-radius: 8px;
   overflow: hidden;
   box-sizing: border-box;
   padding: 15px;
   min-height: 400px;
+  padding-bottom: 0px;
+  position: relative;
+  background-image: url("../../assets/images/top_.png");
+  background-repeat: no-repeat;
+  background-position: top;
 
   img {
     width: 100%;
@@ -1523,4 +1574,63 @@ h3 {
   box-sizing: border-box;
   padding: 15px;
 }
+
+@keyframes bounce {
+  0%, 20%, 50%, 80%, 100% {
+    transform: translateY(0);
+  }
+  40% {
+    transform: translateY(-30px);
+  }
+  60% {
+    transform: translateY(-15px);
+  }
+}
+
+.left_img {
+  position: absolute;
+  left: 15px;
+  top: 250px;
+  display: inline-block;
+  animation-name: bounce;
+  animation-duration: 2s; /* 设置整个动画持续时间为两秒 */
+  animation-timing-function: ease-in-out; /* 控制速度曲线 */
+  animation-iteration-count: infinite; /* 循环播放次数 */
+
+}
+
+.right_img {
+  position: absolute;
+  right: 15px;
+  top: 150px;
+  display: inline-block;
+  animation-name: bounce;
+  animation-duration: 2s; /* 设置整个动画持续时间为两秒 */
+  animation-timing-function: ease-in-out; /* 控制速度曲线 */
+  animation-iteration-count: infinite; /* 循环播放次数 */
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+    display: none;
+  }
+}
+
+.bottom_img {
+  width: 100%;
+  height: 400px;
+  position: fixed; /* 固定在页面 */
+  display: block;
+  bottom: -300px;
+  left: 0; /* 确保元素从页面左侧开始 */
+  background-image: url("../../assets/images/bottom_.png");
+  background-repeat: no-repeat;
+  //z-index: -1;
+  background-size: cover;
+  transition: all 1s linear;
+}
 </style>

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

@@ -1,65 +1,60 @@
 <template>
   <div class="container">
     <div class="top-box">
-      <headers :msg='msg'></headers>
+      <headers :msg="msg"></headers>
       <div class="ny-banner">
         <img src="../../assets/gw/lxwm.png" alt="">
       </div>
     </div>
-    <div class="navigation">
+<!--    <div class="navigation">-->
-      <div class="content">
+<!--      <div class="content">-->
-<!--        <div class="left"> <img src="../../assets/gw/home.png" alt="">-->
+<!--        &lt;!&ndash;        <div class="left"> <img src="../../assets/gw/home.png" alt="">&ndash;&gt;-->
-<!--          <p><span href="/">首页</span><i class="el-icon-arrow-right"></i> <span href="">联系我们</span></p>-->
+<!--        &lt;!&ndash;          <p><span href="/">首页</span><i class="el-icon-arrow-right"></i> <span href="">联系我们</span></p>&ndash;&gt;-->
+<!--        &lt;!&ndash;        </div>&ndash;&gt;-->
+<!--        <div class="nav-item" v-for="(item, index) in nav" v-bind:class="[index === currentActive ? 'active' : '']"-->
+<!--             @click="getCurrentActive(index)"-->
+<!--        >-->
+<!--          {{ item.categoryName }}-->
 <!--        </div>-->
-        <div class="nav-item" v-for="(item, index) in nav" v-bind:class="[index === currentActive ? 'active' : '']"
+<!--      </div>-->
-          @click="getCurrentActive(index)">
+<!--    </div>-->
-          {{ item.categoryName }}
+    <!--    <div class="info">-->
-        </div>
+    <!--      <div class="info-item" v-for="(item,index) in fourlist" :key="index">-->
-      </div>
+    <!--        <img class="info-img" :src="imgurl + item.contentImg" alt="">-->
-    </div>
+    <!--        <div class="p">{{item.contentTitle}}</div>-->
-    <div class="contact">
+    <!--        <div class="desc" v-html="item.summary"></div>-->
-      <div class="info">
+    <!--      </div>-->
-        <!-- main -->
-        <!-- <div v-for="(item, index) in nav " :key=index>
-          <div class="about-conts-item1" v-if="currentActive == index">
-            <div class="neirong" v-html="pageContextList[index]"></div>
-          </div>
-        </div> -->
 
-        <div class="info-item" v-for="(item,index) in fourlist" :key="index">
+    <!--    </div>-->
-          <img :src="imgurl + item.contentImg" alt="">
-          <div class="p">{{item.contentTitle}}</div>
-          <div class="desc" v-html="item.summary"></div>
-        </div>
-
-      </div>
     <div class="map">
-        <img src="../../assets/gw/dtmap.png" alt="">
+
-      </div>
+      <img src="../../assets/gw/dtmap2.png">
     </div>
+
     <footers></footers>
   </div>
 </template>
 
 <script>
-import { Swiper, SwiperSlide } from "vue-awesome-swiper";
+import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
-import "swiper/css/swiper.min.css";
+import 'swiper/css/swiper.min.css'
-import {getCategoryByParentId} from "@/api/officialWebsite/getPageData";
+import { getCategoryByParentId } from '@/api/officialWebsite/getPageData'
-import {getinfo} from "@/api/gw/home";
+import { getinfo } from '@/api/gw/home'
 import footers from '@/views/officialWebsite/Components/footer.vue'
 import headers from '@/views/officialWebsite/Components/header.vue'
+
 export default {
   components: {
     headers,
     footers,
     Swiper,
-    SwiperSlide,
+    SwiperSlide
   },
   name: 'HelloWorld',
 
   data() {
     return {
-      msg:11,
+      msg: 11,
       imgurl: process.env.VUE_APP_BASE_API,
       pageContextList: [],
       nav: [
@@ -68,16 +63,14 @@ export default {
       ],
       fourlist: [],
       currentActive: 0,
-      isMounted: false,
+      isMounted: false
     }
   },
   created() {
     // 页面加载完毕调用
-    this.initPageData();
+    this.initPageData()
-  },
-  computed: {
-
   },
+  computed: {},
 
   methods: {
     // 触发导航
@@ -85,15 +78,15 @@ export default {
       if (this.currentActive == value) {
         return
       }
-      this.currentActive = value;
+      this.currentActive = value
     },
     initPageData() {
       console.log('测试')
 
       let routeParam = {
-        "categoryId": this.$route.query.id,
+        'categoryId': this.$route.query.id,
-        "pageNum": 1,
+        'pageNum': 1,
-        "pageSize": 10
+        'pageSize': 10
       }
       getCategoryByParentId(routeParam.categoryId).then(res => {
         routeParam.categoryId = res.data[0].id
@@ -113,7 +106,7 @@ export default {
       //   });
       // });
 
-    },
+    }
   }
 
 }
@@ -121,7 +114,7 @@ export default {
 
 <style scoped>
 .container {
-  background: #F5F5F5;
+  //background: #F5F5F5;
 }
 
 .bj {
@@ -173,7 +166,7 @@ export default {
   height: 50px;
   background: #FFFFFF;
 
-  border: 1px solid #DDDDDD;
+//border: 1px solid #DDDDDD;
 }
 
 ::v-deep .el-pagination .btn-next .el-icon,
@@ -313,40 +306,32 @@ export default {
 }
 
 
-
+.info {
-.contact {
-  width: 80%;
-  margin: 50px auto;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-
-}
-
-.contact .info {
   width: 48%;
-  height: 468px;
+  height: 300px;
+  box-shadow: 0px 0px 15px 0px rgba(14, 62, 81, 0.2);
   background-color: #fff;
   position: relative;
   display: flex;
   flex-wrap: wrap;
-  border-radius: 20px 20px 0px 0px;
   padding: 50px 0;
   padding-bottom: 20px;
+  margin: 0 auto;
+  margin-bottom: -50px;
+
 }
 
-.contact .info::after {
+.info::after {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
-  height: 30px;
+  height: 84px;
   background: #005375;
-  border-radius: 20px 20px 0px 0px;
 }
 
-.contact .info .info-item {
+.info .info-item {
   width: 50%;
   display: flex;
   flex-direction: column;
@@ -356,22 +341,34 @@ export default {
   /* background-color: #f0f */
 }
 
-.contact .info .info-item .p {
+.info .info-item .p {
-  font-size: 14px;
+  font-weight: 600;
-  color: #999999;
+  font-size: 20px;
+  color: #333333;
   margin-top: 20px;
 
+
 }
 
-.contact .info .info-item .desc {
+.info-img {
+  margin-top: 50px;
+
+  img {
+    width: 50px;
+    height: 50px;
+  }
+}
+
+.info .info-item .desc {
   width: 70%;
-  font-size: 18px;
+  font-size: 20px;
-  color: #333333;
+  color: #005375;
+  margin-top: 20px;
   line-height: 30px;
   text-align: center
 }
 
-.contact .info .info-item:nth-child(2n-1):after {
+.info .info-item:nth-child(2n-1):after {
   content: "";
   position: absolute;
   right: 0;
@@ -381,7 +378,7 @@ export default {
   background-color: #eee;
 }
 
-.contact .info .info-item:nth-child(1)::before {
+.info .info-item:nth-child(1)::before {
   content: "";
   position: absolute;
   right: 0;
@@ -391,7 +388,7 @@ export default {
   background-color: #eee;
 }
 
-.contact .info .info-item:nth-child(2)::before {
+.info .info-item:nth-child(2)::before {
   content: "";
   position: absolute;
   right: 0;
@@ -401,20 +398,14 @@ export default {
   background-color: #eee;
 }
 
-.contact .map {
+.map {
-  width: 46%;
+  width: 100%;
-  /* height: 468px; */
+   //height: 468px;
-  background: #F9F9F9;
+  //background: #F9F9F9;
-  position: relative;
+
-  display: flex;
+
-  flex-wrap: wrap;
-  padding: 1%;
 }
 
-.contact .map img {
-  width: 100%;
-  height: 100%;
-}
 
 .index-footer {
   background: #383838;
@@ -432,7 +423,8 @@ export default {
   /* align-items: center; */
 }
 
-.index-footer .footer .logo .footer-contact {}
+.index-footer .footer .logo .footer-contact {
+}
 
 .index-footer .footer .logo .footer-contact .p {
   display: inline-block;
@@ -542,4 +534,17 @@ export default {
   line-height: 18px;
 
 }
+
+.map {
+  width: 100%;
+  display: flex;
+  justify-content: center; /* 水平居中 */
+  align-items: center; /* 垂直居中 */
+  margin: 40px 0;
+}
+
+.map img {
+  width: 85%; /* 设置图片宽度 */
+}
+
 </style>

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

@@ -10,12 +10,20 @@
 
 
     <!-- new -->
-      <div class="content-box" >
+    <div class="new_">
-<!--        <div class="title_">{{info.contentTitle}}</div>-->
+      <div class="left_img" ref="leftImg">
-        <div class="size_" v-if="info.contentType == 0" v-html="info.contentDetail" ></div>
+        <img src="../../assets/images/l_img.png" alt="">
+      </div>
+      <div class="right_img" ref="rightImg">
+        <img src="../../assets/images/l_img.png" alt="">
+      </div>
+
+      <div class="content-box">
+        <!--        <div class="title_">{{info.contentTitle}}</div>-->
+        <div class="size_" v-if="info.contentType == 0" v-html="info.contentDetail"></div>
         <div v-if="info.contentType == 1" style="display: flex;flex-wrap: wrap">
           <div class="" v-for="(item,index) in info.imageUrl" :key="index">
-            <img :src="imgurl + item" alt="" style="width: 100%;"  >
+            <img :src="imgurl + item" alt="" style="width: 100%;">
           </div>
         </div>
 
@@ -25,15 +33,17 @@
           </div>
         </div>
       </div>
-
+      <div :class="['bottom_img']" ref="bottomImg">
+      </div>
+    </div>
     <footers></footers>
   </div>
 </template>
 
 <script>
-import { Swiper, SwiperSlide } from "vue-awesome-swiper";
+import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
-import "swiper/css/swiper.min.css";
+import 'swiper/css/swiper.min.css'
-import { getContent } from "@/api/officialWebsite/getPageData";
+import { getContent } from '@/api/officialWebsite/getPageData'
 import headers from '@/views/officialWebsite/Components/header.vue'
 import footers from '@/views/officialWebsite/Components/footer.vue'
 
@@ -54,29 +64,55 @@ export default {
   },
   data() {
     return {
-      info:{},
+      info: {},
-      imgurl:process.env.VUE_APP_BASE_API,
+      imgurl: process.env.VUE_APP_BASE_API,
       pageContextList: [],
       nav: [],
       currentActive: 2,
       isMounted: false,
-      orgList: "",
+      orgList: '',
       postList: [],
 
-      content: "",
+      content: '',
-      leaderList: "",
+      leaderList: '',
+      isBottomVisible: false
     }
   },
-  computed: {
+  computed: {},
-
-  },
   mounted() {
     // 页面加载完毕调用
-    this.initPageData();
+    this.initPageData()
+    // 在组件挂载后添加滚动监听
+    window.addEventListener('scroll', this.handleScroll)
+  },
+  beforeDestroy() {
+    // 在组件销毁前移除滚动监听
+    window.removeEventListener('scroll', this.handleScroll)
   },
 
   methods: {
-    goback(){
+    handleScroll() {
+      let browserHeight = document.documentElement.clientHeight
+      console.log("高度",document.documentElement.clientHeight)
+      const leftImg = this.$refs.leftImg
+      const rightImg = this.$refs.rightImg
+      const bottomImg = this.$refs.bottomImg
+      const scrollPosition = window.scrollY
+      if (scrollPosition > 450) {
+        leftImg.style.top = '100px'
+        leftImg.style.position = 'fixed'
+        rightImg.style.top = '0px'
+        rightImg.style.position = 'fixed'
+        bottomImg.style.bottom="0"
+      } else {
+        leftImg.style.top = '250px'
+        leftImg.style.position = 'absolute'
+        rightImg.style.top = '150px'
+        rightImg.style.position = 'absolute'
+        bottomImg.style.bottom="-300px"
+      }
+    },
+    goback() {
       this.$router.go(-1)
     },
     // 触发导航
@@ -92,11 +128,11 @@ export default {
       let id = this.$route.query.id
       getContent(id).then(response => {
         // console.log(response)
-        this.info = response.data;
+        this.info = response.data
 
-      });
+      })
 
-    },
+    }
   }
 
 }
@@ -107,6 +143,7 @@ export default {
   background: #f4f4f4;
 
 }
+
 .bj {
   background: #F5F5F5;
 }
@@ -383,7 +420,8 @@ export default {
   /* align-items: center; */
 }
 
-.index-footer .footer .logo .footer-contact {}
+.index-footer .footer .logo .footer-contact {
+}
 
 .index-footer .footer .logo .footer-contact .p {
   display: inline-block;
@@ -493,19 +531,15 @@ export default {
   line-height: 18px;
 
 }
-.title_{
+
+.title_ {
   font-weight: bold;
   font-size: 28px;
   color: #333333;
   text-align: center;
 }
-.content-box{
-  width: 80%;
-  margin: 25px auto;
-  min-height:400px;
 
-}
+.back {
-.back{
   width: 80%;
   margin: 15px auto;
   display: flex;
@@ -513,10 +547,98 @@ export default {
   cursor: pointer;
   color: #00A0E8;
 }
-.size_{
+
+.size_ {
   background: #fff;
   box-sizing: border-box;
   padding: 15px;
   border-radius: 8px;
 }
+
+.container {
+  position: relative;
+  z-index: 1;
+}
+
+.container::after {
+  content: '';
+
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 535px; /* 根据你的图片高度调整 */
+  z-index: -1;
+}
+
+.new_ {
+//min-height:900px; //width: 80%; padding-bottom: 0px; position: relative; background-image: url("../../assets/images/top_.png");
+  background-repeat: no-repeat;
+  background-position: top;
+}
+
+.content-box {
+  width: 76%;
+  margin: 25px auto;
+  z-index: 99999 !important;
+
+//min-height: 400px; //padding-bottom: 100px; /* 与背景图片高度一致 */
+}
+
+/*footers {
+  position: relative;
+  z-index: 2;
+}*/
+@keyframes bounce {
+  0%, 20%, 50%, 80%, 100% {
+    transform: translateY(0);
+  }
+  40% {
+    transform: translateY(-30px);
+  }
+  60% {
+    transform: translateY(-15px);
+  }
+}
+
+.left_img {
+  position: absolute;
+  left: 15px;
+  top: 150px;
+  display: inline-block;
+  animation-name: bounce;
+  animation-duration: 2s; /* 设置整个动画持续时间为两秒 */
+  animation-timing-function: ease-in-out; /* 控制速度曲线 */
+  animation-iteration-count: infinite; /* 循环播放次数 */
+
+}
+
+.right_img {
+  position: absolute;
+  right: 15px;
+  top: 100px;
+  display: inline-block;
+  animation-name: bounce;
+  animation-duration: 2s; /* 设置整个动画持续时间为两秒 */
+  animation-timing-function: ease-in-out; /* 控制速度曲线 */
+  animation-iteration-count: infinite; /* 循环播放次数 */
+}
+@keyframes fadeOut {
+  from { opacity: 1; }
+  to { opacity: 0; display: none; }
+}
+.bottom_img {
+  width: 100%;
+  height: 400px;
+  position: fixed; /* 固定在页面 */
+  display: block;
+  bottom: -300px;
+  left: 0; /* 确保元素从页面左侧开始 */
+  background-image: url("../../assets/images/bottom_.png");
+  background-repeat: no-repeat;
+  z-index: -1;
+  background-size: cover;
+  transition: all 1s linear;
+}
+
 </style>

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

@@ -23,7 +23,13 @@
       </div>
     </div>
     <div class="news">
-      <div v-show="currentActive == 0">
+      <div class="left_img" ref="leftImg">
+        <img src="../../assets/images/l_img.png" alt="">
+      </div>
+      <div class="right_img" ref="rightImg">
+        <img src="../../assets/images/l_img.png" alt="">
+      </div>
+      <div v-show="currentActive == 0" class="about-conts-item1">
         <div class="n-box"   v-for="(item,index) in onelist" @click="goDeatail(item)" >
           <div>
             <div class="v-time" >{{item.publishDate}}</div>
@@ -35,7 +41,7 @@
           </div>
         </div>
       </div>
-      <div v-show="currentActive == 1"> <div class="noticeRsr"   v-for="(item,index) in twolist" @click="goDeatail(item)" >
+      <div v-show="currentActive == 1" class="about-conts-item1"> <div class="noticeRsr"   v-for="(item,index) in twolist" @click="goDeatail(item)" >
         <div >{{item.contentTitle}}</div>
         <div >{{item.publishDate}}</div>
       </div></div>
@@ -46,11 +52,13 @@
 <!--        </div>-->
 <!--      </div>-->
 
-      <div class="page-box">
+      <div class="page-box" style="z-index: 999;position:relative">
         <page-util :category-id="categoryId" @event-message="handleDataFromPage" />
       </div>
+      <div class="bottom_img"  ref="bottomImg">
       </div>
-    <footers></footers>
+    </div>
+    <footers style="position: relative"></footers>
   </div>
 </template>
 
@@ -98,8 +106,38 @@ export default {
   computed: {
 
   },
+  mounted() {
+    // 在组件挂载后添加滚动监听
+    window.addEventListener('scroll', this.handleScroll)
+  },
+
+  beforeDestroy() {
+    // 在组件销毁前移除滚动监听
+    window.removeEventListener('scroll', this.handleScroll)
+  },
 
   methods: {
+    handleScroll() {
+      let browserHeight = document.documentElement.clientHeight
+      console.log("高度",document.documentElement.clientHeight)
+      const leftImg = this.$refs.leftImg
+      const rightImg = this.$refs.rightImg
+      const bottomImg = this.$refs.bottomImg
+      const scrollPosition = window.scrollY
+      if (scrollPosition > 450) {
+        leftImg.style.top = '100px'
+        leftImg.style.position = 'fixed'
+        rightImg.style.top = '0px'
+        rightImg.style.position = 'fixed'
+        bottomImg.style.bottom="0"
+      } else {
+        leftImg.style.top = '250px'
+        leftImg.style.position = 'absolute'
+        rightImg.style.top = '150px'
+        rightImg.style.position = 'absolute'
+        bottomImg.style.bottom="-300px"
+      }
+    },
     handleDataFromPage(data){
       if (this.currentActive === 0){
         this.onelist = data
@@ -194,7 +232,13 @@ export default {
 ::v-deep .el-pagination .btn-prev .el-icon {
   font-size: 18px;
 }
+.about-conts-item1 {
+  width: 76%;
+  margin: 0 auto;
+  background-color: #fff;
+  z-index: 99999 !important;
 
+}
 .top-box {
   width: 100%;
   /* height: 1000px; */
@@ -328,13 +372,18 @@ export default {
 
 
 .news {
-  padding: 30px 0;
+  //padding: 30px 0;
-  width: 80%;
+  ////width: 80%;
-  margin: 20px auto;
+  //margin: 20px auto;
-  background: #fff;
+  //background: #fff;
-  box-sizing: border-box;
+  //box-sizing: border-box;
-  padding: 15px;
+  //padding: 15px;
   border-radius: 8px;
+  padding-bottom: 0px;
+  position: relative;
+  background-image: url("../../assets/images/top_.png");
+  background-repeat: no-repeat;
+  background-position: top;
 }
 .page-box{
   width: 82%;
@@ -576,4 +625,57 @@ export default {
   font-size: 18px;
   color: #999999;
 }
+
+@keyframes bounce {
+  0%, 20%, 50%, 80%, 100% {
+    transform: translateY(0);
+  }
+  40% {
+    transform: translateY(-30px);
+  }
+  60% {
+    transform: translateY(-15px);
+  }
+}
+
+.left_img {
+  position: absolute;
+  left: 15px;
+  top: 250px;
+  display: inline-block;
+  animation-name: bounce;
+  animation-duration: 2s; /* 设置整个动画持续时间为两秒 */
+  animation-timing-function: ease-in-out; /* 控制速度曲线 */
+  animation-iteration-count: infinite; /* 循环播放次数 */
+
+}
+
+.right_img {
+  position: absolute;
+  right: 15px;
+  top: 150px;
+  display: inline-block;
+  animation-name: bounce;
+  animation-duration: 2s; /* 设置整个动画持续时间为两秒 */
+  animation-timing-function: ease-in-out; /* 控制速度曲线 */
+  animation-iteration-count: infinite; /* 循环播放次数 */
+}
+
+@keyframes fadeOut {
+  from { opacity: 1; }
+  to { opacity: 0; display: none; }
+}
+.bottom_img {
+  width: 100%;
+  height: 400px;
+  position: fixed; /* 固定在页面 */
+  display: block;
+  bottom: -300px;
+  left: 0; /* 确保元素从页面左侧开始 */
+  background-image: url("../../assets/images/bottom_.png");
+  background-repeat: no-repeat;
+//z-index: -1;
+  background-size: cover;
+  transition: all 1s linear;
+}
 </style>

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

@@ -24,6 +24,12 @@
     </div>
 
     <div class="about-conts" v-bind:class="[currentActive == 1 ? 'bj' : '']">
+      <div class="left_img" ref="leftImg">
+        <img src="../../assets/images/l_img.png" alt="">
+      </div>
+      <div class="right_img" ref="rightImg">
+        <img src="../../assets/images/l_img.png" alt="">
+      </div>
       <!-- main -->
 <!--      <div  v-for="(item, index) in nav " :key=index @click="goDeatail(item)">-->
 <!--        <div class="about-conts-item1" v-show="currentActive == 1">-->
@@ -51,7 +57,7 @@
             </div>
           </div>
         </div>
-        <div style="background: #fff">
+        <div style="background: #fff;z-index: 999;position:relative">
           <page-util :category-id="categoryId" @event-message="handleDataFromPage" />
         </div>
 
@@ -64,7 +70,9 @@
       </div> -->
 
     </div>
-    <footers></footers>
+    <div class="bottom_img" ref="bottomImg">
+    </div>
+    <footers style="position: relative;"></footers>
   </div>
 </template>
 
@@ -114,8 +122,41 @@ export default {
   },
   computed: {
   },
+  mounted() {
+    // 页面加载完毕调用
+    // debugger;
+    this.initPageData()
+    // 在组件挂载后添加滚动监听
+    window.addEventListener('scroll', this.handleScroll)
+  },
+
+  beforeDestroy() {
+    // 在组件销毁前移除滚动监听
+    window.removeEventListener('scroll', this.handleScroll)
+  },
 
   methods: {
+    handleScroll() {
+      let browserHeight = document.documentElement.clientHeight
+      console.log("高度",document.documentElement.clientHeight)
+      const leftImg = this.$refs.leftImg
+      const rightImg = this.$refs.rightImg
+      const bottomImg = this.$refs.bottomImg
+      const scrollPosition = window.scrollY
+      if (scrollPosition > 450) {
+        leftImg.style.top = '100px'
+        leftImg.style.position = 'fixed'
+        rightImg.style.top = '0px'
+        rightImg.style.position = 'fixed'
+        bottomImg.style.bottom="0"
+      } else {
+        leftImg.style.top = '250px'
+        leftImg.style.position = 'absolute'
+        rightImg.style.top = '150px'
+        rightImg.style.position = 'absolute'
+        bottomImg.style.bottom="-300px"
+      }
+    },
 
     handleDataFromPage(data){
       // console.log(data)
@@ -295,11 +336,18 @@ export default {
 }
 
 .about-conts {
-  width: 80%;
+  //width: 80%; margin: 15px auto; padding: 15px;
-  margin: 15px auto;
+  //display: flex;
-  padding: 15px;
+  justify-content: center;  /* 水平居中 */
+  align-items: center;      /* 垂直居中 */
+
   background: #fff;
   border-radius: 8px;
+  padding-bottom: 0px;
+  position: relative;
+  background-image: url("../../assets/images/top_.png");
+  background-repeat: no-repeat;
+  background-position: top;
 }
 
 .about-conts .about-conts-item1 {
@@ -311,8 +359,9 @@ export default {
 
 .about-conts .ayptjs {
   padding: 30px 0;
-  width: 100%;
+  width: 80%;
   margin: 0 auto;
+  //z-index: 99999 !important;
 }
 
 .about-conts .ayptjs .tt {
@@ -412,7 +461,7 @@ export default {
   top: 10px;
   width: 100%;
   height: 211px;
-  z-index: 1;
+  //z-index: 1;
   /* background-color: #f0f; */
   filter: blur(10px);
   background: rgba(0, 83, 117, 0.7);
@@ -633,4 +682,49 @@ export default {
   font-size: 18px;
 }
 
+@keyframes bounce{
+  0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
+  40% {transform: translateY(-30px);}
+  60% {transform: translateY(-15px);}
+}
+.left_img{
+  position: absolute;
+  left: 0px;
+  top: 200px;
+  display: inline-block;
+  animation-name: bounce;
+  animation-duration: 2s; /* 设置整个动画持续时间为两秒 */
+  animation-timing-function: ease-in-out; /* 控制速度曲线 */
+  animation-iteration-count: infinite; /* 循环播放次数 */
+
+}
+.right_img{
+  position: absolute;
+  right: 0px;
+  top: 100px;
+  display: inline-block;
+  animation-name: bounce;
+  animation-duration: 2s; /* 设置整个动画持续时间为两秒 */
+  animation-timing-function: ease-in-out; /* 控制速度曲线 */
+  animation-iteration-count: infinite; /* 循环播放次数 */
+}
+
+@keyframes fadeOut {
+  from { opacity: 1; }
+  to { opacity: 0; display: none; }
+}
+.bottom_img {
+  width: 100%;
+  height: 400px;
+  position: fixed; /* 固定在页面 */
+  display: block;
+  bottom: -300px;
+  left: 0; /* 确保元素从页面左侧开始 */
+  background-image: url("../../assets/images/bottom_.png");
+  background-repeat: no-repeat;
+//z-index: -1;
+  background-size: cover;
+  transition: all 1s linear;
+}
+
 </style>

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

@@ -1,7 +1,7 @@
 <template>
   <div class="container">
     <div class="top-box">
-      <headers :msg='msg'></headers>
+      <headers :msg="msg"></headers>
 
       <div class="ny-banner">
         <img src="../../assets/gw/dssj.png" alt="">
@@ -16,18 +16,25 @@
         <!--        </div>-->
         <div class="right">
           <div class="nav-item" v-for="(item, index) in nav" v-bind:class="[index === currentActive ? 'active' : '']"
-            @click="getCurrentActive(index)">
+               @click="getCurrentActive(index)"
+          >
             {{ item.categoryName }}
           </div>
         </div>
       </div>
     </div>
     <div class="about-conts" v-bind:class="[currentActive == 0 || currentActive == 3 ? 'bj' : '']">
+      <div class="left_img" ref="leftImg">
+        <img src="../../assets/images/l_img.png" alt="">
+      </div>
+      <div class="right_img" ref="rightImg">
+        <img src="../../assets/images/l_img.png" alt="">
+      </div>
       <!-- main -->
       <div v-for="(item, index) in nav " :key=index>
         <div class="about-conts-item1" v-if="currentActive == index">
           <!-- 实践平台 -->
-          <div v-if="currentActive !== 0" class="list" >
+          <div v-if="currentActive !== 0" class="list">
             <div class="item" v-for="(item, index) in teachingAchievements" :key="index" @click="toDetail(item.id)">
               <div class="img">
                 <img :src="imgurl + item.contentImg" alt="">
@@ -50,7 +57,7 @@
         </div>
       </div>
 
-      <div>
+      <div style="z-index: 99999;position:relative">
         <page-util :page-num="pageNum" :page-size="8" :category-id="categoryId" @event-message="handleDataFromPage"/>
       </div>
 
@@ -117,41 +124,44 @@
           </el-pagination></div>
 
       </div> -->
+      <div class="bottom_img" ref="bottomImg">
       </div>
-    <footers></footers>
+    </div>
+    <footers style="position: relative"></footers>
   </div>
 </template>
 
 <script>
-import { Swiper, SwiperSlide } from "vue-awesome-swiper";
+import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
-import "swiper/css/swiper.min.css";
+import 'swiper/css/swiper.min.css'
-import { getPageData, getCategoryByParentId } from "@/api/officialWebsite/getPageData";
+import { getPageData, getCategoryByParentId } from '@/api/officialWebsite/getPageData'
 import footers from '@/views/officialWebsite/Components/footer.vue'
 import headers from '@/views/officialWebsite/Components/header.vue'
 import PageUtil from '@/views/officialWebsite/Components/page'
+
 export default {
   components: {
     headers,
     footers,
     Swiper,
     SwiperSlide,
-    PageUtil,
+    PageUtil
   },
   name: 'HelloWorld',
 
   data() {
     return {
-      msg:9,
+      msg: 9,
-      isShowDetails:false,
+      isShowDetails: false,
-      detailsContent:"",
+      detailsContent: '',
       imgurl: process.env.VUE_APP_BASE_API,
       teachingAchievements: [],
       teachingAchievements2: [],
       teachingAchievements3: [],
-      pageContext: "",
+      pageContext: '',
-      categoryId: "",
+      categoryId: '',
       pageNum: 1,
-      input4: "",
+      input4: '',
       show_search: true,
       nav: [
         // { name: '实践教学资源' },
@@ -173,38 +183,65 @@ export default {
 <p style="box-sizing: inherit; margin-top: 0px; text-align: justify; text-indent: 2em; margin-bottom: 5px; line-height: 1.75em;">
     <span style="box-sizing: inherit; font-family: 微软雅黑, MicrosoftYaHei;"></span><br/>
 </p>`,
-      routeParam : {
+      routeParam: {
-        "categoryId": this.$route.query.id,
+        'categoryId': this.$route.query.id,
-        "pageNum": 1,
+        'pageNum': 1,
-        "pageSize": 10
+        'pageSize': 10
       }
     }
   },
   mounted() {
     // 页面加载完毕调用
-    this.initPageData();
+    // debugger;
+    this.initPageData()
+    // 在组件挂载后添加滚动监听
+    window.addEventListener('scroll', this.handleScroll)
   },
-  computed: {
 
+  beforeDestroy() {
+    // 在组件销毁前移除滚动监听
+    window.removeEventListener('scroll', this.handleScroll)
   },
+  computed: {},
 
   methods: {
-    showDetails(value){
+    handleScroll() {
-      this.isShowDetails = true;
+      let browserHeight = document.documentElement.clientHeight
-      this.currentActive = 999;
+      console.log("高度",document.documentElement.clientHeight)
-      this.detailsContent = value.contentDetail;
+      const leftImg = this.$refs.leftImg
+      const rightImg = this.$refs.rightImg
+      const bottomImg = this.$refs.bottomImg
+      const scrollPosition = window.scrollY
+      if (scrollPosition > 450) {
+        leftImg.style.top = '100px'
+        leftImg.style.position = 'fixed'
+        rightImg.style.top = '0px'
+        rightImg.style.position = 'fixed'
+        bottomImg.style.bottom="0"
+      } else {
+        leftImg.style.top = '250px'
+        leftImg.style.position = 'absolute'
+        rightImg.style.top = '150px'
+        rightImg.style.position = 'absolute'
+        bottomImg.style.bottom="-300px"
+      }
+    },
+    showDetails(value) {
+      this.isShowDetails = true
+      this.currentActive = 999
+      this.detailsContent = value.contentDetail
     },
     // 触发导航
     getCurrentActive(value) {
       if (this.currentActive == value) {
         return
       }
-      if (value !== 0){
+      if (value !== 0) {
         this.categoryId = this.nav[value].id
         this.pageNum = 1
       }
-      this.currentActive = value;
+      this.currentActive = value
-      this.isShowDetails = false;
+      this.isShowDetails = false
     },
     initPageData() {
       getCategoryByParentId(this.routeParam.categoryId).then(res => {
@@ -212,14 +249,14 @@ export default {
         this.getContentDetail()
       })
     },
-    getContentDetail(){
+    getContentDetail() {
       this.routeParam.categoryId = this.nav[this.currentActive].id
       getPageData(this.routeParam).then(response => {
         this.pageContext = response.data.list[0].contentDetail
       })
     },
-    handleDataFromPage(data){
+    handleDataFromPage(data) {
-      if (this.currentActive !== 0){
+      if (this.currentActive !== 0) {
         this.teachingAchievements = data
       }
       // if (this.currentActive === 2 || this.currentActive == 4){
@@ -229,12 +266,12 @@ export default {
       //   this.noticeList = data
       // }
     },
-    toDetail(id){
+    toDetail(id) {
-      if (id){
+      if (id) {
         this.$router.push({
           name: 'details',
-          query:{ id: id }
+          query: { id: id }
-        });
+        })
       }
     }
   }
@@ -318,7 +355,7 @@ export default {
   align-items: center;
   justify-content: space-between;
   border-bottom: 1px solid rgba(255, 255, 255, 0.2);
-   background-color: #005375 !important; ;
+  background-color: #005375 !important;;
   font-weight: bold;
   font-size: 18px;
   color: #FFFFFF;
@@ -432,6 +469,11 @@ export default {
 
 .about-conts {
   padding: 40px 0;
+  padding-bottom: 0px;
+  position: relative;
+  background-image: url("../../assets/images/top_.png");
+  background-repeat: no-repeat;
+  background-position: top;
 }
 
 .about-conts .about-conts-item1 {
@@ -501,8 +543,7 @@ export default {
   overflow: hidden;
   top: 0;
   transition: 0.5s ease;
-  padding-bottom: 20px;
+  padding-bottom: 20px;;
-  ;
 }
 
 .about-conts .ayptjs-list .item .text .tts {
@@ -579,7 +620,7 @@ export default {
   width: 70%;
   height: 1px;
   /* left: 0; */
-   background-color: #005375 !important; ;
+  background-color: #005375 !important;;
 }
 
 .about-conts .ayptjs-list .item .more p {
@@ -601,8 +642,7 @@ export default {
   width: 31%;
   height: 432px;
   margin-bottom: 30px;
-  position: relative;
+  position: relative;;
-  ;
 }
 
 .list .item .img {
@@ -753,7 +793,8 @@ export default {
   /* align-items: center; */
 }
 
-.index-footer .footer .logo .footer-contact {}
+.index-footer .footer .logo .footer-contact {
+}
 
 .index-footer .footer .logo .footer-contact .p {
   display: inline-block;
@@ -955,8 +996,7 @@ export default {
   width: 31%;
   height: 432px;
   margin-bottom: 30px;
-  position: relative;
+  position: relative;;
-  ;
 }
 
 .swiper-list .item .img {
@@ -1008,4 +1048,57 @@ export default {
   border-radius: 0px 0px 0px 0px;
   overflow: hidden;
 }
+
+@keyframes bounce {
+  0%, 20%, 50%, 80%, 100% {
+    transform: translateY(0);
+  }
+  40% {
+    transform: translateY(-30px);
+  }
+  60% {
+    transform: translateY(-15px);
+  }
+}
+
+.left_img {
+  position: absolute;
+  left: 15px;
+  top: 250px;
+  display: inline-block;
+  animation-name: bounce;
+  animation-duration: 2s; /* 设置整个动画持续时间为两秒 */
+  animation-timing-function: ease-in-out; /* 控制速度曲线 */
+  animation-iteration-count: infinite; /* 循环播放次数 */
+
+}
+
+.right_img {
+  position: absolute;
+  right: 15px;
+  top: 150px;
+  display: inline-block;
+  animation-name: bounce;
+  animation-duration: 2s; /* 设置整个动画持续时间为两秒 */
+  animation-timing-function: ease-in-out; /* 控制速度曲线 */
+  animation-iteration-count: infinite; /* 循环播放次数 */
+}
+
+@keyframes fadeOut {
+  from { opacity: 1; }
+  to { opacity: 0; display: none; }
+}
+.bottom_img {
+  width: 100%;
+  height: 400px;
+  position: fixed; /* 固定在页面 */
+  display: block;
+  bottom: -300px;
+  left: 0; /* 确保元素从页面左侧开始 */
+  background-image: url("../../assets/images/bottom_.png");
+  background-repeat: no-repeat;
+//z-index: -1;
+  background-size: cover;
+  transition: all 1s linear;
+}
 </style>

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

@@ -23,6 +23,12 @@
       </div>
     </div>
     <div class="teaching" v-bind:class="[currentActive == 0 ? 'bj' : '']">
+      <div class="left_img" ref="leftImg">
+        <img src="../../assets/images/l_img.png" alt="">
+      </div>
+      <div class="right_img" ref="rightImg">
+        <img src="../../assets/images/l_img.png" alt="">
+      </div>
       <!-- main -->
           <div class="wrap-box">
             <div class="box-l" v-if="currentActive == 0" v-for="(item,index) in dataList" :key="index" @click="goDeatail(item)">
@@ -71,11 +77,15 @@
               </div>
             </div>
           </div>
+
     </div>
     <div class="page-box">
-      <page-util :category-id="categoryId" @event-message="handleDataFromPage" />
+      <page-util style="z-index: 999;position:relative" :category-id="categoryId" @event-message="handleDataFromPage" />
     </div>
-    <footers></footers>
+    <div class="bottom_img"  ref="bottomImg">
+    </div>
+
+    <footers style="position: relative;"></footers>
   </div>
 </template>
 
@@ -135,8 +145,41 @@ export default {
   computed: {
 
   },
+  mounted() {
+    // 页面加载完毕调用
+    // debugger;
+    this.initPageData()
+    // 在组件挂载后添加滚动监听
+    window.addEventListener('scroll', this.handleScroll)
+  },
+
+  beforeDestroy() {
+    // 在组件销毁前移除滚动监听
+    window.removeEventListener('scroll', this.handleScroll)
+  },
 
   methods: {
+    handleScroll() {
+      let browserHeight = document.documentElement.clientHeight
+      console.log("高度",document.documentElement.clientHeight)
+      const leftImg = this.$refs.leftImg
+      const rightImg = this.$refs.rightImg
+      const bottomImg = this.$refs.bottomImg
+      const scrollPosition = window.scrollY
+      if (scrollPosition > 450) {
+        leftImg.style.top = '100px'
+        leftImg.style.position = 'fixed'
+        rightImg.style.top = '0px'
+        rightImg.style.position = 'fixed'
+        bottomImg.style.bottom="0"
+      } else {
+        leftImg.style.top = '250px'
+        leftImg.style.position = 'absolute'
+        rightImg.style.top = '150px'
+        rightImg.style.position = 'absolute'
+        bottomImg.style.bottom="-300px"
+      }
+    },
     // goDeatail(data){
     //   // console.log(data)
     //   if(data.linkType == 0){
@@ -360,14 +403,25 @@ export default {
   font-weight: bold;
 }
 .wrap-box{
-  width: 100%;
+  width: 80%;
   display: flex;
   align-items: center;
   flex-wrap: wrap;
+  margin-top: 20px;
 }
 .teaching {
-  width: 80%;
+  //width: 90%;
-  margin: 15px auto;
+  //margin: 15px auto;
+  //text-align: center;
+  display: flex;
+  justify-content: center;  /* 水平居中 */
+  align-items: center;      /* 垂直居中 */
+  padding-bottom: 0px;
+  position: relative;
+  background-image: url("../../assets/images/top_.png");
+  background-repeat: no-repeat;
+  background-position: top;
+  z-index: 2;
 }
 .page-box{
   width: 82%;
@@ -628,4 +682,48 @@ export default {
   border-radius: 4px;
   overflow: hidden;
 }
+ @keyframes bounce{
+   0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
+   40% {transform: translateY(-30px);}
+   60% {transform: translateY(-15px);}
+ }
+ .left_img{
+   position: absolute;
+   left: 0px;
+   top: 200px;
+   display: inline-block;
+   animation-name: bounce;
+   animation-duration: 2s; /* 设置整个动画持续时间为两秒 */
+   animation-timing-function: ease-in-out; /* 控制速度曲线 */
+   animation-iteration-count: infinite; /* 循环播放次数 */
+
+ }
+ .right_img{
+   position: absolute;
+   right: 0px;
+   top: 100px;
+   display: inline-block;
+   animation-name: bounce;
+   animation-duration: 2s; /* 设置整个动画持续时间为两秒 */
+   animation-timing-function: ease-in-out; /* 控制速度曲线 */
+   animation-iteration-count: infinite; /* 循环播放次数 */
+ }
+
+ @keyframes fadeOut {
+   from { opacity: 1; }
+   to { opacity: 0; display: none; }
+ }
+ .bottom_img {
+   width: 100%;
+   height: 400px;
+   position: fixed; /* 固定在页面 */
+   display: block;
+   bottom: -300px;
+   left: 0; /* 确保元素从页面左侧开始 */
+   background-image: url("../../assets/images/bottom_.png");
+   background-repeat: no-repeat;
+ //z-index: -1;
+   background-size: cover;
+   transition: all 1s linear;
+ }
 </style>

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

@@ -23,6 +23,12 @@
       </div>
     </div>
     <div class="about-conts">
+      <div class="left_img" ref="leftImg">
+        <img src="../../assets/images/l_img.png" alt="">
+      </div>
+      <div class="right_img" ref="rightImg">
+        <img src="../../assets/images/l_img.png" alt="">
+      </div>
 
       <!-- 教学成果 -->
       <div class="ayptjs" v-if="currentActive == 1">
@@ -61,12 +67,13 @@
           <div class="neirong" v-html="detailsContent"></div>
         </div>
 
-        <div v-show="currentActive === 1">
+        <div v-show="currentActive === 1" style="z-index: 999;position:relative">
           <page-util :page-size="8" :category-id="categoryId" @event-message="handleDataFromPage" />
         </div>
-
+      <div class="bottom_img"  ref="bottomImg">
       </div>
-    <footers></footers>
+    </div>
+    <footers style="position: relative;"></footers>
   </div>
 </template>
 
@@ -117,8 +124,41 @@ export default {
   computed: {
 
   },
+  mounted() {
+    // 页面加载完毕调用
+    // debugger;
+    this.initPageData()
+    // 在组件挂载后添加滚动监听
+    window.addEventListener('scroll', this.handleScroll)
+  },
+
+  beforeDestroy() {
+    // 在组件销毁前移除滚动监听
+    window.removeEventListener('scroll', this.handleScroll)
+  },
 
   methods: {
+    handleScroll() {
+      let browserHeight = document.documentElement.clientHeight
+      console.log("高度",document.documentElement.clientHeight)
+      const leftImg = this.$refs.leftImg
+      const rightImg = this.$refs.rightImg
+      const bottomImg = this.$refs.bottomImg
+      const scrollPosition = window.scrollY
+      if (scrollPosition > 450) {
+        leftImg.style.top = '100px'
+        leftImg.style.position = 'fixed'
+        rightImg.style.top = '0px'
+        rightImg.style.position = 'fixed'
+        bottomImg.style.bottom="0"
+      } else {
+        leftImg.style.top = '250px'
+        leftImg.style.position = 'absolute'
+        rightImg.style.top = '150px'
+        rightImg.style.position = 'absolute'
+        bottomImg.style.bottom="-300px"
+      }
+    },
     showDetails(value){
       this.isShowDetails = true;
       this.currentActive = 999;
@@ -294,9 +334,14 @@ export default {
 }
 
 .about-conts {
-  width: 80%;
+  width: 100%;
   margin: 0 auto;
   padding: 30px 0;
+  padding-bottom: 0px;
+  position: relative;
+  background-image: url("../../assets/images/top_.png");
+  background-repeat: no-repeat;
+  background-position: top;
 }
 
 .about-conts .about-conts-item1 {
@@ -686,4 +731,58 @@ export default {
     width: 100%;
   }
 }
+
+ @keyframes bounce {
+   0%, 20%, 50%, 80%, 100% {
+     transform: translateY(0);
+   }
+   40% {
+     transform: translateY(-30px);
+   }
+   60% {
+     transform: translateY(-15px);
+   }
+ }
+
+ .left_img {
+   position: absolute;
+   left: 15px;
+   top: 250px;
+   display: inline-block;
+   animation-name: bounce;
+   animation-duration: 2s; /* 设置整个动画持续时间为两秒 */
+   animation-timing-function: ease-in-out; /* 控制速度曲线 */
+   animation-iteration-count: infinite; /* 循环播放次数 */
+
+ }
+
+ .right_img {
+   position: absolute;
+   right: 15px;
+   top: 150px;
+   display: inline-block;
+   animation-name: bounce;
+   animation-duration: 2s; /* 设置整个动画持续时间为两秒 */
+   animation-timing-function: ease-in-out; /* 控制速度曲线 */
+   animation-iteration-count: infinite; /* 循环播放次数 */
+ }
+
+ @keyframes fadeOut {
+   from { opacity: 1; }
+   to { opacity: 0; display: none; }
+ }
+ .bottom_img {
+   width: 100%;
+   height: 400px;
+   position: fixed; /* 固定在页面 */
+   display: block;
+   bottom: -300px;
+   left: 0; /* 确保元素从页面左侧开始 */
+   background-image: url("../../assets/images/bottom_.png");
+   background-repeat: no-repeat;
+ //z-index: -1;
+   background-size: cover;
+   transition: all 1s linear;
+ }
+
 </style>

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

@@ -8,6 +8,12 @@
       </div>
     </div>
     <div class="news11">
+      <div class="left_img" ref="leftImg">
+        <img src="../../assets/images/l_img.png" alt="">
+      </div>
+      <div class="right_img" ref="rightImg">
+        <img src="../../assets/images/l_img.png" alt="">
+      </div>
       <div class="news11-list">
         <div class="news11-list-item" v-for="(item, index) in this.xlist" :key="index"  @click="goDeatail(item)">
           <div class="img">
@@ -41,10 +47,12 @@
           :current-page.sync="queryParams.pageNum"
           :page-size.sync="queryParams.pageSize"
           @size-change="getWebBaseInfo"
-          @current-change="getWebBaseInfo">
+          @current-change="getWebBaseInfo"
+        style="z-index: 999;position:relative">
         </el-pagination>
       </div>
-
+      <div class="bottom_img"  ref="bottomImg">
+      </div>
     </div>
 
 
@@ -54,7 +62,7 @@
       <div class="neirong" v-html="detailsContent"></div>
     </div>
 
-    <footers></footers>
+    <footers style="position: relative"></footers>
   </div>
 </template>
 
@@ -131,8 +139,40 @@ export default {
   computed: {
 
   },
+  mounted() {
+    // 页面加载完毕调用
+    // debugger;
+    this.initPageData()
+    // 在组件挂载后添加滚动监听
+    window.addEventListener('scroll', this.handleScroll)
+  },
 
+  beforeDestroy() {
+    // 在组件销毁前移除滚动监听
+    window.removeEventListener('scroll', this.handleScroll)
+  },
   methods: {
+    handleScroll() {
+      let browserHeight = document.documentElement.clientHeight
+      console.log("高度",document.documentElement.clientHeight)
+      const leftImg = this.$refs.leftImg
+      const rightImg = this.$refs.rightImg
+      const bottomImg = this.$refs.bottomImg
+      const scrollPosition = window.scrollY
+      if (scrollPosition > 450) {
+        leftImg.style.top = '100px'
+        leftImg.style.position = 'fixed'
+        rightImg.style.top = '0px'
+        rightImg.style.position = 'fixed'
+        bottomImg.style.bottom="0"
+      } else {
+        leftImg.style.top = '250px'
+        leftImg.style.position = 'absolute'
+        rightImg.style.top = '150px'
+        rightImg.style.position = 'absolute'
+        bottomImg.style.bottom="-300px"
+      }
+    },
     goDeatail(data){
 
         imitationId(data.id).then(res=>{
@@ -186,7 +226,13 @@ export default {
   margin: 10px auto;
 }
 
-
+.news11{
+  padding-bottom: 0px;
+  position: relative;
+  background-image: url("../../assets/images/top_.png");
+  background-repeat: no-repeat;
+  background-position: top;
+}
 
 .d-s {
   display: flex;
@@ -582,7 +628,7 @@ export default {
 }
 
 .news11-list {
-  width: 80%;
+  width: 76%;
   margin: 0 auto;
   margin-top: 50px;
   display: flex;
@@ -697,7 +743,7 @@ export default {
   font-size: 14px;
 }
 .pagin{
-  width: 80%;
+  width: 76%;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -757,4 +803,56 @@ export default {
   width: 80%;
   margin: 10px auto;
 }
+@keyframes bounce {
+  0%, 20%, 50%, 80%, 100% {
+    transform: translateY(0);
+  }
+  40% {
+    transform: translateY(-30px);
+  }
+  60% {
+    transform: translateY(-15px);
+  }
+}
+
+.left_img {
+  position: absolute;
+  left: 15px;
+  top: 250px;
+  display: inline-block;
+  animation-name: bounce;
+  animation-duration: 2s; /* 设置整个动画持续时间为两秒 */
+  animation-timing-function: ease-in-out; /* 控制速度曲线 */
+  animation-iteration-count: infinite; /* 循环播放次数 */
+
+}
+
+.right_img {
+  position: absolute;
+  right: 15px;
+  top: 150px;
+  display: inline-block;
+  animation-name: bounce;
+  animation-duration: 2s; /* 设置整个动画持续时间为两秒 */
+  animation-timing-function: ease-in-out; /* 控制速度曲线 */
+  animation-iteration-count: infinite; /* 循环播放次数 */
+}
+
+@keyframes fadeOut {
+  from { opacity: 1; }
+  to { opacity: 0; display: none; }
+}
+.bottom_img {
+  width: 100%;
+  height: 400px;
+  position: fixed; /* 固定在页面 */
+  display: block;
+  bottom: -300px;
+  left: 0; /* 确保元素从页面左侧开始 */
+  background-image: url("../../assets/images/bottom_.png");
+  background-repeat: no-repeat;
+//z-index: -1;
+  background-size: cover;
+  transition: all 1s linear;
+}
 </style>