新建 detail 分支
通过 Git 管理项目，养成良好的开发习惯，可以创建分支。最后开发完可以合并分支。
1.创建新分支并且跳转到改分支上
git checkout -b detail02
2.查看分支
git branch
房屋具体信息展示
1. 创建信息子组件并传递房屋信息
2. 子组件获取数据渲染
3. 页面布局
.infos { padding: 16px; background-color: #fff; .name { font-weight: 700; font-size: 20px; color: #333; text-align: justify; line-height: 24px; overflow: hidden; margin-bottom: 6px; } .tag { margin: 10px 0; .item { font-size: 12px; margin: 0 2px; padding: 1px 3px; color: #0080ff; background: #fcfcfc; } } .extra { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; margin: 12px 0; border-radius: 5px; font-size: 12px; background-color: #f5f7fa; .right { color: #0080ff; } } .comment { .score { font-size: 18px; font-weight: 700; color: #333; } .title { color: #333; font-weight: 700; margin: 0 3px; } .brief { color: #666; } } .position { .address { font-size: 14px; font-weight: 700; color: #333; } } }
效果：
信息公共组件框架搭建
完整代码:
<template> <div class="section"> <div class="header"> <h2 class="title">{{title}}</h2> </div> <div class="content"> <slot> <h3>我是默认内容</h3> </slot> </div> <div class="footer" v-if="moreText.length" > <span class="more">{{moreText}}</span> <van-icon name="arrow" /> </div> </div> </template> <script setup> defineProps({ title: { type: String, default: "默认标题" }, moreText: { type: String, default: "" } }) </script> <style lang="less" scoped> .section { padding: 0 15px; margin-top: 12px; border-top: 5px solid #f2f3f4; background-color: #fff; .header { height: 50px; line-height: 50px; border-bottom: 1px solid #eee; } .title { font-size: 20px; color: #333; } .content { padding: 8px 0; } .footer { display: flex; justify-content: flex-end; align-items: center; height: 44px; line-height: 44px; color: var(--primary-color); font-size: 14px; font-weight: 600; } } </style>
房屋设施
1. 创建房屋设施子组件并传递房屋信息
2. 子组件获取数据渲染页面
效果：
3. 页面布局
.facility-inner { padding: 5px 0; border-radius: 6px; font-size: 12px; background-color: #fff; .item { display: flex; margin: 25px 0; .head { width: 90px; text-align: center; img { width: 20px; height: 20px; } .text { margin-top: 5px; color: #000; } } .list { flex: 1; display: flex; flex-wrap: wrap; align-items: center; .iten { display: flex; align-items: center; box-sizing: border-box; width: 50%; margin: 4px 0; .icon { margin: 0 6px; } .text { color: #333; } } } } }
效果：
Git 管理和代码托管（github）
1.添加到暂存区
git add .
2.添加到仓库
git commit -m "detail02分支"
3.推送代码
git push -u origin detail02
4.将本地的 detail02 分支 合并到主分支上master （注意要先切换在主分支上）
git checkout mater
5.分支合并
git merge detail02
6.更新远程仓库 detail02分支
git push
7.删除 detail02 分支
git branch -d detail02
补充：
网络数据请求地址数据
项目github 地址：https://github.com/fdfd-0313/cz-trip.git
