移除冗余数据和注释，优化组件结构，更新样式以提升页面布局和用户体验

components/commonItems/commonItems.vue

@@ -31,25 +31,7 @@ export default {
 	},
 	data() {
 		return {
-			// 闽南精神
-			MnList: [
-				{
-					title: '人物名称',
-					img: '/static/img/card_民俗宗教.png'
-				},
-				{
-					title: '人物名称',
-					img: '/static/img/card_民俗宗教.png'
-				},
-				{
-					title: '人物名称',
-					img: '/static/img/card_民俗宗教.png'
-				},
-				{
-					title: '人物名称',
-					img: '/static/img/card_民俗宗教.png'
-				}
-			]
+			
 		};
 	},
 	onLoad() {

pages/index/index.vue

@@ -1,7 +1,7 @@
 <template>
 	<view class="box">
 		<!-- 绑定按钮 -->
-		 <view class="bindBtn" @click="bindBtn" tabindex="0"></view>
+		 <view class="bindBtn" @click="bindBtn"></view>
 		<!-- tab切换 -->
 		<view class="tabBox" v-if="isBind">
 			<view class="tabItem" :class="{'activeTab' : activeTab == 0}" @click="tabClick('0')" style="margin-right: 20px;" tabindex="0">
@@ -87,7 +87,7 @@
       </view>
     </uni-popup>
 
-		<view class="logout" @click="logout" tabindex="0"></view>
+		<view class="logout" @click="logout"></view>
 	</view>
 </template>
 

pages/index2/fY_xiangQing/chanPin.vue

@@ -5,7 +5,21 @@
 			<view @click="backBtn" class="back" tabindex="0">返回上一级</view>
 		</view>
 		<view class="zj_box">
-			<commonItems :projectList="projectList" class="box_item"></commonItems>
+			<view class="harder_box box_item">
+				<view class="box_banner">
+					<view class="box_item">
+						<view @click="detailsBtn(index)" class="banner_item" v-for="(item, index) in projectList" :key="item.index" tabindex="0">
+							<view class="banner_bgimg">
+								<view class="banner_img">
+									<image class="itemImg" :src="item.image" mode="aspectFill"></image>
+								</view>
+							</view>
+							<view class="item_tit">{{ item.title }}</view>
+						</view>
+					</view>
+				</view>
+			</view>
+			<!-- <commonItems :projectList="projectList" class="box_item"></commonItems> -->
 		</view>
 		<!-- <view class="qiehuan">
 			<view class="qh_btn">
@@ -41,6 +55,11 @@ export default {
 				}
 			);
 		},
+		detailsBtn(i) {
+			uni.navigateTo({
+				url: `/pages/index2/fY_xiangQing/xiangMuXQ?id=${this.projectList[i].id}`
+			});
+		},
 
 		backBtn() {
 			console.log(11111);
@@ -100,4 +119,74 @@ export default {
 	width: 100%;
 	height: 100%;
 }
+
+/* 列表 */
+
+.harder_box {
+	position: relative;
+	z-index: 1;
+	width: 100%;
+	height: 25vh;
+}
+.itemImg {
+	width: 100%;
+	height: 100%;
+	border-radius: 5px 25px 5px 25px;
+	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.56), -3px 0 6px rgba(0, 0, 0, 0.26);
+}
+.itemImg::before {
+	content: '';
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), -3px 0 6px rgba(0, 0, 0, 0.16);
+	z-index: -1;
+}
+.box_banner {
+	width: 82%;
+	height: 28%;
+	/* height: 28%; */
+	margin: auto;
+}
+
+.banner_img {
+	position: absolute;
+	top: 6%;
+	left: 5%;
+	width: 90%;
+	height: 75%;
+}
+.banner_bgimg {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	background: url('../../../static/img/bg_logo.png') no-repeat center;
+	background-size: 100% 100%;
+}
+.box_item {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	flex-wrap: wrap;
+}
+.banner_item {
+	width: 23%;
+	height: 120%;
+	margin-bottom: 2%;
+	position: relative;
+	margin-left: 2%;
+}
+.item_tit {
+	width: 90%;
+	position: absolute;
+	top: 83%;
+	left: 5%;
+	text-align: center;
+	z-index: 1;
+	font-size: 10px;
+	color: #fbfcdc;
+	/* text-shadow: 0px 4px 0px #8e5938; */
+}
 </style>

