From b05640960d38a08def00a44b44aa11ef216f911f Mon Sep 17 00:00:00 2001 From: liuchengxin <13104445455@163.com> Date: 星期二, 17 五月 2022 16:13:09 +0800 Subject: [PATCH] 样式修改 --- src/views/construction/constructionList/index.vue | 90 ++++++++++++++++++++++++++++++++++---------- 1 files changed, 69 insertions(+), 21 deletions(-) diff --git a/src/views/construction/constructionList/index.vue b/src/views/construction/constructionList/index.vue index 6020d32..97929f0 100644 --- a/src/views/construction/constructionList/index.vue +++ b/src/views/construction/constructionList/index.vue @@ -4,29 +4,45 @@ <div class="tree-list"> <school ref="schoolRef" @schoolChange="schoolChange"></school> </div> - <div class="right-view"> - <el-tabs v-model="activeName" @tab-click="handleClick"> - <el-tab-pane label="鏂藉伐姒傚喌" name="first">鏂藉伐姒傚喌</el-tab-pane> - <el-tab-pane label="IPC璁惧" name="second">IPC璁惧</el-tab-pane> - <el-tab-pane label="NVR璁惧" name="third">NVR璁惧</el-tab-pane> - <el-tab-pane label="IoT璁惧" name="fourth">IoT璁惧</el-tab-pane> - <el-tab-pane label="AI璁惧" name="five">AI璁惧</el-tab-pane> - <el-tab-pane label="浜ゆ崲璁惧" name="six">浜ゆ崲璁惧</el-tab-pane> - <el-tab-pane label="鏈嶅姟鍣�" name="seven">鏈嶅姟鍣�</el-tab-pane> - <el-tab-pane label="杞欢绯荤粺" name="eight">杞欢绯荤粺</el-tab-pane> + <div class="right-view custom-el-tabs" v-loading="loading"> + <el-tabs v-model="activeName" style="flex: 1;" @tab-click="handleClick"> + <el-tab-pane label="鏂藉伐姒傚喌" name="first"> + <el-empty description="姝e湪寮�鍙戜腑..."></el-empty> + </el-tab-pane> + <el-tab-pane label="IPC璁惧" name="second"> + <ipc v-if="activeName === 'second'" :schoolId="schoolId"></ipc> + </el-tab-pane> + <el-tab-pane label="NVR璁惧" name="third"> + <nvr v-if="activeName === 'third'" :schoolId="schoolId"></nvr> + </el-tab-pane> + <el-tab-pane label="IoT璁惧" name="fourth"> + <iot v-if="activeName === 'fourth'" :schoolId="schoolId"></iot> + </el-tab-pane> + <el-tab-pane label="AI璁惧" name="five"> + <ai v-if="activeName === 'five'" :schoolId="schoolId"></ai> + </el-tab-pane> + <el-tab-pane label="浜ゆ崲璁惧" name="six"> + <exchange v-if="activeName === 'six'" :schoolId="schoolId"></exchange> + </el-tab-pane> + <el-tab-pane label="鏈嶅姟鍣�" name="seven"> + <server v-if="activeName === 'seven'" :schoolId="schoolId"></server> + </el-tab-pane> + <el-tab-pane label="杞欢绯荤粺" name="eight"> + <system v-if="activeName === 'eight'" :schoolId="schoolId"></system> + </el-tab-pane> </el-tabs> <div class="right-view-title-icon"> - <i class="el-icon-search" @click="batchOpen = true"></i> - <i class="el-icon-search" @click="ipOpen = true"></i> + <img alt="" title="鏂藉伐鎵规" src="@/assets/images/batch-icon.png" @click="batchOpen = true" class="right-view-title-icon-item" /> + <img alt="" title="棰勭暀IP" src="@/assets/images/ip-icon.png" @click="ipOpen = true" class="right-view-title-icon-item" /> </div> </div> </div> <el-drawer title="鏂藉伐鎵规" :visible.sync="batchOpen" size="70%" :append-to-body="true" :destroy-on-close="true"> - <construction-batch></construction-batch> + <construction-batch :schoolId="schoolId"></construction-batch> </el-drawer> <el-drawer title="棰勭暀IP" :visible.sync="ipOpen" size="70%" :append-to-body="true" :destroy-on-close="true"> - <reserve-ip></reserve-ip> + <reserve-ip :schoolId="schoolId"></reserve-ip> </el-drawer> </div> </template> @@ -35,25 +51,43 @@ import school from '../../components/school' import constructionBatch from '../constructionBatch' import reserveIp from '../reserveIp' +import nvr from '../nvr' +import ipc from '../ipc' +import iot from '../iot' +import ai from '../ai' +import exchange from '../exchange' +import server from '../server' +import system from '../system' export default { name: "constructionList", components: { school, constructionBatch, - reserveIp + reserveIp, + nvr, + ipc, + iot, + ai, + exchange, + server, + system }, data() { return { - activeName: 'second', + loading: true, + activeName: 'first', batchOpen: false, - ipOpen: false + ipOpen: false, + schoolId: undefined } }, methods: { // 閫夋嫨楂樻牎 schoolChange(v) { - + this.schoolId = v; + this.activeName = 'second'; + this.loading = false; }, handleClick(tab, event) { console.log(tab, event); @@ -66,21 +100,35 @@ .tree-view { display: flex; flex-direction: row; - flex: 1; + width: 100%; } + .tree-list { margin-right: 10px; } + .right-view { display: flex; flex-direction: row; justify-content: space-between; - flex: 1; + width: calc(100% - 280px); + position: relative; + box-sizing: border-box; } + .right-view-title-icon { display: flex; flex-direction: row; height: 40px; align-items: center; + position: absolute; + top: 0; + right: 0; } -</style> \ No newline at end of file +.right-view-title-icon-item { + width: 20px; + height: 20px; + margin-left: 15px; + cursor: pointer; +} +</style> -- Gitblit v1.9.1