cfc/cfc-frontend/components/LoginGuideCard.vue

<template>
  <view class="login-guide-card">
    <view class="guide-header">
      <text class="guide-icon">🔒</text>
    </view>
    <text class="guide-title">{{ title }}</text>
    <view class="guide-desc">
      <text class="guide-desc-item" v-for="(item, idx) in items" :key="idx">· {{ item }}</text>
    </view>
    <view class="guide-actions">
      <view class="guide-btn primary" @click="goLogin">立即登录</view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    title: { type: String, default: '登录后查看完整内容' },
    items: {
      type: Array,
      default: function() {
        return ['查看个性化数据', '获取更多推荐']
      }
    }
  },
  methods: {
    goLogin: function() {
      // 走全局登录浮层（mixin 会沿 $parent 链找到宿主页面的 <login-sheet>）；
      // 宿主页面未挂浮层时 mixin 自动回退整页登录
      this.openLoginSheet()
    }
  }
}
</script>

<style scoped>
.login-guide-card {
  margin: 20rpx 30rpx;
  background: linear-gradient(135deg, #FFF7ED, #FFE4D6);
  border-radius: 24rpx;
  padding: 40rpx 32rpx;
  text-align: center;
}
.guide-icon { font-size: 48rpx; }
.guide-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin: 16rpx 0;
  display: block;
}
.guide-desc { margin-bottom: 24rpx; }
.guide-desc-item {
  font-size: 26rpx;
  color: #666;
  line-height: 1.8;
  display: block;
}
.guide-actions {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.guide-btn {
  padding: 16rpx 48rpx;
  border-radius: 40rpx;
  font-size: 28rpx;
  font-weight: 500;
}
.guide-btn.primary {
  background: linear-gradient(135deg, #F97316, #FB923C);
  color: #fff;
}
.guide-btn:active { opacity: 0.8; }
</style>