dykj-football/pages/school/index.vue
2024-04-18 15:42:05 +08:00

261 lines
7.6 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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>
</template>
<script setup>
import { ref, reactive } from 'vue';
// 获取安全区域的边界
const { safeAreaInsets } = uni.getSystemInfoSync();
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);
};
</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>