<script setup>
// import request from '';
import * as echarts from 'echarts'
import { onMounted } from 'vue'
import { useRouter } from 'vue-router'
import MY_commonLeft from '@/assets/images/title_left.png'
import MY_commonRight from '@/assets/images/title_right.png'
import { user } from '@/store'
const router = useRouter()
const timeValue = $ref('')
const query = $ref({
  area_id: '',
  school_id: '',
})
let year = $ref()
let month = $ref()
let day = $ref()
let hour = $ref()
let minutes = $ref()
let seconds = $ref()
// #region 时间
function getNowDate() {
  const date = new Date()
  year = date.getFullYear()
  month = date.getMonth() + 1
  day = date.getDate()
  hour = date.getHours()
  minutes = date.getMinutes()
  seconds = date.getSeconds()
  if (month >= 1 && month <= 9)
    month = `0${month}`

  if (day >= 0 && day <= 9)
    day = `0${day}`

  if (hour >= 0 && hour <= 9)
    hour = `0${hour}`

  if (minutes >= 0 && minutes <= 9)
    minutes = `0${minutes}`

  if (seconds >= 0 && seconds <= 9)
    seconds = `0${seconds}`
}
setInterval(getNowDate, 1000)
// #endregion

const converToArray = number => [...`${number}`].map(el => parseInt(el))
let loading = $ref(false)
const baseURL = window.GLOBAL_CONFIG.myxjyszptx
let areaList = $ref([])
let schoolList = $ref([])
if (user.value.user_role_id * 1 < 69) {
  initArea()
}
else if (user.value.user_role_id * 1 === 69) {
  selectArea(user.value.area_info.area_id3)
}
else if (user.value.user_role_id * 1 === 71) {
  selectArea(user.value.area_info.area_id4)
}
else if (user.value.user_role_id * 1 === 72) {
  query.school_id = user.value.sm_info.sm_id
  initData()
}
function initArea() {
  request({
    baseURL,
    url: '/area/main/index',
    data: {
      upid: '2615',
      limit: 9999,
      page: 1,
    },
  }).then((res) => {
    if (res.code == '1')
      areaList = res.data.page_data
  })
}

function selectArea(val) {
  query.school_id = ''
  const data = {
    limit: 9999,
    page: 1,
  }
  if (user.value.user_role_id * 1 === 69) {
    Object.assign(data, {
      upid3: val,
    })
  }
  if (user.value.user_role_id * 1 === 71) {
    Object.assign(data, {
      upid4: val,
    })
  }
  if (val) {
    request({
      baseURL,
      url: '/school/main/index',
      data,
    }).then((res) => {
      if (res.code == '1') {
        schoolList = res.data.page_data
        initData()
      }
    })
  }
  else {
    schoolList = []
  }
}

let newTotal, newLogin, newTeach
let timeRank = $ref({})
let yhgmData = $ref({})
let bjData = $ref({})
function initData() {
  loading = true
  const data = {
    ...query,
  }
  if (timeValue != '')
    Object.assign(data, { date_range: `${timeValue[0]}~${timeValue[1]}` })

  request({
    baseURL,
    url: '/openapi/chart/school_base_data.php',
    data,
  }).then((res) => {
    if (res.code == '1') {
      timeRank = res.data.school_base_data
      yhgmData = res.data.school_base_data.yhgmData
      bjData = res.data.school_base_data.bjData
      newTotal = numTrans(res.data.school_base_data.yhgmData.total)
      newLogin = numTrans(res.data.school_base_data.yhgmData.login)
      newTeach = numTrans(res.data.school_base_data.yhgmData.teaching)
      initStu(res.data.school_base_data.yhgmData, 'student_num')
      initStu(res.data.school_base_data.yhgmData, 'teacher_num')
      initKtsc(res.data.school_base_data.bjData, 'bjsk')
      initKtsc(res.data.school_base_data.gkscData, 'gksc')
      initKtsc(res.data.school_base_data.jsskData, 'jssk')
      initTrand(res.data.school_base_data.dlqsData)
      loading = false
    }
  })
}