pages/index2/fY_xiangQing/chuanChenRen.vue

@@ -5,7 +5,20 @@
 			<view @click="backBtn" class="back" tabindex="0">返回上一级</view>
 		</view>
 		<view class="zj_box">
-			<commonItems :projectList="projectList" class="box_item"></commonItems>
+			<view class="harder_box box_item">
+				<view class="box_banner">
+					<view class="box_item">
+						<view @click="detailsBtn(index)" class="banner_item" v-for="(item, index) in projectList" :key="item.index" tabindex="0">
+							<view class="banner_bgimg">
+								<view class="banner_img">
+									<image class="itemImg" :src="item.image" mode="aspectFill"></image>
+								</view>
+							</view>
+							<view class="item_tit">{{ item.title }}</view>
+						</view>
+					</view>
+				</view>
+			</view>
 		</view>
 		<!-- <view class="qiehuan">
 			<view class="qh_btn">
@@ -42,7 +55,11 @@ export default {
 				}
 			);
 		},
-
+		detailsBtn(i) {
+			uni.navigateTo({
+				url: `/pages/index2/fY_xiangQing/xiangMuXQ?id=${this.projectList[i].id}`
+			});
+		},
 		backBtn() {
 			console.log(11111);
 			uni.navigateBack({
@@ -101,4 +118,74 @@ export default {
 	width: 100%;
 	height: 100%;
 }
+
+/* 列表 */
+
+.harder_box {
+	position: relative;
+	z-index: 1;
+	width: 100%;
+	height: 25vh;
+}
+.itemImg {
+	width: 100%;
+	height: 100%;
+	border-radius: 5px 25px 5px 25px;
+	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.56), -3px 0 6px rgba(0, 0, 0, 0.26);
+}
+.itemImg::before {
+	content: '';
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), -3px 0 6px rgba(0, 0, 0, 0.16);
+	z-index: -1;
+}
+.box_banner {
+	width: 82%;
+	height: 28%;
+	/* height: 28%; */
+	margin: auto;
+}
+
+.banner_img {
+	position: absolute;
+	top: 6%;
+	left: 5%;
+	width: 90%;
+	height: 75%;
+}
+.banner_bgimg {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	background: url('../../../static/img/bg_logo.png') no-repeat center;
+	background-size: 100% 100%;
+}
+.box_item {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	flex-wrap: wrap;
+}
+.banner_item {
+	width: 23%;
+	height: 120%;
+	margin-bottom: 2%;
+	position: relative;
+	margin-left: 2%;
+}
+.item_tit {
+	width: 90%;
+	position: absolute;
+	top: 83%;
+	left: 5%;
+	text-align: center;
+	z-index: 1;
+	font-size: 10px;
+	color: #fbfcdc;
+	/* text-shadow: 0px 4px 0px #8e5938; */
+}
 </style>

pages/index2/fY_xiangQing/fY_xiangQing.vue

@@ -5,7 +5,20 @@
 			<view @click="backBtn" class="back" tabindex="0">返回上一级</view>
 		</view>
 		<view class="zj_box">
-			<commonItems :projectList="projectList" class="box_item"></commonItems>
+			<view class="harder_box box_item">
+				<view class="box_banner">
+					<view class="box_item">
+						<view @click="detailsBtn(index)" class="banner_item" v-for="(item, index) in projectList" :key="item.index" tabindex="0">
+							<view class="banner_bgimg">
+								<view class="banner_img">
+									<image class="itemImg" :src="item.image" mode="aspectFill"></image>
+								</view>
+							</view>
+							<view class="item_tit">{{ item.title }}</view>
+						</view>
+					</view>
+				</view>
+			</view>
 		</view>
 		<!-- <view class="qiehuan">
 			<view class="qh_btn">
@@ -43,7 +56,11 @@ export default {
 				}
 			);
 		},
