【VUE】vue作业设计---奔驰响应式官网

1、引言

设计结课作业,课程设计无处下手,网页要求的总数量太多?没有合适的模板?数据库,java,python,vue,html作业复杂工程量过大?毕设毫无头绪等等一系列问题。你想要解决的问题,在微信公众号“coding加油站”中全部会得到解决

2、作品介绍

奔驰响应式官网采用vue技术来实现,符合所学知识体系,适用于常见的作业以及课程设计,需要获取更多的作品,请关注微信公众号:coding加油站,获取,如需更多资料,可在微信后台留言。欢迎大家来提问,交流学习。

2.1、作品简介方面 

奔驰响应式官网采用常规方式来实现,符合绝大部分的要求。代码配置有相关文档讲解,如需从代码中学到知识点,那么这个作品将是你的不二之选

2.2、作品二次开发工具

此作品代码相对简单,基本使用课堂中所学知识点来完成,只需要修改相关的介绍文字,一些图片,就可以改为自己独一无二的代码,网页作品下载后可使用任意编辑软件(例如:DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使用

2.3、作品技术介绍

html网页作品技术方面:使用CSS制作了网页背景图、鼠标经过及选中导航变色效果、下划线等相关技术来美化相关界面,部分采用了javascript来做校验。 使用html5,以及css3等相关技术完成技术的布局,在本作品中,会使用常见的布局,常见的浮动布局,flex布局都会有使用到哦。同时在操作方面上运用了html5和css3,采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识,同时使用了一些js的相关知识。例如使用到了dom,和bom来获取浏览器的相关api,同时使用css对样式进行相关的美化,使得界面更加符合网页设计

vue作品技术方面:使用vue技术开发的网站,涉及常见的vue指令,如v-for,v-if,v-show,v-html等的使用,包含watch,计算属性等常见功能的开发,以及组件的使用,使用vue相关全家桶的使用,运用了v-router来作为路由,完全符合常见的网站开发技术。同时也会使用html5,以及css3等相关技术完成技术的布局,在本作品中,会使用常见的布局,常见的浮动布局,flex布局都会有使用到哦。

3、作品演示

【coding加油站】vue网站设计---模仿奔驰官网

3.1、首页

 网站主要图片介绍

相关代码:

<template>
	<div class="home">
		<Header style="display: block;"></Header>
		<div class="main" style="width: 100%; height: auto; background-color: #000000;">

			<!-- 首页轮播图 -->
			<swiper id="swiper" ref="mySwiper" :options="swiperOptions">
				<swiper-slide>
					<img src="https://www.mercedes-benz.com.cn/content/dam/mb-cn/2021-shas/shas-homepage-pc3.jpg">
					<a class="link_lable link_lable_swiper1" href=""><span>了解更多</span></a>
				</swiper-slide>
				<swiper-slide>
					<img
						src="https://www.mercedes-benz.com.cn/content/dam/mb-cn/campaign/eq-campaign/EQXLCXKV-pc-final3.jpg">
					<a class="link_lable link_lable_swiper1" href=""><span>参与创想</span></a>
				</swiper-slide>
				<swiper-slide>
					<img
						src="https://www.mercedes-benz.com.cn/content/dam/mb-cn/vehicles/sedan/maybach/801/homepage/1-pc.jpg">
					<p class="link_picture link_picture_swiper2"><img
							src="https://www.mercedes-benz.com.cn/content/dam/mb-cn/vehicles/sedan/maybach/801/homepage/pc-maybachS.svg"
							alt=""></p>
					<a class="link_lable link_lable_swiper2" href=""><span>了解更多</span></a>
				</swiper-slide>
				<swiper-slide>
					<img src="https://www.mercedes-benz.com.cn/content/dam/mb-cn/homepage/eq-210419/eq-banner-pc.jpg">
					<a class="link_lable link_lable_swiper1" href=""><span>了解更多</span></a>
				</swiper-slide>
				<swiper-slide>
					<img
						src="https://www.mercedes-benz.com.cn/content/dam/mb-cn/renovation/renovation-homepage/0127update/banner1-pc.jpg">
					<p class="link_picture link_picture_swiper2"><img
							src="https://www.mercedes-benz.com.cn/content/dam/mb-cn/homepage/pc-1Sclass.svg" alt=""></p>
					<a class="link_lable link_lable_swiper2" href=""><span>了解更多</span></a>
				</swiper-slide>
				<swiper-slide>
					<img
						src="https://www.mercedes-benz.com.cn/content/dam/mb-cn/renovation/renovation-homepage/0127update/banner3-v-pc.jpg">
					<p class="link_picture link_picture_swiper2"><img
							src="https://www.mercedes-benz.com.cn/content/dam/mb-cn/vehicles1/mpv/v-class/0330-svg/homepage_banner_v_pc.svg"
							alt=""></p>
					<a class="link_lable link_lable_swiper2" href=""><span>了解更多</span></a>
				</swiper-slide>
				<div class="swiper-pagination" slot="pagination"></div>
				<div class="swiper-button-prev" slot="button-prev"></div>
				<div class="swiper-button-next" slot="button-next"></div>
			</swiper>
			<!-- 车型轮播 -->
			<div class="car-model1">
				<div class="car-model2">
					<swiper id="swiper2" ref="mySwiper" :options="swiperOptions2">
						<swiper-slide class="car-model_slide"><img
								src="https://www.mercedes-benz.com.cn/content/dam/mb-cn/renovation/new-renovation-homepage/mo-c-1.png">
						</swiper-slide>
						<swiper-slide class="car-model_slide"><img
								src="https://www.mercedes-benz.com.cn/content/dam/mb-cn/renovation/new-renovation-homepage/mo-c-2.png">
						</swiper-slide>
						<swiper-slide class="car-model_slide"><img
								src="https://www.mercedes-benz.com.cn/content/dam/mb-cn/renovation/new-renovation-homepage/mo-c-3.png">
						</swiper-slide>
						<swiper-slide class="car-model_slide"><img
								src="https://www.mercedes-benz.com.cn/content/dam/mb-cn/renovation/new-renovation-homepage/mo-c-4.png">
						</swiper-slide>
						<swiper-slide class="car-model_slide"><img
								src="https://www.mercedes-benz.com.cn/content/dam/mb-cn/renovation/new-renovation-homepage/mo-c-5.png">
						</swiper-slide>
						<swiper-slide class="car-model_slide"><img
								src="https://www.mercedes-benz.com.cn/content/dam/mb-cn/renovation/new-renovation-homepage/modeloverview-phev/c6.png">
						</swiper-slide>
						<div class="swiper-scrollbar"></div>
					</swiper>
				</div>

				<a class="link_lable link_lable_car" href=""><span>点击探索</span></a>
			</div>

			<!-- 客户服务,视频播放 -->
			<div class="swiper-slide__video swiper-slide__video1">
				<video
					src="https://www.mercedes-benz.com.cn/content/dam/mb-cn/renovation/renovation-homepage/0122update-cs-video/service.mp4"
					class="swiper-slide-reponse__video swiper-slide-type__video swiper-slide-type__video-PC"
					muted="muted" preload="metadata" autoplay="autoplay" loop="loop"
					webkit-playsinline="webkit-playsinline" playsinline="playsinline" data-object-fit="cover"
					data-autoplay="">
					<source
						src="https://www.mercedes-benz.com.cn/content/dam/mb-cn/renovation/renovation-homepage/0122update-cs-video/service.mp4">
				</video>
				<p class="link_picture link_picture_video1"><img
						src="https://www.mercedes-benz.com.cn/content/dam/mb-cn/renovation/renovation-homepage/0119update/homepage-cs-pc.svg"
						alt=""></p>
				<a class="link_lable link_lable_video1" href=""><span>了解更多</span></a>
			</div>


			<!-- 科技创新 -->
			<div class="swiper-slide__tech">
				<img src="https://www.mercedes-benz.com.cn/content/dam/mb-cn/renovation/renovation-homepage/0127update/homepage-tech-0126.jpg"
					alt="">
				<p class="link_picture link_picture_tech"><img
						src="https://www.mercedes-benz.com.cn/content/dam/mb-cn/renovation/renovation-homepage/0119update/homepage-tech-pc-0120.svg"
						alt=""></p>
				<a class="link_lable link_lable_tech" href=""><span>了解更多</span></a>
			</div>


			<!-- 预约评鉴 -->
			<div class="swiper-slide__video swiper-slide__video2">
				<video
					src="https://www.mercedes-benz.com.cn/content/dam/mb-cn/renovation/renovation-homepage/0124update-3/testdriver.mp4"
					class="swiper-slide-reponse__video swiper-slide-type__video swiper-slide-type__video-PC"
					muted="muted" preload="metadata" autoplay="autoplay" loop="loop"
					webkit-playsinline="webkit-playsinline" playsinline="playsinline" data-object-fit="cover"
					data-autoplay="">
					<source
						src="https://www.mercedes-benz.com.cn/content/dam/mb-cn/renovation/renovation-homepage/0124update-3/testdriver.mp4">
				</video>
				<p class="link_picture link_picture_video2"><img
						src="https://www.mercedes-benz.com.cn/content/dam/mb-cn/renovation/renovation-homepage/0121-td/homepage-td.svg"
						alt=""></p>
				<a class="link_lable link_lable_video3" href=""><span>查找经销商</span></a>
				<a class="link_lable link_lable_video2" href=""><span>预约试驾</span></a>
			</div>

		</div>
		<Footer></Footer>
	</div>
</template>

<script>
	//require styles
	import 'swiper/swiper-bundle.min.css'
	import {
		Swiper,
		SwiperSlide,
		directive
	} from 'vue-awesome-swiper'

	import Swiper2, {
		Navigation,
		Pagination,
		Autoplay,
		Scrollbar
	} from 'swiper';
	Swiper2.use([Navigation, Pagination, Autoplay]);

	// @ is an alias to /src
	import Header from '@/components/Header.vue'
	import Footer from '@/components/Footer.vue'

	export default {
		name: 'home',
		components: {
			Header,
			Footer,
			Swiper,
			SwiperSlide
		},
		data() {
			return {
				swiperOptions: {
					notNextTick: true,
					//循环
					loop: true,
					//自动轮播
					autoplay: {
						delay: 5000,
						stopOnLastSlide: true
					},
					// 分页器
					pagination: {
						el: '.swiper-pagination',
						clickable: true // 允许分页点击跳转
					},
					navigation: {
						nextEl: ".swiper-button-next",
						prevEl: ".swiper-button-prev",
					},
					//滑动速度
					speed: 1000,
				},
				swiperOptions2: {
					notNextTick: true,
					//循环
					loop: true,
					//自动轮播
					autoplay: {
						delay: 5000,
						stopOnLastSlide: true
					},
					//滑动速度
					speed: 1000,
					//滚动条
					scrollbar: {
						el: ".swiper-scrollbar",
						hide: false, //滚动条是否自动隐藏。默认:false,不会自动隐藏。			
						draggable: true, //该参数设置为true时允许拖动滚动条。			
						snapOnRelease: true, //如果设置为false,释放滚动条时slide不会自动贴合。
						dragSize: 30 //设置滚动条指示的尺寸。默认'auto': 自动,或者设置num(px)。

					},
				}
			}
		},
		directives: {
			swiper: directive
		},
	}
</script>

代码结构

总结

以上就是本次项目的全部内容,需要交流或者免费获取代码请关注微信公众号:coding加油站,获取

  • 1
    点赞
  • 27
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
### 回答1: Vue.js是一种JavaScript框架,用于构建用户界面。它具有简单易用的语法和强大的响应能力。Vue提供了一个响应的模板,使开发者可以非常方便地创建自己的。 这个模板提供了一个完整的结构,包括主页、文档、示例、社区等模块。主页展示了Vue的特点和优势,吸引开发者的关注。文档模块详细介绍了Vue的使用方法和API文档,让开发者能够迅速上手并深入学习Vue的各种功能。示例模块展示了一些实际的应用场景,帮助开发者理解Vue的实际使用方。社区模块提供了一个交流平台,开发者可以在这里提问、分享和讨论问题。 这个模板使用了Vue的核心概念——响应数据。开发者只需在模板中编写数据和模板的绑定关系,在数据发生变化时,模板会自动根据新的数据重新渲染,达到响应的效果。这样的设计使得开发者可以专注于数据的处理,而不需要手动操作DOM。 除了响应数据,模板还支持组件化开发。开发者可以通过编写组件来实现模块的复用和可维护性。Vue的组件系统具有灵活的组件通信和组件复用方,可以帮助开发者更好地组织和管理代码。 总之,Vue响应模板是一个强大而实用的工具,使得开发者可以方便地构建自己的,并享受到Vue带来的响应和组件化开发的优势。无论是新手还是有经验的开发者,都能从这个模板中获得很多帮助和启发。 ### 回答2: Vue.js是一种用于构建用户界面的渐进JavaScript框架。模板是Vue.js方提供的用于创建响应站的标准模板。这个模板包含了一些常见的站页面组件,如导航栏、侧边栏、内容区域等,开发者可以根据自己的需求进行定制和修改。 模板使用Vue响应原理,通过数据绑定的方实现视图和数据的实时同步更新。当数据发生改变时,模板中绑定的相应视图也会被更新。这种方使得开发者可以更加方便地管理和修改数据,提高了开发效率。 模板还提供了一些常用的功能组件,如轮播图、滚动导航等,这些组件已经构建好,只需要根据自己的需求添加和修改相关内容即可。另外,模板也提供了一些常用的UI样,如按钮、表格等,这些样可以帮助开发者快速构建出具有统一风格的站页面。 除了基本的页面组件和功能组件外,模板还提供了一些常用的路由和状态管理功能,这使得开发者能够更好地管理站的导航和页面状态。同时,模板还支持国际化功能,可以根据用户的语言环境自动切换显示内容,提高了站的可用性。 总而言之,Vue.js响应模板是一种方便快捷的开发工具,它提供了大量的页面组件、功能组件和样,支持路由和状态管理,并具有响应的特性,使得开发者能够更加轻松地创建出现代化的响应站。 ### 回答3: Vue.js是一个用于构建用户界面的渐进JavaScript框架。它提供了一种响应的数据绑定机制,使得在数据发生变化时,视图可以实时更新。模板是Vue.js方提供的一个示例模板,展示了Vue.js的一些核心概念和用法。 模板主要包含了几个重要的部分: 1. 导航栏:位于页面的顶部,提供了一些常用链接,如文档、教程、示例等。导航栏的内容可以根据需要进行修改和扩展。 2. 主体内容:模板的主要部分,展示了Vue.js的一些核心概念和用法,以及相关的示例代码和解释。主体内容部分可以根据具体需求进行修改和定制。 3. 侧边栏:位于页面的左侧,提供了一些额外的导航链接,如API文档、生态系统等。侧边栏的内容也可以根据需要进行修改和扩展。 模板的设计风格简洁清晰,能够直观地展示Vue.js的特点和优势。通过阅读模板,开发者可以快速了解Vue.js的基本概念,学习其使用方法,并在实际开发中运用到自己的项目中。 总之,Vue.js模板是一个很好的学习和参考资源,能够帮助开发者快速入门Vue.js,并提供了丰富的示例代码和解释,使开发者能够更好地理解和运用Vue.js的响应机制。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值