// const timeRank = (
//   await request({
//     url: "/openapi/chart/school_base_data.php",
//   })
// ).data.school_base_data;

function numTrans(num) {
  let newNum = converToArray(num)
  if (newNum.length < 7) {
    const zero = []
    for (let i = 0; i < 7 - newNum.length; i++)
      zero.push(0)

    newNum = [...zero, ...newNum]
    // return [...zero, ...newNum]
  }
  return newNum
}

function initStu(transData, name) {
  let xsOption
  const serisData = []
  if (name == 'student_num')
    serisData.push(transData.xs_num, transData.js_num)
  else
    serisData.push(transData.js_num, transData.xs_num)

  xsOption = {
    tooltip: {
      trigger: 'item',
    },
    legend: {
      show: false,
    },
    color: [
      {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: '#00dad5', // 0% 处的颜色
          },
          {
            offset: 1,
            color: '#deda73', // 100% 处的颜色
          },
        ],
        // global: false, // 缺省为 false
      },
      '#33383c',
    ],
    series: [
      {
        type: 'pie',
        radius: ['45%', '85%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center',
        },
        emphasis: {
          disabled: true,
        },
        labelLine: {
          show: false,
        },
        data: serisData,
      },
    ],
  }
  if (name == 'student_num')
    xsOption && xsChart1.setOption(xsOption)
  else
    xsOption && xsChart2.setOption(xsOption)
}

// #region 班级上课时长排行
let bjChart = null
let timeChart = null
let jsChart = null
function initKtsc(transData, name) {
  let bjOption
  // 改变echarts 格式
  const changeData = transData.series_data
  const list1 = []
  let num
  if (name == 'bjsk')
    num = 3
  else
    num = 5

  changeData.forEach((item, index) => {
    list1.push(item[0])
  })
  const transEchartdata = {
    legend_data: transData.legend_data,
    xAxis_data: transData.xAxis_data,
    series_data: transData.series_data,
  }
  let showEchart = false
  if (transEchartdata.xAxis_data.length > 6)
    showEchart = true

  bjOption = {
    tooltip: {
      trigger: 'axis',
    },
    toolbox: {
      show: false,
      itemSize: 30,
      iconStyle: {
        borderWidth: 3,
        borderMiterLimit: 8,
      },
      top: -12,
      right: 20,
    },
    grid: {
      show: false,
      left: 40,
      bottom: 40,
      top: 0,
      right: 20,
      containLabel: false,
    },
    legend: {
      show: false,
    },
    // calculable: true,
    xAxis: [
      {
        type: 'value',
        position: 'top',
        splitLine: {
          show: false,
        },
        axisLine: {
          onZero: false,
        },
        axisLabel: {
          // x轴文字的配置
          show: false,
          textStyle: {
            color: '#fff',
            fontSize: '10',
          },
        },
      },
    ],
    yAxis: [
      {
        type: 'category',
        data: transEchartdata.xAxis_data,
        // nameGap: 25,
        splitNumber: 4,
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          // show:false,
          color: '#68D5EA',
          margin: 4,
        },
        splitLine: {
          show: false,
          lineStyle: {
            show: false,
            // 使用深浅的间隔色
            color: ['#53C6DE'],
            width: '0.1',
          },
        },
        inverse: true,
      },
    ],
    series: [
      {
        type: 'bar',
        data: list1,
        itemStyle: {
          barBorderRadius: [0, 20, 20, 0],
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            {
              offset: 0,
              color: '#00BABC',
            },
            {
              offset: 1,
              color: '#FDE153',
            },
          ]),
        },
        label: {
          show: true,
          position: 'insideLeft',
          formatter: '{c}min',
        },
        // barWidth: 14,
        barMinWidth: 6,
        barMaxWidth: 12,
        showBackground: true,
      },
    ],
    dataZoom: [
      {
        type: 'inside', // 支持内部鼠标滚动平移
        orient: 'vertical',
        maxValueSpan: num,
        minValueSpan: num,
        // end: namenum,
        zoomOnMouseWheel: false, // 关闭滚轮缩放
        moveOnMouseWheel: true, // 开启滚轮平移
        yAxisIndex: 0,
        // minSpan: 4,
        // maxSpan: 40
      },
      {
        type: 'slider',
        showDetail: false,
        orient: 'vertical',
        start: 0,
        end: 5,
        // height: 100,
        width: 6,
        right: 0, // 右边的距离
        // bottom: 20, //下边的距离
        zoomOnMouseWheel: false, // 关闭滚轮缩放
        zoomLock: true,
        moveOnMouseWheel: true, // 开启滚轮平移
        brushSelect: false,
        showDataShadow: false,
        // top: 50,
        maxValueSpan: 4,
        minValueSpan: 4,
        show: showEchart, // 是否展示
        fillerColor: '#00fffa', // 滚动条颜色
        borderColor: 'transparent',
        // maxValueSpan: 4,}
      },
    ],
  }
  if (name == 'bjsk')
    bjOption && bjChart.setOption(bjOption)
  else if (name == 'gksc')
    bjOption && timeChart.setOption(bjOption)
  else
    bjOption && jsChart.setOption(bjOption)
}
// #endregion

