Skip to content

D
dsk-operate-sys-cscec
Commit 8c0f16e4 authored by tianhongyang's avatar tianhongyang
Browse files
Options

甲方详情输入框样式更改

parent 925e247c
Hide whitespace changes
Inline Side-by-side
Showing with 143 additions and 182 deletions
dsk-operate-ui/src/assets/styles/common.css
View file @ 8c0f16e4
...@@ -10,13 +10,22 @@ ...@@ -10,13 +10,22 @@
.fade-enter-active, .fade-enter-active,
.fade-leave-active { .fade-leave-active {
transition: opacity 0.3s; transition: opacity 0.3s ease-in;
} }
.fade-enter, .fade-enter,
.fade-leave-to /* .fade-leave-active below version 2.1.8 */ { .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0; opacity: 0;
} }
.fade-position-enter-active,
.fade-position-leave-active {
transition: all 0.3s ease-in;
}
.fade-position-enter,
.fade-position-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
.el-message { .el-message {
z-index: 3000 !important; z-index: 3000 !important;
} }
dsk-operate-ui/src/assets/styles/transition.scss
View file @ 8c0f16e4
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
/* fade */ /* fade */
.fade-enter-active, .fade-enter-active,
.fade-leave-active { .fade-leave-active {
transition: opacity 0.28s; transition: opacity 0.3s;
} }
.fade-enter, .fade-enter,
......
dsk-operate-ui/src/views/custom/customList/index.vue
View file @ 8c0f16e4
...@@ -41,19 +41,21 @@ ...@@ -41,19 +41,21 @@
</el-form-item> </el-form-item>
<el-form-item prop="companyName"> <el-form-item prop="companyName">
<div class="normal-search-container" :class="{'is-hover-search' : searchHoverStatus}" @mouseover="searchHover($event)" <div class="normal-search-container" :class="{'is-hover-search' : searchHoverStatus}" @mouseover="searchHover($event)"
@mouseleave="searchUnHover($event,form)"> @mouseleave="searchUnHover($event)">
<img src="@/assets/images/enterprise/enterprise-search-icon.svg" alt=""> <img src="@/assets/images/enterprise/enterprise-search-icon.svg" alt="">
<span v-show="!searchHoverStatus && !searchParam.companyName">搜索</span> <transition name="fade-position" appear mode="out-in">
<el-input v-model="searchParam.companyName" placeholder="输入关键词查询" style="width:238px;" @focus="searchFocus($event)" <span v-if="!searchHoverStatus && !searchParam.companyName">搜索</span>
@blur="searchBlur($event)" @input="value => searchInput(value)" v-show="searchHoverStatus || searchParam.companyName" <el-input v-model="searchParam.companyName" placeholder="输入关键词查询" style="width:238px;" @focus="searchFocus($event)"
@keydown.native.enter="handleSearch"> @blur="searchBlur($event)" @input="value => searchInput(value)" v-else="searchHoverStatus || searchParam.companyName"
<template slot="suffix"> @keydown.native.enter="handleSearch">
<transition mode="out-in" appear name="fade"> <template slot="suffix">
<img src="@/assets/images/enterprise/search-input-clear-icon.svg" alt="" <transition mode="out-in" appear name="fade">
@click.stop="searchParam.companyName = '';handleSearch" v-show="showClearIcon"> <img src="@/assets/images/enterprise/search-input-clear-icon.svg" alt=""
</transition> @click.stop="searchParam.companyName = '';handleSearch" v-show="showClearIcon">
</template> </transition>
</el-input> </template>
</el-input>
</transition>
</div> </div>
</el-form-item> </el-form-item>
</el-form> </el-form>
...@@ -361,11 +363,19 @@ export default { ...@@ -361,11 +363,19 @@ export default {
} }
}, },
searchBlur(event) { searchBlur(event) {
const { target } = event;
// 失去焦点没有文字
if (!target?.value?.length) {
this.searchHoverStatus = false;
}
this.showClearIcon = false; this.showClearIcon = false;
this.getCustomerList();
}, },
searchInput(value) { searchInput(value) {
if (value?.length) { if (value?.length) {
this.showClearIcon = true; this.showClearIcon = true;
} else {
this.showClearIcon = false;
} }
}, },
searchHover(event) { searchHover(event) {
...@@ -373,6 +383,7 @@ export default { ...@@ -373,6 +383,7 @@ export default {
}, },
searchUnHover(event) { searchUnHover(event) {
if (!this.searchParam.companyName) { if (!this.searchParam.companyName) {
this.showClearIcon = false;
this.searchHoverStatus = false; this.searchHoverStatus = false;
} }
}, },
...@@ -839,75 +850,84 @@ export default { ...@@ -839,75 +850,84 @@ export default {
background: #f4f6f9; background: #f4f6f9;
} }
} }
}
::v-deep .normal-search-container {
display: flex;
align-items: center;
&.is-hover-search { .normal-search-container {
width: 238px; display: flex;
background: #f4f6f9; align-items: center;
border-radius: 4px 4px 4px 4px; transition-property: width, background;
transition-duration: 0.3s;
width: 64px;
height: 32px;
padding-left: 12px;
box-sizing: border-box;
position: relative;
& > img { &.is-hover-search {
cursor: unset; width: 238px;
} background: #f4f6f9;
} border-radius: 4px 4px 4px 4px;
&:hover { & > img {
& > span { cursor: unset;
color: #0081ff; }
} }
}
& > img { & > img {
width: 16px; width: 16px;
height: 16px; height: 16px;
margin-left: 12px; cursor: pointer;
cursor: pointer; }
}
& > span {
color: rgba(35, 35, 35, 0.8);
font-weight: 400;
margin-left: 8px;
line-height: 22px;
font-size: 14px;
cursor: pointer;
}
.el-input { // & > .search-transition-container > span {
& > .el-input__inner { & > span {
border: none;
height: 32px;
line-height: 32px;
caret-color: #0081ff;
color: rgba(35, 35, 35, 0.8); color: rgba(35, 35, 35, 0.8);
font-weight: 400;
margin-left: 8px;
line-height: 22px;
font-size: 14px; font-size: 14px;
background: #f4f6f9; cursor: pointer;
padding-right: 26px; }
padding-left: 8px;
&::placeholder { .search-transition-container {
color: rgba(35, 35, 35, 0.4) !important; width: 100%;
font-size: 14px !important;
line-height: 32px;
}
} }
.el-input__suffix {
right: 12px;
display: flex;
align-items: center;
.el-input__suffix-inner { .el-input {
height: 14px; width: 100% !important;
width: 14px; & > .el-input__inner {
border: none;
height: 32px;
line-height: 32px;
caret-color: #0081ff;
color: rgba(35, 35, 35, 0.8);
font-size: 14px;
background: transparent;
padding-right: 26px;
padding-left: 8px;
&::placeholder {
color: rgba(35, 35, 35, 0.4) !important;
font-size: 14px !important;
line-height: 32px;
}
} }
.el-input__suffix {
right: 12px;
display: flex;
align-items: center;
.el-input__suffix-inner {
height: 14px;
width: 14px;
display: flex;
align-items: center;
justify-content: center;
}
img { img {
cursor: pointer; cursor: pointer;
vertical-align: unset; vertical-align: unset;
margin-bottom: 14px; }
} }
} }
} }
...@@ -971,97 +991,6 @@ export default { ...@@ -971,97 +991,6 @@ export default {
} }
} }
.table_search { .table_search {
::v-deep .el-cascader {
height: 32px;
line-height: 32px;
.el-input {
input {
height: 32px !important;
}
}
.el-cascader__tags {
flex-wrap: inherit;
margin-top: 1px;
.el-tag {
/*max-width: 120px;*/
}
}
.el-input__suffix {
top: 1px;
}
}
::v-deep .normal-search-container {
height: 32px;
display: flex;
align-items: center;
&.is-hover-search {
width: 238px;
background: #f4f6f9;
border-radius: 4px 4px 4px 4px;
& > img {
cursor: unset;
}
}
&:hover {
& > span {
color: #0081ff;
}
}
& > img {
width: 16px;
height: 16px;
margin-left: 12px;
cursor: pointer;
}
& > span {
color: rgba(35, 35, 35, 0.8);
font-weight: 400;
margin-left: 8px;
line-height: 22px;
font-size: 14px;
cursor: pointer;
}
.el-input {
& > .el-input__inner {
border: none;
height: 32px;
line-height: 32px;
caret-color: #0081ff;
color: rgba(35, 35, 35, 0.8);
font-size: 14px;
background: #f4f6f9;
padding-right: 26px;
padding-left: 8px;
&::placeholder {
color: rgba(35, 35, 35, 0.4) !important;
font-size: 14px !important;
line-height: 32px;
}
}
.el-input__suffix {
right: 12px;
display: flex;
align-items: center;
.el-input__suffix-inner {
height: 14px;
width: 14px;
}
img {
cursor: pointer;
vertical-align: unset;
}
}
}
}
.cooperate-name { .cooperate-name {
margin-left: 12px; margin-left: 12px;
display: flex; display: flex;
......
dsk-operate-ui/src/views/detail/party-a/component/HeadFormNew.vue
View file @ 8c0f16e4
...@@ -23,18 +23,20 @@ ...@@ -23,18 +23,20 @@
<!-- 未点击前的输入框样式 --> <!-- 未点击前的输入框样式 -->
<div class="normal-search-container" :class="{'is-hover-search' : form.hover}" @mouseover="searchHover($event,form)" <div class="normal-search-container" :class="{'is-hover-search' : form.hover}" @mouseover="searchHover($event,form)"
@mouseleave="searchUnHover($event,form)"> @mouseleave="searchUnHover($event,form)">
<img src="@/assets/images/enterprise/enterprise-search-icon.svg" alt=""> <img src="@/assets/images/enterprise/enterprise-search-icon.svg">
<span v-show="!form.hover && !form.value">搜索</span> <transition name="fade-position" appear mode="out-in">
<el-input v-model="form.value" :placeholder="form.placeholder ? form.placeholder : '输入关键词查询'" <span v-if="!form.hover && !form.value">搜索</span>
:style="form.width?'width:'+form.width+'px':'width:238px'" @focus="searchFocus($event,form)" @blur="searchBlur($event,form)" <el-input v-model="form.value" :placeholder="form.placeholder ? form.placeholder : '输入关键词查询'"
@input="value => searchInput(value,form)" v-show="form.hover || form.value" @keydown.native.enter="changeSelect"> :style="form.width?'width:'+form.width+'px':'width:238px'" @focus="searchFocus($event,form)" @blur="searchBlur($event,form)"
<template slot="suffix"> @input="value => searchInput(value,form)" v-else @keydown.native.enter="changeSelect">
<transition mode="out-in" appear name="fade"> <template slot="suffix">
<img src="@/assets/images/enterprise/search-input-clear-icon.svg" alt="" @click.stop="form.value = '';changeSelect()" <transition mode="out-in" appear name="fade">
v-show="form.showClearIcon"> <img src="@/assets/images/enterprise/search-input-clear-icon.svg" @click.stop="form.value = '';changeSelect()"
</transition> v-show="form.showClearIcon">
</template> </transition>
</el-input> </template>
</el-input>
</transition>
</div> </div>
</template> </template>
<!-- 多选 --> <!-- 多选 -->
...@@ -145,11 +147,19 @@ export default { ...@@ -145,11 +147,19 @@ export default {
} }
}, },
searchBlur(event, formData) { searchBlur(event, formData) {
const { target } = event;
// 失去焦点没有文字
if (!target?.value?.length) {
this.$set(formData, "hover", false);
}
this.$set(formData, "showClearIcon", false); this.$set(formData, "showClearIcon", false);
this.changeSelect();
}, },
searchInput(value, formData) { searchInput(value, formData) {
if (value?.length) { if (value?.length) {
this.$set(formData, "showClearIcon", true); this.$set(formData, "showClearIcon", true);
} else {
this.$set(formData, "showClearIcon", false);
} }
}, },
searchHover(event, formData) { searchHover(event, formData) {
...@@ -157,6 +167,7 @@ export default { ...@@ -157,6 +167,7 @@ export default {
}, },
searchUnHover(event, formData) { searchUnHover(event, formData) {
if (!formData.value) { if (!formData.value) {
this.$set(formData, "showClearIcon", false);
this.$set(formData, "hover", false); this.$set(formData, "hover", false);
} }
}, },
...@@ -429,6 +440,13 @@ export default { ...@@ -429,6 +440,13 @@ export default {
::v-deep .normal-search-container { ::v-deep .normal-search-container {
display: flex; display: flex;
align-items: center; align-items: center;
transition-property: width, background;
transition-duration: 0.3s;
width: 64px;
height: 32px;
padding-left: 12px;
box-sizing: border-box;
position: relative;
&.is-hover-search { &.is-hover-search {
width: 238px; width: 238px;
...@@ -440,19 +458,13 @@ export default { ...@@ -440,19 +458,13 @@ export default {
} }
} }
&:hover {
& > span {
color: #0081ff;
}
}
& > img { & > img {
width: 16px; width: 16px;
height: 16px; height: 16px;
margin-left: 12px;
cursor: pointer; cursor: pointer;
} }
// & > .search-transition-container > span {
& > span { & > span {
color: rgba(35, 35, 35, 0.8); color: rgba(35, 35, 35, 0.8);
font-weight: 400; font-weight: 400;
...@@ -462,7 +474,12 @@ export default { ...@@ -462,7 +474,12 @@ export default {
cursor: pointer; cursor: pointer;
} }
.search-transition-container {
width: 100%;
}
.el-input { .el-input {
width: 100% !important;
& > .el-input__inner { & > .el-input__inner {
border: none; border: none;
height: 32px; height: 32px;
...@@ -470,7 +487,7 @@ export default { ...@@ -470,7 +487,7 @@ export default {
caret-color: #0081ff; caret-color: #0081ff;
color: rgba(35, 35, 35, 0.8); color: rgba(35, 35, 35, 0.8);
font-size: 14px; font-size: 14px;
background: #f4f6f9; background: transparent;
padding-right: 26px; padding-right: 26px;
padding-left: 8px; padding-left: 8px;
...@@ -488,6 +505,9 @@ export default { ...@@ -488,6 +505,9 @@ export default {
.el-input__suffix-inner { .el-input__suffix-inner {
height: 14px; height: 14px;
width: 14px; width: 14px;
display: flex;
align-items: center;
justify-content: center;
} }
img { img {
......
dsk-operate-ui/src/views/project/projectList/component/BidOpeningRecord.vue
View file @ 8c0f16e4
...@@ -187,7 +187,7 @@ export default { ...@@ -187,7 +187,7 @@ export default {
// 是否显示弹出层 // 是否显示弹出层
open: false, open: false,
// 弹出层标题 // 弹出层标题
title: "导入开标信息", title: "导入开标记录",
// 是否禁用上传 // 是否禁用上传
isUploading: false, isUploading: false,
// 设置上传的请求头部 // 设置上传的请求头部
...@@ -216,6 +216,7 @@ export default { ...@@ -216,6 +216,7 @@ export default {
async dataInit() { async dataInit() {
try { try {
if (this.projectDetail.isPrivate === 0) { if (this.projectDetail.isPrivate === 0) {
this.needSelection = false;
this.formColum.push({ label: '操作', prop: 'action-field-bar', width: "151px", fixed: "right" }); this.formColum.push({ label: '操作', prop: 'action-field-bar', width: "151px", fixed: "right" });
} }
await this.getTableList(); await this.getTableList();
...@@ -290,6 +291,8 @@ export default { ...@@ -290,6 +291,8 @@ export default {
this.$message.success(`${this.formData.id ? "修改成功!" : "新增成功!"}`); this.$message.success(`${this.formData.id ? "修改成功!" : "新增成功!"}`);
this.dialogClose(); this.dialogClose();
await this.getTableList(); await this.getTableList();
} else {
this.$message.error(`${result.msg}`);
} }
} catch (error) { } catch (error) {
console.log(error); console.log(error);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment