Skip to content

D
dsk-operate-sys-cscec
Commit 76a6b52e authored by huangjie's avatar huangjie
Browse files
Options

*

parent fbcdd059
Show whitespace changes
Inline Side-by-side
Showing with 99 additions and 192 deletions
dsk-operate-ui/src/views/project/projectList/component/xgqy.vue
View file @ 76a6b52e
...@@ -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>
</div> <el-input v-if="showSearchBox" @keyup.enter.native="handleCurrentChange(1)" clearable @clear="handleCurrentChange(1)" v-model="searchParam.companyName"
<!--&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> placeholder="输入关键词查询"></el-input>
<span @click="handleCurrentChange(1)">搜索</span>
</div> </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;
.searchInput.small{ left: 0;
width: 257px; top: 0;
} margin-top: 0;
.searchInput{ z-index: 0;
.normal-search-container { ::v-deep .el-input__inner{
display: flex; background: #F4F6F9 !important;
align-items: center; padding-left: 36px !important;
cursor: pointer; padding-right: 35px !important;
height: 34px;
&:hover {
& > span {
color: #0081ff;
} }
} }
.searchInput.small{
& > img { /*width: 257px;*/
width: 16px; border: 0;
height: 16px; border-radius: 4px !important;
margin-left: 12px; .ss{
position: absolute;
z-index: 1;
left: 13px;
top: 9px;
width: 13px;
} }
.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 */
color: #232323;
opacity: 0.4;
} }
.cooperate-name { input::-moz-placeholder { /* Firefox 19+ */
display: flex; color: #232323;
border-radius: 2px; opacity: 0.4;
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 { 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;
} }
......
dsk-operate-ui/src/views/project/projectList/component/zlwd.vue
View file @ 76a6b52e
...@@ -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>
</div> <el-input v-if="showSearchBox" @keyup.enter.native="handleCurrentChange(1)" clearable @clear="handleCurrentChange(1)" v-model="param.keyword"
<!--&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> placeholder="输入关键词查询"></el-input>
<span @click="handleCurrentChange(1)">搜索</span>
</div> </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 { .searchInput .el-input{
width: 16px; width: 100%;
height: 16px; position: absolute;
margin-left: 12px; 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;
} }
& > span {
color: #232323;
color: rgba(35, 35, 35, 0.4);
font-weight: 400;
margin-left: 8px;
line-height: 22px;
font-size: 14px;
} }
.searchInput.small{
/*width: 257px;*/
border: 0;
border-radius: 4px !important;
.ss{
position: absolute;
z-index: 1;
left: 13px;
top: 9px;
width: 13px;
} }
.cooperate-name { .cx{
display: flex; color: #232323;
border-radius: 2px; opacity: 0.8;
border: 1px solid #d9d9d9;
line-height: 30px;
height: 30px;
float: left;
width: 100%;
span {
width: 60px;
height: 28px;
line-height: 28px;
font-size: 14px; font-size: 14px;
background: #f5f5f5; margin-left: 36px;
text-align: center; line-height: 32px;
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;
} }
input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: #232323;
opacity: 0.4;
} }
::v-deep .el-input { input::-moz-placeholder { /* Firefox 19+ */
flex: 1; color: #232323;
opacity: 0.4;
} }
::v-deep .el-input__inner { input:-ms-input-placeholder { /* IE 10+ */
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;
} }
input:-moz-placeholder { /* Firefox 18- */
color: #232323;
opacity: 0.4;
} }
} }
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