<template>
	<view class="">
		<!-- S 导航栏 -->
		<view class="topnav">
			<view class="topnavname">
				<u-navbar title=" " :safeAreaInsetTop="true" :fixed="true" :placeholder="true" bgColor="transparent">
					<view class="u-nav-slot" slot="left">
						大戏看北京
					</view>
				</u-navbar>
				<image class="bg" src="/static/img-home-bg1.jpg" mode=""></image>
			</view>
		</view>
		<!-- E 导航栏 -->
		<!-- S 搜索框 -->
		<view class="bgphoto">
			<img src="/static/img-home-bg2.jpg" alt="">
		</view>
		<view class="search">
			<view class="searchbox">
				<view class="searchimg"><img src="../static/icon-search-w.png" alt=""></view>
				<view class="searchtext">搜索演出、剧场关键词</view>
			</view>
		</view>
		<!-- E 搜索框 -->
		<view class="mainBox">
			<!-- S 轮播图 -->
			<view class="swiper">
				<u-swiper :list="list" @change="e => current = e.current" :autoplay="false">
					<view slot="indicator" class="indicator">
						<view class="indicator__dot" v-for="(item, index) in list" :key="index"
							:class="[index === current && 'indicator__dot--active']">
						</view>
					</view>
				</u-swiper>
			</view>
			<!-- E 轮播图 -->
			<!--S 模块分类框 -->
			<view class="category">
				<view class="categoryImg" v-for="(item,index) in list2">
					<img :src="item.img" alt="">
					<view class="">{{item.name}}</view>
				</view>
				<view class="categoryImg2">
					<img src="../static/ic-more.jpg" alt="">
					<view class="">更多</view>
				</view>
			</view>
			<!--E 模块分类框 -->
			<!--S 今日演出 -->
			<view class="today">
				<view class="left">今日演出</view>
				<view class="right">
					<view class=""> 更多</view>
					<img src="/static/ic-arrow-more.jpg" alt="">
				</view>
			</view>
			<view class="scroll">
				<scroll-view class="scroll1" scroll-x="true" scroll-left="120">
					<view class="scroll2" v-for="(item,index) in list3">
						<img :src="item.img" alt="">
						<view class="text1">{{item.cate}}《{{item.name}}》</view>
						<view class="text2">当前时间-{{item.time}}</view>
					</view>
				</scroll-view>
			</view>
			<!-- E 今日演出 -->
			<!-- S 更多演出 -->
			<view class="today">
				<view class="left">更多演出</view>
				<view class="right">
					<view class=""> 更多</view>
					<img src="/static/ic-arrow-more.jpg" alt="">
				</view>
			</view>
			<view class="">
				<view class="todprogram" v-for="(item,index) in list4">
					<view class="drama">话剧</view>
					<view class="left">
						<img :src="item.img" alt="">
					</view>
					<view class="right">
						<view class="nameText">{{item.cate}}《{{item.name}}》</view>
						<view class="timeText">{{item.starttime}}-{{item.endtime}}</view>
						<view class="addressText">{{item.add}} | 天桥艺术中心-多功能厅</view>
						<view class="priceText"><text> ￥{{item.price}}</text> 起</view>
					</view>
				</view>
			</view>
			<!-- E 更多演出 -->
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				keyword: '',
				show: false, //控制分类弹出层
				//轮播图数组
				list: [
					'/static/banner-生鲜-01.jpg',
					'/static/banner-生鲜-01.jpg',
					'/static/banner-生鲜-01.jpg',
				],
				//分类数组
				list2: [{
					img: "/static/ic-ertongju.jpg",
					name: "话剧"
				}, {
					img: "/static/ic-ertongju.jpg",
					name: "戏剧"
				}, {
					img: "/static/ic-ertongju.jpg",
					name: "京剧"
				}, {
					img: "/static/ic-ertongju.jpg",
					name: "摇滚"
				}],
				//今日演出数组
				list3: [{
					img: "../static/Rectangle 2396.jpg",
					cate: "话剧",
					name: "簋街",
					time: "12.02"
				}, {
					img: "../static/Rectangle 2396.jpg",
					cate: "话剧",
					name: "簋街",
					time: "12.02"
				}, {
					img: "../static/Rectangle 2396.jpg",
					cate: "话剧",
					name: "四世同堂",
					time: "12.02"
				}, {
					img: "../static/Rectangle 2396.jpg",
					cate: "京剧",
					name: "超级英雄",
					time: "12.02"
				}, {
					img: "../static/Rectangle 2396.jpg",
					cate: "话剧",
					name: "小蝌蚪找妈妈",
					time: "12.02"
				}, {
					img: "../static/Rectangle 2396.jpg",
					cate: "京剧",
					name: "簋街",
					time: "12.02"
				}],
				//今日演出数组
				list4: [{
					img: "../static/Rectangle 2396.jpg",
					cate: "话剧",
					name: "簋街",
					starttime: "2022.04.06",
					endtime: "2022.05.07",
					add: "西城区",
					price: "80",

				}, {
					img: "../static/Rectangle 2396.jpg",
					cate: "话剧",
					name: "簋街",
					starttime: "2022.04.06",
					endtime: "2022.05.07",
					add: "西城区",
					price: "80",
				}, {
					img: "../static/Rectangle 2396.jpg",
					cate: "话剧",
					name: "簋街街",
					starttime: "2022.04.06",
					endtime: "2022.05.07",
					add: "西城区",
					price: "80",
				}, {
					img: "../static/Rectangle 2396.jpg",
					cate: "京剧",
					name: "簋街街",
					starttime: "2022.04.06",
					endtime: "2022.05.07",
					add: "西城区",
					price: "80",
				}, {
					img: "../static/Rectangle 2396.jpg",
					cate: "话剧",
					name: "簋街街",
					starttime: "2022.04.06",
					endtime: "2022.05.07",
					add: "西城区",
					price: "80",
				}, {
					img: "../static/Rectangle 2396.jpg",
					cate: "京剧",
					name: "簋街街",
					starttime: "2022.04.06",
					endtime: "2022.05.07",
					add: "西城区",
					price: "80",
				}]

			}
		},
		onShow() {},
		onLoad() {

		},
		methods: {

		},

	}
