<template>
  <div>
    <!-- 跟单交易成功 -->
    <BackBar1 :title="$t('follow.l83')"/>
    <div class="body">
      <img class="icon" src="/img/copy/success.png" alt="">
      <div class="text">
        <!-- 跟单交易成功 -->
        {{ $t('follow.l83') }}
      </div>
      <div class="tip">
        <!-- 您已成功跟单XXXXX。您可以前往跟单详情页面查看明细，也可以返回首页继续浏览其他项目。 -->
        {{ $t('follow.l86').replace('{p}', id) }}
      </div>
    </div>
    <div class="box flex">
      <div class="btn tbn flex" @click="$router.replace('/copy/detail/' + id)">
        <div>
          <!-- 查看详情 -->
          {{ $t('follow.l84') }}
        </div>
      </div>
      <div class="btn bbn flex" @click="$router.replace('/market/follow')">
        <div>
          <!-- 返回跟单 -->
          {{ $t('follow.l85') }}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import BackBar1 from '@/components/backBar1'
export default {
  components: {
    BackBar1
  },
  data () {
    return {
      id: '',
    }
  },
  created () {
    this.id = this.$route.params.id
  },
}
</script>
<style lang="less" scoped>
.body {
  padding: 30px 18px;
  text-align: center;
  .icon {
    display: block;
    margin: 0 auto;
    width: 80px;
  }
  .text {
    margin-top: 30px;
    font-weight: 600;
    font-size: 20px;
  }
  .tip {
    color: #888888;
    line-height: 22px;
    margin-top: 16px;
  }
}
.box {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 10px 14px;
  column-gap: 7px;
  .btn {
    flex: 1;
    justify-content: center;
    height: 50px;
    text-align: center;
    cursor: pointer;
    padding: 0 10px;
    font-weight: 600;
    font-size: 16px;
  }
  .tbn {
    background-color: #F6F6F6;
    color: #B6B6B6;
  }
  .bbn {
    background-color: #000000;
    color: #FFFFFF;
  }
}
</style>