Vue レプリカ Huawei 公式サイト (1)

プログラミング 2022-10-25 00:18:48 訪問数: null

1 分析

画像-20221021084853428

HuaweiのWebページのレイアウトによると、次のように大まかに7つのボックスに分けることができます。このようなWebページといくつかの動的効果を記述するには時間がかかるため、このブログではdiv1、div2、div3のみを記録します静的効果の実現+ カルーセル マップ。

画像-20221021085505157

2 トップボックスの実装

私が達成したいのは、上部の黒い丸いフレームです

画像-20221021085728984

2.1 アイデア

私のアイデアは非常にシンプルです。4 つのボックスを使用します。最大のものはブラック ボックス全体です。大きなボックスは小さなボックスで囲まれ、各小さなボックスはフィールド (グループ Web サイト、地域/言語の選択、ログイン) に対応し、レイアウトを組版します。 、左に順番にフロートする 3 つの小さなボックスが必要です (float:left;)。または、大きなボックスは display:flex のみを使用します; レイアウト

Huaweiのコードを見てみると、彼は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>

.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 ヘッドボックスの実装

ここです

画像-20221021090620270

3.1 アイデア

まず、左、中、右のコンポーネントに対応する 3 つの大きなボックスに分割され、各フィールドまたはアイコンが小さなボックスに対応します。真ん中のコンテナの小さなボックスは、フローティング効果があるため、すべて異なるスタイルが必要であり、フローティングすると、赤いボトムフレームがあり、長さが異なります。

ハニーカム 2022-10-21 09-08-18

そのため、ボックスごとに異なる幅と高さを設定しました。

Huawei は ul-li の形をとっています.もともと動的データは書いていません.自分で配列を書かなければならず,とても面倒です. 考えてみると、データを書き込む必要はありません。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>

.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 カルーセルマップの実装

画像-20221021091458647

4.1 アイデア

ここでは多くの作業が必要でしたが、カルーセル マップはまだ簡単に作成できます. 結局、Swiper を直接使用できます.

ただし、ここにはまだいくつかの特別なポイントがあります。主に次のとおりです。

  • マウスの内外移動、前後の表示と非表示
  • ボタン モザイクの詳細
  • カルーセルページャーの形状変更（点から細長い長方形へ）

私たちはそれぞれ壊れます

4.1.1 カルーセルの使用

カルーセルのチュートリアル サイト

最初にインポートする必要があり、ターミナルに入力します

npm インストールスワイパー

画像-20221021092141577

次に、場所を使用してインポートします

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

マウント時に使用するには、次のコードを記述するだけです

 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 前方と後方の非表示と表示

ここではもちろんマウスイベントを使っています. マウスが入ったら進むボタンと戻るボタンを表示するメソッドを設定します. マウスが出ると進むボタンと戻るボタンを非表示にするメソッドを設定します. もちろん, 最初は進むボタンと戻るボタンは非表示になっています.

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

同時に、スワイパー ボックスをバインドし、マウスがスワイパー ボックス内に移動すると表示し、スワイパー ボックスから出ると非表示にします。

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

4.1.3 ボタンの実装について詳しく知る

画像-20221021095946673

この写真を見たとき、写真のボックスが親ボックスのスペースで満たされ、詳細ボタンが配置されるように、より多くの位置を理解するために一生懸命働かなければならないことが明らかでした。絶対、親コンポーネントに対して相対的に配置されるようにします。

4.1.4 カルーセル ページャー スタイル

画像-20221021100227939

上記のように、カルーセルのページャーは一般的にドット スタイルです。カルーセルページャーのスタイルを変更するには? Swiper のドキュメントを参照したところ、ページャーのクラス名を変更して、そのスタイルを変更できることがわかりました。

画像-20221021100357755

ここで注意しなければならないのは、再度変更する場合は、元のスタイル、つまり、最初に彼のデフォルトのスタイルがどのように見えるかを確認してから、これに基づいて自分のスタイルを追加するという元のベースで変更を試みることです. この場合、影響はありません.ページャーのタイポグラフィ。

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

同時に、マウントされたものを変更する必要があります

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

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>

4.3 レンダリング

4.3.1 進むボタンと戻るボタンの効果

ここに画像の説明を挿入

4.3.2 スイッチ効果

[外部リンクの画像転送に失敗しました。ソース サイトにアンチ リーチ メカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします (img-89X5kjAq-1666319157704) (../../デスクトップ ファイル/1012/Honeycam 2022- 10-21 10-15-41.webp)]

4.3.3 詳細

[外部リンクの画像転送に失敗しました。ソース サイトにアンチ リーチ メカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします (img-yCBL09iy-1666319157705) (../../デスクトップ ファイル/1012/Honeycam 2022- 10-21 10-18-45.webp)]

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>

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>

おすすめ

転載: blog.csdn.net/m0_59792745/article/details/127441069
おすすめ
Apache Doris バージョン 2.0.10 が正式にリリースされました。
Open Source Daily | 大手モデルが戦争に突入、大手モデルのユニコーンが身売りしていることが明らかに; 最大のオープンソース AI コミュニティが GPU の共有に 1,000 万ドルを提供すると示唆
ランキング
ジャンゴ使用KindEditorアップロード写真
FirstOrDefault VS C＃の検索
SQL UNIONルール
VS Code は HTML スタートアップを実装し、ホット アップデート サービスを提供します
Linux プログラミング: 1. コルーチンの設計原則
目标检测的“尽头”竟是语言建模？Hinton团队提出Pix2Seq：性能优于DETR
CTFdインストールの新バージョン以降の操作および保守について話します
構造体へのポインタ出力4人の学生学生ID名前性別年齢を使用することにより
1.3.2リリース、連続ファイル同期ツールをSyncthing
PyQt5 インストールチュートリアル
アーカイブ
もっと
2024-05-17(6)
2024-05-16(24)
2024-05-15(5)
2024-05-14(9)
2024-05-13(8)
2024-05-12(27)
2024-05-11(31)
2024-05-10(33)
2024-05-09(30)
2024-05-08(18)

コードワールド

© 2018 codetd.com