代码

<template>
  <div class="ebusiness-card">
    <!-- 顶部栏 -->
    <div class="header">
      <h1 class="page-title">我的电子名片</h1>
      <button class="add-btn" @click="handleAdd">
        <span class="plus-icon">+</span>
      </button>
    </div>
    
    <!-- 空状态提示 -->
    <div class="empty-state">
      <p class="empty-message">您还没有任何名片</p>
      <p class="card-limit">每人最多可创建5张电子名片</p>
    </div>
    
    <!-- 底部创建按钮 -->
    <button class="create-btn" @click="handleCreate">
      创建电子名片
    </button>
  </div>
</template>
 
<script>
export default {
  name: 'EBusinessCard',
  methods: {
    handleCreate() {
      console.log('点击了底部创建按钮');
      // 创建名片逻辑
    },
    handleAdd() {
      console.log('点击了右上角加号');
      // 加号按钮逻辑，可以与创建按钮相同
      // 或实现其他功能如快速创建等
    }
  }
}
</script>
 
<style scoped>
.ebusiness-card {
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
  position: relative;
}
 
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
}
 
.page-title {
  font-size: 24px;
  color: #333;
  font-weight: 500;
  margin: 0;
}
 
.add-btn {
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
 
.plus-icon {
  color: #1a73e8;
  font-weight: bold;
  font-size: 28px;
  line-height: 1;
}
 
.empty-state {
  background: #f7f8fa;
  border-radius: 12px;
  padding: 30px 20px;
  margin-bottom: 30px;
  text-align: center;
}
 
.empty-message {
  font-size: 16px;
  color: #666;
  margin-bottom: 10px;
}
 
.card-limit {
  font-size: 14px;
  color: #999;
}
 
.create-btn {
  display: block;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  padding: 12px;
  background: #1a73e8;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.3s;
}
 
.create-btn:hover {
  background: #0d62c9;
}
 
/* 移动端适配 */
@media (max-width: 480px) {
  .ebusiness-card {
    padding: 15px;
  }
  
  .page-title {
    font-size: 20px;
  }
  
  .add-btn {
    width: 36px;
    height: 36px;
  }
}
</style>
posted @ 2025-06-24 15:16  Magnet2  阅读(19)  评论(0)    收藏  举报