维修列表h5

src/main/resources/static/css/user-center/repair/list.css

@@ -27,48 +27,47 @@ li{list-style:none}
     .container .empty{background-color:#FFF;}
     .container .section{width: 100%;height: 411px;padding-bottom: 16px;box-sizing: border-box;padding: 0 16px;background-color: #FFFFFF;box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.07);}
     .container .section .title{width: 100%;height: 54px;border-bottom: 1px solid #e2e7ef;}
-    .container .section .title .td{height: 54px;font-size: 14px;color:#627386;float: left;line-height:54px;text-align: left;}
-    .container .section .title .td.td-1{width:11%;}
-    .container .section .title .td.td-2{width:14%;text-align: center;}
-    .container .section .title .td.td-3{width:19%;text-align: center;}
-    .container .section .title .td.td-4{width:15%;text-align: center;}
-    .container .section .title .td.td-5{width:11%;text-align: center;}
-    .container .section .title .td.td-6{width:14%;text-align: center;}
-    .container .section .title .td.td-7{width:8%;text-align: center;}
-    .container .section .title .td.td-8{width:8%;text-align: center;}
-    .container .section .title .td.td-9{width:8%;text-align: center;}
     .container .section .content{width: 100%;height: auto;}
     .container .section .list{width: 100%;height: 44px;}
-    .container .section .list .td{height: 54px;font-size: 14px;color:#627386;float: left;line-height:54px;text-align: left;}
-    .container .section .list .td.td-1{width:11%;}
-    .container .section .list .td.td-2{width:14%;text-align: center;}
-    .container .section .list .td.td-3{width:19%;text-align: center;}
-    .container .section .list .td.td-4{width:15%;text-align: center;}
-    .container .section .list .td.td-5{width:11%;text-align: center;}
-    .container .section .list .td.td-6{width:14%;text-align: center;}
-    .container .section .list .td.td-7{width:8%;text-align: center;}
-    .container .section .list .td.td-8{width:8%;text-align: center;}
-    .container .section .list .td.td-8 a{text-decoration: underline;}
-    .container .section .list .td.td-8 .eva{color: #1890f9;}
+    .container .section .td{height: 54px;font-size: 14px;color:#627386;float: left;line-height:54px;text-align: left;}
+    .container .section .td.td-1{width:11%;}
+    .container .section .td.td-2{width:14%;text-align: center;}
+    .container .section .td.td-3{width:19%;text-align: center;}
+    .container .section .td.td-4{width:15%;text-align: center;}
+    .container .section .td.td-5{width:11%;text-align: center;}
+    .container .section .td.td-6{width:14%;text-align: center;}
+    .container .section .td.td-7{width:8%;text-align: center;}
+    .container .section .td.td-8{width:8%;text-align: center;}
+    .container .section .td.td-9{width:8%;text-align: center;}
+    .container .section .td.td-8 a{text-decoration: underline;}
+    .container .section .td.td-8 .eva{color: #1890f9;}
+    .container .section .td>span{display:none;}
 }
 
 /**
 * 移动端
 */
 @media screen and (max-width:768px){
-.header-bt{padding: 3.3vw}
-.search:nth-child(1){width: 93.4vw;height: 11.7vw;line-height: 11.7vw;border: .27vw solid rgba(184,191,202,.5);margin-bottom: 2.7vw;}
-.search input{height: -webkit-fill-available;width: 75vw;border: none;}
-.header-search>div .label{color: #627386;margin-left: 1.7vw;line-height: 8vw}
-input::placeholder{color: #627386}
-.search .select{height: 11.7vw;width:100%;border: none;color: #627386;border: .27vw solid rgba(184,191,202,.5)}
-.btn-server{width: 35.3vw;height: 11.2vw;line-height: 11.2vw;text-align: center;color: #e15616;border: .27vw solid #e15616;background: #ffe6dc;margin:2.7vw auto;display: block;}
-#orderDate .search-input{display: inline-block;}
-#orderDate{position: relative}
-.search-input input{width:39vw;height: 11.8vw;line-height: 11.8vw;padding-left: 2.7vw;border: .27vw solid rgba(184,191,202,.5);color: #627386;}
-.order-header .header-bt .search-time .search-main .line{margin:0 1.4vw;display: inline-block;height: 11.2vw;line-height: 11.2vw;}
-.mIcon.time:before{width: 20px;height: 20px;position: absolute;background-position: -352px -231px;right: 15px;top: 13px;}
-.search-time{margin-bottom: 2.7vw}
-.jindu .label{display: block}
+    .header-bt{padding:2.6vw 3.2vw;background: #FFF;}
+    .search:nth-child(1){width: 93.4vw;height: 11.7vw;line-height: 11.7vw;border: .27vw solid rgba(184,191,202,.5);margin-bottom: 2.7vw;}
+    .search input{height: -webkit-fill-available;width: 75vw;border: none;}
+    .header-search>div .label{color: #627386;margin-left: 1.7vw;line-height: 8vw}
+    input::placeholder{color: #627386}
+    .search .select{height: 11.7vw;width:100%;border: none;color: #627386;border: .27vw solid rgba(184,191,202,.5)}
+    .btn-server{width: 35.3vw;height: 11.2vw;line-height: 11.2vw;text-align: center;color: #e15616;border: .27vw solid #e15616;background: #ffe6dc;margin:2.7vw auto;display: block;}
+    #orderDate .search-input{display: inline-block;}
+    #orderDate{position: relative}
+    .search-input input{width:39vw;height: 11.8vw;line-height: 11.8vw;padding-left: 2.7vw;border: .27vw solid rgba(184,191,202,.5);color: #627386;}
+    .order-header .header-bt .search-time .search-main .line{margin:0 1.4vw;display: inline-block;height: 11.2vw;line-height: 11.2vw;}
+    .search-time{margin-bottom: 2.7vw}
+    .jindu .label{display: block}
+    .container .section .title{display:none;}
+    .container .section .content{color:#22272e;font-size:3.4vw;margin-bottom:2.6vw}
+    .container .section .content .list{background:#FFF;padding:1.5vw 3.2vw;margin-top:1.5vw;position:relative}
+    .container .section .td{line-height:5.4vw}
+    .container .section .td>span{color:#9aa5b5;font-size:3.2vw;width:100%}
+    .container .section .td.td-1{color:#e15616}
+    .container .section .td-8 a{width:22.4vw;height:9.6vw;line-height:9.6vw;text-align:center;color:#1890f9;background-color:#e0f1ff;border-radius:5vw;border:solid 1px #1890f9;position:absolute;bottom:3.2vw;right:3.2vw}
+
 }
 

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

@@ -32,7 +32,7 @@
                             </div>
                             <div class="search-time">
                                 <span class="label">提交日期：</span>
-                                <div class="search-main" id="orderDate">
+                                <div class="search-main mfbt" id="orderDate">
                                     <div class="search-input">
                                         <input type="text" v-model="listQuery.beginTime" placeholder="订单开始时间" class="input">
                                         <i class="icon mIcon time"></i>
@@ -76,13 +76,13 @@
                         </div>
                         <div class="content">
                             <div class="list" v-for="(item, index) in orderList" :key="index">
-                                <div class="td td-1">{{item.orderNo}}</div>
-                                <div class="td td-2">{{item.instrumentName}}</div>
-                                <div class="td td-3">{{item.manufacturer == null ? '- -' : item.manufacturer}}</div>
-                                <div class="td td-4">{{item.submitDate}}</div>
-                                <div class="td td-5">{{item.maintainerName == null ? '- -' : item.maintainerName}}</div>
-                                <div class="td td-6">{{item.maintainerMobile == null ? '- -' : item.maintainerMobile}}</div>
-                                <div class="td td-7" :style="{color: ColorFn(item.status)}">{{item.status | StateExp}}</div>
+                                <div class="td td-1"><span>订单编号：</span>{{item.orderNo}}</div>
+                                <div class="td td-2"><span>仪器名称：</span>{{item.instrumentName}}</div>
+                                <div class="td td-3"><span>生产厂家：</span>{{item.manufacturer == null ? '- -' : item.manufacturer}}</div>
+                                <div class="td td-4"><span>提交时间：</span>{{item.submitDate}}</div>
+                                <div class="td td-5"><span>维修商：</span>{{item.maintainerName == null ? '- -' : item.maintainerName}}</div>
+                                <div class="td td-6"><span>维修商联系方式：</span>{{item.maintainerMobile == null ? '- -' : item.maintainerMobile}}</div>
+                                <div class="td td-7" :style="{color: ColorFn(item.status)}"><span>进度：</span>{{item.status | StateExp}}</div>
                                 <div class="td td-8">
                                     <a class="eva"  href="javascript: void(0);" v-if="['2'].indexOf(item.status)!=-1" @click="detailsFn(item.id)">评价</a>
                                     <a class="evb" href="javascript: void(0);" v-if="['1','3'].indexOf(item.status)!=-1" @click="detailsFn(item.id)">详情</a>