storevisit-ui-mobile/src/views/signApproval/newStoreApprovalDetail.vue

<template>
  <div>
    <div class="navBarTOP">
      <!-- 顶部条 -->
      <van-nav-bar class="navBar" title="门店详情" left-arrow @click-left="onClickLeft" />
    </div>
    <!--主体内容-->
    <div style="margin-top: 44px; padding-bottom: 50px" v-if="list.storeId">
      <!-- <van-dialog title="门店位置">
        <mapmarker :info="list"></mapmarker>
      </van-dialog> -->
      <van-tabs class="myTab" v-model="tabVal" color="#0057ba" @change="tabChange">
        <van-tab title="基础信息" name="insidePlan" ref="dispsps">
          <!-- 提交审批后被驳回 -->
          <div class="rejectMsg" v-if="rejectMsg[0]">
            <span class="label">退回原因</span>
            <span class="value">{{ rejectMsg[0].approvalDesc }}</span>
            <span class="examineDetail" @click="examineDetail">查看详情</span>
          </div>
          <van-field readonly v-model="list.storeCode" label="编号" />
          <van-field readonly v-if="DIYshow" v-model="list.attribute1" label="DIY编号" />
          <van-field readonly v-model="list.storeName" :label="storeName" />
          <van-field readonly v-model="list.storeCategoryName" label="类型" />
          <van-field
            readonly
            rows="1"
            autosize
            type="textarea"
            v-model="list.addressLine"
            :label="address" />
          <van-field v-model="list.lat" readonly label="经度" placeholder="经度" />
          <van-field readonly v-model="list.lon" label="维度" />
          <van-field readonly v-model="list.orgName" label="销售部" />
          <van-field readonly v-model="list.provinceName" label="省(州)"> </van-field>
          <van-field readonly v-model="list.cityName" label="城市"> </van-field>
          <van-field readonly v-model="list.districtName" label="区(县)"> </van-field>
          <van-field readonly v-model="list.townName" label="街道"> </van-field>
          <van-field readonly v-model="list.cityLevel" label="城市等级" />
          <van-field
            readonly
            v-if="list.ifJzStoreType != 1 && list.storeCategory != 'C917'"
            v-model="list.contactName"
            label="联系人" />
          <van-field
            readonly
            v-if="list.ifJzStoreType == 1 && list.storeCategory != 'C917'"
            v-model="list.contactName"
            label="老板" />
          <van-field
            readonly
            v-model="list.telephone"
            label="联系电话"
            v-if="list.storeCategory != 'C917'" />
          <van-field
            readonly
            v-model="list.chainCode"
            label="经销商编号"
            v-if="list.storeCategory != 'C917'" />
          <van-field
            readonly
            v-model="list.chainName"
            label="经销商名称"
            v-if="list.storeCategory != 'C917'" />
          <van-field readonly v-model="list.salesmanName" label="销售员" />
          <div v-if="list.storeCategory != 'C917'">
            <van-field
              readonly
              v-model="list.area"
              v-if="list.ifJzStoreType != 1"
              label="面积(m²)" />
            <van-field
              readonly
              v-model="list.area"
              v-if="list.ifJzStoreType == 1"
              label="家装展厅面积(m²)" />
          </div>
          <van-field
            readonly
            v-if="GZAttributeFormShow"
            label="潜在客户类型"
            v-model="list.potentialCustomerType" />
          <van-field readonly v-if="list.carShop" label="是否车铺开店">
            <template #input>
              <span v-if="list.carShop == 1">是</span>
              <span v-if="list.carShop == 0">否</span>
            </template>
          </van-field>
          <div v-if="list.carShopImgList != null && list.carShop == 1">
            <p style="padding: 0 16px">车铺照片(店招及车铺产品拍在一张照片里)</p>
            <viewUploadImg :imgs="list.carShopImgList"></viewUploadImg>
          </div>
          <template v-if="list.img != null && list.storeCategory != 'C917'">
            <van-row gutter="20" style="padding: 16px">
              <van-col span="12">
                <div v-if="storeTypePOP">
                  <van-image
                    width="100%"
                    height="160"
                    :src="setImgSrc(list.img)"
                    @click="deleteImgs(list.img)" />
                  <p style="text-align: center">
                    {{ list.ifJzStoreType != 1 ? '建店时门店照' : '家装前台照片' }}
                  </p>
                </div>
                <div v-else>
                  <van-image
                    width="100%"
                    height="160"
                    :src="setImgSrc(list.img)"
                    @click="deleteImgs(list.img)" />
                  <p style="text-align: center">
                    {{ list.storeCategory == 'C912' ? '工地铭牌照片' : '公司照片' }}
                  </p>
                </div>
              </van-col>
              <van-col span="12" v-if="list.ifJzStoreType != 1">
                <div v-if="storeTypePOP">
                  <van-image
                    width="100%"
                    height="160"
                    :src="setImgSrc(list.imgSed)"
                    @click="deleteImgs(list.imgSed)" />
                  <p style="text-align: center">
                    {{ list.ifJzStoreType != 1 ? '陈列照' : '立邦展厅照片' }}
                  </p>
                </div>
              </van-col>
            </van-row>
          </template>
          <van-row gutter="20" style="padding: 16px">
            <van-col span="12" v-if="list.newStoreSignPhoto">
              <div v-if="storeTypePOP">
                <van-image
                  width="100%"
                  height="160"
                  :src="setImgSrc(list.newStoreSignPhoto)"
                  @click="deleteImgs(list.newStoreSignPhoto)" />
                <p style="text-align: center">最近一次拜访店招</p>
              </div>
            </van-col>
          </van-row>
          <van-collapse v-model="activeNames" class="orderList">
            <van-collapse-item title="门店下单记录" name="1">
              <div class="orderItem" v-for="(item, index) in orderList" :key="index">
                <div class="orderTitle">
                  {{ item.ORDERID }} | {{ item.ORDERDATE }} | {{ item.STATUS_DESCR }} |
                  {{ item.totalPrice }}
                </div>
                <el-table
                  :data="item.productDetail"
                  border
                  class="table-headermd table-headermdhome"
                  show-summary
                  :summary-method="getSummaries"
                  style="width: 100%">
                  <el-table-column label="产品名称" prop="DESCR" />
                  <el-table-column label="数量" prop="QTY" width="80px" />
                  <el-table-column label="金额" prop="productTotalPrice" width="80px">
                    <!-- <template slot-scope="scope">
                      {{ scope.row.UNITPRICE * scope.row.QTY }}
                    </template> -->
                  </el-table-column>
                </el-table>
              </div>
            </van-collapse-item>
          </van-collapse>
        </van-tab>
        <van-tab title="属性信息" name="outsidePlan">
          <van-field readonly label="属性" v-if="dictTypeFormShow" v-model="list.tcfxName" />
        </van-tab>
      </van-tabs>
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <!-- 未结案 未提交状态下可关闭门店、提交审核 -->
      <div class="bottomBtn">
        <van-button color="red" round @click="rejectReasonShow = true">退回</van-button>
        <van-button type="primary" round @click="approvalStoreFun('success')">通过</van-button>
      </div>
    </div>
    <!-- 退回原因填写 -->
    <van-popup v-model="rejectReasonShow" class="rejectMsgBox" closeable round position="bottom">
      <div class="title">退回原因</div>
      <div class="content">
        <van-field
          v-model="rejectMessage"
          rows="2"
          autosize
          type="textarea"
          maxlength="300"
          placeholder="请输入退回原因" />
      </div>
      <div class="btnBox">
        <van-button type="primary" round @click="rejectReasonSubmit">提交</van-button>
      </div>
    </van-popup>
    <!-- 提交审核后退回原因 只有同城分销店显示 -->
    <van-popup v-model="rejectMsgShow" class="rejectMsgBox" closeable round position="bottom">
      <div class="title">退回详情</div>
      <div class="content">
        <div class="rejectMsgItem" v-for="(item, index) in rejectMsg" :key="index">
          <div class="item approver">
            <span class="label">审批人：</span>
            <span class="value">{{ item.approvalUserName }}</span>
          </div>
          <div class="item approvalTime">
            <span class="label">审批时间：</span>
            <span class="value">{{ item.approvalTime }}</span>
          </div>
          <div class="item rejectCause">
            <span class="label">退回原因：</span>
            <span class="value">{{ item.approvalDesc }}</span>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { ImagePreview } from 'vant';
