<script>
export default {
  name: "convert-index",
  components: {},
  data() {
    return {
      input: ''
    };
  },
  mounted() {
  },
  methods: {},
}
</script>

<template>
  <div class="bgc-f p-20 box-sizing-border b-rad-10">
    <div class="bgc-F6F7FA b-rad-10 mb-10 p-10 box-sizing-border mb-10">
      <div class="align-items-start flex-justify-space mb-10">
        <div class="align-items-center">
          <el-image
              class="t-img mr-4"
              :src="require('@/assets/img/index/usdt.png')"
              fit=""></el-image>
          <div class="fs-14">USDT</div>
        </div>
        <div class="max-box b-rad-10 fs-14">
          Max 0.01
        </div>
      </div>
      <div>
        <el-input v-model="input" placeholder="输入要兑换的USDT数量"></el-input>
      </div>
    </div>
    <div class="flex-direction-column align-items-center flex-justify-center mb-10">
      <div class="fs-14">
        FORM
      </div>
      <el-image
          class="jh-img"
          :src="require('@/assets/img/index/jiaohuan.png')"
          fit=""></el-image>
      <div class="fs-14">
        TO
      </div>
    </div>
    <div class="bgc-F6F7FA b-rad-10 mb-10 p-10 box-sizing-border mb-50">
      <div class="align-items-start flex-justify-space mb-10">
        <div class="align-items-center">
          <el-image
              class="logo-img mr-4"
              :src="require('@/assets/img/logo/logo.png')"
              fit=""></el-image>
          <div class="fs-14">DAO</div>
        </div>
      </div>
      <div class="fs-14">
        0.02
      </div>
    </div>
    <div class="convent-but b-rad-10 text-align-center fs-14 fc-f">
      兑换
    </div>
  </div>
</template>

<style scoped lang="scss">
.t-img{
  width: 35px;
  height: 30px;
}
.max-box{
  color: rgb(13, 129, 207, 1);
  border: 1px solid rgba(13, 129, 207, 0.5);
  padding: 3px 10px;
}
::v-deep .el-input__inner{
  background-color: transparent;
  border: none;
  padding: 0;
}
.jh-img{
  width: 30px;
  height: 30px;
}
.logo-img{
  width: 33px;
  height: 25px;
}
.convent-but{
  height: 40px;
  background: rgb(13, 129, 207, 1);
  color: #fff;
  line-height: 40px;
}
</style>
