last

.env

@@ -4,4 +4,4 @@ VITE_PORT = 3000
 # spa-title
 VITE_GLOB_APP_TITLE = 管理平台
 
-VITE_GLOB_BASE_URL = https://screen-test.zhousi.hdlkeji.com/
+VITE_GLOB_BASE_URL = http://screen.zhousi.hdlkeji.com/

.env.development

@@ -2,4 +2,4 @@
 NODE_ENV = development
 
 
-VITE_GLOB_BASE_URL = https://screen-test.zhousi.hdlkeji.com/
+VITE_GLOB_BASE_URL = http://screen.zhousi.hdlkeji.com/

src/assets/css/reset.css

@@ -14,7 +14,7 @@ time, mark, audio, video {
 	margin: 0;
 	padding: 0;
 	border: 0;
-	font: inherit;
+	/* font: inherit; */
 	font-size: 100%;
 	vertical-align: baseline;
 }

src/components/Index/indexHeaders.vue

@@ -294,11 +294,14 @@ const logout=()=>{
   top: 0px;
   z-index: 11111;
   flex-wrap: wrap;
+  .index-sort-lists:nth-child(3n+3) {
+    margin: 0;
+  }
   .index-sort-lists{
     cursor: pointer;
     float: left;
     width: 30%;
-    margin-right: 20px;
+    margin-right: 35px;
 
     // flex-grow:0
     .index-sort-name{
@@ -336,7 +339,7 @@ const logout=()=>{
 .index-center{
   padding: 0 260px;
   position: absolute;
-  //height:650px;
+  // height:650px;
   z-index: 111;
   .index-center-left{
     background-color: #393939;
@@ -501,6 +504,7 @@ const logout=()=>{
       cursor: pointer;
       position: relative;
       display: flex;
+      justify-content: center;
       height: 27px;
       padding: 10px 20px;
       background: #FFFFFF;

src/components/User/CentreNav.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="user-nav">
-        <div class="user-nav-list" @click="navIndexs=index;navTaps(index,item)" :class="navIndexs==index?'colorStyle':''" v-for="(item,index) in userNav">
+        <div class="user-nav-list" @click="navIndex=index;navTaps(index,item)" :class="navIndex==index?'colorStyle':''" v-for="(item,index) in userNav">
             {{item.name}}
         </div>
       <div>
@@ -11,7 +11,7 @@
 </template>
 
 <script setup>
-import { provide, reactive, ref } from 'vue'
+import { provide, reactive, ref,onMounted } from 'vue'
 import {defineProps} from "@vue/runtime-core";
 import FeedBack from '@/components/User/FeedBack.vue'
 import Scheme from '@/components/User/Scheme.vue'
@@ -32,19 +32,30 @@ const ChildsDom=ref(null)
 const ChildsDom1=ref(null)
 
 provide('navIndex', navIndex)
+onMounted(()=> {
+  navIndex.value = props.navIndexs
+})
+// onMounted('navIndex',props.navIndexs)
 provide('tcFlag',flag)
 import {rouseService} from "@/utils";
-
 const navTaps=(index,item)=>{
+  navIndex.value = index
   if(index===3){
+
+    // props.navIndexs = index
+    // navIndexs.value = index
     ChildsDom.value.feedTip()
     return
   }
   if(index===6){
+    // props.navIndexs = index
+
     ChildsDom1.value.feedTip()
     return
   }
   if(index===5){
+    // props.navIndexs = index
+
     rouseService()
     return
   }

src/components/User/Scheme.vue

@@ -3,29 +3,30 @@
     <el-dialog v-model="schemeFlag"  :show-close="true" align-center title="我的方案" style="width: 708px">
       <div class="scheme">
         <div class="scheme-tops">
-          <div class="scheme-name" style="flex: 0 0 150px;text-align: center">方案名称</div>
-          <div class="scheme-time" style="margin-left: 60px">
-            <div>创建时间</div>
-            <div class="sort-icon">
+          <div class="scheme-name" style="text-align: center">方案名称</div>
+          <div class="scheme-name1" style="text-align: center;">
+            创建时间
+            <!-- <div>创建时间</div> -->
+            <!-- <div class="sort-icon">
               <img src="http://screen-test.zhousi.hdlkeji.com/aksdbn/img/sort-icon.png">
-            </div>
+            </div> -->
           </div>
-          <div class="scheme-name">操作</div>
-          <div class="scheme-name" style="    text-align: right; flex: 0 0 50px;">分享</div>
+          <div class="scheme-name2">操作</div>
+          <div class="scheme-name3" style="    text-align: center;">分享</div>
         </div>
         <div class="scheme-content">
           <div class="scheme-list" v-for="(item,index) in schemeLists.arr">
-            <div class="scheme-text overflow1" style="flex: 0 0  150px;text-align: center">{{ item.name }}</div>
-            <div class="scheme-time">{{ item.createtime }}</div>
-            <div class="scheme-time scheme-flex" style="margin-right: 30px">
+            <div class="scheme-text overflow1" style="text-align: center">{{ item.name }}</div>
+            <div class="scheme-time" style="width: 30%">{{ item.createtime }}</div>
+            <div class="scheme-time scheme-flex" style="width: 40%;display: flex;justify-content: center;">
               <div @click.stop="routeTaps('/evaluateDetail',item.id)">查看方案</div>
               <div class="line"></div>
               <div @click="schemeShop(item)">使用方案</div>
               <div class="line"></div>
               <div @click="deletesTaps(item.id)">删除</div>
             </div>
-            <div class="scheme-time" @click="shares(item.id,item.name)">
-              <img src="http://screen-test.zhousi.hdlkeji.com/aksdbn/img/goods/evaluate-share.png">
+            <div class="scheme-time" style="width: 10%" @click="shares(item.id,item.name)">
+              <img src="http://screen-test.zhousi.hdlkeji.com/aksdbn/img/goods/evaluate-share.png" style="cursor:pointer">
             </div>
           </div>
           <div class="pages">
@@ -218,11 +219,11 @@ const programme_lists = () => {
     overflow-y: auto;
     .scheme-list{
       .scheme-text{
-        width:180px;
+        width:20%;
       }
       height: 76px;
       border-bottom: 1px solid #DDDDDD;
-      padding: 0 24px;
+      padding: 0 25px;
       line-height: 76px;
       display: flex;
       justify-content: space-between;
@@ -230,6 +231,7 @@ const programme_lists = () => {
         color: #4171B3;
         font-size: 14px;
         display: flex;
+        cursor: pointer;
         .line{
           background: #EEEEEE;
           width: 1px;
@@ -238,6 +240,7 @@ const programme_lists = () => {
         }
       }
       .scheme-time{
+        text-align: center;
         img{
           width: 24px;
           height: 24px;
@@ -259,11 +262,35 @@ const programme_lists = () => {
     .scheme-name{
       color: #666;
       font-size: 14px;
-      flex: 1;
+      // flex: 1;
+      width: 20%;
+      text-align: center;
+    }
+    .scheme-name1{
+      color: #666;
+      font-size: 14px;
+      // flex: 1;
+      width: 30%;
+      text-align: center;
+    }
+    .scheme-name2 {
+      color: #666;
+      font-size: 14px;
+      // flex: 1;
+      width: 40%;
+      text-align: center;
+    }
+    .scheme-name3 {
+      color: #666;
+      font-size: 14px;
+      // flex: 1;
+      width: 10%;
       text-align: center;
     }
     .scheme-time{
       display: flex;
+      width: 30%;
+      text-align: center;
       .sort-icon{
         img{
           width: 24px;

src/components/User/ShoppingCart.vue

@@ -15,7 +15,7 @@
 <!--      <div style="text-align: center">购物车页面</div>-->
       <div  v-for="(item,index) in shoppingList.arr.goods" :key="item.id">
           <div  class="flex-s" >
-            <div style="display: flex;border-right: 1px solid #f4f4f4">
+            <div style="display: flex;border-right: 1px solid #f4f4f4;width: 40%;">
               <div class="goods-img">
                 <img :src="item.goods.logo[0]">
               </div>
@@ -363,7 +363,8 @@ const pay=(index,item)=>{
   align-items: center;
   justify-content: center;
   border-right: 1px solid #f1f1f1;
-  padding: 0 20px;
+  // padding: 0 20px;
+  width: 20%;
 }
 .orderNo{
   font-size: 16px;
@@ -451,7 +452,7 @@ const pay=(index,item)=>{
   // }
   .flex-s{
     display: flex;
-    padding: 0 20px;
+    // padding: 0 20px;
     border-left: 1px solid #D7DBE0;
     border-right: 1px solid #D7DBE0;
     border-bottom: 1px solid #D7DBE0;
@@ -459,10 +460,10 @@ const pay=(index,item)=>{
     height: 120px;
     .shopping-right{
       cursor: pointer;
-      width:180px;
+      width:20%;
       display: flex;
       justify-content: center;
-      margin-left: 30px;
+      // margin-left: 30px;
       align-items: center;
       .buttons{
         width: 100px;
@@ -518,7 +519,7 @@ const pay=(index,item)=>{
       }
     }
     .goods-money{
-      width: 200px;
+      width: 20%;
       color: #333;
       font-size: 15px;
       //line-height: 140px;
@@ -542,7 +543,7 @@ const pay=(index,item)=>{
       line-height: 24px;
     }
     .goods-img{
-      padding: 10px 0;
+      padding: 10px 0 10px 20px;
       img{
         width: 100px;
         height: 100px;

src/view/evaluate/index.vue

@@ -59,7 +59,7 @@
                   <div>采购单价</div>
                   <div class="" style="color:#EA2813;margin-left: 10px">¥{{ item.amount }}</div>
                   <div style="margin-left: 20px">采购数量</div>
-                  <div style="display: flex;margin:1px 0 0 20px;">
+                  <div style="display: flex;margin:1px 0 0 20px;cursor: pointer;" >
                     <div class="add-icons" @click.stop="!disFlag?addNum(item):''" style="color: #333!important;" >+</div>
                     <el-input :disabled="disFlag" v-model="item.num" ></el-input>
                     <div class="del-icons" @click.stop="!disFlag?delNum(item):''" style="color: #333;margin-left: 20px" >-</div>
@@ -95,28 +95,29 @@
     <el-dialog v-model="schemeFlag"  :show-close="true" align-center title="我的方案" style="width: 708px">
       <div class="scheme">
         <div class="scheme-tops">
-          <div class="scheme-name" style="flex: 0 0 150px;text-align: center">方案名称</div>
-          <div class="scheme-time" style="margin-left: 50px">
-            <div>创建时间</div>
-            <div class="sort-icon">
+          <div class="scheme-name" style="width: 20%;text-align: center">方案名称</div>
+          <div class="scheme-time1" style="width: 30%;text-align: center;">
+            创建时间
+            <!-- <div>创建时间</div> -->
+            <!-- <div class="sort-icon">
               <img src="http://screen-test.zhousi.hdlkeji.com/aksdbn/img/sort-icon.png">
-            </div>
+            </div> -->
           </div>
-          <div class="scheme-name">操作</div>
-          <div class="scheme-name" style="    text-align: right; flex: 0 0 50px;">分享</div>
+          <div class="scheme-name2" style="width: 40%;text-align: center;">操作</div>
+          <div class="scheme-name3" style=" width: 10%;   text-align: center;">分享</div>
         </div>
         <div class="scheme-content">
           <div class="scheme-list" v-for="(item,index) in schemeLists.arr" :key="index">
-            <div class="scheme-text overflow1" style="flex: 0 0  150px;text-align: center">{{ item.name }}</div>
-            <div class="scheme-time" style="flex: 1;margin-left: 30px">{{ item.createtime }}</div>
-            <div class="scheme-time scheme-flex" style="margin-right: 30px">
+            <div class="scheme-text overflow1" style="width: 20%;text-align: center">{{ item.name }}</div>
+            <div class="scheme-time" style="width: 30%;text-align: center">{{ item.createtime }}</div>
+            <div class="scheme-time scheme-flex" style="width: 40%;text-align: center;display: flex;justify-content: center;">
               <div @click.stop="routeTaps('/evaluateDetail',item.id)">查看方案</div>
               <div class="line"></div>
               <div @click="schemeShop(item)">使用方案</div>
               <div class="line"></div>
               <div @click="deletesTaps(item.id)">删除</div>
             </div>
-            <div class="scheme-time" @click="shares(item.id,item.name)">
+            <div class="scheme-time" style="width: 10%;text-align: center" @click="shares(item.id,item.name)">
               <img src="http://screen-test.zhousi.hdlkeji.com/aksdbn/img/goods/evaluate-share.png">
             </div>
           </div>
@@ -1171,8 +1172,29 @@ const changeFatherClick = (index, item) => {
           margin: 30px 10px 0 10px;
         }
       }
+      .scheme-name1{
+      color: #666;
+      font-size: 14px;
+      // flex: 1;
+      width: 30%;
+      text-align: center;
+    }
+    .scheme-name2 {
+      color: #666;
+      font-size: 14px;
+      // flex: 1;
+      width: 40%;
+      text-align: center;
+    }
+    .scheme-name3 {
+      color: #666;
+      font-size: 14px;
+      // flex: 1;
+      width: 10%;
+      text-align: center;
+    }
       .scheme-time{
-
+cursor: pointer;
         img{
           width: 24px;
           height: 24px;
@@ -1197,8 +1219,31 @@ const changeFatherClick = (index, item) => {
       flex: 1;
       text-align: center;
     }
+    .scheme-name1{
+      color: #666;
+      font-size: 14px;
+      // flex: 1;
+      width: 30%;
+      text-align: center;
+    }
+    .scheme-name2 {
+      color: #666;
+      font-size: 14px;
+      // flex: 1;
+      width: 40%;
+      text-align: center;
+    }
+    .scheme-name3 {
+      color: #666;
+      font-size: 14px;
+      // flex: 1;
+      width: 10%;
+      text-align: center;
+    }
     .scheme-time{
       display: flex;
+cursor: pointer;
+
       .sort-icon{
         img{
           width: 24px;
@@ -1229,6 +1274,7 @@ const changeFatherClick = (index, item) => {
     border: 1px solid #D7DBE0;
     line-height: 20px;
     text-align: center;
+    cursor: pointer;
   }
   .sum-icons{
     width: 37px;
@@ -1238,6 +1284,8 @@ const changeFatherClick = (index, item) => {
     border: 1px solid #D7DBE0;
     line-height: 20px;
     text-align: center;
+    cursor: pointer;
+
   }
   .del-icons{
     width: 20px;
@@ -1247,6 +1295,7 @@ const changeFatherClick = (index, item) => {
     border: 1px solid #D7DBE0;
     line-height: 20px;
     text-align: center;
+    cursor: pointer;
   }
   .login-wrapper{
     background-color: #F7F8FA;
@@ -1306,6 +1355,7 @@ const changeFatherClick = (index, item) => {
               margin-left: 25px;
             }
             .shopping-button{
+              cursor: pointer;
               .share{
                 img{
                   width: 30px;
@@ -1399,6 +1449,7 @@ const changeFatherClick = (index, item) => {
             .manage{
               color: #4171B3;
               font-size: 16px;
+              cursor: pointer;
             }
             height: 70px;
             border-bottom: 1px solid #f4f4f4;

src/view/evaluateDetail/index.vue

@@ -466,6 +466,7 @@ const shareUpdateData = (data) => {
     color: #fff;
     font-size: 16px;
     text-align: center;
+    cursor: pointer;
   }
 }
 .content{

src/view/index/index.vue

@@ -834,6 +834,7 @@ const routesTap=(url,id)=>{
 .index-center{
   position: relative;
   padding: 0 260px;
+  // z-index: -1;
   .index-sort-content{
     //justify-content: left;
     //justify-content: left;
@@ -853,10 +854,13 @@ const routesTap=(url,id)=>{
     top: 0px;
     z-index: 11111;
     flex-wrap: wrap;
+    .index-sort-lists:nth-child(3n+3) {
+    margin: 0;
+  }
     .index-sort-lists{
       height: 200px;
       cursor: pointer;
-      margin-right: 20px;
+      margin-right: 37px;
         width: 30%;
 
 	  // flex-grow:0
@@ -1239,11 +1243,12 @@ const routesTap=(url,id)=>{
       width: 760px;
       height: 652px;
       //background-color: #333;
-      margin-left: 10px;
+      padding-left: 10px;
+      background: #fff;
 
     }
     .index-center-left{
-      background-color: #fff;
+      background-color: #393939;
       width: 1030px;
       height: 652px;
       display: inline-block;

src/view/login/Login.vue

@@ -361,8 +361,9 @@ const loginTap=()=>{
 const redirect=()=>{
   //如果url存在的话重定向到该页
   let redirect_url=JSON.parse(localStorage.getItem("redirectUrl"))
+
   if(redirect_url){
-    window.location.href=redirect_url
+    window.location.href= redirect_url.url
     localStorage.removeItem("redirectUrl")
   }else{
     window.location.href='/index'

src/view/user/afterSale/index.vue

@@ -24,10 +24,10 @@
 
 <!--        </div>-->
         <div class="tops">
-          <div class="tops-order-text" style="flex: 1 1 200px">订单信息</div>
-          <div class="tops-order-text">交易金额</div>
-          <div class="tops-order-text" >退款金额</div>
-          <div class="tops-order-text">操作</div>
+          <div class="tops-order-text">订单信息</div>
+          <div class="tops-order-text2">交易金额</div>
+          <div class="tops-order-text2" >退款金额</div>
+          <div class="tops-order-text2">操作</div>
         </div>
         <div class="news-no" v-if="newsList.arr==''">
           <img src="http://screen-test.zhousi.hdlkeji.com/aksdbn/img/news-no-bg3.png">
@@ -181,8 +181,15 @@ isLogin()
         font-size: 16px;
         line-height: 50px;
         .tops-order-text{
+          width: 40%;
           text-align: center;
-          flex: 1;
+          // flex: 1;
+          // padding: 0 20px;
+        }
+        .tops-order-text2{
+          width: 20%;
+          text-align: center;
+          // flex: 1;
         }
       }
       .collect-tops{
@@ -259,7 +266,7 @@ isLogin()
             line-height: 140px;
           }
           .order-money{
-            width: 200px;
+            width: 20%;
             font-size: 15px;
             border-right: 1px solid #f4f4f4;
             flex: 1;
@@ -280,9 +287,12 @@ isLogin()
           }
           .order-info{
             display: flex;
+            // justify-content: center;
+            align-items: center;
             border-right: 1px solid #f4f4f4;
-            width: 400px;
+            width: 40%;
             padding: 20px;
+            box-sizing: border-box;
             .order-img{
               img{
                 width: 100px;
@@ -293,7 +303,7 @@ isLogin()
               font-size: 15px;
               color: #333;
               margin-left: 10px;
-              margin-top: 30px;
+              // margin-top: 30px;
               line-height: 24px;
             }
           }

src/view/user/evaluate/index.vue

@@ -46,8 +46,10 @@
           <div class="list" v-for="item in evalList.arr">
             <div>
               <div class="list-tops">
-                <div class="list-time">{{detailTime(item.create_time)}}</div>
-                <div class="orderNo">订单号：{{item.orders.order_no}}</div>
+                <div class="money-top">
+                  <div class="list-time">{{detailTime(item.create_time)}}</div>
+                  <div class="orderNo">订单号：{{item.orders.order_no}}</div>
+                </div>
                 <div class="money-text">金额</div>
                 <div class="money-status">状态</div>
                 <div class="money-oper">操作</div>
@@ -271,9 +273,9 @@ const getEvalList=()=>{
               cursor: pointer;
             }
             .order-money{
-              width: 200px;
+              width: 20%;
               border-right: 1px solid #f4f4f4;
-              flex: 1;
+              // flex: 1;
               line-height: 140px;
               text-align: center;
               .order-button{
@@ -291,7 +293,8 @@ const getEvalList=()=>{
             .order-info{
               display: flex;
               border-right: 1px solid #f4f4f4;
-              width: 400px;
+              width: 40%;
+              box-sizing: border-box;
               padding: 20px;
               .order-img{
                 img{
@@ -314,7 +317,15 @@ const getEvalList=()=>{
             background: #F0F2F5;
             display: flex;
             line-height: 34px;
-            padding: 0 70px 0 20px;
+            padding: 0 0 0 0;
+            box-sizing: border-box;
+            .money-top {
+              width: 40%;
+              display: flex;
+            box-sizing: border-box;
+
+              padding-left: 20px;
+            }
             .list-time{
               color: #999;
               font-size: 14px;
@@ -326,17 +337,23 @@ const getEvalList=()=>{
             }
             .money-text{
               color: #333333;
-              margin-left: 120px;
+              text-align: center;
+              // margin-left: 120px;
               font-size: 16px;
+              width: 20%;
             }
             .money-status{
               color: #333333;
-              margin-left: 190px;
+              width: 20%;
+              text-align: center;
+              // margin-left: 190px;
               font-size: 16px;
             }
             .money-oper{
               color: #333333;
-              margin-left: 180px;
+              width: 20%;
+              text-align: center;
+              // margin-left: 180px;
               font-size: 16px;
             }
           }

src/view/user/invoice/index.vue

@@ -25,10 +25,10 @@
 
         </div>
         <div class="tops">
-          <div class="tops-order-text" style="flex:1 1 200px">订单详情</div>
-          <div class="tops-order-text">开票金额</div>
-          <div class="tops-order-text">发票类型</div>
-          <div class="tops-order-text" >操作</div>
+          <div class="tops-order-text">订单详情</div>
+          <div class="tops-order-text2">开票金额</div>
+          <div class="tops-order-text2">发票类型</div>
+          <div class="tops-order-text2" >操作</div>
         </div>
 
         <div class="news-no" v-if="userTax.arr==''">
@@ -40,7 +40,7 @@
           <div>
             <div class="list-tops">
               <div class="list-time">{{detailTime(item.create_time)}}</div>
-              <div class="orderNo">发票单号：{{ item.order_no }}</div>
+              <div class="orderNo">订单号：{{ item.order_no }}</div>
             </div>
             <div class="evaluate-goods">
               <div class="order-info">
@@ -160,7 +160,13 @@ isLogin()
         font-size: 16px;
         line-height: 50px;
         .tops-order-text{
-          flex: 1;
+          // flex: 1;
+          width: 40%;
+          text-align: center;
+        }
+        .tops-order-text2{
+          // flex: 1;
+          width: 20%;
           text-align: center;
         }
       }
@@ -237,7 +243,7 @@ isLogin()
             line-height: 140px;
           }
           .order-money{
-            width: 200px;
+            width: 20%;
             border-right: 1px solid #f4f4f4;
             flex: 1;
             line-height: 140px;
@@ -257,8 +263,9 @@ isLogin()
           .order-info{
             display: flex;
             border-right: 1px solid #f4f4f4;
-            width: 400px;
+            width: 40%;
             padding: 20px;
+            box-sizing: border-box;
             .order-img{
               img{
                 width: 100px;

src/view/user/order/afterSale/index.vue

@@ -144,8 +144,8 @@
         <div class="goods-content">
           <el-form ref="loginFormRef" :model="userFormState" :rules="rules" >
             <div class="goods-views">
-              <div><span>*</span>申请售后：</div>
-              <el-dropdown trigger="click" @command="handleCommand" @click="handleClick" style="margin:0px 0 0 80px">
+              <div class="label"><span>*</span>申请售后：</div>
+              <el-dropdown trigger="click" @command="handleCommand" @click="handleClick">
                 <el-button type="primary">
                   {{returnText}}<el-icon class="el-icon--right"><arrow-down /></el-icon>
                 </el-button>
@@ -162,7 +162,7 @@
               </el-dropdown>
             </div>
             <div class="goods-views">
-              <div><span>*</span>商品数量：</div>
+              <div class="label"><span>*</span>商品数量：</div>
               <div class="goods-right lefts">
                 <el-form-item prop="num" :rules="rules.num">
                   <el-input-number @input="getUserNum" @blur="getUserBlur" v-model="userFormState.num" :min="0" :max="parseInt(maxNum)"  />
@@ -170,7 +170,7 @@
               </div>
             </div>
             <div class="goods-views">
-              <div><span>*</span>安装数量：</div>
+              <div class="label"><span>*</span>安装数量：</div>
               <div class="goods-right lefts">
                 <el-form-item prop="num" :rules="rules.num">
                   <el-input-number @input="getUserNumInstall" @blur="getUserBlur" v-model="userFormState.num_install" :min="0" :max="parseInt(maxNumInstall)"  />
@@ -178,20 +178,20 @@
               </div>
             </div>
             <div class="goods-views" v-if="!changeFlag">
-              <div><span>*</span>预估退款金额：</div>
-              <div class="goods-right" style="margin-left: 50px">
+              <div class="label"><span>*</span>预估退款金额：</div>
+              <div class="goods-right">
                 <div style="height: 20px;font-size: 18px;color: #333">¥{{ returnMoney }}</div>
                 <div style="height: 40px;color: #999;font-size: 14px">注：价格仅供参考，最终退款金额以实际为准</div>
               </div>
             </div>
             <div v-if="checkFlag_s">
               <div style="display:flex; align-items:center">
-                <div><span style="color: red">*</span>取件信息：</div>
+                <div class="label"><span style="color: red">*</span>取件信息：</div>
                 <div class="color-s lefts" style="padding: 10px;" v-if="user_address_flag">
                   {{mineAddress}}
                 </div>
               </div>
-              <div style="display: flex;margin: 30px 0 30px 160px;cursor: pointer">
+              <div class="adr" style="display: flex;cursor: pointer">
                 <div @click="addressFlags=true" style="color: #999;font-size: 16px;margin-top: 15px">新增地址</div>
                 <div class="order-button" style="margin: 0 0 0 30px;" @click="selectAddress">选择收货地址</div>
               </div>
@@ -199,8 +199,8 @@
             <div>
               <div class="goods-views" v-if="returnKey!='' &&returnKey!=1 &&returnKey!=4">
 
-                <div><span>*</span>退货方式：</div>
-                <el-dropdown trigger="click" @command="handleCommand1" @click="handleClick" style="margin:0px 0 0 80px">
+                <div class="label"><span>*</span>退货方式：</div>
+                <el-dropdown trigger="click" @command="handleCommand1" @click="handleClick">
                   <el-button type="primary">
                     {{returnText1}}<el-icon class="el-icon--right"><arrow-down /></el-icon>
                   </el-button>
@@ -215,8 +215,8 @@
                 </el-dropdown>
               </div>
               <div class="goods-views">
-                <div><span>*</span>售后原因：</div>
-                <el-dropdown trigger="click" @command="handleCommand2" @click="handleClick" style="margin:0px 0 0 80px">
+                <div class="label"><span>*</span>售后原因：</div>
+                <el-dropdown trigger="click" @command="handleCommand2" @click="handleClick">
                   <el-button type="primary">
                     {{returnText2}}<el-icon class="el-icon--right"><arrow-down /></el-icon>
                   </el-button>
@@ -234,27 +234,27 @@
             </div>
             <div v-if="vxFlags">
               <div class="goods-views" style="height: 40px;">
-                <div><span>*</span>维修订单号：</div>
-                <div class="goods-right lefts" style="margin-left: 65px!important;">
+                <div class="label"><span>*</span>维修订单号：</div>
+                <div class="goods-right lefts" >
                   <el-form-item prop="order" :rules="rules.order">
                     <el-input v-model="userFormState.order"></el-input>
                   </el-form-item>
                 </div>
               </div>
               <div class="goods-views">
-                <div><span>*</span>维修单链接：</div>
-                <div @click="goodsTaps(lists.arr.req_order_goods.id)" style="color: #409EFF;border-bottom: 1px solid #409EFF;height: 30px;margin-left: 65px;">产品维修单</div>
+                <div class="label"><span>*</span>维修单链接：</div>
+                <div @click="goodsTaps(lists.arr.req_order_goods.id)" style="color: #409EFF;border-bottom: 1px solid #409EFF;height: 30px;">产品维修单</div>
                 <div style="color: #EA2813;font-size: 14px;margin-left: 5px;">￥{{lists.arr.req_order_goods.amount}}</div>
               </div>
             </div>
 
 
             <div class="goods-views">
-              <div><span>*</span>备注：</div>
+              <div class="label"><span>*</span>备注：</div>
               <div class="goods-right" >
                 <el-form-item  prop="reason2" :rules="rules.reason1">
                   <el-input
-                      style="margin-left: 58px;"
+                      
                       v-model.trim="userFormState.reason2"
                       :rows="4"
                       type="textarea"
@@ -522,8 +522,9 @@
         <div class="order-lists" v-for="(item,index) in order.orders.info ">
           <div class="order-img">
             <img :src="item.logo" alt="">
+            <div class="order-name overflow2" style="margin-left: 20px">{{item.goods_name}} {{item.sku_name}}</div>
+
           </div>
-          <div class="order-name overflow2" style="margin-left: 20px">{{item.goods_name}} {{item.sku_name}}</div>
           <div class="heights" style="">
 
             ¥{{ item.amount }}
@@ -1440,7 +1441,7 @@ order_refund_s({order_info_id	:url.id}).then((res)=>{
   text-align: center;
   border-right: 1px solid #f4f4f4;
   height: 150px;
-  width: 140px;
+  width: 10%;
   font-size: 15px;
 }
 .cancel_text {
@@ -1454,41 +1455,49 @@ order_refund_s({order_info_id	:url.id}).then((res)=>{
   border-radius: 2px;
   border: 1px solid #D7DBE0;
   line-height: 50px;
-  padding: 0 0 0 60px;
+  padding: 0 20px 0;
   justify-content: space-between;
+  text-align: center;
   div:nth-child(1){
-    flex:0 0 310px;
+    // flex:0 0 310px;
+    width: 30%;
     //flex: 1;
   }
   div:nth-child(2){
-    flex: 0 0 100px;
+    // flex: 0 0 100px;
     text-align: center;
-    margin-left:50px;
+    // margin-left:50px;
+    width: 10%;
   }
   div:nth-child(3){
-    flex: 0 0 140px;
+    width: 10%;
+    // flex: 0 0 140px;
     text-align: center;
 
   }
   div:nth-child(4){
-    flex: 0 0 100px;
+    width: 10%;
+    // flex: 0 0 100px;
     text-align: center;
-    margin-left: 0;
+    // margin-left: 0;
   }
   div:nth-child(5){
-    flex: 0 0 130px;
-    text-align: left;
-    margin-left: 30px;
+    width: 10%;
+    // flex: 0 0 130px;
+    text-align: center;
+    // margin-left: 30px;
   }
   div:nth-child(6){
-    flex: 0 0 120px;
-    margin-right: 80px;
-    text-align: left;
+    width: 10%;
+    // flex: 0 0 120px;
+    // margin-right: 80px;
+    text-align: center;
   }
   div:nth-child(7){
-    flex: 0 0 95px;
-    text-align: left;
-    margin-right:40px;
+    // flex: 0 0 95px;
+    text-align: center;
+    width: 20%;
+    // margin-right:40px;
   }
 }
 .logiFlexs{
@@ -1583,7 +1592,13 @@ order_refund_s({order_info_id	:url.id}).then((res)=>{
   .goods-content{
     padding: 40px 20px;
     .lefts{
-      margin-left:80px!important;
+      // margin-left:80px!important;
+    }
+    .adr {
+      margin: 30px 160px;
+    }
+    .label {
+      width: 20%;
     }
     .goods-views{
       display: flex;
@@ -1594,7 +1609,7 @@ order_refund_s({order_info_id	:url.id}).then((res)=>{
         color: #E1251B;
       }
       .goods-right{
-        margin-left: 50px;
+        // margin-left: 50px;
         .box{
           width: 79px;
           height: 24px;
@@ -1650,8 +1665,13 @@ order_refund_s({order_info_id	:url.id}).then((res)=>{
 
 
       .order-img{
+        width: 30%;
         display: flex;
         align-items: center;
+        // justify-content: center;
+        border-right: 1px solid #f4f4f4;
+        padding: 0 20px;
+        box-sizing: border-box;
         img{
           width: 100px;
           height: 100px;
@@ -1661,13 +1681,13 @@ order_refund_s({order_info_id	:url.id}).then((res)=>{
       .order-name{
         color: #333;
         font-size: 15px;
-        border-right: 1px solid #f4f4f4;
-        width: 260px;
+        // border-right: 1px solid #f4f4f4;
+        // width: 260px;
         margin-left: 10px;
         line-height: 30px;
         padding: 45px 0;
         height: 30px;
-        padding-right: 20px;
+        // padding-right: 20px;
       }
       .order-money{
         font-size: 15px;

src/view/user/order/detail/index.vue

@@ -95,7 +95,7 @@
       </div>
     </el-dialog>
     <el-dialog v-model="xyFlag" :show-close="true" title="换货维修售后协议" >
-      <p class="contents" v-html="xyText"></p>
+      <div class="contents" v-html="xyText"></div>
       <div class="button-s" @click="xyFlag=false;checkFlags=true">
         我已阅读并同意
       </div>
@@ -109,8 +109,8 @@
         <div class="goods-content">
           <el-form ref="loginFormRef" :model="userFormState" :rules="rules" >
           <div class="goods-views">
-            <div><span>*</span>申请售后：</div>
-            <el-dropdown trigger="click" @command="handleCommand" @click="handleClick" style="margin:0px 0 0 80px">
+            <div class="label"><span>*</span>申请售后：</div>
+            <el-dropdown trigger="click" @command="handleCommand" @click="handleClick">
               <el-button type="primary">
                 {{returnText}}<el-icon class="el-icon--right"><arrow-down /></el-icon>
               </el-button>
@@ -127,7 +127,7 @@
             </el-dropdown>
           </div>
           <div class="goods-views">
-            <div><span>*</span>商品数量：</div>
+            <div class="label"><span>*</span>商品数量：</div>
             <div class="goods-right lefts">
               <el-form-item prop="num" :rules="rules.num">
                 <el-input-number @input="getUserNum" @blur="getUserBlur" v-model="userFormState.num" :min="0" :max="parseInt(maxNum)"  />
@@ -135,7 +135,7 @@
             </div>
           </div>
             <div class="goods-views">
-              <div><span>*</span>安装数量：</div>
+              <div class="label"><span>*</span>安装数量：</div>
               <div class="goods-right lefts">
                 <el-form-item prop="num" :rules="rules.num">
                   <el-input-number @input="getUserNumInstall" @blur="getUserBlur" v-model="userFormState.num_install" :min="0" :max="parseInt(maxNumInstall)"  />
@@ -143,20 +143,20 @@
               </div>
             </div>
           <div class="goods-views" v-if="!changeFlag">
-            <div><span>*</span>预估退款金额：</div>
+            <div class="label"><span>*</span>预估退款金额：</div>
             <div class="goods-right">
               <div style="height: 20px;font-size: 18px;color: #333">¥{{ returnMoney }}</div>
               <div style="height: 40px;color: #999;font-size: 14px">注：价格仅供参考，最终退款金额以实际为准</div>
             </div>
           </div>
             <div v-if="checkFlag_s">
-              <div style="display:flex; align-items:center">
-                <div><span style="color: red">*</span>取件信息：</div>
-                <div class="color-s lefts" style="padding: 10px;" v-if="user_address_flag">
+              <div class="goods-views" style="display:flex; align-items:center">
+                <div class="label"><span style="color: red">*</span>取件信息：</div>
+                <div class="color-s" style="padding: 10px;" v-if="user_address_flag">
                   {{mineAddress}}
                 </div>
               </div>
-              <div style="display: flex;margin: 30px 0 30px 160px;cursor: pointer">
+              <div class="adr" style="display: flex;cursor: pointer">
                 <div @click="addressFlags=true" style="color: #999;font-size: 16px;margin-top: 15px">新增地址</div>
                 <div class="order-button" style="margin: 0 0 0 30px;" @click="selectAddress">选择收货地址</div>
               </div>
@@ -164,8 +164,8 @@
 
           <div v-if="order.status>=5">
             <div class="goods-views" v-if="returnKey!='' &&returnKey!=1 &&returnKey!=4 && flags">
-			    <div><span>*</span>退货方式：</div>
-			    <el-dropdown trigger="click" @command="handleCommand1" @click="handleClick" style="margin:0px 0 0 80px">
+			    <div class="label"><span>*</span>退货方式：</div>
+			    <el-dropdown trigger="click" @command="handleCommand1" @click="handleClick">
 			      <el-button type="primary">
 			        {{returnText1}}<el-icon class="el-icon--right"><arrow-down /></el-icon>
 			      </el-button>
@@ -181,8 +181,8 @@
 			    </el-dropdown>
 			  </div>
 			  <div class="goods-views">
-			    <div><span>*</span>售后原因：</div>
-			    <el-dropdown trigger="click" @command="handleCommand2" @click="handleClick" style="margin:0px 0 0 80px">
+			    <div class="label"><span>*</span>售后原因：</div>
+			    <el-dropdown trigger="click" @command="handleCommand2" @click="handleClick">
 			      <el-button type="primary">
 			        {{returnText2}}<el-icon class="el-icon--right"><arrow-down /></el-icon>
 			      </el-button>
@@ -202,7 +202,7 @@
 <!--            <div v-if="lists.arr.refund_config">-->
 
             <div class="goods-views" style="height: 40px;">
-			    <div><span>*</span>维修订单号：</div>
+			    <div class="label"><span>*</span>维修订单号：</div>
 			   <div class="goods-right lefts" style="margin-left: 65px!important;">
 			     <el-form-item prop="order" :rules="rules.order">
 			       <el-input v-model="userFormState.order"></el-input>
@@ -210,7 +210,7 @@
 			   </div>
 			  </div>
 			  <div class="goods-views">
-			    <div><span>*</span>维修单链接：</div>
+			    <div class="label"><span>*</span>维修单链接：</div>
 			    <div @click="goodsTaps(lists.arr.req_order_goods.id)" style="color: #409EFF;border-bottom: 1px solid #409EFF;height: 30px;margin-left: 65px;">产品维修单</div>
 			  			<div style="color: #EA2813;font-size: 14px;margin-left: 5px;">￥{{lists.arr.req_order_goods.amount}}</div>
 			  </div>
@@ -218,11 +218,11 @@
 
 
           <div class="goods-views">
-            <div><span>*</span>备注：</div>
+            <div class="label"><span>*</span>备注：</div>
             <div class="goods-right" >
               <el-form-item  prop="reason2" :rules="rules.reason1">
                 <el-input
-				style="margin-left: 58px;"
+				
                     v-model.trim="userFormState.reason2"
                     :rows="4"
                     type="textarea"
@@ -239,7 +239,7 @@
               <img v-else style="width: 18px;height: 18px;margin-right: 10px" src="http://screen-test.zhousi.hdlkeji.com/aksdbn/img/goods/check.png">
 
               <div style="margin-top: 2px">
-                我已阅读并同意<span style="color: #409eff">换货维修协议</span>
+                我已阅读并同意<span style="color: #409eff;cursor: pointer;">换货维修协议</span>
               </div>
             </div>
           <div class="order-button" @click="submits">提交</div>
@@ -339,8 +339,8 @@
         <div class="order-lists" v-for="(item,index) in order.info " :key="index">
           <div class="order-img">
             <img :src="item.logo" alt="">
+            <div class="order-name overflow2" style="margin-left: 20px">{{item.goods_name}} {{item.sku_name}}</div>
           </div>
-          <div class="order-name overflow2" style="margin-left: 20px">{{item.goods_name}} {{item.sku_name}}</div>
           <div class="heights" style="">
 
             ¥{{item.amount}}
@@ -366,7 +366,7 @@
           </div>
           <div class="order-button" v-if="(order.status==5 || order.status==10 ||
 		  order.status==20 )&& (item.refund==null ||item.refund.refund_status==400
-		  )" @click="returnOrder(item)" style="margin:50px auto;font-size:12px">
+		  )" @click="returnOrder(item)">
             申请售后
           </div>
           <div v-if="item.refund!=null && item.is_vrd==true &&  (
@@ -1127,7 +1127,7 @@ orderDetail({id:url.id}).then((res)=>{
   border-radius: 2px;
   border: 1px solid #CECECE;
   padding: 0 20px;
-  margin-left: 50px;
+  // margin-left: 50px;
 }
 .address-content{
   padding: 0 70px;
@@ -1179,7 +1179,7 @@ orderDetail({id:url.id}).then((res)=>{
   text-align: center;
   border-right: 1px solid #f4f4f4;
   height: 150px;
-  width: 140px;
+  width: 10%;
   font-size: 15px;
 }
 .shopping-title{
@@ -1189,41 +1189,55 @@ orderDetail({id:url.id}).then((res)=>{
   border-radius: 2px;
   border: 1px solid #D7DBE0;
   line-height: 50px;
-  padding: 0 0 0 60px;
+  padding: 0 20px 0;
   justify-content: space-between;
+  text-align: center;
+
   div:nth-child(1){
-    flex:0 0 310px;
+    // flex:0 0 310px;
     //flex: 1;
+    width: 30%;
   }
   div:nth-child(2){
-    flex: 0 0 100px;
+    // flex: 0 0 100px;
     text-align: center;
-    margin-left:50px;
+    // margin-left:50px;
+    width: 10%;
   }
   div:nth-child(3){
-    flex: 0 0 140px;
+    width: 10%;
+
+    // flex: 0 0 140px;
     text-align: center;
 
   }
   div:nth-child(4){
-    flex: 0 0 100px;
+    width: 10%;
+
+    // flex: 0 0 100px;
     text-align: center;
-    margin-left: 0;
+    // margin-left: 0;
   }
   div:nth-child(5){
-    flex: 0 0 130px;
-    text-align: left;
-    margin-left: 30px;
+    width: 10%;
+
+    // flex: 0 0 130px;
+    text-align: center;
+    // margin-left: 30px;
   }
   div:nth-child(6){
-    flex: 0 0 120px;
-    margin-right: 80px;
-    text-align: left;
+    width: 10%;
+
+    // flex: 0 0 120px;
+    // margin-right: 80px;
+    text-align: center;
   }
   div:nth-child(7){
-    flex: 0 0 95px;
-    text-align: left;
-    margin-right:40px;
+    width: 20%;
+
+    // flex: 0 0 95px;
+    text-align: center;
+    // margin-right:40px;
   }
 }
 	.logiFlexs{
@@ -1275,9 +1289,10 @@ orderDetail({id:url.id}).then((res)=>{
   line-height: 40px;
   text-align: center;
   color: #fff;
-  font-size: 16px;
+  font-size: 12px;
+  cursor: pointer;
   //margin-left: 15px;
-  margin: 0 auto;
+  margin: 50px auto;
 }
 .flexs{
   display: flex;
@@ -1309,18 +1324,24 @@ orderDetail({id:url.id}).then((res)=>{
   .goods-content{
     padding: 40px 20px;
     .lefts{
-      margin-left:80px!important;
+      // margin-left:80px!important;
+    }
+    .adr {
+      margin: 30px 160px;
     }
     .goods-views{
       display: flex;
       margin-bottom: 10px;
       line-height: 40px;
+      .label {
+        width: 20%;
+      }
 	  // height: 50px;
       span{
         color: #E1251B;
       }
       .goods-right{
-        margin-left: 50px;
+        // margin-left: 50px;
         .box{
           width: 79px;
           height: 24px;
@@ -1373,11 +1394,17 @@ orderDetail({id:url.id}).then((res)=>{
       padding: 0 20px;
       line-height:140px;
       background-color: #fff;
-
+      text-align: center;
 
       .order-img{
+        width: 30%;
         display: flex;
         align-items: center;
+        // justify-content: center;
+        padding: 20px;
+        box-sizing: border-box;
+        border-right: 1px solid #f4f4f4;
+
         img{
           width: 100px;
           height: 100px;
@@ -1387,13 +1414,13 @@ orderDetail({id:url.id}).then((res)=>{
       .order-name{
         color: #333;
         font-size: 15px;
-        border-right: 1px solid #f4f4f4;
-        width: 260px;
+        // border-right: 1px solid #f4f4f4;
+        // width: 260px;
         margin-left: 10px;
-        line-height: 30px;
+        line-height: 1;
         padding: 45px 0;
         height: 30px;
-        padding-right: 20px;
+        // padding-right: 20px;
       }
       .order-money{
         width: 180px;
@@ -1490,5 +1517,6 @@ orderDetail({id:url.id}).then((res)=>{
       height: 30px;
     }
   }
+  
 }
 </style>

src/view/user/order/list/index.vue

@@ -34,13 +34,13 @@
 
         </div>
         <div class="tops">
-          <div class="tops-order-text" style="flex: 1 1 220px;">订单详情</div>
-          <div class="tops-order-text">金额</div>
-          <div class="tops-order-text">
+          <div class="tops-order-text">订单详情</div>
+          <div class="tops-order-text2">金额</div>
+          <div class="tops-order-text2">
             <span>状态</span>
             <img src="http://screen-test.zhousi.hdlkeji.com/aksdbn/img/screen-icon.png" width="12" style="margin-left: 5px">
           </div>
-          <div class="tops-order-text">操作</div>
+          <div class="tops-order-text2">操作</div>
         </div>
         <div class="news-no" v-if="newsList.arr==''">
           <img src="http://screen-test.zhousi.hdlkeji.com/aksdbn/img/news-no-bg6.png">
@@ -608,9 +608,14 @@ isLogin()
         font-size: 16px;
         line-height: 50px;
 		.tops-order-text{
-			flex: 1;
+			width: 40%;
 			text-align: center;
+      padding: 0 20px;
 		}
+    .tops-order-text2 {
+      width: 20%;
+      text-align: center;
+    }
       }
       .collect-tops{
         display: flex;
@@ -693,10 +698,10 @@ isLogin()
             cursor: pointer;
           }
           .order-money{
-            width: 200px;
+            width: 20%;
             font-size: 15px;
             border-right: 1px solid #f4f4f4;
-            flex: 1;
+            // flex: 1;
             line-height: 140px;
             text-align: center;
             .size{
@@ -716,10 +721,14 @@ isLogin()
             }
           }
           .order-info{
+
             display: flex;
-            border-right: 1px solid #f4f4f4;
-            width: 400px;
+            // justify-content: center;
             padding: 20px;
+            align-items: center;
+            border-right: 1px solid #f4f4f4;
+            width: 40%;
+            // padding: 20px;
             .order-img{
               img{
                 width: 100px;
@@ -730,7 +739,7 @@ isLogin()
               font-size: 15px;
               color: #333;
               margin-left: 10px;
-              margin-top: 30px;
+              // margin-top: 30px;
               height: 37px;
             }
           }

src/view/user/order/pay/index.vue

@@ -240,8 +240,8 @@
             </div>
             <div class="shopping-contents">
               <div class="shopping-lists" v-for="(item,index) in payOrder.arr.info" :key="index">
-                <div class="img" style="margin-left: 40px">
-                  <img :src="item.goods.logo[0]" style="margin: 5px 0">
+                <div class="img">
+                  <img :src="item.goods.logo[0]">
                   <div class="name overflow1">{{item.goods.name}};
 
                     {{item.sku.name}}
@@ -259,7 +259,7 @@
                 <div class="price">
                   {{item.num_install}}
                 </div>
-                <div class="price" style="color: rgb(234, 40, 19);width: 200px">
+                <div class="price" style="color: rgb(234, 40, 19);">
                   ¥{{item.amount_total}}
                 </div>
 <!--                <div class="oper" @click="delGoods(index,item)">-->
@@ -606,14 +606,20 @@ const payOrder=reactive({
   arr:[]
 })
 const orderInfo=()=>{
-  let url=getUrlParams2(window.location.href);
+  let url = {
+    url: '',
+    id: ''
+  }
+  url.id=getUrlParams2(window.location.href);
+  url.url = window.location.href
+  // let url=window.location.href
   //如果用户没登录的时候记录地址
   if(localStorage.getItem("USER__INFO__")){
   }else{
     localStorage.setItem("redirectUrl",JSON.stringify(url))
-
+    
   }
-  orderDetail({"id":url.id}).then((res)=>{
+  orderDetail({"id":url.id.id}).then((res)=>{
     payOrder.arr=res.data
 	 pay_order(res.data.id,0);
   })
@@ -1178,14 +1184,17 @@ isLogin()
         }
         .shopping{
           .shopping-contents{
+           
             .shopping-lists{
+              box-sizing: border-box;
+            padding: 0 20px;
               background-color: #fff;
               display: flex;
               height: 110px;
               width: 100%;
               border-bottom: 1px solid #f4f4f4;
               .price{
-                width: 170px;
+                width: 15%;
                 text-align: center;
                 line-height: 110px;
                 border-right: 1px solid #f4f4f4;
@@ -1218,14 +1227,17 @@ isLogin()
 
               }
               .img{
-                width: 500px;
+                width: 25%;
                 border-right: 1px solid #f4f4f4;
                 display: flex;
+                align-items: center;
+                padding: 20px;
+                box-sizing: border-box;
                 .name{
                   color: #333;
                   font-size: 15px;
                   padding:35px 20px;
-                  width: 300px;
+                  // width: 300px;
                   height: 40px;
                   line-height: 40px;
                 }
@@ -1246,7 +1258,7 @@ isLogin()
                 img{
                   width: 100px;
                   height: 100px;
-                  margin: 15px 0;
+                  // margin: 15px 0;
                 }
               }
             }
@@ -1258,42 +1270,51 @@ isLogin()
             border-radius: 2px;
             border: 1px solid #D7DBE0;
             line-height: 50px;
-            padding: 0 0 0 60px;
+            padding: 0 20px 0;
+            box-sizing: border-box;
             justify-content: space-between;
             div:nth-child(1){
-              flex:0 0 420px;
+              text-align: center;
+              width: 25%;
               //flex: 1;
             }
             div:nth-child(2){
-              flex: 0 0 130px;
+              // flex: 0 0 130px;
+              width: 15%;
               text-align: center;
-              margin-left: 0;
+              // margin-left: 0;
             }
             div:nth-child(3){
-              flex: 0 0 100px;
+              width: 15%;
+              // flex: 0 0 100px;/
               text-align: center;
 
             }
             div:nth-child(4){
-              flex: 0 0 120px;
+              width: 15%;
+              // flex: 0 0 120px;
               text-align: center;
-              margin-right: 20px;
+              // margin-right: 20px;
             }
             div:nth-child(5){
-              flex: 0 0 130px;
-              text-align: left;
+              width: 15%;
+              // flex: 0 0 130px;
+              text-align: center;
             }
             div:nth-child(6){
-              flex: 0 0 120px;
-              text-align: left;
+              width: 15%;
+              // flex: 0 0 120px;
+              text-align: center;
             }
             div:nth-child(7){
-              flex: 0 0 120px;
-              text-align: left;
+              width: 10%;
+              // flex: 0 0 120px;
+              text-align: center;
             }
             div:nth-child(8){
-              flex: 0 0 150px;
-              text-align: left;
+              width: 10%;
+              // flex: 0 0 150px;
+              text-align: center;
             }
           }
         }

src/view/user/order/submit/index.vue

@@ -733,20 +733,20 @@
                   <div class="add del" @click="del(index,item)">-</div>
               </div>
 
-              <div class="sum" style="width: 200px" v-if="item.goods.is_ni!=0">
+              <div class="sum" v-if="item.goods.is_ni!=0">
                 <div class="add" @click="add_install(index,item)">+</div>
                 <div>
                   <el-input type="number" @blur="numInstallFocus(index)" v-model="item.num_install"></el-input>
                 </div>
                 <div class="add del" @click="del_install(index,item)">-</div>
               </div>
-              <div class="sum" style="width: 200px" v-else>
+              <div class="sum" v-else>
                 0
               </div>
               <div class="price" style="color: rgb(234, 40, 19);">
                 ¥{{item.amount_total}}
               </div>
-              <div  class="sum" style="width: 200px">{{dates(item.goods.send_dely_date)}}</div>
+              <div  class="sum">{{dates(item.goods.send_dely_date)}}</div>
               <div class="oper" @click="delGoods(index,item)">
                 <img src="@/assets/img/del-goods.png" alt="">
               </div>
@@ -2199,7 +2199,7 @@ isLogin()
               width: 100%;
               border-bottom: 1px solid #f4f4f4;
               .price{
-                width: 200px;
+                width: 10%;
                 // text-align: center;
                 line-height: 150px;
                 border-right: 1px solid #f4f4f4;
@@ -2210,7 +2210,7 @@ isLogin()
               }
               .oper{
                 cursor: pointer;
-                width: 200px;
+                width: 10%;
                 display: flex;
                 align-items: center;
                 justify-content: center;
@@ -2221,7 +2221,7 @@ isLogin()
                 }
               }
               .sum{
-                width: 200px;
+                width: 10%;
                 text-align: center;
                 border-right: 1px solid #f4f4f4;
                 display: flex;
@@ -2244,7 +2244,7 @@ isLogin()
 
               }
               .img{
-                width: 400px;
+                width: 30%;
                 border-right: 1px solid #f4f4f4;
                 display: flex;
                 .name{
@@ -2282,45 +2282,55 @@ isLogin()
             border-radius: 2px;
             border: 1px solid #D7DBE0;
             line-height: 50px;
-            padding: 0 0 0 60px;
+            // padding: 0 20px 0;
+            box-sizing: border-box;
             justify-content: space-between;
             white-space: nowrap;
             div:nth-child(1){
-             flex:0 0 310px;
+              width: 30%;
+            //  flex:0 0 310px;
+            text-align: center;
               //flex: 1;
             }
             div:nth-child(2){
-             flex: 0 0 120px;
+            //  flex: 0 0 120px;
+            width: 10%;
               // margin-left: 20px;
               text-align: center;
             }
             div:nth-child(3){
-              flex: 0 0 85px;
+            width: 10%;
+              // flex: 0 0 85px;
               text-align: center;
               // margin-left: 20px;
             }
             div:nth-child(4){
-              flex: 0 0 120px;
+            width: 10%;
+              // flex: 0 0 120px;
               text-align: center;
               //margin-right: 40px;
             }
             div:nth-child(5){
-              flex: 0 0 100px;
+            width: 10%;
+              // flex: 0 0 100px;
               text-align: center;
             }
             div:nth-child(6){
-              flex: 0 0 90px;
-              text-align: left;
-              margin-left:30px;
+            width: 10%;
+              // flex: 0 0 90px;
+              text-align: center;
+              // margin-left:30px;
             }
             div:nth-child(7){
-              flex: 0 0 95px;
-              margin-right: 20px;
-              text-align: left;
+              // flex: 0 0 95px;
+            width: 10%;
+              // margin-right: 20px;
+              text-align: center;
             }
             div:nth-child(8){
-              flex: 0 0 90px;
-              text-align: left;
+            width: 10%;
+              // flex: 0 0 90px;
+              text-align: center;
             }
           }
         }

src/view/user/shopping/index.vue

@@ -22,10 +22,10 @@
 
         </div>
         <div class="tops">
-          <div class="tops-order-text" style="flex: 1 1 200px;">商品</div>
-          <div class="tops-order-text" style="margin-left: 40px">单价</div>
-          <div class="tops-order-text">数量</div>
-          <div class="tops-order-text" style="margin-right: 40px">操作</div>
+          <div class="tops-order-text" style="width: 40%;">商品</div>
+          <div class="tops-order-text" style="width: 20%;">单价</div>
+          <div class="tops-order-text" style="width:20%">数量</div>
+          <div class="tops-order-text" style="width: 20%;">操作</div>
         </div>
         <div class="news-no" v-if="shoppingList.arr.goods==''">
           <img src="http://screen-test.zhousi.hdlkeji.com/aksdbn/img/news-no-bg3.png">
@@ -129,7 +129,7 @@ goods_list().then((res)=>{
         font-size: 16px;
         line-height: 50px;
 		.tops-order-text{
-			flex: 1;
+			// flex: 1;
 			text-align: center;
 		}
       }