354 lines
8.5 KiB
Vue
354 lines
8.5 KiB
Vue
<template>
|
||
<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 class="nav">方案详情</view>
|
||
</view>
|
||
</view>
|
||
<!-- 红色背景 -->
|
||
<view
|
||
style="
|
||
background-color: red;
|
||
height: 30vh;
|
||
padding: 0 3%;
|
||
display: flow-root;
|
||
"
|
||
>
|
||
<!-- 详情 -->
|
||
<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">
|
||
<view class="">关注</view>
|
||
<view class=""><u-icon name="heart"></u-icon></view>
|
||
</view>
|
||
</view>
|
||
<view class="centre">本月得分:{{ score }}</view>
|
||
<view class="centre-box">20年程序员工作经验</view>
|
||
<view class="up-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>
|
||
</view>
|
||
</view>
|
||
<!-- 购买 -->
|
||
<view class="purchase">
|
||
<view class="purchase-one">
|
||
<view class="span">
|
||
<u-avatar :src="src"></u-avatar>
|
||
<span>日本</span>
|
||
</view>
|
||
<view>vs</view>
|
||
<view class="span">
|
||
<u-avatar :src="src"></u-avatar>
|
||
<span>韩国</span>
|
||
</view>
|
||
</view>
|
||
<view class="purchase-tow">
|
||
<view>2024-04-11 20:00:00</view>
|
||
<view>泰国联赛杯</view>
|
||
</view>
|
||
<view class="purchase-three">
|
||
<view class="purchase-three-up">
|
||
<view class="purchase-three-up-left">
|
||
<view class="purchase-three-up-left-atext">方案内容</view>
|
||
<view class="purchase-three-up-left-btext"
|
||
>购买成功后可查看方案内容</view
|
||
>
|
||
</view>
|
||
<view class="purchase-three-up-right">
|
||
<span style="font-size: 32rpx">¥</span>288.00
|
||
</view>
|
||
</view>
|
||
<view class="purchase-three-below">
|
||
<view v-for="item in 2" class="purchase-three-below-box">
|
||
<view class="purchase-three-below-box-up">188</view>
|
||
<view class="purchase-three-below-box-below">基础方案</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="purchase-four">
|
||
<u-button
|
||
@click="purchase"
|
||
color="#ff275e"
|
||
type="primary"
|
||
text="立即购买"
|
||
></u-button>
|
||
</view>
|
||
</view>
|
||
<!-- 已购买 -->
|
||
<view class="purchased">
|
||
<view class="purchased-one"> 已购买用户(10) </view>
|
||
<view class="purchased-tow">
|
||
<view v-for="item in 10" class="purchased-tow-head">
|
||
<u-avatar src="src"></u-avatar>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view style="height: 10rpx"></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
|
||
}
|
||
const purchase = () => {
|
||
uni.navigateTo({
|
||
url: '/pages/index/compontents/billingPage',
|
||
animationDuration: '300',
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.page-navbar {
|
||
display: flex;
|
||
.nav {
|
||
margin-left: 34.6%;
|
||
}
|
||
}
|
||
.record {
|
||
margin: 40rpx auto 0;
|
||
height: 1000rpx;
|
||
width: 90%;
|
||
border: 1rpx solid #000;
|
||
background-color: #fff;
|
||
border-radius: 20rpx;
|
||
.record-up {
|
||
height: 35%;
|
||
width: 90%;
|
||
margin: 0 auto;
|
||
border-bottom: 1rpx solid #000;
|
||
.up {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
.head {
|
||
margin-top: 40rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
.text {
|
||
margin-top: 60rpx;
|
||
font-size: 36rpx;
|
||
font-weight: 700;
|
||
}
|
||
.tag {
|
||
margin-top: 60rpx;
|
||
margin-left: 200rpx;
|
||
display: flex;
|
||
align-items: baseline;
|
||
}
|
||
}
|
||
.up-below {
|
||
margin-top: 20rpx;
|
||
}
|
||
.centre {
|
||
padding: 12rpx 5rpx 10rpx;
|
||
margin-top: 20rpx;
|
||
border-radius: 10rpx;
|
||
font-weight: 700;
|
||
}
|
||
.centre-box {
|
||
display: inline-block;
|
||
font-size: 24rpx;
|
||
border: 1rpx solid #e8b596;
|
||
padding: 5rpx;
|
||
color: #e8b596;
|
||
}
|
||
}
|
||
.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 {
|
||
margin: 20rpx;
|
||
height: 80rpx;
|
||
border-radius: 15rpx;
|
||
}
|
||
.below {
|
||
margin-top: 200rpx;
|
||
}
|
||
}
|
||
}
|
||
.purchase {
|
||
width: 90%;
|
||
height: 660rpx;
|
||
border: 1rpx solid #000;
|
||
border-radius: 15rpx;
|
||
margin: 20rpx auto 0;
|
||
.span {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.purchase-one {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-evenly;
|
||
margin-top: 20rpx;
|
||
}
|
||
.purchase-tow {
|
||
display: flex;
|
||
justify-content: space-evenly;
|
||
margin-top: 20rpx;
|
||
}
|
||
.purchase-three {
|
||
background-color: #ff275e;
|
||
height: 300rpx;
|
||
width: 90%;
|
||
margin: 20rpx auto 0;
|
||
border-radius: 15rpx;
|
||
.purchase-three-up {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: flex-end;
|
||
.purchase-three-up-left {
|
||
.purchase-three-up-left-atext {
|
||
color: #fff;
|
||
margin-top: 20rpx;
|
||
}
|
||
.purchase-three-up-left-btext {
|
||
color: #fff;
|
||
font-size: 24rpx;
|
||
margin-top: 5rpx;
|
||
}
|
||
}
|
||
.purchase-three-up-right {
|
||
font-size: 50rpx;
|
||
margin-top: 20rpx;
|
||
margin-right: 5rpx;
|
||
color: #fff;
|
||
}
|
||
}
|
||
.purchase-three-below {
|
||
display: flex;
|
||
.purchase-three-below-box {
|
||
width: 150rpx;
|
||
height: 150rpx;
|
||
background-color: #fff;
|
||
margin-top: 20rpx;
|
||
margin-left: 20rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
.purchase-three-below-box-up {
|
||
margin-top: 20rpx;
|
||
color: #ff275e;
|
||
font-weight: 700;
|
||
}
|
||
.purchase-three-below-box-below {
|
||
margin-top: 20rpx;
|
||
color: #ff275e;
|
||
font-weight: 700;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.purchase-four {
|
||
width: 90%;
|
||
margin: 0 auto;
|
||
margin-top: 30rpx;
|
||
}
|
||
}
|
||
.purchased {
|
||
width: 90%;
|
||
margin: 0 auto;
|
||
.purchased-one {
|
||
font-weight: 700;
|
||
margin: 15rpx 0;
|
||
}
|
||
.purchased-tow {
|
||
height: 500rpx;
|
||
border: 1rpx solid #000;
|
||
border-radius: 15rpx;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-content: flex-start;
|
||
overflow: hidden;
|
||
.purchased-tow-head {
|
||
margin: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
</style>
|