个人物料页面首页

assets/scss/common.scss

@@ -654,3 +654,11 @@ a {
   display: block;
   margin: 10px auto;
 }
+
+.fl {
+  float: left;
+}
+
+.fr {
+  float: right;
+}

components/personalMaterial/PersonalMaterial.vue

@@ -14,7 +14,24 @@
         </div>
       </div>
       <div class="not-open-store">
-
+        <p><img src="/images/material/arrow-right-yellow.png" alt="">所属企业未开店</p>
+        <div>
+          <div class="fl">
+            <img src="/images/material/car.png" alt="">
+            <ul>
+              <li>免费入驻 不赚差价</li>
+              <li>库存寄售 极速上架</li>
+              <li>定量广告 限时免费</li>
+            </ul>
+          </div>
+          <div class="fr">
+            <img src="/images/material/house.png" alt="">
+            <div>
+              <p>请点击下方按钮开设新的店铺</p>
+              <span>开设新店铺</span>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -63,6 +80,7 @@
       padding: 0 95px;
       > div {
         padding: 0 50px;
+        border-radius: 3px;
         > p {
           height: 81px;
           line-height: 81px;
@@ -74,11 +92,11 @@
         }
       }
       .is-open-store {
+        padding-bottom: 29px;
+        border-bottom: 1px solid #d5d5d5;
         > div {
-          width: 902px;
           height: 140px;
           border: 1px solid #5078cb;
-          border-radius: 3px;
           p {
             font-weight: bold;
             font-size: 18px;
@@ -100,19 +118,78 @@
               border-top-left-radius: 3px;
               border-bottom-left-radius: 3px;
               border: 1px solid #cdcdcd;
+              margin-left: 10px;
             }
             span {
               display: inline-block;
               width: 87px;
               height: 30px;
-              line-height: 30px;
+              line-height: 31px;
               text-align: center;
               color: #fff;
               background: #5078cb;
               margin-left: -1px;
               border-top-right-radius: 3px;
               border-bottom-right-radius: 3px;
-              vertical-align: middle;
+            }
+          }
+        }
+      }
+      .not-open-store {
+        > div {
+          height: 171px;
+          border: 1px solid #ff8522;
+          .fl {
+            list-style: inside;
+            color: #ff8522;
+            height: 130px;
+            width: 391px;
+            margin-top: 25px;
+            border-right: 1px dashed #fce3cf;
+            img {
+              margin: 11px 0 0 16px;
+            }
+            ul {
+              list-style: inside;
+              color: #ff8522;
+              float: right;
+              margin: 19px 61px 0 36px;
+              li {
+                margin-bottom: 20px;
+                &:nth-child(2) {
+                  margin-left: 10px;
+                }
+                &:nth-child(3) {
+                  margin-left: 29px;
+                }
+              }
+            }
+          }
+          .fr {
+            width: 504px;
+            img {
+              margin: 45px 0 0 62px;
+            }
+            div {
+              float: right;
+              margin-right: 140px;
+              margin-top: 44px;
+              text-align: center;
+              p {
+                margin-bottom: 29px;
+              }
+              span {
+                display: inline-block;
+                width: 124px;
+                height: 32px;
+                color: #fff;
+                font-size: 16px;
+                text-align: center;
+                line-height: 32px;
+                background: #ff8522;
+                border-radius: 3px;
+                cursor: pointer;
+              }
             }
           }
         }