zdtap-uniapp-main/pages/index/myJoin.vue

<template>
	<view class="activitypage">
		<!-- 主导航栏 -->
		<view class="main-nav">
			<view class="nav-item" :class="{'nav-active': tabCur == 0}" @tap="tabSelect" :data-id="0">
				累计活动
				<view class="nav-line" v-if="tabCur == 0"></view>
			</view>
			<view class="nav-item" :class="{'nav-active': tabCur == 1}" @tap="tabSelect" :data-id="1">
				啤酒币换购
				<view class="nav-line" v-if="tabCur == 1"></view>
			</view>
		</view>

		<!-- 状态提示区域 -->
		<view class="status-tip" v-if="!isLoggedIn || userStatus !== 'verified'">
			<view class="flex-col status-text">
				<block v-if="!hasNetwork">
					<text class="text-lg">网络连接失败</text>
					<text class="sub-text">请检查网络设置后重试</text>
					<button class="login-btn" @click="checkNetwork">重新加载</button>
				</block>
				<block v-else-if="userStatus === 'guest'">
					<text class="text-lg">暂无法查看信息</text>
					<text class="sub-text">您还没有登录，请登录后查看信息</text>
					<button class="login-btn" @click="toLogin">
						<image src="/static/send-2.svg" class="btn-icon"></image>
						登录/认证
					</button>
				</block>
				<block v-else-if="userStatus === 'unverified'">
					<text class="text-lg">您的门店还未完成认证</text>
					<text class="sub-text">请点击认证门店信息</text>
					<button class="login-btn" @click="toLogin">
						<image src="/static/send-2.svg" class="btn-icon"></image>
						去认证
					</button>
				</block>
				<block v-else-if="userStatus === 'verifying'">
					<text class="text-lg">正在认证审核中</text>
					<text class="sub-text">请耐心等待</text>
				</block>
			</view>
		</view>

		<!-- 内容区域 -->
		<template v-if="isLoggedIn && userStatus === 'verified'">
			<!-- 状态标签栏 -->
			<scroll-view scroll-x class="status-nav" :scroll-left="0">
				<view class="status-nav-content">
					<template v-if="tabCur == 0">
						<view class="status-item" :class="{'status-active': curTag == 0}" @tap="changeTag(0)">累计中</view>
						<view class="status-item" :class="{'status-active': curTag == 1}" @tap="changeTag(1)">待兑付</view>
						<view class="status-item" :class="{'status-active': curTag == 2}" @tap="changeTag(2)">已兑付</view>
						<view class="status-item" :class="{'status-active': curTag == 3}" @tap="changeTag(3)">已完成</view>
					</template>
					<template v-else>
						<view class="status-item" :class="{'status-active': curCoinTag == 0}" @tap="changeCoinTag(0)">全部</view>
						<view class="status-item" :class="{'status-active': curCoinTag == 1}" @tap="changeCoinTag(1)">待发货</view>
						<view class="status-item" :class="{'status-active': curCoinTag == 2}" @tap="changeCoinTag(2)">已收货</view>
						<view class="status-item" :class="{'status-active': curCoinTag == 3}" @tap="changeCoinTag(3)">已完成</view>
					</template>
				</view>
			</scroll-view>

			<view class="bg-white flex-col" style="height: 100%;">
				<!-- 累积活动列表 -->
				<scroll-view v-if="tabCur == 0" scroll-y
					style="padding: 44rpx 28rpx 0;background-color: #F2F2F2;overflow-y: auto;flex:1;"
					@scrolltolower="changePage">
					<!-- 活动列表项 -->
					<activity-item
						v-for="(it, index) in myJoinList"
						:key="index"
						:item="it"
						@click="toInfo(it)"
						@review="toReview"
					></activity-item>
					<!-- 列表加载状态 -->
					<view class="cu-load" :class="'over'"></view>
				</scroll-view>

				<!-- 啤酒币换购列表 -->
				<scroll-view v-if="tabCur == 1" scroll-y
					style="padding: 44rpx 28rpx 0;background-color: #F2F2F2;overflow-y: auto;flex:1"
					@scrolltolower="changePageCoin">
					<!-- 兑换订单列表 -->
					<view class="coin-item" v-for="(it, index) in myExchangeOrder" :key="index" @click="toOrderInfo(it)">
						<view class="order-header">
							<view class="order-type">
								<image src="/static/beerCoin.png" class="coin-icon"></image>
								<text class="type-text">啤酒币兑换</text>
							</view>
							<view class="order-status" :class="'status-' + it.status">
								<text>{{ getStatusText(it.status) }}</text>
							</view>
						</view>
						<view class="order-content">
							<image :src="it.goodsCover" class="goods-image" mode="aspectFill"></image>
							<view class="goods-info">
								<text class="goods-name word-all">{{ it.goodsName }}</text>
								<view class="goods-specs" v-if="it.specs">
									<text class="specs-text">{{ it.specs }}</text>
								</view>
							</view>
							<view class="order-summary">
								<view class="price-amount">
									<text class="amount">{{ it.beerCoinNum }}</text>
									<text class="cuIcon-rechargefill coin-icon"></text>
									<text class="price-unit">/件</text>
								</view>
								<view class="summary-item">
									<text class="summary-label">兑换数量</text>
									<text class="summary-value">{{ it.redeemNum }}件</text>
								</view>
							</view>
						</view>
					</view>
					<view class="cu-load" :class="orderTotal == myExchangeOrder.length ? 'over': 'more'"></view>
				</scroll-view>
			</view>
		</template>
		<!-- 登录弹窗组件 -->
		<loginPopup ref="loginRef" @loginSuccess="loginSuccess"></loginPopup>
	</view>
