【Vue3.0移动端项目--旅游网】-- 房屋信息和房屋设施

简介: 【Vue3.0移动端项目--旅游网】-- 房屋信息和房屋设施

新建 detail 分支


通过 Git 管理项目,养成良好的开发习惯,可以创建分支。最后开发完可以合并分支。

1.创建新分支并且跳转到改分支上

git checkout -b detail02

2.查看分支

git branch

image.png

房屋具体信息展示


1. 创建信息子组件并传递房屋信息

微信图片_20221012144809.png

2. 子组件获取数据渲染

微信图片_20221012144845.png

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;
    }
  }
}

效果:

微信图片_20221012144932.png

信息公共组件框架搭建

微信图片_20221012145009.png

完整代码:

<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. 创建房屋设施子组件并传递房屋信息

微信图片_20221012145102.png微信图片_20221012145119.png

2. 子组件获取数据渲染页面

微信图片_20221012145144.png

效果:

image.png

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;
        }
      }
    }
  }
}

微信图片_20221012145304.png

效果:

微信图片_20221012145328.png

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

相关文章
|
4月前
|
JavaScript 数据可视化
vue-cli学习一:vue脚手架的 vue-cli2和vue-cli3版本 创建vue项目,vue的初始化详解
这篇文章介绍了如何使用vue-cli 2和3版本来创建Vue项目,并详细说明了两者之间的主要区别。
168 5
vue-cli学习一:vue脚手架的 vue-cli2和vue-cli3版本 创建vue项目,vue的初始化详解
|
8天前
|
前端开发 JavaScript Java
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
53 13
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
|
9天前
|
人工智能 JavaScript 关系型数据库
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
55 14
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
|
7天前
|
SQL JavaScript 安全
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
44 11
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
|
12天前
|
人工智能 JavaScript 安全
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
55 13
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
|
4月前
|
JavaScript 容器
乾坤qiankun框架搭建 主应用为vue3的项目。
乾坤qiankun框架搭建 主应用为vue3的项目。
300 2
|
4月前
|
JavaScript
Vue CLi脚手架创建第一个VUE项目
Vue CLi脚手架创建第一个VUE项目
56 3
|
10天前
|
监控 JavaScript 前端开发
ry-vue-flowable-xg:震撼来袭!这款基于 Vue 和 Flowable 的企业级工程项目管理项目,你绝不能错过
基于 Vue 和 Flowable 的企业级工程项目管理平台,免费开源且高度定制化。它覆盖投标管理、进度控制、财务核算等全流程需求,提供流程设计、部署、监控和任务管理等功能,适用于企业办公、生产制造、金融服务等多个场景,助力企业提升效率与竞争力。
61 12
|
28天前
|
资源调度 JavaScript 前端开发
创建vue3项目步骤以及安装第三方插件步骤【保姆级教程】
这是一篇关于创建Vue项目的详细指南,涵盖从环境搭建到项目部署的全过程。
136 1
|
3月前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具,正确配置和运行预渲染操作,结合其他 SEO 策略,可以实现更好的搜索引擎优化效果。同时,需要不断地监控和优化预渲染效果,以适应不断变化的搜索引擎环境和用户需求。

热门文章

最新文章