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">
			<view style="width: 1700rpx; height: 1400rpx; position: absolute; left: -61%; top: -140%">
				<image style="width: 100%; height: 100%" src="https://huli-app.wenlvti.net/app_static/minnanhun/image/map3.jpg"></image>
			</view>
		</view>
		<view class="tit">建筑文化</view>
		<view class="jj_box">
			<view class="jj_left">
				<view class="jj_bg">建筑文化简介</view>
				<view class="jj_left_js">
					闽南建筑风格独特。闽南建筑风格以红墙、红瓦、燕尾脊为特征，给人以鲜明、热烈的视觉感受。建筑中大量使用装饰性构件，如砖雕、石雕、木雕等，这些雕刻工艺精湛，图案丰富，具有很高的艺术价值。同时，建筑内部的布局和装饰也充满了闽南文化的特色，如“出砖入石”的墙体、精细的石雕和木雕、富有地方特色的彩绘等。
					闽南建筑融合了多元文化。闽南地区历史上是中原移民的重要聚居地，同时又与东南亚地区交往密切，因此闽南建筑文化中融合了中原文化、东南亚文化等多元文化因素。例如，闽南建筑的屋顶形式、装饰风格等受到中原文化的影响；而建筑中的雕刻艺术、建筑材料等则体现了东南亚文化的特色。这种多元文化的融合使得闽南建筑具有更加丰富的文化内涵
					通过了解这些闽南建筑文物的特点，人们能够更好地认识和了解闽南文化。同时，这些文物也是传承和弘扬闽南文化的重要载体。在今天的社会中，随着城市化进程的加速和传统文化的逐渐消失，保护和传承这些宝贵的文化遗产显得尤为重要。
				</view>
			</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 class="tit">文物统计</view>
		<view class="bt_box">
			<view style="position: absolute; left: 80rpx; top: 10rpx; color: #873b3f">厦门</view>
			<view style="position: absolute; left: 312rpx; top: 8rpx; color: #873b3f">漳州</view>
			<view style="position: absolute; left: 540rpx; top: 10rpx; color: #873b3f">泉州</view>
			<!-- 图例 -->
			<view class="" style="position: absolute; top: 312rpx">
				<view style="display: flex; width: 320rpx; justify-content: space-around">
					<view style="display: flex; align-items: center">
						<view style="width: 20rpx; height: 20rpx; border-radius: 50%; background-color: #ee6666"></view>
						<view style="font-size: 24rpx; color: #873b3f">国家级</view>
					</view>
					<view style="display: flex; align-items: center">
						<view style="width: 20rpx; height: 20rpx; border-radius: 50%; background-color: #fac858"></view>
						<view style="font-size: 24rpx; color: #873b3f">省级</view>
					</view>
					<view style="display: flex; align-items: center">
						<view style="width: 20rpx; height: 20rpx; border-radius: 50%; background-color: #873b3f"></view>
						<view style="font-size: 24rpx; color: #873b3f">市级</view>
					</view>
				</view>
				<view style="display: flex; width: 320rpx; justify-content: space-around">
					<view style="display: flex; align-items: center">
						<view style="width: 20rpx; height: 20rpx; border-radius: 50%; background-color: #91cb74"></view>
						<view style="font-size: 24rpx; color: #873b3f">县级</view>
					</view>
					<view style="display: flex; align-items: center">
						<view style="width: 20rpx; height: 20rpx; border-radius: 50%; background-color: #73c0de"></view>
						<view style="font-size: 24rpx; color: #873b3f">区级</view>
					</view>
				</view>
			</view>
			<view class="charts-box1">
				<view style="position: absolute; color: #ffffff; font-size: 18rpx; left: 80rpx; top: 30rpx; z-index: 9">12.41%</view>
				<view style="position: absolute; color: #ffffff; font-size: 18rpx; left: 135rpx; top: 70rpx; z-index: 9">19.15%</view>
				<view style="position: absolute; color: #ffffff; font-size: 18rpx; left: 135rpx; top: 135rpx; z-index: 9">17.02%</view>
				<view style="position: absolute; color: #ffffff; font-size: 18rpx; left: 72rpx; top: 160rpx; z-index: 9">20.21%</view>
				<view style="position: absolute; color: #ffffff; font-size: 18rpx; left: 50rpx; top: 100rpx; z-index: 9">21%</view>
				<qiun-data-charts type="pie" :opts="opts" :chartData="chartData" />
			</view>
			<view class="charts-box">
				<view style="position: absolute; color: #ffffff; font-size: 18rpx; left: 30rpx; top: 110rpx; z-index: 9">34.42%</view>
				<view style="position: absolute; color: #ffffff; font-size: 18rpx; left: 170rpx; top: 116rpx; z-index: 9">2.29%</view>
				<view style="position: absolute; color: #ffffff; font-size: 18rpx; left: 150rpx; top: 150rpx; z-index: 9">12.29%</view>
				<qiun-data-charts type="pie" :opts="opts2" :chartData="chartData2" />
			</view>
			<view class="charts-box1">
				<view style="position: absolute; color: #ffffff; font-size: 18rpx; left: 30rpx; top: 110rpx; z-index: 9">34.27%</view>
				<view style="position: absolute; color: #ffffff; font-size: 18rpx; left: 150rpx; top: 110rpx; z-index: 9">4.68%</view>
				<view style="position: absolute; color: #ffffff; font-size: 18rpx; left: 136rpx; top: 140rpx; z-index: 9">11.05%</view>
				<qiun-data-charts type="pie" :opts="opts3" :chartData="chartData3" />
			</view>
		</view>
		<view class="tit">文物推荐</view>
		<view class="btm_box" @click="recommendBtn">
			<image style="width: 100%; height: 100%" src="https://huli-app.wenlvti.net/app_static/minnanhun/image/tv5.jpg"></image>
		</view>
		<view class="btm_box" @click="recommendBtn">
			<image style="width: 100%; height: 100%" src="https://huli-app.wenlvti.net/app_static/minnanhun/image/tv8.jpg"></image>
		</view>
	</view>
