devbox
凡人多烦事01
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：凡人多烦事01 | 2024-04-18 18:45:53

赞

踩

微信小程序个人中心开源代码

前言

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

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
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69

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

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174

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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95

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

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186

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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72

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

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147

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

4.1 页面效果

在这里插入图片描述

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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56

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

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号