MinNan/index_fenbao/cs_liebiao/cs_liebiao.vue

<template>
	<view class="body">
		<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">
			<image style="width: 100%; height: 100%" src="https://huli-app.wenlvti.net/app_static/minnanhun/image/cs_lb.png"></image>
		</view>
		<view class="banxin">
			<u-picker :show="show" @close="show = false" :closeOnClickOverlay="true" :columns="columns" @cancel="show = false" @confirm="yf_isok"></u-picker>
			<view class="" 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>
		</view>
		<!-- 村史馆列表 -->
		<view class="banxin lb_box" style="">
			<view class="a1" v-for="item in 10" :key="item">
				<view class="a2">
					<image src="https://huli-app.wenlvti.net/app_static/minnanhun/image/cs_item_lb.png" class="a3"></image>
				</view>

				<view class="a4">湖里社区</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			show: false,
			columns: [['厦门', '泉州', '福州']],
			columnsItem: '厦门' /* 选中的城市 */,
			tabList: [
				{
					name: '湖里街道',
					id: 0
				},
				{
					name: '江头街道',
					id: 1
				},
				{
					name: '殿前街道',
					id: 2
				},

				{
					name: '江头街道',
					id: 3
				}
			]
		};
	},
	methods: {
		// 选择城市
		yf_isok(e) {
			console.log(e);
			this.columnsItem = e.value;
			this.show = false;
		}
	}
};
</script>

<style>
.lb_box {
	display: flex;
	flex-flow: wrap;
	justify-content: space-between;
	margin-top: 20rpx;
}
.a1 {
	margin-bottom: 20rpx;
}
.a2 {
	background-image: url('https://huli-app.wenlvti.net/app_static/minnanhun/image/cs_bjx.png');
	background-size: 100% 100%;
	width: 200rpx; /* 六边形容器的宽度 */
	height: 210rpx; /* 六边形容器的高度 */
	position: relative;
	clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
	border: 3px solid #f6cf91;
}
.a3 {
	width: 100%; /* 图片宽度设置为容器宽度 */
	height: 100%; /* 图片高度设置为容器高度 */
	object-fit: cover;
}
.a4 {
	text-align: center;
	margin-top: 10rpx;
}
.banxin {
	margin: 0 32rpx 0 32rpx;
}
.fy_nav_bj {
	width: 100%;
	height: 220rpx;
	color: #ffffff;
	margin-bottom: 25rpx;
}
.fy_cs {
	display: flex;
	align-items: center;
	width: 255rpx;
	height: 50rpx;
	margin-top: 20rpx;
}
</style>