完成了高手详情页面
This commit is contained in:
sundongyu
parent
140927c2ab
commit
fa7e984df0
|
|
@ -48,6 +48,13 @@
|
|||
"navigationBarTitleText": "大宗师",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/index/compontents/masterHand",
|
||||
"style": {
|
||||
"navigationBarTitleText": "高手详情",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}
|
||||
],
|
||||
"globalStyle": {
|
||||
|
|
|
|||
334
pages/index/compontents/masterHand.vue
Normal file
334
pages/index/compontents/masterHand.vue
Normal file
|
|
@ -0,0 +1,334 @@
|
|||
<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="record">
|
||||
<view class="record-up">
|
||||
<view class="up">
|
||||
<view class="head"><u-avatar :src="src" size="45"></u-avatar></view>
|
||||
<view class="text">法无边</view>
|
||||
<view class="tag">
|
||||
历史胜率:
|
||||
<span>75%</span>
|
||||
</view>
|
||||
</view>
|
||||
<view class="centre">本月得分:{{ score }}</view>
|
||||
<view class="below">擅长联赛：法国各级联赛</view>
|
||||
</view>
|
||||
<view class="record-centre">
|
||||
<view class="up">高手简介</view>
|
||||
<view class="below">大宗师花甲王五大得以门生之一，专攻法国版块</view>
|
||||
</view>
|
||||
<view class="record-below">
|
||||
<view class="up">近20场战绩</view>
|
||||
<view class="centre">
|
||||
<view v-for="(item, index) in record" style="display: inline-block">
|
||||
<u-tag v-if="item.value === 2" text="走" size="large"></u-tag>
|
||||
<u-tag v-if="item.value === 1" text="错" type="success" size="large"></u-tag>
|
||||
<u-tag v-if="item.value === 0" text="中" type="error" size="large"></u-tag>
|
||||
</view>
|
||||
<!-- <view style="padding: 2rpx; border: 0.5rpx solid #5ac725; display: inline-block">
|
||||
<u-tag text="错" type="success" size="large"></u-tag>
|
||||
</view>
|
||||
<view style="padding: 2rpx; border: 0.5rpx solid #f56c6c; display: inline-block">
|
||||
<u-tag text="中" type="error" size="large"></u-tag>
|
||||
</view> -->
|
||||
</view>
|
||||
<view class="below">
|
||||
<u-button @click="attention" v-if="onswitch" style="border-radius: 35rpx" type="primary" text="关注" color="#e8b596"></u-button>
|
||||
<u-button @click="cancel" v-else style="border-radius: 35rpx; color: #000" type="primary" text="取消关注" color="#dddddd"></u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 最新方案 -->
|
||||
<view class="newest">
|
||||
<view class="newest-up">最新方案</view>
|
||||
<view class="newest-below">
|
||||
<view class="one">
|
||||
<view class="one-left">
|
||||
<span>¥</span>
|
||||
<span>688</span>
|
||||
<span>未购买</span>
|
||||
</view>
|
||||
<view class="one-right">
|
||||
<u-button style="border-radius: 50rpx; width: 150rpx; height: 60rpx" color="#e8b596" type="primary" text="立即购买"></u-button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tow">今天继续特殊玩法！</view>
|
||||
<view class="three">
|
||||
<view class="three-up">
|
||||
<view>2004-04-12 03:00:00</view>
|
||||
<view>欧足联赛洲联赛</view>
|
||||
</view>
|
||||
<view class="three-below">
|
||||
<view class="em">
|
||||
<u-avatar :src="src"></u-avatar>
|
||||
<em>靌菲加</em>
|
||||
</view>
|
||||
<view>vs</view>
|
||||
<view class="em">
|
||||
<u-avatar :src="src"></u-avatar>
|
||||
<em>馬赛</em>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="four">
|
||||
<view class="four-left">3小时前</view>
|
||||
<view class="four-right">25人订阅</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 历史记录 -->
|
||||
<view class="history">
|
||||
<view class="history-up">历史记录</view>
|
||||
<view class="history-below">
|
||||
<view class="tow">今天继续特殊玩法！</view>
|
||||
<view class="three">
|
||||
<view class="three-up">
|
||||
<view>2004-04-12 03:00:00</view>
|
||||
<view>欧足联赛洲联赛</view>
|
||||
</view>
|
||||
<view class="three-below">
|
||||
<view class="em">
|
||||
<u-avatar :src="src"></u-avatar>
|
||||
<em>靌菲加</em>
|
||||
</view>
|
||||
<view>vs</view>
|
||||
<view class="em">
|
||||
<u-avatar :src="src"></u-avatar>
|
||||
<em>馬赛</em>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="four">
|
||||
<view class="four-left">3小时前 已结算</view>
|
||||
<view class="four-right">25人订阅</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
const { safeAreaInsets } = uni.getSystemInfoSync();
|
||||
const returnnav = () => {
|
||||
uni.navigateBack();
|
||||
};
|
||||
const onswitch = ref(true);
|
||||
const score = ref(25);
|
||||
const record = ref([
|
||||
{
|
||||
laede: '中',
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
laede: '中',
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
laede: '错',
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
laede: '走',
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
laede: '走',
|
||||
value: 2
|
||||
}
|
||||
]);
|
||||
const attention = () => {
|
||||
onswitch.value = !onswitch.value;
|
||||
};
|
||||
const cancel = () => {
|
||||
onswitch.value = !onswitch.value;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.page-navbar {
|
||||
display: flex;
|
||||
}
|
||||
.record {
|
||||
margin: 20rpx auto 0;
|
||||
height: 1000rpx;
|
||||
width: 90%;
|
||||
border: 1rpx solid #000;
|
||||
.record-up {
|
||||
height: 30%;
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
border-bottom: 1rpx solid #000;
|
||||
.up {
|
||||
display: flex;
|
||||
.head {
|
||||
margin-top: 40rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
.text {
|
||||
margin-top: 60rpx;
|
||||
font-size: 36rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.tag {
|
||||
margin-top: 60rpx;
|
||||
margin-left: 140rpx;
|
||||
}
|
||||
}
|
||||
.centre {
|
||||
display: inline-block;
|
||||
color: red;
|
||||
border: 1rpx solid #e5b895;
|
||||
padding: 12rpx 5rpx 10rpx;
|
||||
margin-top: 20rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
.below {
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
}
|
||||
.record-centre {
|
||||
height: 20%;
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
border-bottom: 1rpx solid #000;
|
||||
.up {
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
.below {
|
||||
font-size: 26rpx;
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
}
|
||||
.record-below {
|
||||
height: 50%;
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
.centre {
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.centre ::v-deep .u-tag {
|
||||
height: 80rpx;
|
||||
}
|
||||
.below {
|
||||
margin-top: 200rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.newest {
|
||||
width: 90%;
|
||||
margin: 15rpx auto;
|
||||
.newest-up {
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
margin-bottom: 15rpx;
|
||||
}
|
||||
.newest-below {
|
||||
height: 100%;
|
||||
border: 1rpx solid #000;
|
||||
.one {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1rpx solid #000;
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
.one-left {
|
||||
margin: 24rpx;
|
||||
}
|
||||
.one-right {
|
||||
margin: 24rpx;
|
||||
}
|
||||
}
|
||||
.tow {
|
||||
border-bottom: 1rpx solid #000;
|
||||
width: 90%;
|
||||
height: 80rpx;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.three {
|
||||
border-bottom: 1rpx solid #000;
|
||||
width: 90%;
|
||||
height: 150rpx;
|
||||
margin: 0 auto;
|
||||
.three-up {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.three-below {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
.em {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.four {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 90%;
|
||||
height: 60rpx;
|
||||
margin: 20rpx auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
.history {
|
||||
width: 90%;
|
||||
margin: 15rpx auto;
|
||||
.history-up {
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
margin-bottom: 15rpx;
|
||||
}
|
||||
.history-below {
|
||||
height: 100%;
|
||||
border: 1rpx solid #000;
|
||||
.tow {
|
||||
border-bottom: 1rpx solid #000;
|
||||
width: 90%;
|
||||
height: 80rpx;
|
||||
margin: 25rpx auto 0;
|
||||
}
|
||||
.three {
|
||||
border-bottom: 1rpx solid #000;
|
||||
width: 90%;
|
||||
height: 150rpx;
|
||||
margin: 0 auto;
|
||||
.three-up {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.three-below {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
.em {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.four {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 90%;
|
||||
height: 60rpx;
|
||||
margin: 20rpx auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -57,7 +57,7 @@
|
|||
</view>
|
||||
</view>
|
||||
<view style="height: 900rpx; overflow-y: auto; -webkit-overflow-scrolling: touch">
|
||||
<view v-for="(item, index) in 5" class="Master-card-buttom">
|
||||
<view @click="masterHand(item)" v-for="(item, index) in 5" class="Master-card-buttom">
|
||||
<view class="left">
|
||||
<u-avatar src=""></u-avatar>
|
||||
<view class="">人名</view>
|
||||
|
|
@ -103,6 +103,12 @@ const ViewGuru = () => {
|
|||
animationDuration: '300'
|
||||
});
|
||||
};
|
||||
const masterHand = (item) => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/index/compontents/masterHand',
|
||||
animationDuration: '300'
|
||||
});
|
||||
};
|
||||
// #ifdef H5 || APP
|
||||
console.log('运行在 App');
|
||||
// #endif
|
||||
|
|
|
|||
|
|
@ -68,6 +68,10 @@
|
|||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<!-- 拟态框 -->
|
||||
<view>
|
||||
<u-modal @confirm="confirm" :show="show" :content="content"></u-modal>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
|
@ -75,6 +79,8 @@
|
|||
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,
|
||||
|
|
@ -116,6 +122,9 @@ const showCategory = (index) => {
|
|||
const toCategory = (box) => {
|
||||
console.log(box);
|
||||
};
|
||||
const confirm = () => {
|
||||
show.value = false;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user