沈丘营商办后台前端项目
2个文件已添加
7个文件已修改
571 ■■■■■ 已修改文件
.env.development 2 ●●● 补丁 | 查看 | 原始文档 | blame | 历史
index.html 2 ●●● 补丁 | 查看 | 原始文档 | blame | 历史
package.json 4 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/api/system/manage.ts 62 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/layout/components/Sidebar/Logo.vue 4 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/infomanger/companymanger/components/createQrcode.vue 4 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/infomanger/infoLook/components/createQrcode.vue 4 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/login.vue 2 ●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/system/manage/index.vue 487 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
.env.development
@@ -5,7 +5,7 @@
VITE_APP_ENV = 'development'
# VITE_APP_BASE = 'http://172.16.61.31:8089'
VITE_APP_BASE = 'http://172.16.60.184:8089'
VITE_APP_BASE = 'http://172.16.60.20:8086'
# VITE_APP_BASE = 'http://172.16.61.34:8089'
#VITE_APP_BASE = 'http://localhost:8089'
index.html
@@ -6,7 +6,7 @@
    <meta name="renderer" content="webkit" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <!-- <link rel="icon" href="/logo.ico" /> -->
    <title>惠企执法</title>
    <title>察县扫码入企监督平台</title>
    <script src='//webapi.amap.com/maps?v=2.0&key=a3472b04ae282cabb61670b13c7b90ab' type="text/javascript"></script>
    <script src="//webapi.amap.com/ui/1.1/main.js"></script>
    <!--[if lt IE 11
package.json
@@ -1,8 +1,8 @@
{
  "name": "ruoyi",
  "version": "3.8.5",
  "description": "惠企执法",
  "author": "惠企执法",
  "description": "察县扫码入企监督平台",
  "author": "察县扫码入企监督平台",
  "scripts": {
    "build:prod": "vite build",
    "build:stage": "vite build --mode staging",
src/api/system/manage.ts
New file
@@ -0,0 +1,62 @@
import request from "@/utils/request";
// 查询计划管理列表
export function listManage(query: any) {
  return request({
    url: "/system/manage/list",
    method: "get",
    params: query,
  });
}
// 查询计划管理详细
export function getManage(id: any) {
  return request({
    url: "/system/manage/" + id,
    method: "get",
  });
}
// 新增计划管理
export function addManage(data: any) {
  return request({
    url: "/system/manage/add",
    method: "post",
    data: data,
  });
}
// 修改计划管理
export function updateManage(data: any) {
  return request({
    url: "/system/manage/upd",
    method: "post",
    data: data,
  });
}
// 删除计划管理
export function delManage(id: any) {
  return request({
    url: "/system/manage/" + id,
    method: "delete",
  });
}
// 下载模板 /system/manage/exportTemplate
export function exportTemplate(data: any) {
  return request({
    url: `/system/manage/exportTemplate`,
    method: 'get',
    params: data
  })
}
// 导出计划管理 /system/manage/exportTemplate
export function exportManage(data: any) {
    return request({
      url: `/system/manage/export `,
      method: 'get',
      params: data
    })
  }
src/layout/components/Sidebar/Logo.vue
@@ -7,7 +7,7 @@
      </router-link>
      <router-link v-else key="expand" class="sidebar-logo-link" to="/home">
        <!-- <img v-if="logotxt" :src="logotxt" class="sidebar-logo-txt" /> -->
        惠企执法
        察县扫码入企监督平台
      </router-link>
    </transition>
  </div>
@@ -26,7 +26,7 @@
  },
});
const title = ref("惠企执法");
const title = ref("察县扫码入企监督平台");
const settingsStore = useSettingsStore();
const sideTheme = computed(() => settingsStore.sideTheme);
</script>
src/views/infomanger/companymanger/components/createQrcode.vue
@@ -2,7 +2,7 @@
  <el-dialog title="二维码"  v-model="dialogVisible" width="300px" @close="closeDialog"> 
    <div class="text-center">
      <vueQr ref="query" background="#fff" :text="info.companyCode"></vueQr>
      <div style="font-weight: bold;margin-bottom: 10px;">沈丘惠企执法</div>
      <div style="font-weight: bold;margin-bottom: 10px;">察县扫码入企监督平台</div>
      <div>{{ info.companyName }}</div>
      <div style="margin-top: 10px;">
        <el-link @click="downImage" type="primary">下载企业码</el-link>