// #region 登录趋势
let trendChart = null
var xsChart1 = null
var xsChart2 = null
function initTrand(transData) {
  let trendOption
  // 改变echarts 格式
  const changeData = transData.series_data
  // let formatArr = [{ data: [0, 1] }, { data: [0, 0] }, { data: [0, 0] }];
  const list1 = []
  const list2 = []
  const list3 = []

  changeData.forEach((item, index) => {
    list1.push(item[0])
    list2.push(item[1])
    list3.push(item[2])
  })
  const transEchartdata = {
    legend_data: transData.legend_data,
    xAxis_data: transData.xAxis_data,
    series_data: transData.series_data,
  }
  trendOption = {
    tooltip: {
      trigger: 'axis',
    },
    toolbox: {
      show: true,
      itemSize: 30,
      iconStyle: {
        borderWidth: 3,
        borderMiterLimit: 8,
      },
      top: -12,
      right: 20,
    },
    grid: {
      show: false,
      containLabel: false,
    },
    legend: {
      data: transEchartdata.legend_data,
      type: 'plain',
      right: 40,
      itemWidth: 15,
      icon: 'circle',
      textStyle: {
        color: '#68D5EA',
      },
    },
    calculable: true,
    xAxis: [
      {
        type: 'category',
        data: transEchartdata.xAxis_data,
        axisLabel: {
          // x轴文字的配置
          show: true,
          textStyle: {
            color: '#fff',
            fontSize: '10',
          },
        },
        axisTick: {
          show: false,
        },
      },
    ],
    yAxis: [
      {
        type: 'value',
        // nameLocation: "end",
        // name: "(人)",
        // nameTextStyle: {
        //   color: "#68D5EA",
        // },
        // nameGap: 25,
        splitNumber: 5,
        axisLabel: {
          show: false,
          color: '#68D5EA',
        },
        splitLine: {
          lineStyle: {
            color: ['#53C6DE'],
            width: '0.2',
          },
        },
      },
    ],
    series: [
      {
        name: '教师',
        type: 'line',
        data: list1,
        itemStyle: {
          color: '#54FFD9',
        },
        smooth: 0.5,
      },
      {
        name: '学生',
        type: 'line',
        data: list2,
        itemStyle: {
          color: '#FFF57B',
        },
        smooth: 0.5,
        barWidth: 8,
      },
      {
        name: '管理',
        type: 'line',
        data: list3,
        itemStyle: {
          color: '#ED97FF',
        },
        smooth: 0.5,
      },
    ],
  }

  trendOption && trendChart.setOption(trendOption)
}
// #endregion

