<script setup>
// 定义按钮点击事件
const handleDeposit = () => {
  console.log("点击了前往充币");
  // 这里可以写跳转路由的代码，例如：router.push('/deposit')
};
</script>

<template>
   <div>
      <div class="empty-state-container">
    <div class="image-wrapper">
<!--      src="https://cdn-icons-png.flaticon.com/512/5501/5501360.png"-->
      <img
        src="../../../assets/icon/bitcoin/qianwangcb.svg"
        alt="暂无资产"
        class="empty-image"
      />
    </div>

    <h2 class="title">暂无资产</h2>
    <p class="subtitle">立即充币或买币，开启交易之旅</p>

    <button class="action-btn" @click="handleDeposit">
      前往充币
    </button>
  </div>
    </div>
</template>

<style lang="less" scoped>
/* 基础尺寸：375px
  如果你使用了 postcss-pxtorem 等插件，这里的 px 会自动转为 rem
*/

.empty-state-container {
  width: 100%;
  //min-height: 100vh; /* 占满全屏高度 */
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center; /* 水平居中 */
  padding-top: 30px; /* 距离顶部的距离，根据设计稿调整 */
  box-sizing: border-box;
}

/* 图片区域 */
.image-wrapper {
  margin-bottom: 15px;
}

.empty-image {
  width: 120px; /* 根据图片实际大小调整 */
  height: auto;
  /* 如果图片本身没有黑白滤镜，可以用 css 调整，或者直接用切好的图 */
  filter: grayscale(100%);
  opacity: 0.8;
}

/* 主标题 */
.title {
  font-size: 18px;
  color: #333333; /* 深黑色 */
  font-weight: 500;
  margin: 0 0 0 0; /* 下边距 */
  line-height: 1.5;
}

/* 副标题 */
.subtitle {
  font-size: 14px;
  color: #999999; /* 浅灰色 */
  margin: 0 0 20px 0; /* 距离按钮的间距 */
  line-height: 1.5;
  text-align: center;
  padding: 0 20px; /* 防止文字太长贴边 */
}

/* 按钮样式 */
.action-btn {
  width: 315px; /* 375 - (30px padding * 2) 左右留白 */
  height: 48px;
  background-color: #DC4653; /* 提取自图片的红色 */
  color: white;
  font-size: 16px;
  font-weight: bold;
  border: none;
  border-radius: 24px; /* 圆角，高度的一半形成胶囊状 */
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(220, 70, 83, 0.3); /* 增加一点红色阴影更有质感 */
  transition: opacity 0.2s;
}

.action-btn:active {
  opacity: 0.8; /* 点击时的反馈 */
}
</style>