@@ -58,7 +58,7 @@
      ctx.fillStyle = '#000';
      // ctx.setFontWeight('bold')
      ctx.font ='bold 20px Arial'
      wrapText(ctx, "沈丘惠企执法", 180, 320, 350, 40)
      wrapText(ctx, "察县扫码入企监督平台", 180, 320, 350, 40)
      // ctx.setFontWeight('normal')
      ctx.font ="20px Arial"
      wrapText(ctx, text, 180, 350, 350, 20)
src/views/infomanger/infoLook/components/createQrcode.vue
@@ -2,7 +2,7 @@
  <el-dialog title="二维码"  v-model="dialogVisible" width="300px" @close="closeDialog"> 
    <div class="text-center">
      <vueQr ref="query" background="#fff" :text="info.companyCode"></vueQr>
      <div style="font-weight: bold;margin-bottom: 10px;">沈丘惠企执法</div>
      <div style="font-weight: bold;margin-bottom: 10px;">察县扫码入企监督平台</div>
      <div>{{ info.companyName }}</div>
      <div style="margin-top: 10px;">
@@ -59,7 +59,7 @@
      ctx.fillStyle = '#000';
      // ctx.setFontWeight('bold')
      ctx.font ='bold 20px Arial'
      wrapText(ctx, "沈丘惠企执法", 180, 320, 350, 40)
      wrapText(ctx, "察县扫码入企监督平台", 180, 320, 350, 40)
      // ctx.setFontWeight('normal')
      ctx.font ="20px Arial"
      wrapText(ctx, text, 180, 350, 350, 20)
src/views/login.vue
@@ -4,7 +4,7 @@
    <Particles id="tsparticles" :particlesInit="particlesInit" :particlesLoaded="particlesLoaded" :options="options" />
    <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
      <h3 class="title">沈丘惠企执法</h3>
      <h3 class="title">察县扫码入企监督平台</h3>
      <el-form-item prop="username">
        <el-input v-model="loginForm.username" type="text" size="large" auto-complete="off" placeholder="账号">
          <template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template>
