styles fix

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;
     }
 }