Vue replica Huawei official website (1)

Language 2022-10-25 00:18:44 views: null

1 Analysis

image-20221021084853428

According to the layout of Huawei's web page, we can roughly divide it into 7 boxes, as follows, because writing such a web page plus some dynamic effects takes a long time, this blog only records div1, div2, div3 The realization of static effect + carousel map.

image-20221021085505157

2 Implementation of the top box

What I want to achieve is the black round frame at the top

image-20221021085728984

2.1 Ideas

My idea is very simple, use four boxes, the largest of which is the entire black box, the large box is wrapped with small boxes, each small box corresponds to a field (group website, select region/language, login), typesetting layout , you need three small boxes, which are floated to the left in turn (float:left;). Or the big box uses display:flex alone; layout

I took a look at Huawei's code. He used a box with 3 a tags wrapped in it. I'm used to using div, so I used div.

2.2 Code Implementation

  <div class="top_container">
        <div class="container_div1">
          集团网站
        </div>
        <div class="container_div2">
          选择区域/语言
        </div>
        <div class="container_div3">
          登录
        </div>
  </div>

.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 Implementation of the head box

it is here

image-20221021090620270

3.1 Ideas

First, it is divided into three large boxes, corresponding to the left, middle and right components, and each field or icon corresponds to a small box. The small boxes in the middle container all need different styles, because they have a floating effect. When floating, there will be a red bottom frame, and the lengths are different.

Honeycam 2022-10-21 09-08-18

So I set different width and height for each box.

Huawei uses the form of ul-li. I originally wrote no dynamic data. I had to write the array myself, which is very troublesome. It is better to write div easily. After thinking about it, I don't need to write data, it's better to use ul-li

3.2 Code Implementation

 <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_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 Rendering

insert image description here

4 Implementation of carousel map

image-20221021091458647

4.1 Ideas

It took a lot of work here, and the carousel map is still easy to achieve. After all, you can use Swiper directly.

But there are still some special points here, mainly as follows:

  • Move the mouse in and out, display and hide forward and backward
  • Learn more about button mosaics
  • Change in the form of the carousel pager (from a point to a long and narrow rectangle)

We each break

4.1.1 Using Carousel

Tutorial site for carousels

First need to import, enter in the terminal

npm install swiper

image-20221021092141577

Then use the place to import

import "swiper/swiper-bundle.min.css";  // 所有 Swiper 样式，包括所有模块样式（如导航、分页等）
import Swiper, {
    
     Navigation, Pagination, Scrollbar, Autoplay } from "swiper"; // 导入您需要的模块

Just write the following code to use it when 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',
            },
        });

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

4.1.2 Hide and show forward and backward

Obviously, mouse events are used here. When the mouse moves in, set a method to display the forward and back buttons. When the mouse moves out, set the forward and back to hide. Of course, the forward and back are initially hidden.

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

At the same time, bind the Swiper box, display it when the mouse moves into the Swiper box, and hide it when it moves out of the Swiper box

<div class="swiper" @mousemove="showSwiperButton()" @mouseout="hiddenSwiperButton()"></div>

4.1.3 Learn more about the implementation of buttons

image-20221021095946673

When I saw this picture, it was clear to me that it was obvious that I had to work hard to understand more positions, so that the box of the picture was filled with the space of the parent box, and the learn more button was positioned absolute, so that it was positioned relative to the parent component .

4.1.4 Carousel pager style

image-20221021100227939

The pager of the carousel is generally a dot style, as above. How to modify the style of the carousel pager? I referenced Swiper's documentation and found that the class name of the pager can be modified, and then its style can be modified.

image-20221021100357755

One thing to note here is that when modifying again, try to modify it on the original basis, that is, first see what his default style looks like, and then add my own style on this basis. In this case, it will not affect Pager typography.

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

Modify the style being loaded

.my-bullet-active{
    
    
    background: #ffffff;
    opacity: 1;
}

At the same time, you need to modify it in the mounted

  pagination: {
    
    
                el: '.swiper-pagination',
                clickable: true,
                bulletClass : 'my-bullet',//需设置.my-bullet样式
                bulletActiveClass: 'my-bullet-active',
            },

4.2 Code Implementation

I wrote the carousel as a separate component

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>

4.3 Rendering

4.3.1 Effect of forward and backward buttons

insert image description here

4.3.2 Switch effect

[External link image transfer failed, the source site may have anti-leech mechanism, it is recommended to save the image and upload it directly (img-89X5kjAq-1666319157704) (../../Desktop file/1012/Honeycam 2022-10-21 10- 15-41.webp)]

4.3.3 Learn more

[External link image transfer failed, the source site may have anti-leech mechanism, it is recommended to save the image and upload it directly (img-yCBL09iy-1666319157705) (../../Desktop file/1012/Honeycam 2022-10-21 10- 18-45.webp)]

5 Code Summary

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

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>

Guess you like

Origin blog.csdn.net/m0_59792745/article/details/127441069
Recommended
Ranking
error: (-215:Assertion failed) !_img.empty() in function ‘cv::imwrite‘
Database migration between Navicat servers
Minimum number of rotation of the array: Array
balenaEtcher for mac (make a boot disk software) v1.5.67
Custom processing serialization and deserialization in jackson
Mu-en-mask system development software
Mastering Regular Expressions
Find mileage Java--
Web pages can not directly concern the public micro-channel number how to do? A key to arouse public concern number of micro-channel solutions
[CodeForces - 739B] Alyona and a tree Tree + [difference] + bipartite
Daily
More
2024-05-12(28)
2024-05-11(32)
2024-05-10(34)
2024-05-09(32)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)
2024-05-04(18)
2024-05-03(8)

Code World

© 2018 codetd.com