修改首页商品全球身份认证和业务大厅样式

src/views/Home/index.vue

@@ -266,7 +266,7 @@
               <div class="cate">业务大厅</div>
               <div class="row">
                 <div class="col-lg-6 wbsxtcy bgWhite">
-                  <div class="ywdt-cate">
+                  <div class="ywdt-cate ywdt-cate-bj1">
                     <span>我还不是系统成员</span>
                     <span>（企业初次申请）</span>
                   </div>
@@ -284,7 +284,7 @@
                   </div>
                 </div>
                 <div class="col-lg-6 wsxtcy bgWhite">
-                  <div class="ywdt-cate">
+                  <div class="ywdt-cate ywdt-cate-bj2">
                     <span>我是系统成员</span>
                     <span>（成员专区）</span>
                   </div>
@@ -303,7 +303,7 @@
               </div>
               <div class="row">
                 <div class="col-lg-6 wsylqy bgWhite">
-                  <div class="ywdt-cate">
+                  <div class="ywdt-cate ywdt-cate-bj1">
                     <span>我是医疗企业</span>
                   </div>
                   <div class="row ywdt-kj">
@@ -319,7 +319,7 @@
                   </div>
                 </div>
                 <div class="col-lg-6 kjywblzq bgWhite">
-                  <div class="ywdt-cate">
+                  <div class="ywdt-cate ywdt-cate-bj2">
                     <span>跨境业务办理专区</span>
                   </div>
                   <div class="row ywdt-kj">
@@ -481,22 +481,32 @@
           <div class="spqqsfz-cate-left">商品全球身份证</div>
           <div class="spqqsfz-cate-right">更多></div>
         </div>
-        <div class="spqqsfz-cont">
-          <div class="row">
-            <div class="col offset-lg-4">kiddy color重彩油画棒A14018</div>
+        <div class="spqqsfz-cont row">
+          <div class="spqqsfz-cont-left col-lg-3">
+            <img src="../../assets/image/home/spqqsfz-tp.png" alt="" />
           </div>
-          <div class="row">
-            <div class="col-8 offset-lg-4">
-              <div class="pp">品牌：kiddy color</div>
-              <div class="jhl">净含量：一盒</div>
-            </div>
-            <div class="col-8 offset-lg-4">
-              公司名称：梁介福(广东)药业有限公司
-            </div>
-          </div>
-          <div class="row">
-            <div class="col offset-lg-4">
-              <button>更多商品信息</button>
+          <div class="spqqsfz-cont-right col-lg-9">
+            <img src="../../assets/image/home/spqqsfz-bj2.png" alt="" />
+            <div class="right-cont">
+              <div class="row">
+                <div class="col offset-2 offset-lg-3">
+                  kiddy color重彩油画棒A14018
+                </div>
+              </div>
+              <div class="row">
+                <div class="col-8 offset-2 offset-lg-3">
+                  <div class="pp">品牌：kiddy color</div>
+                  <div class="jhl">净含量：一盒</div>
+                </div>
+                <div class="col-8 offset-2 offset-lg-3">
+                  公司名称：梁介福(广东)药业有限公司
+                </div>
+              </div>
+              <div class="row">
+                <div class="col offset-2 offset-lg-3">
+                  <button>更多商品信息</button>
+                </div>
+              </div>
             </div>
           </div>
         </div>
@@ -1001,10 +1011,16 @@ export default {
       display: flex;
       align-items: center;
       flex-wrap: wrap;
-      background: url("../../assets/image/home/ywdt-cate.png") no-repeat 100%
-        100%;
       height: 73px;
       padding-left: 24px;
+      &.ywdt-cate-bj1 {
+        background: url("../../assets/image/home/ywdt-cate-bj1.png") no-repeat;
+        background-size: cover;
+      }
+      &.ywdt-cate-bj2 {
+        background: url("../../assets/image/home/ywdt-cate-bj2.png") no-repeat;
+        background-size: cover;
+      }
       span {
         &:nth-child(1) {
           color: #0e2c6b;
@@ -1118,8 +1134,8 @@ export default {
   }
   .spqqsfz {
     background: #2f579c url("../../assets/image/home/spqqsfz-bj.png") no-repeat;
-    height: 433px;
-    background-size: auto 100%;
+    padding: 30px 0;
+    // height: 433px;
     background-position: center;
     .spqqsfz-cate {
       display: flex;
@@ -1127,44 +1143,68 @@ export default {
       flex-wrap: wrap;
       color: #ffffff;
       font-size: 24px;
-      padding: 30px 0;
+      margin-bottom: 30px;
     }
     .spqqsfz-cont {
-      background: url("../../assets/image/home/spqqsfz-bj2.png") no-repeat;
-      height: 300px;
-      background-size: 100% 100%;
-      background-position: center;
-      display: flex;
-      flex-direction: column;
-      justify-content: space-around;
-      .row {
-        color: #ffffff;
-        &:nth-child(1) {
-          font-size: 24px;
+      // background: #fff url("../../assets/image/home/spqqsfz-bj2.png") no-repeat;
+      position: relative;
+      background: #fff;
+      border-radius: 6px;
+      > * {
+        padding: 0;
+        height: 300px;
+      }
+      .spqqsfz-cont-left {
+        img {
+          width: 100%;
+          height: 100%;
         }
-        &:nth-child(2) {
-          font-size: 16px;
-          > div {
-            display: flex;
-            align-items: center;
-            flex-wrap: wrap;
+      }
+      .spqqsfz-cont-right {
+        position: relative;
+        img {
+          width: 100%;
+          height: 100%;
+        }
+        .right-cont {
+          position: absolute;
+          left: 0;
+          top: 0;
+          width: 100%;
+          height: 100%;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-around;
+          .row {
+            color: #ffffff;
+            &:nth-child(1) {
+              font-size: 24px;
+            }
             &:nth-child(2) {
-              margin-top: 10px;
+              font-size: 16px;
+              > div {
+                display: flex;
+                align-items: center;
+                flex-wrap: wrap;
+                &:nth-child(2) {
+                  margin-top: 10px;
+                }
+              }
+              .pp {
+                font-size: 18px;
+                margin-right: 35px;
+              }
+            }
+            &:nth-child(3) {
+              button {
+                width: 156px;
+                height: 41px;
+                background: #ffffff;
+                border-radius: 4px;
+                color: #f26335;
+                font-size: 18px;
+              }
             }
-          }
-          .pp {
-            font-size: 18px;
-            margin-right: 35px;
-          }
-        }
-        &:nth-child(3) {
-          button {
-            width: 156px;
-            height: 41px;
-            background: #ffffff;
-            border-radius: 4px;
-            color: #f26335;
-            font-size: 18px;
           }
         }
       }