<template>
	<view>
		<!-- 自定义导航栏 -->
		<view class="topBox">
			<view class="topTitle">
				<u-navbar :safeAreaInsetTop="true" :fixed="true" :placeholder="true" bgColor="transparent">
					<view class="navTop" slot="left">
						大戏看北京
					</view>
				</u-navbar>
				<image class="bg" src="/static/1-1首页/img-home-bg1@2x.png" mode=""></image>
			</view>
		</view>
		<!-- 搜索框 -->
		<view class="bgphoto">
			<img src="/static/1-1首页/img-home-bg2@2x.png" alt="搜索背景">
		</view>
		<view class="search">
			<view class="searchBox" @click="toSearch">
				<view class="searchImg"><img src="/static/1-1首页/icon-search-w@2x.png" alt="搜索图标"></view>
				<view class="searchText">搜索演出、剧场关键词</view>
			</view>
		</view>

		<!-- 版心内容 -->
		<view class="mainBox">
			<!-- 轮播图 -->
			<view class="swiper">
				<u-swiper :list="list5" @change="e => current = e.current" :autoplay="true" @click="vxshow = true">
					<view slot="indicator" class="indicator">
						<view class="indicator__dot" v-for="(item, index) in list5" :key="index"
							:class="[index === current && 'indicator__dot--active']">
						</view>
					</view>
				</u-swiper>
			</view>
			<!-- 分类列表 -->
			<view class="category">
				<view class="categoryImg" v-for="(item,index) in moreCategory" :key="item.id">
					<img :src="item.img" alt="分类图标">
					<view class="">{{item.title}}</view>
				</view>
				<view class="categoryImg2">
					<img src="/static/1-1首页/ic-more@2x.png" alt="更多图标">
					<view class="">更多</view>
				</view>
			</view>

			<!-- 今日演出标题 -->
			<view class="today">
				<view class="left">今日演出</view>
				<view class="right">
					<view class="" @click="toMore"> 更多</view>
					<img src="/static/1-1首页/ic-arrow-more@2x.png" alt="更多图标">
				</view>
			</view>
			<!-- 今日演出项目列表 横向列表 -->
			<view class="scrollBox">
				<scroll-view class="scrollBox1" scroll-x="true" scroll-left="120">
					<view class="scrollBox2" v-for="(item,index) in todayShows" :key="item.id" @click="toDetail(item)">
						<img src="/static/1-1首页/Rectangle 2396@2x.png" alt="今日演出">
						<view class="text1">{{item.title}}</view>
						<view class="text2">当前时间-{{item.time}}</view>
					</view>
				</scroll-view>
			</view>

			<!-- 更多演出标题 -->
			<view class="today">
				<view class="left">更多演出</view>
				<view class="right">
					<view class="" @click="tobig"> 更多</view>
					<img src="/static/1-1首页/ic-arrow-more@2x(1).png" alt="更多演出">
				</view>
			</view>
			<!-- 更多演出项目列表 -->
			<view>
				<view class="todProgram" v-for="(item,index) in 5" @click="toDetail(item)">
					<!-- 演出类型 -->
					<view class="drama">话剧</view>
					<!-- 演出内容 -->
					<view class="left">
						<img src="/static/1-1首页/Rectangle 2396@2x(1).png" alt="话剧《四世同堂》">
					</view>
					<view class="right">
						<view class="nameText">话剧《四世同堂》</view>
						<view class="timeText">2022.04.06-04.10</view>
						<view class="addressText">西青区 | 天桥艺术中心-多功能厅</view>
						<view class="priceText"><text> ￥80</text> 起</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				//顶部轮播图索引
				current: 0,
				//顶部轮播图
				list5: [
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				], 
				//分类列表
				moreCategory: [
					{img:'/static/1-1首页/ic-huaju@2x.png',title:'话剧'},{img:'/static/1-1首页/ic-yinyueju@2x.png',title:'音乐剧'},
					{img:'/static/1-1首页/ic-ertongju@2x.png',title:'儿童剧'},{img:'/static/1-1首页/ic-yinyuehui@2x.png',title:'音乐会'}
				],
				moerCate: [], //更多分类
				//今日演出列表
				todayShows: [{id:1,title:'话剧《簋街》',time:'12.02'},{id:2,title:'《三国风云》',time:'12.02'},
				{id:3,title:'话剧话剧',time:'12.02'},{id:4,title:'话剧话剧',time:'12.02'}], 
				//更多演出列表
				moreShows: []
			}
		},
		onShow() {

		},
		onLoad() {
			
		},
		methods: {
			//跳转到搜索页
			toSearch() {
				console.log('跳转到搜索页');
			},
			// 今日演出 跳转到剧目详情页
			toDetails(item) {
				console.log(item,'跳转详情页');
			},
			// 更多演出 跳转到详情页
			toDetail(item) {
				console.log(item,'跳转详情页');
			},
			//今日演出 更多
			toMore() {
				console.log('今日演出 更多')
			}
		}
	}
</script>

