feat:更新图片
This commit is contained in:
@@ -21,10 +21,7 @@
|
|||||||
这是景区最完整的打法,全程顺着响水河往下游走,不用爬坡回头,把最精华的水景一次看个够。从古朴的石桥热身,一路走到碧蓝的卧龙潭收尾,节奏刚刚好。
|
这是景区最完整的打法,全程顺着响水河往下游走,不用爬坡回头,把最精华的水景一次看个够。从古朴的石桥热身,一路走到碧蓝的卧龙潭收尾,节奏刚刚好。
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="overview-image-card is-green-blue">
|
<image class="overview-image-card" :src="overviewImage" mode="aspectFill" />
|
||||||
<text>小七孔全景</text>
|
|
||||||
<text class="overview-image-subtitle">演示占位图</text>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view class="detail-section-title">这几个地方不能错过</view>
|
<view class="detail-section-title">这几个地方不能错过</view>
|
||||||
<view class="detail-paragraph">
|
<view class="detail-paragraph">
|
||||||
@@ -36,10 +33,7 @@
|
|||||||
<text class="detail-highlight">{{ spot.index }} {{ spot.name }}</text>
|
<text class="detail-highlight">{{ spot.index }} {{ spot.name }}</text>
|
||||||
{{ spot.desc }}
|
{{ spot.desc }}
|
||||||
</view>
|
</view>
|
||||||
<view class="overview-image-card" :class="spot.imageTone">
|
<image class="overview-image-card" :src="spot.image" mode="aspectFill" />
|
||||||
<text>{{ spot.name }}</text>
|
|
||||||
<text class="overview-image-subtitle">演示占位图</text>
|
|
||||||
</view>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<view class="detail-section-title">一天大概这样分</view>
|
<view class="detail-section-title">一天大概这样分</view>
|
||||||
@@ -82,9 +76,7 @@
|
|||||||
<view class="detail-action-label">套票推荐</view>
|
<view class="detail-action-label">套票推荐</view>
|
||||||
<view class="overview-combo-card">
|
<view class="overview-combo-card">
|
||||||
<view class="overview-combo-body">
|
<view class="overview-combo-body">
|
||||||
<view class="overview-combo-cover is-green-blue">
|
<image class="overview-combo-cover" :src="goodsImage" mode="aspectFill" />
|
||||||
<text>小七孔全景</text>
|
|
||||||
</view>
|
|
||||||
<view class="overview-combo-info">
|
<view class="overview-combo-info">
|
||||||
<view class="overview-combo-name">小七孔畅玩套票</view>
|
<view class="overview-combo-name">小七孔畅玩套票</view>
|
||||||
<view class="overview-combo-desc">门票 + 观光车 + 2 项体验,第一次来最省心</view>
|
<view class="overview-combo-desc">门票 + 观光车 + 2 项体验,第一次来最省心</view>
|
||||||
@@ -94,7 +86,7 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<button class="overview-combo-button" @click="showToast('跳转套票详情页:小七孔畅玩套票')">
|
<button class="overview-combo-button" @click="goodsDetail({ commodityId: '1032119438058270721' })">
|
||||||
查看套票详情
|
查看套票详情
|
||||||
</button>
|
</button>
|
||||||
</view>
|
</view>
|
||||||
@@ -105,7 +97,7 @@
|
|||||||
v-for="question in faq"
|
v-for="question in faq"
|
||||||
:key="question"
|
:key="question"
|
||||||
class="detail-faq-chip"
|
class="detail-faq-chip"
|
||||||
@click="showToast(`追问:${question}`)"
|
@click="sendReply(question)"
|
||||||
>
|
>
|
||||||
{{ question }}
|
{{ question }}
|
||||||
</view>
|
</view>
|
||||||
@@ -119,36 +111,40 @@
|
|||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import TopNavBar from "@/components/TopNavBar/index.vue";
|
import TopNavBar from "@/components/TopNavBar/index.vue";
|
||||||
|
import { SEND_MESSAGE_CONTENT_TEXT } from "@/constant/constant";
|
||||||
|
|
||||||
|
const overviewImage = "https://one-feel-config-images-bucket.oss-cn-chengdu.aliyuncs.com/preview/fulldoc1.png";
|
||||||
|
const goodsImage = "https://one-feel-config-images-bucket.oss-cn-chengdu.aliyuncs.com/preview/fulldoc7.jpg";
|
||||||
|
|
||||||
const scenicSpots = [
|
const scenicSpots = [
|
||||||
{
|
{
|
||||||
index: "①",
|
index: "①",
|
||||||
name: "小七孔古桥",
|
name: "小七孔古桥",
|
||||||
imageTone: "is-stone",
|
image: "https://one-feel-config-images-bucket.oss-cn-chengdu.aliyuncs.com/preview/fulldoc2.png",
|
||||||
desc: "这是整个景区名字的由来,也是你的第一站。这座建于清道光年间的石桥横跨在涵碧潭上,七孔拱桥倒映在碧绿的水里,怎么拍都像画。记得低头看看桥下的水,平时碧蓝翠绿,汛期还能看到“半河清水半河浊水”的奇观。",
|
desc: "这是整个景区名字的由来,也是你的第一站。这座建于清道光年间的石桥横跨在涵碧潭上,七孔拱桥倒映在碧绿的水里,怎么拍都像画。记得低头看看桥下的水,平时碧蓝翠绿,汛期还能看到“半河清水半河浊水”的奇观。",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
index: "②",
|
index: "②",
|
||||||
name: "68 级跌水瀑布 & 拉雅瀑布",
|
name: "68 级跌水瀑布 & 拉雅瀑布",
|
||||||
imageTone: "is-green",
|
image: "https://one-feel-config-images-bucket.oss-cn-chengdu.aliyuncs.com/preview/fulldoc3.png",
|
||||||
desc: "过了古桥没多久,你会听到水声越来越大。这一段沿着河谷走,68 级瀑布层层叠叠、一级一级往下淌;拉雅瀑布更直接,几乎是从路边喷涌而出,水雾扑面而来。夏天走这段就像开了天然空调,体感一下凉好几度。",
|
desc: "过了古桥没多久,你会听到水声越来越大。这一段沿着河谷走,68 级瀑布层层叠叠、一级一级往下淌;拉雅瀑布更直接,几乎是从路边喷涌而出,水雾扑面而来。夏天走这段就像开了天然空调,体感一下凉好几度。",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
index: "③",
|
index: "③",
|
||||||
name: "水上森林",
|
name: "水上森林",
|
||||||
imageTone: "is-forest",
|
image: "https://one-feel-config-images-bucket.oss-cn-chengdu.aliyuncs.com/preview/fulldoc4.png",
|
||||||
desc: "这一段特别有意思,路是修在水里的,树也是长在水里的。你可以踩着石墩在水面上走,脚边是清凉的溪水流过,两旁是茂密的喀斯特森林,像一脚闯进了绿野仙踪的世界。",
|
desc: "这一段特别有意思,路是修在水里的,树也是长在水里的。你可以踩着石墩在水面上走,脚边是清凉的溪水流过,两旁是茂密的喀斯特森林,像一脚闯进了绿野仙踪的世界。",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
index: "④",
|
index: "④",
|
||||||
name: "鸳鸯湖",
|
name: "鸳鸯湖",
|
||||||
imageTone: "is-green-blue",
|
image: "https://one-feel-config-images-bucket.oss-cn-chengdu.aliyuncs.com/preview/fulldoc5.png",
|
||||||
desc: "这里是全程玩水的重头戏。湖面被树木的根系分割成无数条迷宫般的小水道,一定要去划船(推荐透明船),钻进那些只有船能过的狭窄水道,阳光透过树叶洒在水面上,光影美得不真实。",
|
desc: "这里是全程玩水的重头戏。湖面被树木的根系分割成无数条迷宫般的小水道,一定要去划船(推荐透明船),钻进那些只有船能过的狭窄水道,阳光透过树叶洒在水面上,光影美得不真实。",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
index: "⑤",
|
index: "⑤",
|
||||||
name: "卧龙潭",
|
name: "卧龙潭",
|
||||||
imageTone: "is-green",
|
image: "https://one-feel-config-images-bucket.oss-cn-chengdu.aliyuncs.com/preview/fulldoc6.png",
|
||||||
desc: "路线的终点,也是颜值天花板。潭水蓝得像一块巨大的蓝宝石,平静得没有一丝波纹。如果时间赶得上,一定要体验这里的漂流,从高处滑下、穿过树林,刺激又凉快,是整趟行程的高潮。",
|
desc: "路线的终点,也是颜值天花板。潭水蓝得像一块巨大的蓝宝石,平静得没有一丝波纹。如果时间赶得上,一定要体验这里的漂流,从高处滑下、穿过树林,刺激又凉快,是整趟行程的高潮。",
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
@@ -169,9 +165,21 @@ const showToast = (title) => {
|
|||||||
icon: "none",
|
icon: "none",
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
const goodsDetail = (item) => {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/goods/index?commodityId=${item.commodityId}`,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const sendReply = (item) => {
|
||||||
|
uni.navigateBack();
|
||||||
|
uni.$emit(SEND_MESSAGE_CONTENT_TEXT, item);
|
||||||
|
};
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
@import "./styles/detail.scss";
|
@import "./styles/detail.scss";
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|||||||
@@ -530,43 +530,12 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.overview-image-card {
|
.overview-image-card {
|
||||||
display: flex;
|
display: block;
|
||||||
|
width: 100%;
|
||||||
height: 160px;
|
height: 160px;
|
||||||
margin: 4px 0 16px;
|
margin: 4px 0 16px;
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
border-radius: 14px;
|
border-radius: 14px;
|
||||||
color: #fff;
|
|
||||||
background: linear-gradient(135deg, #1d9e75, #0f6e56);
|
background: linear-gradient(135deg, #1d9e75, #0f6e56);
|
||||||
font-size: 22px;
|
|
||||||
font-weight: 900;
|
|
||||||
line-height: 28px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.overview-image-card.is-green-blue {
|
|
||||||
background: linear-gradient(135deg, #1d9e75, #185fa5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.overview-image-card.is-stone {
|
|
||||||
background: linear-gradient(135deg, #888780, #5f5e5a);
|
|
||||||
}
|
|
||||||
|
|
||||||
.overview-image-card.is-green {
|
|
||||||
background: linear-gradient(135deg, #1d9e75, #0f6e56);
|
|
||||||
}
|
|
||||||
|
|
||||||
.overview-image-card.is-forest {
|
|
||||||
background: linear-gradient(135deg, #639922, #3b6d11);
|
|
||||||
}
|
|
||||||
|
|
||||||
.overview-image-subtitle {
|
|
||||||
margin-top: 8px;
|
|
||||||
color: rgba(255, 255, 255, 0.72);
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: 700;
|
|
||||||
line-height: 18px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.overview-spots-wrap {
|
.overview-spots-wrap {
|
||||||
@@ -640,19 +609,12 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.overview-combo-cover {
|
.overview-combo-cover {
|
||||||
display: flex;
|
display: block;
|
||||||
width: 78px;
|
width: 78px;
|
||||||
height: 78px;
|
height: 78px;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
color: #fff;
|
|
||||||
background: linear-gradient(135deg, #1d9e75, #185fa5);
|
background: linear-gradient(135deg, #1d9e75, #185fa5);
|
||||||
font-size: 12px;
|
|
||||||
font-weight: 900;
|
|
||||||
line-height: 16px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.overview-combo-info {
|
.overview-combo-info {
|
||||||
|
|||||||
Reference in New Issue
Block a user