|
|
@@ -1,55 +1,65 @@
|
|
|
<template>
|
|
|
<!-- 首页 -->
|
|
|
<view class="page">
|
|
|
- <image class="topBanner" src="../../static/index/topBanner.png" mode="scaleToFill"></image>
|
|
|
- <view class="content-list">
|
|
|
- <view class="item">
|
|
|
- <view class="flex item-user">
|
|
|
- <view class="item-left-user flex">
|
|
|
- <view class="user-pic">
|
|
|
-
|
|
|
- </view>
|
|
|
+ <image class="topBanner" src="../../static/index/topBanner.png" mode="scaleToFill"></image>
|
|
|
+ <view class="content-list">
|
|
|
+ <view class="item">
|
|
|
+ <view class="flex item-user">
|
|
|
+ <view class="item-left-user flex">
|
|
|
+ <view class="user-pic">
|
|
|
+ <image class="user-img" src="../../static/img/new.png" mode="scaleToFill"></image>
|
|
|
+ </view>
|
|
|
<view class="user-name-box">
|
|
|
<view class="user-name">
|
|
|
-
|
|
|
+ 哈哈哈
|
|
|
</view>
|
|
|
<view class="user-money flex">
|
|
|
<view class="tipImg">
|
|
|
-
|
|
|
+ <image class="vipTip" src="../../static/index/icon01.png" mode="scaleToFill">
|
|
|
+ </image>
|
|
|
</view>
|
|
|
- <view class="mongy">
|
|
|
-
|
|
|
+ <view class="money">
|
|
|
+ 3123123123
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
+ </view>
|
|
|
<view class="item-rigt-user">
|
|
|
-
|
|
|
+ <image class="item-right-vip" src="../../static/index/vip.png" mode="scaleToFill"></image>
|
|
|
</view>
|
|
|
- </view>
|
|
|
+ </view>
|
|
|
<view class="item-user-model flex">
|
|
|
<view class="model">
|
|
|
-
|
|
|
+ <image class="model-image model1" src="../../static/index/model1.png" mode="scaleToFill"></image>
|
|
|
+ <view class="model-name">
|
|
|
+ 能量
|
|
|
+ </view>
|
|
|
</view>
|
|
|
<view class="model">
|
|
|
-
|
|
|
+ <image class="model-image model2" src="../../static/index/model2.png" mode="scaleToFill"></image>
|
|
|
+ <view class="model-name">
|
|
|
+ 飞船
|
|
|
+ </view>
|
|
|
</view>
|
|
|
<view class="model">
|
|
|
-
|
|
|
+ <image class="model-image model3" src="../../static/index/model3.png" mode="scaleToFill"></image>
|
|
|
+ <view class="model-name">
|
|
|
+ 好友
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
-
|
|
|
- <view class="flex">
|
|
|
+
|
|
|
+ <view class="flex function-type">
|
|
|
<view class="function-block">
|
|
|
-
|
|
|
+ <image class="type1" src="../../static/index/type2.png" mode=""></image>
|
|
|
</view>
|
|
|
<view class="function-block">
|
|
|
-
|
|
|
+ <image class="type2" src="../../static/index/type1.png" mode=""></image>
|
|
|
</view>
|
|
|
</view>
|
|
|
-
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
@@ -57,25 +67,119 @@
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
-
|
|
|
+
|
|
|
};
|
|
|
},
|
|
|
onLoad(options) {
|
|
|
-
|
|
|
+
|
|
|
},
|
|
|
onShow() {},
|
|
|
methods: {
|
|
|
-
|
|
|
+
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="scss">
|
|
|
- .page{
|
|
|
- background-image:linear-gradient(#5d34ff,#e0d8ff) ;
|
|
|
- min-height: 100vh;
|
|
|
+ .page {
|
|
|
+ background-image: linear-gradient(#5d34ff, #e0d8ff);
|
|
|
+ min-height: calc(100vh - var(--window-bottom));
|
|
|
}
|
|
|
- .topBanner{
|
|
|
+
|
|
|
+ .topBanner {
|
|
|
width: 750rpx;
|
|
|
height: 900rpx;
|
|
|
}
|
|
|
-</style>
|
|
|
+
|
|
|
+ .content-list {
|
|
|
+ padding: 20rpx 30rpx ;
|
|
|
+ background-color: #FFF;
|
|
|
+ border-radius: 30rpx;
|
|
|
+ margin: 0 30rpx;
|
|
|
+ margin-top: 50rpx;
|
|
|
+ line-height: 1;
|
|
|
+ padding-bottom: 50rpx;
|
|
|
+ .item{
|
|
|
+ .item-left-user{
|
|
|
+ align-items: flex-start;
|
|
|
+ .user-name-box {
|
|
|
+ padding-left: 10rpx;
|
|
|
+ .user-money{
|
|
|
+ .money{
|
|
|
+ padding-left: 10rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #222222;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .vipTip {
|
|
|
+ width: 36rpx;
|
|
|
+ height: 29rpx;
|
|
|
+ }
|
|
|
+ .user-name {
|
|
|
+ font-weight: 800;
|
|
|
+ font-size: 27rpx;
|
|
|
+ color: #222222;
|
|
|
+ padding-bottom: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ .user-pic{
|
|
|
+ overflow: hidden;
|
|
|
+ border-radius: 100rpx;
|
|
|
+ width: 60rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ .user-img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .item-rigt-user{
|
|
|
+ .item-right-vip{
|
|
|
+ width: 210rpx;
|
|
|
+ height: 95rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .item-user-model{
|
|
|
+ padding-top: 30rpx;
|
|
|
+ .model{
|
|
|
+ .model-name{
|
|
|
+ padding-top: 30rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 23rpx;
|
|
|
+ color: #222222;
|
|
|
+ }
|
|
|
+ .model1{
|
|
|
+ width: 121rpx;
|
|
|
+ height: 131rpx;
|
|
|
+ }
|
|
|
+ .model2{
|
|
|
+ width: 121rpx;
|
|
|
+ height: 116rpx;
|
|
|
+ }
|
|
|
+ .model3{
|
|
|
+ width: 145rpx;
|
|
|
+ height: 122rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .function-type{
|
|
|
+ align-items: flex-end;
|
|
|
+ margin-top: 30rpx;
|
|
|
+ .function-block{
|
|
|
+ .type1{
|
|
|
+ width: 325rpx;
|
|
|
+ height: 130rpx;
|
|
|
+ margin-left: -10rpx;
|
|
|
+ }
|
|
|
+ .type2{
|
|
|
+ width: 321rpx;
|
|
|
+ height: 112rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|