【VUE】vue作业设计---奔驰响应式官网
你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，都能满足你的需求。原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的网页制作，画面精明，非常适合初学者学习使用。
·
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
0- 0
已为社区贡献6条内容
所有评论(0)