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