feat：新模板

pages/my/index.rpx.css

@@ -1,5 +1,5 @@
-.tabBarLineHeight {
-    height: 138rpx;
+.content {
+    background: rgba(247, 247, 247, 1);
 }
 
 .tabBarView {
@@ -7,6 +7,28 @@
     bottom: 0;
 }
 
-.page {
-    height: 1360rpx;
+.head-wrap {
+    position: relative;
+    width: 750rpx;
+    height: 1656rpx;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+}
+
+.content {
+    position: absolute;
+    top: 10%;
+    left: 24rpx;
+    right: 24rpx;
+    border-radius: 12rpx;
+}
+.user-head {
+    margin-right: 6px;
+
+    image {
+        border-radius: 38px;
+        height: 76px;
+        width: 76px;
+    }
 }

pages/my/index.vue

@@ -1,261 +1,258 @@
 <template>
-	<view class="content">
-		<view class="tabBarLineHeight">
-			<view class="head-wrap">
-				<view class="content-info">
-					<!-- 轮播图 -->
-					<view class="head-bg">
-						<u-swiper :list="bannerList"></u-swiper>
-					</view>
-					<view class="content">
-						<!-- 用户信息 -->
-						<view @click="perfectUserInfo()" class="user-info">
-							<view class="user-head">
-								<image v-if="userInfo.selfPhotoUrl" :src="userInfo.selfPhotoUrl" mode=""></image>
-								<image v-else src="../../static/logo.png" mode=""></image>
+	<view class="content-wrap">
+		<view class="head-wrap">
+			<view class="content-info">
+				<!-- 轮播图 -->
+				<view class="head-bg">
+					<u-swiper :list="bannerList" :height="340" ></u-swiper>
+				</view>
+				<view class="content">
+					<!-- 用户信息 -->
+					<view @click="perfectUserInfo()" class="user-info">
+						<view class="user-head">
+							<image v-if="userInfo.selfPhotoUrl" :src="userInfo.selfPhotoUrl" mode=""></image>
+							<image v-else src="../../static/logo.png" mode=""></image>
+						</view>
+						<view class="h-content">
+							<view class="user-name">
+								<text>HI,亲爱的{{ userInfo.ncikName }}</text>
 							</view>
-							<view class="h-content">
-								<view class="user-name">
-									<text>HI,亲爱的{{ userInfo.ncikName }}</text>
+							<view class="user-desc">
+								<view class="h-text">
+									<text>你当前的个人资料尚不完善</text>
+									<text>去完善</text>
 								</view>
-								<view class="user-desc">
-									<view class="h-text">
-										<text>你当前的个人资料尚不完善</text>
-										<text>去完善</text>
-									</view>
-									<view class="h-arrow">
-										<u-icon name="arrow-right" color="#333333" size="16"></u-icon>
-									</view>
+								<view class="h-arrow">
+									<u-icon name="arrow-right" color="#333333" size="16"></u-icon>
 								</view>
 							</view>
 						</view>
+					</view>
 
-
-						<view class="balance-info">
-							<view class="balance-name">
-								<text>我的资产</text>
-							</view>
-							<view class="h-content">
-								<view class="button-wrap">
-									<view @click="gotoRechargeService()" class="btn">
-										<view class="icon">
-											<u-icon name="/static/me/u701.png" color="red" size="30"></u-icon>
+					<view class="balance-info">
+						<view class="balance-name">
+							<text>我的资产</text>
+						</view>
+						<view class="h-content">
+							<view class="button-wrap">
+								<view @click="gotoRechargeService()" class="btn">
+									<view class="icon">
+										<u-icon name="/static/me/u701.png" color="red" size="30"></u-icon>
+									</view>
+									<view class="h-name">
+										<view class="name">
+											余额
 										</view>
-										<view class="h-name">
-											<view class="name">
-												余额
-											</view>
-											<view class="num">
-												￥{{ userInfo.balance }}
-											</view>
+										<view class="num">
+											￥{{ userInfo.balance }}
 										</view>
 									</view>
 								</view>
-								<view class="button-wrap">
-									<view @click="gotoIntgral" class="btn">
-										<view class="icon">
-											<u-icon name="/static/me/u680.png" color="red" size="30"></u-icon>
+							</view>
+							<view class="button-wrap">
+								<view @click="gotoIntgral" class="btn">
+									<view class="icon">
+										<u-icon name="/static/me/u680.png" color="red" size="30"></u-icon>
+									</view>
+									<view class="h-name">
+										<view class="name">
+											积分
 										</view>
-										<view class="h-name">
-											<view class="name">
-												积分
-											</view>
-											<view class="num">
-												{{ userInfo.integral }}
-											</view>
+										<view class="num">
+											{{ userInfo.integral }}
 										</view>
 									</view>
 								</view>
-								<view class="button-wrap">
-									<view @click="gotoCoupon" class="btn">
-										<view class="icon">
-											<u-icon name="/static/me/u687.png" color="red" size="30"></u-icon>
+							</view>
+							<view class="button-wrap">
+								<view @click="gotoCoupon" class="btn">
+									<view class="icon">
+										<u-icon name="/static/me/u687.png" color="red" size="30"></u-icon>
+									</view>
+									<view class="h-name">
+										<view class="name">
+											优惠券
 										</view>
-										<view class="h-name">
-											<view class="name">
-												优惠券
-											</view>
-											<view class="num">
-												{{ userInfo.coupon }}
-											</view>
+										<view class="num">
+											{{ userInfo.coupon }}
 										</view>
 									</view>
 								</view>
-								<view class="button-wrap">
-									<view class="btn">
-										<view class="icon">
-											<u-icon name="/static/me/u694.png" color="red" size="30"></u-icon>
+							</view>
+							<view class="button-wrap">
+								<view class="btn">
+									<view class="icon">
+										<u-icon name="/static/me/u694.png" color="red" size="30"></u-icon>
+									</view>
+									<view class="h-name">
+										<view class="name">
+											电子币
 										</view>
-										<view class="h-name">
-											<view class="name">
-												电子币
-											</view>
-											<view class="num">
-												{{ userInfo.electronicCurrency }}
-											</view>
+										<view class="num">
+											{{ userInfo.electronicCurrency }}
 										</view>
 									</view>
 								</view>
 							</view>
 						</view>
+					</view>
 
-						<view class="nav-bar">
-							<view class="nav-content">
-								<view class="nav-info">
-									<view class="logo">
-										<image src="../../static/me/u1796.png" mode=""></image>
-									</view>
-									<view class="nav-desc">
-										<view class="nav-name">
-											<view class="">贡献奖励记录</view>
-										</view>
-										<view class="change-store"></view>
-									</view>
-									<view class="arrow-right">
-										<u-icon name="arrow-right" color="#666" size="18"></u-icon>
-										<!-- <image src="../../static/index/u10.png" mode=""></image> -->
+					<view class="nav-bar">
+						<view class="nav-content">
+							<view class="nav-info">
+								<view class="logo">
+									<image src="../../static/me/u1796.png" mode=""></image>
+								</view>
+								<view class="nav-desc">
+									<view class="nav-name">
+										<view class="">贡献奖励记录</view>
 									</view>
+									<view class="change-store"></view>
+								</view>
+								<view class="arrow-right">
+									<u-icon name="arrow-right" color="#666" size="18"></u-icon>
+									<!-- <image src="../../static/index/u10.png" mode=""></image> -->
 								</view>
 							</view>
-							<view class="custom-line"></view>
-							<view @click="gotoRealNameAuth()" class="nav-content">
-								<view class="nav-info">
-									<view class="logo">
-										<image src="../../static/me/u1803.png" mode=""></image>
-									</view>
-									<view class="nav-desc">
-										<view class="nav-name">
-											<view class="">实名认证</view>
-										</view>
-										<view class="change-store">
-											<text v-if="userInfo.isAttestation">已认证</text>
-											<text v-else>未实名认证，去认证</text>
-										</view>
+						</view>
+						<view class="custom-line"></view>
+						<view @click="gotoRealNameAuth()" class="nav-content">
+							<view class="nav-info">
+								<view class="logo">
+									<image src="../../static/me/u1803.png" mode=""></image>
+								</view>
+								<view class="nav-desc">
+									<view class="nav-name">
+										<view class="">实名认证</view>
 									</view>
-									<view class="arrow-right">
-										<u-icon name="arrow-right" color="#666" size="18"></u-icon>
-										<!-- <image src="../../static/index/u10.png" mode=""></image> -->
+									<view class="change-store">
+										<text v-if="userInfo.isAttestation">已认证</text>
+										<text v-else>未实名认证，去认证</text>
 									</view>
 								</view>
+								<view class="arrow-right">
+									<u-icon name="arrow-right" color="#666" size="18"></u-icon>
+									<!-- <image src="../../static/index/u10.png" mode=""></image> -->
+								</view>
 							</view>
-							<view class="custom-line"></view>
-							<view @click="gotoServiceObjectMgt()" class="nav-content">
-								<view class="nav-info">
-									<view class="logo">
-										<image src="../../static/me/u1812.png" mode=""></image>
-									</view>
-									<view class="nav-desc">
-										<view class="nav-name">
-											<view class="">服务对象管理</view>
+						</view>
+						<view class="custom-line"></view>
+						<view @click="gotoServiceObjectMgt()" class="nav-content">
+							<view class="nav-info">
+								<view class="logo">
+									<image src="../../static/me/u1812.png" mode=""></image>
+								</view>
+								<view class="nav-desc">
+									<view class="nav-name">
+										<view class="">服务对象管理</view>
 
-										</view>
-										<view class="change-store"></view>
-									</view>
-									<view class="arrow-right">
-										<u-icon name="arrow-right" color="#666" size="18"></u-icon>
-										<!-- <image src="../../static/index/u10.png" mode=""></image> -->
 									</view>
+									<view class="change-store"></view>
+								</view>
+								<view class="arrow-right">
+									<u-icon name="arrow-right" color="#666" size="18"></u-icon>
+									<!-- <image src="../../static/index/u10.png" mode=""></image> -->
 								</view>
 							</view>
-							<view class="custom-line"></view>
-							<view class="nav-content">
-								<view @click="gotoSystemSwitch()" class="nav-info">
-									<view class="logo">
-										<image src="../../static/me/u1833.png" mode=""></image>
-									</view>
-									<view class="nav-desc">
-										<view class="nav-name">
-											<view class="">新老系统切换</view>
+						</view>
+						<view class="custom-line"></view>
+						<view class="nav-content">
+							<view @click="gotoSystemSwitch()" class="nav-info">
+								<view class="logo">
+									<image src="../../static/me/u1833.png" mode=""></image>
+								</view>
+								<view class="nav-desc">
+									<view class="nav-name">
+										<view class="">新老系统切换</view>
 
-										</view>
-										<view class="change-store"></view>
-									</view>
-									<view class="arrow-right">
-										<u-icon name="arrow-right" color="#666" size="18"></u-icon>
-										<!-- <image src="../../static/index/u10.png" mode=""></image> -->
 									</view>
+									<view class="change-store"></view>
+								</view>
+								<view class="arrow-right">
+									<u-icon name="arrow-right" color="#666" size="18"></u-icon>
+									<!-- <image src="../../static/index/u10.png" mode=""></image> -->
 								</view>
 							</view>
-							<view class="custom-line"></view>
-							<view @click="gotoRechargeService()" class="nav-content">
-								<view class="nav-info">
-									<view class="logo">
-										<image src="../../static/me/u826.png" mode=""></image>
-									</view>
-									<view class="nav-desc">
-										<view class="nav-name">
-											<view class="">储值服务</view>
-										</view>
-										<view class="change-store"></view>
-									</view>
-									<view class="arrow-right">
-										<u-icon name="arrow-right" color="#666" size="18"></u-icon>
-										<!-- <image src="../../static/index/u10.png" mode=""></image> -->
+						</view>
+						<view class="custom-line"></view>
+						<view @click="gotoRechargeService()" class="nav-content">
+							<view class="nav-info">
+								<view class="logo">
+									<image src="../../static/me/u826.png" mode=""></image>
+								</view>
+								<view class="nav-desc">
+									<view class="nav-name">
+										<view class="">储值服务</view>
 									</view>
+									<view class="change-store"></view>
+								</view>
+								<view class="arrow-right">
+									<u-icon name="arrow-right" color="#666" size="18"></u-icon>
+									<!-- <image src="../../static/index/u10.png" mode=""></image> -->
 								</view>
 							</view>
 						</view>
+					</view>
 
-						<view class="nav-bar">
-							<view @click="aboutOur()" class="nav-content">
-								<view class="nav-info">
-									<view class="logo">
-										<image src="../../static/me/u1829.png" mode=""></image>
-									</view>
-									<view class="nav-desc">
-										<view class="nav-name">
-											<view class="">关于我们</view>
-										</view>
-										<view class="change-store"></view>
-									</view>
-									<view class="arrow-right">
-										<u-icon name="arrow-right" color="#666" size="18"></u-icon>
-										<!-- <image src="../../static/index/u10.png" mode=""></image> -->
+					<view class="nav-bar">
+						<view @click="aboutOur()" class="nav-content">
+							<view class="nav-info">
+								<view class="logo">
+									<image src="../../static/me/u1829.png" mode=""></image>
+								</view>
+								<view class="nav-desc">
+									<view class="nav-name">
+										<view class="">关于我们</view>
 									</view>
+									<view class="change-store"></view>
+								</view>
+								<view class="arrow-right">
+									<u-icon name="arrow-right" color="#666" size="18"></u-icon>
+									<!-- <image src="../../static/index/u10.png" mode=""></image> -->
 								</view>
 							</view>
-							<view class="custom-line"></view>
-							<view @click="perfectUserInfo()" class="nav-content">
-								<view class="nav-info">
-									<view class="logo">
-										<image src="../../static/me/u10.png" mode=""></image>
-									</view>
-									<view class="nav-desc">
-										<view class="nav-name">
-											<view class="">个人信息</view>
-										</view>
-										<view class="change-store"></view>
-									</view>
-									<view class="arrow-right">
-										<u-icon name="arrow-right" color="#666" size="18"></u-icon>
-										<!-- <image src="../../static/index/u10.png" mode=""></image> -->
+						</view>
+						<view class="custom-line"></view>
+						<view @click="perfectUserInfo()" class="nav-content">
+							<view class="nav-info">
+								<view class="logo">
+									<image src="../../static/me/u10.png" mode=""></image>
+								</view>
+								<view class="nav-desc">
+									<view class="nav-name">
+										<view class="">个人信息</view>
 									</view>
+									<view class="change-store"></view>
+								</view>
+								<view class="arrow-right">
+									<u-icon name="arrow-right" color="#666" size="18"></u-icon>
+									<!-- <image src="../../static/index/u10.png" mode=""></image> -->
 								</view>
 							</view>
-							<view class="custom-line"></view>
-							<view @click="gotoSetting()" class="nav-content">
-								<view class="nav-info">
-									<view class="logo">
-										<image src="../../static/me/u101.png" mode=""></image>
-									</view>
-									<view class="nav-desc">
-										<view class="nav-name">
-											<view class="">设置</view>
-										</view>
-										<view class="change-store"></view>
-									</view>
-									<view class="arrow-right">
-										<u-icon name="arrow-right" color="#666" size="18"></u-icon>
-										<!-- <image src="../../static/index/u10.png" mode=""></image> -->
+						</view>
+						<view class="custom-line"></view>
+						<view @click="gotoSetting()" class="nav-content">
+							<view class="nav-info">
+								<view class="logo">
+									<image src="../../static/me/u101.png" mode=""></image>
+								</view>
+								<view class="nav-desc">
+									<view class="nav-name">
+										<view class="">设置</view>
 									</view>
+									<view class="change-store"></view>
+								</view>
+								<view class="arrow-right">
+									<u-icon name="arrow-right" color="#666" size="18"></u-icon>
+									<!-- <image src="../../static/index/u10.png" mode=""></image> -->
 								</view>
 							</view>
-
 						</view>
+
 					</view>
+				</view>
 
 
-				</view>
 			</view>
 		</view>
 		<view class="tabBarView">

unpackage/dist/dev/mp-weixin/pages/my/index.wxss

@@ -61,14 +61,34 @@
 .bord{
 	border:  1px  solid  red;
 }
-.tabBarLineHeight {
-    height: 138rpx;
+.content {
+    background: rgba(247, 247, 247, 1);
 }
 .tabBarView {
     position: fixed;
     bottom: 0;
 }
-.page {
-    height: 1360rpx;
+.head-wrap {
+    position: relative;
+    width: 750rpx;
+    height: 1656rpx;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+}
+.content {
+    position: absolute;
+    top: 10%;
+    left: 24rpx;
+    right: 24rpx;
+    border-radius: 12rpx;
+}
+.user-head {
+    margin-right: 6px;
+image {
+        border-radius: 38px;
+        height: 76px;
+        width: 76px;
+}
 }