<template>
	<view class="page">
		<navbar-line :bgColor="bgColor" :hasPlacer="false">
			<view class="header-loc  align-center" @tap="chooseLoc">
				<image src="/static/mang-loc.png" class="image_19" mode="aspectFill" />
				<text class="text_43">沂蒙云谷·创意孵化中心</text>
			</view>
		</navbar-line>
		<view class="p-header"><image src="/static/mang-bg.png" mode="aspectFill" class="img"></image></view>
		<view class="align-center p-ads">
			<image src="/static/mang-sear.png" class="image_20" mode="aspectFill" />

			<view class="group_20"><zetank-notice colors="#55aaff" :noticeList="ads" :interval="3000"></zetank-notice></view>
		</view>
		<view class="p-entry">
			<view class="flex-col items-center grid-item">
				<image
					src="/static/mang-dianxin.png"
					class="image"
				/>
				<text class="text">点心</text>
			</view>
			<view class="flex-col items-center grid-item">
				<image
					src="/static/mang-dangao.png"
					class="image"
				/>
				<text class="text">蛋糕</text>
			</view>
			<view class="flex-col items-center grid-item">
				<image
					src="/static/mang-buding.png"
					class="image"
				/>
				<text class="text">布丁</text>
			</view>
			<view class="flex-col items-center grid-item">
				<image
					src="/static/mang-pdangao.png"
					class="image"
				/>
				<text class="text">纸杯蛋糕</text>
			</view>
			<view class="flex-col items-center grid-item">
				<image
					src="/static/mang-pisa.png"
					class="image"
				/>
				<text class="text">披萨</text>
			</view>
			<view class="flex-col items-center grid-item">
				<image
					src="/static/mang-tusi.png"
					class="image"
				/>
				<text class="text">吐司</text>
			</view>
			<view class="flex-col items-center grid-item">
				<image
					src="/static/mang-all.png"
					class="image"
				/>
				<text class="text">全部</text>
			</view>
		</view>
	
	    <view class="p-tabs align-center justify-between">
			  <view class="flex-col text-wrapper">
				   <image
					  src="/static/mang-tabbg.png"
					  class="image_8"
				   />
				  <text class="text_9">智能排序</text>
			  </view>
			  <view class="flex-col text-wrapper active">
				  <image
					  src="/static/mang-tabbg.png"
					  class="image_8"
				  />
				  <text class="text_9">距离最近</text>
			  </view>
			  <view class="flex-col text-wrapper">
				  <image
					  src="/static/mang-tabbg.png"
					  class="image_8"
				  />
				  <text class="text_9">评分最高</text>
			 </view>
		</view>
		
		<view class="p-list">
			<view class="flex-row section_2 view_6" v-for="(item,idx) in 3" :key="idx" @tap="navTo('/pages/mang/detail')">
			  <image
			    src="/static/temp/pro.png"
			    class="group_11"
				mode="aspectFill"
			  />
			  <view class="flex-col text_21 view_7">
			    <text class="text_25 clamp">稻香村糕点随机盲盒</text>
				<view class="stars align-center">
					 <image
					  src="/static/mang_star.png"
					  class="image_14"
					  v-for="(item,idx) in 3"
					  :key="idx"
					/>	
				</view>
			    <text class="text_26">随机搭配</text>
			    <view class="flex-row group_16">
			      <view class="group_17">
			        <text class="text_27">￥</text>
			        <text class="text_28">38.8</text>
			      </view>
			      <text class="text_29">￥44~68</text>
			    </view>
			  </view>
			  <text class="text_30">898m</text>
			  <view class="flex-col text-wrapper_2"><text class="text_23 text_31 clamp">仅剩3份</text></view>
			</view>
		</view>
		
	
	</view>
</template>

