| @ -0,0 +1,10 @@ | |||||
| .bottomBtn { | |||||
| position: fixed; | |||||
| bottom: 5%; | |||||
| left: 25%; | |||||
| width: 50%; | |||||
| height: 80rpx; | |||||
| text-align: center; | |||||
| color: #ffffff; | |||||
| background: linear-gradient(to right, #3c69f1, #5f3bf5); | |||||
| } | |||||
| @ -1,19 +1,80 @@ | |||||
| <template> | <template> | ||||
| <view> | |||||
| 收益记录 | |||||
| </view> | |||||
| <view class="incomeRecord"> | |||||
| <!--顶部导航栏--> | |||||
| <navbar leftClick @leftClick="$utils.navigateBack" title="收益记录"/> | |||||
| <!--内容区域--> | |||||
| <view class="content"> | |||||
| <view class="title">收益记录</view> | |||||
| <view class="list"> | |||||
| <view class="item" v-for="(item,index) in 20" :key="index"> | |||||
| <view class="left"> | |||||
| <image src="/static/image/incomeRecord/1.png" style="width: 70%;height: 70%;"></image> | |||||
| </view> | |||||
| <view class="center"> | |||||
| <view>小李</view> | |||||
| <view>2024.02.02</view> | |||||
| </view> | |||||
| <view class="right"> | |||||
| <view>收益金额</view> | |||||
| <view>¥10000</view> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| </template> | </template> | ||||
| <script> | <script> | ||||
| export default { | |||||
| data() { | |||||
| return { | |||||
| }; | |||||
| } | |||||
| } | |||||
| export default { | |||||
| data() { | |||||
| return {}; | |||||
| } | |||||
| } | |||||
| </script> | </script> | ||||
| <style lang="scss" scoped> | <style lang="scss" scoped> | ||||
| .incomeRecord { | |||||
| .content { | |||||
| padding: 0 40rpx; | |||||
| height: calc(100vh - 240rpx); | |||||
| .title { | |||||
| font-weight: bold; | |||||
| margin-top: 5%; | |||||
| } | |||||
| .list { | |||||
| padding-top: 50rpx; | |||||
| .item { | |||||
| display: flex; | |||||
| gap: 20rpx; | |||||
| //height: 80rpx; | |||||
| margin-bottom: 40rpx; | |||||
| .left { | |||||
| display: flex; | |||||
| justify-content: center; | |||||
| align-items: flex-start; | |||||
| width: 15%; | |||||
| } | |||||
| .center { | |||||
| width: 60%; | |||||
| } | |||||
| .right { | |||||
| width: 30%; | |||||
| text-align: center; | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| </style> | </style> | ||||
| @ -1,19 +1,227 @@ | |||||
| <template> | <template> | ||||
| <view> | |||||
| 我的钱包 | |||||
| </view> | |||||
| <view class="purse"> | |||||
| <!--顶部导航栏--> | |||||
| <navbar leftClick @leftClick="$utils.navigateBack" title="我的钱包"/> | |||||
| <!--内容区--> | |||||
| <view class="content"> | |||||
| <!--上部分--> | |||||
| <view class="content-top"> | |||||
| <view class="aaa"> | |||||
| <view class="top">¥1240,045</view> | |||||
| <view class="bottom">可提现金额</view> | |||||
| </view> | |||||
| <view class="b"> | |||||
| <view class="bb"> | |||||
| <view class="top">今日收益</view> | |||||
| <view class="bottom">¥1234</view> | |||||
| </view> | |||||
| <view class="bb"> | |||||
| <view class="top">累计收益</view> | |||||
| <view class="bottom">¥1234</view> | |||||
| </view> | |||||
| <view class="bb"> | |||||
| <view class="top">已提现</view> | |||||
| <view class="bottom">¥1234</view> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| <!--下部分--> | |||||
| <view class="content-bottom"> | |||||
| <view class="card-record">卡片记录</view> | |||||
| <!--具体银行卡--> | |||||
| <view class="cards" > | |||||
| <view class="cardItem" v-for="(item, index) in 5" :key="index"> | |||||
| <view class="cardImage"> | |||||
| <image src="/static/image/addBankCard/1.svg" style="width: 100%;height: 100%;"></image> | |||||
| </view> | |||||
| <view class="cardInfo"> | |||||
| <view class="cardNum"> | |||||
| 6222021000000000018 | |||||
| </view> | |||||
| <view class="cardName"> | |||||
| 工商银行 | |||||
| </view> | |||||
| </view> | |||||
| <view class="cardIcon"> | |||||
| <image src="/static/image/purse/1.svg" style="width: 70%;height: 70%;"></image> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| <!--收益记录和去提现--> | |||||
| <span class="income-record" @click="gotoIncomeRecordPage">收益记录</span> | |||||
| <!--去提现按钮--> | |||||
| <button @click="gotoWithdrawPage" class="bottomBtn"> | |||||
| 去提现 | |||||
| </button> | |||||
| </view> | |||||
| </template> | </template> | ||||
| <script> | <script> | ||||
| export default { | |||||
| data() { | |||||
| return { | |||||
| }; | |||||
| } | |||||
| } | |||||
| import '../../common.css'; // 引入公共 CSS 文件 | |||||
| export default { | |||||
| data() { | |||||
| return {}; | |||||
| }, | |||||
| methods: { | |||||
| // 跳转到收益记录页面 | |||||
| gotoIncomeRecordPage() { | |||||
| this.$utils.navigateTo('/mine/incomeRecord'); | |||||
| }, | |||||
| // 跳转到提现页面 | |||||
| gotoWithdrawPage() { | |||||
| this.$utils.navigateTo('/mine/withdraw'); | |||||
| } | |||||
| } | |||||
| } | |||||
| </script> | </script> | ||||
| <style lang="scss" scoped> | <style lang="scss" scoped> | ||||
| .purse { | |||||
| .content { | |||||
| .content-top { | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| align-items: center; | |||||
| padding-top: 60rpx; | |||||
| background-color: #f8faff; | |||||
| height: 18vh; | |||||
| .aaa { | |||||
| color: #000000; | |||||
| .top { | |||||
| font-size: 50rpx; | |||||
| } | |||||
| .bottom { | |||||
| font-size: 14px; | |||||
| display: flex; | |||||
| justify-content: center; | |||||
| align-items: center; | |||||
| } | |||||
| } | |||||
| .b { | |||||
| display: flex; | |||||
| justify-content: center; | |||||
| align-items: center; | |||||
| gap: 100rpx; | |||||
| width: 100%; | |||||
| margin: 30rpx 40rpx 0 40rpx; | |||||
| color: #4b4b4d; | |||||
| .bb { | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| align-items: center; | |||||
| justify-content: center; | |||||
| gap: 10px; | |||||
| } | |||||
| } | |||||
| } | |||||
| .content-bottom { | |||||
| border-radius: 50rpx 50rpx 0 0; | |||||
| box-shadow: 0 -10rpx 10rpx rgba(0, 0, 0, 0.2); /* 仅上边的阴影效果 */ | |||||
| background-color: #fff; | |||||
| height: calc(82vh - 240rpx); | |||||
| width: 100vw; | |||||
| .card-record { | |||||
| font-size: 34rpx; | |||||
| padding: 40rpx 0 0 40rpx; | |||||
| } | |||||
| .cards { | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| gap: 20rpx; | |||||
| //width: 100vw; | |||||
| padding: 40rpx; | |||||
| .cardItem { | |||||
| display: flex; | |||||
| gap: 20rpx; | |||||
| height: 100rpx; | |||||
| //border: 1px solid red; | |||||
| //width: 100vw; | |||||
| .cardImage { | |||||
| width: 30%; | |||||
| //height: 100%; | |||||
| } | |||||
| .cardInfo { | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| justify-content: space-evenly; | |||||
| gap: 6rpx; | |||||
| width: 60%; | |||||
| .cardName { | |||||
| font-size: 28rpx; | |||||
| color: #8f92a1; | |||||
| } | |||||
| .cardNum { | |||||
| font-size: 24rpx; | |||||
| color: #000000; | |||||
| } | |||||
| } | |||||
| .cardIcon { | |||||
| width: 10%; | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| .withdraw-button { | |||||
| position: fixed; | |||||
| bottom: 80rpx; | |||||
| left: 16px; // 与页面左边保持一定距离 | |||||
| right: 16px; // 与页面右边保持一定距离 | |||||
| background: $uni-linear-gradient-btn-color; // 按钮背景渐变 | |||||
| color: white; // 按钮文字颜色 | |||||
| text-align: center; // 文字居中 | |||||
| padding: 10px 0; // 内边距,增加按钮的高度 | |||||
| font-size: 18px; // 按钮文字大小 | |||||
| z-index: 1000; // 确保按钮位于其他内容的上方 | |||||
| display: flex; | |||||
| justify-content: center; | |||||
| align-items: center; | |||||
| width: 50%; | |||||
| height: 80rpx; | |||||
| border-radius: 10rpx; | |||||
| } | |||||
| .income-record { | |||||
| position: fixed; | |||||
| bottom: 160rpx; | |||||
| right: 40%; | |||||
| margin-bottom: 40rpx; | |||||
| background: $uni-linear-gradient-color; | |||||
| -webkit-background-clip: text; /*将设置的背景颜色限制在文字中*/ | |||||
| -webkit-text-fill-color: transparent; /*给文字设置成透明*/ | |||||
| } | |||||
| } | |||||
| </style> | </style> | ||||
| @ -1,19 +1,151 @@ | |||||
| <template> | <template> | ||||
| <view> | |||||
| 提现 | |||||
| </view> | |||||
| <view class="withdraw"> | |||||
| <!--顶部导航栏--> | |||||
| <navbar leftClick @leftClick="$utils.navigateBack" title="提现"/> | |||||
| <!--内容区--> | |||||
| <view class="content"> | |||||
| <!--上部分--> | |||||
| <view class="content-top"> | |||||
| <view class="aaa"> | |||||
| <view class="top">¥1240,045</view> | |||||
| <view class="bottom">可提现金额</view> | |||||
| </view> | |||||
| </view> | |||||
| <!--下部分--> | |||||
| <view class="content-bottom"> | |||||
| <view class="inputComponent"> | |||||
| <view class="left">填写提现金额</view> | |||||
| <view class="centerAndRight"> | |||||
| <view class="center"> | |||||
| <uv-input placeholder="输入金额" v-model="withdrawMoney" | |||||
| border="none" @change="moneyChange"></uv-input> | |||||
| </view> | |||||
| <view class="right">全部提现</view> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| <!--提现按钮--> | |||||
| <button @click="withdrawPage" class="bottomBtn"> | |||||
| 提现 | |||||
| </button> | |||||
| </view> | |||||
| </template> | </template> | ||||
| <script> | <script> | ||||
| export default { | |||||
| data() { | |||||
| return { | |||||
| }; | |||||
| } | |||||
| } | |||||
| import '../../common.css'; // 引入公共 CSS 文件 | |||||
| export default { | |||||
| data() { | |||||
| return { | |||||
| withdrawMoney: "", | |||||
| }; | |||||
| }, | |||||
| methods: { | |||||
| // 金额发生变化 | |||||
| moneyChange(e) { | |||||
| console.log(e) | |||||
| this.withdrawMoney = e | |||||
| }, | |||||
| // 提现 | |||||
| withdrawPage() { | |||||
| // this.$utils.navigateTo('/mine/withdraw'); | |||||
| } | |||||
| } | |||||
| } | |||||
| </script> | </script> | ||||
| <style lang="scss"> | |||||
| <style lang="scss" scoped> | |||||
| .withdraw { | |||||
| .content { | |||||
| .content-top { | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| align-items: center; | |||||
| padding-top: 60rpx; | |||||
| background-color: #f8faff; | |||||
| height: 10vh; | |||||
| .aaa { | |||||
| color: #000000; | |||||
| .top { | |||||
| font-size: 50rpx; | |||||
| } | |||||
| .bottom { | |||||
| font-size: 14px; | |||||
| display: flex; | |||||
| justify-content: center; | |||||
| align-items: center; | |||||
| } | |||||
| } | |||||
| } | |||||
| .content-bottom { | |||||
| border-radius: 50rpx 50rpx 0 0; | |||||
| box-shadow: 0 -10rpx 10rpx rgba(0, 0, 0, 0.2); /* 仅上边的阴影效果 */ | |||||
| background-color: #fff; | |||||
| height: calc(90vh - 240rpx); | |||||
| //width: 100vw; | |||||
| padding: 40rpx; | |||||
| .inputComponent { | |||||
| display: flex; | |||||
| //gap: 20rpx; | |||||
| //border: 1px solid red; | |||||
| .left { | |||||
| display: flex; | |||||
| justify-content: flex-start; | |||||
| align-items: center; | |||||
| font-size: 30rpx; | |||||
| width: 50%; | |||||
| margin-right: 20rpx; | |||||
| } | |||||
| .centerAndRight { | |||||
| display: flex; | |||||
| width: 50%; | |||||
| .center { | |||||
| width: 60%; | |||||
| } | |||||
| .right { | |||||
| display: flex; | |||||
| justify-content: flex-end; | |||||
| align-items: center; | |||||
| font-size: 32rpx; | |||||
| margin-left: 20rpx; | |||||
| width: 40%; | |||||
| background: $uni-linear-gradient-color; | |||||
| -webkit-background-clip: text; /*将设置的背景颜色限制在文字中*/ | |||||
| -webkit-text-fill-color: transparent; /*给文字设置成透明*/ | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| </style> | </style> | ||||
| @ -0,0 +1 @@ | |||||
| <svg t="1724591123974" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4291" width="32" height="32"><path d="M512 341.333333c-117.845333 0-213.333333 95.488-213.333333 213.333334s95.488 213.333333 213.333333 213.333333 213.333333-95.488 213.333333-213.333333-95.488-213.333333-213.333333-213.333334z m0-42.666666c141.397333 0 256 114.581333 256 256s-114.602667 256-256 256c-141.418667 0-256-114.581333-256-256s114.581333-256 256-256z m279.616-42.325334h104.448a85.674667 85.674667 0 0 1 85.568 85.269334l1.706667 469.12a84.650667 84.650667 0 0 1-85.077334 85.056l-767.936-1.813334a85.973333 85.973333 0 0 1-85.674666-85.504l-1.685334-466.816a84.928 84.928 0 0 1 84.992-85.312h130.410667c11.861333 0 25.792-8.618667 31.125333-19.221333l34.858667-69.376c10.496-20.906667 38.144-38.08 61.674667-38.186667l276.928-1.344c23.637333-0.128 51.2 16.853333 61.824 37.952l35.904 71.253334c5.290667 10.496 19.114667 18.922667 30.933333 18.922666z m0 42.666667c-27.882667 0-56.469333-17.472-69.034667-42.410667l-35.904-71.253333c-3.349333-6.656-16.128-14.506667-23.509333-14.464l-276.906667 1.344c-7.466667 0.021333-20.48 8.106667-23.786666 14.677333l-34.858667 69.376c-12.586667 25.024-41.237333 42.730667-69.248 42.730667H127.957333c-23.466667 0-42.410667 18.986667-42.325333 42.474667l1.706667 466.837333a43.306667 43.306667 0 0 0 43.093333 42.986667l767.914667 1.813333a41.984 41.984 0 0 0 42.304-42.24l-1.685334-469.12a43.008 43.008 0 0 0-42.88-42.752h-104.469333zM506.666667 714.666667a21.333333 21.333333 0 1 1 0-42.666667c61.866667 0 112-50.133333 112-112a21.333333 21.333333 0 0 1 42.666666 0 154.666667 154.666667 0 0 1-154.666666 154.666667z" fill="#3D3D3D" p-id="4292"></path></svg> | |||||
| @ -0,0 +1 @@ | |||||
| <svg t="1724594245531" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5457" width="32" height="32"><path d="M512 0a113.778 113.778 0 0 0-113.778 113.778A113.778 113.778 0 0 0 512 227.556a113.778 113.778 0 0 0 113.778-113.778A113.778 113.778 0 0 0 512 0zM398.222 910.222A113.778 113.778 0 0 0 512 1024a113.778 113.778 0 0 0 113.778-113.778A113.778 113.778 0 0 0 512 796.444a113.778 113.778 0 0 0-113.778 113.778z m0-398.222A113.778 113.778 0 0 0 512 625.778 113.778 113.778 0 0 0 625.778 512 113.778 113.778 0 0 0 512 398.222 113.778 113.778 0 0 0 398.222 512z" p-id="5458" fill="#bfbfbf"></path></svg> | |||||