WenWuGuanJia/index_fenbao/XuanJiangYuan/XuanJiangYuan.vue

<template>
	<view class="box">
		<u-navbar title="文物宣讲员列表" autoBack :placeholder="true" bgColor="#fee1b9"></u-navbar>
		<view class="ban">
			<view style="margin-top: 20rpx">
				<u-search placeholder="搜索讲员" shape="square" :showAction="false" v-model="keyword"></u-search>
			</view>
			<!-- tab -->
			<view class="tab_box">
				<view @click="TabBtn(index)" class="tab_item" v-for="(item, index) in tabList" :key="index" :class="{ tab_item_active: index == tabIndex }">
					{{ item.name }}
				</view>
			</view>
			<!--  -->
			<view class="xjy_box" @click="xqBtn">
				<img src="https://img2.baidu.com/it/u=443975182,626431415&fm=253&fmt=auto&app=120&f=JPEG?w=627&h=418" class="img" />
				<view style="margin-left: 60rpx">
					<view class="xjy_name">徐有群</view>
					<view class="xjy_addres">故宫博物院</view>
					<view class="ckxq">查看详情</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			tabIndex: 0,
			keyword: '',
			tabList: [
				{
					name: '区域'
				},
				{
					name: '等级'
				},
				{
					name: '评分'
				}
			]
		};
	},
	methods: {
		TabBtn(i) {
			this.tabIndex = i;
		},
		xqBtn() {
			uni.navigateTo({
				url: '/index_fenbao/XuanJiangYuan/xjy_XiangQing'
			});
		}
	}
};
</script>

<style>
.box {
	height: auto;
	width: 100%;
	padding-bottom: 50rpx;
	background-image: url('https://huli-app.wenlvti.net/app_static/minnanhun/image/gj_bg.png');
	background-repeat: repeat-y;
	background-size: 100%;
}
.ban {
	width: 92%;
	margin: auto;
}
.tab_box {
	display: flex;
	align-items: center;
	margin-top: 20rpx;
}
.tab_item {
	width: 90rpx;
	height: 60rpx;
	line-height: 60rpx;
	text-align: center;
	color: black;
	border-radius: 10rpx;
	background-color: #ffffff;
}
.tab_item_active {
	color: #794923 !important;
	background-color: #faefe6 !important;
}
.tab_item:nth-child(2) {
	margin-left: 10rpx;
}
.tab_item:nth-child(3) {
	margin-left: 10rpx;
}
.xjy_box {
	display: flex;
	align-items: center;
	width: 100%;
	height: 220rpx;
	border-radius: 10rpx;
	padding: 20rpx 20rpx 20rpx 50rpx;
	margin-top: 20rpx;
	background-color: #fff0e3;
}
.img {
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
}
.xjy_name {
	color: black;
	font-size: 30rpx;
}
.xjy_addres {
	font-size: 26rpx;
	color: #6b5e49;
	/* margin-top: 10rpx; */
}
.ckxq {
	width: 140rpx;
	height: 60rpx;
	line-height: 60rpx;
	text-align: center;
	color: #ffffff;
	margin-top: 20rpx;
	border-radius: 10rpx;
	background-color: #e55d45;
}
</style>