src/views/system/manage/index.vue
New file
@@ -0,0 +1,487 @@
<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" class="evenly-distributed-labels" :inline="true" v-show="showSearch"
      label-width="80px" label-position="left">
      <el-form-item label="计划名称" prop="companyName">
        <el-input v-model="queryParams.planName" placeholder="请输入计划名称" clearable style="width: 200px"
          @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item label="计划编号" prop="companyCode">
        <el-input v-model="queryParams.planNo" placeholder="请输入计划编号" clearable style="width: 200px"
          @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item label="执法单位" prop="executiveSection">
        <el-input v-model="queryParams.executiveSection" placeholder="请输入执法单位" clearable style="width: 200px"
          @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item label="执法时间" style="width: 290px">
        <el-date-picker v-model="dateRange" value-format="YYYY-MM" type="monthrange" range-separator="-"
          start-placeholder="开始日期" end-placeholder="结束日期" @change="changeDateHandler"></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button 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="Plus" @click="handleAdd()" v-hasPermi="['system:dept:add']">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="Upload" @click="handleImport"
          v-hasPermi="['system:user:import']">导入</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" plain icon="Download" @click="downLoadCode">导出</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" plain icon="View" @click="downLoadCode">发起综合查一次</el-button>
      </el-col>
    </el-row>
    <!-- @selection-change="handleSelectionChange" -->
    <el-table v-if="refreshTable" v-loading="loading" :data="deptList" row-key="companyId"
      :default-expand-all="isExpandAll" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
      <!-- <el-table-column type="selection" width="55" align="center" /> -->
      <el-table-column prop="planNo" label="序号" width="55">
        <template #default="scope">{{ scope.$index + 1 }}</template>
      </el-table-column>
      <el-table-column prop="planNo" label="计划编号" width="180"></el-table-column>
      <el-table-column prop="planName" label="计划名称" width="180"></el-table-column>
      <el-table-column prop="makeOrgName" label="制定机构" width="180"></el-table-column>
      <el-table-column prop="checkdObject" label="被检查对象" width="180"></el-table-column>
      <el-table-column prop="unifiedSocialCreditCode" label="统一社会信用代码" width="180"></el-table-column>
      <el-table-column prop="industry" label="所属行业" width="180"></el-table-column>
      <el-table-column prop="checkdType" label="检查方式" width="180"></el-table-column>
      <el-table-column prop="checkdContent" label="检查内容" width="180"></el-table-column>
      <el-table-column prop="executiveSection" label="执行科室" width="180"></el-table-column>
      <el-table-column prop="planFrequency" label="计划频次" width="180"></el-table-column>
      <el-table-column prop="planMonth" label="计划月份" width="180"></el-table-column>
      <el-table-column prop="planStatus" label="状态" width="180"></el-table-column>
      <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width" width="180">
        <template #default="scope">
          <el-link type="info" @click="handleView(scope.row)">查看</el-link>
          <el-divider direction="vertical" />
          <el-link type="primary" @click="handleAdd(scope.row)">编辑</el-link>
          <el-divider direction="vertical" />
          <el-link type="error" @click="handleDelete(scope.row)">删除</el-link>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="queryParams.total > 0" :total="queryParams.total" v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize" @pagination="getList" />
    <!-- 添加或修改对话框 -->
    <el-dialog :title="title" v-model="open" width="700px" append-to-body>
      <el-form ref="deptRef" :model="form" :rules="rules" label-width="140px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="计划编号" prop="planNo">
              <el-input v-model="form.planNo" placeholder="请输入计划名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="计划名称" prop="planName">
              <el-input v-model="form.planName" placeholder="请输入计划名称" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="制定计划的机构" prop="makeOrgName">
              <el-input v-model="form.makeOrgName" placeholder="请输入制定计划的机构" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="被检查的对象" prop="checkdObject">
              <el-input v-model="form.checkdObject" placeholder="请输入被检查的对象" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="统一社会信用代码" prop="unifiedSocialCreditCode">
              <el-input v-model="form.unifiedSocialCreditCode" placeholder="请输入统一社会信用代码" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属行业" prop="industry">
              <el-input v-model="form.industry" placeholder="请输入所属行业" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="检查方式" prop="executiveSection">
              <el-input v-model="form.checkdType" placeholder="请输入检查方式" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="执行科室" prop="executiveSection">
              <el-input v-model="form.executiveSection" placeholder="请输入执行科室" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="检查内容" prop="checkdContent">
              <el-input v-model="form.checkdContent" type="textarea" placeholder="请输入检查内容" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="计划月份" prop="planMonth">
              <el-date-picker v-model="form.planMonth" type="month" format="YYYY-MM" value-format="YYYY-MM"
                placeholder="请选择计划月份" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="计划频率" prop="planFrequency">
              <el-input v-model="form.planFrequency" placeholder="请输入计划频率" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="状态" prop="planStatus">
              <el-input v-model="form.planStatus" placeholder="请输入状态" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 计划导入对话框 -->
    <el-dialog :title="upload.title" v-model="upload.open" width="400px" append-to-body>
      <el-upload ref="uploadRef" :limit="1" accept=".xlsx, .xls" :headers="upload.headers"
        :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
        <template #tip>
          <div class="el-upload__tip text-center">
            <div class="el-upload__tip"><el-checkbox v-model="upload.updateSupport" />是否更新已经存在的计划数据</div>
            <span>仅允许导入xls、xlsx格式文件。</span>
            <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline"
              @click="importTemplate">下载模板</el-link>
          </div>
        </template>
      </el-upload>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitFileForm">确 定</el-button>
          <el-button @click="upload.open = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 计划详细 -->
    <el-dialog title="计划详情" v-model="planOpen" width="700px" append-to-body>
      <el-form label-width="140px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="计划编号:">{{ planDetail.planNo }}</el-form-item>
            <el-form-item label="计划名称:">{{ planDetail.planName }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="制定计划的机构:">{{ planDetail.makeOrgName }}</el-form-item>
            <el-form-item label="被检查的对象:">{{ planDetail.checkdObject }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="统一社会信用代码:">{{ planDetail.unifiedSocialCreditCode }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属行业:">{{ planDetail.industry }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="检查方式:">{{ planDetail.checkdType }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="执行科室:">{{ planDetail.executiveSection }}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="检查内容:">{{ planDetail.checkdContent }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="计划月份:">{{ planDetail.planMonth }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="计划频率:">{{ planDetail.planFrequency }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态:">{{ planDetail.planStatus }}</el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="planOpen = false; planDetail = {}">关 闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup name="Dept">
import { getToken } from "@/utils/auth";
import { listManage, addManage, getManage, updateManage, delManage, exportTemplate, exportManage } from "@/api/system/manage";
import { computed } from "vue";
import useSettingsStore from "@/store/modules/settings";
// import { download } from '@/utils/request'; // 下载文件
import { download as downloadHttp } from '@/utils/request'
const { proxy } = getCurrentInstance();
const { sys_normal_disable } = proxy.useDict("sys_normal_disable");
const deptList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const title = ref("");
const isExpandAll = ref(false);
const refreshTable = ref(true);
const planOpen = ref(false);
const planDetail = ref({});
const dateRange = ref([]);
const data = reactive({
  form: {},
  queryParams: {
    planNo: '',
    planName: '',
    executiveSection: '',
    value1: '',
    pageNum: 1,
    pageSize: 10,
    total: 1
  },
  rules: {
    planNo: [{ required: true, message: "计划编号不能为空", trigger: "blur" }],
    planName: [{ required: true, message: "计划名称不能为空", trigger: "blur" }],
    makeOrgName: [{ required: true, message: "制定计划的机构不能为空", trigger: "blur" }],
    checkdObject: [{ required: true, message: "被检查对象不能为空", trigger: "blur" }],
    unifiedSocialCreditCode: [{ required: true, message: "统一社会信用代码不能为空", trigger: "blur" }],
    industry: [{ required: true, message: "所属行业不能为空", trigger: "blur" }],
    checkdContent: [{ required: true, message: "检查内容不能为空", trigger: "blur" }],
    executiveSection: [{ required: true, message: "执行科室不能为空", trigger: "blur" }],
    planFrequency: [{ required: true, message: "计划频次不能为空", trigger: "blur" }],
    planMonth: [{ required: true, message: "计划月份不能为空", trigger: "blur" }],
    checkdType: [{ required: true, message: "检查方式不能为空", trigger: "blur" }],
    planStatus: [{ required: true, message: "状态不能为空", trigger: "blur" }],
  },
});
// 月份选择
const changeDateHandler = (value) => {
  data.queryParams.planMonthStart = value[0]
  data.queryParams.planMonthEnd = value[1]
}
/*** 计划导入参数 */
const upload = reactive({
  // 是否显示弹出层(用户导入)
  open: false,
  // 弹出层标题(用户导入)
  title: "",
  // 是否禁用上传
  isUploading: false,
  // 是否更新已经存在的用户数据
  updateSupport: 0,
  // 设置上传的请求头部
  headers: { Authorization: "Bearer " + getToken() },
  // 上传的地址
  url: import.meta.env.VITE_APP_BASE_API + "/system/manage/importData",
});
/**文件上传中处理 */
const handleFileUploadProgress = (event, file, fileList) => {
  upload.isUploading = true;
};
/** 文件上传成功处理 */
const handleFileSuccess = (response, file, fileList) => {
  upload.open = false;
  upload.isUploading = false;
  proxy.$refs["uploadRef"].handleRemove(file);
  proxy.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", {
    dangerouslyUseHTMLString: true,
  });
  getList();
};
const { queryParams, form, rules } = toRefs(data);
/** 查询计划列表 */
function getList() {
  loading.value = true;
  listManage(queryParams.value).then((response) => {
    deptList.value = response.rows
    data.queryParams.total = response.total
    loading.value = false;
  });
}
/** 取消按钮 */
function cancel() {
  open.value = false;
  reset();
  getList();
}
/** 表单重置 */
function reset() {
  form.value = {
    planNo: '', // 计划编号
    planName: '', // 计划名称
    makeOrgName: '', // 制定机构
    checkdObject: '', // 被检查对象
    unifiedSocialCreditCode: '', // 统一社会信用代码
    industry: '', // 所属行业
    checkdContent: '', // 检查内容
    executiveSection: '', // 执行科室
    planFrequency: '', // 计划频次
    planMonth: '', // 计划月份
    checkdType: '', // 检查方式
    planStatus: '', // 状态
  };
  proxy.resetForm("deptRef");
}
const queryRef = ref()
/** 搜索按钮操作 */
function handleQuery() {
  getList();
}
/** 重置按钮操作 */
function resetQuery() {
  queryRef.value.resetFields();
  dateRange.value = [];
  queryParams.value = {
    planNo: '', // 计划编号
    planName: '', // 计划名称
    executiveSection: '', // 执法单位
    planMonthStart: '', // 计划开始月份
    planMonthEnd: '', // 计划结束月份
  }
  handleQuery();
}
function getDetails(id) {
  getManage(id).then((response) => {
    form.value = response.data;
    open.value = true;
  });
}
/** 详细按钮操作 */
function handleView(row) {
  planOpen.value = true;
  planDetail.value = row
  planOpen.value = true;
}
/** 新增按钮操作 */
function handleAdd(row) {
  if (row) {
    title.value = "编辑计划";
    getDetails(row.id)
  } else {
    // form.value = {
    //   companyStatus: 0
    // }
    title.value = "添加计划";
    open.value = true;
  }
}
/** 提交按钮 */
function submitForm() {
  proxy.$refs["deptRef"].validate((valid) => {
    if (valid) {
      if (form.value.id != undefined) {
        updateManage(form.value).then((response) => {
          proxy.$modal.msgSuccess("修改成功");
          open.value = false;
          getList();
        });
      } else {
        addManage(form.value).then((response) => {
          proxy.$modal.msgSuccess("新增成功");
          open.value = false;
          getList();
        });
      }
    }
  });
}
/** 删除按钮操作 */
function handleDelete(row) {
  proxy.$modal
    .confirm('是否确认删除该数据?')
    .then(function () {
      return delManage(row.id);
    })
    .then(() => {
      getList();
      proxy.$modal.msgSuccess("删除成功");
    })
    .catch(() => { });
}
/** 导入按钮操作 */
function handleImport() {
  upload.title = "计划导入";
  upload.open = true;
}
/** 提交上传文件 */
function submitFileForm() {
  proxy.$refs["uploadRef"].submit();
}
/** 下载模板操作 */
function importTemplate() {
  exportTemplate().then(val => {
    downloadHttp('/tool/file/download', {
      fileName: val.msg,
      delete: true
    }, "计划信息模板.xlsx")
  })
}
// let valueArr = []
function downLoadCode() {
  exportManage().then(val => {
    downloadHttp('/tool/file/download', {
      fileName: val.msg,
      delete: true
    }, "计划信息.xlsx")
  })
}
// function handleSelectionChange(e) {
//   valueArr = e.map(item => item.id)
// }
getList();
function selectableFun(e) {
  console.log(e)
}
</script>
<style scoped lang="scss">
.evenly-distributed-labels {
  :deep() {
    .el-form-item__label {
      position: relative;
      /* 设置相对定位作为星号的定位基准 */
      text-align: justify;
      text-align-last: justify;
      /* 确保最后一行也两端对齐 */
      padding-left: 10px;
      /* 为星号预留空间 */
      display: inline-block;
    }
  }
}
</style>