zhongtuanCatering/pages/index/index.vue

<template>
	<view v-if="template" class="recharge flex align-items justify-start flex-column" :style="{
		zIndex: '-1',
		backgroundPosition: 'top',
		backgroundRepeat: 'no-repeat',
	}">
	<s-layout title="团餐宝典" navbar="custom" tabbar="/pages/index/index" :bgStyle="template.style?.background"
		:navbarStyle="template.style?.navbar" onShareAppMessage :showFloatButton="true">
		<view class="box" style="position: relative;">
			<!-- logo 
			<view class="logo_css">
				<view class="logo_name">团餐宝典</view>
				<view class="logo_con">寻味餐饮铺 商机在线等</view>
			</view>-->
			<view class="top-content">
				<!-- 省市 
				<view class="top_location">
					<image style="width: 34rpx;height: 34rpx;margin-right: 10rpx;" src="/static/index/locationTop.png" mode=""></image>
					<view>河南省 洛阳市</view>
				</view>-->
				<!-- 搜索 
				<view class="serch_top">
					<view class="serch_top1">
						<u-search class="u-search" v-model="keywords" placeholder="搜索您要找的内容" :showAction="false"
							search-icon="/static/index/search.png" @change="search()">
						</u-search>
					</view>
				</view>-->
			</view>
			
			<!-- 轮播图 
			<view>
				<scroll-view scroll-x="true"></scroll-view>
			</view>-->
			
			
		</view>
		
	 </s-layout>
		
		<!-- <tab-bar :tabBarShow="0"></tab-bar> -->
	</view>
	
	<s-tabbar v-if="tabbar !== ''" :path="tabbar" />



	<!-- <view v-if="template">
		<s-layout title="首页" navbar="custom" tabbar="/pages/index/index" :bgStyle="template.style?.background"
			:navbarStyle="template.style?.navbar" onShareAppMessage :showFloatButton="true">
		</s-layout>
		
		<s-block v-for="(item, index) in template.data" :key="index" :styles="item.style">
		    <s-block-item :type="item.type" :data="item.data" :styles="item.style" />
		  </s-block>
		  广告模块
		  <s-popup-image />
	</view> -->
</template>

<script setup>
	import {
		computed,
		ref,
		reactive
	} from 'vue';
	import {
		onLoad,
		onPageScroll,
		onPullDownRefresh
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	import $share from '@/sheep/platform/share';
	// import {
	// 	dateWeek
	// } from '../../utils/dateFormat'

	const swiperList = ref([]);
	const keywords = ref(''); // 确保 keywords 是响应式数据

	// 隐藏原生tabBar
	uni.hideTabBar({
		fail: () => {},
	});

	const template = computed(() => sheep.$store('app').template?.home);

	onLoad((options) => {
		// #ifdef MP
		// 小程序识别二维码
		if (options.scene) {
			const sceneParams = decodeURIComponent(options.scene).split('=');
			options[sceneParams[0]] = sceneParams[1];
		}
		// #endif

		// 预览模板
		if (options.templateId) {
			sheep.$store('app').init(options.templateId);
		}

		// 解析分享信息
		if (options.spm) {
			$share.decryptSpm(options.spm);
		}

		// 进入指定页面(完整页面路径)
		if (options.page) {
			sheep.$router.go(decodeURIComponent(options.page));
		}
	});

	// 下拉刷新
	onPullDownRefresh(() => {
		sheep.$store('app').init();
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 800);
	});

	onPageScroll(() => {});
</script>

