This commit is contained in:
sundongyu 2024-04-19 17:37:45 +08:00
commit 78502d1580
13 changed files with 472 additions and 114 deletions

View File

@ -92,16 +92,23 @@
} }
}, },
{ {
"path": "pages/index/compontents/scheme", "path": "pages/login/index",
"style": { "style": {
"navigationBarTitleText": "方案详情", "navigationBarTitleText": "登录",
"navigationStyle": "custom" "navigationStyle": "custom"
} }
}, },
{ {
"path": "pages/login/index", "path": "pages/index/compontents/billingPage",
"style": { "style": {
"navigationBarTitleText": "登录", "navigationBarTitleText": "结算页面",
"navigationStyle": "custom"
}
},
{
"path": "pages/index/compontents/integralGuess",
"style": {
"navigationBarTitleText": "积分竞猜",
"navigationStyle": "custom" "navigationStyle": "custom"
} }
} }

View File

@ -0,0 +1,75 @@
<template>
<view style="background-color: #e8b596;">
<u-icon name="arrow-left" color="#fff" size="20" style="float: left;margin-top:4%; margin-left: 4%;" @click="gotoBack" />
<view :style="{ paddingTop: safeAreaInsets.top + 'px', 'color': '#fff'}" class="page-navbar">结算页面</view>
</view>
<view class="attentionList">
<view class="schemeInfo">
<span style="margin-left: 5%; color: #fff; font-weight: 600; font-size: 15px;">方案信息</span>
<u-cell-group style="background-color: #fff;flex: 0;">
<u-cell title="赛事" value="斯洛文尼亚甲级联赛"
:titleStyle="{'font-size': '14px','font-weight': '600','color' : '#c6c6c6'}" />
<u-cell title="职业方案" value="放心,连红不会断在这场!"
:titleStyle="{'font-size': '14px','font-weight': '600','color' : '#c6c6c6'}" />
<u-cell title="职业打榜高手" value="提词器"
:titleStyle="{'font-size': '14px','font-weight': '600','color' : '#c6c6c6'}" />
<u-cell title="金额" value="488.00元宝"
:titleStyle="{'font-size': '14px','font-weight': '600','color' : '#c6c6c6'}" />
</u-cell-group>
</view>
<view class="">
<view class="schemeInfo" style="height: 26vh;">
<span style="margin-left: 5%; color: #fff; font-weight: 600; font-size: 15px;">我的账户</span>
<u-cell-group style="background-color: #fff;flex: 0;">
<u-cell title="选择支付方式" value="元宝支付" :isLink="true"
:titleStyle="{'font-size': '14px','font-weight': '600','color' : '#c6c6c6'}" />
<u-cell title="账户金额:668.00元宝" value="直接充值" :isLink="true"
:titleStyle="{'font-size': '14px','font-weight': '600','color' : '#c6c6c6'}" />
<u-cell title="可用优惠卷" value="0张可用" :isLink="true"
:titleStyle="{'font-size': '14px','font-weight': '600','color' : '#c6c6c6'}" />
</u-cell-group>
</view>
</view>
<u-button size="large" shape="shape" color="#fff" style="width: 90%; margin-top: 4%;">
<span style="color: #e4b698; font-weight: 600;">立即结算</span>
</u-button>
</view>
</template>
<script setup>
import {
ref
} from 'vue'
const {
safeAreaInsets
} = uni.getSystemInfoSync();
const src = ref('https://cdn.uviewui.com/uview/album/1.jpg');
const gotoBack = () => {
uni.navigateBack({
delta: 1
})
}
</script>
<style lang="scss" scoped>
.attentionList {
width: 100%;
min-height: 94.5vh;
background-color: #e8b596;
.schemeInfo{
height: 32vh;
display: flex;
flex-direction: column;
justify-content: space-around;
}
}
:deep(.u-cell__value){
max-width: 60vw;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 15px;
font-weight: 700;
color: #000;
}
</style>

