VUE3实现好看的世界建筑中国建筑网站源码

news2024/12/22 15:52:22

在这里插入图片描述
在这里插入图片描述

文章目录

  • 1.设计来源
    • 1.1 网站主界面
    • 1.2 登录界面
    • 1.3 注册界面
    • 1.4 特色建筑展览界面
    • 1.5 世界建筑介绍界面
    • 1.6 世界建筑介绍 - 详情界面
    • 1.7 中国建筑介绍界面
    • 1.8 中国建筑介绍 - 详情界面
    • 1.9 关于我们界面
  • 2.效果和源码
    • 2.1 动态效果
    • 2.2 源代码
    • 2.3 目录结构
  • 源码下载
  • 万套模板，程序开发，在线开发，在线沟通

作者：xcLeigh
文章地址：https://blog.csdn.net/weixin_43151418/article/details/143774127

VUE3实现好看的世界建筑中国建筑网站源码，世界建筑网站，中国建筑网站，建筑设计网站源码，大作业，毕业设计，网站实现了世界建筑介绍，特色建筑展览，中国建筑介绍，关于我们，登录注册页面，详细信息介绍等功能块，内置九个模板页面，实现了轮播图、视频、表单、TAB、导航栏、底部栏、列表、图文组合、返回顶部等功能，让你快速搭建自己的网站，注释完整，代码规范，各种风格都有，代码上手简单，代码独立，可以直接运行使用。也可直接预览效果。

1.设计来源

        本文章是分类专栏下的【VUE实战案例】篇，内置VUE相关的实战案列文章，每篇实战案例都 附带源码，涉及各行各业的网站模板，专为大作业毕业设计打造，持续更新中，欢迎大家关注，一起学习交流。

✂ 点击快速进入专栏
在这里插入图片描述

1.1 网站主界面

        网站主界面,通过内容左右排版，单内容排版来展示主题内容。通过轮播图演示系统相关内容，轮播图可以加超链接文字等内容；滚动页面内容时固定头部导航菜单；通过图文结合的方式来展示网站内容，具体内容主题自定义，适用于各种网站，各种官网，直接嵌套使用；鼠标悬浮动态旋转的网站图标；鼠标点击图片放大查看效果；返回顶部的动态小图标等，更多功能点等你发现。代码上手简单，内容丰富，内涵素材快来打造属于自己的世界建筑网站吧！！！（注：因为页面是完整截取的，原图太大，这是压缩后的效果图，有些失真，真实效果查看下面的视频演示。）

在这里插入图片描述

轮播图1效果，里面文字图片可以自定义

在这里插入图片描述

轮播图2效果，里面文字图片可以自定义

在这里插入图片描述

轮播图3效果，里面文字图片可以自定义

在这里插入图片描述

轮播图4效果，里面文字图片可以自定义

在这里插入图片描述

轮播图5效果，里面文字图片可以自定义

在这里插入图片描述

1.2 登录界面

        登录界面,根据背景透明度，来显示登录框，内容可以自定义，根据自己的需求调整，更多功能点等你发现。代码上手简单，内容丰富，内涵素材快来打造属于自己的世界建筑网站吧！！！（注：因为页面是完整截取的，原图太大，这是压缩后的效果图，有些失真，真实效果查看下面的视频演示。）

在这里插入图片描述

1.3 注册界面

        注册界面,根据背景透明度，来显示注册框，内容可以自定义，根据自己的需求调整，更多功能点等你发现。代码上手简单，内容丰富，内涵素材快来打造属于自己的世界建筑网站吧！！！（注：因为页面是完整截取的，原图太大，这是压缩后的效果图，有些失真，真实效果查看下面的视频演示。）

在这里插入图片描述

