InspectionCleaning/pages/adminNfc/index.vue

<template>
  <view class="content">
    <!-- 头部两个卡片 -->
    <view class="card">
      <view class="card-item card-left">
        <view class="card-title">已绑定子区域数</view>
        <view class="card-totel">10</view>
      </view>
      <view class="card-item card-right">
        <view class="card-title">未绑定子区域数</view>
        <view class="card-totel">10</view>
      </view>
    </view>
    <!-- 搜索 -->
    <view class="search-box">
      <u-input
        class="search-input"
        v-model="keyword"
        border
        placeholder="搜索名称"
      ></u-input>
      <view class="select-box" @click="selectFn">
        <view>
          {{ selectVal }}
        </view>
        <image
          src="/static/svg/down.svg"
          style="width: 30rpx; height: 30rpx; margin-left: 10rpx"
        ></image>
      </view>
    </view>
    <!-- tabs -->
    <u-tabs
      class="tabs-box"
      bg-color="#F6F8FC"
      :list="tabsList"
      :is-scroll="true"
      :current="tabCurrent"
      @change="tabChangeFn"
    ></u-tabs>
    <!-- tip -->
    <view class="tip-box">共10个子区域，其中5个未绑定</view>
    <!-- 列表 -->
    <view class="list-box">
      <scroll-view :scroll-y="true" class="scroll-Y">
        <view v-for="i in 80" class="item-box">
          <view class="item-title">子区域{{ i }}</view>
          <view v-if="i % 2 === 0" class="btn-have btn">已绑定</view>
          <view v-if="i % 2 !== 0" class="btn-none btn">去绑定</view>
        </view>
      </scroll-view>
    </view>
    <!-- 筛选的下拉 -->
    <u-action-sheet
      :list="options"
      title="请选择"
      @click="changeFn"
      v-model:value="selectShow"
    ></u-action-sheet>
    <u-tabbar :list="vuex_tabbar"></u-tabbar>
  </view>
</template>
<script>
import { loginApi } from "@/api/apiList";
export default {
  data() {
    return {
      keyword: "",
      selectShow: false,
      selectVal: "全部",
      options: [
        {
          text: "全部",
        },
        {
          text: "已绑定",
        },
        {
          text: "未绑定",
        },
      ],
      tabCurrent: 0,
      tabsList: [
        {
          name: "区域1",
        },
        {
          name: "区域2",
        },
        {
          name: "区域3",
        },
        {
          name: "区域4",
        },
        {
          name: "区域5",
        },

        {
          name: "区域6",
        },
        {
          name: "区域7",
        },
        {
          name: "区域8",
        },
      ],
    };
  },
  mounted() {
    uni.hideLoading(); // 关闭 Loading
  },
  onLoad() {},
  methods: {
    selectFn() {
      this.selectShow = true;
    },
    changeFn(val) {
      console.log(val, "val--");
      this.selectVal = this.options[val].text;
    },
    tabChangeFn(val) {
      console.log(val, "val--");
      this.tabCurrent = val;
    },
  },
};
</script>
<style lang="scss" scoped>
.content {
  min-height: calc(100vh - 180rpx); // 确保容器有明确高度
  // overflow: hidden;
  background-color: #f6f8fc;
  padding-bottom: 100rpx;
  .card {
    display: flex;
    // margin-top: 30rpx;
    padding-left: 30rpx;
    padding-right: 30rpx;
    .card-item {
      position: relative;
      flex: 1;
      height: 150rpx;
      border-radius: 30rpx;
      color: white;
      padding: 20rpx;
      font-size: 30rpx;
      .card-title {
        font-size: 30rpx;
      }
      .card-totel {
        padding-left: 20rpx;
        font-size: 40rpx;
      }
    }
    .card-left {
      background: url("/static/adminImg/icon-bg1.png") no-repeat right 32rpx bottom 20rpx /
        60rpx 60rpx;
      background-color: #4974f3;
    }
    .card-right {
      margin-left: 20rpx;
      background: url("/static/adminImg/icon-bg2.png") no-repeat right 32rpx bottom 20rpx /
        60rpx 60rpx;
      background-color: #53d5a9;
    }
  }
  .search-box {
    display: flex;
    align-items: center;
    // border: 1px solid red;
    margin-top: 20rpx;
    padding: 20rpx;
    .search-input {
      background-color: white;
      border-radius: 50rpx;
    }
    .select-box {
      display: flex;
      justify-content: center;
      align-items: center;
      // border: 1px solid red;
      margin-left: 20rpx;
      background-color: white;
      width: 150rpx;
      border-radius: 20rpx;
      text-align: center;
      padding-top: 10rpx;
      padding-bottom: 10rpx;
    }
  }
  .tip-box {
    color: grey;
    padding-left: 30rpx;
  }
  .list-box {
    padding-left: 30rpx;
    padding-right: 30rpx;
    .item-box {
      background-color: white;
      margin-top: 20rpx;
      padding-left: 30rpx;
      padding-right: 30rpx;
      height: 100rpx;
      border-radius: 20rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .item-title {
        font-size: 30rpx;
        color: #333;
        // font-weight: bold;
      }
      .btn {
        padding-left: 20rpx;
        padding-right: 20rpx;
        border-radius: 20rpx;
        padding-top: 5rpx;
        padding-bottom: 5rpx;
      }
      .btn-have {
        background-color: #f5f5f5;
        color: black;
      }
      .btn-none {
        background-color: #4274dc;
        color: white;
      }
    }
  }
}
</style>