aiot-app/pages/pda/components/bottomOperate.vue

<template>
  <view class="bottom_box">
    <!-- 按钮组 -->
    <view class="nav_box rx-cc" @click="open">
      <image
        class="open_icon"
        :class="{ open_icon_reversal: isOperate }"
        src="~@/static/pda/open.svg"
      ></image>
    </view>

    <!-- // 弹出框 -->
    <view class="operate_list" v-show="isOperate">
      <view v-if="clientEnvironmentId == 2">
        <view
          v-for="(item, index) in btnList[btnState]"
          :key="index"
          class="list rx-bc"
          @click="operate(item.type, item)"
        >
          <view class="round">{{ index + 1 }}</view>
          <view class="name">{{ item.name }}</view>
          <image
            class="arrow_right"
            src="~@/static/pda/arrow_right.svg"
          ></image>
        </view>
      </view>
      <view v-else>
        <view
          v-for="(item, index) in btnListOne[btnState]"
          :key="index"
          class="list rx-bc"
          @click="operate(item.type, item)"
        >
          <view class="round">{{ index + 1 }}</view>
          <view class="name">{{ item.name }}</view>
          <image
            class="arrow_right"
            src="~@/static/pda/arrow_right.svg"
          ></image>
        </view>
      </view>

      <!-- 


			<view v-if='btnControlReportMethod == 2' class="list rx-bc">
				<view class="round">{{btnList[btnState].length + 1}}</view>
				<view class="name" @click="operate('skip', {})" >跳过(不报工)</view>
				<image class="arrow_right" src="~@/static/pda/arrow_right.svg"></image>
			</view>
		 -->

      <view
        v-if="newTaskObj.existOutsource == 1"
        class="list rx-bc"
        @click="operate('outPicking', {})"
      >
        <view class="round">{{ btnList[btnState].length + 1 }}</view>
        <view class="name">委外领料</view>
        <image class="arrow_right" src="~@/static/pda/arrow_right.svg"></image>
      </view>

      <!-- <view v-if="newTaskObj.existOutsource == 1" class="list rx-bc"
				@click="operate('jobBooking', { isOutsource: 1 })">
				<view class="round">{{ btnList[btnState].length + 2 }}</view>
				<view class="name">委外报工</view>
				<image class="arrow_right" src="~@/static/pda/arrow_right.svg"></image>
			</view> -->
    </view>

    <view class="btn_box">
      <view class="btn" @click="handPause()">{{
        GDStatus == 9 ? "取消暂停" : "暂停"
      }}</view>
      <view class="btn" @click="handTerminate()">终止</view>
      <view class="btn">转派</view>
      <view
        class="btn"
        :style="newTaskObj.existOutsource == 1 ? 'background: #FFA929' : ''"
        @click="handOutsource()"
        >委外</view
      >
      <view class="btn" @click="handHandover">交接</view>
      <view class="btn" @click="handError">异常</view>
    </view>

    <!-- //委外弹窗 -->
    <SearchPopup mode="center" v-if="outsourceShow">
      <template v-slot:list>
        <view class="popup_list">
          <view class="title">【{{ taskObj.currentTaskName }}】是否委外</view>

          <u-form
            labelPosition="left"
            :model="outsourceForm"
            labelWidth="180"
            labelAlign="left"
            class=""
          >
            <u-form-item label="委外名称:" borderBottom prop="name">
              <input
                class="uni-input"
                v-model="outsourceForm.name"
                placeholder="请输入委外名称"
              />
            </u-form-item>

            <u-form-item label="委外类型:" borderBottom prop="">
              <zxz-uni-data-select
                :localdata="typeList"
                v-model="outsourceForm.type"
                dataValue="id"
                dataKey="name"
                filterable
                format="{name}"
              ></zxz-uni-data-select>
            </u-form-item>

            <u-form-item label="委外数量:" borderBottom prop="formedNumLast">
              <input
                class="uni-input content_num"
                v-model="outsourceForm.formedNumLast"
                type="number"
              />
            </u-form-item>

            <u-form-item label="委外到:" borderBottom prop="taskIds">
              <zxz-uni-data-select
                :localdata="newStepsList"
                style="font-size: 15px"
                v-model="outsourceForm.taskIds"
                dataValue="taskId"
                format="{taskTypeName}"
                dataKey="taskId"
                filterable
                :clear="true"
                @change="changeTaskId"
              ></zxz-uni-data-select>
            </u-form-item>

            <u-form-item label="委外场景:" borderBottom prop="taskIds">
              {{ sceneText }}
            </u-form-item>

            <u-form-item
              label="直接入库:"
              borderBottom
              prop="isInWarehouse"
              v-if="outsourceForm.isFirstTask != 1"
            >
              <!-- <u-checkbox-group v-model="isInWarehouse" size="15px" v-if="clientEnvironmentId != 2" >
								<u-checkbox labelSize="15px" iconSize="10px" activeColor="#157A2C" name="true"
									label="是" disabled></u-checkbox>
							</u-checkbox-group>
							<view style="font-size: 15px;" v-if="clientEnvironmentId == 2">是</view> -->

              <zxz-uni-data-select
                style="margin-left: 10px; font-size: 15px"
                v-if="clientEnvironmentId == 2 || isInWarehouse.length"
                :localdata="warehouseList"
                v-model="outsourceForm.warehouseId"
                dataValue="id"
                dataKey="name"
                filterable
                format="{name}"
              ></zxz-uni-data-select>
            </u-form-item>

            <u-form-item
              label="工艺路线:"
              borderBottom
              style="font-size: 15px"
              prop="produceRoutingId"
              v-if="
                clientEnvironmentId != 2 &&
                outsourceForm.isFirstTask != 1 &&
                isInWarehouse &&
                isInWarehouse.length == 0
              "
            >
              <zxz-uni-data-select
                :localdata="produceList"
                v-model="outsourceForm.produceRoutingId"
                dataValue="id"
                dataKey="name"
                filterable
                format="{name}"
              ></zxz-uni-data-select>
            </u-form-item>

            <u-form-item
              label="计划交期:"
              borderBottom
              prop="requireDeliveryTime"
            >
              <uni-datetime-picker
                type="datetime"
                v-model="outsourceForm.requireDeliveryTime"
              />
            </u-form-item>
          </u-form>
        </view>
      </template>

      <template v-slot:operate>
        <view class="operate_box rx-bc">
          <u-button size="small" class="u-reset-button" @click="outCancel">
            取消
          </u-button>

          <u-button
            type="success"
            size="small"
            class="u-reset-button"
            @click="outsourceOk()"
          >
            确定
          </u-button>

          <!-- 		<u-button type="success" size="small" class="u-reset-button" @click="outsourceOk(1)">
						提交并发布
					</u-button> -->
        </view>
      </template>
    </SearchPopup>

    <!-- 异常弹窗 -->

    <SearchPopup mode="center" v-if="errorShow">
      <template v-slot:list>
        <view class="popup_list">
          <view class="title">异常信息</view>
          <u-form
            labelPosition="left"
            :model="errorForm"
            labelWidth="180"
            labelAlign="left"
            class=""
          >
            <u-form-item label="工单号:" borderBottom prop="code">
              <input
                class="uni-input content_num"
                v-model="info.code"
                disabled
              />
            </u-form-item>

            <u-form-item label="产品编码:" borderBottom prop="code">
              <input
                class="uni-input content_num"
                v-model="info.productCode"
                disabled
              />
            </u-form-item>

            <u-form-item label="产品名称:" borderBottom prop="code">
              <input
                class="uni-input content_num"
                v-model="info.productName"
                disabled
              />
            </u-form-item>

            <u-form-item label="异常类型:" borderBottom prop="type">
              <zxz-uni-data-select
                :localdata="errorTypeList"
                v-model="errorForm.type"
                dataValue="value"
                dataKey="label"
                filterable
                format="{label}"
              ></zxz-uni-data-select>
            </u-form-item>

            <u-form-item label="编码:" borderBottom prop="code">
              <input
                class="uni-input content_num"
                v-model="errorForm.code"
                disabled
              />
            </u-form-item>

            <u-form-item label="名称:" borderBottom prop="name">
              <input class="uni-input content_num" v-model="errorForm.name" />
            </u-form-item>

            <u-form-item label="异常描述:" borderBottom prop="name">
              <input
                type="textarea"
                class="content_num"
                v-model="errorForm.describes"
              />
            </u-form-item>
          </u-form>
        </view>

        <view class="photo_btn" @click="chooseImage">拍照</view>
        <view class="photo_list">
          <PreviewPhoto
            type="add"
            @imagedelete="imagedelete"
            :imageList="imageList"
          />
        </view>
      </template>

      <template v-slot:operate>
        <view class="operate_box rx-bc">
          <u-button size="small" class="u-reset-button" @click="errorCancel">
            取消
          </u-button>

          <u-button
            type="success"
            size="small"
            class="u-reset-button"
            @click="errorOk()"
          >
            确定
          </u-button>

          <!-- 		<u-button type="success" size="small" class="u-reset-button" @click="outsourceOk(1)">
						提交并发布
					</u-button> -->
        </view>
      </template>
    </SearchPopup>

    <outsourceList ref="outsourceListRef" @close="outCancel()"></outsourceList>
    <handover ref="handoverRef"></handover>
  </view>
