综合查询样式修改

src/views/search/category/index.vue

@@ -103,6 +103,32 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.app-container{
+  background: #F0F0F0;
+}
+::v-deep.el-button--primary{
+  background-color: #2CBAB2;
+  border-color: #2CBAB2;
+}
+::v-deep.el-button--danger{
+  background-color: #FF5129;
+  border-color: #FF5129;
+}
+::v-deep.el-tag.el-tag--info {
+    background-color: #F5F5F5;
+    border-color: #B3B3B3;
+    color: #B3B3B3;
+}
+::v-deep.el-tag.el-tag--warn{
+    background-color: rgba(255,171,41,0.1);;
+    border: #FFAB29;
+    color: #FFAB29;
+}
+::v-deep.el-tag.el-tag--success {
+    background-color: rgba(52,226,199,0.1);
+    border-color: #34E2C7;
+    color: #34E2C7;
+}
 .app-container {
   height: 100%;
 

src/views/search/equipment/index.vue

@@ -1,24 +1,22 @@
 <template>
   <div class="app-container">
-    <el-form
-      :model="queryParams"
-      ref="queryForm"
-      size="small"
-      :inline="true"
-      v-show="showSearch"
-      label-width="68px"
-    >
-      <el-card class="search-box">
-        <el-row style="height: 32px">
-          <el-col :span="20">
+    <el-card class="search-box" style="margin-bottom: 20px;padding-bottom: 15px;" shadow="never">
+      <el-form
+        :model="queryParams"
+        ref="queryForm"
+        size="small"
+        :inline="true"
+        v-show="showSearch"
+        label-width="150px"
+      >  
             <el-form-item prop="deviceName" label="装备名称">
               <el-input
                 v-model="queryParams.deviceName"
                 placeholder="装备名称"
-                clearable
+                clearable 
                 @keyup.enter.native="handleQuery"
                 maxlength="20"
-                style="width: 220px"
+                style="width: 240px;"
               />
             </el-form-item>
             <el-form-item prop="code" label="装备编码">
@@ -28,7 +26,7 @@
                 clearable
                 @keyup.enter.native="handleQuery"
                 maxlength="20"
-                style="width: 220px"
+                style="width: 240px;"
               />
             </el-form-item>
 
@@ -39,7 +37,7 @@
                 :props="partTypeTreeProps"
                 filterable
                 clearable
-                style="width: 220px"
+                style="width: 240px;"
                 placeholder="请选择装备类目"
                 @change="deviceTypeChange"
               ></el-cascader>
@@ -57,50 +55,49 @@
 
               >
               </el-date-picker>
-            </el-form-item>
-          </el-col>
-          <el-col :span="4" style="text-align: right;">
-            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
-            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-          </el-col>
-        </el-row>
-
-      </el-card>
-    </el-form>
+            </el-form-item>  
 
+            <el-form-item style="float: right;margin-top: 10px;">
+              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
+              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> 
+            </el-form-item> 
+      </el-form>
+    </el-card>
     <!-- <el-row :gutter="10" class="mb8">
         <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row> -->
-    <el-card class="content-box">
-      <div >
-        <el-table v-loading="loading" :data="tableData" border stripe class="my-table">
-          <el-table-column label="序号" align="center" width="80" type="index">
-            <template slot-scope="scope">
-              <span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column label="装备名称" align="center" prop="deviceName" sortable/>
-          <el-table-column label="装备编码" align="center" prop="code" sortable>
-            <template slot-scope="scope">
-              <span style="color: blue">{{ scope.row.code }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column label="装备类目" align="center" prop="typeName" width="250px" sortable>
-            <template slot-scope="scope">
-                    <span
-                    >{{ scope.row.firstName }} <span v-show="scope.row.firstName">></span> {{
-                        scope.row.secondName
-                      }}<span v-show="scope.row.secondName">></span>{{ scope.row.thirdName }}</span
-                    >
-            </template>
-          </el-table-column>
-          <el-table-column label="装备型号" align="center" prop="typeName" sortable/>
-          <el-table-column label="所属公司" align="center" prop="companyName" sortable/>
-          <!-- <el-table-column label="上架时间" align="center" prop="createTime" sortable/> -->
-          <el-table-column label="创建时间" align="center" prop="createTime" sortable/>
-          <el-table-column label="更新时间" align="center" prop="updateTime" sortable/>
-        </el-table>
+    <el-card class="content-box" shadow="never">
+      <div style="display: flex;align-items: center;padding: 10px 0;margin-bottom: 15px;border-bottom: 1px solid #F0F0F0;">
+        <span style="font-size: 20px; font-weight: 800;margin-right: 48px;">装备信息列表</span>
+          <span style="font-size: 16px;color: #808080;">共{{total}}条记录</span>
       </div>
+      <el-table v-loading="loading" :data="tableData" border stripe class="my-table">
+        <el-table-column label="序号" align="center" width="80" type="index">
+          <template slot-scope="scope">
+            <span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="装备名称" align="center" prop="deviceName" sortable/>
+        <el-table-column label="装备编码" align="center" prop="code" sortable>
+          <template slot-scope="scope">
+            <span style="color: blue">{{ scope.row.code }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="装备类目" align="center" prop="typeName" width="250px" sortable>
+          <template slot-scope="scope">
+                  <span
+                  >{{ scope.row.firstName }} <span v-show="scope.row.firstName">></span> {{
+                      scope.row.secondName
+                    }}<span v-show="scope.row.secondName">></span>{{ scope.row.thirdName }}</span
+                  >
+          </template>
+        </el-table-column>
+        <el-table-column label="装备型号" align="center" prop="typeName" sortable/>
+        <el-table-column label="所属公司" align="center" prop="companyName" sortable/>
+        <!-- <el-table-column label="上架时间" align="center" prop="createTime" sortable/> -->
+        <el-table-column label="创建时间" align="center" prop="createTime" sortable/>
+        <el-table-column label="更新时间" align="center" prop="updateTime" sortable/>
+      </el-table> 
       <div class="pagination-wrapper">
         <pagination
 
@@ -286,6 +283,32 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+.app-container{
+  background: #F0F0F0;
+}
+::v-deep.el-button--primary{
+  background-color: #2CBAB2;
+  border-color: #2CBAB2;
+}
+::v-deep.el-button--danger{
+  background-color: #FF5129;
+  border-color: #FF5129;
+}
+::v-deep.el-tag.el-tag--info {
+    background-color: #F5F5F5;
+    border-color: #B3B3B3;
+    color: #B3B3B3;
+}
+::v-deep.el-tag.el-tag--warn{
+    background-color: rgba(255,171,41,0.1);;
+    border: #FFAB29;
+    color: #FFAB29;
+}
+::v-deep.el-tag.el-tag--success {
+    background-color: rgba(52,226,199,0.1);
+    border-color: #34E2C7;
+    color: #34E2C7;
+}
 .uploadImg {
   padding-top: 20px;
   display: flex;

src/views/search/lease/index.vue

@@ -1,132 +1,117 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-      <el-card class="search-box">
-        <el-row>
-          <el-col :span="24">
-            <el-form-item prop="deviceName" label="装备名称" >
-              <el-input
-                v-model="queryParams.deviceName"
-                placeholder="装备名称"
-                clearable
-                @keyup.enter.native="handleQuery"
-                maxlength="20"
-              />
-            </el-form-item>
-            <el-form-item prop="code" label="装备编码">
-              <el-input
-                v-model="queryParams.code"
-                placeholder="装备编码"
-                clearable
-                @keyup.enter.native="handleQuery"
-                maxlength="20"
-              />
-            </el-form-item>
+    <el-card class="search-box" style="margin-bottom: 20px;padding-bottom: 15px;" shadow="never"> 
+      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="150px">
+          <el-form-item prop="deviceName" label="装备名称" >
+            <el-input
+              v-model="queryParams.deviceName"
+              placeholder="装备名称"
+              clearable style="width: 240px;"
+              @keyup.enter.native="handleQuery"
+              maxlength="20"
+            />
+          </el-form-item>
+          <el-form-item prop="code" label="装备编码">
+            <el-input
+              v-model="queryParams.code"
+              placeholder="装备编码"
+              clearable style="width: 240px;"
+              @keyup.enter.native="handleQuery"
+              maxlength="20"
+            />
+          </el-form-item> 
+          <el-form-item prop="maStatus" label="装备状态">
+            <el-select
+              style="width: 240px;"
+              v-model="queryParams.maStatus"
+              clearable
+              placeholder="请选择装备状态"
+            >
+              <el-option label="草稿状态" value="0"></el-option>
+              <el-option label="上架" value="2"></el-option>
+              <el-option label="下架" value="1"></el-option>
+              <el-option label="在租" value="3"></el-option>
+            </el-select>
+          </el-form-item>  
+          <el-form-item prop="rentNum" label="共享次数">
+            <el-input
+              v-model="queryParams.rentNum"
+              placeholder="共享次数"
+              type="number" style="width: 240px;"
+              clearable
+              @keyup.enter.native="handleQuery"
+              maxlength="20"
+            />
+          </el-form-item> 
+          <el-form-item prop="dateRange" label="更新时间" style="margin-top: 15px;">
+            <el-date-picker
 
-            <el-form-item prop="maStatus" label="装备状态">
-              <el-select
-                style="width: 100% "
-
-                v-model="queryParams.maStatus"
-                clearable
-                placeholder="请选择装备状态"
-              >
-                <el-option label="草稿状态" value="0"></el-option>
-                <el-option label="上架" value="2"></el-option>
-                <el-option label="下架" value="1"></el-option>
-                <el-option label="在租" value="3"></el-option>
-              </el-select>
-            </el-form-item>
-
-
-            <el-form-item prop="rentNum" label="共享次数">
-              <el-input
-                v-model="queryParams.rentNum"
-                placeholder="共享次数"
-                type="number"
-                clearable
-                @keyup.enter.native="handleQuery"
-                maxlength="20"
-              />
-            </el-form-item>
-
-            <el-form-item prop="dateRange" label="更新时间">
-              <el-date-picker
-
-                v-model="dateRange"
-                type="daterange"
-                value-format="yyyy-MM-dd"
-                range-separator="至"
-                start-placeholder="更新开始日期"
-                end-placeholder="更新结束日期"
-                style="width: 260px "
-              >
-              </el-date-picker>
-            </el-form-item>
-          </el-col>
-
-        </el-row>
-        <el-row>
-          <el-col :span="24" style="text-align: right; margin-top: 10px ;padding-right: 10px">
+              v-model="dateRange"
+              type="daterange"
+              value-format="yyyy-MM-dd"
+              range-separator="至"
+              start-placeholder="更新开始日期"
+              end-placeholder="更新结束日期"
+              style="width: 240px;"
+            >
+            </el-date-picker>
+          </el-form-item>   
+          <el-form-item style="float: right;margin-top: 10px;">
             <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
-            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-          </el-col>
-        </el-row>
-
-
-      </el-card>
-    </el-form>
-
+            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> 
+          </el-form-item> 
+      </el-form>
+    </el-card>
     <!-- <el-row :gutter="10" class="mb8">
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row> -->
-    <el-card class="content-box">
-      <div >
-        <el-table v-loading="loading" :data="tableData"  border stripe class="my-table">
-          <el-table-column label="序号" align="center" width="80" type="index">
-            <template slot-scope="scope">
-              <span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column label="装备名称" align="center" prop="deviceName" sortable/>
-          <el-table-column label="装备编码" align="center" prop="code" sortable>
-            <template slot-scope="scope">
-              <span style="color:blue">{{ scope.row.code }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column label="装备类目" align="center" prop="typeName" width="250px" sortable>
-            <template slot-scope="scope">
-            <span
-            >{{ scope.row.firstName }} <span v-show="scope.row.firstName">></span>
-                {{ scope.row.secondName }}<span v-show="scope.row.secondName">></span
-              >{{ scope.row.thirdName }}</span
-            >
-            </template>
-          </el-table-column>
-          <el-table-column label="共享次数" align="center" prop="rentNum" sortable/>
-          <el-table-column label="装备状态" align="center" prop="maStatus" sortable>
-            <template slot-scope="scope">
-              <el-tag v-if="scope.row.maStatus == 0" size="small" type="info">草稿状态</el-tag>
-              <el-tag v-if="scope.row.maStatus == 1" size="small" type="warning">下架</el-tag>
-              <el-tag v-if="scope.row.maStatus == 2" size="small" type="success">上架</el-tag>
-              <el-tag v-if="scope.row.maStatus == 3" size="small" type="danger">在租</el-tag>
-            </template>
-          </el-table-column>
-          <el-table-column label="更新时间" align="center" prop="updateTime" sortable/>
-          <el-table-column label="操作" align="center" width="180">
-            <template slot-scope="scope">
-              <el-button
-                size="mini"
-                type="text"
-                icon="el-icon-view"
-                @click="handleDetail(scope.row)"
-              >
-                共享详情
-              </el-button>
-            </template>
-          </el-table-column>
-        </el-table>
+    <el-card class="content-box" shadow="never">
+      <div style="display: flex;align-items: center;padding: 10px 0;margin-bottom: 15px;border-bottom: 1px solid #F0F0F0;">
+        <span style="font-size: 20px; font-weight: 800;margin-right: 48px;">装备租赁查询列表</span>
+          <span style="font-size: 16px;color: #808080;">共{{total}}条记录</span>
       </div>
+      <el-table v-loading="loading" :data="tableData"  border stripe class="my-table">
+        <el-table-column label="序号" align="center" width="80" type="index">
+          <template slot-scope="scope">
+            <span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="装备名称" align="center" prop="deviceName" sortable/>
+        <el-table-column label="装备编码" align="center" prop="code" sortable>
+          <template slot-scope="scope">
+            <span style="color:blue">{{ scope.row.code }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="装备类目" align="center" prop="typeName" width="250px" sortable>
+          <template slot-scope="scope">
+          <span
+          >{{ scope.row.firstName }} <span v-show="scope.row.firstName">></span>
+              {{ scope.row.secondName }}<span v-show="scope.row.secondName">></span
+            >{{ scope.row.thirdName }}</span
+          >
+          </template>
+        </el-table-column>
+        <el-table-column label="共享次数" align="center" prop="rentNum" sortable/>
+        <el-table-column label="装备状态" align="center" prop="maStatus" sortable>
+          <template slot-scope="scope">
+            <el-tag v-if="scope.row.maStatus == 0" size="small" type="info">草稿状态</el-tag>
+            <el-tag v-if="scope.row.maStatus == 1" size="small" type="warning">下架</el-tag>
+            <el-tag v-if="scope.row.maStatus == 2" size="small" type="success">上架</el-tag>
+            <el-tag v-if="scope.row.maStatus == 3" size="small" type="danger">在租</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="更新时间" align="center" prop="updateTime" sortable/>
+        <el-table-column label="操作" align="center" width="180">
+          <template slot-scope="scope">
+            <el-button 
+              type="text" style="color: #2CBAB2;"
+              @click="handleDetail(scope.row)"
+            >
+              共享详情
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table> 
       <div class="pagination-wrapper">
         <pagination
 
@@ -444,6 +429,32 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
+.app-container{
+  background: #F0F0F0;
+}
+::v-deep.el-button--primary{
+  background-color: #2CBAB2;
+  border-color: #2CBAB2;
+}
+::v-deep.el-button--danger{
+  background-color: #FF5129;
+  border-color: #FF5129;
+}
+::v-deep.el-tag.el-tag--info {
+    background-color: #F5F5F5;
+    border-color: #B3B3B3;
+    color: #B3B3B3;
+}
+::v-deep.el-tag.el-tag--warn{
+    background-color: rgba(255,171,41,0.1);;
+    border: #FFAB29;
+    color: #FFAB29;
+}
+::v-deep.el-tag.el-tag--success {
+    background-color: rgba(52,226,199,0.1);
+    border-color: #34E2C7;
+    color: #34E2C7;
+}
 .uploadImg {
   padding-top: 20px;
   display: flex;