报表上报模块修改

src/views/intelligentReporting/existing.vue

@@ -1,217 +1,235 @@
 <template>
-    <div class="existingPage" :class="!theme ? 'themeDark' : 'themeLight'">
-        <p class="tableTit">已有脚本</p>
-        <el-table :data="tableData2" highlight-current-row :height="height" @current-change="handleCurrentChange"
-            ref="singleTableRef">
-            <el-table-column label="脚本名称">
-                <template #default="scope">
-                    <el-tag type="primary">{{ scope.row.scriptName}}</el-tag>
-                    <!-- <el-button type="warning" round>{{ scope.row.scriptName}}</el-button> -->
-                </template>
-            </el-table-column>
-            <el-table-column align="right">
-                <template #default="scope">
-                    <el-button @click="openDetil(scope.row)">编辑</el-button>
-                    <el-button style="margin-right:10px" type="danger" @click="deleteRow(scope.row)">删除</el-button>
-                </template>
-            </el-table-column>
-        </el-table>
+  <div class="existingPage" :class="!theme ? 'themeDark' : 'themeLight'">
+    <p class="tableTit">已有脚本</p>
+    <el-table
+      :data="tableData2"
+      highlight-current-row
+      :height="height"
+      @current-change="handleCurrentChange"
+      ref="singleTableRef"
+    >
+      <el-table-column label="脚本名称">
+        <template #default="scope">
+          <el-tag type="primary">{{ scope.row.scriptName }}</el-tag>
+          <!-- <el-button type="warning" round>{{ scope.row.scriptName}}</el-button> -->
+        </template>
+      </el-table-column>
+      <el-table-column align="right">
+        <template #default="scope">
+          <el-button
+            :type="`${$store.state.theme ? 'primary' : ''}`"
+            @click="openDetil(scope.row)"
+            >编辑</el-button
+          >
+          <el-button
+            style="margin-right: 10px"
+            type="danger"
+            @click="deleteRow(scope.row)"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+  <el-dialog
+    title="详情"
+    custom-class="windLifeDialog"
+    v-model="dialogVisible"
+    width="1000px"
+    :close-on-click-modal="false"
+  >
+    <div class="periodFrom">
+      <div style="margin-bottom: 12px">
+        <el-input v-model="scriptname" style="width: 500px">
+          <template #prepend>输入脚本名称：</template>
+        </el-input>
+        <el-button type="primary" @click="saveJson" style="margin-left: 10px"
+          >保存脚本</el-button
+        >
+      </div>
+      <el-table :data="editTable" :height="listHeight">
+        <el-table-column type="index" width="30" />
+        <el-table-column label="脚本步骤">
+          <template #default="scope">
+            <el-input
+              v-model="scope.row.beforeText"
+              v-if="scope.row.before && scope.row.before !== ''"
+              style="width: 419px"
+            >
+              <template #prepend>{{ scope.row.before }}</template>
+            </el-input>
+            <el-input
+              v-model="scope.row.behindText"
+              v-if="scope.row.behind && scope.row.behind !== ''"
+              style="width: 250px"
+            >
+              <template #prepend>{{ scope.row.behind }}</template>
+            </el-input>
+            <el-button v-if="scope.row.scriptName !== ''" type="warning" round
+              >{{ scope.row.scriptName }}
+            </el-button>
+          </template>
+        </el-table-column>
+        <el-table-column align="right" width="80">
+          <template #default="scope">
+            <el-button type="danger" @click="handleDelete(scope.$index)"
+              >删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
     </div>
