<template>
	<view class="page">
	  <view class="box_1">
	    <view class="box_2">
		  <view class="nav-bar_1">
		  	<view @click="goback" class="arr-right">&lt;&lt;&lt;</view>
		  	<view class="arr-left">节日禁忌</view>
		  </view>
	    </view>
	    <view class="box_4">
	      <view class="image-wrapper_1">
	        <img @click="jumpdetail(0)" src="../../static/jieri/1.png" class="image_3-0"/>
	        <img @click="jumpdetail(1)" src="../../static/jieri/2.png" class="image_3-1"/>
			<img @click="jumpdetail(2)" src="../../static/jieri/3.png" class="image_3-2"/>
	        <img @click="jumpdetail(3)" src="../../static/jieri/4.png" class="image_3-3"/>
	        <img @click="jumpdetail(4)" src="../../static/jieri/5.png" class="image_3-4"/>
	        <img @click="jumpdetail(5)" src="../../static/jieri/6.png" class="image_3-5"/>
	        <img @click="jumpdetail(6)" src="../../static/jieri/7.png" class="image_3-6"/>
	        <img @click="jumpdetail(7)" src="../../static/jieri/8.png" class="image_3-7"/>
	        <img @click="jumpdetail(8)" src="../../static/jieri/9.png" class="image_3-8"/>
	        <img @click="jumpdetail(9)" src="../../static/jieri/10.png" class="image_3-9"/>
	        <img @click="jumpdetail(10)" src="../../static/jieri/11.png" class="image_3-10"/>
	        <img @click="jumpdetail(11)" src="../../static/jieri/12.png" class="image_3-11"/>
	        <img @click="jumpdetail(12)" src="../../static/jieri/13.png" class="image_3-12"/>
	        <img @click="jumpdetail(13)" src="../../static/jieri/14.png" class="image_3-13"/>
	        <img @click="jumpdetail(14)" src="../../static/jieri/15.png" class="image_3-14"/>
	        <img @click="jumpdetail(15)" src="../../static/jieri/16.png" class="image_3-15"/>
	        <img @click="jumpdetail(16)" src="../../static/jieri/17.png" class="image_3-16"/>
	        <img @click="jumpdetail(18)" src="../../static/jieri/18.png" class="image_3-17"/>
	      </view>
	    </view>
	    <tabBar class="tab-bar_1" currenttype="2" displaytype="1">
	    </tabBar>
	  </view>
	</view>
</template>

<script>
	import tabBar  from '@/components/tabbar'
	export default {
			components: {
			  tabBar
			},
		data() {
			return {
				
			}
		},
		methods: {
			goback()
			{
				this.$navTo('pages/yingyong/yingyong')
			},
			jumpdetail(pageid)
			{
				if(pageid==18)
				{
					this.$navTo('pages/24jieqi/24jieqi');
				}
				else
				{
					this.$navTo('pages/jieridetail/jieridetail',{index:pageid});
				}
				
			}
		}
	}
</script>

