vue.js css 前端 Vue复刻华为官网 (一)

1 分析

根据华为网页的布局，我们大体上可以将其划分为7个盒子，如下，由于写一个这样的网页再加上部分动态效果，需要的时间很长，本篇博客只记录了div1、div2、div3的静态效果+轮播图的实现。

2 顶部盒子的实现

想要实现的正是最上部那个黑色的圆框

2.1 思路

我的思路很简单，用四个盒子，其中最大的盒子也就是整个黑色框，大盒子里面包裹着小盒子，每个小盒子对应一个字段（集团网站、选择区域/语言、登录），排版布局，则需要三个小盒子，依次向左浮动（float:left;）。或者大盒子单独采用display:flex；布局

我看了一下华为公司的代码，他是用的一个盒子，里面包裹了3个a标签，我用div习惯了，所以用的是div。

2.2 代码实现

.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;

}

3 头部盒子的实现

正是此处

3.1 思路

首先分成了三个大盒子，分别对应左、中、右三个组件，其中每一个字段或者图标都对应一个小盒子。其中中间容器的那些小盒子都需要不同的样式，因为他有一个悬浮的效果，悬浮的时候，会有一个红色的底框，而且长度各不同。

所以我为每个盒子设置了不同的宽高。

华为采用的是ul-li的形式，我本来写的是没有动态的数据，我还得自己写数组，好麻烦，还不如写div轻松。后来想想，用不着写数据，还是ul-li好用一些

3.2 代码实现

.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";

}

3.3 效果图

4 轮播图的实现

4.1 思路

这里颇费了一些周章，轮播图还算好实现的，毕竟可以直接使用Swiper。

但是这里还是有一些特别的点，主要如下：

鼠标的移入移出，前进后退的显示与隐藏了解更多按钮的镶嵌轮播图分页器形式的改变（由点变成了狭长的长方形）

我们各个击破

4.1.1 使用轮播图

轮播图的教程网站

首先需要引入，在终端输入

npm install swiper

然后再使用的地方import

import "swiper/swiper-bundle.min.css"; // 所有 Swiper 样式，包括所有模块样式（如导航、分页等）

import Swiper, { Navigation, Pagination, Scrollbar, Autoplay } from "swiper"; // 导入您需要的模块

只需要在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',

},

});

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;"

}

}

同时绑定Swiper盒子，当鼠标移入Swiper盒子的时候显示，移出Swiper盒子的时候隐藏

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;

}

修改正在加载的样式

.my-bullet-active{

background: #ffffff;

opacity: 1;

}

同时要在mounted里面，修改一下

pagination: {

el: '.swiper-pagination',

clickable: true,

bulletClass : 'my-bullet',//需设置.my-bullet样式

bulletActiveClass: 'my-bullet-active',

},

4.2 代码实现

我把轮播图单独写成了一个组件

Home.vue

4.3 效果图

4.3.1 前进后退按钮效果

4.3.2 切换效果

4.3.3 了解更多

5 代码汇总

MySwiper.vue

好文链接

 您阅读本篇文章共花了：