<template>
  <div class="data-screen1">
    <template v-if="data">
      <div class="title">
        <span class="name">活动订货数据实时追踪</span>
        <span>{{ data.activity_title }} （{{ data.activity_time }}）</span>
        <!-- <div class="countDown">距活动结束仅剩： {{ countDown }}</div> -->
      </div>
      <div class="style_data">
        <div class="style_left">
          <div class="style s_all">
            <p class="s_all_num">{{ data.hard * 3 + data.simple * 12 + data.old * 12 + data.newold * 18 }}</p>
            <p class="s_all_text">总条数</p>
          </div>
          <!-- <div class="style s_cotton">
            <div class="s_title">
              <img src="@/assets/order_goods/style_icon1.png" alt="">
              <span>大卫博士纯棉老人版</span>
            </div>
            <div class="s_detail">
              <div class="s_detail_item">
                <p>{{ data.newold }}</p>
                <p>数量</p>
              </div>
              <div class="s_detail_item">
                <p>{{ data.newold_money }}</p>
                <p>金额</p>
              </div>
              <div class="s_detail_item">
                <p>{{ data.newold_today }}</p>
                <p>新增</p>
              </div>
              <div class="s_detail_item">
                <p>{{ getPer(data.newold_money) }}%</p>
                <p>金额占比</p>
              </div>
            </div>
          </div> -->
          <div class="style s_old">
            <div class="s_title">
              <img src="@/assets/order_goods/style_icon2.png" alt="">
              <span>大卫博士老人版</span>
            </div>
            <div class="s_detail">
              <div class="s_detail_item">
                <p>{{ data.old }}</p>
                <p>数量</p>
              </div>
              <div class="s_detail_item">
                <p>{{ data.old_money }}</p>
                <p>金额</p>
              </div>
              <div class="s_detail_item">
                <p>{{ data.old_today }}</p>
                <p>新增</p>
              </div>
              <div class="s_detail_item">
                <p>{{ getPer(data.old_money) }}%</p>
                <p>金额占比</p>
              </div>
            </div>
          </div>
          <!-- <div class="style s_smiple">
            <div class="s_title">
              <img src="@/assets/order_goods/style_icon3.png" alt="">
              <span>大卫博士简约版</span>
            </div>
            <div class="s_detail">
              <div class="s_detail_item">
                <p>{{ data.simple }}</p>
                <p>数量</p>
              </div>
              <div class="s_detail_item">
                <p>{{ data.simple_money }}</p>
                <p>金额</p>
              </div>
              <div class="s_detail_item">
                <p>{{ data.simple_today }}</p>
                <p>新增</p>
              </div>
              <div class="s_detail_item">
                <p>{{ getPer(data.simple_money) }}%</p>
                <p>金额占比</p>
              </div>
            </div>
          </div> -->
          <div class="style s_tester">
            <div class="s_title">
              <img src="../../assets/order_goods/style_icon4.png" alt="">
              <span>大卫博士精装版</span>
            </div>
            <div class="s_detail">
              <div class="s_detail_item">
                <p>{{ data.hard }}</p>
                <p>数量</p>
              </div>
              <div class="s_detail_item">
                <p>{{ data.hard_money }}</p>
                <p>金额</p>
              </div>
              <div class="s_detail_item">
                <p>{{ data.hard_today }}</p>
                <p>新增</p>
              </div>
              <div class="s_detail_item">
                <p>{{ getPer(data.hard_money) }}%</p>
                <p>金额占比</p>
              </div>
            </div>
          </div>
        </div>
        <div class="style_right">
          <div class="right_top">
            <div
              v-for="(v, k, i) in data.honor_num"
              :key="k"
              class="gift"
              :style="
                `background-image: url(${require(`@/assets/order_goods/gift_bg_${i %
                  3}.png`)})`
              "
              @click="toSeeHonorUser(v.user, '大礼包名单')"
            >
              <p>{{ v.count }}</p>
              <p>{{ k }}</p>
            </div>
          </div>
          <div class="right_bottom">
            <div class="sum">
              <img src="@/assets/order_goods/money_bg.png" alt="">
              <div class="sum_del">
                <p>
                  {{ data.money }}
                </p>
                <p>金额/元</p>
              </div>
            </div>
            <div class="experience">
              <div>
                <p>吴桥体验店金额: {{ data["吴桥体验店"] }}</p>
                <p>临沭体验店金额: {{ data["临沭体验店"] }}</p>
              </div>
              <div>
                <p>
                  占比：{{
                    (
                      Math.floor((data["吴桥体验店"] / data.money) * 10000) / 100
                    ).toFixed(1) + "%"
                  }}
                </p>
                <p>
                  占比:
                  {{
                    (
                      Math.floor((data["临沭体验店"] / data.money) * 10000) / 100
                    ).toFixed(1) + "%"
                  }}
                </p>
              </div>
            </div>
          </div>
          <div class="s_standard">
            <div
              class="s_standard_item"
              :style="`background-image: url(${require(`@/assets/data_display/standard_0.png`)})`"
              @click="toSeeHonorUser(data.down_user.up, '达标名单')"
            >
              <p>{{ data.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(data.down_user.down, '未达标名单')"
            >
              <p>{{ data.down_info.down }}</p>
              <p>未达标</p>
            </div>
          </div>
        </div>
      </div>
      <!-- <div class="gift_box">
        <div class="gift_detail">
          <img src="@/assets/order_goods/bracelet.png" alt="">
          <p>{{ data.gifts_num['新年台历'] }}</p>
          <span>新年台历</span>
        </div>
        <div class="gift_detail">
          <img src="@/assets/order_goods/socks.png" alt="">
          <p>{{ data.gifts_num['远红外项链'] }}</p>
          <span>远红外项链</span>
        </div>
        <div class="gift_detail">
          <div class="more">
            +
          </div>
          <span>待定</span>
        </div>
      </div> -->
      <div class="gift_box s_gift">
        <div
          v-for="(v, k, i) in data.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 v-if="data.list" class="map">
        <div id="china3" style="width:100%;height:100%;" />
      </div>
      <div class="chooseBar">
        <div
          class="chooseItem"
          style="background: #A583F3;"
          @click="showDataType = 0"
        >
          各省排名
        </div>
        <div
          class="chooseItem"
          style="background: #24A8E8;"
          @click="showDataType = 1"
        >
          代理公司排名
        </div>
        <div
          class="chooseItem"
          style="background: #7fd74d;"
          @click="showDataType = 2"
        >
          尺码明细
        </div>
      </div>
      <div v-show="showDataType === 0" class="header">
        <span>各省排名</span>
      </div>
      <div v-show="showDataType === 0" id="table-wrapper" class="table-wrapper">
        <el-table
          v-if="data.list"
          ref="table"
          :key="showDataType"
          :data="data.list"
          style="width: 100%"
          border
        >
          <el-table-column
            label="排名"
            type="index"
            align="center"
            :index="index => index + 1"
          />
          <el-table-column label="地区" prop="name" align="center" />
          <el-table-column label="精装版数量" prop="hard" align="center" />
          <!-- <el-table-column label="简约版数量" prop="simple" align="center" /> -->
          <el-table-column label="老人版数量" prop="old" align="center" />
          <!-- <el-table-column label="纯棉老人版数量" prop="newold" align="center" /> -->
          <el-table-column label="总金额" prop="value" align="center" />
        </el-table>
      </div>
      <div v-if="showDataType === 1" class="header">
        <span>代理公司排名</span>
      </div>
      <div v-if="showDataType === 1" class="table-wrapper table-wrapper-rank">
        <el-table :key="showDataType" :data="crownRank" style="width: 100%" border>
          <el-table-column
            label="排名"
            type="index"
            align="center"
            :index="index => index + 1"
          />
          <el-table-column label="代理公司" prop="nickname" align="center" />
          <el-table-column label="精装版" prop="hard" align="center" />
          <!-- <el-table-column label="简约版" prop="simple" align="center" /> -->
          <el-table-column label="老人版" prop="old" align="center" />
          <!-- <el-table-column label="纯棉老人版数量" prop="newold" align="center" /> -->
          <el-table-column label="销售金额" prop="money" align="center" />
        </el-table>
      </div>
      <div v-if="showDataType === 2" class="header">
        <span>尺码明细</span>
      </div>
      <div v-if="showDataType === 2" class="table-wrapper">
        <el-table :key="showDataType" :data="sizeList" 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>
      </div>
    </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="data">
        <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 axios from 'axios'
import { isPC, offset } from '@/utils'
import { deepClone } from '@/utils'
import { getSizeList } from '@/api/datascreen'

// import { getSizeList, goodTypeList, provinceTeam, baseData } from '@/api/datascreen'
export default {
  name: 'DataScreen1',
  data() {
    return {
      data: null,
      showDataType: -1,
      crownRank: [],
      n: 0,
      sizeList: [],
      dataPassword: '',
      dataPasswordVis: true,
      dialogUser: {
        list: [],
        title: '',
        vis: false
      }
    }
  },
  watch: {
    showDataType(n) {
      // 点击数据类型
      if (n === 1) {
        this.loading = this.$loading()
        axios
          .get('//api.admin.app.jiuweiyun.cn/api/data/get_crown')
          .then(({ data: { data: { list }}}) => {
            list.sort((a, b) => b.money - a.money)
            this.crownRank = list
            this.loading.close()
          })
      } else if (n === 2) {
        this.getSizeList()
      }
      this.$nextTick(() => {
        window.scrollTo(
          0,
          document.getElementsByClassName('chooseBar')[0].offsetTop
        )
      })
    },
    dataPasswordVis(a) {
      a ? null : this.init()
    }
  },
  created() {
    if (!isPC()) {
      this.$router.replace({ path: '/2' })
      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.request()
      this.timer = setInterval(() => {
        this.requset()
      }, 1000 * 30)
    },
    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
      }
    },
    getPer(num) {
      const all =
        this.data.hard_money +
        this.data.old_money +
        this.data.simple_money +
        this.data.newold_money
      if (all === 0) {
        return 0
      }
      const per = Math.floor((num / all) * 10000) / 100
      const last = per.toFixed(1)
      return last
    },
    sizeNumSort(a, b) {
      return a.num - b.num
    },
    getSizeList() {
      getSizeList().then(res => {
        if (res.code === 200) {
          this.sizeList = res.data.list
        }
      })
    },
    request() {
      this.loading = this.$loading()
      axios
        .get('//api.admin.app.jiuweiyun.cn/api/data/data')
        .then(({ data: res }) => {
          this.loading.close()
          this.data = res.data
          res.data.list.sort((a, b) => b.value - a.value)
          let max = 0
          let maxIndex = 0
          this.data.list.forEach((e, i) => {
            if (e.value > max) {
              max = e.value
              maxIndex = i
            }
          })
          const step = Math.floor(max / 6)
          this.$nextTick(() => {
            const echarts = window.echarts.init(
              document.getElementById('china3')
            )
            echarts.setOption({
              backgroundColor: '#FFFFFF',
              tooltip: {
                trigger: 'item',
                alwaysShowContent: true,
                formatter: params => {
                  return `
                  省份：${params.name} <br />
                  排名：${params.dataIndex + 1} <br />
                  总订货金额：${params.value} <br />
                  精装版套数：${this.data.list[params.dataIndex].hard} <br />
                  老人版件数：${this.data.list[params.dataIndex].old} <br />
                `
                }
                //   return `
                //   省份：${params.name} <br />
                //   排名：${params.dataIndex + 1} <br />
                //   总订货金额：${params.value} <br />
                //   精装版套数：${this.data.list[params.dataIndex].hard} <br />
                //   简约版件数：${this.data.list[params.dataIndex].simple} <br />
                //   老人版件数：${this.data.list[params.dataIndex].old} <br />
                // `
                // }
              },
              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 元' }
                ],
                color: [
                  '#30A6FE',
                  '#44AFFE',
                  '#5CB9FE',
                  '#71C2FE',
                  '#89CDFF',
                  '#A5D8FE',
                  '#C5E5FD',
                  '#EFEFEF'
                ]
              },
              series: [
                {
                  name: '销售套数',
                  type: 'map',
                  mapType: 'china',
                  aspectScale: 1,
                  zoom: 1.23,
                  label: {
                    normal: { show: true },
                    emphasis: { show: true }
                  },
                  data: this.data.list
                }
              ]
            })
            if (!this.click) {
              this.click = true
              echarts.on('click', params => {
                this.tabbleChartData = deepClone(this.data.list)
                this.dispatchClick = true
                this.showDataType = 0
                this.$nextTick(() => {
                  const to = document.getElementsByClassName('el-table__row')[
                    params.dataIndex
                  ]
                  window.scrollTo(0, offset(to).top)
                })
              })
            }
            echarts.dispatchAction({
              type: 'showTip',
              seriesIndex: 0,
              dataIndex: maxIndex
            })
          })
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.data-screen1 {
  // padding: 0.5vw 1vw;
  box-sizing: border-box;
  background: #f2f4f5;
  .title {
    // height: 128px;
    text-align: left;
    height: 88px;
    line-height: 88px;
    padding-left: 41px;
    width: 100%;
    background: #ffffff;
    // display: flex;
    // justify-content: space-around;
    // align-items: center;
    // flex-direction: column;
    font-weight: bold;
    div {
      font-size: 18px;
    }
    .name {
      font-size: 24px;
      color: #ea4a41;
    }
    .countDown {
      color: red;
    }
  }
  .topData {
    background: white;
    display: flex;
    justify-content: space-between;
    .topData_left {
      width: 240px;
      height: 240px;
      box-sizing: border-box;
      padding: 22px 10px;
      .cardItem {
        .right {
          font-size: 30px !important;
        }
      }
      background-image: url(../../assets/databg1.png);
      background-size: 100% 100%;
      .small {
        font-size: 20px;
      }
    }
    .topData_right {
      width: calc(100% - 250px);
      margin-left: 10px;
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      .cardItem {
        width: calc(100% / 4 - 10px);
        height: 115px;
        box-sizing: border-box;
        &:nth-of-type(5),
        &:nth-of-type(6),
        &:nth-of-type(7) {
          width: calc(100% / 3 - 10px);
        }
        .main {
          width: 100%;
          height: 100%;
          color: #ffffff;
          display: flex;
          justify-content: space-between;
          flex-direction: column;
          padding: 10px;
        }
        p {
          margin: 0 !important;
        }
        .name {
          font-size: 22px !important;
        }
        .all {
          font-size: 36px !important;
          text-align: right;
          .small {
            font-size: 20px;
          }
        }
        .today {
          font-size: 16px !important;
        }
      }
    }
    .cards {
      height: 8vw;
      display: flex;
      justify-content: space-between;
    }
    .cardItem {
      margin-right: 10px;
      &:nth-last-of-type(1) {
        margin-right: 0;
      }
      height: 100%;
      position: relative;
      z-index: 1;
      > .bg {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: -1;
      }
      > .data {
        height: 100%;
        color: white;
        box-sizing: border-box;
        padding: 1vw;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        > .top {
          display: flex;
          justify-content: space-between;
          > .left {
            font-size: 1.5vw;
          }
          > .right {
            font-size: 2vw;
            > span {
              font-size: 1.5vw;
            }
          }
        }
        > .bottom {
          display: flex;
          justify-content: space-between;
          align-items: flex-end;
          > .left {
            font-size: 2vw;
          }
          > .right {
            font-size: 0.83vw;
            > .reduce {
              color: #f7534f;
            }
          }
          &.small {
            > .left {
              font-size: 1vw !important;
            }
          }
        }
      }
    }
  }
  .chooseBar {
    overflow: hidden;
    .chooseItem {
      float: left;
      width: 10vw;
      height: 4.17vw;
      margin: 0.5vw 1.05vw;
      line-height: 4.17vw;
      text-align: center;
      cursor: pointer;
    }
  }
  .map {
    height: 567px;
    padding: 0 30px;
  }
  .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 40px;
    background: #f5f5f5;
  }
  .el-table {
    td,
    th,
    .label {
      padding: 8px 0;
      text-align: center;
    }
  }
  .table-wrapper {
    padding: 0 32px;
  }
  .table-wrapper5 {
    > .el-table {
      >>> td[class^="el-table_6_column_"] {
        padding: 0;
        display: table-cell;
      }
      >>> .cell {
        padding: 0;
      }
      .merge-item-item {
        font-size: 14px;
        line-height: 40px;
        border-bottom: 1px solid rgb(223, 230, 236);
      }
      .merge-item-item:last-child {
        border-bottom: none;
      }
    }
  }
}
.style_data {
  padding: 0 30px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  .style_left {
    width: 50%;
    .style {
      width: 867px;
      height: 233px;
      margin-top: 30px;
      &.s_all {
        background: url(../../assets/data_display/all.png) no-repeat center;
        background-size: 100%;
        position: relative;
        overflow: hidden;
        .s_all_num {
          position: absolute;
          font-size: 58px;
          color: #333333;
          left: 190px;
          bottom: 45px;
          width: max-content;
          text-align: center;
          color: #3394f8 !important;
        }
        .s_all_text {
          color: #000000;
          font-size: 28px;
          position: absolute;
          left: 185px;
          bottom: 35px;
        }
      }
      .s_title {
        padding: 30px 0 0 30px;
        span {
          font: size 24px;
          color: #333;
          font-weight: bold;
          margin-left:15px;
        }
      }
      img {
        background-size: 100% 100%;
        vertical-align: middle;
      }
      .s_detail {
        display: flex;
        justify-content: space-around;
        align-items: center;
        .s_detail_item {
          text-align: center;
          &: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:first-child {
            font-size: 42px;
            margin-bottom: 5px;
          }
          p:last-child {
            font-size: 18px;
          }
        }
      }
    }
    .s_cotton {
      background: url("../../assets/order_goods/style_bg1.png") no-repeat;
      img {
        width: 30px;
        height: 34px;
      }
    }
    .s_old {
      background: url("../../assets/order_goods/style_bg2.png") no-repeat;
      img {
        width: 30px;
        height: 29px;
      }
    }
    .s_smiple {
      background: url("../../assets/order_goods/style_bg3.png") no-repeat;
      img {
        width: 25px;
        height: 30px;
      }
    }
    .s_tester {
      background: url("../../assets/order_goods/style_bg4.png") no-repeat;
      img {
        width: 30px;
        height: 30px;
      }
    }
  }
  .style_right {
    width: 50%;
    margin-top: 30px;
    height: 100%;
    .right_top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .gift {
        color: #fff;
        width: 301px;
        height: 233px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: relative;
        &:not(:first-child) {
          margin-left: 30px;
        }
        p {
          position: absolute;
          color: #ffffff;
          left: 15px;
          &:first-child {
            font-size: 42px;
            bottom: 30px;
          }
          &:last-child {
            font-size: 18px;
            bottom: 15px;
          }
        }
      }
    }
    .right_bottom {
      background: #fff;
      margin-top: 30px;
      text-align: center;
      padding: 67px 0;
      border-radius: 12px;
      flex: 1;
      margin-bottom: 30px;
      .sum {
        position: relative;
        image {
          width: 100%;
          height: 472px;
        }
        .sum_del {
          position: absolute;
          top: 78px;
          left: 50%;
          transform: translateX(-50%);
          color: #fff;
          text-align: center;
          p {
            &:first-child {
              font-size: 77px;
              margin-bottom: 30px;
            }
            &:last-child {
              font-size: 43px;
            }
          }
        }
      }
      .experience {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        div {
          &:last-child {
            margin-left: 170px;
          }
        }
        p {
          font-size: 28px;
        }
      }
    }
    .s_standard {
      width: 100%;
      height: 233px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .s_standard_item {
        flex: 1;
        overflow: hidden;
        height: 100%;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 50% 50%;
        position: relative;
        margin-right: 15px;
        &:nth-last-of-type(1) {
          margin-right: 0;
          margin-left: 15px;
        }
        p{
          position: absolute;
          color: #ffffff;
          left: 50px;
          &:nth-of-type(1) {
            font-size: 58px;
            bottom: 40px;
          }
          &:nth-last-of-type(1) {
            font-size: 28px;
            bottom: 15px;
          }
        }
      }
    }
  }
}
.gift_box {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 30px 0;
  padding: 0 30px;
  // .gift_detail {
  //   width: 442px;
  //   height: 293px;
  //   background-color: #fff;
  //   display: flex;
  //   flex-direction: column;
  //   align-items: center;
  //   justify-content: center;
  //   border-radius: 12px;
  //   &:not(:first-child) {
  //     margin-left: 20px;
  //   }
  //   p {
  //     font-size: 53px;
  //     margin: 20px 0;
  //   }
  //   span {
  //     font-size: 22px;
  //   }
  //   .more {
  //     width: 76px;
  //     height: 76px;
  //     text-align: center;
  //     line-height: 76px;
  //     border-radius: 50%;
  //     background: #f8f8f8;
  //     font-size: 50px;
  //     color: #999;
  //     margin-bottom: 20px;
  //   }
  // }
}

    .s_gift{
      .s_gift_item {
        width: 442px;
        height: 293px;
        margin-right: 30px;
        background: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        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;
          margin: 0;
          &:nth-of-type(1) {
            font-size: 58px;
          }
          &:nth-of-type(2) {
            width: 30px;
            height: 4px;
            border-radius: 4px;
            margin: 30px 0;
          }
          &:nth-last-of-type(1) {
            color: #333333;
            font-size: 28px;
          }
        }
      }
    }
.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>
