web-base-admin/src/views/configManage/addSms/index.vue

<!-- 系统配置 - 权限配置 -->
<template>
  <div class="page">
    <topBar
      v-if="topList.length > 0"
      :top-list="topList"
      :moren="moren"
    />
    <div class="main">
      <div class="maintop">
        <span class="colors" />
        <div style="margin: 0 0 0 15px;font-weight: bold">{{ '短信模板' }}</div>
      </div>
      <div class="maintable">
        <el-form ref="forms" :rules="rules" :model="tables" label-width="100px">
          <el-form-item :label="'短信编号'" prop="templateCode">
            <el-input
              v-model="tables.templateCode"
              style="width: 160px"
              :disabled="disableds"
              class="heights"
              clearable
              :placeholder="'请输入短信编号'"
            />
            <span class="temp" @click="selectSub">{{ '选择模板' }}</span>
          </el-form-item>
          <el-form-item :label="'模板名称'" prop="templateName">
            <el-input
              v-model="tables.templateName"
              :disabled="disableds"
              class="heights"
              clearable
              :placeholder="'请输入模板名称'"
            />
          </el-form-item>
          <el-form-item :label="'短信内容'" prop="templateContent">
            <el-input
              v-model="tables.templateContent"
              :disabled="disableds"
              type="textarea"
              :rows="5"
              class="height"
              clearable
              :placeholder="'请输入短信内容'"
            />
          </el-form-item>
          <el-form-item :label="'发送范围'" prop="templateContent">
            <div style="display: flex;padding-bottom: 10px">
              <el-radio v-model="table.sendScope" label="1" style="line-height: 40px">{{ '指定会员' }}</el-radio>
              <el-button size="small" style="background-color: #C8161D;color: #fff;font-size: 14px" @click="$router.push('/configManage/smsRecord/selectMember')">
                {{ '选择会员' }}</el-button>
            </div>
            <div v-if=" memberList!=null && memberList !== undefined && memberList.length> 0" class="contents" style="margin-bottom: 20px">
              <div style="display: flex">
                <div class="divBox">{{ '会员编号' }}</div>
                <div class="divBox">{{ '会员姓名' }}</div>
                <div class="divBox">{{ '注册等级' }}</div>
                <div class="divBox">{{ '真实奖衔' }}</div>
              </div>
              <div v-for="item in memberList" style="display: flex">
                <div class="divBox tops overflow1" :title="item.memberCode">{{ item.memberCode }}</div>
                <div class="divBox tops overflow1" :title="item.memberName">{{ item.memberName }}</div>
                <div class="divBox tops overflow1" :title="item.registerGradeVal">{{ item.registerGradeVal }}</div>
                <div class="divBox tops overflow1" :title="item.awardsVal">{{ item.awardsVal }}</div>
              </div>
              <div />
            </div>
            <div style="display: flex;padding-bottom: 10px">
              <el-radio v-model="table.sendScope" label="2" style="line-height: 40px">{{ '订单短信' }}</el-radio>
              <el-button size="small" style="background-color: #C8161D;color: #fff;font-size: 14px" @click="$router.push('/configManage/smsRecord/selectOrder')">{{ '选择订单' }}</el-button>
            </div>
            <div v-if="orderList!=null && orderList !== undefined && orderList.length> 0 " class="contents">
              <div style="display: flex">
                <div class="divBox">{{ '订单编号' }}</div>
                <div class="divBox">{{ '产品名称' }}</div>
                <div class="divBox">{{ '收货人' }}</div>
                <div class="divBox" style="width: 220px">{{ '二次物流单号' }}</div>
                <div class="divBox">{{ '物流公司' }}</div>
              </div>
              <div v-for="item in orderList" style="display: flex">
                <div class="divBox tops overflow1" :title="item.orderCode">{{ item.orderCode }}</div>
                <div class="divBox tops overflow1" :title="item.productName">{{ item.productName }}</div>
                <div class="divBox tops overflow1" :title="item.recName">{{ item.recName }}</div>
                <div class="divBox tops overflow1" :title="item.recPhone" style="width: 220px">{{ item.recPhone }}</div>
                <div class="divBox tops overflow1" :title="item.logisticsCompany">{{ item.logisticsCompany }}</div>
              </div>
              <div />
            </div>
            <div>
              <el-radio v-model="table.sendScope" label="3">{{ '指定用户（多个手机号使用逗号间隔）' }}</el-radio>
              <div>
                <el-input
                  v-model="table.phones"
                  style="width: 360px"
                  type="textarea"
                  :rows="5"
                  clearable
                  placeholder=""
                />
              </div>
            </div>
          </el-form-item>
          <el-form-item v-if="tables.paramNum>0" :label="'发送方式'">
            <div v-for="(item,index) in tables.arr" :key="index">
              <el-form-item :label="item.name" prop="value" class="lables">
                <el-input
                  v-model.trim="item.value"
                  style="width: 200px"
                  :rows="5"
                  clearable
                  placeholder=""
                  @change="changes($event)"
                />
              </el-form-item>
            </div>
          </el-form-item>
          <el-form-item :label="'发送方式'" prop="templateContent">
            <div>
              <el-radio v-model="table.sendType" label="1">{{ '立即发送' }}</el-radio>
            </div>
            <div>
              <el-radio v-model="table.sendType" label="2">{{ '定时发送' }}</el-radio>
              <el-date-picker
                v-model="table.sendTime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                :placeholder="'请选择'"
                default-time="00:00:00"
              />
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <el-dialog
      :title="'选择短信模版'"
      :visible.sync="ruleShow"
      width="50%"
      center
      :close-on-click-modal="false"
      :before-close="handleClose"
    >
      <el-form ref="forms" :rules="rules" :model="table" label-width="80px">
        <el-form-item :label="'模板名称'" prop="tempName">
          <el-input
            v-model="queryParams.tempName"
            style="width: 450px"
            class="heights1"
            clearable
            :placeholder="'请输入模板名称'"
          />
        </el-form-item>
        <el-table
          style="height: 300px;overflow-y: auto"
          :data="tableData"
          :header-cell-style="{ background: '#EEEEEE' }"
          :row-class-name="tableRowClassName"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column align="center" prop="indexs" :label="'序号'" width="50" />
          <el-table-column align="center" prop="templateCode" :label="'短信编号'" />
          <el-table-column align="center" prop="templateName" :label="'模板名称'" />
          <el-table-column align="center" prop="creationTime" :label="'创建日期'" />
          <el-table-column align="center" prop="selects" :label="'操作'">
            <template slot-scope="scope">
              <el-button
                v-if="scope.row.selcts==1"
                style="background-color: #C8161D;color: #fff"
                type="text"
                size="small"
                @click.native.prevent="selects(scope.row)"
              >
                {{ '选择' }}
              </el-button>
              <el-button
                v-if="scope.row.selcts==2"
                style="background-color: #D2D2D2;color: #fff"
                type="text"
                size="small"
              >
                {{ '已选择' }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="research"
        />
        <div style="padding-top: 20px;display: flex;justify-content: center">
          <el-button type="text" size="small" class="button-style" @click="handleClose"> {{ '取消' }}</el-button>
          <el-button v-preventReClick="3000" type="text" size="small" class="button-style" style="margin-left: 40px;background-color: #C8161D;" @click="submitBtn()">
            {{ '确认' }}
          </el-button>
        </div>
      </el-form>

    </el-dialog>
    <div class="footer">
      <el-button
        size="small"
        class="thebtn2"
        @click="$router.push('/configManage/smsRecord/smsTemplate');"
      > {{ '取消' }}</el-button>
      <el-button
        size="small"
        class="thebtn1"
        @click="submit"
      > {{ '确认' }}</el-button>
    </div>
  </div>
</template>

<script>
import topBar from '@/components/topBar'
import { findAllArea } from '@/api/product'
import { getbdmenuList, getPubenumsList } from '@/api/system'
import { getgradeRanglist, getAwardsListChiose } from '@/api/level'
const { getQueryString } = require('@/utils/index')
import * as api from '@/api/sms'
import { Message } from 'element-ui'
import { deleteAgreement } from '@/api/configManage'
import { deleteApproval } from '@/api/signing'
export default {
  name: 'Qxpz',
  components: {
    topBar
  },
  data() {
    return {
      memberList: [],
      orderList: [],
      disableds: true,
      forms: '',
      rules: {
        templateCode: [
          { required: true, message: '请输入短信编号', trigger: 'blur' }
        ],
        templateName: [
          { required: true, message: '请输入模板名称', trigger: 'blur' }
        ],
        templateContent: [
          { required: true, message: '请输入短信内容', trigger: 'change' }
        ]
      },
      tables: { templateCode: '', templateName: '', templateContent: '', paramNum: 0, arr: [] },
      param1: '',
      param2: '',
      table: { templateId: '', sendType: '1', sendScope: '1', phones: '', paramList: [], sendTime: '', memberList: [],
        orderList: []

      },
      ruleShow: false,
      moren: 'addSms',
      topList: [
        {
          name: '短信记录',
          path: 'smsRecordList'
        },
        {
          name: '短信模板',
          path: 'smsTemplate'
        },
        {
          name: '新增短信',
          path: 'addSms'
        }
      ],
      defaultParams: {
        label: 'name',
        value: 'pkId',
        children: 'children'
      },
      multipleSelection: [],
      queryParams: {
        pageNum: 1,
        pageSize: 50,
        tempName: ''
      },
      gradeRangList: [],
      awardsList: [],
      statusList: [{ 'name': '正常', 'id': '0' }, { 'name': '停用', 'id': '1' }],
      menuOptions: [],
      tableData: [],
      total: 0,
      types: 1,
      pkId: '',
      allAreaList: [],
      tempId: ''
    }
  },
  computed: {
    timeDefault() {
      var date = new Date()
      var s1 = date.getDate()
      return date
    }
  },
  mounted() {
    const geturl = window.location.href
    const getqyinfo = geturl.split('?')[1]
    const getqys = new URLSearchParams('?' + getqyinfo)
    const status = getqys.get('status')
    const state = getqys.get('state')
    if (status == 1) {
      this.memberList = JSON.parse(localStorage.getItem('memberList'))
      this.orderList = JSON.parse(localStorage.getItem('orderList'))
    } else {
      localStorage.removeItem('memberList')
    }
    if (state == 1) {
      const data = JSON.parse(localStorage.getItem('template'))
      this.table.templateId = data.pkId
      this.tables.templateId = data.pkId
      this.tables.templateCode = data.templateCode
      this.tables.templateContent = data.templateContent
      this.tables.templateName = data.templateName
      this.tables.paramNum = data.paramNum
      console.error(data)
      this.tables.arr = data.arr
    } else {
      localStorage.removeItem('template')
    }
  },
  destroyed() {
    localStorage.removeItem('memberList')
    localStorage.removeItem('orderList')
  },
  created() {
    this.research()

    // this.table.sendTime = this.timeDefault
    // this.getData()
    // this.findAllArea()
    // const geturl = window.location.href
    // const getqyinfo = geturl.split('?')[1]
    // const getqys = new URLSearchParams('?' + getqyinfo)
    // const state = getqys.get('state')
    // const pkId = getqys.get('pkId')
    // if (state == 2) {
    //   this.disableds = true
    // }
    // if (pkId) {
    //   console.error("111")
    //   this.pkId = pkId
    //   this.types = 2
    //   this.getSmsDetail(pkId)
    // }
  },
  methods: {
    changes(item) {
      this.$forceUpdate()
    },
    selects(row) {
      this.tableData.forEach((item) => {
        item.selcts = 1
      })
      row.selcts = 2
      this.tables.templateCode = row.templateCode
      this.tables.templateContent = row.templateContent
      this.tables.templateName = row.templateName
      this.table.templateId = row.pkId
      this.tables.paramNum = row.paramNum
      const arr = []
      if (row.paramNum > 0) {
        for (let i = 0; i < row.paramNum; i++) {
          arr.push({ 'name': '参数' + (i + 1), 'value': '' })
        }
      }
      row.arr = arr
      this.tables.arr = arr
      localStorage.setItem('template', JSON.stringify(row))
    },
    selectSub() {
      this.ruleShow = true
    },
    // 获取模板详情
    getSmsDetail(id) {
      api.detail(id).then((res) => {
        if (res.code == 200) {
          this.pkId = res.data.pkId
          this.table = {
            templateName: res.data.templateName,
            templateCode: res.data.templateCode,
            templateContent: res.data.templateContent
          }
        }
      })
    },
    handleChange1(res) {
      this.queryParams.recProvince = res[0]
      this.queryParams.recCity = res[1]
      this.queryParams.recCounty = res[2]
    },
    // 查询全部地区
    findAllArea() {
      findAllArea().then((res) => {
        this.allAreaList = res.data
        this.allAreaList.forEach((item) => {
          item.children.forEach((ctm, cdx) => {
            ctm.isShow = true
          })
          item.isShow = true
        })
        this.allTsAreaList = JSON.parse(JSON.stringify(this.allAreaList))
        this.allTsAreaList.forEach((item, index) => {
          this.$set(this.allTsAreaList[index], 'changeTsCldList', [])
        })
        this.allNoAreaList = JSON.parse(JSON.stringify(this.allAreaList))
        this.allNoAreaList.forEach((item, index) => {
          this.$set(this.allNoAreaList[index], 'changeNoCldList', [])
        })
      })
    },
    getData() {
      // 真实奖衔下拉选
      getAwardsListChiose().then((res) => {
        this.awardsList = res.rows
      })
      // 注册等级下拉
      getgradeRanglist().then((res) => {
        this.gradeRangList = res.data
      })
    },
    submit() {
      this.ruleSubmit()
    },
    submitBtn() {
      // 添加角色
      this.ruleShow = false
    },
    delRole(item) {
      // 删除角色信息
      this.$confirm('确认要删除该角色吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        api.delRole(item.roleId).then((res) => {
          if (res.code === 200) {
            Message({
              message: '删除成功',
              type: 'success'
            })
            this.research()
          } else {
            Message({
              message: res.msg,
              type: 'error'
            })
          }
        })
      })
    },
    ruleSubmit() {
      const datas = this.table
      if (datas.templateId == '') {
        Message({
          message: '选择短信模版'
        })
        return
      }
      if (this.memberList == null) {
        this.memberList = []
      }
      if (this.orderList == null) {
        this.orderList = []
      }
      console.error(this.memberList)
      if (datas.sendScope == 1 && this.memberList.length == 0) {
        Message({
          message: '请选择指定会员'
        })
        return
      }
      if (datas.sendScope == 2 && this.orderList.length == 0) {
        Message({
          message: '请选择订单短信'
        })
        return
      }
      if (datas.sendScope == 3 && datas.phones == '' || datas.phones == null) {
        Message({
          message: '请输入指定用户'
        })
        return
      }
      if (datas.sendType == 2 && datas.sendTime == '' || datas.phones == null) {
        Message({
          message: '请输入选择指定时间'
        })
        return
      }
      if (datas.sendScope == 1) {
        datas.orderList = []
        datas.memberList = []
        datas.phones = ''
        console.error(this.memberList)
        if (this.memberList) {
          this.memberList.forEach((item) => {
            datas.memberList.push(item.pkId)
          })
        }
      }
      if (datas.sendScope == 2) {
        datas.orderList = []
        datas.memberList = []
        datas.phones = ''
        this.orderList.forEach((item) => {
          datas.orderList.push(item.pkOrder)
        })
      }
      if (datas.sendScope == 3) {
        datas.orderList = []
        datas.memberList = []
      }
      if (this.tables.paramNum > 0) {
        datas.paramList = []
        this.tables.arr.forEach((item) => {
          if (item.value) {
            datas.paramList.push(item.value)
          }
        })
      }
      if (this.tables.paramNum > 0 && datas.paramList.length == 0) {
        this.$confirm('该短信模板存在参数设置是否不输入进行提交?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          api.create(datas).then((res) => {
            if (res.code === 200) {
              Message({
                message: res.msg,
                type: 'success'
              })
              this.$router.push('/configManage/smsRecord/smsRecordList')
            } else {
              Message({
                message: res.msg,
                type: 'error'
              })
            }
          })
        })
        return
      }
      api.create(datas).then((res) => {
        if (res.code === 200) {
          Message({
            message: res.msg,
            type: 'success'
          })
          this.$router.push('/configManage/smsRecord/smsRecordList')
        } else {
          Message({
            message: res.msg,
            type: 'error'
          })
        }
      })
    },
    statusChange(value) {
      if (this.table.status.length > 1) {
        this.table.status.splice(0, 1)
      }
    },
    handleClose() {
      this.ruleShow = false
    },
    changeBox(row) {
      console.error(row)
    },
    addFrom() {
    },
    addRule() {
    },
    changeTime(value) {
      // this.queryParams.creationTime = value[0]
      // this.queryParams.endCreationTime = value[1]
    },
    handleChangeMunu(value) {
      console.log('🌈', value[value.length - 1])
      this.queryParams.menuId = value[value.length - 1]
    },
    // 菜单下拉选
    getPubenumsList() {
      getPubenumsList().then((res) => {
        this.menuOptions = res.data
      })
    },
    // 等级范围选择
    getgradeRanglist() {
      getgradeRanglist().then((res) => {
        this.gradeRangList = res.data
      })
    },
    // 奖衔下拉列表
    getAwardsListChiose() {
      getAwardsListChiose().then((res) => {
        this.awardsList = res.rows
      })
    },
    research() {
      // // 日期传入改为起止两个字段
      // if ("" != this.queryParams.creationTime) {
      //   this.queryParams.creationTimeStart = this.queryParams.creationTime[0];
      //   this.queryParams.creationTimeEnd = this.queryParams.creationTime[1];
      // }

      // creationTime: '', // 开始时间
      //   modifiedTime: '' // 结束时间
      api.smsTemplateAll(this.queryParams).then((res) => {
        res.data.forEach((element, i) => {
          element.indexs = i + 1
          element.selcts = 1
        })
        const geturl = window.location.href
        const getqyinfo = geturl.split('?')[1]
        const getqys = new URLSearchParams('?' + getqyinfo)
        const state = getqys.get('state')
        const data = JSON.parse(localStorage.getItem('template'))
        console.error(data)
        if (state) {
          res.data.forEach((item) => {
            item.selcts = 1
            if (data.pkId == item.pkId) {
              item.selcts = 2
            }
          })
        }
        // res.rows.forEach((element) => {
        //   element.alist = []
        //   element.blist = []
        //   element.clist = []
        //   element.themenus = ''
        //   element.theaward = ''
        //   element.thegrade = ''
        //   element.menuList.forEach((item) => {
        //     element.alist.push(item.menuVal)
        //     element.themenus = element.alist.join('/')
        //   })
        //   element.awardList.forEach((item) => {
        //     element.blist.push(item.awardVal)
        //     element.theaward = element.blist.join('/')
        //   })
        //   element.gradeList.forEach((item) => {
        //     element.clist.push(item.gradeVal)
        //     element.thegrade = element.clist.join('/')
        //   })
        // })

        this.tableData = res.data
      })
    },
    reChongzhi() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 50,
        userName: '', // 角色姓名
        roleString: '', // 权限字符
        status: '', // 状态
        startDate: '', // 开始时间
        endDate: [] // 结束时间
      }
      this.research()
    },

    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // if (columnIndex === 0) {
      //   if (rowIndex % 2 === 0) {
      //     return {
      //       rowspan: 2,
      //       colspan: 1,
      //     };
      //   } else {
      //     return {
      //       rowspan: 0,
      //       colspan: 0,
      //     };
      //   }
      // }
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 1) {
        return 'warning-row'
      } else if (rowIndex % 2 == 0) {
        return 'success-row'
      }
      return ''
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-textarea.is-disabled .el-textarea__inner{
  background-color: #e4e7ed!important;
}
.overflow1{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1; //行数
  -webkit-box-orient: vertical;
}
.contents{
  border: 1px solid #999;
  border-right: none;
  width: 573px;
  max-height: 240px;
  overflow-y: auto;
}
.tops{
  border-top: 1px solid #999;
  font-weight: inherit!important;
}
.divBox{
  width: 144px;
  height: 42px;
  line-height: 42px;
  text-align: center;
  color: #333;
  font-weight: 600;
  border-right: 1px solid #999;
  padding: 0 10px;
}
::v-deep .pagination-container{
  text-align: center;
  padding-top: 30px;
}
.temp{
  width: 120px;
  height: 48px;
  background: #C8161D;
  border-radius: 5px 5px 5px 5px;
  opacity: 1;
  display: inline-block;
  margin-left: 20px;
  text-align: center;
  line-height: 48px;
  color: #fff;
  cursor: pointer;
}
::v-deep .heights .el-input__inner{
  height: 44px;
  line-height: 44px;
}
::v-deep .heights1 .el-input__inner{
  height: 32px;
  line-height: 32px;
}
.maintable{
  padding:0 20px 0 0;
}
.colors{
  width: 5px;
  height: 19px;
  background: #C8161D;
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
}
::v-deep .lables .el-form-item__label{
  width: 60px!important;
}
::v-deep .lables .el-form-item__content{
  margin-left: 20px!important;
}
.footer {
  height: 68px;
  background: #ffffff;
  box-shadow: 0px -3px 20px 0px rgba(204, 204, 204, 0.5);
  // margin: 0 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  .thebtn1 {
    background: #3181e5;
    color: #ffffff;
    padding: 9px 45px;
  }
  .thebtn2 {
    background: #cccccc;
    color: #ffffff;
    padding: 9px 45px;
  }
}

