opms_frontend/src/views/index/index.vue

<!--
 * @Author: wanglj 471442253@qq.com
 * @Date: 2022-12-13 10:28:33
 * @LastEditors: wanglj
 * @LastEditTime: 2023-03-02 11:47:39
 * @Description: file content
 * @FilePath: \opms_frontend\src\views\index\index.vue
-->
<template>
  <div class="index">
    <div class="left">
      <el-card class="board">
        <div slot="header" class="card-title">
          <span>个人看板</span>
          <div class="buttons">
            <el-button v-show="!editFlag" type="text" @click="editFlag = true">编辑布局</el-button>
            <el-button v-show="editFlag" type="text" @click="visible = true">编辑指标</el-button>
            <el-button v-show="editFlag" type="text" @click="saveLayout">保存布局</el-button>
          </div>
        </div>
        <el-row align="middle" :gutter="10" type="flex">
          <VueDragger
            v-model="privateBoard"
            :animation="500"
            :disabled="!editFlag"
            drag-class="drag"
            :force-fallback="true"
            ghost-class="ghost"
            handle=".mover">
            <el-col v-for="(item, index) in privateBoard" :key="index" class="mover" :span="6">
              <div class="board-container">
                <vab-icon class="icon" :icon="item.report_icon" />
                <div class="text">
                  <p class="num">{{ item.report_data }}</p>
                  <p>{{ item.report_name }}</p>
                </div>
                <vab-icon v-show="editFlag" class="close" icon="close-fill" @click.stop="handleDel(index)" />
              </div>
            </el-col>
          </VueDragger>
        </el-row>
      </el-card>
      <grid-layout
        :class="{ grid: editFlag }"
        :col-num="24"
        :is-draggable="editFlag"
        :is-mirrored="false"
        :is-resizable="editFlag"
        :layout.sync="layout"
        :margin="[10, 10]"
        :row-height="30"
        :use-css-transforms="true"
        :use-style-cursor="false"
        :vertical-compact="true"
        @layout-ready="layoutReadyEvent">
        <grid-item
          v-for="(item, index) in layout"
          :key="index"
          :h="item.h"
          :i="item.i"
          :w="item.w"
          :x="item.x"
          :y="item.y"
          @resized="handleResize">
          <h4>
            {{ item.name }}
            <!-- <div class="buttons">
              <el-select v-model="forecast" style="width: 120px">
                <el-option label="公司数据" value="1" />
              </el-select>
            </div> -->
            <div class="buttons">
              <el-radio-group
                v-show="!editFlag && (item.i == 20002 || item.i == 20003)"
                v-model="item.searchType"
                size="mini"
                @change="refresh(item, index)">
                <el-radio-button label="year">年</el-radio-button>
                <el-radio-button label="quarter">季度</el-radio-button>
                <el-radio-button label="month">月</el-radio-button>
              </el-radio-group>
              <el-radio-group
                v-show="!editFlag && (item.i == 20006 || item.i == 20007)"
                v-model="item.searchType"
                size="mini"
                @change="refresh(item, index)">
                <el-radio-button label="1">一季度</el-radio-button>
                <el-radio-button label="2">二季度</el-radio-button>
                <el-radio-button label="3">三季度</el-radio-button>
                <el-radio-button label="4">三季度</el-radio-button>
                <el-radio-button label="0">全年</el-radio-button>
              </el-radio-group>
              <el-button v-show="!editFlag" type="text" @click="refresh(item, index)">刷新</el-button>
              <vab-icon v-show="editFlag" icon="close-fill" @click="gridDel(index)" />
            </div>
          </h4>
          <div :id="item.i"></div>
        </grid-item>
      </grid-layout>
    </div>
    <div class="right">
      <el-card class="calendar">
        <div slot="header" class="card-title">
          <span>日程安排</span>
          <!-- <el-button style="padding: 0" type="text">添加</el-button> -->
        </div>
        <div class="week">
          <vab-icon
            icon="arrow-left-s-line"
            @click="
              date -= 7
              getDateList()
            " />
          <ul>
            <li
              v-for="(item, index) in list"
              :key="index"
              :class="{ active: item.day == day }"
              @click="dateClick(item)">
              <span>{{ dayList[item.day] }}</span>
              <span>{{ item.date }}</span>
            </li>
          </ul>
          <vab-icon
            icon="arrow-right-s-line"
            @click="
              date += 7
              getDateList()
            " />
        </div>
        <el-timeline>
          <el-timeline-item v-for="(activity, index) in activities" :key="index">
            <div class="detail" :class="{ active: activity.active }">
              <p class="time">
                {{ activity.schDate }}
                <!-- <el-button type="text">详情</el-button> -->
              </p>
              <p>{{ activity.schTitle }}</p>
            </div>
          </el-timeline-item>
        </el-timeline>
      </el-card>
      <el-card class="notice">
        <div slot="header" class="card-title">
          <span>公告</span>
          <div class="buttons">
            <el-button size="mini" @click="handleHistoryNotice">
              更多
              <i class="el-icon-arrow-right el-icon--right"></i>
            </el-button>
          </div>
        </div>
        <ul>
          <li v-for="(message, index) in messageList" :key="index" class="notice-list" @click="getNoticeInfo(message)">
            <p>
              <span>【{{ msgTypeFormat(message) }}】</span>
              {{ message.msgTitle }}
            </p>
            <p class="time">
              <vab-icon icon="time-line" />
              {{ parseTime(message.createdTime, '{y}-{m}-{d}') }}
            </p>
          </li>
        </ul>
      </el-card>
    </div>
    <!-- 编辑指标 -->
    <el-dialog title="编辑指标" :visible.sync="visible" @open="getBoardOptions">
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="看板数据" name="first">
          <ul class="add-board">
            <li v-for="(item, index) in addBoard" :key="index" @click="item.checked = !item.checked">
              <div class="board-container">
                <vab-icon class="icon" :icon="item.reportIcon" />
                <div class="text">
                  <p class="num">*</p>
                  <p>{{ item.reportName }}</p>
                </div>
                <vab-icon v-show="item.checked" class="check" icon="check-fill" />
              </div>
            </li>
          </ul>
        </el-tab-pane>
        <el-tab-pane label="销售指标" name="second">
          <ul class="add-board">
            <li v-for="(item, index) in addLayout" :key="index" @click="item.checked = !item.checked">
              <div class="board-container">
                <vab-icon class="icon" :icon="item.reportIcon" />
                <div class="text">
                  <p class="num">*</p>
                  <p>{{ item.reportName }}</p>
                </div>
                <vab-icon v-show="item.checked" class="check" icon="check-fill" />
              </div>
            </li>
          </ul>
        </el-tab-pane>
      </el-tabs>
      <template #footer>
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </template>
    </el-dialog>

    <!--通知公告详情-->
    <notice-details ref="notice-details" />
  </div>
