MinNan/index_fenbao/feiyi/feiyi.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="fy_nav_bj">
			<view class="" style="padding: 80rpx 0rpx 0 50rpx">
				<view style="font-size: 36rpx; margin-bottom: 20rpx">闽南非遗</view>
				<view style="font-size: 24rpx">推进制度化建设，打造非遗活态传承新机制</view>
			</view>
		</view>
		<!-- 轮播图 -->
		<view class="banxin">
			<u-swiper
				indicatorMode="dot"
				indicatorStyle="bottom: 10rpx"
				:list="list1"
				height="180rpx"
				:indicator="true"
				:autoplay="true"
				:circular="true"
				keyName="image"
			></u-swiper>
		</view>
		<u-picker :show="show" @close="show = false" :closeOnClickOverlay="true" :columns="columns" @cancel="show = false" @confirm="yf_isok"></u-picker>
		<view class="banxin" style="margin-top: 40rpx">
			<!-- 选择城市 -->
			<view class="" style="display: flex">
				<view @click="show = true" class="fy_cs">
					<uni-icons type="location" size="20"></uni-icons>
					<text style="margin: 0 10rpx 0 10rpx">{{ columnsItem }}</text>
					<uni-icons type="bottom" size="20"></uni-icons>
				</view>

				<!-- 选择城市end -->

				<view class="">
					<u-tabs
						:list="tabList"
						:lineWidth="0"
						:activeStyle="{
							border: '1px solid #dac1a1',
							color: '#dac1a1'
						}"
					></u-tabs>
				</view>
			</view>
			<!-- 滑动模式 -->
			<!-- <view class="" style="margin-left: 200rpx">
				<scroll-view scroll-x style="display: flex; white-space: nowrap" class="">
					<view @click="fyTab(item)" v-for="item in tabList" :key="item.id" class="fy_tab_item" :class="{ active: tabactive == item.id }">
						{{ item.name }}
					</view>
				</scroll-view>
			</view> -->
		</view>
		<!-- 内容 -->
		<view class="sh_xs banxin">
			<view class="sh_xs_item" v-for="item in twList" :key="item">
				<view class="" style="width: 325rpx; height: 180rpx; border-radius: 10rpx">
					<image style="width: 100%; height: 100%" :src="item.img"></image>
				</view>
				<view class="">{{ item.title }}</view>
				<view class="ms_dianzan">
					<view class="">
						<uni-icons type="star-filled" color="#4e7198" size="20"></uni-icons>
						<text>1.5w</text>
					</view>

					<view class="">
						<uni-icons type="heart-filled" color="#ca5642" size="20"></uni-icons>
						<text>1.5w</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			show: false,
			columns: [['厦门', '泉州', '福州']],
			columnsItem: '厦门' /* 选中的城市 */,
			tabactive: 0,
			list1: [
				{
					image: 'https://feicheng.16fw.cn:1443/uploads/20230403/f394190a0e3fc5873644beadead1cc3f.jpg'
				},
				{
					image: 'https://feicheng.16fw.cn:1443/uploads/20230403/00885f0245196beebe66ca79aebe5656.jpg'
				},
				{
					image: 'https://feicheng.16fw.cn:1443/uploads/20230403/1cf5f3c9c6b28fcbd3a983068f06d257.jpg'
				}
			],
			tabList: [
				{
					name: '民俗文学',
					id: 0
				},
				{
					name: '江头街道',
					id: 1
				},
				{
					name: '殿前街道',
					id: 2
				},
				{
					name: '民俗文学',
					id: 3
				},
				{
					name: '江头街道',
					id: 4
				}
			],
			twList: [
				{
					img: 'https://feicheng.16fw.cn:1443/uploads/20230403/133f120ee8e260640890dc2a7fe97c1f.png',
					title: '闽南传统金银制作技艺'
				},
				{
					img: 'https://feicheng.16fw.cn:1443/uploads/20230524/fe15cad25eaa4cf09236b70235fc1f14.png',
					title: '开厦上柱国祠陈氏祭祖习俗'
				},
				{
					img: 'https://feicheng.16fw.cn:1443/uploads/20230403/1cf5f3c9c6b28fcbd3a983068f06d257.jpg',
					title: '沈氏漆线雕'
				},

				{
					img: 'https://feicheng.16fw.cn:1443/uploads/20230524/6eefa546579b4bee7b1609cce87ba79f.png',
					title: '闽台送王船习俗'
				}
			]
		};
	},
	methods: {
		fyTab(item) {
			this.tabactive = item.id;
			console.log(item);
		},
		// 选择城市
		yf_isok(e) {
			console.log(e);
			this.columnsItem = e.value;
			this.show = false;
		}
	}
};
</script>

<style>
.body2 {
	background-size: 100% 100%;
	background-attachment: fixed;
	background-repeat: repeat-y;
	background-color: #efefef;
	padding-bottom: 50rpx;
	background-color: #efefef;
}
.banxin {
	margin: 0 32rpx 0 32rpx;
}
/deep/.u-swiper-indicator__wrapper__dot--active {
	width: 5px !important;
}
.fy_nav_bj {
	width: 100%;
	height: 220rpx;
	color: #ffffff;
	margin-bottom: 25rpx;
	background-image: url('https://huli-app.wenlvti.net/app_static/minnanhun/image/fy_navbj.png');
	background-size: 100% 100%;
}
.active {
	border: 1px solid #dac1a1;
}
.fy_tab_item {
	line-height: 45rpx;
	text-align: center;
	margin-right: 30rpx;
	width: 170rpx;
	height: 50rpx;
	display: inline-block;
	background-color: #fffcf3;
}
.sh_xs {
	margin-top: 50rpx;
	display: flex;
	flex-flow: wrap;
	justify-content: space-between;
}
.ms_dianzan {
	width: 245rpx;
	display: flex;
	justify-content: space-between;
	margin-top: 10rpx;
}
.sh_xs_item {
	border-radius: 10rpx;
	background: #ffffff;
	margin-bottom: 35rpx;
}
.fy_cs {
	display: flex;
	align-items: center;
	width: 255rpx;
	height: 50rpx;
	margin-top: 20rpx;
	/* background-color: antiquewhite; */
}
</style>