完成了门派页面
This commit is contained in:
sundongyu
parent
745d67166c
commit
e4c7cbddc4
68
pages.json
68
pages.json
|
|
@ -3,24 +3,31 @@
|
||||||
{
|
{
|
||||||
"path": "pages/index/index",
|
"path": "pages/index/index",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "uni-app",
|
"navigationBarTitleText": "首页",
|
||||||
"navigationStyle": "custom"
|
"navigationStyle": "custom"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "pages/intelLigence/index",
|
"path": "pages/intelLigence/index",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "uni-app",
|
"navigationBarTitleText": "赛事",
|
||||||
"navigationStyle": "custom"
|
"navigationStyle": "custom"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "pages/rankList/index",
|
"path": "pages/rankList/index",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "uni-app",
|
"navigationBarTitleText": "排行榜",
|
||||||
"navigationStyle": "custom"
|
"navigationStyle": "custom"
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/school/index",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "门派",
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
}
|
||||||
],
|
],
|
||||||
"globalStyle": {
|
"globalStyle": {
|
||||||
"navigationBarTextStyle": "black",
|
"navigationBarTextStyle": "black",
|
||||||
|
|
@ -30,19 +37,22 @@
|
||||||
},
|
},
|
||||||
"uniIdRouter": {},
|
"uniIdRouter": {},
|
||||||
"tabBar": {
|
"tabBar": {
|
||||||
"list": [
|
"list": [{
|
||||||
{
|
"pagePath": "pages/index/index",
|
||||||
"pagePath": "pages/index/index",
|
"text": "首页"
|
||||||
"text": "首页"
|
},
|
||||||
},
|
{
|
||||||
{
|
"pagePath": "pages/school/index",
|
||||||
"pagePath": "pages/intelLigence/index",
|
"text": "门派"
|
||||||
"text": "赛事"
|
},
|
||||||
},
|
{
|
||||||
{
|
"pagePath": "pages/intelLigence/index",
|
||||||
"pagePath": "pages/rankList/index",
|
"text": "赛事"
|
||||||
"text": "排行榜"
|
},
|
||||||
}
|
{
|
||||||
]
|
"pagePath": "pages/rankList/index",
|
||||||
|
"text": "排行榜"
|
||||||
|
}
|
||||||
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
260
pages/school/index.vue
Normal file
260
pages/school/index.vue
Normal file
|
|
@ -0,0 +1,260 @@
|
||||||
|
<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>
|
||||||
|
</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>
|
||||||
Loading…
Reference in New Issue
Block a user