<style>
.page {
  background-color: rgba(255,255,255,1.000000);
  position: relative;
  width: 750rpx;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.nav-bar_1
{
	height: unset;
	width: 600rpx;
	background-color: rgba(250,250,250,0.7);
	border-radius: 20rpx;
	font-size: 32rpx;
	margin-top: 40rpx;
}
.nav-bar_1 .arr-right
{
	height: 60rpx;
	line-height: 60rpx
}

.nav-bar_1 .arr-left
{
	height: 60rpx;
	line-height: 60rpx
}

.box_1 {
  width: 750rpx;
  margin-top: 1rpx;
  display: flex;
  flex-direction: column;
}
.box_2 {
  width: 750rpx;
  display: flex;
  flex-direction: column;
  position: fixed;
  top:0;
}
.group_1 {
  width: 651rpx;
  height: 22rpx;
  flex-direction: row;
  display: flex;
  margin: 43rpx 0 0 70rpx;
}
.text_1 {
  width: 56rpx;
  height: 19rpx;
  overflow-wrap: break-word;
  color: rgba(0,0,0,1);
  font-size: 28rpx;
  font-family: SFProText-Semibold;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  line-height: 28rpx;
  margin-top: 1rpx;
}
.image_1 {
  width: 32rpx;
  height: 20rpx;
  margin: 1rpx 0 0 475rpx;
}
.image_2 {
  width: 29rpx;
  height: 20rpx;
  margin-left: 9rpx;
}
.box_3 {
  height: 22rpx;
  margin-left: 9rpx;
  display: flex;
  flex-direction: column;
  width: 41rpx;
}
.group_2 {
  background-color: rgba(0,0,0,1.000000);
  border-radius: 2rpx;
  width: 34rpx;
  height: 14rpx;
  display: flex;
  flex-direction: column;
  margin: 4rpx 0 0 4rpx;
}

.text_2 {
  width: 358rpx;
  height: 39rpx;
  overflow-wrap: break-word;
  color: rgba(230,0,18,1);
  font-size: 40rpx;
  font-family: FZQKBYSJW--GB1-0;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 40rpx;
  margin: 32rpx 0 0 81rpx;
}
.box_4 {
  height: 100vh;
  background: url(../../static/jieri/bg.png) 100% no-repeat;
  background-size: 100% 110%;
  background-position:0 -10px;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-top: 30rpx;
  overflow-y: scroll;
}
.image-wrapper_1 {
  width: 549rpx;
  padding-bottom: 200rpx;
  flex-wrap: wrap;
  display: flex;
  flex-direction: row;
  margin: 142rpx auto 0 auto;
}
.image_3-0 {
  width: 131rpx;
  height: 127rpx;
  margin: 0 76rpx 71rpx 0;
}
.image_3-1 {
  width: 131rpx;
  height: 127rpx;
  margin: 0 76rpx 71rpx 0;
}
.image_3-2 {
  width: 131rpx;
  height: 127rpx;
  margin: 0 76rpx 71rpx 0;
  margin-right: 0rpx;
}
.image_3-3 {
  width: 131rpx;
  height: 127rpx;
  margin: 0 76rpx 71rpx 0;
}
.image_3-4 {
  width: 131rpx;
  height: 127rpx;
  margin: 0 76rpx 71rpx 0;
}
.image_3-5 {
  width: 131rpx;
  height: 127rpx;
  margin: 0 76rpx 71rpx 0;
  margin-right: 0rpx;
}
.image_3-6 {
  width: 131rpx;
  height: 127rpx;
  margin: 0 76rpx 71rpx 0;
}
.image_3-7 {
  width: 131rpx;
  height: 127rpx;
  margin: 0 76rpx 71rpx 0;
}
.image_3-8 {
  width: 131rpx;
  height: 127rpx;
  margin: 0 76rpx 71rpx 0;
  margin-right: 0rpx;
}
.image_3-9 {
  width: 131rpx;
  height: 127rpx;
  margin: 0 76rpx 71rpx 0;
}
.image_3-10 {
  width: 131rpx;
  height: 127rpx;
  margin: 0 76rpx 71rpx 0;
}
.image_3-11 {
  width: 131rpx;
  height: 127rpx;
  margin: 0 76rpx 71rpx 0;
  margin-right: 0rpx;
}
.image_3-12 {
  width: 131rpx;
  height: 127rpx;
  margin: 0 76rpx 71rpx 0;
}
.image_3-13 {
  width: 131rpx;
  height: 127rpx;
  margin: 0 76rpx 71rpx 0;
}
.image_3-14 {
  width: 131rpx;
  height: 127rpx;
  margin: 0 76rpx 71rpx 0;
  margin-right: 0rpx;
}
.image_3-15 {
  width: 131rpx;
  height: 127rpx;
  margin: 0 76rpx 71rpx 0;
  margin-bottom: 0rpx;
}
.image_3-16 {
  width: 131rpx;
  height: 127rpx;
  margin: 0 76rpx 71rpx 0;
  margin-bottom: 0rpx;
}
.image_3-17 {
  width: 131rpx;
  height: 127rpx;
  margin: 0 76rpx 71rpx 0;
  margin-right: 0rpx;
  margin-bottom: 0rpx;
}
.tab-bar_1 {
  width: 750rpx;
  height: 125rpx;
  background: url(../../static/jieri/itembg.png) -7rpx 0rpx no-repeat;
  background-size: 764rpx 145rpx;
  margin-top: 24rpx;
  flex-direction: row;
  display: flex;
}
.tab-bar-item_1 {
  width: 40rpx;
  height: 68rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 38rpx 0 0 78rpx;
}
.icon_1 {
  width: 40rpx;
  height: 39rpx;
}
.text_3 {
  width: 38rpx;
  height: 19rpx;
  overflow-wrap: break-word;
  color: rgba(121,121,121,1);
  font-size: 20rpx;
  font-family: FZLTKHK--GBK1-0;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 20rpx;
  margin-top: 10rpx;
}
.tab-bar-item_2 {
  width: 41rpx;
  height: 67rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 38rpx 0 0 143rpx;
}
.icon_2 {
  width: 41rpx;
  height: 39rpx;
}
.text_4 {
  width: 37rpx;
  height: 19rpx;
  overflow-wrap: break-word;
  color: rgba(121,121,121,1);
  font-size: 20rpx;
  font-family: FZLTKHK--GBK1-0;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 20rpx;
  margin-top: 9rpx;
}
.tab-bar-item_3 {
  width: 39rpx;
  height: 67rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 38rpx 0 0 155rpx;
}
.icon_3 {
  width: 39rpx;
  height: 40rpx;
}
.text_5 {
  width: 36rpx;
  height: 19rpx;
  overflow-wrap: break-word;
  color: rgba(230,0,18,1);
  font-size: 20rpx;
  font-family: FZLTKHK--GBK1-0;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 20rpx;
  margin: 8rpx 0 0 1rpx;
}
.tab-bar-item_4 {
  width: 39rpx;
  height: 66rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 39rpx 74rpx 0 141rpx;
}
.icon_4 {
  width: 38rpx;
  height: 39rpx;
}
.text_6 {
  width: 38rpx;
  height: 19rpx;
  overflow-wrap: break-word;
  color: rgba(121,121,121,1);
  font-size: 20rpx;
  font-family: FZLTKHK--GBK1-0;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 20rpx;
  margin: 8rpx 0 0 1rpx;
}
</style>
