Skip to content

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

*

parent fbcdd059
Hide 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 @@
<el-option v-for="(item,index) in companytype" :label="item.dictLabel" :value="item.dictValue"></el-option>
</el-select>
<div class="searchInput small">
<div class="normal-search-container" @click="showSearchBox = true" v-if="!showSearchBox">
<img src="@/assets/images/enterprise/enterprise-search-icon.svg" alt="">
<span>输入关键词查询</span>
<div @mouseover="showSearchBox = true" @mouseleave="leaves" >
<img class="ss" src="@/assets/images/enterprise/enterprise-search-icon.svg" alt="">
<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>
<!--&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>
......@@ -196,7 +190,6 @@
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},
......@@ -264,9 +257,10 @@
mounted(){
},
methods:{
clickFocus(e) {
document.getElementById(e).classList.toggle('span-ba');
leaves(){
if(this.searchParam.companyName == ""){
this.showSearchBox = false
}
},
getDetail(row){
this.isedit = true
......@@ -373,21 +367,6 @@
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>
......@@ -406,81 +385,53 @@
}
}
.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{
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;
/*width: 257px;*/
border: 0;
border-radius: 4px !important;
.ss{
position: absolute;
z-index: 1;
left: 13px;
top: 9px;
width: 13px;
}
& > span {
.cx{
color: #232323;
color: rgba(35, 35, 35, 0.4);
font-weight: 400;
margin-left: 8px;
line-height: 22px;
opacity: 0.8;
font-size: 14px;
margin-left: 36px;
line-height: 32px;
}
}
.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;
input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: #232323;
opacity: 0.4;
}
&.span-ba {
border: 1px solid #0081ff;
span {
color: #ffffff;
background: #0081ff;
border: 1px solid #0081ff;
}
input::-moz-placeholder { /* Firefox 19+ */
color: #232323;
opacity: 0.4;
}
::v-deep .el-input {
flex: 1;
input:-ms-input-placeholder { /* IE 10+ */
color: #232323;
opacity: 0.4;
}
::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;
input:-moz-placeholder { /* Firefox 18- */
color: #232323;
opacity: 0.4;
}
}
}
.w102{
width: 102px;
}
......
dsk-operate-ui/src/views/project/projectList/component/zlwd.vue
View file @ 76a6b52e
......@@ -5,18 +5,12 @@
<div class="cardtitles">资料文档</div>
<div class="searchbtns">
<div class="searchInput small">
<div class="normal-search-container" @click="showSearchBox = true" v-if="!showSearchBox">
<img src="@/assets/images/enterprise/enterprise-search-icon.svg" alt="">
<span>输入关键词查询</span>
<div @mouseover="showSearchBox = true" @mouseleave="leaves" >
<img class="ss" src="@/assets/images/enterprise/enterprise-search-icon.svg" alt="">
<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>
<!--&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>-->
......@@ -161,7 +155,6 @@
import { getToken } from '@/utils/auth'
import { delZLWD, getZLWD } from '@/api/project/project'
import skeleton from './skeleton'
import gsap from "gsap";
export default {
components:{skeleton},
......@@ -204,23 +197,10 @@
// 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();
}
});
leaves(){
if(this.searchParam.companyName == ""){
this.showSearchBox = false
}
},
getall(){
this.param.filePath = this.detailId ? this.detailId : this.$route.query.id
......@@ -343,77 +323,53 @@
<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;
}
.searchInput .el-input{
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;
}
.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;
}
}
.searchInput.small{
/*width: 257px;*/
border: 0;
border-radius: 4px !important;
.ss{
position: absolute;
z-index: 1;
left: 13px;
top: 9px;
width: 13px;
}
.cx{
color: #232323;
opacity: 0.8;
font-size: 14px;
margin-left: 36px;
line-height: 32px;
}
input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: #232323;
opacity: 0.4;
}
input::-moz-placeholder { /* Firefox 19+ */
color: #232323;
opacity: 0.4;
}
input:-ms-input-placeholder { /* IE 10+ */
color: #232323;
opacity: 0.4;
}
input:-moz-placeholder { /* Firefox 18- */
color: #232323;
opacity: 0.4;
}
}
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