供应商

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

@@ -1,183 +1,456 @@
-
- .crumbs {
+@media screen and (min-width:768px) {
+    .crumbs {
         padding-left: 220px;
         font-size: 16px;
         color: #22272e
     }
-.right {
+
+    .right {
         width: 968px;
         float: right;
     }
- .userinfo {
-    padding: 5px 20px;
-    background: #fff;
-    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.07);
-}
 
-.info {
-    height: 56px;
-    line-height: 56px;
-    border-bottom: solid 1px #e2e7ef;
-    font-size: 16px;
-    color: #22272e;
-    overflow: hidden
-}
+    .userinfo {
+        padding: 5px 20px;
+        background: #fff;
+        box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.07);
+    }
 
-.comback {
-    width: 90px;
-    height: 36px;
-    background-color: #ffe6dc;
-    border-radius: 2px;
-    border: solid 1px #e15616;
-    float: right;
-    line-height: 36px;
-    margin-top: 10px;
-    cursor: pointer;
-    color: #e15616;
-}
+    .info {
+        height: 56px;
+        line-height: 56px;
+        border-bottom: solid 1px #e2e7ef;
+        font-size: 16px;
+        color: #22272e;
+        overflow: hidden
+    }
 
-.userinfo .user p {
-    display: inline-block;
-    color: #627386;
-    margin: 15px 45px 15px 0px;
-}
+    .comback {
+        width: 90px;
+        height: 36px;
+        background-color: #ffe6dc;
+        border-radius: 2px;
+        border: solid 1px #e15616;
+        float: right;
+        line-height: 36px;
+        margin-top: 10px;
+        cursor: pointer;
+        color: #e15616;
+    }
 
-.userinfo .user p span {
-    color: #22272e;
-}
+    .userinfo .user p {
+        display: inline-block;
+        color: #627386;
+        margin: 15px 45px 15px 0px;
+    }
 
-.address {
-    margin-bottom: 15px;
-    color: #627386;
-}
+    .userinfo .user p span {
+        color: #22272e;
+    }
 
-.address span {
-    color: #22272e;
-}
-.product-info{
-    margin-top: 20px;
-}
-.price{
-    overflow: hidden;
-}
-.protitle {
-    color: #22272e;
-    font-size: 16px;
-    padding: 15px;
-    float: left;
-}
-.price-right{
-    float: right;
-    padding: 15px;
-    color: #22272e;
-}
-.red{
-    color: #f94b4b;
-}
-.product{
-    background: #fff;
-    padding:10px 15px;
-    box-shadow: 0px 3px 6px 0px
-		rgba(0, 0, 0, 0.07);
-}
-.product-title{
-    border-bottom: solid 1px #e2e7ef;
-    height: 54px;
-    line-height: 54px
-}
-.product-title li{
-    display: inline-block;
-    list-style: none;
-    color: #627386;
-    width: 17%;
-    text-align: center;
+    .address {
+        margin-bottom: 15px;
+        color: #627386;
+    }
 
+    .address span {
+        color: #22272e;
+    }
+
+    .product-info {
+        margin-top: 20px;
+    }
+
+    .price {
+        overflow: hidden;
+    }
+
+    .protitle {
+        color: #22272e;
+        font-size: 16px;
+        padding: 15px;
+        float: left;
+    }
+
+    .price-right {
+        float: right;
+        padding: 15px;
+        color: #22272e;
+    }
+
+    .red {
+        color: #f94b4b;
+    }
+
+    .product {
+        background: #fff;
+        padding: 10px 15px;
+        box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.07);
+    }
+
+    .product-title {
+        border-bottom: solid 1px #e2e7ef;
+        height: 54px;
+        line-height: 54px
+    }
+
+    .product-title li {
+        display: inline-block;
+        list-style: none;
+        color: #627386;
+        width: 17%;
+        text-align: center;
+
+    }
+
+    .product-title li:nth-child(1) {
+        width: 46%;
+        text-align: left
+    }
+
+    .pro-information li {
+        list-style: none;
+    }
+
+    .pro-information li {
+        width: 100%;
+        padding: 10px 0;
+    }
+
+    .pro-information li div {
+        display: inline-block;
+        width: 17%;
+        text-align: center;
+    }
+
+    .pro-information li div.product-img {
+        width: 46%;
+        text-align: left;
+    }
+
+    .product-img img {
+        width: 70px;
+        height: 70px;
+        border: solid 1px #e2e7ef;
+    }
+
+    .product-img h3 {
+        display: inline-block;
+        width: 300px;
+        margin-left: 10px;
+        font-size: 16px;
+        letter-spacing: 1px;
+    }
+
+    .info-title {
+        color: #22272e;
+        font-size: 16px;
+        padding: 15px;
+    }
+
+    .title-name {
+        color: #22272e;
+        margin-bottom: 20px
+    }
+
+    .title-time {
+        float: right;
+        color: #9aa5b5;
+    }
+
+    .order-item {
+        display: flex
+    }
+
+    .order-item p {
+        margin-bottom: 20px;
+        display: inline-block;
+        color: #627386;
+        width: 25%
+    }
+
+    .red {
+        color: #f94b4b;
+    }
+
+    .order-info {
+        margin-top: 20px;
+    }
+
+    .order-info .content {
+        background: #fff;
+        padding: 15px;
+        box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.07);
+    }
+
+    .order-item.pay span {
+        color: #e15616;
+    }
+
+    .sett-re {
+        margin-top: 20px
+    }
+
+    .sett-re div:nth-child(1) {
+        color: #22272e;
+        font-size: 16px;
+        padding: 15px
+    }
+
+    .sett-re div:nth-child(2) {
+        background: #fff;
+        height: 60px;
+        line-height: 60px;
+        padding-left: 15px;
+        color: #22272e
+    }
+
+    .sett-re div:nth-child(2) p {
+        display: inline-block;
+        margin-right: 15px
+    }
 }
