feat

app.json

@@ -11,7 +11,10 @@
     "pages/community/uploadPics/uploadPics",
     "pages/community/uploadVideos/uploadVideos",
     "pages/community/articleDetails/articleDetails",
-    "pages/community/videoDetails/videoDetails"
+    "pages/community/videoDetails/videoDetails",
+    "pages/contest/answer/answer",
+    "pages/contest/info/info",
+    "pages/contest/score/score"
   ],
   "window": {
     "backgroundTextStyle": "light",

pages/contest/answer/answer.js

@@ -0,0 +1,75 @@
+// pages/contest/answer/answer.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    pagination: {
+      page: 1,
+      rows: 10
+    }
+  },
+
+  bindNavTagger(e) {
+    this.setData({
+      ['pagination.page']: e.currentTarget.dataset.index-0
+    })
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

pages/contest/answer/answer.json

@@ -0,0 +1,4 @@
+{
+  "usingComponents": {},
+  "navigationStyle": "custom"
+}

pages/contest/answer/answer.wxml

@@ -0,0 +1,55 @@
+<!--pages/contest/answer/answer.wxml-->
+<view>
+  <image mode="widthFix" src="../../../imgs/contest/answer/bg.png" class="bg"></image>
+  <view class="top">
+    <view class="top-title">您还有
+      <view class="time">
+        09：44
+      </view>秒答题
+    </view>
+    <view class="top-nav">
+      <view class="{{pagination.page==1?'active':''}}" style="background-image: url({{pagination.page==1?'../../../imgs/contest/answer/nav-bg.png':''}});" bindtap="bindNavTagger" data-index="1">第1-10题</view>
+      <view class="{{pagination.page==2?'active':''}}" style="background-image: url({{pagination.page==2?'../../../imgs/contest/answer/nav-bg.png':''}});" bindtap="bindNavTagger" data-index="2">第11-20题</view>
+      <view class="{{pagination.page==3?'active':''}}" style="background-image: url({{pagination.page==3?'../../../imgs/contest/answer/nav-bg.png':''}});" bindtap="bindNavTagger" data-index="3">第21-30题</view>
+      <view class="{{pagination.page==4?'active':''}}" style="background-image: url({{pagination.page==4?'../../../imgs/contest/answer/nav-bg.png':''}});" bindtap="bindNavTagger" data-index="4">第31-40题</view>
+      <view class="{{pagination.page==5?'active':''}}" style="background-image: url({{pagination.page==5?'../../../imgs/contest/answer/nav-bg.png':''}});" bindtap="bindNavTagger" data-index="5">第41-50题</view>
+    </view>
+  </view>
+  <view class="content">
+    <view class="content-title">2022年冬奥会知识竞赛</view>
+    <view class="content-item">
+      <view class="problem">
+        <view class="problem-num">
+          <image mode="widthFix" class="problem-icon" src="../../../imgs/contest/answer/icon.png"></image>
+          <view class="problem-index">1</view>
+        </view>
+        <view class="problem-text">现代奥林匹克圣火传递起于哪一年？</view>
+      </view>
+      <view class="problem-key-list">
+        <view class="active">A. 1936年</view>
+        <view class="">A. 1936年</view>
+        <view class="">A. 1936年</view>
+        <view class="">A. 1936年</view>
+      </view>
+    </view>
+    <view class="content-item">
+      <view class="problem">
+        <view class="problem-num">
+          <image mode="widthFix" class="problem-icon" src="../../../imgs/contest/answer/icon.png"></image>
+          <view class="problem-index">1</view>
+        </view>
+        <view class="problem-text">现代奥林匹克圣火传递起于哪一年？</view>
+      </view>
+      <view class="problem-key-list">
+        <view class="active">A. 1936年</view>
+        <view class="">A. 1936年</view>
+        <view class="">A. 1936年</view>
+        <view class="">A. 1936年</view>
+      </view>
+    </view>
+  </view>
+  <view class="arrow-group">
+    <image class="" mode="widthFix" src="../../../imgs/contest/answer/left{{pagination.page==1?'':'-active'}}.png" bindtap="{{pagination.page==1?'':'bindNavTagger'}}" data-index="{{pagination.page-1}}"></image>
+    <image class="" mode="widthFix" src="../../../imgs/contest/answer/right{{pagination.page==5?'':'-active'}}.png" bindtap="{{pagination.page==5?'':'bindNavTagger'}}" data-index="{{pagination.page+1}}"></image>
+  </view>
+</view>

pages/contest/answer/answer.wxss

@@ -0,0 +1,134 @@
+/* pages/contest/answer/answer.wxss */
+page {
+  background: #fff;
+}
+.bg {
+  width: 100%;
+  position: absolute;
+  z-index: 0;
+  background: transparent;
+}
+.top{
+  position: relative;
+  z-index: 9;
+  padding-top: 176rpx;
+  width: 100%;
+}
+.top-title {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-weight: 400;
+  color: #FFFFFF;
+  font-size: 32rpx;
+}
+.top-title .time {
+  height: 66rpx;
+  background: rgba(60, 70, 209,.5);
+  padding: 0 10rpx;
+  border-radius: 10rpx;
+  margin: 10rpx;
+  font-weight: 500;
+  color: #FFFFFF;
+  font-size: 48rpx;
+}
+.top-nav {
+  margin-top: 15rpx;
+  display: flex;
+  font-weight: 400;
+  justify-content: center;
+  color: rgba(255, 255, 255,.7);
+  align-items: center;
+  font-size: 24rpx;
+}
+.top-nav > view {
+  margin: 0 10rpx;
+}
+.top-nav .active {
+  margin: 0!important;
+  font-size: 28rpx;
+  font-weight: 500;
+  color: #59598D;
+  background-repeat:no-repeat;
+  background-size:100% 100%;
+  -moz-background-size:100% 100%;
+  height: 92rpx;
+  width: 188rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.content {
+  position: relative;
+  z-index: 9;
+  width: 100%;
+}
+.content-title {
+  margin-top: 70rpx;
+  width: 100%;
+  font-size: 40rpx;
+  font-weight: 500;
+  color: #59598D;
+  text-align: center;
+}
+.problem {
+  display: flex;
+  align-items: center;
+  margin-top: 42rpx;
+}
+.problem-num {
+  position: relative;
+  width: 40rpx;
+  margin: 0 24rpx 0 48rpx;
+}
+.problem-icon {
+  width: 40rpx;
+  position: absolute;
+  z-index: 1;
+}
+.problem-index {
+  width: 40rpx;
+  font-size: 28rpx;
+  font-weight: 600;
+  color: #FFFFFF;
+  position: relative;
+  z-index: 9;
+  line-height: 42rpx;
+  text-align: center;
+}
+.problem-text {
+  font-size: 28rpx;
+  font-weight: 500;
+  color: #59598D;
+}
+.problem-key-list {
+  margin-top: 24rpx;
+}
+.problem-key-list > view{
+  width: 516rpx;
+  height: 68rpx; 
+  background: #FFFFFF;
+  border-radius: 34rpx;
+  border: 2rpx solid #EFEFFF;
+  margin: 0 146rpx 20rpx 88rpx;
+  font-size: 28rpx;
+  font-weight: 400;
+  color: #353333;
+  line-height: 68rpx;
+  padding: 0 38rpx;
+}
+.problem-key-list .active {
+  background: #5679F0;
+  color: rgb(241, 241, 241);
+}
+.arrow-group {
+  display: flex;
+  justify-content: center;
+  padding-bottom: 34rpx;
+  margin-top: 30rpx;
+}
+.arrow-group > image {
+  width: 160rpx;
+  margin: 0 18rpx;
+}

pages/contest/info/info.js

@@ -0,0 +1,91 @@
+// pages/contest/contest.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    sexList: [{label:'男',value:1},{label:'女',value:2}],
+    form: {}
+  },
+
+  changeInput (e) {
+    const id = e.currentTarget.id;
+    const value = e.detail.value;
+    this.setData({
+      ['form.'+id]: value
+    })
+  },
+
+  bindAddrChange (e) {
+    const id = e.currentTarget.id;
+    const value = e.detail.value
+    this.setData({
+      ['form.'+id]: value.join(' ')
+    })
+  },
+
+  bindPickerChange (e) {
+    const id = e.currentTarget.id;
+    const value = e.detail.value
+    this.setData({
+      ['form.'+id]: this.data.sexList[value].value
+    })
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

pages/contest/info/info.json

@@ -0,0 +1,4 @@
+{
+  "usingComponents": {},
+  "navigationStyle": "custom"
+}

pages/contest/info/info.wxml

@@ -0,0 +1,80 @@
+<!--pages/contest/contest.wxml-->
+<view>
+  <image mode="widthFix" src="../../../imgs/contest/bg.png" class="bg"></image>
+  <view class="form">
+    <view class="form-item">
+      <image class="form-item-bg" mode="widthFix" src="../../../imgs/contest/list-bg.png"></image>
+      <view class="content">
+        <view class="form-item-label" style="border-right: 4rpx solid #D8D8D8">姓名</view>
+        <input bindinput="changeInput" id="name" placeholder="请输入" placeholder-class="phcolor"></input>
+      </view>
+    </view>
+
+    <view class="form-item">
+      <image class="form-item-bg" mode="widthFix" src="../../../imgs/contest/list-bg.png"></image>
+      <view class="content">
+        <view class="form-item-label" style="border-right: 4rpx solid #D8D8D8">性别</view>
+        <view class="select">
+          <picker bindchange="bindPickerChange" value="{{value}}" range="{{sexList}}" range-key="label" id="sex">
+            <view class="picker {{form.sex?'':'phcolor'}}">
+              {{form.sex?sexList[form.sex-1].label:'请选择'}}
+            </view>
+          </picker>
+          <image class="arrow" src="../../../imgs/contest/arrow.png" mode="widthFix"></image>
+        </view>
+      </view>
+    </view>
+
+    <view class="form-item">
+      <image class="form-item-bg" mode="widthFix" src="../../../imgs/contest/list-bg.png"></image>
+      <view class="content">
+        <view class="form-item-label" style="border-right: 4rpx solid #D8D8D8">年龄</view>
+        <input bindinput="changeInput" id="age" placeholder="请输入" placeholder-class="phcolor"></input>
+      </view>
+    </view>
+
+    <view class="form-item">
+      <image class="form-item-bg" mode="widthFix" src="../../../imgs/contest/list-bg.png"></image>
+      <view class="content">
+        <view class="form-item-label" style="border-right: 4rpx solid #D8D8D8">区域</view>
+        <view class="select">
+          <picker mode="region" bindchange="bindAddrChange" id="addr">
+            <view class="picker {{form.addr?'':'phcolor'}}">
+            {{form.addr||'请选择'}}
+              <!-- 当前选择：{{region[0]}}，{{region[1]}}，{{region[2]}} -->
+            </view>
+          </picker>
+          <image class="arrow" src="../../../imgs/contest/arrow.png" mode="widthFix"></image>
+        </view>
+      </view>
+    </view>
+
+    <view class="form-item">
+      <image class="form-item-bg" mode="widthFix" src="../../../imgs/contest/list-bg.png"></image>
+      <view class="content">
+        <view class="form-item-label" style="border-right: 4rpx solid #D8D8D8">学校</view>
+        <input bindinput="changeInput" id="school" placeholder="请输入" placeholder-class="phcolor"></input>
+      </view>
+    </view>
+
+    <view class="form-item">
+      <image class="form-item-bg" mode="widthFix" src="../../../imgs/contest/list-bg.png"></image>
+      <view class="content">
+        <view class="form-item-label" style="border-right: 4rpx solid #D8D8D8">年级</view>
+        <input bindinput="changeInput" id="grade" placeholder="请输入" placeholder-class="phcolor"></input>
+      </view>
+    </view>
+
+    <view class="form-item">
+      <image class="form-item-bg" mode="widthFix" src="../../../imgs/contest/list-bg.png"></image>
+      <view class="content">
+        <view class="form-item-label" style="border-right: 4rpx solid #D8D8D8">其他</view>
+        <input bindinput="changeInput" id="other" placeholder="请输入" placeholder-class="phcolor"></input>
+      </view>
+    </view>
+  </view>
+  <view class="button">
+    <image class="button-bg" mode="widthFix" src="../../../imgs/contest/button-bg.png"></image>
+    <view class="button-text">Start Now !</view>
+  </view>
+</view>

pages/contest/info/info.wxss

@@ -0,0 +1,80 @@
+/* pages/contest/contest.wxss */
+page {
+  background: #fff;
+}
+.bg {
+  width: 100%;
+  position: absolute;
+  z-index: 0;
+}
+.form {
+  padding-top: 480rpx;
+}
+.form-item {
+  position: relative;
+  height: 166rpx;
+}
+.form-item-bg {
+  width: 100%;
+  position: absolute;
+  z-index: 0;
+}
+.content {
+  height: 166rpx;
+  display: flex;
+  align-items: center;
+  position: relative;
+  z-index: 9;
+}
+.form-item-label {
+  padding: 0 40rpx 0 80rpx; 
+  font-size: 32rpx;
+  font-weight: 550;
+  color: #161616;
+}
+input, .select {
+  padding-left: 24rpx;
+  width: 500rpx!important;
+  height: 106rpx;
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+.picker {
+  width: 500rpx;
+  height: 106rpx;
+  display: flex;
+  align-items: center;
+}
+.arrow {
+  width: 24rpx;
+  position: absolute;
+  right: 40rpx;
+  z-index: 0;
+}
+.phcolor {
+  font-size: 32rpx;
+  line-height: 44rpx; 
+  font-weight: 400;
+  color: rgba(22, 22, 22,.18);
+}
+.button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  height: 166rpx;
+}
+
+.button-bg {
+  width: 712rpx;
+  position: absolute;
+  z-index: 0;
+}
+.button-text {
+  position: relative;
+  z-index: 9;
+  color: #FFFFFF;
+  font-size: 48rpx;
+  line-height: 58rpx;
+}

pages/contest/score/score.js

@@ -0,0 +1,78 @@
+// pages/contest/score/score.js
+const app = getApp()
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function (e) {
+    if (e.from === 'button') {
+      console.log(e.target)
+    }
+    let {userInfo}  = app.globalData
+    return {
+      title: `${userInfo.nickname||'我'}@你，赢得高分，等你挑战！`,
+      path: 'pages/home/home',
+      imageUrl: '../../../imgs/home/banner.png',
+      success: function (res) {
+        console.log('成功', res)
+      }
+    }
+  }
+})

