浏览代码

测试前

Rorschach 6 年之前
父节点
当前提交
6a18394218

+ 0 - 7
app.js

@@ -7,13 +7,6 @@ App({
   onLaunch: function (options) {
     // 判断设备是否为 iPhone X
     this.checkIsIPhoneX()
-    console.log(options);
-    if(!wx.getStorageSync('user')){
-      wx.setStorageSync('options',options)
-      wx.navigateTo({
-        url: './pages/loginPage/loginPage'
-      })
-    }
   },
   globalData: {
     isIPX: false, // 当前设备是否为 iPhone X

+ 0 - 1
app.json

@@ -1,7 +1,6 @@
 {
   "pages": [
     "pages/index/index",
-    "pages/loginPage/loginPage",
     "pages/social/works/works",
     "pages/social/insideMessage/insideMessage",
     "pages/social/replyDetail/replyDetail",

+ 1 - 10
component/group/group.js

@@ -191,14 +191,5 @@ export const groupInit = (that) => {
     // }
 
   }
-  //跳转到课程详情
-  that.goToBook = function (e) {
-    console.log(e.currentTarget.dataset)
-    let id = e.currentTarget.dataset.id;
-    let title = e.currentTarget.dataset.title;
-    console.log(id)
-    wx.navigateTo({
-      url: `/pages/groupPage/grade-details/grade-details?productId=${id}&title=${title}`
-    })
-  }
+
 }

+ 11 - 2
component/hot/hot.js

@@ -24,8 +24,7 @@ export const hotInit = (that) => {
         winH: that.data.winH,
         searchIcon: true,
         unReadMessageNum: 0,
-        myCourse: [],
-        swiperCurrent: 0
+        myCourse: []
         // circular: true
       }
     }),
@@ -187,4 +186,14 @@ export const hotInit = (that) => {
       [str]: e.detail.current
     });
   }
+  //跳转到课程详情
+  that.goToBook = function (e) {
+    console.log(e.currentTarget.dataset)
+    let id = e.currentTarget.dataset.id;
+    let title = e.currentTarget.dataset.title;
+    console.log(id)
+    wx.navigateTo({
+      url: `/pages/groupPage/grade-details/grade-details?productId=${id}&title=${title}`
+    })
+  }
 }

+ 7 - 16
component/hot/hot.wxml

@@ -1,11 +1,7 @@
 <template name="hot">
     <view class="messageSection" wx:if="{{hotData.unReadMessageNum > 0}}" bindtap="goToMessage">
-        <image class="messageIcon" src="../../static/image/message_icon.png" />
-        <text class="messageText">
-            您有
-            <text class="red-text">{{hotData.unReadMessageNum}}</text>
-            条未读消息【立即查看】
-        </text>
+        <image class="messageIcon" src="../../static/image/message_icon.png"  />
+        <text class="messageText">您有<text class="red-text">{{hotData.unReadMessageNum}}</text>条未读消息【立即查看】</text>
     </view>
     <view class="myCourseSection">
         <view class="title-regular">我的课程</view>
@@ -14,7 +10,7 @@
         </view>
         <view class="book-box" wx:if="{{hotData.myCourse.length !== 0}}">
             <block wx:for="{{hotData.myCourse}}" wx:key="{{index}}">
-                <view class="book-item" data-id="{{item.id}}" data-title="{{item.title}}" bindtap="goToBook">
+                <view class="book-item" data-id="{{item.id}}" bindtap="goToBook" data-title="{{item.title}}">
                     <image class="book-img" src="{{item.iconImg}}"></image>
                     <view class="book-title">{{item.title}}</view>
                 </view>
@@ -35,7 +31,7 @@
     </view>
     <view class="swiperSection">
         <view class="title-regular swiper-title">官方推荐</view>
-        <swiper previous-margin="0" next-margin="243rpx" bindchange="swiperChange" current="{{hotData.swiperCurrent}}" circular="{{true}}" autoplay="{{hotData.autoplay}}" interval="{{hotData.interval}}" duration="{{hotData.duration}}" circular="{{hotData.circular}}">
+        <swiper previous-margin="0" next-margin="243rpx" circular="{{true}}" autoplay="{{hotData.autoplay}}" interval="{{hotData.interval}}" duration="{{hotData.duration}}" circular="{{hotData.circular}}">
             <block wx:for="{{hotData.recommend}}" wx:key="{{index}}">
                 <swiper-item class="slide-item" bindtap="openClass" data-classId="{{item.classId}}" data-title="{{item.title}}">
                     <image src="{{item.img}}" data-type="{{item.type}}" data-id="{{item.id}}" class="slide-image" />
