styles fix

src/views/contributorConference/colleage.vue

@@ -40,6 +40,9 @@ export default {
         }
     },
     mounted() {
+      // 给 body 添加特定类名，用于限制样式作用域
+      document.body.classList.add('contributor-conference-colleage-active');
+      
         let list = colleage.colleage;
         list.forEach(element => {
             let temp = element.org.split('/')
@@ -47,39 +50,44 @@ export default {
         });
         this.colleageList = list;
     },
+    beforeDestroy() {
+      // 组件销毁时移除类名
+      document.body.classList.remove('contributor-conference-colleage-active');
+    },
 };
 </script>
 
 <style lang='scss'>
+// 使用 body.contributor-conference-colleage-active 类名限制样式只在该页面生效
 @media screen and (min-width: 1440px) and (max-width: 1600px){
-    body{
+    body.contributor-conference-colleage-active{
         zoom: 79%;
     }
-    #bg{
+    body.contributor-conference-colleage-active #bg{
          width: 1900px !important;
     }
 }
 @media screen and (min-width: 1366px) and (max-width: 1440px){
-    body{
+    body.contributor-conference-colleage-active{
         zoom: 74%;
     }
-    #bg{
+    body.contributor-conference-colleage-active #bg{
         width: 1869px !important;
     }
 }
 @media screen and (min-width: 1280px) and (max-width: 1366px){
-    body{
+    body.contributor-conference-colleage-active{
         zoom: 72%;
     }
-    #bg{
+    body.contributor-conference-colleage-active #bg{
         width: 1874px !important;
     }
 }
 @media screen and (max-width: 1280px){
-    body{
+    body.contributor-conference-colleage-active{
         zoom: 67%;
     }
-    #bg{
+    body.contributor-conference-colleage-active #bg{
         width: 1885px !important;
     }
 }

src/views/contributorConference/course.vue

@@ -49,41 +49,49 @@ export default {
     },
   },
   mounted() {
+    // 给 body 添加特定类名，用于限制样式作用域
+    document.body.classList.add('contributor-conference-course-active');
+    
     this.courseList = course.course;
   },
+  beforeDestroy() {
+    // 组件销毁时移除类名
+    document.body.classList.remove('contributor-conference-course-active');
+  },
 };
 </script>
 
 <style lang='scss'>
+// 使用 body.contributor-conference-course-active 类名限制样式只在该页面生效
 @media screen and (min-width: 1440px) and (max-width: 1600px){
-    body{
+    body.contributor-conference-course-active{
         zoom: 79%;
     }
-    #bg{
+    body.contributor-conference-course-active #bg{
          width: 1900px !important;
     }
 }
 @media screen and (min-width: 1366px) and (max-width: 1440px){
-    body{
+    body.contributor-conference-course-active{
         zoom: 74%;
     }
-    #bg{
+    body.contributor-conference-course-active #bg{
         width: 1869px !important;
     }
 }
 @media screen and (min-width: 1280px) and (max-width: 1366px){
-    body{
+    body.contributor-conference-course-active{
         zoom: 72%;
     }
-    #bg{
+    body.contributor-conference-course-active #bg{
         width: 1874px !important;
     }
 }
 @media screen and (max-width: 1280px){
-    body{
+    body.contributor-conference-course-active{
         zoom: 67%;
     }
-    #bg{
+    body.contributor-conference-course-active #bg{
         width: 1885px !important;
     }
 }

src/views/contributorConference/detail/courseDetail.vue

@@ -98,6 +98,9 @@ export default {
     };
   },
   mounted() {
+      // 给 body 添加特定类名，用于限制样式作用域
+      document.body.classList.add('course-detail-page-active');
+      
       this.id = this.$route.params.id
       let list = course.course;
       let pid = this.id
@@ -124,45 +127,50 @@ export default {
         }
       }
     },
+    beforeDestroy() {
+      // 组件销毁时移除类名
+      document.body.classList.remove('course-detail-page-active');
+    },
 };
 </script>
 
 <style lang='scss'>
+// 使用 body.course-detail-page-active 类名限制样式只在该页面生效
 @media screen and (min-width: 1440px) and (max-width: 1600px){
-    body{
+    body.course-detail-page-active{
         zoom: 79%;
     }
-    #bg{
+    body.course-detail-page-active #bg{
          width: 1900px !important;
     }
 }
 @media screen and (min-width: 1366px) and (max-width: 1440px){
-    body{
+    body.course-detail-page-active{
         zoom: 74%;
     }
-    #bg{
+    body.course-detail-page-active #bg{
         width: 1869px !important;
     }
 }
 @media screen and (min-width: 1280px) and (max-width: 1366px){
-    body{
+    body.course-detail-page-active{
         zoom: 72%;
     }
-    #bg{
+    body.course-detail-page-active #bg{
         width: 1874px !important;
     }
 }
 @media screen and (max-width: 1280px){
-    body{
+    body.course-detail-page-active{
         zoom: 67%;
     }
-    #bg{
+    body.course-detail-page-active #bg{
         width: 1885px !important;
     }
 }
 </style>
 <style>
-body {
+body.course-detail-page-active {
   background-color: #e0ded9;
 }
 </style>

src/views/contributorConference/detail/projectDetail.vue

@@ -123,6 +123,9 @@ export default {
     };
   },
   mounted() {
+    // 给 body 添加特定类名，用于限制样式作用域
+    document.body.classList.add('contributor-conference-project-detail-active');
+    
     this.id = this.$route.params.id;
     let list = project.project;
     let pid = this.id;
@@ -154,45 +157,50 @@ export default {
       }
     }
   },
