frontend-app/pages/home/home.vue

<template>
	<view v-if="pageReady" class="home_warp" :class="platformType ? '' : 'iosplatformType'">
		<!-- 带背景的头部 -->
		<view class="home_content_z_warp">
			<view class="home_header_warp">
				<view class="logo_banner">
					<view style="padding: 20rpx 0 0 20rpx">
						<up-image src="https://static.tbmall.xin/static/home/logo_banner.png" width="108" height="16"
							bgColor="#f1f6ff00"></up-image>
						<view class="logo_banner_title">TB聚合商城</view>
						<view class="logo_banner_msg">全民共创共享的电商平台</view>
					</view>
					<up-image src="https://static.tbmall.xin/static/logo_banner2.png" width="140" height="98"
						bgColor="#f1f6ff00"></up-image>
				</view>

				<!-- 分类 -->
				<view class="home_sort_warp">
					<view class="sort_comm_warp" v-if="sortList && sortList.length !== 0 && isBlockedDate">
						<view v-for="item in sortList" :key="item.id" class="sort_item_comm" @click="jumpSort(item)">
							<up-image :src="item.icon" width="40" height="32" bgColor="#f1f6ff00"></up-image>
							<view class="sort_item_title_comm">{{ item.name }}</view>
						</view>
					</view>
					<view v-else class="not_order_warp">
						<up-image src="https://static.tbmall.xin/static/not_order.png" width="80" height="80"
							bgColor="#f1f6ff00"></up-image>
						<view class="not_order_msg_warp">暂无分类</view>
					</view>
				</view>

				<!-- 爆款专区-->
				<view class="home_content_warp Hot_Picks_Zone" v-if="faddishProduct && faddishProduct.length !== 0"
					@click="onJumpYou">
					<view class="product_comm_yp">
						<view class="yp_title">
							<view class="yp_title_left">
								<text class="yp_title_main">信任桥优品</text>
								<up-image src="https://static.tbmall.xin/static/home/youxuan.png" width="14" height="14"
									bgColor="#f1f6ff00"></up-image>
								<text class="yp_title_sub" style="margin-left: 8rpx;">品牌五折秒杀福利</text>
							</view>
							<view class="yp_title_right">
								<text>立即抢购</text>
								<view class="yp_arrow_circle">
									<view class="yp_arrow_chevron"></view>
								</view>
							</view>
						</view>
						<view class="yp_content">
							<!-- <up-loading-icon :show="productLoading"></up-loading-icon> -->
							<view class="yp_item" v-for="item in faddishProduct" :key="item.id"
								@click.stop="jumpInfo(item)">
								<view class="yp_item_image_wrapper">
									<up-image :src="item.url" width="100%" height="90" bgColor="#f1f6ff00"
										shape="square" radius="15"></up-image>
								</view>
								<view class="yp_item_info">
									<view class="yp_item_name">{{ item.title }}</view>
									<view class="yp_item_price_tag">优选价{{ item.price }}元</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 带灰色背景的内容 -->
			<view class="home_content_warp">

				<!-- 积分兑换，红包抽奖 -->
				<view class="min_card_warp">
					<!-- 积分兑换 -->
					<view class="min_card_item" @click="jumpIntegral">
						<!-- <up-image src="https://static.tbmall.xin/static/home/min_card_jfdh.png" width="60" height="14" bgColor="#f1f6ff00" ></up-image> -->
						<view class="min_card_item_content">
							<view class="min_card_item_title">积分兑换</view>
							<view class="content_msg">
								<view>好物随心兑</view>
							</view>
						</view>
						<up-image src="https://static.tbmall.xin/static/home/min_card_jfdh_2.png" width="55" height="55"
							bgColor="#f1f6ff00"></up-image>
					</view>
					<!-- 红包抽奖 -->
					<view class="min_card_item" @click="jumpTurntable">
						<!-- <up-image src="https://static.tbmall.xin/static/home/min_card_hbcj.png" width="60" height="14" bgColor="#f1f6ff00" ></up-image> -->
						<view class="min_card_item_content">
							<view class="min_card_item_title">红包抽奖</view>
							<view class="content_msg">
								<view>现金红包等你拿！</view>

							</view>
						</view>
						<up-image src="https://static.tbmall.xin/static/home/min_card_hbcj_2.png" width="55" height="55"
							bgColor="#f1f6ff00"></up-image>
					</view>
				</view>

				<view class="product_comm_tip">

				</view>
				<!-- 限时秒杀 -->
				<view class="product_seckill_card" v-for="item in seckillList" :key="item.id">
					<productSeckillCard />
				</view>


			</view>
		</view>


		<!-- 暂未开放 -->
		<up-modal :show="openShow" :showConfirmButton="false">
			<view class="slot-content">
				<view class="close_warp" @click="openShow = false">
					<up-image src="/static/common/close.png" width="20" height="20" bgColor="#f1f6ff00"></up-image>
				</view>
				<view class="content_">
					<view class="content_1">温馨提示</view>
					<view class="content_2">暂未开放</view>
				</view>
				<view class="but_">
					<view class="but_copy" @click="openShow = false">确定</view>
				</view>
			</view>
		</up-modal>
		<!-- #ifndef H5 || MP-WEIXIN-->
		<CustomTabBar :tabIndex="0" />
		<!-- #endif -->
		<up-action-sheet :actions="languageList" :show="languageShow" cancelText="取消"
			@close="languageShow = false"></up-action-sheet>
		<up-overlay :show="bannerShow">
			<view class="up_content" @tap.stop>
				<view class="uni-banner">
					<view class="close_btn" @click="bannerShow = false"></view>
					<view class="banner_box">
						<view class="conter">{{ updateApkObj.content }}</view>
						<view class="banner_foot" v-if="!bannerPercentageShow">
							<button @click="goUpdate(updateApkObj, platformType)" class="banner_foot_button">
								立即更新
							</button>
							<view @click="bannerShow = false" class="banner_foot_button_no"
								v-if="!updateApkObj.isForce">暂不更新
							</view>
						</view>
						<view v-else>
							<up-line-progress :percentage="bannerPercentage" activeColor="#a85cfa"></up-line-progress>
							<view class="banner_loading_msg">
								更新中{{ bannerPercentage }}%
							</view>
						</view>
					</view>
				</view>
			</view>
		</up-overlay>

		<!-- 公告弹窗 -->
		<up-overlay :show="newsShow">
			<view class="up_content" @tap.stop>
				<view class="uni-banner-news">
					<view class="close_btn" @click="newsShow = false"></view>
					<view class="banner_box">
						<view class="banner_box-title">{{ newsList[0].title }}</view>
						<view class="banner_box-subTitle">{{ newsList[0].subTitle }}</view>
						<view class="banner_box-btn" @click="jumpNewSearch">查看</view>
					</view>
				</view>
			</view>
		</up-overlay>
		<HomePopup :show="homeShow" :dataObj="curData" @jumpShop="onJumpShop"></HomePopup>
	</view>
