xinfeiyue-wx/package_sub/pages/TargetCount/TargetCount.vue

<template>
  <view class="container safe-area-inset-bottom">
    <view class="search-bar">
      <view class="search-bar__input">
        <u-input
            v-model="select.keyword"
            :height="26"
            placeholder="请输入学校名称"
            style="flex: 1; margin-right: 40rpx"
        ></u-input>
        <u-icon name="search" color="#333" :size="30"></u-icon>
      </view>
    </view>
    <u-dropdown ref="uDropdown" inactive-color="#333" :height="80" menu-icon="arrow-down-fill">
      <u-dropdown-item v-model="select.year" title="年份">
        <view class="slot-content">
          <u-picker
              :has-popup="false"
              mode="time"
              :default-time="defaultTime"
              :start-year="new Date().getFullYear() - 30"
              :end-year="new Date().getFullYear() + 30"
              :params="{
              year: true,
              month: false,
              day: false,
              hour: false,
              minute: false,
              second: false,
            }"
              @cancel="closeDropdown"
              @confirm="({ year }) => {
              select.year = year
              closeDropdown()
            }"
          ></u-picker>
        </view>
      </u-dropdown-item>
      <u-dropdown-item
          v-model="select.area_id"
          title="区域"
          :options="options1"
      ></u-dropdown-item>
    </u-dropdown>
    <view class="wrap">
      <view class="table">
        <view class="table__header">
          <text class="table__header-item">学校</text>
          <text class="table__header-item">名额</text>
          <text class="table__header-arrow"></text>
        </view>
        <view
            class="table__row"
            v-for="(item, index) in tableData"
            :key="index"
            @click="$u.route({
              url: '/package_sub/pages/SchoolCount/SchoolCount',
              params: {

              }
            })"
        >
          <text class="table__row-item">{{ item.school }}</text>
          <text class="table__row-item">{{ item.count }}</text>
          <u-icon class="table__row-arrow" name="arrow-right" color="#333" :size="30"></u-icon>
        </view>
      </view>
    </view>
    <u-back-top :scroll-top="scrollTop"></u-back-top>
  </view>
</template>

<script>
export default {
  data() {
    return {
      defaultTime: '',
      select: {
        keyword: "",
        year: new Date().getFullYear().toString(),
        area_id: "",
      },
      scrollTop: 0,
      tableData: [
        { school: "苏州中学园区", count: "680" },
        { school: "苏州中学园区", count: "142" },
        { school: "苏州中学园区", count: "959" },
        // ... 其他数据
      ],
      options1: [
        {
          label: "默认排序",
          value: 1,
        },
        {
          label: "距离优先",
          value: 2,
        },
        {
          label: "价格优先",
          value: 3,
        },
      ],
    };
  },
  methods: {
    closeDropdown() {
      this.$refs.uDropdown.close();
    }
  },
  onReady() {
    this.defaultTime = this.$moment().format('YYYY-MM-DD HH:mm:ss')
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop;
  },
};
</script>

<style lang="scss">
.u-dropdown {
  background: #fff;
}
.container {
  min-height: 100vh;
  background: #eaf8fe;
}
.search-bar {
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 20rpx 25rpx;

  &__input {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 80rpx;
    background: rgba(51, 51, 51, 0.1);
    padding: 18rpx 40rpx 18rpx 46rpx;
  }
}
.wrap {
  padding: 50rpx 24rpx;

  .table {
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    background-color: #f0f8ff;
    filter: drop-shadow(-2.179px 3.355px 2.5px rgba(208,209,209,0.3));

    &__header,
    &__row {
      display: flex;
      padding: 28rpx 0;
      justify-content: space-between;
      border-bottom: 1px solid #ccc;
    }

    $arrow-width: 80rpx;
    &__header-item:nth-child(1),
    &__row-item:nth-child(1) {
      flex-basis: calc((100% - #{$arrow-width}) * (2 / 3));
      text-align: center;
    }
    &__header-item,
    &__row-item {
      flex-basis: calc((100% - #{$arrow-width}) / 3);
      text-align: center;
    }
    &__header-arrow,
    &__row-arrow {
      flex-basis: $arrow-width;
      text-align: center;
      display: flex;
      justify-content: center;
    }

    &__header {
      background-color: #4693d4;
      color: #fff;
    }

    &__row:nth-child(even) {
      background-color: #f9f9f9;
    }
    &__row:nth-last-child(1) {
      border-bottom: none;
    }
  }
}
</style>