+  beforeDestroy() {
+    // 组件销毁时移除类名
+    document.body.classList.remove('contributor-conference-project-detail-active');
+  },
 };
 </script>
 
 <style lang='scss'>
+// 使用 body.contributor-conference-project-detail-active 类名限制样式只在该页面生效
 @media screen and (min-width: 1440px) and (max-width: 1600px){
-    body{
+    body.contributor-conference-project-detail-active{
         zoom: 79%;
     }
-    #bg{
+    body.contributor-conference-project-detail-active #bg{
          width: 1900px !important;
     }
 }
 @media screen and (min-width: 1366px) and (max-width: 1440px){
-    body{
+    body.contributor-conference-project-detail-active{
         zoom: 74%;
     }
-    #bg{
+    body.contributor-conference-project-detail-active #bg{
         width: 1869px !important;
     }
 }
 @media screen and (min-width: 1280px) and (max-width: 1366px){
-    body{
+    body.contributor-conference-project-detail-active{
         zoom: 72%;
     }
-    #bg{
+    body.contributor-conference-project-detail-active #bg{
         width: 1874px !important;
     }
 }
 @media screen and (max-width: 1280px){
-    body{
+    body.contributor-conference-project-detail-active{
         zoom: 67%;
     }
-    #bg{
+    body.contributor-conference-project-detail-active #bg{
         width: 1885px !important;
     }
 }
 </style>
 <style>
-body {
+body.contributor-conference-project-detail-active {
   background-color: #e0ded9;
 }
 </style>

src/views/contributorConference/example.vue

@@ -52,6 +52,9 @@ export default {
         },
     },
     mounted() {
+      // 给 body 添加特定类名，用于限制样式作用域
+      document.body.classList.add('contributor-conference-example-active');
+      
         let list = example.example
         for(let i = 0; i<list.length; i++){
             if(list[i].content.length > 200){
@@ -60,40 +63,45 @@ export default {
         }
         this.exampleList = list
     },
+    beforeDestroy() {
+      // 组件销毁时移除类名
+      document.body.classList.remove('contributor-conference-example-active');
+    },
 
 }
 </script>
 
 <style lang='scss'>
+// 使用 body.contributor-conference-example-active 类名限制样式只在该页面生效
 @media screen and (min-width: 1440px) and (max-width: 1600px){
-    body{
+    body.contributor-conference-example-active{
         zoom: 79%;
     }
-    #bg{
+    body.contributor-conference-example-active #bg{
          width: 1900px !important;
     }
 }
 @media screen and (min-width: 1366px) and (max-width: 1440px){
-    body{
+    body.contributor-conference-example-active{
         zoom: 74%;
     }
-    #bg{
+    body.contributor-conference-example-active #bg{
         width: 1869px !important;
     }
 }
 @media screen and (min-width: 1280px) and (max-width: 1366px){
-    body{
+    body.contributor-conference-example-active{
         zoom: 72%;
     }
-    #bg{
+    body.contributor-conference-example-active #bg{
         width: 1874px !important;
     }
 }
 @media screen and (max-width: 1280px){
-    body{
+    body.contributor-conference-example-active{
         zoom: 67%;
     }
-    #bg{
+    body.contributor-conference-example-active #bg{
         width: 1885px !important;
     }
 }

src/views/contributorConference/index.vue

@@ -383,41 +383,49 @@ export default {
 //       if (res && res.code == "0") {
 //         console.log(res);
 //   } 
+    },
+    mounted() {
+      // 给 body 添加特定类名，用于限制样式作用域
+      document.body.classList.add('contributor-conference-index-active');
+    },
+    beforeDestroy() {
+      // 组件销毁时移除类名
+      document.body.classList.remove('contributor-conference-index-active');
     }
 
-
 }
 </script>
 <style lang='scss'>
+// 使用 body.contributor-conference-index-active 类名限制样式只在该页面生效
 @media screen and (min-width: 1440px) and (max-width: 1600px){
-    body{
+    body.contributor-conference-index-active{
         zoom: 79%;
     }
-    #bg{
+    body.contributor-conference-index-active #bg{
          width: 1900px !important;
     }
 }
 @media screen and (min-width: 1366px) and (max-width: 1440px){
-    body{
+    body.contributor-conference-index-active{
         zoom: 74%;
     }
-    #bg{
+    body.contributor-conference-index-active #bg{
         width: 1869px !important;
     }
 }
 @media screen and (min-width: 1280px) and (max-width: 1366px){
-    body{
+    body.contributor-conference-index-active{
         zoom: 72%;
     }
-    #bg{
+    body.contributor-conference-index-active #bg{
         width: 1874px !important;
     }
 }
 @media screen and (max-width: 1280px){
-    body{
+    body.contributor-conference-index-active{
         zoom: 67%;
     }
-    #bg{
+    body.contributor-conference-index-active #bg{
         width: 1885px !important;
     }
 }

src/views/contributorConference/project.vue

@@ -111,39 +111,48 @@ export default {
             this.$router.back('/contributor/index')
         }
     },
+    mounted() {
+      // 给 body 添加特定类名，用于限制样式作用域
+      document.body.classList.add('contributor-conference-project-active');
+    },
+    beforeDestroy() {
+      // 组件销毁时移除类名
+      document.body.classList.remove('contributor-conference-project-active');
+    },
 };
 </script>
 
 <style lang='scss'>
