1 分析
app开发定制公司根据华为网页的布局,app开发定制公司我们大体上可以将其划分为7个盒子,如下,app开发定制公司由于写一个这样的网页app开发定制公司再加上部分动态效果,app开发定制公司需要的时间很长,app开发定制公司本篇博客只记录了div1、div2、div3app开发定制公司的静态效果+的实现。
2 app开发定制公司顶部盒子的实现
app开发定制公司想要实现的正是最上部那个黑色的圆框
2.1 思路
我的思路很简单,用四个盒子,其中最大的盒子也就是整个黑色框,大盒子里面包裹着小盒子,每个小盒子对应一个字段(集团网站、选择区域/语言、登录),排版布局,则需要三个小盒子,依次向左浮动(float:left;)。或者大盒子单独采用display:flex;布局
我看了一下华为公司的代码,他是用的一个盒子,里面包裹了3个,我用div习惯了,所以用的是div。
2.2 代码实现
<div class="top_container"> <div class="container_div1"> 集团网站 </div> <div class="container_div2"> 选择区域/语言 </div> <div class="container_div3"> 登录 </div> </div>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
.div_top { height: 25px; width: 100%; position: static; text-align: right; background-color: #111111;}.top_container { width: 300px; height: 25px; float: right; margin-right: 70px; display: flex; flex-direction: row; /* background-color: red; */}.container_div1 { width: 80px; height: 25px; /* background-color: aqua; */ margin-right: 10px; line-height: 25px; font-size: 10px; text-align: center; color: #ffffff; cursor: pointer;}.container_div2 { width: 140px; height: 25px; /* background-color: aqua; */ line-height: 25px; font-size: 10px; text-align: center; color: #ffffff; cursor: pointer;}.container_div3 { width: 60px; height: 25px; margin-left: 10px; /* background-color: aqua; */ line-height: 25px; font-size: 10px; text-align: center; color: #ffffff; cursor: pointer;}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
3 头部盒子的实现
正是此处
3.1 思路
首先分成了三个大盒子,分别对应左、中、右三个组件,其中每一个字段或者图标都对应一个小盒子。其中中间容器的那些小盒子都需要不同的样式,因为他有一个悬浮的效果,悬浮的时候,会有一个红色的底框,而且长度各不同。
所以我为每个盒子设置了不同的宽高。
华为采用的是ul-li的形式,我本来写的是没有动态的数据,我还得自己写数组,好麻烦,还不如写div轻松。后来想想,用不着写数据,还是ul-li好用一些
3.2 代码实现
<div class="div_header"> <div class="header_left"> <a class="header_logo"> <img src="@/assets/huawei_logo.png" alt=""> </a> </div> <div class="header_info"> <div class="info_div1"> <span class="info_span1"> 个人及家庭产品 </span> </div> <div class="info_div2"> <span class="info_span2"> 商用产品及方案 </span> </div> <div class="info_div3"> <span class="info_span3"> 服务支持 </span> </div> <div class="info_div4"> <span class="info_span4"> 合作伙伴与开发者 </span> </div> <div class="info_div5"> <span class="info_span5"> 关于华为 </span> </div> </div> <div class="header_right"> <div class="right_info"> <span>在线购买</span> </div> <div class="right_logo"> <span class="logo_span"> </span> </div> </div> </div>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
.div_header { width: 100%; height: 78px; background-color: #fff; border-bottom: 1px solid #e6e6e6; display: flex;}.header_left { width: 266px; height: 100%; margin-left: 50px;}.header_logo { width: 133px; height: 30px; cursor: pointer;}.header_logo img { width: 133px; height: 30px; margin-top: 22px;}.header_info { width: 800px; height: 100%; margin-left: 140px; /* background-color: red; */}.info_div1 { width: 110px; height: 100%; font-size: 0.9em; float: left; line-height: 78px; text-align: center; cursor: pointer;}.info_div2 { width: 110px; height: 100%; font-size: 0.9em; line-height: 78px; float: left; text-align: center; margin-left: 30px; cursor: pointer;}.info_div3 { width: 58px; height: 100%; font-size: 0.9em; line-height: 78px; float: left; text-align: center; margin-left: 30px; cursor: pointer;}.info_div4 { width: 116px; height: 100%; font-size: 0.9em; line-height: 78px; float: left; text-align: center; margin-left: 30px; cursor: pointer;}.info_div5 { width: 58px; height: 100%; font-size: 0.9em; line-height: 78px; float: left; text-align: center; margin-left: 30px; cursor: pointer;}.info_div1:hover { border-bottom: 1px solid red;}.info_div2:hover { border-bottom: 1px solid red;}.info_div3:hover { border-bottom: 1px solid red;}.info_div4:hover { border-bottom: 1px solid red;}.info_div5:hover { border-bottom: 1px solid red;}.header_right { margin-left: 10px; width: 220px; /* background-color: aqua; */}.right_info { float: left; width: 120px; height: 100%; font-size: 17px; line-height: 78px; text-align: center; cursor: pointer; /* background-color: #111111; */}.right_logo { width: 80px; height: 100%; float: left; line-height: 78px;}.logo_span { content: "\e62f";}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
3.3 效果图
4 轮播图的实现
4.1 思路
这里颇费了一些周章,轮播图还算好实现的,毕竟可以直接使用。
但是这里还是有一些特别的点,主要如下:
- 鼠标的移入移出,前进后退的显示与隐藏
- 了解更多按钮的镶嵌
- 轮播图分页器形式的改变(由点变成了狭长的长方形)
我们各个击破
4.1.1 使用轮播图
首先需要引入,在终端输入
npm install swiper
然后再使用的地方import
import "swiper/swiper-bundle.min.css"; // 所有 Swiper 样式,包括所有模块样式(如导航、分页等)import Swiper, { Navigation, Pagination, Scrollbar, Autoplay } from "swiper"; // 导入您需要的模块
- 1
- 2
只需要在mounted的时候,写下如下代码便可使用
mounted() { new Swiper(".swiper", { speed: 500,//播放的速度 // spaceBetween: 2000,// 轮播图之间的间距 loop: true,//是否循环播放 autoplay: { delay: 2000,//自动播放的间隔 }, modules: [Navigation, Pagination, Scrollbar, Autoplay], navigation: { nextEl: ".swiper-button-next",//前一个按钮 prevEl: ".swiper-button-prev",//后一个按钮 }, scrollbar: { el: ".swiper-scrollbar", draggable: true, }, pagination: { el: '.swiper-pagination', clickable: true, bulletClass : 'my-bullet',//需设置.my-bullet样式 bulletActiveClass: 'my-bullet-active', }, });
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
<div class="div_swiper"> <div class="swiper" @mousemove="showSwiperButton()" @mouseout="hiddenSwiperButton()"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img class="slide_img" src="@/assets/huawei-cloud-discount-pc.jpg" /> <button class="img_btn">了解更多</button> </div> <div class="swiper-slide"> <img class="slide_img" src="@/assets/vmall-mate50-series-3.jpg" /> <button class="img_btn">了解更多</button> </div> </div> <div class="swiper-button-prev" id="prev"></div> <!--左箭头。如果放置在swiper外面,需要自定义样式。--> <div class="swiper-button-next" id="next"></div> <!--右箭头。如果放置在swiper外面,需要自定义样式。--> <div class="swiper-pagination"></div> <!--分页器。如果放置在swiper外面,需要自定义样式。--> </div> </div>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
4.1.2 前进后退的隐藏与显示
这里很显然用到鼠标事件,当鼠标移入的时候,设置一个方法,让前进后退按钮显示出来,当鼠标移出的时候,将前进后退设置为隐藏,当然前进后退初始是隐藏的。
methods:{ showSwiperButton() { let d1 = document.getElementById('prev'); d1.style.cssText = "display:block;" let d2 = document.getElementById('next'); d2.style.cssText = "display:block;"}, hiddenSwiperButton() { let d1 = document.getElementById('prev'); d1.style.cssText = "display:none;" let d2 = document.getElementById('next'); d2.style.cssText = "display:none;" } }
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
同时绑定Swiper盒子,当鼠标移入Swiper盒子的时候显示,移出Swiper盒子的时候隐藏
<div class="swiper" @mousemove="showSwiperButton()" @mouseout="hiddenSwiperButton()"></div>
- 1
4.1.3 了解更多按钮的实现
看到这个图的时候,我就清楚,显然是要在了解更多的position上下功夫,让图片的盒子沾满父盒子的空间,而了解更多按钮则采用absolute定位,让其相对父组件定位。
4.1.4 轮播图分页器样式
轮播图的分页器一般都是圆点样式,如上。如何修改轮播图分页器的样式呢?我参考了Swiper的文档,发现可以修改分页器的类名,进而可以修改它的样式。
这里要注意的一点是,再修改的时候,尽量在原有的基础上修改,就是先看看他默认的样式是什么样的,然后在此基础上增加我自己的样式,这样的话,不会影响分页器的排版。
.my-bullet{ width: var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,100px)); height: var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,3px)); display: inline-block; background: var(--swiper-pagination-bullet-inactive-color,#000); opacity: var(--swiper-pagination-bullet-inactive-opacity, .2); margin: 0 7px; cursor: pointer; border: 0;}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
修改正在加载的样式
.my-bullet-active{ background: #ffffff; opacity: 1;}
- 1
- 2
- 3
- 4
同时要在mounted里面,修改一下
pagination: { el: '.swiper-pagination', clickable: true, bulletClass : 'my-bullet',//需设置.my-bullet样式 bulletActiveClass: 'my-bullet-active', },
- 1
- 2
- 3
- 4
- 5
- 6
4.2 代码实现
我把轮播图单独写成了一个组件
Home.vue
<template> <div class="div_swiper"> <div class="swiper" @mousemove="showSwiperButton()" @mouseout="hiddenSwiperButton()"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img class="slide_img" src="@/assets/huawei-cloud-discount-pc.jpg" /> <button class="img_btn">了解更多</button> </div> <div class="swiper-slide"> <img class="slide_img" src="@/assets/vmall-mate50-series-3.jpg" /> <button class="img_btn">了解更多</button> </div> </div> <div class="swiper-button-prev" id="prev"></div> <!--左箭头。如果放置在swiper外面,需要自定义样式。--> <div class="swiper-button-next" id="next"></div> <!--右箭头。如果放置在swiper外面,需要自定义样式。--> <div class="swiper-pagination"></div> <!--分页器。如果放置在swiper外面,需要自定义样式。--> </div> </div></template><script>import "swiper/swiper-bundle.min.css"; // 所有 Swiper 样式,包括所有模块样式(如导航、分页等)import Swiper, { Navigation, Pagination, Scrollbar, Autoplay } from "swiper"; // 导入您需要的模块export default { name: 'MySwiper', methods: { showSwiperButton() { let d1 = document.getElementById('prev'); d1.style.cssText = "display:block;" let d2 = document.getElementById('next'); d2.style.cssText = "display:block;" }, hiddenSwiperButton() { let d1 = document.getElementById('prev'); d1.style.cssText = "display:none;" let d2 = document.getElementById('next'); d2.style.cssText = "display:none;" } }, mounted() { new Swiper(".swiper", { speed: 500,//播放的速度 // spaceBetween: 2000,// 轮播图之间的间距 loop: true,//是否循环播放 autoplay: { delay: 2000,//自动播放的间隔 }, modules: [Navigation, Pagination, Scrollbar, Autoplay], navigation: { nextEl: ".swiper-button-next",//前一个按钮 prevEl: ".swiper-button-prev",//后一个按钮 }, scrollbar: { el: ".swiper-scrollbar", draggable: true, }, pagination: { el: '.swiper-pagination', clickable: true, bulletClass : 'my-bullet',//需设置.my-bullet样式 bulletActiveClass: 'my-bullet-active', }, }); },}</script><style>.div_swiper { width: 100%; height: 100%;}.swiper { height: 100%; width: 100%;}.swiper-wrapper { width: 100%; height: 100%;}.swiper-slide { width: 100%; height: 100%; margin-right: 0px; position: relative;}.slide_img { width: 100%;}.img_btn { z-index: 100; width: 170px; height: 42px; position: absolute; border: 1px solid #111111; left: 296px; top: 315px; color: #111111; cursor: pointer; /* background-color: red; */}.img_btn:hover { background-color: rgb(199, 0, 11); border: 0px; color: #fff;}.swiper-button-prev { display: none;}.swiper-button-next { display: none;} .my-bullet{ width: var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,100px)); height: var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,3px)); display: inline-block; background: var(--swiper-pagination-bullet-inactive-color,#000); opacity: var(--swiper-pagination-bullet-inactive-opacity, .2); margin: 0 7px; cursor: pointer; border: 0;}.my-bullet-active{ background: #ffffff; opacity: 1;}</style>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
4.3 效果图
4.3.1 前进后退按钮效果
4.3.2 切换效果
4.3.3 了解更多
5 代码汇总
<template> <div class="big_div1"> <div class="div_top"> <div class="top_container"> <div class="container_div1"> 集团网站 </div> <div class="container_div2"> 选择区域/语言 </div> <div class="container_div3"> 登录 </div> </div> </div> <div class="div_header"> <div class="header_left"> <a class="header_logo"> <img src="@/assets/huawei_logo.png" alt=""> </a> </div> <div class="header_info"> <div class="info_div1"> <span class="info_span1"> 个人及家庭产品 </span> </div> <div class="info_div2"> <span class="info_span2"> 商用产品及方案 </span> </div> <div class="info_div3"> <span class="info_span3"> 服务支持 </span> </div> <div class="info_div4"> <span class="info_span4"> 合作伙伴与开发者 </span> </div> <div class="info_div5"> <span class="info_span5"> 关于华为 </span> </div> </div> <div class="header_right"> <div class="right_info"> <span>在线购买</span> </div> <div class="right_logo"> <span class="logo_span"> </span> </div> </div> </div> <div class="div_swiper"> <MySwiper></MySwiper> </div> <div class="div_container"> <div class="div_title"> <h2 class="title_h2">推荐信息</h2> </div> <div class="container_imgs"> <div class="div_row1"> <div class="row1_col1"> <a href="" class="col1_a1"> <div class="a_div1"> <div class="mask"></div> <img src="@/assets/matebook-x-pro2.jpg" alt="" class="a1_img1"> </div> <div class="a_div2"> <div class="div2_title"> 产品 </div> <div class="div2_info"> HUAWEI MateBook X Pro </div> <div class="div2_info2"> 入目惊鸿 </div> <div class="div2_hidden"> 了解更多 </div> </div> </a> </div> <div class="row1_col2"> <a href="" class="col1_a1"> <div class="a_div1"> <div class="mask"></div> <img src="@/assets/2.jpg" alt="" class="a1_img1"> </div> <div class="a_div2"> <div class="div2_title"> 产品 </div> <div class="div2_info"> HUAWEI MateBook X Pro </div> <div class="div2_info2"> 入目惊鸿 </div> <div class="div2_hidden"> 了解更多 </div> </div> </a> </div> </div> <div class="div_row1"> <div class="row1_col2 "> <a href="" class="col1_a1"> <div class="a_div1"> <div class="mask"></div> <img src="@/assets/3.jpg" alt="" class="a1_img1"> </div> <div class="a_div2"> <div class="div2_title"> 产品 </div> <div class="div2_info"> HUAWEI MateBook X Pro </div> <div class="div2_info2"> 入目惊鸿 </div> <div class="div2_hidden"> 了解更多 </div> </div> </a> </div> <div class="row1_col3"> <a href="" class="col1_a1"> <div class="a_div1"> <div class="mask"></div> <img src="@/assets/4.jpg" alt="" class="a1_img1"> </div> <div class="a_div2"> <div class="div2_title"> 产品 </div> <div class="div2_info"> HUAWEI MateBook X Pro </div> <div class="div2_info2"> 入目惊鸿 </div> <div class="div2_hidden"> 了解更多 </div> </div> </a> </div> </div> <div class="div_row3"> <div class="row1_col2 "> <a href="" class="col1_a1"> <div class="a_div1"> <div class="mask"></div> <img src="@/assets/5.jpg" alt="" class="a1_img1"> </div> <div class="a_div2"> <div class="div2_title"> 产品 </div> <div class="div2_info"> HUAWEI MateBook X Pro </div> <div class="div2_info2"> 入目惊鸿 </div> <div class="div2_hidden"> 了解更多 </div> </div> </a> </div> <div class="row1_col2 col2_displacement"> <a href="" class="col1_a1"> <div class="a_div1"> <div class="mask"></div> <img src="@/assets/6.jpg" alt="" class="a1_img1"> </div> <div class="a_div2"> <div class="div2_title"> 产品 </div> <div class="div2_info"> HUAWEI MateBook X Pro </div> <div class="div2_info2"> 入目惊鸿 </div> <div class="div2_hidden"> 了解更多 </div> </div> </a> </div> <div class="row1_col2 col2_displacement"> <a href="" class="col1_a1"> <div class="a_div1"> <div class="mask"></div> <img src="@/assets/7.jpg" alt="" class="a1_img1"> </div> <div class="a_div2"> <div class="div2_title"> 产品 </div> <div class="div2_info"> HUAWEI MateBook X Pro </div> <div class="div2_info2"> 入目惊鸿 </div> <div class="div2_hidden"> 了解更多 </div> </div> </a> </div> </div> </div> </div> </div></template><script>import MySwiper from "@/components/MySwiper.vue"export default { name: 'Home', components: { MySwiper }, methods: { showDiv1() { var d1 = document.getElementById('div_main'); d1.style.cssText = 'visibility: visible;' }, hideDiv1() { var d1 = document.getElementById('div_main'); d1.style.cssText = 'animation-name:example; animation-duration:0.1s;animation-fill-mode: forwards;'; } }}</script><style>@keyframes example { from { visibility: visible; } to { visibility: hidden; }}@font-face { font-family: 'YaHei'; src: url('@/assets/font/微软雅黑繁简完全版.ttf');}@font-face { font-family: 'Huawei'; src: url('@/assets/font/Helvetica\ Neue-Roman.ttf');}</style><style scoped>* { font-family: Microsoft YaHei, Arial, Helvetica, sans-serif !important;}/* 顶部 */.div_top { height: 25px; width: 100%; position: static; text-align: right; background-color: #111111;}.top_container { width: 300px; height: 25px; float: right; margin-right: 70px; display: flex; flex-direction: row; /* background-color: red; */}.container_div1 { width: 80px; height: 25px; /* background-color: aqua; */ margin-right: 10px; line-height: 25px; font-size: 10px; text-align: center; color: #ffffff; cursor: pointer;}.container_div2 { width: 140px; height: 25px; /* background-color: aqua; */ line-height: 25px; font-size: 10px; text-align: center; color: #ffffff; cursor: pointer;}.container_div3 { width: 60px; height: 25px; margin-left: 10px; /* background-color: aqua; */ line-height: 25px; font-size: 10px; text-align: center; color: #ffffff; cursor: pointer;}/* ~顶部 *//* 头部 */.div_header { width: 100%; height: 78px; background-color: #fff; border-bottom: 1px solid #e6e6e6; display: flex;}.header_left { width: 266px; height: 100%; margin-left: 50px;}.header_logo { width: 133px; height: 30px; cursor: pointer;}.header_logo img { width: 133px; height: 30px; margin-top: 22px;}.header_info { width: 800px; height: 100%; margin-left: 140px; /* background-color: red; */}.info_div1 { width: 110px; height: 100%; font-size: 0.9em; float: left; line-height: 78px; text-align: center; cursor: pointer;}.info_div2 { width: 110px; height: 100%; font-size: 0.9em; line-height: 78px; float: left; text-align: center; margin-left: 30px; cursor: pointer;}.info_div3 { width: 58px; height: 100%; font-size: 0.9em; line-height: 78px; float: left; text-align: center; margin-left: 30px; cursor: pointer;}.info_div4 { width: 116px; height: 100%; font-size: 0.9em; line-height: 78px; float: left; text-align: center; margin-left: 30px; cursor: pointer;}.info_div5 { width: 58px; height: 100%; font-size: 0.9em; line-height: 78px; float: left; text-align: center; margin-left: 30px; cursor: pointer;}.info_div1:hover { border-bottom: 1px solid red;}.info_div2:hover { border-bottom: 1px solid red;}.info_div3:hover { border-bottom: 1px solid red;}.info_div4:hover { border-bottom: 1px solid red;}.info_div5:hover { border-bottom: 1px solid red;}.header_right { margin-left: 10px; width: 220px; /* background-color: aqua; */}.right_info { float: left; width: 120px; height: 100%; font-size: 17px; line-height: 78px; text-align: center; cursor: pointer; /* background-color: #111111; */}.right_logo { width: 80px; height: 100%; float: left; line-height: 78px;}.logo_span { content: "\e62f";}/* ~头部 *//* 轮播图 */.div_swiper { width: 100%; height: 512px; margin-bottom: 70px !important;}/* ~轮播图 *//* 容器组件 */.div_container { width: 85.652%; /* border: 1px solid; */ margin: 0 auto; text-align: center;}.div_title { width: 100%; height: 100%; margin-bottom: 5%;}.title_h2 { width: 10%; height: 90%; padding-bottom: 8px; font-size: 30px; margin: 0 auto; position: relative;}.title_h2::after { position: absolute; content: ''; height: 2px; width: 47%; top: 100%; left: 27%; background-color: #c7000b;}.container_imgs { height: auto; width: 100%;}.div_row1 { height: auto; width: 100%; display: flex; margin-bottom: 30px !important;}.div_row3 { height: auto; width: 100%; display: flex; margin-bottom: 30px !important;}.row1_col1 { width: 836.98px; height: auto; position: relative; margin-right: 30px;}.row1_col3 { width: 836.98px; height: auto; position: relative; margin-left: 30px;}.col1_a1 { width: 100%; height: auto; }.a1_img1 { width: 100%; height: 100%;}.a_div1 { width: 100%; height: 100%;}.mask { position: absolute; top: 30%; width: 100%; height: 70%; opacity: 1; background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 70%);}.row1_col2 { width: 403.24px; height: auto; position: relative;}.col2_displacement { margin-left: 30px;}.a_div2 { width: 400px; height: auto; bottom: 20px; position: absolute; left: 30px; text-align: left;}.div2_title{ font-size: 1em; line-height: 1.0em; margin-bottom:10px; color: white;}.div2_info{ font-size: 1.3em; line-height: 1.4em; font-weight: 600; margin-bottom:10px; color: white;}.div2_info2{ font-size: 1em; line-height: 1.0em; margin-bottom: 20px; color: rgb(198, 199, 199);}.div2_hidden{ color: white; color: 1.0em; height: 0; display: none; line-height: 0em; margin-bottom: 10px;}/* 容器组件 */</style>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
- 165
- 166
- 167
- 168
- 169
- 170
- 171
- 172
- 173
- 174
- 175
- 176
- 177
- 178
- 179
- 180
- 181
- 182
- 183
- 184
- 185
- 186
- 187
- 188
- 189
- 190
- 191
- 192
- 193
- 194
- 195
- 196
- 197
- 198
- 199
- 200
- 201
- 202
- 203
- 204
- 205
- 206
- 207
- 208
- 209
- 210
- 211
- 212
- 213
- 214
- 215
- 216
- 217
- 218
- 219
- 220
- 221
- 222
- 223
- 224
- 225
- 226
- 227
- 228
- 229
- 230
- 231
- 232
- 233
- 234
- 235
- 236
- 237
- 238
- 239
- 240
- 241
- 242
- 243
- 244
- 245
- 246
- 247
- 248
- 249
- 250
- 251
- 252
- 253
- 254
- 255
- 256
- 257
- 258
- 259
- 260
- 261
- 262
- 263
- 264
- 265
- 266
- 267
- 268
- 269
- 270
- 271
- 272
- 273
- 274
- 275
- 276
- 277
- 278
- 279
- 280
- 281
- 282
- 283
- 284
- 285
- 286
- 287
- 288
- 289
- 290
- 291
- 292
- 293
- 294
- 295
- 296
- 297
- 298
- 299
- 300
- 301
- 302
- 303
- 304
- 305
- 306
- 307
- 308
- 309
- 310
- 311
- 312
- 313
- 314
- 315
- 316
- 317
- 318
- 319
- 320
- 321
- 322
- 323
- 324
- 325
- 326
- 327
- 328
- 329
- 330
- 331
- 332
- 333
- 334
- 335
- 336
- 337
- 338
- 339
- 340
- 341
- 342
- 343
- 344
- 345
- 346
- 347
- 348
- 349
- 350
- 351
- 352
- 353
- 354
- 355
- 356
- 357
- 358
- 359
- 360
- 361
- 362
- 363
- 364
- 365
- 366
- 367
- 368
- 369
- 370
- 371
- 372
- 373
- 374
- 375
- 376
- 377
- 378
- 379
- 380
- 381
- 382
- 383
- 384
- 385
- 386
- 387
- 388
- 389
- 390
- 391
- 392
- 393
- 394
- 395
- 396
- 397
- 398
- 399
- 400
- 401
- 402
- 403
- 404
- 405
- 406
- 407
- 408
- 409
- 410
- 411
- 412
- 413
- 414
- 415
- 416
- 417
- 418
- 419
- 420
- 421
- 422
- 423
- 424
- 425
- 426
- 427
- 428
- 429
- 430
- 431
- 432
- 433
- 434
- 435
- 436
- 437
- 438
- 439
- 440
- 441
- 442
- 443
- 444
- 445
- 446
- 447
- 448
- 449
- 450
- 451
- 452
- 453
- 454
- 455
- 456
- 457
- 458
- 459
- 460
- 461
- 462
- 463
- 464
- 465
- 466
- 467
- 468
- 469
- 470
- 471
- 472
- 473
- 474
- 475
- 476
- 477
- 478
- 479
- 480
- 481
- 482
- 483
- 484
- 485
- 486
- 487
- 488
- 489
- 490
- 491
- 492
- 493
- 494
- 495
- 496
- 497
- 498
- 499
- 500
- 501
- 502
- 503
- 504
- 505
- 506
- 507
- 508
- 509
- 510
- 511
- 512
- 513
- 514
- 515
- 516
- 517
- 518
- 519
- 520
- 521
- 522
- 523
- 524
- 525
- 526
- 527
- 528
- 529
- 530
- 531
- 532
- 533
- 534
- 535
- 536
- 537
- 538
- 539
- 540
- 541
- 542
- 543
- 544
- 545
- 546
- 547
- 548
- 549
- 550
- 551
- 552
- 553
- 554
- 555
- 556
- 557
- 558
- 559
- 560
- 561
- 562
- 563
- 564
- 565
- 566
- 567
- 568
- 569
- 570
- 571
- 572
- 573
- 574
- 575
- 576
- 577
- 578
- 579
- 580
- 581
- 582
- 583
- 584
- 585
- 586
- 587
- 588
- 589
- 590
- 591
- 592
- 593
- 594
- 595
- 596
- 597
- 598
- 599
- 600
- 601
- 602
- 603
- 604
- 605
- 606
- 607
- 608
- 609
- 610
- 611
- 612
- 613
- 614
- 615
- 616
- 617
- 618
- 619
- 620
- 621
- 622
- 623
- 624
- 625
- 626
- 627
- 628
- 629
- 630
- 631
- 632
- 633
- 634
- 635
- 636
- 637
- 638
- 639
MySwiper.vue
<template> <div class="div_swiper"> <div class="swiper" @mousemove="showSwiperButton()" @mouseout="hiddenSwiperButton()"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img class="slide_img" src="@/assets/huawei-cloud-discount-pc.jpg" /> <button class="img_btn">了解更多</button> </div> <div class="swiper-slide"> <img class="slide_img" src="@/assets/vmall-mate50-series-3.jpg" /> <button class="img_btn">了解更多</button> </div> </div> <div class="swiper-button-prev" id="prev"></div> <!--左箭头。如果放置在swiper外面,需要自定义样式。--> <div class="swiper-button-next" id="next"></div> <!--右箭头。如果放置在swiper外面,需要自定义样式。--> <div class="swiper-pagination"></div> <!--分页器。如果放置在swiper外面,需要自定义样式。--> </div> </div></template><script>import "swiper/swiper-bundle.min.css"; // 所有 Swiper 样式,包括所有模块样式(如导航、分页等)import Swiper, { Navigation, Pagination, Scrollbar, Autoplay } from "swiper"; // 导入您需要的模块export default { name: 'MySwiper', methods: { showSwiperButton() { let d1 = document.getElementById('prev'); d1.style.cssText = "display:block;" let d2 = document.getElementById('next'); d2.style.cssText = "display:block;" }, hiddenSwiperButton() { let d1 = document.getElementById('prev'); d1.style.cssText = "display:none;" let d2 = document.getElementById('next'); d2.style.cssText = "display:none;" } }, mounted() { new Swiper(".swiper", { speed: 500,//播放的速度 // spaceBetween: 2000,// 轮播图之间的间距 loop: true,//是否循环播放 autoplay: { delay: 2000,//自动播放的间隔 }, modules: [Navigation, Pagination, Scrollbar, Autoplay], navigation: { nextEl: ".swiper-button-next",//前一个按钮 prevEl: ".swiper-button-prev",//后一个按钮 }, scrollbar: { el: ".swiper-scrollbar", draggable: true, }, pagination: { el: '.swiper-pagination', clickable: true, bulletClass : 'my-bullet',//需设置.my-bullet样式 bulletActiveClass: 'my-bullet-active', }, }); },}</script><style>.div_swiper { width: 100%; height: 100%;}.swiper { height: 100%; width: 100%;}.swiper-wrapper { width: 100%; height: 100%;}.swiper-slide { width: 100%; height: 100%; margin-right: 0px; position: relative;}.slide_img { width: 100%;}.img_btn { z-index: 100; width: 170px; height: 42px; position: absolute; border: 1px solid #111111; left: 296px; top: 315px; color: #111111; cursor: pointer; /* background-color: red; */}.img_btn:hover { background-color: rgb(199, 0, 11); border: 0px; color: #fff;}.swiper-button-prev { display: none;}.swiper-button-next { display: none;} .my-bullet{ width: var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,100px)); height: var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,3px)); display: inline-block; background: var(--swiper-pagination-bullet-inactive-color,#000); opacity: var(--swiper-pagination-bullet-inactive-opacity, .2); margin: 0 7px; cursor: pointer; border: 0;}.my-bullet-active{ background: #ffffff; opacity: 1;}</style>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148