From 0e428ed7ab730e3248f674114fad96470df69311 Mon Sep 17 00:00:00 2001 From: xiangpei <xiangpei@timesnew.cn> Date: 星期三, 26 三月 2025 16:44:52 +0800 Subject: [PATCH] 完善页面 --- src/views/Index.vue | 94 +++++++++++++++++++++++++++++++++++++++++++++- 1 files changed, 91 insertions(+), 3 deletions(-) diff --git a/src/views/Index.vue b/src/views/Index.vue index 84ebc4a..60b1ea4 100644 --- a/src/views/Index.vue +++ b/src/views/Index.vue @@ -16,7 +16,52 @@ </div> </div> <div class="setting"> - 杩欐槸閰嶇疆鏉垮潡 + <el-tabs v-model="activeSetting" @tab-click="tabSelect"> + <el-tab-pane label="宸ュ叿璁剧疆" name="util"> + <div style="display: flex; align-items: center"> + <el-checkbox v-model="enableAgent">鍚敤Agent</el-checkbox> + <el-tooltip style="margin-left: 10px" content="Top center" placement="right" effect="light"> + <svg t="1742971974478" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2969" width="16" height="16"><path d="M464 784.352c0 26.51 21.49 48 48 48s48-21.49 48-48-21.49-48-48-48-48 21.49-48 48z" p-id="2970" fill="#515151"></path><path d="M512 960C264.96 960 64 759.04 64 512S264.96 64 512 64s448 200.96 448 448-200.96 448-448 448z m0-831.713c-211.584 0-383.713 172.129-383.713 383.713 0 211.552 172.129 383.713 383.713 383.713 211.552 0 383.713-172.16 383.713-383.713 0-211.584-172.161-383.713-383.713-383.713z" p-id="2971" fill="#515151"></path><path d="M512 673.695c-17.665 0-32-14.336-32-31.999v-54.112c0-52.353 39.999-92.352 75.327-127.648 25.887-25.92 52.672-52.672 52.672-74.016 0-53.344-43.072-96.736-95.999-96.736-53.823 0-96 41.536-96 94.56 0 17.664-14.335 31.999-32 31.999s-32-14.336-32-32c0-87.423 71.774-158.559 160-158.559S672 297.28 672 385.92c0 47.904-36.32 84.191-71.424 119.296-27.84 27.776-56.575 56.512-56.575 82.335v54.112c0 17.665-14.336 32.032-32.001 32.032z" p-id="2972" fill="#515151"></path></svg> + </el-tooltip> + </div> + <div style="margin-top: 15px"> + <div class="normal-text">閫夋嫨宸ュ叿</div> + <div style="margin-top: 5px"> + <el-select v-model="selectUtil" size="mini" placeholder="鏈�夋嫨" style="width: 100%"> + <el-option + v-for="item in options" + :key="item.value" + :label="item.label" + :value="item.value"> + </el-option> + </el-select> + </div> + </div> + <div style="margin-top: 15px"> + <div class="normal-text" style="display: flex;align-items: center"> + <div>涓婁紶闄勪欢</div> + <el-tooltip style="margin-left: 10px" content="鍗曚釜鏂囦欢涓嶈秴杩�200M" placement="right" effect="light"> + <svg t="1742971974478" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2969" width="16" height="16"><path d="M464 784.352c0 26.51 21.49 48 48 48s48-21.49 48-48-21.49-48-48-48-48 21.49-48 48z" p-id="2970" fill="#515151"></path><path d="M512 960C264.96 960 64 759.04 64 512S264.96 64 512 64s448 200.96 448 448-200.96 448-448 448z m0-831.713c-211.584 0-383.713 172.129-383.713 383.713 0 211.552 172.129 383.713 383.713 383.713 211.552 0 383.713-172.16 383.713-383.713 0-211.584-172.161-383.713-383.713-383.713z" p-id="2971" fill="#515151"></path><path d="M512 673.695c-17.665 0-32-14.336-32-31.999v-54.112c0-52.353 39.999-92.352 75.327-127.648 25.887-25.92 52.672-52.672 52.672-74.016 0-53.344-43.072-96.736-95.999-96.736-53.823 0-96 41.536-96 94.56 0 17.664-14.335 31.999-32 31.999s-32-14.336-32-32c0-87.423 71.774-158.559 160-158.559S672 297.28 672 385.92c0 47.904-36.32 84.191-71.424 119.296-27.84 27.776-56.575 56.512-56.575 82.335v54.112c0 17.665-14.336 32.032-32.001 32.032z" p-id="2972" fill="#515151"></path></svg> + </el-tooltip> + </div> + <div style="margin-top: 5px"> + <el-upload + class="upload" + drag + :on-change="handleChange" + :before-upload="handleUpload" + :file-list="fileList" + multiple> + <i class="el-icon-upload"></i> + <div class="el-upload__text"> + <div>灏嗘枃浠舵嫋鍒版澶勶紝鎴�<em>鐐瑰嚮涓婁紶</em></div> + </div> + </el-upload> + </div> + </div> + </el-tab-pane> + <el-tab-pane label="浼氳瘽璁剧疆" name="session"></el-tab-pane> + </el-tabs> </div> </div> <div class="right"> @@ -30,13 +75,45 @@ name: "IndexView", data() { return { - activeTab: 0 + fileList: [], + activeTab: 0, + activeSetting: 'util', + enableAgent: false, + selectUtil: null, + options: [{ + value: '閫夐」1', + label: '榛勯噾绯�' + }, { + value: '閫夐」2', + label: '鍙岀毊濂�' + }, { + value: '閫夐」3', + label: '铓典粩鐓�' + }, { + value: '閫夐」4', + label: '榫欓』闈�' + }, { + value: '閫夐」5', + label: '鍖椾含鐑ら腑' + }], } }, mounted() { this.changeRoute(this.activeTab) }, methods: { + handleUpload(file) { + if (this.fileList.indexOf(file) === -1) { + this.fileList.push(file) + } + return false + }, + handleChange(file, fileList) { + this.fileList = fileList; + }, + tabSelect(tab, event) { + console.log(tab, event) + }, changeTab(index) { if (index !== this.activeTab) { this.activeTab = index @@ -62,6 +139,7 @@ .left { width: 250px; height: calc(100vh - 20px); + min-height: 600px; background-color: #f3f3f3; padding: 0px 40px; } @@ -82,6 +160,7 @@ flex-direction: column; justify-content: center; align-items: center; + border-bottom: 1px solid lightgray; } .tab { width: 100%; @@ -101,5 +180,14 @@ background-color: #bed7f5; color: blue; } - +.setting { + margin-top: 20px; +} +.normal-text { + color: #606266; + font-size: 12px; +} +::v-deep(.el-upload-dragger) { + width: 250px !important; +} </style> -- Gitblit v1.8.0