+// 使用 body.contributor-conference-project-active 类名限制样式只在该页面生效
 @media screen and (min-width: 1440px) and (max-width: 1600px){
-    body{
+    body.contributor-conference-project-active{
         zoom: 79%;
     }
-    #bg{
+    body.contributor-conference-project-active #bg{
          width: 1900px !important;
     }
 }
 @media screen and (min-width: 1366px) and (max-width: 1440px){
-    body{
+    body.contributor-conference-project-active{
         zoom: 74%;
     }
-    #bg{
+    body.contributor-conference-project-active #bg{
         width: 1869px !important;
     }
 }
 @media screen and (min-width: 1280px) and (max-width: 1366px){
-    body{
+    body.contributor-conference-project-active{
         zoom: 72%;
     }
-    #bg{
+    body.contributor-conference-project-active #bg{
         width: 1874px !important;
     }
 }
 @media screen and (max-width: 1280px){
-    body{
+    body.contributor-conference-project-active{
         zoom: 67%;
     }
-    #bg{
+    body.contributor-conference-project-active #bg{
         width: 1885px !important;
     }
 }

src/views/contributorConference/teacher.vue

@@ -43,6 +43,9 @@ export default {
         }
     },
     mounted() {
+      // 给 body 添加特定类名，用于限制样式作用域
+      document.body.classList.add('contributor-conference-teacher-active');
+      
         let list = teacher.teacher;
         list.forEach(element => {
             let temp = element.org.split('/')
@@ -51,38 +54,43 @@ export default {
         this.teacherList = list
 
     },
+    beforeDestroy() {
+      // 组件销毁时移除类名
+      document.body.classList.remove('contributor-conference-teacher-active');
+    },
 };
 </script>
 <style lang='scss'>
+// 使用 body.contributor-conference-teacher-active 类名限制样式只在该页面生效
 @media screen and (min-width: 1440px) and (max-width: 1600px){
-    body{
+    body.contributor-conference-teacher-active{
         zoom: 79%;
     }
-    #bg{
+    body.contributor-conference-teacher-active #bg{
          width: 1900px !important;
     }
 }
 @media screen and (min-width: 1366px) and (max-width: 1440px){
-    body{
+    body.contributor-conference-teacher-active{
         zoom: 74%;
     }
-    #bg{
+    body.contributor-conference-teacher-active #bg{
         width: 1869px !important;
     }
 }
 @media screen and (min-width: 1280px) and (max-width: 1366px){
-    body{
+    body.contributor-conference-teacher-active{
         zoom: 72%;
     }
-    #bg{
+    body.contributor-conference-teacher-active #bg{
         width: 1874px !important;
     }
 }
 @media screen and (max-width: 1280px){
-    body{
+    body.contributor-conference-teacher-active{
         zoom: 67%;
     }
-    #bg{
+    body.contributor-conference-teacher-active #bg{
         width: 1885px !important;
     }
 }

src/views/contributorConference2024/colleage.vue

@@ -40,6 +40,9 @@ export default {
         }
     },
     mounted() {
+      // 给 body 添加特定类名，用于限制样式作用域
+      document.body.classList.add('contributor-conference-2024-colleage-active');
+      
         let list = colleage.colleage;
         list.forEach(element => {
             let temp = element.org.split('/')
@@ -49,39 +52,44 @@ export default {
         });
         this.colleageList = list;
     },
+    beforeDestroy() {
+      // 组件销毁时移除类名
+      document.body.classList.remove('contributor-conference-2024-colleage-active');
+    },
 };
 </script>
 
 <style lang='scss'>
+// 使用 body.contributor-conference-2024-colleage-active 类名限制样式只在该页面生效
 @media screen and (min-width: 1440px) and (max-width: 1600px){
-    body{
+    body.contributor-conference-2024-colleage-active{
         zoom: 79%;
     }
-    #bg{
+    body.contributor-conference-2024-colleage-active #bg{
          width: 1900px !important;
     }
 }
 @media screen and (min-width: 1366px) and (max-width: 1440px){
-    body{
+    body.contributor-conference-2024-colleage-active{
         zoom: 74%;
     }
-    #bg{
+    body.contributor-conference-2024-colleage-active #bg{
         width: 1869px !important;
     }
 }
 @media screen and (min-width: 1280px) and (max-width: 1366px){
-    body{
+    body.contributor-conference-2024-colleage-active{
         zoom: 72%;
     }
-    #bg{
+    body.contributor-conference-2024-colleage-active #bg{
         width: 1874px !important;
     }
 }
 @media screen and (max-width: 1280px){
-    body{
+    body.contributor-conference-2024-colleage-active{
         zoom: 67%;
     }
-    #bg{
+    body.contributor-conference-2024-colleage-active #bg{
         width: 1885px !important;
     }
 }

src/views/contributorConference2024/course.vue

@@ -50,41 +50,49 @@ export default {
     },
   },
   mounted() {
+    // 给 body 添加特定类名，用于限制样式作用域
+    document.body.classList.add('contributor-conference-2024-course-active');
+    
     this.courseList = course.course;
   },
+  beforeDestroy() {
+    // 组件销毁时移除类名
+    document.body.classList.remove('contributor-conference-2024-course-active');
+  },
 };
 </script>
 
 <style lang='scss'>
