开发评论页面

app.json

@@ -4,6 +4,7 @@
     "pages/activity/index",
     "pages/message/index",
     "pages/like/index",
+    "pages/comment/index",
     "pages/match/index",
     "pages/pkResult/index",
     "pages/medalStore/index",

pages/comment/index.js

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

pages/comment/index.json

@@ -0,0 +1,4 @@
+{
+  "usingComponents": {},
+  "navigationBarTitleText": "评论"
+}

pages/comment/index.less

@@ -0,0 +1,46 @@
+.commentPage {
+  .notes {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    padding: 20rpx 40rpx;
+    border-bottom: 1px solid #D8D8D8;
+
+    .avatar {
+      width: 80rpx;
+      height: 80rpx;
+      border-radius: 50%;
+      background-color: skyblue;
+    }
+
+    .body {
+      flex: 1;
+      margin-left: 24rpx;
+
+      .nickName {
+        font-size: 30rpx;
+      }
+
+      .date {
+        margin: 10rpx 0rpx;
+        padding-right: 50rpx;
+        font-size: 24rpx;
+      }
+
+      .reply {
+        display: inline-block;
+        padding: 4rpx 10rpx;
+        border-radius: 10rpx;
+        background-color: #e7e7e7;
+        font-size: 22rpx;
+      }
+    }
+
+    .cover {
+      width: 134rpx;
+      height: 74rpx;
+      border-radius: 10rpx;
+      background-color: skyblue;
+    }
+  }
+}

pages/comment/index.wxml

@@ -0,0 +1,13 @@
+<view class="commentPage">
+  <view class="notes">
+    <image src="/static/stars-1.png" class="avatar" />
+    <view class="body">
+      <view class="nickName">帅气席尔瓦去</view>
+      <view class="date">
+        评论了你：<text>朗读的太棒啦！朗读的太棒啦！朗读的太棒啦！3213213我去饿我去恶趣味 2023-3-14</text>
+      </view>
+      <view class="reply">回复评论</view>
+    </view>
+    <image src="/static/heart_colored.png" class="cover" />
+  </view>
+</view>

pages/comment/index.wxss

@@ -0,0 +1,38 @@
+.commentPage .notes {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  padding: 20rpx 40rpx;
+  border-bottom: 1px solid #D8D8D8;
+}
+.commentPage .notes .avatar {
+  width: 80rpx;
+  height: 80rpx;
+  border-radius: 50%;
+  background-color: skyblue;
+}
+.commentPage .notes .body {
+  flex: 1;
+  margin-left: 24rpx;
+}
+.commentPage .notes .body .nickName {
+  font-size: 30rpx;
+}
+.commentPage .notes .body .date {
+  margin: 10rpx 0rpx;
+  padding-right: 50rpx;
+  font-size: 24rpx;
+}
+.commentPage .notes .body .reply {
+  display: inline-block;
+  padding: 4rpx 10rpx;
+  border-radius: 10rpx;
+  background-color: #e7e7e7;
+  font-size: 22rpx;
+}
+.commentPage .notes .cover {
+  width: 134rpx;
+  height: 74rpx;
+  border-radius: 10rpx;
+  background-color: skyblue;
+}

pages/like/index.less

@@ -1,7 +1,7 @@
 .like {
   .notes {
     display: flex;
-    align-items: center;
+    align-items: flex-start;
     justify-content: space-between;
     padding: 20rpx 40rpx;
     border-bottom: 1px solid #D8D8D8;

pages/like/index.wxss

@@ -1,6 +1,6 @@
 .like .notes {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   justify-content: space-between;
   padding: 20rpx 40rpx;
   border-bottom: 1px solid #D8D8D8;

pages/message/index.wxml

@@ -5,7 +5,7 @@
     <image src="/static/search-2.png" class="magnifier" />
   </view>
   <view class="messageList">
-    <view class="base authority">
+    <view class="base authority" bindtap="jump" data-url='comment'>
       <image src="/static/message3.png" class="avatar" />
       <view class="body">
         <view class="name">评论</view>