</template>

<script>
  import NoticeDetails from '@/views/system/notice/details.vue'
  import * as echarts from 'echarts'
  import VueDragger from 'vuedraggable'
  import VueGridLayout from 'vue-grid-layout'
  import to from 'await-to-js'
  import indexApi from '@/api/index'
  import messageApi from '@/api/system/message'

  export default {
    name: 'Index',
    components: {
      NoticeDetails,
      VueDragger,
      GridLayout: VueGridLayout.GridLayout,
      GridItem: VueGridLayout.GridItem,
    },
    data() {
      return {
        editFlag: false,
        privateBoard: [
          // {
          //   report_name: '当前客户数（个）',
          //   id: 1,
          //   report_icon: 'account-circle-line',
          //   checked: false,
          // },
          // {
          //   report_name: '新增客户数（个）',
          //   id: 2,
          //   report_icon: 'user-add-line',
          //   checked: false,
          // },
          // {
          //   report_name: '跟进客户数（个）',
          //   id: 3,
          //   report_icon: 'account-pin-box-line',
          //   checked: false,
          // },
          // {
          //   report_name: '合同订单数（个）',
          //   id: 4,
          //   report_icon: 'account-circle-line',
          //   checked: false,
          // },
          // {
          //   report_name: '合同订单金额（元）',
          //   id: 5,
          //   report_icon: 'exchange-cny-fill',
          //   checked: false,
          // },
          // {
          //   report_name: '新增机会数（个）',
          //   id: 6,
          //   report_icon: 'mail-add-line',
          //   checked: false,
          // },
          // {
          //   report_name: '新增机会金额（元）',
          //   id: 7,
          //   report_icon: 'exchange-cny-fill',
          //   checked: false,
          // },
          // {
          //   report_name: '采购合同数（个）',
          //   id: 8,
          //   report_icon: 'account-circle-line',
          //   checked: false,
          // },
          // {
          //   report_name: '采购金额（元）',
          //   id: 9,
          //   report_icon: 'money-cny-circle-line',
          //   checked: false,
          // },
          // {
          //   report_name: '应收未收（元）',
          //   id: 10,
          //   report_icon: 'money-cny-circle-line',
          //   checked: false,
          // },
          // {
          //   report_name: '计划付款（元）',
          //   id: 11,
          //   report_icon: 'money-cny-circle-line',
          //   checked: false,
          // },
          // {
          //   report_name: '当前库存成本（元）',
          //   id: 12,
          //   report_icon: 'money-cny-circle-line',
          //   checked: false,
          // },
        ],
        addBoard: [],
        addLayout: [],
        visible: false,
        layout: [],
        day: -1,
        list: [],
        activities: [],
        charts: [],
        activeName: 'first',
        forecast: '1',
        date: 0,
        dayList: ['日', '一', '二', '三', '四', '五', '六'],
        messageList: [],
        msgTypeOptions: [],
      }
    },
    mounted() {
      this.init()
      this.getDateList()
      this.getOptions()
      this.handleNoticeList()
      this.$baseEventBus.$on('receivedMessage', () => {
        console.log('---------------通知更新公告----------------')
        this.handleNoticeList()
      })
      window.addEventListener('resize', this.handleResize)
    },
    beforeDestroy() {
      window.removeEventListener('resize', this.handleResize)
    },
    methods: {
      async getHomeNumReportData() {
        let ids = this.privateBoard.map((item) => {
          return item.id
        })
        const {
          data: { num_report_response },
        } = await indexApi.getHomeNumReportData({ ids: Array.from(new Set(ids)) })
        let privateBoardData = []
        this.privateBoard.forEach((item, index) => {
          num_report_response.forEach((val) => {
            if (item.id === val.id) {
              this.privateBoard[index].report_data = val.data
              privateBoardData.push(this.privateBoard[index])
            }
          })
        })
        this.privateBoard = privateBoardData
      },
      // 布局信息
      async init() {
        const [err, res] = await to(indexApi.getHomeReport({ module_code: 'HomePage' }))
        if (err) return
        const obj = JSON.parse(res.data.configInfo)
        this.privateBoard = obj.num_report_config || []
        if (obj.data_report_config && obj.data_report_config.length) {
          this.layout = obj.data_report_config.map((item) => {
            return {
              x: item.location_x,
              y: item.location_y,
              i: item.id,
              desc: item.report_desc,
              name: item.report_name,
              type: item.report_type,
              h: item.size_h,
              w: item.size_w,
              searchType: item.id != 20006 && item.id != 20007 ? 'year' : '0',
            }
          })
        }
        await this.$nextTick()
        this.initChart()
        this.getHomeNumReportData()
      },
      initChart() {
        // console.log(this.layout, 'layout')
        this.charts = []
        for (let i = 0; i < this.layout.length; i++) {
          this.getChartSize(this.layout[i].i)
          if (this.layout[i].i == 20006 || this.layout[i].i == 20007) {
            this.drawGoalChart(this.layout[i].i, i)
          } else {
            this.drawChart(this.layout[i].i, i)
          }
        }
      },
      //刷新
      refresh(item, index) {
        this.charts[index].dispose()
        if (item.i == 20006 || item.i == 20007) {
          this.drawGoalChart(item.i, index, item.searchType)
        } else {
          this.drawChart(item.i, index, item.searchType)
        }
      },
      getChartSize(id) {
        // console.log(id, 'id')
        const bar = document.getElementById(id)
        // console.log(bar, 'bar')
        bar.style.height = bar.parentNode.clientHeight - 65 + 'px'
        bar.style.width = bar.parentNode.clientWidth + 'px'
      },
      async drawChart(id, i, searchType) {
        const chartBar = echarts.init(document.getElementById(id))
        const [err, res] = await to(indexApi.getHomeDataReportData({ id, Params: { searchType } }))
        if (err) return
        console.log(res.data.data)
        const option = {
          grid: {
            bottom: 30,
            top: 40,
            right: 10,
            left: 10,
            containLabel: true,
          },
          tooltip: {
            trigger: 'axis',
          },
          xAxis: [
            {
              type: 'category',
              data: res.data.data.xData,
              axisTick: {
                alignWithLabel: true,
              },
            },
          ],
          yAxis: [
            {
              type: 'value',
              name: '金额(元)',
              alignTicks: true,
            },
            {
              type: 'value',
              name: res.data.id == 20000 || res.data.id == 20002 ? '签约完成率(%)' : '回款率(%)',
              min: 0,
              max: 100,
              alignTicks: true,
              interval: 20,
              axisLabel: {
                formatter: '{value} %',
              },
            },
          ],
          series: [
            {
              name: '销售指标',
              type: 'bar',
              data: res.data.data.yDataTarget,
            },
            {
              name: '销售额度',
              type: 'bar',
              data: res.data.data.yDataReal,
            },
            {
              name: '回款率',
              type: 'line',
              yAxisIndex: 1,
              tooltip: {
                valueFormatter: function (value) {
                  return value + '%'
                },
              },
              data: res.data.data.percentData,
            },
          ],
        }
        chartBar.setOption(option)
        this.charts[i] = chartBar
      },
      async drawGoalChart(id, i, searchType) {
        const chartBar = echarts.init(document.getElementById(id))
        const [err, res] = await to(
          indexApi.getHomeDataReportData({
            id,
            Params: {
              year: new Date().getFullYear(),
              quarter: parseInt(searchType),
            },
          })
        )
        if (err) return
        console.log(res.data.data)
        const option = {
          grid: {
            bottom: 30,
            top: 40,
            right: 10,
            left: 10,
            containLabel: true,
          },
          tooltip: {
            trigger: 'axis',
          },
          xAxis: [
            {
              type: 'category',
              data: res.data.data.xData,
              axisTick: {
                alignWithLabel: true,
              },
            },
          ],
          yAxis: [
            {
              type: 'value',
              name: '金额(万元)',
              alignTicks: true,
            },
          ],
          series: [
            {
              name: id == 20006 ? '销售指标' : '回款指标',
              type: 'bar',
              data: res.data.data.yDataTarget,
            },
            {
              name: id == 20006 ? '销售额度' : '回款额度',
              type: 'bar',
              data: res.data.data.yDataReal,
            },
          ],
        }
        chartBar.setOption(option)
        this.charts[i] = chartBar
      },
      initFunnel() {
        this.chartFunnel = echarts.init(document.getElementById('funnel'))
        const option = {
          tooltip: {
            trigger: 'item',
            formatter: '{b} : {d}%',
          },
          label: {
            formatter: '{b} {c}',
          },
          labelLine: {
            show: true,
          },
          series: [
            {
              name: '销售漏斗',
              type: 'funnel',
              top: 10,
              bottom: 10,
              minSize: '20%',
              maxSize: '100%',
              label: {
                position: 'inside',
                formatter: '{c}%',
                color: '#fff',
              },
              data: [
                { value: 500, name: '初步洽谈' },
                { value: 300, name: '深入沟通' },
                { value: 250, name: '产品报价' },
                { value: 150, name: '成交项目' },
                { value: 120, name: '流失项目' },
              ],
            },
            {
              name: '销售漏斗',
              type: 'funnel',
              top: 10,
              bottom: 10,
              minSize: '20%',
              maxSize: '100%',
              z: 1,
              data: [
                { value: 500, name: '初步洽谈' },
                { value: 300, name: '深入沟通' },
                { value: 250, name: '产品报价' },
                { value: 150, name: '成交项目' },
                { value: 120, name: '流失项目' },
              ],
            },
          ],
        }
        this.chartFunnel.setOption(option)
      },
      async handleResize() {
        await this.$nextTick()
        for (let i = 0; i < this.layout.length; i++) {
          this.getChartSize(this.layout[i].i)
          this.charts[i].resize()
        }
      },
      layoutReadyEvent() {
        this.initChart()
      },
      handleDel(index) {
        this.privateBoard.splice(index, 1)
      },
      gridDel(index) {
        this.layout.splice(index, 1)
      },
      async save() {
        const board = this.addBoard.filter((item) => item.checked == true)
        this.privateBoard = []
        for (const item of board) {
          this.privateBoard.push({
            report_name: item.reportName,
            id: item.id,
            report_icon: item.reportIcon,
          })
        }
        const layout = this.addLayout.filter((item) => item.checked == true)
        for (const item of layout) {
          const index = this.layout.findIndex((each) => each.i == item.id)
          if (index > -1) continue
          this.layout.push({
            x: 0,
            y: 0,
            w: 12,
            h: 10,
            i: item.id,
            type: 'bar',
            name: item.reportName,
            searchType: 'year',
          })
        }
        this.visible = false
        await this.$nextTick()
        this.initChart()
      },
      async saveLayout() {
        this.editFlag = false
        const params = {
          module_code: 'HomePage',
          data_report_config: [],
          num_report_config: this.privateBoard,
        }
        params.data_report_config = this.layout.map((item) => {
          return {
            location_x: item.x,
            location_y: item.y,
            id: item.i,
            report_desc: item.desc,
            report_name: item.name,
            report_type: item.type,
            size_h: item.h,
            size_w: item.w,
          }
        })
        const [err, res] = await to(indexApi.setUpHomeConfig(params))
        if (err) return
        this.$message.success(res.msg)
        this.getHomeNumReportData()
      },
      getDateList() {
        const now = new Date()
        const date = new Date(now.getTime() + this.date * 1000 * 60 * 60 * 24)
        const day = date.getDay()
        this.day = day
        this.list = new Array(7)
        for (let i = 0; i < this.list.length; i++) {
          this.list[i] = {}
          const flag = -(day - i)
          const time = new Date(date.getTime() + flag * 1000 * 60 * 60 * 24)
          this.list[i].time = new Date(time)
          this.list[i].day = this.list[i].time.getDay()
          this.list[i].date = this.list[i].time.getDate()
          if (flag == 0) this.dateClick(this.list[i])
        }
      },
      async dateClick(item) {
        this.day = item.day
        const [err, res] = await to(indexApi.getSchedule({ schDate: this.parseTime(item.time) }))
        if (err) return
        this.activities = res.data.list || []
        const date = new Date().getTime()
        this.activities.forEach((item) => {
          const start = new Date(item.schDate).getTime()
          const end = new Date(item.schDateEnd).getTime()
          item.active = start <= date && end >= date
        })
      },
      async getBoardOptions() {
        this.activeName = 'first'
        const [err, res] = await to(indexApi.getRoleReportList())
        if (err) return
        console.log(res)
        const arr = res.data.list || []
        arr.forEach((item) => (item.checked = false))
        this.addLayout = arr.filter((item) => item.reportType == 20)
        this.addLayout.forEach((item) => {
          const index = this.layout.findIndex((each) => each.i == item.id)
          if (index > -1) item.checked = true
        })
        this.addBoard = arr.filter((item) => item.reportType == 10)
        this.addBoard.forEach((item) => {
          const index = this.privateBoard.findIndex((each) => each.id == item.id)
          if (index > -1) item.checked = true
        })
      },
      getOptions() {
        this.getDicts('sys_msg_type').then((response) => {
          this.msgTypeOptions = response.data.values || []
        })
      },
      msgTypeFormat(row) {
        return this.selectDictLabel(this.msgTypeOptions, row.msgType)
      },
      handleHistoryNotice() {
        this.$router.push({
          name: 'NoticeHistory',
        })
      },
      async handleNoticeList() {
        const { data } = await messageApi.getList({ msgType: '10' })
        this.messageList = data.list
      },
      getNoticeInfo(row) {
        this.$refs['notice-details'].open(row.id)
      },
    },
  }
