【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
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值