From f66bea2df4423a5d595ce737c998af655e0c4919 Mon Sep 17 00:00:00 2001 From: zhanghua <314079846@qq.com> Date: 星期二, 08 十一月 2022 16:55:22 +0800 Subject: [PATCH] bug修改 --- src/views/systemSetting/baseSetting/user/components/main/index.vue | 1031 +++++++++++++++++++++++++++++++-------------------------- 1 files changed, 562 insertions(+), 469 deletions(-) diff --git a/src/views/systemSetting/baseSetting/user/components/main/index.vue b/src/views/systemSetting/baseSetting/user/components/main/index.vue index 4ccec1b..7909708 100644 --- a/src/views/systemSetting/baseSetting/user/components/main/index.vue +++ b/src/views/systemSetting/baseSetting/user/components/main/index.vue @@ -1,508 +1,601 @@ <template> - <main> - <div class="mainContent"> - <!-- 鏁版嵁灞曠ず --> - <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" - @selection-change="tableChange"> - <el-table-column type="selection" min-width="5"> - </el-table-column> - <el-table-column label="鐢ㄦ埛ID" min-width="6"> - <template slot-scope="scope">{{ scope.row.id }}</template> - </el-table-column> - <el-table-column prop="nickName" label="鐢ㄦ埛鍚嶇О" min-width="10"> - </el-table-column> - <el-table-column prop="username" label="鎵�灞炲鍚�" min-width="8"> - </el-table-column> - <el-table-column prop="mobile" label="鑱旂郴鏂瑰紡" min-width="7"> - </el-table-column> - <el-table-column prop="note" label="鎵�灞炶鑹�" min-width="8"> - <template slot-scope="scope"> - <span>{{filterRole(scope.row.roles)}}</span> - </template> - </el-table-column> - <el-table-column prop="departName" label="鎵�灞為儴闂�" min-width="8"> - </el-table-column> - <el-table-column prop="jobTitle" label="鎵�灞炶亴鍔�" min-width="8"> - </el-table-column> - <el-table-column prop="createTime" label="鍒涘缓鏃堕棿" min-width="10"> - <template slot-scope="scope"> - <span>{{changeTime(scope.row)}}</span> - </template> - </el-table-column> - <el-table-column prop="status" label="鍚敤" min-width="5"> - <template slot-scope="scope"> - <!-- @change="handleChangeStatus(scope.row)" --> - <el-switch class="switchStyle" v-model="scope.row.status" - active-color="#3fef9a" inactive-color="#000212" disabled> - </el-switch> - </template> - </el-table-column> - <el-table-column prop="operation" label="鎿嶄綔" min-width="20"> - <template slot-scope="scope"> - <div class="operation"> - <span @click="handleChangeRole(scope.row,'role')">淇敼瑙掕壊</span> - <span class="line">|</span> - <span @click="handleFind(scope.row)">鏌ョ湅</span> - <span class="line">|</span> - <span @click="handleChangeRole(scope.row,'password')">淇敼瀵嗙爜</span> - <span class="line">|</span> - <span @click="handleDelete(scope.row)">鍒犻櫎</span> - <span class="line">|</span> - <span @click="handleChangeRole(scope.row,'depart')">淇敼閮ㄩ棬</span> - </div> - </template> - </el-table-column> - </el-table> - <!-- 鏌ョ湅椤甸潰 --> - <el-dialog :visible.sync="dialogView" width="45%" v-if="dialogView" - title="鏌ョ湅鐢ㄦ埛淇℃伅"> - <MyView :userInfo=userInfo></MyView> - </el-dialog> - <!-- 淇敼椤甸潰 --> - <el-dialog :visible.sync="dialogUpdate" width="45%" v-if="dialogUpdate" - :title="updateFlag ? flag.role ? '淇敼鐢ㄦ埛瑙掕壊淇℃伅' : flag.depart ? '淇敼鐢ㄦ埛閮ㄩ棬淇℃伅': '淇敼鐢ㄦ埛瀵嗙爜' :''" - :before-close="handleClose"> - <updateUser :updateFlag="updateFlag" :userInfo=userInfo :flag=flag @closeDialog="closeDialog" - :getUserList="getUserList" v-if="!flag.password" /> - <MyPwd v-else :userInfo=userInfo @closeDialog="closeDialog"></MyPwd> - </el-dialog> - <!-- tools --> - <div class="tools"> - <div class="funs"> - <div class="funsItem funs-sp"> - <el-checkbox v-model="all" @change="selectAll()">鍏ㄩ��</el-checkbox> - </div> - <div class="funsItem funs-sp"> - <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" @prev-click="handlePrev" - @next-click="handleNext"> - </el-pagination> - </div> + <main> + <div class="mainContent"> + <!-- 鏁版嵁灞曠ず --> + <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" + @selection-change="tableChange" + > + <el-table-column type="selection" min-width="5"> </el-table-column> + <el-table-column label="鐢ㄦ埛ID" min-width="6"> + <template slot-scope="scope">{{ scope.row.id }}</template> + </el-table-column> + <el-table-column prop="nickName" label="鐢ㄦ埛鍚嶇О" min-width="8"> + </el-table-column> + <el-table-column prop="username" label="鎵�灞炲鍚�" min-width="6"> + </el-table-column> + <el-table-column prop="mobile" label="鑱旂郴鏂瑰紡" min-width="7"> + </el-table-column> + <el-table-column prop="note" label="鎵�灞炶鑹�" min-width="10"> + <template slot-scope="scope"> + <span>{{ filterRole(scope.row.roles) }}</span> + </template> + </el-table-column> + <el-table-column prop="departName" label="鎵�灞為儴闂�" min-width="10"> + <template slot-scope="scope"> + <span>{{ filterDepart(scope.row.depart) }}</span> + </template> + </el-table-column> + <el-table-column prop="jobTitle" label="鎵�灞炶亴鍔�" min-width="8"> + </el-table-column> + <el-table-column prop="createTime" label="鍒涘缓鏃堕棿" min-width="10"> + <template slot-scope="scope"> + <span>{{ changeTime(scope.row) }}</span> + </template> + </el-table-column> + <el-table-column prop="status" label="鍚敤" min-width="5"> + <template slot-scope="scope"> + <!-- @change="handleChangeStatus(scope.row)" --> + <el-switch + class="switchStyle" + v-model="scope.row.status" + active-color="#3fef9a" + inactive-color="#000212" + disabled + > + </el-switch> + </template> + </el-table-column> + <el-table-column prop="operation" label="鎿嶄綔" min-width="20"> + <template slot-scope="scope"> + <div class="operation"> + <span @click="handleChangeRole(scope.row, 'role')">淇敼瑙掕壊</span> + <span class="line">|</span> + <span @click="handleFind(scope.row)">鏌ョ湅</span> + <span class="line">|</span> + <span @click="handleChangeRole(scope.row, 'password')" + >淇敼瀵嗙爜</span + > + <span class="line">|</span> + <span @click="handleDelete(scope.row)">鍒犻櫎</span> + <span class="line">|</span> + <span @click="handleChangeRole(scope.row, 'depart')" + >淇敼閮ㄩ棬</span + > </div> + </template> + </el-table-column> + </el-table> + <!-- 鏌ョ湅椤甸潰 --> + <el-dialog + :visible.sync="dialogView" + width="45%" + v-if="dialogView" + title="鏌ョ湅鐢ㄦ埛淇℃伅" + > + <MyView :userInfo="userInfo"></MyView> + </el-dialog> + <!-- 淇敼椤甸潰 --> + <el-dialog + :visible.sync="dialogUpdate" + width="45%" + v-if="dialogUpdate" + :title=" + updateFlag + ? flag.role + ? '淇敼鐢ㄦ埛瑙掕壊淇℃伅' + : flag.depart + ? '淇敼鐢ㄦ埛閮ㄩ棬淇℃伅' + : '淇敼鐢ㄦ埛瀵嗙爜' + : '' + " + :before-close="handleClose" + > + <updateUser + :updateFlag="updateFlag" + :userInfo="userInfo" + :flag="flag" + @closeDialog="closeDialog" + :getUserList="getUserList" + v-if="!flag.password" + /> + <MyPwd v-else :userInfo="userInfo" @closeDialog="closeDialog"></MyPwd> + </el-dialog> + <!-- tools --> + <div class="tools"> + <div class="funs"> + <div class="funsItem funs-sp"> + <el-checkbox v-model="all" @change="selectAll()">鍏ㄩ��</el-checkbox> + </div> + <div class="funsItem funs-sp"> + <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> - </main> + <div class="pagination"> + <el-pagination + background + :current-page="currentPage" + layout="prev, pager, next" + :total="totalNum" + :page-size="pageSize" + @current-change="changeCurrentPage" + @prev-click="handlePrev" + @next-click="handleNext" + > + </el-pagination> + </div> + </div> + </div> + </main> </template> <script> -import helper from '@/utils/mydate' -import updateUser from '../updateUser'; -import MyPwd from '../password' -import MyView from '../myView' +import helper from "@/utils/mydate"; +import updateUser from "../updateUser"; +import MyPwd from "../password"; +import MyView from "../myView"; export default { - components: { - updateUser, MyPwd,MyView - }, - data() { - return { - tableData: [], - search: "", - dialogUpdate: false, - dialogView:false, - updateFlag: false, - userInfo: '', - totalNum: 0, - pageSize: 10, - currentPage: 1, - renderFlag: false, - flag: { - role: false, - password: false, - depart: false, - }, - all: false, - unsame: false, - myIdx: 0, - preMyIdx: 0, - options: [ - { - value: 0, - label: '鎵归噺鎿嶄綔', - disabled: true, - }, - { - value: 1, - label: '鎵归噺鍚敤', - }, - { - value: 2, - label: '鎵归噺绂佺敤', - }, - { - value: 3, - label: '鎵归噺鍒犻櫎', - } - ], - tempList: [] + components: { + updateUser, + MyPwd, + MyView, + }, + data() { + return { + tableData: [], + search: "", + dialogUpdate: false, + dialogView: false, + updateFlag: false, + userInfo: "", + totalNum: 0, + pageSize: 10, + currentPage: 1, + renderFlag: false, + flag: { + role: false, + password: false, + depart: false, + }, + all: false, + unsame: false, + myIdx: 0, + preMyIdx: 0, + options: [ + { + value: 0, + label: "鎵归噺鎿嶄綔", + disabled: true, + }, + { + value: 1, + label: "鎵归噺鍚敤", + }, + { + value: 2, + label: "鎵归噺绂佺敤", + }, + { + value: 3, + label: "鎵归噺鍒犻櫎", + }, + ], + tempList: [], + }; + }, + created() { + this.getUserList(); + }, + methods: { + async selectChange(list) { + console.log(this.tempList); + if (this.tempList.length !== 0) { + this.preMyIdx = list; + if (list === 3) { + await this.mulDelte(this.tempList); + } else if (list === 2) { + await this.mulUpdateStatus(this.tempList, 0); + } else { + await this.mulUpdateStatus(this.tempList, 1); } + this.myIdx = 0; + } else { + this.myIdx = this.preMyIdx; + this.$message({ + type: "warning", + message: "鎮ㄨ繕娌¢�変腑浠讳綍鏁版嵁", + }); + } }, - created() { - this.getUserList(); + tableChange(list) { + this.tempList = []; + list.forEach((item) => { + this.tempList.push(item.id); + }); + if (list.length === this.tableData.length) { + this.all = true; + } else { + this.all = false; + } }, - methods: { - async selectChange(list) { - console.log(this.tempList); - if (this.tempList.length !== 0) { - this.preMyIdx = list; - if (list === 3) { - await this.mulDelte(this.tempList); - } else if (list === 2) { - await this.mulUpdateStatus(this.tempList, 0); - } else { - await this.mulUpdateStatus(this.tempList, 1); - } - this.myIdx = 0; + // 鎵归噺鍒犻櫎鐢ㄦ埛淇℃伅 + mulDelte(idArr) { + console.log(idArr); + this.$confirm("鎮ㄧ‘瀹氳杩涜鎵归噺鍒犻櫎鐢ㄦ埛鍚�?") + .then((_) => { + this.$axios({ + method: "post", + url: "sccg/admin/deleteBatch?ids=" + idArr, + }).then((res) => { + if (res.code === 200) { + this.$message({ + type: "success", + message: "鍒犻櫎鐢ㄦ埛淇℃伅鎴愬姛", + }); + this.getUserList(); } else { - this.myIdx = this.preMyIdx; - this.$message({ - type: 'warning', - message: '鎮ㄨ繕娌¢�変腑浠讳綍鏁版嵁', - }) + this.$message({ + type: "error", + message: res.message, + }); } - }, - tableChange(list) { - this.tempList = []; - list.forEach(item => { - this.tempList.push(item.id); - }) - if (list.length === this.tableData.length) { - this.all = true; + console.log(res); + }); + }) + .catch((err) => { + console.log(err); + }); + }, + // 鎵归噺淇敼璐﹀彿 + mulUpdateStatus(idArr, flag) { + console.log(flag); + this.$confirm( + flag === 1 + ? "鎮ㄧ‘瀹氳杩涜鎵归噺鍚敤鐢ㄦ埛鍚�?" + : "鎮ㄧ‘瀹氳杩涜鎵归噺绂佺敤鐢ㄦ埛鍚�?" + ) + .then((_) => { + this.$axios({ + method: "post", + url: + "sccg/admin/updateStatusBatch?ids=" + idArr + "&status=" + flag, + }).then((res) => { + if (res.code === 200) { + this.$message({ + type: "success", + message: "鏇存敼鐢ㄦ埛鐘舵�佹垚鍔�", + }); + this.getUserList(); } else { - this.all = false + this.$message({ + type: "error", + message: res.message, + }); } - }, - // 鎵归噺鍒犻櫎鐢ㄦ埛淇℃伅 - mulDelte(idArr) { - console.log(idArr); - this.$confirm("鎮ㄧ‘瀹氳杩涜鎵归噺鍒犻櫎鐢ㄦ埛鍚�?") - .then(_ => { - this.$axios({ - method: 'post', - url: 'sccg/admin/deleteBatch?ids=' + idArr, - }) - .then(res => { - if (res.code === 200) { - this.$message({ - type: 'success', - message: '鍒犻櫎鐢ㄦ埛淇℃伅鎴愬姛', - }) - this.getUserList(); - } else { - this.$message({ - type: 'error', - message: res.message - }) - } - console.log(res); - }) - }) - .catch(err => { console.log(err) }) - }, - // 鎵归噺淇敼璐﹀彿 - mulUpdateStatus(idArr, flag) { - console.log(flag); - this.$confirm(flag === 1 ? "鎮ㄧ‘瀹氳杩涜鎵归噺鍚敤鐢ㄦ埛鍚�?" : '鎮ㄧ‘瀹氳杩涜鎵归噺绂佺敤鐢ㄦ埛鍚�?') - .then(_ => { - this.$axios({ - method: 'post', - url: 'sccg/admin/updateStatusBatch?ids=' + idArr + '&status=' + flag, - }) - .then(res => { - if (res.code === 200) { - this.$message({ - type: 'success', - message: '鏇存敼鐢ㄦ埛鐘舵�佹垚鍔�', - }) - this.getUserList(); - } else { - this.$message({ - type: 'error', - message: res.message - }) - } - console.log(res); - }) - }) - .catch(err => { console.log(err) }) - }, - changeTime({ createTime }) { - return helper(createTime); - }, - selectAll() { - this.$refs.multipleTable.toggleAllSelection(); - }, - disSame(list) { - list.forEach(row => { - this.$refs.multipleTable.toggleRowSelection(row) - }) - }, - // 鍒犻櫎鐢ㄦ埛 - handleDelete({ id }) { - this.$confirm('纭鍒犻櫎锛�').then(_ => { - this.$axios({ - method: 'post', - url: 'sccg/admin/delete/' + id, - }).then(res => { - console.log(res); - this.$message({ - message: res.message, - type: 'success' - }) - this.getUserList(); - }) - }).catch(_ => { }) - }, - closeDialog({ flag }) { - this.dialogUpdate = flag; + console.log(res); + }); + }) + .catch((err) => { + console.log(err); + }); + }, + changeTime({ createTime }) { + return helper(createTime); + }, + selectAll() { + this.$refs.multipleTable.toggleAllSelection(); + }, + disSame(list) { + list.forEach((row) => { + this.$refs.multipleTable.toggleRowSelection(row); + }); + }, + // 鍒犻櫎鐢ㄦ埛 + handleDelete({ id }) { + this.$confirm("纭鍒犻櫎锛�") + .then((_) => { + this.$axios({ + method: "post", + url: "sccg/admin/delete/" + id, + }).then((res) => { + console.log(res); + this.$message({ + message: res.message, + type: "success", + }); this.getUserList(); - }, - handleClose(done) { - if (this.updateFlag) { - this.$confirm('纭鍏抽棴锛�') - .then(_ => { - this.dialogUpdate = false; - this.updateFlag = false; - done(); - }) - .catch(_ => { }); - }else{ - done(); - } - }, - // 褰撳墠椤垫敼鍙樿Е鍙戜簨浠� - changeCurrentPage(page) { - this.currentPage = page; - this.getUserList(); - }, - // 涓婁竴椤电偣鍑讳簨浠� - handlePrev(page) { - this.currentPage = page; - this.getUserList(); - }, - // 涓嬩竴椤电偣鍑讳簨浠� - handleNext(page) { - this.currentPage = page; - this.getUserList(); - }, - // 淇敼瑙掕壊 - handleChangeRole(obj, mykey) { - this.dialogUpdate = true; - this.updateFlag = true; - for (let key in this.flag) { - if (key == mykey) { - this.flag[key] = true; - } else { - this.flag[key] = false; - } - } - this.userInfo = obj; - }, - // 淇敼鐢ㄦ埛鐘舵�� - handleChangeStatus(obj) { - let { id, status } = obj; - status == true ? status = 1 : status = 0; - this.$axios.post(`sccg/admin/updateStatus/` + id + '?status=' + status).then(res => { - console.log(res); - }) - }, - // 鑾峰彇鐢ㄦ埛鍒楄〃 - getUserList() { - const that = this; - const { currentPage, pageSize, search } = this; - // 鑾峰彇鎵�鏈夌敤鎴蜂俊鎭�佺敤鎴锋煡璇�(鏆傛椂鏀寔鐢佃瘽鍙风爜) - this.$axios.get(`sccg/admin/list?keyword=${search}¤t=${currentPage}&pageSize=${pageSize}`).then(res => { - if (res.code === 200) { - res.data.records.forEach(item => { - item.status == 1 ? item.status = true : item.status = false; - }) - that.totalNum = res.data.total; - that.tableData = res.data.records; - this.renderFlag = true; - } - }) - }, - // 鏌ョ湅鐢ㄦ埛淇℃伅(涓嶅彲淇敼) - handleFind(rowData) { - this.dialogView = true; - this.userInfo = rowData; - }, - // 璁剧疆琛ㄦ牸鏂戦┈绾� - tableRowClassName({ row, rowIndex }) { - if ((rowIndex + 1) % 2 == 0) { - return 'warning-row'; - } else { - return 'success-row'; - } - return ''; - }, - // 澶勭悊鐢ㄦ埛鎵�灞炶鑹� - filterRole(arr){ - let str = ''; - if(arr.length === 0){ - return; - } - arr.forEach((item,index)=>{ - if(item!==null){ - if(index<arr.length-1){ - str+=item.name +','; - }else{ - str+=item.name; - } - } - }) - return str; + }); + }) + .catch((_) => {}); + }, + closeDialog({ flag }) { + this.dialogUpdate = flag; + this.getUserList(); + }, + handleClose(done) { + if (this.updateFlag) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.dialogUpdate = false; + this.updateFlag = false; + done(); + }) + .catch((_) => {}); + } else { + done(); + } + }, + // 褰撳墠椤垫敼鍙樿Е鍙戜簨浠� + changeCurrentPage(page) { + this.currentPage = page; + this.getUserList(); + }, + // 涓婁竴椤电偣鍑讳簨浠� + handlePrev(page) { + this.currentPage = page; + this.getUserList(); + }, + // 涓嬩竴椤电偣鍑讳簨浠� + handleNext(page) { + this.currentPage = page; + this.getUserList(); + }, + // 淇敼瑙掕壊 + handleChangeRole(obj, mykey) { + this.dialogUpdate = true; + this.updateFlag = true; + for (let key in this.flag) { + if (key == mykey) { + this.flag[key] = true; + } else { + this.flag[key] = false; } + } + this.userInfo = obj; }, - props: ['refresh', 'keyword', 'resetFresh'], - watch: { - refresh: { - handler(newValue, oldValue) { - if (newValue == true) { - this.search = ''; - if (this.keyword != '') { - this.search = this.keyword; - } - this.currentPage = 1; - this.getUserList(); - this.$emit('resetFresh', { flag: false }) - } - }, - immediate: true + // 淇敼鐢ㄦ埛鐘舵�� + handleChangeStatus(obj) { + let { id, status } = obj; + status == true ? (status = 1) : (status = 0); + this.$axios + .post(`sccg/admin/updateStatus/` + id + "?status=" + status) + .then((res) => { + console.log(res); + }); + }, + // 鑾峰彇鐢ㄦ埛鍒楄〃 + getUserList() { + const that = this; + const { currentPage, pageSize, search } = this; + // 鑾峰彇鎵�鏈夌敤鎴蜂俊鎭�佺敤鎴锋煡璇�(鏆傛椂鏀寔鐢佃瘽鍙风爜) + this.$axios + .get( + `sccg/admin/list?keyword=${search}¤t=${currentPage}&pageSize=${pageSize}` + ) + .then((res) => { + if (res.code === 200) { + res.data.records.forEach((item) => { + item.status == 1 ? (item.status = true) : (item.status = false); + }); + that.totalNum = res.data.total; + that.tableData = res.data.records; + this.renderFlag = true; + } + }); + }, + // 鏌ョ湅鐢ㄦ埛淇℃伅(涓嶅彲淇敼) + handleFind(rowData) { + this.dialogView = true; + this.userInfo = rowData; + }, + // 璁剧疆琛ㄦ牸鏂戦┈绾� + tableRowClassName({ row, rowIndex }) { + if ((rowIndex + 1) % 2 == 0) { + return "warning-row"; + } else { + return "success-row"; + } + return ""; + }, + // 澶勭悊鐢ㄦ埛鎵�灞為儴闂� + filterRole(arr) { + let str = ""; + if (arr.length === 0) { + return; + } + arr.forEach((item, index) => { + if (item !== null) { + if (index < arr.length - 1) { + str += item.name + ","; + } else { + str += item.name; + } } - } -} + }); + return str; + }, + // 澶勭悊鐢ㄦ埛鎵�灞為儴闂� + filterDepart(arr) { + let str = ""; + if (arr.length === 0) { + return; + } + arr.forEach((item, index) => { + if (item !== null) { + if (index < arr.length - 1) { + str += item.departName + ","; + } else { + str += item.departName; + } + } + }); + return str; + }, + }, + props: ["refresh", "keyword", "resetFresh"], + watch: { + refresh: { + handler(newValue, oldValue) { + if (newValue == true) { + this.search = ""; + if (this.keyword != "") { + this.search = this.keyword; + } + this.currentPage = 1; + this.getUserList(); + this.$emit("resetFresh", { flag: false }); + } + }, + immediate: true, + }, + }, +}; </script> <style lang="scss" scoped> main { - background-color: #09152f; - margin-top: 20px; - padding-bottom: 50px; - border: 1pox solid #fff; + background-color: #09152f; + margin-top: 20px; + padding-bottom: 50px; + border: 1pox solid #fff; - .mainTitle { - line-height:60px; - } + .mainTitle { + line-height: 60px; + } - .tools { - display : flex; - justify-content: space-between; + .tools { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 20px; + + .funs { + display: flex; + .funs-sp { + border: 1px solid #17324c; + } + .funsItem { + line-height: 28px; + display: flex; align-items: center; - padding: 0 20px; + border-radius: 4px; + font-size: 12px; + margin-left: 10px; - .funs { - display: flex; - .funs-sp{ - border: 1px solid #17324c; - } - .funsItem { - line-height: 28px; - display: flex; - align-items: center; - border-radius: 4px; - font-size: 12px; - 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; - } - } - + .el-checkbox { + width: 80px; + padding: 0 10px; } - .pagination { - margin-top: 50px; - display: flex; - line-height: 50px; - justify-content: center; - - .el-pagination { - - &::v-deep li, - &::v-deep .btn-prev, - &::v-deep .btn-next { - background-color: #071f39; - color: #4b9bb7; - } - - &::v-deep .active { - background-color: #409eff; - color: #fff; - } - } + .el-select { + width: 120px; } + + &::v-deep .el-input__inner { + border: none; + background-color: #09152f; + } + + &:hover { + border: 1px solid #4b9bb7; + } + + &:hover .el-checkbox { + color: #4b9bb7; + } + } } - .el-table { - color: #4b9bb7; - font-size: 10px; - .operation { - display: flex; - font-size: 10px; - .line { - padding: 0 1px; - } + .pagination { + margin-top: 50px; + display: flex; + line-height: 50px; + justify-content: center; - span:hover { - cursor: pointer; - } + .el-pagination { + &::v-deep li, + &::v-deep .btn-prev, + &::v-deep .btn-next { + background-color: #071f39; + color: #4b9bb7; } + + &::v-deep .active { + background-color: #409eff; + color: #fff; + } + } } - // &::v-deep .switchStyle .el-switch__label { - // position: absolute; - // display: none; - // color: #fff; - // } + } - // &::v-deep .el-switch__core { - // background-color: rgba(166, 166, 166, 1); - // } + .el-table { + color: #4b9bb7; + font-size: 10px; + .operation { + display: flex; + font-size: 10px; + .line { + padding: 0 1px; + } - // &::v-deep .switchStyle .el-switch__label--left { - // z-index: 9; - // left: 20px; - // } + span:hover { + cursor: pointer; + } + } + } + // &::v-deep .switchStyle .el-switch__label { + // position: absolute; + // display: none; + // color: #fff; + // } - // &::v-deep .switchStyle .el-switch__label--right { - // z-index: 9; - // left: 4px; - // } + // &::v-deep .el-switch__core { + // background-color: rgba(166, 166, 166, 1); + // } - // &::v-deep .switchStyle .el-switch__label.is-active { - // display: block; - // } + // &::v-deep .switchStyle .el-switch__label--left { + // z-index: 9; + // left: 20px; + // } - // &::v-deep .switchStyle.el-switch .el-switch__core, - // &::v-deep .el-switch .el-switch__label { - // width: 56px !important; - // } + // &::v-deep .switchStyle .el-switch__label--right { + // z-index: 9; + // left: 4px; + // } + + // &::v-deep .switchStyle .el-switch__label.is-active { + // display: block; + // } + + // &::v-deep .switchStyle.el-switch .el-switch__core, + // &::v-deep .el-switch .el-switch__label { + // width: 56px !important; + // } } </style> \ No newline at end of file -- Gitblit v1.8.0