国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

  1. Toy模板網(wǎng)首頁
  2. >Toy博客

萬能的微信小程序個人主頁：商城系統(tǒng)個人主頁、外賣系統(tǒng)個人主頁、購票系統(tǒng)個人主頁等等【全部源代碼分享+頁面效果展示+直接復(fù)制粘貼編譯即可】

2年前作者：Mr.Aholic分類：Toy博客閱讀(32)違法舉報

這篇具有很好參考價值的文章主要介紹了萬能的微信小程序個人主頁：商城系統(tǒng)個人主頁、外賣系統(tǒng)個人主頁、購票系統(tǒng)個人主頁等等【全部源代碼分享+頁面效果展示+直接復(fù)制粘貼編譯即可】。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點(diǎn)擊"舉報違法"按鈕提交疑問。

前言

????????以下給出來四個常見的小程序個人主頁，分別是商城系統(tǒng)個人主頁，外賣系統(tǒng)個人主頁，掛號系統(tǒng)個人主頁，電影購票系統(tǒng)個人主頁。包括完整的頁面布局代碼，完整的樣式代碼。使用的時候，只需要將頁面代碼和樣式代碼復(fù)制到自己項目對應(yīng)的頁面即可。而且可以根據(jù)已有代碼只需稍微改造，便可以作為其他小程序的個人首頁。

1、個人主頁（商城系統(tǒng)）

1.1 頁面效果

萬能的微信小程序個人主頁：商城系統(tǒng)個人主頁、外賣系統(tǒng)個人主頁、購票系統(tǒng)個人主頁等等【全部源代碼分享+頁面效果展示+直接復(fù)制粘貼編譯即可】

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">關(guān)注的商品</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>
        <!-- 應(yīng)用信息相關(guān) -->
        <view class="app_info_wrap">
            <view class="app_info_item app_info_contact">
                <text>聯(lián)系客服</text>
                <text>18348392981</text>
            </view>
            <navigator url="/pages/feedback/index" class="app_info_item" >意見反饋</navigator>
            <view class="app_info_item">關(guān)于我們</view>
        </view>
        <!-- 推薦 -->
        <view class="recommend_wrap">把應(yīng)用推薦給其他人</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、個人主頁（外賣系統(tǒng)）

2.1 頁面效果

萬能的微信小程序個人主頁：商城系統(tǒng)個人主頁、外賣系統(tǒng)個人主頁、購票系統(tǒng)個人主頁等等【全部源代碼分享+頁面效果展示+直接復(fù)制粘貼編譯即可】

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">聯(lián)系電話：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">消費(fèi)賬單</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>美團(tuán)紅包</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>修改手機(jī)號</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;
  /* 旋轉(zhuǎn)45度 */
  transform: rotate(45deg);
  /* 調(diào)整位置 */
  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、個人主頁（醫(yī)療掛號）

3.1 頁面效果

萬能的微信小程序個人主頁：商城系統(tǒng)個人主頁、外賣系統(tǒng)個人主頁、購票系統(tǒng)個人主頁等等【全部源代碼分享+頁面效果展示+直接復(fù)制粘貼編譯即可】

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">聯(lián)系電話：1832437281</text>
          <text class="family_info_ct">關(guān)聯(lián)賬號：張老師  </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>我的預(yù)約</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>關(guān)于我們</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;
  /* 旋轉(zhuǎn)45度 */
  transform: rotate(45deg);
  /* 調(diào)整位置 */
  position: absolute;
  right: 30rpx;
  top: 38rpx;
}
 
.userItemListView text{
  font-size: 30rpx;
}
 
.last_view{
   background:#f0f0f0;
   width: 100%;
   height:1200rpx;
}

4、個人主頁（電影購票系統(tǒng)）

4.1 頁面效果

萬能的微信小程序個人主頁：商城系統(tǒng)個人主頁、外賣系統(tǒng)個人主頁、購票系統(tǒng)個人主頁等等【全部源代碼分享+頁面效果展示+直接復(fù)制粘貼編譯即可】文章來源地址http://www.zghlxwxcb.cn/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">點(diǎn)擊查看已購電影票</text>
      </view>
      <view class="my_priview_md" bindtap="openmyorder">
        <text>優(yōu)惠券</text>
				<text class="my_priview_right">點(diǎn)擊查看優(yōu)惠券</text>
      </view>
      <view class="my_priview_md" bindtap="myaid">
        <text>權(quán)益卡</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>聯(lián)系客服</text>
        <text class="my_priview_right">點(diǎn)擊咨詢票小密</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{
	  /* 調(diào)整位置 */
		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;
  /* 旋轉(zhuǎn)45度 */
  transform: rotate(45deg);
  /* 調(diào)整位置 */
  position: absolute;
  right: 30rpx;
  top: 38rpx;
}
 
.userItemListView text{
  font-size: 30rpx;
}
 
.last_view{
   background:#f0f0f0;
   width: 100%;
   height:1200rpx;
}

到了這里，關(guān)于萬能的微信小程序個人主頁：商城系統(tǒng)個人主頁、外賣系統(tǒng)個人主頁、購票系統(tǒng)個人主頁等等【全部源代碼分享+頁面效果展示+直接復(fù)制粘貼編譯即可】的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來自互聯(lián)網(wǎng)用戶投稿，該文觀點(diǎn)僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載，請注明出處： 如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符，請點(diǎn)擊違法舉報進(jìn)行投訴反饋，一經(jīng)查實(shí)，立即刪除！

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

