资源引导位自适应

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;
-            top:45px;
+            right:28px;
+            // top:45px;
         }
 
         ::v-deep .swiper-wrapper{
@@ -189,8 +209,8 @@
           }
         }
         .gui-box-right{
-          flex: 1;
-          width: 100%;
+          // flex: 1;
+          // 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;
-             height: 500px;
+            //  width: 576px;
+            //  height: 500px;
              text-align: center;
              .banner-img{
-                width: 576px;
-                height: 100%;
+                // width: 576px;
+                // height: 100%;
              }
           }
         }