Skip to content

G
groupPurchase-miniapp
Commit f94328d1 authored by 周俊涛（东信）'s avatar 周俊涛（东信）
Browse files
Options

完善旅游路线页面

parent 4da1c924
Hide whitespace changes
Inline Side-by-side
Showing with 402 additions and 93 deletions
src/pages/assistingAgriculture/RouteDetails/RouteDetails.vue
View file @ f94328d1
<template>
<div class="route-details">
<scroll-view class="container" scroll-y>
<!-- 乱播 -->
<!-- 轮播 -->
<div class="banner">
<!-- -->
<wd-swiper
:autoplay="false"
:list="swiperList"
autoplay
:indicator="{ type: 'fraction' }"
indicatorPosition="bottom-right"
></wd-swiper>
</div>
<div style="padding: 0 20rpx">
<div style="padding: 0 10rpx 20rpx">
<!-- 价格 -->
<div class="price-info">
<div class="price flex-align-center">
......@@ -142,13 +143,124 @@
<div class="more">更多></div>
</div>
</div>
<!-- 套餐总览 -->
<div class="overview">
<p class="title">套餐总览</p>
<div class="content">
<div class="item">
<div>
<img src="/src/static/assistingAgriculture/routeDetails/tuanduifuwu.png" alt="" />
<p>团队服务</p>
</div>
<ul>
<li>含导游</li>
</ul>
</div>
<div class="item">
<div>
<img src="/src/static/assistingAgriculture/routeDetails/jiaotong.png" alt="" />
<p>交通</p>
</div>
<ul>
<li>行中交通，约3小时交通工具：巴士</li>
<li>集合方式：集合点集合</li>
</ul>
</div>
<div class="item">
<div>
<img src="/src/static/assistingAgriculture/routeDetails/youwan.png" alt="" />
<p>游玩</p>
</div>
<ul>
<li>
4个景点，约7小时
<span>详情</span>
</li>
</ul>
</div>
<div class="item">
<div>
<img src="/src/static/assistingAgriculture/routeDetails/canshi.png" alt="" />
<p>餐食</p>
</div>
<ul>
<li>共1餐含1次午餐</li>
</ul>
</div>
</div>
<div class="time-line-wrap">
<timeLine date="7:00">
<p class="flex-align-center">
<span class="t1">集合点</span>
<img class="icon" src="/static/assistingAgriculture/routeDetails/position.png" />
<span class="t2">贵阳市南明区维也纳酒店(花果园店)</span>
</p>
<p>
早上统一集合发车，(具体出发时间以导游通知为准)为便于通知游客车时间、上车地点、导游和车牌号，请游客在出行前一天随时保持手机畅通。
</p>
</timeLine>
<timeLine date="7:30">
<p>
<span class="t1">交通</span>
<span class="t2">红枫湖</span>
</p>
<p>
<img class="icon" src="/static/assistingAgriculture/routeDetails/clock.png" />
<span class="t1">行驶时间：约55分钟</span>
</p>
</timeLine>
<timeLine date="8:30">
<p class="t1">活动景点</p>
<div class="introduce">
<img src="/static/assistingAgriculture/reviewDetails/fj.png" alt="" />
<div class="text-wrap flex-between">
<p class="t1">红枫湖景区</p>
<p class="t1">自然风景</p>
<p class="t1 t2">4.5分</p>
<p class="t1 t2">门票费用已包含</p>
</div>
</div>
<p class="t3">
红枫湖风景名胜区位于贵州省贵阳市清镇市城区以西，距市32公里。红枫湖横跨清镇市、安顺市平坝区，风景区总面积为200平方公里，水城面积达57.2平方公里，是贵州高原上最大的人工湖泊之一。1988年被国务院批准为国家级风景名胜区。
</p>
<p class="t1">
<img class="icon" src="/static/assistingAgriculture/routeDetails/clock.png" />
活动时间：约3小时
</p>
</timeLine>
<timeLine date="12:30">
<div class="t3">
午餐 中式(标:30元/成人，20元/儿童)
<p class="t1">用餐地点红枫湖风景区内特色餐厅</p>
</div>
<p class="t3">
我们已经经理为大家准备了可口的饭菜 团餐味道适合大众口味 唯以满足每一个人的喜好
肯定会排队等候,敬请理解 不用餐将无费用可退，感谢理解。
</p>
<p>
<img class="icon" src="/static/assistingAgriculture/routeDetails/clock.png" />
<span class="t1">用餐时间：约3小时</span>
</p>
</timeLine>
<timeLine date="18:30">
<p class="t1">活动景点</p>
</timeLine>
</div>
</div>
</div>
</scroll-view>
<div class="footer">123</div>
<div class="footer flex-between">
<div class="like">
<wd-icon name="star"></wd-icon>
<p>收藏</p>
</div>
<button>立即预定</button>
</div>
</div>
</template>
<script setup>
import timeLine from './timeLine.vue';
const swiperList = ref([
'https://registry.npmmirror.com/wot-design-uni-assets/*/files/redpanda.jpg',
'https://registry.npmmirror.com/wot-design-uni-assets/*/files/capybara.jpg',
......@@ -168,162 +280,163 @@ uni-page-body {
flex-direction: column;
.container {
flex-grow: 1;
height: 69px;
height: 138rpx;
.banner {
:deep(.wd-swiper) {
width: 375px;
height: 220px;
uni-swiper {
width: 750rpx;
height: 440rpx;
uni-swiper,
uni-image {
width: 100%;
height: 100%;
height: 100% !important;
}
}
}
.price-info {
background-color: #fff;
border-radius: 8px;
padding: 10px;
margin-top: 10px;
border-radius: 16rpx;
padding: 20rpx;
margin-top: 20rpx;
.price {
.t1 {
color: #fa5151;
font-size: 18px;
font-size: 36rpx;
}
.t2 {
margin-left: 10px;
font-size: 12px;
margin-left: 20rpx;
font-size: 24rpx;
color: #767676;
}
}
.name {
font-size: 14px;
font-size: 28rpx;
color: #3d3d3d;
margin: 10px 0 15px;
margin: 20rpx 0 30rpx;
font-weight: 500;
}
.tags {
gap: 10px;
gap: 20rpx;
p {
padding: 5px;
font-size: 8px;
padding: 10rpx;
font-size: 16rpx;
font-weight: 500;
color: #3d3d3d;
border: 1px solid #d8d8d8;
border-radius: 150px;
border: 2rpx solid #d8d8d8;
border-radius: 300rpx;
}
}
}
.guarantee {
background: linear-gradient(180deg, #feeeee 0%, #ffffff 100%);
padding: 10px;
border-radius: 8px;
margin-top: 5px;
padding: 20rpx;
border-radius: 16rpx;
margin-top: 10rpx;
& > div {
display: flex;
font-size: 11px;
line-height: 18px;
font-size: 22rpx;
line-height: 36rpx;
font-weight: 500;
color: #767676;
&:first-child {
margin-bottom: 10px;
margin-bottom: 20rpx;
}
.label {
color: #ff494e;
margin-right: 25px;
margin-right: 50rpx;
}
.list {
gap: 15px;
gap: 30rpx;
.wd-icon {
color: #ff494e;
margin-right: 2px;
font-size: 14px;
margin-right: 4rpx;
font-size: 28rpx;
}
}
}
}
.comment-wrap {
padding: 10px;
margin-top: 5px;
border-radius: 8px;
padding: 20rpx;
margin-top: 10rpx;
border-radius: 16rpx;
background: #fff;
.comment {
.title {
gap: 10px;
gap: 20rpx;
.t1 {
font-size: 14px;
font-size: 28rpx;
font-weight: 500;
color: #3d3d3d;
}
.t2 {
font-size: 12px;
font-size: 24rpx;
color: #0974f5;
span {
font-size: 8px;
font-size: 16rpx;
color: #abaaaa;
}
}
img {
width: 12px;
height: 12px;
width: 24rpx;
height: 24rpx;
}
}
.top {
.link {
font-size: 12px;
font-size: 24rpx;
font-weight: 500;
color: #0974f5;
}
}
.tags {
margin-top: 10px;
margin-top: 20rpx;
display: flex;
gap: 20px;
gap: 40rpx;
p {
border-radius: 150px;
padding: 5px 8px;
border-radius: 300rpx;
padding: 10rpx 16rpx;
color: #3d3d3d;
font-size: 8px;
font-size: 16rpx;
font-weight: 500;
line-height: 8px;
line-height: 16rpx;
background: rgba(9, 116, 245, 0.1);
}
}
.user {
margin-top: 10px;
font-size: 14px;
margin-top: 20rpx;
font-size: 28rpx;
font-weight: 500;
color: #3d3d3d;
line-height: normal;
.user-name {
img {
border-radius: 4px;
width: 24px;
height: 24px;
margin-right: 8px;
border-radius: 8rpx;
width: 48rpx;
height: 48rpx;
margin-right: 16rpx;
}
}
}
.content {
margin-top: 5px;
margin-top: 10rpx;
}
}
.album {
margin-top: 22px;
margin-top: 44rpx;
.top {
.title {
font-size: 14px;
font-size: 28rpx;
color: #3d3d3d;
}
.link {
font-size: 12px;
font-size: 24rpx;
color: #0974f5;
}
}
.img-list {
margin-top: 10px;
margin-top: 20rpx;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 5px;
gap: 10rpx;
.wd-img {
aspect-ratio: 1;
}
......@@ -331,98 +444,236 @@ uni-page-body {
}
}
.choose-package-text {
font-size: 14px;
font-size: 28rpx;
font-weight: 500;
line-height: 14px;
line-height: 28rpx;
color: #fa5151;
margin-top: 20px;
margin-top: 40rpx;
}
.package-wrap {
margin-top: 10px;
padding: 10px;
border: 8px;
margin-top: 20rpx;
padding: 20rpx;
border: 16rpx;
background-color: #fff;
.title {
color: #3d3d3d;
font-size: 14px;
font-size: 28rpx;
font-weight: 500;
line-height: 14px;
line-height: 28rpx;
}
.package-list {
margin-top: 10px;
margin-top: 20rpx;
display: grid;
gap: 20px;
gap: 40rpx;
grid-template-columns: 1fr 1fr;
.package-item {
border-radius: 8px;
border-radius: 16rpx;
opacity: 1;
padding: 10px;
padding: 20rpx;
background: linear-gradient(180deg, #feeeee 0%, #ffffff 100%);
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.08);
box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.08);
.price {
font-size: 12px;
font-size: 24rpx;
font-weight: bold;
line-height: 14px;
line-height: 28rpx;
color: #fa5151;
.name {
color: #3d3d3d;
}
}
.content {
margin-top: 10px;
margin-top: 20rpx;
display: flex;
flex-direction: column;
gap: 10px;
gap: 20rpx;
div {
display: flex;
gap: 20px;
font-size: 11px;
gap: 40rpx;
font-size: 22rpx;
font-weight: 500;
line-height: 14px;
line-height: 28rpx;
color: #3d3d3d;
}
}
}
}
.selected {
margin-top: 10px;
margin-top: 20rpx;
color: #767676;
font-size: 11px;
font-size: 22rpx;
line-height: normal;
.t1 {
padding: 10px;
padding: 20rpx;
}
}
}
.date-wrap {
margin-top: 5px;
padding: 10px;
border-radius: 8px;
margin-top: 10rpx;
padding: 20rpx;
border-radius: 16rpx;
background-color: #fff;
.date-title {
color: #3d3d3d;
font-size: 14px;
font-size: 28rpx;
font-weight: 500;
line-height: 14px;
line-height: 28rpx;
}
.date-list {
.list {
flex: 1;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 6px;
margin-right: 6px;
gap: 12rpx;
margin-right: 12rpx;
.item {
aspect-ratio: 1;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 6px 0;
align-items: center;
padding: 12rpx 0;
background: #f6f7f7;
border-radius: 8px;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
border-radius: 16rpx;
box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.1);
color: #3d3d3d;
font-size: 24rpx;
font-weight: 500;
.price {
color: #fa5151;
}
}
}
.more {
font-size: 24rpx;
}
}
}
.overview {
padding: 20rpx;
background-color: #fff;
border-radius: 16rpx;
margin-top: 10rpx;
.title {
font-size: 28rpx;
font-weight: 500;
line-height: 28rpx;
color: #3d3d3d;
}
.content {
margin-top: 20rpx;
display: flex;
flex-direction: column;
gap: 40rpx;
padding: 20rpx 0;
color: #3d3d3d;
background-color: #f3f3f3;
border-radius: 16rpx;
font-size: 24rpx;
.item {
display: flex;
align-items: center;
div {
flex: 0 0 192rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
img {
height: 40rpx;
width: 40rpx;
}
}
ul {
padding: 0;
}
}
}
.time-line-wrap {
margin-top: 20rpx;
.time-line {
&:last-child {
/* :deep(.content-wrap) {
padding-bottom: 0;
padding-top: 20rpx;
} */
:deep(.date) {
&::after {
display: none;
}
}
}
}
.t1 {
font-size: 24rpx;
font-weight: 500;
line-height: 28rpx;
color: #3d3d3d;
margin-right: 16rpx;
}
.t2 {
font-size: 24rpx;
font-weight: normal;
line-height: normal;
color: rgba(9, 116, 245, 0.6);
}
.t3 {
font-size: 24rpx;
font-weight: normal;
line-height: normal;
color: #3d3d3d;
}
.icon {
height: 32rpx;
width: 32rpx;
vertical-align: middle;
}
.introduce {
display: flex;
padding: 20rpx 10rpx;
border-radius: 16rpx;
background: #f3f3f3;
img {
width: 204rpx;
height: 144rpx;
border-radius: 8rpx;
margin-right: 20rpx;
}
.text-wrap {
flex-direction: column;
align-items: flex-start;
}
}
}
}
}
.footer {
height: 196rpx;
border-radius: 16rpx 16rpx 0rpx 0rpx;
background: #ffffff;
padding: 20rpx 20rpx 0 42rpx;
align-items: flex-start;
.like {
display: flex;
flex-direction: column;
align-items: center;
font-size: 22rpx;
font-weight: normal;
line-height: 26rpx;
color: #3d3d3d;
.wd-icon {
font-size: 44rpx;
margin-bottom: 10rpx;
}
}
button {
margin: 0;
width: 240rpx;
height: 88rpx;
border-radius: 118rpx;
color: #fff;
background-color: #fa5151;
box-sizing: border-box;
}
}
}
......
src/pages/assistingAgriculture/RouteDetails/timeLine.vue 0 → 100644
View file @ f94328d1
<template>
<div class="time-line">
<div class="date">
<span>{{ props.date }}</span>
</div>
<div class="content-wrap">
<slot></slot>
</div>
</div>
</template>
<script setup>
import { defineProps } from 'vue';
const props = defineProps({
date: {
type: String,
default: '7:00',
},
});
</script>
<style lang="scss" scoped>
.time-line {
display: flex;
.date {
flex: 0 0 60px;
text-align: center;
margin-right: 10px;
color: #767676;
position: relative;
&::after {
content: '';
display: block;
height: 100%;
width: 0;
border-right: 1px dashed #767676;
position: absolute;
left: 50%;
top: 0;
transform: translateX(-1px);
}
span {
z-index: 1;
position: relative;
display: inline-block;
padding: 5px;
background-color: #fff;
}
}
.content-wrap {
flex: 1;
padding: 5px 0 25px;
display: flex;
flex-direction: column;
gap: 6px;
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment