记一次样式 flexgrow

<template>   <div>     <div class="searchTop">       <div class="text" @click="showArea">{{province}}</div>       <div class="disflex">         <div>           <img src="../../assets/images/black.png" alt class="black" />         </div>         <div class="vansearch">           <van-search             v-model="value"             shape="round"             placeholder="搜索医院、城市"             @input="valueChange"             @clear="valueClear"           />         </div>       </div>     </div>     <div class="tag"></div>     <div v-for="(item,index) in getlist" :key="index" class="nameBox">       <div class="name">{{item}}</div>     </div>     <addresspopup       :title="'地区'"       @confirmAddr="confirmAddr"       @cancleAddr="cancleAddr"       :showPopup="showPopup"     ></addresspopup>   </div> </template>
<script> import addresspopup from "../../components/address-popup.vue"; import hospitalLsit from "@/mixins/hospital-dfpz";
export default {   name: "areaSearch",
  components: { addresspopup },
  data() {     return {       hospitalLsit: [],       value: "",       areaList: {},       showPopup: false, // 地区选择显示       getlist: [],       province: ""     };   },   created() {     this.hospitalLsit = hospitalLsit.hospital;   },   mounted() {     this.getBeijing();   },   methods: {     getBeijing() {       this.province = "北京市";       let valParams = {         province: "北京市",         city: "北京市"       };       for (let i in this.hospitalLsit) {         if (           valParams.province == this.hospitalLsit[i].province &&           valParams.city == this.hospitalLsit[i].city         ) {           //   console.log(this.hospitalLsit[i].hospital);           this.getlist.push(this.hospitalLsit[i].hospital);         }       }     },     showArea() {       this.showPopup = true;     },     cancleAddr(val) {       this.showPopup = false;     },     confirmAddr(val) {       this.getlist = [];       this.showPopup = false;       let valParams = {         province: val[0].name,         city: val[1].name       };       this.province = val[1].name;       for (let i in this.hospitalLsit) {         if (           valParams.province == this.hospitalLsit[i].province &&           valParams.city == this.hospitalLsit[i].city         ) {           //   console.log(this.hospitalLsit[i].hospital);           this.getlist.push(this.hospitalLsit[i].hospital);         }       }     },     valueChange() {       this.getlist = [];       var list = this.hospitalLsit;       for (var i = 0; i < list.length; i++) {         if (list[i].hospital.indexOf(this.value) >= 0) {           this.getlist.push(list[i].hospital);         }       }       if (this.value == "") {         this.getlist = [];         this.getBeijing();       }     },     valueClear() {       this.getlist = [];       this.getBeijing();     }   } }; </script>
<style lang="less" scoped> .searchTop {   height: 52px;   background: #ffffff;   display: flex;   flex-direction: row;   align-items: center;   margin-left: 15px;   .text {     font-size: 14px;     font-family: PingFangSC, PingFangSC-Regular;     font-weight: 400;     color: #666666;     overflow: hidden;     white-space: Nowrap;     text-overflow: ellipsis;   } } .black {   width: 6.5px;   height: 4.5px;   vertical-align: middle;   margin-left: 4px; } .tag {   width: 100vw;   height: 8px;   background: #f8f8f7; } .nameBox {   margin-left: 12px;   border-bottom: 1px solid #f0f0f0; } .name {   margin-top: 16px;   margin-bottom: 16px; } .disflex {   display: flex;   flex-direction: row;   align-items: center;   flex-grow: 1; } .vansearch {   flex-grow: 1; } </style>