<template>
  <div class="AppPdDv">
    <div class="left">
      <div class="appPdDv-title">企微数据库</div>
      <div class="tab">
        <div class="tab-item" :class="[leftIndex === 0 ? 'active' : '']" @click="leftIndex = 0">群员统计</div>
        <div class="tab-item" :class="[leftIndex === 1 ? 'active' : '']" @click="leftIndex = 1">会话统计</div>
      </div>
      <div class="tab-content">
        <div class="tab-content__item" v-show="leftIndex === 0">
          <div class="item">
            <div class="title">居民群统计</div>
            <div class="item-top jmhy">
              <div class="item-top__item">
                <h2>居民群</h2>
                <div class="bottom">
                  <span>{{ groupNumber.groupSum || 0 }}</span>
                </div>
              </div>
              <div class="item-top__item">
                <h2>群成员</h2>
                <div class="bottom">
                  <span>{{ groupNumber.totalSum || 0 }}</span>
                </div>
              </div>
              <div class="item-top__item">
                <h2>昨日新增</h2>
                <div class="bottom">
                  <span>{{ groupNumber.increaseSum || 0 }}</span>
                  <img src="https://cdn.cunwuyun.cn/dvcp/dv/pddv/arrow-rise.png" />
                </div>
              </div>
              <div class="item-top__item">
                <h2>昨日流失</h2>
                <div class="bottom">
                  <span>{{ groupNumber.decreaseSum || 0 }}</span>
                  <img src="https://cdn.cunwuyun.cn/dvcp/dv/pddv/bottom.png" />
                </div>
              </div>
            </div>
            <div class="chart2" style="width: 100%; height: 200px;"></div>
          </div>
          <div class="item">
            <div class="title">组织统计</div>
            <div class="item-top jmq">
              <div class="header">
                <span>居民群</span>
                <span>组织</span>
                <span>群成员</span>
              </div>
              <div class="item-top__list">
                <div class="item" v-for="(item, index) in list" :key="index">
                  <div class="left">
                    <span>{{ item['居民群'] }}</span>
                    <div class="rate-wrapper">
                      <i class="rate" :style="{width: item.rate1}"></i>
                    </div>
                  </div>
                  <h2 :title="item.girdName">{{ item.girdName }}</h2>
                  <div class="right">
                    <div class="rate-wrapper">
                      <i class="rate" :style="{width: item.rate2}"></i>
                    </div>
                    <span>{{ item['群成员'] }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="tab-content__item" v-show="leftIndex === 1">
          <div class="item">
            <div class="title">消息回复率</div>
            <div class="item-top DonutChart-wrapper">
              <DonutChart v-if="leftIndex === 1" :ratio="replyPercentage ? replyPercentage.replyPercentage : 0" text="昨日"></DonutChart>
              <DonutChart v-if="leftIndex === 1" :ratio="replyPercentage ? replyPercentage.weekSum : 0" text="近7天"></DonutChart>
              <DonutChart v-if="leftIndex === 1" :ratio="replyPercentage ? replyPercentage.monthSum : 0" text="近1个月"></DonutChart>
            </div>
          </div>
          <div class="item">
            <div class="title">单聊统计</div>
            <div class="item-top dl">
              <div class="item-top__item" @click="dlIndex = 0" :class="[dlIndex === 0 ? 'active' : '']">
                <h2>单聊会话</h2>
                <p>{{ userChatNumber ? userChatNumber.chatCnt : 0 }}</p>
              </div>
              <div class="item-top__item" @click="dlIndex = 1" :class="[dlIndex === 1 ? 'active' : '']">
                <h2>单聊消息</h2>
                <p>{{ userChatNumber ? userChatNumber.messageCnt : 0 }}</p>
              </div>
            </div>
            <div class="chart3" v-show="dlIndex === 0" style="width: 336px; height: 200px;"></div>
            <div class="chart4" v-show="dlIndex === 1" style="width: 336px; height: 200px;"></div>
          </div>
          <div class="item item-tags">
            <div class="title">群聊统计</div>
            <div class="item-top ql">
              <div class="item-top__item" @click="qlIndex = 0" :class="[qlIndex === 0 ? 'active' : '']">
                <h2>活跃群聊</h2>
                <p>{{ groupChatNumber ? groupChatNumber.chatHasMsg : 0 }}</p>
              </div>
              <div class="item-top__item" @click="qlIndex = 1" :class="[qlIndex === 1 ? 'active' : '']">
                <h2>活跃群成员</h2>
                <p>{{ groupChatNumber ? groupChatNumber.memberHasMsg : 0 }}</p>
              </div>
              <div class="item-top__item" @click="qlIndex = 2" :class="[qlIndex === 2 ? 'active' : '']">
                <h2>群聊消息</h2>
                <p>{{ groupChatNumber ? groupChatNumber.msgTotal : 0 }}</p>
              </div>
            </div>
            <div class="chart5" v-show="qlIndex === 0" style="width: 336px; height: 200px;"></div>
            <div class="chart6" v-show="qlIndex === 1" style="width: 336px; height: 200px;"></div>
            <div class="chart7" v-show="qlIndex === 2" style="width: 336px; height: 200px;"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="middle">
      <div class="top">
        <YyxGrid :instance="instance" @nodeClick="onNodeClick"></YyxGrid>
      </div>
      <div class="bottom">
        <div class="bottom-title">
          <img src="https://cdn.cunwuyun.cn/dvcp/dv/pddv/icon.png" />
          <h2>居民群动态</h2>
        </div>
        <div class="bottom-list">
          <div class="item" v-for="item in dynamicList" :key="item.id">
            <i>{{ item.createTime }}</i>
            <em>{{ item.logDescription }}</em>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="appPdDv-title">居民数据</div>
      <div class="right-item top-wrapper">
        <div class="title">居民群</div>
        <div class="item-wrapper">
          <div class="item-top__item">
            <h2>{{ girdInfo['村民警员'] || 0 }}</h2>
            <p>网格员</p>
          </div>
          <div class="item-top__item">
            <h2>{{ girdInfo['居民群'] || 0 }}</h2>
            <p>居民群</p>
          </div>
          <div class="item-top__item">
            <h2>{{ girdInfo['群成员'] || 0 }}</h2>
            <p>群成员</p>
          </div>
          <div class="item-top__item">
            <h2>{{ girdInfo['居民好友'] || 0 }}</h2>
            <p>居民好友</p>
          </div>
        </div>
      </div>
      <div class="right-item middle-wrapper">
        <div class="title">分类统计</div>
        <div class="item-table">
          <div class="left">
            <div class="chart10" style="width: 100%; height: 240px;"></div>
            <div class="left-text">
              <h2>{{ total || 0 }}</h2>
              <span>总数</span>
            </div>
          </div>
          <div class="right">
            <div class="right-item" v-for="(item, index) in typeList" :key="index">
              <div class="right-item__left">
                <i :style="{background: colorList[index]}"></i>
                <span>{{ item.name }}</span>
              </div>
              <p>{{ item.value }}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="right-item bottom-wrapper">
        <div class="title">居民群统计</div>
        <div class="item-table">
          <div class="item-table__header">
            <span style="width: 110px">居民群</span>
            <span style="flex: 1; text-align: center;">群主</span>
            <span style="width: 60px; text-align: right;">群人数</span>
          </div>
          <div class="item-table__body">
            <div class="item-table__item" v-for="(item, index) in gridList" :key="index">
              <span style="width: 110px" :title="item.name">{{ item.name || '未命名群聊' }}</span>
              <span style="flex: 1; text-align: center;">{{ item.ownerName }}</span>
              <span style="width: 60px; text-align: right;">{{ item.memberCount }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
  import DonutChart from './components/DonutChart'
  import YyxGrid from './components/YyxGrid'


  export default {
    name: 'AppYyxDv',
    label: '沂源县大屏',

    props: {
      instance: Function,
      dict: Object,
    },

    components: {
      DonutChart,
      YyxGrid
    },

    data () {
      return {
        leftIndex: 0,
        dlIndex: 0,
        qlIndex: 0,
        currGirdName: '',
        girdInfo: {},
        gridList: [],
        userChatNumber: {},
        residentInfo: {},
        tagInfo: {},
        groupNumber: {},
        replyPercentage: {},
        groupChatNumber: {},
        dynamicList: [],
        total: 0,
        typeList: [],
        list: [],
        isChoose: false,
        colorList: ['#2891FF', '#2AF0F8', '#61FDB9', '#FFBA68', '#FFBA68', '#FD6C39']
      }
    },

    created () {
      this.getInfo()
      this.getGridInfo({})
    },

    mounted () {
      document.title = '沂源县大屏'
      this.$nextTick(() => {
        if (document.querySelector('.AiDvWrapper .viewPanel')) {
          document.querySelector('.AiDvWrapper .viewPanel').style.backgroundImage = 'url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/bg.png)'
        }
      })
    },

    methods: {
      onNodeClick (e) {
        this.getGridInfo(e)
      },
      initChart5 (el, data) {
        var chartDom = document.querySelector(el)
        var myChart = echarts.init(chartDom)
        var option = {
          color: ['#2891FF', '#2AF0F8', '#61FDB9', '#FFBA68', '#DBE8FF', '#FD6C39'],
          tooltip: {
            trigger: 'item'
          },
          grid: {
            top: '0%',
            left: '0%',
            right: '0%',
            bottom: '0%',
            height: 230,
            containLabel: true
          },
          series: [
            {
              name: '分类统计',
              type: 'pie',
              radius: ['50%', '70%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 0,
                borderColor: '#030D1C',
                borderWidth: 3
              },
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: false,
                  fontSize: '20',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: data
            }
          ]
        }

        option && myChart.setOption(option)
      },

      getInfo () {
        this.instance.post(`app/appintegraluser/userTotalIntegralSort`).then(res => {
          if (res.code === 0) {
            this.pointList = res.data
          }
        })
        this.instance.post(`app/appintegraluser/suffixWeekIntegralSort`).then(res => {
          if (res.code === 0) {
            this.rankList = res.data
          }
        })
        // this.instance.post(`/app/wxgroupstatistic/getCustommerNumber`).then(res => {
        //   if (res.code === 0) {
        //     this.residentInfo = res.data['居民统计']
        //     this.initLineChart('.chart1', {
        //       x: res.data['居民好友数'].map(v => v.month),
        //       value: res.data['居民好友数'].map(v => v.totalNumber),
        //       name: '居民好友'
        //     })
        //   }
        // })
        this.instance.post(`/app/wxgroupstatistic/replyPercentage`).then(res => {
          if (res.code === 0) {
            this.replyPercentage = res.data
          }
        })
        this.instance.post(`/app/appUserOperation/list?size=10000`).then(res => {
          if (res.code === 0) {
            this.dynamicList = res.data.records
          }
        })
        this.instance.post(`/app/wxgroupstatistic/getGroupNumber`).then(res => {
          if (res.code === 0) {
            this.groupNumber = res.data['居民群统计']
            this.initLineChart('.chart2', {
              x: res.data['群成员数'].map(v => v.month),
              value: res.data['群成员数'].map(v => v.totalNumber),
              name: '群成员'
            })
          }
        })
        this.instance.post(`/app/wxgroupstatistic/getTagNumber`).then(res => {
          if (res.code === 0) {
            this.tagInfo = res.data
          }
        })
        this.instance.post(`/app/wxgroupstatistic/getUserChatNumber`).then(res => {
          if (res.code === 0) {
            this.userChatNumber = res.data['单聊总和']
            this.initBarChart('.chart4', {
              x: res.data['条形统计'].map(v => v.dateDay),
              value: res.data['条形统计'].map(v => v.messageCnt),
              name: '单聊消息'
            }, [
              {offset: 0, color: 'rgba(66, 255, 254, 1)'},
              {offset: 1, color: 'rgba(37, 255, 246, 0.2)'}
            ])
            this.initBarChart('.chart3', {
              x: res.data['条形统计'].map(v => v.dateDay),
              value: res.data['条形统计'].map(v => v.chatCnt),
              name: '单聊会话'
            }, [
              {offset: 0, color: 'rgba(66, 187, 255, 1)'},
              {offset: 1, color: 'rgba(37, 143, 255, 0.2)'}
            ])
          }
        })
        this.instance.post(`/app/wxgroupstatistic/getgroupChatNumber`).then(res => {
          this.groupChatNumber = res.data['群聊总和']
          if (res.code === 0) {
            this.initBarChart('.chart5', {
              x: res.data['条形统计'].map(v => v.dateDay),
              value: res.data['条形统计'].map(v => v.chatHasMsg),
              name: '活跃群聊'
            }, [
              {offset: 0, color: 'rgba(66, 255, 254, 1)'},
              {offset: 1, color: 'rgba(66, 255, 254, 0.2)'}
            ])
            this.initBarChart('.chart6', {
              x: res.data['条形统计'].map(v => v.dateDay),
              value: res.data['条形统计'].map(v => v.memberHasMsg),
              name: '活跃群成员'
            }, [
              {offset: 0, color: 'rgba(255, 190, 66, 1)'},
              {offset: 1, color: 'rgba(255, 190, 66, 0.2)'}
            ])
            this.initBarChart('.chart7', {
              x: res.data['条形统计'].map(v => v.dateDay),
              value: res.data['条形统计'].map(v => v.msgTotal),
              name: '群聊消息'
            }, [
              {offset: 0, color: 'rgba(66, 187, 255, 1)'},
              {offset: 1, color: 'rgba(37, 143, 255, 0.2)'}
            ])
          }
        })
      },

      getGridInfo (e) {
        if (e.level === 2 && !this.isChoose) {
          this.isChoose = true
        }
        if (e.level === 4) return

        if (e.level !== 3) {
          this.instance.post(`/app/qxn_appgirdinfo/branchStatistics?girdId=${e.id || ''}`).then(res => {
            if (res.code === 0) {
              if (res.data && res.data.length) {
                const list = res.data.map(item => {
                  return {
                    ...item
                  }
                })

                const v1 = Math.max(...list.map(v => v['居民群']))
                const v2 = Math.max(...list.map(v => v['群成员']))

                this.list = list.map(v => {
                  return {
                    ...v,
                    rate1: v1 === 0 ? '0%' : (v['居民群'] / v1 * 100).toFixed(0) + '%',
                    rate2: v2 === 0 ? '0%' : (v['群成员'] / v2 * 100).toFixed(0) + '%'
                  }
                })
              } else {
                this.list = []
              }
            }
          })
        }

        this.instance.post(`/app/qxn_appgirdinfo/policeWork?girdId=${e.id || ''}`).then(res => {
          if (res.code === 0) {
            this.girdInfo = res.data.countInfo
            this.gridList = res.data.groupList
            if (res.data.typeInfo.length) {
              this.total = res.data.typeInfo.map(v => v.c).reduce((x, y) => x + y)
              this.typeList = res.data.typeInfo.map(v => {
                return {
                  value: v.c,
                  name: v.type
                }
              })
              this.initChart5('.chart10', this.typeList)
            } else {
              this.total = 0
              this.typeList = []
            }
          }
        })
      },

      initLineChart (el, data) {
        var chartDom = document.querySelector(el)
        var myChart = echarts.init(chartDom)
        var option = {
          xAxis: {
            type: 'category',
            data: data.x,
            axisTick: {
              show: false
            },
            axisLabel: {
              textStyle: {
                color: '#aeacaf'
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#fff'
              }
            },
          },
          yAxis: {
            type: 'value',
            nameGap: 23,
            minInterval: 1,
            splitLine: {lineStyle: {color: 'rgba(83, 165, 175, 0.6)', type: 'dashed'}},
            axisLabel: {
              textStyle: {
                color: '#aeacaf'
              }
            },
            axisPointer: {show: false}
          },
          color: [
            {
              type: 'linear',
              x: 0,
              x2: 0,
              y: 0,
              y2: 1,
              colorStops: [
                {offset: 0, color: 'rgba(47, 211, 241, 1)'},
                {offset: 1, color: 'rgba(47, 211, 241, 0)'}
              ]
            }
          ],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            top: '14%',
            left: '1%',
            right: '0%',
            bottom: '0%',
            containLabel: true
          },
          series: [
            {
              data: data.value,
              type: 'line',
              label: {
                show: false,
                position: 'top',
                color: '#fff'
              },
              name: data.name,
              areaStyle: {},
              barWidth: 16,
              barCategoryGap: 40,
              itemStyle: {}
            }
          ]
        }

        option && myChart.setOption(option)
      },

      initBarChart (el, data, color) {
        var chartDom = document.querySelector(el)
        var myChart = echarts.init(chartDom)
        var option

        option = {
          xAxis: {
            type: 'category',
            data: data.x,
            axisTick: {
              show: false
            },
            axisLabel: {
              textStyle: {
                color: '#aeacaf'
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#fff'
              }
            },
          },
          yAxis: {
            type: 'value',
            nameGap: 23,
            minInterval: 1,
            splitLine: {lineStyle: {color: 'rgba(83, 165, 175, 0.6)', type: 'dashed'}},
            axisLabel: {
              textStyle: {
                color: '#aeacaf'
              }
            },
            axisPointer: {show: false}
          },
          color: [
            {
              type: 'linear',
              x: 0,
              x2: 0,
              y: 0,
              y2: 1,
              colorStops: color
            }
          ],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            top: '14%',
            left: '1%',
            right: '0%',
            bottom: '0%',
            containLabel: true
          },
          series: [
            {
              data: data.value,
              name: data.name,
              type: 'bar',
              label: {
                show: false,
                position: 'top',
                color: '#fff'
              },
              barWidth: 8,
              barCategoryGap: 40,
              itemStyle: {}
            }
          ]
        }

        option && myChart.setOption(option)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .AppPdDv {
    display: flex;
    height: 100%;
    padding-top: 24px;
    background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/bg.png);
    background-size: 100% 100%;

    ::-webkit-scrollbar {
      width: 6px;
    }

    ::-webkit-scrollbar-track {
      border-radius: 5px;
      background: rgba(93, 163, 255, 0.1);
    }

    ::-webkit-scrollbar-thumb {
      border-radius: 5px;
      background: rgba(173, 208, 255, 0.5);
    }

    * {
      box-sizing: border-box;
    }

    .DonutChart-wrapper {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 84px;
      margin-bottom: 20px;
    }

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

      .item-top__item {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 164px;
        height: 52px;
        line-height: 1;
        cursor: pointer;
        user-select: none;
        background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/dl3.png);
        background-size: 100% 100%;

        h2 {
          margin-bottom: 4px;
          color: #4488FB;
          font-size: 12px;
        }

        &:nth-of-type(2) {
          background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/dl4.png);
          background-size: 100% 100%;

          h2 {
            color: #2AB7D1;
          }
        }

        p {
          font-size: 14px;
          color: #fff;
          font-weight: bold;
          font-style: oblique;
        }

        &.active {
          &:nth-of-type(1) {
            background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/dl1.png);
            background-size: 100% 100%;

            h2 {
              color: #fff;
            }
          }

          &:nth-of-type(2) {
            background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/dl2.png);
            background-size: 100% 100%;

            h2 {
              color: #fff;
            }
          }
        }
      }
    }

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

      .item-top__item {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 107px;
        height: 52px;
        line-height: 1;
        cursor: pointer;
        user-select: none;
        background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/ql4.png);
        background-size: 100% 100%;

        h2 {
          margin-bottom: 4px;
          color: #2AB7D1;
          font-size: 12px;
        }

        &:nth-of-type(2) {
          background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/ql5.png);
          background-size: 100% 100%;

          h2 {
            color: #FFD458;
          }
        }

        &:nth-of-type(3) {
          background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/ql6.png);
          background-size: 100% 100%;

          h2 {
            color: #4488FB;
          }
        }

        p {
          font-size: 14px;
          color: #fff;
          font-weight: bold;
          font-style: oblique;
        }

        &.active {
          &:nth-of-type(1) {
            background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/ql1.png);
            background-size: 100% 100%;

            h2 {
              color: #fff;
            }
          }

          &:nth-of-type(2) {
            background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/ql2.png);
            background-size: 100% 100%;

            h2 {
              color: #fff;
            }
          }

          &:nth-of-type(3) {
            background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/ql3.png);
            background-size: 100% 100%;

            h2 {
              color: #fff;
            }
          }
        }
      }
    }

    .appPdDv-title {
      position: absolute;
      top: 0;
      left: 10px;
      z-index: 1;
      width: 146px;
      height: 40px;
      line-height: 40px;
      padding-left: 10px;
      font-family: YouSheBiaoTiHei;
      color: #FFFFFF;
      font-weight: bold;
      transform: translateY(-50%);
      background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/b-title__bg.png);
      background-size: 100% 100%;
    }

    .title {
      width: 154px;
      height: 42px;
      margin-bottom: 8px;
      padding: 4px 0 0 34px;
      color: #fff;
      font-size: 16px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/title.png);
      background-size: 100% 100%;
    }

    & > .left {
      position: relative;
      width: 360px;
      height: 100%;
      padding: 36px 12px 12px;
      box-shadow: inset 0px 0px 5px 0px #D5E6FF;
      border-radius: 8px;
      border: 1px solid #030D1C;

      .tab {
        display: flex;
        align-items: center;
        height: 32px;
        margin-bottom: 15px;
        border: 1px solid #0E6EB5;

        div {
          flex: 1;
          line-height: 32px;
          text-align: center;
          color: #fff;
          font-size: 14px;
          cursor: pointer;
          user-select: none;

          &.active {
            background: #0F93B8;
          }
        }
      }

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

        .item-top__item {
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          width: 107px;
          height: 52px;
          line-height: 1;
          background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/jm1.png);
          background-size: 100% 100%;

          h2 {
            margin-bottom: 4px;
            color: #2AB7D1;
            font-size: 12px;
          }

          &:nth-of-type(2) {
            background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/jm2.png);
            background-size: 100% 100%;

            h2 {
              color: #5ADA92;
            }
          }

          &:nth-of-type(3) {
            background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/jm3.png);
            background-size: 100% 100%;

            h2 {
              color: #FF5655;
            }
          }

          .bottom {
            display: flex;
            align-items: center;

            span {
              margin-right: 2px;
              font-size: 14px;
              color: #fff;
              font-weight: bold;
              font-style: oblique;
            }

            img {
              position: relative;
              top: 2px;
            }
          }
        }
      }

      .jmq {
        .header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          height: 40px;
          padding: 0 25px;
          background: rgba(14,110,181,0.10);
          border: 1px solid #0E6EB5;

          span {
            color: #fff;
            font-size: 15px;
          }
        }

        .item-top__list {
          height: 400px;
          padding: 10px 0;
          overflow-y: auto;

          .item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 4px;

            .left .rate-wrapper {
              flex-direction: row-reverse;
            }

            div {
              display: flex;
              align-items: center;
              justify-content: space-between;
              flex: 1;

              .rate-wrapper {
                width: 100%;
              }

              .rate {
                height: 10px;
                text-align: right;
                background-image: linear-gradient(270deg, rgba(255,208,63,0.00) 0%, rgba(255,208,63,0.80) 100%);
              }
            }

            .right {
              .rate {
                background-image: linear-gradient(270deg, rgba(0,240,251,0.80) 0%, rgba(0,240,251,0.00) 100%);
              }

              span {
                text-align: right;
              }
            }

            h2 {
              width: 90px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              color: #FFFFFF;
              font-size: 14px;
              text-align: center;
              text-shadow: 0px 0px 13px rgb(59 182 255 / 80%);
              background: #fff;
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
            }

            span {
              width: 38px;
              color: #aeacaf;
              font-size: 15px;
            }
          }
        }
      }

      .chart1 {
        margin: 10px 0 18px;
      }

      .item-tags {
        margin-top: 20px;

        .item-bottom__item {
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 100%;
          height: 36px;
          padding: 0 20px 0 39px;
          background: url(https://cdn.cunwuyun.cn/dvcp/dv/pddv/tag-title.png);
          background-size: 100% 100%;

          h2 {
            color: #aeacaf;
            font-size: 13px;
          }

          span {
            color: #FFFFFF;
            font-size: 16px;
            font-weight: bold;
          }
        }
      }
    }

    & > .middle {
      display: flex;
      flex-direction: column;
      flex: 1;
      height: 100%;
      margin: 0 16px;

      .top {
        flex: 1;
        margin-bottom: 29px;
      }

      .bottom {
        width: 100%;
        height: 160px;
        padding: 20px 24px;
        background: rgba(15,20,47,0.5000);
        box-shadow: inset 0px 0px 24px 4px rgba(163,247,255,0.7000);
        border-radius: 8px;

        .bottom-title {
          display: flex;
          align-items: center;
          margin-bottom: 10px;

          h2 {
            margin-left: 4px;
            font-size: 16px;
            font-family: MicrosoftYaHeiSemibold;
            color: #FFFFFF;
            text-shadow: 0px 0px 10px #1C2F92;
          }
        }

        .bottom-list {
          height: 80px;
          overflow-y: auto;

          .item {
            display: flex;
            align-items: center;
            margin-bottom: 8px;
            font-size: 14px;

            &:last-child {
              margin-bottom: 0;
            }

            i {
              margin-right: 24px;
              color: #aeacaf;
              font-style: normal;
              font-size: 14px;
            }

            span {
              color: #FFD458;
            }

            em {
              font-style: normal;
              color: #2CF0F4;
            }
          }
        }
      }
    }

    & > .right {
      position: relative;
      width: 360px;
      height: 100%;
      padding: 36px 12px 12px;
      box-shadow: inset 0px 0px 5px 0px #D5E6FF;
      border-radius: 8px;
      border: 1px solid #030D1C;

      .top-wrapper {
        margin-bottom: 23px;

        .item-wrapper {
          display: flex;
          align-items: center;

          .item-top__item {
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: center;
            flex: 1;
            margin-right: 8px;
            width: 78px;
            height: 66px;
            border-radius: 4px;
            border: 1px solid #23A0AC;

            h2 {
              margin-bottom: 4px;
              color: #fff;
              font-size: 20px;
            }

            p {
              color: #2AF0F8;
              font-size: 12px;
            }

            &:last-child {
              margin-right: 0;
            }
          }
        }
      }

        .item-table {
          position: relative;
          height: 240px;

          .left {
            position: relative;
            left: -70px;
            height: 240px;

            .left-text {
              display: flex;
              align-items: center;
              justify-items: center;
              flex-direction: column;
              position: absolute;
              top: 50%;
              left: 50%;
              z-index: 11;
              line-height: 1;
              transform: translate(-50%, -50%);

              h2 {
                font-size: 36px;
                color: #fff;
              }

              span {
                margin-top: 4px;
                color: #a4adbd;
                font-size: 20px;
              }
            }
          }

          .right {
            position: absolute;
            right: 0;
            top: 50%;
            z-index: 99;
            transform: translateY(-50%);

            .right-item {
              display: flex;
              align-items: center;
              justify-content: space-between;

              .right-item__left {
                display: flex;
                align-items: center;
                margin-right: 40px;

                i {
                  width: 14px;
                  height: 14px;
                  margin-right: 8px;
                  background: #2891FF;
                }

                span {
                  font-size: 14px;
                  color: #fff;
                }
              }

              P {
                color: #fff;
                font-size: 14px;
              }
            }
          }
        }

      .middle-wrapper {
        margin-bottom: 23px;
      }

      .bottom-wrapper {
        .item-table {
          .item-table__header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 40px;
            padding: 0 24px;
            color: #82C5FF;
            font-size: 14px;
            background: rgba(35,160,172,0.2000);
          }

          .item-table__body {
            height: 310px;
            overflow-y: overlay;

            .item-table__item {
              display: flex;
              align-items: center;
              justify-content: space-between;
              height: 40px;
              padding: 0 24px;
              color: #fff;
              font-size: 14px;
              background: rgba(35,160,172,0.2000);

              &:nth-of-type(2n - 1) {
                background: transparent;
              }

              span {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }
            }
          }
        }
      }
    }
  }
</style>