1.4 特色建筑展览界面

        特色建筑展览界面,通过内容左右排版，单内容排版来展示主题内容。通过轮播图演示系统相关内容，轮播图可以加超链接文字等内容；滚动页面内容时固定头部导航菜单；通过图文结合的方式来展示网站内容，具体内容主题自定义，适用于各种网站，各种官网，直接嵌套使用；鼠标悬浮动态旋转的网站图标；鼠标点击图片放大查看效果；返回顶部的动态小图标等，更多功能点等你发现。点击景点海报图，可以查看大图。代码上手简单，内容丰富，内涵素材快来打造属于自己的世界建筑网站吧！！！（注：因为页面是完整截取的，原图太大，这是压缩后的效果图，有些失真，真实效果查看下面的视频演示。）

在这里插入图片描述

1.5 世界建筑介绍界面

        世界建筑介绍界面,通过内容左右排版，单内容排版来展示主题内容。通过轮播图演示系统相关内容，轮播图可以加超链接文字等内容；滚动页面内容时固定头部导航菜单；通过图文结合的方式来展示网站内容，具体内容主题自定义，适用于各种网站，各种官网，直接嵌套使用；鼠标悬浮动态旋转的网站图标；鼠标点击图片放大查看效果；返回顶部的动态小图标等，更多功能点等你发现。代码上手简单，内容丰富，内涵素材快来打造属于自己的世界建筑网站吧！！！（注：因为页面是完整截取的，原图太大，这是压缩后的效果图，有些失真，真实效果查看下面的视频演示。）

在这里插入图片描述

1.6 世界建筑介绍 - 详情界面

        世界建筑介绍 - 详情界面,通过内容左右排版，单内容排版来展示主题内容。通过轮播图演示系统相关内容，轮播图可以加超链接文字等内容；滚动页面内容时固定头部导航菜单；通过图文结合的方式来展示网站内容，具体内容主题自定义，适用于各种网站，各种官网，直接嵌套使用；鼠标悬浮动态旋转的网站图标；鼠标点击图片放大查看效果；返回顶部的动态小图标等，更多功能点等你发现。代码上手简单，内容丰富，内涵素材快来打造属于自己的世界建筑网站吧！！！（注：因为页面是完整截取的，原图太大，这是压缩后的效果图，有些失真，真实效果查看下面的视频演示。）

在这里插入图片描述

1.7 中国建筑介绍界面

        中国建筑介绍界面,通过内容左右排版，单内容排版来展示主题内容。通过轮播图演示系统相关内容，轮播图可以加超链接文字等内容；滚动页面内容时固定头部导航菜单；通过图文结合的方式来展示网站内容，具体内容主题自定义，适用于各种网站，各种官网，直接嵌套使用；鼠标悬浮动态旋转的网站图标；鼠标点击图片放大查看效果；返回顶部的动态小图标等，更多功能点等你发现。代码上手简单，内容丰富，内涵素材快来打造属于自己的世界建筑网站吧！！！（注：因为页面是完整截取的，原图太大，这是压缩后的效果图，有些失真，真实效果查看下面的视频演示。）

在这里插入图片描述

1.8 中国建筑介绍 - 详情界面

        中国建筑介绍 - 详情界面,通过内容左右排版，单内容排版来展示主题内容。通过轮播图演示系统相关内容，轮播图可以加超链接文字等内容；滚动页面内容时固定头部导航菜单；通过图文结合的方式来展示网站内容，具体内容主题自定义，适用于各种网站，各种官网，直接嵌套使用；鼠标悬浮动态旋转的网站图标；鼠标点击图片放大查看效果；返回顶部的动态小图标等，更多功能点等你发现。代码上手简单，内容丰富，内涵素材快来打造属于自己的世界建筑网站吧！！！（注：因为页面是完整截取的，原图太大，这是压缩后的效果图，有些失真，真实效果查看下面的视频演示。）

在这里插入图片描述

1.9 关于我们界面

        关于我们界面,通过内容左右排版，单内容排版来展示主题内容。通过轮播图演示系统相关内容，轮播图可以加超链接文字等内容；滚动页面内容时固定头部导航菜单；通过图文结合的方式来展示网站内容，具体内容主题自定义，适用于各种网站，各种官网，直接嵌套使用；鼠标悬浮动态旋转的网站图标；鼠标点击图片放大查看效果；返回顶部的动态小图标等，更多功能点等你发现。代码上手简单，内容丰富，内涵素材快来打造属于自己的世界建筑网站吧！！！（注：因为页面是完整截取的，原图太大，这是压缩后的效果图，有些失真，真实效果查看下面的视频演示。）

