老婆

app.js

+//app.js
+App({
+  onLaunch: function () {
+    // 展示本地存储能力
+    var logs = wx.getStorageSync('logs') || []
+    logs.unshift(Date.now())
+    wx.setStorageSync('logs', logs)
+
+    // 登录
+    wx.login({
+      success: res => {
+        // 发送 res.code 到后台换取 openId, sessionKey, unionId
+      }
+    })
+    // 获取用户信息
+    wx.getSetting({
+      success: res => {
+        if (res.authSetting['scope.userInfo']) {
+          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
+          wx.getUserInfo({
+            success: res => {
+              // 可以将 res 发送给后台解码出 unionId
+              this.globalData.userInfo = res.userInfo
+
+              // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
+              // 所以此处加入 callback 以防止这种情况
+              if (this.userInfoReadyCallback) {
+                this.userInfoReadyCallback(res)
+              }
+            }
+          })
+        }
+      }
+    })
+  },
+  globalData: {
+    userInfo: null
+  }
+})
\ No newline at end of file

app.json

+{
+  "pages":[
+    "pages/home/home",
+    "pages/index/index"
+  ],
+  "window":{
+    "backgroundTextStyle":"light",
+    "navigationBarBackgroundColor": "#685256",
+    "navigationBarTitleText": "崩坏三",
+    "navigationBarTextStyle":"white"
+  },
+  "style": "v2",
+  "sitemapLocation": "sitemap.json"
+}

app.wxss

+/**app.wxss**/
+.container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  padding: 200rpx 0;
+  box-sizing: border-box;
+} 

pages/home/home.js

+// pages//home/home.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    show:0,
+    show1:false,
+    show2:false,
+    show3:true,
+    show4:0,
+    show5:0,
+    // 控制导航栏菜单隐藏显示
+    nav_height:0,
+    // 控制图标旋转角度
+    rotate:0,
+    background:[
+      '../../images/index/2020052215545211628.png',
+      '../../images/index/2020052215545685020.png',
+      '../../images/index/2020052215545930565.png',
+      '../../images/index/2020052215550368214.png'
+    ],
+    list:[
+      {tabs:'最新',info:[
+        {
+          title:'11111',times:'2020-05-28',classes:'公告'
+        },
+        {
+          title:'12222',times:'2020-05-28',classes:'公告'
+        },
+        {
+          title:'12222',times:'2020-05-28',classes:'公告'
+        }
+      ]},
+      {tabs:'动态',info:[
+        {
+          title:'12222',times:'2020-05-28',classes:'公告'
+        },
+        {
+          title:'12222',times:'2020-05-28',classes:'公告'
+        },
+        {
+          title:'12222',times:'2020-05-28',classes:'公告'
+        }
+      ]},
+      {tabs:'公告',info:[
+        {
+          title:'13333',times:'2020-05-28',classes:'公告'
+        },
+        {
+          title:'12222',times:'2020-05-28',classes:'公告'
+        },
+        {
+          title:'12222',times:'2020-05-28',classes:'公告'
+        }
+      ]},
+      {tabs:'活动',info:[
+        {
+          title:'14444',times:'2020-05-28',classes:'公告'
+        },
+        {
+          title:'12222',times:'2020-05-28',classes:'公告'
+        },
+        {
+          title:'12222',times:'2020-05-28',classes:'公告'
+        }
+      ]},
+      {tabs:'补给',info:[
+        {
+          title:'15555',times:'2020-05-28',classes:'公告'
+        },
+        {
+          title:'12222',times:'2020-05-28',classes:'公告'
+        },
+        {
+          title:'12222',times:'2020-05-28',classes:'公告'
+        }
+      ]}
+    ],
+    goods:[
+      {name:"官网首页",name_title:'HOME'},
+      {name:"官网首页",name_title:'HOME'},
+      {name:"官网首页",name_title:'HOME'},
+      {name:"官网首页",name_title:'HOME'},
+      {name:"官网首页",name_title:'HOME'},
+      {name:"官网首页",name_title:'HOME'},
+    ],
+    num:200
+  },
+  fn: function(event){
+    var index = event.currentTarget.dataset.index
+    this.setData({
+      show:index
+    })
+  },
+  navFn: function(event){
+    var indexs = event.currentTarget.dataset.index
+    this.setData({
+      show4:indexs
+    })
+  },
+  swiper_nav: function(event){
+    var indexs = event.currentTarget.dataset.index
+    this.setData({
+      show5:indexs
+    })
+  },swiper_nav2: function(event){
+    this.setData({
+      show5: event.detail.current
+    })
+
+  },
+  //视频的显示与隐藏
+  videoShow: function(){
+    this.setData({
+      show1: !this.data.show1
+    })
+  },
+  videoShow2: function(){
+    this.setData({
+      show2: !this.data.show2
+    })
+  },
+  videoShow3: function(){
+    this.setData({
+      show3: !this.data.show3
+    })
+    if(this.data.num==200){
+      this.setData({
+        num:750
+      })
+    }else{
+      this.setData({
+        num:200
+      })
+    }
+    if(this.data.rotate==0){
+      this.setData({
+        rotate:180
+      })
+    }else{
+      this.setData({
+        rotate:0
+      })
+    }
+  },
+  videoShow4: function(){
+    if(this.data.nav_height==1000){
+      this.setData({
+        nav_height:0
+      })
+    }else{
+      this.setData({
+        nav_height:1000
+      })
+    }
+  },
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})
\ No newline at end of file

