<template>
  <div class="trad-cont">
    <div class="login-bg">
      <img src="@/assets/login/trad-banner_temp.svg" class="img mobile-img">
      <div class="bg-line" />
      <!-- <div ref="bgBottomRef" class="bg-bottom wow animate__fadeInUp" data-wow-duration="2s">
        <div v-for="item in bannerList" :key="item.order" class="bottom-card">
          <div class="first-line">{{ item.firstDesc }}</div>
          <div class="second-line">{{ item.secondDesc }}</div>
        </div>
      </div> -->
      <div v-if="isShowPCBottom" class="bg-us-cont">西安银叶科技服务有限公司(下称:“银叶科技”)为长安银科旗下科技子公司，定位为数字化应收账款服务商，主要为客户提供应贸易数字化、应收账款管理等服务。目前业务涵盖建筑行业、交通物流、工程机械、跨境电商、机械制造等不同行业，基于对贸易的深刻理解和长期的业务实践，公司精耕细作于应收账款服务市场，根据不同场景，推出相应的服务产品，同时可以为客户提供专属的服务。未来，公司将紧紧围绕数字化应收账款服务商的核心定位，坚持高质量稳健发展之路，在“守时、专业、精准”的经营理念指导下，依托国内、国际两个应收账款市场，充分运用科技手段，为客户提供贴心、高效、专业的服务。</div>
    </div>

    <div v-if="!isShowPCBottom" class="register-cont">
      <el-button type="text" class="register-btn" @click="$parent.loginClick('register')">立即注册</el-button>
    </div>

    <div class="sec-cont">
      <div ref="secLeft" class="sec-left wow animate__fadeInLeft" data-wow-duration="1s" />
      <div ref="secRight" class="sec-right wow animate__fadeInUp" data-wow-duration="1s">
        <div class="sec-right-t">
          <div class="sec-t-t">跨境通</div>
          <div class="sec-t-b">跨境通是卖方通过长银贸易管理平台向买方销售货物或提供服务，平台为客户提供应收账款管理等综合性服务。</div>
        </div>
        <div class="sec-right-b">
          <div class="sec-r-b-l">“让资产流动起来”</div>
          <el-button type="text" class="sec-r-b-r" @click="contactUsCkick">联系我们</el-button>
        </div>
      </div>
    </div>
    <div class="line-cont">
      <div class="line" />
      <div class="line-desc">跨境通的产品特点有哪些？</div>
    </div>
    <!-- 特征 -->
    <div class="feature-cont">
      <div
        ref="featurnLeft"
        class="feature-l wow animate__fadeInLeft"
        data-wow-duration="1s"
      />
      <div
        ref="featurnRight"
        class="feature-r wow animate__fadeInRight"
        data-wow-duration="1s"
      />
    </div>
    <div class="line-cont">
      <div class="line" />
      <div class="line-desc">客户使用跨境通需满足什么条件？</div>
    </div>

    <div ref="conditionRef" class="condition-cont wow animate__fadeInUp" data-wow-duration="1s">
      <div
        v-for="item in conditionList"
        :id="`conditionBoxRefs${item.order}`"
        :key="item.order"
        class="condi-box"
        :style="{
          backgroundImage: `url(${item.imgUrl})` ,
          width: isMidScreen ? '30%' : ''
        }"
      >
        <div class="condi-b">
          <img :src="item.iconUrl">
          <div class="condi-b-line" />
          <div class="condi-b-desc">{{ item.desc }}</div>
        </div>
        <div class="condi-over-cont">
          <img :src="item.hoverUrl">
        </div>
      </div>
    </div>

    <!-- <div class="line-cont line-cont-orange">
      <div class="line" />
      <div class="line-desc">我们的办公环境</div>
    </div>
    <div class="environment" /> -->

    <div class="line-cont line-cont-orange">
      <div class="line" />
      <div class="line-desc line-desc-orange">跨境通产品流程</div>
    </div>

    <div ref="productRef" class="process-bg wow animate__fadeInUp" data-wow-duration="1s">
      <img src="@/assets/login/process_temp.png">
    </div>

    <div class="line-cont line-cont-orange">
      <div class="line" />
      <div class="line-desc line-desc-orange">预计授信额度</div>
    </div>
    <div class="credit-amount">
      <p class="title">预计授信额度
        <span v-show="showcontactus">：</span>
        <countTo v-show="showcontactus" ref="financeCountTo" :start-val="financeStartVal" :end-val="financeAmountNo" :decimals="financeDecimals" :duration="financeDuration" :autoplay="false" :suffix="financePrefix" :prefix="prefix" />
      </p>
      <p class="subtitle">填写以下信息可测试您的融资额度哦，赶快行动吧！</p>
      <el-form ref="calculateRef" :model="calculateFormItem" :rules="rules" label-position="top">
        <el-form-item label="1、买方所在国家/地区：" prop="region">
          <el-radio-group v-model="calculateFormItem.region" @change="regionChange">
            <el-radio label="Asia">亚洲</el-radio>
            <el-radio label="Europe">欧洲</el-radio>
            <el-radio label="Africa">非洲</el-radio>
            <el-radio label="NAmerica">北美洲</el-radio>
            <el-radio label="SAmerica">南美洲</el-radio>
            <el-radio label="Oceania">大洋洲</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="" prop="country">
          <el-select v-model="calculateFormItem.country" placeholder="请选择国家">
            <el-option
              v-for="item in countryList"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="2、买方有无官方网站：" prop="officialWebsite">
          <el-radio-group v-model="calculateFormItem.officialWebsite">
            <el-radio label="1">有</el-radio>
            <el-radio label="2">无</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- <el-form-item label="" prop="createTime">
          <el-input :value="calculateFormItem.createTime" placeholder="请输入网址" />
        </el-form-item> -->
        <el-form-item label="3、买方企业类型：" prop="buyerEnterpriseType">
          <el-radio-group v-model="calculateFormItem.buyerEnterpriseType">
            <el-radio label="1">生产型企业</el-radio>
            <el-radio label="2">贸易型企业</el-radio>
            <el-radio label="3">服务类企业</el-radio>
            <el-radio label="4">其它类企业</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="4、与买方合作的时间：" prop="buyerCooperationTime">
          <el-radio-group v-model="calculateFormItem.buyerCooperationTime">
            <el-radio label="1">6个月及以下</el-radio>
            <el-radio label="2">6个月~1年 (含)</el-radio>
            <el-radio label="3">1年~3年 (含）</el-radio>
            <el-radio label="4">3年以上</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="5、买方历史最长回款账期：" prop="buyerMaximumPaybackPeriod">
          <el-radio-group v-model="calculateFormItem.buyerMaximumPaybackPeriod">
            <el-radio label="1">无回款</el-radio>
            <el-radio label="2">30天~90天 (含)</el-radio>
            <el-radio label="3">90天~120天 (含)</el-radio>
            <el-radio label="4">120天~180天 (含)</el-radio>
            <el-radio label="5">180天以上</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>

      <el-button class="calbtn" type="primary" @click="calcuteMethod">计算额度</el-button>
    </div>

    <div class="line-cont line-cont-orange">
      <div class="line" />
      <div class="line-desc line-desc-orange">我们的合作伙伴</div>
    </div>

    <div class="carousel">
      <vue-seamless-scroll :data="carouselListFirst" :class-option="classOption" class="carousel-side">
        <ul class="ul-item">
          <li v-for="(item, index) in carouselListFirst" :key="index" class="li-item">
            <img :src="item">
          </li>
        </ul>
      </vue-seamless-scroll>
      <vue-seamless-scroll :data="carouselListSec" :class-option="classOption" class="carousel-side">
        <ul class="ul-item">
          <li v-for="(item, index) in carouselListSec" :key="index" class="li-item">
            <img :src="item">
          </li>
        </ul>
      </vue-seamless-scroll>
      <vue-seamless-scroll :data="carouselListThird" :class-option="classOption" class="carousel-side">
        <ul class="ul-item">
          <li v-for="(item, index) in carouselListThird" :key="index" class="li-item">
            <img :src="item">
          </li>
        </ul>
      </vue-seamless-scroll>
    </div>
    <div v-if="isShowPCBottom" ref="joinRefs" class="join">
      <div class="join-l">
        <div class="join-line" />
        <div class="l-title">长安银科欢迎您！</div>
        <p>总部地址</p>
        <div class="l-orange org-addr">地址：西安市经济技术开发区凤城二路51号白桦林金融创新中心D栋13层</div>
        <p>有疑问吗？</p>
        <div class="l-orange org-phone">致电我们：029-86689192</div>
        <p>与我们联系</p>
        <div class="l-orange org-email">邮箱地址：citp@changan-inkasso.com</div>
        <div class="qrocde" />
        <div class="qrcode-desc">关注长银</div>
      </div>
      <div class="join-mid" />
      <div class="join-r">
        <div class="join-line" />
        <p class="r-p-contact">联系我们</p>
        <p>我们将为您提供专业的应收账款服务方案，让您的资产流动起来！</p>
        <div class="r-input-cont">
          <div class="r-input">
            <div class="ipnut-title">单位名称</div>
            <el-input v-model="contactParam.contactName" type="text" class="input-cont" />
          </div>
          <div class="r-input">
            <div class="ipnut-title">您的电话</div>
            <el-input v-model="contactParam.phoneNumber" type="text" class="input-cont" />
          </div>
          <div class="r-input">
            <div class="ipnut-title">您的邮箱地址</div>
            <el-input v-model="contactParam.email" type="text" class="input-cont" />
          </div>
          <div class="r-input">
            <div class="ipnut-title">企业类型</div>
            <el-input v-model="contactParam.enterpriseType" type="text" class="input-cont" />
          </div>
        </div>
        <div class="text-raea-cont">
          <div class="ipnut-title">您的留言</div>
          <el-input v-model="contactParam.infoContent" type="textarea" />
        </div>

        <el-button type="text" class="join-btn" @click="handleContactUs">联系我们</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import 'animate.css'
import WOW from 'wow.js'
import vueSeamlessScroll from 'vue-seamless-scroll'
import { isMobileDevice } from '@/utils/index'
import { contactUs } from '@/api/user'
import { getCountryByRegoin, getCreditQuota } from '@/api/common'
import countTo from 'vue-count-to'

export default {
  components: {
    vueSeamlessScroll,
    countTo
  },
  data() {
    return {
      bannerList: [
        {
          order: 0,
          firstDesc: '65亿+',
          secondDesc: '累计人民币融资额'
        },
        {
          order: 1,
          firstDesc: '10亿+',
          secondDesc: '累计支持企业出口额'
        },
        {
          order: 2,
          firstDesc: '200万元+',
          secondDesc: '平均融资额'
        }
      ],
      conditionList: [
        {
          order: 0,
          desc: '卖方为中小微供货商或贸易商',
          imgUrl: require('@/assets/login/mask_1.png'),
          iconUrl: require('@/assets/login/condi_1.png'),
          hoverUrl: require('@/assets/login/hover_1.png')
        },
        {
          order: 1,
          desc: '买方符合准入标准',
          imgUrl: require('@/assets/login/mask_2.png'),
          iconUrl: require('@/assets/login/condi_2.png'),
          hoverUrl: require('@/assets/login/hover_2.png')
        },
        {
          order: 2,
          desc: '可通过科技平台全链条实时管理贸易',
          imgUrl: require('@/assets/login/mask_3.jpg'),
          iconUrl: require('@/assets/login/condi_3.png'),
          hoverUrl: require('@/assets/login/hover_3_temp.png')
        }
      ],
      classOption: {
        direction: 2
      },
      carouselListFirst: [
        require('@/assets/logos/xiehui/FCI国际保理商联合会.svg'),
        require('@/assets/logos/xiehui/商业保理专委会.svg'),
        require('@/assets/logos/bank/交通银行.svg'),
        require('@/assets/logos/bank/兴业银行.svg'),
        require('@/assets/logos/bank/北京银行.svg'),
        require('@/assets/logos/bank/华夏银行.svg'),
        require('@/assets/logos/bank/国开行.svg'),
        require('@/assets/logos/bank/宁夏银行.png'),
        require('@/assets/logos/bank/建设银行.svg'),
        require('@/assets/logos/bank/浦发银行.svg'),
        require('@/assets/logos/bank/秦农银行.svg')
      ],
      carouselListSec: [
        require('@/assets/logos/fci/bnp.svg'),
        require('@/assets/logos/fci/CIT.svg'),
        require('@/assets/logos/fci/deutscheFactoring.svg'),
        require('@/assets/logos/fci/ifs.svg'),
        require('@/assets/logos/fci/incomlend.svg'),
        require('@/assets/logos/fci/national.svg'),
        require('@/assets/logos/中建集团.svg'),
        require('@/assets/logos/amazon.svg'),
        require('@/assets/logos/支付公司/pingpong.svg'),
        require('@/assets/logos/支付公司/空中云汇.svg'),
        require('@/assets/logos/支付公司/连连.svg')
      ],
      carouselListThird: [
        require('@/assets/logos/第三方平台/央行征信.svg'),
        require('@/assets/logos/bank/苏宁银行.svg'),
        require('@/assets/logos/bank/长安银行.svg'),
        require('@/assets/logos/bank/齐商银行.svg'),
        require('@/assets/logos/中信保.svg'),
        require('@/assets/logos/合作资方/德银.svg'),
        require('@/assets/logos/合作资方/浙银.svg'),
        require('@/assets/logos/第三方平台/eSign.svg'),
        require('@/assets/logos/第三方平台/fadada.svg'),
        require('@/assets/logos/第三方平台/qichacha.svg'),
        require('@/assets/logos/第三方平台/中登网.svg')
      ],
      contactParam: {
        contactName: '',
        phoneNumber: '',
        email: '',
        enterpriseType: '',
        infoContent: ''
      },
      isShowPCBottom: true,

      showcontactus: false,
      financeStartVal: 0,
      financeAmountNo: 0,
      financePrefix: '',
      financeDuration: 2000,
      financeDecimals: 0, // 小数位
      prefix: '',
      calculateFormItem: {
        region: '',
        country: '',
        buyerMaximumPaybackPeriod: '',
        buyerCooperationTime: '',
        buyerEnterpriseType: '',
        officialWebsite: ''
      },
      rules: {
        region: [
          { required: true, message: '请选择买方所在国家/地区', trigger: 'change' }
        ],
        country: [
          { required: true, message: '请选择国家', trigger: 'change' }
        ],
        officialWebsite: [
          { required: true, message: '请选择买方有无官方网站', trigger: 'change' }
        ],
        buyerEnterpriseType: [
          { required: true, message: '请选择买方企业类型', trigger: 'change' }
        ],
        buyerCooperationTime: [
          { required: true, message: '请选择与买方合作的时间', trigger: 'change' }
        ],
        buyerMaximumPaybackPeriod: [
          { required: true, message: '请选择买方历史最长回款账期', trigger: 'change' }
        ]
      },
      countryList: []
    }
  },
  computed: {
    isMidScreen() {
      return window.screen.width < 1470
    }
  },
  created() {
  },
  mounted() {
    new WOW().init()

    this.initConditionMouseEvent()
    this.isMobile()
    window.addEventListener('resize', this.isMobile)
  },
  destroyed() {
    window.removeEventListener('resize', this.isMobile)
  },
  methods: {
    initConditionMouseEvent() {
      const conditionBoxRefs0 = document.getElementById('conditionBoxRefs0')
      const conditionBoxRefs1 = document.getElementById('conditionBoxRefs1')
      const conditionBoxRefs2 = document.getElementById('conditionBoxRefs2')
      conditionBoxRefs0.addEventListener('mouseenter', this.conditionMounseEnter)
      conditionBoxRefs0.addEventListener('mouseleave', this.conditionMounseLeave)
      conditionBoxRefs1.addEventListener('mouseenter', this.conditionMounseEnter)
      conditionBoxRefs1.addEventListener('mouseleave', this.conditionMounseLeave)
      conditionBoxRefs2.addEventListener('mouseenter', this.conditionMounseEnter)
      conditionBoxRefs2.addEventListener('mouseleave', this.conditionMounseLeave)
    },
    // 条件模块鼠标hover
    conditionMounseEnter(e) {
      e.target.classList.add('condi-over')
    },
    // 条件模块鼠标离开
    conditionMounseLeave(e) {
      e.target.classList.remove('condi-over')
    },
    // 联系我们按钮点击
    contactUsCkick() {
      const joinRefs = this.$refs.joinRefs
      if (joinRefs) {
        joinRefs.scrollIntoView({ behavior: 'smooth' })
      } else {
        const scrollHeight = document.documentElement.scrollHeight
        window.scrollTo({
          top: scrollHeight,
          behavior: 'smooth'
        })
      }
    },
    // 是否是手机端
    isMobile() {
      if (isMobileDevice() && window.screen.width < 768) {
        this.isShowPCBottom = false
      } else {
        this.isShowPCBottom = true
      }
    },
    // 联系我们按钮点击
    handleContactUs() {
      if (this.contactParam.phoneNumber === '') {
        this.$message.warning('请输入联系电话')
        return
      } else {
        if (!/^\d{11}$/.test(this.contactParam.phoneNumber)) {
          this.$message.warning('请输入合法电话号码')
          return
        }
      }
      if (this.contactParam.email !== '') {
        if (this.contactParam.email.indexOf('@') === -1) {
          this.$message.warning('请输入合法邮箱')
          return
        }
      }
      contactUs(this.contactParam).then(() => {
        this.$message.success('留言成功')
        this.$router.go(0)
      })
    },

    // 查询国家
    regionChange() {
      if (this.calculateFormItem.region) {
        const postData = new FormData()
        postData.append('continent', this.calculateFormItem.region)
        getCountryByRegoin(postData).then(res => {
          this.countryList = res.data || []
        })
      }
    },
    // 计算授信额度
    calcuteMethod() {
      this.financeAmountNo = 0
      this.financePrefix = ''
      this.showcontactus = true
      this.financeDecimals = 0
      this.$refs['calculateRef'].validate(valid => {
        if (valid) {
          const postData = {
            'buyerCooperationTime': this.calculateFormItem.buyerCooperationTime,
            'buyerEnterpriseType': this.calculateFormItem.buyerEnterpriseType,
            'buyerMaximumPaybackPeriod': this.calculateFormItem.buyerMaximumPaybackPeriod,
            'country': this.calculateFormItem.country,
            'officialWebsite': this.calculateFormItem.officialWebsite,
            'region': this.calculateFormItem.region
          }
          getCreditQuota(postData).then(res => {
            this.$message.success('计算成功')
            this.financeAmountNo = res.data.amount / 10000
            this.prefix = res.data.currency === 'USD' ? '$ ' : '￥ '
            this.financePrefix = '万'
            this.$refs['financeCountTo'].start()
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@media screen and (min-width: 768px) and (max-width: 1600px) {
  .trad-cont {
    .login-bg {
      .bg-bottom {
        width: 78% !important;
      }
    }
    .condition-cont {
      .condi-box {
        height: 90% !important;
        .condi-b {
          padding-left: 20px !important;
        }
      }
    }
  }
}
@keyframes partnermove {
  0% {
    transform: translate(0)
  }
  100%{
    transform: translate(-70%);
  }
}

@keyframes bordermove {
  0% {
    border-bottom: 0px solid #FE7D0B;
  }
  50% {
    border-bottom: 10px solid #FE7D0B;
  }
  100%{
    border-bottom: 3px solid #FE7D0B;
  }
}

.trad-cont {
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: #fff;
  // background-image: url("../../../assets/login/trade_bg.jpg");
  // background-position: 0 1500px;
  // background-repeat: no-repeat;
  .login-bg {
    width: 100%;
    height: 765px;
    background-color: #292929;
    background-image: url("../../../assets/login/bg.jpg");
    background-position: 0 0;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .img {
      width: 650px;
      height: 180px;
    }
    .bg-line {
      width: 92px;
      height: 1px;
      border: 2px solid #FE7D0B;
      margin: 30px 0 148px 0;
    }
    .bg-bottom {
      width: 65%;
      display: flex;
      justify-content: space-between;
      .bottom-card {
        display: flex;
        flex-direction: column;
        width: 374px;
        height: 170px;
        color: #fff;
        text-align: center;
        background-color: rgba(0, 0, 0, .4);
        // border-bottom: 3px solid #FE7D0B;
        animation: bordermove 1s ease forwards;
        margin: 0;
        .first-line {
          font-size: 40px;
          font-weight: 600;
          margin: 36px 0 32px 0;
        }
        .second-line {
          font-size: 20px;
        }
      }
    }
    .bg-us-cont {
      width: 65%;
      font-size: 16px;
      text-indent: 32px;
      line-height: 28px;
      font-weight: 400;
      letter-spacing: 4px;
      color: #fff;
    }
  }
  .sec-cont {
    display: flex;
    width: 65%;
    height: 856px;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    margin: 0 auto;
    .sec-left {
      width: 30%;
      height: 536px;
      margin: 0 25px 0 0;
      background: url('../../../assets/login/business-p.png') no-repeat center;
    }
    .sec-right {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      // width: 60%;
      flex: 1;
      height: 536px;
      .sec-right-t {
        display: flex;
        width: 100%;
        height: 384px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: #F5F6F6;
        padding: 0 98px;
        flex: 1;
        .sec-t-t {
          font-size: 40px;
          color: #FE7D0B;
          font-weight: 600;
          margin-bottom: 10px;
        }
        .sec-t-b {
          width: 100%;
          height: 42px;
          font-size: 14px;
          line-height: 21px;
          color: #333;
          text-indent: 24px;
          margin-top: 80px;
          letter-spacing: 2px;
        }
      }
      .sec-right-b {
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 100%;
        height: 126px;
        background-color: #FE7D0B;
        .sec-r-b-l {
          font-size: 16px;
          color: #fff;
          margin-left: 80px;
          letter-spacing: 8px;
        }
        .sec-r-b-r {
          width: 128px;
          height: 40px;
          background-color: #fff;
          color: #333;
        }
      }
    }
  }
  .line-cont {
    width: 100%;
    text-align: center;
    background-color: #fff;
    .line {
      width: 18px;
      height: 2px;
      border: 2px solid #D9D9D9;
      margin: 0 auto 20px;
    }
    .line-desc {
      font-size: 16px;
      font-weight: 600;
      color: #2C4270;
    }
  }
  .line-cont-orange {
      padding: 90px 0 160px;
      .line-desc {
        color: #FE7D0B;
      }
    }
  .feature-cont {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 65%;
    height: 702px;
    margin: 0 auto;
    // margin: 140px 0;
    // padding: 140px 0;
    background-color: #fff;
    .feature-l {
      width: 30%;
      height: 228px;
      margin-right: 20px;
      background: url('../../../assets/login/feature_l_temp.png') no-repeat center;
    }
    .feature-r {
      width: 60%;
      height: 422px;
      background: url('../../../assets/login/feature_r.png') no-repeat center;
      background-size: cover;
    }
  }
  .condition-cont {
    display: flex;
    justify-content: space-between;
    width: 65%;
    height: 606px;
    margin: 0 auto;
    padding: 90px 0 0;
    background-color: #fff;
    .condi-box {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding-bottom: 60px;
      width: 383px;
      height: 100%;
      background-size: cover;
      background-repeat: no-repeat;
      .condi-b {
        width: 100%;
        padding-left: 40px;
        img {
          width: 38px;
          height: 38px;
        }
        .condi-b-line {
          width: 18px;
          height: 2px;
          border: 2px solid #FE7D0B;
          margin: 8px 0 20px;
        }
        .condi-b-desc {
          font-size: 16px;
          color: #fff;
        }
      }
      .condi-over-cont {
        display: none;
      }
    }
    .condi-over {
      position: relative;
      .condi-over-cont {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        background-color: #FE7D0B;
        z-index: 9;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .condi-box:nth-child(2) {
        margin: 0 25px;
      }
    }
    .condi-box:nth-child(2) {
      margin: 0 25px;
    }
  }
  .environment {
    width: 100%;
    height: 480px;
    // padding: 240px 0;
    background: url('../../../assets/login/trade_bg.jpg') no-repeat center;
    background-size: cover;

  }
  .process-bg {
    width: 100%;
    height: 552px;
    background-color: #fff;
    text-align: center;
    img {
      width: 977px;
      height: 100%;
    }
  }
  .credit-amount {
    margin: 0 auto;
    width: 50%;
    background-color: #f5b57e;
    padding: 30px 80px;
    box-shadow: 0 3px 60px rgba(0,0,0,.16);
    border-radius: 10px;
    text-align: center;
    .title {
      color: #2c4270;
      font-size: 20px;
      margin-bottom: 14px;
    }
    .el-form {
      border-radius: 5px;
      overflow: hidden;
    }
    .el-form-item {
      font-size: 12px;
      text-align: left;
      color: #000;
      padding: 8px 16px;
      border: 1px solid #eee;
      background-color: #fdfdfd;
      border-bottom: 0;
      margin-bottom: 0;
      .el-form-item__label {
        font-size: 12px!important;
        color: #000;
        padding-bottom: 5px;
        text-align: left;
      }
      .el-form-item__content {
        font-size: 13px;
        line-height: 1.8;
      }
    }
    .calbtn {
      margin-top: 30px;
      font-size: 14px;
      padding: 20px 100px;
      cursor: pointer;
      border-radius: 5px;
      border: 0;
    }
  }
  .carousel {
    width: 100%;
    background-color: #fff;
    margin-bottom: 310px;
    .carousel-side {
      width: 1144px;
      height: 100px;
      margin: 22px auto;
      overflow: hidden;
      ul {
        list-style: none;
        padding: 0;
        margin: 0 auto;
        &.ul-item {
          display: flex;
          .li-item {
            width: 200px;
            height: 100px;
            margin-right: 86px;
            img {
              width: 100%;
              height: 100%;
              background-color: #fff;
            }
          }
        }
      }
    }
  }

  .join {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 840px;
    background-image: url('../../../assets/login/join_us.png');
    .join-l {
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 20%;
      height: 100%;
      .l-title {
        font-size: 32px;
        font-weight: 600;
        color: #fff;
        margin: 22px 0 48px;
      }
      p {
        font-size: 16px;
        color: #fff;
        margin-bottom: 14px;
      }
      .l-orange {
        position: relative;
        font-size: 16px;
        color: #FE7D0B;
        margin-bottom: 30px;
      }
      .org-addr::before {
        position: absolute;
        left: -30px;
        display: inline-block;
        content: ' ';
        width: 20px;
        height: 20px;
        background-image: url('../../../assets/login/join_adress.png');
        background-repeat: no-repeat;
      }
      .org-phone::before {
        position: absolute;
        left: -30px;
        display: inline-block;
        content: ' ';
        width: 20px;
        height: 20px;
        background-image: url('../../../assets/login/join_phone.png');
        background-repeat: no-repeat;
      }
      .org-email::before {
        position: absolute;
        left: -30px;
        display: inline-block;
        content: ' ';
        width: 20px;
        height: 20px;
        background-image: url('../../../assets/login/join_mail.png');
        background-repeat: no-repeat;
      }
      .qrocde {
        width: 130px;
        height: 130px;
        margin-top: 76px;
        background: url('../../../assets/login/qrcode.png');
      }
      .qrcode-desc {
        width: 130px;
        font-size: 16px;
        color: #fff;
        margin-top: 12px;
        text-align: center;
      }
    }
    .join-mid {
      width: 4%;
    }
    .join-r {
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 44%;
      height: 100%;
      p {
        font-size: 14px;
        color: #999
      }
      p.r-p-contact {
        font-size: 16px;
        color: #fff;
        margin: 20px 0 28px;
      }
      .r-input-cont {
        display: flex;
        flex-wrap: wrap;
        .r-input {
          min-width: 44%;
          color: #fff;
          margin: 10px 30px 0 0;
          .ipnut-title {
            font-size: 16px;
            margin-bottom: 4px;
          }
          .input-cont {
            width: 100%;
            height: 50px;
            border: 1px solid #fff;
            ::v-deep .el-input__inner {
              height: 50px;
              line-height: 50px;
              background-color: transparent;
              border: none;
              color: #fff;
            }
          }
        }
      }
      .text-raea-cont {
        width: 100%;
        margin-top: 30px;
        .ipnut-title {
          color: #fff;
          margin: 10px 0 4px 0;
        }
        ::v-deep .el-textarea__inner {
          width: 92%;
          height: 250px;
          color: #fff;
          border: 1px solid #fff;
          background-color: transparent;
        }
      }
      .join-btn {
        width: 120px;
        height: 44px;
        color: #fff;
        background-color: #FE7D0B;
        margin-top: 46px;
      }
    }
    .join-line {
      width: 16px;
      height: 2px;
      border: 2px solid #FE7D0B;
    }
  }
}

@media screen and (max-width: 768px) {
  .trad-cont {
    // display: flex;
    // flex-direction: column;
    // width: 100%;
    // background-color: #fff;
    // background-image: url("../../../assets/login/trade_bg.jpg");
    // background-position: 0 1500px;
    // background-repeat: no-repeat;
    padding: 0 0px 170px;
    background-image: none;
    background-color: #fff;
    margin-top: 60px;
    .login-bg {
      width: 100%;
      height: 176px;
      // background-color: #292929;
      // background-image: url("../../../assets/login/bg.jpg");
      // background-position: 0 0;
      background-size: cover;
      // display: flex;
      // justify-content: center;
      // align-items: center;
      img {
        width: 195px !important;
        height: 46px !important;
      }
      .bg-line {
        display: none;
      }
      .bg-bottom {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 24px;
        .bottom-card {
          display: flex;
          flex-direction: column;
          width: 102px;
          height: 48px;
          color: #fff;
          text-align: center;
          background-color: rgba(0, 0, 0, .4);
          border-bottom: 3px solid #FE7D0B;
          margin: 0 10px !important;
          opacity: .7;
          .first-line {
            font-size: 14px;
            font-weight: 600;
            margin: 10px 0 0;
          }
          .second-line {
            font-size: 10px;
          }
        }
      }
    }

    .register-cont {
      width: 100%;
      text-align: center;
      margin-top: 20px;
      .register-btn {
        width: 262px;
        height: 40px;
        color: #fff;
        background-color: #FE7D0B;
        text-align: center;
        font-size: 14px;
        border-radius: 20px;
      }
    }

    .sec-cont {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: auto;
      justify-content: center;
      align-items: center;
      background-color: #fff;
      padding: 0 10px;
      .sec-left {
        width: 100%;
        height: 158px;
        margin: 20px 0 0 0;
        background: url('../../../assets/login/business-p.png') no-repeat center;
        background-size: cover;
      }
      .sec-right {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 100%;
        height: auto;
        .sec-right-t {
          display: flex;
          width: 100%;
          height: auto;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          background-color: #F5F6F6;
          padding: 10px 20px 12px;
          .sec-t-t {
            font-size: 14px;
            color: #FE7D0B;
            font-weight: 600;
            margin-bottom: 10px;
          }
          .sec-t-b {
            width: 100%;
            height: 42px;
            font-size: 12px;
            line-height: 18px;
            color: #333;
            text-indent: 24px;
            margin-top: 20px;
          }
        }
        .sec-right-b {
          display: flex;
          justify-content: space-around;
          align-items: center;
          width: 100%;
          height: auto;
          background-color: #FE7D0B;
          padding: 5px 0;
          .sec-r-b-l {
            font-size: 14px;
            color: #fff;
            margin-left: 0;
          }
          .sec-r-b-r {
            width: 90px;
            height: 30px;
            background-color: #fff;
            color: #333;
          }
        }
      }
    }
    .line-cont {
      width: 100%;
      text-align: center;
      background-color: #fff;
      padding: 40px 0;
      .line {
        width: 18px;
        height: 2px;
        border: 2px solid #D9D9D9;
        margin: 0 auto 20px;
      }
      .line-desc {
        font-size: 16px;
        font-weight: 600;
        color: #2C4270;
      }
    }
    .line-cont-orange {
        .line-desc {
          color: #FE7D0B;
        }
      }
    .feature-cont {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      width: 100%;
      height: auto;
      background-color: #fff;
      padding: 0 10px;
      .feature-l {
        width: 100%;
        height: 228px;
        margin-right: 0px;
        background: url('../../../assets/login/feature_l.png') no-repeat center;
      }
      .feature-r {
        width: 100%;
        height: 228px;
        background: url('../../../assets/login/feature_r.png') no-repeat center;
        // background-size: cover;
      }
    }
    .condition-cont {
      display: flex;
      justify-content: center;
      width: 100%;
      height: auto;
      // margin: 90px 0 160px;
      padding: 10px 10px 0;
      background-color: #fff;
      .condi-box {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding-bottom: 30px;
        // width: 30%;
        height: 152px;
        background-size: cover;
        background-repeat: no-repeat;
        .condi-b {
          width: 100%;
          padding-left: 0px;
          text-align: center;
          img {
            width: 20px;
            height: 20px;
          }
          .condi-b-line {
            width: 18px;
            height: 2px;
            border: 2px solid #FE7D0B;
            margin: 8px auto 8px;
          }
          .condi-b-desc {
            font-size: 12px;
            color: #fff;
          }
        }
        .condi-over-cont {
          display: none;
        }
      }
      .condi-over {
        position: relative;
        .condi-over-cont {
          display: block;
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          width: 100%;
          height: 100%;
          background-color: #FE7D0B;
          z-index: 9;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .condi-box:nth-child(2) {
          margin: 0 25px;
        }
      }
      .condi-box:nth-child(2) {
        margin: 0 25px;
        padding-bottom: 40px;
      }
    }
    .environment {
      width: 100%;
      padding: 0;
    }
    .process-bg {
      width: 100%;
      height: 190px;
      background-color: #fff;
      text-align: center;
      img {
        width: 335px;
        height: 100%;
      }
    }
    .carousel {
      width: 100%;
      background-color: #fff;
      margin-bottom: 0px;
      .carousel-side {
        width: 1144px;
        height: 100px;
        margin: 22px auto;
        overflow: hidden;
        ul {
          list-style: none;
          padding: 0;
          margin: 0 auto;
          &.ul-item {
            display: flex;
            .li-item {
              width: 200px;
              height: 100px;
              margin-right: 86px;
              img {
                width: 100%;
                height: 100%;
                background-color: #fff;
              }
            }
          }
        }
      }
    }
  }
}

@media screen and (min-width: 1930px) {
  .trad-cont {
    .login-bg {
      height: 1200px !important;
      background-size: cover !important;
      img {
        transform: scale(1.5) !important;
        margin: 200px 0 70px !important;
      }
    }
  }
  .bg-bottom {
    width: 56% !important;
    margin-top: 180px !important;
  }
  .sec-cont {
    width: 56% !important;
  }
  .feature-cont {
    width: 56% !important;
  }
  .condition-cont {
    width: 56% !important;
  }
}
</style>
