所有查看列表页面自适应大小

src/views/business/ticket/detail.vue

@@ -59,7 +59,7 @@
       <div class="base-info-title">奖级设置</div>
       <!-- 奖级设置 -->
       <el-row :gutter="10">
-       <el-col :span="20" offset="2">
+       <el-col :span="20" :offset="2">
          <div class="prize" v-for="(item, index) in awardsList" :key="index">
            <div class="prize-top">
              <div>奖级名称：{{ item.name }}</div>

src/views/order/channel/detail.vue

@@ -2,9 +2,9 @@
   <div class="app-container">
     <!-- 订单信息 -->
     <el-row :gutter="10">
-      <el-col :span="22" offset="1">
+      <el-col :span="22" :offset="1">
         <div class="info-title">订单信息</div>
-        <el-col :span="8" offset="1" :xs="{span: 24, offset: 0}">
+        <el-col :span="8" :offset="1" :xs="{span: 24, offset: 0}">
           <div class="title">订单编号：{{ info.orderId }}</div>
         </el-col>
         <el-col :span="7" :xs="{span: 24, offset: 0}">
@@ -17,9 +17,9 @@
     </el-row>
     <!-- 卖家信息 -->
     <el-row :gutter="10" >
-      <el-col :span="22" offset="1">
+      <el-col :span="22" :offset="1">
         <div class="info-title">买家信息</div>
-        <el-col :span="8" offset="1" :xs="{span: 24, offset: 0}">
+        <el-col :span="8" :offset="1" :xs="{span: 24, offset: 0}">
           <div class="title">经销商：{{ info.channel && info.channel.name }}</div>
         </el-col>
         <el-col :span="7" :xs="{span: 24, offset: 0}">
@@ -28,7 +28,7 @@
         <el-col :span="8" :xs="{span: 24, offset: 0}">
           <div class="title">收货人：{{ info.receiver || "--" }}</div>
         </el-col>
-        <el-col :span="8" offset="1" :xs="{span: 24, offset: 0}">
+        <el-col :span="8" :offset="1" :xs="{span: 24, offset: 0}">
           <div class="title">联系电话：{{ info.tel || "--" }}</div>
         </el-col>
         <el-col :span="7" :xs="{span: 24, offset: 0}">
@@ -43,19 +43,19 @@
     </el-row>
     <!-- 买家留言 -->
     <el-row :gutter="10">
-      <el-col :span="22" offset="1">
+      <el-col :span="22" :offset="1">
         <div class="info-title">备注信息</div>
-        <el-col :span="8" offset="1" :xs="{span: 24, offset: 0}">
+        <el-col :span="8" :offset="1" :xs="{span: 24, offset: 0}">
           <div class="title">买家留言：{{ info.memo || "--" }}</div>
         </el-col>
       </el-col>
     </el-row>
     <!--  订单状态  -->
     <el-row :gutter="10">
-      <el-col :span="22" offset="1">
+      <el-col :span="22" :offset="1">
         <div class="info-title">订单状态</div>
 
-        <el-col :span="8" offset="1" :xs="{span: 24, offset: 0}">
+        <el-col :span="8" :offset="1" :xs="{span: 24, offset: 0}">
           <div class="title">订单状态：{{ status.value == 2 ? "已发货" : (status.desc || "--") }}</div>
         </el-col>
         <el-col :span="7" :xs="{span: 18, offset: 0}">
@@ -74,7 +74,7 @@
         >发货
         </el-button
         >
-        <el-col :span="8" offset="1" :xs="{span: 24, offset: 0}">
+        <el-col :span="8" :offset="1" :xs="{span: 24, offset: 0}">
           <div class="title" v-if="status.value === 2 || status.value === 3">配送方式：{{ "快递发货" || "--" }}</div>
         </el-col>
         <el-col :span="7" :xs="{span: 24, offset: 0}">
@@ -92,7 +92,7 @@
     </el-row>
     <br>
     <el-row :gutter="10">
-      <el-col :span="22" offset="1">
+      <el-col :span="22" :offset="1">
         <!-- 商品信息 -->
         <div class="info">
           <div class="info-title">商品信息</div>

src/views/order/deliver/detail.vue