</script>

<style lang="scss" scoped>
  $base: '.index';
  #{$base} {
    display: flex;
    background: #f6f8f9;
    height: calc(100vh - 60px - 12px * 2 - 40px);

    .el-card {
      margin-bottom: 12px;
      border-radius: 4px;
    }

    .card-title {
      font-size: 16px;
      font-weight: 700;
      line-height: 22px;
      height: 22px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      i {
        font-weight: normal;
        cursor: pointer;

        &:hover {
          color: #1d66dc;
        }
      }
    }

    .left {
      flex: 1;
      margin-right: 10px;
      overflow-x: hidden;
      overflow-y: auto;
      .buttons {
        .el-radio-group {
          margin-right: 4px;
        }
      }
      .board {
        display: flex;
        flex-direction: column;
        margin-bottom: 2px;

        ::v-deep .el-card__body {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
        }

        .el-row {
          height: 100%;
          flex-wrap: wrap;

          > div,
          > div span {
            display: flex;
            height: 100%;
            align-items: center;
            flex-wrap: wrap;
            width: 100%;
          }

          .ghost {
            background: #ecf5ff;
          }

          .drag {
            background: pink;
          }

          .el-col {
            display: flex;
            height: 60px;
            margin: 20px 0;
            user-select: none;
            cursor: pointer;
          }
        }
      }
    }

    .right {
      width: 450px;

      .detail {
        height: 64px;
        border: 1px solid rgb(235, 237, 240);
        border-radius: 4px;

        &.active {
          border: 1px solid #d7e8f4;
          background: #f7fbfe;

          p:last-child {
            font-weight: bold;
          }
        }

        p {
          height: 32px;
          line-height: 32px;
          padding: 0 10px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .time {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
      }

      .calendar {
        height: 60%;
        border-radius: 4px;
        display: flex;
        flex-direction: column;

        ::v-deep .el-card__body {
          flex: 1;
          overflow: hidden;
        }

        .week {
          height: 48px;
          display: flex;
          align-items: center;

          ul {
            flex: 1;
            display: flex;
            height: 48px;

            li {
              flex: 1;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              user-select: none;
              cursor: pointer;

              &.active span:last-child {
                background: rgb(34, 76, 218);
                color: #fff;
              }

              span {
                flex: 1;
                height: 24px;
                width: 24px;
                text-align: center;
                line-height: 24px;
              }

              span:first-child {
                color: rgb(150, 151, 153);
              }

              span:last-child {
                color: rgb(50, 50, 51);
                border-radius: 4px;
              }
            }
          }

          i {
            height: 24px;
            width: 24px;
            font-size: 24px;
            color: rgb(100, 101, 102);
            background: rgb(247, 248, 250);
            border-radius: 4px;
            cursor: pointer;
            transition: 0.3s all;

            &:hover {
              color: #fff;
              background: rgb(100, 101, 102);
            }
          }
        }

        .el-timeline {
          margin-top: 20px;
          padding-top: 4px;
          height: calc(100% - 72px);
          overflow: auto;

          .el-timeline-item {
            padding-bottom: 10px;
          }
        }
      }

      .notice {
        height: calc(40% - 12px);
        display: flex;
        flex-direction: column;

        ::v-deep .el-card__body {
          flex: 1;
          overflow: auto;
        }

        .notice-list {
          display: flex;
          justify-content: space-between;
          height: 40px;
          line-height: 40px;
          border-bottom: 1px solid #ebeef5;

          p:first-child {
            flex: 1;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          span {
            font-weight: bold;
          }
        }
      }
    }
  }

  ::v-deep .el-timeline-item__tail {
    border-left: 2px dashed #e4e7ed;
  }

  // #funnel,
  // #bar {
  //   height: 100%;
  // }
  .vue-grid-layout {
    margin-left: -10px;
    margin-right: -10px;

    &.grid {
      background: linear-gradient(90deg, #fff 10px, transparent 0), linear-gradient(#fff 10px, transparent 0);
      background-size: calc((100% - 10px) / 24) 40px;
      background-position: top 0px left 0px;
    }
  }

  .vue-grid-item {
    background: #fff;
    border: 1px solid #ebeef5;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    overflow: hidden;

    h4 {
      line-height: 22px;
      height: 54px;
      font-size: 16px;
      padding: 16px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #ebeef5;

      i {
        font-size: 24px;
        font-weight: bold;
        cursor: pointer;

        &:hover {
          color: #1d66dc;
        }
      }
    }
  }

  .board-container {
    display: flex;
    height: 60px;
    border: 1px solid #eee;
    align-items: center;
    border-radius: 8px;
    padding: 0 10px;
    flex: 1;
    cursor: pointer;
    user-select: none;

    &:hover {
      box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    }

    .icon {
      font-size: 32px;
      border-radius: 4px;
      width: 40px;
      height: 40px;
      color: #1d66dc;
      background: #ecf5ff;

      &.ri-money-cny-circle-line {
        color: #e6a23c;
        background: #fdf6ec;
      }

      &.ri-exchange-cny-fill {
        color: #f56c6c;
        background: #fef0f0;
      }
    }

    .full-icon {
      flex: 1;
      font-size: 32px;
    }

    .close {
      font-size: 32px;
      transition: 0.3s all;

      &:hover {
        color: #1d66dc;
      }
    }

    .check {
      font-size: 32px;
      color: #67c23a;
    }

    .text {
      padding-left: 10px;
      color: #9499a0;
      flex: 1;

      .num {
        font-size: 22px;
        font-weight: bold;
        color: #333;
      }
    }
  }

  .add-board {
    height: 500px;
    overflow: auto;

    li + li {
      margin-top: 10px;
    }
  }
</style>