From c6685bfb0bca390fdf5c4c1c48fd008e1f094a94 Mon Sep 17 00:00:00 2001
From: huliyong <2783385703@qq.com>
Date: Wed, 18 Sep 2024 13:46:28 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=8A=E4=BC=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json                                         |   3 +
 pages_order/components/list/cardList.vue           |  10 +-
 .../components/submit/StudyAndPathDetailSubmit.vue |  93 +++++++++++++++
 pages_order/service/StudyAndPathDetail.vue         | 126 +++++++++++++++++++++
 pages_order/service/StudyFurther.vue               |   3 +-
 pages_order/service/situation.vue                  | 104 ++++++++++++++---
 6 files changed, 319 insertions(+), 20 deletions(-)
 create mode 100644 pages_order/components/submit/StudyAndPathDetailSubmit.vue
 create mode 100644 pages_order/service/StudyAndPathDetail.vue

diff --git a/pages.json b/pages.json
index ca61dc8..576374f 100644
--- a/pages.json
+++ b/pages.json
@@ -88,6 +88,9 @@
 			},
 			{
 				"path": "order/orderSubscribe"
+			},
+			{
+				"path": "service/StudyAndPathDetail"
 			}
 		]
 	}],
diff --git a/pages_order/components/list/cardList.vue b/pages_order/components/list/cardList.vue
index 6e11fc4..04c3588 100644
--- a/pages_order/components/list/cardList.vue
+++ b/pages_order/components/list/cardList.vue
@@ -6,7 +6,7 @@
 			</view>
 			<view class="card-content">
 				<view style="display: flex; align-items: center;">
-					<text>刘申林</text>
+					<view class="title text-ellipsis">刘申林</view>
 					<image class="card-content-img" src="../../static/tell/goldMedal.png"></image>
 				</view>
 				<view class="card-content-tag">