+// 使用 body.contributor-conference-2024-course-active 类名限制样式只在该页面生效
 @media screen and (min-width: 1440px) and (max-width: 1600px){
-    body{
+    body.contributor-conference-2024-course-active{
         zoom: 79%;
     }
-    #bg{
+    body.contributor-conference-2024-course-active #bg{
          width: 1900px !important;
     }
 }
 @media screen and (min-width: 1366px) and (max-width: 1440px){
-    body{
+    body.contributor-conference-2024-course-active{
         zoom: 74%;
     }
-    #bg{
+    body.contributor-conference-2024-course-active #bg{
         width: 1869px !important;
     }
 }
 @media screen and (min-width: 1280px) and (max-width: 1366px){
-    body{
+    body.contributor-conference-2024-course-active{
         zoom: 72%;
     }
-    #bg{
+    body.contributor-conference-2024-course-active #bg{
         width: 1874px !important;
     }
 }
 @media screen and (max-width: 1280px){
-    body{
+    body.contributor-conference-2024-course-active{
         zoom: 67%;
     }
-    #bg{
+    body.contributor-conference-2024-course-active #bg{
         width: 1885px !important;
     }
 }

src/views/contributorConference2024/detail/courseDetail.vue

@@ -98,6 +98,9 @@ export default {
     };
   },
   mounted() {
+      // 给 body 添加特定类名，用于限制样式作用域
+      document.body.classList.add('contributor-conference-2024-course-detail-active');
+      
       this.id = this.$route.params.id
       let list = course.course;
       let pid = this.id
@@ -124,45 +127,50 @@ export default {
         }
       }
     },
+    beforeDestroy() {
+      // 组件销毁时移除类名
+      document.body.classList.remove('contributor-conference-2024-course-detail-active');
+    },
 };
 </script>
 
 <style lang='scss'>
+// 使用 body.contributor-conference-2024-course-detail-active 类名限制样式只在该页面生效
 @media screen and (min-width: 1440px) and (max-width: 1600px){
-    body{
+    body.contributor-conference-2024-course-detail-active{
         zoom: 79%;
     }
-    #bg{
+    body.contributor-conference-2024-course-detail-active #bg{
          width: 1900px !important;
     }
 }
 @media screen and (min-width: 1366px) and (max-width: 1440px){
-    body{
+    body.contributor-conference-2024-course-detail-active{
         zoom: 74%;
     }
-    #bg{
+    body.contributor-conference-2024-course-detail-active #bg{
         width: 1869px !important;
     }
 }
 @media screen and (min-width: 1280px) and (max-width: 1366px){
-    body{
+    body.contributor-conference-2024-course-detail-active{
         zoom: 72%;
     }
-    #bg{
+    body.contributor-conference-2024-course-detail-active #bg{
         width: 1874px !important;
     }
 }
 @media screen and (max-width: 1280px){
-    body{
+    body.contributor-conference-2024-course-detail-active{
         zoom: 67%;
     }
-    #bg{
+    body.contributor-conference-2024-course-detail-active #bg{
         width: 1885px !important;
     }
 }
 </style>
 <style>
-body {
+body.contributor-conference-2024-course-detail-active {
   background-color: #e0ded9;
 }
 </style>

src/views/contributorConference2024/detail/projectDetail.vue

@@ -129,6 +129,9 @@ export default {
     };
   },
   mounted() {
+    // 给 body 添加特定类名，用于限制样式作用域
+    document.body.classList.add('contributor-conference-2024-project-detail-active');
+    
     this.id = this.$route.params.id;
     let list = project.project;
     let pid = this.id;
@@ -160,45 +163,50 @@ export default {
       }
     }
   },
+  beforeDestroy() {
+    // 组件销毁时移除类名
+    document.body.classList.remove('contributor-conference-2024-project-detail-active');
+  },
 };
 </script>
 
 <style lang='scss'>
+// 使用 body.contributor-conference-2024-project-detail-active 类名限制样式只在该页面生效
 @media screen and (min-width: 1440px) and (max-width: 1600px){
-    body{
+    body.contributor-conference-2024-project-detail-active{
         zoom: 79%;
     }
-    #bg{
+    body.contributor-conference-2024-project-detail-active #bg{
          width: 1900px !important;
     }
 }
 @media screen and (min-width: 1366px) and (max-width: 1440px){
-    body{
+    body.contributor-conference-2024-project-detail-active{
         zoom: 74%;
     }
-    #bg{
+    body.contributor-conference-2024-project-detail-active #bg{
         width: 1869px !important;
     }
 }
 @media screen and (min-width: 1280px) and (max-width: 1366px){
-    body{
+    body.contributor-conference-2024-project-detail-active{
         zoom: 72%;
     }
-    #bg{
+    body.contributor-conference-2024-project-detail-active #bg{
         width: 1874px !important;
     }
 }
 @media screen and (max-width: 1280px){
-    body{
+    body.contributor-conference-2024-project-detail-active{
         zoom: 67%;
     }
-    #bg{
+    body.contributor-conference-2024-project-detail-active #bg{
         width: 1885px !important;
     }
 }
 </style>
 <style>
