移动端

build/webpack.base.conf.js

@@ -11,14 +11,14 @@ function resolve (dir) {
 }
 
 const createLintingRule = () => ({
-  test: /\.(js|vue)$/,
-  loader: 'eslint-loader',
-  enforce: 'pre',
-  include: [resolve('src'), resolve('test')],
-  options: {
-    formatter: require('eslint-friendly-formatter'),
-    emitWarning: !config.dev.showEslintErrorsInOverlay
-  }
+  // test: /\.(js|vue)$/,
+  // loader: 'eslint-loader',
+  // enforce: 'pre',
+  // include: [resolve('src'), resolve('test')],
+  // options: {
+  //   formatter: require('eslint-friendly-formatter'),
+  //   emitWarning: !config.dev.showEslintErrorsInOverlay
+  // }
 })
 
 module.exports = {

src/components/question/datiing.vue

@@ -283,6 +283,8 @@ export default {
   mounted() {
     this.$nextTick(() => {
       this.getTimu();
+      // this.$emit("lingjiang", true);
+
     });
   },
 };
@@ -550,11 +552,8 @@ export default {
   .datifinish {
     display: block;
     width: 100%;
-    margin-top:34px;
-    // max-height: 30%;
+    margin-top:10px;
     padding: 10px 0;
-    // overflow-y: auto;
-    // overflow-x:hidden;
     >.qbtn {
       width: 286px;
       height: 55px;
@@ -565,4 +564,16 @@ export default {
     }
   }
 }
+
+@media screen and (max-width: 320px){
+				.qmobile {
+          .datifinish {
+            .qbtn {
+              width:270px!important;
+            }
+          }
+        }
+}
+
+
 </style>

src/components/question/index.vue

@@ -106,7 +106,7 @@ export default {
   height:calc(100% - 35px);
   .qcon {
     width: 96%;
-    height: 96%;
+    height: 98%;
     position: absolute;
   }
 }

src/components/question/prize.vue

@@ -63,8 +63,8 @@
       <LuckyWheel
         class="lw"
         ref="LuckyWheel"
-        width="340px"
-        height="340px"
+        :width="`${turntableWidth}px`"
+        :height="`${turntableHeight}px`"
         :blocks="blocks"
         :prizes="prizes"
         :buttons="buttons"
@@ -72,11 +72,6 @@
         @end="endCallBack"
       />
       <div class="bubble">
-        <!-- <img
-        class="btip"
-        :src="require('@/assets/images/question/tipdialog.png')"
-        alt=""
-      /> -->
         <div class="b-title">
           <div class="txt">本轮奖品详情</div>
         </div>
@@ -206,6 +201,8 @@ export default {
         },
       ],
       isMobile: browser.mobile,
+      turntableWidth:"340",
+      turntableHeight:"340"
     };
   },
   methods: {
@@ -222,6 +219,13 @@ export default {
       this.lingjiang = true;
     },
   },
+  created(){
+    var windowWidth = document.documentElement.clientWidth;
+    if(windowWidth <= 320){
+        this.turntableWidth = 280;
+        this.turntableHeight = 280;
+    }
+  }
 };
 </script>
 
@@ -361,16 +365,10 @@ export default {
     margin-top: 18px;
   }
   .lw {
-    width: 88% !important;
     height: auto;
-    > canvas {
-      width: 100% !important;
-      height: auto!important;
-      transform:none;
-    }
   }
   .bubble {
-    width: 80%;
+    width: 90%;
     margin: 0 auto;
     margin-top: -180px;
     z-index: -1;
@@ -421,7 +419,7 @@ export default {
       line-height: 18px;
       color: #311b04;
       > p {
-        padding-bottom: 10px;
+        padding:0 10px 10px;
       }
     }
   }
@@ -437,4 +435,28 @@ export default {
     }
   }
 }
+
+
+@media screen and (max-width: 320px){
+				.ljcon {
+          width: 90%;
+          >img {
+            width: 100%;
+          }
+          .lbody {
+            top:44%!important;
+            .ltitle {
+              font-size: 18px!important;
+            }
+            .qrcode {
+              width: 50%!important;
+            }
+            >p {
+              font-size: 16px!important;
+              margin:8px 0 16px!important;
+            }
+          }
+        }
+}
+
 </style>