</script>

<style lang="scss">
	//页面背景色
	page {
		background: white;
	}

	//版心
	.mainBox {
		width: 702rpx;
		margin: 16rpx auto 0;
	}

	// 顶部导航栏
	.topnav {
		position: fixed;
		top: 0;
		z-index: 999999;

		.topnavname {
			width: 100%;
			height: 176rpx;
		}
	}

	.u-nav-slot {
		z-index: 999;
		color: rgba(255, 255, 255, 1);
		font-size: 40rpx;
		font-weight: 700;
	}

	//背景图片
	.bgphoto {
		position: absolute;
		z-index: -1;
		top: 172rpx;

		img {
			width: 750rpx;
			height: 230rpx;
			margin-top: 5rpx;
		}
	}

	// 轮播
	.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 {
		@include flex;
		justify-content: center;
		padding: 2px 0;
		background-color: rgba(0, 0, 0, 0.35);
		width: 35px;
		border-radius: 100px;

		&__text {
			color: #FFFFFF;
			font-size: 12px;
		}
	}

	//搜索框
	.search {
		margin: 188rpx 24rpx 0 24rpx;

		.searchbox {
			display: flex;
			align-items: center;
			width: 702rpx;
			height: 64rpx;
			border-radius: 38rpx;
			background: rgba(72, 11, 11, 0.16);

			img {
				margin-left: 24rpx;
				width: 32rpx;
				height: 32rpx;
				margin-top: 10rpx;
			}

			.searchtext {
				color: rgba(255, 255, 255, 0.85);
				font-size: 26rpx;
				margin-left: 8rpx;
			}
		}

	}

	.category {
		display: flex;
		margin: 32rpx 8rpx 40rpx;

		.categoryImg {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			color: rgba(0, 0, 0, 0.9);
			font-size: 24rpx;

			img {
				width: 96rpx;
				height: 96rpx;
			}
		}
	}

	//分类模块
	.categoryImg2 {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		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;
			}
		}
	}

	//今日演出滑动
	.scroll {
		margin-top: 16rpx;
		margin-bottom: 64rpx;

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

			.text1 {
				height: 64rpx;
				width: 194rpx;
				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;
			}
		}

		.scroll2 {
			display: inline-block;
			// height: 300rpx;
			margin-right: 16rpx;

			image {
				width: 194rpx;
				height: 260rpx;
				border-radius: 12rpx;
			}
		}
	}

	//更多演出列表
	.todprogram {
		position: relative;
		display: flex;
		margin-bottom: 40rpx;

		.left {
			margin-right: 16rpx;

			image {
				width: 196rpx;
				height: 270rpx;
				border-radius: 12rpx;
			}
		}

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

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

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

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

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

			.priceText {

				color: rgba(0, 0, 0, 0.4);
				font-size: 22rpx;

				text {
					color: rgba(244, 39, 88, 1);
					font-size: 24rpx;
					font-weight: 700;
				}
			}
		}
	}

	.bg {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 176rpx;
		z-index: 1;
	}

	.u-navbar__content__left {
		width: 100% !important;
	}
</style>