1. Toy模板网首页
  2. > Toy博客

万能的微信小程序个人主页：商城系统个人主页、外卖系统个人主页、购票系统个人主页等等【全部源代码分享+页面效果展示+直接复制粘贴编译即可】

9月前 作者：Mr.Aholic 分类：Toy博客 阅读(66) 违法举报

这篇具有很好参考价值的文章主要介绍了万能的微信小程序个人主页：商城系统个人主页、外卖系统个人主页、购票系统个人主页等等【全部源代码分享+页面效果展示+直接复制粘贴编译即可】。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前言

        以下给出来四个常见的小程序个人主页，分别是商城系统个人主页，外卖系统个人主页，挂号系统个人主页，电影购票系统个人主页。包括完整的页面布局代码，完整的样式代码。使用的时候，只需要将页面代码和样式代码复制到自己项目对应的页面即可。而且可以根据已有代码只需稍微改造，便可以作为其他小程序的个人首页。

1、个人主页（商城系统）

1.1 页面效果

万能的微信小程序个人主页：商城系统个人主页、外卖系统个人主页、购票系统个人主页等等【全部源代码分享+页面效果展示+直接复制粘贴编译即可】

1.2 页面源码（.wxml）

这里的图片地址，修改为自己项目图片地址。也可以引入在线图片链接

<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>

1.3 样式代码 （.wxss）

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"
}

2、个人主页（外卖系统）

2.1 页面效果

万能的微信小程序个人主页：商城系统个人主页、外卖系统个人主页、购票系统个人主页等等【全部源代码分享+页面效果展示+直接复制粘贴编译即可】

2.2 页面源码（.wxml）

<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>

2.3 样式代码 （.wxss）


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;
}

3、个人主页（医疗挂号）

3.1 页面效果

万能的微信小程序个人主页：商城系统个人主页、外卖系统个人主页、购票系统个人主页等等【全部源代码分享+页面效果展示+直接复制粘贴编译即可】

3.2 页面源码（.wxml）

<!-- 用户列表选项 -->
<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>

3.3 样式代码 （.wxss）

/* 用户列表选项样式 */
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;
}

4、个人主页（电影购票系统）

4.1 页面效果

万能的微信小程序个人主页：商城系统个人主页、外卖系统个人主页、购票系统个人主页等等【全部源代码分享+页面效果展示+直接复制粘贴编译即可】文章来源地址https://www.toymoban.com/news/detail-515439.html

4.2 页面源码（.wxml）

<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>

4.3 样式代码 （.wxss）


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;
}

到了这里，关于万能的微信小程序个人主页：商城系统个人主页、外卖系统个人主页、购票系统个人主页等等【全部源代码分享+页面效果展示+直接复制粘贴编译即可】的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • 23.实战演练--个人主页

    23.实战演练--个人主页

    2024年01月19日
    浏览(54)

  • 制作github个人主页

    github创建一个项目命名为.github.io git clone一个他人的主页作为模板 按情况修改readme.md, index.html中名字，邮箱，github,google scholor 如果您创建的 .github.io 仓库的 部分与您的 GitHub 用户名不一样，您需要通过 GitHub Pages 设置来指定要使用的用户名。以下是具体的步骤： 进入 .github

    2024年01月25日
    浏览(55)
  • html实现好看的个人介绍，个人主页模板3(附源码)

    html实现好看的个人介绍，个人主页模板3(附源码)

    作者：xcLeigh 文章地址：https://blog.csdn.net/weixin_43151418/article/details/131263195 html实现好看的个人介绍，个人主页模板3(附源码) ，第三种风格，html源码下载，响应式布局，动态展示数据效果，界面整洁，布局清晰。 代码备注详细，可在此基础上更加完善功能，打造属于自己的个人

    2024年02月10日
    浏览(88)
  • html实现好看的个人介绍，个人主页模板5(附源码)

    html实现好看的个人介绍，个人主页模板5(附源码)

    作者：xcLeigh 文章地址：https://blog.csdn.net/weixin_43151418/article/details/131273315 html实现好看的个人介绍，个人主页模板5(附源码) ，第五种风格，html源码下载，响应式布局，动态展示数据效果，界面整洁，布局清晰。 代码备注详细，可在此基础上更加完善功能，打造属于自己的个人

    2024年02月09日
    浏览(84)
  • html网页设计小作业(个人主页)

    html网页设计小作业(个人主页)

    目录 作品介绍： 效果展示 代码部分： 简易的个人网页小作业，只用了html+css 布局制作，没啥好说的，直接上图！！！ Home 页面：  About页面：    Hobbies页面： Home界面: About页面：  Hobbies页面： oKK，就这么多啦。。

    2024年02月11日
    浏览(53)
  • [Android Studio] 个人主页界面的实现

    [Android Studio] 个人主页界面的实现

    目录 接上篇：底部导航栏的实现 1.个人主页界面的设计：fragment_blank.xml 2.个人主页功能的实现类:BlankFragment.java 3.每日签到功能的实现 4.实现效果 5.图片素材  补充说明：注意配置AndroidManifest.xml文件 自定义弹窗布局文件：pop_up_signup.xml，用于显示签到成功 累计签到的天数，采

    2024年01月19日
    浏览(95)
  • 基于github制作个人学术网站（主页）

    基于github制作个人学术网站（主页）

    首先找到一个学术模板，fork到远程仓库。academicpages，如果不是很清楚具体的步骤，可以参考保姆级教程。在github上对该网站代码修改不是很方便，肯定是在本地进行更新后push到远程仓库。 学会下载和安装就行，一路默认，可以先学习一下Git相关的原理及基础操作，可以参考

    2024年02月15日
    浏览(56)

  • 抖音web版地址个人主页和视频地址

    https://www.douyin.com/user/MS4wLjABAAAAfLsItSD2WiJrsji1g_iZv-it6W2CcvBFkdUwMjTeSD4 MS4wLjABAAAAfLsItSD2WiJrsji1g_iZv-it6W2CcvBFkdUwMjTeSD4 是 sec_uid。 https://v.douyin.com/h17aA6H https://www.iesdouyin.com/share/user/MS4wLjABAAAAfLsItSD2WiJrsji1g_iZv-it6W2CcvBFkdUwMjTeSD4 MS4wLjABAAAAfLsItSD2WiJrsji1g_iZv-it6W2CcvBFkdUwMjTeSD4 是 sec_uid。 下面的写法

    2024年04月27日
    浏览(51)
  • 详细讲解如何在github上编辑个人主页?

    详细讲解如何在github上编辑个人主页?

     在 GitHub 上编辑个人主页可以让您展示您的项目、技能和个人信息，以及与其他开发者互动。以下是详细的步骤来在 GitHub 上编辑个人主页： 如果您还没有 GitHub 账户，首先需要注册一个。 使用您的用户名和密码登录到 GitHub。 您需要创建一个特殊的仓库，仓库名必须是 用户

    2024年02月13日
    浏览(41)
  • 【Vercel】教你部署imsyy/home个人主页

    【Vercel】教你部署imsyy/home个人主页

    本篇博客教你如何部署一个自己的个人主页 项目地址：https://github.com/imsyy/home 本文首发于 慕雪的寒舍 首先我们点击fork，将仓库复刻到自己的账户 随后进入vercel，点击 dashboard-add new-project 选择你复刻的仓库 然后什么都不用改，直接deploy 等待部署成功，点击domains，在这里添

    2024年02月07日
    浏览(117)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包