<template>
  <el-row class="pr-4">
    <el-col>
      <ul class="security">
        <li>
          <h4>账户密码</h4>
          <div class="description">
            <el-space>
              <span class="text-gray-400">绑定手机和邮箱，并设置密码，帐号更安全</span>
              <el-link type="primary" class="ml-4">修改</el-link>
            </el-space>
          </div>
        </li>
        <li>
          <h4>绑定手机</h4>
          <div class="description">
            <el-space>
              <span class="text-gray-400">已绑定手机号：+86189****4877</span>
              <el-link type="primary" class="ml-4">修改</el-link>
            </el-space>
          </div>
        </li>
        <li>
          <h4>密保问题</h4>
          <div class="description">
            <el-space>
              <span class="text-gray-400">未设置密保问题，密保问题可有效保护账户安全</span>
              <el-link type="primary" class="ml-4">设置</el-link>
            </el-space>
          </div>
        </li>
        <li>
          <h4>个性域名</h4>
          <div class="description">
            <el-space>
              <span class="text-gray-400">已绑定域名：https://www.naiveui.com</span>
              <el-link type="primary" class="ml-4">修改</el-link>
            </el-space>
          </div>
        </li>
      </ul>
    </el-col>
  </el-row>
</template>

<script lang="ts" setup></script>

<style lang="scss" scoped>
  .security {
    li {
      padding: 10px;
      border-bottom: 1px solid #eee;
      &:first-child {
        padding-top: 0;
      }
      &:last-child {
        border-bottom: none;
        padding-bottom: 0;
      }
    }
  }
</style>
