.page{ position: absolute; width: 100%; // height: 100%; padding-bottom: 140rpx; background-color: #f6f6f6; } .my-top{ position: relative; width: 100%; // height: 420rpx; /* #ifdef APP-PLUS */ // height: 460rpx; /* #endif */ /* #ifdef MP */ // height: 520rpx; /* #endif */ // background: linear-gradient(to left,$base,$assist-clor); // background-color: #eaeaea; // border-radius: 0 0 50% 50% / 0% 0% 15% 15%; overflow: hidden; .head{ position: fixed; left: 0; top: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; width: 100%; height: 100rpx; /* #ifdef APP-PLUS */ height: calc(100rpx + var(--status-bar-height)); padding-top: var(--status-bar-height); /* #endif */ /* #ifdef MP */ height: calc(200rpx + var(--status-bar-height)); padding-top: calc(100rpx + var(--status-bar-height)); /* #endif */ background-color: rgba(255,255,255,0); // transition: all 1s; .portrait{ display: flex; width: 60rpx; height: 60rpx; margin-left: 20rpx; image{ width: 100%; height: 100%; border-radius: 100%; } } .title{ display: flex; align-items: center; text{ color: #212121; font-size: 28rpx; } } .setting-mess{ display: flex; align-items: center; height: 100%; margin-right: 20rpx; .setting{ display: flex; justify-content: center; align-items: center; width: 80rpx; height: 100%; text{ color: #FFFFFF; font-size: 38rpx; } } .mess{ display: flex; justify-content: center; align-items: center; width: 80rpx; height: 100%; text{ color: #FFFFFF; font-size: 38rpx; } } } } /* 用户信息 */ .user-info{ display: flex; align-items: center; padding: 0 5%; height: 120rpx; margin-top: 160rpx; /* #ifdef APP-PLUS */ margin-top: 130rpx; /* #endif */ /* #ifdef MP */ margin-top: 200rpx; /* #endif */ .portrait{ width: 120rpx; height: 120rpx; margin-right: 20rpx; box-sizing: border-box; position: relative; image{ width: 100%; height: 100%; border-radius: 100%; border: 4rpx solid #236030; box-sizing: border-box; } .right{ position: absolute; z-index:999; top:50%; right:0px; transform: translateY(-50%); } } .info{ display: flex; flex-direction: column; justify-content: center; width: 70%; height: 100%; .nickname{ width: 100%; padding: 10rpx 0; text{ color: #236030; font-weight: bold; font-size: 28rpx; } } } } /* 订单信息 */ .order-info{ display: flex; flex-direction: column; justify-content: space-around; height: 258rpx; border-radius: 16rpx; background-color: #FFFFFF; margin:0 10px; position:relative; background-image: url('../../static/image/order-bg.png'); background-size: cover; margin-top:30rpx; .shopTop{ margin:0 26rpx; padding:0 14rpx 14rpx 0; display: flex; align-items: center; justify-content: space-between; border-bottom:1px solid #eaeaea; .star{ display: flex; align-items: center; text{ font-size:28rpx; color:#ffffff; margin-left:10rpx; } } } .shopItem{ display: flex; align-items: center; justify-content: space-around; } .list{ display: flex; flex-direction: column; align-items: center; justify-content: center; width: 20%; height: 100%; .icon{ position: relative; display: flex; align-items: center; image{ height:66rpx; width:auto; } .num{ position: absolute; right: -20rpx; top: -20rpx; padding: 4rpx; font-size: 18rpx; color: $base; border: 2rpx solid $base; border-radius: 100%; background-color: #FFFFFF; } } .title{ display: flex; align-items: center; margin-top: 10rpx; text{ color: #ffffff; font-size: 24rpx; } } } } /* 关注区 */ .focus-area{ display: flex; align-items: center; width: 100%; height: 120rpx; .list{ display: flex; flex-direction: column; justify-content: center; align-items: center; width: 33%; height: 100%; .num{ display: flex; align-items: center; text{ color: #FFFFFF; font-size: 32rpx; font-weight: bold; } } .title{ display: flex; align-items: center; margin-top: 5rpx; text{ color: #FFFFFF; font-size: 24rpx; } } } } } /* 钱包 */ .wallet-info{ margin:0 10px; margin-top:20rpx; border-radius: 16rpx; background-color: #FFFFFF; height: 258rpx; border-radius: 20rpx; display: flex; flex-direction: column; justify-content: space-around; .fangmian{ margin:0 26rpx; padding:0 14rpx 14rpx 0; display: flex; align-items: center; justify-content: space-between; border-bottom:1px solid #eaeaea; color:#236030; font-size:28rpx; } .infoContainer{ display: flex; align-items: center; justify-content: space-around; } .list{ display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; height: 100%; .icon{ position: relative; display: flex; align-items: center; image{ height:66rpx; width:auto; } .number{ font-size: 28rpx; color: #212121; font-weight: bold; } } .title{ display: flex; align-items: center; margin-top: 10rpx; text{ color: #333333; font-size: 24rpx; } } } } .card{ margin:0 10px; margin-top:20rpx; border-radius: 16rpx; background-color: #FFFFFF; overflow: hidden; }