Compare commits

..

No commits in common. "78502d1580ad64a0ba436f631f71875f96edd1a3" and "d033518ad183ab426df6b951ac2528ff9d79b7c1" have entirely different histories.

2 changed files with 172 additions and 586 deletions

View File

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