修改

zhouwx

2025-05-19 457f9c817adef8b003ee6379f493798bae5cbb69

 src/views/Admin/components/msgEditMod.vue

@@ -3,7 +3,7 @@
      :title="title"
      :visible="visible"
      centered
      width="50%"
      width="75%"
      @cancel="handleCancel"
      :afterClose="clearMod"
      :footer="null"
@@ -57,9 +57,33 @@
        <a-form-model-item prop="content">
          <a-textarea v-model="form.content" placeholder="请输入短信通知内容部分" :auto-size="{ minRows: 3, maxRows: 5 }" :readOnly="disable"/>
        </a-form-model-item>
        <a-row v-if="userInfo.unittype == 1 || title == '信息转发' || title == '信息审核'||title == '信息详情'">
          <a-col :span="24" style="display: flex;align-items: center">
            <b style="margin-bottom: 24px">直览附件URL：</b>
            <a-form-model-item style="width: 50%">
              <a-textarea :readonly="title == '信息转发'||title == '信息审核'||title == '信息详情'?true:false" v-model="form.directViewUrl" placeholder="请输入url信息" :auto-size="{ minRows: 1, maxRows: 3 }"/>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-button>上传附件</a-button>
            <a-upload
                :disabled="disable"
                :action="uploadUrl"
                :file-list="fileList"
                @change="fileChange"
                :headers="header"
                accept=".doc, .docx, .word, .pdf, .zip, .xlsx, .rar, .jpg, .jpeg, .png"
                :data="{module: 'naturalDisasterPath'}"
                @download="downloadFile"
                :remove="(file)=>{removeFile(file)}"
                :showUploadList="{
                  showRemoveIcon: true,
                  showDownloadIcon: true
                }"
            >
              <a-button> <a-icon type="upload" />上传附件</a-button>
            </a-upload>
          </a-col>
          <a-col :span="12" style="display: flex;align-items: center;justify-content: right">
            <b style="margin-bottom: 24px">超时设置：</b>
@@ -79,8 +103,9 @@
                全选
              </a-checkbox>
            </div>
            <a-form-model-item prop="receiver">
            <a-form-model-item prop="receiver" style="margin-bottom: 6px">
              <a-tree-select
                  :maxTagCount="3"
                  show-search
                  tree-checkable
                  treeCheckStrictly
@@ -99,15 +124,34 @@
              >
              </a-tree-select>
            </a-form-model-item>
<!--            <a-checkbox :checked="withLeaders" @change="isAddLeaders" style="margin-bottom: 24px" :disabled="disable">-->
<!--              同时发信息给本级领导-->
<!--            </a-checkbox>-->
          </a-col>
          <a-col :span="12">
            <b style="margin-bottom: 6px">平级接收人选择：</b>
            <a-form-model-item prop="recipient">
              <a-select mode="multiple" placeholder="选择平级接收单位" v-model="form.recipient" @change="handle" :disabled="disable">
                <a-select-option v-for="item in filteredOptions" :key="item.id" :value="item.id">
                  {{ item.recipientName }}
                </a-select-option>
              </a-select>
            <div style="display:flex;justify-content: space-between;align-items: center;">
              <b>平级接收人选择：</b>
              <a-checkbox :checked="checkSlAll" @change="checkSlChange" :disabled="disable">
                全选
              </a-checkbox>
            </div>
            <a-form-model-item>
<!--              <a-select mode="multiple" placeholder="选择平级接收单位" v-model="form.recipient" @change="handle" :disabled="disable" :maxTagCount="3">-->
<!--                <a-select-option v-for="item in filteredOptions" :key="item.id" :value="item.id">-->
<!--                  {{ item.recipientName }}({{item.company}} {{item.phone}})-->
<!--                </a-select-option>-->
<!--              </a-select>-->
              <a-tree-select
                  v-model="form.recipient"
                  :maxTagCount="3"
                  style="width: 100%"
                  :tree-data="treeData"
                  tree-checkable
                  placeholder="选择平级接收单位"
                  :show-checked-strategy="SHOW_PARENT"
                  search-placeholder="Please select"
                  @change="handle"
              />
            </a-form-model-item>
          </a-col>
        </a-row>
