cfc/cfc-frontend/components/LoginGuideCard.vue

<template>
  <view class="lgc">
    <view class="lgc-head">
      <view class="lgc-icon"></view>
      <text class="lgc-title">{{ title }}</text>
    </view>
    <view class="lgc-list">
      <view class="lgc-item" v-for="(item, idx) in items" :key="idx">
        <view class="lgc-check"></view>
        <text class="lgc-text">{{ item }}</text>
      </view>
    </view>
    <view class="lgc-btn" @click="goLogin">
      <text class="lgc-btn-text">手机号快捷登录</text>
    </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 lang="scss">
// 图标走 data-URI SVG 背景（mp-weixin 模板内禁写 svg 标签），颜色由品牌令牌插值，不硬编码色值
$lgc-brand-hex: '#{$brand-primary}';
$lgc-brand: str-slice($lgc-brand-hex, 2);

.lgc {
  margin: 0;
  background: $facade-brand-tint;
  border: 1rpx solid rgba($brand-primary, 0.14);
  border-radius: 24rpx;
  padding: 32rpx 28rpx;
  display: flex;
  flex-direction: column;
}
.lgc-head {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.lgc-icon {
  width: 36rpx;
  height: 36rpx;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 36rpx 36rpx;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23#{$lgc-brand}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='10.5' rx='2.5'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
}
.lgc-title {
  flex: 1;
  min-width: 0;
  margin-left: 14rpx;
  font-size: calc(30rpx * var(--font-scale, 1));
  font-weight: 700;
  color: $facade-text-strong;
  line-height: 1.4;
}
.lgc-list {
  margin-top: 20rpx;
  display: flex;
  flex-direction: column;
}
.lgc-item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  margin-top: 14rpx;
}
.lgc-item:first-child { margin-top: 0; }
.lgc-check {
  width: 28rpx;
  height: 28rpx;
  flex-shrink: 0;
  margin-top: 6rpx;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 28rpx 28rpx;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23#{$lgc-brand}' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.lgc-text {
  flex: 1;
  min-width: 0;
  margin-left: 12rpx;
  font-size: calc(24rpx * var(--font-scale, 1));
  color: $facade-text-body;
  line-height: 1.6;
}
.lgc-btn {
  margin-top: 28rpx;
  padding: 24rpx 0;
  border-radius: 999rpx;
  background: linear-gradient(135deg, $brand-primary, $brand-primary-dark);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10rpx 24rpx rgba($brand-primary, 0.2);
}
.lgc-btn:active { opacity: 0.9; }
.lgc-btn-text {
  font-size: calc(28rpx * var(--font-scale, 1));
  font-weight: 600;
  color: $app-surface;
}
</style>