-
+		detailsBtn(i) {
+			uni.navigateTo({
+				url: `/pages/index2/fY_xiangQing/xiangMuXQ?id=${this.projectList[i].id}`
+			});
+		},
 		backBtn() {
 			console.log(11111);
 			uni.navigateBack({
@@ -102,4 +119,74 @@ export default {
 	width: 100%;
 	height: 100%;
 }
+
+/* 列表 */
+
+.harder_box {
+	position: relative;
+	z-index: 1;
+	width: 100%;
+	height: 25vh;
+}
+.itemImg {
+	width: 100%;
+	height: 100%;
+	border-radius: 5px 25px 5px 25px;
+	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.56), -3px 0 6px rgba(0, 0, 0, 0.26);
+}
+.itemImg::before {
+	content: '';
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), -3px 0 6px rgba(0, 0, 0, 0.16);
+	z-index: -1;
+}
+.box_banner {
+	width: 82%;
+	height: 28%;
+	/* height: 28%; */
+	margin: auto;
+}
+
+.banner_img {
+	position: absolute;
+	top: 6%;
+	left: 5%;
+	width: 90%;
+	height: 75%;
+}
+.banner_bgimg {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	background: url('../../../static/img/bg_logo.png') no-repeat center;
+	background-size: 100% 100%;
+}
+.box_item {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	flex-wrap: wrap;
+}
+.banner_item {
+	width: 23%;
+	height: 120%;
+	margin-bottom: 2%;
+	position: relative;
+	margin-left: 2%;
+}
+.item_tit {
+	width: 90%;
+	position: absolute;
+	top: 83%;
+	left: 5%;
+	text-align: center;
+	z-index: 1;
+	font-size: 10px;
+	color: #fbfcdc;
+	/* text-shadow: 0px 4px 0px #8e5938; */
+}
 </style>

pages/index2/fY_xiangQing/houDong.vue

@@ -5,7 +5,20 @@
 			<view @click="backBtn" class="back" tabindex="0">返回上一级</view>
 		</view>
 		<view class="zj_box">
-			<commonItems :projectList="projectList" class="box_item"></commonItems>
+			<view class="harder_box box_item">
+				<view class="box_banner">
+					<view class="box_item">
+						<view @click="detailsBtn(index)" class="banner_item" v-for="(item, index) in projectList" :key="item.index" tabindex="0">
+							<view class="banner_bgimg">
+								<view class="banner_img">
+									<image class="itemImg" :src="item.image" mode="aspectFill"></image>
+								</view>
+							</view>
+							<view class="item_tit">{{ item.title }}</view>
+						</view>
+					</view>
+				</view>
+			</view>
 		</view>
 		<!-- <view class="qiehuan">
 			<view class="qh_btn">
@@ -45,7 +58,11 @@ export default {
 				}
 			);
 		},
