chests部分H5适配

web/1807-工具页面/src/chests.html

@@ -32,7 +32,7 @@
                             <p v-show="!picPath">点击地图上的战利品图标<br>可显示具体位置</p>
                             <img :src="picPath" alt="">
                         </div>
-                        <!-- <p><label>图片提供者：</label>d3dcfe</p> -->
+                        <p><label>图片提供者：</label>d3dcfe</p>
                         <p v-show="picDate"><label>图片更新日期：</label>{{picDate}}</p>
                     </div>
                 </div>

web/1807-工具页面/src/sass/wapChallenges.scss

@@ -1,84 +1,108 @@
 @charset "UTF-8";
 $yahei: "Microsoft YaHei";
 $pingfan:PingFangSC-Regular;
-$commonColor : #97c1cd;
-$uncommonColor : #2cd070;
-$rareColor : #43c2ff;
-$epicColor : #b457e9;
-$legendaryColor : #ff9139;
-
+$commonColor: #97c1cd;
+$uncommonColor: #2cd070;
+$rareColor: #43c2ff;
+$epicColor: #b457e9;
+$legendaryColor: #ff9139;
 /*通用变量*/
 
 $bfz:14px;
 /*基础样式*/
 
 @import "base/mMixins";
-
 //---------wap---------------
 //H5适配
 @media screen and (max-width: 800px) {
-    
-    body{
-        .page-challenge{
+    body {
+        .page-challenge {
             /* .zt-inner{
                 width: wpx2rem(100);
             } */
-            .map-wrap{
-                border:wpx2rem(8) solid #FFFFFF;
+            .map-wrap {
+                border: wpx2rem(8) solid #FFFFFF;
                 width: wpx2rem(684);
-                height:wpx2rem(684);
+                height: wpx2rem(684);
+                float: none;
+                margin: 0 auto;
             }
-            .task-wrap{
-                margin:wpx2rem(100) 0 0 0;
-                border:wpx2rem(8) solid #FFFFFF;
+            .task-wrap {
+                border: wpx2rem(8) solid #FFFFFF;
                 width: wpx2rem(684);
-                height:wpx2rem(684);
-                .task-hd{
+                height: wpx2rem(684);
+                float: none;
+                margin: wpx2rem(100) auto 0;
+                .task-hd {
                     line-height: wpx2rem(65);
                     padding: 0 wpx2rem(15);
                     font-size: wpx2rem(24);
                 }
-                .task-bd{
-                    padding:0 wpx2rem(10);
+                .task-bd {
+                    padding: 0 wpx2rem(10);
                 }
-                .table-task{
+                .table-task {
                     font-weight: 700;
-                    thead{
+                    thead {
                         line-height: wpx2rem(66);
-                        td{
+                        td {
                             font-size: wpx2rem(24);
                         }
                     }
-                    tbody{
-                        td{
+                    tbody {
+                        td {
                             padding: wpx2rem(9) 0;
                         }
                     }
-                    p{
+                    p {
                         font-size: wpx2rem(20);
                         line-height: 1.2em;
                     }
-                    img{
+                    img {
                         height: wpx2rem(48);
                     }
-                     .col-desc{
+                    .col-desc {
                         width: wpx2rem(380);
                     }
                 }
             }
         }
-        .page-chests{
+        .page-chests {
             .tool-box {
-                border:none;
-                padding:0 0 0 0;
+                border: none;
+                padding: 0 0 0 0;
             }
-            .map-wrap{
-                border:wpx2rem(8) solid #FFFFFF;
+            .map-wrap {
+                border: wpx2rem(8) solid #FFFFFF;
                 width: wpx2rem(684);
-                height:wpx2rem(684);
-                margin:0 auto;
+                height: wpx2rem(684);
+                float: none;
+                margin: 0 auto;
+            }
+            .map-show {
+                float: none;
+                .pic-wrap {
+                    border: wpx2rem(8) solid #FFFFFF;
+                    width: wpx2rem(664);
+                    height: wpx2rem(619);
+                    margin:wpx2rem(10) auto wpx2rem(30);
+                    background: #6b7293;
+                    line-height: wpx2rem(36);
+                    p {
+                        font-size:wpx2rem(30);
+                        padding: wpx2rem(250) 0;
+                    }
+                }
+                p {
+                    line-height: wpx2rem(35);
+                    font-size: wpx2rem(30);
+                    color: #d3dcfe;
+                }
+                label {
+                    color: #FFFFFF;
+                    font-weight: 700;
+                }
             }
         }
     }
-    
 }