Skip to content

B
buildingAgricultureSharing-miniapp
Commit d591af25 authored by 张娇（东信）'s avatar 张娇（东信）
Browse files
Options

Merge remote-tracking branch 'origin/master'

parents dfe6c037 7584cebb
Hide whitespace changes
Inline Side-by-side
Showing with 421 additions and 20 deletions
src/pages.json
View file @ d591af25
......@@ -95,7 +95,7 @@
{
"path": "pages/RouteDetails/RouteDetails",
"style": {
"navigationBarTitleText": "线路详情",
"navigationBarTitleText": "线路详情"
}
}
],
......
src/pages/RouteDetails/RouteDetails.vue
View file @ d591af25
<template>
<view>
<view class="container">
<view class="bac-img">
<img class="bac" src="/static/rural/route.png" style="width: 750rpx; height: 440rpx" />
</view>
</view>
</view>
<div class="route-details">
<scroll-view class="container" scroll-y>
<!-- 乱播 -->
<div class="banner">
<wd-swiper
:list="swiperList"
autoplay
:indicator="{ type: 'fraction' }"
indicatorPosition="bottom-right"
></wd-swiper>
</div>
<div style="padding: 0 20rpx">
<!-- 价格 -->
<div class="price-info">
<div class="price flex-align-center">
<p class="t1">¥299.00起</p>
<p class="t2">月销2K+份</p>
</div>
<div class="name">红枫湖+青岩古镇+云漫湖+云顶高坡景区一日游</div>
<div class="tags flex-align-center">
<p>无购物</p>
<p>无自费</p>
</div>
</div>
<!-- 保障 -->
<div class="guarantee">
<div>
<p class="label">预定</p>
<div class="flex-between list">
<div>
<wd-icon name="check-circle"></wd-icon>
立即确认
</div>
<div>
<wd-icon name="info-circle"></wd-icon>
有条件退
</div>
<div>
<wd-icon name="check-circle"></wd-icon>
23:00前可订明日
</div>
</div>
</div>
<div>
<p class="label">保障</p>
<div>7*12服务保障 . 承诺不加价</div>
</div>
</div>
<!-- 评论 -->
<div class="comment-wrap">
<div class="comment">
<div class="top flex-between">
<div class="title flex-align-center">
<p class="t1">点评</p>
<img src="/src/static/comment/emoji.png" />
<p class="t2">
4.9
<span>/5分</span>
</p>
</div>
<div class="link">查看全部(526) ></div>
</div>
<div class="tags">
<p>景色优美 （153）</p>
<p>物超所值（44）</p>
<p>线路合理（44）</p>
</div>
<div class="user">
<div class="user-name flex-align-center">
<img src="/src/static/comment/2.png" />
<p>不爱吃鱼的小猫咪</p>
</div>
<div class="content">这里是评价文案这里是评价文案这里是评价文案这里是评价文案</div>
</div>
</div>
<div class="album">
<div class="top flex-between">
<div class="title">用户相册</div>
<div class="link">查看全部(526) ></div>
</div>
<div class="img-list">
<wd-img
v-for="v in 5"
:key="v"
:src="`/src/static/comment/${v}.png`"
enable-preview
/>
</div>
</div>
</div>
<p class="choose-package-text">选择套餐·日期</p>
<!-- 套餐 -->
<div class="package-wrap">
<p class="title">选择套餐</p>
<div class="package-list">
<div class="package-item" v-for="v in 2" :key="v">
<div class="price flex-between">
<p class="name">套餐1</p>
<p>¥299.00起</p>
</div>
<div class="content">
<div>
<p>团</p>
<p>最多团25人团</p>
</div>
<div>
<p>车</p>
<p>大巴2+1坐席(不包返)</p>
</div>
<div>
<p>景</p>
<p>4个景点</p>
</div>
<div>
<p>吃</p>
<p>含1个午餐</p>
</div>
</div>
</div>
</div>
<div class="selected">
<p>已选</p>
<p class="t1">
2+1豪华大巴 + 红枫湖 + 青岩古镇 + 云漫湖+云顶高坡 + 单程票 + 成人门票 + 午餐 + 晚餐 +
导游服务
</p>
<p>贵阳触发</p>
</div>
</div>
<!-- 日期 -->
<div class="date-wrap">
<div class="date-title">选择日期</div>
<div class="date-list flex-between">
<div class="list">
<div class="item" v-for="v in 4" :key="v">
<p class="week">星期一</p>
<p class="date">02-30</p>
<p class="price">¥299.00</p>
</div>
</div>
<div class="more">更多></div>
</div>
</div>
</div>
</scroll-view>
<div class="footer">123</div>
</div>
</template>
<script setup lang="ts"></script>
<script setup>
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',
'https://registry.npmmirror.com/wot-design-uni-assets/*/files/panda.jpg',
'https://registry.npmmirror.com/wot-design-uni-assets/*/files/moon.jpg',
'https://registry.npmmirror.com/wot-design-uni-assets/*/files/meng.jpg',
]);
</script>
<style lang="scss" scoped>
page {
uni-page-body {
height: 100%;
background-color: #eaf9f1;
}
.container {
position: relative;
left: 0rpx;
top: 0rpx;
width: 750rpx;
height: 440rpx;
}
.bac {
.route-details {
height: 100%;
display: flex;
margin-top: -80rpx;
flex-direction: column;
.container {
flex-grow: 1;
height: 69px;
.banner {
:deep(.wd-swiper) {
width: 375px;
height: 220px;
uni-swiper {
width: 100%;
height: 100%;
}
}
}
.price-info {
background-color: #fff;
border-radius: 8px;
padding: 10px;
margin-top: 10px;
.price {
.t1 {
color: #fa5151;
font-size: 18px;
}
.t2 {
margin-left: 10px;
font-size: 12px;
color: #767676;
}
}
.name {
font-size: 14px;
color: #3d3d3d;
margin: 10px 0 15px;
font-weight: 500;
}
.tags {
gap: 10px;
p {
padding: 5px;
font-size: 8px;
font-weight: 500;
color: #3d3d3d;
border: 1px solid #d8d8d8;
border-radius: 150px;
}
}
}
.guarantee {
background: linear-gradient(180deg, #feeeee 0%, #ffffff 100%);
padding: 10px;
border-radius: 8px;
margin-top: 5px;
& > div {
display: flex;
font-size: 11px;
line-height: 18px;
font-weight: 500;
color: #767676;
&:first-child {
margin-bottom: 10px;
}
.label {
color: #ff494e;
margin-right: 25px;
}
.list {
gap: 15px;
.wd-icon {
color: #ff494e;
margin-right: 2px;
font-size: 14px;
}
}
}
}
.comment-wrap {
padding: 10px;
margin-top: 5px;
border-radius: 8px;
background: #fff;
.comment {
.title {
gap: 10px;
.t1 {
font-size: 14px;
font-weight: 500;
color: #3d3d3d;
}
.t2 {
font-size: 12px;
color: #0974f5;
span {
font-size: 8px;
color: #abaaaa;
}
}
img {
width: 12px;
height: 12px;
}
}
.top {
.link {
font-size: 12px;
font-weight: 500;
color: #0974f5;
}
}
.tags {
margin-top: 10px;
display: flex;
gap: 20px;
p {
border-radius: 150px;
padding: 5px 8px;
color: #3d3d3d;
font-size: 8px;
font-weight: 500;
line-height: 8px;
background: rgba(9, 116, 245, 0.1);
}
}
.user {
margin-top: 10px;
font-size: 14px;
font-weight: 500;
color: #3d3d3d;
line-height: normal;
.user-name {
img {
border-radius: 4px;
width: 24px;
height: 24px;
margin-right: 8px;
}
}
}
.content {
margin-top: 5px;
}
}
.album {
margin-top: 22px;
.top {
.title {
font-size: 14px;
color: #3d3d3d;
}
.link {
font-size: 12px;
color: #0974f5;
}
}
.img-list {
margin-top: 10px;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 5px;
.wd-img {
aspect-ratio: 1;
}
}
}
}
.choose-package-text {
font-size: 14px;
font-weight: 500;
line-height: 14px;
color: #fa5151;
margin-top: 20px;
}
.package-wrap {
margin-top: 10px;
padding: 10px;
border: 8px;
background-color: #fff;
.title {
color: #3d3d3d;
font-size: 14px;
font-weight: 500;
line-height: 14px;
}
.package-list {
margin-top: 10px;
display: grid;
gap: 20px;
grid-template-columns: 1fr 1fr;
.package-item {
border-radius: 8px;
opacity: 1;
padding: 10px;
background: linear-gradient(180deg, #feeeee 0%, #ffffff 100%);
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.08);
.price {
font-size: 12px;
font-weight: bold;
line-height: 14px;
color: #fa5151;
.name {
color: #3d3d3d;
}
}
.content {
margin-top: 10px;
display: flex;
flex-direction: column;
gap: 10px;
div {
display: flex;
gap: 20px;
font-size: 11px;
font-weight: 500;
line-height: 14px;
color: #3d3d3d;
}
}
}
}
.selected {
margin-top: 10px;
color: #767676;
font-size: 11px;
line-height: normal;
.t1 {
padding: 10px;
}
}
}
.date-wrap {
margin-top: 5px;
padding: 10px;
border-radius: 8px;
background-color: #fff;
.date-title {
color: #3d3d3d;
font-size: 14px;
font-weight: 500;
line-height: 14px;
}
.date-list {
.list {
flex: 1;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 6px;
margin-right: 6px;
.item {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 6px 0;
background: #f6f7f7;
border-radius: 8px;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
}
}
}
}
}
}
</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