@@ -2,9 +2,9 @@
   <div class="app-container">
     <!-- 订单信息 -->
     <el-row :gutter="10">
-      <el-col :span="22" offset="1">
+      <el-col :span="22" :offset="1">
         <div class="info-title">订单信息</div>
-        <el-col :span="8" offset="1" :xs="{span: 24, offset: 0}">
+        <el-col :span="8" :offset="1" :xs="{span: 24, offset: 0}">
           <div class="title">订单编号：{{ info.orderId }}</div>
         </el-col>
         <el-col :span="7" :xs="{span: 24, offset: 0}">
@@ -18,9 +18,9 @@
 
     <!-- 买家信息 -->
     <el-row :gutter="10" >
-      <el-col :span="22" offset="1">
+      <el-col :span="22" :offset="1">
         <div class="info-title">买家信息</div>
-        <el-col :span="8" offset="1" :xs="{span: 24, offset: 0}">
+        <el-col :span="8" :offset="1" :xs="{span: 24, offset: 0}">
           <div class="title">用户昵称：{{ info.nickName || "--" }}</div>
         </el-col>
         <el-col :span="7" :xs="{span: 24, offset: 0}">
@@ -29,7 +29,7 @@
         <el-col :span="8" :xs="{span: 24, offset: 0}">
           <div class="title">联系电话：{{ info.tel || "--" }}</div>
         </el-col>
