新建 detail 分支
通过 Git 管理项目，养成良好的开发习惯，可以创建分支。最后开发完可以合并分支。
1.创建新分支并且跳转到改分支上
git checkout -b detail02
2.查看分支
git branch
房东介绍模块
完整代码：
<template> <div class="landlord"> <DetailSection title="房东介绍" more-text="查看房东主页" > <div class="header"> <div class="left"> <div class="avatar"> <img :src="landlord.hotelLogo"> </div> <div class="info"> <div class="name">{{landlord.hotelName}}</div> <div class="tags"> <template v-for="(item,index) in landlord.hotelTags" :key="index" > <div class="item"> <span>{{item.tagText.text}}</span> <span class="diliver" v-if="index !==landlord.hotelTags.length -1" >|</span> </div> </template> </div> </div> </div> <div class="right"> <div class="contact"> 联系房东 </div> </div> </div> <div class="bootom"> <template v-for="(item,index) in landlord.hotelSummary" :key="index" > <div class="item"> <div class="title">{{item.title}}</div> <div class="score">{{ item.introduction }}</div> <div class="desc">{{ item.tip }}</div> </div> </template> </div> </DetailSection> </div> </template> <script setup> import DetailSection from "@/components/detail-section/detail-section.vue"; const props = defineProps({ landlord: { type: Object, default: () => ({}) } }) </script> <style lang="less" scoped> .landlord { .header { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; .left { display: flex; .avatar { img { width: 54px; height: 54px; } } .info { margin: 0px 6px; .name { font-size: 16px; font-weight: 800; } .tags { display: flex; margin: 6px 0px; color: #9d9d9d; .item { .diliver { margin: 5px; } } } } } .right { height: 24px; line-height: 24px; border-radius: 5px; padding: 0 12px; font-size: 12px; color: #fff; background-image: linear-gradient(90deg, #38b0de, #97cbff); } } .bootom { display: flex; justify-content: space-between; margin: 20px 4px; .item { font-size: 14px; .title { color: #999; } .score { margin: 5px 0; font-size: 18px; font-weight: 700; color: #333; } .desc { color: #666; } } } } </style>
效果：
热门评论模块
完整代码：
<template> <div class="comment"> <DetailSection title="热门评论" :more-text="`查看全部${comment.totalCount}条评论`" > <div class="comment-inner"> <div class="header"> <div class="left"> <div class="score"> <span class="text">{{comment.overall}}</span> <div class="line"></div> </div> </div> <div class="info"> <div class="title">{{comment.scoreTitle}}</div> <div class="count">{{comment.totalCount}}条评论</div> <div class="star"> <van-rate v-model="comment.overall" color="#38B0DE" size="14" readonly allow-half /> </div> </div> <div class="right"> <template v-for="(item,index) in comment.subScores" :key="index" > <span class="item">{{item}}</span> </template> </div> </div> <div class="tags"> <template v-for="(item,index) in comment.commentTagVo" :key="index" > <span class="item" :style="{ color: item.color, background: item.backgroundColor }" >{{item.text}}</span> </template> </div> <div class="content"> <div class="user"> <div class="avatar"> <img :src="comment.comment.userAvatars" /> </div> <div class="profile"> <div class="name">{{comment.comment.userName}}</div> <div class="date">{{comment.comment.checkInDate}}</div> </div> </div> <div class="text">{{comment.comment.commentDetail}}</div> </div> </div> </DetailSection> </div> </template> <script setup> import DetailSection from "@/components/detail-section/detail-section.vue"; const props = defineProps({ comment: { type: Object, default: () => ({}) } }) </script> <style lang="less" scoped> .comment-inner { padding: 10px 0; .header { display: flex; .left { display: flex; align-items: center; .score { width: 65px; height: 100%; color: #333; position: relative; .text { font-size: 48px; font-weight: 600; position: relative; z-index: 9; } .line { width: 65px; height: 6px; border-radius: 10px; background-color: #38b0de; position: absolute; z-index: 5; } } } .info { margin: 5px 20px; align-items: center; color: #333; .count { margin: 5px 0; color: #999; } } .right { display: flex; flex-wrap: wrap; flex: 1; justify-content: flex-end; .item { margin: 0 5px; font-size: 14px; color: #666; } } } .tags { display: flex; flex-wrap: wrap; margin: 10px 0; .item { padding: 3px 5px; margin-right: 8px; margin-top: 5px; border-radius: 8px; font-size: 14px; } } .content { border-radius: 8px; background-color: #fcfcfc; .user { display: flex; padding: 5px 0; .avatar { padding-top: 8px; padding-left: 8px; img { width: 44px; height: 44px; border-radius: 50%; } } .profile { padding-top: 8px; margin-left: 12px; .date { margin-top: 3px; color: #999; } } } .text { font-size: 14px; line-height: 18px; margin-top: 16px; } } } </style>
效果：
预定须知
完整代码：
<template> <div class="notice"> <DetailSection title="预定须知"> <div class="notice-inner"> <template v-for="(item,index) in orderRules" :key="index" > <div class="item"> <span class="title">{{item.title}}</span> <span class="intro">{{ item.introduction }}</span> <span class="tip" v-if="item.tips" >查看说明</span> </div> </template> </div> </DetailSection> </div> </template> <script setup> import DetailSection from "@/components/detail-section/detail-section.vue"; const props = defineProps({ orderRules: { type: Array, default: [] } }) </script> <style lang="less" scoped> .notice-inner { .item { display: flex; margin: 10px 0 20px 2px; font-size: 14px; .title { width: 64px; color: #333; } .intro { flex: 1; color: #333; } } } </style>
效果：
Git 管理和代码托管（github）
1.添加到暂存区
git add .
2.添加到仓库
git commit -m "detail03分支"
3.推送代码
git push -u origin detail03
4.将本地的 detail03 分支 合并到主分支上master （注意要先切换在主分支上）
git checkout mater
5.分支合并
git merge detail03
6.更新远程仓库 detail03分支
git push
7.删除 detail03 分支
git branch -d detail03
