From cde5a1722df2797ac33ce4fac27280a05ddb2fc0 Mon Sep 17 00:00:00 2001
From: yangyin <1850366751@qq.com>
Date: 星期三, 26 六月 2024 18:15:36 +0800
Subject: [PATCH] feat: 新增高级示例
---
src/views/project/ch/home/component/waterRight/center.vue | 63 +++++++++++++++++++++++++++++++
1 files changed, 62 insertions(+), 1 deletions(-)
diff --git a/src/views/project/ch/home/component/waterRight/center.vue b/src/views/project/ch/home/component/waterRight/center.vue
index e278ee9..9a36a87 100644
--- a/src/views/project/ch/home/component/waterRight/center.vue
+++ b/src/views/project/ch/home/component/waterRight/center.vue
@@ -4,7 +4,7 @@
<div class="flex item-center">
<span>鎻愰棶绀轰緥</span>
<span class="split"></span>
- <span class="change cursor-pointer">楂樼骇绀轰緥 ></span>
+ <span class="change cursor-pointer" @click="advanceExampleClick">楂樼骇绀轰緥 ></span>
</div>
<div class="cursor-pointer">
<span class="mr-1 changeBatch">鎹竴鎵�</span>
@@ -29,6 +29,29 @@
</div>
</div>
</div>
+ <el-drawer v-model="state.isShowAdvanceExample" direction="rtl" size="30%">
+ <div class="box-border w100 bg-[#e0e7fb] relative flex items-center justify-center" style="padding: 30px 20px 26px">
+ <!-- <el-tabs v-model="state.activeName" type="card" @tab-click="handleClick" class="set-tabs">
+ <el-tab-pane label="鎻愰棶绀轰緥" name="questionExample">鎻愰棶绀轰緥</el-tab-pane>
+ <el-tab-pane label="鎸囦护妯℃澘" name="instructionTemplate">鎸囦护妯℃澘</el-tab-pane>
+ </el-tabs> -->
+ <div
+ class="box-border flex w-[203px] h-[32px] rounded-md items-center justify-between cursor-pointer relative border border-solid border-[#2c2d33]"
+ >
+ <!-- <div class="w-[108px] h100 rounded-[5px] bg-transparent absolute left-0 transition-all"></div> -->
+
+ <div
+ class="tabbar-item"
+ :class="state.activeName === item.ID ? 'set-tabbar-active' : ''"
+ @click="handleTabClick(item)"
+ v-for="item in state.tabNameList"
+ :key="item.ID"
+ >
+ {{ item.Name }}
+ </div>
+ </div>
+ </div>
+ </el-drawer>
</div>
</template>
@@ -61,10 +84,24 @@
Content: '璇蜂互璇楃粡涓殑鍏告晠缁欑敺瀹濆疂鍙栧悕锛屽椤撅紝鍚嶅瓧瑕佹眰3涓瓧锛岀粰5涓悕瀛椾緵鎴戦�夋嫨銆�',
},
],
+ tabNameList: [
+ { ID: 1, Name: '鎻愰棶绀轰緥' },
+ { ID: 2, Name: '鎸囦护妯℃澘' },
+ ],
exampleIndex: 0,
+ isShowAdvanceExample: false,
+ activeName: 1,
});
const changeExample = (item) => {
state.exampleIndex = item.ID;
+};
+//楂樼骇绀轰緥
+const advanceExampleClick = () => {
+ state.isShowAdvanceExample = true;
+};
+const handleTabClick = (item) => {
+ console.log(item.ID);
+ state.activeName = item.ID;
};
</script>
<style scoped lang="scss">
@@ -168,4 +205,28 @@
}
}
}
+.tabbar-item {
+ width: 108px;
+ height: 30px;
+ font-size: 13px;
+ font-weight: 400;
+ line-height: 30px;
+ text-align: center;
+ cursor: pointer;
+ // position: absolute;
+ -o-transition: color 0.2s;
+ transition: color 0.2s;
+ &:nth-child(3) {
+ top: 0;
+ left: 0;
+ }
+}
+.tabbar-item-active {
+ color: #fff;
+}
+.set-tabbar-active {
+ left: 95px;
+ color: #fff;
+ background-color: #000;
+}
</style>
--
Gitblit v1.9.3