<template>
  <div class="data-screen2">
    <template v-if="dataInfo.base">
      <el-backtop />
      <div class="s_top">
        <p class="s_top_title">活动订货数据实时追踪</p>
        <p class="s_top_name">{{ dataInfo.base.activity_title }}</p>
      </div>
      <div class="s_money">
        <p class="s_money_value"> {{ dataInfo.base.money }}</p>
        <div class="s_money_spec s_money_ly">
          <p>临沭体验店金额: {{ dataInfo.base['临沭体验店'] }}</p>
          <p>占比: {{ (Math.floor(dataInfo.base['临沭体验店'] / dataInfo.base.money * 10000)/100).toFixed(1) + '%' }}</p>
        </div>
        <div class="s_money_spec s_money_wq">
          <p>吴桥体验店金额: {{ dataInfo.base['吴桥体验店'] }}</p>
          <p>占比: {{ (Math.floor(dataInfo.base['吴桥体验店'] / dataInfo.base.money * 10000)/100).toFixed(1) + '%' }}</p>
        </div>
      </div>
      <div class="s_module_title">
        <p>产品区</p>
      </div>
      <div class="s_all" :style="`background-image: url(${require('@/assets/data_display/all.png')})`">
        <p class="s_all_num">{{ dataInfo.base.hard * 3 + dataInfo.base.simple * 12 + dataInfo.base.old * 12 + dataInfo.base.newold * 18 }}</p>
        <p class="s_all_text">总条数</p>
      </div>
      <div class="s_goods">
        <div class="s_goods_item" :style="`background-image: url(${require('@/assets/data_display/s_good_0.png')})`">
          <div class="item_title">
            <div class="item_title_icon" :style="`background-image: url(${require('@/assets/data_display/s_good_item_0.png')})`" />
            <p>大卫博士精装版</p>
          </div>
          <div class="item_data">
            <div class="item_data_child">
              <p>{{ dataInfo.base.hard }}</p>
              <p>数量</p>
            </div>
            <div class="item_data_child">
              <p>{{ dataInfo.base.hard_money }}</p>
              <p>金额/元</p>
            </div>
            <div class="item_data_child">
              <p>{{ dataInfo.base.hard_today }}</p>
              <p>新增</p>
            </div>
            <div class="item_data_child">
              <p>{{ getPer(dataInfo.base.hard_money) }}%</p>
              <p>金额占比</p>
            </div>
          </div>
        </div>
        <!-- <div class="s_goods_item" :style="`background-image: url(${require('@/assets/data_display/s_good_1.png')})`">
          <div class="item_title">
            <div class="item_title_icon" :style="`background-image: url(${require('@/assets/data_display/s_good_item_1.png')})`" />
            <p>大卫博士简约版</p>
          </div>
          <div class="item_data">
            <div class="item_data_child">
              <p>{{ dataInfo.base.simple }}</p>
              <p>数量</p>
            </div>
            <div class="item_data_child">
              <p>{{ dataInfo.base.simple_money }}</p>
              <p>金额/元</p>
            </div>
            <div class="item_data_child">
              <p>{{ dataInfo.base.simple_today }}</p>
              <p>新增</p>
            </div>
            <div class="item_data_child">
              <p>{{ getPer(dataInfo.base.simple_money) }}%</p>
              <p>金额占比</p>
            </div>
          </div>
        </div> -->
        <div class="s_goods_item" :style="`background-image: url(${require('@/assets/data_display/s_good_2.png')})`">
          <div class="item_title">
            <div class="item_title_icon" :style="`background-image: url(${require('@/assets/data_display/s_good_item_2.png')})`" />
            <p>大卫博士老人版</p>
          </div>
          <div class="item_data">
            <div class="item_data_child">
              <p>{{ dataInfo.base.old }}</p>
              <p>数量</p>
            </div>
            <div class="item_data_child">
              <p>{{ dataInfo.base.old_money }}</p>
              <p>金额/元</p>
            </div>
            <div class="item_data_child">
              <p>{{ dataInfo.base.old_today }}</p>
              <p>新增</p>
            </div>
            <div class="item_data_child">
              <p>{{ getPer(dataInfo.base.old_money) }}%</p>
              <p>金额占比</p>
            </div>
          </div>
        </div>
        <!-- <div class="s_goods_item" :style="`background-image: url(${require('@/assets/data_display/s_good_3.png')})`">
          <div class="item_title">
            <div class="item_title_icon" :style="`background-image: url(${require('@/assets/data_display/s_good_item_3.png')})`" />
            <p>大卫博士纯棉老人版</p>
          </div>
          <div class="item_data">
            <div class="item_data_child">
              <p>{{ dataInfo.base.newold }}</p>
              <p>数量</p>
            </div>
            <div class="item_data_child">
              <p>{{ dataInfo.base.newold_money }}</p>
              <p>金额/元</p>
            </div>
            <div class="item_data_child">
              <p>{{ dataInfo.base.newold_today }}</p>
              <p>新增</p>
            </div>
            <div class="item_data_child">
              <p>{{ getPer(dataInfo.base.newold_money) }}%</p>
              <p>金额占比</p>
            </div>
          </div>
        </div> -->
      </div>
      <div class="s_module_title">
        <p>荣誉区</p>
      </div>
      <div class="s_honor">
        <div
          v-for="(v, k, i) in dataInfo.base.honor_num"
          :key="k"
          class="s_honor_item"
          :style="`background-image: url(${require(`@/assets/data_display/s_honor_${i % 3}.png`)})`"
          @click="toSeeHonorUser(v.user, '大礼包名单')"
        >
          <p>{{ v.count }}</p>
          <p>{{ k }}</p>
        </div>
      </div>
      <div class="s_module_title">
        <p>赠品区</p>
      </div>
      <div class="s_honor s_gift">
        <div
          v-for="(v, k, i) in dataInfo.base.gifts_num"
          :key="`${k}_${i}`"
          class="s_honor_item s_gift_item"
        >
          <p :style="`color: ${i % 3 === 0 ? '#3394F8' : i % 3 === 1 ? '#F76454' : '#FF9E00' }`">{{ v }}</p>
          <p />
          <p>{{ k }}</p>
        </div>
      </div>
      <div class="s_module_title">
        <p>达标情况</p>
      </div>
      <div class="s_standard">
        <div
          class="s_standard_item"
          :style="`background-image: url(${require(`@/assets/data_display/standard_0.png`)})`"
          @click="toSeeHonorUser(dataInfo.base.down_user.up, '达标名单')"
        >
          <p>{{ dataInfo.base.down_info.up }}</p>
          <p>达标</p>
        </div>
        <div
          class="s_standard_item"
          :style="`background-image: url(${require(`@/assets/data_display/standard_1.png`)})`"
          @click="toSeeHonorUser(dataInfo.base.down_user.down, '未达标名单')"
        >
          <p>{{ dataInfo.base.down_info.down }}</p>
          <p>未达标</p>
        </div>
      </div>
      <div class="s_module_title s_map_title">
        <p>全国数据情况</p>
      </div>
      <div class="s_map">
        <div v-if="dataInfo.base.list" class="s_map_container">
          <div id="china4" style="width:100%;height:100%;" />
        </div>
      </div>
      <div class="s_table_nav">
        <p
          v-for="item in moduleListNav"
          :key="item.value"
          :class="showDataType === item.value ? 'active' : ''"
          @click="showDataType = item.value"
        >
          {{ item.name }}
        </p>
      </div>
      <template v-if="+showDataType === 0">
        <div id="table-wrapper" class="table-wrapper">
          <el-table :key="showDataType" ref="table" :data="dataInfo.base.list" style="width: 100%" border @expand-change="openProvinceTeam">
            <el-table-column label="排名" width="40" type="index" align="center" />
            <el-table-column label="地区" :width="width / 9" prop="name" align="center" />
            <el-table-column label="精" :width="width / 8" prop="hard" align="center" />
            <!-- <el-table-column label="简" :width="width / 8" prop="simple" align="center" /> -->
            <el-table-column label="老" :width="width / 8" prop="old" align="center" />
            <!-- <el-table-column label="棉老" :width="width / 8" prop="newold" align="center" /> -->
            <el-table-column label="合计" prop="value" align="center" :width="width / 7" />
            <el-table-column type="expand" width="20">
              <template slot-scope="{ row }">
                <el-table v-if="row.list && row.list.length > 0" :data="row.list" border style="width: 100%;margin:20px 0">
                  <el-table-column label="昵称" prop="nickname" align="center" :width="width / 6" />
                  <el-table-column label="精" prop="hard" align="center" :width="width / 7" />
                  <!-- <el-table-column label="简" prop="simple" align="center" :width="width / 7" /> -->
                  <el-table-column label="老" prop="old" align="center" :width="width / 7" />
                  <!-- <el-table-column label="棉老" prop="cold" align="center" :width="width / 7" /> -->
                  <el-table-column label="合计" prop="acc" align="center" :width="width / 6" />
                </el-table>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </template>
      <template v-else-if="+showDataType === 1 ">
        <el-table :key="showDataType" :data="dataInfo.crown" border>
          <el-table-column label="排名" width="40" type="index" align="center" />
          <el-table-column label="代理公司" prop="nickname" align="center" :width="width / 6.5" />
          <el-table-column label="精" prop="hard" align="center" :width="width / 7" />
          <!-- <el-table-column label="简" prop="simple" align="center" :width="width / 7" /> -->
          <el-table-column label="老" prop="old" align="center" :width="width / 7" />
          <!-- <el-table-column label="棉老" prop="newold" align="center" :width="width / 7" /> -->
          <el-table-column label="金额" prop="money" align="center" :width="width / 6.5" />
        </el-table>
      </template>
      <template v-else-if="+showDataType === 2">
        <el-table :key="showDataType" :data="dataInfo.size" border>
          <el-table-column label="商品名称" prop="goods_name" align="center" />
          <el-table-column label="商品类型" prop="goods_size" align="center" />
          <el-table-column label="销量" prop="num" align="center" sortable :sort-method="sizeNumSort" />
        </el-table>
      </template>
    </template>
    <div v-if="dataPasswordVis" class="data_password">
      <el-input id="userName" v-model="dataPassword" type="text" style="width: 300px;margin-bottom: 20px;" placeholder="请输入密码" />
      <el-button type="primary" @click="checkDataPassword">确定</el-button>
    </div>
    <!-- 已达标/未达标 -->
    <el-dialog
      :title="dialogUser.title"
      :visible.sync="dialogUser.vis"
      width="90%"
      top="50px"
    >
      <template v-if="dataInfo.base">
        <el-table
          :data="dialogUser.list"
        >
          <el-table-column
            type="index"
            label="序号"
            align="center"
          />
          <el-table-column
            prop="nickname"
            label="昵称"
            align="center"
          />
          <el-table-column
            prop="realname"
            label="真实姓名"
            align="center"
          />
          <el-table-column
            prop="account"
            label="总金额"
            align="center"
          />
          <!-- <el-table-column
            prop="pay_account"
            label="已支付"
            align="center"
          /> -->
        </el-table>
      </template>
    </el-dialog>
  </div>