-
+		detailsBtn(i) {
+			uni.navigateTo({
+				url: `/pages/index2/fY_xiangQing/xiangMuXQ?id=${this.projectList[i].id}`
+			});
+		},
 		backBtn() {
 			console.log(11111);
 			uni.navigateBack({
@@ -104,4 +121,74 @@ export default {
 	width: 100%;
 	height: 100%;
 }
+
+/* 列表 */
+
+.harder_box {
+	position: relative;
+	z-index: 1;
+	width: 100%;
+	height: 25vh;
+}
+.itemImg {
+	width: 100%;
+	height: 100%;
+	border-radius: 5px 25px 5px 25px;
+	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.56), -3px 0 6px rgba(0, 0, 0, 0.26);
+}
+.itemImg::before {
+	content: '';
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), -3px 0 6px rgba(0, 0, 0, 0.16);
+	z-index: -1;
+}
+.box_banner {
+	width: 82%;
+	height: 28%;
+	/* height: 28%; */
+	margin: auto;
+}
+
+.banner_img {
+	position: absolute;
+	top: 6%;
+	left: 5%;
+	width: 90%;
+	height: 75%;
+}
+.banner_bgimg {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	background: url('../../../static/img/bg_logo.png') no-repeat center;
+	background-size: 100% 100%;
+}
+.box_item {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	flex-wrap: wrap;
+}
+.banner_item {
+	width: 23%;
+	height: 120%;
+	margin-bottom: 2%;
+	position: relative;
+	margin-left: 2%;
+}
+.item_tit {
+	width: 90%;
+	position: absolute;
+	top: 83%;
+	left: 5%;
+	text-align: center;
+	z-index: 1;
+	font-size: 10px;
+	color: #fbfcdc;
+	/* text-shadow: 0px 4px 0px #8e5938; */
+}
 </style>

pages/index2/index2.vue

@@ -108,7 +108,20 @@
 				<view v-if="fsmqProjectList.length > 0 ">
 					<view v-for="(item,index) in fsmqProjectList" :key="index">
 						<view class="js_tit">{{ item.name }}</view>
-						<commonItems :projectList="item.content_list"></commonItems>
+						<view class="ms_harder_box">
+							<view class="ms_box_banner">
+								<view class="ms_box_item">
+									<view @click="detailsBtn(item1)" class="ms_banner_item" v-for="(item1, index1) in item.content_list" :key="index1"  tabindex="0">
+										<view class="ms_banner_bgimg">
+											<view class="ms_banner_img">
+												<image class="ms_img" :src="item1.image" mode="aspectFill"></image>
+											</view>
+										</view>
+										<view class="ms_item_tit">{{ item1.title }}</view>
+									</view>
+								</view>
+							</view>
+						</view>
 					</view>
 				</view>
 				
@@ -224,7 +237,7 @@
 						
 						<!-- 可能资源加载过多导致闪退 -->
 						<scroll-view scroll-y="true" style="width: 100%; height: 66%; margin-top: 2%;">
-							<view style="display: flex; flex-wrap: wrap; gap: 10px;">
+							<view style="display: flex; flex-wrap: wrap;">
 								<view class="container" @click="tabulationBtn(item.id)" v-for="(item, index) in imgList" :key="item.index" tabindex="0">
 									<view class="mn_box">
 										<image style="width: 100%; height: 100%" :lazy-load="true" :src="item.image" mode="aspectFill"></image>
@@ -473,48 +486,29 @@ export default {
 			albumList: [] /* 相册 */,
 			// 保护概况
 			protectionArticleList:[
-				{
-					img: '/static/img/wz1.png',
-					title: '200多座百年建筑化身舞台 沉浸式戏剧演出'
-				},
-				{
-					img: '/static/img/wz1.png',
-					title: '200多座百年建筑化身舞台 沉浸式戏剧演出'
-				},
-				{
-					img: '/static/img/wz1.png',
-					title: '200多座百年建筑化身舞台 沉浸式戏剧演出'
-				},
-				{
-					img: '/static/img/wz1.png',
-					title: '200多座百年建筑化身舞台 沉浸式戏剧演出'
-				},
-				{
-					img: '/static/img/wz1.png',
-					title: '200多座百年建筑化身舞台 沉浸式戏剧演出'
-				},
+				
 			],
 			// 闽南精神
 			spiritArticleList:[
 			
 			],
 			articleList: [
-				{
-					img: '/static/img/wz1.png',
-					title: '200多座百年建筑化身舞台 沉浸式戏剧演出'
-				},
-				{
-					img: '/static/img/wz2.png',
-					title: '200数千厝边共赏本土文化盛宴 '
-				},
-				{
-					img: '/static/img/wz3.png',
-					title: '闽南神韵'
-				},
-				{
-					img: '/static/img/wz4.png',
-					title: '百姓大舞台'
-				}
+				// {
+				// 	img: '/static/img/wz1.png',
+				// 	title: '200多座百年建筑化身舞台 沉浸式戏剧演出'
+				// },
+				// {
+				// 	img: '/static/img/wz2.png',
+				// 	title: '200数千厝边共赏本土文化盛宴 '
+				// },
+				// {
+				// 	img: '/static/img/wz3.png',
+				// 	title: '闽南神韵'
+				// },
+				// {
+				// 	img: '/static/img/wz4.png',
+				// 	title: '百姓大舞台'
+				// }
 			] /* 文章 */,
 			
 			// projectList: [],
@@ -533,18 +527,7 @@ export default {
 			jianZhuList: [],
 			buildList: [],
 			keCheng: [
-				{
-					img: '/static/img/kc1.png'
-				},
-				{
-					img: '/static/img/kc2.png'
-				},
-				{
-					img: '/static/img/kc3.png'
-				},
-				{
-					img: '/static/img/kc4.png'
-				}
+
 			],
 			gzhxArticleList: [],
 	
@@ -552,12 +535,7 @@ export default {
 		
 			],
 			swiperList: [
-				'https://huli-app.wenlvti.net/app_static/minnanhun/image/tv4.jpg',
-				'https://huli-app.wenlvti.net/app_static/minnanhun/image/tv5.jpg',
-				'https://huli-app.wenlvti.net/app_static/minnanhun/image/tv6.jpg',
-				'https://huli-app.wenlvti.net/app_static/minnanhun/image/tv7.jpg',
-				'https://huli-app.wenlvti.net/app_static/minnanhun/image/tv8.jpg',
-				'https://huli-app.wenlvti.net/app_static/minnanhun/image/wc.jpg'
+
 			],
 			chartData: {
 				series: [
@@ -716,6 +694,7 @@ export default {
 			journeyList:[],
 			villageList:[],
 			villageUrl:'https://cun-houpu.wenlvti.net',
+			msProjectList:[]
 		};
 	},
 	watch: {
@@ -756,9 +735,9 @@ export default {
 				console.log('触发保护概况');
 				this.$api.getContentList(
 					{
-						model_id: 3, /* 模型id */
+						model_id: 17, /* 模型id */
 						main_body_id: 1,
-						main_body_column_id:288,
+						main_body_column_id:'255,256,283,284',
 						page: this.page,
 						pageSize: this.pageSize
 					},
@@ -1223,6 +1202,12 @@ export default {
 			let day = now.getDate();
 			month = ('0' + month).slice(-2);
 			this.today = month + '月' + day + '日';
+		},
+		// 点击民俗
+		detailsBtn(item1) {
+			uni.navigateTo({
+				url: `/pages/index2/fY_xiangQing/xiangMuXQ?id=${item1.id}`
+			});
 		}
 	}
 };
@@ -2015,7 +2000,6 @@ box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px
 	/* height: 100%; */
 	display: flex;
 	flex-wrap: wrap;
-	gap: 20px;
 	/* align-items: flex-start; */
 }
 .top_img {
@@ -2037,6 +2021,7 @@ box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px
 	/* bottom: -10%;
 	left: 20%; */
 	flex: 0 0 calc(50% - 10px);
+	margin: 0 10px 10px 0;
 	color: #fff;
 	font-size: 1vw;
 	padding: 10px 0;
@@ -2129,6 +2114,7 @@ box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px
 	height: 20vh;
 	border-radius: 10px;
 	overflow: hidden;
+	margin: 0 10px 10px 0
 	/* margin-right: 2%;
 	margin-top: 2%; */
 }
@@ -2139,4 +2125,73 @@ box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px
 	height: 35%;
 	text-align: center;
 }
+
+/* 民俗风情 */
+.ms_harder_box {
+	position: relative;
+	z-index: 1;
+	width: 100%;
+	height: 25vh;
+}
+.ms_img {
+	width: 100%;
+	height: 100%;
+	border-radius: 5px 25px 5px 25px;
+	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.56), -3px 0 6px rgba(0, 0, 0, 0.26);
+}
+.ms_img::before {
+	content: '';
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), -3px 0 6px rgba(0, 0, 0, 0.16);
+	z-index: -1;
+}
+.ms_box_banner {
+	width: 82%;
+	/* aspect-ratio: 10/1;  */
+	height: 70%;
+	margin: auto;
+}
+
+.ms_banner_img {
+	position: absolute;
+	top: 6%;
+	left: 5%;
+	width: 90%;
+	height: 75%;
+}
+.ms_banner_bgimg {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	background: url('../../static/img/bg_logo.png') no-repeat center;
+	background-size: 100% 100%;
+}
+.ms_box_item {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	flex-wrap: wrap;
+}
+.ms_banner_item {
+	width: 23%;
+	height: 120%;
+	margin-bottom: 2%;
+	position: relative;
+	margin-left: 2%;
+}
+.ms_item_tit {
+	width: 90%;
+	position: absolute;
+	top: 83%;
+	left: 5%;
+	text-align: center;
+	z-index: 1;
+	font-size: 10px;
+	color: #fbfcdc;
+	/* text-shadow: 0px 4px 0px #8e5938; */
+}
 </style>