相關(guān)文章

  • 制作github個人主頁

    github創(chuàng)建一個項目命名為.github.io git clone一個他人的主頁作為模板 按情況修改readme.md, index.html中名字，郵箱，github,google scholor 如果您創(chuàng)建的 .github.io 倉庫的 部分與您的 GitHub 用戶名不一樣，您需要通過 GitHub Pages 設(shè)置來指定要使用的用戶名。以下是具體的步驟： 進(jìn)入 .github

    2024年01月25日
    瀏覽(32)
  • 23.實(shí)戰(zhàn)演練--個人主頁

    23.實(shí)戰(zhàn)演練--個人主頁

    2024年01月19日
    瀏覽(33)
  • html實(shí)現(xiàn)好看的個人介紹，個人主頁模板5(附源碼)

    html實(shí)現(xiàn)好看的個人介紹，個人主頁模板5(附源碼)

    作者：xcLeigh 文章地址：https://blog.csdn.net/weixin_43151418/article/details/131273315 html實(shí)現(xiàn)好看的個人介紹，個人主頁模板5(附源碼) ，第五種風(fēng)格，html源碼下載，響應(yīng)式布局，動態(tài)展示數(shù)據(jù)效果，界面整潔，布局清晰。 代碼備注詳細(xì)，可在此基礎(chǔ)上更加完善功能，打造屬于自己的個人

    2024年02月09日
    瀏覽(33)
  • html實(shí)現(xiàn)好看的個人介紹，個人主頁模板3(附源碼)

    html實(shí)現(xiàn)好看的個人介紹，個人主頁模板3(附源碼)

    作者：xcLeigh 文章地址：https://blog.csdn.net/weixin_43151418/article/details/131263195 html實(shí)現(xiàn)好看的個人介紹，個人主頁模板3(附源碼) ，第三種風(fēng)格，html源碼下載，響應(yīng)式布局，動態(tài)展示數(shù)據(jù)效果，界面整潔，布局清晰。 代碼備注詳細(xì)，可在此基礎(chǔ)上更加完善功能，打造屬于自己的個人

    2024年02月10日
    瀏覽(27)
  • html網(wǎng)頁設(shè)計小作業(yè)(個人主頁)

    html網(wǎng)頁設(shè)計小作業(yè)(個人主頁)

    目錄 作品介紹： 效果展示 代碼部分： 簡易的個人網(wǎng)頁小作業(yè)，只用了html+css 布局制作，沒啥好說的，直接上圖?。?！ Home 頁面： ?About頁面： ? ?Hobbies頁面： Home界面: About頁面： ?Hobbies頁面： oKK，就這么多啦。。

    2024年02月11日
    瀏覽(27)
  • [Android Studio] 個人主頁界面的實(shí)現(xiàn)

    [Android Studio] 個人主頁界面的實(shí)現(xiàn)

    目錄 接上篇：底部導(dǎo)航欄的實(shí)現(xiàn) 1.個人主頁界面的設(shè)計：fragment_blank.xml 2.個人主頁功能的實(shí)現(xiàn)類:BlankFragment.java 3.每日簽到功能的實(shí)現(xiàn) 4.實(shí)現(xiàn)效果 5.圖片素材 ?補(bǔ)充說明：注意配置AndroidManifest.xml文件 自定義彈窗布局文件：pop_up_signup.xml，用于顯示簽到成功 累計簽到的天數(shù)，采

    2024年01月19日
    瀏覽(106)
  • 基于github制作個人學(xué)術(shù)網(wǎng)站（主頁）

    基于github制作個人學(xué)術(shù)網(wǎng)站（主頁）

    首先找到一個學(xué)術(shù)模板，fork到遠(yuǎn)程倉庫。academicpages，如果不是很清楚具體的步驟，可以參考保姆級教程。在github上對該網(wǎng)站代碼修改不是很方便，肯定是在本地進(jìn)行更新后push到遠(yuǎn)程倉庫。 學(xué)會下載和安裝就行，一路默認(rèn)，可以先學(xué)習(xí)一下Git相關(guān)的原理及基礎(chǔ)操作，可以參考

    2024年02月15日
    瀏覽(68)
  • 詳細(xì)講解如何在github上編輯個人主頁?

    詳細(xì)講解如何在github上編輯個人主頁?

    ?在 GitHub 上編輯個人主頁可以讓您展示您的項目、技能和個人信息，以及與其他開發(fā)者互動。以下是詳細(xì)的步驟來在 GitHub 上編輯個人主頁： 如果您還沒有 GitHub 賬戶，首先需要注冊一個。 使用您的用戶名和密碼登錄到 GitHub。 您需要創(chuàng)建一個特殊的倉庫，倉庫名必須是 用戶

    2024年02月13日
    瀏覽(27)

  • 抖音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日
    瀏覽(27)
  • 【Vercel】教你部署imsyy/home個人主頁

    【Vercel】教你部署imsyy/home個人主頁

    本篇博客教你如何部署一個自己的個人主頁 項目地址：https://github.com/imsyy/home 本文首發(fā)于 慕雪的寒舍 首先我們點(diǎn)擊fork，將倉庫復(fù)刻到自己的賬戶 隨后進(jìn)入vercel，點(diǎn)擊 dashboard-add new-project 選擇你復(fù)刻的倉庫 然后什么都不用改，直接deploy 等待部署成功，點(diǎn)擊domains，在這里添

    2024年02月07日
    瀏覽(55)

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請作者喝杯咖啡吧~博客贊助

支付寶掃一掃領(lǐng)取紅包，優(yōu)惠每天領(lǐng)

二維碼1

領(lǐng)取紅包

二維碼2

領(lǐng)紅包