</template>

<script>
import {
	getGoodsDetail
} from "@/api/product.js";
import choiceness from "@/components/choiceness/choiceness.vue";
import {
	searchList
} from "@/api/product.js";
import {
	getCascadeCategory,
	checkAppVersion,
	getCarouselImage,
} from "@/api/common.js";
import {
	SEARCH_TYPE,
	APP_PAGE_TYPE
} from "@/utils/enumUtils.js";
import CustomTabBar from "@/components/custom-tab-bar.vue"; // 引入自定义组件路径可能需要根据项目结构调整
import dayjs from "dayjs";
import useTabber from "tabber-component";
import {
	getNewsList
} from "@/api/news.js";
import {
	comparisonVersionHandler
} from "@/utils/index.js";
import HomePopup from "@/components/common/home-popup.vue";
import productSeckillCard from "@/components/common/product-seckill-card.vue";

import {
	SHARE_URL
} from "@/utils/config.js";

export default {
	components: {
		choiceness,
		CustomTabBar,
		HomePopup
	},
	data() {
		return {
			swiperList: [],
			currentNum: 0,
			sortList: [],
			languageShow: false, // 语言选项
			languageList: [{
				name: "中文",
				key: "CN",
			},
			{
				name: "英文",
				key: "EN",
			},
			],
			currentLanguage: {},
			yxProduct: [], // 好物优选列表
			faddishProduct: [], // 爆款专区
			hotList: [], // 热门
			productLoading: false,
			openShow: false,
			platformType: null, // 当前设备信息
			bannerShow: false, // 是否需要強制更新app
			type: "", // 设备类型  android:2, ios:1
			updateApkObj: {}, // 后台数据
			bannerPercentageShow: false, // 是否显示进度条
			bannerPercentage: 0, // 进度条
			curId: null,
			curData: null,
			homeShow: false,
			newsList: [], // 公告列表
			newsShow: false, // 是否显示公告弹窗
		};
	},
	onShow() {



		// 获取设备是安卓还是ios
		const appUpdate = uni.getStorageSync("platform");
		const versionUpdateTime = uni.getStorageSync("versionUpdateTime");
		// #ifdef APP-PLUS
		console.log(
			"上次更新时间 versionUpdateTime",
			dayjs(versionUpdateTime).format("YYYY-MM-DD HH:mm:ss")
		);
		console.log("当前时间戳", dayjs().format("YYYY-MM-DD HH:mm:ss"));
		const time1 = dayjs(versionUpdateTime); // 上一次更新的时间
		const time2 = dayjs();
		const diff = time2.diff(time1);
		if (!versionUpdateTime || diff > 5 * 60 * 1000) {
			this.platformType = appUpdate == "android" ? "ANDROID" : "IOS";
			this.checkUpdate(); // 判断是否需要更新
		} else {
			this.onClipboard();
		}
		// #endif
		this.getSortList();
		this.querySearchList(SEARCH_TYPE.SOMETHING); // 好物专区
		this.querySearchList(SEARCH_TYPE.EXPLOSIVE); // 爆单专区
		this.getCarouselImage();
		this.onNews(); // 获取公告
	},
	onLoad() {
		/*#ifdef APP-PLUS*/
		uni.hideTabBar({
			animation: false,
		});
		// 检查是否需要展示启动页
		// 		const hasShown = getApp().globalData.launchShown;
		// 		if (!hasShown) {
		// 			getApp().globalData.launchShown = true; // 置为已展示
		// 			// ⚠️ 不让首页渲染
		// this.pageReady = false;

		// 			uni.navigateTo({
		// 				url: '/pages/order_package/launch_page/launch_page'
		// 			});
		// 			return; // 阻止后续渲染
		// 		}
		/*#endif*/
		// 不需要启动页，才渲染首页
		this.pageReady = true;

	},
	mounted() { },
	methods: {
		// 获取公告
		jumpNewSearch(type) {
			if (type === 'list') {
				uni.navigateTo({
					url: "/pages/login_package/announcement/announcement"
				});
				return;
			}
			uni.setStorageSync("isReadNews", this.newsList[0].id);
			uni.navigateTo({
				url: "/pages/login_package/announcement-detail/announcement-detail?id=" +
					this.newsList[0].id,
			});
		},
		onNews() {
			getNewsList({
				category: 2,
				type: 0,
				page: 1,
				pageSize: 10,
			}).then((res) => {
				console.log("获取公告", res);

				if (res.bizcode === 100) {
					this.newsList = res.data.entitys || [];
					console.log(this.newsList);
					const id = uni.getStorageSync("isReadNews");
					this.newsShow = false;
					if (id != this.newsList[0].id && this.newsList[0].isPop === 1) {
						this.newsShow = true;
					}
				}
			});
		},
		// 查看详情
		onJumpNews() {
			uni.navigateTo({
				url: `/pages/login_package/news/news?id=${this.newsList[0].id}`,
			});
		},
		onJumpShop() {
			uni.navigateTo({
				url: `/pages/other_package/productInfo/productInfo?id=${this.curId}`,
			});

			this.curId = null;
			this.curData = null;
			this.homeShow = false;
		},
		onClipboard() {
			let _this = this;
			uni.getClipboardData({
				success: function (res) {
					// http://localhost:5173/#/pages/other_package/productInfo/productInfo?id=1038
					console.log(res.data); // 剪贴板内容
					if (
						res.data.indexOf(
							`${SHARE_URL}/#/pages/other_package/productInfo/productInfo?id=`
						) != -1
					) {
						uni.showModal({
							title: "",
							content: "当前APP想要粘贴商品详情，是否继续?",
							success: (res1) => {
								if (res1.confirm) {
									let id = res.data.match(/=(.*?)\s/);
									_this.curId = Number(id[1]);
									_this.getShop();
									uni.setClipboardData({
										data: "",
									});
								}
							},
							fail: (res2) => {
								uni.setClipboardData({
									data: "",
								});
							},
						});
					}
				},
				fail: function (err) {
					console.error("获取剪贴板内容失败", err);
				},
			});
		},
		getShop() {
			const params = {
				id: this.curId,
			};
			getGoodsDetail(params).then((res) => {
				this.curData = res.data;
				this.homeShow = true;
			});
		},
		onJumpYou() {
			uni.navigateTo({
				url: "/pages/rwa_package/shop/you-shop",
			});
		},
		checkUpdate() {
			const self = this,
				localAppVersonName = uni.getStorageSync("version"),
				localAppVerson = uni.getStorageSync("versionCode");
			// #ifdef APP-PLUS
			plus.runtime.getProperty(plus.runtime.appid, function (widgetInfo) {
				const params = {
					terminal: self.platformType,
					versionCode: localAppVerson,
				};
				console.log("wgt更新-0", params);
				checkAppVersion(params).then((res) => {
					console.log("wgt更新-1", res);
					if (res && res.bizcode === 100) {
						const data = res.data || {};
						// app大版本更新，versionName：1.0.1 versionCode：102
						if (
							data &&
							Object.keys(data).length !== 0 &&
							comparisonVersionHandler(localAppVerson, data.versionCode)
						) {
							uni.hideTabBar(); // 隐藏首页底部tabbar 按钮
							self.updateApkObj = data;
							self.bannerShow = true; // 显示弹窗
							return;
						} else {
							console.log("wgt更新-2");
							self.onClipboard();
							return;
						}
					}
				});
			});
			// #endif
		},

		// 安装
		goUpdate(updateApkObj, platformType) {
			const self = this;
			if (platformType == "ANDROID") {
				// 弹出系统等待对话框
				var dtask = plus.downloader.createDownload(
					updateApkObj.downloadUrl, {},
					function (d, status) {
						// 下载完成
						if (status == 200) {
							plus.runtime.install(
								plus.io.convertLocalFileSystemURL(d.filename), {
								force: true
							},
								function (resp) {
									// 直接重启APP
									uni.setStorageSync("versionUpdateTime", dayjs().valueOf()); // 记录升级的时间
									plus.runtime.restart();
								},
								function (error) {
									console.log("error", error);
									uni.showToast({
										title: error.message,
										mask: false,
										duration: 1500,
									});
								}
							);
						} else {
							self.bannerPercentageShow = false;
							uni.showToast({
								title: "更新失败",
								mask: false,
								duration: 1500,
							});
						}
					}
				);
				try {
					dtask.start(); // 开启下载的任务
					let prg = 0;
					this.bannerPercentageShow = true;
					dtask.addEventListener("statechanged", function (task, status) {
						// 给下载任务设置一个监听 并根据状态  做操作
						switch (task.state) {
							case 1:
								break;
							case 2:
								break;
							case 3:
								prg = parseInt(
									(parseFloat(task.downloadedSize) /
										parseFloat(task.totalSize)) *
									100
								);
								self.bannerPercentage = prg;
								break;
							case 4:
								plus.nativeUI.closeWaiting();
								self.bannerShow = false; // 显示弹窗
								break;
						}
					});
				} catch (err) {
					console.log("更新失败-03err", err);
					plus.nativeUI.closeWaiting();
					uni.showToast({
						title: "更新失败-03",
						mask: false,
						duration: 1500,
					});
				}
			} else if (platformType == "IOS") {
				// ios跳转到app store
				plus.runtime.openURL(updateApkObj.downloadUrl);
			}
		},

		// 查询轮播图
		async getCarouselImage() {
			const params = {
				pageUi: APP_PAGE_TYPE.HOME,
			};
			const resp = await getCarouselImage(params);
			if (resp && resp.bizcode === 100) {
				const data = resp.data || [];
				this.swiperList =
					data.length !== 0 ? data.map((obj) => obj.carouselImage) : [];
			}
		},
		jumpIntegral() {
			uni.navigateTo({
				url: "/pages/rwa_package/shop/fen-shop",
			});
		},
		jumpTurntable() {
			// uni.navigateTo({
			// 	url: '/pages/other_package/turntable/turntable?backPath=home',
			// })
			uni.navigateTo({
				url: "/pages/other_package/nine-grid/nine-grid?backPath=home",
			});
		},
		jumpPrdference() {
			uni.switchTab({
				url: "/pages/supply_chain/supply_chain",
			});
		},
		jumpWelcome() {
			uni.navigateTo({
				url: "/pages/login_package/welcome/welcome",
			});
		},
		jumpSearch() {
			uni.navigateTo({
				url: "/pages/rwa_package/dongjian/search",
			});
		},
		/**
		 * 查询商品列表
		 */
		async querySearchList(type) {
			this.productLoading = true;
			const params = {
				type,
				page: 1,
				isRecomm: true,
				pageSize: type === SEARCH_TYPE.SOMETHING ? 4 : 3,
			};
			const resp = await searchList(params);
			if (resp && resp.bizcode === 100) {
				if (type === SEARCH_TYPE.SOMETHING) {
					// 好物优选
					this.yxProduct = resp.data;
				} else if (type === SEARCH_TYPE.EXPLOSIVE) {
					// 爆单专区
					this.faddishProduct = resp.data;
				}
			}
			this.productLoading = false;
		},
		/**
		 * 查询分类列表
		 */
		async getSortList() {
			this.sortList = [
				{
					id: 1,
					name: "超级补贴",
					icon: 'https://static.tbmall.xin/static/new-home/home_2.png'
				}, {
					id: 2,
					name: "限时秒杀",
					icon: 'https://static.tbmall.xin/static/new-home/home_3.png'
				}, {
					id: 3,
					name: "全网爆款",
					icon: 'https://static.tbmall.xin/static/new-home/home_6.png'
				}, {
					id: 3,
					name: "低价好物",
					icon: 'https://static.tbmall.xin/static/new-home/home_4.png'
				}, {
					id: 4,
					name: "新人专享",
					icon: 'https://static.tbmall.xin/static/new-home/home_4.png'
				}
			];
			// const resp = await getCascadeCategory({
			// 	parentId: 0
			// });
			// if (resp && resp.bizcode === 100) {
			// 	this.sortList = resp.data.slice(0, 10);
			// }
		},
		// 跳转到分类栏目
		jumpSort(item) {
			uni.setStorageSync("sortId", item.id);
			uni.switchTab({
				// 首页
				url: "/pages/sort/sort",
			});
		},
		// 跳转到商品详情
		jumpInfo(item) {
			uni.navigateTo({
				url: "/pages/other_package/productInfo/productInfo?id=" + item.id,
			});
		},
	},
	computed: {
		isBlockedDate() {
			return useTabber(6);
		},
	},
};
</script>