在这里插入图片描述

2.效果和源码

2.1 动态效果

    这里是完整的效果演示，可在此代码基础上更加完善功能，支持扩展自己的风格，可以删减内容，打造属于自己的好看的世界建筑网站。

VUE3实现好看的世界建筑中国建筑网站源码

2.2 源代码

    这里是部分VUE代码，其他vue页面、图片、js、css等资源，见下面的 源码下载 ，里面有所有代码资源和相关说明。或者直接在这里 下载源码，如有其他技术问题，请私信博主，博主看到后第一时间回复。

login.vue

<template>
  <view class="loginMain">
    <view class="loginContent">
      <text class="textTitle">用户登录</text>
      <view class="content_div" style="color: wheat;">
        世界建筑网站，欢迎您
      </view>
      <hr />
      <view class="content_div">
        账号名称：<input type="text" placeholder="请输入账号名称" />
      </view>
      <view class="content_div">
        账号密码：<input type="password" placeholder="请输入账号密码" />
      </view>
      <view class="content_div" style=" margin:26px 0px;">
        <RouterLink class="a2" to="/">登 录</RouterLink>
      </view>
      <view class="myview">
        还没有账号，去 <RouterLink class="a1" to="/register">注册</RouterLink> ？
      </view>
    </view>
  </view>
</template>

register.vue

<template>
  <view class="loginMain">
    <view class="loginContent">
      <text class="textTitle">用户注册</text>
      <view class="content_div">
       世界建筑网站，欢迎您
      </view>
      <hr />
      <view class="content_div">
        账号名称：<input type="text" placeholder="请输入账号名称" />
      </view>
      <view class="content_div">
        手机号码：<input type="text" placeholder="请输入手机号码" />
      </view>
      <view class="content_div">
        账号邮箱：<input type="text" placeholder="请输入账号邮箱" />
      </view>
      <view class="content_div">
        账号密码：<input type="password" placeholder="请输入账号密码" />
      </view>
      <view class="content_div">
        确认密码：<input type="password" placeholder="请输入确认密码" />
      </view>
      <view class="content_div">
        <RouterLink class="a2" to="/">注 册</RouterLink>
      </view>
      <view class="myview">
        还没有账号，去 <RouterLink class="a1" to="/login">登录</RouterLink> ？
      </view>
    </view>
  </view>
</template>

轮播图功能块

<swiper-container :modules="modules" :slides-per-view="1"
        :space-between="0" navigation="{ nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' }"
          :loop="true" :autoplay="{ delay: 5000, disableOnInteraction: true }" 
          :pagination="{ clickable: true }"  
        @swiper="onSwiper" @slideChange="onSliderChange"  >
            <swiper-slide style="width: 100%;">
              <img src="./assets/images/1.jpg" alt="xcLeigh1" class="headerimg" />
            </swiper-slide>
            <swiper-slide style="width: 100%;">
              <img src="./assets/images/2.jpg" alt="xcLeigh1" class="headerimg" />
            </swiper-slide>
            <swiper-slide style="width: 100%;">
              <img src="./assets/images/3.jpg" alt="xcLeigh1" class="headerimg" />
            </swiper-slide>
            <swiper-slide style="width: 100%;">
              <img src="./assets/images/4.jpg" alt="xcLeigh1" class="headerimg" />
            </swiper-slide>
            <swiper-slide style="width: 100%;">
              <img src="./assets/images/5.jpg" alt="xcLeigh1" class="headerimg" />
            </swiper-slide>
            <!-- 导航按钮 -->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
          </swiper-container>

2.3 目录结构

在这里插入图片描述

源码下载

注：源码下载在文章头部也可以点击下载，跟这里的是一样的。

