frontend-app/pages/home/home.vue

<template>
	<view v-if="pageReady" class="home_warp" :class="platformType ? '' : 'iosplatformType'">
		<!-- 带背景的头部 -->
		<view class="home_header_warp"></view>
		<view class="home_content_z_warp">
			<view class="header_title_warp">
				<!-- <up-image src="https://static.tbmall.xin/static/home/logo.png" width="86" height="30" bgColor="#f1f6ff00"></up-image> -->
				<!-- <view class="header_right_warp"> -->
				<view class="language_warp" style="width: 100%; justify-content: flex-start" @click="jumpSearch">
					<view style="margin-top: 10rpx">
						<up-image src="https://static.tbmall.xin/static/home/search_b.png"
							width="20" height="20" bgColor="#f1f6ff00"></up-image>
					</view>
					<text class="search_msg_warp">搜索</text>
				</view>
				<image src="https://static.tbmall.xin/static/chart.png" class="chart_img"
					@click.stop="jumpNewSearch('list')"></image>

				<!-- <view class="language_warp" @click="languageShow = true">
						<text>CN</text>
						<up-image src="/static/common/down.png" width="10" height="10" bgColor="#f1f6ff00"></up-image>
					</view> -->
				<!-- </view> -->
			</view>
			<!-- banner图 -->
			<!-- <view style="padding: 0 30rpx;">
				<up-swiper
					:list="swiperList"
					height="120"
					radius="10"
					@change="e => currentNum = e.current"
					bgColor="#ffffff00"
				>
					<template #indicator>
						<view
							class="indicator-num"
						>
							<text class="indicator-num__text">{{ currentNum + 1 }}/{{ swiperList.length }}</text>
						</view>
					</template>
</up-swiper>
</view> -->
			<!-- logo分类 -->
			<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">
				<!-- 爆款专区-->
				<view class="product_comm hx_warp" @click="onJumpYou"
					v-if="faddishProduct && faddishProduct.length !== 0">
					<view class="product_title">
						<view class="product_title_left">
							<text class="product_title_yp">信任桥优品</text>
							<up-image src="https://static.tbmall.xin/static/home/youxuan.png"
								width="10" height="10" bgColor="#f1f6ff00"></up-image>
							<text style="margin-left: 6rpx; color: #ffffff">品牌5折秒杀福利</text>
						</view>
						<view class="product_title_f" style="font-weight: bold">
							<text style="">立即抢购</text>
							<view style="margin: 6rpx 0 0 6rpx"><up-image src="/static/common/right_y_st3.png"
									width="12" height="12" bgColor="#f1f6ff00"></up-image></view>
						</view>
					</view>
					<view :class="faddishProduct && faddishProduct.length > 2
							? 'product_content product_content2'
							: 'product_content'
						">
						<up-loading-icon :show="productLoading"></up-loading-icon>
						<view :class="faddishProduct && faddishProduct.length > 2
								? 'product_item2'
								: 'product_item'
							" v-for="item in faddishProduct" :key="item.id" @click.stop="jumpInfo(item)">
							<up-image :src="item.url" width="100%" height="130" bgColor="#f1f6ff00" shape="square"
								radius="15"></up-image>
							<view class="product_f_item">
								<view class="product_f_item_name">{{ item.title }}</view>
								<view class="product_f_item_price product_f_item_price_hx">优选价{{ item.price }}元</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 积分兑换，红包抽奖 -->
				<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 class="content_msg_but">
									立即抢购
									<view style="margin-top: 6rpx; margin-left: 4rpx"><up-image
											src="/static/common/right_y.png" width="10" height="10"
											bgColor="#f1f6ff00"></up-image></view>
								</view>
							</view>
						</view>
						<up-image src="https://static.tbmall.xin/static/home/min_card_jfdh_2.png"
							width="66" height="66" 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 class="content_msg_but">
									立即抢购
									<view style="margin-top: 6rpx; margin-left: 4rpx"><up-image
											src="/static/common/right_y.png" width="10" height="10"
											bgColor="#f1f6ff00"></up-image></view>
								</view>
							</view>
						</view>
						<up-image src="https://static.tbmall.xin/static/home/min_card_hbcj_2.png"
							width="66" height="66" bgColor="#f1f6ff00"></up-image>
					</view>
				</view>
				<!-- 好物优选 -->
				<view class="product_comm yx_warp" v-if="yxProduct && yxProduct.length !== 0" @click="jumpPrdference">
					<view class="product_title">
						<view class="product_title_left">
							<text class="product_title_z">平价专区</text>
							<text class="product_title_zk">4折起</text>
						</view>
						<view class="product_title_f" style="color: #7632ff">
							<text style="">立即抢购</text>
							<view style="margin: 6rpx 0 0 6rpx"><up-image src="/static/common/right_y_st4.png"
									width="10" height="10" bgColor="#f1f6ff00"></up-image></view>
						</view>
					</view>
					<view class="product_tips">平价专区 抢到就是赚到！</view>
					<view :class="yxProduct && yxProduct.length > 3
							? 'product_content_yx product_content2'
							: 'product_content_yx'
						">
						<up-loading-icon :show="productLoading"></up-loading-icon>
						<view :class="yxProduct && yxProduct.length < 4
								? 'product_item_yx product_item_yx2'
								: 'product_item_yx'
							" v-for="item in yxProduct" :key="item.id">
							<up-image :src="item.url" width="100%" height="80" bgColor="#f1f6ff00" shape="square"
								radius="10"></up-image>
							<!-- <view class="product_f_item">
								<view class="product_f_item_name">{{item.title}}</view>
								<view class="product_f_item_price product_f_item_price_yx">优选价{{item.adPrice}}元</view>
							</view> -->
						</view>
					</view>
				</view>
				<!-- 为您精选 -->
				<choiceness />
			</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 {
		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() {
				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(13);
			},
		},
	};
