Skip to content

D
dsk-cr20g
Commit 56fed0de authored by huangjie's avatar huangjie
Browse files
Options

*

parent 25d65d6e
Hide whitespace changes
Inline Side-by-side
Showing with 211 additions and 8 deletions
dsk-operate-ui/src/views/project/projectList/component/xgqy.vue
View file @ 56fed0de
......@@ -8,9 +8,18 @@
<el-option v-for="(item,index) in companytype" :label="item.dictLabel" :value="item.dictValue"></el-option>
</el-select>
<div class="searchInput small">
<el-input type="text" placeholder="输入关键词查询" clearable v-model="searchParam.companyName">
<i slot="prefix" class="el-input__icon"><img src="@/assets/images/project/sousuo.png" @click="handleCurrentChange(1)"></i></el-input>
<!--<div class="btn" @click="handleCurrentChange(1)">搜索</div>-->
<div class="normal-search-container" @click="showSearchBox = true" v-if="!showSearchBox">
<img src="@/assets/images/enterprise/enterprise-search-icon.svg" alt="">
<span>输入关键词查询</span>
</div>
<!--&lt;!&ndash; 输入框展开后样式 &ndash;&gt;-->
<transition @enter="onEnter" appear mode="out-in">
<div class="cooperate-name enterprise-search-container" id="focus1" v-if="showSearchBox">
<el-input clearable @clear="handleCurrentChange(1)" @focus="clickFocus('focus1')" @blur="clickFocus('focus1')" v-model="searchParam.companyName"
placeholder="输入关键词查询"></el-input>
<span @click="handleCurrentChange(1)">搜索</span>
</div>
</transition>
</div>
<div class="btn btn_primary h32 b3" @click="opennew" v-if="isDisableds == false"><div class="img img1"></div>添加相关企业</div>
</div>
......@@ -187,6 +196,7 @@
import { addXGQY, delXGQY, getXGQY, saveXGQY } from '@/api/project/project'
import { getDictType, getEnterprise } from '@/api/main'
import skeleton from './skeleton'
import gsap from "gsap";
export default {
components:{skeleton},
......@@ -241,6 +251,7 @@
showlist:false,
companData:[],
isSkeleton:true,
showSearchBox:false,
}
},
created(){
......@@ -253,6 +264,10 @@
mounted(){
},
methods:{
clickFocus(e) {
document.getElementById(e).classList.toggle('span-ba');
},
getDetail(row){
this.isedit = true
this.hzhbVisible = true
......@@ -358,6 +373,21 @@
remark:'',
}
},
onEnter(el, done) {
gsap.from(el, {
opacity: 0,
width: 0,
});
gsap.to(el, {
opacity: 1,
width: 242,
onComplete() {
// 完成动画聚焦输入框
el.querySelector("input").focus();
done();
}
});
},
}
}
</script>
......@@ -378,6 +408,79 @@
.searchInput .el-input{
width: 68%;
}
.searchInput.small{
width: 257px;
}
.searchInput{
.normal-search-container {
display: flex;
align-items: center;
cursor: pointer;
height: 34px;
&:hover {
& > span {
color: #0081ff;
}
}
& > img {
width: 16px;
height: 16px;
margin-left: 12px;
}
& > span {
color: #232323;
color: rgba(35, 35, 35, 0.4);
font-weight: 400;
margin-left: 8px;
line-height: 22px;
font-size: 14px;
}
}
.cooperate-name {
display: flex;
border-radius: 2px;
border: 1px solid #d9d9d9;
line-height: 30px;
height: 30px;
float: left;
width: 100%;
span {
width: 60px;
height: 28px;
line-height: 28px;
font-size: 14px;
background: #f5f5f5;
text-align: center;
color: #0081ff;
border: 1px solid #efefef;
border-left: 0;
cursor: pointer;
}
&.span-ba {
border: 1px solid #0081ff;
span {
color: #ffffff;
background: #0081ff;
border: 1px solid #0081ff;
}
}
::v-deep .el-input {
flex: 1;
}
::v-deep .el-input__inner {
border: 0;
line-height: 28px;
height: 28px;
position: absolute;
top: 1px;
padding-right: 28px;
font-size: 12px;
padding-left: 8px;
}
}
}
.w102{
width: 102px;
}
......
dsk-operate-ui/src/views/project/projectList/component/zlwd.vue
View file @ 56fed0de
......@@ -4,12 +4,19 @@
<el-card class="box-card noborder">
<div class="cardtitles">资料文档</div>
<div class="searchbtns">
<!--<div class="searchbtns" v-if="fileDatas.rows != null && fileDatas.rows.length>0">-->
<div class="searchInput small">
<el-input type="text" v-model="param.keyword" clearable placeholder="输入关键词查询">
<i slot="prefix" class="el-input__icon"><img src="@/assets/images/project/sousuo.png" @click="handleCurrentChange(1)"></i>
</el-input>
<!--<div class="btn" @click="handleCurrentChange(1)">搜索</div>-->
<div class="normal-search-container" @click="showSearchBox = true" v-if="!showSearchBox">
<img src="@/assets/images/enterprise/enterprise-search-icon.svg" alt="">
<span>输入关键词查询</span>
</div>
<!--&lt;!&ndash; 输入框展开后样式 &ndash;&gt;-->
<transition @enter="onEnter" appear mode="out-in">
<div class="cooperate-name enterprise-search-container" id="focus1" v-if="showSearchBox">
<el-input clearable @clear="handleCurrentChange(1)" @focus="clickFocus('focus1')" @blur="clickFocus('focus1')" v-model="param.keyword"
placeholder="输入关键词查询"></el-input>
<span @click="handleCurrentChange(1)">搜索</span>
</div>
</transition>
</div>
<!--<div class="btn btn_primary h32 b2" @click="getUP" v-if="fileDatas.total>0"><div class="img img2"></div>上传</div>-->
......@@ -154,6 +161,7 @@
import { getToken } from '@/utils/auth'
import { delZLWD, getZLWD } from '@/api/project/project'
import skeleton from './skeleton'
import gsap from "gsap";
export default {
components:{skeleton},
......@@ -188,6 +196,7 @@
isDisableds:this.isDisabled,
keys:1,
isSkeleton:true,
showSearchBox:false,
}
},
created(){
......@@ -195,6 +204,24 @@
// console.log(this.$ref)
},
methods:{
clickFocus(e) {
document.getElementById(e).classList.toggle('span-ba');
},
onEnter(el, done) {
gsap.from(el, {
opacity: 0,
width: 0,
});
gsap.to(el, {
opacity: 1,
width: 242,
onComplete() {
// 完成动画聚焦输入框
el.querySelector("input").focus();
done();
}
});
},
getall(){
this.param.filePath = this.detailId ? this.detailId : this.$route.query.id
this.filename=''
......@@ -316,6 +343,79 @@
<style lang="scss" scoped>
.searchInput.small{
width: 257px;
}
.searchInput{
.normal-search-container {
display: flex;
align-items: center;
cursor: pointer;
height: 34px;
&:hover {
& > span {
color: #0081ff;
}
}
& > img {
width: 16px;
height: 16px;
margin-left: 12px;
}
& > span {
color: #232323;
color: rgba(35, 35, 35, 0.4);
font-weight: 400;
margin-left: 8px;
line-height: 22px;
font-size: 14px;
}
}
.cooperate-name {
display: flex;
border-radius: 2px;
border: 1px solid #d9d9d9;
line-height: 30px;
height: 30px;
float: left;
width: 100%;
span {
width: 60px;
height: 28px;
line-height: 28px;
font-size: 14px;
background: #f5f5f5;
text-align: center;
color: #0081ff;
border: 1px solid #efefef;
border-left: 0;
cursor: pointer;
}
&.span-ba {
border: 1px solid #0081ff;
span {
color: #ffffff;
background: #0081ff;
border: 1px solid #0081ff;
}
}
::v-deep .el-input {
flex: 1;
}
::v-deep .el-input__inner {
border: 0;
line-height: 28px;
height: 28px;
position: absolute;
top: 1px;
padding-right: 28px;
font-size: 12px;
padding-left: 8px;
}
}
}
v-deep.el-upload:focus{
color: #FFFFFF !important;
}
......
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