VUE3实现好看的世界建筑中国建筑网站源码（源码） 点击下载
在这里插入图片描述

万套模板，程序开发，在线开发，在线沟通

  • 专业后端大佬在线沟通需求开发
  • 专业前端大佬在线沟通需求开发
  • 专业网站整套大佬在线沟通需求开发
  • 专业毕业设计大佬在线沟通需求开发
  • 专业大作业大佬在线沟通需求开发
  • 【优惠活动】专属定制，程序在线开发
--------------- 业精于勤，荒于嬉 ---------------
 

请添加图片描述

--------------- 行成于思，毁于随 ---------------

     💢 关注博主 带你实现畅游前后端

     🏰 大屏可视化 带你体验酷炫大屏

     💯 神秘个人简介 带你体验不一样得介绍

     💘 为爱表白 为你那个TA，体验别致的浪漫惊喜

     🎀 酷炫邀请函 带你体验高大上得邀请

     ① 🉑提供云服务部署（有自己的阿里云）；
     ② 🉑提供前端、后端、应用程序、H5、小程序、公众号、大作业等相关业务；
     如🈶合作请联系我，期待您的联系。
    注：本文撰写于CSDN平台,作者：xcLeigh（所有权归作者所有），https://blog.csdn.net/weixin_43151418，如果相关下载没有跳转，请查看这个地址，相关链接没有跳转，皆是抄袭本文，转载请备注本文原地址。

     亲，码字不易，动动小手，欢迎 点赞 ➕ 收藏，如 🈶 问题请 留言（私信或评论），博主看见后一定及时给您答复，💌💌💌

原文地址：https://blog.csdn.net/weixin_43151418/article/details/143774127（防止抄袭，原文地址不可删除）

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2240820.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Flink新版Source接口源码解析

Flink新版Source接口源码解析

目录 1. 前言 2. Source解析 2.1 Source类图 2.2 接口和方法说明 2.2.1 Source,> 3. SplitEnumerator解析 3.1 SplitEnumetator类图 3.2 类和方法说明 3.2.1 SplitEnumerator 3.2.2 SimpleVersionedSerializer 4. SourceReader解析 4.1 SourceReader类图 4.2 类…
阅读更多...
SpringCloud Gateway网关路由配置 接口统一 登录验证 权限校验 路由属性

SpringCloud Gateway网关路由配置 接口统一 登录验证 权限校验 路由属性

介绍 Spring Cloud Gateway 根据请求的路径、HTTP 方法、头部等信息&#xff0c;将请求路由到对应的微服务实例。它支持基于动态路由规则的配置&#xff0c;可以根据请求的 URL、查询参数、请求头等条件&#xff0c;灵活地决定将请求转发到哪个微服务。Spring Cloud Gateway 提…
阅读更多...
【老白学 Java】你能想到「封装」说明有点专业

【老白学 Java】你能想到「封装」说明有点专业

你能想到「封装」说明有点专业 文章来源&#xff1a;《Head First Java》修炼感悟。 上一章&#xff0c;师兄们能否理解对象属性的相互关系&#xff1f; 本章老白想聊聊数据安全的问题&#xff0c;毕竟谁都不想把自己的数据暴露于大庭广众之下。 如果那样的话将毫无隐私可言&a…
阅读更多...
chat2db调用ollama实现数据库的操作。

chat2db调用ollama实现数据库的操作。

只试了mysql的调用。 其它的我也不用&#xff0c;本来想充钱算了。最后一看单位是美刀。就放弃了这分心。于是折腾了一下。 本地运行chat2db 及chat2db ui https://gitee.com/ooooinfo/Chat2DB clone 后运行起来 chat2db的java端&#xff0c;我现在搞不清这一个项目是有没有…
阅读更多...
主机型入侵检测系统(HIDS)——Elkeid在Centos7的保姆级安装部署教程

主机型入侵检测系统(HIDS)——Elkeid在Centos7的保姆级安装部署教程

