From 7c20fd15b7fbc2bd5756b39d5ab655cc849ffcc3 Mon Sep 17 00:00:00 2001
From: zhanghua <314079846@qq.com>
Date: 星期三, 16 七月 2025 22:39:23 +0800
Subject: [PATCH] 添加时间筛选

---
 src/views/operate/fivepack/threepack/components/content.vue |  868 +++++++++++++++++++++++++++++++++++++++++++++++----------
 1 files changed, 718 insertions(+), 150 deletions(-)

diff --git a/src/views/operate/fivepack/threepack/components/content.vue b/src/views/operate/fivepack/threepack/components/content.vue
index c2d6a7b..eaf9c3b 100644
--- a/src/views/operate/fivepack/threepack/components/content.vue
+++ b/src/views/operate/fivepack/threepack/components/content.vue
@@ -1,122 +1,535 @@
 <template>
-    <div class="content">
-      <header>
-        <div class="headerContent">
-          <div class="find">
-            <div class="search-item">
-              <span>杈撳叆鏌ヨ:</span>
-              <el-input style="flex: 1" :placeholder="isStorePage() ? '搴楅摵锛堥棬搴楋級鍚嶇О' : '璇疯緭鍏ュ簵閾虹紪鍙�'" v-model="storeCode" />
-            </div>
-            <div class="search-item">
-              <span>搴楅摵鐘舵��:</span>
-              <el-select v-model="storeStatus" placeholder="閫夋嫨搴楅摵鐘舵��">
-                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
-              </el-select>
-            </div>
-            <div class="findBtn">
-              <el-button type="primary" @click="search" icon="el-icon-search">鏌ヨ</el-button>
-              <el-button icon="el-icon-delete-solid" @click="handleReset">閲嶇疆</el-button>
-            </div>
+  <div class="content">
+    <header>
+      <div class="headerContent">
+        <div class="find">
+          <div class="search-item">
+            <span>杈撳叆鏌ヨ:</span>
+            <el-input
+              style="flex: 1; margin-left: 15px"
+              :placeholder="
+                isStorePage() ? '搴楅摵锛堥棬搴楋級鍚嶇О' : '璇疯緭鍏ュ簵閾虹紪鍙�'
+              "
+              v-model="storeCode"
+            />
           </div>
-          <el-button v-if="isStorePage()" type="primary" icon="el-icon-plus" @click="handleView(null, 'create')">娣诲姞</el-button>
+          <div class="search-item">
+            <span>搴楅摵鐘舵��:</span>
+            <el-select
+              v-model="storeStatus"
+              style="margin-left: 15px"
+              placeholder="閫夋嫨搴楅摵鐘舵��"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </div>
+          <div class="findBtn">
+            <el-button type="primary" @click="search" icon="el-icon-search"
+              >鏌ヨ</el-button
+            >
+            <el-button icon="el-icon-delete-solid" @click="handleReset"
+              >閲嶇疆</el-button
+            >
+          </div>
         </div>
