设备页面-样式优化

gaoluyang

2025-03-24 6bdeb3668666e6be8ad03e4c65ca3debc802a04a

 src/views/CNAS/resourceDemand/device/component/maintenance.vue

@@ -2,21 +2,22 @@
<template>
  <div>
    <div class="search">
      <div class="search_thing">
        <div class="search_label">流程编号：</div>
        <div class="search_input"><el-input v-model="search.deviceNumber" clearable placeholder="请输入" size="small"
            @keyup.enter.native="getAllMessage(clickNodeVal.value)"></el-input></div>
      </div>
      <div class="search_thing" style="padding-left: 30px;">
        <el-button size="mini" type="primary" @click="getAllMessage(clickNodeVal.value)">查询</el-button>
        <el-button size="mini" @click="resetSearch">重置</el-button>
      </div>
      <div class="btns">
      <el-form :model="search" ref="search" size="small" :inline="true">
        <el-form-item label="流程编号">
          <el-input v-model="search.deviceNumber" clearable placeholder="请输入" size="small"
                    @keyup.enter.native="getAllMessage(clickNodeVal.value)"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" type="primary" @click="getAllMessage(clickNodeVal.value)">查询</el-button>
          <el-button size="mini" @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
      <div>
        <el-button size="small" type="primary" @click="dialogVisible = true; add()">添加维护记录</el-button>
        <el-button :loading="outLoading" size="small" type="primary" @click="handleDownOne">导出</el-button>
      </div>
    </div>
    <div class="tables" style="margin-top: 10px;">
    <div>
      <el-table ref="table" :data="MaintainParam" height="calc(100vh - 20em)"
                :header-cell-style="{ background: '#f8f8f9', color: '#515a6e' }" border>
        <el-table-column label="序号" type="index" width="120">
@@ -41,7 +42,7 @@
      </el-table>
      <el-pagination :current-page="1" :page-size="search.size" :page-sizes="[10, 20, 30, 50, 100]"
        :total="search.total" layout="->,total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
        @current-change="handleCurrentChange" background>
      </el-pagination>
    </div>
    <!-- 新建维护 -->
@@ -276,66 +277,11 @@
</script>

<style scoped>
h4 {
  font-weight: 400;
  font-size: 16px;
.search {
  height: 46px;
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
}

h4 .line {
  display: inline-block;
  width: 3px;
  height: 16px;
  background: #3A7BFA;
  margin-right: 4px;
}

.tables {
  width: 100%;
  height: calc(100vh - 17em);
}

.search {
  background-color: #fff;
  display: flex;
  align-items: center;
  position: relative;
  margin-top: 10px;
}

.search_thing {
  display: flex;
  align-items: center;
  height: 40px;
}

.search_label {
  width: 80px;
  font-size: 14px;
  text-align: right;
}

.search_input {
  width: 73%;
}

.btns {
  position: absolute;
  right: 0px;
  top: 50%;
  transform: translate(0, -50%);
}

.btns_thing {
  position: absolute;
  right: 230px;
  top: 50%;
  transform: translate(0, -50%);
}

.form .search_label {
  width: 120px;
  align-items: flex-start;
}
</style>