-body {
+body.contributor-conference-2024-project-detail-active {
   background-color: #e0ded9;
 }
 </style>

src/views/contributorConference2024/example.vue

@@ -52,6 +52,9 @@ export default {
         },
     },
     mounted() {
+      // 给 body 添加特定类名，用于限制样式作用域
+      document.body.classList.add('contributor-conference-2024-example-active');
+      
         let list = example.example
         for(let i = 0; i<list.length; i++){
             if(list[i].content.length > 200){
@@ -60,40 +63,45 @@ export default {
         }
         this.exampleList = list
     },
+    beforeDestroy() {
+      // 组件销毁时移除类名
+      document.body.classList.remove('contributor-conference-2024-example-active');
+    },
 
 }
 </script>
 
 <style lang='scss'>
+// 使用 body.contributor-conference-2024-example-active 类名限制样式只在该页面生效
 @media screen and (min-width: 1440px) and (max-width: 1600px){
-    body{
+    body.contributor-conference-2024-example-active{
         zoom: 79%;
     }
-    #bg{
+    body.contributor-conference-2024-example-active #bg{
          width: 1900px !important;
     }
 }
 @media screen and (min-width: 1366px) and (max-width: 1440px){
-    body{
+    body.contributor-conference-2024-example-active{
         zoom: 74%;
     }
-    #bg{
+    body.contributor-conference-2024-example-active #bg{
         width: 1869px !important;
     }
 }
 @media screen and (min-width: 1280px) and (max-width: 1366px){
-    body{
+    body.contributor-conference-2024-example-active{
         zoom: 72%;
     }
-    #bg{
+    body.contributor-conference-2024-example-active #bg{
         width: 1874px !important;
     }
 }
 @media screen and (max-width: 1280px){
-    body{
+    body.contributor-conference-2024-example-active{
         zoom: 67%;
     }
-    #bg{
+    body.contributor-conference-2024-example-active #bg{
         width: 1885px !important;
     }
 }

src/views/contributorConference2024/index.vue

@@ -408,6 +408,14 @@ export default {
 //       if (res && res.code == "0") {
 //         console.log(res);
 //   }
+  },
+  mounted() {
+    // 给 body 添加特定类名，用于限制样式作用域
+    document.body.classList.add('contributor-conference-2024-index-active');
+  },
+  beforeDestroy() {
+    // 组件销毁时移除类名
+    document.body.classList.remove('contributor-conference-2024-index-active');
   }
 
 }
@@ -425,35 +433,36 @@ export default {
     font-family: 'biaoti2';
     src: url('../../assets/fonts/KMQfP4.ttf');
 }
+// 使用 body.contributor-conference-2024-index-active 类名限制样式只在该页面生效
 @media screen and (min-width: 1440px) and (max-width: 1600px){
-    body{
+    body.contributor-conference-2024-index-active{
         zoom: 79%;
     }
-    #bg{
+    body.contributor-conference-2024-index-active #bg{
          width: 1900px !important;
     }
 }
 @media screen and (min-width: 1366px) and (max-width: 1440px){
-    body{
+    body.contributor-conference-2024-index-active{
         zoom: 74%;
     }
-    #bg{
+    body.contributor-conference-2024-index-active #bg{
         width: 1869px !important;
     }
 }
 @media screen and (min-width: 1280px) and (max-width: 1366px){
-    body{
+    body.contributor-conference-2024-index-active{
         zoom: 72%;
     }
-    #bg{
+    body.contributor-conference-2024-index-active #bg{
         width: 1874px !important;
     }
 }
 @media screen and (max-width: 1280px){
-    body{
+    body.contributor-conference-2024-index-active{
         zoom: 67%;
     }
-    #bg{
+    body.contributor-conference-2024-index-active #bg{
         width: 1885px !important;
     }
 }

src/views/contributorConference2024/project.vue

@@ -139,39 +139,48 @@ export default {
             this.$router.back('/contributor_2024/index')
         }
     },
+    mounted() {
+      // 给 body 添加特定类名，用于限制样式作用域
+      document.body.classList.add('contributor-conference-2024-project-active');
+    },
+    beforeDestroy() {
+      // 组件销毁时移除类名
+      document.body.classList.remove('contributor-conference-2024-project-active');
+    },
 };
 </script>
 
 <style lang='scss'>
+// 使用 body.contributor-conference-2024-project-active 类名限制样式只在该页面生效
 @media screen and (min-width: 1440px) and (max-width: 1600px){
-    body{
+    body.contributor-conference-2024-project-active{
         zoom: 79%;
     }
-    #bg{
+    body.contributor-conference-2024-project-active #bg{
          width: 1900px !important;
     }
 }
 @media screen and (min-width: 1366px) and (max-width: 1440px){
-    body{
+    body.contributor-conference-2024-project-active{
         zoom: 74%;
     }
-    #bg{
+    body.contributor-conference-2024-project-active #bg{
         width: 1869px !important;
     }
 }
 @media screen and (min-width: 1280px) and (max-width: 1366px){
-    body{
+    body.contributor-conference-2024-project-active{
         zoom: 72%;
     }
-    #bg{
+    body.contributor-conference-2024-project-active #bg{
         width: 1874px !important;
     }
 }
 @media screen and (max-width: 1280px){
-    body{
+    body.contributor-conference-2024-project-active{
         zoom: 67%;
     }
-    #bg{
+    body.contributor-conference-2024-project-active #bg{
         width: 1885px !important;
     }
 }

src/views/contributorConference2024/teacher.vue

