<template>
  <div v-loading.body.fullscreen="fullscreenLoading" element-loading-background="rgba(255, 255, 255, 0)">
    <div class="container" :class="{app: appFlag}">
      <div class="header flex" v-if="!appFlag">
        <img @click="cancel" class="icon" src="/img/icon/back2.png" alt="极度证券">
        <div>
          <!-- 新手活动 -->
          {{ $t('activities.l') }}
        </div>
      </div>
      <div class="title">
        <!-- 新人福利 最高可达 -->
        {{ $t('activities.l1') }}
      </div>
      <div class="rule-box" :class="{cn: language == 'zh-CN' || language == 'zh-TW'}" @click="rulePop = true">
        <!-- 活动规则 -->
        {{ $t('share.l39') }}
      </div>
      <div class="box flex">
        <div class="bg">1800 USD</div>
      </div>
      <div class="box1">
        <div class="sub">
          <!-- 新人见面礼 -->
          {{ $t('activities.l2') }}
        </div>
        <div class="sub1">
          <!-- 注册即送 -->
          {{ $t('activities.l3') }} <span class="span">1200 USD</span>
        </div>
        <van-row gutter="10">
          <van-col span="12">
            <div class="cell">
              <div class="top flex">
                <div class="radius radius1"></div>
                <div>
                  <div class="number-box">
                    <div class="number">1000</div>
                    <div>USD</div>
                  </div>
                  <div class="icon-box">
                    <img class="icon" src="/img/activities/icon1.png" alt="jdnx">
                    <div>
                      <!-- 抵扣券-注册即送 -->
                      {{ $t('activities.l4') }}
                    </div>
                  </div>
                </div>
                <div class="radius radius2"></div>
              </div>
              <div class="bottom" v-if="isLogin">
                <!-- 已赠送 -->
                {{ $t('activities.l5') }}
              </div>
              <div class="bottom cursor" @click="$router.push('/login?rejectUrl=' + '/newbie/activities')" v-else>
                <!-- 立即领取 -->
                {{ $t('share.l50') }}
              </div>
            </div>
          </van-col>
          <van-col span="12">
            <div class="cell">
              <div class="top flex">
                <div class="radius radius1"></div>
                <div>
                  <div class="number-box">
                    <div class="number">200</div>
                    <div>USD</div>
                  </div>
                  <div class="icon-box">
                    <img class="icon" src="/img/activities/icon2.png" alt="jdnx">
                    <div>
                      <!-- 赠金-完成KYC即送 -->
                      {{ $t('activities.l14') }}
                    </div>
                  </div>
                </div>
                <div class="radius radius2"></div>
              </div>
              <div class="bottom" @click="toAuth" :class="{'cursor': userInfo.identity_status !== 1}">
                {{ userInfo.identity_status !== 1 ? $t('share.l50') : $t('activities.l5') }}
                <!-- 立即领取 -->
              </div>
            </div>
          </van-col>
        </van-row>
      </div>
      <div class="box2">
        <div class="section">
          <div class="sub">
            <!-- 交易挑战福利 -->
            {{ $t('activities.l6') }}
          </div>
          <div class="flex icon-box">
            <img class="icon" src="/img/activities/icon3.png" alt="jdnx">
            <div class="flex">
              <div>
                <!-- 现金券 -->
                {{ $t('share.l9') }}
              </div>
              <div class="span">600 USD</div>
            </div>
          </div>
          <!-- 完成交易量任务，即可获得累计 <span class="span">600 USD</span> 现金券 -->
          <div class="col" v-html="getHtml('activities.l7', '600 USD')">
          </div>
          <div class="icon-box1">
            <img class="icon" src="/img/activities/icon3.png" alt="jdnx">
            <div class="flex">
              <div>
                <!-- 已获得现金券 -->
                {{ $t('share.l53') }}
              </div>
              <div class="span">{{ amount }} USD</div>
            </div>
          </div>
          <div class="sub2">
            <!-- 当前股票交易金额 -->
            {{ $t('activities.l8') }}
          </div>
          <div class="progress-bar">
            <van-row class="top" type="flex">
              <van-col v-for="(item, index) in ruleList" :key="item.id" :span="index == (ruleList.length - 1) ? 9 : index == (ruleList.length - 2) ? 6 : 5">
                <div class="flex">
                  <div :class="{'cell-top': index != (ruleList.length - 1)}">{{item.trade_shares}}USD</div>
                </div>
              </van-col>
            </van-row>
            <van-row type="flex">
              <van-col v-for="(item, index) in ruleList" :key="item.id" :span="index == (ruleList.length - 1) ? 9 : index == (ruleList.length - 2) ? 6 : 5">
                <div class="cell" :class="{'cell1': index != 0 && index != (ruleList.length - 1),'cell2': index == (ruleList.length - 1)}">
                  <div class="bg" :style="{width: (getWidth(index) > 100 ? '100' : getWidth(index)) + '%'}" v-if="getWidth(index) != 0 && sumOrder.shares_amount">
                    <template v-if="index != (ruleList.length - 1)">
                      {{getWidth(index) > 100 ? '' : ((Math.floor(sumOrder.shares_amount) || 0) + 'USD')}}
                    </template>
                    <template v-else>
                      {{getWidth(index) > 0 ? ((Math.floor(sumOrder.shares_amount) || 0) + 'USD') : ''}}
                    </template>
                  </div>
                </div>
              </van-col>
            </van-row>
            <van-row class="bottom" type="flex">
              <van-col v-for="(item, index) in ruleList" :key="item.id" :span="index == (ruleList.length - 1) ? 9 : index == (ruleList.length - 2) ? 6 : 5">
                <div class="flex">
                  <template v-if="sumOrder.shares_amount < item.trade_shares || !isLogin">
                    <div :class="index != (ruleList.length - 1) ? 'cell-bottom' : 'cell-bottom1'">
                      <div class="flex">
                        <img class="icon" src="/img/activities/status0.png" alt="">
                        <div>{{ item.amount }}</div>
                      </div>
                      <div class="btn">
                        <!-- 未达成 -->
                        {{ $t('activities.l9') }}
                      </div>
                    </div>
                  </template>
                  <template v-else-if="!cardedObj[item.id]">
                    <div class="status1" :class="index != (ruleList.length - 1) ? 'cell-bottom' : 'cell-bottom1'">
                      <div class="flex">
                        <img class="icon" src="/img/activities/status1.png" alt="">
                        <div>{{ item.amount }}</div>
                      </div>
                      <div class="btn active" v-if="cardObj[item.id]" @click="openCardOrder(cardObj[item.id])">
                        <!-- 可领取 -->
                        {{ $t('activities.l10') }}
                      </div>
                    </div>
                  </template>
                  <template v-else>
                    <div class="status2" :class="index != (ruleList.length - 1) ? 'cell-bottom' : 'cell-bottom1'">
                      <div class="flex">
                        <img class="icon" src="/img/activities/status2.png" alt="">
                        <div>{{ item.amount }}</div>
                      </div>
                      <div class="btn">
                        <!-- 已领取 -->
                        {{ $t('share.l') }}
                      </div>
                    </div>
                  </template>
                </div>
              </van-col>
            </van-row>
          </div>
          <div class="sub2">
            <!-- 当前综合交易手数 -->
            {{ $t('activities.l11') }}
          </div>
          <div class="tip">
            <!-- (综合交易手数仅统计外汇、贵金属、能源及BTC、ETH) -->
            {{ $t('activities.l12') }}
          </div>
          <div class="progress-bar">
            <van-row class="top" type="flex">
              <van-col v-for="(item, index) in ruleList" :key="item.id" :span="index == (ruleList.length - 1) ? 9 : index == (ruleList.length - 2) ? 6 : 5">
                <div class="flex">
                  <div :class="{'cell-top': index != (ruleList.length - 1)}">
                    <!-- 60手 -->
                    {{ $t('activities.l31').replace('{p}', item.trade_cfd) }}
                  </div>
                </div>
              </van-col>
            </van-row>
            <van-row type="flex">
              <van-col v-for="(item, index) in ruleList" :key="item.id" :span="index == (ruleList.length - 1) ? 9 : index == (ruleList.length - 2) ? 6 : 5">
                <div class="cell" :class="{'cell1': index != 0 && index != (ruleList.length - 1),'cell2': index == (ruleList.length - 1)}">
                  <div class="bg" :style="{width: (getWidth1(index) > 100 ? '100' : getWidth1(index)) + '%'}" v-if="getWidth1(index) != 0 && sumOrder.cfd_volume">
                    <template v-if="index != (ruleList.length - 1)">
                      {{getWidth1(index) > 100 ? '' : $t('activities.l31').replace('{p}', Math.floor(sumOrder.cfd_volume || 0))}}
                    </template>
                    <template v-else>
                      {{getWidth1(index) > 0 ? $t('activities.l31').replace('{p}', Math.floor(sumOrder.cfd_volume || 0)) : ''}}
                    </template>
                  </div>
                </div>
              </van-col>
            </van-row>
            <van-row class="bottom" type="flex">
              <van-col v-for="(item, index) in ruleList" :key="item.id" :span="index == (ruleList.length - 1) ? 9 : index == (ruleList.length - 2) ? 6 : 5">
                <div class="flex">
                  <template v-if="sumOrder.cfd_volume < item.trade_cfd || !isLogin">
                    <div :class="index != (ruleList.length - 1) ? 'cell-bottom' : 'cell-bottom1'">
                      <div class="flex">
                        <img class="icon" src="/img/activities/status0.png" alt="">
                        <div>{{ item.amount }}</div>
                      </div>
                      <div class="btn">
                        <!-- 未达成 -->
                        {{ $t('activities.l9') }}
                      </div>
                    </div>
                  </template>
                  <template v-else-if="!cardedObj[item.id]">
                    <div class="status1" :class="index != (ruleList.length - 1) ? 'cell-bottom' : 'cell-bottom1'">
                      <div class="flex">
                        <img class="icon" src="/img/activities/status1.png" alt="">
                        <div>{{ item.amount }}</div>
                      </div>
                      <div class="btn active" v-if="cardObj[item.id]" @click="openCardOrder(cardObj[item.id])">
                        <!-- 可领取 -->
                        {{ $t('activities.l10') }}
                      </div>
                    </div>
                  </template>
                  <template v-else>
                    <div class="status2" :class="index != (ruleList.length - 1) ? 'cell-bottom' : 'cell-bottom1'">
                      <div class="flex">
                        <img class="icon" src="/img/activities/status2.png" alt="">
                        <div>{{ item.amount }}</div>
                      </div>
                      <div class="btn">
                        <!-- 已领取 -->
                        {{ $t('share.l') }}
                      </div>
                    </div>
                  </template>
                </div>
              </van-col>
            </van-row>
          </div>
        </div>
        <div class="section1">
          <div class="wrapper flex" v-for="(item) in ruleList" :key="item.id">
            <div class="radius radius1"></div>
            <div class="left flex">
              <div>
                <div class="num-box">
                  <div class="num">{{ item.amount }}</div>
                  <div>USD</div>
                </div>
                <div class="flex icon-box">
                  <img class="icon" src="/img/activities/icon4.png" alt="jdnx">
                  <div>
                    <!-- 现金券 -->
                    {{ $t('share.l9') }}
                  </div>
                </div>
              </div>
            </div>
            <div class="right flex">
              <!-- 达成<span class="span">50000USD</span>股票交易额或<span class="span">25</span>综合交易手数可领取 -->
              <div class="text" v-html="getHtml2('activities.l13', item.trade_shares + 'USD', item.trade_cfd)">
              </div>
              <template v-if="(sumOrder.cfd_volume < item.trade_cfd && sumOrder.shares_amount < item.trade_shares) || !isLogin">
                <div class="btn btn1" @click="$router.push('/market/overview')">
                  <!-- 立即交易 -->
                  {{ $t('activities.l32') }}
                </div>
              </template>
              <template v-else-if="!cardedObj[item.id]">
                <div class="btn btn2" v-if="cardObj[item.id]" @click="openCardOrder(cardObj[item.id])">
                  <!-- 立即领取 -->
                  {{ $t('share.l50') }}
                </div>
                <div v-else class="btn btn1" @click="$router.push('/market/overview')">
                  <!-- 立即交易 -->
                  {{ $t('activities.l32') }}
                </div>
              </template>
              <template v-else>
                <div class="btn btn3">
                  <!-- 已领取 -->
                  {{ $t('share.l') }}
                </div>
              </template>
            </div>
            <div class="radius radius2"></div>
          </div>
        </div>
      </div>
    </div>
    <van-popup get-container="body" v-model="rulePop" round position="bottom">
      <rulePop :ruleList="ruleList" @cancel="rulePop = false" />
    </van-popup>
  </div>
