<template>
  <div class="page">
    <img class="img" src="/img/promote/img.png" alt="极度证券">
    <div class="section">
      <div class="title">想投资股票期权</div>
      <div class="title">资金达不到准入资格？</div>
      <img class="img1" src="/img/promote/img1.png" alt="极度证券">
      <van-row gutter="8">
        <van-col span="12">
          <div class="box" :class="{up: symbolInfo.spread >= 0, down: symbolInfo.spread < 0}">
            <div class="sub">买入贵州茅台(600519.SH)</div>
            <div class="number">100万元</div>
            <div class="text">1月期虚值105期权</div>
            <div class="text">仅需<span class="span">1.67</span>万元</div>
            <div class="chart-box" v-if="symbolInfo.symbol">
              <chart :count="40" :info="symbolInfo" id="easychart" width="48px" height="27px" />
            </div>
          </div>
        </van-col>
        <van-col span="12">
          <div class="box" :class="{up: symbolInfo1.spread >= 0, down: symbolInfo1.spread < 0}">
            <div class="sub">买入腾讯控股(00700.HK)</div>
            <div class="number">100万元</div>
            <div class="text">1月期虚值105期权</div>
            <div class="text">仅需<span class="span">2.51</span>万元</div>
            <div class="chart-box" v-if="symbolInfo1.symbol">
              <chart :count="40" :info="symbolInfo1" id="easychart1" width="48px" height="27px" />
            </div>
          </div>
        </van-col>
      </van-row>
      <div class="btn-box flex">
        <div class="btn ltn" @click="$router.push('/download')">下载APP</div>
        <div class="btn rtn" @click="$router.push('/')">在线交易</div>
      </div>
    </div>
    <div class="section1">
      <div class="title">全市场标的实时期权报价系统</div>
      <div class="text">
        与三十余家国际头部券商深度合作<br>
        覆盖A股、港股、美股 8000+只个股期权报价
      </div>
    </div>
    <div class="section2">
      <div class="title">最低一万元名义本金<br>即可投资期权</div>
      <div class="text">
        二十余万极度用户助力期权拼单系统<br>
        多用户合力满足券商系统下单要求
      </div>
    </div>
    <div class="section3">
      <div class="title">覆盖全球三大市场<br>看涨看跌随心选择</div>
      <div class="text">
        二十余万极度用户助力期权拼单系统<br>
        多用户合力满足券商系统下单要求
      </div>
    </div>
    <div class="section4">
      <div class="title">会员期权费率 9 折优惠<br>更有高折扣优惠活动</div>
      <div class="text">
        会员尊享期权费率永久9折优惠<br>
        不定期推出7-8折优惠活动<br>更有期权大赛等现金大奖活动福利
      </div>
    </div>
  </div>
</template>
<script>
import chart from "@/components/eChart/index.vue";
import bus from "@/utils/bus";
export default {
  components: {
    chart
  },
  inject: ['getproductDataObj'],
  computed: {
    productDataObj() {
      return this.getproductDataObj()
    },
    symbolInfo() {
      return this.productDataObj['600519.SH'] || {}
    },
    symbolInfo1() {
      return this.productDataObj['00700.HK'] || {}
    }
  },
  created () {
    bus.$emit("alterProductData", {
      getData: ['600519.SH', '00700.HK'],
      subscribeList: ['600519.SH', '00700.HK'],
    });
  }
}
</script>
<style lang="less" scoped>
.page {
  padding: 10px 17px 23px;
}
.img {
  display: block;
  width: 100%;
  margin-bottom: 23px;
}
.section {
  box-shadow: 0px 3px 24px 0px rgba(195,195,195,0.37);
  border-radius: 10px;
  padding: 10px 11px 15px;
  margin-bottom: 23px;
  .title {
    font-size: 24px;
    font-weight: 600;
    line-height: 32px;
    text-align: center;
  }
  .img1 {
    display: block;
    height: 22px;
    margin: 5px auto 15px;
  }
  .btn-box {
    margin-top: 14px;
  }
  .btn {
    flex: 1;
    text-align: center;
    font-size: 16px;
    line-height: 42px;
    border-radius: 6px;
    cursor: pointer;
    &+.btn {
      margin-left: 14px;
    }
  }
  .ltn {
    border: 1px solid #DEDEDE;
  }
  .rtn {
    background-color: var(--color-);
    border: 1px solid var(--color-);
    color: #FEFFFF;
  }
}
.box {
  border-radius: 8px;
  position: relative;
  padding: 10px 0 11px 7px;
  &.up {
    background: linear-gradient(137deg, #FFFBEA 0%, #FFD9D8 100%);
  }
  &.down {
    background: linear-gradient(137deg, #F8FBE3 0%, #C6F4D9 100%);
  }
  .sub {
    font-size: 12px;
    font-weight: 500;
    line-height: 14px;
    margin-bottom: 10px;
  }
  .number {
    font-size: 18px;
    color: #D54037;
    font-weight: 600;
    margin-bottom: 4px;
  }
  .text {
    font-size: 11px;
    color: #B97F6B;
    line-height: 18px;
    .span {
      color: var(--color-);
      font-size: 16px;
      font-weight: 600;
    }
  }
  .chart-box {
    position: absolute;
    bottom: 8px;
    right: 5px;
  }
}
.section1 {
  background-image: url('@/assets/img/promote/bg1.png');
  background-size: 100% 100%;
  padding: 20px 0 17px 16px;
  margin-bottom: 9px;
  .title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
  }
  .text {
    font-size: 12px;
    line-height: 17px;
    padding-right: 132px;
    opacity: 0.68;
  }
}
.section2 {
  background-image: url('@/assets/img/promote/bg2.png');
  background-size: 100% 100%;
  padding: 13px 0 15px 134px;
  margin-bottom: 9px;
  .title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 6px;
    line-height: 23px;
  }
  .text {
    font-size: 12px;
    line-height: 17px;
    opacity: 0.68;
  }
}
.section3 {
  background-image: url('@/assets/img/promote/bg3.png');
  background-size: 100% 100%;
  padding: 14px 0 13px 16px;
  margin-bottom: 9px;
  .title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 6px;
    line-height: 23px;
  }
  .text {
    font-size: 12px;
    line-height: 17px;
    opacity: 0.68;
  }
}
.section4 {
  background-image: url('@/assets/img/promote/bg4.png');
  background-size: 100% 100%;
  padding: 13px 0 13px 134px;
  .title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 6px;
    line-height: 23px;
  }
  .text {
    font-size: 12px;
    line-height: 17px;
    opacity: 0.68;
  }
}
</style>