-.product-title li:nth-child(1){
-    width: 46%;
-    text-align: left
-}
-.pro-information li{
-    list-style: none;
-}
-.pro-information li {
-    width: 100%;
-    padding: 10px 0;
-}
-.pro-information li div {
-    display: inline-block;
-    width: 17%;
-    text-align: center;
-}
-.pro-information li div.product-img {
-    width: 46%;
-    text-align: left;
-}
-.product-img img {
-    width: 70px;
-    height: 70px;
-    border: solid 1px #e2e7ef;
-}
-.product-img h3 {
-    display: inline-block;
-    width: 300px;
-    margin-left: 10px;
-    font-size: 16px;
-    letter-spacing: 1px;
-}
-.info-title{
-    color: #22272e;
-    font-size: 16px;
-    padding: 15px;
-}
-.title-name{
-    color: #22272e;
-    margin-bottom: 20px
-}
-.title-time{
-    float: right;
-    color: #9aa5b5;
-}
-.order-item{
-    display: flex
-}
-.order-item p{
-    margin-bottom: 20px;
-    display: inline-block;
-    color: #627386;
-    width: 25%
-}
-.red{
-    color: #f94b4b;
-}
-.order-info{
-    margin-top: 20px;
-}
-.order-info .content{
-    background: #fff;
-    padding: 15px;
-    box-shadow: 0px 3px 6px 0px
-		rgba(0, 0, 0, 0.07);
-}
-.order-item.pay span{
-    color: #e15616;
-}
-.sett-re{
-    margin-top: 20px
-}
-.sett-re div:nth-child(1){
-    color: #22272e;
-    font-size: 16px;
-    padding: 15px
-}
- .sett-re div:nth-child(2){
-    background: #fff;
-    height: 60px;
-    line-height: 60px;
-    padding-left: 15px;
-    color: #22272e
- }
-.sett-re div:nth-child(2) p{
-    display: inline-block;
-    margin-right: 15px
+
+
+/*移动*/
+@media screen and (max-width:768px) {
+    .wrap_tittle {
+        height: 10.6vw;
+        line-height: 10.6vw;
+        background: #fff;
+        padding: 0 2.7vw;
+        font-size: 3.4vw;
+        color: #22272e;
+        border-bottom: solid .27vw #e2e7ef;
+    }
+    .mIcon.wrap_tittle:before {
+        width: 6.7vw;
+        height: 6.7vw;
+        background-position: -50.7vw -51.5vw;
+        position: absolute;
+        top: 28vw;
+        }
+        .mIcon.open:before {
+        width: 10.6vw;
+        height: 11.2vw;
+        float: right;
+        background-position: -48.8vw 2.7vw;
+        }
+    .right{
+        width: 100%;
+    }
+
+    .userinfo {
+        padding: 5px 20px;
+        background: #fff;
+        box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.07);
+    }
+
+    .info {
+        height: 13vw;
+        line-height: 13vw;
+        font-size: 3.4vw;
+        color: #22272e;
+        overflow: hidden
+    }
+
+    .comback {
+        width: 22.4vw;
+        height: 7.2vw;
+        background-color: #ffe6dc;
+        border-radius: 4.8vw;
+        border: solid .27vw #e15616;
+        float: right;
+        line-height: 7.2vw;
+        margin-top: 2.7vw;
+        cursor: pointer;
+        color: #e15616
+    }
+    .userinfo .user p:nth-child(1){
+        width: 100%;
+    }
+    .userinfo .user p {
+        display: inline-block;
+        color: #627386;
+        margin: 0 10px 10px 0;
+    }
+
+    .userinfo .user p span {
+        color: #22272e;
+    }
+
+    .address {
+        margin-bottom: 15px;
+        color: #627386;
+    }
+
+    .address span {
+        color: #22272e;
+    }
+
+    .product-info {
+       margin-top: 4vw;
+        background: #fff
+    }
+
+    .price {
+        overflow: hidden;
+    }
+
+    .protitle {
+        color: #22272e;
+        font-size: 3.4vw;
+        padding: 4vw;
+        float: left
+    }
+
+    .price-right {
+        float: right;
+        padding: 4vw;
+        color: #22272e
+    }
+
+    .red {
+        color: #f94b4b;
+    }
+
+    .product {
+        background: #fff;
+        padding: 0 4vw;
+        box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.07);
+        position: relative;
+        height: 45vw
+    }
+
+    .product-title {
+        height: 5.3vw;
+        line-height: 5.3vw;
+        position: relative;
+         width: 100%
+    }
+
+    .product-title li {
+        display: inline-block;
+        list-style: none;
+        color: #627386;
+        position: relative;
+        top: 20vw;
+        width: 30%;
+        text-align: center
+    }
+
+    .product-title li:nth-child(1) {
+        width: 100%;
+        text-align: left;
+        top: 0
+    }
+     .product-title li:nth-child(2) {
+        text-align: left
+    }
+
+    .pro-information li {
+        width: 100%;
+        padding: 10px 0;
+        list-style: none;
+    }
+
+    .pro-information li div {
+        display: inline-block;
+        text-align: center;
+        top: 9.6vw;
+        width: 30%;
+        position: relative
+    }
+
+    .pro-information li div.product-img {
+        width: 100%;
+        text-align: left;
+        top: 0
+    }
+    .pro-information li div:nth-child(2){
+        text-align: left;
+    }
+    .product-img img {
+        width: 15vw;
+        height: 15vw;
+        border: solid 1px #e2e7ef
+    }
+
+    .product-img h3 {
+        display: inline-block;
+        width: 78%;
+        font-size:3.4vw;
+        letter-spacing: .27vw;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap
+    }
+
+    .info-title {
+        color: #22272e;
+        font-size: 16px;
+        padding: 15px;
+    }
+
+    .title-name {
+        color: #22272e;
+        margin-bottom: 20px
+    }
+
+    .title-time {
+        float: right;
+        color: #9aa5b5;
+    }
+
+    .order-item {
+        display: flex
+    }
+
+    .order-item p {
+        margin-bottom: 20px;
+        display: inline-block;
+        color: #627386;
+        width: 25%
+    }
+
+    .red {
+        color: #f94b4b;
+    }
+
+    .order-info {
+        margin-top: 20px;
+    }
+
+    .order-info .content {
+        background: #fff;
+        padding: 15px;
+        box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.07);
+    }
+
+    .order-item.pay span {
+        color: #e15616;
+    }
+
+    .sett-re {
+        margin-top: 20px
+    }
+
+    .sett-re div:nth-child(1) {
+        color: #22272e;
+        font-size: 16px;
+        padding: 15px
+    }
+
+    .sett-re div:nth-child(2) {
+        background: #fff;
+        height: 60px;
+        line-height: 60px;
+        padding-left: 15px;
+        color: #22272e
+    }
+
+    .sett-re div:nth-child(2) p {
+        display: inline-block;
+        margin-right: 15px
+    }
 }

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

