完成了大宗师页面
This commit is contained in:
sundongyu
parent
613eea9929
commit
140927c2ab
65
pages.json
65
pages.json
|
|
@ -7,13 +7,13 @@
|
||||||
"navigationStyle": "custom"
|
"navigationStyle": "custom"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "pages/school/index",
|
"path": "pages/school/index",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "门派",
|
"navigationBarTitleText": "门派",
|
||||||
"navigationStyle": "custom"
|
"navigationStyle": "custom"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "pages/intelLigence/index",
|
"path": "pages/intelLigence/index",
|
||||||
"style": {
|
"style": {
|
||||||
|
|
@ -28,20 +28,27 @@
|
||||||
"navigationStyle": "custom"
|
"navigationStyle": "custom"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "pages/user/index",
|
"path": "pages/user/index",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "我的",
|
"navigationBarTitleText": "我的",
|
||||||
"navigationStyle": "custom"
|
"navigationStyle": "custom"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "pages/user/compontents/attention",
|
"path": "pages/user/compontents/attention",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "关注列表",
|
"navigationBarTitleText": "关注列表",
|
||||||
"navigationStyle": "custom"
|
"navigationStyle": "custom"
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/index/compontents/bigMaster",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "大宗师",
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
}
|
||||||
],
|
],
|
||||||
"globalStyle": {
|
"globalStyle": {
|
||||||
"navigationBarTextStyle": "black",
|
"navigationBarTextStyle": "black",
|
||||||
|
|
@ -55,14 +62,14 @@
|
||||||
"pagePath": "pages/index/index",
|
"pagePath": "pages/index/index",
|
||||||
"text": "首页"
|
"text": "首页"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"pagePath": "pages/school/index",
|
"pagePath": "pages/school/index",
|
||||||
"text": "门派"
|
"text": "门派"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"pagePath": "pages/intelLigence/index",
|
"pagePath": "pages/intelLigence/index",
|
||||||
"text": "赛事"
|
"text": "赛事"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"pagePath": "pages/rankList/index",
|
"pagePath": "pages/rankList/index",
|
||||||
"text": "排行榜"
|
"text": "排行榜"
|
||||||
|
|
|
||||||
162
pages/index/compontents/bigMaster.vue
Normal file
162
pages/index/compontents/bigMaster.vue
Normal 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>
|
||||||
|
|
@ -51,7 +51,7 @@
|
||||||
<view class="top">
|
<view class="top">
|
||||||
<view class="left" style="font-weight: 700; font-size: 34rpx">推荐高手</view>
|
<view class="left" style="font-weight: 700; font-size: 34rpx">推荐高手</view>
|
||||||
<view class="right">
|
<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>
|
<u-icon name="arrow-right" size="12" color="#555555"></u-icon>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -97,6 +97,12 @@ const src = ref({
|
||||||
src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
|
src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
|
||||||
text: '无头像'
|
text: '无头像'
|
||||||
});
|
});
|
||||||
|
const ViewGuru = () => {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/index/compontents/bigMaster',
|
||||||
|
animationDuration: '300'
|
||||||
|
});
|
||||||
|
};
|
||||||
// #ifdef H5 || APP
|
// #ifdef H5 || APP
|
||||||
console.log('运行在 App');
|
console.log('运行在 App');
|
||||||
// #endif
|
// #endif
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user