discounts-minapp/movie/movieDetail.vue

<template>
	<view class="movieDetail">
		<view class="info-box">
			<view class="info">
				<view class="icon">
					
				</view>
				<view class="box">
					<view class="name">
						第二十条
					</view>
					<view class="score-box">
						<view class="score">
							评分 <view class="num">
								9.6
							</view>
						</view>
						<view class="want-num">
							4.2万人想看
						</view>
					</view>
					
					<view class="type-box">
						喜剧 剧情 <view class="tag">
							IMAX 2D
						</view>
					</view>
					
					<view class="publish-info">
						2024年3月25日上映 141分钟
					</view>
				</view>
			</view>
			
			<view class="title-box">
				<view class="title">
					简介
				</view>
				<view class="open">
					展开
					<image class="icon" src="../../static/shop-desc.png" mode=""></image>
				</view>
			</view>
			
			<view class="desc">
				这一年的不容易谁能懂？自打挂职到市检察院，韩明（雷佳音
				饰）的糟心事就接二连三。儿子韩雨辰(刘耀文 饰)打了校领导
				(张译 饰）儿子并拒绝道歉，妻子李茂娟（马丽 饰）义愤填…
			</view>
			
		</view>
		
		<view class="actor-box">
			<view class="title-box1">
				<view class="title">
					演员列表
				</view>
				<view class="total">
					全部67
					<image class="icon" src="../../static/right.png" mode=""></image>
				</view>
			</view>
			
			<scroll-view class="actor-list" scroll-x="true">
				<view class="item">
					<view class="icon">
						
					</view>
					<view class="name">
						张艺谋
					</view>
					<view class="sub-desc">
						导演
					</view>
				</view>
				
				<view class="item">
					<view class="icon">
						
					</view>
					<view class="name">
						雷佳音
					</view>
					<view class="sub-desc">
						饰 韩明
					</view>
				</view>
				
				<view class="item">
					<view class="icon">
						
					</view>
					<view class="name">
						马丽
					</view>
					<view class="sub-desc">
						饰 李茂娟
					</view>
				</view>
				
				<view class="item">
					<view class="icon">
						
					</view>
					<view class="name">
						赵丽颖
					</view>
					<view class="sub-desc">
						饰 郝秀萍
					</view>
				</view>
				
				<view class="item">
					<view class="icon">
						
					</view>
					<view class="name">
						高叶
					</view>
					<view class="sub-desc">
						饰 吕玲玲
					</view>
				</view>
				
			</scroll-view>
			
		</view>
		
		<view class="btn-box">
			<button class="buy-btn" type="default" @click="buy">特惠购票</button>
		</view>
		
		<u-popup :show="show" round="32rpx" mode="bottom" @close="show = false" @open="openPop">
			<view class="content">
				<scroll-view class="tabList" scroll-x="true" scroll-with-animation :scroll-into-view="tab">
					<view id="demo1" class="tab active">今天 03-04</view>
					<view id="demo2" class="tab">明天 03-05</view>
					<view id="demo3" class="tab">后天 03-06</view>
					<view id="demo3" class="tab">周四 03-07</view>
					<view id="demo3" class="tab">周四 03-07</view>
					<view id="demo3" class="tab">周四 03-07</view>
					<view id="demo3" class="tab">周四 03-07</view>
					<view id="demo3" class="tab">周四 03-07</view>
				</scroll-view>
				<zs-choose-tab position="relative" :showModal="false" @choose="chooseTab"></zs-choose-tab>
				<view class="list">
					<view class="cinema-item" v-for="(item,index) in 15" :key="index" @click="handleItem">
						<view class="name-box">
							<view class="name">
								保利万和学府影城(熙街店)
							</view>
							<view class="price">
								￥19.9 <view class="label">起</view>
							</view>
						</view>
						<view class="address-box">
							<view class="address">
								沙坪坝区大学城景苑路(美丽熙街)8号附1027号
							</view>
							<view class="distance">
								700m
							</view>
						</view>
						<view class="movie-name">
							近期场次：19：00 | 20：40 | 21：40
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				tab:''
			}
		},
		methods: {
			openPop(){
				
			},
			buy() {
				this.show = true
				
			},
			handleItem(){
				uni.navigateTo({
					url:'./chooseSeat'
				})
			},
			chooseTab(val){
				
			}
		},
	}
</script>

