1

miniprogram/pages/index/index.less

 /**index.less**/
-page {
-  height: 100vh;
-  display: flex;
-  flex-direction: column;
-}
-.scrollarea {
-  flex: 1;
-  overflow-y: hidden;
-}
+.home_container {
+  width: 750rpx;
+  min-height: 100vh;
+  background-image: linear-gradient(0deg, rgb(180, 206, 120) 0%, rgb(255, 255, 255) 100%);
+  box-sizing: border-box;
+  padding-top: 630rpx;
 
-.userinfo {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  color: #aaa;
-  width: 80%;
-}
+  .top_swiper {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 750rpx;
+    height: 630rpx;
 
-.userinfo-avatar {
-  overflow: hidden;
-  width: 128rpx;
-  height: 128rpx;
-  margin: 20rpx;
-  border-radius: 50%;
-}
+    .top_swiper_item {
+      display: flex;
+      align-items: center;
+      justify-content: center;
 
-.usermotto {
-  margin-top: 200px;
-}
-.avatar-wrapper {
-  padding: 0;
-  width: 56px !important;
-  border-radius: 8px;
-  margin-top: 40px;
-  margin-bottom: 40px;
-}
+      .swiper_item_img {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
 
-.avatar {
-  display: block;
-  width: 56px;
-  height: 56px;
-}
+  .user_info {
+    width: 750rpx;
+    height: 179rpx;
+    background: url("https://yun.duiba.com.cn/polaris/home_user_bg.ea4bcbe05ac4a4daf74370556ef3d305177af1ff.png") no-repeat center center / 100%;
 
-.nickname-wrapper {
-  display: flex;
-  width: 100%;
-  padding: 16px;
-  box-sizing: border-box;
-  border-top: .5px solid rgba(0, 0, 0, 0.1);
-  border-bottom: .5px solid rgba(0, 0, 0, 0.1);
-  color: black;
+  }
 }
 
-.nickname-label {
-  width: 105px;
-}
 
-.nickname-input {
-  flex: 1;
-}
+// .userinfo {
+//   display: flex;
+//   flex-direction: column;
+//   align-items: center;
+//   color: #aaa;
+//   width: 80%;
+// }
+
+// .userinfo-avatar {
+//   overflow: hidden;
+//   width: 128rpx;
+//   height: 128rpx;
+//   margin: 20rpx;
+//   border-radius: 50%;
+// }
+
+// .usermotto {
+//   margin-top: 200px;
+// }
+
+// .avatar-wrapper {
+//   padding: 0;
+//   width: 56px !important;
+//   border-radius: 8px;
+//   margin-top: 40px;
+//   margin-bottom: 40px;
+// }
+
+// .avatar {
+//   display: block;
+//   width: 56px;
+//   height: 56px;
+// }
+
+// .nickname-wrapper {
+//   display: flex;
+//   width: 100%;
+//   padding: 16px;
+//   box-sizing: border-box;
+//   border-top: .5px solid rgba(0, 0, 0, 0.1);
+//   border-bottom: .5px solid rgba(0, 0, 0, 0.1);
+//   color: black;
+// }
+
+// .nickname-label {
+//   width: 105px;
+// }
+
+// .nickname-input {
+//   flex: 1;
+// }
\ No newline at end of file

miniprogram/pages/index/index.wxml

-<!--index.wxml-->
-<navigation-bar title="Weixin" back="{{false}}" color="black" background="#FFF"></navigation-bar>
-<scroll-view class="scrollarea" scroll-y type="list">
-  <view class="container">
-    <view class="userinfo">
+<!-- index.wxml -->
+<view class="home_container">
+  <swiper class="top_swiper" autoplay="{{homeInfo.banner.length == 1 ? false : true}}">
+    <swiper-item class="top_swiper_item" wx:for="{{homeInfo.banner}}" wx:key="{{index}}">
+      <image class="swiper_item_img" src="{{item}}" lazy-load />
+    </swiper-item>
+  </swiper>
+
+  <view class="user_info">
+    <image class="avatar" src="{{userInfo.avatarUrl}}"></image>
+    <text class="nickname">我的用户名称</text>
+    <text class="tel">手机号:13409876765</text>
+  </view>
+  
+  <!-- <view class="userinfo">
       <block wx:if="{{canIUseNicknameComp && !hasUserInfo}}">
         <button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
           <image class="avatar" src="{{userInfo.avatarUrl}}"></image>
@@ -20,11 +30,9 @@
         <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
         <text class="userinfo-nickname">{{userInfo.nickName}}</text>
       </block>
-    </view>
-
-    <button bindtap="changeStore">变更数据</button>
-    <view class="usermotto">
-      <text class="user-motto">{{homeInfo.name}}</text>
-    </view>
-  </view>
-</scroll-view>
+    </view> -->
+  <!-- <button bindtap="changeStore">变更数据</button>
+  <view class="usermotto">
+    <text class="user-motto">{{homeInfo.name}}</text>
+  </view> -->
+</view>
\ No newline at end of file

miniprogram/store/store.ts

@@ -5,13 +5,21 @@ class Store {
 
     homeInfo = {
         name: '123123',
-        age: 123123
+        age: 123123,
+        banner: [
+            "https://yun.duiba.com.cn/polaris/banner.bf4a3033e8bb2cb9eb20c534d002879a2f6b5579.png",
+        ]
     }
 
     updateHomeInfo() {
         this.homeInfo = {
             name: '张三',
-            age: 18
+            age: 18,
+            banner: [
+                "https://yun.duiba.com.cn/polaris/banner.bf4a3033e8bb2cb9eb20c534d002879a2f6b5579.png",
+                "//yun.duiba.com.cn/polaris/%E5%96%9D%E9%B2%9C%E5%A5%B6.5815326bdfc25045c0a8ee71beb10c13b0147acd.png",
+                "//yun.duiba.com.cn/polaris/%E9%B2%9C%E7%89%9B%E5%A5%B6.fd352be87520d04261ba36348022c36836e4c819.png"
+            ]
         }
     }
 }