@@ -43,6 +43,9 @@ export default {
         }
     },
     mounted() {
+      // 给 body 添加特定类名，用于限制样式作用域
+      document.body.classList.add('contributor-conference-2024-teacher-active');
+      
         let list = teacher.teacher;
         list.forEach(element => {
             let temp = element.org.split('/')
@@ -51,38 +54,43 @@ export default {
         this.teacherList = list
 
     },
+    beforeDestroy() {
+      // 组件销毁时移除类名
+      document.body.classList.remove('contributor-conference-2024-teacher-active');
+    },
 };
 </script>
 <style lang='scss'>
+// 使用 body.contributor-conference-2024-teacher-active 类名限制样式只在该页面生效
 @media screen and (min-width: 1440px) and (max-width: 1600px){
-    body{
+    body.contributor-conference-2024-teacher-active{
         zoom: 79%;
     }
-    #bg{
+    body.contributor-conference-2024-teacher-active #bg{
          width: 1900px !important;
     }
 }
 @media screen and (min-width: 1366px) and (max-width: 1440px){
-    body{
+    body.contributor-conference-2024-teacher-active{
         zoom: 74%;
     }
-    #bg{
+    body.contributor-conference-2024-teacher-active #bg{
         width: 1869px !important;
     }
 }
 @media screen and (min-width: 1280px) and (max-width: 1366px){
-    body{
+    body.contributor-conference-2024-teacher-active{
         zoom: 72%;
     }
-    #bg{
+    body.contributor-conference-2024-teacher-active #bg{
         width: 1874px !important;
     }
 }
 @media screen and (max-width: 1280px){
-    body{
+    body.contributor-conference-2024-teacher-active{
         zoom: 67%;
     }
-    #bg{
+    body.contributor-conference-2024-teacher-active #bg{
         width: 1885px !important;
     }
 }

src/views/contributorConferenceNew/colleage.vue

@@ -40,6 +40,9 @@ export default {
         }
     },
     mounted() {
+      // 给 body 添加特定类名，用于限制样式作用域
+      document.body.classList.add('contributor-conference-new-colleage-active');
+      
         let list = colleage.colleage;
         list.forEach(element => {
             let temp = element.org.split('/')
@@ -47,39 +50,44 @@ export default {
         });
         this.colleageList = list;
     },
+    beforeDestroy() {
+      // 组件销毁时移除类名
+      document.body.classList.remove('contributor-conference-new-colleage-active');
+    },
 };
 </script>
 
 <style lang='scss'>
+// 使用 body.contributor-conference-new-colleage-active 类名限制样式只在该页面生效
 @media screen and (min-width: 1440px) and (max-width: 1600px){
-    body{
+    body.contributor-conference-new-colleage-active{
         zoom: 79%;
     }
-    #bg{
+    body.contributor-conference-new-colleage-active #bg{
          width: 1900px !important;
     }
 }
 @media screen and (min-width: 1366px) and (max-width: 1440px){
-    body{
+    body.contributor-conference-new-colleage-active{
         zoom: 74%;
     }
-    #bg{
+    body.contributor-conference-new-colleage-active #bg{
         width: 1869px !important;
     }
 }
 @media screen and (min-width: 1280px) and (max-width: 1366px){
-    body{
+    body.contributor-conference-new-colleage-active{
         zoom: 72%;
     }
-    #bg{
+    body.contributor-conference-new-colleage-active #bg{
         width: 1874px !important;
     }
 }
 @media screen and (max-width: 1280px){
-    body{
+    body.contributor-conference-new-colleage-active{
         zoom: 67%;
     }
-    #bg{
+    body.contributor-conference-new-colleage-active #bg{
         width: 1885px !important;
     }
 }

src/views/contributorConferenceNew/course.vue

@@ -50,41 +50,49 @@ export default {
     },
   },
   mounted() {
+    // 给 body 添加特定类名，用于限制样式作用域
+    document.body.classList.add('contributor-conference-new-course-active');
+    
     this.courseList = course.course;
   },
+  beforeDestroy() {
+    // 组件销毁时移除类名
+    document.body.classList.remove('contributor-conference-new-course-active');
+  },
 };
 </script>
 
 <style lang='scss'>
+// 使用 body.contributor-conference-new-course-active 类名限制样式只在该页面生效
 @media screen and (min-width: 1440px) and (max-width: 1600px){
-    body{
+    body.contributor-conference-new-course-active{
         zoom: 79%;
     }
-    #bg{
+    body.contributor-conference-new-course-active #bg{
          width: 1900px !important;
     }
 }
 @media screen and (min-width: 1366px) and (max-width: 1440px){
-    body{
+    body.contributor-conference-new-course-active{
         zoom: 74%;
     }
-    #bg{
+    body.contributor-conference-new-course-active #bg{
         width: 1869px !important;
     }
 }
 @media screen and (min-width: 1280px) and (max-width: 1366px){
-    body{
+    body.contributor-conference-new-course-active{
         zoom: 72%;
     }
-    #bg{
+    body.contributor-conference-new-course-active #bg{
         width: 1874px !important;
     }
 }
 @media screen and (max-width: 1280px){
-    body{
+    body.contributor-conference-new-course-active{
         zoom: 67%;
     }
-    #bg{
+    body.contributor-conference-new-course-active #bg{
         width: 1885px !important;
     }
 }

src/views/contributorConferenceNew/detail/courseDetail.vue

@@ -98,6 +98,9 @@ export default {
     };
   },
   mounted() {
+      // 给 body 添加特定类名，用于限制样式作用域
+      document.body.classList.add('contributor-conference-new-course-detail-active');
+      
       this.id = this.$route.params.id
       let list = course.course;
       let pid = this.id
@@ -124,45 +127,50 @@ export default {
         }
       }
     },