<style lang="scss" scoped>
.movieDetail{
	background: #F9F9F9;
	padding: 20rpx 24rpx ;
	min-height: 100vh;
	.info-box{
		padding: 24rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		.info{
			display: flex;
			.icon{
				width: 160rpx;
				height: 200rpx;
				background: #aaa;
				border-radius: 16rpx;
			}
			.box{
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin-left: 20rpx;
				.name{
					font-weight: 600;
					font-size: 28rpx;
					color: #222222;
					width: 400rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				.score-box{
					display: flex;
					font-size: 24rpx;
					color: #AAAAAA;
					.score{
						display: flex;
						align-items: center;
						.num{
							font-size: 28rpx;
							color: $uni-color-primary;
							padding: 0 12rpx;
						}
					}
					.want-num{
						padding: 0 12rpx;
						border-left: 2rpx solid #F0F0F0;
						align-self: flex-end;
						// font-size: 24rpx;
						// color: #AAAAAA;
					}
				}
				.type-box{
					display: flex;
					align-items: center;
					font-size: 24rpx;
					color: #AAAAAA;
					.tag{
						padding: 6rpx 10rpx;
						background: #F0F0F0;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						font-size: 24rpx;
						color: #AAAAAA;
						margin-left: 10rpx;
					}
				}
				.publish-info{
					font-size: 24rpx;
					color: #AAAAAA;
				}
			}
		}
		.title-box{
			display: flex;
			justify-content: space-between;
			margin-top: 28rpx;
			.title{
				font-weight: 600;
				font-size: 28rpx;
				color: #222222;
			}
			.open{
				display: flex;
				align-items: center;
				font-size: 24rpx;
				color: #AAAAAA;
				.icon{
					width: 24rpx;
					height: 24rpx;
				}
			}
		}
		
		.desc{
			font-size: 24rpx;
			color: #222222;
			font-weight: 300;
			margin-top: 20rpx;
			line-height: 40rpx;
		}
	}
	
	.actor-box{
		padding: 28rpx 24rpx;
		background: #FFFFFF;
		margin-top: 20rpx;
		border-radius: 16rpx;
		.title-box1{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.title{
				font-weight: 600;
				font-size: 28rpx;
				color: #222222;
			}
			.total{
				font-weight: 300;
				font-size: 24rpx;
				display: flex;
				align-items: center;
				margin-right: -20rpx;
				.icon{
					width: 48rpx;
					height: 48rpx;
				}
			}
		}
		
		.actor-list {
				white-space: nowrap;
				width: 100%;
				padding-top: 20rpx;
				.item {
					display: inline-block;
					width: 120rpx;
					margin-right: 20rpx;
					text-align: center;
					.icon{
						width: 120rpx;
						height: 150rpx;
						border-radius: 16rpx;
						background: #aaa;
					}
					.name{
						font-weight: 400;
						font-size: 24rpx;
						color: #222222;
						margin-top: 15rpx;
					}
					.sub-desc{
						font-weight: 300;
						font-size: 20rpx;
						color: #AAAAAA;
						margin-top: 12rpx;
					}
				}
			}
	}
	
	.btn-box{
		position: fixed;
		left: 0%;
		bottom: 0%;
		width: 100%;
		padding: 10rpx 24rpx 76rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		border-top: 1rpx solid #EEEEEE;
		.buy-btn{
			width: 702rpx;
			height: 80rpx;
			line-height: 80rpx;
			background: #EE4320;
			border-radius: 46rpx 46rpx 46rpx 46rpx;
			font-weight: 600;
			font-size: 28rpx;
			color: #FFFFFF;
			padding: 0;
			margin: 0;
		}
	}
	
	.content{
		padding: 24rpx;
		.tabList {
			white-space: nowrap;
			width: 100%;
			.tab {
				display: inline-block;
				padding: 0 12rpx 20rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #222222;
			}
			.tab.active{
				position: relative;
				&::after{
					content: '';
					position: absolute;
					bottom: 0%;
					left: 50%;
					transform: translateX(-50%);
					width: 60rpx;
					height: 8rpx;
					background: #EE4320;
					border-radius: 4rpx 4rpx 4rpx 4rpx;
				}
			}
		}
		.list{
			height: 600rpx;
			overflow: auto;
			.cinema-item{
				background: #FFFFFF;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				padding: 28rpx 0;
				border-top: 1rpx solid #F0F0F0;
				.name-box{
					display: flex;
					justify-content: space-between;
					.name{
						font-weight: 600;
						font-size: 28rpx;
						color: #222222;
						width: 450rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
					.price{
						display: flex;
						align-items: center;
						font-size: 28rpx;
						color: $uni-color-primary;
						.label{
							font-size: 24rpx;
							color: #AAAAAA;
						}
					}
				}
				.address-box{
					display: flex;
					justify-content: space-between;
					font-size: 24rpx;
					color: #AAAAAA;
					margin-top: 16rpx;
					.address{
						width: 460rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
					.distance{
						
					}
				}
				.movie-name{
					font-size: 24rpx;
					color: #222222;
					margin-top: 16rpx;
					width: 100%;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}
	}
		
	
}
</style>