156 lines
3.2 KiB
Vue
156 lines
3.2 KiB
Vue
<template>
|
||
<view style="padding-bottom: 160rpx;">
|
||
<view class="price_card">
|
||
<view>账户入股金额</view>
|
||
<view><text class="money">30000.00</text>元</view>
|
||
</view>
|
||
<view class="card">
|
||
<view class="c_title">账单记录</view>
|
||
<u-line></u-line>
|
||
<view class="c_body" v-for="i in 3" :key="i">
|
||
<image class="icon" src="/static/icons/share.png"></image>
|
||
<view class="body_text">
|
||
<view class="b_title">入股金额充值</view>
|
||
<view class="b_text">
|
||
<view class="b_text_left">
|
||
<view>充值账户：</view>
|
||
<image class="b_avatar" src="../../static/img/public/man.png"></image>
|
||
<view>张三三</view>
|
||
</view>
|
||
<view class="b_text_right">+1000.00</view>
|
||
</view>
|
||
<view class="b_time">完成时间：2023-06-15 18:00</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="button">
|
||
<view class="retreat" @click="retreat">退股</view>
|
||
<view class="hand" @click="hand">上交</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { Toast } from '../../libs/uniApi';
|
||
export default {
|
||
data() {
|
||
return {
|
||
|
||
};
|
||
},
|
||
methods:{
|
||
retreat(){
|
||
Toast('开发中')
|
||
},
|
||
hand(){
|
||
Toast('开发中')
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.price_card{
|
||
width: 694rpx;
|
||
height: 180rpx;
|
||
padding: 10rpx 0;
|
||
background: #0022C7;
|
||
margin: 28rpx;
|
||
border-radius: 21rpx;
|
||
color: white;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: space-evenly;
|
||
.money{
|
||
font-size: 70rpx;
|
||
}
|
||
}
|
||
.card{
|
||
margin: 28rpx;
|
||
width: 694rpx;
|
||
background-color: #fff;
|
||
border-radius: 14rpx;
|
||
.c_title{
|
||
color: #0022C7;
|
||
font-size: 32rpx;
|
||
font-weight: 500;
|
||
padding: 28rpx;
|
||
}
|
||
.c_body{
|
||
margin: 28rpx;
|
||
padding-bottom: 28rpx;
|
||
display: flex;
|
||
border-bottom: 1px solid #F3F4F8;
|
||
&:last-child{
|
||
border-bottom: none;
|
||
}
|
||
.icon{
|
||
width: 77rpx;
|
||
height: 77rpx;
|
||
flex-shrink: 0;
|
||
margin-right: 12rpx;
|
||
}
|
||
.body_text{
|
||
flex: 1;
|
||
font-size: 25rpx;
|
||
.b_title{
|
||
font-size: 32rpx;
|
||
color: #333;
|
||
font-weight: 500;
|
||
}
|
||
.b_text{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 16rpx 0;
|
||
font-size: 28rpx;
|
||
.b_avatar{
|
||
width: 52rpx;
|
||
height: 52rpx;
|
||
margin-right: 8rpx;
|
||
}
|
||
&_left{
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
&_right{
|
||
color: #F02828;
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 35rpx;
|
||
}
|
||
}
|
||
.b_time{
|
||
color: #666666;
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
.button{
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
// z-index: 9999999;
|
||
z-index: 1;
|
||
width: 100%;
|
||
border-radius: 0;
|
||
color: #fff;
|
||
height: 90rpx;
|
||
line-height: 90rpx;
|
||
background-color: $theme-oa-color;
|
||
display: flex;
|
||
.retreat{
|
||
color: $theme-oa-color;
|
||
background-color: #fff;
|
||
}
|
||
.hand, .retreat{
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 32rpx;
|
||
}
|
||
}
|
||
</style>
|