• 【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、首页

     网站主要图片介绍

    相关代码：

    1. <template>
    2. 	<div class="home">
    3. 		<Header style="display: block;">Header>
    4. 		<div class="main" style="width: 100%; height: auto; background-color: #000000;">
    5.  
    6. 			
    7. 			<swiper id="swiper" ref="mySwiper" :options="swiperOptions">
    8. 				<swiper-slide>
    9. 					<img src="https://www.mercedes-benz.com.cn/content/dam/mb-cn/2021-shas/shas-homepage-pc3.jpg">
    10. 					<a class="link_lable link_lable_swiper1" href=""><span>了解更多span>a>
    11. 				swiper-slide>
    12. 				<swiper-slide>
    13. 					<img
    14. 						src="https://www.mercedes-benz.com.cn/content/dam/mb-cn/campaign/eq-campaign/EQXLCXKV-pc-final3.jpg">
    15. 					<a class="link_lable link_lable_swiper1" href=""><span>参与创想span>a>
    16. 				swiper-slide>
    17. 				<swiper-slide>
    18. 					<img
    19. 						src="https://www.mercedes-benz.com.cn/content/dam/mb-cn/vehicles/sedan/maybach/801/homepage/1-pc.jpg">
    20. 					<p class="link_picture link_picture_swiper2"><img
    21. 							src="https://www.mercedes-benz.com.cn/content/dam/mb-cn/vehicles/sedan/maybach/801/homepage/pc-maybachS.svg"
    22. 							alt="">p>
    23. 					<a class="link_lable link_lable_swiper2" href=""><span>了解更多span>a>
    24. 				swiper-slide>
    25. 				<swiper-slide>
    26. 					<img src="https://www.mercedes-benz.com.cn/content/dam/mb-cn/homepage/eq-210419/eq-banner-pc.jpg">
    27. 					<a class="link_lable link_lable_swiper1" href=""><span>了解更多span>a>
    28. 				swiper-slide>
    29. 				<swiper-slide>
    30. 					<img
    31. 						src="https://www.mercedes-benz.com.cn/content/dam/mb-cn/renovation/renovation-homepage/0127update/banner1-pc.jpg">
    32. 					<p class="link_picture link_picture_swiper2"><img
    33. 							src="https://www.mercedes-benz.com.cn/content/dam/mb-cn/homepage/pc-1Sclass.svg" alt="">p>
    34. 					<a class="link_lable link_lable_swiper2" href=""><span>了解更多span>a>
    35. 				swiper-slide>
    36. 				<swiper-slide>
    37. 					<img
    38. 						src="https://www.mercedes-benz.com.cn/content/dam/mb-cn/renovation/renovation-homepage/0127update/banner3-v-pc.jpg">
    39. 					<p class="link_picture link_picture_swiper2"><img
    40. 							src="https://www.mercedes-benz.com.cn/content/dam/mb-cn/vehicles1/mpv/v-class/0330-svg/homepage_banner_v_pc.svg"
    41. 							alt="">p>
    42. 					<a class="link_lable link_lable_swiper2" href=""><span>了解更多span>a>
    43. 				swiper-slide>
    44. 				<div class="swiper-pagination" slot="pagination">div>
    45. 				<div class="swiper-button-prev" slot="button-prev">div>
    46. 				<div class="swiper-button-next" slot="button-next">div>
    47. 			swiper>
    48. 			
    49. 			<div class="car-model1">
    50. 				<div class="car-model2">
    51. 					<swiper id="swiper2" ref="mySwiper" :options="swiperOptions2">
    52. 						<swiper-slide class="car-model_slide"><img
    53. 								src="https://www.mercedes-benz.com.cn/content/dam/mb-cn/renovation/new-renovation-homepage/mo-c-1.png">
    54. 						swiper-slide>
    55. 						<swiper-slide class="car-model_slide"><img
    56. 								src="https://www.mercedes-benz.com.cn/content/dam/mb-cn/renovation/new-renovation-homepage/mo-c-2.png">
    57. 						swiper-slide>
    58. 						<swiper-slide class="car-model_slide"><img
    59. 								src="https://www.mercedes-benz.com.cn/content/dam/mb-cn/renovation/new-renovation-homepage/mo-c-3.png">
    60. 						swiper-slide>
    61. 						<swiper-slide class="car-model_slide"><img
    62. 								src="https://www.mercedes-benz.com.cn/content/dam/mb-cn/renovation/new-renovation-homepage/mo-c-4.png">
    63. 						swiper-slide>
    64. 						<swiper-slide class="car-model_slide"><img
    65. 								src="https://www.mercedes-benz.com.cn/content/dam/mb-cn/renovation/new-renovation-homepage/mo-c-5.png">
    66. 						swiper-slide>
    67. 						<swiper-slide class="car-model_slide"><img
    68. 								src="https://www.mercedes-benz.com.cn/content/dam/mb-cn/renovation/new-renovation-homepage/modeloverview-phev/c6.png">
    69. 						swiper-slide>
    70. 						<div class="swiper-scrollbar">div>
    71. 					swiper>
    72. 				div>
    73.  
    74. 				<a class="link_lable link_lable_car" href=""><span>点击探索span>a>
    75. 			div>
    76.  
    77. 			
    78. 			<div class="swiper-slide__video swiper-slide__video1">
    79. 				<video
    80. 					src="https://www.mercedes-benz.com.cn/content/dam/mb-cn/renovation/renovation-homepage/0122update-cs-video/service.mp4"
    81. 					class="swiper-slide-reponse__video swiper-slide-type__video swiper-slide-type__video-PC"
    82. 					muted="muted" preload="metadata" autoplay="autoplay" loop="loop"
    83. 					webkit-playsinline="webkit-playsinline" playsinline="playsinline" data-object-fit="cover"
    84. 					data-autoplay="">
    85. 					<source
    86. 						src="https://www.mercedes-benz.com.cn/content/dam/mb-cn/renovation/renovation-homepage/0122update-cs-video/service.mp4">
    87. 				video>
    88. 				<p class="link_picture link_picture_video1"><img
    89. 						src="https://www.mercedes-benz.com.cn/content/dam/mb-cn/renovation/renovation-homepage/0119update/homepage-cs-pc.svg"
    90. 						alt="">p>
    91. 				<a class="link_lable link_lable_video1" href=""><span>了解更多span>a>
    92. 			div>
    93.  
    94.  
    95. 			
    96. 			<div class="swiper-slide__tech">
    97. 				<img src="https://www.mercedes-benz.com.cn/content/dam/mb-cn/renovation/renovation-homepage/0127update/homepage-tech-0126.jpg"
    98. 					alt="">
    99. 				<p class="link_picture link_picture_tech"><img
    100. 						src="https://www.mercedes-benz.com.cn/content/dam/mb-cn/renovation/renovation-homepage/0119update/homepage-tech-pc-0120.svg"
    101. 						alt="">p>
    102. 				<a class="link_lable link_lable_tech" href=""><span>了解更多span>a>
    103. 			div>
    104.  
    105.  
    106. 			
    107. 			<div class="swiper-slide__video swiper-slide__video2">
    108. 				<video
    109. 					src="https://www.mercedes-benz.com.cn/content/dam/mb-cn/renovation/renovation-homepage/0124update-3/testdriver.mp4"
    110. 					class="swiper-slide-reponse__video swiper-slide-type__video swiper-slide-type__video-PC"
    111. 					muted="muted" preload="metadata" autoplay="autoplay" loop="loop"
    112. 					webkit-playsinline="webkit-playsinline" playsinline="playsinline" data-object-fit="cover"
    113. 					data-autoplay="">
    114. 					<source
    115. 						src="https://www.mercedes-benz.com.cn/content/dam/mb-cn/renovation/renovation-homepage/0124update-3/testdriver.mp4">
    116. 				video>
    117. 				<p class="link_picture link_picture_video2"><img
    118. 						src="https://www.mercedes-benz.com.cn/content/dam/mb-cn/renovation/renovation-homepage/0121-td/homepage-td.svg"
    119. 						alt="">p>
    120. 				<a class="link_lable link_lable_video3" href=""><span>查找经销商span>a>
    121. 				<a class="link_lable link_lable_video2" href=""><span>预约试驾span>a>
    122. 			div>
    123.  
    124. 		div>
    125. 		<Footer>Footer>
    126. 	div>
    127. template>
    128.  
    129. <script>
    130. 	//require styles
    131. 	import 'swiper/swiper-bundle.min.css'
    132. 	import {
    133. 		Swiper,
    134. 		SwiperSlide,
    135. 		directive
    136. 	} from 'vue-awesome-swiper'
    137.  
    138. 	import Swiper2, {
    139. 		Navigation,
    140. 		Pagination,
    141. 		Autoplay,
    142. 		Scrollbar
    143. 	} from 'swiper';
    144. 	Swiper2.use([Navigation, Pagination, Autoplay]);
    145.  
    146. 	// @ is an alias to /src
    147. 	import Header from '@/components/Header.vue'
    148. 	import Footer from '@/components/Footer.vue'
    149.  
    150. 	export default {
    151. 		name: 'home',
    152. 		components: {
    153. 			Header,
    154. 			Footer,
    155. 			Swiper,
    156. 			SwiperSlide
    157. 		},
    158. 		data() {
    159. 			return {
    160. 				swiperOptions: {
    161. 					notNextTick: true,
    162. 					//循环
    163. 					loop: true,
    164. 					//自动轮播
    165. 					autoplay: {
    166. 						delay: 5000,
    167. 						stopOnLastSlide: true
    168. 					},
    169. 					// 分页器
    170. 					pagination: {
    171. 						el: '.swiper-pagination',
    172. 						clickable: true // 允许分页点击跳转
    173. 					},
    174. 					navigation: {
    175. 						nextEl: ".swiper-button-next",
    176. 						prevEl: ".swiper-button-prev",
    177. 					},
    178. 					//滑动速度
    179. 					speed: 1000,
    180. 				},
    181. 				swiperOptions2: {
    182. 					notNextTick: true,
    183. 					//循环
    184. 					loop: true,
    185. 					//自动轮播
    186. 					autoplay: {
    187. 						delay: 5000,
    188. 						stopOnLastSlide: true
    189. 					},
    190. 					//滑动速度
    191. 					speed: 1000,
    192. 					//滚动条
    193. 					scrollbar: {
    194. 						el: ".swiper-scrollbar",
    195. 						hide: false, //滚动条是否自动隐藏。默认：false，不会自动隐藏。			
    196. 						draggable: true, //该参数设置为true时允许拖动滚动条。			
    197. 						snapOnRelease: true, //如果设置为false，释放滚动条时slide不会自动贴合。
    198. 						dragSize: 30 //设置滚动条指示的尺寸。默认'auto': 自动，或者设置num(px)。
    199.  
    200. 					},
    201. 				}
    202. 			}
    203. 		},
    204. 		directives: {
    205. 			swiper: directive
    206. 		},
    207. 	}
    208. script>

    代码结构

    总结

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

  • 相关阅读:
    解决huggingface 在代码因为网络无法下载模型和数据集的问题（伪）
    std::integer_sequence 源码分析
    AI：86-基于深度学习的街景图像地理位置识别
    redis中的缓存穿透问题
    bitbucket.org 用法
    GBase 8c导出单个数据库
    Elasticsearch(二)kibana数据检索
    开源游戏服务器框架NoahGameFrame（NF）客户端的Log日志系统(五)
    GBase 8d的特性-标准化
    Spring Framework IoC依赖注入-按Bean类型注入
  • 原文地址：https://blog.csdn.net/pandas23/article/details/121473471