From 32e433e28a3b779874f2317b80c4cef81957ff43 Mon Sep 17 00:00:00 2001
From: yangyin <1850366751@qq.com>
Date: 星期一, 14 十月 2024 16:28:24 +0800
Subject: [PATCH] 修改提问示例的样式
---
src/components/drawer/CustomDrawer.vue | 78 ++++++++++++++++++++------------------
1 files changed, 41 insertions(+), 37 deletions(-)
diff --git a/src/components/drawer/CustomDrawer.vue b/src/components/drawer/CustomDrawer.vue
index 96f68e2..2543f6a 100644
--- a/src/components/drawer/CustomDrawer.vue
+++ b/src/components/drawer/CustomDrawer.vue
@@ -31,26 +31,18 @@
</el-input>
</div>
<div class="mt20 w100 relative" v-show="state.customTagList.length > 0">
- <div
- class="overflow-hidden max-h-[36px] transition-[max-height 0.2s] w100 flex flex-wrap text-xs leading-[14px] items-center"
- :class="{ 'set-expand-active': state.isShowExpand }"
- >
- <div class="text-[14px]">涓诲満鏅�:</div>
- <div
- v-for="(item, index) in state.customTagList"
- :key="index"
- :class="{ 'set-label-active': state.activeLabelName === item.group_id }"
- @click="handleLabelClick(item)"
- class="cursor-pointer m-[5px] py-[5px] pl-[10px] pr-[14px] rounded-xl border border-solid border-[#b2b2b2] bg-[#e0e7f] text-[#4c4c4c] transition-[background-color .1s, color .1s, border-color .1s]"
- >
- {{ item.group_name }}
+ <div class="set_custom_label">
+ <div class="chanel-tags">
+ <div v-for="(item, index) in state.customTagList" :key="index" @click="handleLabelClick(item)">
+ <span class="set-group-name" :class="{ 'set-group-label-active': state.activeLabelName === item.group_id }">{{
+ item.group_name
+ }}</span>
+ </div>
</div>
</div>
<div
class="overflow-hidden min-h-[43px] transition-[max-height 0.2s] w100 flex flex-wrap text-xs leading-[14px] items-center pt-2"
- :class="{ 'set-expand-active': state.isShowExpand }"
>
- <div class="text-[14px]">娆″満鏅�:</div>
<div
v-for="(itemChildren, index) in state.customTagChildList"
:key="index"
@@ -60,10 +52,6 @@
>
{{ itemChildren.group_name }}
</div>
- </div>
- <div class="bg-[#e0e7fb] absolute right-0 top-0 text-[#131313] w-[30px] h-[26px] cursor-pointer flex items-center">
- <i class="myiconfont icon-bolangneng" title="灞曞紑" @click="handleExpandClick(1)" v-show="!state.isShowExpand"></i>
- <i class="myiconfont icon-zhongduancanshu" title="鏀剁缉" @click="handleExpandClick(2)" v-show="state.isShowExpand"></i>
</div>
<div class="mt20 w100" v-show="finalSampleList.length > 0">
<div class="w100 pb-[20px]" v-for="item in finalSampleList" :key="item.sample_id">
@@ -95,10 +83,7 @@
</el-input>
</div>
<div class="mt20 w100 relative" v-show="state.customOfficeList.length > 0">
- <div
- class="overflow-hidden max-h-[36px] transition-[max-height 0.2s] w100 flex flex-wrap text-xs leading-[14px] m-[-5px]"
- :class="{ 'set-expand-active': state.isShowExpand }"
- >
+ <div class="overflow-hidden max-h-[36px] transition-[max-height 0.2s] w100 flex flex-wrap text-xs leading-[14px] m-[-5px]">
<div
v-for="item in state.customOfficeList"
:key="item.group_id"
@@ -109,10 +94,7 @@
{{ item.group_name }}
</div>
</div>
- <div class="bg-[#e0e7fb] absolute right-0 top-0 text-[#131313] w-[30px] h-[26px] cursor-pointer flex items-center">
- <i class="myiconfont icon-bolangneng" title="灞曞紑" @click="handleExpandClick(1)" v-show="!state.isShowExpand"></i>
- <i class="myiconfont icon-zhongduancanshu" title="鏀剁缉" @click="handleExpandClick(2)" v-show="state.isShowExpand"></i>
- </div>
+
<div class="mt20 w100">
<div class="w100 pb-[20px] flex overflow-auto flex-col" v-for="item in showInstructList" :key="item.group_id">
<div class="bg-[#f5f7fd] p-[12px] transition-[background-color .2s] flex flex-col rounded-2xl">
@@ -157,11 +139,9 @@
{ ID: 2, Name: '鎸囦护妯℃澘' },
],
activeName: 1,
-
activeLabelName: 'office_summarize', //榛樿閫夋嫨绗竴涓�
activeLabelChildName: '',
activeInstructName: 'office_assistant', //榛樿閫夋嫨绗竴涓�
- isShowExpand: false,
useInstructDialog: false,
instructInfo: {},
inputInstruct: '', //鍙慨鏀规寚浠�
@@ -246,14 +226,6 @@
state.activeInstructName = item.group_id;
};
-//灞曞紑鏀惰捣
-const handleExpandClick = (type) => {
- if (type == 1) {
- state.isShowExpand = true;
- } else {
- state.isShowExpand = false;
- }
-};
const toggleShow = async () => {
isShow.value = !isShow.value;
if (!isShow.value) {
@@ -403,6 +375,34 @@
box-sizing: border-box;
z-index: 100;
}
+.set_custom_label {
+ padding-top: 2px;
+ padding-bottom: 2px;
+ height: 70px;
+ box-sizing: border-box;
+ background-color: #f2f4f8;
+ border-bottom: 1px solid #eee;
+ .chanel-tags {
+ width: 100%;
+ position: relative;
+ overflow: hidden;
+ display: flex;
+ font-size: 12px;
+ color: #9b9b9b;
+ line-height: 26px;
+ flex-wrap: wrap;
+ padding: 6px;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ height: 62px;
+ .set-group-name {
+ margin: 0px 7px;
+ cursor: pointer;
+ white-space: nowrap;
+ }
+ }
+}
.retract_icon {
width: 20px;
height: 48px;
@@ -483,6 +483,10 @@
.set-expand-active {
max-height: 180px;
}
+ .set-group-label-active {
+ border-color: #1c86ff;
+ color: #1c86ff;
+ }
.set-label-active {
border-color: #1c86ff;
background-color: #ccdcfb;
--
Gitblit v1.9.3