@@ -121,30 +165,33 @@
            </a-button>
          </a-col>
        </a-row>
        <a-row :gutter="24" style="display: flex;justify-content: right;align-items: center" v-if="title=='信息转发'">
          <a-col :span="12">
        <a-row :gutter="24" style="display: flex;justify-content: right;align-items: center" v-if="title=='信息转发' || title=='信息修改'">
          <a-col :span="12" v-if="title=='信息转发'">
            <b style="margin-bottom: 6px">选择审批领导：</b>
            <a-form-model-item prop="reviewId">
              <a-select show-search v-model="form.reviewId" placeholder="请选择审批领导">
                <a-select-option v-for="(item,index) in leaders" :value="item.id" :key="index">{{item.name}}</a-select-option>
                <a-select-option v-for="(item,index) in leaders" :value="item.id" :key="index">{{item.realName}}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="12" style="display: flex;justify-content: right">
          <a-col :span="12" style="text-align: right" v-if="title=='信息转发'">
            <a-button type="primary" style="min-width: 140px;margin-right: 12px" @click="confirmSend(4)">
              确认转发
            </a-button>
          </a-col>
          <a-col :span="12" style="text-align: right" v-if="title=='信息修改'">
            <a-button type="primary" style="min-width: 140px;margin-right: 12px" @click="confirmSend(4)" :disabled="userInfo.role.id==1?true:false" v-preventReClick="1500">
              确认并提交审核
            </a-button>
          </a-col>
        </a-row>
      </div>

      <div class="right">
        <h2>短信预览</h2>
        <div class="mobile">
          <div class="mesg">
            <P>【{{form.title}}】{{form.content}}。发布单位：{{form.publishingUnit}}</P>
            <P>【新疆自然灾害预警中心】{{form.content}}</P>
          </div>

        </div>
      </div>
    </a-form-model>
@@ -152,11 +199,16 @@
</template>