let dialogTableVisible = $ref(false)
function popUp() {
  dialogTableVisible = true
}

function resizeEcharts() {
  trendChart.resize()
  xsChart1.resize()
  xsChart2.resize()
  bjChart.resize()
  timeChart.resize()
  jsChart.resize()
}

onMounted(() => {
  // trendChart = echarts.init(document.getElementById("trend"));
  const dfdf = document.getElementById('trend')
  dfdf.setAttribute('_echarts_instance_', '')
  trendChart = echarts.init(dfdf)
  bjChart = echarts.init(document.getElementById('bjsk'))
  timeChart = echarts.init(document.getElementById('gksc'))
  jsChart = echarts.init(document.getElementById('jssk'))
  xsChart1 = echarts.init(document.getElementById('student_num'))
  xsChart2 = echarts.init(document.getElementById('teacher_num'))
  initData()
  window.addEventListener('resize', resizeEcharts)
})
</script>

<template>
  <div v-loading="loading" element-loading-background="rgba(122, 122, 122, 0.8)" class="bg_full min-w-1280px pb-10">
    <div class="bg_top w-full flex h-5.5vw px-4 pt-2">
      <div class="w-2/5">
        <el-form :inline="true" class="demo-form-inline w-full">
          <el-form-item class="w-1/4">
            <el-date-picker
              v-model="timeValue"
              class="w-full"
              type="daterange"
              range-separator="-"
              popper-class="el_date_picker_class"
              start-placeholder="Start date"
              end-placeholder="End date"
              format="YYYY/MM/DD"
              value-format="YYYY-MM-DD"
              @change="initData"
            />
          </el-form-item>
          <el-form-item v-if="user.user_role_id * 1 < 69" class="w-1/4">
            <el-select
              v-model="query.area_id"
              clearable
              class="w-full"
              popper-class="el_date_picker_class"
              placeholder="区域"
              @change="selectArea"
            >
              <el-option
                v-for="a in areaList"
                :key="a.id"
                :value="a.id"
                :label="a.name"
              />
            </el-select>
          </el-form-item>
          <el-form-item v-if="user.user_role_id * 1 < 72" class="w-1/4">
            <el-select
              v-model="query.school_id"
              popper-class="el_date_picker_class"
              class="w-full"
              placeholder="学校"
              clearable
              @change="initData"
            >
              <el-option
                v-for="s in schoolList"
                :key="s.id"
                :value="s.schoolid"
                :label="s.schoolname"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </div>

      <h1 class="text-white text-2vw text-center self-center flex-1">
        学校基础数据
      </h1>
      <div class="text_green text-base text-center leading-12 w-2/5">
        {{ year }}年{{ month }}月{{ day }}日 {{ hour }}:{{ minutes }}:{{
          seconds
        }}
      </div>
    </div>
    <div class="w-full flex flex-1 justify-around main mt-2">
      <div class="w-1/5">
        <div class="yhgm" style="height: calc(45% - 10px)">
          <div class="MY_commonTitle">
            <p class="px-10">
              用户规模
              <img :src="MY_commonLeft" class="MY_commonLeft" alt="">
              <img :src="MY_commonRight" class="MY_commonRight" alt="">
            </p>
            <div class="bottomLine" style="width: 10%" />
          </div>
          <div class="yhgm_sj h-3/5 py-0">
            <div class="h-1/3">
              <div class="yhgm_sj_title">
                总用户数
              </div>
              <div class="h-1/2 flex justify-around ">
                <span v-for="n in newTotal" class="num_bg flex items-center text-center p-2">{{
                  n
                }}</span>
              </div>
            </div>
            <div class="h-1/3">
              <p class="yhgm_sj_title">
                登录人数
              </p>
              <div class="h-1/2 flex justify-around">
                <span v-for="n in newLogin" class="num_bg flex items-center text-center p-2">{{
                  n
                }}</span>
              </div>
            </div>
            <div class="h-1/3">
              <p class="yhgm_sj_title">
                授课次数
              </p>
              <div class="h-1/2 flex justify-around">
                <span v-for="n in newTeach" class="num_bg flex items-center text-center p-2">{{
                  n
                }}</span>
              </div>
            </div>
          </div>
          <div style="height:20%" class="yhgm_sj h-2/5 flex justify-between">
            <div class="circle relative h-full">
              <div id="student_num" style="width: 100%; height: 100%" />
              <p class="text-white text-center text-0.8vw">
                学生数量
              </p>
              <span
                v-if="yhgmData.xs_num > 9999"
                class="absolute font-medium center text-0.8vw"
              >{{ (yhgmData.xs_num / 10000).toFixed(1) }}万</span>
              <span
                v-if="yhgmData.xs_num <= 9999"
                class="absolute font-medium center text-0.8vw"
              >{{ yhgmData.xs_num }}</span>
            </div>
            <div class="circle relative h-full">
              <div id="teacher_num" style="width: 100%; height: 100%" />
              <p class="text-white text-center text-0.8vw">
                教师数量
              </p>
              <span
                v-if="yhgmData.js_num > 9999"
                class="absolute font-medium center text-0.8vw"
              >{{ (yhgmData.js_num / 10000).toFixed(1) }}万</span>
              <span
                v-if="yhgmData.js_num <= 9999"
                class="absolute font-medium center text-0.8vw"
              >{{ yhgmData.js_num }}</span>
            </div>
          </div>
        </div>
        <div class="btn" @click="popUp()">
          工作室信息数据模块
        </div>
        <div class="bg_black" style="height: calc(50% - 10px)">
          <div class="MY_commonTitle">
            <p class="px-10">
              班级上课时间排行
              <img :src="MY_commonLeft" class="MY_commonLeft" alt="">
              <img :src="MY_commonRight" class="MY_commonRight" alt="">
            </p>
            <div class="bottomLine" style="width: 20%" />
          </div>
          <div class="flex justify-around">
            <div>
              <p class="text_green">
                <span class="text-2xl font-medium tracking-wide">{{
                  bjData.headcount
                }}</span><span class="text-sm font-light">人</span>
              </p>
              <p class="text-white text-sm font-light">
                总观看人数
              </p>
            </div>
            <div>
              <p class="text_green">
                <span class="text-2xl font-medium">{{
                  bjData.averageTime
                }}</span><span class="text-sm font-light">小时</span>
              </p>
              <p class="text-white text-sm font-light">
                平均上课时长
              </p>
            </div>
          </div>
          <div class="h-75/100 overflow-hidden">
            <div id="bjsk" class="w-full h-full" />
          </div>
        </div>
      </div>
      <div class="w-1/2">
        <div class="w-full h-3/5">
          <div class="zysj pt-5 h-full">
            <div class="MY_commonTitle">
              <p class="px-10">
                资源数据
                <img :src="MY_commonLeft" class="MY_commonLeft" alt="">
                <img :src="MY_commonRight" class="MY_commonRight" alt="">
              </p>
              <div class="bottomLine" style="width: 4%" />
            </div>
            <div class="flex h-2/5 w-full justify-between flex-wrap px-10">
              <div class="zy_one w-3/8 h-full flex justify-around flex-wrap">
                <div
                  v-for="(v, i) in timeRank.zysjData"
                  v-show="i < 4"
                  :key="i"
                  class="zy_one_each w-4/9 h-1/2 mb-2"
                >
                  <div class="text-white one_rec w-full">
                    <p class="text-gray-400">
                      {{ v.name }}
                    </p>
                    <p>{{ v.num }}</p>
                    <div class="flex justify-center">
                      <span>上月同比{{ v.rate }}</span>
                      <img
                        class="w-10px"
                        src="@/assets/img/dsj/grow.png"
                        alt=""
                      >
                    </div>
                  </div>
                </div>
              </div>
              <div class="zy_two w-1/5" />
              <div class="zy_one w-3/8 h-full flex justify-around flex-wrap">
                <div
                  v-for="(v, i) in timeRank.zysjData"
                  v-show="i > 3 && i < 8"
                  :key="i"
                  class="zy_one_each w-4/9 h-1/2 mb-2"
                >
                  <div class="text-white one_rec h-full">
                    <p class="text-gray-400">
                      {{ v.name }}
                    </p>
                    <p>{{ v.num }}</p>
                    <div class="flex justify-center">
                      <span>上月同比{{ v.rate }}</span>
                      <img src="@/assets/img/dsj/grow.png" alt="">
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="zy_three flex justify-center my-4">
              <div
                v-for="(v, i) in timeRank.zysjData"
                v-show="i == 8"
                :key="i"
                class="zy_three_each w-1/3 h-2/3"
              >
                <div class="text-white one_rec h-full">
                  <p class="text-gray-400">
                    {{ v.name }}
                  </p>
                  <p>{{ v.num }}</p>
                  <div class="flex justify-center">
                    <span>上月同比{{ v.rate }}</span>
                    <img src="@/assets/img/dsj/grow.png" alt="">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="trend mt-4 w-full h-2/5">
          <div class="MY_commonTitle">
            <p class="px-10">
              用户登录趋势
              <img :src="MY_commonLeft" class="MY_commonLeft" alt="">
              <img :src="MY_commonRight" class="MY_commonRight" alt="">
            </p>
            <div class="bottomLine" style="width: 6%" />
          </div>
          <div id="trend" class="w-full h-3/4" style="margin: 0 auto" />
        </div>
      </div>
      <div class="w-1/5">
        <div class="bg_black" style="height: calc(50% - 10px)">
          <div class="MY_commonTitle">
            <p class="px-10">
              观看时间排行
              <img :src="MY_commonLeft" class="MY_commonLeft" alt="">
              <img :src="MY_commonRight" class="MY_commonRight" alt="">
            </p>
            <div class="bottomLine" style="width: 20%" />
          </div>
          <div class="flex justify-around">
            <div>
              <p class="text_green">
                <span class="text-2xl font-medium tracking-wide">{{
                  bjData.headcount
                }}</span><span class="text-sm font-light">人</span>
              </p>
              <p class="text-white text-sm font-light">
                总观看人数
              </p>
            </div>
            <div>
              <p class="text_green">
                <span class="text-2xl font-medium">{{
                  bjData.averageTime
                }}</span><span class="text-sm font-light">小时</span>
              </p>
              <p class="text-white text-sm font-light">
                平均上课时长
              </p>
            </div>
          </div>
          <div class="h-75/100 overflow-hidden">
            <div id="gksc" class="h-full w-full" />
          </div>
        </div>
        <div class="bg_black mt-10" style="height: calc(50% - 10px)">
          <div class="MY_commonTitle">
            <p class="px-10">
              教师上课时长
              <img :src="MY_commonLeft" class="MY_commonLeft" alt="">
              <img :src="MY_commonRight" class="MY_commonRight" alt="">
            </p>
            <div class="bottomLine" style="width: 20%" />
          </div>
          <div class="flex justify-around">
            <div>
              <p class="text_green">
                <span class="text-2xl font-medium tracking-wide">{{
                  bjData.headcount
                }}</span><span class="text-sm font-light">人</span>
              </p>
              <p class="text-white text-sm font-light">
                总观看人数
              </p>
            </div>
            <div>
              <p class="text_green">
                <span class="text-2xl font-medium">{{
                  bjData.averageTime
                }}</span><span class="text-sm font-light">小时</span>
              </p>
              <p class="text-white text-sm font-light">
                平均上课时长
              </p>
            </div>
          </div>
          <div class="h-75/100 overflow-hidden">
            <div id="jssk" class="w-full h-full" />
          </div>
        </div>
      </div>
    </div>

    <div class="footer h-1rem" />
    <el-dialog
      v-model="dialogTableVisible"
      class="dialog"
      title="工作室信息数据模块"
    >
      <el-table
        :data="timeRank.tableData"
        stripe
        max-height="330px"
        class="el_table_class w-1150px"
        :row-class-name="tableRowClassName"
      >
        <el-table-column prop="name" label="工作室名称" />
        <el-table-column prop="area" show-overflow-tooltip label="所属区域" />
        <el-table-column prop="school" show-overflow-tooltip label="所属学校" />
        <el-table-column
          prop="zy_num"
          show-overflow-tooltip
          label="资源数量(个)"
        />
        <el-table-column
          prop="zy_down_num"
          show-overflow-tooltip
          label="资源下载数量(个)"
        />
        <el-table-column
          prop="class_num"
          show-overflow-tooltip
          label="课程数量(个)"
        />
        <el-table-column
          prop="teacher_num"
          show-overflow-tooltip
          label="教师数量(个)"
        />
        <el-table-column
          prop="video_num"
          show-overflow-tooltip
          label="录制视频数量(个)"
        />
      </el-table>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