</template>

<script>
document.title = '活动-订货数据实时更新'
import { isPC } from '@/utils'
import { getSizeList, provinceTeam, baseData, crownList } from '@/api/datascreen'
export default {
  name: 'DataScreen4',
  props: {},
  data() {
    return {
      showDataType: 0,
      width: document.body.offsetWidth,
      moduleListNav: [
        { value: 0, name: '各省排名' },
        { value: 1, name: '代理公司排名' },
        { value: 2, name: '尺码明细' }
      ],
      dataPasswordVis: true,
      dataPassword: '',
      dataInfo: {
        base: null,
        crown: [],
        size: []
      },
      dialogUser: {
        list: [],
        title: '',
        vis: false
      }
    }
  },
  watch: {
    dataPasswordVis(a) {
      a ? null : this.init()
    }
  },
  created() {
    if (isPC()) {
      this.$router.replace({ path: '/1' })
      return
    }
    if (this.getCookie('dataPasswordAdmin')) {
      this.dataPasswordVis = false
      this.init()
    } else {
      this.dataPasswordVis = true
      this.$nextTick(() => {
        var userName = document.getElementById('userName')
        userName.focus()
      })
    }
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    toSeeHonorUser(list, title) {
      this.dialogUser.list = list
      this.dialogUser.title = title
      this.dialogUser.vis = true
    },
    init() { // 初始话
      this.mergeAllData()
      this.timer = setInterval(() => {
        this.mergeAllData()
      }, 1000 * 30)
    },
    mergeAllData() { // 统一请求
      const loading = this.$loading()
      Promise.all([this.getBaseData(), this.getCrownData(), this.getSizeData()]).then(res => {
        loading.close()
        this.dataInfo.base = res[0]
        this.dataInfo.crown = res[1]
        this.dataInfo.size = res[2]
        this.dataInfo.base.list.sort((a, b) => b.value - a.value)
        this.baseDataChange(res[0])
      }).catch(e => {
        console.log(e)
        loading.close()
        this.$message.error(e || '获取数据失败')
      })
    },
    getBaseData() { // 基础数据
      return new Promise((resolve, reject) => {
        baseData().then(res => {
          if (res.code === 200) {
            res.data.down_user.up = res.data.down_user.up.sort((a, b) => b.account - a.account)
            res.data.down_user.down = res.data.down_user.down.sort((a, b) => b.account - a.account)
            Object.keys(res.data.honor_num).forEach(k => {
              res.data.honor_num[k]['user'] = res.data.honor_num[k]['user'].sort((a, b) => b.account - a.account)
            })
            resolve(res.data)
          } else {
            reject(res.message)
          }
        }).catch(e => {
          reject(e)
        })
      })
    },
    getCrownData() { // 皇冠数据
      return new Promise((resolve, reject) => {
        crownList().then(res => {
          if (res.code === 200) {
            resolve(res.data.list.sort((a, b) => b.money - a.money))
          } else {
            reject(res.message)
          }
        }).catch(e => {
          reject(e)
        })
      })
    },
    getSizeData() { // 尺码数据
      return new Promise((resolve, reject) => {
        getSizeList().then(res => {
          if (res.code === 200) {
            resolve(res.data.list.sort((a, b) => b.num - a.num))
          } else {
            reject(res.message)
          }
        }).catch(e => {
          reject(e)
        })
      })
    },
    baseDataChange(data) { // 地图处理
      let max = 0
      let maxIndex = 0
      data.list.forEach((e, i) => {
        if (e.value > max) {
          max = e.value
          maxIndex = i
        }
      })
      const step = Math.floor(max / 6)
      this.$nextTick(() => {
        this.echarts = window.echarts.init(document.getElementById('china4'))
        this.echarts.setOption({
          backgroundColor: '#FFFFFF',
          textStyle: {
            fontSize: 6
          },
          tooltip: {
            trigger: 'item',
            enterable: true,
            alwaysShowContent: false,
            formatter: params => {
              this.$emit('renderDetail', params.dataIndex)
              return `
                <div id="s_map_tip">
                  <div id="TooltipInfo">
                    <div>${params.name}</div>
                    <div>排名: <span>${params.dataIndex + 1}</span></div>
                    <div>总金额: <span>${params.value}</span></div>
                    <div>精装版：<span>${data.list[params.dataIndex].hard}</span></div>
                    <div>老人版：<span>${data.list[params.dataIndex].old}</span></div>
                  </div>
                </div>
              `
              // return `
              //   <div id="s_map_tip">
              //     <div id="TooltipInfo">
              //       <div>${params.name}</div>
              //       <div>排名: <span>${params.dataIndex + 1}</span></div>
              //       <div>总金额: <span>${params.value}</span></div>
              //       <div>精装版：<span>${data.list[params.dataIndex].hard}</span></div>
              //       <div>简约版：<span>${data.list[params.dataIndex].simple}</span></div>
              //       <div>老人版：<span>${data.list[params.dataIndex].old}</span></div>
              //       <div>棉老版：<span>${data.list[params.dataIndex].newold}</span></div>
              //     </div>
              //   </div>
              // `
            }
          },
          visualMap: {
            show: true,
            x: 'left',
            y: 'bottom',
            splitList: [
              { start: step * 6, end: step * 7, label: `${step * 6} - ${step * 7} 元` },
              { start: step * 5, end: step * 6, label: `${step * 5} - ${step * 6} 元` },
              { start: step * 4, end: step * 5, label: `${step * 4} - ${step * 5} 元` },
              { start: step * 3, end: step * 4, label: `${step * 3} - ${step * 4} 元` },
              { start: step * 2, end: step * 3, label: `${step * 2} - ${step * 3} 元` },
              { start: step * 1, end: step * 2, label: `${step * 1} - ${step * 2} 元` },
              { start: 1, end: step * 1, label: `${1} - ${step * 1} 元` },
              { start: 0, end: 0, label: '0 元' }
            ],
            itemGap: 0,
            itemWidth: 8,
            itemHeight: 5.6,
            textStyle: {
              fontSize: 8
            },
            color: ['#FF4C4C', '#FF6666', '#FF7F7F', '#FF9999', '#FFB2B2', '#FFCCCC', '#FFE5E5', '#EFEFEF']
          },
          series: [{
            name: '销售套数',
            type: 'map',
            mapType: 'china',
            aspectScale: 1,
            zoom: 1.23,
            label: {
              normal: { show: true },
              emphasis: { show: true }
            },
            data: data.list
          }],
          animation: true
        })
        if (!this.click) {
          this.click = true
          this.echarts.on('click', params => {
            console.log(params)
          })
        }
        this.echarts.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: maxIndex
        })
      })
    },
    getPer(num) { // 百分比
      const { hard_money, old_money, simple_money, newold_money } = this.dataInfo.base
      const all = hard_money + old_money + simple_money + newold_money
      if (all === 0) {
        return 0
      }
      const per = Math.floor(num / all * 10000) / 100
      const last = per.toFixed(1)
      return last
    },
    checkDataPassword() { // 密码检测
      if (this.dataPassword === '000') {
        // 密码存储日期 15天
        this.setCookie('dataPasswordAdmin', this.dataPassword, 'd15')
        this.dataPasswordVis = false
      } else {
        if (!this.dataPassword) {
          this.$message.error('请输入密码')
        } else {
          this.$message.error('密码错误')
        }
      }
    },
    setCookie(name, value, time) {
      var strsec = this.getsec(time)
      var exp = new Date()
      exp.setTime(exp.getTime() + strsec * 1)
      document.cookie = name + '=' + escape(value) + ';expires=' + exp.toGMTString()
    },
    getsec(str) {
      var str1 = str.substring(1, str.length) * 1
      var str2 = str.substring(0, 1)
      if (str2 === 's') {
        return str1 * 1000
      } else if (str2 === 'h') {
        return str1 * 60 * 60 * 1000
      } else if (str2 === 'd') {
        return str1 * 24 * 60 * 60 * 1000
      }
    },
    getCookie(name) {
      var arr = new RegExp('(^| )' + name + '=([^;]*)(;|$)')
      var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)')
      if (document.cookie.match(reg)) {
        arr = document.cookie.match(reg)
        return unescape(arr[2])
      } else {
        return null
      }
    },
    async openProvinceTeam(row, v) { // 省排名展开
      if (row.list === undefined) {
        this.loading = this.$loading()
        const res = await provinceTeam({ province: row.name })
        this.loading.close()
        row.list = res.data.sort((a, b) => b.acc - a.acc)
        this.$refs.table.toggleRowExpansion(row) // 收取折叠表格
        this.$refs.table.toggleRowExpansion(row) // 再次展开强制渲染
      }
    },
    sizeNumSort(a, b) { // 尺码排序
      return a.num - b.num
    }
  }
}
</script>

