bug fixes

src/pages/shop.vue

@@ -61,15 +61,16 @@
           </div>
         </div>
         <div class="left-con__bottom">
-          <div class="line"><qrcode-vue :value="shopPreviewUrl" :size="180" /></div>
-          <div class="des">
-            <div class="tit">紫荆教育电销平台</div>
-            <div class="t">扫描二维码，访问我们的微信店铺</div>
+          <div class="shop-qrcode">
+            <div class="line"><qrcode-vue :value="shopPreviewUrl" :size="180" /></div>
+            <div class="des">
+              <div class="tit">紫荆教育电销平台</div>
+              <div class="t">扫描二维码，访问我们的微信店铺</div>
+            </div>
           </div>
-        </div>
-        <div>
-          <div class="shop-details" v-if="commodityData.spu_context">
-            <div v-html="commodityData.spu_context"></div>
+          <div class="shop-detail">
+            <div class="shop-detail-title">商品详情</div>
+            <div v-html="commodityData.spu_context" style="padding: 22px"></div>
           </div>
         </div>
       </div>
@@ -174,7 +175,8 @@ export default {
     width: 1140px;
     margin: 0 auto;
     display: flex;
-    padding-top: 20px;
+    align-items: flex-start;
+    padding: 20px 0;
     .shop-content__left {
       flex: 1;
       .left-con__top {
@@ -211,8 +213,6 @@ export default {
         }
         .order-detail {
           flex: 1;
-          border-right: 1px solid #dedede;
-          padding-right: 22px;
           box-sizing: border-box;
           height: 420px;
           margin-left: 22px;
@@ -322,31 +322,14 @@ export default {
         }
       }
       .left-con__bottom {
-        border-top: 1px solid #e7e7e7;
-        padding-top: 34px;
         display: flex;
         margin-top: 38px;
-        .line {
-          width: 180px;
-          height: 180px;
-          border: 1px solid #707070;
-          margin-right: 20px;
-        }
-        .des {
-          .tit {
-            font-size: 16px;
-            color: #333333;
-          }
-          .t {
-            font-size: 14px;
-            margin-top: 10px;
-            color: #7e7e7e;
-          }
-        }
       }
     }
     .shop-content__right {
       margin-left: 20px;
+      padding-left: 20px;
+      border-left: 1px solid #dedede;
       .title-box {
         width: 160px;
         height: 20px;
@@ -378,8 +361,36 @@ li {
   padding: 0;
   list-style: none;
 }
-.shop-details {
-  padding: 40px 0;
+.shop-qrcode {
+  width: 182px;
+  margin-right: 20px;
+  .line {
+    width: 180px;
+    height: 180px;
+    border: 1px solid #e7e7e7;
+  }
+  .des {
+    margin-top: 20px;
+    .tit {
+      font-size: 16px;
+      color: #333;
+    }
+    .t {
+      margin-top: 10px;
+      font-size: 14px;
+      color: #7e7e7e;
+    }
+  }
+}
+.shop-detail {
+  border: 1px solid #e7e7e7;
+  .shop-detail-title {
+    font-size: 18px;
+    color: #c01540;
+    line-height: 65px;
+    border-bottom: 1px solid #e7e7e7;
+    padding: 0 22px;
+  }
   * {
     max-width: 100% !important;
   }