145 lines
2.9 KiB
Vue
145 lines
2.9 KiB
Vue
<template>
|
|
<view class="animate__animated animate__fadeInRight">
|
|
<!-- 数字资产 -->
|
|
<view class="property">
|
|
<view class="title">总资产(元)</view>
|
|
<view class="number">0.00</view>
|
|
</view>
|
|
<!-- 资产列表 -->
|
|
<view class="lists">
|
|
<view class="lists-header">
|
|
资产列表
|
|
<uni-icons type="plus" size="24" color="#009b69"></uni-icons>
|
|
</view>
|
|
<view class="item" v-for="(item, index) in 2" :key="index" @click="propertyInfo(item)">
|
|
<view class="cost">
|
|
<image class="logo" src="" mode="" />
|
|
<view class="title ellipsis">OC COIN</view>
|
|
<view class="text ellipsis">≈￥0.21</view>
|
|
</view>
|
|
<view class="balance">
|
|
<view class="title ellipsis">120,330.00</view>
|
|
<view class="text ellipsis">￥25269.3000</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
|
|
};
|
|
},
|
|
methods:{
|
|
propertyInfo(e){
|
|
console.log(e)
|
|
uni.navigateTo({
|
|
url: './property'
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|
|
|
|
<style lang="scss" scoped>
|
|
// 数字资产
|
|
.property{
|
|
overflow: hidden;
|
|
position: relative;
|
|
margin-top: $margin;
|
|
margin-left: $margin + ($margin / 2);
|
|
background-color: $mian-color;
|
|
border-radius: $radius 0 0 $radius;
|
|
padding: ($padding * 3) ($padding * 3) ($padding * 3) ($padding * 2);
|
|
color: white;
|
|
font-weight: bold;
|
|
&::before,&::after{
|
|
background-color: rgba($color: $red-color, $alpha: .03);
|
|
border-radius: 50%;
|
|
content: " ";
|
|
position: absolute;
|
|
}
|
|
&::before{
|
|
top: -300rpx;
|
|
left: 40%;
|
|
height: 400rpx;
|
|
width: 400rpx;
|
|
}
|
|
&::after{
|
|
bottom: -200rpx;
|
|
left: -100rpx;
|
|
height: 300rpx;
|
|
width: 300rpx;
|
|
}
|
|
.title{
|
|
font-size: $title-size;
|
|
}
|
|
.number{
|
|
font-size: $title-size + 18;
|
|
}
|
|
}
|
|
// 资产列表
|
|
.lists{
|
|
padding: $margin + ($margin / 2);
|
|
.lists-header{
|
|
display: flex;
|
|
font-size: $title-size + 2;
|
|
color: $text-color;
|
|
font-weight: bold;
|
|
padding: $padding 0 ($padding/2) 0;
|
|
justify-content: space-between;
|
|
justify-items: center;
|
|
align-items: center;
|
|
}
|
|
.item{
|
|
background-color: white;
|
|
border-radius: $radius;
|
|
box-shadow: 0 0 4rpx 4rpx rgba($color: #000000, $alpha: .02);
|
|
margin-top: $margin;
|
|
padding: $padding * 2;
|
|
display: flex;
|
|
&:first-child{
|
|
margin-top: 0;
|
|
}
|
|
.cost{
|
|
position: relative;
|
|
margin-right: $margin;
|
|
padding-left: 108rpx;
|
|
width: 50%;
|
|
box-sizing: border-box;
|
|
.logo{
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 88rpx;
|
|
height: 88rpx;
|
|
border-radius: 50%;
|
|
background-color: $border-color;
|
|
margin-right: $margin;
|
|
}
|
|
}
|
|
.balance{
|
|
padding-left: $padding;
|
|
width: 50%;
|
|
text-align: right;
|
|
box-sizing: border-box;
|
|
}
|
|
.title{
|
|
font-weight: bold;
|
|
font-size: $title-size;
|
|
}
|
|
.text{
|
|
font-size: $title-size-m;
|
|
color: $text-gray;
|
|
}
|
|
}
|
|
}
|
|
</style>
|