Pārlūkot izejas kodu

我的登录界面

kk.shi 3 gadi atpakaļ
vecāks
revīzija
ae6d3caf4c

BIN
images/welfareMall/head-portrait.png


+ 5 - 5
pages/welfareMall/components/tabbar.wxss

@@ -12,8 +12,8 @@
     justify-content: space-around;
 }
 .tab-bar-body ._ico {
-    height: 54rpx;
-    width: 54rpx;
+    height: 60rpx;
+    width: 60rpx;
     padding-top: 4rpx;
 }
 .tab-bar-body ._image {
@@ -21,8 +21,8 @@
     height: 100%;
 }
 .tab-bar-body ._text {
-    line-height: 20rpx;
-    height: 20px;
+    line-height: 28rpx;
+    height: 28px;
     text-align: center;
-    font-size: 20rpx;
+    font-size: 28rpx;
 }

+ 2 - 1
pages/welfareMall/personal/personal.json

@@ -1,5 +1,6 @@
 {
   "usingComponents": {
     "tab-bar": "../components/tabbar"
-  }
+  },
+  "navigationBarBackgroundColor": "#FFF2F3"
 }

+ 34 - 2
pages/welfareMall/personal/personal.wxml

@@ -1,4 +1,36 @@
 <!--pages/welfareMall/personal/personal.wxml-->
-<text>pages/welfareMall/personal/personal.wxml</text>
+<view class="personal flex-column">
+  <!-- 首部个人信息 -->
+  <view class="head flex-column">
+    <view class="head-personal flex-row">
+      <image class="head-personal-logo" src="/images/welfareMall/head-portrait.png" />
+      <view class="head-personal-login">登录/注册</view>
+    </view>
+    <view class="head-card">
+      <view class="head-card-coupon"></view>
+      <view class="head-card-num"></view>
+      <view class="head-card-text"></view>
+    </view>
+  </view>
+  <!-- 中部详细信息 -->
+  <view class="center">
+    <!-- 内容 -->
+    <view class="content">
+     <!-- 签到领券 -->
+      <view class="sign-in"></view>
+      <!-- 抽奖领券 -->
+      <view class="luck-draw"></view>
+      <!-- 我的券包 -->
+      <view class="coupon-bag"></view>
+      <!-- 邀请好友 -->
+      <view class="invite-friends"></view>
+      <!-- 历史订单 -->
+      <view class="historical-order"></view>
+      <!-- 意见反馈 -->
+      <view class="feedback"></view>
+      <view></view>
+    </view>
+  </view>
+</view>
 <!-- 底部导航 -->
-<tab-bar />
+<tab-bar />

+ 57 - 1
pages/welfareMall/personal/personal.wxss

@@ -1 +1,57 @@
-/* pages/welfareMall/personal/personal.wxss */
+/* pages/welfareMall/personal/personal.wxss */
+.personal{
+  width: 750rpx;
+  height: auto;
+  padding-bottom: 119rpx; 
+}
+
+/* 垂直方向布局,水平居中 **/
+.flex-column{
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: center;
+  justify-content: left;
+}
+
+/* 水平方向布局,垂直居中 **/
+.flex-row{
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  justify-content: center;
+}
+
+.head{
+  width: 750rpx;
+  height: 550rpx;
+  background: #FFF2F3;
+  border-radius: 0rpx 0rpx 40rpx 40rpx;
+  justify-content: space-between;
+}
+
+.head-personal{
+  width: 100%;
+  height: 136rpx;
+  justify-content: flex-start;
+  margin-left: 35rpx;
+  margin-top: 30rpx;
+}
+.head-personal-logo{
+  width: 136rpx;
+  height: 136rpx;
+}
+
+.head-card{
+  width: 666rpx;
+  height: 286rpx;
+  background-image: url(https://dy.shpr.top/shareActivity/card.png);
+  background-size: 100% 100%;
+  margin-bottom: 51rpx;
+}
+
+.head-personal-login{
+  margin-left: 33rpx;
+  font-size: 38rpx;
+  font-weight: 500;
+  color: #303030;
+}