-    <el-dialog title="详情" custom-class="windLifeDialog" v-model="dialogVisible" width="1000px"
-        :close-on-click-modal="false">
-        <div class="periodFrom">
-            <div style="margin-bottom: 12px">
-                <el-input v-model="scriptname" style="width: 500px">
-                    <template #prepend>输入脚本名称：</template>
-                </el-input>
-                <el-button type="primary" @click="saveJson" style="margin-left: 10px">保存脚本</el-button>
-            </div>
-            <el-table :data="editTable" :height="listHeight">
-                <el-table-column type="index" width="30" />
-                <el-table-column label="脚本步骤">
-                    <template #default="scope">
-                        <el-input v-model="scope.row.beforeText" v-if="scope.row.before && scope.row.before !==''"
-                            style="width: 419px">
-                            <template #prepend>{{ scope.row.before }}</template>
-                        </el-input>
-                        <el-input v-model="scope.row.behindText" v-if="scope.row.behind && scope.row.behind !==''"
-                            style="width: 250px">
-                            <template #prepend>{{ scope.row.behind }}</template>
-                        </el-input>
-                        <el-button v-if="scope.row.scriptName !==''" type="warning" round>{{ scope.row.scriptName}}
-                        </el-button>
-                    </template>
-                </el-table-column>
-                <el-table-column align="right" width="80">
-                    <template #default="scope">
-                        <el-button type="danger" @click="handleDelete(scope.$index)">删除
-                        </el-button>
-                    </template>
-                </el-table-column>
-            </el-table>
-        </div>
-    </el-dialog>
+  </el-dialog>
 </template>
 
 <script>
-    import {
-        read,
-        save,
-        updateScript,
-        deleteScript
-    } from "@/api/report";
-    export default {
-        props: {
-            height: {
-                type: String,
-                default: () => {
-                    return '';
-                },
-            },
-            theme: {
-                type: String,
-                default: () => {
-                    return '';
-                },
-            },
-        },
-        data() {
-            return {
-                listHeight: document.documentElement.clientHeight - 220,
-                tableData2: [],
-                childCurrentRow: {},
-                dialogVisible: false,
-                scriptname: '',
-                editTable: []
-            }
-        },
-        mounted() {
-            this.getData()
-        },
-        methods: {
-            getData() {
-                read().then(res => {
-                    console.log("res:", res.data)
-                    this.$emit("getExistingData", res.data)
-                    this.tableData2 = res.data
-                });
-            },
-            handleCurrentChange(val) {
-                this.$emit("getExistingData", val)
-                this.childCurrentRow = val;
-                //清除父组件的行选择
-                this.tableRow()
-                this.setTableRow(val)
-            },
-            setTableRow(row) {
-                this.$refs.singleTableRef.setCurrentRow(row)
-            },
-            tableRow() {
-
-            },
-            handleDelete(index) {
-                this.editTable.splice(index, 1)
-            },
-            openDetil(row) {
-                this.scriptObj = row
-                this.dialogVisible = true
-                this.scriptname = row.scriptName
-                this.editTable = row.scripts
-            },
-            deleteRow(row) {
-                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
-                    confirmButtonText: '确定',
-                    cancelButtonText: '取消',
-                    type: 'warning'
-                }).then(() => {
-                    let that = this
-                    let params = {
-                        id: row.id
-                    }
-                    deleteScript(params).then(res => {
-                        if (res.code === 0) {
-                            that.$message({
-                                message: res.msg,
-                                type: 'success'
-                            });
-                            that.getData()
-                        }
-                    });
-                })
-            },
-            saveJson() {
-                let that = this
-                let params = {
-                    id: that.scriptObj.id,
-                    scriptName: that.scriptname,
-                    scripts: that.editTable
-                }
-                updateScript(params).then(res => {
-                    if (res.code === 0) {
-                        that.$message({
-                            message: res.msg,
-                            type: 'success'
-                        });
-                        that.dialogVisible = false
-                        that.getData()
-                    }
-                });
-            },
+import { read, save, updateScript, deleteScript } from "@/api/report";
+export default {
+  props: {
+    height: {
+      type: String,
+      default: () => {
+        return "";
+      },
+    },
+    theme: {
+      type: String,
+      default: () => {
+        return "";
+      },
+    },
+  },
+  data() {
+    return {
+      listHeight: document.documentElement.clientHeight - 220,
+      tableData2: [],
+      childCurrentRow: {},
+      dialogVisible: false,
+      scriptname: "",
+      editTable: [],
+    };
+  },
+  mounted() {
+    this.getData();
+  },
+  methods: {
+    getData() {
+      read().then((res) => {
+        console.log("res:", res.data);
+        this.$emit("getExistingData", res.data);
+        this.tableData2 = res.data;
+      });
+    },
+    handleCurrentChange(val) {
+      this.$emit("getExistingData", val);
+      this.childCurrentRow = val;
+      //清除父组件的行选择
+      this.tableRow();
+      this.setTableRow(val);
+    },
+    setTableRow(row) {
+      this.$refs.singleTableRef.setCurrentRow(row);
+    },
+    tableRow() {},
+    handleDelete(index) {
+      this.editTable.splice(index, 1);
+    },
+    openDetil(row) {
+      this.scriptObj = row;
+      this.dialogVisible = true;
+      this.scriptname = row.scriptName;
+      this.editTable = row.scripts;
+    },
+    deleteRow(row) {
+      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      }).then(() => {
+        let that = this;
+        let params = {
+          id: row.id,
+        };
+        deleteScript(params).then((res) => {
+          if (res.code === 0) {
+            that.$message({
+              message: res.msg,
+              type: "success",
+            });
+            that.getData();
+          }
+        });
+      });
+    },
+    saveJson() {
+      let that = this;
+      let params = {
+        id: that.scriptObj.id,
+        scriptName: that.scriptname,
+        scripts: that.editTable,
+      };
+      updateScript(params).then((res) => {
+        if (res.code === 0) {
+          that.$message({
+            message: res.msg,
+            type: "success",
+          });
+          that.dialogVisible = false;
+          that.getData();
         }
-    }
+      });
+    },
+  },
+};
 </script>
 
 
 
 <style scoped lang="less">