<style lang="scss" scoped>
	.w-100 {
		width: 100%;
	}

	.flex {
		display: flex;
	}

	.justify-center {
		justify-content: center;
	}

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

	.align-items {
		align-items: center;
	}

	.flex-column {
		flex-flow: column;
	}

	.justify-start {
		justify-content: start;
	}

	.mar-top-30 {
		margin-top: 30rpx;
	}

	.recharge {
		width: 750rpx;
		height: 100vh;
		background-color: #f7f7f7;
		background: linear-gradient(to bottom, #fcc74e 0%, #f7f7f7 50%);;
		
		// background-image: url("https://naweigetetest2.hschool.com.cn/dyqc/bgx2.png");
		background-size: 100%;

		.box {
			width: 690rpx;
			margin-top: 30rpx;

			.logo_css {
				width: 430rpx;
				height: 80rpx;
				display: flex;
				align-items: first baseline;
				justify-content: flex-start;
				// #ifdef MP-WEIXIN
				margin-top: 65rpx;
				// #endif
				
				.logo_name{
					color: #333333;
					font-size: 38rpx;
					font-weight: 400;
					font-weight: bold;
					font-family: PingFang SC-Bold;
					line-height: 38rpx;
					margin-right: 20rpx;
				}
				
				.logo_con {
					color: #333333;
					font-size: 26rpx;
					font-weight: 400;
					font-family: PingFang SC-Regular;
					line-height: 26rpx;
				}
				
			}
			
			.top-content{
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				
				.top_location{
					width: 45%;
					display: flex;
					align-items: center;
					justify-content: flex-start;
				}
				
				.serch_top {
					display: flex;
					position: relative;
					// top: 200rpx;
				
					.serch_top1 {
						margin-top: 10rpx;
						margin-bottom: 30rpx;
						position: relative;
						width: 400rpx;
						border-radius: 20rpx;
						
						
						
						.u-search {
							width: 100%;
							border-radius: 20rpx;
							background-color: #ffffff;
							
							::v-deep .u-search__content {
								background: rgba($color: #FFFFFF,$alpha: 1) !important;
							}
						
							::v-deep .u-search__content__input {
								background-color: rgba($color: #FFFFFF,$alpha: 1) !important;
							}
						
							::v-deep .u-icon__img {
								width: 36rpx !important;
								height: 36rpx !important;
							}
						}
					}
				
					.imgstop_ye {
						// margin-left: 30rpx;
						width: 176rpx;
						position: absolute;
						right: -30rpx;
					}
				}
				
				
			}
			
			
			.hot {
				//   margin-top: 30rpx;
				margin-bottom: 50rpx;

			}
		}

		
	}

	.white-space {
		overflow: hidden;
		/* 确保超出容器的文本被隐藏 */
		white-space: nowrap;
		/* 确保文本在一行内显示 */
		text-overflow: ellipsis;
		/* 使用省略号表示被截断的文本 */
		width: 100%;
	}
	
</style>
<style lang="scss">
	.serch_top {
		background-color: #ffffff;
		.u-search {
			border-radius: 20rpx;
			
			::v-deep .u-search__content {
				background: rgba($color: #FFFFFF,$alpha: 1) !important;
			}

			::v-deep .u-search__content__input {
				background-color: rgba($color: #FFFFFF,$alpha: 1) !important;
			}

			::v-deep .u-icon__img {
				width: 36rpx !important;
				height: 36rpx !important;
			}
		}
	}

	.swiper_s {
		width: 100%;
		height: 100%;
	}


	.swiper-image {
		width: 100%;
		height: 100%;
		border-radius: 36rpx;
		object-fit: contain;
	}

	.text {
		position: absolute;
		/* 确保文字在模糊背景之上 */
		z-index: 200;
		/* 提高z-index以确保文字位于最上层 */
		font-family: "YouSheBiaoTiHei";
		font-weight: 400;
		font-size: 38rpx;
		color: #ffffff;
		text-align: center;
		width: 100%;
		bottom: 70rpx;
		transform: translateZ(0);
	}

	.fnon_tit {
		position: absolute;
		left: 5%;
		z-index: 1;
		width: 630rpx;
		height: 117rpx;
		line-height: 100rpx;
		background: rgba(0, 0, 0, 0.24);
		backdrop-filter: blur(4px);
		border-radius: 36rpx;
		bottom: 30rpx;
	}

	// .fnon_tit::before  {
	// 	content: "";
	// 	position: absolute;
	// 	top: 0;
	// 	left: 0;
	// 	right: 0;
	// 	bottom: 0;
	// 	backdrop-filter: blur(4px);
	// 	/* 调整模糊程度 */
	// 	pointer-events: none;
	// 	/* 确保模糊效果不会干扰点击事件 */
	// 	border-radius: 36rpx;
	// 	z-index: 0;
	// 	/* 确保伪元素在背景和文字之间 */
	// }

	.dots {
		position: absolute;
		bottom: 50rpx;
		width: 100%;
		display: flex;
		justify-content: center;

		.dot {
			background-color: #ffffff;
			width: 30rpx;
			height: 6rpx;
			border-radius: 0;
			margin-right: 10rpx;

			&.active {
				background: #0DAE11;
				// transform: scale(0.9);
			}
		}
	}

	.line-row {
		margin: 40rpx 0rpx;
		height: 1rpx;
		width: 100%;
		background: #eeeeee;
	}

	.input {
		text-align: right;
		font-family: PingFang SC, PingFang SC;
		font-size: 26rpx;
		color: #343434;
		line-height: 32rpx;
	}

	.plasty {
		color: #999999;
		font-weight: 300;
		font-size: 28rpx;
	}

	.textarea_mph {
		::v-deep .u-textarea {
			height: 237rpx;
			padding: 20rpx;
			border: none;
			font-size: 26rpx;
			color: #9C9C9C;
			background-color: #F8F8F8 !important;
			border-radius: 18rpx;
		}
	}

	.btn_1 {
		width: 100%;
		height: 90rpx;
		background: #323232;
		border-radius: 198rpx 198rpx 198rpx 198rpx;
		font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
		font-weight: 400;
		font-size: 32rpx;
		color: #BBFC5B;
		line-height: 90rpx;
		text-align: center;
		margin-top: 50rpx;
	}
</style>