pages/home/home.json

+{
+  "usingComponents": {}
+}
\ No newline at end of file

pages/home/home.wxml

+<view>
+	<view class="nav">
+		<view class="header_image">
+			<image src="../../images/index/f0c3ebe.png" mode="aspectFit" style="width:100%;height:100%"></image>
+		</view>
+		<view class="header_right" bindtap="videoShow4" style="background: url({{1000 == nav_height?'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAYAAAHfgQuIAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowNzlFMERFRkVBNkMxMUU5QjFDM0NGMUJGQkExM0NCQSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDowNzlFMERGMEVBNkMxMUU5QjFDM0NGMUJGQkExM0NCQSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjA3OUUwREVERUE2QzExRTlCMUMzQ0YxQkZCQTEzQ0JBIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjA3OUUwREVFRUE2QzExRTlCMUMzQ0YxQkZCQTEzQ0JBIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Fy4nXAAAA3tJREFUeNpi/P//PwMuwASlsan4D5NkRFMAYjOyIAkgK2BENhavnXCjkE1gQpNAsQIggBiAXlEFeQcL3geTRFfwHOx/KAdZwXOYImTVqsgS6JLP0a1gQDcKWQEjSALobEk0/6uCCIAAgqn8j8dLDFh8Ao6U20iB8x9uIiZ4DpUHuYAROdhxGYCiARFJBJyEywtMhJyEywtMBDTg9AJI434cGtABigEAARipoxwAIBgGoNG4/zndgvDFrF33vReUaWpIVPX49I3a/QNh/xbax0JYbToopqrwg7JpzvCH2Ddw4xSdJnEdMm0UQdDAUARBA0OVHsOo0mMYBkoxTPThJQCrZXQDIAgDUdzATyZg/xlcQsMCriEkvYRgtVftJf2BjweB3hXPgSMUaZ9o9V7PrY7RS0exTkk5qeicXT4SfANpsRIBfgRZQC/YBLFAC0yDUF4P74lRpzW2NZI55SjalLX8Et+fgcjMLDfChFVkvxpzQ2Ki3/NG9K/+C3KDo0A0OBpkgtEWe6vV872dQjstlwC01t0JwzAMBOCMEWgHSLNH5+lTn9tdk86R2iBBcWVb55wMgvxAviiQs/RNHsSurFpSzfpJX9LuFojpmieBdO2BWF43vRGB/mHlb8FETcz6DxloFaslzRm0ibWibQTtYr0NGEFdmGfH96BuzDtitFAIQ2YaC4UxBLRQGBsZorZU1+LaKrtNyBB1L84/CIaCi/HwS6o9Aiyx9QfC0JMJAicSI64glBJXCMrAIJSFuVEm5kLZWBeNwJpoFFZFc3gfo0E8EPjPSUbwQzqNGvVzp+98/BWgOjtIQRgGogDqRVwK1WN4IsHreBPBgoew4NaAW2+gRKYwlLTNJPOTScBNdeFrNn/+8Ic88u/AswZqpBinwAefZc7f8GkF2k3GW356Pqe+Zn7kjEKXYO/Q6NQKNAoWU11ag4pgkqq0NjQJllLNloZmwVLGplJQFVgqEAlVheUCNaEQmBYwBwqFaQMl0CKw1KpEUqTfArXK3PEbniMg6YurmdjjV8dbWke5FdiBNhYD4o+ggGObc1+5Rb+fu0oWgBaAHS0YBwJMb8wF+rInPdeHVkoexZJR7UgFh1qJVDDoxkqkQkGtwGBQazB1qFWYGtQ6LBvaCiwZ2hpMDPVR7UOfaaTaI0NwgVB/+X/P3oavunvwzqDEjZ74sx+V3PHhQC5vBQAAAABJRU5ErkJggg==':'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAAxCAYAAACPiWrWAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDozQUQwQjVGMkRFOUQxMUU5QjAyNTg1NDBGRjhBRUI3OSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDozQUQwQjVGM0RFOUQxMUU5QjAyNTg1NDBGRjhBRUI3OSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjNBRDBCNUYwREU5RDExRTlCMDI1ODU0MEZGOEFFQjc5IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjNBRDBCNUYxREU5RDExRTlCMDI1ODU0MEZGOEFFQjc5Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+P1mE5QAAAOlJREFUeNrs2rENwjAUhOGEpIAJoIMZaJkFwQZUDMICSJQMQomADaCDZABoINxDTsUGl9/SyW4/PftJtpw3TZM5j54yVyqlMUqVXFmuCt41Dw2L91BGAXynSrqNj1IE7Gx6/C7tFp1oXiljk0pG5W7KRrnmXeiiAAECBAgQIECAAAECBAjwb5QJOVPi4lsYmOIJ5qoc4vIbwK2yMCzeTlnGjf6pRd8Q+FIGnWgye1PbzxVb1LrJ8KoGECBAgAABAgQIECBAgN0Elumia/2N5KjF1LB4p3B14itXbXr86rbJrA2RdXJlXwEGAKaGdyNRCS3sAAAAAElFTkSuQmCC'}}) no-repeat;background-size:100%;"></view>
+	</view>
+	<view class="nav_listNav" style="height:{{nav_height}};transition-property: height;transition-duration: 1s;">
+	<view style="height:100rpx"></view>
+		<navigator url="/pages/index/index" wx:for="{{goods}}" wx:key='index' class="listNav_items {{index == show4?'listNav_active':''}}" bindtap="navFn" data-index="{{index}}">
+			<view style="font-size:35rpx;border-bottom:{{index == show4?'1px solid #0097de':'1px solid #fff'}};margin-left:10rpx;">{{item.name}}</view>
+			<view style="font-size:30rpx;margin-right:10rpx">{{item.name_title}}</view>
+		</navigator>
+		<view class="nav_bottom">
+			<view class="nav_boxs">
+				<view style="font-size:30rpx;">成长关爱系统</view>
+				<view style="font-size:25rpx;font-weight:300;color:rbga(255,255,255,0.9;">PROGRESS</view>
+			</view>
+			<view class="nav_boxs">
+				<view style="font-size:30rpx;">米哈游通行证</view>
+				<view style="font-size:25rpx;font-weight:300;color:rbga(255,255,255,0.9;)">miHoYo PASS</view>
+			</view>
+		</view>
+	</view>
+	<view class="nav_image">
+		<view class="nav_video" bindtap="videoShow">
+			<image src="../../images/index/78c0cff.png" style="width:100%;height:100%;"></image>
+		</view>
+		<view>
+			<video src="https://webstatic.mihoyo.com/upload/op-public/2020/05/25/e5732d9455e0ae4599117927753d16e5_8735338734798242479.mp4" class="video_info" autoplay="true" wx:if='{{show1}}'></video>
+			<view class="video_animation"></view>
+			<view class="shade" wx:if='{{show1}}' bindtap="videoShow"></view>
+		</view>
+		<view class="download1">立即下载</view>
+		<view class="download2">Tap通过TapTap下载</view>
+	</view>
+	<view class="nav_info">
+		<view class="info_box">
+			<text class="info_title">作战资讯 </text>
+			<text class="info_title1">/</text>
+			<text class="info_title2">NEWS</text>
+		</view>
+		<view>
+			<swiper class="swipers" autoplay interval='3000' current='{{show5}}' data-index="{{current}}" bindchange="swiper_nav2">
+				<!-- block不会渲染到页面上，只是用来循环 -->
+				<block wx:for="{{background}}" wx:key="unique">
+					<swiper-item>
+						<image src="{{item}}" mode="aspectFill" style="width:100%;"></image>
+					</swiper-item>
+				</block>
+			</swiper>
+			<view class="swiper_nav">
+			<block wx:for='{{["1","2","3","4"]}}' wx:key="unique">
+				<view style="width:10rpx;height:10rpx;transform: rotateZ(45deg);background:{{index==show5?'#0097de':'#777'}}" bindtap="swiper_nav" data-index="{{index}}"></view>
+			</block>
+			</view>
+		</view>
+		<view class="boxs">
+			<view style="display:flex;justify-content : space-around;">
+				<view wx:for="{{list}}" wx:key="index" bindtap="fn" data-index="{{index}}">
+					<view class="boxs_nav {{index == show?'nav_active':''}}">
+						<text style="display:block;transform: skew(20deg);">{{item.tabs}}</text>
+					</view>
+				</view>
+			</view>
+			<view wx:for="{{list}}" wx:key="index" class="box_bottom" wx:if='{{index === show}}'>
+				<view wx:for='{{item.info}}' wx:for-item='info' wx:key='indexs' wx:if="{{index<4}}" class="boxs_title" wx-if='index==={{show}}'>
+					<text class="title_item">[ {{info.classes}} ]</text>
+					<text class="title_item"> {{info.title}} </text>
+					<text class="title_item">{{info.times}}</text>
+				</view>
+			</view>
+		</view>
+		<button style="background:#fedf4c;width:276px" class="box_btn">查看全部</button>
+	</view>
+	<view class="role">
+		<view>
+			<view class="role_name">
+				德丽莎·阿波卡利斯
+			</view>
+			<view class="role_armoured">
+				角色卡：朔夜观星
+			</view>
+			<view style='height:800rpx'>
+				<image src="../../images/index/2020052215482977156.png" mode="aspectFill" class="role_image" style="width:750rpx"></image>
+			</view>
+		</view>
+		<view style="position:relative;width:100%;height:400rpx" bindtap="videoShow2">
+			<view class="video_background"></view>
+			<image src="../../images/index/2020052216192319553.png" mode="aspectFit" style="position:absolute;top:0rpx;width:650rpx;height:370rpx;margin:50rpx 0 0 50rpx;z-inde:50;"></image>
+			<image src="../../images/index/e469f7a.png" mode="aspectFill" style="position:absolute;top:180rpx;left:50%;width:100rpx;height:100rpx;margin-left:-50rpx;"></image>
+		</view>
+		<video src="https://webstatic.mihoyo.com/upload/op-public/2020/05/22/7b87c865947bfeda3c96e36ea9ee025a_861000571538926692.mp4" wx:if='{{show2}}' style="position:fixed;top:450rpx;left:100rpx;z-index:66"></video>
+		<view class="shade" wx:if='{{show2}}' bindtap="videoShow2"></view>
+		<view>
+			<view class="role_info_name">
+				<view>
+					姓名：德丽莎-阿波卡利斯
+				</view>
+				<view>装甲：塑夜观星</view>
+				<view>作战方式：十字架</view>
+			</view>
+			<view class="info_boxs">
+				<view class="info_box_title">
+					<text style="font-weight: 900;font-size: 40rpx;font-style:italic;color: #62eaf5;">角色介绍</text>
+					<text style="font-size:20rpx;color:rgba(255, 255, 255, 0.1);padding-top:25rpx;">Role Introduction</text>
+					<view style="padding:20rpx;bor"></view>
+				</view>
+				<view style='font-size:30rpx;padding:25rpx 5rpx;color:#fff;'>
+					<text>生物属性的物理辅助角色，不需要登场即可释放QTE及必杀技</text>
+				</view>
+			</view>
+			<navigator style="margin:40rpx 0;">
+				<button style="background:#fedf4c;width:500rpx">查看全部女武神</button>
+			</navigator>
+		</view>
+		<view style="position:sticky;bottom:0rpx;width:100%;">
+			<view style="display:flex;justify-content:center;" bindtap="conceal" bindtap="videoShow3">
+				<view style='width:{{num}}rpx;background:#fedf4c;height:50rpx;display:flex;justify-content:center;padding-top:10rpx;'>
+					<view>
+						<image style='width:35rpx;height:35rpx;transform: rotate({{rotate}}deg);transition-property: transform;transition-duration: 1s;' src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACkAAAAWCAYAAABdTLWOAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpBRkE1MzNGOURFOUMxMUU5OURGN0ZFNkQ4RjczQjQ4NSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpBRkE1MzNGQURFOUMxMUU5OURGN0ZFNkQ4RjczQjQ4NSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkFGQTUzM0Y3REU5QzExRTk5REY3RkU2RDhGNzNCNDg1IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkFGQTUzM0Y4REU5QzExRTk5REY3RkU2RDhGNzNCNDg1Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Xg/APAAAAJhJREFUeNrM0EkOgCAMQFH0rHoPryGEq6o1gUgIKkOnJn9TFrzUmGc2yEOTkZ/bsEOLyYBnSBp6/22D5YDWuPQJUhKaAmM2Ps4KoCWgyw2S0CqgJLQJKAHtAnJCh4AcUBQgJRQVSAElAWJCSYEYUBbgCJQV2AMVAbZARYE1UBXA9FolqNMC/IKqAv5B1QDfoOqAORQVeAkwADoyn+25SYaXAAAAAElFTkSuQmCC" mode='aspectFit'></image>
+					</view>
+				</view>
+			</view>
+			<view style="border-top:8rpx solid #fedf4c;width:100%;"></view>
+			<view class="role_tab" style="height:{{show3===true?'300rpx':'0'}};transition-property: height;transition-duration: 1s;">
+				<view>
+					<view style="position:relative;">
+						<image src="../../images/index/2020052810264021157.png" mode="aspectFit"></image>
+					</view>
+					<text>老婆！</text>
+				</view>
+				<view>
+					<view>
+						<image src="../../images/index/2019110620135018021.png" mode="aspectFit"></image>
+					</view>
+					<text>老婆！！！</text>
+				</view>
+				<view>
+					<view>
+						<image src="../../images/index/2020041314055029873.png" mode="aspectFit"></image>
+					</view>
+					<text>都是老婆！</text>
+				</view>
+			</view>
+		</view>
+	</view>
+</view>
\ No newline at end of file

