Jingde-town-wechat-uniapp/pages_order/service/StudyAndPathDetail.vue

<template>
	<!-- 我要研学详情 type:0 和 遗产路径详情 type:1 -->
	<view class="page">
		<navbar :title="title" leftClick @leftClick="$utils.navigateBack" />
		
		<view class="image">
			<image src="https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1msKSi.img" mode="aspectFill"></image>
		</view>
		
		<view class="box">
			<view class="info">
				<view class="price">
					<text>￥300</text>起
				</view>
				<view class="title">
					景德镇风情-御窑厂-陶瓷博物馆-陶阳里一日游陶瓷博物馆陶瓷博物馆陶瓷博物馆
				</view>
				<view class="tip">
					2-6人一单一团!独家定制!尊享体验!私家团享出游，一单一团，时间自由支配，不和陌生人尴尬拼团。专属用车、舒适出行、专属司机、安全保证、贴心服务、摄影助手、风情解说。
				</view>
			</view>
			
			<view class="detail">
				<view class="">
					<uv-tabs :list="tabs"
					lineColor="#B12026"
					lineHeight="8rpx"
					lineWidth="50rpx"
					:scrollable="false"
					@click="clickTabs"></uv-tabs>
				</view>
				
				<view class="content">
					12312312313
				</view>
			</view>
		</view>
		
		<StudyAndPathDetailSubmit/>
	</view>
</template>

<script>
	import StudyAndPathDetailSubmit from '../components/submit/StudyAndPathDetailSubmit.vue'
	export default {
		components : {
			StudyAndPathDetailSubmit,
		},
		data() {
			return {
				title: '',
				type: 0,
				tabs: [
					{
						name: '关于行程'
					},
					{
						name: '注意事项'
					},
					{
						name: '出行说明'
					},
				],
			}
		},
		onLoad(args) {
			this.type = args.type || 0
			this.title = args.title
		},
		methods: {
			//点击tab栏
			clickTabs(index) {
			},
		}
	}
</script>

<style scoped lang="scss">
.page{
	image{
		width: 100%;
		height: 100%;
	}
	.image{
		width: 100%;
		height: 400rpx;
	}
	.box{
		margin-top: -40rpx;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
		overflow: hidden;
		position: relative;
		.info{
			background-color: #fff;
			padding: 40rpx;
			.price{
				padding: 20rpx 0;
				font-size: 22rpx;
				text{
					font-size: 38rpx;
					color: $uni-color;
					font-weight: 900;
				}
			}
			.title{
				font-weight: 900;
				padding-bottom: 20rpx;
				font-size: 28rpx;
			}
			.tip{
				font-size: 22rpx;
				padding-bottom: 20rpx;
				line-height: 40rpx;
			}
		}
		.detail{
			margin-top: 20rpx;
			background-color: #fff;
			.content{
				padding: 40rpx;
			}
		}
	}
}
</style>