@@ -26,7 +26,11 @@ var seeDetail = new Vue({
                 }
             }
          })
-        }
+        },
+       opentittle:function(){
+       var _this = this
+           _this.open = !_this.open;
+    },
     },
     mounted:function () {
        var _self = this;

src/main/resources/templates/supplier-center/order/delivery-record.html

@@ -4,7 +4,7 @@
 <head>
     <title>采美365网-中国美业全方位线上交易服务互动平台，做美业，上采美</title>
     <template th:replace="components/head-link"></template>
-    <link th:href="@{/css/supplier-center/tableft.css(v=${version})}" rel="stylesheet" type="text/css">
+    <link th:href="@{/css/base/center.css(v=${version})}" rel="stylesheet" type="text/css">
     <link th:href="@{/css/supplier-center/record.css(v=${version})}" rel="stylesheet" type="text/css">
 </head>
 <body>
@@ -21,6 +21,9 @@
             <span>&gt;</span>
             <span>发货记录</span>
         </div>
+        <div v-else class="wrap_tittle mIcon" @click="opentittle">
+            <i class="mIcon open"></i><span style="margin-left: 25px;">发货</span>
+        </div>
         <div class="wrap clear">
             <!--左侧面包屑-->
 <!--            <div v-show="open">-->

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

@@ -4,7 +4,7 @@
 <head>
     <title>采美365网-中国美业全方位线上交易服务互动平台，做美业，上采美</title>
     <template th:replace="components/head-link"></template>
-    <link th:href="@{/css/supplier-center/tableft.css(v=${version})}" rel="stylesheet" type="text/css">
+    <link th:href="@{/css/base/center.css(v=${version})}" rel="stylesheet" type="text/css">
     <link th:href="@{/css/supplier-center/delivery.css(v=${version})}" rel="stylesheet" type="text/css">
 </head>
 <body>

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

@@ -4,7 +4,7 @@
 <head>
     <title>采美365网-中国美业全方位线上交易服务互动平台，做美业，上采美</title>
     <template th:replace="components/head-link"></template>
-    <link th:href="@{/css/supplier-center/tableft.css(v=${version})}" rel="stylesheet" type="text/css">
+    <link th:href="@{/css/base/center.css(v=${version})}" rel="stylesheet" type="text/css">
     <link th:href="@{/css/supplier-center/detail.css(v=${version})}" rel="stylesheet" type="text/css">
 </head>
 <body>
@@ -21,6 +21,9 @@
             <span>&gt;</span>
             <span>发货记录</span>
         </div>
+        <div v-else class="wrap_tittle mIcon" @click="opentittle">
+            <i class="mIcon open"></i><span style="margin-left: 25px;">我的订单</span>
+        </div>
         <div class="wrap clear">
             <!--左侧面包屑-->
             <div v-show="open">