diff --git a/yudao-ui-admin/src/api/shop/rechargeOrder.js b/yudao-ui-admin/src/api/shop/rechargeOrder.js
index e3a5a3da0..b79182286 100644
--- a/yudao-ui-admin/src/api/shop/rechargeOrder.js
+++ b/yudao-ui-admin/src/api/shop/rechargeOrder.js
@@ -1,5 +1,13 @@
 import request from '@/utils/request'
 
+// 添加备注
+export function adminRemark(data) {
+  return request({
+    url: '/shop/recharge-order/adminRemark',
+    method: 'post',
+    data: data
+  })
+}
 
 // 获取商户
 export function getTenantList(data) {
diff --git a/yudao-ui-admin/src/views/shop/refundOrder/index.vue b/yudao-ui-admin/src/views/shop/refundOrder/index.vue
new file mode 100644
index 000000000..9db190686
--- /dev/null
+++ b/yudao-ui-admin/src/views/shop/refundOrder/index.vue
@@ -0,0 +1,368 @@
+<template>
+  <div class="app-container">
+
+    <!-- 搜索工作栏 -->
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="98px">
+      <el-form-item label="订单编号" prop="orderId">
+        <el-input v-model="queryParams.orderId" placeholder="请输入订单号" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="退款类型" prop="refundType">
+        <el-select v-model="queryParams.refundType" placeholder="请选择退款类型" clearable  @keyup.enter.native="handleQuery">
+          <el-option v-for="(item,index) in actionSheetList" :key="index" :value="item.value" :label="item.name"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="申请退款时间" prop="payTime">
+        <el-date-picker v-model="queryParams.payTime" @change="onchangeTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange"
+                        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="推广员" prop="nickname">
+        <el-input v-model="queryParams.nickname" placeholder="请输入推广员" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="商户名称" prop="tenantId">
+        <treeselect style="width: 240px;" v-model="queryParams.tenantId" :options="deptOptions" :show-count="true"
+                    placeholder="请选择商户名称" :normalizer="normalizer" @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="会员名称" prop="realName">
+        <el-input v-model="queryParams.realName" placeholder="请输入会员名称" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="充值号码" prop="userPhone">
+        <el-input v-model="queryParams.userPhone" placeholder="请输入充值号码" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" @click="handleQuery" >搜索</el-button>
+        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <!-- 操作工具栏 -->
+    <el-row :gutter="10" class="mb8">
+<!--      <el-col :span="1.5">-->
+<!--        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"-->
+<!--                   v-hasPermi="['shop:recharge-order:create']">新增</el-button>-->
+<!--      </el-col>-->
+      <el-col :span="1.5">
+        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
+                   v-hasPermi="['shop:recharge-order-refund:export']">导出</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <!-- 列表 -->
+    <el-table v-loading="loading" :data="list"  ref="multipleTable"   >
+      <el-table-column label="订单编号" align="center" prop="orderId" />
+      <el-table-column label="商户名称" align="center" prop="tenantName" />
+      <el-table-column label="推广员名称" align="center" prop="parentOrganizationName" >
+        <template v-slot="scope">
+          <span>{{ scope.row.parentOrganizationName }}</span>
+          <span v-if="scope.row.nickname!=='' && scope.row.nickname!==null">-{{ scope.row.nickname }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="会员名称" align="center" prop="realName" />
+      <el-table-column label="充值号码" align="center" prop="userPhone" />
+      <el-table-column label="退款类型" align="center" prop="refundName" />
+      <el-table-column label="退款理由" align="center" prop="memberReason" />
+      <el-table-column label="申请退款时间" align="center" prop="payTime" width="180">
+        <template v-slot="scope">
+          <span>{{ parseTime(scope.row.applyTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="退款完成时间" align="center" prop="payTime" width="180">
+        <template v-slot="scope">
+          <span>{{ parseTime(scope.row.applySucceedTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="备注" align="center" prop="adminReason" />
+      <el-table-column label="操作" align="center" class-name="small-padding" fixed="right" width="80">
+        <template v-slot="scope">
+          <el-button size="mini" type="text"  @click="handleAdd(scope.row)" v-hasPermi="['shop:recharge-order:remark']">添加备注</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 对话框(添加 / 修改) -->
+    <el-dialog title="添加备注" :visible.sync="open" width="500px" v-dialogDrag append-to-body>
+      <el-form ref="form" :model="form"  label-width="80px">
+        <el-form-item label="备注" prop="adminReason">
+          <el-input v-model="form.adminReason" placeholder="请输入备注" :autosize="{ minRows: 4}"
+                    type="textarea" :rules="[{request:true,message: '请输入备注', trigger: 'blur'}]"/>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+    <!-- 分页组件 -->
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
+                @pagination="getList"/>
+  </div>
+</template>
+
+<script>
+import {
+  createRechargeOrder,
+  updateRechargeOrder,
+  deleteRechargeOrder,
+  getTenantList,
+  updateByIds,
+  getRechargeOrderPage,
+  exportRechargeOrderExcel,
+  refundRechargeOrder,
+  adminRemark
+} from '@/api/shop/rechargeOrder';
+import ElementForm from "@/components/bpmnProcessDesigner/package/penal/form/ElementForm.vue";
+import Treeselect from "@riophae/vue-treeselect";
+import '@riophae/vue-treeselect/dist/vue-treeselect.css';
+export default {
+  name: "RechargeOrder",
+  components: {
+    Treeselect,
+    ElementForm
+  },
+  data() {
+    return {
+      actionSheetList: [{
+        name: '对活动理解有误',
+        value: 1,
+      },
+        {
+          name: '同一充值账户',
+          value: 2
+        },
+        {
+          name: '改套餐/转网/销户',
+          value: 3
+        },
+        {
+          name: '下单信息有误',
+          value: 4
+        },
+        {
+          name: '业绩归属错误',
+          value: 5
+        },
+        {
+          name: '重复订单',
+          value: 6
+        },
+        {
+          name: '号码充值失败',
+          value: 7
+        },
+        {
+          name: '等待时间过长',
+          value: 8
+        },
+        {
+          name: '其它原因',
+          value: 9
+        }
+      ],
+      deptOptions:[],
+      // 遮罩层
+      loading: true,
+      // 导出遮罩层
+      exportLoading: false,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 订单列表
+      list: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNo: 1,
+        pageSize: 10,
+        refundStatus:2
+      },
+      // 表单参数
+      form: {},
+      multipleSelection: []
+    };
+  },
+  created() {
+    this.getList();
+    this.getTreeselect();
+  },
+  methods: {
+    onchangeTime(value){
+      this.queryParams.startApplyTime  = value[0]
+      this.queryParams.endApplyTime = value[1]
+    },
+    /** 查询部门下拉树结构 + 岗位下拉 */
+    getTreeselect() {
+      getTenantList().then(response => {
+        // 处理 deptOptions 参数
+        this.deptOptions = response.data
+      });
+    },
+    // 格式化部门的下拉框
+    normalizer(node) {
+      return {
+        id: node.id,
+        label: node.name,
+        children: node.children
+      }
+    },
+    selectable(row,rowIndex) {
+      if(!row.status){
+        return true;  //不禁用
+      }else {
+        return false;  //禁用
+      }
+    },
+    async handleGoods(){
+      if(this.multipleSelection.length){
+        await updateByIds({ids:this.multipleSelection,status:true})
+        this.getList();
+      }else {
+        this.$modal.msgWarning("请勾选需要更改发货状态的订单")
+      }
+    },
+    handleSelectionChange(rows) {
+      const arr = rows.filter(({ status }) => !status );
+      if(arr.length){
+        this.multipleSelection = arr.map(({id}) => id)
+      }else {
+        this.multipleSelection = []
+      }
+    },
+    handleReview(row, status){
+
+    },
+    /** 查询列表 */
+    getList() {
+      this.loading = true;
+      // 执行查询
+      getRechargeOrderPage(this.queryParams).then(response => {
+        this.list = response.data.list;
+        this.$nextTick(()=>{
+          this.list.forEach((item) => {
+            item.status && this.$refs.multipleTable.toggleRowSelection(item,true);
+          })
+        })
+        this.total = response.data.total;
+        this.loading = false;
+      });
+    },
+    /** 取消按钮 */
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    /** 表单重置 */
+    reset() {
+      this.form = {
+        id: undefined,
+        orderId: undefined,
+        uid: undefined,
+        realName: undefined,
+        userPhone: undefined,
+        confirmPhone: undefined,
+        totalNum: undefined,
+        totalPrice: undefined,
+        payPrice: undefined,
+        paid: undefined,
+        payTime: undefined,
+        payEndTime: undefined,
+        payType: undefined,
+        status: undefined,
+        refundStatus: undefined,
+        refundReasonWapImg: undefined,
+        refundReasonWapExplain: undefined,
+        refundReasonWap: undefined,
+        refundReason: undefined,
+        refundReasonTime: undefined,
+        refundPrice: undefined,
+        mark: undefined,
+        remark: undefined,
+        cost: undefined,
+        isChannel: undefined,
+        isRemind: undefined,
+        isSystemDel: undefined,
+        type: undefined,
+        proTotalPrice: undefined,
+        beforePayPrice: undefined,
+        isAlterPrice: undefined,
+        outTradeNo: undefined,
+        paySerialNumber: undefined,
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNo = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.queryParams ={
+        pageNo: 1,
+        pageSize: 10,
+        refundStatus:2
+      };
+      this.handleQuery();
+    },
+    /** 新增按钮操作 */
+    handleAdd(item) {
+      this.reset();
+      this.form.orderId = item.id
+      this.open = true;
+    },
+    /** 退款按钮操作 */
+    handleRefund(row, type) {
+      const id = row.id;
+      this.$modal.confirm('是否退款订单编号为"' + id + '"的数据?').then(function() {
+        return refundRechargeOrder({
+          orderId: id,
+          type: type
+        });
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("发起退款成功");
+      }).catch(() => {});
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (!valid) {
+          return;
+        }
+        // 添加的提交
+        adminRemark(this.form).then(response => {
+          this.$modal.msgSuccess("新增成功");
+          this.open = false;
+          this.getList();
+        });
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const id = row.id;
+      this.$modal.confirm('是否确认删除订单编号为"' + id + '"的数据项?').then(function() {
+          return deleteRechargeOrder(id);
+        }).then(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+        }).catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      // 处理查询参数
+      let params = {...this.queryParams};
+      params.pageNo = undefined;
+      params.pageSize = undefined;
+      this.$modal.confirm('是否确认导出所有订单数据项?').then(() => {
+          this.exportLoading = true;
+          return exportRechargeOrderExcel(params);
+        }).then(response => {
+          this.$download.excel(response, '订单.xls');
+          this.exportLoading = false;
+        }).catch(() => {});
+    }
+  }
+};
+</script>
diff --git a/yudao-ui-app/pages/member_record/index.vue b/yudao-ui-app/pages/member_record/index.vue
index 20b781461..31ef1fc5d 100644
--- a/yudao-ui-app/pages/member_record/index.vue
+++ b/yudao-ui-app/pages/member_record/index.vue
@@ -1,7 +1,8 @@
 <template>
   <view class="box">
     <view class="box-seach">
-      <u-search placeholder="按手机号搜索查询" v-model="keyword" border-color="#F94B78" height="70" margin="0 0 35rpx 0" placeholder-color="#9C9C9C" bg-color="#fff" :show-action="false"></u-search>
+      <u-search placeholder="按手机号搜索查询" v-model="keyword" border-color="#F94B78" height="70" margin="0 0 35rpx 0"
+        placeholder-color="#9C9C9C" bg-color="#fff" :show-action="false"></u-search>
     </view>
     <view class="list-item" v-for="(item,index) in memberData" :key="index" @click.stop="handleBack(item)">
       <view class="item-title">
@@ -12,86 +13,186 @@
         <button v-show="item.bool && item.refundStatus == 0" @click.stop="handleService(item)">申请退款</button>
         <view v-show="item.refundStatus != 0">{{list[item.refundStatus]}}</view>
       </view>
-        <view class="item-text">
+      <view class="item-text">
         <text>日期：{{$util.timestampToTime(item.stringCreateTime)}}</text>
         <text>充值档次：{{item.grade}}</text>
-        </view>
-  </view>
-  <u-empty v-show="!memberData.length" text="暂无数据" mode="list"></u-empty>
-  <u-navbar autoBack  title="购买记录"></u-navbar>
+      </view>
+    </view>
+    <u-modal :show="serviceShow" @confirm="confirm" @cancel="serviceShow = false" title="申请退款" show-cancel-button
+      confirm-text="确认退款" cancel-text="取消退款">
+      <view class="slot-content">
+        <u--form :model="form" ref="uForm" :rules="rules" label-width="120">
+          <u-form-item label="退款类型" prop="name" @click="show = true;">
+            <u--input v-model="form.name" disabled disabledColor="#ffffff" placeholder='请选择退款类型'></u--input>
+            <u-icon slot="right" name="arrow-right"></u-icon>
+          </u-form-item>
+          <u-form-item label="退款理由" prop="refundName"><u--textarea v-model="form.refundName" maxlength="100"
+              placeholder='请输入退款理由' count autoHeight /></u-form-item>
+        </u--form>
+      </view>
+    </u-modal>
+    <u-empty v-show="!memberData.length" text="暂无数据" mode="list"></u-empty>
+    <u-navbar autoBack title="购买记录"></u-navbar>
+    <u-action-sheet :show="show" :actions="actionSheetList" title="请选择退款类型" @close="show = false"
+      @select="handleSelect">
+    </u-action-sheet>
   </view>
 </template>
 
 <script>
   import {
-  	memberOrderInfo,memberApplyRefund,memberOrderInfoByPhone
+    memberOrderInfo,
+    memberApplyRefund,
+    memberOrderInfoByPhone
   } from '@/api/member.js';
-  import { Debounce } from '@/utils/validate.js'
+  import {
+    Debounce
+  } from '@/utils/validate.js'
   export default {
     name: "member_record",
     data() {
       return {
-        keyword:'',
-        memberData:[],
-        list:['未退款','退款申请中','已退款','退款中']
+        rules: {
+          name: [{
+            required: true,
+            message: '请选择退款类型',
+            // 可以单个或者同时写两个触发验证方式
+            trigger: ['change', 'blur'],
+          }],
+          refundType: [{
+            required: true,
+            message: '请选择退款类型',
+            // 可以单个或者同时写两个触发验证方式
+            trigger: ['change', 'blur'],
+          }],
+          refundName: [{
+            required: true,
+            message: '请输入退款理由',
+            trigger: ['change', 'blur'],
+          }]
+        },
+        show: false,
+        serviceShow: false,
+        keyword: '',
+        memberData: [],
+        form: {
+          name: '',
+          refundType: '',
+          refundName: ''
+        },
+        list: ['未退款', '退款申请中', '已退款', '退款中'],
+        actionSheetList: [{
+            name: '对活动理解有误',
+            value: 1,
+          },
+          {
+            name: '同一充值账户',
+            value: 2
+          },
+          {
+            name: '改套餐/转网/销户',
+            value: 3
+          },
+          {
+            name: '下单信息有误',
+            value: 4
+          },
+          {
+            name: '业绩归属错误',
+            value: 5
+          },
+          {
+            name: '重复订单',
+            value: 6
+          },
+          {
+            name: '号码充值失败',
+            value: 7
+          },
+          {
+            name: '等待时间过长',
+            value: 8
+          },
+          {
+            name: '其它原因',
+            value: 9
+          }
+        ],
       };
     },
     async onLoad() {
       await this.getList()
     },
-    watch:{
-      keyword :Debounce (async function (){
-        if(this.keyword == ''){
-         await this.getList()
-        }else{
-         await this.searchList()
+    watch: {
+      keyword: Debounce(async function() {
+        if (this.keyword == '') {
+          await this.getList()
+        } else {
+          await this.searchList()
         }
-      },1000)
-      },
+      }, 1000)
+    },
     methods: {
-      handleBack(item){
+      handleSelect(e) {
+        this.form.refundType = e.refundType
+        this.form.name = e.name
+        this.$refs.uForm.validateField('form.refundType')
+      },
+      handleBack(item) {
         uni.navigateTo({
-          url:`/pages/member_back/index?userPhone=${item.userPhone}&grade=${item.grade}`
+          url: `/pages/member_back/index?userPhone=${item.userPhone}&grade=${item.grade}`
         })
       },
-      async searchList(){
-        let milliseconds = 2 * 3600 * 1000  // 7200000 毫秒
-         let timestamp = new Date().getTime()
-           const res = await memberOrderInfoByPhone(this.keyword)
-          if(res.data){
-            const arr = res.data.map((item) => {
-               return {
-                 ...item,
-                 bool:item.createTime+milliseconds>timestamp
-               }
-             })
-             this.memberData = arr
-          }else{
-            this.memberData = []
-          }
-      },
-      async getList(){
-        let milliseconds = 2 * 3600 * 1000  // 7200000 毫秒
-         let timestamp = new Date().getTime()
-         const res = await memberOrderInfo()
-        if(res.data){
+      async searchList() {
+        let milliseconds = 2 * 3600 * 1000 // 7200000 毫秒
+        let timestamp = new Date().getTime()
+        const res = await memberOrderInfoByPhone(this.keyword)
+        if (res.data) {
           const arr = res.data.map((item) => {
-             return {
-               ...item,
-               bool:item.createTime+milliseconds>timestamp
-             }
-           })
-           this.memberData = arr
-        }else{
+            return {
+              ...item,
+              bool: item.createTime + milliseconds > timestamp
+            }
+          })
+          this.memberData = arr
+        } else {
           this.memberData = []
         }
       },
-     async handleService(item){
-       await memberApplyRefund({orderId:item.id,type:3})
-       this.$util.Tips({
-       	title: '申请成功'
-       });
-       await this.getList()
+      async getList() {
+        let milliseconds = 2 * 3600 * 1000 // 7200000 毫秒
+        let timestamp = new Date().getTime()
+        const res = await memberOrderInfo()
+        if (res.data) {
+          const arr = res.data.map((item) => {
+            return {
+              ...item,
+              bool: item.createTime + milliseconds > timestamp
+            }
+          })
+          this.memberData = arr
+        } else {
+          this.memberData = []
+        }
+      },
+      async confirm() {
+        this.$refs.uForm.validate().then(async res => {
+          await memberApplyRefund(this.form)
+          this.$util.Tips({
+            title: '申请成功'
+          });
+          this.serviceShow = false
+          await this.getList()
+        }).catch(errors => {
+          uni.$u.toast('校验失败')
+        })
+      },
+      async handleService(item) {
+        this.serviceShow = true
+        this.form = {
+          orderId: item.id,
+          type: 3
+        }
       }
     }
   };
@@ -100,70 +201,78 @@
 <style lang="scss" scoped>
   .box {
     margin-top: 10%;
-      padding: 20% 40rpx;
-      background: url(../../static/images/memberBg.png);
-      background-size: cover;
-      background-repeat: no-repeat;
-      background-attachment: fixed;
-      .u-empty{
-        margin-top: 20% !important;
-        ::v-deep .u-icon__icon{
-          font-size: 140rpx !important;
+    padding: 20% 40rpx;
+    background: url(../../static/images/memberBg.png);
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+
+    .u-empty {
+      margin-top: 20% !important;
+
+      ::v-deep .u-icon__icon {
+        font-size: 140rpx !important;
+      }
+
+      ::v-deep .u-empty__text {
+        font-size: 30rpx !important;
+      }
+    }
+
+    .box-seach {
+      z-index: 999;
+      padding: 0 40rpx;
+      width: 100%;
+      position: fixed;
+      top: 8%;
+      left: 0;
+    }
+
+    .list-item {
+      margin-bottom: 26rpx;
+      padding: 30rpx 16rpx 25rpx 16rpx;
+      background: #FDF0F1;
+      border-radius: 20rpx;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+
+      .item-title {
+        display: flex;
+        justify-content: space-between;
+
+        .item-phone {
+          display: flex;
+          align-items: center;
+          font-size: 30rpx;
+          color: #E91D51;
+
+          view {
+            border-radius: 3rpx;
+            margin-right: 10rpx;
+            width: 5rpx;
+            height: 12rpx;
+            background: #E91D51;
+          }
         }
-       ::v-deep .u-empty__text{
-          font-size: 30rpx !important;
+
+        button {
+          padding: 6rpx;
+          font-size: 26rpx;
+          background: rgb(22, 155, 213);
+          color: #fff;
         }
       }
 
-      .box-seach{
-        z-index: 999;
-        padding: 0 40rpx;
-        width: 100%;
-        position: fixed;
-        top:  8%;
-        left: 0;
-      }
-      .list-item{
-        margin-bottom: 26rpx;
-        padding: 30rpx 16rpx 25rpx 16rpx;
-        background: #FDF0F1;
-        border-radius: 20rpx;
+      .item-text {
+        padding: 20rpx 12rpx;
+        background: #fff;
+        margin-top: 20rpx;
         display: flex;
         flex-direction: column;
         justify-content: space-between;
-        .item-title{
-          display: flex;
-          justify-content: space-between;
-          .item-phone{
-            display: flex;
-            align-items: center;
-            font-size: 30rpx;
-            color: #E91D51;
-            view{
-              border-radius: 3rpx;
-              margin-right: 10rpx;
-              width: 5rpx;
-              height: 12rpx;
-              background: #E91D51;
-            }
-          }
-          button{
-            padding: 6rpx ;
-            font-size: 26rpx;
-            background: rgb(22,155,213);
-            color: #fff;
-          }
-        }
-
-        .item-text{
-          padding: 20rpx 12rpx;
-          background: #fff;
-          margin-top: 20rpx;
-          display: flex;
-          flex-direction: column;
-          justify-content: space-between;
-          font-size: 30rpx;
-        }
+        font-size: 30rpx;
       }
+    }
   }
 </style>