import {
  getById,
  getStoreTypeList,
  getStoreyslTypeList,
  getTCFXList,
  getSJSList,
  getQGJZist,
  getCustomerInfoList,
  getCustomerNatureList,
  getMainProjectList,
  getMainRelationList,
  getManagementModelList,
  getpotentialCustomerTypeList,
  getOrderByStoreCode,
  approvalStore,
  storeApprovaHistory,
} from '@/api/index';
import mapmarker from '@/components/mapMarker';
import viewUploadImg from '@/components/viewUploadImg';
import txmapimg1 from '@/assets/txmap1.svg';
import txmapimg2 from '@/assets/txmap2.svg';
import txmapimg3 from '@/assets/marker_blue.png';
import axios from 'axios';
import uploadImg from '@/components/viewaddreddUploadImg.vue';
export default {
  components: { uploadImg, mapmarker, viewUploadImg },
  data() {
    return {
      tabVal: 'insidePlan',
      list: {},
      txmapimg1: txmapimg1,
      txmapimg2: txmapimg2,
      txmapimg3: txmapimg3,
      storeId: '',
      vaue: '',
      show: false,
      storeTypeList: [],
      ManagementModelList: [],
      MainRelationList: [],
      MainProjectList: [],
      CustomerNatureList: [],
      CustomerInfoList: [],
      potentialCustomerTypeList: [],
      dictTypeFormShow: false,
      DIYshow: false,
      visitListList: [],
      TCFXList: [],
      QGJZist: [],
      SJSList: [],
      storeName: '名称',
      address: '地址',
      storeTypePOP: false,
      GZAttributeFormShow: false,
      pageShow: false,
      rejectMsgShow: false,
      //退回原因详情列表
      rejectMsg: [],
      activeNames: [],
      orderList: [],
      rejectReasonShow: false, //退回提交原因
      rejectMessage: '',
    };
  },
  activated() {
    this.getCustomerInfoList();
    this.getManagementModelList();
    this.getMainRelationList();
    this.getMainProjectList();
    this.getCustomerNatureList();
    this.getTCFXList();
    this.getSJSList();
    this.getQGJZist();
    this.getStoreType();
    this.getpotentialCustomerTypeList();
    this.visitListList = [];
    window.scrollTo(0, 0);
    this.storeApprovaHistoryFun();
  },
  methods: {
    storeApprovaHistoryFun() {
      storeApprovaHistory({ storeId: this.$route.query.id }).then((res) => {
        this.rejectMsg = res.data || [];
      });
    },
    getCustomerInfoList() {
      getCustomerInfoList().then((res) => {
        var CustomerInfoList = [];
        for (var t = 0; t < res.data.length; t++) {
          CustomerInfoList.push({
            text: res.data[t].dictLabel,
            dictCode: res.data[t].dictValue,
          });
        }
        this.CustomerInfoList = CustomerInfoList;
      });
    },
    getCustomerNatureList() {
      getCustomerNatureList().then((res) => {
        var CustomerNatureList = [];
        for (var t = 0; t < res.data.length; t++) {
          CustomerNatureList.push({
            text: res.data[t].dictLabel,
            dictCode: res.data[t].dictValue,
          });
        }
        this.CustomerNatureList = CustomerNatureList;
      });
    },
    getpotentialCustomerTypeList() {
      getpotentialCustomerTypeList().then((res) => {
        var potentialCustomerTypeList = [];
        for (var t = 0; t < res.data.length; t++) {
          potentialCustomerTypeList.push({
            text: res.data[t].dictLabel,
            dictCode: res.data[t].dictValue,
          });
        }
        this.potentialCustomerTypeList = potentialCustomerTypeList;
      });
    },
    getMainProjectList() {
      getMainProjectList().then((res) => {
        var MainProjectList = [];
        for (var t = 0; t < res.data.length; t++) {
          MainProjectList.push({
            text: res.data[t].dictLabel,
            dictCode: res.data[t].dictValue,
          });
        }
        this.MainProjectList = MainProjectList;
      });
    },
    getMainRelationList() {
      getMainRelationList().then((res) => {
        var MainRelationList = [];
        for (var t = 0; t < res.data.length; t++) {
          MainRelationList.push({
            text: res.data[t].dictLabel,
            dictCode: res.data[t].dictValue,
          });
        }
        this.MainRelationList = MainRelationList;
      });
    },
    getManagementModelList() {
      getManagementModelList().then((res) => {
        var ManagementModelList = [];
        for (var t = 0; t < res.data.length; t++) {
          ManagementModelList.push({
            text: res.data[t].dictLabel,
            dictCode: res.data[t].dictValue,
          });
        }
        this.ManagementModelList = ManagementModelList;
      });
    },
    getSJSList() {
      getSJSList({}).then((res) => {
        var SJSList = [];
        for (var t = 0; t < res.data.length; t++) {
          SJSList.push({
            text: res.data[t].dictLabel,
            dictCode: res.data[t].dictValue,
          });
        }
        this.SJSList = SJSList;
      });
    },
    getQGJZist() {
      getQGJZist({}).then((res) => {
        var QGJZist = [];
        for (var t = 0; t < res.data.length; t++) {
          QGJZist.push({
            text: res.data[t].dictLabel,
            dictCode: res.data[t].dictValue,
          });
        }
        this.QGJZist = QGJZist;
      });
    },
    getTCFXList() {
      getTCFXList({}).then((res) => {
        var TCFXList = [];
        for (var t = 0; t < res.data.length; t++) {
          TCFXList.push({
            text: res.data[t].dictLabel,
            dictCode: res.data[t].dictCode,
          });
        }
        this.TCFXList = TCFXList;
      });
    },
    visitsFn(row) {
      this.$router.push({
        path: '/historicalDetails',
        query: {
          visitId: row.id,
          storeCode: row.storeCode,
          storeId: row.storeId,
        },
      });
    },
    setImgSrc(imgUrl) {
      let imgArr = imgUrl.split(',');
      return imgArr[0];
    },
    deleteImgs(val) {
      ImagePreview(val.split(','));
    },
    getStoreType() {
      if (localStorage.getItem('storeType') == '2') {
        this.DIYshow = true;
        getStoreyslTypeList({}).then((res) => {
          this.storeTypeList = res.data;
          this.getDetail();
        });
      } else {
        this.DIYshow = false;
        getStoreTypeList({}).then((res) => {
          this.storeTypeList = res.data;
          this.getDetail();
        });
      }
    },
    getDetail() {
      this.pageShow = false;
      let loading1 = this.$toast.loading({
        duration: 0,
        message: '加载中...',
        forbidClick: true,
      });
      getById({ storeId: this.$route.query.id }).then((res) => {
        loading1.clear();
        this.pageShow = true;
        localStorage.setItem('locationRemark', res.data.addressLine);
        localStorage.setItem('orgName', res.data.orgName);
        localStorage.setItem('chainName', res.data.storeName);
        if (res.code == 200) {
          this.list = res.data;
          if (this.list.carShopImgList != null) {
          } else {
            this.list.carShopImgList = [];
          }
          if (this.list.storeCategory == 'C917') {
            this.GZAttributeFormShow = true;
            this.dictTypeSJSFormShow = false;
            this.dictTypeQGJZFormShow = false;
            this.dictTypeFormShow = false;
            this.dictTypeAFormShow = false;
            for (let k = 0; k < this.potentialCustomerTypeList.length; k++) {
              if (this.potentialCustomerTypeList[k].dictCode == this.list.potentialCustomerType) {
                this.list.potentialCustomerType = this.potentialCustomerTypeList[k].text;
              }
            }
          } else {
            this.GZAttributeFormShow = false;
          }
          if (this.list.storeCategory == '129081') {
            this.dictTypeFormShow = true;
            if (this.list.attribute3 != '0' && this.list.attribute3 != null) {
              this.list.tcfxName = this.list.attribute3;
            } else {
              this.list.tcfxName = this.list.attribute5;
            }
          }
          if (this.list.storeCategory == '10131') {
            this.dictTypeFormShow = true;
            for (var k = 0; k < this.TCFXList.length; k++) {
              if (this.TCFXList[k].dictCode == this.list.tcfxName) {
                this.list.tcfxName = this.TCFXList[k].text;
              }
            }
          }

          if (this.list.storeCategory == 'sjs61') {
            this.dictTypeFormShow = true;
            for (var k = 0; k < this.SJSList.length; k++) {
              if (this.SJSList[k].dictCode == this.list.tcfxName) {
                this.list.tcfxName = this.SJSList[k].text;
              }
            }
          }
          if (this.list.storeCategory == 'zyjz63') {
            this.dictTypeFormShow = true;
            for (var k = 0; k < this.QGJZist.length; k++) {
              if (this.QGJZist[k].dictCode == this.list.tcfxName) {
                this.list.tcfxName = this.QGJZist[k].text;
              }
            }
          }
          if (this.list.storeCategory == 'C912') {
            this.storeTypePOP = false;
            this.storeName = '铭牌上项目名称';
            this.address = '地址';
          } else if (this.list.storeCategory == 'C917') {
            this.storeTypePOP = false;
            this.storeName = '名称';
            this.address = '地址';
          } else {
            this.storeTypePOP = true;
            this.storeName = '名称';
            this.address = '地址';
          }
          // 获取门店订单
          this.getStoreOrderList(this.list.storeCode);
        } else {
          this.$toast.fail(res.msg);
        }
      });
    },
    // 获取门店订单
    getStoreOrderList(storeCode) {
      getOrderByStoreCode({ storeCode: storeCode }).then((res) => {
        if (res.code == 200 && res.data) {
          let orderList = res.data.ORDERS || [];
          if (orderList.length) {
            let orderMap = new Map();
            for (let i = 0; i < orderList.length; i++) {
              if (orderMap.has(orderList[i].ORDERID)) {
                orderMap.get(orderList[i].ORDERID).productDetail.push(orderList[i]);
              } else {
                let orderObj = {
                  ORDERID: orderList[i].ORDERID, // 订单id
                  ORDERDATE: orderList[i].ORDERDATE, //下单时间
                  STATUS_DESCR: orderList[i].STATUS_DESCR, // 订单状态
                  productDetail: [orderList[i]], // 订单详情
                };
                orderMap.set(orderList[i].ORDERID, orderObj);
              }
            }
            // totalPrice:
            let orderListArr = [];
            for (let value of orderMap.values()) {
              let productTotalPrice = 0; //当前订单总金额
              for (let i = 0; i < value.productDetail.length; i++) {
                value.productDetail[i].productTotalPrice =
                  value.productDetail[i].UNITPRICE * value.productDetail[i].QTY; // 单个商品总金额
                productTotalPrice = productTotalPrice + value.productDetail[i].productTotalPrice;
              }
              value.totalPrice = productTotalPrice;
              orderListArr.push(value);
            }
            this.orderList = orderListArr;
          } else {
            this.orderList = [];
          }
          this.activeNames = ['1'];
        }
      });
    },
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '总金额';
          return;
        }
        if (index === 2) {
          const values = data.map((item) => Number(item[column.property]));
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          // sums[index] += ' 元';
        }
        // const values = data.map((item) => Number(item[column.property]));
        // if (!values.every((value) => isNaN(value))) {
        //   sums[index] = values.reduce((prev, curr) => {
        //     const value = Number(curr);
        //     if (!isNaN(value)) {
        //       return prev + curr;
        //     } else {
        //       return prev;
        //     }
        //   }, 0);
        //   sums[index] += ' 元';
        // } else {
        //   sums[index] = 'N/A';
        // }
      });
      return sums;
    },
    formLink() {
      this.$router.push('/storeVisit/questions');
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    tabChange(name, title) {
      console.log(name, title);
    },
    // 退回原因查看详情
    examineDetail() {
      this.rejectMsgShow = true;
    },
    // 退回提交
    rejectReasonSubmit() {
      if (this.rejectMessage != '') {
        this.approvalStoreFun('reject');
      } else {
        this.$notify({ type: 'warning', message: '请输入退回原因' });
      }
    },
    approvalStoreFun(type) {
      this.toastLoading(0, '正在提交...', true);
      // processApprovalStatus(2=通过，3=拒绝)
      let processApprovalStatus = type == 'reject' ? 3 : 2;
      let approvalDesc = type == 'reject' ? this.rejectMessage : '';
      let params = {
        approvalId: this.$route.query.approvalId, // 店铺id
        processApprovalStatus: processApprovalStatus, // 审批类型
      };
      if (type == 'reject') {
        params.approvalDesc = approvalDesc;
      }
      approvalStore(params).then((res) => {
        this.toastLoading().clear();
        if (res.code == 200) {
          this.$toast.success('提交成功');
          this.rejectReasonShow = false;
          this.onClickLeft();
        } else {
          this.$toast.fail(res.msg);
        }
      });
    },
  },
};
</script>
<style scoped lang="scss">
.container {
  padding-bottom: 50px;
}
.myTab .van-tabs__nav--card {
  margin: 0 !important;
  border-left: 0;
  border-right: 0;
}
.myTab .van-tabs__wrap,
.van-tabs__nav--card {
  height: 40px;
}
.myTab .van-tab {
  line-height: 40px;
}
.helpPageMask {
  width: 100%;
  height: 100%;
  background: rgba(116, 116, 116, 0.8);
  position: fixed;
  z-index: 100000;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bottomBtn {
  position: fixed;
  bottom: 0;
  z-index: 10;
  height: 50px;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  .van-button {
    /* flex: 1; */
    width: 40%;
  }
}
.rejectMsg {
  position: sticky;
  top: 46px;
  z-index: 10;
  display: flex;
  box-sizing: border-box;
  width: 100%;
  padding: 10px 16px;
  overflow: hidden;
  color: #323233;
  font-size: 14px;
  line-height: 24px;
  background-color: #f5daac;
  font-weight: 600;
  .label {
    width: 6.2em;
    margin-right: 12px;
  }
  .value {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    padding-right: 20px;
  }
  .examineDetail {
    width: 70px;
    color: #0057ba;
  }
}
.rejectMsgBox {
  min-height: 30%;
  max-height: 50%;
  padding: 10px 20px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .title {
    padding: 10px 0;
    text-align: center;
    font-size: 16px;
    font-weight: 600px;
  }
  .content {
    flex: 1;
    overflow-y: auto;
    .rejectMsgItem {
      margin-bottom: 20px;
      .item {
        padding: 5px 0;
        span {
          display: inline-block;
        }
      }
      .label {
        width: 80px;
        font-size: 14px;
        font-weight: 600;
      }
      .value {
        font-size: 14px;
      }
    }
  }
  .btnBox {
    height: 44px;
    button {
      width: 100%;
    }
  }
}
.orderList {
  .orderItem {
    .orderTitle {
      padding: 5px 0;
      font-size: 16px;
      font-weight: 600;
      color: #000;
      display: flex;
      align-items: center;
      &::before {
        content: '';
        width: 8px;
        height: 8px;
        background: red;
        border-radius: 50%;
        display: inline-block;
        margin-right: 5px;
      }
    }
  }
}
</style>
<style lang="scss">
.searchDiv {
  .van-search {
    /* // background: #fff; */
  }
  .van-search__action {
    font-size: 14px;
    color: #0057ba;
    font-weight: bold;
    background: #f1f1f1;
    border-bottom-right-radius: 60px;
    border-top-right-radius: 60px;
    border: 1px solid #ccc;
    padding: 0 20px;
  }
  .van-search--show-action {
    padding-right: 12px;
  }
  .van-search__content {
    border: 1px solid #ccc;
    border-bottom-left-radius: 60px;
    border-top-left-radius: 60px;
    background: #f1f1f1;
    border-right: 0;
  }
}
.helpAlert {
  .van-dialog__cancel {
    .van-button__text {
      &::before {
        content: '?';
        background: #f79200;
        width: 20px;
        display: inline-block;
        border-radius: 50%;
        color: #fff;
      }
    }
  }
}
</style>