dykj-football/pages/school/index.vue

270 lines
7.9 KiB
Vue
Raw Normal View History

2024-04-18 15:41:58 +08:00
<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>
2024-04-19 14:06:00 +08:00
<!-- 拟态框 -->
<view>
<u-modal @confirm="confirm" :show="show" :content="content"></u-modal>
</view>
2024-04-18 15:41:58 +08:00
</view>
</template>
<script setup>
import { ref, reactive } from 'vue';
// 获取安全区域的边界
const { safeAreaInsets } = uni.getSystemInfoSync();
2024-04-19 14:06:00 +08:00
const show = ref(true);
const content = ref('uview-plus的目标是成为uni-app生态最优秀的UI框架');
2024-04-18 15:41:58 +08:00
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);
};
2024-04-19 14:06:00 +08:00
const confirm = () => {
show.value = false;
};
2024-04-18 15:41:58 +08:00
</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>