资源引导位自适应

src/assets/styles/portal-index.scss

@@ -444,6 +444,25 @@
 }
 // boe-index
 @media screen and (max-width: 1366px){
+  .gui-box-right{//资源引导位宽度
+    width: 497px;
+    .swiper-slide{
+      width: 376px;
+      height: 300px;
+      text-align: center;
+      .banner-img{
+         width: 376px;
+         height: 100%;
+      }
+   }
+  }
+  .gui-box{
+    .close-right{
+        right:28px;
+        top:25px;
+    }
+  }
+  
   .medal-index{ // 勋章规则控制
     margin: 40px 26px 0 26px;
   }
@@ -683,6 +702,24 @@
  }
 }
 @media screen and (max-width: 1680px) and (min-width:1367px){
+  .gui-box-right{//资源引导位宽度
+    width: 658px;
+    .swiper-slide{
+       width: 476px;
+       height: 500px;
+       text-align: center;
+       .banner-img{
+          width: 476px;
+          height: 100%;
+       }
+    }
+  }
+  .gui-box{
+    .close-right{
+        right:28px;
+        top:25px;
+    }
+  }
   .medal-index{ // 勋章规则控制
     margin: 40px 50px 0 50px;
   }
@@ -910,6 +947,24 @@
 }
 
 @media screen and (max-width: 1920px) and (min-width: 1681px){
+  .gui-box-right{//资源引导位宽度
+    width: 697px;
+    .swiper-slide{
+       width: 576px;
+       height: 500px;
+       text-align: center;
+       .banner-img{
+          width: 576px;
+          height: 100%;
+       }
+    }
+  }
+  .gui-box{
+    .close-right{
+        right:28px;
+        top:25px;
+    }
+  }
   .medal-index{ // 勋章规则控制
     margin: 40px 60px 0 60px;
   }
@@ -1143,6 +1198,24 @@
   }
 
 @media screen and (min-width: 1921px){
+  .gui-box-right{//资源引导位宽度
+    width: 897px;
+    .swiper-slide{
+       width: 576px;
+       height: 500px;
+       text-align: center;
+       .banner-img{
+          width: 576px;
+          height: 100%;
+       }
+    }
+  }
+  .gui-box{
+    .close-right{
+        right:28px;
+        top:45px;
+    }
+  }
   .medal-index{ // 勋章规则控制
     margin: 40px 60px 0 60px;
   }

src/components/Portal/guideBox.vue

@@ -4,7 +4,7 @@
       :visible.sync="guideCollection"
       :append-to-body="true"
       top="90px"
-      width="900px">
+      :width="clientWidth">
       <div class="gui-box">
         <span class="close-right" @click="guideCollection = false"><i style="font-size: 28px;color: #999;" class="el-icon-close"></i></span>
          <div class="gui-box-left">
@@ -14,7 +14,7 @@
             </dl>
          </div>
          <div class="gui-box-right">
-            <div id="guideBox" style="height:540px;z-index:99;">
+            <div id="guideBox" style="z-index:99;">
               <swiper :options="swiperOption" ref="mySwiper" v-if="resonimg.length">
                 <swiper-slide  style="margin: 0 auto;" v-for="(item, idx ) in resonimg" :key="item.id" class="swiper-slide games">
                     <img class="banner-img" style=" margin: 0 auto;" :src="fileBaseUrl + item.img" alt="">
@@ -43,6 +43,7 @@
 		},
     data(){
     	return {
+            clientWidth:'',
             description:'',
             fileBaseUrl: process.env.VUE_APP_FILE_BASE_URL,
             guideCollection:false,// 兴趣采集
@@ -71,6 +72,25 @@
     	}
     },
     created() {
+      // clientWidth
+      console.log(document.body.clientWidth,'document.body.clientWidth');
+      let width = document.body.clientWidth;
+      if(width > 1920 || width == 1920) {
+        console.log(11111);
+        this.clientWidth = '1088px';
+      }
+      if(width > 1681 && width < 1920) {
+        console.log(2222);
+        this.clientWidth = '888px';
+      }
+      if(width > 1367 && width < 1680) {
+        console.log(3333);
+        this.clientWidth = '848px';
+      }
+      if(width < 1366) {
+        console.log(444);
+        this.clientWidth = '688px';
+      }
         //这里必须放在当前的Session存储中，不能每次都调用
         apiGuide.hasUser().then(res=>{
            // if(res.result) {
@@ -138,8 +158,8 @@
         position: relative;
         .close-right{
             position: absolute;
-            right:-136px;
+            right:28px;
-            top:45px;
+            // top:45px;
         }
 
         ::v-deep .swiper-wrapper{
@@ -189,8 +209,8 @@
           }
         }
         .gui-box-right{
-          flex: 1;
+          // flex: 1;
-          width: 100%;
+          // width: 897px;
           background: #e6effb;
           padding: 74px 0 64px 0;
           border-radius:0 10px 10px 0;
@@ -208,12 +228,12 @@
             border-radius: 8px;
             }
           .swiper-slide{
-             width: 576px;
+            //  width: 576px;
-             height: 500px;
+            //  height: 500px;
              text-align: center;
              .banner-img{
-                width: 576px;
+                // width: 576px;
-                height: 100%;
+                // height: 100%;
              }
           }
         }