@use "@/styles/date-picker.scss";
@use "@/styles/el-table.scss";
.bg_black {
  background-color: #0123379c;
}
.main {
  height: calc(100% - 5.5vw - 2vw);
}
.center {
  display: inline-block;
  width: 50%;
  height: 50%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.MY_commonTitle {
  text-align: center;
  box-sizing: border-box;
  padding: 2%;
  // height: 6vh;

  p {
    font-size: 1.5vw;
    font-family: PingFang SC, PingFang SC-8;
    background-image: linear-gradient(180deg, #c3f8b3, #66ffff 80%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    font-weight: 500;
    display: inline-block;
    position: relative;
    // padding: 0 6%;
  }

  .bottomLine {
    width: 20%;
    height: 4px;
    background-color: rgba(0, 255, 250, 1);
    border-radius: 3px;
    margin: 2px auto 0 auto;
  }

  .MY_commonLeft {
    width: 2.6vw;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 13;
  }

  .MY_commonRight {
    width: 2.6vw;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 13;
  }
}
.text_green {
  color: #00fff4;
  // font-family: SourceHanSansCN, SourceHanSansCN-Bold;
  font-weight: 700;
}
.bg_full {
  background-image: url("@/assets/img/dsj/bg.png");
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #000;
  .bg_top {
    min-width: 1280px;
    background-image: url("@/assets/img/dsj/top.png");
    background-size: 100%;
    // background-position: center;
    background-repeat: no-repeat;
    justify-content: space-between;
  }
  .yhgm {
    background: #0123379c;
    padding: 10px 0;
    padding-bottom: 30px;
    .yhgm_sj {
      color: #66FFFF;
      width: 70%;
      margin: 5px auto;
      line-height: 35px;
      .yhgm_sj_title {
        font-size: 0.8vw;
        height: 50%;
        line-height: 100%;
      }
      > div {
        p {
          font-size: 0.8vw;
        }
        .num_bg {
          display: inline-block;
          background-image: url('~/assets/img/dsj/num_bg.png');
          background-size: 100%;
          background-repeat: no-repeat;
          // width: 2vw;
          height: 100%;
          line-height: 100%;
          // background: #013651;
          // border: 1px solid #00e0db;
          // margin: 0 0.1vw;
          font-size: 1vw;
          text-align: center;
          // padding: .8vw 0 ;
        }
      }
    }
    .circle {
      background-image: url("@/assets/img/dsj/bg_circle.png");
      background-size: 100%;
      background-repeat: no-repeat;
      background-position-y: 50%;
      background-position-x: center;
      > p {
        font-size: 0.5vw;
      }
    }
  }
  .zysj {
    background-image: url("@/assets/img/dsj/bg_zy.png");
    background-size: 100%;
    background-repeat: no-repeat;
    .zy_one {
      .zy_one_each {
        background-image: url("@/assets/img/dsj/bg_rec.png");
        text-align: center;
        background-size: 100%;
        background-position: center;
        background-repeat: no-repeat;
        .one_rec {
          // width: 110px;
          height: 100%;
          margin: 0.25rem auto;
          font-size: 0.85vw;
          > div {
            color: #00e0db;
          }
        }
      }
    }
    .zy_two {
      // width: 222px;
      // height: 252px;
      background-image: url("@/assets/img/dsj/no0.png");
      background-size: 100%;
      background-position: 0 20px;
      background-repeat: no-repeat;
    }
    .zy_three {
      .zy_three_each {
        // width: 379px;
        // height: 123px;
        background-image: url("@/assets/img/dsj/bg_rec_1.png");
        background-repeat: no-repeat;
        background-size: 100%;
        text-align: center;
        .one_rec {
          // width: 110px;
          height: 100%;
          margin: 0.25rem auto;
          font-size: 1vw;
          > div {
            color: #00e0db;
          }
        }
      }
    }
  }
  .trend {
    background: #0123379c;
  }
  .btn {
    width: 100%;
    // line-height: 53px;
    cursor: pointer;
    border: 1px solid #00e0db;
    border-radius: 8px;
    margin: 10px auto;
    box-shadow: 0px 1px 39px 0px rgba(0, 255, 244, 0.5) inset;
    background-image: linear-gradient(to bottom, #c3f8b3, #66ffff 80%);
    -webkit-background-clip: text;
    color: transparent;
    font-size: 1.8vw;
    font-weight: 600;
    text-align: center;
  }
  .footer {
    width: 100%;
    min-width: 1280px;
    background-image: url("@/assets/img/dsj/under.png");
    background-size: 100%;
    background-position: bottom;
    background-repeat: no-repeat;
    position: fixed;
    bottom: 0;
    left: 0;
  }
}
:deep .el-dialog {
  width: 1300px;
  background-color: #011521;
  padding: 10px;
  .el-dialog__header {
    margin-top: 10px;
  }
  .el-dialog__title {
    color: #fff;
  }
  --el-color-info: #fff;
  .el_table_class {
    margin: 0 auto;
  }
}
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

:deep .grid-content {
  // border-radius: 4px;
  min-height: 36px;
  background-color: rgba(1, 35, 55, 0.71);
}
.top_name {
  background-image: linear-gradient(to bottom, #c3f8b3, #66ffff 80%);
  -webkit-background-clip: text;
  color: transparent;
  font-size: 25px;
  text-align: center;
}
.routerLink {
  width: 185px;
  height: 58px;
  cursor: pointer;
  line-height: 58px;
  border: 1px solid #00e0db;
  border-radius: 8px;
  box-shadow: 0px 1px 39px 0px rgba(0, 255, 244, 0.5) inset;
  .click_routerLink {
    background-image: linear-gradient(to bottom, #c3f8b3, #66ffff 80%);
    -webkit-background-clip: text;
    color: transparent;
    font-size: 20px;
    text-align: center;
  }
}
.sub_title {
  margin: 0 auto;
}
.text_purple {
  color: #ed97ff;
}
.text_yellow {
  color: #fff57b;
}
.text_pink {
  color: #ff579a;
}
.text_blue {
  color: #57e1ff;
}
.text_green {
  color: #54ffd9;
}
</style>

<style lang="scss">
// 自定义类名就是防止全局修改样式造成样式混乱
.el_date_picker_class {
  background: rgb(24, 24, 24) !important;
  .el-picker-panel {
    background: rgba(102, 255, 255, 0.1) !important;
    color: #fff;
  }
  .in-range {
    color: #000;
  }
  .el-scrollbar {
    background: rgba(102, 255, 255, 0.1) !important;
    .el-select-dropdown__item {
      color: #fff;
    }
    .el-select-dropdown__item.hover {
      color: #000;
    }
  }
}
</style>
