You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
cesuan/pages/jieri/jieri.vue

401 lines
8.1 KiB

<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>