<script>
import {getAreaWithUserIfo, getPeerRecipient, getLeaders} from '@/api/user'
import {getAreaWithUserIfo, getPeerRecipient, getLeaders, delRecipient} from '@/api/user'
import {getUserInfo} from "@/util/storage";
import Cookies from "js-cookie";
import {massSend, msgSend} from "@/api/send";
import {massSend, msgSend, msgUpdate} from "@/api/send";
import {postReview} from "@/api/review";
import axios from "axios";
import {deleteFile} from "@/api/list";
import {TreeSelect} from "ant-design-vue";
const SHOW_PARENT = TreeSelect.SHOW_PARENT;
const treeData = [];
export default {
  name: "msgEditMod",
  data() {
@@ -164,6 +216,8 @@
      title: '信息审核',
      disable: true,
      visible: false,
      SHOW_PARENT,
      treeData,
      confirmLoading: false,
      leaders: [],
      userInfo: {},
@@ -176,6 +230,7 @@
        disasterType: undefined,
        warningLevel: undefined,
        content: '',
        directViewUrl: '',
        publishingUnit: '',
        districtId: null,
        attachments: [],
@@ -186,7 +241,10 @@
        acceptingUnitIds: [],
        peerRecipientIds: []
      },
      sendLeaders: [],
      checkAll: false,
      checkSlAll: false,
      withLeaders: false,
      areaUsers: [],
      replaceFields: {
        children:'children',
@@ -196,9 +254,8 @@
      },
      riskOptions: [
        {name: '地震',value: 1},
        {name: '洪涝',value: 2},
        {name: '气象',value: 3},
        {name: '泥石流',value: 4},
        {name: '地质灾害',value: 4},
        {name: '水旱',value: 5},
        {name: '森林草原火灾',value: 6}
      ],
@@ -217,50 +274,107 @@
        timeout: [{ required: true, message: '请输入超时时间', trigger: 'blur'}],
        receiver: [{ required: true, message: '请选择接收单位', trigger: 'change'}],
        reviewId: [{ required: true, message: '请选择审批人', trigger: 'change'}],
        recipient: [{ required: true, message: '请选择平级接收人', trigger: 'change'}]
        // recipient: [{ required: true, message: '请选择平级接收人', trigger: 'change'}]
        // acceptingUnitIds: [{ required: true, message: '请选择接收单位', trigger: 'change'}],
        // peerRecipientIds: [{ required: true, message: '请选择平级接收人', trigger: 'change'}]
      }
      },
      uploadUrl: '',
      fileList: [],
      header: {
        uid: null,
        tk: Cookies.get('resTk')
      },
      delList: []
    };
  },
  components: {},
  created() {
    const t = this
    t.userInfo = getUserInfo()
    t.form.districtId = t.userInfo.districtId
    t.form.publishingUnit = t.userInfo.company
    t.getSameLevel()
    t.getAreaUsers()
    const { baseUrl } = require('../../../../config/env.' + process.env.NODE_ENV)
    t.uploadUrl= baseUrl + '/attachment/upload/detail'
  },
  computed: {},
  methods: {
    openMod(type,data){
    openMod(type,data,id){
      const t = this
      for(let i in data){
        if(t.isValidKey(i,t.form)){
          t.form[i] = data[i]
        }
      }
      const arr = data.acceptingUnitIds.map((i)=>{return {
        value: i.districtId
      }})
      t.form.receiver = JSON.parse(JSON.stringify(arr)).filter(
          (item, index) => JSON.parse(JSON.stringify(arr)).findIndex(obj => obj.value === item.value) === index
      )
      t.form.recipient = data.peerRecipientIds.map(i=>i.recipienterId)
      t.getLeaders()
      t.treeData = []
      t.userInfo = getUserInfo()
      t.header.uid = t.userInfo.uid
      t.form.districtId = t.userInfo.districtId
      t.form.publishingUnit = t.userInfo.company
      t.getSameLevel()
      t.getAreaUsers()
      t.form.acceptingUnitIds = []
      t.form.peerRecipientIds = []
      if(type == 'review') {
        t.title = '信息审核'
        t.disable = false
      }else if(type == 'view'){
        t.title = '信息详情'
        t.disable = true
      t.sendLeaders = []
      if(type == 'review' || type == 'view' || type == 'edit') {
        t.sendLeaders = data.acceptingUnitIds.filter(i=>i.roleId == 2)
        data.acceptingUnitIds = data.acceptingUnitIds.filter(i=>i.roleId == 3)
        if(t.sendLeaders.length>0){
          t.withLeaders = true
        }else{
          t.withLeaders = false
        }
        for(let i in data){
          if(t.isValidKey(i,t.form)){
            t.form[i] = data[i]
          }
        }
        if(data.attachments && data.attachments.length>0){
          t.fileList = data.attachments.map((i)=>{
            return {
              uid: i.id,
              name: i.attachementName,
              status: 'done',
              url: i.attachement
            }
          })
        }else{
          t.fileList = []
        }
        const arr = data.acceptingUnitIds.map((i)=>{return {
          value: i.districtId
        }})
        t.form.receiver = JSON.parse(JSON.stringify(arr)).filter(
            (item, index) => JSON.parse(JSON.stringify(arr)).findIndex(obj => obj.value === item.value) === index
        )
        t.form.recipient = data.peerRecipientIds.map(i=>i.recipienterId)
        if(type == 'review'){
          t.title = '信息审核'
          t.disable = false
        }else if(type == 'edit'){
          t.title = '信息修改'
          t.disable = false
        }else{
          t.title = '信息详情'
          t.disable = true
        }
      }else{
        t.form.title = data.title
        t.form.emergType = data.emergType
        t.form.disasterType = data.disasterType
        t.form.warningLevel = data.warningLevel
        t.form.content = data.content
        t.form.timeout = data.timeout
        t.form.forwardWarnInfoLogId = id
        t.form.forwardStatus = 1
        t.form.forwardPath = data.forwardPath
        t.form.directViewUrl = data.directViewUrl
        if(data.attachments && data.attachments.length>0){
          t.fileList = data.attachments.map((i)=>{
            return {
              uid: i.id,
              name: i.attachementName,
              status: 'done',
              url: i.attachement
            }
          })
        }else{
          t.fileList = []
        }
        t.title = '信息转发'
        t.getLeaders()
        t.disable = false

      }
      t.visible = true
    },
@@ -274,9 +388,24 @@
      let res = await getPeerRecipient()
      if(res.data.code == 100){
        if(res.data.data){
          t.filteredOptions = res.data.data
          // t.filteredOptions = res.data.data
          for (const resKey in res.data.data) {
            t.filteredOptions = t.filteredOptions.concat(...res.data.data[resKey]);
            const obj = {
              title: resKey,
              value: resKey,
              key: resKey,
              children: res.data.data[resKey].map(item => {
                item['title'] = item.recipientName + '(' +item.company +item.phone+ ')'
                item['value'] = item.id
                item['key'] = item.id
                return item
              })
            }
            t.treeData.push(obj)
          }
        }else{
          this.$message.warning('暂无数据');
          console.log('暂无数据')
        }
      }else{
        this.$message.warning(res.data.msg);
@@ -286,20 +415,28 @@
    // 获取接收单位
    async getAreaUsers(){
      let t = this
      let res = await getAreaWithUserIfo()
      if(res.data.code == 100){
        if(res.data.data){
          const treeD = []
          t.userTitTree(res.data.data)
          treeD.push(t.findNodeById(res.data.data,t.userInfo.districtId))
          t.areaUsers = treeD
          t.unittype = this.findNodeById(this.areaUsers,t.userInfo.districtId)?.type
        }else{
          this.$message.warning('暂无数据');
        }
      }else{
        this.$message.warning(res.data.msg);
      }
      // let res = await getAreaWithUserIfo()
      // if(res.data.code == 100){
      //   if(res.data.data){
      //     // const treeD = []
      //     const data = JSON.parse(localStorage.getItem('areaUsers'))
      //     console.log('data',data);
      //     console.log('res',res.data)
      //     t.userTitTree(res.data.data)
      //     // treeD.push(t.findNodeById(res.data.data,t.userInfo.districtId))
      //     t.areaUsers = t.findNodeById(res.data.data,t.userInfo.districtId).children
      //     t.unittype = t.findNodeById(res.data.data,t.userInfo.districtId)?.type
      //   }else{
      //     console.log('暂无数据')
      //   }
      // }else{
      //   this.$message.warning(res.data.msg);
      // }
      const data = JSON.parse(localStorage.getItem('areaUsers'))
      t.areaUsers = data;
      t.userTitTree(data)
      // t.areaUsers = t.findNodeById(data,t.userInfo.districtId).children
      t.unittype = t.findNodeById(data,t.userInfo.districtId)?.type
    },

    // 获取领导
@@ -310,7 +447,7 @@
        if(res.data.data){
          t.leaders = res.data.data
        }else{
          this.$message.warning('暂无数据');
          console.log('暂无数据')
        }
      }else{
        this.$message.warning(res.data.msg);
@@ -328,9 +465,92 @@
      const t = this
      this.checkAll = !this.checkAll
      if(t.checkAll == true){
        t.form.receiver = t.traverseTree(t.areaUsers[0])
        t.form.receiver = t.traverseTree(t.areaUsers)
      }else{
        t.form.receiver = []
      }
    },

    //选择平级部门部分
    handle(selectedItems) {
      const t = this
      if(t.form.recipient.length == t.filteredOptions.length){
        t.checkSlAll = true
      }else{
        t.checkSlAll = false
      }
    },

    checkSlChange(e) {
      const t = this
      t.checkSlAll = !t.checkSlAll
      if(t.checkSlAll == true){
        t.form.recipient = t.filteredOptions.map(i=>i.id)
      }else{
        t.form.recipient = []
      }
    },

    isAddLeaders(e) {
      const t = this
      t.withLeaders = !t.withLeaders
      if(e.target.checked){
        // if(t.userInfo.role.id == 3){
          t.sendLeaders = []
          for(let i of t.leaders){
            const {realName,...data} = i
            const { id: recipienterId, name: recipienterName, phone: recipienterPhone,...rest} = data
            const obj = { recipienterId, recipienterName, recipienterPhone, province: null,city: null,area: null,town: null,receiveUnit: t.userInfo.company,unittype: t.userInfo.unittype,roleId: 2,...rest}
            t.sendLeaders.push(obj)
          }
        // }
      }else{
        t.sendLeaders = []
      }
    },

    fileChange(info) {
      let fileList = [...info.fileList];
      // 2. read from response and show file link
      fileList = fileList.map(file => {
        if (file.uid === info.file.uid) {
          if (file.status == 'done') {
            if (file.response) {
              const res = file.response
              if (res.code == 100) {
                this.$message.success('文件上传成功')
              } else {
                this.$message.error('文件上传失败')
              }
              // Component will show file.url as link
              file.url = res.data.fileUrl
            }
          }
        }
        return file;
      });
      this.fileList = fileList;
      console.log(this.fileList,'list')
    },

    removeFile(file){
      if(this.title == '信息转发'){
        this.delList.push(file.uid)
      }else{
        this.delList.push(file.response.data.id)
      }
      console.log(this.fileList,this.form,'form')
    },

    async deleteFile(){
      const t = this
      for(let i of t.delList){
        const res = await deleteFile(i)
        if(res.data.code == 100){
          console.log('文件删除成功')
        }else{
          t.$message.error(res.data.msg)
        }
      }
    },

@@ -339,19 +559,63 @@
        if (valid) {
          this.form.acceptingUnitIds = []
          this.form.peerRecipientIds = []
          this.form.attachments = []
          const aList = this.form.receiver.map(item=>this.findNodeById(this.areaUsers,item.value)?.users)
          if(aList.includes(null)){
            this.$message.error('选择接收单位时存在无用户的单位')
            return
          }
          const newAList = [].concat(...aList)
          for(let i of newAList){
            const {realName,...data} = i
            const {id:recipienterId,name: recipienterName,phone: recipienterPhone,company: receiveUnit,...rest} = data
            const obj = { recipienterId, recipienterName, recipienterPhone, receiveUnit,...rest}
            // const {realName,...data} = i
            const {id:recipienterId,name: recipienterName,phone: recipienterPhone,company: receiveUnit,realName: recipienterRealName, registrationId: registrationId,...rest} = i
            const obj = { recipienterId, recipienterName, recipienterRealName, recipienterPhone, receiveUnit, registrationId,...rest}
            this.form.acceptingUnitIds.push(obj)
          }
          const bList = this.form.recipient.map(item => this.filteredOptions.find(i=>i.id == item))
          for(let i of bList){
            const {id:recipienterId,recipientName: recipienterName,phone: recipienterPhone, company: receiveUnit,...rest} = i
            const obj = {recipienterId, recipienterName,recipienterPhone,receiveUnit,unittype:this.unittype,...rest}
            this.form.peerRecipientIds.push(obj)
          this.form.acceptingUnitIds = [...this.form.acceptingUnitIds,...this.sendLeaders]


          if(this.form.recipient.length>0){
            // const bList = this.form.recipient.map(item => this.filteredOptions.find(i=>i.id == item))
            // for(let i of bList){
            //   const {id:recipienterId,recipientName: recipienterName,phone: recipienterPhone, company: receiveUnit,...rest} = i
            //   const obj = {recipienterId, recipienterName,recipienterPhone,receiveUnit,unittype:this.unittype,recipienterRealName:recipienterName,...rest}
            //   this.form.peerRecipientIds.push(obj)
            // }
            let bList = []
            for(let i of this.form.recipient){
              for(let j of this.treeData){
                if(j.value  == i){
                  bList = bList.concat(j.children)
                }else{
                  if(j.children && j.children.length>0){
                    for(let k of j.children){
                      if(k.id == i){
                        bList.push(k)
                      }
                    }
                  }
                }
              }
            }
            for (let i of bList) {
              const {id: recipienterId, recipientName: recipienterName, phone: recipienterPhone, company: receiveUnit, id,province,city,area,town,...rest} = i
              const obj = {recipienterId, recipienterName, recipienterPhone, receiveUnit, unittype: this.unittype, recipienterRealName: recipienterName, id,province,city,area,town}
              this.form.peerRecipientIds.push(obj)
            }
          }


          if(this.fileList.length == 0){
            this.form.attachments = []
          }else{
            this.form.attachments = this.fileList.map((i)=>{
              if(i.response){
                return i.response.data.id
              }else{
                return i.uid
              }
            })
          }
          if(status == 2 || status == 3){
            const {receiver,recipient,reviewId,...data} = this.form
@@ -359,31 +623,75 @@
            postReview(data).then( res =>{
              if(res.data.code == 100){
                this.$message.success('审核已提交')
                this.$emit('refresh')
                this.visible = false
                this.deleteFile()
              }else{
                this.$message.error(res.data.msg)
              }
              this.$refs.ruleForm.clearValidate()
              this.$refs.ruleForm.resetFields()
              this.delList = []
              this.fileList = []
              this.visible = false
              this.$emit('refresh')
            })
          }else{
            const {receiver,recipient,id,...data} = this.form
            msgSend(data).then( res =>{
              if(res.data.code == 100){
                this.$message.success('信息已提交审核')
              }else{
                this.$message.error(res.data.msg)
              }
              this.$emit('refresh')
              this.visible = false
              this.$refs.ruleForm.clearValidate()
              this.$refs.ruleForm.resetFields()
            })
            if(this.title == '信息转发'){
              const {receiver,recipient,id,...data} = this.form
              msgSend(data).then( res =>{
                if(res.data.code == 100){
                  this.$message.success('信息已提交审核')
                  this.deleteFile()
                }else{
                  this.$message.error(res.data.msg)
                }
                this.$refs.ruleForm.clearValidate()
                this.$refs.ruleForm.resetFields()
                this.delList = []
                this.fileList = []
                this.visible = false
                this.$emit('refresh')
              })
            }else{
              const {receiver,recipient,reviewId,...data} = this.form
              msgUpdate(data).then( res =>{
                if(res.data.code == 100){
                  this.$message.success('信息已提交审核')
                  this.deleteFile()
                }else{
                  this.$message.error(res.data.msg)
                }
                this.$refs.ruleForm.clearValidate()
                this.$refs.ruleForm.resetFields()
                this.delList = []
                this.fileList = []
                this.visible = false
                this.$emit('refresh')
              })
            }
          }
        }else{
          console.log('error submit!!');
          return false;
        }
      })
    },

    downloadFile(file){
      const t = this
      const { baseUrl } = require('../../../../config/env.' + process.env.NODE_ENV)
      axios.get(baseUrl + file.url,{headers:{'Content-Type': 'application/json','tk': `${Cookies.get('resTk')}`,'uid':`${Cookies.get('resUid')}`},responseType: 'blob'}).then(res=>{
        if (res) {
          const link = document.createElement('a')
          let blob = new Blob([res.data],{type: res.data.type})
          link.style.display = "none";
          link.href = URL.createObjectURL(blob); // 创建URL
          window.open(link.href)
          // link.setAttribute("download", file.name);
          // document.body.appendChild(link);
          // link.click();
          // document.body.removeChild(link);
        } else {
          this.$message.error('获取文件失败')
        }
      })
    },
@@ -416,11 +724,13 @@
    // 将树状数据所有id和name放入对象数组
    traverseTree(treeData) {
      let result = [];
      function traverse(node) {
        result.push({ label: node.name, value: node.id });
        if (node.children && node.children.length > 0) {
          for (let child of node.children) {
            traverse(child);
      function traverse(data) {
        for(const node of data){
          if(node.users && node.users.length>0) {
            result.push({label: node.name, value: node.id});
            if (node.children && node.children.length > 0) {
              traverse(node.children);
            }
          }
        }
      }
@@ -432,6 +742,7 @@
    userTitTree(treeData) {
      for(const node of treeData){
        if(node.users){
          node.users = node.users.filter(i=>i.roleId == 3)
          node.users = node.users.map((i)=>{
            return{
              ...i,
@@ -439,7 +750,7 @@
              districtId: node.id
            }
          })
          node.name = node.name + '('+node.users.map(i=>i.name +' '+ i.phone).join(',')+')'
          node.name = node.name + '('+node.users.map(i=>i.realName +' '+ i.phone).join(',')+')'
        }
        if(node.children){
          this.userTitTree(node.children)
@@ -453,10 +764,6 @@
    },
    onSelect() {
      console.log(...arguments);
    },
    //选择平级部门部分
    handle(selectedItems) {
      this.selectedItems = selectedItems;
    },
    handleRisk(selectedItems) {
      // this.selectedItems = selectedItems;
@@ -528,4 +835,24 @@
    }
  }
}

.ant-radio-button-wrapper-checked {
  /* 自定义禁用样式 */
  /* 例如，修改文本颜色和背景颜色 */
  color: #fff;
  background-color: #1890ff;
}

/deep/.ant-select-disabled{
  color: @blackText;

  .ant-select-selection{
    background: #fff;

    .ant-select-selection__choice{
      color: @blackText;
      background: #fafafa;
    }
  }
}
</style>