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" v-for="(item , index) in 4" :key="index">
				<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/0790eb9a90d70762e7663d2bf3d04d7427947b535dda1e98712e08d1628b52a0.png"
								class="img" />
						</view>
					</view>
					<view class="r">
						<image
							src="https://zysc.fjptzykj.com:3000/shangcheng/034b7091b1194d9c2853d7c17a0c1e59f0c6cdfebfcf8f7a732002e2784ead35.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 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: 92%;
		background: rgba(255, 229, 227);
		border-radius: 20px;
		margin: 0 auto;
		padding: 20px 10px;
		margin-top: 10px;

		.t {
			display: flex;
			align-items: center;

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

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

		.new-list {
			width: 100%;
			margin-top: 20px;

			.item {
				float: left;
				width: 47.5%;
				padding: 5px;

				.nei {
					background: white;
					border-radius: 10px;
					padding: 15px 10px;
					display: flex;

					.l {
						width: 51%;

						.t {}

						.c {
							color: rgba(153, 153, 153);
							font-size: 13px;
							margin: 10px 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: 20px;
								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>