</template>
<script>
import rulePop from "./components/rulePop.vue";
import { getSumCloseOrder, getCardOrderList, openCardOrder } from "@/api/share";
import { getParams } from "@/api/app";
export default {
  components: {
    rulePop
  },
  data () {
    return {
      rulePop: false,
      sumOrder: {},
      ruleList: [],
      cardObj: {},
      cardedObj: {},
      amount: 0
    }
  },
  watch: {
    'userInfo.uid'() {
      this.getSumCloseOrder()
    }
  },
  created () {
    if (this.isLogin) {
      this.getCardOrderList()
      if (this.userInfo.uid) {
        this.getSumCloseOrder()
      }
    }
    this.getParams()
  },
  methods: {
    openCardOrder(ordernum) {
      this.fullscreenLoading = true
      openCardOrder({
        ordernum: ordernum
      }).then(res => {
        this.getCardOrderList()
      }).catch(() => {
        this.fullscreenLoading = false
      }).finally(() => {
      })
    },
    getCardOrderList() {
      getCardOrderList({
        type: 13,
        // status: 2
      }).then(res => {
        var list = res.list || []
        list.forEach(item => {
          if (item.status == 2) {
            this.$set(this.cardedObj, item.card_id, item.ordernum)
            this.amount += item.balance
          } else {
            this.$set(this.cardObj, item.card_id, item.ordernum)
          }
        })
      }).catch(() => {
      }).finally(() => {
        this.fullscreenLoading = false
      })
    },
    getSumCloseOrder() {
      getSumCloseOrder({
        children: this.userInfo.uid
      }).then(res => {
        this.sumOrder = res || {}
      }).catch(() => {})
    },
    getParams() {
      getParams({
        type: 'Card',
        title: 'Trade',
      }).then(res => {
        if (res[0] && res[0].value) {
          this.ruleList = (JSON.parse(res[0].value) || []).filter(item => item.type == 13)
        }
      }).catch(() => {})
    },
    cancel() {
      if (window.history.length <= 2) {
        this.$router.replace('/')
      } else {
        this.$router.back()
      }
    },
    getWidth(index) {
      if (index == 0) {
        return (this.sumOrder.shares_amount / this.ruleList[index].trade_shares) * 100
      } else {
        if (this.sumOrder.shares_amount < this.ruleList[index-1].trade_shares) {
          return 0
        } else {
          if (this.sumOrder.shares_amount > this.ruleList[index].trade_shares) {
            return ((this.sumOrder.shares_amount) / this.ruleList[index].trade_shares) * 100
          }
          return ((this.sumOrder.shares_amount-this.ruleList[index-1].trade_shares) / (this.ruleList[index].trade_shares-this.ruleList[index-1].trade_shares)) * 100
        }
      }
    },
    getWidth1(index) {
      if (index == 0) {
        return (this.sumOrder.cfd_volume / this.ruleList[index].trade_cfd) * 100
      } else {
        if (this.sumOrder.cfd_volume < this.ruleList[index-1].trade_cfd) {
          return 0
        } else {
          if (this.sumOrder.cfd_volume > this.ruleList[index].trade_cfd) {
            return ((this.sumOrder.cfd_volume) / this.ruleList[index].trade_cfd) * 100
          }
          return ((this.sumOrder.cfd_volume-this.ruleList[index-1].trade_cfd) / (this.ruleList[index].trade_cfd-this.ruleList[index-1].trade_cfd)) * 100
        }
      }
    },
    toAuth() {
      if (!this.isLogin) {
        this.$router.push('/auth')
        return
      }
      if (this.userInfo.identity_status == 1) {
        return
      }
      this.fullscreenLoading = true
      this.$store.dispatch('getUserInfo').then(() => {
      }).finally(() => {
        this.fullscreenLoading = false
        if (this.userInfo.identity_status == 1) {
          this.$router.push('/auth-success')
          return
        }
        if (this.userInfo.identity_status == 4) {
          this.$router.push('/auth-fail')
          return
        }
        this.$router.push('/auth')
      })
    },
    getHtml(key, val) {
      return this.$t(key).replace('{p}', `<span class="span">${val}</span>`)
    },
    getHtml2(key, val, val1) {
      return this.$t(key).replace('{p}', `<span class="span">${val}</span>`).replace('{p1}', `<span class="span">${val1}</span>`)
    },
  }
}
</script>
<style lang="less" scoped>
.header {
  height: 50px;
  font-size: 16px;
  column-gap: 14px;
  .icon {
    width: 8px;
    display: block;
    cursor: pointer;
  }
}
.container {
  padding: 0 16px 30px;
  background-image: url('@/assets/img/activities/bg.png');
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-color: #32275C;
  position: relative;
  z-index: 2;
  color: #fff;
  &.app {
    padding-top: 52px;
  }
}
.title {
  font-weight: 600;
  font-size: 32px;
  text-align: center;
  padding-top: 5px;
  padding-bottom: 24px;
}
.rule-box {
  position: absolute;
  right: 0;
  top: 87px;
  text-align: center;
  background: #75B19D;
  border-radius: 4px 0px 0px 4px;
  padding: 6px 4px;
  font-size: 12px;
  color: #FFFFFF;
  line-height: 14px;
  &.cn {
    width: 24px;
  }
}
.box {
  justify-content: center;
  margin-bottom: 30px;
  font-weight: 600;
  font-size: 26px;
  color: #4670F6;
  .bg {
    width: 243px;
    line-height: 31px;
    background-image: url('@/assets/img/activities/bg1.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    text-align: center;
  }
}
.box1 {
  background: rgba(23, 23, 23, 0.2);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 23px 9px;
  margin-bottom: 20px;
  .sub {
    font-weight: 600;
    font-size: 24px;
    margin-bottom: 10px;
  }
  .sub1 {
    font-weight: 600;
    font-size: 20px;
    margin-bottom: 20px;
  }
  .cell {
    background: #F6F6F6;
    box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.2);
    border-radius: 10px;
  }
  .top {
    position: relative;
    border-bottom: 1px solid #EEEDED;
    height: 81px;
    padding: 5px 4px 5px 20px;
    overflow: hidden;
  }
  .radius {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: #292148;
  }
  .radius1 {
    left: -5px;
  }
  .radius2 {
    right: -5px;
  }
  .number-box {
    display: flex;
    align-items: baseline;
    font-weight: 600;
    color: #000000;
    font-size: 12px;
    margin-bottom: 4px;
    column-gap: 2px;
    .number {
      font-size: 22px;
    }
  }
  .icon-box {
    display: flex;
    align-items: flex-end;
    font-weight: 600;
    font-size: 12px;
    color: #888888;
    .icon {
      min-width: 14px;
      max-width: 14px;
      margin-right: 6px;
    }
  }
  .bottom {
    line-height: 37px;
    text-align: center;
    font-weight: 600;
    color: #888888;
    &.cursor {
      color: #4670F6;
      cursor: pointer;
    }
  }
}
.box2 {
  background: rgba(23, 23, 23, 0.2);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.section {
  padding: 23px 13px 9px 19px;
  .sub {
    font-weight: 600;
    font-size: 24px;
    margin-bottom: 9px;
  }
  .icon-box {
    font-weight: 600;
    font-size: 20px;
    margin-bottom: 13px;
    .icon {
      width: 20px;
      margin-right: 6px;
    }
  }
  .icon-box1 {
    display: flex;
    align-items: flex-end;
    margin-bottom: 24px;
    .icon {
      width: 16px;
      margin-right: 6px;
    }
  }
  .col {
    font-size: 14px;
    padding-bottom: 24px;
    border-bottom: 1px solid #554F6B;
    margin-bottom: 17px;
  }
  .sub2 {
    font-weight: 600;
    font-size: 16px;
  }
  .tip {
    font-size: 12px;
    color: #888888;
    padding-top: 8px;
  }
}
.progress-bar {
  padding-top: 20px;
  padding-bottom: 21px;
  font-size: 10px;
  color: #FFFFFF;
  .van-row--flex {
    flex-wrap: nowrap;
    overflow-x: auto;
  }
  .cell {
    border-radius: 2px 4px 4px 2px;
    background-color: #554F6B;
    height: 18px;
    position: relative;
    overflow: hidden;
    &.cell1 {
      border-radius: 4px;
    }
    &.cell2 {
      border-radius: 4px 2px 2px 4px;
    }
  }
  .bg {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-radius: 2px;
    background-color: #4670F6;
    padding-right: 6px;
    text-align: right;
    line-height: 18px;
    white-space: nowrap;
  }
  .top {
    padding-bottom: 10px;
    font-size: 10px;
    color: #FFFFFF;
    .van-col {
      position: relative;
      text-align: right;
      .flex {
        justify-content: flex-end;
      }
    }
    .cell-top {
      transform: translateX(50%);
    }
  }
  .bottom {
    font-size: 12px;
    color: #888888;
    padding-top: 8px;
    .van-col {
      position: relative;
      text-align: center;
      >.flex {
        justify-content: flex-end;
        .flex {
          align-items: flex-end;
          margin-bottom: 3px;
        }
      }
    }
    .cell-bottom {
      transform: translateX(50%);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .cell-bottom1 {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .status1 {
      color: #FCD434;
    }
    .status2 {
      color: #4670F6;
    }
    .icon {
      width: 12px;
      margin-right: 3px;
    }
    .btn {
      padding: 3px 6px;
      font-size: 12px;
      border-radius: 10px;
      &.active {
        background-color: #FCD434;
        color: #FFFFFF;
      }
    }
  }
}
.section1 {
  padding: 0 11px 19px;
  color: #092D4E;
  .wrapper {
    position: relative;
    background-color: #FFF5C9;
    border-radius: 10px;
    padding: 8px 0;
    overflow: hidden;
    &+.wrapper {
      margin-top: 14px;
    }
  }
  .radius {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    position: absolute;
    left: 89px;
    transform: translateX(-50%);
    background-color: #292148;
  }
  .radius1 {
    top: -5px;
  }
  .radius2 {
    bottom: -5px;
  }
  .left {
    padding: 4px 10px;
    border-right: 1px dashed #EEEDED;
    min-height: 56px;
    width: 89px;
  }
  .num-box {
    display: flex;
    align-items: baseline;
    font-weight: 600;
    font-size: 12px;
    color: #FFB000;
  }
  .num {
    padding-right: 2px;
    font-size: 22px;
    margin-bottom: 3px;
  }
  .icon-box {
    font-weight: 600;
    font-size: 12px;
    color: #092D4E;
    .icon {
      width: 14px;
      margin-right: 6px;
    }
  }
  .right {
    flex: 1;
    min-width: 0px;
    justify-content: center;
    column-gap: 8px;
    padding-left: 5px;
    .text {
      flex: 1;
      min-width: 0px;
      font-size: 12px;
      line-height: 16px;
    }
    .btn {
      padding: 0 6px;
      border-radius: 4px 0px 0px 4px;
      line-height: 28px;
      min-width: 68px;
      text-align: center;
      font-weight: 600;
      font-size: 12px;
      color: #FFFFFF;
    }
    .btn1 {
      background-color: #FCD434;
      cursor: pointer;
    }
    .btn2 {
      background-color: #4670F6;
      cursor: pointer;
    }
    .btn3 {
      background-color: #B6B6B6;
    }
  }
}
::v-deep {
  .sub1 {
    .span {
      color: #4670F6;
    }
  }
  .section {
    .icon-box {
      .span {
        color: #4670F6;
        padding-left: 10px;
      }
    }
    .icon-box1 {
      .span {
        color: #4670F6;
        padding-left: 6px;
        font-weight: 600;
      }
    }
    .col {
      .span {
        color: #4670F6;
        font-weight: 600;
      }
    }
  }
  .section1 {
    .span {
      color: #4670F6;
      font-weight: 600;
    }
  }
}
</style>