</script>

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

		&.iosplatformType {
			height: 100vh;
		}
	}

	.home_header_warp {
		// background-color: #AC2A29FF;
		// background: linear-gradient(0deg, $app-bj, #AC2A29FF);
		background: linear-gradient(270deg, #af39c4 0%, #7732ff 100%);
		height: 500rpx;
		padding: 100rpx 30rpx 0rpx;
	}

	.home_content_z_warp {
		position: absolute;
		top: 90rpx;

		.header_title_warp {
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;
			padding: 0 30rpx;
		}

		.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;
		padding: 30rpx 30rpx 0;
		width: calc(100% - 60rpx);

		.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;

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

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

		.hx_warp {
			background: linear-gradient(270deg, #b164fb 0%, $app-zt-color 100%);
		}

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

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

		.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;
			justify-content: space-between;
			margin-top: 20rpx;

			.min_card_item {
				padding: 20rpx;
				width: 43%;
				border-radius: 30rpx;
				opacity: 0.8;
				border-radius: 16rpx;
				border: 1rpx solid #dfdfdf;
				display: flex;
				justify-content: space-between;
			}

			.min_card_item_content {
				margin-top: 10rpx;

				.min_card_item_title {
					font-weight: bold;
					font-size: 28rpx;
					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;
				}
			}
		}

		// 热门榜
		.hot_warp {
			background: #ffffff;
			border-radius: 30rpx;
			padding: 20rpx;
			margin-top: 20rpx;

			.hot_title_warp {
				display: flex;
				justify-content: space-between;
				align-items: center;

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

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

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

				.good__msg_warp {
					background: #fff8f3;
					/* border-radius: 18rpx; */
					border-top: 2rpx solid $app-zt-color;
					border-right: 2rpx solid $app-zt-color;
					border-bottom: 2rpx solid $app-zt-color;
					font-size: 20rpx;
					color: $app-zt-color;
					padding: 4rpx 14rpx 4rpx 20rpx;
					margin-left: -6px;
					border-radius: 0rpx 18rpx 18rpx 0rpx;
				}

				.more_warp {
					display: flex;
					font-size: 24rpx;
					color: #666666;
				}
			}

			.hot_content_warp {
				display: flex;
				justify-content: space-between;
				margin-top: 20rpx;

				.hot_item {
					width: 24%;
				}

				.hot_item_name {
					font-weight: 800;
					font-size: 24rpx;
					color: #000000;
					width: 160rpx;
					white-space: nowrap;
					/* 防止文本换行 */
					overflow: hidden;
					/* 隐藏溢出的文本 */
					text-overflow: ellipsis;
					/* 使用省略号表示溢出的内容 */
				}

				.hot_item_price {
					display: flex;
					justify-content: center;
					font-size: 20rpx;
					color: $app-zt-color;
					text-align: center;
					margin-top: 10rpx;
				}
			}
		}

		// 哈希商学院
		.business_school_warp {
			margin-top: 20rpx;
			height: 160rpx;
			background-image: url("https://static.tbmall.xin/static/result.png");
			background-size: 100% 100%;
			background-position: center;
			/* 将图片居中显示 */
			display: grid;
			align-items: center;
			padding: 0 40rpx;
			color: rgba(255, 255, 255, 0.9);
			border-radius: 20rpx;

			.title {
				font-weight: 800;
				font-size: 32rpx;
				// color: #0987F8;
			}

			.msg {
				font-size: 20rpx;
				// color: #666666;
				display: flex;
				align-items: center;
				// margin-top: 10rpx;
			}
		}
	}

	.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>