.button-style{
  width: 209px;
  height: 48px;
  background: #CCCCCC;
  border-radius: 5px 5px 5px 5px;
  opacity: 1;
  line-height: 48px;
  padding: 0!important;
  color: #fff;
  font-size: 18px;
}
::v-deep .el-dialog__title{
  font-weight: bold;
}
::v-deep .el-dialog__header{
  border-bottom: 1px solid rgba(0,0,0,0.1);
}
.button-s{
  padding: 0 2px!important;
}
::v-deep .el-button{
  padding: 10px 20px;
}
::v-deep .el-date-editor .el-range__close-icon{
  margin-top: -10px;
}
::v-deep .el-date-editor .el-range-separator{
  margin-top: -10px;
}
::v-deep .el-date-editor .el-range__icon{
  margin-top: -10px;
}
::v-deep .el-input__inner{
  height:28px;
  line-height: 28px;
}
::v-deep .el-form-item__label{
  color: #333;
  font-weight: inherit;
}
::v-deep .el-row {
  margin-top: 20px;
}
::v-deep .el-table .warning-row {
  background: #f9f9f9;
}

::v-deep .el-table .success-row {
  background: #ffffff;
}
::v-deep .el-table thead {
  color: #000000;
}
.openClose {
  margin-top: 10px;
  margin-right: 10px;
  color: #666666;
  text-align: center;
}
.page {
  padding: 20px;
  background: #f9f9f9;
  font-size: 14px;
  .thetopbox {
    background: #ffffff;
    border-radius: 8px;
    .searchbox {
      display: flex;
      align-items: center;
      .searchtitle {
        margin-right: 10px;
      }
      .searchbtn {
        background: #08143f;
        color: #ffffff;
      }
    }
  }
  .main {
    margin-top: 20px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0px 2px 20px 0px rgba(238, 238, 238, 0.5);

    .maintop {
      display: flex;
      padding: 20px 10px 10px 0;
      //justify-content: space-between;
      //align-items: center;
      border-bottom: 1px solid rgba(0,0,0,0.1);
      margin-bottom: 30px;
      .mainbtn {
        .thebtn1 {
          color: #ffffff;
          background: rgba(67, 145, 253, 1);
        }
      }
    }
  }
}
</style>