dykj-football/pages/index/compontents/scheme.vue
2024-04-20 09:29:23 +08:00

354 lines
8.5 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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>