房产网站建设接单_徐州单身交友网站_百度推广一般要多少钱_网络营销推广机构

1.新建相关组件

以SightComment.vue为例占个位。

<template><!-- 景点评论 --><div class="page-sight-comment">巴拉巴拉巴拉巴拉~</div>
</template>

2.导入路由对象

文件地址：src\router\index.js

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import Search from '@/views/Search.vue'
import SightComment from '@/views/sight/SightComment.vue'
import SightDetail from '@/views/sight/SightDetail.vue'
//import*3.....略略略const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{path:'/sight/list',name:'SightList',component:SightList}{path:'/sight/comment/:id',name:'SightComment',component:SightComment},
//  {.....*3}]
})
export default router

3.导入主页跳转地址

文件地址：src\components\common\ListSight.vue

设置 “精选景点-更多”按键的跳转功能：

跳转到“1.新建相关组件”的SightDetail项目代码处

文件地址：src\components\home\Hot.vue

设置 “热门推荐-全部榜单”按键的跳转功能：

跳转到“1.新建相关组件”的SightList项目代码处

 4.新界面SightDetail的界面制作

4.1 页面头部景点大图

<script setup>
import { ref,onMounted } from 'vue'
import {useRouter} from 'vue-router'//用于控制页面跳转工具const router = useRouter()const goBack = ()=>{router.go(-1)//跳转至上一页（1:跳转至下一页）
} 
</script><template><!-- 景点详情 --><div class="page-sight-detail"><!-- 页面头部 --><van-nav-bar left-text="返回" left-arrow fixed @click-left="goBack"/><!-- 景点大图 --><div class="sight-banner"><van-image src="/static/home/hot/h1_max.jpg" width="100%" height="100%"/><div class="tips"><RouterLink class="pic-sts" :to="{name:'SightImage',params:{id:123}}"><van-icon name="video-o"/><div class="title">景点标题</div></RouterLink></div></div></div>
</template><style>
.page-sight-detail{.sight-banner{/* 定位 */position: relative;.tips{position: absolute;left: 10px;bottom: 10px;font-size: 16px;color: #fff;.pic-sts{color: #fff;border-radius: 5px;font-size: 14px;background-color: rgba(0,0,0,0.5);}}}
}
</style>

 展示结果

4.2 景点介绍组件布局

        <!-- 景点介绍 --><div class="sight-info"><div class="left"><div class="info-title"><strong>5分</strong><small>很棒</small></div><div class="info-tips">50 评论</div><van-icon name="arrow"/></div><div class="right"><div class="info-title"><span>景点介绍</span></div><div class="info-tips">开放时间、注意事项</div><van-icon name="arrow"/></div></div><!-- 地址信息 --><van-cell title="辽宁省沈阳市浑南区" icon="location-o" is-link :title-style="{'text-align':'left'}"><template #right-icon><van-icon name="arrow"/></template></van-cell><style>
.sight-info{/* 浮动 */display: flex;background-color: #fff;border-bottom: 1px solid #f6f6f6;& > div{flex: 1;position: relative;}.right{border-left: 1px solid #f6f6f6;}.info-title{text-align: left;padding: 5px 10px;strong{color: orange;    }}.info-tips{color: #999;font-size: 12px;text-align: left;padding: 5px 10px;}.van-icon{position: absolute;right: 5px;top: 5px;}}
</style>

展示结果

4.3 门票列表组件布局

<!-- 门票列表 --><div class="sight-ticket"><van-cell title="门票" icon="bookmark-o" title-style="text-align:left"/><div class="ticket-item"><div class="left"><div class="title">成人票</div><div class="tips"><van-icon name="clock-o"/><span>7点前可预定</span></div><div class="tags"><van-tag make type="primary">标签1</van-tag></div></div><div class="right"><div class="price"><span>￥</span><strong>65</strong></div><RouterLink :to="{}"><van-button type="warning" size="small">预定</van-button></RouterLink></div></div></div><style>
.sight-ticket{margin-top: 10px;background-color: #fff;.ticket-item{display: flex;border-bottom: 1px solid #f6f6f6;padding-bottom: 10px;.left{flex: 1px;text-align: left;/*居左排列*/padding: 5px 10px;.title{padding: 5px 0;}.tips{font-size: 12px;}}.right{width: 100px;.price{color: orange;strong{font-size: 20px;}}}}}
</style>

展示结果

5.热门评论组件

5.1 新建组件

为方便在其他区域调用，将评论区的制作代码单独分离出来。

5.2 用户评价组件布局

<script setup>
import {ref} from 'vue';
const value = ref(4.5)
const images = ['https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg','https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg"'
]
const show= ref(false)
const index=ref(0)
const onChange = (index)=>{index.value=index
}
</script><template><div class="comment-item-box"><div class="cmt-header"><div class="rate"><van-rate v-model="value" readonly void-icon="star" void-color="#eee"/></div><div class="user">张** 20180918</div></div><div class="cmt-content"><p>我走不出巴黎，请带上我的凤凰羽翼成为伦敦的新王</p></div><div class="cmt-imgs" @click="show=true"><van-image width="100"height="100"src="https://img.yzcdn.cn/vant/cat.jpeg"/><van-image width="100"height="100"src="https://img.yzcdn.cn/vant/cat.jpeg"/> <van-image width="100"height="100"src="https://img.yzcdn.cn/vant/cat.jpeg"/>   </div><van-image-preview :images="images" :show="show" @change="onChange"><template v-slot:index>第{{ index + 1 }}页</template></van-image-preview></div>
</template><style lang="less">
.comment-item-box{padding: 5px 10px;border-bottom: 1px solid #f6f6f6;.cmt-header{display: flex;.user{font-size: 12px;/*字体大小*/}}.cmt-content{color: #616161;padding: 5px 0;text-align: left;font-size: 12px;line-height: 2.0;  /* 行高 */}.cmt-imgs{padding: 5px;text-align: left;margin-right: 5px;}
}
</style>

5.1 SightDetail中引用

<script setup>
import CommentItem from '@/components/sight/CommentItem.vue';
</script>
<template><!-- 用户评价 --><div class="sight-comment"><van-cell title="热门评论" icon="comment-o" title-style="text-align:left"/><CommentItem/><RouterLink :to="{name:'SightComment',params:{id:12}}" class="link-more">查看更多</RouterLink></div>
</template>
<style>.sight-comment{margin-top: 10px;background-color: #fff;}.link-more{display: block;color:#666;padding: 10px;}
</style>