登录页面,结算页面完成

This commit is contained in:
ycy 2024-04-19 16:35:16 +08:00
parent f16f49be04
commit 353969513a
12 changed files with 190 additions and 37 deletions

View File

@ -90,6 +90,20 @@
"navigationBarTitleText": "高手详情", "navigationBarTitleText": "高手详情",
"navigationStyle": "custom" "navigationStyle": "custom"
} }
},
{
"path": "pages/login/index",
"style": {
"navigationBarTitleText": "登录",
"navigationStyle": "custom"
}
},
{
"path": "pages/index/compontents/billingPage",
"style": {
"navigationBarTitleText": "结算页面",
"navigationStyle": "custom"
}
} }
], ],
"globalStyle": { "globalStyle": {

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

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

85
pages/login/index.vue Normal file
View File

@ -0,0 +1,85 @@
<template>
<view class="color">
<view class="text">
<h1>
<p>你好!<br />
欢迎来打足球奖门人
</p>
</h1>
<span style="font-size: 10px; color: #95918e;">致力于为体育迷创造一片欢乐</span>
</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>
</template>
<script setup>
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 masterHand = (item) => {
uni.navigateTo({
url: '/pages/index/compontents/masterHand',
animationDuration: '300'
});
};
// #ifdef H5 || APP
console.log('运行在 App');
// #endif
// #ifndef MP-WEIXIN
console.log('不是运行在微信小程序');
// #endif
</script>
<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">