<template>
  <child-view>
    <div class="transfer mt-2 mx-4 py-5 px-4 bg-app-dark-2 border border-app-blue-3 border-solid rounded-lg">
      <p class="text-2xl mb-4">权限转让</p>
      <p class="text-sm opacity-60 mb-6">投票组只有管理员能进行投票发起以及成员地址和票数编辑，转让后将失去相应权限，请谨慎进行该操作</p>
      <div class="text-line flex justify-between items-center mb-5">
        <p class="text-sm mb-0">新管理员地址</p>
        <span class="inline-block flex">
          <img class="w-4 mr-7" src="@/assets/home/scan.png" alt="">
          <img class="w-4" src="@/assets/home/person.png" alt="">
        </span>
      </div>
      <div>
        <input class="w-full h-10 rounded-lg mb-5 px-3 text-sm text-gray-600 x-input" placeholder="请输入新的管理员地址" />
      </div>
      <div>
        <button class="w-full h-10 rounded-lg mt-5 mb-5 px-3 bg-btn text-lg tracking-widest">转让</button>
      </div>
    </div>
  </child-view>
  
</template>

<script lang="ts">
import childView from '@/layouts/childView.vue'
import Vue from 'vue'
export default Vue.extend({
  components: { childView },

})
</script>

<style scoped>
  .transfer {
    height: calc(100vh - 150px);
  }
  .x-input {
    width: 100%;
    height: 40px;
    border-radius: 10px;
    margin-bottom: 10px;
    padding-left: 12px;
    padding-right: 12px;
    font-weight: 500;
    color: rgba(36, 36, 37, 0.8);
    box-shadow: 0px 3px 4px 0px #BCB3DC inset;
  }
  .bg-btn {
    background: #6870F1;
  }
</style>