<script>
import navbarLine from '@/components/navbar-line.vue';
import zetankNotice from './components/zetank-notice.vue';
export default {
	components: {
		navbarLine,
		zetankNotice
	},
	data() {
		return {
			ads: [{ title: '1已帮助减少2486g数量的食品浪费' }, { title: '2已帮助减少2486g数量的食品浪费' }],
			bgColor:'transparent',
		};
	},
	onPageScroll(e) {
		// console.log('---',e);
		let scrollTop = e.scrollTop;
		if(scrollTop > this.CustomBar - 10){
			this.bgColor = "#ffffff";
		}else{
			this.bgColor = "transparent";
		}
	},
	methods:{
		async chooseLoc(){
			this.navTo('/pages/address/address')
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #F7FEFA;
}
.header-loc {
	position: absolute;
	width: 100%;
	padding: 0 30rpx;
	top: 50%;
	transform: translateY(-50%);
	.image_19 {
		width: 26rpx;
		height: 28rpx;
	}
	.text_43 {
		margin-left: 12rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: PingFang;
		letter-spacing: 1.12rpx;
	}
}
.p-header {
	.img {
		width: 750rpx;
		height: 532rpx;
	}
}
.p-ads {
	margin: -32rpx auto 0;
	width: 690rpx;
	height: 72rpx;
	padding: 0 22rpx;
	background-image: url('/static/mang-ads.png');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	position: relative;
	z-index: 2;
	.image_20 {
		width: 35rpx;
		height: 35rpx;
	}
	.group_20 {
		width: 100%;
	}
}
.p-entry {
	width: 690rpx;
	background: #FFFFFF;
	box-shadow: 0rpx 6rpx 10rpx 0rpx rgba(42,42,42,0.08);
	
	margin: 30rpx auto 0;
	padding: 9.5rpx 12rpx 20.5rpx;
	background-color: #ffffff;
	box-shadow: 0px 6rpx 10rpx #2a2a2a14;
	border-radius: 20rpx;
	height: 350rpx;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	.grid-item {
		padding: 17rpx 4rpx;
	}
	.image {
		width: 96rpx;
		height: 96rpx;
	}
	.text {
		margin-top: 7rpx;
		color: #333333;
		font-size: 24rpx;
		font-family: PingFang;
		line-height: 23rpx;
		letter-spacing: 1.44rpx;
	}
}
.p-tabs{
	margin-left: 30rpx;
	width: 530rpx;
	.text-wrapper {
		height: 85rpx;
		position: relative;
		&.active{
			.image_8{
				display: block;
			}
			.text_9{
			  color: #333333;
			}
		}
	  .image_8{
		  width: 36rpx;
		  height: 36rpx;
		  display: none;
		  position: absolute;
		  z-index: 2;
		  right: -14rpx;
		  top:40%;
		  transform: translateY(-50%);
	  }
		.text_9 {
		  color: #999999;
		  font-size: 30rpx;
		  font-family: PingFang;
		  letter-spacing: 1.2rpx;
		  line-height: 85rpx;
		}	  
	}

}
.p-list{
	.section_2 {
	  width: 690rpx;
	  margin:0 auto 24rpx;
	  padding: 24rpx 14rpx 24rpx 24rpx;
	  background-color: #ffffff;
	  box-shadow: 0px 6rpx 10rpx #2a2a2a14;
	  border-radius: 20rpx;
	  position: relative;
	  .text-wrapper_2 {
	    padding: 8rpx 0 16rpx;
	    background-image: url('/static/mang-listbg.png');
	    background-size: 100% 100%;
	    background-repeat: no-repeat;
	    position: absolute;
	    right: -10rpx;
	    top: 26rpx;
		width: 120rpx;
	  }
	  .text_23 {
	    margin-left: 12rpx;
	    margin-right: 6rpx;
	    color: #ffffff;
	    font-size: 24rpx;
	    font-family: PingFang;
		max-width: 120rpx;
	  }
	  // .text_31 {
	  //   margin-left: 12rpx;
	  //   margin-right: 6rpx;
	  // }
	}
	.view_6 {
	  padding: 24rpx 18rpx 24rpx 24rpx;
	}
	.group_11 {
	  flex-shrink: 0;
	  width: 200rpx;
	  height: 200rpx;
	  border-radius: 20rpx;
	}
	.text_21 {
	  margin-top: 100rpx;
	  color: #999999;
	  font-size: 24rpx;
	  font-family: PingFang;
	  line-height: 18rpx;
	}
	.view_7 {
	  margin-top: initial;
	  color: initial;
	  font-size: initial;
	  font-family: initial;
	  line-height: initial;
	  margin-left: 19rpx;
	  flex: 1 1 auto;
	  align-self: center;
	}
	.text_25 {
	  color: #333333;
	  font-size: 30rpx;
	  font-family: PingFang;
	  max-width: 360rpx;
	}
	.stars{
		 margin-top: 12rpx;
		.image_14 {
		  width: 28rpx;
		  height: 28rpx;
		  margin-right: 4rpx;
		}
	}
	
	.text_26 {
	  margin-top: 20rpx;
	  align-self: flex-start;
	  color: #999999;
	  font-size: 24rpx;
	  font-family: PingFang;
	  line-height: 23rpx;
	}
	.group_16 {
	  margin-top: 37rpx;
	  padding: 0 2rpx;
	}
	.group_17 {
	  line-height: 28rpx;
	  height: 29rpx;
	}
	.text_27 {
	  color: #ff3e3e;
	  font-size: 24rpx;
	  font-family: PingFang;
	  line-height: 19rpx;
	}
	.text_28 {
	  color: #ff3e3e;
	  font-size: 36rpx;
	  font-family: PingFang;
	  line-height: 28rpx;
	}
	.text_29 {
	  margin-left: 10rpx;
	  margin-top: 9rpx;
	  color: #999999;
	  font-size: 24rpx;
	  font-family: PingFang;
	  line-height: 20rpx;
	  text-decoration: line-through;
	}
	.text_30 {
	  z-index: 2;
	  position: absolute;
	  top: 130rpx;
	  right: 20rpx;
	  color: #999999;
	  font-size: 24rpx;
	  font-family: PingFang;
	}
}
</style>
