270 lines
7.9 KiB
Vue
270 lines
7.9 KiB
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>
|
||
 
|
||
<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>
|