当前位置：首页 > news >正文

EP8 我的页面布局

news 来源：原创 2024/9/20 22:35:05

文件路径： E:/homework/uniappv3tswallpaper/pages/user/user.vue

<template><view class="userLayout"><view class="userInfo"><view class="avatar"><image src="../../common/images/preview1.jpg" mode="aspectFill"></image></view><view class="ip">100.100.100.100</view><view class="from">中国山东</view></view><view class="section"><view class="list" v-for="item in 3"><view class="row"><view class="left"><uni-icons type="download-filled" size="20" color="#28b389"></uni-icons><view class="text">我的下载</view></view><view class="right"><view class="text">33</view><uni-icons type="right" size="15" color="#aaa"></uni-icons></view></view></view></view><view class="section"><view class="list" v-for="item in 2"><view class="row"><view class="left"><uni-icons type="download-filled" size="20" color="#28b389"></uni-icons><view class="text">我的下载</view></view><view class="right"><view class="text">33</view><uni-icons type="right" size="15" color="#aaa"></uni-icons></view></view></view></view></view>
</template><script setup></script><style lang="scss" scoped>.userLayout {.userInfo {display: flex;flex-direction: column;flex-wrap: nowrap;align-content: center;justify-content: center;align-items: center;padding: 50rpx 0;.avatar {height: 160rpx;width: 160rpx;border-radius: 50%;overflow: hidden;image {height: 100%;width: 100%;}}.ip {font-size: 44rpx;color: #333;padding: 20rpx 0 5rpx;}.from {font-size: 28rpx;color: #aaa;}}}.section {width: 690rpx;margin: 50rpx auto;border: 1rpx solid #eee;border-radius: 10rpx;border-shadow: 0 0 30rpx rgba(0, 0, 0, 0.2);.list {.row {display: flex;flex-direction: row;flex-wrap: nowrap;align-content: center;justify-content: space-between;align-items: center;padding: 0 30rpx;height: 100rpx;border-bottom: 1px solid #eee;:last-child {border-bottom: 0;}.left {display: flex;flex-direction: row;flex-wrap: nowrap;align-content: center;align-items: center;.text {padding-left: 20rpx;color: #666}}.right {display: flex;flex-direction: row;flex-wrap: nowrap;align-content: center;align-items: center;.text {padding-left: 20rpx;color: #666}}}}}
</style>