rtim/pages/expert/index.vue

<template>
	<view class="content">
		<view class="page_bg">
			<image style="width: 100%;height: auto;" :style="{ transform: 'scale(' + scale + ')' }" :src="info.backGround || defaultBg" mode="widthFix"></image>
		</view>
		<view class="content-header">
			<image class="backicon" src="/static/image/liveStream/back_white_icon.png" mode="aspectFill" @click="$navBack()"></image>
			<view class="editinfo" v-if="info.userId && info.userId == userId" @click="$navTo('/pages/expert/info')">编辑资料</view>
	    	<view class="moreinfo x-c" v-if="info.userId && info.userId != userId" @tap="showExpertBox = true">
				<image src="/static/image/mine/more_white.png"></image>
			</view>
		</view>

			<u-sticky offsetTop="0" customNavHeight="0" zIndex="999">
				<view class="content-header-sticky" :style="{ height: `calc(${statusBarHeight}px + 44px)`, opacity: opacity, display: showNav ? 'flex' : 'none' }" @click.stop="">
					<image src="/static/image/black_back.png" mode="aspectFill" @click="$navBack()"></image>
					<text class="textOne" style="width: 50%; text-align: center">{{ info.nickName }}</text>
				</view>
			</u-sticky>

			<view class="content-body">
				<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
					<view class="user">
						<u-avatar :src="info.avatar || '/static/logo.png'" size="88"></u-avatar>
						<view class="user-left">
							<view class="textOne">{{ info.nickName }}</view>
							<view class="levelbox">
								<image class="levelbox-icon" src="/static/image/my/intelligent_icon.png" mode="aspectFill"></image>
								<text>LV.{{ info.level }}</text>
							</view>
						</view>
					</view>
					<view class="content-box">
						<view class="rowbox es-pr-24">
							<view class="x-f flex">
								<view class="rowbox-item">
									<view @click="handleNavTo('./friendsList?current=1&userId=' + userIdNow + '&talentId=' + info.talentId)">{{ formatNum(fansCount) }}</view>
									<text @click="handleNavTo('./friendsList?current=1&userId=' + userIdNow + '&talentId=' + info.talentId)">粉丝</text>
								</view>
								<view class="rowbox-item">
									<view @click="handleNavTo('./friendsList?current=0&userId=' + userIdNow + '&talentId=' + info.talentId)">{{ formatNum(idolCount) }}</view>
									<text @click="handleNavTo('./friendsList?current=0&userId=' + userIdNow + '&talentId=' + info.talentId)">关注</text>
								</view>
								<view class="rowbox-item">
									<view @click="handleNavTo('/pages/user/myFavoriteVideo?tabIndex=1')">{{ formatNum(favoriteNum) }}</view>
									<text @click="handleNavTo('/pages/user/myFavoriteVideo?tabIndex=1')">收藏</text>
								</view>
								<view class="rowbox-item">
									<view>{{ formatNum(likeNum) }}</view>
									<text>获赞</text>
								</view>
							</view>
							<!-- <view class="es-ml-24">
								<image
									class="es-icon-80 es-mr-24"
									src="/static/images/other/user/dy.png"
									mode="aspectFill"
									@click="handleCopy('抖音链接', info.tiktokLink)"></image>
								<image class="es-icon-80" src="/static/images/other/user/ks.png" mode="aspectFill" @click="handleCopy('快手链接', info.kwaiLink)"></image>
							</view> -->
						</view>
						<view class="es-pl-24 es-pr-24 es-mt-32 es-fs-26">{{ info.title }}</view>
						<view class="taglist es-pl-24 es-mt-26 x-f es-fs-22">
							<view class="taglist-view x-c" style="min-width: 60px">
								<u-icon v-show="info.sex == 1" class="sexicon" name="woman" color="#FF8394" size="32rpx"></u-icon>
								<u-icon v-show="info.sex == 0" class="sexicon" name="man" color="#2979ff" size="32rpx"></u-icon>
								<text class="taglist-item" v-show="info.sex != 1 && info.sex != 0" style="margin-right: 6rpx">未知</text>
								<text class="taglist-item">{{ (info.birthDay && $getAge(info.birthDay)) || '--' }}岁</text>
								<!-- 0男,1女,2未知 -->
							</view>
							<view class="taglist-view x-c" style="max-width: 320rpx" v-if="info.address">
								<text class="one-t" style="height: 42rpx; line-height: 42rpx">{{ info.province }}</text>
							</view>
							<view class="taglist-view" v-for="(tag, index) in tags" :key="index">
								<text class="one-t" style="height: 42rpx; line-height: 42rpx">{{ tag }}</text>
							</view>
						</view>
						<view class="x-f es-mt-16 es-pr-24 es-pl-24" v-if="info.userId && info.userId != userId">
							<view class="item_btn x-c es-mr-24" @click="handleFollow">
								<template v-if="isFollow == 1">取消关注</template>
								<template v-else>
									<u-icon name="plus" color="#fff" size="16" class="es-pr-14"></u-icon>
									关注
								</template>
							</view>
							<!-- <view class="item_btn x-c">私信</view> -->
						</view>

					<!-- <view class="x-f es-mt-24 es-pl-24 es-pr-24">
							<view class="user-item es-pt-14 es-pb-14 es-pl-22 es-pr-22">
								<view class="x-f">
									<image class="icon" src="/static/image/liveStream/recommend_icon.png" mode="aspectFill"></image>
									<view class="es-ml-17 es-fs-26 es-fw-500">达人推荐</view>

								</view>
								<view class="es-fs-22 es-mt-4 es-c-99">超多性价比好物</view>
							</view>
							<view class="user-item es-pt-14 es-pb-14 es-pl-22 es-pr-22">
								<view class="x-f">
									<image class="icon" src="/static/image/liveStream/my_wallet_icon.png" mode="aspectFill"></image>
									<view class="es-ml-17 es-fs-26 es-fw-500">我的钱包</view>
								</view>
								<view class="es-fs-22 es-mt-4 es-c-99">查看可提现佣金</view>
							</view>
							<view class="user-item es-pt-14 es-pb-14 es-pl-22 es-pr-22">
								<view class="x-f">
									<image class="icon" src="/static/image/liveStream/browsing_history_icon.png" mode="aspectFill"></image>
									<view class="es-ml-17 es-fs-26 es-fw-500">浏览记录</view>
								</view>
								<view class="es-fs-22 es-mt-4 es-c-99">我的访问记录</view>
							</view>
						</view> -->
				
						 <u-sticky :offsetTop="0" :customNavHeight="customNavHeight" zIndex="999">
								<view class="tab-bar x-c es-mt-8">
									<view :class="current == 0 ? 'tab-bar-item active' : 'tab-bar-item'">主页</view>
									<!-- <view :class="current == 1 ? 'tab-bar-item active':'tab-bar-item'">课程视频</view> -->
								</view>
					    	</u-sticky>
						
						 <template v-if="!isBlackTalent"> 
							<view class="es-pl-24 es-pr-24 es-pt-20 es-pb-20">
								<!-- <view class="x-bc es-pt-20 es-pb-32">
										<view class="x-f es-fs-32 es-fw-500">短视频<text class="x-f es-fs-28 es-ml-22">(6)</text></view>
										<view class="x-f es-fs-24 es-c-99">
											查看全部
											<image class="es-w-48 es-h-48" src="/static/image/hall/my_right_arrow_right_icon.png" mode="aspectFill"></image>
										</view>
									</view> -->
									<!-- <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption"> -->
									
									<view class="x-f video-list">
										<view class="video-item es-br-16" v-for="(item, i) in dataList" :key="i" @click="goVideo(i)">
											<view class="mask" v-if="info.userId && info.userId == userId">
												<view v-if="item.isAudit == -1 || item.isAudit == 0" :class="item.isAudit == -1 ? 'mask-status mask-status2' : 'mask-status mask-status1'">
													{{ item.isAudit == -1 ? '已驳回' : '审核中' }}
												</view>
												<view class="mask-txt textTwo" v-if="item.isAudit == -1">{{ item.failReason }}</view>
												<view class="mask-event" @click.stop="handleClick(item)">操作</view>
											</view>
											<image class="video-item-img" :src="item.cover" mode="aspectFill"></image>
											<view class="textOne es-pl-20 es-pr-20 es-pt-22 es-pb-22">{{ item.title }}</view>
										</view>
									</view>
									<!-- </mescroll-body> -->
							</view>
						</template>	
						<template v-if="isBlackTalent">
							  <view class="blockBox">
									<view class="center-content">
										<view class="es x-c">
											<image class="es es-w-70 es-h-70" src="/static/svg/stop.svg"></image>
										</view>
										<view class="es-c-33 es-fs-32 es-fw-400 es-mt-20">对方已被你拉黑</view>
										<view class="es es-c-99 es-fs-24 es-mt-20">你已拉黑对方，无法查看其作品</view>
									</view>
							   </view>
						 </template>
					</view>
				</mescroll-body>
			</view>

			<view class="footer x-c" v-if="info.userId && info.userId == userId">
				<view class="x-c footer-fb" @click="$navTo('/pages/expert/releaseVideo')">
					<image src="/static/image/liveStream/publish_video_icon.png"></image>
					发布视频
				</view>
				<!-- <view class="x-c footer-zb"><image src="/static/image/liveStream/live_broadcast_icon2.png"></image>开直播</view> -->
				<view class="x-c footer-zb" @click="$navTo('/pages/expert/collection')" v-if="false"><image src="/static/image/liveStream/live_broadcast_icon2.png"></image>合集管理</view>
			</view>

			<!-- 更多弹窗 -->
			
			<u-popup :show="showExpertBox" @close="showExpertBox = false">
				<expert-box :expertItem="expertItem" @refreshExpert="refreshExpert()" @closeExpert="showExpertBox = false"></expert-box>
			</u-popup>
		
	</view>
