样式修改

src/css/common.css

@@ -0,0 +1,11 @@
+body {
+    background-color: #f0f2f5;
+    margin: 0;
+}
+.el-table th.el-table__cell {
+    background-color: #eaf0f6;
+}
+.Ttable{
+    border: 1px solid #e2dcdc;
+}
+

src/main.js

@@ -3,10 +3,12 @@ import ElmentPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 import App from './App.vue'
 import router from './routes'
+import "../src/css/common.css"
+import locale from 'element-plus/es/locale/lang/zh-cn'
 
 const app = createApp(App)
 
-app.use(ElmentPlus)
+app.use(ElmentPlus, { locale })
 
 app.use(router)
 

src/views/EnergyConsumptionStatisticsReport.vue

@@ -1,58 +1,98 @@
 <template>
-    <div class="container">
-        <div class="query-container">
-            <div>
-                <span>账期:</span>
-                <el-date-picker v-model="value2" type="month" placeholder="Pick a month" />
-                <el-button type="primary">查询</el-button>
-            </div>
-        </div>
-        <div>
-            <div>
-                <span>节能减排</span>
-            </div>
-            <div>
-                <el-table :data="tableData" stripe style="width: 100%;">
-                    <el-table-column prop="smonth" label="账期" />
-                    <el-table-column prop="display_name" label="文件名称" />
-                    <el-table-column label="操作">
-                        <template #default="scope">
-                            <el-button type="primary" plain>下载</el-button>
-                        </template>
-                    </el-table-column>
-                </el-table>
-            </div>
-        </div>
+  <div class="container">
+    <div class="query-container">
+      <div>
+        <span class="formTitle">账期:</span>
+        <el-date-picker
+          v-model="value2"
+          type="month"
+          value-format="yyyyMM"
+          placeholder="请选择账期"
+        />
+        <el-button type="primary" class="btn">查询</el-button>
+      </div>
     </div>
+    <div class="content">
+      <div>
+        <div class="contentTitle">节能减排</div>
+      </div>
+      <div>
+        <el-table :data="tableData" stripe style="width: 100%" border
+        class="Ttable"
+        :cell-style="{borderColor: '#ebeef5'}"
+        :header-cell-style="{borderColor: '#ebeef5'}"
+        >
+          <el-table-column prop="smonth" align="center" label="账期" />
+          <el-table-column
+            prop="display_name"
+            align="center"
+            label="文件名称"
+          />
+          <el-table-column label="操作" align="center">
+            <template #default="scope">
+              <el-button type="primary" plain size="small">下载</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+  </div>
 </template>
 
-<script setup>
-const tableData = [
-    {
-        smonth: '202401',
-        display_name: 'report_205_202401.xls',
-    },
-    {
-        date: '202401',
-        display_name: 'report_IDC_202401.xlsx',
-    },
-    {
-        date: '202401',
-        display_name: 'report_节能减排报表_202401.xlsx',
-    },
-]
+<script>
+export default {
+  data() {
+    return {
+      value2: "",
+      tableData: [
+        {
+          smonth: "202401",
+          display_name: "report_205_202401.xls",
+        },
+        {
+          smonth: "202401",
+          display_name: "report_IDC_202401.xlsx",
+        },
+        {
+          smonth: "202401",
+          display_name: "report_节能减排报表_202401.xlsx",
+        },
+      ],
+    };
+  },
+};
 </script>
 
 <style lang="css" scoped>
 .container {
-    /* TODO 这里的背景色应该占满整个屏幕，并且不需要有滚动条 */
-    background-color: #F0F2F5;
+  /* TODO 这里的背景色应该占满整个屏幕，并且不需要有滚动条 */
+  /* background-color: #f0f2f5; */
+  padding: 10px;
 }
 
 .query-container {
-    background-color: #FFFFFF;
-    height: 60px;
-    margin: 10px;
-    vertical-align: middle;
+  background-color: #ffffff;
+  height: 60px;
+  /* margin: 10px; */
+  vertical-align: middle;
+  line-height: 60px;
+  padding: 0 20px;
+}
+.query-container .formTitle {
+  margin-right: 10px;
+}
+.query-container .btn {
+  margin-left: 10px;
+}
+.content {
+    padding: 0 15px 15px;
+}
+.contentTitle {
+  width: 100%;
+  border-left: 5px solid #409eff;
+  padding-left: 10px;
+  height: 20px;
+  line-height: 20px;
+  margin: 30px 0 10px;
 }
 </style>