pages/contest/score/score.json

@@ -0,0 +1,4 @@
+{
+  "usingComponents": {},
+  "navigationStyle": "custom"
+}

pages/contest/score/score.wxml

@@ -0,0 +1,27 @@
+<!--pages/contest/score/score.wxml-->
+<view>
+  <image class="bg" src="../../../imgs/contest/score/bg.png"></image>
+  <view class="content">
+    <image mode="widthFix" class="kuang" src="../../../imgs/contest/score/kuang.png"></image>
+    <view class="detail">
+      <view class="title">恭喜您完成答题！</view>
+      <view class="score">
+        <image class="score-bg" src="../../../imgs/contest/score/num-bg.png"></image>
+        <view class="score-text">
+          您的得分是：
+          <view class="score-num">98</view>
+          分
+        </view>
+      </view>
+      <view class="text">排名</view>
+      <view class="ranking">
+        <image class="icon" mode="widthFix" src="../../../imgs/contest/score/icon.png"></image>
+        <view>12</view>
+      </view>
+      <view class="button-group">
+        <button class="">查看排行榜</button>
+        <button open-type="share">分享</button>
+      </view>
+    </view>
+  </view>
+</view>

pages/contest/score/score.wxss

@@ -0,0 +1,125 @@
+/* pages/contest/score/score.wxss */
+page {
+  background: #fff;
+}
+.bg {
+  position: fixed;
+  background: transparent;
+  width: 100%;
+  height: 100vh;
+  top: 0;
+  z-index: 0;
+}
+.content {
+  width: 100%;
+  height: 100vh;
+  position: relative;
+  z-index: 9;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.kuang {
+  width: 730rpx;
+  position: absolute;
+  background: transparent;
+  z-index: 9;
+}
+.detail {
+  position: relative;
+  z-index: 9;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 970rpx;
+}
+.title {
+  font-weight: bold;
+  font-size: 36rpx;
+  color: #161616;
+  margin-top: 124rpx;
+}
+.score {
+  margin-top: 52rpx;
+  position: relative;
+  width: 670rpx;
+  height: 266rpx;
+}
+.score-bg {
+  width: 670rpx;
+  height: 266rpx;
+  position: absolute;
+  background: transparent;
+  z-index: 1;
+}
+.score-text {
+  position: relative;
+  z-index: 9;
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+  margin-top: 70rpx;
+  font-size: 28rpx;
+  font-weight: 500;
+  color: #FFFFFF;
+}
+.score-num {
+  font-size: 72rpx;
+  font-weight: 500;
+  color: #FFBD92;
+  line-height: 60rpx;
+}
+.text {
+  font-size: 32rpx;
+  font-weight: 400;
+  color: #59598D;
+  margin-top: -20rpx;
+}
+.ranking {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  margin-top: 12rpx;
+  font-size: 52rpx;
+  font-weight: 500;
+  color: #FFFFFF;
+  height: 102rpx;
+}
+.icon{
+  position: absolute;
+  width: 112rpx;
+  z-index: 1;
+}
+.ranking > view {
+  position: relative;
+  z-index: 10;
+  margin-top: 10rpx;
+}
+.button-group {
+  margin-top: 36rpx;
+  display: flex;
+  justify-content: center;
+}
+button {
+  background-color: transparent;
+  
+  padding-left: 0;
+  
+  padding-right: 0;
+  line-height:inherit;
+  
+  }
+.button-group > button {
+  width: 284rpx;
+  height: 96rpx;
+  border-radius: 50rpx;
+  border: 2rpx solid #C7CCF9;
+  font-weight: 500;
+  color: #59598D;
+  font-size: 28rpx;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 5rpx;
+}

pages/home/home.wxml

@@ -10,7 +10,25 @@
     </view>
   </view>
 
-  <view class="hotNews fg">
+  <view class="home-nav-list">
+    <image src="../../imgs/home/nav-bg.png"></image>
+    <view class="home-nav-select">
+      <view class="contest">
+        <image mode="widthFix" src="../../imgs/home/contest.png"></image>
+        <view>参加竞赛</view>
+      </view>
+      <view class="ranking">
+        <image mode="widthFix" src="../../imgs/home/ranking.png"></image>
+        <view>排行榜</view>
+      </view>
+      <view class="study">
+        <image mode="widthFix" src="../../imgs/home/study.png"></image>
+        <view>在线学习</view>
+      </view>
+    </view>
+  </view>
+
+  <!-- <view class="hotNews fg">
     <view class="title">
       <view class="row crosscenter">
         <view class="bar"></view>
@@ -35,8 +53,33 @@
       </view>
 
     </view>
+  </view> -->
+
+  <view class="news-list">
+    <view class="hot-title">
+      <view class="title">热点头条</view>
+      <view class="more">
+      <view>更多</view>
+      <image mode="widthFix" src="../../imgs/home/arrow.png"></image></view>
+    </view>
+    <view class="news-list-content">
+      <view class="news-list-item" bindtap="clickArticle" wx:for="{{home.hotnews}}" wx:key data-i="{{index}}" data-id="{{item.id}}">
+        <image mode="widthFix" src="../../imgs/home/list-bg.png"></image>
+        <view class="content">
+          <image src="{{imgUrl + item.coverImage}}" class="left"></image>
+          <view class="right">
+            <view class="title">{{item.headlineTitle}}</view>
+            <view class="introduce">{{item.summary}}</view>
+            <view class="bottom">
+              <view class="tagR">赛事</view>
+              <view class="time">{{item.releaseTime}}</view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
   </view>
-  <view class="partners">
+  <!-- <view class="partners">
     <view class="title">
       <view class="row crosscenter">
         <view class="bar"></view>
@@ -58,7 +101,7 @@
       </view>
 
     </view>
-  </view>
+  </view> -->
   <!-- <view class="authorization">
     <button open-type="getUserInfo" bindgetuserinfo="getUserinfo">点击授权</button>
   </view> -->
@@ -232,7 +275,7 @@
 
 <!-- bottom navigation bar -->
 
-<view class="navigation row around fg">
+<!-- <view class="navigation row around fg">
   <view class="nav col crosscenter {{curNav == 0 && 'act'}}" bindtap="clickNav" data-cur="0">
     <image src="../../imgs/home{{curNav==0? '-act':''}}.png"></image>
     <text>首页</text>
@@ -244,7 +287,6 @@
   <view class="addTidings col crosscenter" bindtap="clickAddtidings" wx:if="{{curNav==2}}">
     <image src="../../imgs/add-tidings.png"></image>
   </view>
-  <!--  wx:if="{{config.open_space==1}}" -->
   <view class="nav col crosscenter {{curNav==2&&'act'}}" bindtap="clickNav" data-cur="2">
     <image src="../../imgs/community{{curNav==2?'-act':''}}.png"></image>
     <text>社区</text>
@@ -253,6 +295,31 @@
     <image src="../../imgs/mine{{curNav==3?'-act':''}}.png"></image>
     <text>我的</text>
   </view>
+</view> -->
+
+<view class="nav-list">
+  <image mode="widthFix" class="bg" src="../../imgs/nav/bg.png"></image>
+  <view class="nav-select">
+    <view class="home" bindtap="clickNav" data-cur="0">
+      <image mode="widthFix" src="../../imgs/nav/home{{curNav==0? '-active':''}}.png"></image>
+      <view>首页</view>
+    </view>
+    <view class="activity" bindtap="clickNav" data-cur="1">
+      <image mode="widthFix" src="../../imgs/nav/activity{{curNav==1? '-active':''}}.png"></image>
+      <view>活动</view>
+    </view>
+    <view class="release" bindtap="clickAddtidings" >
+      <image mode="widthFix" src="../../imgs/nav/release.png"></image>
+    </view>
+    <view class="community" bindtap="clickNav" data-cur="2">
+      <image mode="widthFix" src="../../imgs/nav/community{{curNav==2?'-active':''}}.png"></image>
+      <view>社区</view>
+    </view>
+    <view class="me" bindtap="clickNav" data-cur="3">
+      <image mode="widthFix" src="../../imgs/nav/me{{curNav==3?'-active':''}}.png"></image>
+      <view>我的</view>
+    </view>
+  </view>
 </view>
 
 <!-- community img and video upload mask -->

pages/home/home.wxss

@@ -2,9 +2,11 @@
 
 page {
   padding-bottom: 100rpx;
+  background: transparent;
   padding-bottom: calc(100rpx + constant(safe-area-inset-bottom));
   padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
   display: flex;
+  flex-direction: column;
   min-height: 100.1vh;
 }
 
@@ -378,3 +380,172 @@ page {
   height: 1em;
   width: 1em;
 }
+
+
+.nav-list {
+  position: fixed;
+  bottom: 0;
+  height: 160rpx;
+  width: 100%;
+  z-index: 10;
+  background: transparent;
+}
+.nav-select {
+  display: flex;
+  position: relative;
+  z-index: 10;
+  background: transparent;
+}
+.nav-select .home,.nav-select .activity,.nav-select .community,.nav-select .me {
+  flex: 1;
+  margin-top: 75rpx;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  background: transparent;
+}
+.nav-list image {
+  width: 40rpx;
+}
+.nav-list .bg {
+  width: 100%;
+  position: absolute;
+  z-index: 0;
+  background: transparent;
+}
+.nav-list .release {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+}
+.nav-list .release image{ 
+  width: 150rpx;
+  position: relative;
+}
+
+.home-nav-list {
+  height: 244rpx;
+  position: relative;
+  margin-top: -36rpx;
+}
+.home-nav-list > image{
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: 0;
+}
+.home-nav-select {
+  display: flex;
+  position: relative;
+  z-index: 9;
+  height: 90%;
+  width: 80%;
+  margin: auto;
+  font-size: 24rpx;
+  font-weight: bold; 
+  color: #2E3149;
+}
+.home-nav-select > view{
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+.home-nav-select image{ 
+  width: 120rpx;
+}
+
+.news-list .hot-title {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 30rpx;
+}
+.news-list .hot-title .title{
+  width: 128rpx;
+  height: 44rpx;
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #000000;
+  line-height: 44rpx;
+  margin-left: 48rpx;
+}
+.news-list .hot-title .more {
+  height: 34rpx;
+  color: #868AA8;
+  display: flex; 
+  font-size: 24rpx;
+  align-items: center;
+}
+.news-list .hot-title .more > image {
+  width: 28rpx;
+  margin: 0 34rpx 0 10rpx;
+  position: relative;
+}
+.news-list .news-list-content .news-list-item{
+  position: relative;
+  margin-top: -30rpx;
+}
+.news-list .news-list-content .news-list-item >image{
+  width: 100%;
+  position: absolute;
+  z-index: 0;
+}
+.news-list .news-list-content .news-list-item .content {
+  padding: 56rpx 60rpx 68rpx 50rpx;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  z-index: 9;
+}
+.news-list .news-list-content .news-list-item .content .left{
+  width: 292rpx;
+  height: 174rpx;
+  margin-right: 34rpx;
+  position: relative;
+  z-index: 0;
+}
+.news-list .news-list-content .news-list-item .content .right .title {
+  width: 312rpx;
+  height: 44rpx;
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #262626;
+  line-height: 44rpx;
+  margin-bottom: 14rpx;
+}
+.news-list .news-list-content .news-list-item .content .right .introduce {
+  width: 288rpx;
+  height: 68rpx;
+  font-size: 24rpx;
+  font-weight: bold;
+  color: #868AA8;
+  line-height: 34rpx;
+  margin-bottom: 12rpx;
+  text-overflow: -o-ellipsis-lastline;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+.news-list .news-list-content .news-list-item .content .right .bottom {
+  display: flex;
+  justify-content: space-between;
+}
+.news-list .news-list-content .news-list-item .content .right .bottom .tagR {
+  background: #83CEBE;
+  padding: 0 20rpx;
+  border-radius: 17rpx;
+  line-height: 34rpx;
+  font-size: 24rpx;
+  color: #FFFFFF;
+  height: 34rpx;
+}
+.news-list .news-list-content .news-list-item .content .right .bottom .time { 
+  font-size: 24rpx;
+  font-weight: 400;
+  color: #868AA8;
+  line-height: 34rpx;
+}

pages/hotnews/newsDetails/newsDetails.wxml

@@ -1,6 +1,9 @@
 <view class="title">{{news.headlineTitle}}</view>
 
-<view class="txtsub subtxt gaptop">{{news.releaseTime}}</view>
+<view class="title-bottom">
+  <view class="tagR">赛事</view>
+  <view class="time"><image mode="widthFix" src="../../../imgs/home/IconClock.png"></image><view>{{news.releaseTime}}</view></view>
+</view>
 
 <view class="content">
   <rich-text class="fullx" nodes="{{news.headlineContent}}"></rich-text>

pages/hotnews/newsDetails/newsDetails.wxss

@@ -1,13 +1,43 @@
 page {
-  padding: 1em;
+  padding: 0 50rpx;
   background-color: #fff
 }
 
 .title {
+  margin-top: 38rpx;
   font-size: 36rpx;
+  line-height: 44rpx;
+  color: #111111;
   font-weight: bold
 }
+.title-bottom {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 20rpx;
+}
+
+.title-bottom .tagR {
+  background: #83CEBE;
+  padding: 0 20rpx;
+  border-radius: 17rpx;
+  line-height: 34rpx;
+  font-size: 24rpx;
+  color: #FFFFFF;
+  height: 34rpx;
+}
+.title-bottom .time {
+  line-height: 40rpx;
+  font-size: 24rpx;
+  font-weight: 400;
+  color: #8D8D8D;
+  display: flex;
+  align-items: center;
+}
+.title-bottom .time > image {
+  width: 24rpx;
+  margin-right: 12rpx;
+}
 
 .content {
-  margin-top: 2.5em
+  margin-top: 50rpx;
 }