MinNan/index_fenbao/jianzhu/jianzhu.vue

<template>
	<view class="body2">
		<u-navbar :autoBack="true" title="建筑文化" bgColor="rgba(255,255,255,0)" :placeholder="true" titleStyle="font-weight:bold;color:#121212"></u-navbar>
		<view class="jz_swiper">
			<u-swiper
				:list="list1"
				height="335rpx"
				:indicator="true"
				:autoplay="true"
				indicatorMode="dot"
				indicatorActiveColor="#fff"
				indicatorInactiveColor="rgba(255, 255, 255, 0.35)"
				:circular="true"
				indicatorStyle="bottom: 10px"
			></u-swiper>
		</view>
		<view class="" style="margin: 30rpx 0 0 0">
			<u-tabs
				:duration="200"
				:list="listTab"
				:lineWidth="25"
				:lineHeight="12"
				lineColor="#4E7198"
				:lineColor="`url(${tabImg}) 100% 100%`"
				:activeStyle="{
					color: '#4E7198',
					fontSize: '34rpx'
				}"
			></u-tabs>
		</view>
		<view class="banxin">
			<view style="margin-bottom: 30rpx" v-for="item in jianZhuList" :key="item">
				<view class="jz_item">
					<image style="width: 100%; height: 100%" :src="item.img"></image>
				</view>
				<view class="" style="display: flex; justify-content: space-between">
					<text>{{ item.title }}</text>
					<uni-icons style="margin-top: 5rpx" type="heart" size="20"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			tabImg: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/tab.png',
			list1: [
				'https://img1.baidu.com/it/u=3551075903,1493549593&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500',
				'https://img0.baidu.com/it/u=1667631211,245764236&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=357',
				'https://img1.baidu.com/it/u=2554021422,1871009309&fm=253&fmt=auto&app=138&f=JPEG?w=700&h=500'
			],
			listTab: [
				{
					name: '全部',
					tabid: 1
				},
				{
					name: '民居大厝',
					tabid: 2
				},
				{
					name: '宫殿建筑',
					tabid: 3
				},
				{
					name: '礼制性祭祀建筑',
					tabid: 4
				},
				{
					name: '百家争鸣',
					tabid: 5
				}
			],
			jianZhuList: [
				{
					img: 'https://img2.baidu.com/it/u=1282947730,847518852&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=390',

					title: '中国传统建筑文化——闽南地区的屋顶文化古建中国'
				},
				{
					img: 'https://img1.baidu.com/it/u=3045646735,3994404954&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=304',
					title: '雕梁画栋的闽南建筑,一砖一瓦都体现着古人对美的追求'
				}
			]
		};
	},
	methods: {}
};
</script>

<style>
.body2 {
	background-size: 100% 100%;
	background-attachment: fixed;
	background-repeat: repeat-y;
	background-color: #efefef;
	padding-bottom: 50rpx;
}
/deep/.u-swiper-indicator__wrapper__dot--active {
	width: 5px !important;
}
/deep/.u-tabs__wrapper__nav__item.data-v-48634e29 {
	padding: 0 40rpx !important;
}
/deep/.u-tabs__wrapper__nav__line.data-v-48634e29 {
	bottom: 16rpx !important;
}
/deep/.u-tabs__wrapper__nav__item.data-v-48634e29 {
	align-items: end !important;
}
.banxin {
	margin: 0 32rpx 0 32rpx;
}
.jz_swiper {
}
.jz_item {
	width: 686rpx;
	height: 345rpx;
	border-radius: 26rpx 26rpx 0rpx 0rpx;
}
</style>