</template>
<script>
import { getTalentByToken, getVideoList, doFollow, checkFollow, getTalentByUserId, deleteVideo, updateVideoStatus } from '@/api/expert.js';
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
import expertBox from '@/components/share-box/expert-box.vue';
export default {
	components: {
		expertBox
	},
	mixins: [MescrollMixin],
	data() {
		return {
			userId: '',
			statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
			defaultBg: 'https://cos.his.cdwjyyh.com/fs/20250509/e5fb40b2b6e640b48e5f055c786dd289.png',
			avatar: '',
			current: 0,
			customNavHeight: 22,
			showNav: false,
			opacity: 1,
			info: {},
			fansCount: 0,
			favoriteNum: 0,
			idolCount: 0,
			likeNum: 0,
			mescroll: null,
			downOption: {
				//下拉刷新
				use: true,
				auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
			},
			upOption: {
				onScroll: false,
				use: true, // 是否启用上拉加载; 默认true
				page: {
					pae: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
					size: 10 // 每页数据的数量,默认10
				},
				noMoreSize: 10, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
				textNoMore: '已经到底了',
				empty: {
					icon: 'https://cos.his.cdwjyyh.com/fs/20240423/cf4a86b913a04341bb44e34bb4d37aa2.png',
					tip: '暂无数据'
				}
			},
			dataList: [],
			user: {},
			isFollow: 0, // /是否已关注1：已关注，0：未关注
			talentUserId: '',
			tags: [],
			userIdNow: '',
			scale: 1,
			curPageNum: 0,
			showExpertBox: false,
			expertItem: { isBlackTalent: false },
			isBlackTalent: false
		};
	},
	computed: {
		formatNum() {
			return (num) => {
				if (num > 10000) {
					return (num / 10000.0).toFixed(1) + '万';
				}
				return num;
			};
		}
	},
	onLoad(option) {
		this.customNavHeight = this.statusBarHeight / 2 + 44;
		this.user = this.$getUserInfo();
		this.userId = this.user.userId || '';
		this.talentUserId = option.userId || '';
		this.userIdNow = this.talentUserId || this.userId;
		uni.$on('resetData', () => {
			this.mescroll && this.mescroll.resetUpScroll();
		});
	},
	onUnload() {
		uni.$off('resetData');
	},
	onShow() {
		if (this.talentUserId) {
			this.getTalentInfo();
		} else {
			this.getInfo();
		}
	},
	methods: {
		handleCopy(name, id) {
			if (!id) {
				uni.showToast({
					title: '暂无' + name,
					icon: 'none'
				});
				return;
			}
			uni.setClipboardData({
				data: id,
				success: () => {
					uni.showToast({
						title: '复制' + name + '成功:' + id,
						icon: 'none'
					});
				},
				fail: (e) => {
					uni.showToast({
						title: '复制失败',
						icon: 'none'
					});
				}
			});
		},
		handleClick(item) {
			// 5下架，1上架
			// 已审核完的视频可操作：删除、上/下架
			// 未审核+驳回可操作：删除
			// isAudit -1的就是驳回的，1就是通过的，0 审核中
			let itemList = ['删除'];
			if (item.isAudit == 1) {
				itemList = item.status == 5 ? ['删除', '上架'] : item.status == 1 ? ['删除', '下架'] : ['删除'];
			}
			uni.showActionSheet({
				itemList: itemList,
				success: (res) => {
					console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
					if (res.tapIndex == 0) {
						uni.showModal({
							title: '提示',
							content: '删除的视频不可恢复，确定删除吗？',
							success: (res) => {
								if (res.confirm) {
									this.handlesDel(item);
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					} else if (res.tapIndex == 1) {
						this.handlesUpdate(item);
					}
				}
			});
		},
		handlesDel(item) {
			deleteVideo({ videoId: item.id }).then((res) => {
				if (res.code == 200) {
					uni.showToast({
						title: '删除成功',
						icon: 'none'
					});
					this.mescroll.resetUpScroll();
				} else {
					uni.showToast({
						title: res.msg
					});
				}
			});
		},
		handlesUpdate(item) {
			const param = {
				videoId: item.id,
				status: item.status == 5 ? 1 : item.status == 1 ? 5 : 1
			};
			updateVideoStatus(param).then((res) => {
				if (res.code == 200) {
					uni.showToast({
						title: '操作成功',
						icon: 'none'
					});
					this.mescroll.resetUpScroll();
				} else {
					uni.showToast({
						title: res.msg
					});
				}
			});
		},
		getInfo() {
			getTalentByToken().then((res) => {
				if (res.code == 200) {
					this.info = res.data.fsUserTalent;
					uni.setStorageSync('expertInfo',this.info)
					this.fansCount = res.data.fansCount;
					this.favoriteNum = res.data.favoriteNum;
					this.idolCount = res.data.idolCount;
					this.likeNum = res.data.likeNum;
				}
			});
		},
		getTalentInfo() {
			getTalentByUserId({ userId: this.talentUserId }).then((res) => {
				if (res.code == 200) { 
					console.log("qxj getTalentByUserId res",res);
					this.isBlackTalent=res.data.isBlack;
					this.expertItem.isBlackTalent=this.isBlackTalent;
					this.info = res.data.fsUserTalent;
					this.fansCount = res.data.fansCount;
					this.favoriteNum = res.data.favoriteNum;
					this.idolCount = res.data.idolCount;
					this.likeNum = res.data.likeNum;
					this.expertItem.talentId = this.info.talentId;
					this.checkFollow();
				}
			});
		},
		handleFollow() {
			doFollow({ talentId: this.info.talentId }).then((res) => {
				if (res.code == 200) {
					if (this.isFollow == 1) {
						this.fansCount--;
					} else {
						this.fansCount++;
					}
					this.isFollow = this.isFollow == 1 ? 0 : 1;
				}
				uni.showToast({
					title: res.msg
				});
			});
		},
		checkFollow() {
			checkFollow({ talentId: this.info.talentId }).then((res) => {
				if (res.code == 200) {
					this.isFollow = res.isFollow || 0;
				}
			});
		},
		mescrollInit(mescroll) {
			this.mescroll = mescroll;
		},
		/*下拉刷新的回调 */
		downCallback(mescroll) {
			mescroll.resetUpScroll();
			if (this.talentUserId) {
				this.getTalentInfo();
			} else {
				this.getInfo();
			}
		},
		upCallback(page) {
			//联网加载数据
			var that = this;
			var data = {
				userId: this.talentUserId || 0,
				pageNum: page.num,
				pageSize: page.size
			};
			this.pageNum = page.num;
			getVideoList(data).then((res) => {
				if (res.code == 200) {
					//设置列表数据
					if (page.num == 1) {
						that.dataList = res.data.list;
					} else {
						that.dataList = that.dataList.concat(res.data.list);
					}
					that.mescroll.endBySize(res.data.list.length, res.data.total);
				} else {
					uni.showToast({
						icon: 'none',
						title: '请求失败'
					});
					that.dataList = null;
					that.mescroll.endErr();
				}
			});
		},
		goVideo(i) {
			this.curPageNum = Math.floor(i / 10) + 1;
			this.$navTo('/pages/expert/video?curFlagType=1&talentUserId=' + this.userIdNow + '&curPageNum=' + this.curPageNum + '&k=' + i);
		},
		handleNavTo(url) {
			if (this.info.userId && this.info.userId == this.userId) {
				this.$navTo(url);
			}
		},
		refreshExpert(){
			this.showExpertBox=false;
			this.getTalentInfo();
		}
	},
	onPageScroll(e) {
		if (e.scrollTop <= 136) {
			this.showNav = false;
			this.opacity = 0;
		} else if (e.scrollTop > 136) {
			this.opacity = (e.scrollTop / 216) * 1 > 1 ? 1 : (e.scrollTop / 216) * 1;
			this.showNav = true;
		}
	}
};
</script>

<style>
page {
	background-color: #fff;
}
</style>
<style lang="scss" scoped>
@mixin u-flex($flexD, $alignI, $justifyC) {
	display: flex;
	flex-direction: $flexD;
	align-items: $alignI;
	justify-content: $justifyC;
}

.content {
	position: relative;
	height: calc(100vh);
	width: 100%;
	
}

.mask {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 9;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: rgba(0,0,0,0.3);
	color: #fff;
	font-size: 30rpx;
	@include u-flex(column, center, center);
	&-status {
		padding: 5rpx 14rpx;
		border-radius: 8rpx;
	}
	&-status1 {
		background-color: #F0964C;
	}
	&-status2 {
		background-color: red;
	}
	&-txt {
		margin-top: 10rpx;
		width: 90%;
		text-align: center;
	}
	&-event {
		position: absolute;
		bottom: 0;
		right: 0;
		padding: 8rpx 14rpx;
		background-color: #7CD8A8;
		border-radius: 16rpx 0 16rpx 0;
	}
	&-collection {
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 10;
		padding: 8rpx 14rpx;
		background-color: rgba(0,0,0,0.3);
		border-radius: 0 16rpx 0 16rpx;
		color: #fff;
		font-size: 30rpx;
	}
} 
.page_bg {
	width: 100%;
	height: 700rpx;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
}
.content-header {
	position: relative;
	width: 100%;
	height: calc(var(--status-bar-height) + 44px);
	padding: 12rpx 24rpx;
	padding-top: calc(var(--status-bar-height) + 12rpx);
	@include u-flex(row-reverse, center, space-between);

	&-sticky {
		background-color: #fff;
		@include u-flex(row, center, center);
		position: absolute;
		width: 100%;
		top: 0;
		left: 0;
		padding-top: calc(var(--status-bar-height));
		image {
			width: 64rpx;
			height: 64rpx;
			position: absolute;
			top: calc(var(--status-bar-height));
			left: 24rpx;
		}
	}
}

.backicon {
	width: 64rpx;
	height: 64rpx;
	position: fixed;
	left: 24rpx;
	top: calc(var(--status-bar-height));
	z-index: 998;
}

.editinfo {
	background: rgba(0, 0, 0, 0.5);
	border-radius: 32rpx 32rpx 32rpx 32rpx;
	padding: 15rpx 28rpx;
	font-family: PingFang SC;
	font-weight: 400;
	font-size: 24rpx;
	color: #ffffff;
}

.moreinfo {
	width: 64rpx;
	height: 64rpx;
	background: rgba(0, 0, 0, 0.5);
	border-radius: 32rpx 32rpx 32rpx 32rpx;
	padding: 15rpx;
	image {
		width: 20px;
		height: 20px;
	}
}


.blockBox{
	position: absolute;
	top: 500rpx;      
	left: 0;
	right: 0;
	bottom: 0;        
	display: flex;
	justify-content: center; 
	align-items: center;   
	.center-content {
		text-align: center; 
	}
}

.content-body {
	font-family: PingFang SC;
	font-weight: 400;
	position: relative;
	color: #222222;
	.user {
		@include u-flex(row, flex-start, flex-start);
		padding: 40rpx 24rpx;
		&-left {
			overflow: hidden;
			padding-top: 24rpx;
			margin-left: 32rpx;
			font-weight: 500;
			font-size: 44rpx;
			color: #ffffff;
		}
		.levelbox {
			display: inline-flex;
			padding: 4rpx 12rpx;
			margin-top: 14rpx;
			background: linear-gradient(90deg, #f5ce3c 0%, #e39414 100%);
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			font-weight: 500;
			font-size: 22rpx;
			color: #fef5ea;
			&-icon {
				width: 32rpx;
				height: 32rpx;
				margin-right: 8rpx;
			}
		}
	}
	.content-box {
		background: #ffffff;
		border-radius: 32rpx 32rpx 0rpx 0rpx;
		padding: 24rpx 0;
	}
	.rowbox {
		text-align: center;
		@include u-flex(row, center, space-between);
		&-item {
			flex: 1;
			font-weight: 400;
			font-size: 26rpx;
			color: #757575;
			view {
				margin-bottom: 4rpx;
				font-family: DIN, DIN;
				font-weight: bold;
				font-size: 36rpx;
				color: #222222;
			}
		}
	}
	.taglist {
		color: #757575;
		flex-wrap: wrap;
		&-view {
			height: 42rpx;
			max-width: 220rpx;
			overflow: hidden;
			padding: 0 16rpx;
			background: #f3f3f4;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			box-sizing: border-box;
			margin-right: 16rpx;
			margin-bottom: 16rpx;
		}
		&-item {
			line-height: 100%;
		}
		.sexicon {
			margin: 0;
			padding: 0;
		}
	}
	.user-item {
		min-width: 220rpx;
		flex-shrink: 0;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		border: 2rpx solid #ececec;
		box-sizing: border-box;
		margin-right: 22rpx;
		.icon {
			height: 32rpx;
			width: 32rpx;
		}
	}
	.tab-bar {
		background-color: #fff;
		border-bottom: 2rpx solid #ececec;
		font-weight: 400;
		font-size: 32rpx;
		color: #757575;
		&-item {
			padding: 32rpx 40rpx;
		}
	}
	.active {
		font-weight: 600;
		font-size: 32rpx;
		color: #222222;
		position: relative;
		&::after {
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			content: '';
			width: 70rpx;
			height: 6rpx;
			background: #222222;
			border-radius: 3rpx 3rpx 3rpx 3rpx;
		}
	}
	.video-list {
		flex-wrap: wrap;
		margin-right: -18rpx;
		margin-bottom: 155rpx;
	}
	.video-item {
		width: 342rpx;
		margin-right: 18rpx;
		margin-bottom: 18rpx;
		background: #f5f7fa;
		overflow: hidden;
		position: relative;
		&-img {
			width: 100%;
			height: 280rpx;
			border-radius: 16rpx 16rpx 0rpx 0rpx;
		}
	}
}
.item_btn {
	flex: 1;
	height: 70rpx;
	background: #ff5c03;
	border-radius: 16rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 500;
	font-size: 30rpx;
	color: #ffffff;
}
.footer {
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 999;
	width: 100%;
	background-color: #fff;
	padding: 20rpx 24rpx;
	padding-bottom: calc(var(--window-bottom) + 20rpx);
	font-family: PingFang SC, PingFang SC;
	font-weight: 600;
	font-size: 34rpx;
	color: #ffffff;
	&-fb {
		flex: 1;
		height: 112rpx;
		background: linear-gradient(90deg, #ff5c03 0%, #f0964c 100%);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}
	&-zb {
		flex: 1;
		margin-left: 18rpx;
		height: 112rpx;
		background: linear-gradient(90deg, #4dc68d 0%, #7cd8a8 100%);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}
	image {
		height: 48rpx;
		width: 48rpx;
		margin-right: 16rpx;
	}
}
</style>