布局页面修改重构

This commit is contained in:
ycy 2024-04-20 10:14:22 +08:00
parent af4abe71d6
commit 9e2845ab8c
3 changed files with 27 additions and 12 deletions

View File

@ -6,7 +6,7 @@
<view class="attentionList"> <view class="attentionList">
<view class="schemeInfo"> <view class="schemeInfo">
<span style="margin-left: 5%; color: #fff; font-weight: 600; font-size: 15px;">方案信息</span> <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-group style="background-color: #fff;flex: 0; border-radius: 5px;">
<u-cell title="赛事" value="斯洛文尼亚甲级联赛" <u-cell title="赛事" value="斯洛文尼亚甲级联赛"
:titleStyle="{'font-size': '14px','font-weight': '600','color' : '#c6c6c6'}" /> :titleStyle="{'font-size': '14px','font-weight': '600','color' : '#c6c6c6'}" />
<u-cell title="职业方案" value="放心,连红不会断在这场!" <u-cell title="职业方案" value="放心,连红不会断在这场!"
@ -20,7 +20,7 @@
<view class=""> <view class="">
<view class="schemeInfo" style="height: 26vh;"> <view class="schemeInfo" style="height: 26vh;">
<span style="margin-left: 5%; color: #fff; font-weight: 600; font-size: 15px;">我的账户</span> <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-group style="background-color: #fff;flex: 0; border-radius: 5px;">
<u-cell title="选择支付方式" value="元宝支付" :isLink="true" <u-cell title="选择支付方式" value="元宝支付" :isLink="true"
:titleStyle="{'font-size': '14px','font-weight': '600','color' : '#c6c6c6'}" /> :titleStyle="{'font-size': '14px','font-weight': '600','color' : '#c6c6c6'}" />
<u-cell title="账户金额:668.00元宝" value="直接充值" :isLink="true" <u-cell title="账户金额:668.00元宝" value="直接充值" :isLink="true"
@ -30,9 +30,11 @@
</u-cell-group> </u-cell-group>
</view> </view>
</view> </view>
<u-button size="large" shape="shape" color="#fff" style="width: 90%; margin-top: 4%;"> <u-button size="large" shape="shape" color="#fff" style="width: 90%; margin-top: 4%;" @click="accountBtn">
<span style="color: #e4b698; font-weight: 600;">立即结算</span> <span style="color: #e4b698; font-weight: 600;">立即结算</span>
</u-button> </u-button>
<u-modal :show="show" title="温馨提示" :content='content' style="text-align: center;" confirmColor="red" @confirm="confirm" ref="uModal"
:asyncClose="true" showCancelButton @cancel="()=>show=false"/>
</view> </view>
</template> </template>
@ -43,12 +45,20 @@
const { const {
safeAreaInsets safeAreaInsets
} = uni.getSystemInfoSync(); } = uni.getSystemInfoSync();
const show = ref(false)
const content = ref('赛事已经开场,确认要选购么!!!!')
const src = ref('https://cdn.uviewui.com/uview/album/1.jpg'); const src = ref('https://cdn.uviewui.com/uview/album/1.jpg');
const gotoBack = () => { const gotoBack = () => {
uni.navigateBack({ uni.navigateBack({
delta: 1 delta: 1
}) })
} }
const accountBtn = ()=>{
show.value = true
}
const confirm = ()=>{
show.value = false
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -72,4 +82,7 @@
font-weight: 700; font-weight: 700;
color: #000; color: #000;
} }
:deep(.u-modal__title){
display: block;
}
</style> </style>

View File

@ -1,7 +1,7 @@
<template> <template>
<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%; position: relative;">
<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="24" style="position: absolute; top: 11px;" @click="gotoBack" />
<view :style="{ paddingTop: safeAreaInsets.top + 'px' }" class="page-navbarOne">积分竞猜</view> <view :style="{ paddingTop: safeAreaInsets.top + 'px' }" class="page-navbarOne">积分竞猜</view>
</view> </view>
<view> <view>
@ -31,14 +31,14 @@
<view class="userTag"> <view class="userTag">
<view v-for="(item, index) in item.tagList" :key="index"> <view v-for="(item, index) in item.tagList" :key="index">
<view class="grid-item"> <view class="grid-item">
<u-tag :text="item.name" type="warning" size="large" plain></u-tag> <u-tag :text="item.name" type="warning" size="large" plain plainFill></u-tag>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
<view style="width: 95%;"> <view style="width: 95%;">
<u-input placeholder="请输入积分" border="surround" v-model="value" /> <u-input placeholder="请输入积分" border="surround" v-model="value" />
<u-button text="提交" size="large" shape="circle" color="#1989f9" style="margin: 3% 0 ;"/> <u-button text="提交" size="main" shape="circle" color="#1989f9" style="margin: 3% 0 ;"/>
</view> </view>
</view> </view>
</view> </view>
@ -69,7 +69,7 @@
<view class="userTag"> <view class="userTag">
<view v-for="(item, index) in item.tagList" :key="index"> <view v-for="(item, index) in item.tagList" :key="index">
<view class="grid-item"> <view class="grid-item">
<u-tag :text="item.name" type="warning" size="large" plain></u-tag> <u-tag :text="item.name" type="warning" size="large" plain plainFill></u-tag>
</view> </view>
</view> </view>
</view> </view>

View File

@ -55,7 +55,6 @@
<u-cell title="退出登录" :titleStyle="{'font-size': '16px','font-weight': '600'}" :isLink="true"></u-cell> <u-cell title="退出登录" :titleStyle="{'font-size': '16px','font-weight': '600'}" :isLink="true"></u-cell>
</u-cell-group> </u-cell-group>
</view> </view>
<!-- <u-modal :show="popupShow" :title="签到" content='签到成功'></u-modal> -->
<u-overlay :show="popupShow" @click="popupShow = false"> <u-overlay :show="popupShow" @click="popupShow = false">
<view class="warp"> <view class="warp">
<view class="rect" @tap.stop> <view class="rect" @tap.stop>
@ -79,6 +78,9 @@
safeAreaInsets safeAreaInsets
} = uni.getSystemInfoSync(); } = uni.getSystemInfoSync();
const show = ref(false)
const content = ref('赛事已经开场,确认要选购么')
// //
const URLto = () => { const URLto = () => {
uni.navigateTo({ uni.navigateTo({
@ -132,7 +134,7 @@
.userInfo { .userInfo {
width: 89vw; width: 89vw;
padding: 10% 5%; padding: 8% 5%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -157,7 +159,7 @@
.gridBox { .gridBox {
width: 89.4vw; width: 89.4vw;
height: 25vh; height: 24vh;
padding: 5% 5%; padding: 5% 5%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -185,7 +187,7 @@
justify-content: space-between; justify-content: space-between;
.gridBox-rectangle { .gridBox-rectangle {
width: 45%; width: 47%;
height: 8vh; height: 8vh;
border: 1px solid #f0f0f0; border: 1px solid #f0f0f0;
font-size: 14px; font-size: 14px;