<style lang="scss" scoped>
.home_warp {
	background: #fff;
	height: calc(100vh - env(safe-area-inset-bottom)); // 是底部的导航栏高度
	overflow: auto;
	position: relative;

	&.iosplatformType {
		height: 100vh;
	}
}

.home_header_warp {
	background: linear-gradient(270deg, #af39c4 0%, #7732ff 100%);
	height: 854rpx;
	padding: 100rpx 30rpx 0rpx;
}

.home_content_z_warp {
	position: absolute;
	left: 0;
	width: 100%;

	.header_right_warp {
		display: flex;
		align-items: center;
		width: calc(100% - 0rpx);
	}

	.language_warp {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100rpx;
		padding: 10rpx 20rpx;
		background: #ffffff30;
		border-radius: 24rpx;
		background: linear-gradient(270deg, #ae39c5, #7932fe) 2 2;
	}

	.chart_img {
		width: 50rpx;
		height: 50rpx;
		margin-left: 15rpx;
	}

	.search_msg_warp {
		margin-left: 12rpx;
		font-weight: 500;
		font-size: 28rpx;
		color: #ffffffb3;
	}
}

.logo_banner {
	display: flex;
	justify-content: space-between;
	// padding: 0 30rpx;
	color: #ffffff;

	.logo_banner_title {
		font-weight: bold;
		font-size: 38rpx;
		line-height: 36rpx;
		margin: 20rpx 0;
	}

	.logo_banner_msg {
		font-size: 22rpx;
	}
}

.home_sort_warp {
	// position: absolute;
	top: 460rpx;
	width: 100%;

	.sort_warp {
		background: #ffffff;
		padding: 20rpx;
		border-radius: 20rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.sort_item {
			width: 18%;
			text-align: center;
			margin-bottom: 20rpx;
		}

		.sort_item_title {
			font-weight: 500;
			font-size: 22rpx;
			color: #333333;
		}
	}
}

.home_content_warp {
	padding: 0 30rpx;

	&.Hot_Picks_Zone {
		width: 100%;
		box-sizing: border-box;
		height: auto;
		background: linear-gradient(344deg, #FFFFFF 0%, #EDE3FF 100%);
		border-radius: 28rpx;
		border: 1rpx solid #DFDFDF;
		padding: 24rpx 20rpx 20rpx;
		margin: 20rpx auto 0;
	}

	.product_comm_yp {
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	.yp_title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 0 10rpx;
	}

	.yp_title_left {
		display: flex;
		align-items: center;
	}

	.yp_title_main {
		font-weight: 800;
		font-size: 36rpx;
		color: #000000;
		margin-right: 10rpx;
	}

	.yp_title_sub {
		font-size: 22rpx;
		color: #333333;
		font-weight: 500;
	}

	.yp_title_right {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		color: #7632ff;
		font-weight: bold;
	}

	.yp_arrow_circle {
		width: 24rpx;
		height: 24rpx;
		background-color: #7632ff;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 8rpx;
	}

	.yp_arrow_chevron {
		width: 8rpx;
		height: 8rpx;
		border-top: 3rpx solid #ffffff;
		border-right: 3rpx solid #ffffff;
		transform: rotate(45deg);
		margin-left: -2rpx;
	}

	.yp_content {
		display: flex;
		justify-content: space-between;
		align-items: stretch;
		width: 100%;
	}

	.yp_item {
		flex: 0 0 32%;
		min-width: 0;
		background-color: #ffffff;
		border-radius: 24rpx;
		border: 1rpx solid #eae5f9;
		padding: 16rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.yp_item_image_wrapper {
		width: 100%;
		display: flex;
		justify-content: center;
		margin-bottom: 12rpx;
	}

	.yp_item_info {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		min-width: 0;
	}

	.yp_item_name {
		font-size: 24rpx;
		color: #000000;
		font-weight: bold;
		text-align: center;
		width: 100%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		margin-bottom: 12rpx;
	}

	.yp_item_price_tag {
		width: 100%;
		background: linear-gradient(270deg, #b164fb 0%, #7632ff 100%);
		color: #ffffff;
		font-size: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 44rpx;
		border-radius: 12rpx;
		white-space: nowrap;
		font-weight: bold;
	}

	.product_comm {
		border-radius: 30rpx;
		padding: 10rpx;
		color: #ffffff;
		margin-top: 20rpx;
	}

	.yx_warp {
		background: linear-gradient(270deg, #fdefff 0%, #ede3ff 100%);
	}

	.product_title_z {
		font-weight: 800;
		font-size: 36rpx;
		color: #333333ff;
		margin-right: 10rpx;
	}

	.product_title_zk {
		background: #b164fb45;
		border-radius: 6rpx;
		padding: 2rpx 20rpx;
		color: $app-zt-color;
	}

	.product_title_left {
		font-size: 20rpx;
		display: flex;
		align-items: center;
	}

	.product_title_f {
		font-size: 20rpx;
		color: #ffffff;
		margin-left: 10rpx;
		display: flex;
		align-items: center;
	}

	.product_content_yx {
		display: flex;
		padding: 20rpx;
	}

	.product_content {
		background-color: #ffffff;
		padding: 20rpx;
		border-radius: 24rpx;
		display: flex;
		align-items: center;
	}

	.product_content2 {
		justify-content: space-between;
	}

	.product_item {
		width: 32%;
		position: relative;
		margin-right: 20rpx;
	}

	.product_item2 {
		width: 32%;
		position: relative;
	}

	.product_item_yx {
		width: 23%;
		position: relative;
	}

	.product_item_yx2 {
		margin-right: 20rpx;
	}

	.product_f_item {
		position: absolute;
		bottom: 0;
		width: calc(100% - 40rpx);
		height: 66rpx;
		background: #f0e7fe;
		border-radius: 0rpx 0rpx 12rpx 12rpx;
		border: 1rpx solid #ffffff;
		padding: 10rpx 20rpx;
		font-size: 18rpx;
		color: #000000;
	}

	.product_f_item_name {
		width: 172rpx;
		white-space: nowrap;
		/* 防止文本换行 */
		overflow: hidden;
		/* 隐藏溢出的文本 */
		text-overflow: ellipsis;
		/* 使用省略号表示溢出的内容 */
		font-weight: bold;
	}

	.product_f_item_price {
		text-align: center;
		border-radius: 10rpx;
		color: #ffffff;
		margin-top: 10rpx;
		padding: 2rpx 0;
	}

	.product_f_item_price_yx {
		background: #ffba41;
	}

	.product_f_item_price_hx {
		background: linear-gradient(270deg, #af39c4 0%, #7732ff 100%);
	}

	.product_tips {
		font-size: 24rpx;
		line-height: 40rpx;
		margin-left: 20rpx;
		background: linear-gradient(180deg, #b039c2 0%, #8b34e9 23%, #7632ff 100%);
		-webkit-background-clip: text;
		color: transparent;
		display: inline-block;
	}

	// 积分兑换，红包
	.min_card_warp {
		display: flex;
		gap: 10rpx;
		justify-content: space-between;
		margin-top: 24rpx;

		.min_card_item {
			padding: 10rpx 12rpx;
			flex: 1;
			height: 108rpx;
			border-radius: 30rpx;
			opacity: 0.8;
			border-radius: 16rpx;
			display: flex;
			justify-content: space-between;
			background: linear-gradient(344deg, #FFFFFF 0%, #EDE3FF 100%);
			border-radius: 12rpx;
			border: 1rpx solid #DFDFDF;
		}

		.min_card_item_content {
			margin-top: 15rpx;

			.min_card_item_title {
				font-weight: bold;
				font-size: 32rpx;
				color: #000000;
			}

			.content_msg {
				font-size: 20rpx;
				color: #808080;
				display: grid;
				margin-top: 10rpx;
			}

			.content_msg_but {
				display: flex;
				align-items: center;
				margin-top: 20rpx;
			}
		}
	}

	// 热门榜
	.product_comm_tip {
		display: flex;
		justify-content: space-between;
	}

}

.uni-banner-news {
	width: 540rpx;
	margin: 0 auto;
	background: url(https://hashmall-prod.oss-cn-shenzhen.aliyuncs.com/common/image/%E9%9D%9E%E5%BC%BA%E5%88%B6%E5%8D%87%E7%BA%A7.png) no-repeat;
	background-size: 100% 100%;

	.close_btn {
		position: absolute;
		top: 0;
		right: 0;
		width: 48rpx;
		height: 48rpx;
	}

	.banner_box-news {
		height: 700rpx;
		// padding:40rpx;
		width: 90%;
	}

	.banner_box-title {
		font-weight: 500;
		font-size: 16px;
		color: #333333;
		overflow: hidden;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		/* 下面两行是为了兼容老版本 Firefox */
		line-clamp: 2;
		box-orient: vertical;
		margin-top: 250rpx;
	}

	.banner_box-subTitle {
		font-size: 14px;
		color: #868686;
		overflow: hidden;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		/* 下面两行是为了兼容老版本 Firefox */
		line-clamp: 3;
		box-orient: vertical;
		margin-top: 30rpx;
	}

	.banner_box-btn {
		// width: 480rpx;
		width: calc(100% - 80rpx);
		height: 80rpx;
		background: linear-gradient(270deg, #af39c4 0%, #7732ff 100%);
		border-radius: 16rpx;
		font-weight: 500;
		font-size: 32rpx;
		color: #ffffff;
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		bottom: 60rpx;
	}
}
</style>