View File

@ -0,0 +1,255 @@
<template>
<view style="background-color: #e13977; height: 30vh; padding: 0 3%;">
<view style="margin-bottom: 5%;">
<u-icon name="arrow-left" color="#646668" size="28" style="float: left;margin-top:2%;" @click="gotoBack" />
<view :style="{ paddingTop: safeAreaInsets.top + 'px' }" class="page-navbarOne">积分竞猜</view>
</view>
<view>
<view class="Title">
<text>最新竞猜</text>
<text style="color: #fff;">我的积分:20</text>
</view>
<view v-for="(item,index) in list" :key="index">
<view class="content">
<view class="moneyBuy">
<view class="money-content">
<span>{{"四月门派冠军"}}</span>
</view>
</view>
<u-line style="width: 95%;"></u-line>
<view class="timeSession">
<view style="width: 30%; display: flex; justify-content: space-around;">
<span style="font-size: 18px;font-weight: 700; color: #eabc9e;">X5</span>
<u-tag text="未竞猜" type="warning" size="mini" plain plainFill></u-tag>
</view>
<view>
<span style="font-size: 14px; font-weight: 600;">{{'发布时间:'+item.time}}</span>
</view>
</view>
<u-line style="width: 95%;"></u-line>
<view class="userInfo">
<view class="userTag">
<view v-for="(item, index) in item.tagList" :key="index">
<view class="grid-item">
<u-tag :text="item.name" type="warning" size="large" plain></u-tag>
</view>
</view>
</view>
</view>
<view style="width: 95%;">
<u-input placeholder="请输入积分" border="surround" v-model="value" />
<u-button text="提交" size="large" shape="circle" color="#1989f9" style="margin: 3% 0 ;"/>
</view>
</view>
</view>
</view>
<view class="Title">
<text>最新竞猜</text>
<text style="color: #fff;">我的积分:20</text>
</view>
<view v-for="(item,index) in list" :key="index">
<view class="content">
<view class="moneyBuy">
<view class="money-content">
<span>{{"三月门派冠军"}}</span>
</view>
</view>
<u-line style="width: 95%;"></u-line>
<view class="timeSession">
<view style="width: 30%; display: flex; justify-content: space-around;">
<span style="font-size: 18px;font-weight: 700; color: #eabc9e;">X5</span>
<u-tag text="已结算" type="info" size="mini" plain plainFill></u-tag>
</view>
<view>
<span style="font-size: 14px; font-weight: 600;">{{'发布时间:'+item.time}}</span>
</view>
</view>
<u-line style="width: 95%;"></u-line>
<view class="userInfo">
<view class="userTag">
<view v-for="(item, index) in item.tagList" :key="index">
<view class="grid-item">
<u-tag :text="item.name" type="warning" size="large" plain></u-tag>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script setup>
import {
ref
} from 'vue'
const {
safeAreaInsets
} = uni.getSystemInfoSync();
const src = ref('https://cdn.uviewui.com/uview/album/1.jpg');
const gotoBack = () => {
uni.navigateBack({
delta: 1
})
}
const list = [{
originalPrice: '998.00',
isNoBuy: '未购买',
currentPrice: '496.00',
discount: '5折',
content: '我是内容',
time: '2024-04-19 10:00:00',
league: '殴足欧洲联赛',
teamOne: '利叶古通',
teamTwo: '高思维',
name: '程博士',
deadHeat: '中',
tagList: [{
name: '评级:掌门'
},
{
name: 'AI提问工程师'
},
{
name: '数字化及AI先行者'
},
{
name: '数字化及AI先行者'
},
]
}, ]
</script>
<style lang="scss" scoped>
.page-navbarOne {
height: 88rpx;
line-height: 88rpx;
padding: 0 30rpx;
color: #fff;
text-align: center;
}
.Title {
font-weight: 700;
font-size: 15px;
margin-bottom: 3%;
display: flex;
justify-content: space-between;
}
.content {
width: 100%;
// min-height: 35vh;
background-color: #fff;
border: 1px solid #f6f6f6;
border-radius: 5px;
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 5%;
.moneyBuy {
width: 94%;
height: 5vh;
display: flex;
flex-direction: column;
justify-content: space-evenly;
.money-discount {
width: 100%;
height: 50%;
display: flex;
justify-content: space-between;
align-items: center;
.money-top {
width: 40%;
position: relative;
.money-text {
display: flex;
justify-content: space-around;
position: relative;
span::before {
content: "";
position: absolute;
top: 50%;
left: 18px;
width: 48%;
height: 1px;
background-color: #e4b698;
transform: translateY(-50%);
}
}
.discounted {
position: absolute;
color: red;
font-size: 18px;
font-weight: 600;
top: 10px;
left: 22px;
}
}
.discountNum {
color: red;
font-size: 20px;
font-weight: 700;
transform: skewy(10deg);
}
}
.money-content {
font-weight: 700;
width: 90%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
.timeSession {
width: 94%;
height: 8vh;
display: flex;
align-items: center;
justify-content: space-between;
.teamVs {
display: flex;
justify-content: space-evenly;
align-items: center;
}
}
.userInfo {
width: 94%;
min-height: 10vh;
max-height: 30vh;
overflow-y: auto;
.userTag {
width: 100%;
margin: 5% 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
/* 创建两列 */
grid-gap: 10px;
/* 列间隔 */
.grid-item {
text-align: center;
background-color: #fff;
border-radius: 5px;
}
}
}
}
.btnStyle {
width: 50px;
}
</style>

View File

@ -1,7 +1,7 @@
<template> <template>
<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>
<view class="box-y"> <view class="box-y">
<!-- <u-tabs :list="list1" @click="click"></u-tabs> --> <!-- <u-tabs :list="list1" @click="click"></u-tabs> -->

View File

@ -1,21 +1,63 @@
<template> <template>
<view> <view class="color">
<view <view class="text">
:style="{ backgroundPositionY: -44 + safeAreaInsets.top + 'px' }" <h1>
class="index-page" <p>你好!<br />
> 欢迎来打足球奖门人
<!-- 自定义导航 --> </p>
<view </h1>
:style="{ paddingTop: safeAreaInsets.top + 'px' }" <span style="font-size: 10px; color: #95918e;">致力于为体育迷创造一片欢乐</span>
class="page-navbar" </view>
></view> <view class="loginBtn">
<u-button size="large" shape="circle" color="linear-gradient(to bottom, #555555, rgba(0, 0, 0))">
<span style="color: #e4b698; font-weight: 600;">微信登陆</span>
</u-button>
</view> </view>
</view> </view>
</template> </template>
<script setup> <script setup>
import {
ref,
onMounted
} from 'vue';
// //
const { safeAreaInsets } = uni.getSystemInfoSync() const {
safeAreaInsets
} = uni.getSystemInfoSync();
const ViewGuru = () => {
uni.navigateTo({
url: '/pages/index/compontents/bigMaster',
animationDuration: '300'
});
};
const masterHand = (item) => {
uni.navigateTo({
url: '/pages/index/compontents/masterHand',
animationDuration: '300'
});
};
</script> </script>
<style lang="scss"></style> <style lang="scss" scoped>
.color {
background-image: linear-gradient(to bottom, #f5e7de, #fffbfa);
height: 100vh;
width: 100%;
display: flex;
justify-content: space-evenly;
align-items: center;
flex-direction: column;
.text {
margin-top: -20%;
height: 20vh;
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
}
.loginBtn{
width: 80%;
}
</style>

View File

@ -1,7 +1,7 @@
<template> <template>
<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>
<view class="box-y"> <view class="box-y">
<view class="Upicker" v-if='handColor'> <view class="Upicker" v-if='handColor'>

View File

@ -1,12 +1,9 @@
<template> <template>
<view :style="{ backgroundPositionY: -44 + safeAreaInsets.top + 'px' }" class="index-page"> <view style="background-color: #fff;">
<!-- 自定义导航 -->
<view :style="{ paddingTop: safeAreaInsets.top + 'px' }" class="page-navbar">足球状元榜</view>
</view>
<view style="background-color: #ddd;">
<u-icon name="arrow-left" color="#646668" size="28" style="float: left;margin-top:2%;" @click="gotoBack" /> <u-icon name="arrow-left" color="#646668" size="28" style="float: left;margin-top:2%;" @click="gotoBack" />
<view :style="{ paddingTop: safeAreaInsets.top + 'px' }" class="page-navbar">会员中心</view> <view :style="{ paddingTop: safeAreaInsets.top + 'px' }" class="page-navbar">会员中心</view>
</view> </view>
<u-line></u-line>
<view class="VIPBox"> <view class="VIPBox">
<u-swiper style="width: 94%;" :list="list3" indicatorMode="line" interval="3000" circular autoplay indicator /> <u-swiper style="width: 94%;" :list="list3" indicatorMode="line" interval="3000" circular autoplay indicator />
<view class="content"> <view class="content">
@ -71,7 +68,7 @@
<style lang="scss" scoped> <style lang="scss" scoped>
.VIPBox { .VIPBox {
width: 100%; width: 100%;
min-height: 85vh; min-height: 91.5vh;
background-color: #f2f2f2; background-color: #f2f2f2;
display: flex; display: flex;
flex-direction: column; flex-direction: column;

View File

@ -1,12 +1,9 @@
<template> <template>
<view :style="{ backgroundPositionY: -44 + safeAreaInsets.top + 'px' }" class="index-page"> <view style="background-color: #fff;">
<!-- 自定义导航 -->
<view :style="{ paddingTop: safeAreaInsets.top + 'px' }" class="page-navbar">足球状元榜</view>
</view>
<view style="background-color: #ddd;">
<u-icon name="arrow-left" color="#646668" size="28" style="float: left;margin-top:2%;" @click="gotoBack" /> <u-icon name="arrow-left" color="#646668" size="28" style="float: left;margin-top:2%;" @click="gotoBack" />
<view :style="{ paddingTop: safeAreaInsets.top + 'px' }" class="page-navbar">关注列表</view> <view :style="{ paddingTop: safeAreaInsets.top + 'px' }" class="page-navbar">关注列表</view>
</view> </view>
<u-line></u-line>
<view class="attentionList"> <view class="attentionList">
<view v-for="(index,item) in 3" :key="index"> <view v-for="(index,item) in 3" :key="index">
<view class="ListStrip"> <view class="ListStrip">

View File

@ -1,8 +1,4 @@
<template> <template>
<view :style="{ backgroundPositionY: -44 + safeAreaInsets.top + 'px' }" class="index-page">
<!-- 自定义导航 -->
<view :style="{ paddingTop: safeAreaInsets.top + 'px' }" class="page-navbar">足球状元榜</view>
</view>
<view style="background-color: #e13977; height: 30vh; padding: 0 3%;"> <view style="background-color: #e13977; height: 30vh; padding: 0 3%;">
<view style="margin-bottom: 5%;"> <view style="margin-bottom: 5%;">
<u-icon name="arrow-left" color="#646668" size="28" style="float: left;margin-top:2%;" @click="gotoBack" /> <u-icon name="arrow-left" color="#646668" size="28" style="float: left;margin-top:2%;" @click="gotoBack" />

View File

@ -1,14 +1,10 @@
<template> <template>
<view :style="{ backgroundPositionY: -44 + safeAreaInsets.top + 'px'}" class="index-page"> <view style="background-color: #fff;">
<!-- 自定义导航 -->
<view :style="{ paddingTop: safeAreaInsets.top + 'px' }" class="page-navbar">足球状元榜</view>
</view>
<view style="background-color: #ddd;">
<u-icon name="arrow-left" color="#646668" size="28" style="float: left;margin-top:2%;" @click="gotoBack" /> <u-icon name="arrow-left" color="#646668" size="28" style="float: left;margin-top:2%;" @click="gotoBack" />
<view :style="{ paddingTop: safeAreaInsets.top + 'px' }" class="page-navbar">积分商城</view> <view :style="{ paddingTop: safeAreaInsets.top + 'px' }" class="page-navbar">积分商城</view>
<span style="float: right;margin-top: -8%; font-size: 10px; margin-right: 2%;">{{'我的积分: 20'}}</span> <span style="float: right;margin-top: -8%; font-size: 10px; margin-right: 2%;">{{'我的积分: 20'}}</span>
</view> </view>
<u-line></u-line>
<view class="scheme"> <view class="scheme">
<view class="integralRoll"> <view class="integralRoll">
<view v-for="(item,index) in List" :key="index" class="grid-item"> <view v-for="(item,index) in List" :key="index" class="grid-item">
@ -84,7 +80,7 @@
.scheme{ .scheme{
width: 100%; width: 100%;
min-height: 87.9vh; min-height: 94.5vh;
background-color: #f2f2f2; background-color: #f2f2f2;
display: flex; display: flex;
flex-direction: column; flex-direction: column;

View File

@ -1,13 +1,9 @@
<template> <template>
<view :style="{ backgroundPositionY: -44 + safeAreaInsets.top + 'px' }" class="index-page"> <view style="background-color: #fff;">
<!-- 自定义导航 -->
<view :style="{ paddingTop: safeAreaInsets.top + 'px' }" class="page-navbar">足球状元榜</view>
</view>
<view style="background-color: #ddd;">
<u-icon name="arrow-left" color="#646668" size="28" style="float: left;margin-top:2%;" @click="gotoBack" /> <u-icon name="arrow-left" color="#646668" size="28" style="float: left;margin-top:2%;" @click="gotoBack" />
<view :style="{ paddingTop: safeAreaInsets.top + 'px' }" class="page-navbar">已购方案</view> <view :style="{ paddingTop: safeAreaInsets.top + 'px' }" class="page-navbar">已购方案</view>
</view> </view>
<u-line></u-line>
<view class="scheme"> <view class="scheme">
<view class="content" v-for="(item,index) in List" :key="index"> <view class="content" v-for="(item,index) in List" :key="index">
<span>{{item.content}}</span> <span>{{item.content}}</span>

View File

@ -1,12 +1,9 @@
<template> <template>
<view :style="{ backgroundPositionY: -44 + safeAreaInsets.top + 'px' }" class="index-page"> <view style="background-color: #fff;">
<!-- 自定义导航 -->
<view :style="{ paddingTop: safeAreaInsets.top + 'px' }" class="page-navbar">足球状元榜</view>
</view>
<view style="background-color: #ddd;">
<u-icon name="arrow-left" color="#646668" size="28" style="float: left;margin-top:2%;" @click="gotoBack" /> <u-icon name="arrow-left" color="#646668" size="28" style="float: left;margin-top:2%;" @click="gotoBack" />
<view :style="{ paddingTop: safeAreaInsets.top + 'px' }" class="page-navbar">充值</view> <view :style="{ paddingTop: safeAreaInsets.top + 'px' }" class="page-navbar">充值</view>
</view> </view>
<u-line></u-line>
<view class="recharge"> <view class="recharge">
<view class="balance"> <view class="balance">
<span style="font-size: 14;font-weight: 600;">{{'余额'}}</span> <span style="font-size: 14;font-weight: 600;">{{'余额'}}</span>

View File

@ -1,7 +1,7 @@
<template> <template>
<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>
<view class="back-color"> <view class="back-color">
<view class="userInfo"> <view class="userInfo">