diff --git a/src/assets/style/style.css b/src/assets/style/style.css index bab09fce..a113c3b7 100644 --- a/src/assets/style/style.css +++ b/src/assets/style/style.css @@ -1223,6 +1223,10 @@ i { width: 100%; height: 100%; } +textarea:focus { + outline: none; + /* 清除默认焦点样式 */ +} .collection_modal_body .input_border, .design_detail_modal_component .input_border, .library_page .input_border { @@ -1284,6 +1288,38 @@ i { .library_page .input_border input.forbidden { cursor: no-drop; } +.collection_modal_body .input_border .icon-xiala, +.design_detail_modal_component .input_border .icon-xiala, +.library_page .input_border .icon-xiala { + margin-left: 1rem; + display: inline-block; + cursor: pointer; + transition: all 0.3s; +} +.collection_modal_body .input_border .icon-xiala.active, +.design_detail_modal_component .input_border .icon-xiala.active, +.library_page .input_border .icon-xiala.active { + transform: rotate(180deg); +} +.collection_modal_body .input_border .icon-xiala.forbidden, +.design_detail_modal_component .input_border .icon-xiala.forbidden, +.library_page .input_border .icon-xiala.forbidden { + cursor: no-drop; +} +.collection_modal_body .input_border .search_textarea, +.design_detail_modal_component .input_border .search_textarea, +.library_page .input_border .search_textarea { + z-index: 3; + height: auto; + position: absolute; + left: 0; + font-size: calc(1.6rem*1.2); + width: 70%; + border-radius: 4px; + height: 20rem; + top: 0.2rem; + border: 1px solid #dcdfe6; +} .collection_modal_body .input_border span, .design_detail_modal_component .input_border span, .library_page .input_border span { diff --git a/src/assets/style/style.less b/src/assets/style/style.less index 48efec0e..9b7b75c1 100644 --- a/src/assets/style/style.less +++ b/src/assets/style/style.less @@ -1320,7 +1320,9 @@ i{ height: 100%; } } - +textarea:focus{ + outline: none; /* 清除默认焦点样式 */ +} //设计input和上传按钮样式 .collection_modal_body,.design_detail_modal_component,.library_page{ .input_border{ @@ -1371,6 +1373,31 @@ i{ cursor: no-drop; } } + .icon-xiala{ + margin-left:1rem; + display: inline-block; + cursor: pointer; + transition: all .3s; + &.active{ + transform: rotate(180deg); + } + &.forbidden{ + cursor: no-drop; + } + } + .search_textarea{ + z-index:3; + height: auto; + position: absolute; + left: 0; + font-size: calc(1.6rem*1.2); + // width: 30rem; + width: 70%; + border-radius: 4px; + height: 20rem; + top: .2rem; + border: 1px solid #dcdfe6; + } span{ position: absolute; // bottom: calc(0rem*1.2); diff --git a/src/component/HomePage/Generate.vue b/src/component/HomePage/Generate.vue index 3f02ac48..f196083f 100644 --- a/src/component/HomePage/Generate.vue +++ b/src/component/HomePage/Generate.vue @@ -53,6 +53,15 @@ v-model="searchPictureName" @keydown.enter="getgenerate()" /> + +
{{ $t('Generate.Generate') }} @@ -302,6 +311,7 @@ export default defineComponent({ type2: prop.msg, }, workspaceCom:{}, + isTextarea:false }; }, @@ -638,6 +648,9 @@ export default defineComponent({ }); } }, + setTextareaShow(){ + this.isTextarea = !this.isTextarea + }, ifMaximumLength(){ clearTimeout(this.inputTime) let inputBox = document.getElementsByClassName('generate')[0].getElementsByClassName('input_box')[0] diff --git a/src/component/HomePage/PrintboardUpload.vue b/src/component/HomePage/PrintboardUpload.vue index 864e8715..06dc3334 100644 --- a/src/component/HomePage/PrintboardUpload.vue +++ b/src/component/HomePage/PrintboardUpload.vue @@ -106,6 +106,9 @@
+ +
{{ $t('LibraryPage.Generate') }} @@ -294,7 +297,8 @@ export default defineComponent({ token: "", uploadUrl: "", captionGeneration:'', - workspaceCom:{} + workspaceCom:{}, + isTextarea:false, }; }, computed: { @@ -509,6 +513,10 @@ export default defineComponent({ } return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE; }, + setTextareaShow(){ + if(this.generateCheckbox) return + this.isTextarea = !this.isTextarea + }, ifMaximumLength(){ clearTimeout(this.inputTime) let inputBox = document.getElementsByClassName('sketchboard_upload_modal')[0].getElementsByClassName('input_box')[0] diff --git a/src/views/HomeView/library.vue b/src/views/HomeView/library.vue index a779dcec..1dba4c1c 100644 --- a/src/views/HomeView/library.vue +++ b/src/views/HomeView/library.vue @@ -213,7 +213,15 @@ @keydown.enter="getgenerate" :readonly="checkbox[0].type && selectCode != 'Moodboard'" :placeholder="$t('LibraryPage.inputContent2')" v-model="captionGeneration"> - + +
{{ $t('LibraryPage.Generate') }} @@ -491,6 +499,7 @@ export default defineComponent({ value:'id', label:'classificationName', } + let isTextarea = ref(false) return { menuList, selectImgList, @@ -532,6 +541,7 @@ export default defineComponent({ getLibraryListInputTime, props, options, + isTextarea, } }, data(this_) { @@ -661,6 +671,7 @@ export default defineComponent({ // this.sex = 'Female', // this.designType = 'Outwear', this.selectImgList = [] + this.isTextarea = false this.value.labelValue = [] this.getLibraryList('') this.getClass() @@ -1034,6 +1045,10 @@ export default defineComponent({ } }) }, + setTextareaShow(){ + if(this.checkbox[0].type && this.selectCode != 'Moodboard') return + this.isTextarea = !this.isTextarea + }, ifMaximumLength(){ clearTimeout(this.inputTime) this.inputTime = setTimeout(()=>{ @@ -1193,6 +1208,7 @@ export default defineComponent({ } // this.isShowMark = true this.isGenerate[selectCodeStr] = true + this.isTextarea = false Https.axiosPost(Https.httpUrls.generatePrepare, data).then( (rv) => { if(data.isTestUser){ @@ -1686,11 +1702,12 @@ export default defineComponent({ position: relative; padding: 1.5rem 0; padding: 0; - &:hover{ - .search_textarea{ - display: block - } - } + // &:hover{ + // .search_textarea{ + // display: block + // } + // } + input{ width: 30rem; height: 3rem; @@ -1698,14 +1715,31 @@ export default defineComponent({ cursor: no-drop; } } + .icon-xiala{ + display: inline-block; + + cursor: pointer; + transition: all .3s; + &.active{ + transform: rotate(180deg); + } + &.forbidden{ + cursor: no-drop; + } + } .search_textarea{ + z-index:3; height: auto; - display: none; position: absolute; left: 0; width: 30rem; - top: 0rem; - border: 1px solid #f6f5fa; + border-radius: 4px; + height: 20rem; + top: .5rem; + border: 1px solid #dcdfe6; + &.forbidden{ + cursor: no-drop; + } } .started_btn{ }