-      </header>
-      <main>
-        <!-- 鏁版嵁灞曠ず -->
-        <el-table ref="multipleTable"
-                  :header-cell-style="{background:'#06122c','font-size':'12px',color:'#4b9bb7','font-weight':'650','line-height':'45px'}"
-                  :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
-          <el-table-column type="selection" min-width="5">
-          </el-table-column>
-          <el-table-column prop="storeNumber" label="搴楅摵缂栧彿" min-width="10">
-          </el-table-column>
-          <el-table-column prop="storeName" label="搴楅摵鍚嶇О" min-width="10">
-          </el-table-column>
-          <el-table-column prop="owner" label="搴楅摵鑱旂郴浜�" min-width="10">
-          </el-table-column>
-          <el-table-column prop="contact" label="搴楅摵鑱旂郴鐢佃瘽" min-width="10">
-          </el-table-column>
-          <el-table-column prop="storeAddress" label="搴楅摵璇︾粏鍦板潃" min-width="10">
-          </el-table-column>
-          <el-table-column prop="videoPoint" label="鍏宠仈鎽勫儚鏈�" min-width="10">
-            <template v-if="scope.row.videoId" slot-scope="scope">
-              <span>{{ scope.row.videoPoint.name }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column prop="operation" label="鎿嶄綔" min-width="20">
-            <template slot-scope="scope">
-              <div v-if="!isStorePage()" class="operation">
-                <el-link icon="el-icon-edit" :underline="false" @click="handleView(scope.row, 'update')">缂栬緫</el-link>
-                <el-link class="leftPx" icon="el-icon-delete-solid" :underline="false" @click="handleDelete(scope.row.id)">鍒犻櫎</el-link>
-                <el-link class="leftPx" icon="el-icon-edit"  :underline="false">鎺ㄩ�佷俊鎭�</el-link>
-                <el-link class="leftPx" icon="el-icon-edit" :underline="false" @click="handleView(scope.row, 'view')">鏌ョ湅</el-link>
+        <el-button
+          v-if="isStorePage()"
+          type="primary"
+          icon="el-icon-plus"
+          class="button-addition"
+          @click="handleView(null, 'create')"
+          >娣诲姞</el-button
+        >
+      </div>
+    </header>
+    <main>
+      <!-- 鏁版嵁灞曠ず -->
+      <el-table
+        border
+        stripe
+        ref="multipleTable"
+        :header-cell-style="{
+          background: '#F5F5F5',
+          'font-weight': '650',
+          'line-height': '45px',
+        }"
+        :data="tableData"
+        style="width: 100%"
+        :row-class-name="tableRowClassName"
+        @selection-change="tableChange"
+      >
+        <el-table-column type="selection" min-width="5"> </el-table-column>
+        <el-table-column prop="storeNumber" label="搴楅摵缂栧彿" min-width="10">
+        </el-table-column>
+        <el-table-column prop="storeName" label="搴楅摵鍚嶇О" min-width="10">
+        </el-table-column>
+        <el-table-column prop="owner" label="搴楅摵鑱旂郴浜�" min-width="10">
+        </el-table-column>
+        <el-table-column prop="contact" label="搴楅摵鑱旂郴鐢佃瘽" min-width="10">
+        </el-table-column>
+        <el-table-column
+          prop="storeAddress"
+          label="搴楅摵璇︾粏鍦板潃"
+          min-width="10"
+        >
+        </el-table-column>
+        <!-- <el-table-column prop="storeScore" label="搴楅摵绉垎" min-width="10">
+        </el-table-column> -->
+        <el-table-column prop="videoPoint" label="鍏宠仈鎽勫儚鏈�" min-width="10">
+          <template v-if="scope.row.videoId" slot-scope="scope">
+            <span>{{ scope.row.videoPoint.name }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="status" label="鐘舵��" min-width="10">
+          <template slot-scope="scope">
+            <span>{{ scope.row.status == 1 ? "缁忚惀" : "鍊掗棴" }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="operation" label="鎿嶄綔" min-width="20">
+          <template slot-scope="scope">
+            <div v-if="!isStorePage()" class="operation">
+              <el-link
+                icon="el-icon-edit"
+                :underline="false"
+                @click="handleView(scope.row, 'update')"
+                >缂栬緫</el-link
+              >
+              <el-link
+                class="leftPx"
+                icon="el-icon-delete-solid"
+                :underline="false"
+                @click="handleDelete(scope.row.id)"
+                >鍒犻櫎</el-link
+              >
+              <el-link
+                class="leftPx"
+                icon="el-icon-edit"
+                :underline="false"
+                @click="sendMessage(scope.row.contact)"
+                >鎺ㄩ�佷俊鎭�</el-link
+              >
+              <el-link
+                class="leftPx"
+                icon="el-icon-edit"
+                :underline="false"
+                @click="handleScoreView(scope.row, 'view')"
+                >鏌ョ湅</el-link
+              >
+            </div>
+            <div v-else class="operation">
+              <el-link
+                icon="el-icon-edit"
+                :underline="false"
+                @click="handleView(scope.row, 'update')"
+                >缂栬緫</el-link
+              >
+              <el-link
+                class="leftPx"
+                icon="el-icon-delete-solid"
+                :underline="false"
+                @click="handleDelete(scope.row.id)"
+                >鍒犻櫎</el-link
+              >
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+      <!-- 鏌ョ湅淇敼椤甸潰 -->
+      <el-dialog
+        :visible.sync="dialogUpdate"
+        width="45%"
+        :destroy-on-close="true"
+        :title="dialogType === 'view' ? '鏌ョ湅搴楅摵淇℃伅' : '淇敼搴楅摵淇℃伅'"
+        :before-close="handleClose"
+      >
+        <updateUser
+          v-if="dialogUpdate"
+          :dialogType="dialogType"
+          :storeInfo="storeInfo"
+          :isStorePage="isStorePage()"
+          @closeDialog="closeDialog"
+        />
+      </el-dialog>
+      <!-- 鏌ョ湅淇敼椤甸潰 -->
+      <el-dialog
+        :visible.sync="dialogScore"
+        width="60%"
+        :destroy-on-close="true"
+        title="鏌ョ湅绉垎"
+        :before-close="handleCloseScoreView"
+      >
+        <scoreView v-if="dialogScore" :storeInfo="storeInfoScoreView" />
+      </el-dialog>
+      <!-- 鏂板缓娑堟伅 -->
+      <el-dialog
+        title="鏂板缓娑堟伅"
+        :destroy-on-close="true"
+        :key="dialogType"
+        :visible.sync="isShowDialog"
+        width="80%"
+        :before-close="handleConfirmClose"
+      >
+        <div class="mainContent">
+          <el-form
+            ref="user"
+            label-width="140px"
+            autoComplete="on"
+            :model="role"
+            :rules="rules"
+            label-position="right"
+          >
+            <!-- 娑堟伅鏍忕洰 -->
+            <el-form-item
+              class="optionItem"
+              label="鐭俊妯℃澘:"
+              prop="messageType"
+            >
+              <div class="message-item">
+                <div class="message-item__left">
+                  <el-select
+                    v-model="role.messageType"
+                    placeholder="璇烽�夋嫨鐭俊妯℃澘"
+                    @change="setTemplateValue"
+                  >
+                    <el-option
+                      v-for="item in colList"
+                      :key="item.id"
+                      :label="item.title"
+                      :value="item.id"
+                    >
+                    </el-option>
+                  </el-select>
+                </div>
               </div>
-              <div v-else class="operation">
-                <el-link icon="el-icon-edit" :underline="false" @click="handleView(scope.row, 'update')">缂栬緫</el-link>
-                <el-link class="leftPx" icon="el-icon-delete-solid" :underline="false"
-                         @click="handleDelete(scope.row.id)">鍒犻櫎</el-link>
+            </el-form-item>
+            <!-- 娑堟伅鏍囬 -->
+            <el-form-item class="optionItems" label="鐭俊鏍囬:" prop="head">
+              <div class="message-item__left">
+                <el-input
+                  v-model="role.head"
+                  placeholder="璇烽�夋嫨鐭俊鏍囬"
+                ></el-input>
               </div>
-            </template>
-          </el-table-column>
-        </el-table>
-        <!-- 鏌ョ湅淇敼椤甸潰 -->
-        <el-dialog :visible.sync="dialogUpdate" width="45%"
-                   :destroy-on-close="true"
-                   :title="dialogType === 'view' ? '鏌ョ湅搴楅摵淇℃伅' : '淇敼搴楅摵淇℃伅'" :before-close="handleClose">
-          <updateUser v-if="dialogUpdate" :dialogType="dialogType" :storeInfo="storeInfo" :isStorePage="isStorePage()" @closeDialog="closeDialog" />
-        </el-dialog>
-        <!-- 鍒嗛〉 -->
+            </el-form-item>
+            <!-- 鎺ユ敹瀵硅薄 -->
+            <el-form-item
+              class="optionItem"
+              label="鎺ユ敹鎵嬫満鍙�:"
+              prop="targetTo"
+            >
+              <!-- <div class="message-item__left">
+                            <el-select v-model="role.targetTo" placeholder="璇烽�夋嫨鎺ユ敹鎺ユ敹鎵嬫満鍙�" >
+                                <el-option :value="role.targetTo">
+                                    <el-tree ref="tree" :data="departList" :props="defaultProps" show-checkbox
+                                        @check="handleCheck" default-expand-all node-key="id">
+                                    </el-tree>
+                                </el-option>
+                            </el-select> -->
+              <!-- </div> -->
+              <div class="message-item__left">
+                <el-input v-model="role.phoneNumber"></el-input>
+              </div>
+            </el-form-item>
+            <!-- 娑堟伅鍐呭 -->
+            <el-form-item class="optionItem" label="娑堟伅鍐呭:" prop="body">
+              <MyEditor ref="edit"></MyEditor>
+            </el-form-item>
+
+            <el-form-item>
+              <div class="optionBtn">
+                <el-button
+                  type="primary"
+                  @click.native.prevent="handleSubmit(2)"
+                  class="btn submit"
+                  >鍙戝竷</el-button
+                >
+                <el-button
+                  class="btn cancel"
+                  @click.native.prevent="handleResetq"
+                  >閲嶇疆</el-button
+                >
+              </div>
+            </el-form-item>
+          </el-form>
+        </div>
+      </el-dialog>
+      <div class="tools">
+        <div class="funs">
+          <div class="funsItem">
+            <el-checkbox v-model="all" @change="selectAll()">鍏ㄩ��</el-checkbox>
+          </div>
+          <div class="funsItem">
+            <el-checkbox v-model="unsame" @change="disSame(tableData)"
+              >鍙嶉��</el-checkbox
+            >
+          </div>
+          <div class="funsItem">
+            <el-select
+              v-model="myIdx"
+              placeholder="鎵归噺鎿嶄綔"
+              @change="selectChange"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+                :disabled="item.disabled"
+              >
+              </el-option>
+            </el-select>
+          </div>
+        </div>
         <div class="pagination">
-          <el-pagination background :current-page="currentPage" layout="prev, pager, next" :total="totalNum"
-                         :page-size="pageSize" @current-change="changeCurrentPage">
+          <el-pagination
+            background
+            :current-page="currentPage"
+            layout="prev, pager, next"
+            :total="totalNum"
+            :page-size="pageSize"
+            @current-change="changeCurrentPage"
+          >
           </el-pagination>
         </div>
-      </main>
-    </div>
+      </div>
+      <!-- 鍒嗛〉 -->
+      <!--      <div class="pagination">-->
+      <!--        <el-pagination-->
+      <!--          background-->
+      <!--          :current-page="currentPage"-->
+      <!--          layout="prev, pager, next"-->
+      <!--          :total="totalNum"-->
+      <!--          :page-size="pageSize"-->
+      <!--          @current-change="changeCurrentPage"-->
+      <!--        >-->
+      <!--        </el-pagination>-->
+      <!--      </div>-->
+    </main>
+  </div>
 </template>
 <script>
 import updateUser from "@/views/operate/fivepack/threepack/components/updateUser";
-import { getStoreInfoList, deleteStoreInfo } from "@/api/operate/storeManagement";
+import scoreView from "@/views/operate/fivepack/threepack/components/score";
+import {
+  getStoreInfoList,
+  deleteStoreInfo,
+} from "@/api/operate/storeManagement";
+import { sendMessageByMobileNumber } from "@/api/operate/messageManagement";
+import MyEditor from "@/components/edit";
+import SMS from "@/api/operate/SMS";
 
 export default {
-  components: { updateUser },
-
+  components: { updateUser, scoreView, MyEditor },
   created() {
     this.search();
+    this.getSMSTemplateList();
   },
 
-  props: ['model'],
+  props: ["model"],
 
   data() {
+    const validateMessageContent = (rule, value, callback) => {
+      if (!value) {
+        callback(new Error("璇疯緭鍏ョ煭淇″唴瀹�"));
+      } else {
+        callback();
+      }
+    };
     return {
+      tempList: [],
+      myIdx: 0,
+      all: false,
+      unsame: false,
       storeCode: null,
       storeStatus: null,
-      options: [{ label: '鍏ㄩ儴', value: 0 }, { label: '缁忚惀', value: 1 }, { label: '鍊掗棴', value: 2 }],
+      options: [
+        { label: "鍏ㄩ儴", value: 0 },
+        { label: "缁忚惀", value: 1 },
+        { label: "鍊掗棴", value: 2 },
+      ],
       tableData: [],
       dialogUpdate: false,
+      dialogScore: false,
       currentPage: 1,
       totalNum: 0,
       pageSize: 10,
       userInfo: null,
-      dialogType: '',
-      storeInfo: null
-    }
+      dialogType: "",
+      isShowDialog: false,
+      storeInfo: null,
+      all: false,
+      unsame: false,
+      myIdx: null,
+      storeInfoScoreView: {},
+      role: {
+        messageType: "",
+        head: "",
+        targetTo: "",
+        targetFrom: null,
+        body: "",
+        channelCode: "02",
+        phoneNumber: null,
+      },
+      rules: {
+        messageType: [
+          {
+            required: true,
+            trigger: ["blur", "change"],
+            message: "璇烽�夋嫨鐭俊妯℃澘",
+          },
+        ],
+        head: [{ required: true, trigger: "blur", message: "璇疯緭鍏ョ煭淇℃爣棰�" }],
+        body: [
+          {
+            required: true,
+            trigger: ["blur", "change"],
+            validator: validateMessageContent,
+          },
+        ],
+      },
+      colList: [],
+      departList: [],
+      typeList: [],
+      dialogCreate: false,
+      dialogView: false,
+      defaultProps: {
+        children: "children",
+        label: "departName",
+      },
+      checkedList: [],
+      tempNameArr: [],
+      info: {},
+      sendUser: "",
+    };
   },
 
   methods: {
+    // 鐩戝惉琛ㄦ牸閫変腑鐘舵��
+    tableChange(list) {
+      this.tempList = list;
+      this.all = list.length === this.tableData.length;
+    },
+    // 鎵归噺鍒犻櫎
+    mulDelete(idArr) {
+      this.$axios({
+        method: "delete",
+        url: "sccg/illegal_building/batch_delete?ids=" + idArr,
+      }).then((res) => {
+        this.getUserList();
+        this.$message({
+          message: res.message,
+          type: res.code === 200 ? "success" : "warning",
+        });
+      });
+    },
+    // 鎵ц涓嬫媺妗嗘搷浣�
+    selectChange(val) {
+      let ids = [];
+      this.tempList.forEach((item) => {
+        ids.push(item.number);
+      });
+      if (ids.length !== 0) {
+        if (val === 3) {
+          this.mulDelete(ids);
+        }
+      } else {
+        this.$message({
+          type: "warning",
+          message: "鎮ㄨ繕娌¢�変腑浠讳綍鏁版嵁",
+        });
+      }
+    },
+    // 鍏ㄩ��
+    selectAll() {
+      this.$refs.multipleTable.toggleAllSelection();
+    },
+    // 鍙嶉��
+    disSame(list) {
+      list.forEach((row) => {
+        this.$refs.multipleTable.toggleRowSelection(row);
+      });
+    },
+    // 鏂板缓/淇濆瓨娑堟伅(1:鏂板缓,0淇濆瓨娑堟伅)
+    handleSubmit(mystatus) {
+      this.role.body = this.$refs.edit.editor.txt.html();
+      this.$refs.user.validate((valid) => {
+        if (valid) {
+          const params = Object.assign({}, this.role);
+          params.targetTo = this.checkedList.join(",");
+          params.status = mystatus;
+          sendMessageByMobileNumber(params)
+            .then(() => {
+              this.$message({ type: "success", message: "鎿嶄綔鎴愬姛" });
+              this.isShowDialog = false;
+              this.role.body = "";
+              this.role.head = "";
+              this.$refs.edit.editor.txt.clear();
+              this.search();
+              this.$refs.user.resetFields();
+            })
+            .catch((err) => this.$message({ type: "error", message: err }));
+        } else {
+          this.$message.warning("璇锋鏌ュ繀濉」");
+        }
+      });
+    },
+    setTemplateValue(obj) {
+      var _this = this;
+      SMS.getSMSTemplateById(obj).then((result) => {
+        _this.role.head = result.title;
+        _this.role.body = result.body;
+        _this.$refs.edit.editor.txt.html(result.body);
+      });
+    },
+    getSMSTemplateList() {
+      SMS.getSMSTemplateList({ current: 1, pageSize: 100 })
+        .then(({ records }) => {
+          this.colList = records;
+        })
+        .catch((err) => this.$message.error(err));
+    },
+    // 纭鍏抽棴寮圭獥
+    handleConfirmClose(done) {
+      this.$confirm("纭鍏抽棴?").then(() => {
+        done();
+        this.search();
+        this.role.body = "";
+        this.role.head = "";
+        this.$refs.edit.editor.txt.clear();
+        this.search();
+        this.$refs.user.resetFields();
+      });
+    },
+    // 閲嶇疆琛ㄥ崟
+    handleResetq() {
+      this.$refs.edit.editor.txt.clear();
+      this.search();
+      this.$refs.user.resetFields();
+      this.role.body = "";
+      this.role.head = "";
+    },
+    sendMessage(val) {
+      this.isShowDialog = true;
+      this.role.phoneNumber = val;
+    },
     search() {
       const status = this.storeStatus === 0 ? null : this.storeStatus;
       getStoreInfoList({ keyword: this.storeCode, status })
-          .then(({ list, pageSize, totalPage }) => {
-            this.tableData = list;
-            this.pageSize = pageSize;
-            this.totalNum = totalPage;
-          })
-          .catch(err => this.$message({ type: 'error', message: err }));
+        .then(({ list, pageSize, totalPage }) => {
+          this.tableData = list;
+          this.pageSize = pageSize;
+          this.totalNum = totalPage;
+        })
+        .catch((err) => this.$message({ type: "error", message: err }));
     },
 
     handleReset() {
-      this.storeCode = '';
+      this.storeCode = "";
       this.storeStatus = null;
       this.search();
     },
@@ -126,16 +539,22 @@
       this.storeInfo = row;
       this.dialogType = type;
     },
+    handleScoreView(row) {
+      this.storeInfoScoreView = row;
+      this.dialogScore = true;
+    },
 
     handleDelete(id) {
       deleteStoreInfo(id)
-          .then(() => {
-            this.$message({ type: 'success', message: '鎿嶄綔鎴愬姛' });
-            this.search();
-          })
-          .catch(err => this.$message({ type: 'error', message: err }));
+        .then(() => {
+          this.$message({ type: "success", message: "鎿嶄綔鎴愬姛" });
+          this.search();
+        })
+        .catch((err) => this.$message({ type: "error", message: err }));
     },
-
+    handleCloseScoreView() {
+      this.dialogScore = false;
+    },
     handleClose() {
       this.dialogUpdate = false;
     },
@@ -159,64 +578,184 @@
     },
 
     isStorePage() {
-      return this.model === 'store';
-    }
-  }
-}
+      return this.model === "store";
+    },
+  },
+};
 </script>
 <style lang="scss" scoped>
