Commit 76a6b52e authored by huangjie's avatar huangjie

*

parent fbcdd059
...@@ -8,18 +8,12 @@ ...@@ -8,18 +8,12 @@
<el-option v-for="(item,index) in companytype" :label="item.dictLabel" :value="item.dictValue"></el-option> <el-option v-for="(item,index) in companytype" :label="item.dictLabel" :value="item.dictValue"></el-option>
</el-select> </el-select>
<div class="searchInput small"> <div class="searchInput small">
<div class="normal-search-container" @click="showSearchBox = true" v-if="!showSearchBox"> <div @mouseover="showSearchBox = true" @mouseleave="leaves" >
<img src="@/assets/images/enterprise/enterprise-search-icon.svg" alt=""> <img class="ss" src="@/assets/images/enterprise/enterprise-search-icon.svg" alt="">
<span>输入关键词查询</span> <span class="cx" v-if="!showSearchBox">搜索</span>
<el-input v-if="showSearchBox" @keyup.enter.native="handleCurrentChange(1)" clearable @clear="handleCurrentChange(1)" v-model="searchParam.companyName"
placeholder="输入关键词查询"></el-input>
</div> </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>
<div class="btn btn_primary h32 b3" @click="opennew" v-if="isDisableds == false"><div class="img img1"></div>添加相关企业</div> <div class="btn btn_primary h32 b3" @click="opennew" v-if="isDisableds == false"><div class="img img1"></div>添加相关企业</div>
</div> </div>
...@@ -196,7 +190,6 @@ ...@@ -196,7 +190,6 @@
import { addXGQY, delXGQY, getXGQY, saveXGQY } from '@/api/project/project' import { addXGQY, delXGQY, getXGQY, saveXGQY } from '@/api/project/project'
import { getDictType, getEnterprise } from '@/api/main' import { getDictType, getEnterprise } from '@/api/main'
import skeleton from './skeleton' import skeleton from './skeleton'
import gsap from "gsap";
export default { export default {
components:{skeleton}, components:{skeleton},
...@@ -264,9 +257,10 @@ ...@@ -264,9 +257,10 @@
mounted(){ mounted(){
}, },
methods:{ methods:{
leaves(){
clickFocus(e) { if(this.searchParam.companyName == ""){
document.getElementById(e).classList.toggle('span-ba'); this.showSearchBox = false
}
}, },
getDetail(row){ getDetail(row){
this.isedit = true this.isedit = true
...@@ -373,21 +367,6 @@ ...@@ -373,21 +367,6 @@
remark:'', 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> </script>
...@@ -406,81 +385,53 @@ ...@@ -406,81 +385,53 @@
} }
} }
.searchInput .el-input{ .searchInput .el-input{
width: 68%; width: 100%;
position: absolute;
left: 0;
top: 0;
margin-top: 0;
z-index: 0;
::v-deep .el-input__inner{
background: #F4F6F9 !important;
padding-left: 36px !important;
padding-right: 35px !important;
}
} }
.searchInput.small{ .searchInput.small{
width: 257px; /*width: 257px;*/
} border: 0;
.searchInput{ border-radius: 4px !important;
.normal-search-container { .ss{
display: flex; position: absolute;
align-items: center; z-index: 1;
cursor: pointer; left: 13px;
height: 34px; top: 9px;
&:hover { width: 13px;
& > span {
color: #0081ff;
}
}
& > img {
width: 16px;
height: 16px;
margin-left: 12px;
} }
.cx{
& > span {
color: #232323; color: #232323;
color: rgba(35, 35, 35, 0.4); opacity: 0.8;
font-weight: 400;
margin-left: 8px;
line-height: 22px;
font-size: 14px; font-size: 14px;
margin-left: 36px;
line-height: 32px;
} }
} input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
.cooperate-name { color: #232323;
display: flex; opacity: 0.4;
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 { input::-moz-placeholder { /* Firefox 19+ */
border: 1px solid #0081ff; color: #232323;
span { opacity: 0.4;
color: #ffffff;
background: #0081ff;
border: 1px solid #0081ff;
}
} }
::v-deep .el-input { input:-ms-input-placeholder { /* IE 10+ */
flex: 1; color: #232323;
opacity: 0.4;
} }
::v-deep .el-input__inner { input:-moz-placeholder { /* Firefox 18- */
border: 0; color: #232323;
line-height: 28px; opacity: 0.4;
height: 28px;
position: absolute;
top: 1px;
padding-right: 28px;
font-size: 12px;
padding-left: 8px;
} }
} }
}
.w102{ .w102{
width: 102px; width: 102px;
} }
......
...@@ -5,18 +5,12 @@ ...@@ -5,18 +5,12 @@
<div class="cardtitles">资料文档</div> <div class="cardtitles">资料文档</div>
<div class="searchbtns"> <div class="searchbtns">
<div class="searchInput small"> <div class="searchInput small">
<div class="normal-search-container" @click="showSearchBox = true" v-if="!showSearchBox"> <div @mouseover="showSearchBox = true" @mouseleave="leaves" >
<img src="@/assets/images/enterprise/enterprise-search-icon.svg" alt=""> <img class="ss" src="@/assets/images/enterprise/enterprise-search-icon.svg" alt="">
<span>输入关键词查询</span> <span class="cx" v-if="!showSearchBox">搜索</span>
<el-input v-if="showSearchBox" @keyup.enter.native="handleCurrentChange(1)" clearable @clear="handleCurrentChange(1)" v-model="param.keyword"
placeholder="输入关键词查询"></el-input>
</div> </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>
<!--<div class="btn btn_primary h32 b2" @click="getUP" v-if="fileDatas.total>0"><div class="img img2"></div>上传</div>--> <!--<div class="btn btn_primary h32 b2" @click="getUP" v-if="fileDatas.total>0"><div class="img img2"></div>上传</div>-->
...@@ -161,7 +155,6 @@ ...@@ -161,7 +155,6 @@
import { getToken } from '@/utils/auth' import { getToken } from '@/utils/auth'
import { delZLWD, getZLWD } from '@/api/project/project' import { delZLWD, getZLWD } from '@/api/project/project'
import skeleton from './skeleton' import skeleton from './skeleton'
import gsap from "gsap";
export default { export default {
components:{skeleton}, components:{skeleton},
...@@ -204,23 +197,10 @@ ...@@ -204,23 +197,10 @@
// console.log(this.$ref) // console.log(this.$ref)
}, },
methods:{ methods:{
clickFocus(e) { leaves(){
document.getElementById(e).classList.toggle('span-ba'); if(this.searchParam.companyName == ""){
}, this.showSearchBox = false
onEnter(el, done) { }
gsap.from(el, {
opacity: 0,
width: 0,
});
gsap.to(el, {
opacity: 1,
width: 242,
onComplete() {
// 完成动画聚焦输入框
el.querySelector("input").focus();
done();
}
});
}, },
getall(){ getall(){
this.param.filePath = this.detailId ? this.detailId : this.$route.query.id this.param.filePath = this.detailId ? this.detailId : this.$route.query.id
...@@ -343,77 +323,53 @@ ...@@ -343,77 +323,53 @@
<style lang="scss" scoped> <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 { .searchInput .el-input{
color: #232323; width: 100%;
color: rgba(35, 35, 35, 0.4); position: absolute;
font-weight: 400; left: 0;
margin-left: 8px; top: 0;
line-height: 22px; margin-top: 0;
font-size: 14px; z-index: 0;
} ::v-deep .el-input__inner{
background: #F4F6F9 !important;
padding-left: 36px !important;
padding-right: 35px !important;
} }
.cooperate-name { }
display: flex; .searchInput.small{
border-radius: 2px; /*width: 257px;*/
border: 1px solid #d9d9d9; border: 0;
line-height: 30px; border-radius: 4px !important;
height: 30px; .ss{
float: left; position: absolute;
width: 100%; z-index: 1;
span { left: 13px;
width: 60px; top: 9px;
height: 28px; width: 13px;
line-height: 28px; }
font-size: 14px; .cx{
background: #f5f5f5; color: #232323;
text-align: center; opacity: 0.8;
color: #0081ff; font-size: 14px;
border: 1px solid #efefef; margin-left: 36px;
border-left: 0; line-height: 32px;
cursor: pointer; }
} input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
&.span-ba { color: #232323;
border: 1px solid #0081ff; opacity: 0.4;
span { }
color: #ffffff; input::-moz-placeholder { /* Firefox 19+ */
background: #0081ff; color: #232323;
border: 1px solid #0081ff; opacity: 0.4;
} }
} input:-ms-input-placeholder { /* IE 10+ */
::v-deep .el-input { color: #232323;
flex: 1; opacity: 0.4;
} }
::v-deep .el-input__inner { input:-moz-placeholder { /* Firefox 18- */
border: 0; color: #232323;
line-height: 28px; opacity: 0.4;
height: 28px;
position: absolute;
top: 1px;
padding-right: 28px;
font-size: 12px;
padding-left: 8px;
}
} }
} }
v-deep.el-upload:focus{ v-deep.el-upload:focus{
......
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