一、HIDS简介 主机型入侵检测系统（Host-based Intrusion Detection System 简称：HIDS）；HIDS作为主机的监视器和分析器，主要是专注于主机系统内部（监视系统全部或部分的动态的行为以及整个系统的状态）。 HIDS使用传统的C/S架构，只需要在监测端安装agent即可，且使用用户…
阅读更多...
qt中ctrl+鼠标左键无法进入

qt中ctrl+鼠标左键无法进入

现象&#xff1a;qt中ctrl鼠标左键无法跳转部分函数&#xff0c;例如能跳到textEdit->toPlainText().&#xff0c;但无法跳转到toUtf8();但编译没有问题 排查1&#xff1a;我发现是交叉编译链的问题&#xff0c;使用linux自带就可以进&#xff0c;用ATK-I.MX6U就部分不能进…
阅读更多...
Android gradle下载失败后 解决方案

Android gradle下载失败后 解决方案

Android 导入gradle一直失败&#xff0c;更新gradle源即可 比如项目里默认的是 distributionUrlhttps\://services.gradle.org/distributions/gradle-7.3.3-bin.zip 用下面这个来替换distributionUrlhttps\://mirrors.cloud.tencent.com/gradle/gradle-7.3.3-bin.zip
阅读更多...
基于Java Springboot餐厅点餐系统（加入商家版）

基于Java Springboot餐厅点餐系统（加入商家版）

一、作品包含 源码数据库设计文档万字全套环境和工具资源部署教程 二、项目技术 前端技术&#xff1a;Html、Css、Js、Vue 数据库&#xff1a;MySQL 后端技术&#xff1a;Java、Spring Boot、MyBatis 三、运行环境 开发工具&#xff1a;IDEA 数据库&#xff1a;MySQL5.7…
阅读更多...
开源项目推荐——OpenDroneMap无人机影像数据处理

开源项目推荐——OpenDroneMap无人机影像数据处理

实景三维作为GIS最火的课题&#xff0c;最近在想做一套自己的三维构建工具&#xff0c;考察了几个开源项目&#xff0c;把自己的搜索过程用csdn记录下来&#xff0c;希望也能帮助到各位同仁。 OpenDroneMap&#xff08;ODM&#xff09;是一个开源项目&#xff0c;旨在处理无人…
阅读更多...
手动安装Ubuntu系统中的network-manager包（其它包同理）

手动安装Ubuntu系统中的network-manager包（其它包同理）

自己手闲把系统中的network-manager包给删了&#xff0c;导致的结果就是Ubuntu系统彻底没有网络。结果再装network-manager时&#xff0c;没有网络根本装不了&#xff0c;网上的方法都试了也没用&#xff0c;然后就自己源码装&#xff0c;这篇文章就是记录一下怎么手动下载包然…
阅读更多...
【C++】从零实现 C++ 自定义 list 容器：双向链表与迭代器深度解析

【C++】从零实现 C++ 自定义 list 容器：双向链表与迭代器深度解析

个人主页: 起名字真南的CSDN博客 个人专栏: 【数据结构初阶】 &#x1f4d8; 基础数据结构【C语言】 &#x1f4bb; C语言编程技巧【C】 &#x1f680; 进阶C【OJ题解】 &#x1f4dd; 题解精讲 目录 &#x1f4cc; 1. 引言&#x1f4cc; 2. 内容概要&#x1f4cc; 3. list 容…
阅读更多...
Python Excel XLS或XLSX转PDF详解：七大实用转换设置

Python Excel XLS或XLSX转PDF详解：七大实用转换设置

目录 使用工具 Python将Excel文件转换为PDF Python将Excel文件转换为带页码的PDF Python将Excel文件转换为特定页面尺寸的PDF Python将Excel文件转换为PDF并将内容适应到一页 Python将Excel文件转换为PDF/A Python将Excel文件中的工作表转换为单独的PDF Python将Excel工…
阅读更多...
Centos 7 安装wget

Centos 7 安装wget