</template>

<script>
import {
  getTwoTreeByPid,
  checkOutsource,
  applyoutsourceSave,
  producerouting,
  getWarehouseList,
  updateStatusPause,
  updateStatusPauseRecover,
  updateStatusTerminate,
} from "@/api/pda/workOrder.js";

import SearchPopup from "./searchPopup.vue";

import outsourceList from "./outsourceList.vue";
import handover from "./handover.vue";

import { EventBus } from "@/utils/eventBus.js";
import { getByCode } from "@/api/pda/common.js";
import PreviewPhoto from "@/pages/maintenance/check/components/PreviewPhoto.vue";

export default {
  components: {
    SearchPopup,
    outsourceList,
    handover,
    PreviewPhoto,
  },

  props: {
    state: String | Number,
    gdStatus: String | Number,
    taskObj: Object,
    info: {
      type: Object,
      default: {},
    },

    controlReportMethod: String | Number,

    stepsList: {
      type: Array,
      default: () => [],
    },
  },

  watch: {
    btns: {
      immediate: true,
      deep: true,
      handler(newVal) {
        this.btnsList = [];
        this.btnsList = newVal;
      },
    },

    state: {
      immediate: true,
      deep: true,
      handler(newVal) {
        this.btnState = newVal;
      },
    },

    gdStatus: {
      immediate: true,
      deep: true,
      handler(newVal) {
        this.GDStatus = newVal;
      },
    },

    controlReportMethod: {
      immediate: true,
      deep: true,
      handler(newVal) {
        this.btnControlReportMethod = newVal;
      },
    },

    taskObj: {
      immediate: true,
      deep: true,
      handler(newVal) {
        this.newTaskObj = newVal;
      },
    },

    stepsList: {
      immediate: true,
      deep: true,
      handler(newVal) {},
    },
  },

  data() {
    return {
      isOperate: false,
      sceneText: "",
      outsourceScene: null,
      btnsList: [],
      btnState: 1,
      GDStatus: null,
      btnControlReportMethod: null,
      btnList: {
        1: [
          {
            name: "领料",
            type: "picking",
          },
          {
            name: "投料",
            type: "feeding",
          },

          {
            name: "更换周转车",
            type: "turnover",
          },
          {
            name: "报工",
            type: "jobBooking",
            isOutsource: 0,
          },
          // {
          // 	name: '多工单报工',
          // 	type: ''
          // }
        ],
        2: [
          {
            name: "取样",
            type: "sample",
          },
          {
            name: "报工",
            type: "sampleJob",
          },
        ],

        3: [
          {
            name: "更换周转车",
            type: "qualityTurnover",
          },

          {
            name: "质检",
            type: "inspection",
          },

          {
            name: "报工",
            type: "inspectionJob",
          },
        ],

        4: [
          {
            name: "领料",
            type: "picking",
          },
          {
            name: "投料",
            type: "feeding",
          },
          {
            name: "报工",
            type: "jobBooking",
          },
        ],

        5: [
          {
            name: "入库",
            type: "warehousing",
          },
        ],

        6: [
          {
            name: "报工",
            type: "jobBooking",
          },
        ],
      },
      btnListOne: {
        1: [
          {
            name: "领料",
            type: "picking",
          },
          {
            name: "投料",
            type: "feeding",
          },

          {
            name: "报工",
            type: "jobBooking",
            isOutsource: 0,
          },
          // {
          // 	name: '多工单报工',
          // 	type: ''
          // }
        ],
        2: [
          {
            name: "取样",
            type: "sample",
          },
          {
            name: "报工",
            type: "sampleJob",
          },
        ],

        3: [
          {
            name: "质检",
            type: "inspection",
          },

          {
            name: "报工",
            type: "inspectionJob",
          },
        ],

        4: [
          {
            name: "领料",
            type: "picking",
          },
          {
            name: "投料",
            type: "feeding",
          },
          {
            name: "报工",
            type: "jobBooking",
          },
        ],

        5: [
          {
            name: "入库",
            type: "warehousing",
          },
        ],

        6: [
          {
            name: "报工",
            type: "jobBooking",
          },
        ],
      },
      errorShow: false,
      sceneText: "",
      outsourceScene: null,
      newTaskObj: {},
      outsourceShow: false,

      outsourceForm: {},

      produceList: [],
      warehouseList: [],

      typeList: [
        {
          id: 4,
          name: "带料生产委外",
        },
        {
          id: 5,
          name: "不带料生产委外",
        },
      ],

      errorTypeList: [],

      errorForm: {},

      newStepsList: [],

      clientEnvironmentId:
        uni.getStorageSync("userInfo") &&
        uni.getStorageSync("userInfo").clientEnvironmentId, // *1 主环境-601环境   2 soll-索尔环境    3 tg-碳谷环境

      isInWarehouse: [1],
      imageList: [],
    };
  },

  created() {
    this.getTypeList("Exception_type");
  },

  methods: {
    imagedelete(index) {
      this.imageList.splice(index, 1);
    },
    getImageData() {
      return this.imageList || [];
    },
    // *** 新增拍照
    chooseImage() {
      const _this = this;
      if (_this.imageList.length >= 9) {
        _this.$refs.uToast.show({
          type: "warning",
          message: "最多上传9张照片",
        });
        return;
      }
      uni.chooseImage({
        count: 9, //默认9
        sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ["camera"], //从相册选择
        success: function (res) {
          uni.showLoading({
            title: "上传中",
          });

          _this
            .uploadFile(res.tempFilePaths)
            .then((res) => {
              res.forEach((item) => {
                let fileNames = item.storePath.split("/");
                let url =
                  _this.apiUrl +
                  "/main/file/getFile?objectName=" +
                  item.storePath +
                  "&fullfilename=" +
                  fileNames[fileNames.length - 1];
                let images = _this.imageList;
                // 不能存储超过 9 张
                if (images.length < 9) {
                  _this.imageList.push(url);
                }
              });
              uni.hideLoading();
            })
            .catch((error) => {
              console.log(error, "errorerrorerror");
              uni.hideLoading();
            });
        },
      });
    },
    uploadFile(list) {
      let PromiseAll = [];
      const apiUrl = this.apiUrl;
      const token = uni.getStorageSync("token"); //取存本地的token
      list.forEach((item) => {
        PromiseAll.push(
          new Promise((resolve, reject) => {
            uni.uploadFile({
              url: apiUrl + "/main/file/upload",
              filePath: item,
              name: "multiPartFile",
              header: {
                authorization: token,
              },
              success: (uploadFileRes) => {
                if (uploadFileRes.statusCode == 500) {
                  uni.hideLoading();
                  return;
                }

                let data = JSON.parse(uploadFileRes.data);
                resolve(data.data);
              },
              fail: (err) => {
                console.log(err, "123456");
                // 上传请求本身失败（如网络问题等），直接 reject
                uni.hideLoading();
                reject(err);
              },
            });
          })
        );
      });
      return Promise.all(PromiseAll);
    },

    // 委外时间选择

    //委外到 类型选择
    changeTaskId(e) {
      console.log(this.outsourceForm, e);
      if (this.newStepsList.length) {
        const id = this.newStepsList[0].sourceTaskId;
        //isFirstTask 1是首工序 0不是
        if (this.outsourceForm.isFirstTask) {
          this.sceneText = "首工序";
          this.outsourceForm.outsourceScene = 1;
          if (e.sourceTaskId !== id) {
            this.sceneText = "首工序及多工序";
            this.outsourceForm.outsourceScene = 4;
          }
        } else {
          if (e.sourceTaskId === id) {
            // 单工序
            this.sceneText = "单工序";
            this.outsourceForm.outsourceScene = 2;
          } else {
            //多工序
            this.sceneText = "多工序";
            this.outsourceForm.outsourceScene = 3;
          }
        }
      } else {
        uni.showToast({
          title: "委外到工序为空",
          icon: "none",
        });
      }
    },

    async getTypeList(code) {
      const res = await getByCode(code);

      const list = [];
      if (res.length) {
        res.map((item, index) => {
          for (var key in res[index]) {
            list.push({
              label: res[index][key],
              value: key,
            });
          }
        });
      }
      this.errorTypeList = list;
    },

    open() {
      this.isOperate = !this.isOperate;
    },

    errorCancel() {
      this.errorShow = false;
    },

    errorOk() {
      if (!this.errorForm.type) {
        uni.showToast({
          title: "请选择异常类型",
          icon: "none",
        });
        return false;
      }

      if (!this.errorForm.name) {
        uni.showToast({
          title: "请输入名称",
          icon: "none",
        });
        return false;
      }

      this.errorShow = false;
    },

    operate(type, item) {
      this.$emit("operate", type, item);
    },

    handOutsource() {
      let param = {
        taskId: this.newTaskObj.currentTaskId,
        workOrderId: this.newTaskObj.workOrderId,
      };
      checkOutsource(param).then((res) => {
        this.outsourceForm = {
          ...res,
        };
        this.outsourceForm.name = this.taskObj.currentTaskName + "委外";

        if (res.outsource) {
          this.getNewSteps();
          this.outsourceShow = true;
          this.produceFn();
          this.getWarehouseFn();
        } else {
          uni.showToast({
            title: "此工序不能委外",
            icon: "none",
          });
        }
      });
    },

    handPause() {
      if (this.GDStatus == 9) {
        uni.showModal({
          title: "提示",
          content: "确定该工单取消暂停?",
          success: async (res) => {
            if (res.confirm) {
              updateStatusPauseRecover([this.newTaskObj.workOrderId]).then(
                (res) => {
                  this.$emit("refresh");
                }
              );
            }
          },
        });
      } else {
        uni.showModal({
          title: "提示",
          content: "确定该工单暂停?",
          success: async (res) => {
            if (res.confirm) {
              updateStatusPause([this.newTaskObj.workOrderId]).then((res) => {
                this.$emit("refresh");
              });
            }
          },
        });
      }
    },

    handHandover() {
      this.$refs.handoverRef.open();
    },

    handTerminate() {
      uni.showModal({
        title: "提示",
        content: "确定该工单终止?",
        success: async (res) => {
          if (res.confirm) {
            updateStatusTerminate([this.newTaskObj.workOrderId]).then((res) => {
              this.$emit("refresh");
            });
          }
        },
      });
    },
    outCancel() {
      this.sceneText = ""; //委外场景
      this.outsourceForm.outsourceScene = null;
      this.outsourceShow = false;
      EventBus.$off("outEvent");
    },

    getNewSteps() {
      this.activeIndex = this.getIndexOfElementInArray(
        this.stepsList,
        this.newTaskObj.currentTaskId
      );

      this.newStepsList = [];
      this.stepsList.forEach((f, i) => {
        if (
          f.taskId != "-1" &&
          f.taskId != "-2" &&
          i > this.activeIndex &&
          (f.type == 1 || f.type == 4)
        ) {
          this.newStepsList.push(f);
        }
      });
    },

    getIndexOfElementInArray(array, target) {
      for (let i = 0; i < array.length; i++) {
        if (array[i].taskId === target) {
          return i; // 返回第一次出现target的索引位置
        }
      }
      return -1; // 未找到目标值时返回-1
    },

    // 工艺路线
    produceFn() {
      let param = {
        pageNum: 1,
        size: -1,
        routeType: 2,
      };
      producerouting(param).then((res) => {
        this.produceList = res.list;
      });
    },

    // 仓库
    getWarehouseFn() {
      getWarehouseList().then((res) => {
        this.warehouseList = res;
      });
    },

    handError() {
      console.log(this.info, "taskObj");
      this.errorShow = true;
    },

    outsourceOk() {
      if (!this.outsourceForm.name) {
        uni.showToast({
          title: "请输入委外名称",
          icon: "none",
        });
        return false;
      }

      if (!this.outsourceForm.type) {
        uni.showToast({
          title: "请选择委外类型",
          icon: "none",
        });
        return false;
      }

      if (!this.outsourceForm.requireDeliveryTime) {
        uni.showToast({
          title: "请选择委外完成时间",
          icon: "none",
        });
        return false;
      }
      if (this.clientEnvironmentId == 2) {
        this.outsourceForm.isInWarehouse = 1;
      } else {
        this.isInWarehouse.length > 0
          ? (this.outsourceForm.isInWarehouse = 1)
          : (this.outsourceForm.isInWarehouse = 0);
      }
      if (this.outsourceForm.requireDeliveryTime.indexOf("00:00:00") === -1) {
        this.outsourceForm.requireDeliveryTime =
          this.outsourceForm.requireDeliveryTime + "00:00:00";
      }

      let param = {
        ...this.outsourceForm,
        taskId: this.newTaskObj.currentTaskId,
        workOrderId: this.newTaskObj.workOrderId,
      };

      console.log(param);
      this.sceneText = ""; //委外场景
      this.outsourceForm.outsourceScene = null;
      this.$refs.outsourceListRef.open(param);

      // let param = {
      // 	...this.outsourceForm,
      // 	taskId: this.newTaskObj.currentTaskId,
      // 	workOrderId: this.newTaskObj.workOrderId,
      // 	isRelease: isRelease
      // }

      // applyoutsourceSave(param).then(res => {
      // 	console.log(res)
      // 	this.outCancel()
      // })
    },
  },
};
</script>

