nsgk_mobile/src/views/newBusinessEntity/map.vue

    <template>
  <div>
    <div class="box">
      <div class="top">
        <div class="topone">
          <van-icon name="arrow-left" @click="backHistory" class="arrowl" />
          <div class="weather">
            <span class="sun"></span>
            <span class="cleard">晴天</span>
            <span class="temperature">20～32℃</span>
          </div>
          <div class="province">
            <span>山东省</span>
            <span>烟台市</span>
            <span>莱州市</span>
            <van-icon name="arrow" class="arrowr" />
          </div>
        </div>
        <div class="search">
          <input type="text" class="serch" />
          <img
            src="../../assets/images/Newbusinessentity/0_03.png"
            alt=""
            class="serchimgs"
          />
        </div>
      </div>
      <div class="footer">
        <van-cell @click="showPopup">
          <van-tabs v-model="active">
            <van-tab title="农户"></van-tab>
            <van-tab title="新型经营主体"></van-tab>
            <van-tab title="经济人"></van-tab>
            <van-tab title="采购商"></van-tab>
          </van-tabs>
        </van-cell>
        <!-- //弹窗内容 -->
        <van-popup
          v-model="show"
          round
          position="bottom"
          :style="{ height: '80%' }"
        >
          <div>
            <!-- tab -->
            <van-tabs v-model="active" id="cc">
              <van-tab title="农户"></van-tab>
              <van-tab title="新型经营主体"></van-tab>
              <van-tab title="经济人"></van-tab>
              <van-tab title="采购商"></van-tab>
            </van-tabs>
            <!-- //搜索栏 -->
            <div class="searchtow">
              <input type="text" class="serchtow" />
              <img
                src="../../assets/images/Newbusinessentity/0_03.png"
                alt=""
                class="serchimgstow"
              />
            </div>
          </div>
          <div class="suoyin">
            <van-index-bar>
              <van-index-anchor index="A" />
              <van-cell title="安心超人有限公司" />
              <van-cell title="安心超人有限公司" />
              <van-cell title="安心超人有限公司" />

              <van-index-anchor index="B" />
              <van-cell title="百度心超人有限公司" />
              <van-cell title="百度心超人有限公司" />
              <van-cell title="百度心超人有限公司" />

              ...
            </van-index-bar>
          </div>
        </van-popup>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      active: 2,
      show: false,
    };
  },
  methods: {
    showPopup() {
      this.show = true;
    },
    backHistory() {
      this.$router.go(-1);
    },
  },
};
</script>
<style scoped lang="scss">
span {
  display: block;
}
.top {
  overflow: hidden;
  width: 100%;
  height: 19.5rem;
  background: url("../../assets/images/Newbusinessentity/56_01.jpg");
  .topone {
    display: flex;
    justify-content: space-around;
    margin-top: 0.2rem;
    margin-top: 0.9rem;
    .weather {
      display: flex;
    }
    .sun {
      color: #696969;
      width: 0.3rem;
      height: 0.3rem;
      background: url("../../assets/images/Newbusinessentity/weather_forecast.png");
      margin: 0.25rem 0.2rem 0.2rem 0rem;
    }
    .temperature {
      margin: 0.2rem 0.2rem 0.2rem 0rem;
    }
    .cleard {
      margin: 0.2rem 0.2rem 0.2rem 0rem;
    }
    .province {
      display: flex;
      width: 3.9rem;
      height: 0.8rem;
      background: #45c182;
      color: #ffffff;
      border-radius: 0.3rem;
      font-size: 0.34rem;
      text-align: center;
      line-height: 0.8rem;
      .arrowr {
        font-size: 0.4rem;
        margin: 0.2rem 0 0 0.1rem;
      }
      span {
        height: 0.3rem;
        margin-left: 0.1rem;
      }
    }
    .arrowl {
      font-size: 0.5rem;
      font-weight: bold;
    }
  }
  .search {
    position: relative;
    height: 0.9rem;
    top: 0.5rem;
    left: 0.54rem;
  }
  .serch {
    background: white;
    width: 9rem;
    height: 0.8rem;
    border-radius: 5rem;
    text-indent: 1rem;
    // margin: 0.5rem 0.2rem 0.2rem 0.5rem;
  }
  .serchimgs {
    position: absolute;
    left: 0.5rem;
    top: 0.2rem;
  }
}
.footer {
  width: 100%;
  height: 2rem;
  background: url("../../assets/images/Newbusinessentity/1_02.jpg") no-repeat;
  overflow: hidden;
  .searchtow {
    position: relative;
    height: 0.9rem;
    left: 0.54rem;
    bottom: 1.1rem;
  }
  .serchtow {
    background: white;
    width: 9rem;
    height: 0.8rem;
    border-radius: 5rem;
    text-indent: 1rem;
    // margin: 0.5rem 0.2rem 0.2rem 0.5rem;
  }
  .serchimgstow {
    position: absolute;
    left: 0.5rem;
    top: 0.2rem;
    z-index: 20003;
  }
}
/deep/ .van-cell {
  background-color: rgba(110, 190, 125, 0.1) !important;
  padding: 0rem 0rem;
}
/deep/ .van-tabs__nav {
  background-color: rgba(110, 190, 125, 0.2) !important;
  margin-top: 0.3rem;
}

#cc {
  background-color: rgba(110, 190, 125, 0.7) !important;
  background: url("../../assets/images/Newbusinessentity/1_04_02.jpg") no-repeat;
  height: 2.7rem;
}
</style>