dykj-football/pages/index/compontents/masterHand.vue

335 lines
8.2 KiB
Vue
Raw Normal View History

2024-04-19 14:06:00 +08:00
<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>