vpUni/.svn/pristine/08/083f9211a78b26c622da0cb51b7135c91fa8d261.svn-base

<template>
	<view>
		<view :style="{'height':topHeight+'rpx'}"
			style="  position: fixed; top: 0; z-index: 2;  width: 100%; background-color: #fff; ">
			<view class="" :style="{'margin-top':top+'rpx','height':height+'rpx','line-height':height+'rpx'}"
				style=" margin-left: 40rpx;   display: flex; align-items: center;">
				<img :src="Service.GetIconImg('/static/index/index/location.png')" style="width: 40rpx;  height: 40rpx;"
					alt="" />
				<text style="margin-left: 15rpx; font-size: 26rpx; font-weight: 600; ">许昌市魏都区</text>
			</view>
			<!-- 内容 -->
			<view class="" style="margin: 40rpx 20rpx">
				<up-swiper imgMode='heightFix' :list="swiperList" height='140' @change="e => current = e.current"
					:autoplay="false">
					<template #indicator>
						<view class="indicator">
							<view class="indicator__dot" v-for="(item, index) in swiperList" :key="index"
								:class="[index === current && 'indicator__dot--active']">
							</view>
						</view>
					</template>
				</up-swiper>
			</view>

			<view class=""
				style=" display: flex; align-items: center; justify-content: space-around; margin: 20rpx 0; background-color: #fff; padding: 20rpx">
				<view v-for="(item, index) in tabList" @click="chooseTab(index)"
					style="display: flex; flex-direction: column; align-items: center; justify-content: center;"
					:key="index">
					<view class="" :class="{tabimgActive:index==tabCurrent,tabimg: index!=tabCurrent  }"
						style=" border-radius: 50%; display: flex; align-items: center; justify-content: center;  height: 80rpx; width: 80rpx; ">
						<img :src="Service.GetIconImg( index==tabCurrent? item.imged:item.img)"
							style="width: 45rpx; height: 45rpx; "></img>
					</view>
					<view :class="{tabActivefont:index==tabCurrent,tabfont:index!=tabCurrent}"
						style="font-size: 26rpx; margin-top: 15rpx;" class="">
						{{item.name}}
					</view>
				</view>
			</view>

			<view class=""
				style="display: grid; grid-template-columns: repeat(2,1fr); gap: 20rpx;  margin-top: 40rpx; background-color: #fff; padding: 20rpx;  ">
				<view class="">
					<image :src="Service.GetMateUrlByImg('/static/dele/dele1.jpg')"  mode="widthFix" style="width: 100%;" alt="" />
				</view>
				<view class="">
					<image :src="Service.GetMateUrlByImg('/static/dele/dele2.jpg')"  mode="widthFix" style="width: 100%;" alt="" />
				</view>
			</view>





		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import { onShow, onLoad } from '@dcloudio/uni-app';
	import { Service } from "@/Service/Service"

	// 导航栏
	let topHeight = ref()
	let height = ref()
	let top = ref()


	let current = ref(0)
	let swiperList = ref(
		[
			'/static/dele/dele1.jpg',
			'/static/dele/dele2.jpg'
		]
	)


	let tabCurrent = ref(0)
	let tabList = ref(
		[
			{
				name: '美食',
				img: '/static/index/index/food.png',
				imged: '/static/index/index/fooded.png'
			},
			{
				name: '饮品',
				img: '/static/index/index/cofe.png',
				imged: '/static/index/index/cofed.png'
			},
			{
				name: '超市',
				img: '/static/index/index/shop.png',
				imged: '/static/index/index/shoped.png'
			},
			{
				name: '美妆',
				img: '/static/index/index/good.png',
				imged: '/static/index/index/gooded.png'
			},
			{
				name: '医疗',
				img: '/static/index/index/medical.png',
				imged: '/static/index/index/medicaled.png'
			}
		]
	)



	onShow(() => {

	})
	onLoad(() => {
		let res = wx.getMenuButtonBoundingClientRect()
		topHeight.value = (res.top + res.height + 5) * 2
		height.value = res.height * 2
		top.value = res.top * 2
	})


	const chooseTab = (e) => {
		tabCurrent.value = e
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F5F5;
	}

	.indicator {
		@include flex(row);
		justify-content: center;

		&__dot {
			height: 6px;
			width: 6px;
			border-radius: 100px;
			background-color: rgba(255, 255, 255, 0.35);
			margin: 0 5px;
			transition: background-color 0.3s;

			&--active {
				background-color: #ffffff;
			}
		}
	}

	.tabimgActive {
		background-color: var(--nav-mian);
	}

	.tabimg {
		background-color: #F5F5F5;
	}


	.tabActivefont {
		color: var(--nav-mian);
	}

	.tabfont {
		color: #333333
	}

	.tag {
		display: flex;
		align-items: center;
		justify-content: center;
		width: fit-content;
		font-size: 24rpx;
		margin-left: 10rpx;
	}


	// 瀑布流
	.demo-warter {
		border-radius: 8px;
		margin: 5px;
		background-color: #ffffff;
		padding: 8px;
		position: relative;
	}

	.u-close {
		position: absolute;
		top: 32rpx;
		right: 32rpx;
	}

	.demo-image {
		width: 100%;
		border-radius: 4px;
	}

	.demo-title {
		font-size: 30rpx;
		margin-top: 5px;

	}

	.demo-tag {
		display: flex;
		margin-top: 5px;
	}

	.demo-tag-owner {

		color: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 4rpx 14rpx;
		border-radius: 50rpx;
		font-size: 20rpx;
		line-height: 1;
	}

	.demo-tag-text {


		margin-left: 10px;
		border-radius: 50rpx;
		line-height: 1;
		padding: 4rpx 14rpx;
		display: flex;
		align-items: center;
		border-radius: 50rpx;
		font-size: 20rpx;
	}

	.demo-price {
		font-size: 30rpx;

		margin-top: 5px;
	}

	.demo-shop {
		font-size: 22rpx;

		margin-top: 5px;
	}
</style>