ZZJ
2022-09-02 17e2cb23e7720ef1ba90d17456efae338eee4c4c
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<template>
  <div class="event-data">
    <div class="title">点位变更查询</div>
    <!-- <hr /> -->
    <div class="cluster">
      <el-date-picker
        v-model="searchTime"
        @change="searchingBtn"
        type="datetimerange"
        size="small"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :default-time="['00:00:00', '23:59:59']"
      ></el-date-picker>
      <el-button type="primary">主要按钮</el-button>
    </div>
    <div class="table-area">
      <el-table :header-cell-style="{ background: '#f0f3f5' }">
        <el-table-column label="变更时间" width="420px"></el-table-column>
        <el-table-column label="设备ID" width="440px"></el-table-column>
        <el-table-column label="设备名称" width="420"></el-table-column>
      </el-table>
    </div>
    <div>
      <el-pagination
        :current-page="page"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[5, 10, 15, 20, 25]"
        :total="total"
        background
      ></el-pagination>
    </div>
  </div>
</template>
<script>
export default {}
</script>
 
<style lang="scss" scoped>
.event-data {
  padding: 20px;
  width: 1280px;
  height: 1000px;
  background-color: #fff;
  margin: 0 auto;
  margin-top: 20px;
  .title {
    margin-bottom: 20px;
    height: 20px;
    font-weight: 700;
    color: #000;
    padding: 20px 0 30px 0;
    font-weight: normal;
    border-bottom: 1px solid #e9ebee;
  }
  .cluster {
    padding-top: 30px;
  }
  .cluster {
    .el-select {
      width: 230px;
      height: 40px;
      line-height: 40px;
    }
    .el-button {
      margin-left: 30px;
    }
  }
  .table-area {
    padding-top: 30px;
  }
  .el-pagination ::v-deep {
    margin-top: 30px;
    text-align: right;
    height: 24px;
    .el-pagination__sizes {
      margin-right: 0;
    }
 
    button {
      margin: 0;
      background-color: #fff;
      border: 1px solid #c0c5cc;
      border-radius: 2px;
    }
 
    .number {
      background-color: #fff;
 
      &:not(.disabled):hover {
        color: #0065ff;
      }
 
      &:not(.disabled).active {
        background-color: #0065ff;
        color: #fff;
      }
    }
 
    .el-input .el-input__inner {
      padding-left: 0;
 
      &:hover,
      &:focus {
        border-color: #0065ff;
      }
    }
 
    .el-pagination__jump {
      margin-left: 12px;
      .el-pagination__editor {
        width: 37px;
        input {
          width: 32px;
        }
      }
    }
  }
}
</style>