|
@@ -0,0 +1,531 @@
|
|
|
|
|
+<template>
|
|
|
|
|
+ <view class="invite-link-page">
|
|
|
|
|
+ <view class="container">
|
|
|
|
|
+ <view class="header">
|
|
|
|
|
+ <view class="title">邀请好友</view>
|
|
|
|
|
+ <view class="desc">通过微信分享邀请好友,直接打开小程序</view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <view class="main-card">
|
|
|
|
|
+ <!-- <view class="invite-info">
|
|
|
|
|
+ <view class="info-row">
|
|
|
|
|
+ <text class="label">邀请人ID</text>
|
|
|
|
|
+ <text class="value">{{ userId }}</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="info-row">
|
|
|
|
|
+ <text class="label">邀请参数</text>
|
|
|
|
|
+ <text class="value link-text">inviteUserId={{ userId }}</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view> -->
|
|
|
|
|
+ <view class="invite-info">
|
|
|
|
|
+ <view class="info-row">
|
|
|
|
|
+ <text class="label">邀请人ID</text>
|
|
|
|
|
+ <text class="value">{{ userId }}</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="info-row">
|
|
|
|
|
+ <text class="label">邀请人</text>
|
|
|
|
|
+ <text class="value">{{ userInfo.nickname }}</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="share-btn primary">
|
|
|
|
|
+ <button open-type="share" class="share-button">
|
|
|
|
|
+ <text class="share-icon"></text>
|
|
|
|
|
+ <text>分享给微信好友</text>
|
|
|
|
|
+ </button>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <view class="tips-section">
|
|
|
|
|
+ <view class="tip-title">邀请说明</view>
|
|
|
|
|
+ <view class="tip-list">
|
|
|
|
|
+ <view class="tip-item">
|
|
|
|
|
+ <text class="tip-number">1</text>
|
|
|
|
|
+ <text class="tip-text">点击分享按钮,选择要邀请的好友</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="tip-item">
|
|
|
|
|
+ <text class="tip-number">2</text>
|
|
|
|
|
+ <text class="tip-text">好友点击分享卡片将直接打开小程序登录页</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="tip-item">
|
|
|
|
|
+ <text class="tip-number">3</text>
|
|
|
|
|
+ <text class="tip-text">好友登录后自动绑定邀请关系</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <view class="note-section">
|
|
|
|
|
+ <text class="note-title">温馨提示</text>
|
|
|
|
|
+ <text class="note-content">微信小程序的可复制链接需要通过微信官方API生成,如需此功能请联系后端开发配置。当前推荐使用分享按钮邀请好友。</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+</template>
|
|
|
|
|
+
|
|
|
|
|
+<script>
|
|
|
|
|
+export default {
|
|
|
|
|
+ name: "InviteFriend",
|
|
|
|
|
+ data() {
|
|
|
|
|
+ return {
|
|
|
|
|
+ userId: '',
|
|
|
|
|
+ invitePath: '',
|
|
|
|
|
+ userInfo: JSON.parse(uni.getStorageSync('userInfo')) || {}
|
|
|
|
|
+ };
|
|
|
|
|
+ },
|
|
|
|
|
+ mounted() {
|
|
|
|
|
+ this.initData();
|
|
|
|
|
+ },
|
|
|
|
|
+ onShareAppMessage() {
|
|
|
|
|
+ return {
|
|
|
|
|
+ title: '邀请你加入健康商城',
|
|
|
|
|
+ path: `/pages/home/index?inviteUserId=${this.userId}`,
|
|
|
|
|
+ imageUrl: '/static/logo.jpg',
|
|
|
|
|
+ success(res) {
|
|
|
|
|
+ uni.showToast({
|
|
|
|
|
+ title: '分享成功',
|
|
|
|
|
+ icon: 'success'
|
|
|
|
|
+ });
|
|
|
|
|
+ },
|
|
|
|
|
+ fail(err) {
|
|
|
|
|
+ uni.showToast({
|
|
|
|
|
+ title: '分享失败',
|
|
|
|
|
+ icon: 'none'
|
|
|
|
|
+ });
|
|
|
|
|
+ }
|
|
|
|
|
+ };
|
|
|
|
|
+ },
|
|
|
|
|
+ methods: {
|
|
|
|
|
+ initData() {
|
|
|
|
|
+ if (this.userInfo) {
|
|
|
|
|
+ this.userId = this.userInfo.userId;
|
|
|
|
|
+ } else {
|
|
|
|
|
+ uni.showToast({
|
|
|
|
|
+ title: '请先登录',
|
|
|
|
|
+ icon: 'none'
|
|
|
|
|
+ });
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
|
|
+ this.invitePath = `/pages/home/index?inviteUserId=${this.userInfo.userId}`;
|
|
|
|
|
+ this.invitePath = `/pages/auth/login?inviteUserId=${this.userInfo.userId}`;
|
|
|
|
|
+
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
|
|
+ handleShare() {
|
|
|
|
|
+ uni.showShareMenu({
|
|
|
|
|
+ withShareTicket: true,
|
|
|
|
|
+ menus: ['shareAppMessage']
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ // uni.showToast({
|
|
|
|
|
+ // title: '请点击右上角分享',
|
|
|
|
|
+ // icon: 'none',
|
|
|
|
|
+ // duration: 2000
|
|
|
|
|
+ // });
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+};
|
|
|
|
|
+</script>
|
|
|
|
|
+
|
|
|
|
|
+<style lang="less">
|
|
|
|
|
+.invite-link-page {
|
|
|
|
|
+ min-height: 100vh;
|
|
|
|
|
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.container {
|
|
|
|
|
+ padding: 60rpx 40rpx;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.header {
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ margin-bottom: 60rpx;
|
|
|
|
|
+
|
|
|
|
|
+ .title {
|
|
|
|
|
+ font-size: 48rpx;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+ margin-bottom: 20rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .desc {
|
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
|
+ color: rgba(255, 255, 255, 0.8);
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.main-card {
|
|
|
|
|
+ background: #fff;
|
|
|
|
|
+ border-radius: 24rpx;
|
|
|
|
|
+ padding: 40rpx;
|
|
|
|
|
+ box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.15);
|
|
|
|
|
+
|
|
|
|
|
+ .invite-info {
|
|
|
|
|
+ margin-bottom: 30rpx;
|
|
|
|
|
+
|
|
|
|
|
+ .info-row {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ padding: 20rpx 0;
|
|
|
|
|
+ border-bottom: 1rpx solid #f0f0f0;
|
|
|
|
|
+
|
|
|
|
|
+ &:last-child {
|
|
|
|
|
+ border-bottom: none;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .label {
|
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
|
+ color: #999;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .value {
|
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
|
+ color: #333;
|
|
|
|
|
+ font-weight: 500;
|
|
|
|
|
+
|
|
|
|
|
+ &.link-text {
|
|
|
|
|
+ color: #4C49E9;
|
|
|
|
|
+ word-break: break-all;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .share-btn {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ height: 96rpx;
|
|
|
|
|
+ border-radius: 48rpx;
|
|
|
|
|
+ font-size: 32rpx;
|
|
|
|
|
+ margin-bottom: 20rpx;
|
|
|
|
|
+
|
|
|
|
|
+ .share-icon {
|
|
|
|
|
+ font-family: iconfont;
|
|
|
|
|
+ margin-right: 12rpx;
|
|
|
|
|
+ font-size: 36rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &.primary {
|
|
|
|
|
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &.secondary {
|
|
|
|
|
+ background: #f5f5f5;
|
|
|
|
|
+ color: #666;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .share-button {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ background: transparent;
|
|
|
|
|
+ border: none;
|
|
|
|
|
+ padding: 0;
|
|
|
|
|
+ margin: 0;
|
|
|
|
|
+ font-size: inherit;
|
|
|
|
|
+ color: inherit;
|
|
|
|
|
+ line-height: inherit;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+
|
|
|
|
|
+ &::after {
|
|
|
|
|
+ display: none;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.tips-section {
|
|
|
|
|
+ margin-top: 40rpx;
|
|
|
|
|
+ background: rgba(255, 255, 255, 0.1);
|
|
|
|
|
+ border-radius: 24rpx;
|
|
|
|
|
+ padding: 30rpx;
|
|
|
|
|
+
|
|
|
|
|
+ .tip-title {
|
|
|
|
|
+ font-size: 30rpx;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+ margin-bottom: 24rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .tip-list {
|
|
|
|
|
+ .tip-item {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: flex-start;
|
|
|
|
|
+ margin-bottom: 20rpx;
|
|
|
|
|
+
|
|
|
|
|
+ &:last-child {
|
|
|
|
|
+ margin-bottom: 0;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .tip-number {
|
|
|
|
|
+ width: 40rpx;
|
|
|
|
|
+ height: 40rpx;
|
|
|
|
|
+ border-radius: 50%;
|
|
|
|
|
+ background: rgba(255, 255, 255, 0.2);
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+ font-size: 24rpx;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ margin-right: 20rpx;
|
|
|
|
|
+ flex-shrink: 0;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .tip-text {
|
|
|
|
|
+ font-size: 26rpx;
|
|
|
|
|
+ color: rgba(255, 255, 255, 0.9);
|
|
|
|
|
+ line-height: 1.6;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.note-section {
|
|
|
|
|
+ margin-top: 30rpx;
|
|
|
|
|
+ background: rgba(255, 255, 255, 0.08);
|
|
|
|
|
+ border-radius: 16rpx;
|
|
|
|
|
+ padding: 24rpx;
|
|
|
|
|
+
|
|
|
|
|
+ .note-title {
|
|
|
|
|
+ font-size: 26rpx;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ color: rgba(255, 255, 255, 0.9);
|
|
|
|
|
+ display: block;
|
|
|
|
|
+ margin-bottom: 12rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .note-content {
|
|
|
|
|
+ font-size: 24rpx;
|
|
|
|
|
+ color: rgba(255, 255, 255, 0.7);
|
|
|
|
|
+ line-height: 1.6;
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+</style>on-title {
|
|
|
|
|
+font-size: 32rpx;
|
|
|
|
|
+font-weight: bold;
|
|
|
|
|
+color: #333;
|
|
|
|
|
+margin-bottom: 24rpx;
|
|
|
|
|
+}
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.rewards-list {
|
|
|
|
|
+.reward-item {
|
|
|
|
|
+display: flex;
|
|
|
|
|
+align-items: center;
|
|
|
|
|
+padding: 20rpx 0;
|
|
|
|
|
+border-bottom: 1rpx solid #f5f5f5;
|
|
|
|
|
+
|
|
|
|
|
+&:last-child {
|
|
|
|
|
+border-bottom: none;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.reward-icon {
|
|
|
|
|
+width: 48rpx;
|
|
|
|
|
+height: 48rpx;
|
|
|
|
|
+border-radius: 50%;
|
|
|
|
|
+background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
|
|
+color: #fff;
|
|
|
|
|
+font-size: 24rpx;
|
|
|
|
|
+display: flex;
|
|
|
|
|
+align-items: center;
|
|
|
|
|
+justify-content: center;
|
|
|
|
|
+margin-right: 20rpx;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.reward-info {
|
|
|
|
|
+flex: 1;
|
|
|
|
|
+
|
|
|
|
|
+.reward-title {
|
|
|
|
|
+font-size: 28rpx;
|
|
|
|
|
+color: #333;
|
|
|
|
|
+margin-bottom: 6rpx;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.reward-desc {
|
|
|
|
|
+font-size: 24rpx;
|
|
|
|
|
+color: #999;
|
|
|
|
|
+}
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.reward-value {
|
|
|
|
|
+font-size: 28rpx;
|
|
|
|
|
+font-weight: bold;
|
|
|
|
|
+color: #4C49E9;
|
|
|
|
|
+}
|
|
|
|
|
+}
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.share-list {
|
|
|
|
|
+display: flex;
|
|
|
|
|
+justify-content: space-around;
|
|
|
|
|
+
|
|
|
|
|
+.share-item {
|
|
|
|
|
+display: flex;
|
|
|
|
|
+flex-direction: column;
|
|
|
|
|
+align-items: center;
|
|
|
|
|
+
|
|
|
|
|
+.share-icon {
|
|
|
|
|
+width: 100rpx;
|
|
|
|
|
+height: 100rpx;
|
|
|
|
|
+border-radius: 50%;
|
|
|
|
|
+display: flex;
|
|
|
|
|
+align-items: center;
|
|
|
|
|
+justify-content: center;
|
|
|
|
|
+margin-bottom: 16rpx;
|
|
|
|
|
+
|
|
|
|
|
+.iconfont {
|
|
|
|
|
+font-size: 48rpx;
|
|
|
|
|
+}
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.wechat-icon {
|
|
|
|
|
+background: linear-gradient(135deg, #07c160 0%, #10b981 100%);
|
|
|
|
|
+color: #fff;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.moments-icon {
|
|
|
|
|
+background: linear-gradient(135deg, #e6d5b8 0%, #d4a373 100%);
|
|
|
|
|
+color: #fff;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.qq-icon {
|
|
|
|
|
+background: linear-gradient(135deg, #1677ff 0%, #096dd9 100%);
|
|
|
|
|
+color: #fff;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.link-icon {
|
|
|
|
|
+background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
|
|
+color: #fff;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.share-name {
|
|
|
|
|
+font-size: 24rpx;
|
|
|
|
|
+color: #666;
|
|
|
|
|
+}
|
|
|
|
|
+}
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.invited-section {
|
|
|
|
|
+.invited-count {
|
|
|
|
|
+display: flex;
|
|
|
|
|
+flex-direction: column;
|
|
|
|
|
+align-items: center;
|
|
|
|
|
+padding: 30rpx 0;
|
|
|
|
|
+border-bottom: 1rpx solid #f5f5f5;
|
|
|
|
|
+
|
|
|
|
|
+.count-num {
|
|
|
|
|
+font-size: 56rpx;
|
|
|
|
|
+font-weight: bold;
|
|
|
|
|
+color: #4C49E9;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.count-desc {
|
|
|
|
|
+font-size: 26rpx;
|
|
|
|
|
+color: #999;
|
|
|
|
|
+margin-top: 8rpx;
|
|
|
|
|
+}
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.invited-list {
|
|
|
|
|
+padding-top: 20rpx;
|
|
|
|
|
+
|
|
|
|
|
+.invited-item {
|
|
|
|
|
+display: flex;
|
|
|
|
|
+align-items: center;
|
|
|
|
|
+padding: 20rpx 0;
|
|
|
|
|
+border-bottom: 1rpx solid #f5f5f5;
|
|
|
|
|
+
|
|
|
|
|
+&:last-child {
|
|
|
|
|
+border-bottom: none;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.avatar {
|
|
|
|
|
+width: 72rpx;
|
|
|
|
|
+height: 72rpx;
|
|
|
|
|
+border-radius: 50%;
|
|
|
|
|
+overflow: hidden;
|
|
|
|
|
+margin-right: 20rpx;
|
|
|
|
|
+
|
|
|
|
|
+image {
|
|
|
|
|
+width: 100%;
|
|
|
|
|
+height: 100%;
|
|
|
|
|
+}
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.info {
|
|
|
|
|
+flex: 1;
|
|
|
|
|
+
|
|
|
|
|
+.name {
|
|
|
|
|
+font-size: 28rpx;
|
|
|
|
|
+color: #333;
|
|
|
|
|
+margin-bottom: 6rpx;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.time {
|
|
|
|
|
+font-size: 24rpx;
|
|
|
|
|
+color: #999;
|
|
|
|
|
+}
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.status {
|
|
|
|
|
+font-size: 22rpx;
|
|
|
|
|
+color: #999;
|
|
|
|
|
+padding: 6rpx 16rpx;
|
|
|
|
|
+border-radius: 20rpx;
|
|
|
|
|
+background: #f5f5f5;
|
|
|
|
|
+
|
|
|
|
|
+&.active {
|
|
|
|
|
+color: #4C49E9;
|
|
|
|
|
+background: rgba(76, 73, 233, 0.1);
|
|
|
|
|
+}
|
|
|
|
|
+}
|
|
|
|
|
+}
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.empty {
|
|
|
|
|
+display: flex;
|
|
|
|
|
+flex-direction: column;
|
|
|
|
|
+align-items: center;
|
|
|
|
|
+padding: 40rpx 0;
|
|
|
|
|
+
|
|
|
|
|
+.empty-icon {
|
|
|
|
|
+width: 120rpx;
|
|
|
|
|
+height: 120rpx;
|
|
|
|
|
+margin-bottom: 20rpx;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.empty-text {
|
|
|
|
|
+font-size: 28rpx;
|
|
|
|
|
+color: #999;
|
|
|
|
|
+margin-bottom: 24rpx;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.empty-btn {
|
|
|
|
|
+padding: 16rpx 48rpx;
|
|
|
|
|
+background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
|
|
+color: #fff;
|
|
|
|
|
+font-size: 28rpx;
|
|
|
|
|
+border-radius: 30rpx;
|
|
|
|
|
+}
|
|
|
|
|
+}
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.bottom-btn {
|
|
|
|
|
+position: fixed;
|
|
|
|
|
+left: 30rpx;
|
|
|
|
|
+right: 30rpx;
|
|
|
|
|
+bottom: 30rpx;
|
|
|
|
|
+height: 96rpx;
|
|
|
|
|
+background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
|
|
+color: #fff;
|
|
|
|
|
+font-size: 32rpx;
|
|
|
|
|
+font-weight: bold;
|
|
|
|
|
+border-radius: 48rpx;
|
|
|
|
|
+display: flex;
|
|
|
|
|
+align-items: center;
|
|
|
|
|
+justify-content: center;
|
|
|
|
|
+box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.4);
|
|
|
|
|
+}
|
|
|
|
|
+</style>
|