-    .existingPage {
-
-        .tableTit {
-            line-height: 40px;
-            margin-left: 10px;
-        }
-    }
-
-    .themeDark {
-        .tableTit {
-            font-size: 16px;
-            color: #f8f9ff;
+.existingPage {
+  .tableTit {
+    line-height: 40px;
+    margin-left: 10px;
+  }
+}
+
+.themeDark {
+  .tableTit {
+    font-size: 16px;
+    color: #f8f9ff;
+  }
+}
+
+.themeLight {
+  background: #f8f9ff;
+
+  .tableTit {
+    font-size: 16px;
+    color: #9093a6;
+  }
+}
+
+.el-overlay {
+  .startToDia {
+    .el-dialog__body {
+      padding: 30px 60px 30px 20px !important;
+
+      .periodFrom {
+        .el-select,
+        .el-input {
+          width: 100%;
         }
-    }
-
-    .themeLight {
-        background: #f8f9ff;
 
-        .tableTit {
-            font-size: 16px;
-            color: #9093a6;
+        .el-input {
+          height: 30px;
         }
-    }
-
-    .el-overlay {
-        .startToDia {
-            .el-dialog__body {
-                padding: 30px 60px 30px 20px !important;
-
-
+      }
 
-                .periodFrom {
-
-                    .el-select,
-                    .el-input {
-                        width: 100%;
-                    }
-
-                    .el-input {
-                        height: 30px;
-                    }
-                }
-
-                .flowSty {
-                    width: 100%;
-                    height: 70vh;
-                }
-            }
-        }
+      .flowSty {
+        width: 100%;
+        height: 70vh;
+      }
     }
+  }
+}
 </style>

src/views/intelligentReporting/reporting/index.vue

@@ -1,252 +1,283 @@
 <template>
-    <div class="intellReport" :class="!theme ? 'themeDark' : 'themeLight'">
-        <el-row :gutter="50" justify="space-evenly" :style="pageHeight">
-            <el-col :span="9" class="warn-table">
-                <existing @getExistingData="getData" :height="tableHeight" :theme="theme" />
-            </el-col>
-            <el-col :span="1" style="text-align: center;">
-                <div :style="btnHeight">
-                    <!-- <el-button type="primary" @click="onAddItem1">
+  <div class="intellReport" :class="!theme ? 'themeDark' : 'themeLight'">
+    <el-row :gutter="50" justify="space-evenly" :style="pageHeight">
+      <el-col :span="9" class="warn-table">
+        <existing
+          @getExistingData="getData"
+          :height="tableHeight"
+          :theme="theme"
+        />
+      </el-col>
+      <el-col :span="1" style="text-align: center">
+        <div :style="btnHeight">
+          <!-- <el-button type="primary" @click="onAddItem1">
                         <el-icon class="el-icon--right">
                             <ArrowRight />
                         </el-icon>
                     </el-button> -->
-                    <img src="../../../assets/images/left.png" @click="onAddItem1" alt="">
-                </div>
-                <div :style="btnHeight">
-                    <!-- <el-button type="primary" @click="onAddItem2">
+          <img
+            src="../../../assets/images/left.png"
+            @click="onAddItem1"
+            alt=""
+          />
+        </div>
+        <div :style="btnHeight">
+          <!-- <el-button type="primary" @click="onAddItem2">
                         <el-icon class="el-icon--right">
                             <ArrowRight />
                         </el-icon>
                     </el-button> -->
-                    <img src="../../../assets/images/left.png" @click="onAddItem2" alt="">
-                </div>
-            </el-col>
-            <el-col :span="13">
-                <div class="listTop warn-table">
-                    <div style="display: flex;justify-content: space-between;">
-                        <p class="tableTit">脚本列表</p>
-                        <el-button class="run-all-script" type="primary" :disabled="btnloading" @click="runAllScript">
-                            全部运行
-                        </el-button>
-                    </div>
-                    <el-table :data="tableData" :height="listHeight">
-                        <el-table-column type="index" width="30" />
-                        <el-table-column label="脚本名称">
-                            <template #default="scope">
-                                <!-- <el-button v-if="scope.row.scriptName !==''" type="warning" round>
+          <img
+            src="../../../assets/images/left.png"
+            @click="onAddItem2"
+            alt=""
+          />
+        </div>
+      </el-col>
+      <el-col :span="13">
+        <div class="listTop warn-table">
+          <div style="display: flex; justify-content: space-between">
+            <p class="tableTit">脚本列表</p>
+            <el-button
+              class="run-all-script"
+              type="primary"
+              :disabled="btnloading"
+              @click="runAllScript"
+            >
+              全部运行
+            </el-button>
+          </div>
+          <el-table :data="tableData" :height="listHeight">
+            <el-table-column type="index" width="30" />
+            <el-table-column label="脚本名称">
+              <template #default="scope">
+                <!-- <el-button v-if="scope.row.scriptName !==''" type="warning" round>
                                     {{ scope.row.scriptName}}
                                 </el-button> -->
-                                <el-tag type="primary">{{ scope.row.scriptName}}</el-tag>
-                            </template>
-                        </el-table-column>
-                        <el-table-column align="right">
-                            <template #default="scope">
-                                <el-button :disabled="btnloading" @click="handleRun(scope.$index)">运行
-                                </el-button>
-                                <el-button type="danger" @click="handleDeleteList(scope.$index)">删除
-                                </el-button>
-                            </template>
-                        </el-table-column>
-                    </el-table>
-                </div>
+                <el-tag type="primary">{{ scope.row.scriptName }}</el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column align="right">
+              <template #default="scope">
+                <el-button
+                  :type="`${$store.state.theme ? 'primary' : ''}`"
+                  :disabled="btnloading"
+                  @click="handleRun(scope.$index)"
+                  >运行
+                </el-button>
+                <el-button type="danger" @click="handleDeleteList(scope.$index)"
+                  >删除
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
 
-                <div class="listTop listBot warn-table">
-                    <p class="tableTit">每天运行一次</p>
-                    <el-table :data="tableData4" :max-height="listHeight">
-                        <el-table-column label="时间" width="300">
-                            <template #default="scope">
-                                <el-time-select v-model="scope.row.time" start="00:05" step="00:05" end="23:55"
-                                    placeholder="选择时间" />
-                            </template>
-                        </el-table-column>
-                        <el-table-column label="脚本名称">
-                            <template #default="scope">
-                                <!-- <el-button v-if="scope.row.scriptName !==''" type="warning" round>
+        <div class="listTop listBot warn-table">
+          <p class="tableTit">每天运行一次</p>
+          <el-table :data="tableData4" :max-height="listHeight">
+            <el-table-column label="时间" width="300">
+              <template #default="scope">
+                <el-time-select
+                  v-model="scope.row.time"
+                  start="00:05"
+                  step="00:05"
+                  end="23:55"
+                  placeholder="选择时间"
+                />
+              </template>
+            </el-table-column>
+            <el-table-column label="脚本名称">
+              <template #default="scope">
+                <!-- <el-button v-if="scope.row.scriptName !==''" type="warning" round>
                                     {{ scope.row.scriptName}}
                                 </el-button> -->
-                                <el-tag type="primary">{{ scope.row.scriptName}}</el-tag>
-                            </template>
-                        </el-table-column>
-                        <el-table-column align="right">
-                            <template #default="scope">
-                                <el-button v-if="!scope.row.isRunning" @click="dayRun(scope.row)">运行
-                                </el-button>
-                                <el-button v-else disabled>运行中
-                                </el-button>
-                                <el-button type="danger" @click="handleDeleteDayRun(scope.$index, scope.row)">删除
-                                </el-button>
-                            </template>
-                        </el-table-column>
-                    </el-table>
-                </div>
-            </el-col>
-        </el-row>
-    </div>
-
+                <el-tag type="primary">{{ scope.row.scriptName }}</el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column align="right">
+              <template #default="scope">
+                <el-button
+                  :type="`${$store.state.theme ? 'primary' : ''}`"
+                  v-if="!scope.row.isRunning"
+                  @click="dayRun(scope.row)"
+                  >运行
+                </el-button>
+                <el-button v-else disabled>运行中 </el-button>
+                <el-button
+                  type="danger"
+                  @click="handleDeleteDayRun(scope.$index, scope.row)"
+                  >删除
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
 </template>
 <script>
-    import {
-        run,
-        dayRunScript,
-        scriptTimedrunlist,
-        deleteTimedrunScript
-    } from '@/api/report';
-    import existing from "../existing.vue";
-    export default {
-        components: {
-            existing
-        },
-        data() {
-            return {
-                childCurrentRow: [],
-                tableData: [],
-                tableData4: [],
-                timeValue: '',
-                theme: null,
-                tableHeight: document.documentElement.clientHeight - 145,
-                listHeight: (document.documentElement.clientHeight - 210) / 2,
-                btnloading: false
-            }
-        },
-        watch: {
-            '$store.state.theme': {
-                handler: function (newVal, oldVal) {
-                    this.theme = newVal
-                },
-                immediate: true
-            }
-        },
-        computed: {
-            pageHeight() {
-                return {
-                    'height': document.documentElement.clientHeight - 115 + 'px'
-                }
-            },
-            btnHeight() {
-                return {
-                    'height': (document.documentElement.clientHeight - 160) / 4 + 'px',
-                    'padding-top': (document.documentElement.clientHeight - 160) / 4 + 'px'
-                }
-            }
-        },
-        mounted() {
-            this.getDayRunlist()
-        },
-        methods: {
-            //获取每日运行列表数据
-            getDayRunlist() {
-                let that = this
-                scriptTimedrunlist().then(datas => {
-                    if (datas) {
-                        that.tableData4 = datas.data
-                    }
-                })
-            },
-            onAddItem1() {
-                this.tableData.push(this.childCurrentRow)
-            },
-            onAddItem2() {
-                this.tableData4.push(this.childCurrentRow)
-            },
-            runAllScript() {
-                this.btnloading = true
-                run(this.tableData).then(res => {
-                    console.log(res)
-                    this.btnloading = false
-                });
-            },
-            handleRun(index) {
-                this.btnloading = true
-                run(new Array(this.tableData[index])).then(res => {
-                    console.log(res)
-                    this.btnloading = false
-                })
-            },
-            handleDeleteList(index) {
-                this.tableData.splice(index, 1)
-            },
-            dayRun(row) {
-                let that = this
-                dayRunScript(row).then(res => {
-                    if (res.code === 0) {
-                        that.$message({
-                            message: res.msg,
-                            type: 'success'
-                        });
-                        that.getDayRunlist()
-                    }
-                });
-            },
-            handleDeleteDayRun(index, row) {
-                let that = this
-                if (!row.time) {
-                    that.tableData4.splice(index, 1)
-                } else {
-                    let params = {
-                        id: row.id
-                    }
-                    deleteTimedrunScript(params).then(res => {
-                        if (res.code === 0) {
-                            that.$message({
-                                message: res.msg,
-                                type: 'success'
-                            });
-                            that.getDayRunlist()
-                        }
-                    });
-                }
-            },
-            getData(data) {
-                console.log("data:", data)
-                this.childCurrentRow = data
-            }
+import {
+  run,
+  dayRunScript,
+  scriptTimedrunlist,
+  deleteTimedrunScript,
+} from "@/api/report";
+import existing from "../existing.vue";
+export default {
+  components: {
+    existing,
+  },
+  data() {
+    return {
+      childCurrentRow: [],
+      tableData: [],
+      tableData4: [],
+      timeValue: "",
+      theme: null,
+      tableHeight: document.documentElement.clientHeight - 145,
+      listHeight: (document.documentElement.clientHeight - 210) / 2,
+      btnloading: false,
+    };
+  },
+  watch: {
+    "$store.state.theme": {
+      handler: function (newVal, oldVal) {
+        this.theme = newVal;
+      },
+      immediate: true,
+    },
+  },
+  computed: {
+    pageHeight() {
+      return {
+        height: document.documentElement.clientHeight - 115 + "px",
+      };
+    },
+    btnHeight() {
+      return {
+        height: (document.documentElement.clientHeight - 160) / 4 + "px",
+        "padding-top": (document.documentElement.clientHeight - 160) / 4 + "px",
+      };
+    },
+  },
+  mounted() {
+    this.getDayRunlist();
+  },
+  methods: {
+    //获取每日运行列表数据
+    getDayRunlist() {
+      let that = this;
+      scriptTimedrunlist().then((datas) => {
+        if (datas) {
+          that.tableData4 = datas.data;
         }
-    }
+      });
+    },
+    onAddItem1() {
+      this.tableData.push(this.childCurrentRow);
+    },
+    onAddItem2() {
+      this.tableData4.push(this.childCurrentRow);
+    },
+    runAllScript() {
+      this.btnloading = true;
+      run(this.tableData).then((res) => {
+        console.log(res);
+        this.btnloading = false;
+      });
+    },
+    handleRun(index) {
+      this.btnloading = true;
+      run(new Array(this.tableData[index])).then((res) => {
+        console.log(res);
+        this.btnloading = false;
+      });
+    },
+    handleDeleteList(index) {
+      this.tableData.splice(index, 1);
+    },
+    dayRun(row) {
+      let that = this;
+      dayRunScript(row).then((res) => {
+        if (res.code === 0) {
+          that.$message({
+            message: res.msg,
+            type: "success",
+          });
+          that.getDayRunlist();
+        }
+      });
+    },
+    handleDeleteDayRun(index, row) {
+      let that = this;
+      if (!row.time) {
+        that.tableData4.splice(index, 1);
+      } else {
+        let params = {
+          id: row.id,
+        };
+        deleteTimedrunScript(params).then((res) => {
+          if (res.code === 0) {
+            that.$message({
+              message: res.msg,
+              type: "success",
+            });
+            that.getDayRunlist();
+          }
+        });
+      }
+    },
+    getData(data) {
+      console.log("data:", data);
+      this.childCurrentRow = data;
+    },
+  },
+};
 </script>
 
 <style scoped lang="less">
-    .intellReport {
-        .listTop {
-            margin-bottom: 20px;
-
-            .tableTit {
-                line-height: 40px;
-                margin-left: 10px;
-            }
-        }
+.intellReport {
+  .listTop {
+    margin-bottom: 20px;
 
-        .run-all-script {
-            position: relative;
-            right: 10px;
-            top: 10px;
-        }
+    .tableTit {
+      line-height: 40px;
+      margin-left: 10px;
     }
+  }
 
-    .themeDark {
-        padding: 20px 0;
-        background: #161f1e;
-        border-radius: 10px;
+  .run-all-script {
+    position: relative;
+    right: 10px;
+    top: 10px;
+  }
+}
 
-        .tableTit {
-            font-size: 16px;
-            color: #f8f9ff;
-        }
-    }
+.themeDark {
+  padding: 20px 0;
+  background: #161f1e;
+  border-radius: 10px;
 
-    .themeLight {
-        padding: 20px 0;
-        background: #edeffb;
-        border-radius: 10px;
+  .tableTit {
+    font-size: 16px;
+    color: #f8f9ff;
+  }
+}
 
-        .listTop {
-            background: #f8f9ff;
+.themeLight {
+  padding: 20px 0;
+  background: #edeffb;
+  border-radius: 10px;
 
-            .tableTit {
-                font-size: 16px;
-                color: #9093a6;
-            }
-        }
+  .listTop {
+    background: #f8f9ff;
 
+    .tableTit {
+      font-size: 16px;
+      color: #9093a6;
     }
+  }
+}
 </style>