作者 刘晓艳

静态页编写

{
"pages": [
"pages/matrix/matrix",
"pages/interact/interactPost/interactPost",
"pages/interact/interact",
"pages/my/myAttention/myAttention",
"pages/my/my",
"pages/index/index"
],
... ...
/**app.wxss**/
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
}
@font-face {
font-family: 'iconfont'; /* project id 1064555 */
src: url('//at.alicdn.com/t/font_1064555_yx59k1gs2ch.eot');
src: url('//at.alicdn.com/t/font_1064555_yx59k1gs2ch.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_1064555_yx59k1gs2ch.woff2') format('woff2'),
url('//at.alicdn.com/t/font_1064555_yx59k1gs2ch.woff') format('woff'),
url('//at.alicdn.com/t/font_1064555_yx59k1gs2ch.ttf') format('truetype'),
url('//at.alicdn.com/t/font_1064555_yx59k1gs2ch.svg#iconfont') format('svg');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-fenxiang:before {
content: "\e600";
}
.icon-yanjing:before {
content: "\e6bc";
}
.icon-pinglun:before {
content: "\e61f";
}
.icon-renzheng:before {
content: "\e625";
}
.icon-xing:before {
content: "\e60e";
}
.icon-zan2:before {
content: "\e601";
}
.icon-yanjing1:before {
content: "\e644";
}
.icon-zan21:before {
content: "\e63f";
}
.icon-pinglun1:before {
content: "\e602";
}
.icon-gengduo:before {
content: "\e670";
}
.icon-gengduo1:before {
content: "\e651";
}
.icon-favorite_diss:before {
content: "\e603";
}
.icon-renzheng1:before {
content: "\e8fd";
}
.icon-go:before {
content: "\e604";
}
.icon-zan:before {
content: "\e6aa";
}
.icon-jia1:before {
content: "\e642";
}
.icon-shanchu:before {
content: "\e674";
}
.icon-wodetiezi:before {
content: "\e605";
}
.icon-bianji:before {
content: "\e656";
}
.icon-bianji1:before {
content: "\e607";
}
.icon-bianji2:before {
content: "\e60f";
}
.icon-yuanzhang-di:before {
content: "\e606";
}
.icon-tongzhi:before {
content: "\e608";
}
... ...
// pages/interact/interact.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
... ...
{
"usingComponents": {}
}
\ No newline at end of file
... ...
<!--pages/interact/interact.wxml-->
<text>pages/interact/interact.wxml</text>
... ...
/* pages/interact/interact.wxss */
\ No newline at end of file
... ...
// pages/interact/interactPost/interactPost.js
Page({
/**
* 页面的初始数据
*/
data: {
images: ['/images/huifujishi@2x.png', '/images/huifuyiban@2x.png'],
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
\ No newline at end of file
... ...
{
"usingComponents": {},
"navigationBarTitleText": "发表帖子",
"navigationBarBackgroundColor": "#169BD5",
"navigationBarTextStyle": "white"
}
\ No newline at end of file
... ...
<!--pages/interact/interactPost/interactPost.wxml-->
<view class='box'>
<view class='banner_box'>
<view class='type_box' bindtap="showPicker">
<view>
<input placeholder='输入主题...' placeholder-class='input_size' value='{{title}}' bindinput='setTitle'></input>
</view>
</view>
<view class='textarea_box'>
<textarea class='textarea' placeholder='输入内容...' placeholder-class='input_size' maxlength='{{max2}}' value='{{text}}' bindinput='setText'>
</textarea>
</view>
<view class='upload_box'>
<block wx:for="{{images}}" wx:for-item="image" wx:key="index">
<view class='upload_img'>
<view class='icon_box'>
<view class='iconfont icon-shanchu' catchtap="deleteImg" data-index="{{index}}"></view>
</view>
<image src='{{image}}' data-index="{{index}}" mode="aspectFill" bindtap="previewImg"></image>
</view>
</block>
<view class='upload_img' bindtap="choose">
<view class='iconfont icon-jia1'></view>
</view>
</view>
</view>
<view class='bottom_btn'>发表帖子</view>
</view>
\ No newline at end of file
... ...
/* pages/interact/interactPost/interactPost.wxss */
page {
background: #f7f7f7;
}
.box {
padding: 30rpx;
box-sizing: border-box;
}
.banner_box {
background: #fff;
padding: 30rpx;
}
.textarea_box {
width: 100%;
min-height: 200rpx;
}
.textarea {
width: 100%;
min-height: 200rpx;
padding: 20rpx 0;
position: relative;
font-size: 28rpx;
}
.number {
position: absolute;
bottom: 0;
right: 0;
color: #a5a6a8;
font-size: 28rpx;
}
.textarea_size {
font-size: 32rpx;
color: #808080;
}
.upload_box {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.upload_img {
width: 187rpx;
height: 187rpx;
border: 1rpx dashed #ebebeb;
display: flex;
align-items: center;
justify-content: center;
position: relative;
margin-right: 20rpx;
margin-bottom: 20rpx;
}
.icon-jia1 {
color: #ebebeb;
font-size: 100rpx;
}
.upload_img:nth-child(5), .upload_img:nth-child(10) {
margin-right: 0;
}
.upload_img image {
width: 100%;
height: 100%;
}
.icon_box {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
right: -12rpx;
top: -12rpx;
}
.icon-shanchu {
font-size: 40rpx;
color: #f70e0e;
}
.type_box {
width: 100%;
height: 86rpx;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1rpx solid #f5f5f5;
}
.type_box input {
font-size: 28rpx;
}
.type_info {
font-size: 32rpx;
color: RGBA(102, 102, 102, 0.6);
}
.list_input {
width: 100%;
height: 86rpx;
display: flex;
align-items: center;
}
.input_box input {
font-size: 32rpx;
}
.add-border {
border-bottom: 1rpx solid #ebebeb;
}
.input_size {
font-size: 32rpx;
color: #ccc;
}
.areas {
width: 100%;
height: 100%;
font-size: 26rpx;
position: relative;
}
.bottom_btn {
width: 100%;
height: 96rpx;
background: #000;
background: linear-gradient(336deg, rgba(0, 128, 255, 1) 0%, rgba(0, 194, 255, 1) 100%);
border-radius: 8rpx;
font-size: 34rpx;
font-weight: bold;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
margin: 150rpx auto 0 auto;
}
... ...
// pages/matrix/matrix.js
Page({
/**
* 页面的初始数据
*/
data: {
current:0,
},
tabCharge(e) {
let that = this;
that.setData({
current: e.currentTarget.dataset.current,
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {
}
})
\ No newline at end of file
... ...
{
"usingComponents": {},
"navigationBarTitleText": "政企服务平台",
"navigationBarBackgroundColor": "#169BD5",
"navigationBarTextStyle": "white"
}
\ No newline at end of file
... ...
<!--pages/matrix/matrix.wxml-->
<view class='tab_content'>
<view class='tab_box'>
<view class="tab_item {{current==0?'active':''}}" data-current='0' bindtap='tabCharge'>全部</view>
<view class="tab_item {{current==1?'active':''}}" data-current="1" bindtap='tabCharge'>科技商务</view>
<view class="tab_item {{current==2?'active':''}}" data-current='2' bindtap='tabCharge'>智能制造</view>
<view class="tab_item {{current==3?'active':''}}" data-current="3" bindtap='tabCharge'>数字创意</view>
<view class="tab_item {{current==4?'active':''}}" data-current="4" bindtap='tabCharge'>大健康</view>
<view class='iconfont icon-gengduo1'></view>
</view>
</view>
<view class='content_box'>
<view class='item_list' bindtap='listDetail'>
<image class='label_img' src='/images/zuire@2x.png'></image>
<text class='label_info'>热门</text>
<image class='list_img' src='/images/huifujishi@2x.png'></image>
<view class='list_left'>
<view>
<view class='list_title'>金沃斯英语在线教育</view>
<view class='list_info'>22</view>
</view>
<view class='iconfont icon-go'></view>
</view>
</view>
</view>
<view class='content_box content_box2'>
<view class='list_item' wx:for='{{[1,2,3]}}'>
<image src='/images/img.jpg'></image>
<view class='list_content_box'>
<view class='list_title_box'>
<image src='/images/huifujishi@2x.png'></image>
<text>金沃斯英语</text>
</view>
<view class='list_content'>金沃斯在线英语教育是来自加拿大的在线教育...</view>
<view class='iconfont icon-gengduo'></view>
</view>
</view>
</view>
\ No newline at end of file
... ...
/* pages/matrix/matrix.wxss */
page {
background: #f7f7f7;
}
.tab_content {
padding: 30rpx 20rpx;
background: #fff;
}
.tab_box {
display: flex;
align-items: center;
justify-content: space-between;
}
.tab_item {
font-size: 26rpx;
color: #999;
position: relative;
}
.tab_item.active {
font-size: 26rpx;
color: #169bd5;
}
.tab_item.active::after {
content: "";
width: 62rpx;
height: 4rpx;
background: #169bd5;
position: absolute;
bottom: -30rpx;
left: 50%;
transform: translateX(-50%);
}
.icon-gengduo1 {
color: #169bd5;
border-left: 1rpx solid #f5f5f5;
padding-left: 20rpx;
}
.content_box {
padding: 30rpx;
}
.item_list {
background: #fff;
border-radius: 8rpx;
margin-bottom: 20rpx;
font-size: 28rpx;
color: #000;
display: flex;
align-items: center;
padding: 30rpx 20rpx;
position: relative;
}
.label_img {
position: absolute;
right: 0;
top: 10rpx;
width: 80rpx;
height: 32rpx;
}
.label_info {
position: absolute;
right: 0;
top: 10rpx;
width: 80rpx;
height: 32rpx;
font-size: 20rpx;
color: #fff;
text-align: center;
}
.list_img {
width: 128rpx;
height: 128rpx;
border-radius: 50%;
margin-right: 20rpx;
}
.list_left {
width: 78%;
display: flex;
align-items: center;
justify-content: space-between;
}
.list_title {
font-size: 30rpx;
font-weight: bold;
color: #333;
}
.list_info {
font-size: 30rpx;
color: #999;
margin-top: 10rpx;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
}
.icon-go {
color: #ccc;
}
/* */
.content_box2 {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.list_item {
width: 48%;
border-radius: 8rpx;
overflow: hidden;
background: #fff;
margin-bottom: 20rpx;
box-shadow: 0 10rpx 0 0 #62bae0;
}
.list_content_box {
padding: 20rpx 16rpx;
}
.list_item image {
width: 100%;
height: 336rpx;
}
.list_title_box {
display: flex;
align-items: center;
font-size: 32rpx;
font-weight: bold;
color: #333;
}
.list_title_box image {
width: 32rpx;
height: 32rpx;
border-radius: 50%;
margin-right: 15rpx;
}
.list_content {
font-size: 26rpx;
color: #666;
margin-top: 4rpx;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
}
.icon-gengduo {
width: 100%;
text-align: right;
font-size: 40rpx;
color: #333;
margin-top: 10rpx;
}
... ...
{
"usingComponents": {}
"usingComponents": {},
"navigationBarTitleText": "政企服务平台",
"navigationBarBackgroundColor": "#169BD5",
"navigationBarTextStyle": "white"
}
\ No newline at end of file
... ...
<!--pages/my/my.wxml-->
<view class='banner_box'>
<view class='head_img'>
<image src='{{user_info.avatar}}'></image>
</view>
<view class='head_info_box'>
<view class='user_name'>{{user_info.name}}
<image wx:if='{{user_info.approve==1}}' src='/images/verify.png'></image>
<view class='banner_info_box'>
<image class='head_img' src='/images/weirenzheng@2x.png'></image>
<view class='banner_right'>
<view class='banner_info'>
<text>认证企业:金沃斯在线英语</text>
<image src='/images/guangfang@2x.png'></image>
</view>
<view class='banner_label'>
<image src='/images/ren@2x.png'></image>
<text>雨晨似墨</text>
</view>
</view>
<view>{{user_info.mobile}}</view>
<view>{{user_info.work}}</view>
<view>{{user_info.work_post}}</view>
</view>
<view class='edit_box' bindtap='editInfo' wx:if='{{user_type!=2}}'>
<view class='iconfont icon-xiugai'></view>
<view>修改个人资料</view>
</view>
<view class='edit_box edit2' bindtap='charge' wx:if='{{user_type==4}}'>
<view>身份切换</view>
</view>
</view>
<!-- 顾问个人中心 -->
<view class='content_box' wx:if='{{user_type==3||temp_UserType==3}}'>
<!-- -->
<view class='content_box' wx:if=''>
<view class='item_list' bindtap='TB'>
<view class='list_icon'>
<text class='iconfont icon-kakou'></text>
<text class='iconfont icon-wodetiezi'></text>
</view>
<view class='list_item_box'>
<view>T币交易记录</view>
<view class='iconfont icon-jinru'></view>
<view>我的帖子</view>
<view class='iconfont icon-go'></view>
</view>
</view>
<view class='item_list' bindtap='vipCharge'>
<view class='list_icon'>
<text class='iconfont icon-gray-crown'></text>
<text class='iconfont icon-xing'></text>
</view>
<view class='list_item_box'>
<view>会员充值</view>
<view class='list_info'>
<text>{{counselor.end_time}}{{counselor.end_time!=''?'到期':''}}</text>
<text class='iconfont icon-jinru'></text>
</view>
<view>我的关注</view>
<text class='iconfont icon-go'></text>
</view>
</view>
<view class='item_list' bindtap='reportList'>
<view class='list_icon'>
<text class='iconfont icon-baogao'></text>
</view>
<view class='list_item_box'>
<view>报告浏览记录</view>
<view class='iconfont icon-jinru'></view>
</view>
</view>
<view class='item_list' bindtap='articlList'>
<view class='list_icon'>
<text class='iconfont icon-baogao1'></text>
<text class='iconfont icon-zan21'></text>
</view>
<view class='list_item_box'>
<view>文章浏览记录</view>
<view class='iconfont icon-jinru'></view>
<view>我的点赞</view>
<view class='iconfont icon-go'></view>
</view>
</view>
<view class='item_list' bindtap='suggest'>
<view class='list_icon'>
<text class='iconfont icon-jianyi'></text>
</view>
<view class='list_item_box'>
<view>建议预设</view>
<view class='iconfont icon-jinru'></view>
</view>
</view>
<view class='item_list' bindtap='project'>
<view class='list_icon'>
<text class='iconfont icon-fangan'></text>
</view>
<view class='list_item_box'>
<view>方案预设</view>
<view class='iconfont icon-jinru'></view>
</view>
</view>
<view class='item_list' bindtap='share'>
<view class='list_icon'>
<text class='iconfont icon-fenxiang1'></text>
</view>
<view class='list_item_box'>
<view>分享赚T币</view>
<view class='iconfont icon-jinru'></view>
</view>
</view>
<view class='item_list' bindtap='twoCode' data-imgurl='{{counselor.wechat_code}}'>
<view class='item_list' bindtap='reportList'>
<view class='list_icon'>
<text class='iconfont icon-xiazai'></text>
<text class='iconfont icon-pinglun1'></text>
</view>
<view class='list_item_box'>
<view>下载专属二维码</view>
<view class='iconfont icon-jinru'></view>
<view>我的评论</view>
<view class='iconfont icon-go'></view>
</view>
</view>
<view class='item_list' bindtap='inviteList'>
<view class='item_list' bindtap='articlList'>
<view class='list_icon'>
<text class='iconfont icon-yaoqing'></text>
<text class='iconfont icon-tongzhi'></text>
</view>
<view class='list_item_box'>
<view>邀请名单</view>
<view class='iconfont icon-jinru'></view>
<view>发文通知</view>
<view class='list_icon2'>
<view class='list_point'>1</view>
<view class='iconfont icon-go'></view>
</view>
</view>
</view>
<view class='item_list' bindtap='remind'>
<view class='list_icon'>
<text class='iconfont icon-YDUI-naozhong'></text>
</view>
<view class='list_item_box'>
<view>7天到期提醒</view>
<view class='iconfont icon-jinru'></view>
</view>
</view>
<view class='null_data_box'>
<view class='data_box'>
<image src='/images/weirenzheng@2x.png'></image>
<view class='list_btn'>开通企业认证 ></view>
<view> ~~ 企业认证后开启更多服务 ~~</view>
</view>
</view>
\ No newline at end of file
... ...
/* pages/my/my.wxss */
\ No newline at end of file
/* pages/my/my.wxss */
page {
background: #f5f5fa;
}
.banner_box {
width: 100%;
height: 113rpx;
background: #169bd5;
display: flex;
align-items: center;
padding: 30rpx;
}
.banner_info_box {
width: 92%;
height: 240rpx;
background: rgba(255, 255, 255, 1);
box-shadow: 0rpx 3rpx 20rpx rgba(0, 34, 255, 0.08);
opacity: 1;
border-radius: 4rpx;
position: relative;
top: 80rpx;
margin-bottom: 60rpx;
display: flex;
align-items: center;
padding: 30rpx;
box-sizing: border-box;
}
.head_img {
width: 112rpx;
height: 112rpx;
border-radius: 50%;
margin-right: 20rpx;
}
.banner_info {
position: relative;
font-size: 32rpx;
font-weight: bold;
color: #333;
display: inline-block;
}
.banner_info image {
width: 18rpx;
height: 22rpx;
position: absolute;
right: -15rpx;
top: -15rpx;
}
.banner_label {
width: 160rpx;
font-size: 22rpx;
color: #169bd5;
background: rgba(22, 155, 213, 0.2);
border-radius: 24rpx;
padding: 5rpx 10rpx;
display: flex;
align-items: center;
justify-content: center;
margin-top: 14rpx;
}
.banner_label image {
width: 19rpx;
height: 23rpx;
margin-right: 15rpx;
}
.content_box {
background: #fff;
position: relative;
margin-top: 160rpx;
}
.item_list {
display: flex;
align-items: center;
}
.list_icon {
display: flex;
align-items: center;
justify-content: center;
font-size: 28rpx;
color: #169bd5;
margin: 0 30rpx;
}
.list_item_box {
width: 84%;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1rpx solid #ebebeb;
padding: 30rpx 30rpx 30rpx 0;
font-size: 30rpx;
color: #1a1a1a;
}
.item_list:last-child .list_item_box {
border: 0;
}
.icon-go {
color: #ccc;
}
.list_icon2 {
display: flex;
align-items: center;
justify-content: flex-end;
}
.list_point {
width: 32rpx;
height: 32rpx;
background: rgba(232, 4, 4, 1);
border-radius: 50%;
font-size: 26rpx;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
/* */
.null_data_box {
width: 100%;
height: 100%;
font-size: 22rpx;
color: #ccc;
text-align: center;
position: fixed;
top: 00rpx;
left: 0;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.null_data_box image {
width: 315rpx;
height: 227rpx;
margin: 0 auto;
}
.data_box {
width: 100%;
}
.list_btn {
width: 352rpx;
height: 80rpx;
background: linear-gradient(319deg, rgba(22, 155, 213, 1) 0%, rgba(0, 211, 255, 1) 100%);
border-radius: 8rpx;
font-size: 30rpx;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
margin: 40rpx auto;
}
... ...
// pages/my/myAttention/myAttention.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
... ...
{
"usingComponents": {},
"navigationBarBackgroundColor": "#f7f7f7",
"navigationBarTitleText": "我的关注"
}
\ No newline at end of file
... ...
<!--pages/my/myAttention/myAttention.wxml-->
<view class='box'>
<view class='item_list' wx:for='{{[1,2]}}'>
<image src='/images/weirenzheng@2x.png'></image>
<view class='list_right'>
<view>
<view class='user_name'>马晓上</view>
<view class='list_time'>
<text>今天</text>
<text>21:00</text>
</view>
</view>
<view class='list_btn'>已关注</view>
</view>
</view>
</view>
\ No newline at end of file
... ...
/* pages/my/myAttention/myAttention.wxss */
page {
background: #f7f7f7;
}
.box {
padding: 0 30rpx;
box-sizing: border-box;
}
.item_list {
display: flex;
align-items: center;
padding: 16rpx;
box-sizing: border-box;
background: #fff;
margin-bottom: 16rpx;
}
.item_list image {
width: 96rpx;
height: 96rpx;
border-radius: 50%;
margin-right: 20rpx;
}
.user_name {
font-size: 30rpx;
font-weight: bold;
color: #333;
}
.list_time {
font-size: 22rpx;
color: #ccc;
margin-top: 10rpx;
}
.list_right {
width: 80%;
display: flex;
align-items: center;
justify-content: space-between;
}
.list_btn {
width: 144rpx;
height: 48rpx;
background: rgba(204, 204, 204, 1);
border-radius: 8rpx;
font-size: 24rpx;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
... ...