Centos 7 安装wget 最小化安装Centos 7 的话需要上传wget rpm包之后再路径下安装一下。rpm包下载地址&#xff08;http://mirrors.163.com/centos/7/os/x86_64/Packages/&#xff09; 1、使用X-ftp 或者WinSCP等可以连接上传的软件都可以首先连接服务器&#xff0c;这里我用的…
阅读更多...
LabVIEW 使用 Snippet

LabVIEW 使用 Snippet

在 LabVIEW 中&#xff0c;Snippet&#xff08;代码片段&#xff09; 是一个非常有用的功能&#xff0c;它允许你将 一小段可重用的代码 保存为一个 图形化的代码片段&#xff0c;并能够在不同的 VI 中通过拖放来使用。 什么是 Snippet&#xff1f; Snippet 就是 LabVIEW 中的…
阅读更多...
A3超级计算机虚拟机，为大型语言模型LLM和AIGC提供强大算力支持

A3超级计算机虚拟机，为大型语言模型LLM和AIGC提供强大算力支持

热门大语言模型项目地址&#xff1a;www.suanjiayun.com/mirrorDetails?id66ac7d478099315577961758 近几个月来&#xff0c;我们目睹了大型语言模型&#xff08;LLMs&#xff09;和生成式人工智能强势闯入我们的视野&#xff0c;显然&#xff0c;这些模型在训练和运行时需要…
阅读更多...
开源音乐分离器Audio Decomposition：可实现盲源音频分离，无需外部乐器分离库，从头开始制作。将音乐转换为五线谱的程序

开源音乐分离器Audio Decomposition：可实现盲源音频分离，无需外部乐器分离库，从头开始制作。将音乐转换为五线谱的程序

今天给大家分析一个音频分解器&#xff0c;通过傅里叶变换和信封匹配分离音乐中的各个音符和乐器&#xff0c;实现音乐到乐谱的转换。将音乐开源分离为组成乐器。该方式是盲源分离&#xff0c;从头开始制作&#xff0c;无需外部乐器分离库。 相关链接 代码&#xff1a;https:…
阅读更多...
35.3K+ Star！PhotoPrism：一款基于AI的开源照片管理工具

35.3K+ Star！PhotoPrism：一款基于AI的开源照片管理工具

PhotoPrism 简介 PhotoPrism[1] 是一个为去中心化网络设计的AI照片应用，它利用最新技术自动标记和查找图片，实现自动图像分类与本地化部署，你可以在家中、私有服务器或云端运行它。 项目特点 主要特点 浏览所有照片和视频，无需担心RAW转换、重复项或视频格式。 使用强大的…
阅读更多...
基于Spider异步爬虫框架+JS动态参数逆向+隧道代理+自定义中间件的猎聘招聘数据爬取

基于Spider异步爬虫框架+JS动态参数逆向+隧道代理+自定义中间件的猎聘招聘数据爬取

在本篇博客中&#xff0c;我们将介绍如何使用 Scrapy 框架结合 JS 逆向技术、代理服务器和自定义中间件&#xff0c;来爬取猎聘网站的招聘数据。猎聘是一个国内知名的招聘平台&#xff0c;提供了大量的企业招聘信息和职位信息。本项目的目标是抓取指定城市的招聘信息&#xff0…
阅读更多...
计算机网络 （2）计算机网络的类别

计算机网络 （2）计算机网络的类别

计算机网络的类别繁多&#xff0c;根据不同的分类原则&#xff0c;可以得到各种不同类型的计算机网络。 一、按覆盖范围分类 局域网&#xff08;LAN&#xff09;&#xff1a; 定义&#xff1a;局域网是一种在小区域内使用的&#xff0c;由多台计算机组成的网络。覆盖范围&#…
阅读更多...
超好用shell脚本NuShell mac安装

超好用shell脚本NuShell mac安装

利用管道控制任意系统 Nu 可以在 Linux、macOS 和 Windows 上运行。一次学习&#xff0c;处处可用。 一切皆数据 Nu 管道使用结构化数据&#xff0c;你可以用同样的方式安全地选择&#xff0c;过滤和排序。停止解析字符串&#xff0c;开始解决问题。 强大的插件系统 具备强…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023