MinNan/index_fenbao/jianzhu/jianZhu_index.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="tit">建筑地图</view>
		<view class="map_box" @click="navMap">
			<image style="width: 100%; height: 100%" src="https://huli-app.wenlvti.net/app_static/minnanhun/image/map2.jpg"></image>
		</view>
		<view class="tit">建筑简介</view>
		<view class="jj_box">
			<view class="jj_left">
				闽南建筑风格独特。闽南建筑风格以红墙、红瓦、燕尾脊为特征，给人以鲜明、热烈的视觉感受。建筑中大量使用装饰性构件，如砖雕、石雕、木雕等，这些雕刻工艺精湛，图案丰富，具有很高的艺术价值。同时，建筑内部的布局和装饰也充满了闽南文化的特色，如“出砖入石”的墙体、精细的石雕和木雕、富有地方特色的彩绘等。
			</view>
			<view class="jj_right">
				<view class="right_top">
					<image style="width: 100%; height: 100%" src="https://huli-app.wenlvti.net/app_static/minnanhun/image/tv5.jpg"></image>
				</view>
				<view class="right_btm"><image style="width: 100%; height: 100%" src="https://huli-app.wenlvti.net/app_static/minnanhun/image/tv7.jpg"></image></view>
			</view>
		</view>
	</view>
</template>

<script>
let that;
export default {
	data() {
		return {
			isLoading: false, // 节流阀 默认为关闭状态
			main_body_id: '',
			model_id: '',

			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'
			]
		};
	},
	onLoad(o) {
		that = this;
		this.main_body_id = this.$db.get('main_body_id');
	},

	methods: {
		navMap() {
			uni.navigateTo({
				url: '/index_fenbao/jianzhu/map_page'
			});
		},

		// 建筑详情
		buildBtn(i) {
			uni.navigateTo({
				url: this.jianZhuList[i].page
			});
		}
	}
};
</script>

<style>
.body2 {
	background-size: 100% 100%;
	background-attachment: fixed;
	background-repeat: repeat-y;
	background-color: #f8eddf;
	padding-bottom: 50rpx;
}
/deep/.u-swiper-indicator__wrapper__dot--active {
	width: 5px !important;
}

.jz_item {
	width: 686rpx;
	height: 345rpx;
	border-radius: 26rpx 26rpx 0rpx 0rpx;
}
.tit {
	width: 300rpx;
	height: 60rpx;
	margin: auto;
	text-align: center;
	line-height: 60rpx;
	margin-top: 20rpx;
	margin-bottom: 20rpx;
	font-size: 28rpx;
	color: #f8eddf;
	background-image: url('/static/image/jz_bg.png');
	background-size: 100% 100%;
}
.map_box {
	width: 700rpx;
	height: 400rpx;
	border: #873b3f 8rpx solid;
	margin: auto;
}
.jj_box {
	width: 700rpx;
	height: 600rpx;
	display: flex;
	text-indent: 2em;
	line-height: 40rpx;
	font-size: 28rpx;
	color: aliceblue;
	margin-left: 26rpx;
}
.jj_left {
	width: 50%;
	background-color: #873b3f;
}
.jj_right {
	width: 50%;
	height: 100%;
	margin-left: 20rpx;
}
.right_top {
	display: flex;
	width: 350rpx;
	height: 290rpx;
	background-color: #873b3f;
}
.right_btm {
	display: flex;
	width: 350rpx;
	height: 290rpx;
	margin-top: 20rpx;
	background-color: #873b3f;
}
</style>