+    beforeDestroy() {
+      // 组件销毁时移除类名
+      document.body.classList.remove('contributor-conference-new-course-detail-active');
+    },
 };
 </script>
 
 <style lang='scss'>
+// 使用 body.contributor-conference-new-course-detail-active 类名限制样式只在该页面生效
 @media screen and (min-width: 1440px) and (max-width: 1600px){
-    body{
+    body.contributor-conference-new-course-detail-active{
         zoom: 79%;
     }
-    #bg{
+    body.contributor-conference-new-course-detail-active #bg{
          width: 1900px !important;
     }
 }
 @media screen and (min-width: 1366px) and (max-width: 1440px){
-    body{
+    body.contributor-conference-new-course-detail-active{
         zoom: 74%;
     }
-    #bg{
+    body.contributor-conference-new-course-detail-active #bg{
         width: 1869px !important;
     }
 }
 @media screen and (min-width: 1280px) and (max-width: 1366px){
-    body{
+    body.contributor-conference-new-course-detail-active{
         zoom: 72%;
     }
-    #bg{
+    body.contributor-conference-new-course-detail-active #bg{
         width: 1874px !important;
     }
 }
 @media screen and (max-width: 1280px){
-    body{
+    body.contributor-conference-new-course-detail-active{
         zoom: 67%;
     }
-    #bg{
+    body.contributor-conference-new-course-detail-active #bg{
         width: 1885px !important;
     }
 }
 </style>
 <style>
-body {
+body.contributor-conference-new-course-detail-active {
   background-color: #e0ded9;
 }
 </style>

src/views/contributorConferenceNew/detail/projectDetail.vue

@@ -129,6 +129,9 @@ export default {
     };
   },
   mounted() {
+    // 给 body 添加特定类名，用于限制样式作用域
+    document.body.classList.add('contributor-conference-new-project-detail-active');
+    
     this.id = this.$route.params.id;
     let list = project.project;
     let pid = this.id;
@@ -160,45 +163,50 @@ export default {
       }
     }
   },
+  beforeDestroy() {
+    // 组件销毁时移除类名
+    document.body.classList.remove('contributor-conference-new-project-detail-active');
+  },
 };
 </script>
 
 <style lang='scss'>
+// 使用 body.contributor-conference-new-project-detail-active 类名限制样式只在该页面生效
 @media screen and (min-width: 1440px) and (max-width: 1600px){
-    body{
+    body.contributor-conference-new-project-detail-active{
         zoom: 79%;
     }
-    #bg{
+    body.contributor-conference-new-project-detail-active #bg{
          width: 1900px !important;
     }
 }
 @media screen and (min-width: 1366px) and (max-width: 1440px){
-    body{
+    body.contributor-conference-new-project-detail-active{
         zoom: 74%;
     }
-    #bg{
+    body.contributor-conference-new-project-detail-active #bg{
         width: 1869px !important;
     }
 }
 @media screen and (min-width: 1280px) and (max-width: 1366px){
-    body{
+    body.contributor-conference-new-project-detail-active{
         zoom: 72%;
     }
-    #bg{
+    body.contributor-conference-new-project-detail-active #bg{
         width: 1874px !important;
     }
 }
 @media screen and (max-width: 1280px){
-    body{
+    body.contributor-conference-new-project-detail-active{
         zoom: 67%;
     }
-    #bg{
+    body.contributor-conference-new-project-detail-active #bg{
         width: 1885px !important;
     }
 }
 </style>
 <style>