@@ -46,16 +42,11 @@
                 </swiper-item>
             </block>
         </swiper>
-        <view class="swiper-dots-wrapper">
-            <block wx:for="{{hotData.recommend}}" wx:key="{{index}}">
-                <view class="swiper-dots {{hotData.swiperCurrent === index ? 'dot-active' : ''}}">
-                    <text>{{index + 1}}</text>
-                </view>
-            </block>
-        </view>
     </view>
     <view class="recommdSection">
-        <view class="recommd-title">热门作品</view>
+        <view class="recommd-title">
+            热门作品
+        </view>
         <view class="hotWares">
             <view wx:for="{{hotData.hotWorks}}" wx:key="{{index}}" class="worksCard" bindtap="openWorks" data-readId="{{item.classId}}" data-title="{{item.title}}">
                 <view class="topData">

+ 0 - 24
component/hot/hot.wxss

@@ -294,30 +294,6 @@ swiper {
     left: 32rpx;
 }
 
-.swiper-dots-wrapper{
-    display: flex;
-    position: absolute;
-    right: 13rpx;
-    top: 17rpx;
-}
-
-.swiper-dots{
-    width: 28rpx;
-    height: 28rpx;
-    background: #D0D0D0;
-    border-radius: 50%;
-    font-size: 24rpx;
-    line-height: 28rpx;
-    text-align: center;
-    color: #fff;
-    font-weight: 800;
-    margin-right: 5rpx;
-}
-
-.dot-active{
-    background: #12c962;
-}
-
 .myCourseSection .myCoursePlaceHolder {
     width: 100%;
     height: 100%;

+ 6 - 6
pages/index/index.js

@@ -135,12 +135,12 @@ Page({
       title: '小学课文朗读配音'
     })
     // this.init();
-    // getOpenidSessionKey((res) => {}, (error) => {
-    //   // console.log(error)
-    //   wx.navigateTo({
-    //     url: '../../pages/loginPage/loginPage'
-    //   })
-    // });
+    getOpenidSessionKey((res) => {}, (error) => {
+      // console.log(error)
+      this.setData({
+        hide: !this.data.hide
+      })
+    });
     if (this.data.myIndex === 3) {
       this.getUserWorksInfo();
     }

+ 0 - 73
pages/loginPage/loginPage.js

@@ -1,73 +0,0 @@
-import httpRequestApi from '../../utils/APIClient';
-import httpUtil from '../../utils/httpUtil'
-Page({
-  /**
-   * 页面的初始数据
-   */
-  data: {
-    collection_data: []
-  },
-  /**
-   * 生命周期函数--监听页面加载
-   */
-  onLoad: function (option) {
-    console.log(option.title);
-  },
-
-  /**
-   * 生命周期函数--监听页面初次渲染完成
-   */
-  onReady: function () {
-
-  },
-  getUser:function(e){
-    console.log(e)
-    const options = wx.getStorageSync('options');
-    httpUtil.getOpenidSessionKey(res => {
-      wx.redirectTo({
-        url: `../../${options.path}`
-      })
-  });
-  },
-  /**
-   * 生命周期函数--监听页面显示
-   */
-  onShow: function () {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面隐藏
-   */
-  onHide: function () {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面卸载
-   */
-  onUnload: function () {
-
-  },
-
-  /**
-   * 页面相关事件处理函数--监听用户下拉动作
-   */
-  onPullDownRefresh: function () {
-
-  },
-
-  /**
-   * 页面上拉触底事件的处理函数
-   */
-  onReachBottom: function () {
-
-  },
-
-  /**
-   * 用户点击右上角分享
-   */
-  onShareAppMessage: function () {
-
-  }
-})

+ 0 - 3
pages/loginPage/loginPage.json

@@ -1,3 +0,0 @@
-{
-  "usingComponents": {}
-}

+ 0 - 3
pages/loginPage/loginPage.wxml

@@ -1,3 +0,0 @@
-<view class="login-wrapper">
-    <button class="btn"  open-type="getUserInfo" bindgetuserinfo="getUser">登录</button>
-</view>

+ 0 - 17
pages/loginPage/loginPage.wxss

@@ -1,17 +0,0 @@
-.login-wrapper{
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-}
-.btn {
-    margin: 0;
-    padding: 0;
-    font-size: 36rpx;
-    color: #16B016;
-    background: #fff;
-    width: 100%;
-}
-
-.btn::after {
-    border: none;
-}

+ 2 - 2
pages/main/reading/reading.js

@@ -276,7 +276,7 @@ Page({
         })
         const recordSource = this.data.recordSource;
         wx.uploadFile({
-            url: 'https://reader.lingjiao.cn/readerBase/file/upload',
+            url: 'https://readertest.lingjiao.cn/readerBase/file/upload',
             filePath: recordSource,
             name: '朗读录音',
             header: {
@@ -313,7 +313,7 @@ Page({
                             success: () => {
                                 console.log(res);
                                 wx.redirectTo({
-                                    url: `../../social/works/works?id=${res.data.data.id}`
+                                    url: `../../social/works/works?id=${res.data.data.id}&flowerCount=${res.data.count}`
                                 })
                             }
                         })

+ 13 - 19
pages/social/works/works.js

@@ -56,6 +56,11 @@ Page({
         })
     },
     onLoad: function (option) {
+        console.log(option)
+        if (option.count) {
+            this.flowerBox = this.selectComponent("#flower-box");
+            this.flowerBox.comeOut();
+        }
         getOpenidSessionKey((res) => {
             let id = option.id ? option.id : option.scene.replace('QR', '')
             if (option.scene || option.shareCard) {
@@ -192,37 +197,26 @@ Page({
             addComeOut: 'add-one-come-out'
         })
 
-        setTimeout(()=>{
-            if(this.data.addComeOut){
+        setTimeout(() => {
+            if (this.data.addComeOut) {
                 this.setData({
                     addComeOut: ''
                 })
             }
-        },1200)
-
-
+        }, 1200)
 
         // 恭喜获得x朵小红花
-
-        this.flowerBox = this.selectComponent("#flower-box");
-        this.flowerBox.comeOut();
         if (this.data.isLike) {
-            wx.showToast({
-                title: '不要重复点赞哦',
-                icon: 'fail',
-                duration: 1000
-            })
+            // wx.showToast({
+            //     title: '不要重复点赞哦',
+            //     icon: 'fail',
+            //     duration: 1000
+            // })
             return;
         }
         httpRequestApi.likeWorks(this.uid, this.data.id).success(res => {
             this.setData({
                 isLike: true
-            }, () => {
-                wx.showToast({
-                    title: '点赞数+1',
-                    icon: 'success',
-                    duration: 1000
-                })
             });
         })
 

+ 22 - 28
pages/user/myworks/myworks.wxml

@@ -28,7 +28,7 @@
       </view>
       <view class="follow" wx:if="{{!isMyself}}" bindtap="follow">
         <image src="{{isFans? '../../../static/image/fully_heart.png' : '../../../static/image/empty_heart.png'}}" />
-        <text class="followBtn" >{{isFans ? '已' : ''}}关注</text>
+        <text class="followBtn">{{isFans ? '已' : ''}}关注</text>
       </view>
     </view>
     <view class='mine-category'>
@@ -70,38 +70,32 @@
       </view>
     </view>
   </view>
-  <view class='works-article' wx:for="{{ worksList }}" wx:key="{{ index }}">
-    <view class='user-info'>
-      <view class='user-img'>
-        <image src='{{ item.user.avatar }}'></image>
-      </view>
-      <view class='user-details'>
-        <view class='user-name'>
-          <view class='left-detail'>{{ item.user.wechatName }}</view>
-          <view class='right-detail'>
-            <text class='plays-count'>{{ item.userRead.playAmount || 0 }}</text>
-            <view class='plays-img'>
-              <image src='../../../static/image/hotPlays.png'></image>
-            </view>
+  <view class="hotWares">
+    <view wx:for="{{worksList}}" wx:key="{{index}}" class="worksCard" bindtap="toMyWorks" data-readId="{{ item.userRead.id }}" data-title="{{ item.userRead.title }}">
+      <view class="topData">
+        <view class="worksLeft">
+          <image class="authorAvatar" lazy-load="true" src="{{ item.user.avatar }}" />
+          <view class="worksInfo">
+            <view class="authorName">{{ item.user.wechatName }}</view>
+            <view class="time">{{ format.formatDate(item.userRead.gmtCreated) || 0 }}</view>
           </view>
         </view>
-        <view class='user-name'>
-          <view class='left-detail'>{{ format.formatDate(item.userRead.gmtCreated) || 0 }}</view>
-          <view class='right-detail'>
-            <text class='likes-count'>{{ item.userRead.likeAmount || 0 }}</text>
-            <view class='likes-img'>
-              <image src='../../../static/image/like.png'></image>
-            </view>
+        <view class="numberInfo">
+          <view class="wareCardPlays">
+            <image class="wareCardPlaysImg" lazy-load="true" src="../../../static/image/hotPlays.png" />
+            <text>{{ item.userRead.playAmount || 0 }}</text>
+          </view>
+          <view class="wareCardLikes">
+            <image class="wareCardLikesImg" lazy-load="true" src="../../../static/image/flower_small.png" />
+            <text>{{ item.userRead.likeAmount || 0 }}</text>
           </view>
         </view>
       </view>
-    </view>
-    <view class='video-preview' bindtap='toMyWorks' data-id='{{ item.userRead.id }}' data-title='{{ item.userRead.title }}'>
-      <image src='{{ item.userRead.iconImg }}'></image>
-    </view>
-    <view class='content-title'>
-      <view>{{ item.userRead.title }}</view>
-      <view class='content-grage'>{{ item.userRead.summary }}</view>
+      <image class="wareCardImg" src="{{ item.userRead.iconImg }}" />
+      <view class="titleSummary">
+        <text class="wareCardTitle">{{ item.userRead.title }}</text>
+        <text class="wareCardTip">{{ item.userRead.summary }}</text>
+      </view>
     </view>
   </view>
 </view>

+ 162 - 103
pages/user/myworks/myworks.wxss

@@ -1,13 +1,13 @@
 /* pages/user/myworks/myworks.wxss */
-page{
+page {
   width: 100%;
   background: #F0F1F5;
 }
 
-.user-works{
-  width: 750rpx;
+.user-works {
+  width: 100%;
   box-sizing: border-box;
-  padding: 0 15rpx;
+  /* padding: 0 15rpx; */
   background: #F0F1F5;
   display: flex;
   flex-direction: column;
@@ -15,33 +15,36 @@ page{
   justify-content: space-between;
 }
 
-.follow-details{
+.follow-details {
   width: 100%;
   height: 382rpx;
-  border-radius: 20rpx;
+  /* border-radius: 20rpx; */
   background: #FFFFFF;
-  margin-top: 30rpx;
+  /* margin-top: 30rpx; */
+  margin: 20rpx 15rpx 20rpx;
   display: flex;
   position: relative;
+  box-sizing: border-box;
 }
 
-.follow-info{
+.follow-info {
   width: 100%;
   display: flex;
 }
+
 .follow {
   display: flex;
   align-items: center;
   justify-content: center;
-  width:154rpx;
-height:58rpx;
+  width: 154rpx;
+  height: 58rpx;
   border: 2rpx solid #ff0000;
   font-size: 28rpx;
   border-radius: 30rpx;
   /* text-align: center; */
   /* line-height: 60rpx; */
   color: #ff0000;
-  position:absolute;
+  position: absolute;
   top: 36rpx;
   right: 32rpx;
 }
@@ -52,7 +55,8 @@ height:58rpx;
   margin-right: 15rpx;
 
 }
-.avatar-bg{
+
+.avatar-bg {
   margin-left: 20rpx;
   margin-top: 50rpx;
   width: 152rpx;
@@ -62,7 +66,7 @@ height:58rpx;
   position: relative;
 }
 
-.avatar-box{
+.avatar-box {
   width: 138rpx;
   height: 138rpx;
   border-radius: 50%;
@@ -73,34 +77,34 @@ height:58rpx;
   margin: 8rpx auto;
 }
 
-.avatar-image{
+.avatar-image {
   width: 100%;
   height: 100%;
   border-radius: 50%;
 }
 
-.avatar-nickname{
+.avatar-nickname {
   width: 500rpx;
   display: flex;
-  
+
 }
 
-.avatar-address{
+.avatar-address {
   width: 500rpx;
 }
 
-.flowers-box{
+.flowers-box {
   width: 26rpx;
   height: 26rpx;
   margin-left: 10rpx;
 }
 
-.flowers-box>image{
+.flowers-box>image {
   width: 100%;
   height: 100%;
 }
 
-.occupation-title{
+.occupation-title {
   position: absolute;
   left: 44rpx;
   bottom: -10rpx;
@@ -115,7 +119,7 @@ height:58rpx;
   font-size: 18rpx;
 }
 
-.avatar-msg{
+.avatar-msg {
   margin-left: 40rpx;
   margin-top: 50rpx;
   width: 500rpx;
@@ -124,13 +128,13 @@ height:58rpx;
   font-size: 32rpx;
 }
 
-.gender-size{
+.gender-size {
   margin-left: 10rpx;
   font-size: 28rpx;
   align-self: center;
 }
 
-.set-msg{
+.set-msg {
   width: 100%;
   height: 248rpx;
   display: flex;
@@ -138,13 +142,15 @@ height:58rpx;
   justify-content: center;
 }
 
-.avatar-nickname,.avatar-birthday,.avatar-address{
+.avatar-nickname,
+.avatar-birthday,
+.avatar-address {
   line-height: 50rpx;
   color: #444;
   font-size: 32rpx;
 }
 
-.mine-category{
+.mine-category {
   box-sizing: border-box;
   width: 674rpx;
   padding-top: 30rpx;
@@ -155,7 +161,7 @@ height:58rpx;
   display: flex;
   position: absolute;
   top: 246rpx;
-  left: 23rpx;
+  left: 5%;
 }
 
 .border-right {
@@ -167,6 +173,7 @@ height:58rpx;
   height: 22rpx;
   border-right: 2rpx solid #D6D6D6;
 }
+
 .flower-count .border-right {
   border: none;
 }
@@ -227,124 +234,176 @@ image {
   color: #EE5750;
 }
 
-.works-article{
-  margin-top: 12rpx;
-  box-sizing: border-box;
-  width: 100%;
-  padding: 0 27rpx;
-  background: #FFFFFF;
-  border-radius: 12rpx;
-}
-
-.user-info{
-  width: 100%;
-  height: 120rpx;
+.hotWares {
   display: flex;
-  align-items: center;
-  font-size:32rpx;
-  padding-top:22rpx;
+  flex-wrap: wrap;
+  /* background: #e8e8e8; */
 }
 
-.user-img{
-  width: 96rpx;
-  height: 96rpx;
-  border-radius: 50%;
-  margin-right:20rpx;
-
+.recommdSection .hotWares .worksCard {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: 484rpx;
+  background: #fff;
+  /* padding: 26rpx; */
+  /* border-radius: 12rpx; */
+  /* margin: 0 0 18rpx 16rpx; */
+  margin: 0 auto 10rpx;
+  /* box-shadow: 0 8rpx 6rpx 0 rgba(0, 0, 0, .28); */
 }
 
-.user-img>image{
+.worksCard {
+  position: relative;
+  overflow: hidden;
   width: 100%;
-  height: 100%;
-  border-radius: 50%;
+  height: 484rpx;
+  background: #fff;
+  margin: 0 auto 20rpx;
 }
 
-.user-details{
-  /* margin-left: 26rpx; */
-  display: flex;
-  flex-direction: column;
+.worksCard .wareCardImg {
+  display: block;
+  width: 704rpx;
+  height: 290rpx;
+  margin: 21rpx auto 0;
+  border-radius: 20rpx;
 }
 
-.user-name{
-  width: 552rpx;
+.worksCard .titleSummary {
   display: flex;
   justify-content: space-between;
-  align-items: flex-end;
-  color: #414141;
+  margin-top: 12rpx;
 }
 
-.left-detail{
-  width: 500rpx;
+.worksCard .wareCardTitle {
+  /* margin: 0 auto; */
+  width: 80%;
+  height: 46rpx;
+  display: block;
+  /* text-align: left; */
+  color: #444;
   font-size: 32rpx;
-  color:#414141
+  /* letter-spacing: 4rpx; */
+  margin-left: 28rpx;
+  font-family: MicrosoftYaHei;
 }
 
-.right-detail{
-  width: 90rpx;
+.worksCard .topData {
+  height: 92rpx;
+  margin-top: 22rpx;
   display: flex;
-  font-size: 22rpx;
-  flex-direction:row-reverse;
-margin-right: 6rpx;
-color:#444
+  flex-direction: row;
+  /* justify-content: space-between; */
+  align-items: center;
 }
 
-.user-time{
-  color: #686868;
-  font-weight: lighter;
+.worksLeft {
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+  margin-left: 10rpx;
+
 }
 
-.video-preview{
-  width: 100%;
-  height: 290rpx;
-  border-radius: 20rpx;
+.worksLeft .worksInfo .authorName {
+  color: #393939;
+  font-size: 30rpx;
+  margin-top: 8rpx;
+
 }
 
-.video-preview>image{
-  width: 100%;
-  height: 100%;
-  border-radius: 20rpx;
+.worksLeft .worksInfo .time {
+  color: #393939;
+  font-size: 30rpx;
+
 }
 
-.content-title{
-  margin-top: 12rpx;
-  margin-bottom: 30rpx;
-  width: 100%;
+.worksCard .topData .wareCardPlays {
+  width: 100rpx;
+  /* margin-left: 270rpx; */
   display: flex;
-  justify-content: space-between;
+  flex-direction: row-reverse;
   align-items: center;
-  font-size: 32rpx;
-  color: #414141;
+  padding-right: 35rpx;
+
 }
 
-.content-grage{
-  font-size: 24rpx;
-  margin-right:6rpx;
+.worksCard .topData .authorAvatar {
+  width: 92rpx;
+  height: 92rpx;
+  margin: 0 22rpx 0 22rpx;
+  display: block;
+  border: 4rpx solid #61CA54;
+  border-radius: 50%;
 }
 
-.user-info image{
-  width: 100%;
-  height: 100%;
+.worksCard .topData .profession {
+  width: 68rpx;
+  height: 24rpx;
+  background: rgba(97, 202, 84, 1);
+  border-radius: 166rpx;
+  border: 2rpx solid rgba(255, 255, 255, 1);
+  font-size: 16rpx;
+  /* font-family: PingFangSC-Medium; */
+  /* font-weight: 500; */
+  color: rgba(255, 255, 255, 1);
+  line-height: 24rpx;
+  text-align: center;
+  position: absolute;
+  bottom: -7rpx;
+  left: 37rpx;
+
 }
 
-.plays-img{
-  width: 20rpx;
-  height: 20rpx;
-  margin-right:4rpx;
+.topData .numberInfo {
+  display: flex;
+  flex-direction: column;
+}
+
+.worksCard .wareCardTip {
+  width: 178rpx;
+  height: 40rpx;
+  display: block;
+  text-align: left;
+  color: #444;
+  font-size: 24rpx;
+  line-height: 44rpx;
 
 }
 
-.likes-img{
-  width: 26rpx;
-  height: 24rpx;
-  margin-right:4rpx;
+.worksCard .wareCardPlays .wareCardPlaysImg {
+  width: 30rpx;
+  height: 26rpx;
+  margin-left: 7rpx;
+  float: right;
+}
 
+.worksCard .wareCardPlays text {
+  /* margin-left: 4rpx; */
+  color: #848484;
+  font-size: 24rpx;
+  text-align: right;
+  /* width:57%; */
+  float: right;
 }
 
-.likes-count{
-  color: #FD8B43;
+.worksCard .wareCardLikes {
+  width: 100rpx;
+  margin-right: 18rpx;
+  display: flex;
+  flex-direction: row-reverse;
+  align-items: center;
 }
 
-.plays-count{
-  color: #5E5E5E;
+.worksCard .wareCardLikes .wareCardLikesImg {
+  width: 22rpx;
+  height: 26rpx;
+  margin-left: 7rpx;
 }
 
+.worksCard .wareCardLikes text {
+  /* margin-left: 4rpx; */
+  color: #848484;
+  font-size: 24rpx;
+}