167 lines
2.9 KiB
Vue
167 lines
2.9 KiB
Vue
<template>
|
||
<view class="user_container">
|
||
<!-- 用户信息 -->
|
||
<view class="user_info">
|
||
<view class="user_logo"></view>
|
||
<view class="user_text">
|
||
<view class="user_name">
|
||
<text>于慈航</text>
|
||
<view class="code_card">VIP1</view>
|
||
</view>
|
||
<view class="tel_number">
|
||
<text>手机号：</text>
|
||
<text>17722701181</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 金额信息 -->
|
||
<view class="amount_info">
|
||
<view class="top">
|
||
<view class="left">
|
||
当前余额：<text>2333</text>
|
||
</view>
|
||
<view class="actions">
|
||
<text>充值</text>
|
||
<text>立刻提现</text>
|
||
</view>
|
||
</view>
|
||
<view class="bottom">
|
||
<view class="child">
|
||
<text>累计收益</text>
|
||
<text>123445</text>
|
||
</view>
|
||
<view class="child">
|
||
<text>今日预估</text>
|
||
<text>11111</text>
|
||
</view>
|
||
<view class="child">
|
||
<text>昨日收入</text>
|
||
<text>222</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
|
||
};
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.user_container {
|
||
color: #FFFFFF;
|
||
padding: 0 20rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.user_info {
|
||
margin-top: 40rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.user_logo {
|
||
height: 120rpx;
|
||
width: 120rpx;
|
||
border-radius: 50%;
|
||
background-color: gray;
|
||
}
|
||
|
||
.user_text {
|
||
font-size: 28rpx;
|
||
line-height: 1;
|
||
flex: 1;
|
||
margin-left: 30rpx;
|
||
align-self: center;
|
||
|
||
.code_card {
|
||
display: inline-block;
|
||
}
|
||
|
||
.tel_number {
|
||
margin-top: 10rpx;
|
||
color: #C4CBE4;
|
||
}
|
||
}
|
||
}
|
||
|
||
.amount_info {
|
||
height: 230rpx;
|
||
border-radius: 17rpx;
|
||
background-color: #2B3062;
|
||
margin-top: 40rpx;
|
||
|
||
.top {
|
||
border-radius: 17rpx 17rpx 0px 0px;
|
||
height: 80rpx;
|
||
align-items: center;
|
||
background-color: #F7D8B2;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.left {
|
||
margin-left: 40rpx;
|
||
font-size: 26rpx;
|
||
color: #272727;
|
||
|
||
text {
|
||
margin-left: 20rpx;
|
||
font-size: 38rpx;
|
||
}
|
||
}
|
||
.actions{
|
||
margin-right: 40rpx;
|
||
width: 228rpx;
|
||
height: 50rpx;
|
||
background: #D8D8D8 linear-gradient(143deg, #EF6F5F 0%, #FB2636 100%);
|
||
border-radius: 25rpx;
|
||
font-size: 24rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
text{
|
||
position: relative;
|
||
padding:0 10rpx;
|
||
&:first-child::after{
|
||
content: '';
|
||
display: block;
|
||
position: absolute;
|
||
right: -2px;
|
||
top: 2px;
|
||
bottom: 2px;
|
||
width: 4rpx;
|
||
background-color: #FFFFFF;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.bottom{
|
||
height: 150rpx;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
line-height: 1;
|
||
.child{
|
||
color: #C4CBE4;
|
||
display: flex;
|
||
font-size: 22rpx;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
text{
|
||
&:last-child{
|
||
margin-top: 10rpx;
|
||
line-height: 50rpx;
|
||
color: #FFFFFF;
|
||
font-size: 36rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|