创建供应商模块

components/supplier/merchant.vue

@@ -20,19 +20,20 @@
       <ul class="list-inline">
         <li>
           <div class="has_shop">已开店</div>
-          3213
+          <div class="enterprise_name">
+            深圳英优软科技有限公司
+          </div>
+          <div class="select_btn">
+            添加为<br/>供应商
+          </div>
           <div class="popups">
-                <span>企业执照号：hjfhqei</span>
-                <span>地址：hjfhqei</span>
-                <span>邮箱：hjfhqei</span>
-                <span>电话：hjfhqei</span>
-                <span>行业：hjfhqei</span>
+            <p>企业执照号：</p><p>hjfhqei</p>
+            <p>地址：</p><p></p>
+            <p>邮箱：</p><p>hjfhqei</p>
+            <p>电话：</p><p></p>
+            <p>行业：</p><p>hjfhq4333333333333333333333333333333333333333ei</p>
           </div>
         </li>
-        <li>3213</li>
-        <li>3213</li>
-        <li>3213</li>
-        <li>3213</li>
       </ul>
       <div style="float: right;">
         <page :total="pageParams.total" :page-size="pageParams.count"
@@ -75,8 +76,9 @@
 <style scoped type="text/scss" lang="scss">
 .merchant{
   background: url(/images/supplier/banner.jpg)no-repeat;
-  height:600px;
   border-top:3px solid #000;
+  padding-bottom:25px;
+  margin-top:-1.5em;
   .top{
     padding-top:30px;
     margin-bottom:40px;
@@ -134,10 +136,10 @@
       li{
         position:relative;
         vertical-align: top;
-        width:257px;
+        width:267px;
         height:115px;
         border-radius:5px;
-        margin-right:45px;
+        margin-right:32px;
         margin-bottom:60px;
         background: #ffffff;
         box-shadow: 0 3px 10px rgba(0,0,0,.8);
@@ -168,6 +170,34 @@
           text-align: center;
           line-height: 22px;
         }
+        .enterprise_name{
+          padding-top:15px;
+          width:98%;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space:nowrap;
+          border-bottom:1px solid #b9def7;
+          font-weight: bold;
+          color:#1891e4;
+          font-size: 18px;
+          line-height: 48px;
+          text-align: center;
+        }
+        .select_btn{
+          position:absolute;
+          bottom:-10px;
+          left:50%;
+          z-index:250;
+          width:56px;
+          height:56px;
+          padding:10px 0;
+          margin-left:-28px;
+          text-align: center;
+          line-height: 18px;
+          background: #1891e4;
+          border-radius:50%;
+          color:#fff;
+        }
         &:hover{
           cursor:pointer;
           .popups{
@@ -181,12 +211,38 @@
           top:0;
           left:0;
           background: #6c6c6c;
-          width:257px;
+          width:267px;
           min-height:110px;
-          padding:25px 10px 5px 10px;
+          padding:25px 15px 15px 10px;
           transition: all .3s ease;
           opacity: 0;
           color:#fff;
+          overflow: hidden;
+          p{
+            float:left;
+            white-space:pre-wrap;
+            word-wrap:break-word;
+            margin: 0 !important;
+            line-height: 18px;
+            height:18px;
+            &:nth-child(2n-1){
+              width:42px;
+            }
+            &:first-child{
+              width:85px;
+            }
+            &:nth-child(2n){
+              width:200px;
+            }
+            &:nth-child(2){
+              width:155px;
+            }
+            &:last-child{
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+            }
+          }
         }
       }
     }