<style lang="scss" scoped>
.bottom_box {
  background: #fff;
}

.nav_box {
  width: 750rpx;
  height: 40rpx;
  background: $theme-color;

  .open_icon {
    width: 48rpx;
    height: 48rpx;
  }

  .open_icon_reversal {
    transform: scaleY(-1);
    /* 垂直翻转 */
  }
}

.operate_list {
  margin: 0 32rpx;

  .list {
    border-radius: 8rpx;
    border: 1rpx solid $theme-color;
    background: #f0f8f2;
    height: 64rpx;
    padding: 0rpx 16rpx;
    margin-top: 16rpx;
  }

  .round {
    width: 32rpx;
    height: 32rpx;
    line-height: 32rpx;
    text-align: center;
    border-radius: 50%;
    background: $theme-color;
    font-size: 24rpx;
    font-style: normal;
    font-weight: 400;
    color: #fff;
  }

  .name {
    font-family: PingFang HK;
    font-size: 24rpx;
    font-style: normal;
    font-weight: 600;
    color: $theme-color;
  }

  .arrow_right {
    width: 32rpx;
    height: 32rpx;
  }
}

.btn_box {
  display: flex;
  padding: 16rpx 32rpx;
  align-items: flex-start;
  gap: 16rpx;
  align-self: stretch;

  .btn {
    width: 160rpx;
    height: 64rpx;
    line-height: 64rpx;
    background: $theme-color;
    text-align: center;
    border-radius: 8rpx;
    color: #fff;
    font-family: PingFang HK;
    font-size: 24rpx;
    font-style: normal;
    font-weight: 600;
  }
}

.operate_box {
  padding: 10rpx 20rpx;

  /deep/ .u-button {
    width: 180rpx;
  }
}

.popup_list {
  width: 78vw;
  min-height: 360rpx;
  padding: 0 32rpx;

  .title {
    color: #333;
    font-size: 32rpx;
    text-align: center;
    padding: 30rpx;
  }
}

.list_item_btn {
  width: 160rpx;
  height: 54rpx;
  line-height: 54rpx;
  background: $theme-color;
  text-align: center;
  border-radius: 8rpx;
  color: #fff;
  font-family: PingFang HK;
  font-size: 22rpx;
  font-style: normal;
  font-weight: 600;
}

.content_num {
  display: flex;
  align-items: center;
  padding: 0 4rpx;

  /deep/ .uni-input-input {
    border: 2rpx solid #f0f8f2;
    background: #f0f8f2;
    color: $theme-color;
  }
}

.photo_btn {
  background-color: #157a2c;
  width: 140rpx;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 24rpx;
  color: #fff;
  text-align: center;
  border-radius: 8rpx;
  margin-bottom: 12rpx;
  display: inline-block;
}
</style>