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

354 lines
8.5 KiB
Vue
Raw Normal View History

2024-04-19 17:19:52 +08:00
<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>
2024-04-20 09:29:23 +08:00
<view class="up-below">擅长联赛法国各级联赛</view>
2024-04-19 17:19:52 +08:00
</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">
2024-04-19 17:54:54 +08:00
<u-button
@click="purchase"
color="#ff275e"
type="primary"
text="立即购买"
></u-button>
2024-04-19 17:19:52 +08:00
</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
}
2024-04-19 17:54:54 +08:00
const purchase = () => {
uni.navigateTo({
url: '/pages/index/compontents/billingPage',
animationDuration: '300',
})
}
2024-04-19 17:19:52 +08:00
</script>
<style lang="scss" scoped>
.page-navbar {
display: flex;
.nav {
2024-04-20 09:29:23 +08:00
margin-left: 34.6%;
2024-04-19 17:19:52 +08:00
}
}
.record {
2024-04-20 09:29:23 +08:00
margin: 40rpx auto 0;
2024-04-19 17:19:52 +08:00
height: 1000rpx;
width: 90%;
border: 1rpx solid #000;
background-color: #fff;
2024-04-20 09:29:23 +08:00
border-radius: 20rpx;
2024-04-19 17:19:52 +08:00
.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;
}
}
2024-04-20 09:29:23 +08:00
.up-below {
margin-top: 20rpx;
}
2024-04-19 17:19:52 +08:00
.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;
2024-04-20 09:29:23 +08:00
border-radius: 15rpx;
2024-04-19 17:19:52 +08:00
}
.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>