Vue复刻华为官网 (一)

1 分析

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

2 顶部盒子的实现

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

2.1 思路

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

我看了一下华为公司的代码，他是用的一个盒子，里面包裹了3个a标签，我用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 思路

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

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

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

我们各个击破

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>
            
            <div class="swiper-button-next" id="next">div>
            
            <div class="swiper-pagination">div>
            
        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盒子的时候隐藏

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>
            
            <div class="swiper-button-next" id="next">div>
            
            <div class="swiper-pagination">div>
            
        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>
            
            <div class="swiper-button-next" id="next">div>
            
            <div class="swiper-pagination">div>
            
        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