pages/index/index.js

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

pages/index/index.json

+{
+  "usingComponents": {}
+}
\ No newline at end of file

pages/index/index.wxml

+<!--pages/index/index.wxml-->
+<text>pages/index/index.wxml</text>

pages/index/index.wxss

+/* pages/index/index.wxss */
\ No newline at end of file

project.config.json

+{
+	"description": "项目配置文件",
+	"packOptions": {
+		"ignore": []
+	},
+	"setting": {
+		"urlCheck": true,
+		"es6": true,
+		"postcss": true,
+		"minified": true,
+		"newFeature": true,
+		"coverView": true,
+		"autoAudits": false,
+		"checkInvalidKey": true,
+		"checkSiteMap": true,
+		"uploadWithSourceMap": true,
+		"babelSetting": {
+			"ignore": [],
+			"disablePlugins": [],
+			"outputPath": ""
+		},
+		"useIsolateContext": true,
+		"useCompilerModule": true,
+		"userConfirmedUseCompilerModuleSwitch": false
+	},
+	"compileType": "miniprogram",
+	"libVersion": "2.11.3",
+	"appid": "wxfb32007f9c78335b",
+	"projectname": "%E5%B4%A9%E5%9D%8F%E4%B8%89%E5%B0%8F%E7%A8%8B%E5%BA%8F",
+	"debugOptions": {
+		"hidedInDevtools": []
+	},
+	"isGameTourist": false,
+	"simulatorType": "wechat",
+	"simulatorPluginLibVersion": {},
+	"condition": {
+		"search": {
+			"current": -1,
+			"list": []
+		},
+		"conversation": {
+			"current": -1,
+			"list": []
+		},
+		"plugin": {
+			"current": -1,
+			"list": []
+		},
+		"game": {
+			"currentL": -1,
+			"list": []
+		},
+		"gamePlugin": {
+			"current": -1,
+			"list": []
+		},
+		"miniprogram": {
+			"current": -1,
+			"list": [
+				{
+					"id": -1,
+					"name": "pages/home/home",
+					"pathName": "pages/home/home",
+					"scene": null
+				}
+			]
+		}
+	}
+}
\ No newline at end of file

sitemap.json

+{
+  "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
+  "rules": [{
+  "action": "allow",
+  "page": "*"
+  }]
+}
\ No newline at end of file

utils/util.js

+const formatTime = date => {
+  const year = date.getFullYear()
+  const month = date.getMonth() + 1
+  const day = date.getDate()
+  const hour = date.getHours()
+  const minute = date.getMinutes()
+  const second = date.getSeconds()
+
+  return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
+}
+
+const formatNumber = n => {
+  n = n.toString()
+  return n[1] ? n : '0' + n
+}
+
+module.exports = {
+  formatTime: formatTime
+}