<style lang="scss" scoped>
  .data-screen2 {
    background:#f9f9fb;
    /deep/ .el-dialog__wrapper {
      z-index: 999999999 !important;
    }
    p {
      margin: 0;
    }
    .s_top {
      width: 100%;
      height: 174px;
      background-image: url(../../assets/data_display/top_bg.png);
      background-size: 100% auto;
      background-repeat: no-repeat;
      background-position: 50% 50%;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      padding: 20px 15px;
      box-sizing: border-box;
      color: #ffffff;
      flex-direction: column;
      .s_top_title {
        font-size: 30px;
        margin-bottom: 6px;
        font-weight: bold;
      }
      .s_top_name {
        font-size: 12px;
      }
    }
    .s_money {
      width: calc(100% - 30px);
      margin: 0 auto;
      margin-top: -80px;
      height: 163px;
      background-position: 0% 50%;
      background-size: 100% auto;
      background-color: #ffffff;
      border-radius: 12px;
      position: relative;
      .s_money_value {
            background:#EA4A41;
            text-align: center;
            width:92%;
            border-radius: 8px;
            height:70px;
            line-height:70px;
        position: absolute;
        color: #ffffff;
        font-size: 44px;
        left: 50%;
        top: 20px;
        transform: translateX(-50%);
      }
      .s_money_unit {
        position: absolute;
        color: #ffffff;
        color: #ffffff;
        font-size: 12px;
        left: 50%;
        top: 100px;
        transform: translateX(-50%);
      }
      .s_money_spec{
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: calc(100% - 70px);
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #333333;
        font-size: 12px;
        &.s_money_ly{
          bottom: 42px;
        };
        &.s_money_wq{
          bottom: 20px;
        }
      }
    }
    .s_module_title {
      height: 52px;
      width: calc(100% - 30px);
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      p{
        color: #333333;
        font-size: 16px;
      }
      &::before {
        content: "";
        display: block;
        width: 14px;
        height: 8px;
        background-image: url(../../assets/data_display/s_module_icon.png);
        background-size: 100%;
        background-repeat: no-repeat;
        margin-right: 5px;
      }
    }
    .s_goods {
      width: calc(100% - 30px);
      margin: 0 auto;
      .s_goods_item {
        width: 100%;
        height: 120px;
        background-repeat: no-repeat;
        background-size: 100%;
        margin-bottom: 15px;
        background-color: #ffffff;
        &:nth-last-of-type(1) {
          margin-bottom: 0;
        }
        padding: 15px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        .item_title {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          margin-bottom: 16px;
          .item_title_icon{
            width: 18px;
            height: 20px;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: 50% 50%;
            margin-right: 5px;
          }
          p {
            color: #333333;
            font-size: 16px;
          }
        }
        .item_data {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          flex: 1;
          overflow: hidden;
          padding-left: 12px;
          .item_data_child {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-direction: column;
            // flex: 1;
            height: 100%;
            overflow: hidden;
            &:nth-of-type(1) {
              p:nth-of-type(1) {
                color: #3394F8 !important;
              }
            }
            &:nth-of-type(2) {
              p:nth-of-type(1) {
                color: #EA4A41 !important;
              }
            }
            &:nth-of-type(3) {
              p:nth-of-type(1) {
                color: #FF9E00 !important;
              }
            }
            &:nth-of-type(4) {
              p:nth-of-type(1) {
                color: #333333 !important;
              }
            }
            p {
              &:nth-of-type(1) {
                font-size: 20px;
              }
              &:nth-last-of-type(1) {
                color: #999999;
                font-size: 14px;
              }
            }
          }
        }
      }
    }
    .s_honor {
      width: calc(100% - 30px);
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      flex-wrap: wrap;
      .s_honor_item {
        width: 105px;
        height: 105px;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 50% 50%;
        margin-right: 15px;
        border-radius: 12px;
        margin-bottom: 15px;
        &:nth-of-type(3n) {
          margin-right: 0;
        }
        position: relative;
        p {
          position: absolute;
          left: 15px;
          color: #FFFFFF;
          &:nth-of-type(1) {
            bottom: 32px;
            font-size:24px;
          }
          &:nth-last-of-type(1) {
            bottom: 12px;
            font-size: 12px;
          }
        }
      }
    }
    .s_all {
      width: calc(100% - 30px);
      height: 120px;
      background-repeat: no-repeat;
      background-size: 100%;
      background-position: 50% 50%;
      margin: 0 auto;
      margin-bottom: 15px;
      position: relative;
      .s_all_num {
        position: absolute;
        font-size: 32px;
        color: #333333;
        left: 67px;
        bottom: 50px;
      }
      .s_all_text {
        color: #999999;
        font-size: 14px;
        position: absolute;
        left: 67px;
        bottom: 30px;
      }
    }
    .s_gift{
      .s_gift_item {
        background: #ffffff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-direction: column;
        padding: 18px 0;
        box-sizing: border-box;
        &:nth-of-type(1) {
          p:nth-of-type(2) {
            background: linear-gradient(to right, #A3CFF9, #487FE5)
          }
        }
        &:nth-of-type(2) {
          p:nth-of-type(2) {
            background: linear-gradient(to right, #FF7801, #FE1F00)
          }
        }
        &:nth-of-type(3) {
          p:nth-of-type(2) {
            background: linear-gradient(to right, #FBA753, #FA803C)
          }
        }
        p{
          text-align: center;
          width: 100%;
          position: initial;
          &:nth-of-type(1) {
            font-size: 24px;
          }
          &:nth-of-type(2) {
            width: 22px;
            height: 4px;
            border-radius: 4px;
          }
          &:nth-last-of-type(1) {
            color: #333333;
            font-size: 12px;
          }
        }
      }
    }
    .s_map_title {
      background-color: #ffffff;
      width: 100%;
      padding: 0 15px;
    }
    .s_map {
      width: 100%;
      background-color: #ffffff;
      padding: 15px;
      margin-bottom: 2px;
      .s_map_container {
        width: 100%;
        margin: 0 auto;
        height: 254px;
      }
    }
    .s_table_nav {
      width: 100%;
      padding: 15px;
      padding-bottom: 30px;
      box-sizing: border-box;
      background: #ffffff;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      p {
        color: #999999;
        font-size: 14px;
        margin-right: 15px;
        &:nth-last-of-type(1) {
          margin-right: 0;
        }
        position: relative;
        &.active {
          color: #333333 !important;
          &::after {
            position: absolute;
            content: "";
            display: block;
            left: 50%;
            margin-top: 5px;
            transform: translateX(-50%);
            width: 17px;
            height: 4px;
            border-radius: 4px;
            background: linear-gradient(to right, #F97C55, #F44545);
          }
        }
      }
    }
    .s_standard {
      width: calc(100% - 30px);
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 15px;
      .s_standard_item {
        width: 165px;
        height: 97px;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 50% 50%;
        position: relative;
        p{
          position: absolute;
          color: #ffffff;
          left: 15px;
          &:nth-of-type(1) {
            font-size: 24px;
            bottom: 40px;
          }
          &:nth-last-of-type(1) {
            font-size: 14px;
            bottom: 15px;
          }
        }
      }
    }
    .header {
      height: 60px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #43464D;
      font-size: 18px;
      font-weight: bold;
      box-sizing: border-box;
      padding: 0 8px;
      background: #F5F5F5;
      .el-select {
        width: 160px;
      }
    }
    .table-wrapper {
      width: 100vw;
      padding: 0;
    }
    .table-wrapper5 {
      >.el-table {
        >>> td[class^="el-table_6_column_"] {
          padding: 0;
          display: table-cell;
        }
        >>> .cell {
          padding: 0;
        }
        .merge-item-item {
          font-size: 12px;
          line-height: 36px;
          border-bottom: 1px solid rgb(223, 230, 236);
        }
        .merge-item-item:last-child {
          border-bottom: none;
        }
      }
    }
    .el-table >>> .el-table__header-wrapper {
      font-size: 3.11vw;
    }
    .el-table >>> .el-table__expanded-cell {
      padding: 0 8px 8px;
    }
  }
  /deep/ #s_map_tip {
    padding: 6px;
    box-sizing: border-box;
    #TooltipInfo{
      flex: 1;
      height: 100%;
      font-size: 8px;
      line-height: 12px;
      div{
        margin-bottom: 8px;
        &:nth-last-of-type(1) {
          margin-bottom: 0;
        }
        &:nth-of-type(1) {
          font-size: 14px;
        }
        span {
          color: #F2F204;
          display: inline-block;
        }
      }
    }
  }
  .data_password {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: #fff;
  }
</style>