@@ -49,8 +49,8 @@
 		align-items: center;
 
 		.card-img {
-			height: 240rpx;
-			width: 260rpx;
+			height: 270rpx;
+			width: 240rpx;
 			flex-shrink: 0;
 			image {
 				height: 100%;
@@ -66,6 +66,10 @@
 			flex-direction: column;
 			justify-content: space-around;
 			width: 97%;
+			
+			.title{
+				max-width: 260rpx;
+			}
 
 			.card-content-img {
 				display: flex;
diff --git a/pages_order/components/submit/StudyAndPathDetailSubmit.vue b/pages_order/components/submit/StudyAndPathDetailSubmit.vue
new file mode 100644
index 0000000..3008780
--- /dev/null
+++ b/pages_order/components/submit/StudyAndPathDetailSubmit.vue
@@ -0,0 +1,93 @@
+<template>
+	<view class="submit">
+		
+		
+		<view class=""
+		@click="">
+			<uv-icon 
+			size="40rpx"
+			name="chat"></uv-icon>
+			<view class="">
+				客服
+			</view>
+		</view>
+		
+		
+		<view class=""
+		@click="">
+			<uv-icon 
+			size="40rpx"
+			name="star"></uv-icon>
+			<!-- star-fill -->
+			<view class="">
+				收藏
+			</view>
+		</view>
+		
+		<view class=""
+		@click="$emit('share')">
+			<uv-icon 
+			size="40rpx"
+			name="share-square"></uv-icon>
+			<view class="">
+				分享
+			</view>
+		</view>
+		
+		<view class="btn"
+		@click="$emit('submit')">
+			{{ submiitTitle }}
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name:"submit",
+		props : {
+			submiitTitle : {
+				default : '立即租赁',
+				type : String,
+			}
+		},
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+.submit{
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	width: 100vw;
+	background-color: #fff;
+	height: 100rpx;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	font-size: 24rpx;
+	.btn{
+		background: $uni-color;
+		width: 600rpx;
+		height: 80rpx;
+		color: #fff;
+		border-radius: 40rpx;
+		font-size: 28rpx;
+	}
+	view{
+		width: 100rpx;
+		margin: 0 10rpx;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		flex-direction: column;
+	}
+}
+</style>
diff --git a/pages_order/service/StudyAndPathDetail.vue b/pages_order/service/StudyAndPathDetail.vue
new file mode 100644
index 0000000..2a8812d
--- /dev/null
+++ b/pages_order/service/StudyAndPathDetail.vue
@@ -0,0 +1,126 @@
+<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>
diff --git a/pages_order/service/StudyFurther.vue b/pages_order/service/StudyFurther.vue
index 96360c7..82e2f3e 100644
--- a/pages_order/service/StudyFurther.vue
+++ b/pages_order/service/StudyFurther.vue
@@ -17,6 +17,7 @@
 		
 		<view class="list">
 			<view class="item"
+			@click="$utils.navigateTo('/pages_order/service/StudyAndPathDetail?type=0&title=我要研学')"
 			v-for="(item,index) in 3"
 			:key="index">
 				<view class="image">
@@ -26,7 +27,7 @@
 					</view>
 				</view>
 				<view class="info">
-					<view class="title">
+					<view class="title text-ellipsis">
 						2024年景德镇艺术研学定金
 					</view>
 					<view class="price">
diff --git a/pages_order/service/situation.vue b/pages_order/service/situation.vue
index d48bda8..6acee84 100644
--- a/pages_order/service/situation.vue
+++ b/pages_order/service/situation.vue
@@ -4,23 +4,40 @@
 		<navbar title="遗产概况" leftClick @leftClick="$utils.navigateBack" />
 		<view class="situation-imgs">
 			<view class="situation-imgs-one">
-				<uv-image src="https://cdn.uviewui.com/uview/album/1.jpg" radius="12rpx" width="100%" height="100%" />
+				<image src="https://cdn.uviewui.com/uview/album/1.jpg" mode="aspectFill"/>
+				<view class="text">
+					<view class="title text-ellipsis">
+						瓷都镇区鼎
+					</view>
+					<view class="tip text-ellipsis">
+						盛时期瓷业生产核心区
+					</view>
+				</view>
 			</view>
 			<view class="situation-imgs-two">
-				<uv-image src="https://cdn.uviewui.com/uview/album/1.jpg"  width="100%" height="100%" />
+				<image src="https://cdn.uviewui.com/uview/album/1.jpg" mode="aspectFill"/>
+				<view class="text">
+					<view class="title text-ellipsis">
+						瓷都镇区鼎
+					</view>
+					<view class="tip text-ellipsis">
+						盛时期瓷业生产核心区
+					</view>
+				</view>
 			</view>
 			<view class="situation-imgs-four">
-				<view>
-					<uv-image src="https://cdn.uviewui.com/uview/album/1.jpg" mode="aspectFit" width="100%" height="100%" />
-				</view>
-				<view>
-					<uv-image src="https://cdn.uviewui.com/uview/album/1.jpg" mode="aspectFit" width="100%" height="100%" />
-				</view>
-				<view>
-					<uv-image src="https://cdn.uviewui.com/uview/album/1.jpg" mode="aspectFit" width="100%" height="100%" />
-				</view>
-				<view>
-					<uv-image src="https://cdn.uviewui.com/uview/album/1.jpg" mode="aspectFit" width="100%" height="100%" />
+				<view
+				v-for="(item,index) in 4"
+				:key="index">
+					<image src="https://cdn.uviewui.com/uview/album/1.jpg" mode="aspectFill"/>
+					<view class="text">
+						<view class="title text-ellipsis">
+							瓷都镇区鼎
+						</view>
+						<view class="tip text-ellipsis">
+							盛时期瓷业生产核心区
+						</view>
+					</view>
 				</view>
 			</view>
 		</view>
@@ -43,6 +60,10 @@
 
 <style scoped lang="scss">
 	.situation {
+		image{
+			width: 100%;
+			height: 100%;
+		}
 		.situation-imgs {
 			width: 92%;
 			margin-top: 20rpx;
@@ -50,23 +71,74 @@
 
 			.situation-imgs-one {
 				height: 360rpx;
+				position: relative;
+				border-radius: 30rpx;
+				overflow: hidden;
+				.text{
+					.title{
+						font-size: 80rpx;
+					}
+					.tip{
+						font-size: 45rpx;
+					}
+				}
 			}
 
 			.situation-imgs-two {
-				margin-top: 10rpx;
+				margin-top: 20rpx;
 				height: 300rpx;
+				position: relative;
+				border-radius: 30rpx;
+				overflow: hidden;
+				.text{
+					.title{
+						font-size: 60rpx;
+					}
+					.tip{
+						font-size: 35rpx;
+					}
+				}
 			}
 
 			.situation-imgs-four {
 				display: flex;
 				flex-wrap: wrap;
 				justify-content: space-between;
-
-				view {
+				>view {
+					margin-top: 20rpx;
 					width: 48%;
 					height: 260rpx;
+					position: relative;
+					border-radius: 20rpx;
+					overflow: hidden;
+					.text{
+						height: 70%;
+					}
 				}
 			}
 		}
+		.text{
+			font-family: 楷体;
+			// font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
+			position: absolute;
+			bottom: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+			background-color: #00000066;
+			color: #fff;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
+			font-weight: 900;
+			.title{
+				font-size: 34rpx;
+			}
+			.tip{
+				font-size: 22rpx;
+				margin-top: 10%;
+			}
+		}
 	}
 </style>
\ No newline at end of file