*

dsk-operate-ui/src/views/project/projectList/component/xgqy.vue

@@ -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

@@ -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;
   }