sundongyu/dykj-football
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完成了大宗师页面

Browse Source
This commit is contained in:
sundongyu 2024-04-18 19:39:52 +08:00
parent 613eea9929
commit 140927c2ab
3 changed files with 205 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
pages.json
View File

@ -7,13 +7,13 @@
"navigationStyle": "custom"
}
},
{
"path": "pages/school/index",
"style": {
"navigationBarTitleText": "门派",
"navigationStyle": "custom"
}
},
{
"path": "pages/school/index",
"style": {
"navigationBarTitleText": "门派",
"navigationStyle": "custom"
}
},
{
"path": "pages/intelLigence/index",
"style": {
@ -28,20 +28,27 @@
"navigationStyle": "custom"
}
},
{
"path": "pages/user/index",
"style": {
"navigationBarTitleText": "我的",
"navigationStyle": "custom"
}
},
{
"path": "pages/user/compontents/attention",
"style": {
"navigationBarTitleText": "关注列表",
"navigationStyle": "custom"
}
}
{
"path": "pages/user/index",
"style": {
"navigationBarTitleText": "我的",
"navigationStyle": "custom"
}
},
{
"path": "pages/user/compontents/attention",
"style": {
"navigationBarTitleText": "关注列表",
"navigationStyle": "custom"
}
},
{
"path": "pages/index/compontents/bigMaster",
"style": {
"navigationBarTitleText": "大宗师",
"navigationStyle": "custom"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
@ -55,14 +62,14 @@
"pagePath": "pages/index/index",
"text": "首页"
},
{
"pagePath": "pages/school/index",
"text": "门派"
},
{
"pagePath": "pages/intelLigence/index",
"text": "赛事"
},
{
"pagePath": "pages/school/index",
"text": "门派"
},
{
"pagePath": "pages/intelLigence/index",
"text": "赛事"
},
{
"pagePath": "pages/rankList/index",
"text": "排行榜"

162
pages/index/compontents/bigMaster.vue Normal file
View File

@ -0,0 +1,162 @@
<template>
<view>
<!-- 导航 -->
<view :style="{ backgroundPositionY: -44 + safeAreaInsets.top + 'px' }" class="index-page">
<!-- 自定义导航 -->
<view :style="{ paddingTop: safeAreaInsets.top + 'px' }" class="page-navbar">
<view @click="returnnav" style="padding-top: 14rpx">
<u-icon name="arrow-left" color="#000" size="26"></u-icon>
</view>
<view style="margin: 0 auto">大宗师</view>
</view>
</view>
<!-- 滚动通知 -->
<view class="notice">
<u-notice-bar :text="text1"></u-notice-bar>
</view>
<!-- 主体部分 -->
<scroll-view scroll-y="true" class="centre">
<view class="category">
<view class="box" v-for="item in 4">
<view class="up">
<view class="up-left">
<u-avatar src="" shape="circle" size="60"></u-avatar>
</view>
<view class="up-centre">
<view style="margin-left: 45rpx">大地皇者</view>
<view style="display: flex">
<view style="font-size: 16rpx; color: #afafaf; width: 100rpx">本月：</view>
<view class="quadrangle">
<view class="text">近20中17</view>
</view>
</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 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">行走江湖多年，关系网遍布全球</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>
</scroll-view>
</view>
</template>
<script setup>
const { safeAreaInsets } = uni.getSystemInfoSync();
import { ref } from 'vue';
// 创建响应式数据
const text1 = ref('众多组件覆盖开发过程的各个需求,1组件功能丰富多端兼容让您快速集成开箱即用');
const returnnav = () => {
uni.navigateBack();
};
</script>
<style lang="scss">
.page-navbar {
display: flex;
}
.notice {
height: 30rpx;
}
.centre {
width: 100%;
margin-top: 20rpx;
.category {
width: 92%;
padding: 20rpx 3%;
.box {
width: 90vw;
height: 42vh;
border-top: 1rpx solid #f4f4f4;
display: flex;
flex-direction: column;
justify-content: flex-start;
.up {
display: flex;
justify-content: flex-start;
align-items: flex-end;
.up-left {
margin-top: 30rpx;
margin-left: 40rpx;
}
.up-centre {
margin-top: 20rpx;
margin-left: 20rpx;
.quadrangle {
font-size: 16rpx;
line-height: 30rpx;
width: 80%;
height: 30rpx;
background-color: #f00; /* 任意颜色 */
transform: skewX(-25deg); /* 调整倾斜角度以改变形状 */
.text {
transform: skewX(25deg); /* 调整倾斜角度以改变形状 */
text-align: center;
}
}
}
.up-right {
margin-left: 100px;
margin-bottom: 80rpx;
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: 12rpx;
margin-left: 20rpx;
margin-top: 12rpx;
margin-bottom: 12rpx;
font-size: 24rpx;
}
.centre-price {
margin: 20rpx;
color: #e5b47e;
font-weight: 600;
}
}
.below {
font-size: 24rpx;
margin-left: 20rpx;
width: 500rpx;
.text {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
}
}
}
}
</style>

8
pages/index/index.vue
View File

@ -51,7 +51,7 @@
<view class="top">
<view class="left" style="font-weight: 700; font-size: 34rpx">推荐高手</view>
<view class="right">
<view style="font-size: 24rpx; margin-right: 15rpx">查看更多</view>
<view @click="ViewGuru" style="font-size: 24rpx; margin-right: 15rpx">查看更多</view>
<u-icon name="arrow-right" size="12" color="#555555"></u-icon>
</view>
</view>
@ -97,6 +97,12 @@ const src = ref({
src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
text: '无头像'
});
const ViewGuru = () => {
uni.navigateTo({
url: '/pages/index/compontents/bigMaster',
animationDuration: '300'
});
};
// #ifdef H5 || APP
console.log('运行在 App');
// #endif