zyejMAll-mobile/sheep/components/s-mof-block/s-mof-block.vue

<!-- 全局 - 快捷入口 -->
<template>
	<view class='new_czbk'>
		<view class="t">
			<text class="left-font">超值爆款</text>
			<view class="sub">美好生活由此开始</view>
		</view>
		<view class="new-list">
			<!-- <view class="item" @click="sheep.$router.go('/pages/goods/sales', {
                activityType: 'recommendBest',
            });"> -->
			<view class="item" @click="sheep.$router.go(`${props.data.list[0].url}`);">
				<view class="nei">
					<view class="l">
						<view class="t">今日推荐</view>
						<view class="c">店主诚意推荐品质商品</view>
						<view class="b">
							<!-- GO! -->
							<image
								src="https://zysc.fjptzykj.com:3000/shangcheng/40a7582be7aeb5a6047415ab3a6728439a2798a4752ffcc1c063d66a534aa630.png"
								class="img"></image>

						</view>
					</view>
					<view class="r">
						<image
							src="https://zysc.fjptzykj.com:3000/shangcheng/c80faeeeb2d6dadcdbe7e6d1a4caa06869b94301612cdf157414a10559b38267.png"
							class="img"></image>
					</view>
				</view>
			</view>
			<!-- <view class="item" @click="sheep.$router.go('/pages/goods/sales', {
                activityType: 'recommendHot',
            });"> -->
			<view class="item" @click="sheep.$router.go(`${props.data.list[1].url}`);">
				<view class="nei">
					<view class="l">
						<view class="t">热门榜单</view>
						<view class="c">店主诚意推荐品质商品</view>
						<view class="b">
							<!-- GO! -->
							<image
								src="https://zysc.fjptzykj.com:3000/shangcheng/5c72fc99989bf0a7e59b57f519c76c9a98cb20478384e20b1b934aa8f80cc598.png"
								class="img"></image>
						</view>
					</view>
					<view class="r">
						<image
							src="https://zysc.fjptzykj.com:3000/shangcheng/904fd4848fde8025ccc17693662efd5b7bf5ec3f2656ecc7de407c8c46f910b2.png"
							class="img"></image>
					</view>
				</view>
			</view>
			<!-- <view class="item" @click="sheep.$router.go('/pages/goods/sales', {
                activityType: 'recommendNew',
            });"> -->
			<view class="item" @click="sheep.$router.go(`${props.data.list[2].url}`);">
				<view class="nei">
					<view class="l">
						<view class="t">首发新品</view>
						<view class="c">新品上架等 你来拿</view>
						<view class="b">
							<!-- GO! -->
							<image
								src="https://zysc.fjptzykj.com:3000/shangcheng/ebb2fc0512d1bd6a6d21a2c07f6603bfd2ea6f7e23377eb4cd8118d89d666589.png"
								class="img"></image>
						</view>
					</view>
					<view class="r">
						<image
							src="https://zysc.fjptzykj.com:3000/shangcheng/7c71cbf2c757418302ea9ef2952893c24e1d46c4cc35a821f56be0f315bcabb0.png"
							class="img"></image>
					</view>
				</view>
			</view>
			<!-- <view class="item" @click="sheep.$router.go('/pages/goods/sales', {
                activityType: 'recommendGood',
            });"> -->
			<view class="item" @click="sheep.$router.go(`${props.data.list[3].url}`);">
				<view class="nei">
					<view class="l">
						<view class="t">促销单品</view>
						<view class="c">综合评选好 产品</view>
						<view class="b">
							<!-- GO! -->
							<image
								src="https://zysc.fjptzykj.com:3000/shangcheng/aac8baa7a6feb9ee3459d1cf75ba9a7e8bacb5d93c88ac95c1b0ecd29b847f96.png"
								class="img"></image>
						</view>
					</view>
					<view class="r">
						<image
							src="https://zysc.fjptzykj.com:3000/shangcheng/8a61c35d82702c61f97ef3db43a8d6755b2eca3d78a22dbaa55851e815e96a23.png"
							class="img"></image>
					</view>
				</view>
			</view>
			<view style="clear:both;"></view>
		</view>
	</view>

</template>

