【无标题】

van-popup记录

    <!-- 选择pop start-->

    <van-popup
      v-model="showDatePick"
      position="bottom"
      :style="{ height: '50%', overflow: 'hidden' }"
    >
      <div class="pop-all-box">
        <div class="popbox">
          <div class="subcanbox">
            <div @click="showDatePick = false" class="cancel">取消</div>
            <div @click="submit" class="submit">确认</div>
          </div>
        </div>
        <div>
          <van-tabs
            title-active-color="#3A75FF"
            title-inactive-color="#000"
            color="#3A75FF"
            @click="tabClick"
          >
            <van-tab
              :title="tab.value"
              v-for="tab in searchTabs"
              :key="tab.type"
            >
              <!-- <hr /> -->
            </van-tab>
          </van-tabs>
        </div>
      </div>
    </van-popup>
    <!-- 选择pop end-->

.pop-all-box {
  //   min-width: 320px;
  width: 100%;
  height: 55px;
  position: relative;
  top: 0;
  .popbox {
    width: 100%;
    position: absolute;
    top: 0;
    // left: 0;
    height: 55px;
    font-size: 14px;
    padding: 0px 20px;
    .subcanbox {
      display: flex;
      justify-content: space-between;
    }
    .cancel {
      width: 40px;
      font-family: "PingFang SC";
      font-weight: 400;
      font-size: 15px;
      text-align: center;
      color: #363b3f;
      line-height: 55px;
    }
    .please {
      width: 80px;
      font-family: "PingFang SC Medium";
      font-weight: 500;
      font-size: 16px;
      text-align: center;
      color: #333;
      line-height: 55px;
    }
    .submit {
      width: 40px;
      font-family: "PingFang SC";
      font-weight: 400;
      font-size: 15px;
      text-align: center;
      color: #2cbcf7;
      line-height: 55px;
    }
  }
}
/deep/.van-tabs {

  position: absolute;
  top: 0px;
 margin:0 58px;

 
}
/deep/ .van-tabs__wrap {
  position: absolute;
  top: 0px;
  left: 0;
  height: 55px !important;
  min-width: 250px;

}

/deep/ .van-tabs__content {
  position: absolute;
  top: 55px;
  height: calc(50vh - 60px);
  min-width: 250px;

}
.isActive {
  /deep/ .van-tabs__line {
    display: none;
  }
}

data

      showDatePick: false,
      tabSta: "",
      show: true,
      searchTabs: [
        {
          type: 0,
          value: "时间段",
        },
        {
          type: 1,
          value: "具体日期",
        },
      ],

methods

    submit() {},
    onConfirm() {},
    // 选择时间段，具体日期
    tabClick(name, title) {
      this.tabSta = name;
    },