<template>
  <div>
    <div class="title">
      <!-- 跟单设置 -->
      {{ $t('follow.l121') }}
    </div>
    <div class="box">
      <div class="sub">
        <!-- 跟单比例范围 -->
        {{ $t('follow.l122') }}
      </div>
      <div class="input-box flex">
        <div class="left flex">
          <van-field type="number" v-model="amount"></van-field>
          <div class="to">&ndash;</div>
          <van-field type="number" v-model="amount1"></van-field>
        </div>
        <div>
          <!-- 倍 -->
          {{ $t('home.l48') }}
        </div>
      </div>
      <div class="tip">
        <!-- 每次开仓，跟单用户可以跟随的下单量倍数 -->
        {{ $t('follow.l123') }}
      </div>
    </div>
    <div class="box">
      <div class="title1">
        <!-- 自动发单 -->
        {{ $t('follow.l124') }}
      </div>
      <div class="row flex">
        <div>
          <!-- 每次交易下单自动发单 -->
          {{ $t('follow.l125') }}
        </div>
        <van-switch v-model="checked" size="26px" active-color="#2EBD85" inactive-color="#B6B6B6" />
      </div>
      <div class="tip">
        <!-- 开启该选项后，您每次交易操作都将自动同步到跟单 -->
        <i class="el-icon-info"></i>{{ $t('follow.l126') }}
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      amount: '',
      amount1: '',
      checked: true,
    }
  }
}
</script>
<style lang="less" scoped>
.title {
  padding: 10px 0 14px;
  font-weight: 600;
  font-size: 16px;
}
.box {
  padding-bottom: 10px;
}
.sub {
  font-weight: 600;
  color: #B6B6B6;
  margin-bottom: 14px;
}
.input-box {
  padding-bottom: 12px;
  color: #888888;
  column-gap: 10px;
  .left {
    flex: 1;
    min-width: 0px;
    column-gap: 4px;
  }
  .to {
    font-weight: 600;
  }
  .van-field {
    flex: 1;
    min-width: 0px;
    background: #F6F6F6;
    border-radius: 4px;
    text-align: center;
    padding: 8px;
  }
}
.title1 {
  padding: 10px 0 7px;
  font-weight: 600;
  font-size: 16px;
}
.row {
  margin-bottom: 3px;
  justify-content: space-between;
}
.tip {
  font-size: 10px;
  color: #B6B6B6;
  .el-icon-info {
    color: #F6465D;
    margin-right: 2px;
  }
}
::v-deep {
  .van-field__control {
    text-align: center;
    color: #B6B6B6;
  }
}
</style>