我的页面完成

README.md

@@ -21,3 +21,4 @@
     - classify/list 右侧商品列表
     - classify/navigation 左侧导航列表
 - pages/product/product 商品页
+- pages/personal/personal 我的页面

app.json

@@ -1,5 +1,6 @@
 {
   "pages": [
+    "pages/personal/personal",
     "pages/product/product",
     "pages/classify/classify",
     "pages/shopping/shopping",

pages/personal/personal.js

@@ -0,0 +1,66 @@
+// pages/personal/personal.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

pages/personal/personal.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

pages/personal/personal.scss

@@ -0,0 +1,53 @@
+.box{
+    // border-top: 1rpx solid #eaeaea;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .card{
+        width: 690rpx;
+        height: 313rpx;
+        background-color: #47C877;
+        display: flex;
+        box-sizing: border-box;
+        padding: 50rpx;
+        font-size: 30rpx;
+        flex-direction: column;
+        color: #fff;
+        margin-top: 20rpx;
+        .user{
+            display: flex;
+            align-items: center;  
+            .head{
+                width: 80rpx;
+                height: 80rpx;
+                margin-right: 32rpx;
+                border-radius: 50%;
+                background-color: #fff;
+            }
+        }
+        .balance{
+            display: flex;
+            flex-direction: column;
+            margin-top: 52rpx;
+        }
+    }
+    .list{
+        display: flex;
+        width: 690rpx;
+        margin-top: 33rpx;
+        flex-direction: column;
+        .option{
+            width: 100%;
+            height: 80rpx;
+            margin-bottom: 15rpx;
+            box-sizing: border-box;
+            padding:  0 30rpx;
+            box-shadow:2rpx 3rpx 16rpx 1rpx rgba(51,51,51,0.1);
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+        }
+    }
+        
+    }
+  

pages/personal/personal.wxml

@@ -0,0 +1,26 @@
+<view class="box">
+    <view class="card">
+        <view class="user">
+            <image class="head"></image>
+            <text>于于于宇于</text>
+        </view>
+        <view class="balance">
+            <text>账户余额</text>
+            <text>480.00</text>
+        </view>
+    </view>
+    <view class="list">
+        <view class="option">
+            <view>我的订单</view>
+            <view>></view>
+        </view>
+        <view class="option">
+            <view>我的订单</view>
+            <view>></view>
+        </view>
+        <view class="option">
+            <view>会员中心</view>
+            <view><text style="font-size:28rpx;color:#999;">非会员 </text>></view>
+        </view>
+    </view>
+</view>

pages/personal/personal.wxss

@@ -0,0 +1 @@
+.box{display:flex;flex-direction:column;align-items:center}.box .card{width:690rpx;height:313rpx;background-color:#47C877;display:flex;box-sizing:border-box;padding:50rpx;font-size:30rpx;flex-direction:column;color:#fff;margin-top:20rpx}.box .card .user{display:flex;align-items:center}.box .card .user .head{width:80rpx;height:80rpx;margin-right:32rpx;border-radius:50%;background-color:#fff}.box .card .balance{display:flex;flex-direction:column;margin-top:52rpx}.box .list{display:flex;width:690rpx;margin-top:33rpx;flex-direction:column}.box .list .option{width:100%;height:80rpx;margin-bottom:15rpx;box-sizing:border-box;padding:0 30rpx;box-shadow:2rpx 3rpx 16rpx 1rpx rgba(51,51,51,0.1);display:flex;align-items:center;justify-content:space-between}