供应商

src/main/resources/static/css/supplier-center/dashboard.css

@@ -445,7 +445,7 @@
     padding: 0 2.7vw;
     font-size: 4.5vw;
     color: #22272e;
-    border-bottom: solid 1px #e2e7ef;
+    border-bottom: solid .27vw #e2e7ef;
 }
 .mIcon.wrap_tittle:before{
     width: 6.7vw;
@@ -465,22 +465,22 @@
     background: #fff;
 }
 .mIcon.navList:before{
-     width: 25px;
-     height: 25px;
+     width: 6.7vw;
+     height: 6.7vw;
      position: absolute;
-     top: 3px
+     top: .8vw;
 }
 .mIcon.one:before{
-    background-position: -222px -193px;
+    background-position: -59.2vw -51.5vw;
 }
 .mIcon.two:before{
-    background-position: -284px -193px;
+    background-position: -75.7vw -51.5vw;
 }
 .mIcon.three:before{
-    background-position: -127px -193px;
+    background-position: -33.9vw -51.5vw;
 }
 .mIcon.four:before{
-    background-position: -158px -193px;
+    background-position: -42.1vw -51.5vw;
 }
 .navList{
     padding:2.7vw;
@@ -491,7 +491,7 @@
     color: #22272e;
 }
 .con{
-    margin-top: 10px;
+    margin-top: 2.7vw;
 }
 .con a{
     color: #627386;
@@ -507,25 +507,20 @@
      background: #fff;
     padding: 2.7vw;
     overflow: hidden;
-    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.07);
+    box-shadow: 0px .8vw 1.6vw 0px rgba(0, 0, 0, 0.07);
     width: 100%;
     height: 33.9vw;
 }
 
 .head {
- width: 112px;
- height: 80px;
- border-radius: 2px;
- border: solid 1px #f5f5f5;
- float: left;
- margin-right: 10px;
- position: relative;
- cursor: pointer;
-}
-
-.zhuti {
- font-size: 16px;
- color: #22272e;
+     width: 29.9vw;
+     height: 21.3vw;
+     border-radius: .53vw;
+     border: solid .27vw #f5f5f5;
+     float: left;
+     margin-right: 2.7vw;
+     position: relative;
+     cursor: pointer;
 }
 
 .mIcon.Image:before {
@@ -541,6 +536,7 @@
 
 .info_main {
  float: left;
+ width: 60%;
 }
 
 .username {
@@ -559,11 +555,13 @@
  line-height: 22px;
  text-align: center;
  display: inline-block;
+ float: right;
 }
 
 .ziliao {
- font-size: 14px;
- color: #22272e;
+ font-size: 3.2vw;
+ color: rgb(154,165,181);
+ float: left;
 }
 
 .ziliao span {
@@ -572,44 +570,51 @@
 
 .message {
  float: right;
- width: 30px;
- height: 30px;
+ width: 8vw;
+ height: 8vw;
  cursor: pointer;
+ position: relative;
+ top: -25vw;
+ right: 2vw;
 }
 
 .msg_num {
- width: 20px;
- height: 20px;
- line-height: 20px;
- display: block;
- background: red;
- border-radius: 50%;
- color: #fff;
- font-size: 10px;
- text-align: center;
- position: relative;
- top: 10px;
- right: 9px;
+     width: 4vw;
+    height: 4vw;
+    line-height: 4vw;
+    display: block;
+    background: red;
+    border-radius: 50%;
+    color: #fff;
+    font-size: 2.7vw;
+    text-align: center;
+    position: relative;
+    top: 3.7vw;
+    right: 3.2vw;
+    z-index: 1;
 }
 
-.icon.msg:before {
- width: 25px;
- height: 25px;
- background-position: -240px -371px
+.mIcon.msg:before {
+    width: 4vw;
+    height: 4vw;
+    background-position: -18.4vw -62vw;
+    position: absolute;
+    right:5.87vw;
+    top: 5.87vw;
 }
 
 .product {
- margin: 20px 0;
+ margin: 5.3vw 0;
 }
 
 .product p {
- font-size: 16px;
+ font-size: 4vw;
  font-weight: normal;
  font-stretch: normal;
- line-height: 21px;
+ line-height: 5.6vw;
  letter-spacing: 0px;
  color: #22272e;
- padding: 10px;
+ padding: 2.7vw;
 }
 
 .product ul {
@@ -621,17 +626,15 @@
 }
 
 .product li {
-
  display: inline-block;
- margin-right: 20px;
- width: 110px;
+ width: 24vw;
  text-align: center;
  color: #333333;
  position: relative;
  cursor: pointer;
 }
 
-.icon.confirm:before {
+.mIcon.confirm:before {
  width: 34px;
  height: 35px;
  background-position: -266px -371px;
@@ -639,48 +642,50 @@
  right: 53px;
 }
 
-.icon.other:before {
+.mIcon.other:before {
  background-position: -300px -371px;
 }
 
 .rank_top p {
- font-size: 16px;
+ font-size: 3.4vw;
  color: #22272e;
  display: inline-block;
 }
 
 .rank_top span {
  color: #627386;
- font-size: 16px;
+ font-size: 2.6vw;
 }
 
 .sales-ranke ul li {
  display: inline-block;
- width: 10%;
+ width: 15%;
 }
 
 .sales-ranke ul li:nth-child(2) {
- width: 79%;
+     width: 62%;
+    padding-left:4vw;
 }
 
 .sales-ranke {
  background: #fff;
  color: #627386;
- padding: 10px 22px
+ padding:2.7vw 5.9vw
 }
 
 .sales-ranke ul {
  padding: 10px 0;
- border-bottom: 1px solid #e2e7ef
+ border-bottom: .27vw solid #e2e7ef
 }
 
 .rank_top {
- padding: 10px;
+ padding: 2.7vw;
+ background: #fff;
 }
 
 .file_img {
- width: 118px;
- height: 80px;
+ width: 26.7vw;
+ height: 19.4vw;
  font-size: 999px;
  opacity: 0;
  top: 0px;
@@ -691,102 +696,112 @@
 .shop-ranke {
  background: #fff;
  padding-bottom: 20px;
- box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.07);
+ box-shadow: 0px .8vw 1.6vw 0px rgba(0, 0, 0, 0.07);
 }
 
 .shop-ranke ul li {
  float: left;
- height: 70px;
- width: 10%;
+ height: 12vw;
+ width: 15%;
  color: #e15616;
- line-height: 70px
+ line-height: 12vw;
+ position: relative;
 }
 
 .shop-ranke ul {
- padding: 5px 15px;
+ padding: 1.3vw 4vw;
  overflow: hidden;
 }
 
 .shop-ranke ul li:nth-child(2) {
- width: 79%;
+     width: 68%;
 }
 
 .shop-ranke ul li .shop-img {
  display: inline-block;
  vertical-align: top;
- margin-left: 10px;
+ margin-left: 2.7vw;
 }
 
 .shop-ranke ul li .shop-img img {
- width: 70px;
- height: 70px;
+ width: 9.3vw;
+ height: 9.3vw;
  display: inline-block;
 }
 
 .shop-ranke ul li p {
- width: 350px;
- font-size: 14px;
- height: 60px;
- line-height: 60px;
+ width: 42.7vw;
+ font-size: 3.1vw;
+ height: 16vw;
  color: #333;
- padding-left: 16px;
+ padding-left: 2.7vw;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
+ white-space: nowrap;
 }
 
-.icon.rank0:before {
- background-position: 0px -453px
+.mIcon.rank0:before {
+ background-position: -25.3vw -226px;
 }
 
-.icon.rank1:before {
- background-position: -62px -453px
+.mIcon.rank1:before {
+ background-position: -33.9vw -60.3vw;
 }
 
-.icon.rank2:before {
- background-position: -124px -453px
+.mIcon.rank2:before {
+ background-position: -42.1vw -60.3vw;
 }
 
-.icon.rank3:before {
- background-position: -186px -453px
+.mIcon.rank3:before {
+ background-position: -50.1vw -60.3vw;
 }
 
-.icon.rank4:before {
- background-position: -248px -453px
+.mIcon.rank4:before {
+ background-position: -58.7vw -60.3vw;
 }
 
-.icon.rank:before {
- position: absolute;
- width: 60px;
- height: 60px;
+.mIcon.rank:before {
+    position: absolute;
+    width: 8vw;
+    height: 8vw;
+    top: 1.69vw;
+    left: 0;
 }
 
 .confirm span {
  color: #e15616;
- padding: 5px
+ padding: 1.3vw
 }
 
 .Statistics {
- margin-top: 20px;
+ margin-top: 4vw;
+ background: #fff;
+ padding: 2.7vw;
 }
 
 .Stati_top p {
- font-size: 14px;
+ font-size: 3.4vw;
  color: #333333;
  display: inline-block;
 }
 
 .Stati_top span {
- font-size: 12px;
+ font-size: 2.6vw;
  color: #999999;
 }
 
 #StatisticsEacths {
- width: 968px;
- height: 279px;
+ width: 100%;
+ height:60.3vw;
  background: #FFF;
- padding-top: 20px;
- margin-top: 10px;
- box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.07);
+ margin-top: 2.7vw;
+ box-shadow: 0px .8vw 1.6vw 0px rgba(0, 0, 0, 0.07);
+}
+.priceTag{
+position: absolute;
+    bottom: -26vw;
+    left: -32.5vw;
 }
+.mainContent{position: relative}
  }

src/main/resources/static/css/supplier-center/message.css

@@ -0,0 +1,23 @@
+@charset "utf-8";
+li{list-style:none}
+/**
+ * PC端
+ */
+@media screen and (min-width:768px) {
+.navLayout {min-height: 900px;opacity: 0;}
+    .navLayout.active {opacity: 1;}
+    .crumbs{padding-left: 220px;}
+    .navLayout .left{float:left;width:200px;line-height:50px;white-space:nowrap;text-indent:16px;font-size:16px;background:#FFF}
+    .navLayout .left .title{color:#22272e;font-weight:bold;border-bottom:1px solid #f5f5f5}
+    .navLayout .navList .tab{display:block;color:#22272e;position:relative;cursor: pointer;}
+    .navLayout .navList .tab:before{content:'\276F';font-weight:normal;position:absolute;right:10px;top:0;transform:rotate(90deg);width:32px;height:32px;line-height:32px;text-align:center;color:#bec2c9}
+    .navLayout .navList .con{position:relative;}
+    .navLayout .navList .con:before,.navLayout .navList .con:after{content:'';position:absolute;width:168px;border-top:1px solid #f5f5f5;left:16px}
+    .navLayout .navList .con:before{top:0}
+    .navLayout .navList .con:after{bottom:0}
+    .navLayout .navList .con a{display:block;font-size:14px;color:#627386;text-indent:32px}
+    .navLayout .navList.on .tab:before{top:18px;transform:rotate(270deg);color:#e15616}
+    .navLayout .navList.on .tab{color:#e15616}
+    .navLayout .navList .con a.on{color:#e15616;background-color:#ffe6dc}
+}
+

src/main/resources/static/js/supplier-center/message.js

@@ -0,0 +1,24 @@
+jqMultipleShow("click", ".navList", ".tab", ".con");
+var message = new Vue({
+    el: "#message",
+    data: {
+        btnLoading: false,
+        isRequset:false,
+        userId: 0,
+        degree:'',
+        userInfo:{},
+        unReadMessageCount:'',//消息数
+    },
+    methods: {
+        getMessageCount:function () {
+
+        }
+    },
+    mounted: function () {
+        if(globalUserData){
+            this.userId = globalUserData.userId;
+            this.getMessageCount();
+            alert(111)
+        }
+    }
+});

src/main/resources/templates/supplier-center/dashboard.html

@@ -27,7 +27,7 @@
                      <input type="file" ref="goodImage" name="file" class="file_img" @change="uploadGoodsImagesFn" accept="image/png,image/jpeg,image/gif,image/jpg">
                 </div>
                 <div class="info_main">
-                    <div class="">
+                    <div class="mainContent">
                         <h3>{{shopinfo.sname}}</h3>
                           <span v-if="promotions!=null" class="priceTag">
                           <i class="tag icon mIcon" @click="toggleThisLadder($event)" v-text="promotions?promotions.name:''"></i>
@@ -59,8 +59,10 @@
                     <span class="ziliao">资料完整度：<span>{{homeData.dataIntegrity}}</span></span>
                 </div>
                 <div class="message">
+                  <a href="/supplier/message/list.html">
                     <span class="msg_num" v-if="msgFlag">{{homeData.unReadMessageCount}}</span>
                     <span class="icon mIcon msg"></span>
+                    </a>
                 </div>
             </div>
             <div class="product">
@@ -91,7 +93,7 @@
                 </div>
                 <div class="shop-ranke">
                    <ul v-for="(rk,index) in rankingList" :key="index">
-                       <li><i class="icon rank" :class="'rank'+index"></i></li>
+                       <li><i class="icon rank mIcon" :class="'rank'+index"></i></li>
                        <li>
                           <div class="shop-img">
                              <img :src="rk.image">

src/main/resources/templates/supplier-center/message/list.html

@@ -4,15 +4,15 @@
 <head>
     <title>采美365网-消息列表-中国美业全方位线上交易服务互动平台，做美业，上采美</title>
     <template th:replace="components/head-link"></template>
-
+    <link th:href="@{/css/supplier-center/message.css(v=${version})}" rel="stylesheet" type="text/css">
 </head>
 <body>
 <!-- 引用头部 -->
 <template th:replace="components/header"></template>
 
 <!-- 我的消息 -->
-<div id="dashboard">
-    <div class="navLayout" :class="isRequset ? 'active':''" v-if="isRequset">
+<div id="message">
+    <div class="navLayout" :class="isRequset ? 'active':''" >
         <div class="crumbs">
             <span>我的交易</span>
             <span>&gt;</span>
@@ -22,9 +22,9 @@
         </div>
         <div class="wrap clear mf">
             <!--左侧面包屑-->
-            <template th:replace="user-center/components/tableft"></template>
+            <template th:replace="supplier-center/components/tableft"></template>
             <div class="right">
-                
+
             </div>
         </div>
     </div>
@@ -36,6 +36,6 @@
 <!-- 引入底部 -->
 <template th:replace="components/footer"></template>
 <template th:replace="components/foot-link"></template>
-
+<script charset="utf-8" type="text/javascript" th:src="@{/js/supplier-center/message.js(v=${version})}"></script>
 </body>
 </html>

src/main/resources/templates/supplier-center/order/list.html

@@ -12,7 +12,7 @@
 
 <!-- 我的采美 -->
 <div>
-
+<h1>我的订单</h1>
 </div>
 
 <!-- 引入底部 -->

src/main/resources/templates/user-center/message/list.html

@@ -4,6 +4,8 @@
 <head>
     <title>采美365网-中国美业全方位线上交易服务互动平台，做美业，上采美</title>
     <template th:replace="components/head-link"></template>
+    <link th:if="${pageId==1026}" th:href="@{/css/base/form.css(v=${version})}" rel="stylesheet" type="text/css">
+    <link th:href="@{/css/supplier-center/dashboard.css(v=${version})}" rel="stylesheet" type="text/css">
 
 </head>
 <body>
@@ -11,7 +13,10 @@
 <template th:replace="components/header"></template>
 
 <!-- 我的采美 -->
-<div>
+<div id="Message">
+    <div class="">
+
+    </div>
 
 </div>