-body {
+body.contributor-conference-new-project-detail-active {
   background-color: #e0ded9;
 }
 </style>

src/views/contributorConferenceNew/example.vue

@@ -52,6 +52,9 @@ export default {
         },
     },
     mounted() {
+      // 给 body 添加特定类名，用于限制样式作用域
+      document.body.classList.add('contributor-conference-new-example-active');
+      
         let list = example.example
         for(let i = 0; i<list.length; i++){
             if(list[i].content.length > 200){
@@ -60,40 +63,45 @@ export default {
         }
         this.exampleList = list
     },
+    beforeDestroy() {
+      // 组件销毁时移除类名
+      document.body.classList.remove('contributor-conference-new-example-active');
+    },
 
 }
 </script>
 
 <style lang='scss'>
+// 使用 body.contributor-conference-new-example-active 类名限制样式只在该页面生效
 @media screen and (min-width: 1440px) and (max-width: 1600px){
-    body{
+    body.contributor-conference-new-example-active{
         zoom: 79%;
     }
-    #bg{
+    body.contributor-conference-new-example-active #bg{
          width: 1900px !important;
     }
 }
 @media screen and (min-width: 1366px) and (max-width: 1440px){
-    body{
+    body.contributor-conference-new-example-active{
         zoom: 74%;
     }
-    #bg{
+    body.contributor-conference-new-example-active #bg{
         width: 1869px !important;
     }
 }
 @media screen and (min-width: 1280px) and (max-width: 1366px){
-    body{
+    body.contributor-conference-new-example-active{
         zoom: 72%;
     }
-    #bg{
+    body.contributor-conference-new-example-active #bg{
         width: 1874px !important;
     }
 }
 @media screen and (max-width: 1280px){
-    body{
+    body.contributor-conference-new-example-active{
         zoom: 67%;
     }
-    #bg{
+    body.contributor-conference-new-example-active #bg{
         width: 1885px !important;
     }
 }

src/views/contributorConferenceNew/index.vue

@@ -401,6 +401,14 @@ export default {
 //       if (res && res.code == "0") {
 //         console.log(res);
 //   }
+  },
+  mounted() {
+    // 给 body 添加特定类名，用于限制样式作用域
+    document.body.classList.add('contributor-conference-new-index-active');
+  },
+  beforeDestroy() {
+    // 组件销毁时移除类名
+    document.body.classList.remove('contributor-conference-new-index-active');
   }
 
 
@@ -419,35 +427,36 @@ export default {
     font-family: 'biaoti2';
     src: url('../../assets/fonts/KMQfP4.ttf');
 }
+// 使用 body.contributor-conference-new-index-active 类名限制样式只在该页面生效
 @media screen and (min-width: 1440px) and (max-width: 1600px){
-    body{
+    body.contributor-conference-new-index-active{
         zoom: 79%;
     }
-    #bg{
+    body.contributor-conference-new-index-active #bg{
          width: 1900px !important;
     }
 }
 @media screen and (min-width: 1366px) and (max-width: 1440px){
-    body{
+    body.contributor-conference-new-index-active{
         zoom: 74%;
     }
-    #bg{
+    body.contributor-conference-new-index-active #bg{
         width: 1869px !important;
     }
 }
 @media screen and (min-width: 1280px) and (max-width: 1366px){
-    body{
+    body.contributor-conference-new-index-active{
         zoom: 72%;
     }
-    #bg{
+    body.contributor-conference-new-index-active #bg{
         width: 1874px !important;
     }
 }
 @media screen and (max-width: 1280px){
-    body{
+    body.contributor-conference-new-index-active{
         zoom: 67%;
     }
-    #bg{
+    body.contributor-conference-new-index-active #bg{
         width: 1885px !important;
     }
 }

src/views/contributorConferenceNew/project.vue

@@ -183,39 +183,48 @@ export default {
             this.$router.back('/contributornew/index')
         }
     },
+    mounted() {
+      // 给 body 添加特定类名，用于限制样式作用域
+      document.body.classList.add('contributor-conference-new-project-active');
+    },
+    beforeDestroy() {
+      // 组件销毁时移除类名
+      document.body.classList.remove('contributor-conference-new-project-active');
+    },
 };
 </script>
 
 <style lang='scss'>
+// 使用 body.contributor-conference-new-project-active 类名限制样式只在该页面生效
 @media screen and (min-width: 1440px) and (max-width: 1600px){
-    body{
+    body.contributor-conference-new-project-active{
         zoom: 79%;
     }
-    #bg{
+    body.contributor-conference-new-project-active #bg{
          width: 1900px !important;
     }
 }
 @media screen and (min-width: 1366px) and (max-width: 1440px){
-    body{
+    body.contributor-conference-new-project-active{
         zoom: 74%;
     }
-    #bg{
+    body.contributor-conference-new-project-active #bg{
         width: 1869px !important;
     }
 }
 @media screen and (min-width: 1280px) and (max-width: 1366px){
-    body{
+    body.contributor-conference-new-project-active{
         zoom: 72%;
     }
-    #bg{
+    body.contributor-conference-new-project-active #bg{
         width: 1874px !important;
     }
 }
 @media screen and (max-width: 1280px){
-    body{
+    body.contributor-conference-new-project-active{
         zoom: 67%;
     }
-    #bg{
+    body.contributor-conference-new-project-active #bg{
         width: 1885px !important;
     }
 }

src/views/contributorConferenceNew/teacher.vue

@@ -43,6 +43,9 @@ export default {
         }
     },
     mounted() {
+      // 给 body 添加特定类名，用于限制样式作用域
+      document.body.classList.add('contributor-conference-new-teacher-active');
+      
         let list = teacher.teacher;
         list.forEach(element => {
             let temp = element.org.split('/')
@@ -51,38 +54,43 @@ export default {
         this.teacherList = list
 
     },
+    beforeDestroy() {
+      // 组件销毁时移除类名
+      document.body.classList.remove('contributor-conference-new-teacher-active');
+    },
 };
 </script>
 <style lang='scss'>
+// 使用 body.contributor-conference-new-teacher-active 类名限制样式只在该页面生效
 @media screen and (min-width: 1440px) and (max-width: 1600px){
-    body{
+    body.contributor-conference-new-teacher-active{
         zoom: 79%;
     }
-    #bg{
+    body.contributor-conference-new-teacher-active #bg{
          width: 1900px !important;
     }
 }
 @media screen and (min-width: 1366px) and (max-width: 1440px){
-    body{
+    body.contributor-conference-new-teacher-active{
         zoom: 74%;
     }
-    #bg{
+    body.contributor-conference-new-teacher-active #bg{
         width: 1869px !important;
     }
 }
 @media screen and (min-width: 1280px) and (max-width: 1366px){
-    body{
+    body.contributor-conference-new-teacher-active{
         zoom: 72%;
     }
-    #bg{
+    body.contributor-conference-new-teacher-active #bg{
         width: 1874px !important;
     }
 }
 @media screen and (max-width: 1280px){
-    body{
+    body.contributor-conference-new-teacher-active{
         zoom: 67%;
     }
-    #bg{
+    body.contributor-conference-new-teacher-active #bg{
         width: 1885px !important;
     }
 }