修改 组件默认样式

jsowell-ui/src/views/order/order/index.vue

@@ -27,7 +27,16 @@
         />
       </el-form-item>
 
-      <el-form-item label="交易流水号" prop="transactionCode">
+        <el-form-item label="手机号码" prop="mobileNumber">
+        <el-input
+          v-model="queryParams.mobileNumber"
+          placeholder="请输入手机号码"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+    <div v-if="buttonBoolean">
+         <el-form-item label="交易流水号" prop="transactionCode">
         <el-input
           v-model="queryParams.transactionCode"
           placeholder="请输入交易流水号"
@@ -51,14 +60,7 @@
           />
         </el-select>
       </el-form-item>
-      <el-form-item label="手机号码" prop="mobileNumber">
-        <el-input
-          v-model="queryParams.mobileNumber"
-          placeholder="请输入手机号码"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
+    
 
       <el-form-item label="创建时间">
         <el-date-picker
@@ -73,6 +75,11 @@
           :clearable=false
         ></el-date-picker>
       </el-form-item>
+    </div>
+    <el-button @click="showOrHide()"
+                           style="border-color:white;background-color:white;font-size: x-small;color:#50bfff;padding:1px 2px;margin-left: 40%;margin-top: 0px;margin-bottom: 15px"
+                           :icon="icon">{{showOrHideText}}
+                </el-button>
    </el-form>
 
     <el-row :gutter="10" class="mb8">
@@ -148,13 +155,17 @@
    <div class="cardview-box" v-for="(item,index) in orderList"  :key="index" @change="handleSelectionChange">
      <div class="cardview-static">
       <div>
-       订单编号：{{item.orderCode}}
-        <el-tag type="success">{{item.orderStatusDescribe}}</el-tag>
+         <router-link
+            :to="'/order/index/orderDetail/'+item.orderCode"
+            class="link-type"
+          >订单编号：{{item.orderCode}}</router-link>
+      
+        <el-tag type="success" style="margin-left:10px">{{item.orderStatusDescribe}}</el-tag>
       </div>
       <div>开始时间：{{item.chargeStartTime || '一'}}</div>
      </div>
-      <div style="display:flex;padding:10px">
-        <el-descriptions :title="`${item.nickName || '---'}（${item.mobileNumber || '---'}）`" :colum="3" style="width:80%">
+      <div style="padding:10px">
+        <el-descriptions :title="`${item.nickName || '---'}（${item.mobileNumber || '---'}）`" :column="4">
     <el-descriptions-item label="交易流水号">{{item.transactionCode || '一'}}</el-descriptions-item>
     <el-descriptions-item label="站点">{{item.stationName || '一'}}</el-descriptions-item>
     <el-descriptions-item label="充电桩枪口号">{{item.pileConnectorCode || '一'}}</el-descriptions-item>
@@ -173,10 +184,7 @@
     <el-descriptions-item label="结算金额">{{item.settleAmount || '一'}}</el-descriptions-item>    
 </el-descriptions>
 <div style="flex:1;text-align: center;margin:auto">
-   <router-link
-            :to="'/order/index/orderDetail/'+item.orderCode"
-            class="link-type"
-          >详情</router-link>
+  
 </div>
       </div>
    </div>
@@ -205,6 +213,10 @@ export default {
   dicts: ['order_status', 'start_mode', 'pay_mode', 'pay_status'],
   data() {
     return {
+      showOrHideText: "显示更多查询条件",
+            buttonBoolean: false,
+//图标，可根据自己的需求匹配
+            icon: 'el-icon-caret-bottom',
       checkAll: false,
       checkedCities: [],
       cities: ['订单状态描述', '启动方式', '起始SOC', '终止SOC'],
@@ -260,6 +272,17 @@ export default {
     this.dataLoading();
   },
   methods: {
+    showOrHide () {
+                if (this.buttonBoolean) {
+                    this.icon = 'el-icon-caret-bottom';
+                    this.showOrHideText = "显示更多查询条件";
+                    this.buttonBoolean = !this.buttonBoolean;
+                } else {
+                    this.icon = 'el-icon-caret-top';
+                    this.showOrHideText = "收起";
+                    this.buttonBoolean = !this.buttonBoolean;
+                }
+            },
     startMode(mode){
       let arr = this.dict.type.start_mode.find(item => item.value == mode) 
       if (arr == null) {
@@ -524,6 +547,13 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
+
+::v-deep .el-descriptions--medium:not(.is-bordered) .el-descriptions-item__cell{
+  padding-bottom: 4px;
+}
+::v-deep .el-descriptions__header{
+  margin-bottom: 10px;
+}
 .cardview-box{
   width: 100%;
     margin-bottom: 12px;