Kaynağa Gözat

新增各个页面查看更多和分享页面更改

Limengbo 6 yıl önce
ebeveyn
işleme
65ec227999

+ 1 - 1
compontents/chat/chat.wxml

@@ -23,7 +23,7 @@
             </view>
             <view class="picture" wx:if="{{type == 2}}">
                 <block wx:for="{{item.imagesList}}" wx:for-item="items" wx:key="{{items.id}}">
-                <image src="{{items.path}}" bindtap="listenerButtonPreviewImage" data-img="{{items.path}}"></image>
+                    <image src="{{items.path}}" bindtap="listenerButtonPreviewImage" data-img="{{items.path}}"></image>
                 </block>
             </view>
             <view class="icon">

+ 26 - 13
pages/art/art.js

@@ -9,7 +9,9 @@ Page({
     flag: false,
     productionData: {},
     questionsData: {},
-    courseData: {}
+    courseData: {},
+    num1: 0,
+    num2: 0,
   },
 
   /* 区分答疑和分享 */
@@ -42,25 +44,36 @@ Page({
 
   onMyEvent: function(e){
     let type = e.currentTarget.dataset.type;
-    let num = e.currentTarget.dataset.num;
-    num++;
     const columnId = util.column('6').columnId;
-    this.distinction(type, columnId, 1, 5*num, res => {
-      if(res.data.success) {
-        console.log(res.data.data)
-        if(type == 1) {
+    if(type == 1) {
+      this.data.num1++
+      this.setData({
+        num1: this.data.num1
+      })
+      this.distinction(type, columnId, 1, 5*this.data.num1, res => {
+        if(res.data.success) {
+          console.log(res.data.data)
           this.setData({
             questionsData: res.data.data,
-          })
+          })      
         }
-        if(type == 2) {
+      });
+    }
+    
+    if(type == 2) {
+      this.data.num2++
+      this.setData({
+        num: this.data.num2
+      })
+      this.distinction(type, columnId, 1, 5*this.data.num2, res => {
+        if(res.data.success) {
+          console.log(res.data.data)
           this.setData({
             productionData: res.data.data,
-          })
+          })   
         }
-        
-      }
-    });
+      });
+    }
   },
 
   onLoad: function (options) {

+ 5 - 5
pages/art/art.wxml

@@ -20,8 +20,7 @@
                 type="2"
                 columnType="6"
                 bind:myevent="onMyEvent"
-                data-type="2"
-                data-num="0"/>
+                data-type="2"/>
 
             <chat 
                 productionData="{{questionsData}}" 
@@ -30,16 +29,17 @@
                 type="1"
                 columnType="6"
                 bind:myevent="onMyEvent"
-                data-type="1"
-                data-num="0"/>
+                data-type="1"/>
 
             <view class="questions-one">
                 <image src="../image/q_discuss.png" ></image>
+                <text class="row" wx:if="{{questionsData.list.length}}">{{questionsData.list.length}}</text>
             </view>
 
             <view class="upload-one">
                 <image src="../image/works.png" ></image>
-            </view> 
+                <text class="row" wx:if="{{productionData.list.length}}">{{productionData.list.length}}</text>
+            </view>  
           </view>
       </scroll-view>
   </view>

+ 14 - 0
pages/art/art.wxss

@@ -292,4 +292,18 @@
 .upload-one image {
     width: 100%;
     height: 100%;
+}
+
+.row {
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 32rpx;
+    height: 32rpx;
+    text-align: center;
+    line-height: 32rpx;
+    color: #fff;
+    background: #F73861;
+    font-size: 24rpx;
+    border-radius: 50%;
 }

+ 48 - 31
pages/chinese/chinese.js

@@ -8,11 +8,55 @@ Page({
   data: {
     flag: false,
     questionsData: {},
-    courseData: {}
+    courseData: {},
+    num1: 0
   },
 
-  methods: {
-
+  /* 区分答疑和分享 */
+  distinction: function(type, columnId, pageNo, pageSize, success) {
+    login.getOpenidSessionKey(function(res) {
+      //console.log(res.data.data.uid);
+      APIClient.getProductionSchedule({
+        uid: res.data.data.uid
+      }, {
+        "type": type,
+        "columnId": columnId,
+        "pageNo": pageNo,
+        "pageSize": pageSize
+      }).success(success)
+    }, function() {
+      wx.showModal({
+        title: '提示',
+        content: '需要获取您的公开信息(昵称、头像等),请从小程序列表删除小学王者班后再次扫码进入,允许授权后可正常使用',
+        showCancel: false,
+        success: function (res) {
+          if (res.confirm) {
+            console.log('用户点击确定')
+          } else if (res.cancel) {
+            console.log('用户点击取消')
+          }
+        }
+      })
+    });
+  },
+  /*加载更多点击*/
+  onMyEvent: function(e){
+    let type = e.currentTarget.dataset.type;
+    const columnId = util.column('3').columnId;
+    if(type == 1) {
+      this.data.num1++
+      this.setData({
+        num1: this.data.num1
+      })
+      this.distinction(type, columnId, 1, 5*this.data.num1, res => {
+        if(res.data.success) {
+          console.log(res.data.data)
+          this.setData({
+            questionsData: res.data.data,
+          })      
+        }
+      });
+    }
   },
 
   onLoad: function (options) {
@@ -21,35 +65,8 @@ Page({
 
   onShow: function () {
     const columnId = util.column('3').columnId;
-    /* 区分答疑和分享 */
-    let distinction = (type, columnId, success) => {
-      login.getOpenidSessionKey(function(res) {
-        //console.log(res.data.data.uid);
-        APIClient.getProductionSchedule({
-          uid: res.data.data.uid
-        }, {
-          "type": type,
-          "columnId": columnId,
-          "pageNo": 1,
-          "pageSize": 6
-        }).success(success)
-      }, function() {
-        wx.showModal({
-          title: '提示',
-          content: '需要获取您的公开信息(昵称、头像等),请从小程序列表删除小学王者班后再次扫码进入,允许授权后可正常使用',
-          showCancel: false,
-          success: function (res) {
-            if (res.confirm) {
-              console.log('用户点击确定')
-            } else if (res.cancel) {
-              console.log('用户点击取消')
-            }
-          }
-        })
-      });
-    };
     /* 答疑 */
-    distinction(1, columnId, res => {
+    this.distinction(1, columnId, 1, 2, res => {
       if(res.data.success) {
         console.log(res.data.data)
         this.setData({

+ 4 - 1
pages/chinese/chinese.wxml

@@ -18,11 +18,14 @@
                 title="答疑讨论"
                 query="我有疑问"
                 type="1"
-                columnType="3"/>
+                columnType="3"
+                bind:myevent="onMyEvent"
+                data-type="1"/>
 
 
             <view class="questions-one">
                 <image src="../image/q_discuss.png" ></image>
+                <text class="row" wx:if="{{questionsData.list.length}}">{{questionsData.list.length}}</text>
             </view>
           </view>
       </scroll-view>

+ 14 - 0
pages/chinese/chinese.wxss

@@ -82,4 +82,18 @@
 .upload-one image {
     width: 100%;
     height: 100%;
+}
+
+.row {
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 32rpx;
+    height: 32rpx;
+    text-align: center;
+    line-height: 32rpx;
+    color: #fff;
+    background: #F73861;
+    font-size: 24rpx;
+    border-radius: 50%;
 }

+ 48 - 31
pages/english/english.js

@@ -8,11 +8,55 @@ Page({
   data: {
     flag: false,
     questionsData: {},
-    courseData: {}
+    courseData: {},
+    num1: 0
   },
 
-  methods: {
-
+  /* 区分答疑和分享 */
+  distinction: function(type, columnId, pageNo, pageSize, success) {
+    login.getOpenidSessionKey(function(res) {
+      //console.log(res.data.data.uid);
+      APIClient.getProductionSchedule({
+        uid: res.data.data.uid
+      }, {
+        "type": type,
+        "columnId": columnId,
+        "pageNo": pageNo,
+        "pageSize": pageSize
+      }).success(success)
+    }, function() {
+      wx.showModal({
+        title: '提示',
+        content: '需要获取您的公开信息(昵称、头像等),请从小程序列表删除小学王者班后再次扫码进入,允许授权后可正常使用',
+        showCancel: false,
+        success: function (res) {
+          if (res.confirm) {
+            console.log('用户点击确定')
+          } else if (res.cancel) {
+            console.log('用户点击取消')
+          }
+        }
+      })
+    });
+  },
+  /*加载更多点击*/
+  onMyEvent: function(e){
+    let type = e.currentTarget.dataset.type;
+    const columnId = util.column('4').columnId;
+    if(type == 1) {
+      this.data.num1++
+      this.setData({
+        num1: this.data.num1
+      })
+      this.distinction(type, columnId, 1, 5*this.data.num1, res => {
+        if(res.data.success) {
+          console.log(res.data.data)
+          this.setData({
+            questionsData: res.data.data,
+          })      
+        }
+      });
+    }
   },
 
   onLoad: function (options) {
@@ -21,35 +65,8 @@ Page({
 
   onShow: function () {
     const columnId = util.column('4').columnId;
-    /* 区分答疑和分享 */
-    let distinction = (type, columnId, success) => {
-      login.getOpenidSessionKey(function(res) {
-        //console.log(res.data.data.uid);
-        APIClient.getProductionSchedule({
-          uid: res.data.data.uid
-        }, {
-          "type": type,
-          "columnId": columnId,
-          "pageNo": 1,
-          "pageSize": 2
-        }).success(success)
-      }, function() {
-        wx.showModal({
-          title: '提示',
-          content: '需要获取您的公开信息(昵称、头像等),请从小程序列表删除小学王者班后再次扫码进入,允许授权后可正常使用',
-          showCancel: false,
-          success: function (res) {
-            if (res.confirm) {
-              console.log('用户点击确定')
-            } else if (res.cancel) {
-              console.log('用户点击取消')
-            }
-          }
-        })
-      });
-    };
     /* 答疑 */
-    distinction(1, columnId, res => {
+    this.distinction(1, columnId, 1, 2, res => {
       if(res.data.success) {
         console.log(res.data.data)
         this.setData({

+ 4 - 1
pages/english/english.wxml

@@ -18,11 +18,14 @@
                 title="答疑讨论"
                 query="我有疑问"
                 type="1"
-                columnType="4"/>
+                columnType="4"
+                bind:myevent="onMyEvent"
+                data-type="1"/>
 
 
             <view class="questions-one">
                 <image src="../image/q_discuss.png" ></image>
+                <text class="row" wx:if="{{questionsData.list.length}}">{{questionsData.list.length}}</text>
             </view>
           </view>
       </scroll-view>

+ 14 - 0
pages/english/english.wxss

@@ -82,4 +82,18 @@
 .upload-one image {
     width: 100%;
     height: 100%;
+}
+
+.row {
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 32rpx;
+    height: 32rpx;
+    text-align: center;
+    line-height: 32rpx;
+    color: #fff;
+    background: #F73861;
+    font-size: 24rpx;
+    border-radius: 50%;
 }

+ 3 - 6
pages/input_content/input_content.js

@@ -53,7 +53,6 @@ Page({
         that.setData({
           tempFilePath: tempFilePaths
         })
-
         var uploadImgCount = 0;  
         for (var i = 0, h = tempFilePaths.length; i < h; i++) {  
           //上传文件
@@ -67,10 +66,9 @@ Page({
             success: function (res) {  
               uploadImgCount++;  
               let data = JSON.parse(res.data);
-              let imgId = [];
-              imgId.push(data.data.id)
+              that.data.imgId.push(data.data.id)
               that.setData({
-                imgId: imgId,
+                imgId: that.data.imgId,
               })
               console.log(data);
               //如果是最后一张,则隐藏等待中  
@@ -118,8 +116,7 @@ Page({
       "columnId": columnId,
       "columnType": columnType,
       "columnNames": columnName,
-    };
-    console.log(data);
+    }; 
     if(type == 2){
       data.imagesStrList = this.data.imgId
     }

+ 48 - 31
pages/language/language.js

@@ -8,11 +8,55 @@ Page({
   data: {
     flag: false,
     questionsData: {},
-    courseData: {}
+    courseData: {},
+    num1: 0
   },
 
-  methods: {
-
+  /* 区分答疑和分享 */
+  distinction: function(type, columnId, pageNo, pageSize, success) {
+    login.getOpenidSessionKey(function(res) {
+      //console.log(res.data.data.uid);
+      APIClient.getProductionSchedule({
+        uid: res.data.data.uid
+      }, {
+        "type": type,
+        "columnId": columnId,
+        "pageNo": pageNo,
+        "pageSize": pageSize
+      }).success(success)
+    }, function() {
+      wx.showModal({
+        title: '提示',
+        content: '需要获取您的公开信息(昵称、头像等),请从小程序列表删除小学王者班后再次扫码进入,允许授权后可正常使用',
+        showCancel: false,
+        success: function (res) {
+          if (res.confirm) {
+            console.log('用户点击确定')
+          } else if (res.cancel) {
+            console.log('用户点击取消')
+          }
+        }
+      })
+    });
+  },
+  /*加载更多点击*/
+  onMyEvent: function(e){
+    let type = e.currentTarget.dataset.type;
+    const columnId = util.column('1').columnId;
+    if(type == 1) {
+      this.data.num1++
+      this.setData({
+        num1: this.data.num1
+      })
+      this.distinction(type, columnId, 1, 5*this.data.num1, res => {
+        if(res.data.success) {
+          console.log(res.data.data)
+          this.setData({
+            questionsData: res.data.data,
+          })      
+        }
+      });
+    }
   },
 
   onLoad: function (options) {
@@ -20,35 +64,8 @@ Page({
 
   onShow: function () {
     const columnId = util.column('1').columnId;
-    /* 区分答疑和分享 */
-    let distinction = (type, columnId, success) => {
-      login.getOpenidSessionKey(function(res) {
-        //console.log(res.data.data.uid);
-        APIClient.getProductionSchedule({
-          uid: res.data.data.uid
-        }, {
-          "type": type,
-          "columnId": columnId,
-          "pageNo": 1,
-          "pageSize": 2
-        }).success(success)
-      }, function() {
-        wx.showModal({
-          title: '提示',
-          content: '需要获取您的公开信息(昵称、头像等),请从小程序列表删除小学王者班后再次扫码进入,允许授权后可正常使用',
-          showCancel: false,
-          success: function (res) {
-            if (res.confirm) {
-              console.log('用户点击确定')
-            } else if (res.cancel) {
-              console.log('用户点击取消')
-            }
-          }
-        })
-      });
-    };
     /* 答疑 */
-    distinction(1, columnId, res => {
+    this.distinction(1, columnId, 1, 2, res => {
       if(res.data.success) {
         console.log(res.data.data)
         this.setData({

+ 4 - 1
pages/language/language.wxml

@@ -18,11 +18,14 @@
                 title="答疑讨论"
                 query="我有疑问"
                 type="1"
-                columnType="1"/>
+                columnType="1"
+                bind:myevent="onMyEvent"
+                data-type="1"/>
 
 
             <view class="questions-one">
                 <image src="../image/q_discuss.png" ></image>
+                <text class="row" wx:if="{{questionsData.list.length}}">{{questionsData.list.length}}</text>
             </view>
           </view>
       </scroll-view>

+ 14 - 0
pages/language/language.wxss

@@ -104,4 +104,18 @@
 .upload-one image {
     width: 100%;
     height: 100%;
+}
+
+.row {
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 32rpx;
+    height: 32rpx;
+    text-align: center;
+    line-height: 32rpx;
+    color: #fff;
+    background: #F73861;
+    font-size: 24rpx;
+    border-radius: 50%;
 }

+ 48 - 30
pages/mathematics/mathematics.js

@@ -8,10 +8,55 @@ Page({
   data: {
     flag: false,
     questionsData: {},
-    courseData: {}
+    courseData: {},
+    num1: 0
   },
 
-  methods: {
+  /* 区分答疑和分享 */
+  distinction: function(type, columnId, pageNo, pageSize, success) {
+    login.getOpenidSessionKey(function(res) {
+      //console.log(res.data.data.uid);
+      APIClient.getProductionSchedule({
+        uid: res.data.data.uid
+      }, {
+        "type": type,
+        "columnId": columnId,
+        "pageNo": pageNo,
+        "pageSize": pageSize
+      }).success(success)
+    }, function() {
+      wx.showModal({
+        title: '提示',
+        content: '需要获取您的公开信息(昵称、头像等),请从小程序列表删除小学王者班后再次扫码进入,允许授权后可正常使用',
+        showCancel: false,
+        success: function (res) {
+          if (res.confirm) {
+            console.log('用户点击确定')
+          } else if (res.cancel) {
+            console.log('用户点击取消')
+          }
+        }
+      })
+    });
+  },
+  /*加载更多点击*/
+  onMyEvent: function(e){
+    let type = e.currentTarget.dataset.type;
+    const columnId = util.column('2').columnId;
+    if(type == 1) {
+      this.data.num1++
+      this.setData({
+        num1: this.data.num1
+      })
+      this.distinction(type, columnId, 1, 5*this.data.num1, res => {
+        if(res.data.success) {
+          console.log(res.data.data)
+          this.setData({
+            questionsData: res.data.data,
+          })      
+        }
+      });
+    }
   },
 
   onLoad: function (options) {
@@ -19,35 +64,8 @@ Page({
 
   onShow: function () {
     const columnId = util.column('2').columnId;
-    /* 区分答疑和分享 */
-    let distinction = (type, columnId, success) => {
-      login.getOpenidSessionKey(function(res) {
-        //console.log(res.data.data.uid);
-        APIClient.getProductionSchedule({
-          uid: res.data.data.uid
-        }, {
-          "type": type,
-          "columnId": columnId,
-          "pageNo": 1,
-          "pageSize": 6
-        }).success(success)
-      }, function() {
-        wx.showModal({
-          title: '提示',
-          content: '需要获取您的公开信息(昵称、头像等),请从小程序列表删除小学王者班后再次扫码进入,允许授权后可正常使用',
-          showCancel: false,
-          success: function (res) {
-            if (res.confirm) {
-              console.log('用户点击确定')
-            } else if (res.cancel) {
-              console.log('用户点击取消')
-            }
-          }
-        })
-      });
-    };
     /* 答疑 */
-    distinction(1, columnId, res => {
+    this.distinction(1, columnId, 1, 2, res => {
       if(res.data.success) {
         console.log(res.data.data)
         this.setData({

+ 4 - 1
pages/mathematics/mathematics.wxml

@@ -18,11 +18,14 @@
                 title="答疑讨论"
                 query="我有疑问"
                 type="1"
-                columnType="2"/>
+                columnType="2"
+                bind:myevent="onMyEvent"
+                data-type="1"/>
 
 
             <view class="questions-one">
                 <image src="../image/q_discuss.png" ></image>
+                <text class="row" wx:if="{{questionsData.list.length}}">{{questionsData.list.length}}</text>
             </view>
           </view>
       </scroll-view>

+ 14 - 0
pages/mathematics/mathematics.wxss

@@ -105,4 +105,18 @@
 .upload-one image {
     width: 100%;
     height: 100%;
+}
+
+.row {
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 32rpx;
+    height: 32rpx;
+    text-align: center;
+    line-height: 32rpx;
+    color: #fff;
+    background: #F73861;
+    font-size: 24rpx;
+    border-radius: 50%;
 }

+ 65 - 36
pages/science/science.js

@@ -9,15 +9,71 @@ Page({
     flag: false,
     productionData: {},
     questionsData: {},
-    courseData: {}
+    courseData: {},
+    num1: 0,
+    num2: 0
   },
-
-  methods: {
-    shareImage: function(e) {
-      console.log(e.target.dataset.flag)
+  /* 区分答疑和分享 */
+  distinction: function(type, columnId, pageNo, pageSize, success) {
+    login.getOpenidSessionKey(function(res) {
+      //console.log(res.data.data.uid);
+      APIClient.getProductionSchedule({
+        uid: res.data.data.uid
+      }, {
+        "type": type,
+        "columnId": columnId,
+        "pageNo": pageNo,
+        "pageSize": pageSize
+      }).success(success)
+    }, function() {
+      wx.showModal({
+        title: '提示',
+        content: '需要获取您的公开信息(昵称、头像等),请从小程序列表删除小学王者班后再次扫码进入,允许授权后可正常使用',
+        showCancel: false,
+        success: function (res) {
+          if (res.confirm) {
+            console.log('用户点击确定')
+          } else if (res.cancel) {
+            console.log('用户点击取消')
+          }
+        }
+      })
+    });
+  },
+  /*点击查看更多*/
+  onMyEvent: function(e){
+    let type = e.currentTarget.dataset.type;
+    const columnId = util.column('5').columnId;
+    if(type == 1) {
+      this.data.num1++
+      this.setData({
+        num1: this.data.num1
+      })
+      this.distinction(type, columnId, 1, 5*this.data.num1, res => {
+        if(res.data.success) {
+          console.log(res.data.data)
+          this.setData({
+            questionsData: res.data.data,
+          })      
+        }
+      });
+    }
+    
+    if(type == 2) {
+      this.data.num2++
+      this.setData({
+        num: this.data.num2
+      })
+      this.distinction(type, columnId, 1, 5*this.data.num2, res => {
+        if(res.data.success) {
+          console.log(res.data.data)
+          this.setData({
+            productionData: res.data.data,
+          })   
+        }
+      });
     }
   },
-
   onLoad: function (options) {
     //分享按钮
     wx.showShareMenu({
@@ -27,35 +83,8 @@ Page({
 
   onShow: function () {
     const columnId = util.column('5').columnId;
-    /* 区分答疑和分享 */
-    let distinction = (type, success) => {
-      login.getOpenidSessionKey(function(res) {
-        //console.log(res.data.data.uid);
-        APIClient.getProductionSchedule({
-          uid: res.data.data.uid
-        }, {
-          "type": type,
-          "columnId": columnId,
-          "pageNo": 1,
-          "pageSize": 2
-        }).success(success)
-      }, function() {
-        wx.showModal({
-          title: '提示',
-          content: '需要获取您的公开信息(昵称、头像等),请从小程序列表删除小学王者班后再次扫码进入,允许授权后可正常使用',
-          showCancel: false,
-          success: function (res) {
-            if (res.confirm) {
-              console.log('用户点击确定')
-            } else if (res.cancel) {
-              console.log('用户点击取消')
-            }
-          }
-        })
-      });
-    };
     /* 分享 */
-    distinction(2, res => {
+    this.distinction(2, columnId, 1, 2, res => {
       if(res.data.success) {
         console.log(res.data.data)
         this.setData({
@@ -65,7 +94,7 @@ Page({
       
     });
     /* 答疑 */
-    distinction(1, res => {
+    this.distinction(1, columnId, 1, 2, res => {
       if(res.data.success) {
         console.log(res.data.data)
         this.setData({
@@ -110,7 +139,7 @@ Page({
     const postId = ops.target.dataset.postid;
     return {
       title: '小学王者班',
-      path: `pages/transmit/transmit?ind=7&postId=${postId}`,
+      path: `pages/transmit/transmit?ind=6&postId=${postId}`,
       success: function (res) {
         // 转发成功
         console.log("转发成功:" + JSON.stringify(res));

+ 10 - 5
pages/science/science.wxml

@@ -18,23 +18,28 @@
                 title="作品分享"
                 query="分享作品"
                 type="2"
-                columnType="5"/>
+                columnType="5"
+                bind:myevent="onMyEvent"
+                data-type="2"/>
 
             <chat 
                 productionData="{{questionsData}}" 
                 title="答疑讨论"
                 query="我有疑问"
                 type="1"
-                columnType="5"/>
-
+                columnType="5"
+                bind:myevent="onMyEvent"
+                data-type="1"/>
 
             <view class="questions-one">
                 <image src="../image/q_discuss.png" ></image>
+                <text class="row" wx:if="{{questionsData.list.length}}">{{questionsData.list.length}}</text>
             </view>
 
             <view class="upload-one">
-            <image src="../image/works.png" ></image>
-            </view> 
+                <image src="../image/works.png" ></image>
+                <text class="row" wx:if="{{productionData.list.length}}">{{productionData.list.length}}</text>
+            </view>  
           </view>
       </scroll-view>
   </view>

+ 14 - 0
pages/science/science.wxss

@@ -292,4 +292,18 @@
 .upload-one image {
     width: 100%;
     height: 100%;
+}
+
+.row {
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 32rpx;
+    height: 32rpx;
+    text-align: center;
+    line-height: 32rpx;
+    color: #fff;
+    background: #F73861;
+    font-size: 24rpx;
+    border-radius: 50%;
 }