-.content{
-    flex: 1;
-    height: 100%;
-    padding-left: 20px;
+.content {
+  flex: 1;
+  height: 100%;
+  margin-left: 5px;
+  padding-left: 20px;
+  border: 1px solid #ccc;
+  .headerContent {
+    display: flex;
+    line-height: 100px;
+    justify-content: space-between;
+    align-items: center;
 
-    .headerContent {
+    .find {
       display: flex;
+    }
+
+    .search-item {
+      display: flex;
+      padding: 10px;
+    }
+
+    .findBtn {
       line-height: 100px;
-      justify-content: space-between;
+      margin-left: 15px;
+      display: flex;
       align-items: center;
 
-      .find {
-        display: flex;
+      .el-button {
+        padding: 12px 25px;
+      }
+    }
+
+    .addBtn {
+      padding: 12px 30px;
+      margin-left: 20%;
+    }
+  }
+
+  main {
+    // background-color: #09152f;
+    margin-top: 20px;
+    padding-bottom: 50px;
+
+    .mainContent {
+      display: flex;
+      justify-content: center;
+      padding-top: 50px;
+      //&:deep(.el-dialog__title) {
+      //    color: #4b9bb7;
+      //}
+      //&::v-deep .el-form-item__label {
+      //    color: #4b9bb7;
+      //}
+      //
+      //&::v-deep .el-input__inner {
+      //    width: 400px;
+      //    background-color: #09152f;
+      //    border: 1px solid #17324c;
+      //}
+
+      .message-item__left {
+        width: 400px;
       }
 
-      .search-item {
-        display: flex;
-        padding: 10px;
-      }
-
-      .findBtn {
-        line-height: 100px;
-        margin-left: 15px;
-        display: flex;
-        align-items: center;
-
-        .el-button {
-          padding: 12px 25px;
+      .message-add {
+        &:hover {
+          cursor: pointer;
         }
       }
 
-      .addBtn {
-        padding: 12px 30px;
-        margin-left: 20%;
+      .el-form-item__content :deep(.el-select) {
+        width: 400px;
+      }
+
+      //:deep(.el-input) {
+      //    width: 400px;
+      //}
+
+      .message-item {
+        display: flex;
+
+        span {
+          margin-left: 20px;
+          color: #4b9bb7;
+        }
+      }
+
+      .message-tip {
+        margin-left: 20px;
+      }
+
+      //:deep(.el-input--suffix) {
+      //    width: 400px;
+      //}
+      //
+      //&::v-deep .el-textarea__inner {
+      //    background-color: #09152f;
+      //    border: 1px solid #17324c;
+      //}
+
+      .el-form-item__content {
+        width: 400px;
+
+        .el-select {
+          width: 100%;
+        }
+      }
+
+      .optionHandleSp {
+        display: flex;
+
+        .areaNumber,
+        .moreNumber {
+          flex: 1;
+        }
+
+        .telNumber {
+          flex: 2;
+        }
+      }
+
+      .optionBtn {
+        display: flex;
+        margin-top: 20px;
+
+        .btn {
+          padding: 12px 50px;
+        }
       }
     }
 
-    main {
-      background-color: #09152f;
-      margin-top: 20px;
-      padding-bottom: 50px;
+    .mainTitle {
+      line-height: 60px;
+    }
+    .tools {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0 20px;
 
-      .mainTitle {
-        line-height: 60px;
-      }
+      .funs {
+        display: flex;
 
-      .el-link {
-        color: #4b9bb7;
-      }
+        .funsItem {
+          line-height: 28px;
+          display: flex;
+          align-items: center;
+          border: 1px solid #ccc;
+          border-radius: 4px;
+          font-size: 12px;
+          margin-left: 10px;
 
-      .leftPx {
-        margin-left: 10px;
+          .el-checkbox {
+            width: 80px;
+            padding: 0 10px;
+          }
+
+          .el-select {
+            width: 120px;
+          }
+          &::v-deep .el-input__inner {
+            border: none;
+            // background-color: #09152f;
+          }
+          &:hover {
+            border: 1px solid #4b9bb7;
+          }
+
+          &:hover .el-checkbox {
+            color: #4b9bb7;
+          }
+        }
       }
 
       .pagination {
@@ -229,33 +768,62 @@
           &::v-deep li,
           &::v-deep .btn-prev,
           &::v-deep .btn-next {
-            background-color: #071f39;
+            // background-color: #071f39;
             color: #4b9bb7;
           }
-        }
-      }
 
-      .el-table {
-        color: #4b9bb7;
-        font-size: 10px;
-
-        &::v-deep .el-table__empty-block {
-          background-color: #09152f;
-          color: #4b9bb7;
-        }
-
-        .operation {
-          display: flex;
-
-          .el-button {
-            border: none;
-          }
-
-          span:hover {
-            cursor: pointer;
+          &::v-deep .active {
+            background-color: #409eff;
+            color: #fff;
           }
         }
       }
     }
+    .el-link {
+      color: #4b9bb7;
+    }
+
+    .leftPx {
+      margin-left: 10px;
+    }
+
+    .pagination {
+      margin-top: 50px;
+      display: flex;
+      line-height: 50px;
+      justify-content: right;
+
+      .el-pagination {
+        &::v-deep li,
+        &::v-deep .btn-prev,
+        &::v-deep .btn-next {
+          // background-color: #071f39;
+          color: #4b9bb7;
+        }
+      }
+    }
+
+    .el-table {
+      // color: #4b9bb7;
+      // font-size: 10px;
+
+      &::v-deep .el-table__empty-block {
+        // background-color: #09152f;
+        color: #4b9bb7;
+      }
+
+      .operation {
+        display: flex;
+        color: var(--operation-color);
+        .el-button {
+          border: none;
+        }
+
+        span:hover {
+          cursor: pointer;
+        }
+      }
+    }
   }
-</style>
\ No newline at end of file
+}
+</style>

--
Gitblit v1.8.0