赞
踩
以下给出来四个常见的小程序个人主页,分别是商城系统个人主页,外卖系统个人主页,挂号系统个人主页,电影购票系统个人主页。包括完整的页面布局代码,完整的样式代码。使用的时候,只需要将页面代码和样式代码复制到自己项目对应的页面即可。而且可以根据已有代码只需稍微改造,便可以作为其他小程序的个人首页。
这里的图片地址,修改为自己项目图片地址。也可以引入在线图片链接
<view class="user_info_wrap"> <view class="user_img_wrap"> <image class="user_bg" src="/images/back01.jpg" /> <view class="user_info"> <image class="user_icon" src="/images/touxiang01.jpg" /> <view class="user_name">张三牛人</view> </view> </view> </view> <view class="user_content"> <view class="user_main"> <!-- 历史足迹 --> <view class="history_wrap"> <navigator> <view class="his_num">0</view> <view class="his_name">收藏的店铺</view> </navigator> <navigator url="/pages/collect/index"> <view class="his_num">0</view> <view class="his_name">收藏的商品</view> </navigator> <navigator> <view class="his_num">0</view> <view class="his_name">关注的商品</view> </navigator> <navigator> <view class="his_num">0</view> <view class="his_name">我的足迹</view> </navigator> </view> <!-- 我的订单 --> <view class="orders-wrap"> <view class="orders_title">我的订单</view> <view class="order_content"> <navigator url="/pages/order/index?type=1"> <view class="iconfont icon-ding_dan"></view> <view class="order_name">全部订单</view> </navigator> <navigator url="/pages/order/index?type=2"> <view class="iconfont icon-fukuantongzhi"></view> <view class="order_name">待付款</view> </navigator> <navigator url="/pages/order/index?type=3"> <view class="iconfont icon-receipt-address"></view> <view class="order_name">待收获</view> </navigator> <navigator> <view class="iconfont icon-tuihuo"></view> <view class="order_name">退货/退货</view> </navigator> </view> </view> <!-- 收货地址 --> <view class="address_wrap">收获地址管理</view> <!-- 应用信息相关 --> <view class="app_info_wrap"> <view class="app_info_item app_info_contact"> <text>联系客服</text> <text>18348392981</text> </view> <navigator url="/pages/feedback/index" class="app_info_item" >意见反馈</navigator> <view class="app_info_item">关于我们</view> </view> <!-- 推荐 --> <view class="recommend_wrap">把应用推荐给其他人</view> </view> </view>
page { background-color: #ccc; } .user_info_wrap { height: 45vh; overflow: hidden; background-color: var(--themeColor); position: relative; } .user_info_wrap .user_img_wrap { position: relative; } .user_info_wrap .user_img_wrap .user_bg { height: 50vh; text-align: center; /* filter: blur(10rpx); */ } .user_info_wrap .user_img_wrap .user_info { position: absolute; left: 50%; transform: translateX(-50%); top: 20%; text-align: center; } .user_info_wrap .user_img_wrap .user_info .user_icon { width: 150rpx; height: 150rpx; border-radius: 50%; } .user_info_wrap .user_img_wrap .user_info .user_name { color: #fff; margin-top: 40rpx; font-size: 40rpx; } .user_info_wrap .user_btn { position: absolute; left: 50%; transform: translateX(-50%); top: 40%; border: 1rpx solid greenyellow; color: greenyellow; font-size: 38rpx; padding: 30rpx; border-radius: 10rpx; } .user_content { position: relative; } .user_content .user_main { padding-bottom: 90rpx; color: #666; position: absolute; width: 90%; left: 50%; transform: translateX(-50%); top: -40rpx; } .user_content .user_main .history_wrap { background-color: #fff; display: flex; } .user_content .user_main .history_wrap navigator { flex: 1; text-align: center; padding: 10rpx 0; } .user_content .user_main .history_wrap navigator .his_num { color: var(--themeColor); } .user_content .user_main .orders-wrap { background-color: #fff; margin-top: 30rpx; } .user_content .user_main .orders-wrap .orders_title { padding: 20rpx; border-bottom: 1rpx solid #ccc; } .user_content .user_main .orders-wrap .order_content { display: flex; } .user_content .user_main .orders-wrap navigator { padding: 15rpx 0; flex: 1; text-align: center; } .user_content .user_main .orders-wrap navigator .iconfont { color: var(--themeColor); font-size: 40rpx; } .user_content .user_main .address_wrap { margin-top: 30rpx; background-color: #fff; padding: 20rpx; } .user_content .user_main .app_info_wrap { margin-top: 30rpx; background-color: #fff; } .user_content .user_main .app_info_wrap .app_info_item { padding: 20rpx; border-bottom: 1rpx solid #ccc; } .user_content .user_main .app_info_wrap .app_info_contact { display: flex; justify-content: space-between; } .user_content .user_main .recommend_wrap { margin-top: 30rpx; background-color: #fff; padding: 20rpx; } @font-face { font-family: "iconfont"; /* Project id 4135149 */ src: url('//at.alicdn.com/t/c/font_4135149_lsktbsemkwh.woff2?t=1687535938174') format('woff2'), url('//at.alicdn.com/t/c/font_4135149_lsktbsemkwh.woff?t=1687535938174') format('woff'), url('//at.alicdn.com/t/c/font_4135149_lsktbsemkwh.ttf?t=1687535938174') format('truetype'); } .iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-fenxiang:before { content: "\e600"; } .icon-shoucang:before { content: "\e602"; } .icon-receipt-address:before { content: "\e673"; } .icon-shoucang1:before { content: "\e636"; } .icon-kefu:before { content: "\e625"; } .icon-fukuantongzhi:before { content: "\e60c"; } .tuikuantuihuo:before { content: "\e603"; } .icon-ding_dan:before { content: "\e61b"; } .icon-jinqian:before { content: "\e652"; } .icon-gouwuchekong:before { content: "\e601"; } .icon-gouwuche:before { content: "\e601" } .icon-tuihuo:before{ content: "\e601" }
<scroll-view class='scbg' scroll-y='true'> <view class="parent_catainer"> <!-- 头部 --> <view class="container_head"> <image class="head_img" src="/images/waimai01.jpg"></image> <view class="head_pers_info" bindtap="head_pers_info"> <view class="head_pic"> <image class="head_pic_content" mode="aspectFit" src="/images/waimai.jpg"></image> </view> <view class="inf_content"> <text class="user_info">张麻子</text> <text class="family_info_ct_phone">联系电话:1832437281</text> </view> </view> </view> <!-- 我的钱包 --> <view class="orders-wrap"> <view class="orders_title">我的订单</view> <view class="order_content"> <navigator url="/pages/order/index?type=1"> <view class="iconfont icon-ding_dan">10.4万</view> <view class="order_name">借钱</view> </navigator> <navigator url="/pages/order/index?type=2"> <view class="iconfont icon-fukuantongzhi">100.34元</view> <view class="order_name">我的账单</view> </navigator> <navigator url="/pages/order/index?type=3"> <view class="iconfont icon-receipt-address">6月</view> <view class="order_name">消费账单</view> </navigator> <navigator> <view class="iconfont icon-tuihuo">1.66元</view> <view class="order_name">查看卡额度</view> </navigator> </view> </view> <view class="userItemListView"> <view class="my_priview_md" bindtap="myappointpage"> <text>我的米粒</text> <view class="arrow"></view> </view> <view class="my_priview_md" bindtap="openmyorder"> <image class="my_priview" src="/images/mine_fiend.png"></image> <text>美团红包</text> <view class="arrow"></view> </view> <view class="my_priview_md" bindtap="myaid"> <image class="my_priview" src="/images/mine_fiend.png"></image> <text>商家代金券</text> <view class="arrow"></view> </view> <view class="my_priview_md" bindtap="myfriend"> <image class="my_priview" src="/images/mine_fiend.png"></image> <text>拼好饭代金券</text> <view class="arrow"></view> </view> <view class="my_priview_md" bindtap="mycollection"> <image class="my_priview" src="/images/mine_fiend.png"></image> <text>我的收藏</text> <view class="arrow"></view> </view> <view class="my_priview_md" bindtap="mycollection"> <image class="my_priview" src="/images/mine_fiend.png"></image> <text>我的评价</text> <view class="arrow"></view> </view> </view> <view class="userItemListView"> <view class="my_priview_md" bindtap="bind"> <image class="my_priview" src="/images/mine_fiend.png"></image> <text>个人资料</text> <view class="arrow"></view> </view> <view class="my_priview_md" bindtap="bind"> <image class="my_priview" src="/images/mine_fiend.png"></image> <text>我的地址</text> <view class="arrow"></view> </view> <view class="my_priview_md" bindtap="bind"> <image class="my_priview" src="/images/mine_fiend.png"></image> <text>修改手机号</text> <view class="arrow"></view> </view> </view> <view class="my_priview_logout" bindtap="bind"> 退出账号 </view> </view> </scroll-view>
page { width: 100%; height: 100%; background:#f0f0f0; } .parent_catainer{ background:#f0f0f0; } /* 头部背景图片 */ .container_head{ height: 370rpx; width: 100%; display: flex; justify-content: flex-end; align-items: flex-end; } .head_img { position: absolute; width: 100%; height: 370rpx; } .head_pers_info{ height: 200rpx; width: 100%; margin-bottom: 50rpx; justify-content: left; display: flex; align-items: center; flex-direction: row; position: absolute; } .head_pic{ width: 120rpx; height: 120rpx; border-radius: 60rpx; background-color: #08cbb0; color: #ffffff; align-items: center; display: flex; justify-content: center; } .head_pic_content{ position: absolute; width: 110rpx; height: 110rpx; border-radius: 55rpx; background-color: white; } .head_pic{ margin-left: 5%; } .inf_content{ display: flex; flex-direction: column; margin-left: 10rpx; align-items: flex-start; justify-content: center; color: #ffffff; padding-bottom: 5rpx; } .user_info{ text-align: left; font-size: 32rpx; font-weight: bold; margin-bottom: 8rpx; color: black; } .family_info_ct_phone{ text-align: center; justify-content: center; font-size: 28rpx; margin-bottom: 2rpx; font-weight: bold; color: black; } .family_info_ct{ text-align: center; justify-content: center; font-size: 28rpx; margin-bottom: 2rpx; width: 500rpx; overflow: hidden; white-space: nowrap; text-align: left; text-overflow: ellipsis; } .userItemListView{ background: #fff; padding: 0 0rpx; margin: 24rpx 0; } .userItemListView > view{ height: 94rpx; line-height: 94rpx; padding-left: 50rpx; border-bottom: 1rpx solid #F1F1F1; position: relative; } /* 移除最后一个元素的下边框 */ .userItemListView > view:last-child{ border: none; } .my_priview_md{ display: flex; align-items: center; } .my_priview{ width: 50rpx; height: 50rpx; margin-right: 10rpx; } .my_priview_logout{ /* margin-top: 10rpx; width: 50rpx; height: 50rpx; margin-right: 10rpx; */ text-align: center; margin-top: 30rpx; background-color: #fff; padding: 20rpx; } .arrow{ width: 16rpx; height: 16rpx; border-top: 4rpx solid #999; border-right: 4rpx solid #999; /* 旋转45度 */ transform: rotate(45deg); /* 调整位置 */ position: absolute; right: 30rpx; top: 38rpx; } .userItemListView text{ font-size: 30rpx; } .last_view{ background:#f0f0f0; width: 100%; height:1200rpx; } .orders-wrap { background-color: #fff; margin-top: 30rpx; } .orders-wrap .orders_title { padding: 20rpx; } .orders-wrap .order_content { display: flex; } .orders-wrap navigator { padding: 15rpx 0; flex: 1; text-align: center; } .orders-wrap navigator .iconfont { color: var(--themeColor); font-size: 25rpx; } .address_wrap { margin-top: 30rpx; background-color: #fff; padding: 20rpx; }
<!-- 用户列表选项 --> <scroll-view class='scbg' scroll-y='true'> <view class="parent_catainer"> <!-- 头部 --> <view class="container_head"> <image class="head_img" src="/images/back01.jpg"></image> <view class="head_pers_info" bindtap="head_pers_info"> <view class="head_pic"> <image class="head_pic_content" mode="aspectFit" src="/images/zhangmazi.jpg"></image> </view> <view class="inf_content"> <text class="user_info">张麻子</text> <text class="family_info_ct_phone">联系电话:1832437281</text> <text class="family_info_ct">关联账号:张老师 </text> </view> </view> </view> <view class="userItemListView"> <view class="my_priview_md" bindtap="myappointpage"> <image class="my_priview" src="/images/mine_fiend.png"></image> <text>我的预约</text> <view class="arrow"></view> </view> <view class="my_priview_md" bindtap="openmyorder"> <image class="my_priview" src="/images/mine_fiend.png"></image> <text>我的订单</text> <view class="arrow"></view> </view> <view class="my_priview_md" bindtap="myaid"> <image class="my_priview" src="/images/mine_fiend.png"></image> <text>我的帮助</text> <view class="arrow"></view> </view> <view class="my_priview_md" bindtap="myfriend"> <image class="my_priview" src="/images/mine_fiend.png"></image> <text>我的亲友</text> <view class="arrow"></view> </view> <view class="my_priview_md" bindtap="mycollection"> <image class="my_priview" src="/images/mine_fiend.png"></image> <text>我的收藏</text> <view class="arrow"></view> </view> </view> <view class="userItemListView"> <view class="my_priview_md" bindtap="bind"> <image class="my_priview" src="/images/mine_fiend.png"></image> <text>个人资料</text> <view class="arrow"></view> </view> <view class="my_priview_md" bindtap="updatepassword"> <image class="my_priview" src="/images/mine_fiend.png"></image> <text>修改密码</text> <view class="arrow"></view> </view> <view class="my_priview_md" bindtap="aboutus" hidden="true"> <image class="my_priview" src="/images/mine_fiend.png"></image> <text>关于我们</text> <view class="arrow"></view> </view> <view class="my_priview_md" bindtap="logout"> <image class="my_priview" src="/images/mine_fiend.png"></image> <text>退出登录</text> <view class="arrow"></view> </view> </view> <view class="last_view"></view> </view> </scroll-view>
/* 用户列表选项样式 */ page { width: 100%; height: 100%; background:#f0f0f0; } .parent_catainer{ background:#f0f0f0; } /* 头部背景图片 */ .container_head{ height: 370rpx; width: 100%; display: flex; justify-content: flex-end; align-items: flex-end; } .head_img { position: absolute; width: 100%; height: 370rpx; } .head_pers_info{ height: 200rpx; width: 100%; margin-bottom: 50rpx; justify-content: left; display: flex; align-items: center; flex-direction: row; position: absolute; } .head_pic{ width: 120rpx; height: 120rpx; border-radius: 60rpx; background-color: #08cbb0; color: #ffffff; align-items: center; display: flex; justify-content: center; } .head_pic_content{ position: absolute; width: 110rpx; height: 110rpx; border-radius: 55rpx; background-color: white; } .head_pic{ margin-left: 5%; } .inf_content{ display: flex; flex-direction: column; margin-left: 10rpx; align-items: flex-start; justify-content: center; color: #ffffff; padding-bottom: 5rpx; } .user_info{ text-align: left; font-size: 32rpx; font-weight: bold; margin-bottom: 8rpx; } .family_info_ct_phone{ text-align: center; justify-content: center; font-size: 28rpx; margin-bottom: 2rpx; } .family_info_ct{ text-align: center; justify-content: center; font-size: 28rpx; margin-bottom: 2rpx; width: 500rpx; overflow: hidden; white-space: nowrap; text-align: left; text-overflow: ellipsis; } .userItemListView{ background: #fff; padding: 0 0rpx; margin: 24rpx 0; } .userItemListView > view{ height: 94rpx; line-height: 94rpx; padding-left: 50rpx; border-bottom: 1rpx solid #F1F1F1; position: relative; } /* 移除最后一个元素的下边框 */ .userItemListView > view:last-child{ border: none; } .my_priview_md{ display: flex; align-items: center; } .my_priview{ width: 50rpx; height: 50rpx; margin-right: 10rpx; } .arrow{ width: 16rpx; height: 16rpx; border-top: 4rpx solid #999; border-right: 4rpx solid #999; /* 旋转45度 */ transform: rotate(45deg); /* 调整位置 */ position: absolute; right: 30rpx; top: 38rpx; } .userItemListView text{ font-size: 30rpx; } .last_view{ background:#f0f0f0; width: 100%; height:1200rpx; }
<scroll-view class='scbg' scroll-y='true'> <view class="parent_catainer"> <!-- 头部 --> <view class="container_head"> <image class="head_img" src="/images/back02.jpg"></image> <view class="head_pers_info" bindtap="head_pers_info"> <view class="head_pic"> <image class="head_pic_content" mode="aspectFit" src="/images/lisi.jpg"></image> </view> <view class="inf_content"> <text class="user_info">蛋糕酱</text> </view> </view> </view> <view class="userItemListView"> <view class="my_priview_md" bindtap="myappointpage"> <text>电影票</text> <text class="my_priview_right">点击查看已购电影票</text> </view> <view class="my_priview_md" bindtap="openmyorder"> <text>优惠券</text> <text class="my_priview_right">点击查看优惠券</text> </view> <view class="my_priview_md" bindtap="myaid"> <text>权益卡</text> <view class="arrow"></view> </view> <view class="my_priview_md" bindtap="myfriend"> <text>我的小食</text> <view class="arrow"></view> </view> <view class="my_priview_md" bindtap="mycollection"> <text>想看的电影</text> <view class="arrow"></view> </view> </view> <view class="userItemListView"> <view class="my_priview_md" bindtap="bind"> <text>个人资料</text> <view class="arrow"></view> </view> <view class="my_priview_md" bindtap="updatepassword"> <text>联系客服</text> <text class="my_priview_right">点击咨询票小密</text> </view> <view class="my_priview_md" bindtap="logout"> <text>退出登录</text> <view class="arrow"></view> </view> </view> <view class="last_view"></view> </view> </scroll-view>
page { width: 100%; height: 100%; background:#f0f0f0; } .parent_catainer{ background:#f0f0f0; } /* 头部背景图片 */ .container_head{ height: 370rpx; width: 100%; display: flex; justify-content: flex-end; align-items: flex-end; } .head_img { position: absolute; width: 100%; height: 370rpx; } .head_pers_info{ height: 200rpx; width: 100%; margin-bottom: 50rpx; justify-content: left; display: flex; align-items: center; flex-direction: row; position: absolute; } .head_pic{ width: 120rpx; height: 120rpx; border-radius: 60rpx; background-color: #08cbb0; color: #ffffff; align-items: center; display: flex; justify-content: center; } .head_pic_content{ position: absolute; width: 110rpx; height: 110rpx; border-radius: 55rpx; background-color: white; } .head_pic{ margin-left: 5%; } .inf_content{ display: flex; flex-direction: column; margin-left: 10rpx; align-items: flex-start; justify-content: center; color: #ffffff; padding-bottom: 5rpx; } .user_info{ text-align: left; font-size: 32rpx; font-weight: bold; margin-bottom: 8rpx; } .family_info_ct_phone{ text-align: center; justify-content: center; font-size: 28rpx; margin-bottom: 2rpx; } .family_info_ct{ text-align: center; justify-content: center; font-size: 28rpx; margin-bottom: 2rpx; width: 500rpx; overflow: hidden; white-space: nowrap; text-align: left; text-overflow: ellipsis; } .userItemListView{ background: #fff; padding: 0 0rpx; margin: 24rpx 0; } .userItemListView > view{ height: 94rpx; line-height: 94rpx; padding-left: 50rpx; border-bottom: 1rpx solid #F1F1F1; position: relative; } /* 移除最后一个元素的下边框 */ .userItemListView > view:last-child{ border: none; } .my_priview_md{ display: flex; align-items: center; justify-content: space-between; } .my_priview_right{ /* 调整位置 */ position: absolute; right: 30rpx; color: #ccc; } .my_priview{ width: 50rpx; height: 50rpx; margin-right: 10rpx; } .arrow{ width: 16rpx; height: 16rpx; border-top: 4rpx solid #999; border-right: 4rpx solid #999; /* 旋转45度 */ transform: rotate(45deg); /* 调整位置 */ position: absolute; right: 30rpx; top: 38rpx; } .userItemListView text{ font-size: 30rpx; } .last_view{ background:#f0f0f0; width: 100%; height:1200rpx; }
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。