</template>

<script>
	import loginPopup from '@/components/loginPopup.vue';
	import ActivityItem from '@/components/ActivityItem.vue'
	import { myJoinListApi, getMyExchangeOrder } from "@/api/user.js"
	import { getBarInfo } from "@/api/bar.js"
	export default {
		components: {
			loginPopup,
			ActivityItem
		},
		data() {
			return {
				loading: true,
				userInfo: null,
				barInfo: null,
				isLoggedIn: false,
				isVerified: false,
				tabCur: 0,
				curTag: 0,
				curCoinTag: 0,
				myJoinList: [],
				queryForm: {
					status: 1,
					pageNum: 1,
					pageSize: 10
				},
				total: 0,
				myExchangeOrder:[],
				orderQuery: {
					pageNum: 1,
					pageSize: 10
				},
				orderTotal: 0,
				isLoading: false,
				isRefreshing: false,
				hasNetwork: true,
				lastRefreshTime: 0,
				refreshDebounceTime: 1000,
			};
		},
		computed: {
			// 用户状态
			userStatus() {
				if (!this.isLoggedIn) return 'guest' // 游客
				if (!this.barInfo || this.barInfo.authState === 0) return 'unverified' // 未认证
				if (this.barInfo.authState === 2) return 'verifying' // 认证中
				return 'verified' // 认证通过
			}
		},
		onLoad() {
			this.checkLoginStatus()
			this.checkNetwork()
		},
		onShow() {
			this.checkUserInfo()
		},
		methods: {
			// 获取订单状态文本
			getStatusText(status) {
				switch(status) {
					case 1:
						return '待发货';
					case 2:
						return '已发货';
					case 3:
						return '已完成';
					default:
						return '未知状态';
				}
			},
			// 检查登录状态
			async checkLoginStatus() {
				try {
					const token = uni.getStorageSync('token')
					const userInfo = uni.getStorageSync('userInfo')
					
					// 检查token和userInfo是否有效
					if (!token || token.startsWith('temp_') || !userInfo) {
						this.isLoggedIn = false
						this.isVerified = false
						this.userInfo = null
						this.barInfo = null
						return false
					}
					
					this.isLoggedIn = true
					this.userInfo = userInfo
					
					// 获取门店信息
					await this.getBarInfoFun()
					
					return true
				} catch (error) {
					console.error('检查登录状态失败:', error)
					return false
				}
			},
			
			// 获取门店信息
			async getBarInfoFun() {
				console.log('【getBarInfoFun】开始获取门店信息')
				console.log('【getBarInfoFun】当前登录状态:', this.isLoggedIn)
				
				if (!this.isLoggedIn) {
					console.log('【getBarInfoFun】用户未登录，不获取门店信息')
					return
				}
				
				try {
					console.log('【getBarInfoFun】调用getBarInfo接口')
					const res = await getBarInfo()
					console.log('【getBarInfoFun】接口返回数据:', res)
					
					if (res.code === 200 && res.data) {
						console.log('【getBarInfoFun】获取门店信息成功')
						console.log('【getBarInfoFun】门店信息:', res.data)
						console.log('【getBarInfoFun】认证状态(authState):', res.data.authState)
						
						this.barInfo = res.data
						this.isVerified = res.data.authState === 1 // 1表示认证通过
						console.log('【getBarInfoFun】更新后的认证状态(isVerified):', this.isVerified)
						
						uni.setStorageSync('barInfo', res.data)
						console.log('【getBarInfoFun】门店信息已存储到本地')
					} else {
						console.log('【getBarInfoFun】获取门店信息失败，接口返回异常')
						this.isVerified = false
						this.barInfo = null
					}
				} catch (error) {
					console.error('【getBarInfoFun】获取门店信息出错:', error)
					this.isVerified = false
					this.barInfo = null
					// 只在已认证状态下显示错误提示
					if (this.userStatus === 'verified') {
						uni.showToast({
							title: '获取门店信息失败',
							icon: 'none'
						})
					}
				}
				
				console.log('【getBarInfoFun】方法执行完成')
				console.log('【getBarInfoFun】最终状态 - barInfo:', this.barInfo)
				console.log('【getBarInfoFun】最终状态 - isVerified:', this.isVerified)
				console.log('【getBarInfoFun】当前userStatus:', this.userStatus)
			},
			
			// 检查用户信息变化
			async checkUserInfo() {
				try {
					const newToken = uni.getStorageSync('token')
					const newUserInfo = uni.getStorageSync('userInfo')
					
					// 检查token和userInfo是否有变化
					if (newToken !== this.userInfo?.token || 
						JSON.stringify(newUserInfo) !== JSON.stringify(this.userInfo)) {
						
						this.loading = true
						const isLoggedIn = await this.checkLoginStatus()
						
						if (isLoggedIn) {
							// 只在需要时刷新数据
							if (this.shouldRefreshData()) {
								await this.getMyJoinList()
							}
						} else {
							this.myJoinList = []
							this.myExchangeOrder = []
						}
					}
				} catch (error) {
					console.error('检查用户信息失败:', error)
				} finally {
					this.loading = false
				}
			},
			
			// 登录成功回调
			async loginSuccess() {
				try {
					console.log('【loginSuccess】开始处理登录成功')
					this.loading = true
					
					const token = uni.getStorageSync('token')
					const openId = uni.getStorageSync('openId')
					
					if (token && openId) {
						this.isLoggedIn = true
						this.userInfo = {
							token,
							openId
						}
						
						await this.getBarInfoFun()
						
						// 重置页面状态
						this.queryForm.pageNum = 1
						this.orderQuery.pageNum = 1
						this.myJoinList = []
						this.myExchangeOrder = []
						
						// 只在需要时刷新数据
						if (this.userStatus === 'verified' && this.shouldRefreshData()) {
							await this.getMyJoinList()
						}
					} else {
						this.isLoggedIn = false
						this.userInfo = null
						this.barInfo = null
						this.isVerified = false
					}
				} catch (error) {
					console.error('【loginSuccess】登录成功处理失败:', error)
					if (this.userStatus === 'verified') {
						uni.showToast({
							title: '登录失败',
							icon: 'none'
						})
					}
				} finally {
					this.loading = false
				}
			},
			
			// 判断是否需要刷新数据
			shouldRefreshData() {
				const now = Date.now()
				if (now - this.lastRefreshTime < this.refreshDebounceTime) {
					return false
				}
				this.lastRefreshTime = now
				return true
			},
			
			// 获取我的兑换订单
			async getMyExchangeOrderFun() {
				// 如果用户未认证，直接返回
				if (this.userStatus !== 'verified') {
					return
				}
				
				if (this.isLoading) return
				
				try {
					this.isLoading = true
					const res = await getMyExchangeOrder(this.orderQuery)
					
					if (res && res.rows) {
						this.orderTotal = res.total || 0
						if (this.orderQuery.pageNum === 1) {
							this.myExchangeOrder = res.rows
						} else {
							this.myExchangeOrder = [...this.myExchangeOrder, ...res.rows]
						}
					}
				} catch (error) {
					console.error('获取兑换订单失败:', error)
					// 只在已认证状态下显示错误提示
					if (this.userStatus === 'verified') {
						uni.showToast({
							title: '获取订单失败',
							icon: 'none'
						})
					}
				} finally {
					this.isLoading = false
				}
			},
			
			// 切换标签页
			async tabSelect(e) {
				const id = e.currentTarget.dataset.id
				if (this.tabCur === id) return
				
				this.tabCur = id
				if (this.tabCur == 0) {
					this.myJoinList = []
					this.queryForm.pageNum = 1
					// 只在需要时刷新数据
					if (this.shouldRefreshData()) {
						await this.getMyJoinList()
					}
				} else {
					this.myExchangeOrder = []
					this.orderQuery.pageNum = 1
					// 只在需要时刷新数据
					if (this.shouldRefreshData()) {
						await this.getMyExchangeOrderFun()
					}
				}
			},
			
			// 获取我参与的活动列表
			async getMyJoinList() {
				// 如果用户未认证，直接返回
				if (this.userStatus !== 'verified') {
					return
				}
				
				if (this.isLoading) return
				
				try {
					this.isLoading = true
					const res = await myJoinListApi(this.queryForm)
					
					if (res && res.data) {
						this.total = res.data.total || 0
						let activities = []
						
						// 处理品牌活动
						if (res.data.activities && res.data.activities.length > 0) {
							activities = activities.concat(res.data.activities)
						}
						
						// 处理平台活动
						if (res.data.platformActivities && res.data.platformActivities.length > 0) {
							activities = activities.concat(res.data.platformActivities)
						}
						
						if (this.queryForm.pageNum === 1) {
							this.myJoinList = activities
						} else {
							this.myJoinList = [...this.myJoinList, ...activities]
						}
					}
				} catch (error) {
					console.error('获取活动列表失败:', error)
					if (this.userStatus === 'verified') {
						uni.showToast({
							title: '获取活动列表失败',
							icon: 'none'
						})
					}
				} finally {
					this.isLoading = false
				}
			},
			
			// 加载更多活动
			async changePage() {
				if (this.myJoinList.length < this.total && !this.isLoading) {
					this.queryForm.pageNum++
					await this.getMyJoinList()
				}
			},
			
			// 跳转到活动详情
			toInfo(it) {
				if (!it.batchId) return
				uni.navigateTo({
					url: '/pagesActivity/myActivityDetail?batchId=' + it.batchId
				})
			},
			
			// 跳转到订单详情
			toOrderInfo(it) {
				if (!it.id || !it.goodsId) return
				uni.navigateTo({
					url: '/pagesCoin/orderInfo?orderId=' + it.id + '&goodsId=' + it.goodsId
				})
			},
			
			// 切换状态标签
			async changeTag(index) {
				if (this.curTag === index) return
				
				this.curTag = index
				this.queryForm.pageNum = 1
				this.myJoinList = []
				
				// 设置查询状态
				switch(index) {
					case 0:
						this.queryForm.status = 1
						break
					case 1:
						this.queryForm.status = 2
						break
					case 2:
						this.queryForm.status = 3
						break
					case 3:
						this.queryForm.status = 4
						break
					default:
						delete this.queryForm.status
				}
				
				await this.getMyJoinList()
			},
			
			// 切换订单状态标签
			async changeCoinTag(key) {
				if (this.curCoinTag === key) return
				
				this.curCoinTag = key
				this.orderQuery.pageNum = 1
				this.myExchangeOrder = []
				
				// 设置查询状态
				switch(key) {
					case 0:
						delete this.orderQuery.status
						break
					case 1:
						this.orderQuery.status = 1
						break
					case 2:
						this.orderQuery.status = 2
						break
					case 3:
						this.orderQuery.status = 3
						break
				}
				
				// 只在需要时刷新数据
				if (this.shouldRefreshData()) {
					await this.getMyExchangeOrderFun()
				}
			},
			
			// 加载更多订单
			async changePageCoin() {
				if (this.myExchangeOrder.length < this.orderTotal && !this.isLoading) {
					this.orderQuery.pageNum++
					await this.getMyExchangeOrderFun()
				}
			},
			
			// 跳转登录
			toLogin() {
				// 如果是未认证状态，直接跳转到认证页面
				if (this.userStatus === 'unverified') {
					const openId = uni.getStorageSync('openId')
					uni.navigateTo({
						url: '/pages/index/registration?openId=' + openId
					})
				} else {
					// 其他状态打开登录弹窗
					this.$refs.loginRef.open()
				}
			},
			
			// 检查网络状态
			checkNetwork() {
				uni.getNetworkType({
					success: (res) => {
						this.hasNetwork = res.networkType !== 'none'
						if (this.hasNetwork) {
							this.checkLoginStatus()
						}
					}
				})
				
				// 监听网络状态变化
				uni.onNetworkStatusChange((res) => {
					this.hasNetwork = res.isConnected
					if (this.hasNetwork) {
						this.checkLoginStatus()
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.activitypage {
	height: 100vh;
	background: #FFFFFF;
	display: flex;
	flex-direction: column;

	.main-nav {
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 100;
		padding: 0 32rpx;
		background: #FFFFFF;
		height: 88rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);

		.nav-item {
			position: relative;
			width: calc((100% - 56rpx) / 2);  // 两等分宽度（减去间距）
			margin: 0 14rpx;  // 统一的间距
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32rpx;
			color: #1A1A1A;
			font-weight: normal;
			transition: all 0.3s ease;

			&.nav-active {
				color: #4E63E0;
				font-weight: 600;

				.nav-line {
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
					width: 48rpx;
					height: 4rpx;
					background: #4E63E0;
					border-radius: 2rpx;
				}
			}
		}
	}

	.status-nav {
		position: fixed;
		top: 88rpx;
		left: 0;
		right: 0;
		z-index: 99;
		background: #FFFFFF;
		white-space: nowrap;
		padding: 20rpx 32rpx;
		// border-bottom: 1rpx solid #F5F5F5;
		// box-shadow: 0rpx 1rpx 3rpx 0rpx rgba(0, 0, 0, 0.1);

		.status-nav-content {
			display: inline-flex;
			
			.status-item {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 147rpx;
				height: 64rpx;
				margin-right: 16rpx;
				font-size: 24rpx;
				color: #606060;
				background: #f9f9f9;
				border-radius: 12rpx;

				&.status-active {
					color: #FFF;
					background: #4E63E0;
				}
			}
		}
	}

	.bg-white {
		flex: 1;
		margin-top: 172rpx; // 88rpx(导航栏) + 84rpx(标签栏)
		overflow: hidden;

		scroll-view {
			height: 100%;
			box-sizing: border-box;
			padding: 44rpx 28rpx 0; // 添加顶部内边距
			background-color: #F2F2F2;
			overflow-y: auto;
			flex: 1;
		}
	}

	.activity-item {
		border-radius: 12rpx;
		background: #FFFFFF;
		box-sizing: border-box;
		border: 1px solid #E0E0E0;
		width: 694rpx;
		margin-bottom: 32rpx;
		box-shadow: 0rpx 1rpx 3rpx 0rpx rgba(0, 0, 0, 0.1);

		.left {
			padding: 24rpx 20rpx;
			border-radius: 20rpx;
			background: #FFFFFF;
			box-sizing: border-box;
			border: 1px solid #E0E0E0;
			width: 180rpx;
			margin-top: -10rpx;
			margin-bottom: -10rpx;
			margin-left: -1rpx;
			box-shadow: 0rpx 1rpx 3rpx 0rpx rgba(0, 0, 0, 0.1);
		}

		.right {
			padding: 20rpx;
			flex: 1;

			.title {
				font-family: Source Han Sans;
				font-size: 28rpx;
				font-weight: bold;
				line-height: 30rpx;
				color: #0B0E26;
				margin-bottom: 20rpx;
			}

			.sub {
				font-family: Source Han Sans;
				font-size: 24rpx;
				font-weight: 500;
				line-height: 30rpx;
				color: #0B0E26;
				margin-bottom: 16rpx;
			}

			.scroll-img {
				width: 470rpx;
				display: flex;
				flex-direction: row;
				white-space: nowrap;
				height: 144rpx;
				margin-bottom: 20rpx;

				.beer-box {
					width: 100rpx;
					background: #FFFFFF;
					margin-right: 20rpx;
					box-sizing: border-box;
					display: inline-block;

					.cover {
						width: 100rpx;
						height: 144rpx;
						border-radius: 10rpx;
					}
				}
			}

			.zeng {
				font-family: roboto;
				font-size: 20rpx;
				font-weight: bold;
				line-height: normal;
				text-align: center;
				color: #0B0E26;
				padding: 8rpx 12rpx;
				border-radius: 10rpx;
				background: #FEE034;
				margin-right: 20rpx;
			}
		}
	}

	.coin-item {
		border-radius: 16rpx;
		background: #FFFFFF;
		padding: 24rpx;
		box-sizing: border-box;
		margin-bottom: 24rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
		transition: all 0.3s ease;
		
		&:active {
			transform: scale(0.98);
			box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
		}
		
		.order-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 24rpx;
			
			.order-type {
				display: flex;
				align-items: center;
				
				.coin-icon {
					width: 32rpx;
					height: 32rpx;
					margin-right: 12rpx;
				}
				
				.type-text {
					font-size: 28rpx;
					color: #333333;
					font-weight: 600;
				}
			}
			
			.order-status {
				font-size: 24rpx;
				padding: 6rpx 16rpx;
				border-radius: 24rpx;
				background: #F5F5F5;
				color: #666666;
				
				&.status-1 {
					background: #FFF8E6;
					color: #F0A020;
				}
				
				&.status-2 {
					background: #E6F7FF;
					color: #1890FF;
				}
				
				&.status-3 {
					background: #F6FFED;
					color: #52C41A;
				}
			}
		}
		
		.order-content {
			display: flex;
			align-items: flex-start;
			
			.goods-image {
				width: 160rpx;
				height: 160rpx;
				border-radius: 12rpx;
				background: #F5F5F5;
				margin-right: 24rpx;
				flex-shrink: 0;
			}
			
			.goods-info {
				flex: 1;
				display: flex;
				flex-direction: column;
				height: 160rpx;
				
				.goods-name {
					font-size: 32rpx;
					color: #333333;
					font-weight: 600;
					line-height: 1.4;
					margin-bottom: 8rpx;
				}
				
				.goods-specs {
					margin-bottom: 8rpx;
					
					.specs-text {
						font-size: 24rpx;
						color: #666666;
						background: #F5F5F5;
						padding: 4rpx 12rpx;
						border-radius: 8rpx;
					}
				}
			}
			
			.order-summary {
				width: 200rpx;
				display: flex;
				flex-direction: column;
				align-items: flex-end;
				justify-content: space-between;
				height: 160rpx;
				
				.price-amount {
					display: flex;
					align-items: center;
					
					.amount {
						font-size: 36rpx;
						color: #333333;
						font-weight: 600;
					}
					
					.coin-icon {
						color: #FEE034;
						font-size: 36rpx;
						margin-left: 8rpx;
					}
					
					.price-unit {
						font-size: 24rpx;
						color: #999999;
						margin-left: 8rpx;
					}
				}
				
				.summary-item {
					display: flex;
					flex-direction: column;
					align-items: flex-end;
					
					.summary-label {
						font-size: 24rpx;
						color: #999999;
						margin-bottom: 4rpx;
					}
					
					.summary-value {
						font-size: 28rpx;
						color: #333333;
						font-weight: 500;
					}
				}
			}
		}
	}

	.status-tip {
		position: fixed;
		top: 88rpx;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #FDFDFD;
		z-index: 99;
		display: flex;
		justify-content: center;
		align-items: center;

		.status-text {
			text-align: center;
			
			.text-lg {
				color: #3D3D3D;
				font-weight: 600;
				font-size: 32rpx;
				margin-bottom: 16rpx;
			}
			
			.sub-text {
				color: #979797;
				font-size: 28rpx;
				margin-bottom: 32rpx;
			}
			
			.login-btn {
				width: 306rpx;
				height: 88rpx;
				background-color: #4E63E0;
				color: #FFFFFF;
				font-size: 28rpx;
				font-weight: 500;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 44rpx;
				
				.btn-icon {
					width: 36rpx;
					height: 36rpx;
					margin-right: 8rpx;
				}
			}
		}
	}
}

.word-all {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
</style>