-        <el-col :span="8" offset="1" :xs="{span: 24, offset: 0}">
+        <el-col :span="8" :offset="1" :xs="{span: 24, offset: 0}">
           <div class="title">收货地址：{{
               `${info.province || "--"}${info.city || "--"}${
                 info.area || "--"
@@ -41,9 +41,9 @@
 
     <!-- 买家留言 -->
     <el-row :gutter="10">
-      <el-col :span="22" offset="1">
+      <el-col :span="22" :offset="1">
         <div class="info-title">备注信息</div>
-        <el-col :span="8" offset="1" :xs="{span: 24, offset: 0}">
+        <el-col :span="8" :offset="1" :xs="{span: 24, offset: 0}">
           <div class="title">买家留言：{{ info.memo || "--" }}</div>
         </el-col>
       </el-col>
@@ -51,9 +51,9 @@
 
     <!-- 订单状态 -->
     <el-row :gutter="10">
-      <el-col :span="22" offset="1">
+      <el-col :span="22" :offset="1">
         <div class="info-title">订单状态</div>
-        <el-col :span="8" offset="1" :xs="{span: 24, offset: 0}">
+        <el-col :span="8" :offset="1" :xs="{span: 24, offset: 0}">
           <div class="title">订单状态：{{ status.value == 2 ? "已发货" : (status.desc || "--") }}</div>
         </el-col>
         <el-button
@@ -68,10 +68,10 @@
 
     <!-- 物流信息 -->
     <el-row :gutter="10">
-      <el-col :span="22" offset="1">
+      <el-col :span="22" :offset="1">
         <div class="info" v-if="status.value === 2 || status.value === 3 || status.value === 4">
       <div class="info-title">物流信息</div>
-      <el-col :span="24" offset="1">
+      <el-col :span="24" :offset="1">
         <div
           class="info-item-logistics"
           v-for="(item, index) in deliverList"
@@ -116,7 +116,7 @@
 
         <!-- 商品信息 -->
     <el-row :gutter="10">
-      <el-col :span="22" offset="1">
+      <el-col :span="22" :offset="1">
          <div class="info">
       <div class="info-title">商品信息</div>
       <div class="info-table">

src/views/order/userTicket/detail.vue

@@ -2,114 +2,93 @@
   <div class="app-container">
     <!-- 订单信息 -->
     <el-row :gutter="10">
-      <el-col :span="22" offset="1">
+      <el-col :span="22" :offset="1">
         <div class="info-title">订单信息</div>
-
+        <el-col :span="8" :offset="1" :xs="{span: 24, offset: 0}">
+          <div class="title">订单编号：{{ info.orderId }}</div>
+        </el-col>
+        <el-col :span="7" :xs="{span: 24, offset: 0}">
+          <div class="title">订单类型：用户盲票订单</div>
+        </el-col>
+        <el-col :span="8" :xs="{span: 24, offset: 0}">
+          <div class="title">下单时间：{{ parseTime(info.createdTime) }}</div>
+        </el-col>
+        <el-col :span="8" :offset="1" :xs="{span: 24, offset: 0}">
+          <div class="title">订单状态：{{ info.status && JSON.parse(info.status).desc }}</div>
+        </el-col>
+        <el-col :span="7" :xs="{span: 24, offset: 0}">
+          <div class="title">优惠金额：{{ $numberFormat(info.discountAmt) }}元</div>
+        </el-col>
+        <el-col :span="8" :xs="{span: 24, offset: 0}">
+          <div class="title">实付金额：{{ $numberFormat(info.payAmt) }}元</div>
+        </el-col>
       </el-col>
     </el-row>
-    <div class="info">
-      <div class="info-item">
-        <div class="info-item-content">
-          <div class="info-item-content-one">
-            <div class="title">订单编号：{{ info.orderId }}</div>
-            <div class="txt"></div>
-          </div>
-          <div class="info-item-content-one">
-            <div class="title">订单类型：</div>
-            <div class="txt">用户盲票订单</div>
-          </div>
-          <div class="info-item-content-one">
-            <div class="title">下单时间：</div>
-            <div class="txt">{{ parseTime(info.createdTime) }}</div>
-          </div>
-        </div>
-        <div class="info-item-content">
-          <div class="info-item-content-one">
-            <div class="title">订单状态：</div>
-            <div class="txt">{{ info.status && JSON.parse(info.status).desc }}</div>
-          </div>
-          <div class="info-item-content-one">
-            <div class="title">优惠金额：</div>
-            <div class="txt">{{ $numberFormat(info.discountAmt) }}元</div>
-          </div>
-          <div class="info-item-content-one">
-            <div class="title">实付金额：</div>
-            <div class="txt">{{ $numberFormat(info.payAmt) }}元</div>
-          </div>
-        </div>
-      </div>
-    </div>
+
     <!-- 买家信息 -->
-    <div class="info">
-      <div class="info-title">买家信息</div>
-      <div class="info-item">
-        <div class="info-item-content">
-          <div class="info-item-content-one">
-            <div class="title">用户昵称：</div>
-            <div class="txt">{{ info.nickName }}</div>
-          </div>
-          <div class="info-item-content-one">
-            <div class="title">手机号：</div>
-            <div class="txt">{{ info.phone }}</div>
-          </div>
-        </div>
-      </div>
-    </div>
+    <el-row :gutter="10">
+      <el-col :span="22" :offset="1">
+        <div class="info-title">买家信息</div>
+        <el-col :span="8" :offset="1" :xs="{span: 24, offset: 0}">
+          <div class="title">用户昵称：{{ info.nickName }}</div>
+        </el-col>
+        <el-col :span="7" :xs="{span: 24, offset: 0}">
+          <div class="title">手机号：{{ info.phone }}</div>
+        </el-col>
+      </el-col>
+    </el-row>
+
     <!-- 盲票信息 -->
-    <div class="info">
-      <div class="info-title">盲票信息</div>
-      <div class="info-item">
-        <div class="info-item-content">
-          <div class="info-item-content-one">
-            <div class="title">盲票组名称：</div>
-            <div class="txt">{{ info.ticketBoxTitle }}</div>
-          </div>
-          <div class="info-item-content-one">
-            <div class="title">盲票类型：</div>
-            <div class="txt">{{ info.ticketBoxType && JSON.parse(info.ticketBoxType).desc }}</div>
-          </div>
-          <div class="info-item-content-one">
-            <div class="title">佣金系数：</div>
-            <div class="txt">{{ info.saleCommRate }}%</div>
-          </div>
-        </div>
-        <div class="info-item-content">
-          <div class="info-item-content-one">
-            <div class="title">购买数量：</div>
-            <div class="txt">{{ info.ticketNum }}</div>
-          </div>
-          <div class="info-item-content-one">
-            <div class="title">盲票售价：</div>
-            <div class="txt">{{ $numberFormat(info.salePrice) }}元</div>
-          </div>
-          <div class="info-item-content-one">
-            <div class="title">经销商：</div>
-            <div class="txt" v-if="info.channelName">{{ info.channelName }}</div>
-            <div class="txt" v-else>--</div>
-          </div>
+    <el-row :gutter="10">
+      <el-col :span="22" :offset="1">
+        <div class="info-title">盲票信息</div>
+        <el-col :span="8" :offset="1" :xs="{span: 24, offset: 0}">
+          <div class="title">盲票组名称：{{ info.ticketBoxTitle }}</div>
+        </el-col>
+        <el-col :span="7" :xs="{span: 24, offset: 0}">
+          <div class="title">盲票类型：{{ info.ticketBoxType && JSON.parse(info.ticketBoxType).desc }}</div>
+        </el-col>
+        <el-col :span="8" :xs="{span: 24, offset: 0}">
+          <div class="title">佣金系数：{{ info.saleCommRate }}%</div>
+        </el-col>
+        <el-col :span="8" :offset="1" :xs="{span: 24, offset: 0}">
+          <div class="title">购买数量：{{ info.ticketNum }}</div>
+        </el-col>
+        <el-col :span="7" :xs="{span: 24, offset: 0}">
+          <div class="title">盲票售价：{{ $numberFormat(info.salePrice) }}元</div>
+        </el-col>
+        <el-col :span="8" :xs="{span: 24, offset: 0}">
+          <div class="title">经销商：{{ info.channelName ? info.channelName : '--' }}</div>
+        </el-col>
+      </el-col>
+    </el-row>
+    <br>
+    <el-row :gutter="10">
+      <el-col :span="22" :offset="1">
+        <div class="info"
+             v-if="info.ticketDetailList instanceof Array && info.ticketDetailList.length > 0 && info.ticketDetailList[0] instanceof Object">
+          <table border="1" class="table" bordercolor="#CCC">
+            <tr width="20%">
+              <th>盲票序列号</th>
+              <th>兑奖状态</th>
+              <th>奖级</th>
+              <th>奖品</th>
+            </tr>
+            <tr v-for="(item, index) in info.ticketDetailList" :key="index">
+              <td>{{ item && item.serialNo }}</td>
+              <td>{{ item && item.status && JSON.parse(item.status).desc }}</td>
+              <td>{{ item && item.prizeGrade }}</td>
+              <td>{{ item && item.prizeTitle }}</td>
+            </tr>
+          </table>
         </div>
-      </div>
-    </div>
-    <div class="info" v-if="info.ticketDetailList instanceof Array && info.ticketDetailList.length > 0 && info.ticketDetailList[0] instanceof Object">
-      <table border="1" class="table" bordercolor="#CCC">
-        <tr width="20%">
-          <th>盲票序列号</th>
-          <th>兑奖状态</th>
-          <th>奖级</th>
-          <th>奖品</th>
-        </tr>
-        <tr v-for="(item, index) in info.ticketDetailList" :key="index">
-          <td>{{ item && item.serialNo }}</td>
-          <td>{{ item && item.status && JSON.parse(item.status).desc }}</td>
-          <td>{{ item && item.prizeGrade }}</td>
-          <td>{{ item && item.prizeTitle }}</td>
-        </tr>
-      </table>
-    </div>
+      </el-col>
+    </el-row>
   </div>
 </template>
 <script>
-import { ticketOrderDetail } from "@/api/business/order";
+import {ticketOrderDetail} from "@/api/business/order";
+
 export default {
   name: "UserTicketDetail",
   data() {
@@ -138,6 +117,7 @@ export default {
 .title {
   line-height: 30px;
 }
+
 .edit-express {
   color: #409eff;
   cursor: pointer;
@@ -145,13 +125,16 @@ export default {
 
 .info {
   margin-bottom: 10px;
+
   &-title {
     font-size: 14px;
     margin-bottom: 10px;
     font-weight: bold;
   }
+
   &-item {
     padding-left: 50px;
+
     &-content {
       display: flex;
 
@@ -172,22 +155,27 @@ export default {
     }
   }
 }
+
 .flex {
   display: flex;
   align-items: center;
+
   .txt {
     margin-left: 20px;
   }
 }
+
 .table {
   border-collapse: collapse;
   width: 100%;
   line-height: 32px;
   color: #606266;
   font-size: 14px;
+
   th {
     background-color: #ECECEC;
   }
+
   td {
     text-align: center;
   }