</template>

<script>
let that;
export default {
	data() {
		return {
			isLoading: false, // 节流阀 默认为关闭状态
			main_body_id: '',
			model_id: '',
			chartData: {
				series: [
					{
						data: [
							{ name: '国家级', value: 48 },
							{ name: '省级', value: 57 },
							{ name: '市级', value: 88 },
							{ name: '县级', value: 35 },
							{ name: '区级', value: 54 }
							// { name: '未定级', value: 1743 }
						],
						textOffset: 50
					}
				]
			},
			opts: {
				color: ['#EE6666', '#fac858', '#873b3f', '#91CB74', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
				padding: [0, 0, 0, 0],
				enableScroll: false,
				fontSize: 8, // 字体大小
				fontColor: '#1890FF',
				dataLabel: false,
				legend: {
					show: false
				},

				extra: {
					pie: {
						activeOpacity: 0.5,
						activeRadius: 8,
						offsetAngle: 0,
						labelWidth: 2,
						border: false,
						borderWidth: 3,
						borderColor: '#FFFFFF'
					}
				}
			},
			// 漳州图
			chartData2: {
				series: [
					{
						data: [
							{ name: '国家级', value: 26 },
							{ name: '省级', value: 151 },
							{ name: '市区县级', value: 959 }
						]
					}
				]
			},
			opts2: {
				color: ['#EE6666', '#fac858', '#873b3f', '#91CB74', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
				padding: [0, 0, 0, 0],
				enableScroll: false,
				fontSize: 8, // 字体大小
				fontColor: '#1890FF',
				dataLabel: false,
				legend: {
					show: false
				},

				extra: {
					pie: {
						activeOpacity: 0.5,
						activeRadius: 8,
						offsetAngle: 0,
						labelWidth: 2,
						border: false,
						borderWidth: 3,
						borderColor: '#FFFFFF'
					}
				}
			},
			// 泉州图
			chartData3: {
				series: [
					{
						data: [
							{ name: '国家级', value: 44 },
							{ name: '省级', value: 104 },
							{ name: '市区县级', value: 793 }
						]
					}
				]
			},
			opts3: {
				color: ['#EE6666', '#fac858', '#873b3f', '#91CB74', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
				padding: [0, 0, 0, 0],
				enableScroll: false,
				fontSize: 8, // 字体大小
				fontColor: '#1890FF',
				dataLabel: false,
				legend: {
					show: false
				},

				extra: {
					pie: {
						activeOpacity: 0.5,
						activeRadius: 8,
						offsetAngle: 0,
						labelWidth: 2,
						border: false,
						borderWidth: 3,
						borderColor: '#FFFFFF'
					}
				}
			},
			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() {
		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
			});
		},
		// 文物推荐
		recommendBtn() {
			uni.navigateTo({
				url: '/index_fenbao/jianzhu/jianzhu?id=' + 21
			});
		}
	}
};
</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: 80rpx;
	margin-bottom: 20rpx;
	font-size: 28rpx;
	color: #f1e8d7;
	background-image: url('/static/image/jz_bg.png');
	background-size: 100% 100%;
}
.map_box {
	width: 700rpx;
	height: 400rpx;
	border: #873b3f 8rpx solid;
	margin: auto;
	position: relative;
	overflow: hidden;
}
.jj_box {
	width: 700rpx;
	display: flex;
	text-indent: 2em;
	line-height: 40rpx;
	font-size: 28rpx;
	color: aliceblue;
	margin-left: 26rpx;
}
.jj_left {
	width: 50%;
	height: 500rpx;
	background-image: url('https://huli-app.wenlvti.net/app_static/minnanhun/image/jz_titbg.png');
	background-size: 100% 100%;
	background-color: #873b3f;
}
.jj_left_js {
	width: 270rpx;
	height: 360rpx;
	margin: auto;
	margin-top: 10rpx;
	border-radius: 10rpx;
	overflow: scroll;
	background-color: rgba(255, 255, 255, 0.3);
}
.jj_bg {
	width: 300rpx;
	height: 70rpx;
	line-height: 72rpx;
	padding-left: 20rpx;
	color: #8e3e3d;
	font-size: 28rpx;
	margin: auto;
	margin-top: 20rpx;

	background-image: url('/static/image/jz_tit.png');
	background-size: 100% 100%;
}
.jj_right {
	width: 50%;
	height: 100%;
	margin-left: 20rpx;
}
.right_top {
	display: flex;
	width: 350rpx;
	height: 240rpx;
	border: #873b3f 4rpx solid;
}
.right_btm {
	display: flex;
	width: 350rpx;
	height: 240rpx;
	margin-top: 20rpx;
	border: #873b3f 4rpx solid;
}

.btm_box {
	width: 90%;
	height: 340rpx;
	margin: auto;
	margin-top: 20rpx;
	border: #873b3f 4rpx solid;
}
.charts-box {
	position: relative;
	width: 240rpx;
	height: 240rpx;
}
.charts-box1 {
	position: relative;
	width: 220rpx;
	height: 220rpx;
}
.csbt {
	position: absolute;
	bottom: -4%;
	left: 40%;
	font-size: 12px;
}
.bt_box {
	position: relative;
	width: 90%;
	height: 400rpx;
	padding-top: 55rpx;
	margin: auto;
	display: flex;
	justify-content: space-around;
	border: #873b3f 8rpx solid;
}
</style>