燕成杰 / Bitcoin · 提交

转到一个项目

作者 燕成杰
提交 d8d92a486c1838a71cbb49662eb0f8c59043c9e4 1 个父辈 4f48aec3

我的页面 + 提现40%

内嵌 并排对比
正在显示 17 个修改的文件 包含 320 行增加 和 5 行删除
<template>
<template>
<view class="">
<view class="absTop"></view>
<view class="mainBox">
<view class="exit flexA">
<image src="/static/exit.png" mode=""></image>
退出登录
</view>
<view class="topInfo flexA">
<image src="/static/logo.png" mode=""></image>
<view class="right">
<view class="">张小萌</view>
<view class="">15664000180</view>
</view>
</view>
<view class="money">
<view class="item">
<view class="qian"><text style="font-size: 32rpx;">¥</text>600</view>
<view class="yue">账户余额</view>
<view class="tixian flexC" @click="totackMoney(1)">提现</view>
</view>
<view class="item">
<view class="qian"><text style="font-size: 32rpx;">¥</text>600</view>
<view class="yue">保证金</view>
<view class="tixian flexC" @click="totackMoney(2)">提现</view>
</view>
<view class="item">
<image src="/static/bill.png" mode=""></image>
<view class="tixian flexC">提现</view>
</view>
</view>
</view>
<view style="height: 462rpx;"></view>
<view class="cenBox">
<view class="item">
<image src="/static/center1.png" mode=""></image>
我买入的
</view>
<view class="item">
<image src="/static/center2.png" mode=""></image>
我卖出的
</view>
<view class="item">
<image src="/static/center3.png" mode=""></image>
我的发布
</view>
<view class="item">
<image src="/static/center4.png" mode=""></image>
我的收藏
</view>
</view>
<view class="botBox">
<view class="title">更多服务</view>
<view class="group">
<view class="item" v-for="(item,idx) in serviceList" :key="idx">
<image :src="`/static/bot${idx+1}.png`" mode=""></image>
我买入的
</view>
</view>
</view>
<Botton></Botton>
<!-- <u-modal :show="showCancel" @confirm="confirmCancel" @cancel="showCancel=false" content='您确定要退出登录吗' -->
</view>
</template>
<script>
<script>
import Botton from "@/components/Botton.vue"
export default {
components: {
Botton
},
data() {
return {
serviceList : [
{name:'联系客服'},
{name:'品牌入驻'},
{name:'意见反馈'},
{name:'常见问题'},
{name:'我的任务'},
{name:'我的点赞'},
{name:'历史记录'},
{name:'常用地址'},
]
}
},
methods: {
totackMoney(type) {
uni.navigateTo({
url:'/pages/mine/withdrawal?type='+type
})
}
},
}
</script>
<style>
<style lang="less">
page {
background: rgba(246,246,246,1);
}
.absTop {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 306rpx;
opacity: 1;
background: linear-gradient(180deg, rgba(255,249,221,1) 0%, rgba(255,249,221,0) 100%);
z-index: 0;
}
.mainBox {
position: absolute;
left: 0;
top: 0;
padding: 28rpx 32rpx;
box-sizing: border-box;
.exit {
justify-content: flex-end;
image {
width: 40rpx;
height: 40rpx;
}
color: rgba(0,0,0,1);
font-size: 24rpx;
font-weight: 400;
}
.topInfo {
image {
margin-right: 24rpx;
width: 108rpx;
height: 108rpx;
border-radius: 50%;
}
view:nth-child(1){
margin: 8rpx 0;
font-size: 32rpx;
font-weight: 700;
}
view:nth-child(2){
color: rgba(0,0,0,0.9);
font-size: 28rpx;
}
}
.money {
display: flex;
justify-content: space-around;
margin: 32rpx auto 24rpx;
width: 702rpx;
height: 250rpx;
border-radius: 24rpx;
opacity: 1;
background: rgba(255,255,255,1);
.item {
padding: 32rpx 0;
width: 144rpx;
position: relative;
image {
width: 80.74rpx;
height: 75.09rpx;
}
display: flex;
flex-direction: column;
align-items: center;
.qian {
color: rgba(248,83,23,1);
font-size: 44rpx;
}
.yue {
margin-top: 18rpx;
color: rgba(0,0,0,0.9);
font-size: 24rpx;
}
.tixian {
position: absolute;
left: 0;
bottom: 32rpx;
width: 144rpx;
height: 56rpx;
border-radius: 50rpx;
opacity: 1;
background: rgba(254,208,0,1);
color: rgba(0,0,0,0.9);
font-size: 24rpx;
font-weight: 700;
}
}
}
}
.cenBox {
display: flex;
justify-content: space-evenly;
align-items: center;
margin: 24rpx auto 24rpx;
width: 702rpx;
height: 184rpx;
border-radius: 24rpx;
background: rgba(255,255,255,1);
.item {
display: flex;
align-items: center;
flex-direction: column;
image {
width: 64rpx;
height: 64rpx;
margin-bottom: 16rpx;
}
color: rgba(100,101,102,1);
font-size: 26rpx;
}
}
.botBox {
margin: 0 auto;
padding: 32rpx 0;
box-sizing: border-box;
width: 702rpx;
height: 464rpx;
border-radius: 24rpx;
opacity: 1;
background: rgba(255,255,255,1);
.group {
display: flex;
align-items: center;
flex-wrap: wrap;
.item {
width: 176rpx;
height: 184rpx;
display: flex;
align-items: center;
flex-direction: column;
}
image {
width: 64rpx;
height: 64rpx;
margin-bottom: 16rpx;
}
color: rgba(100,101,102,1);
font-size: 26rpx;
}
.title {
margin: 0 0 56rpx 32rpx;
color: rgba(50,50,51,1);
font-size: 28rpx;
font-weight: 700;
}
}
</style>
... ...
<template>
<template>
<view class="">
<image class="bg" src="/static/takeMoneyBg.png" mode=""></image>
<view class="top">
<view >账户余额:</view>
<view > <text style="32rpx">¥</text> 600.00</view>
</view>
<view class="center">
<view class="title">提现金额</view>
<view class="inputPrice">
<view class="">
¥<input type="text" value="" />
</view>
<view class="right">全部提现</view>
</view>
<view class="title" style="margin-top: 30rpx;">提现方式</view>
</view>
</view>
</template>
<script>
</script>
<style>
<style lang="less">
page {
background: #f6f6f6;
}
.bg {
overflow: hidden;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 366rpx;
}
.top {
position: absolute;
left: 32rpx;
top: 64rpx;
view:nth-child(1) {
color: rgba(0,0,0,0.4);
font-size: 28rpx;
}
view:nth-child(2) {
color: rgba(0,0,0,0.9);
font-size: 64rpx;
font-weight: 700;
}
}
.center {
position: absolute;
width: 686rpx;
left: 50%;
top: 220rpx;
border-radius: 24rpx;
padding: 40rpx 32rpx;
transform: translateX(-50%);
background: #fff;
box-sizing: border-box;
.title {
font-weight: 700;
margin-bottom: 32rpx;
font-weight: 700;
}
.inputPrice {
display: flex;
justify-content: space-between;
align-items: center;
view {
font-weight: 700;
display: flex;
align-items: center;
font-size: 52rpx;
input {
margin-left: 20rpx;
font-weight: 400;
}
}
.right {
color: rgba(33,83,212,1);
font-size: 28rpx;
font-weight: 400;
}
}
}
</style>
... ...