首页页面

app.js

@@ -18,8 +18,8 @@ App({
     // 统一管理图片路径
     images: {
       logo: '/static_file/logo.png',
-      background: '/static_file/backgorund.png',
-      card: '/static_file/crad.png',
+      background: '/static_file/background.png',
+      card: '/static_file/card.png',
       tabBar: {
         home: '/static_file/homepage.png',
         homeActive: '/static_file/homepageCheck.png',

app.json

@@ -1,18 +1,18 @@
 {
   "pages": [
-    "pages/FirstBangDing/FirstBangDing",
     "pages/homepage/homepage",
+    "pages/FirstBangDing/FirstBangDing",
     "pages/profile/profile",
     "pages/huhaobangding/huhaobangding"
     
   ],
   "tabBar": {
     "color": "rgba(182, 189, 205, 1)",
-    "selectedColor": "rgba(46, 48, 56, 1)",
+    "selectedColor": "#000000",
     "backgroundColor": "#ffffff",
     "list": [
       {
-        "pagePath": "pages/FirstBangDing/FirstBangDing",
+        "pagePath": "pages/homepage/homepage",
         "text": "首页",
         "iconPath": "static_file/homepage.png",
         "selectedIconPath": "static_file/homepageCheck.png"

pages/FirstBangDing/FirstBangDing.js

@@ -23,10 +23,6 @@ Page({
       jcsfcjtzd: ""
     }
   },
-
-  /**
-   * 生命周期函数--监听页面加载
-   */
   onLoad(options) {
     // 页面加载时获取图片路径
     this.setData({

pages/FirstBangDing/FirstBangDing.wxss

@@ -37,14 +37,14 @@
 .welcome-card {
   position: absolute;
   left: 4%;
-  top: 135px;
+  top: 270rpx;
   width: 92%;
-  height: 210px;
+  height: 420rpx;
   opacity: 1;
   background-color: #fff;
-  border-radius: 8px;
+  border-radius: 8rpx;
   /* 圆角 */
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.1);
   overflow: hidden;
 }
 
@@ -54,12 +54,12 @@
   /* 宽度超出 .welcome-card 的 5%，实现覆盖效果 */
   left: -2.5%;
   /* 向左偏移 2.5%，使背景居中 */
-  height: 100%;
+  height: 104%;
   /* 高度与 .welcome-card 一致 */
   opacity: 1;
   background-color: #f0f0f0;
   /* 背景色 */
-  border-radius: 8px;
+  border-radius: 16rpx;
   /* 圆角 */
 }
 
@@ -73,8 +73,8 @@
   font-size: 36rpx;
   font-weight: 500;
   margin-bottom: 12rpx;
-  letter-spacing: 0px;
-  line-height: 24px;
+  letter-spacing: 0rpx;
+  line-height: 48rpx;
   color: rgba(46, 48, 56, 1);
   text-align: left;
   vertical-align: top;
@@ -151,10 +151,10 @@
 }
 
 .divider {
-  left: 36px;
-  top: 201px;
-  width: 15px;
-  height: 0px;
+  left: 72rpx;
+  top: 402rpx;
+  width: 30rpx;
+  height: 0rpx;
   opacity: 1;
-  border: 1px solid rgba(232, 232, 232, 1);
+  border: 2rpx solid rgba(232, 232, 232, 1);
 }

pages/homepage/homepage.js

@@ -1,106 +1,122 @@
-// pages/homepage/homepage.js
-const app = getApp()
-
 Page({
-
-  /**
-   * 页面的初始数据
-   */
   data: {
-    maxBindCount: 5,
-    notices: [
-      '部分小区水费由物业代收，请联系小区物业进行咨询缴费操作。',
-      '户号绑定: 在绑定页面手动查询，输入地址关键词信息。',
-      '每个微信用户最多绑定5个户号。'
-    ],
     images: {
       logo: '',
       background: '',
-      card: ''
+      card: '',
+      tzd: "",
+      phone: "",
+      yl: "",
+      jcsfcjtzd: ""
+    },
+    // 用户信息
+    userInfo: {
+      name: '王源',
+      accountNumber: '32018545245104',
+      address: '徐州市丰县****楼102室'
+    },
+    
+    // 账单信息
+    billInfo: {
+      totalAmount: 73.28,  // 总计应缴
+      waterUsage: 0,      // 用水量
+      balance: 4.72       // 账户余额
+    },
+    // 功能按钮配置
+    functionList: [
+      {
+        icon: '/static_file/ckys.png',
+        text: '查看用水',
+        // url: '/pages/waterUsage/waterUsage'
+      },
+      {
+        icon: '/static_file/yhbx.png',
+        text: '用户报修',
+        // url: '/pages/repair/repair'
+      },
+      {
+        icon: '/static_file/yjfk.png',
+        text: '意见反馈',
+        // url: '/pages/feedback/feedback'
+      },
+      {
+        icon: '/static_file/tzgg.png',
+        text: '通知公告',
+        // url: '/pages/notice/notice'
+      },
+      {
+        icon: '/static_file/zdlb.png',
+        text: '账单列表',
+        // url: '/pages/notice/notice'
+      }
+    ],
+    // 活动信息
+    activity: {
+      title: '净水器活动',
+      subtitle: '预留入口',
+      imageUrl: '/static_file/background.png'
     }
   },
 
-  /**
-   * 生命周期函数--监听页面加载
-   */
-  onLoad(options) {
-    // 页面加载时获取图片路径
+  onLoad() {
+    // 页面加载时可以调用获取数据的方法
+    this.getUserInfo()
+    this.getBillInfo()
     this.setData({
       images: {
-        logo: app.globalData.images.logo,
-        background: app.globalData.images.background,
-        card: app.globalData.images.card
+        logo:'/static_file/logo.png',
+        background:'/static_file/background.png',
+        card:'/static_file/card.png',
+        tzd:'/static_file/backgrountzdd.png',
+        phone:'/static_file/phone.png',
+        yl:'/static_file/background.yl',
+        jcsfcjtzd:'/static_file/jcsfcjtzd.png',
+        kapiantubiao:'/static_file/kapiantubiao.png'
+        
       }
     })
   },
 
-  /**
-   * 生命周期函数--监听页面初次渲染完成
-   */
-  onReady() {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面显示
-   */
-  onShow() {
-
+  // 获取用户信息
+  getUserInfo() {
   },
 
-  /**
-   * 生命周期函数--监听页面隐藏
-   */
-  onHide() {
-
+  // 获取账单信息
+  getBillInfo() {
   },
 
-  /**
-   * 生命周期函数--监听页面卸载
-   */
-  onUnload() {
-
-  },
-
-  /**
-   * 页面相关事件处理函数--监听用户下拉动作
-   */
-  onPullDownRefresh() {
-
+  // 切换水表
+  handleSwitchMeter() {
+    wx.navigateTo({
+      // url: '/pages/meterList/meterList'
+    })
   },
 
-  /**
-   * 页面上拉触底事件的处理函数
-   */
-  onReachBottom() {
-
+  // 充值缴费
+  handlePayment() {
+    wx.navigateTo({
+      // url: '/pages/payment/payment'
+    })
   },
 
-  /**
-   * 用户点击右上角分享
-   */
-  onShareAppMessage() {
-
+  // 功能按钮点击事件
+  handleFunctionClick(e) {
+    const index = e.currentTarget.dataset.index
+    const url = this.data.functionList[index].url
+    wx.navigateTo({ url })
   },
 
-  bindAccount() {
+  // 查看账单列表
+  handleViewBill() {
     wx.navigateTo({
-      url: '/pages/bind/bind'
+      // url: '/pages/billList/billList'
     })
   },
 
-  switchTab(e) {
-    const page = e.currentTarget.dataset.page
-    if (page === 'profile') {
-      wx.switchTab({
-        url: '/pages/profile/profile'
-      })
-    }
-  },
-
-  goToBindHuhao() {
+  // 查看更多活动
+  handleMoreActivity() {
     wx.navigateTo({
-      url: '/pages/huhaobangding/huhaobangding'
+      // url: '/pages/activityList/activityList'
     })
   }
-})
+})

pages/homepage/homepage.wxml

@@ -1,25 +1,89 @@
-<view class="container">
+<view class="container1">
   <!-- 顶部背景和Logo -->
   <view class="header">
     <image class="background" src="{{images.background}}" mode="widthFix" />
     <image class="logo" src="{{images.logo}}" mode="aspectFit" />
   </view>
 
-  <!-- 欢迎卡片 -->
-  <view class="welcome-card">
-    <image class="card-bg" src="{{images.card}}" mode="aspectFill" />
-    <view class="card-content">
-      <view class="title">欢迎使用智慧水务</view>
-      <view class="subtitle">润/泽/千/家/万/户</view>
-      <view class="divider"></view>
-      <button class="bind-button" bindtap="goToBindHuhao">户号绑定</button>
+  <!-- 卡片区域 -->
+  <view class="cards-container">
+    <!-- 用户信息卡片 -->
+    <view class="user-card">
+      <view class="user-info-section">
+        <view class="info-row">
+          <text class="label">户名</text>
+          <text class="value">{{userInfo.name}}</text>
+          <view class="switch-btn" bindtap="handleSwitchMeter">切换水表</view>
+        </view>
+
+        <view class="info-row">
+          <text class="label">户号信息</text>
+          <text class="value">{{userInfo.accountNumber}}</text>
+        </view>
+
+        <view class="info-row">
+          <text class="label">住址信息</text>
+          <text class="value">{{userInfo.address}}</text>
+        </view>
+      </view>
+
+    </view>
+    
+    <!-- 票据式分割线 -->
+    <view class="card-divider"></view>
+    
+    <!-- 水费金额信息卡片 -->
+    <view class="amount-card">
+      
+      <!-- 水费金额信息 -->
+      <view class="amount-section">
+        <!-- 左侧水滴背景图 -->
+        <image class="water-drop" src="{{images.kapiantubiao}}" mode="aspectFit"></image>
+        <!-- 中间金额显示 -->
+        <view class="amount-display">
+          <view class="total-amount">{{billInfo.totalAmount}}</view>
+          <view class="amount-label">总计应缴(元)</view>
+
+          <view class="amount-details">
+            <view class="detail-item">
+              <text class="number">{{billInfo.waterUsage}}</text>
+              <text class="label">用水量(m³)</text>
+            </view>
+            
+            <!-- 添加分隔线 -->
+            <view class="detail-divider"></view>
+            
+            <view class="detail-item">
+              <text class="number blue">{{billInfo.balance}}</text>
+              <text class="label">账号余额(元)</text>
+            </view>
+          </view>
+        </view>
+      </view>
+
+      <!-- 充值缴费按钮 -->
+      <button class="pay-btn" bindtap="handlePayment">充值缴费</button>
     </view>
   </view>
 
-  <!-- 通知列表 -->
-  <view class="notice-list">
-    <view class="notice-item" wx:for="{{notices}}" wx:key="index">
-      {{index + 1}}、{{item}}
+  <!-- 功能按钮区域 -->
+  <view class="function-area">
+    <view class="function-grid">
+      <view class="function-item" wx:for="{{functionList}}" wx:key="text" bindtap="handleFunctionClick" data-index="{{index}}">
+        <image src="{{item.icon}}" mode="aspectFit"></image>
+        <text>{{item.text}}</text>
+      </view>
+    </view>
+  </view>
+
+  <!-- 活动区域 -->
+  <view class="activity-area">
+    <view class="area-header">
+      <text class="title">精选活动</text>
+      <text class="more" bindtap="handleMoreActivity">更多 ></text>
+    </view>
+    <view class="activity-item">
+      <image class="activity-image" src="{{activity.imageUrl}}" mode="aspectFill"></image>
     </view>
   </view>
-</view>
+</view>

pages/homepage/homepage.wxss

@@ -1,158 +1,306 @@
-/* pages/homepage/homepage.wxss */
-.container {
+.container1 {
+  display: flex;
+  flex-direction: column;
+  background-color: #f5f5f5;
   min-height: 100vh;
-  background-color: #f5f7fa;
-  padding-bottom: 120rpx;
+  padding-bottom: 30rpx;
+}
+.logo {
+  position: absolute;
+  bottom: 80rpx;
+  width: 280rpx;
+  height: 100rpx;
+  top: 60rpx;
+  z-index: 2;
 }
-
 .header {
   position: relative;
   width: 100%;
-  height: 320rpx;
-  margin-top: -32rpx;
+  height: 180rpx;
 }
 
-.background {
+.header .background {
   position: absolute;
   top: 0;
   left: 0;
-  width: 101%;
+  width: 100%;
   height: 100%;
+  background-color: #0080ff;
 }
 
+.header .logo {
+  position: relative;
+  height: 80rpx;
+  margin: 50rpx 0 0 30rpx;
+  z-index: 1;
+}
 
-.logo {
-  position: absolute;
-  left: 32rpx;
-  bottom: 80rpx;
-  width: 280rpx;
-  height: 100rpx;
-  z-index: 2;
+.user-card {
+  position: relative;
+  background-color: #ffffff;
+  border-radius: 20rpx;
+  overflow: hidden;
+  padding-bottom: 30rpx;
+  top: 70rpx;
+  margin: 30rpx 30rpx 30rpx;
+}
+
+.user-info-section {
+  padding: 10rpx;
+}
+
+.info-row {
+  display: flex;
+  align-items: center;
+  margin-bottom: 15rpx;
+  position: relative;
 }
 
-.welcome-card {
+.info-row .label {
+  color: rgba(163, 163, 163, 1);
+  font-size: 28rpx;
+  width: 140rpx;
+  margin-right: 50rpx;
+  font-family: 'PingFang', '苹方', sans-serif; 
+}
+
+.info-row .value {
+  font-family: 'PingFang', '苹方', sans-serif;  /* 添加苹方字体 */
+  color: rgba(46, 48, 56, 1);
+  font-size: 28rpx;
+  flex: 1;
+}
+
+.switch-btn {
   position: absolute;
-  left: 4%;
-  /* 使用百分比替代固定像素 */
-  top: 128px;
-  /* 顶部距离可以保持固定，或根据需要调整 */
-  width: 92%;
-  /* 宽度占父容器的 96%，留出左右 2% 的边距 */
-  height: 188px;
-  /* 高度可以根据需要调整 */
-  opacity: 1;
-  background-color: #fff;
-  border-radius: 8px;
-  /* 圆角 */
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
-  overflow: hidden;
+  right: 0;
+  background-color: #f0f8ff;
+  color: #0080ff;
+  font-size: 24rpx;
+  padding: 8rpx 20rpx;
+  border-radius: 30rpx;
 }
 
-.card-bg {
+.amount-section {
+  position: relative;
+  padding: 20rpx 30rpx;
+  display: flex;
+  align-items: center;
+}
+
+.water-drop {
+  width: 200rpx;
   position: absolute;
-  width: 105%;
-  /* 宽度超出 .welcome-card 的 5%，实现覆盖效果 */
-  left: -2.5%;
-  /* 向左偏移 2.5%，使背景居中 */
-  height: 100%;
-  /* 高度与 .welcome-card 一致 */
-  opacity: 1;
-  background-color: #f0f0f0;
-  /* 背景色 */
-  border-radius: 8px;
-  /* 圆角 */
+  left: -30rpx; 
+  bottom: 13rpx;
 }
 
-.card-content {
+.amount-display {
+  flex: 1;
+  text-align: center;
   position: relative;
-  padding: 40rpx 32rpx;
-  z-index: 2;
+  z-index: 1;
 }
 
-.title {
-  font-size: 36rpx;
-  font-weight: 500;
-  margin-bottom: 12rpx;
-  letter-spacing: 0px;
-  line-height: 24px;
-  color: rgba(46, 48, 56, 1);
-  text-align: left;
-  vertical-align: top;
-  font-family: 'PingFang SC', sans-serif;
+.total-amount {
+  font-size: 60rpx;
+  color: #ff3b30;
+  font-weight: bold;
+  margin-bottom: 10rpx;
 }
 
-.subtitle {
-  font-size: 26rpx;
-  color: #999;
-  margin-bottom: 32rpx;
-  letter-spacing: 4rpx;
-}
-
-.bind-button {
-  width: 200rpx !important;
-  height: 70rpx;
-  line-height: 70rpx;
-  background: #4080FF;
-  color: #fff;
-  font-family: 'PingFang SC', sans-serif;
-  font-size: 30rpx;
-  border-radius: 40rpx;
-  margin-left: 0rpx;
-  /* 向左50rpx */
-  top: 40rpx;
-  /* 向下50rpx */
+.amount-label {
+  font-size: 24rpx;
+  color: #666;
+  margin-bottom: 30rpx;
+}
+
+.amount-details {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  margin-top: 20rpx;
+}
+
+.detail-item {
+  text-align: center;
 }
 
-.bind-button::after {
-  border: none;
+.detail-item .number {
+  display: block;
+  font-size: 32rpx;
+  color: #333;
+  margin-bottom: 10rpx;
 }
 
-.notice-list {
-  margin: 32rpx;
+.detail-item .number.blue {
+  color: #0080ff;
+}
+
+.detail-item .label {
+  font-size: 24rpx;
   color: #666;
-  
 }
 
-.notice-item {
-  font-size: 26rpx;
-  line-height: 1.8;
-  margin-bottom: 16rpx;
-  color: #999;
-  position: relative;
-  top: 100rpx;
-  /* 向下移动 10rpx */
+.detail-divider {
+  width: 2rpx;
+  height: 60rpx;
+  background-color: #DDDDDD;
+  margin: 0 10rpx;
+  align-self: center;
 }
 
-.tab-bar {
-  position: fixed;
-  bottom: 0;
-  width: 100%;
-  height: 100rpx;
-  background: #fff;
+.pay-btn {
+  width: 80%;
+  height: 80rpx;
+  line-height: 80rpx;
+  background-color: #0080ff;
+  color: white;
+  font-size: 32rpx;
+  border-radius: 40rpx;
+  margin: 30rpx auto 0;
+}
+
+.function-area {
+  margin: 15rpx 30rpx 15rpx;
+  background-color: #ffffff;
+  border-radius: 20rpx;
+  padding: 30rpx;
+  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
+}
+
+.function-grid {
   display: flex;
-  padding-bottom: env(safe-area-inset-bottom);
-  border-top: 1rpx solid #eee;
+  flex-wrap: wrap;
+  justify-content: space-between;
 }
 
-.tab-item {
-  flex: 1;
+.function-item {
+  width: 20%;
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
+  margin-bottom: 20rpx;
+}
+
+.function-item image {
+  width: 80rpx;
+  height: 80rpx;
+  margin-bottom: 10rpx;
+}
+
+.function-item text {
+  font-size: 24rpx;
+  color: #333;
+}
+
+.activity-area {
+  margin: 0rpx 30rpx 0rpx;
+  background-color: #ffffff;
+  border-radius: 20rpx;
+  padding: 30rpx;
+  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
+}
+
+.area-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20rpx;
+}
+
+.area-header .title {
+  font-size: 32rpx;
+  color: #333;
+  font-weight: bold;
+}
+
+.area-header .more {
   font-size: 24rpx;
   color: #999;
 }
 
-.tab-item.active {
-  color: #4080FF;
+.activity-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.activity-image {
+  width: 100%;
+  height: 200rpx;
+  border-radius: 10rpx;
+  margin-bottom: 20rpx;
+}
+
+/* 卡片容器样式 */
+.cards-container {
+  width: 90%;
+  margin: 0 auto;
+  position: relative;
+  z-index: 10;
+  margin-top: 40rpx;
+  background-color: transparent;
+  border-radius: 20rpx;
+  overflow: visible;
 }
 
-.divider {
-  left: 36px;
-  top: 201px;
-  width: 15px;
-  height: 0px;
-  opacity: 1;
-  border: 1px solid rgba(232, 232, 232, 1);
+/* 用户信息卡片样式 */
+.user-card {
+  background-color: #FAFCFF;
+  border-radius: 20rpx 20rpx 0 0;
+  padding: 30rpx;
+  position: relative;
+  width: 100%;
+  height: 220rpx;
+  box-sizing: border-box;
+  overflow: hidden;
+  margin: 0;
+  top: 0;
+  border-bottom: none;
+}
+
+/* 票据式分割线 */
+.card-divider {
+  position: relative;
+  border-top: 0rpx dashed #CCCCCC;
+  margin: 0 15rpx;
+  background-color: transparent;
+}
+
+/* 左侧半圆挖孔 */
+.card-divider::before {
+  content: "";
+  position: absolute;
+  left: -30rpx;
+  top: -15rpx;
+  width: 30rpx;
+  height: 30rpx;
+  background-color: #0080ff;
+  border-radius: 50%;
+  z-index: 1;
+}
+
+/* 右侧半圆挖孔 */
+.card-divider::after {
+  content: "";
+  position: absolute;
+  right: -30rpx;
+  top: -15rpx;
+  width: 30rpx;
+  height: 30rpx;
+  background-color: #0080ff;
+  border-radius: 50%;
+  z-index: 1;
+}
+
+/* 水费金额卡片样式 */
+.amount-card {
+  background-color: #FAFCFF;
+  border-radius: 0 0 20rpx 20rpx;
+  padding: 30rpx;
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+  border-top: none;
 }

pages/huhaobangding/huhaobangding.js

@@ -44,7 +44,7 @@ Page({
   // 拨打电话
   makePhoneCall() {
     wx.makePhoneCall({
-      phoneNumber: '客服电话号码'
+      phoneNumber: '17630145126'
     });
   },
 

pages/huhaobangding/huhaobangding.wxml

@@ -73,10 +73,10 @@
   </view>
 </view>
 
-<!-- 添加自定义预览模态框 -->
-<view class="preview-modal" wx:if="{{showPreview}}" bindtap="closePreview">
+<!-- 修改预览模态框部分 -->
+<view class="preview-modal {{showPreview ? 'show' : ''}}" bindtap="closePreview">
   <view class="preview-content" catchtap="preventBubble">
-    <image class="preview-image" src="{{tzd}}" mode="aspectFit"></image>
-    <view class="close-btn" bindtap="closePreview">×</view>
+    <image class="preview-image" src="/static_file/jcsfcjtzd.jpg" mode="widthFix"></image>
+    <view class="close-preview-btn" bindtap="closePreview">关闭</view>
   </view>
 </view>

pages/huhaobangding/huhaobangding.wxss

@@ -265,59 +265,61 @@ input {
 .preview {
   display: flex;
   align-items: center;
-  margin-left: 10px;
+  margin-left: 10rpx;
   color: #007bff;
   cursor: pointer;
 }
 
 .preview-icon {
-  width: 16px;
-  height: 16px;
-  margin-right: 5px;
+  width: 32rpx;
+  height: 32rpx;
+  margin-right: 10rpx;
 }
 
 .preview-text {
-  font-size: 14px;
+  font-size: 28rpx;
   color: rgba(104, 108, 128, 1);
 }
 
-
 .preview-modal {
   position: fixed;
   top: 0;
   left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.7);
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 1000;
+  opacity: 0;
+  visibility: hidden;
+  transition: all 0.3s;
+}
+
+.preview-modal.show {
+  opacity: 1;
+  visibility: visible;
 }
 
 .preview-content {
+  width: 90%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   position: relative;
-  width: 80%;
-  max-width: 600rpx;
-  background: transparent;
 }
 
 .preview-image {
   width: 100%;
-  height: auto;
+  max-height: 80vh;
 }
 
-.close-btn {
-  position: absolute;
-  top: -80rpx;
-  right: 0;
-  width: 60rpx;
-  height: 60rpx;
-  background: #fff;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 40rpx;
-  color: #333;
+.close-preview-btn {
+  margin-top: 30rpx;
+  padding: 20rpx 60rpx;
+  background: #FFFFFF;
+  color: #333333;
+  border-radius: 40rpx;
+  font-size: 28rpx;
 }