<style lang="scss">
	/* 页面背景色 */
	page {
		background: white;
	}
	/* 顶部导航栏 */
	.topBox {
		position: fixed;
		top: 0;
		z-index: 999999;
		.topTitle {
			width: 100%;
			height: 176rpx;
			.navTop{
				z-index: 999;
				color: #FFFFFF;
				font-size: 40rpx;
				font-weight: 700;
			}
			.bg {
				position: fixed;
				left: 0;
				top: 0;
				z-index: 1;
				width: 100%;
				height: 176rpx;
			}
		}
	}
	.top {
		width: 100%;
		height: 176rpx;
	}

	.topText {
		margin-top: -80rpx;
		color: rgba(255, 255, 255, 1);
		font-size: 40rpx;
		font-weight: 700;
	}

	.topText {
		margin-left: 32rpx;
		letter-spacing: 6rpx;
	}

	.bgphoto {
		position: absolute;
		top: 172rpx;
		z-index: -1;
		img {
			width: 750rpx;
			height: 230rpx;
			margin-top: 5rpx;
		}
	}

	.search {
		margin: 188rpx 24rpx 0 24rpx;
		.searchBox {
			display: flex;
			align-items: center;
			width: 702rpx;
			height: 64rpx;
			background: rgba(72, 11, 11, 0.16);
			border-radius: 38rpx;
			img {
				width: 32rpx;
				height: 32rpx;
				margin-top: 10rpx;
				margin-left: 24rpx;
			}
			.searchText {
				margin-left: 8rpx;
				color: rgba(255, 255, 255, 0.85);
				font-size: 26rpx;
			}
		}
	}
	/* 顶部轮播图、指示器样式 */
	.indicator {
		@include flex(row);
		justify-content: center;
	
		&__dot {
			height: 6px;
			width: 6px;
			border-radius: 100px;
			background-color: rgba(255, 255, 255, 0.35);
			margin: 0 5px;
			transition: background-color 0.3s;
	
			&--active {
				background-color: #ffffff;
			}
		}
	}
	
	.indicator-num {
		padding: 2px 0;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 100px;
		width: 35px;
		@include flex;
		justify-content: center;
	
		&__text {
			color: #FFFFFF;
			font-size: 12px;
		}
	}
	/* 版心内容 */
	.mainBox {
		width: 702rpx;
		margin: 16rpx auto 0;
	}

	.category {
		display: flex;
		margin: 32rpx 8rpx 40rpx;
		.categoryImg {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			flex: 1;
			color: rgba(0, 0, 0, 0.9);
			font-size: 24rpx;
			img {
				width: 96rpx;
				height: 96rpx;
			}
		}
	}

	.categoryImg2 {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		flex: 1;
		color: rgba(0, 0, 0, 0.9);
		font-size: 24rpx;
		img {
			width: 96rpx;
			height: 96rpx;
		}
	}
	.today {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 16rpx;
		.left {
			color: rgba(0, 0, 0, 0.9);
			font-size: 36rpx;
			font-weight: 700;
		}

		.right {
			display: flex;
			color: rgba(0, 0, 0, 0.9);
			font-size: 24rpx;

			image {
				width: 16rpx;
				height: 32rpx;
				margin-left: 4rpx;
			}
		}
	}

	.scrollBox {
		margin-top: 16rpx;
		margin-bottom: 64rpx;
	}

	.scrollBox1 {
		white-space: nowrap;
		width: 100%;

		.text1 {
			width: 194rpx;
			height: 64rpx;
			font-size: 24rpx;
			font-weight: 700;
			display: -webkit-box;
			overflow: hidden;
			text-overflow: ellipsis;
			word-wrap: break-word;
			white-space: normal !important;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}

		.text2 {
			color: rgba(0, 0, 0, 0.4);
			font-size: 20rpx;
		}
	}

	.scrollBox2 {
		display: inline-block;
		margin-right: 16rpx;
		image {
			width: 194rpx;
			height: 260rpx;
			border-radius: 12rpx;
		}
	}

	.todProgram {
		display: flex;
		position: relative;
		margin-bottom: 40rpx;
		.left {
			margin-right: 16rpx;
			image {
				width: 196rpx;
				height: 270rpx;
				border-radius: 12rpx;
			}
		}

		.drama {
			position: absolute;
			top: 8rpx;
			left: 8rpx;
			padding: 0 4rpx;
			box-sizing: border-box;
			background: rgba(0, 0, 0, 0.6);
			color: rgba(255, 255, 255, 1);
			font-size: 20rpx;
			border-radius: 6rpx;
		}

		.right {
			display: flex;
			flex-direction: column;
			height: 270rpx;

			.nameText {
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
				width: 490rpx;
				margin-bottom: 12rpx;
				color: rgba(0, 0, 0, 0.9);
				font-size: 32rpx;
				font-weight: 700;
			}

			.timeText {
				margin-bottom: 12rpx;
				color: rgba(0, 0, 0, 0.4);
				font-size: 24rpx;
			}

			.addressText {
				margin-bottom: 94rpx;
				color: rgba(0, 0, 0, 0.4);
				font-size: 24rpx;
			}

			.priceText {
				color: rgba(0, 0, 0, 0.4);
				font-size: 22rpx;
				text {
					margin-right:2rpx;
					color: rgba(244, 39, 88, 1);
					font-size: 24rpx;
					font-weight: 700;
				}
			}
		}
	}
	.u-navbar__content__left {
		width: 100% !important;
	}
</style>