<script setup>
	import {
		reactive,
		computed
	} from 'vue';
	import sheep from '@/sheep';
	import {
		showMenuTools,
		closeMenuTools
	} from '@/sheep/hooks/useModal';
	// 接受参数
	const props = defineProps({
		data: {
			type: Object,
			default: {},
		}
	});
	
	console.log("====++++=====",props.data)
	const show = computed(() => sheep.$store('modal').menu);

	function onClick(item) {
		closeMenuTools();
		if (item.url) sheep.$router.go(item.url);
	}

	const list = [{
			url: '/pages/index/index',
			icon: 'https://zysc.fjptzykj.com:3000/shangcheng/f4e03230b5cb9b2bf789b67df43125af1b3cef9c2abf4d8bca8f6fa5ded16a20.png',
			title: '首页',
		},
		{
			url: '/pages/index/search',
			icon: 'https://zysc.fjptzykj.com:3000/shangcheng/96a288f2a0043c8defaa37e922828b3092ba785e1c191bf18f20dbd462261f7a.png',
			title: '搜索',
		},
		{
			url: '/pages/index/user',
			icon: 'https://zysc.fjptzykj.com:3000/shangcheng/227699332b8ae736e220852e60215072eb2805478dab4909e085f89aeb3604cf.png',
			title: '个人中心',
		},
		{
			url: '/pages/index/cart',
			icon: 'https://zysc.fjptzykj.com:3000/shangcheng/a45981116198a65db5f28ffd070f0078cfa66ac932a0136bf45ba7e8f401a1d0.png',
			title: '购物车',
		},
		{
			url: '/pages/user/goods-log',
			icon: 'https://zysc.fjptzykj.com:3000/shangcheng/7e5ecfb841f2d89b778e1070ef867c17ccda48a5fea14a149f8eb1ce6aa26a87.png',
			title: '浏览记录',
		},
		{
			url: '/pages/user/goods-collect',
			icon: 'https://zysc.fjptzykj.com:3000/shangcheng/9f83f4dc3cbf8b1e8e747f8dd79a260feaf65fa9ef3f2e2224015779f85119a1.png',
			title: '我的收藏',
		},
		{
			url: '/pages/chat/index',
			icon: 'https://zysc.fjptzykj.com:3000/shangcheng/739f3165045b1552b71176297dab45eda2e192b976e25b1a458a8781a61b7557.png',
			title: '客服',
		},
	];
</script>

<style lang="scss" scoped>
	.new_czbk {
		width: 100%;
		background: rgba(255, 229, 227);
		border-radius: 5px;
		margin: 0 auto;
		padding: 5px 0;
		// margin-top: 10px;
		padding-bottom: 10px;
		padding-top: 10px;

		&>.t {
			display: flex;
			align-items: center;
			padding: 0 10px;

			.left-font {
				color: rgba(252, 60, 62);
				font-size: 17px;
				font-weight: 700;
			}

			.sub {
				background: rgba(248, 79, 43);
				color: white;
				border-radius: 20px 0px 20px 0px;
				padding: 0 13px;
				margin-left: 10px;
				font-size: 13px;
			}
		}

		.new-list {
			// width: 100%;
			margin-right: 10px;

			.item {
				float: left;
				width: 50%;

				.nei {
					margin: 10px;
					margin-right: 0;
					margin-bottom: 0;
					background: white;
					border-radius: 10px;
					padding: 8px 10px;
					display: flex;

					.l {
						width: 50%;

						.t {
							// font-size: 17px;
						}

						.c {
							color: rgba(153, 153, 153);
							font-size: 12px;
							margin: 3px 0;
						}

						.b {
							// display: flex;
							// align-items: center;
							// justify-content: space-around;
							// background: #329cff;
							// margin: 0 3px;
							// border-radius: 15px;
							// color: white;
							// font-weight: 700;
							// padding: 0px 9px;
							// font-style: oblique;

							.img {
								width: 76%;
								height: 20px;
							}
						}
					}

					.r {
						width: 49%;

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

			}
		}

	}

	// @media (max-width: 435px) {
	// 	.new_czbk {
	// 		.new-list {
	// 			.item {
	// 				width: 47%;
	// 			}
	// 		}
	// 	}
	// }

	// @media (max-width: 379px) {
	// 	.new_czbk {
	// 		.new-list {
	// 			.item {
	// 				width: 46%;
	// 			}
	// 		}
	// 	}
	// }
</style>