Compare commits

...

2 Commits

Author SHA1 Message Date
sundongyu
78502d1580 Merge branch 'dev' of https://gitea.dykj.co/sundongyu/dykj-football into dev 2024-04-19 17:37:45 +08:00
sundongyu
68f99856a8 完成了方案详情 2024-04-19 17:19:52 +08:00
2 changed files with 587 additions and 173 deletions

View File

@ -0,0 +1,337 @@
<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="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 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
}
</script>
<style lang="scss" scoped>
.page-navbar {
display: flex;
.nav {
margin-left: 32.5%;
}
}
.record {
margin: 20rpx auto 0;
height: 1000rpx;
width: 90%;
border: 1rpx solid #000;
background-color: #fff;
.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;
}
}
.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;
}
.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>

View File

@ -1,8 +1,15 @@
<template>
<view>
<view :style="{ backgroundPositionY: -44 + safeAreaInsets.top + 'px' }" class="index-page">
<view
:style="{ backgroundPositionY: -44 + safeAreaInsets.top + 'px' }"
class="index-page"
>
<!-- 自定义导航 -->
<view :style="{ paddingTop: safeAreaInsets.top + 'px' }" class="page-navbar">足球状元榜</view>
<view
:style="{ paddingTop: safeAreaInsets.top + 'px' }"
class="page-navbar"
>足球状元榜</view
>
</view>
<view class="color">
<view class="headPortrait">图片</view>
@ -14,50 +21,109 @@
</view>
<view class="scheme">
<view style="font-weight: 700">今日方案</view>
<view style="display: flex; width: 150rpx; justify-content: space-around">
<view
style="display: flex; width: 150rpx; justify-content: space-around"
>
<view style="font-size: 20rpx">查看更多</view>
<u-icon name="arrow-right" size="12" color="#555555"></u-icon>
</view>
</view>
<view style="height: 900rpx; overflow-y: auto; -webkit-overflow-scrolling: touch">
<view v-for="item in 3" class="Pitch-card">
<view
style="
height: 850rpx;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
"
>
<view @click="scheme" v-for="item in 3" class="Pitch-card">
<view class="one">
<view style="width: 330rpx; display: flex; justify-content: space-evenly; align-items: center">
<view
style="
width: 330rpx;
display: flex;
justify-content: space-evenly;
align-items: center;
"
>
<span style="color: #e4b895">¥</span>
<span style="color: #e4b895; font-size: 45rpx">888.00</span>
<u-tag text="未购买" type="warning" size="mini" bgColor="#fef3ef" color="#e4b895" borderColor="#fef3ef"></u-tag>
<u-tag
text="未购买"
type="warning"
size="mini"
bgColor="#fef3ef"
color="#e4b895"
borderColor="#fef3ef"
></u-tag>
</view>
<view style="margin-right: 35rpx; margin-top: 10rpx">
<u-tag text="泰国联赛杯" size="mini" type="warning" plain color="#e4b895" borderColor="#e4b895"></u-tag>
<u-tag
text="泰国联赛杯"
size="mini"
type="warning"
plain
color="#e4b895"
borderColor="#e4b895"
></u-tag>
</view>
</view>
<view class="two">
<view>刚开球来得及!</view>
</view>
<view class="three">
<view style="display: flex; width: 200rpx; align-items: center; justify-content: space-evenly">
<view
style="
display: flex;
width: 200rpx;
align-items: center;
justify-content: space-evenly;
"
>
<u-avatar src=""></u-avatar>
<view class="">人名</view>
</view>
<view style="font-size: 26rpx; margin-right: 35rpx">2024-04-11 18:59:52</view>
<view style="font-size: 26rpx; margin-right: 35rpx"
>2024-04-11 18:59:52</view
>
</view>
<view class="four">
<u-button style="color: #e5b29f; font-weight: 700" type="primary" text="立即购买" color="#fef3ef"></u-button>
<u-button
style="color: #e5b29f; font-weight: 700"
type="primary"
text="立即购买"
color="#fef3ef"
></u-button>
</view>
</view>
</view>
<view>
<view class="Master-card">
<view class="top">
<view class="left" style="font-weight: 700; font-size: 34rpx">推荐高手</view>
<view class="left" style="font-weight: 700; font-size: 34rpx"
>推荐高手</view
>
<view class="right">
<view @click="ViewGuru" style="font-size: 24rpx; margin-right: 15rpx">查看更多</view>
<view
@click="ViewGuru"
style="font-size: 24rpx; margin-right: 15rpx"
>查看更多</view
>
<u-icon name="arrow-right" size="12" color="#555555"></u-icon>
</view>
</view>
</view>
<view style="height: 900rpx; overflow-y: auto; -webkit-overflow-scrolling: touch">
<view @click="masterHand(item)" v-for="(item, index) in 5" class="Master-card-buttom">
<view
style="
height: 900rpx;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
"
>
<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>
@ -65,7 +131,9 @@
<view class="right">
<view>
<span style="color: red; font-weight: 700">9连红</span>
<span style="color: red; margin-left: 15rpx; font-weight: 700">近20中15</span>
<span style="color: red; margin-left: 15rpx; font-weight: 700"
>近20中15</span
>
</view>
<view class="texta">行走江湖多年关系网遍布全球</view>
<view class="textb">全球周易五行术数</view>
@ -78,173 +146,182 @@
</template>
<script setup>
import { ref, onMounted } from 'vue';
//
const { safeAreaInsets } = uni.getSystemInfoSync();
const text = ref([
{
txt: '学院'
},
{
txt: '方法'
},
{
txt: '高玩区'
import { ref, onMounted } from 'vue'
//
const { safeAreaInsets } = uni.getSystemInfoSync()
const text = ref([
{
txt: '学院',
},
{
txt: '方法',
},
{
txt: '高玩区',
},
])
const src = ref({
src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
text: '无头像',
})
const ViewGuru = () => {
uni.navigateTo({
url: '/pages/index/compontents/bigMaster',
animationDuration: '300',
})
}
]);
const src = ref({
src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
text: '无头像'
});
const ViewGuru = () => {
uni.navigateTo({
url: '/pages/index/compontents/bigMaster',
animationDuration: '300'
});
};
const masterHand = (item) => {
uni.navigateTo({
url: '/pages/index/compontents/masterHand',
animationDuration: '300'
});
};
// #ifdef H5 || APP
console.log('运行在 App');
// #endif
const masterHand = (item) => {
uni.navigateTo({
url: '/pages/index/compontents/masterHand',
animationDuration: '300',
})
}
const scheme = () => {
uni.navigateTo({
url: '/pages/index/compontents/scheme',
animationDuration: '300',
})
}
// #ifdef H5 || APP
console.log('运行在 App')
// #endif
// #ifndef MP-WEIXIN
console.log('不是运行在微信小程序');
// #endif
// #ifndef MP-WEIXIN
console.log('不是运行在微信小程序')
// #endif
</script>
<style lang="scss" scoped>
.color {
background-image: linear-gradient(to bottom, rgba(246, 233, 224), rgba(255, 255, 255));
height: 100%;
display: flow-root;
}
.index-page {
background-size: contain;
background-repeat: no-repeat;
/* #ifdef H5 */
padding-top: 20rpx;
/* #endif */
}
.color {
background-image: linear-gradient(
to bottom,
rgba(246, 233, 224),
rgba(255, 255, 255)
);
height: 100%;
display: flow-root;
}
.index-page {
background-size: contain;
background-repeat: no-repeat;
/* #ifdef H5 */
padding-top: 20rpx;
/* #endif */
}
.page-navbar {
height: 88rpx;
line-height: 88rpx;
padding: 0 30rpx;
font-size: 34rpx;
font-weight: 700;
color: #000;
text-align: center;
}
.headPortrait {
width: 650rpx;
height: 250rpx;
border-radius: 20rpx;
margin: auto;
margin-top: 100rpx;
background-color: #fff;
border: 1rpx solid #b6b5b3;
}
.Off-card {
display: flex;
justify-content: space-evenly;
margin-top: 15rpx;
}
.card {
width: 200rpx;
height: 200rpx;
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
border-radius: 20rpx;
border: 1rpx solid #b6b5b3;
}
.Long-card {
background-color: #fff;
width: 300rpx;
height: 120rpx;
margin-top: 15rpx;
border-radius: 15rpx;
border: 1rpx solid #b6b5b3;
}
.scheme {
display: flex;
justify-content: space-between;
margin: 35rpx;
line-height: 40rpx;
}
.Pitch-card {
width: 650rpx;
height: 400rpx;
border-radius: 15rpx;
margin: 20rpx auto;
background-color: #fff;
border: 1rpx solid #b6b5b3;
.one {
display: flex;
margin-top: 20rpx;
justify-content: space-between;
}
.two {
font-size: 35rpx;
.page-navbar {
height: 88rpx;
line-height: 88rpx;
padding: 0 30rpx;
font-size: 34rpx;
font-weight: 700;
margin: 10rpx 0 10rpx 20rpx;
color: #000;
text-align: center;
}
.three {
.headPortrait {
width: 650rpx;
height: 250rpx;
border-radius: 20rpx;
margin: auto;
margin-top: 100rpx;
background-color: #fff;
border: 1rpx solid #b6b5b3;
}
.Off-card {
display: flex;
justify-content: space-evenly;
margin-top: 15rpx;
}
.card {
width: 200rpx;
height: 200rpx;
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
border-radius: 20rpx;
border: 1rpx solid #b6b5b3;
}
.Long-card {
background-color: #fff;
width: 300rpx;
height: 120rpx;
margin-top: 15rpx;
border-radius: 15rpx;
border: 1rpx solid #b6b5b3;
}
.scheme {
display: flex;
justify-content: space-between;
margin: 35rpx;
line-height: 40rpx;
}
.Pitch-card {
width: 650rpx;
height: 400rpx;
border-radius: 15rpx;
margin: 20rpx auto;
background-color: #fff;
border: 1rpx solid #b6b5b3;
.one {
display: flex;
margin-top: 20rpx;
justify-content: space-between;
}
.two {
font-size: 35rpx;
font-weight: 700;
margin: 10rpx 0 10rpx 20rpx;
}
.three {
display: flex;
justify-content: space-between;
align-items: center;
}
.four {
margin: 45rpx;
}
}
.Master-card {
width: 650rpx;
margin: auto;
.top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20rpx;
}
.right {
display: flex;
}
}
.Master-card-buttom {
width: 650rpx;
height: 250rpx;
margin: auto;
border: 1rpx solid #b6b5b3;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #fff;
.left {
display: flex;
align-items: center;
}
.texta {
width: 300rpx;
height: 80rpx;
border: 1rpx solid #e4b895;
color: #e4b895;
font-size: 16rpx;
margin-top: 16rpx;
margin-bottom: 16rpx;
}
.textb {
border: 1rpx solid #e4b895;
color: #e4b895;
width: 300rpx;
font-size: 16rpx;
}
}
.four {
margin: 45rpx;
}
}
.Master-card {
width: 650rpx;
margin: auto;
.top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20rpx;
}
.right {
display: flex;
}
}
.Master-card-buttom {
width: 650rpx;
height: 250rpx;
margin: auto;
border: 1rpx solid #b6b5b3;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #fff;
.left {
display: flex;
align-items: center;
}
.texta {
width: 300rpx;
height: 80rpx;
border: 1rpx solid #e4b895;
color: #e4b895;
font-size: 16rpx;
margin-top: 16rpx;
margin-bottom: 16rpx;
}
.textb {
border: 1rpx solid #e4b895;
color: #e4b895;
width: 300rpx;
font-size: 16rpx;
}
}
</style>