novel-app/RuoYi-App/components/login-prompt.vue

<template>
  <view class="login-prompt">
    <view class="prompt-content">
      <text class="title">登录后继续阅读</text>
      <text class="tip">您已阅读{{ freeChaptersRead }}章免费内容</text>
      
      <view class="benefits">
        <view class="benefit-item">
          <uni-icons type="checkmark" size="18" color="#2ecc71" />
          <text>解锁全部精彩章节</text>
        </view>
        <view class="benefit-item">
          <uni-icons type="checkmark" size="18" color="#2ecc71" />
          <text>加入书架保存阅读进度</text>
        </view>
        <view class="benefit-item">
          <uni-icons type="checkmark" size="18" color="#2ecc71" />
          <text>每日领取阅读金币</text>
        </view>
      </view>
      
      <button class="login-btn" @click="$emit('login')">立即登录/注册</button>
      <button class="continue-btn" @click="$emit('continue')">
        继续阅读 (还可阅读{{ maxFreeChapters - freeChaptersRead }}章)
      </button>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    freeChaptersRead: {
      type: Number,
      default: 0
    },
    maxFreeChapters: {
      type: Number,
      default: 5
    }
  }
}
</script>

<style lang="scss">
.login-prompt {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.prompt-content {
  width: 80%;
  background: white;
  border-radius: 20rpx;
  padding: 40rpx;
  text-align: center;
  
  .title {
    font-size: 36rpx;
    font-weight: bold;
    display: block;
    margin-bottom: 15rpx;
    color: #e74c3c;
  }
  
  .tip {
    font-size: 28rpx;
    color: #666;
    display: block;
    margin-bottom: 30rpx;
  }
}

.benefits {
  text-align: left;
  margin-bottom: 40rpx;
  
  .benefit-item {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
    font-size: 28rpx;
    color: #333;
    
    text {
      margin-left: 15rpx;
    }
  }
}

.login-btn {
  background-color: #e74c3c;
  color: white;
  border-radius: 50rpx;
  margin-bottom: 20rpx;
}

.continue-btn {
  background-color: #3498db;
  color: white;
  border-radius: 50rpx;
}
</style>