dykj-football/pages/school/index.vue

<template>
  <view>
    <view :style="{ backgroundPositionY: -44 + safeAreaInsets.top + 'px' }" class="index-page">
      <!-- 自定义导航 -->
      <view :style="{ paddingTop: safeAreaInsets.top + 'px' }" class="page-navbar">学派</view>
    </view>
    <view class="bulletin-board">
      <view class="icon">
        <u-icon name="volume" color="#e09453" size="18"></u-icon>
      </view>
      <view class="text">如有任何问题, 请咨询微信客服！</view>
    </view>
    <view class="category-list">
      <!-- 左侧分类导航 -->
      <scroll-view scroll-y="true" class="left">
        <view class="row" v-for="(category, index) in categoryList" :key="category.id" :class="[index == showCategoryIndex ? 'active' : '']" @tap="showCategory(index)">
          <u-avatar :src="category.src" shape="circle"></u-avatar>
          <view class="text">
            {{ category.title }}
          </view>
        </view>
      </scroll-view>
      <!-- 右侧子导航 -->
      <scroll-view scroll-y="true" class="right">
        <view class="category" v-for="(category, index) in categoryList" :key="category.id" v-show="index == showCategoryIndex">
          <view class="list">
            <view class="box" v-for="(box, i) in category.list" :key="i" @tap="toCategory(box)">
              <view class="up">
                <view class="up-left">
                  <u-avatar :src="category.src" shape="circle"></u-avatar>
                </view>
                <view class="up-centre">
                  <view class="">{{ box.name }}</view>
                  <view>
                    <span style="font-size: 16rpx; color: #afafaf">本月：</span>
                    <span style="font-size: 20rpx; color: red; font-weight: 700">8连红</span>
                    &nbsp
                    <span style="font-size: 20rpx; color: red; font-weight: 700">近20中16</span>
                  </view>
                  <view>
                    <span style="font-size: 16rpx; color: #afafaf">本月得分：</span>
                    <span style="font-size: 16rpx; color: #afafaf">20</span>
                    <span style="font-size: 16rpx; color: #afafaf">分</span>
                  </view>
                </view>
                <view class="up-right">
                  <view>关注</view>
                  <view style="margin-left: 5rpx">
                    <u-icon name="heart" color="#e1e1e1" size="20"></u-icon>
                  </view>
                </view>
              </view>
              <view class="centre">
                <view class="centre-text">评价：大宗师</view>
                <view class="centre-text">评价：大宗师4</view>
                <view class="centre-text">评价：大宗师</view>
                <view class="centre-price">
                  <span>价格：</span>
                  <span>888.00奖门令</span>
                </view>
              </view>
              <view class="below">
                <view>高手介绍：</view>
                <view class="text">奖门人鬼画符韩国打算卡夫卡撒法斯科防守上的开始啦的库萨克达</view>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
    <!-- 拟态框 -->
    <view>
      <u-modal @confirm="confirm" :show="show" :content="content"></u-modal>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue';
// 获取安全区域的边界
const { safeAreaInsets } = uni.getSystemInfoSync();
const show = ref(true);
const content = ref('uview-plus的目标是成为uni-app生态最优秀的UI框架');
const categoryList = reactive([
  {
    id: 1,
    title: '组合专区',
    src: 'https://5b0988e595225.cdn.sohucs.com/images/20190731/d40a8f11f28249a6b73be0923dcc65d0.jpeg',
    list: [{ name: '皇者之路' }, { name: '五星套餐' }, { name: '一念永恒' }, { name: '足球之神' }, { name: '皇马末日' }, { name: '联邦荣光' }, { name: '黑日末日' }]
  },
  {
    id: 2,
    title: '金笔派',
    list: [{ name: '皇者之路' }, { name: '五星套餐' }, { name: '一念永恒' }, { name: '足球之神' }]
  },
  {
    id: 3,
    title: '微墨派',
    list: [{ name: '皇者之路' }, { name: '五星套餐' }, { name: '一念永恒' }, { name: '足球之神' }]
  },
  {
    id: 4,
    title: '宣张派',
    list: [{ name: '皇者之路' }, { name: '五星套餐' }, { name: '一念永恒' }, { name: '足球之神' }]
  },
  {
    id: 5,
    title: '端砚派',
    list: [{ name: '皇者之路' }, { name: '五星套餐' }, { name: '一念永恒' }, { name: '足球之神' }]
  },
  {
    id: 6,
    title: '明灯区',
    list: [{ name: '皇者之路' }, { name: '五星套餐' }, { name: '一念永恒' }, { name: '足球之神' }]
  }
]);
const showCategoryIndex = ref(0);
const showCategory = (index) => {
  showCategoryIndex.value = index;
  console.log(index);
};
const toCategory = (box) => {
  console.log(box);
};
const confirm = () => {
  show.value = false;
};
</script>

<style lang="scss">
.bulletin-board {
  width: 100%;
  height: 60rpx;
  background-color: #fffbe8;
  display: flex;
  align-items: center;
  .text {
    font-size: 26rpx;
    color: #e5b47e;
    font-weight: 700;
    margin-left: 20rpx;
  }
  .icon {
    margin-left: 30rpx;
  }
}
.category-list {
  width: 100%;
  background-color: #fff;
  display: flex;
  .right {
    position: absolute;

    top: 100rpx;
    /*  #ifdef  APP-PLUS  */
    top: calc(100rpx + var(--status-bar-height));
    /*  #endif  */
    bottom: 0rpx;
  }
  .left {
    width: 24%;
    left: 0rpx;
    background-color: #f2f2f2;
    .row {
      width: 100%;
      height: 160rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      align-items: center;
      .text {
        width: 100%;
        position: relative;
        font-size: 28rpx;
        display: flex;
        justify-content: center;
        .block {
          position: absolute;
          width: 0rpx;
          left: 0;
        }
      }
    }
  }
  .right {
    width: 76%;
    left: 24%;
    margin-top: 70rpx;
    .category {
      width: 94%;
      padding: 20rpx 3%;
      .banner {
        width: 100%;
        height: 24.262vw;
        border-radius: 10rpx;
        overflow: hidden;
        box-shadow: 0upx 5rpx 20rpx rgba(0, 0, 0, 0.3);
      }
      .list {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        .box {
          width: calc(71.44vw / 1);
          height: 42vh;
          border-top: 1rpx solid #f4f4f4;
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          .up {
            display: flex;
            justify-content: space-around;
            .up-left {
              margin-top: 20rpx;
            }
            .up-centre {
              margin-top: 20rpx;
            }
            .up-right {
              margin-top: 20rpx;
              font-size: 24rpx;
              display: flex;
              margin-right: 16rpx;
            }
          }
          .centre {
            .centre-text {
              display: inline-block;
              border: 1rpx solid #e5b47e;
              color: #e8b596;
              border-radius: 15rpx;
              padding: 15rpx;
              margin-left: 20rpx;
              margin-top: 15rpx;
              margin-bottom: 15rpx;
              font-size: 24rpx;
            }
            .centre-price {
              margin: 20rpx;
              color: #e5b47e;
              font-weight: 600;
            }
          }
          .below {
            font-size: 24rpx;
            margin-left: 20rpx;
            .text {
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 3;
              overflow: hidden;
            }
          }
        }
      }
    }
  }
}
.active {
  height: 100rpx;
  background-color: #e8b596;
  .text {
    font-size: 30rpx;
    font-weight: 600;
    color: #fff;
    // background-color: #fff;
  }
}
</style>