样式

src/views/refund/gold/coinRefundDetail.vue

@@ -164,7 +164,8 @@ const getSelectBy = async function (val) {
       }
     })
     // 复制一份 refundUser.value 并移除排序字段和排序方式
-    const detailWithoutSort = { ...refundUser.value, 
+    const detailWithoutSort = {
+      ...refundUser.value,
       flag: showEmployeeData.value ? 0 : 1
     }
     delete detailWithoutSort.sortField
@@ -516,57 +517,47 @@ const getMarket = async function () {
 
 <template>
   <el-card style="margin-bottom: 1vh;">
-        <el-row style="margin-bottom: 1vh">
-          <el-col :span="5">
-            <div class="head-card-element">
+    <div class="condition">
+      <div style="display: flex;align-items: center;width:18vw">
         <el-text>精网号：</el-text>
-              <el-input v-model="refundUser.jwcode" placeholder="请输入精网号" style="width: 150px" clearable />
+        <el-input v-model="refundUser.jwcode" placeholder="请输入精网号" style="width: 10vw;" clearable />
       </div>
-          </el-col>
-
-          <el-col :span="5">
-            <div class="head-card-element">
+      <div style="display: flex;align-items: center;width:18vw">
         <el-text>商品名称：</el-text>
-              <el-select v-model="refundUser.goodsName" placeholder="请选择商品名称" style="width: 180px" clearable filterable>
+        <el-select v-model="refundUser.goodsName" placeholder="请选择商品名称" style="width: 10vw;" clearable filterable>
           <el-option v-for="item in goods" :key="item.value" :label="item.label" :value="item.value" />
         </el-select>
       </div>
-          </el-col>
-          <el-col :span="5">
+      <div style="display: flex;align-items: center;width:18vw">
         <el-text size="large">所属地区：</el-text>
-            <el-cascader v-model="selectedMarketPath" :options="market" placeholder="请选择所属地区" clearable
-              style="width:180px" @change="handleMarketChange" />
-          </el-col>
-          <el-col :span="5">
-            <div class="head-card-element">
+        <el-cascader v-model="selectedMarketPath" :options="market" placeholder="请选择所属地区" clearable style="width:10vw"
+          @change="handleMarketChange" />
+      </div>
+      <div style="display: flex;align-items: center;width:18vw">
         <el-text>退款类型：</el-text>
-              <el-select v-model="refundUser.refundType" placeholder="请选择退款类型" style="width: 180px" clearable>
-                <!--                todo 这需要改-->
+        <el-select v-model="refundUser.refundType" placeholder="请选择退款类型" style="width: 10vw" clearable>
           <el-option v-for="item in refundType" :key="item.value" :label="item.label" :value="item.value" />
         </el-select>
       </div>
-          </el-col>
-          <el-col :span="3">
-            <div class="head-card-element">
+      <div>
         <el-checkbox v-model="showEmployeeData" @change="search()">员工数据</el-checkbox>
       </div>
-          </el-col>
-        </el-row>
-        <el-row>
+    </div>
+    <div>
       <el-col :span="24">
-            <div class="head-card-element">
+        <div>
           <el-text>退款时间：</el-text>
           <el-date-picker v-model="getTime" type="datetimerange" range-separator="至" start-placeholder="起始时间"
-                end-placeholder="结束时间" style="width: 400px" @change="handleDatePickerChange"
-                :default-time="defaultTime" :disabled-date="disabledDate"/>
-              <el-button @click="getToday()" style="margin-left: 10px"
-                :type="activeTimeRange === 'today' ? 'primary' : ''"> 今
+            end-placeholder="结束时间" style="width: 20vw;" @change="handleDatePickerChange" :default-time="defaultTime"
+            :disabled-date="disabledDate" />
+          <el-button @click="getToday()" style="margin-left: 10px" :type="activeTimeRange === 'today' ? 'primary' : ''">
+            今
           </el-button>
           <el-button @click="getYesterday()" style="margin-left: 10px"
             :type="activeTimeRange === 'yesterday' ? 'primary' : ''"> 昨
           </el-button>
-              <el-button @click="get7Days()" style="margin-left: 10px"
-                :type="activeTimeRange === '7days' ? 'primary' : ''"> 近7天
+          <el-button @click="get7Days()" style="margin-left: 10px" :type="activeTimeRange === '7days' ? 'primary' : ''">
+            近7天
           </el-button>
 
           <el-button type="success" @click="reset()">重置</el-button>
@@ -575,8 +566,9 @@ const getMarket = async function () {
           <el-button type="primary" @click="openExportList">查看导出列表</el-button>
         </div>
       </el-col>
-        </el-row>
+    </div>
   </el-card>
+
   <el-card>
     <div>
       退款金币总数：{{ format3(Math.abs(sumGolds).toFixed(2)) }}&nbsp;&nbsp;&nbsp;&nbsp;
@@ -586,7 +578,7 @@ const getMarket = async function () {
     </div>
     <!-- 设置表格容器的高度和滚动样式 -->
     <div style="height: 55vh; overflow-y: auto;">
-          <el-table :data="tableData" style="width: 82vw" @sort-change="handleSortChange" height="520px">
+      <el-table :data="tableData" style="width: 82vw;height:55vh" @sort-change="handleSortChange">
         <el-table-column type="index" label="序号" width="80px" fixed="left">
           <template #default="scope">
             <span>{{
@@ -663,7 +655,9 @@ const getMarket = async function () {
 </template>
 
 <style scoped>
-.head-card-element {
-  margin-right: 20px;
+.condition{
+  display: flex;
+  width:82vw;
+  margin-bottom: 0.5vh;
 }
 </style>