<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>小米</title>
<link rel="stylesheet" href="./css/reset.css" />
<link rel="stylesheet" href="./css/icon.css">
<link rel="stylesheet" href="./css/swiper.min.css">
<link rel="stylesheet" href="./css/mi_index.css">
</head>
<body>
<!-- 头部 -->
<div class="header" id="header">1
<div class="site-topbar">
<div class="container">
<nav class="clearfix">
<ul class="nav_left clearfix">
<li><a href="javascript:;">小米商城</a><span>|</span></li>
<li><a href="javascript:;">MIUI</a><span>|</span></li>
<li><a href="javascript:;">IoT</a><span>|</span></li>
<li><a href="javascript:;">云服务</a><span>|</span></li>
<li><a href="javascript:;">天星数科</a><span>|</span></li>
<li><a href="javascript:;">有品</a><span>|</span></li>
<li><a href="javascript:;">小米商城</a><span>|</span></li>
<li><a href="javascript:;">小爱开放平台</a><span>|</span></li>
<li><a href="javascript:;">企业团购</a><span>|</span></li>
<li><a href="javascript:;">资质证照</a><span>|</span></li>
<li><a href="javascript:;">协议规则</a><span>|</span></li>
<li><a href="javascript:;">下载app</a><span>|</span></li>
<li><a href="javascript:;">智能生活</a><span>|</span></li>
<li><a href="javascript:;">Select Location</a></li>
</ul>
<ul class="nav_right clearfix">
<li><a href="javascript:;">登录</a><span>|</span></li>
<li><a href="javascript:;">注册</a><span>|</span></li>
<li><a href="javascript:;" style="padding: 0px 10px;">信息通知</a></li>
<li style="margin-left: 15px;"><a href="javascript:;"class="iconfont icon-xiaomigouwuche">购物车（0）</a></li>
</ul>
</nav>
</div>
</div>
<div class="site-header">
<div class="container clearfix">
<div class="login_icon">
<a href=""><img src="./images/logo-mi2.png" alt=""></a>
</div>
<div class="header-nav">
<ul class="nav-list clearfix">
<li>
<a href="javascript:;">小米手机</a>
<div class="item-children">
<ul class="children-list clearfix">
<li>
<a href="javascript:;">
<img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/85e44ea2405ff8414148bbde7446b137.png?thumb=1&w=200&h=138&f=webp&q=90" alt="" style="border-left: none;">
<div class="title">
小米MIX FOLD
</div>
<span class="price">9999元起</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/1a359e9346e3c6ee8c9d8389e3fd9458.png?thumb=1&w=200&h=138&f=webp&q=90" alt="">
<div class="title">
小米11 Ultra
</div>
<span class="price">5499元起</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/a1c45eadcedeb27b1cafca0359422da9.png?thumb=1&w=200&h=138&f=webp&q=90" alt="">
<div class="title">
小米11 Pro
</div>
<span class="price">4499元起</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/56e3379b5422cb06e5c8a0c546445606.png?thumb=1&w=200&h=138&f=webp&q=90" alt="">
<div class="title">
小米11 青春版
</div>
<span class="price">2099元起</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/f9149ef3ba2c9025a4a21c98ae793808.png?thumb=1&w=200&h=138&f=webp&q=90" alt="">
<div class="title">
小米10S
</div>
<span class="price">2999元起</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/963679eaf3937351e154600ab3448460.png?thumb=1&w=200&h=138&f=webp&q=90" alt="">
<div class="title">
小米11
</div>
<span class="price">3799元起</span>
</a>
</li>
</ul>
</div>
</li>
<li><a href="javascript:;">Redmi 红米</a></li>
<li><a href="javascript:;">电视</a></li>
<li><a href="javascript:;">笔记本</a></li>
<li><a href="javascript:;">家电</a></li>
<li><a href="javascript:;">路由器</a></li>
<li><a href="javascript:;">智能硬件</a></li>
<li><a href="javascript:;">服务</a></li>
<li><a href="javascript:;">社区</a></li>
</ul>
</div>
<div class="header-search">
<input type="text" name="" id="" placeholder="家电">
<button type="button" value="" class="icon-fangdajing iconfont">
</div>
</div>
</div>
</div>
<!-- 轮播图 -->
<div class="main-swiper">
<div class="container clearfix">
<!-- 轮播图 -->
<div class="swiper">
<div class="swiper-container" id="swiper1">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="./images/bg1.webp"></div>
<div class="swiper-slide"><img src="./images/bg2.jpg"></div>
<div class="swiper-slide"><img src="./images/bg3.webp"></div>
</div>
<!-- 分页器 -->
<div class="swiper-pagination"></div>
<!-- 导航按钮 -->
<div class="swiper-button-prev" style="margin-left: 234px;"></div>
<div class="swiper-button-next"></div>
</div>
</div>
<!-- 侧栏 -->
<ul class="categoryList">
<li>
<a href="javascript:;">手机 电话卡</a>
<i class="iconfont icon-right"></i>
<div class="children clearfix">
<ul>
<li>
<a href="javascript:;">
<img src="./images/pho1.png" alt="">
<span class="text">小米MIX FOLD2</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/a1241b5a94ba1739e85f72d46592af0e.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<span class="text">小米11 Ultra</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/6cf44dfe89111cb35e1a2211481ff546.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<span class="text">小米11 Pro</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/72bd70039670d29610569421f753fcb6.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<span class="text">小米11 青春</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/c89e7b3a3495acaa0a4df271d9da59ea.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<span class="text">小米10S</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/a51c1afa4db8e47e62fad1f6fa4a8970.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<span class="text">小米11</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="javascript:;">
<img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/4a7a4f24061860901f724b6ba6d75fd9.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<span class="text">小米10</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/0dfda044e0ddcfb3ef63e7e2b87daea3.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<span class="text">黑鲨4 Pro</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/7b7e7228d1708665b7e6fe5e07ad4929.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<span class="text">黑鲨4</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/69a0df49cff71107977bbe3b48af15fa.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<span class="text">Redmi K30S 至尊纪念版</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/8ade0163e9fdbd92a4b7d7ee3aeab905.jpg?thumb=1&w=50&h=50" alt="">
<span class="text">小米云服务</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/0803dc7125ffa3447b04b1ae60f57a2b.jpg?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<span class="text">Redmi K30 至尊纪念版</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="javascript:;">
<img src="./images/pho1.png" alt="">
<span class="text">小米MIX FOLD2</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/56bb7e2d44cef71c3afedaeae3d98927.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<span class="text">Note 10 Pro</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/79e2935264bf9247aa7512e330112820.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<span class="text">Note 10 5G</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/ab956ee82c24bdd83d21bc212aad3eb5.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<span class="text">K40 游戏增强版</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/0e5aa3cab478f5eeba1c7d4cf25cba9a.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<span class="text">K40 Pro 系列</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/92fdd051100722d25323e9bd188befc5.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<span class="text">Redmi K40</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="javascript:;">
<img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/77bfd346ad97807237beca297cfe2fba.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<span class="text">Redmi 8A</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/76378ce289a36fcfa29f704ba90b4155.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<span class="text">Redmi Note 9 Pro</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/970c6b287eb89620f5ee8e2b347f6f3d.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<span class="text">Redmi Note 9 5G</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/947721c8bc4a4ecc3bca17237ee64dea.png?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<span class="text">Redmi Note 9 4G</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/1db88cd66ff1a6a3e75116988b7f3e12.jpg?thumb=1&w=50&h=50&f=webp&q=90" alt="">
<span class="text">Redmi 9A</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="//cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/84e19ece0125992449a6276e2ba333e9.png?thumb=1&w=50&h=50" alt="">
<span class="text">手机上门维修</span>
</a>
</li>
</ul>
</div>
</li>
<li><a href="javascript:;"> 电视 盒子</a><i class="iconfont icon-right"></i></li>
<li><a href="javascript:;"> 笔记本 显示器</a><i class="iconfont icon-right"></i></li>
<li><a href="javascript:;"> 家电 插线板</a><i class="iconfont icon-right"></i></li>
<li><a href="javascript:;"> 出行 穿戴</a><i class="iconfont icon-right"></i></li>
<li><a href="javascript:;"> 智能 路由器</a><i class="iconfont icon-right"></i></li>
<li><a href="javascript:;"> 电源 配件</a><i class="iconfont icon-right"></i></li>
<li><a href="javascript:;"> 健康 儿童</a><i class="iconfont icon-right"></i></li>
<li><a href="javascript:;">耳机 音箱</a><i class="iconfont icon-right"></i></li>
<li><a href="javascript:;">生活 箱包</a><i class="iconfont icon-right"></i></li>
</ul>
<!-- 广告位 -->
<div class="advertising">
<ul class="clearfix">
<li>
<ul class="clearfix">
<li><i class="iconfont icon-miaosha"></i>小米秒杀</li>
<li><i class="iconfont icon-qiyetuangou-01"></i>企业团购</li>
<li><i class="iconfont icon-Fmatongdao"></i>F码通道</li>
<li><i class="iconfont icon-mifenka"></i>米粉卡</li>
<li><i class="iconfont icon-yijiuhuanxin"></i>以旧换新</li>
<li><i class="iconfont icon-huafeichongzhi"></i>话费充值</li>
</ul>
</li>
<li><img src="./images/ad1.jpg" alt=""></li>
<li><img src="./images/ad2.jpg" alt=""></li>
<li><img src="./images/ad3.png" alt=""></li>
</ul>
</div>
</div>
</div>
<!-- 主体 -->
<div class="page-main">
<div class="container">
<!-- 手机 -->
<div class="home-banner-box">
<a href="javascript:;">
<img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/431e5fd6bfd1b67d096928248be18303.jpg?thumb=1&w=1533&h=150&f=webp&q=90" alt="">
</a>
</div>
<div class="home-brick-box">
<div class="box-hd clearfix">
<h2 class="title">手机</h2>
<div class="more">
<a href="javascript:;">
查看更多
<i class="iconfont icon-hebingxingzhuang"></i>
</a>
</div>
</div>
<div class="box-bd clearfix">
<div class="span4">
<a href="javascript:;">
<img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/c583f2edc613f1be20fa415910b13ce3.jpg?thumb=1&w=293&h=768&f=webp&q=90" alt="">
</a>
</div>
<div class="span16">
<ul class="brick-list clearfix">
<li>
<a href="javascript:;">
<img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/61454401f855cf5ed64747a6ac04bae5.jpg?thumb=1&w=250&h=250&f=webp&q=90" alt="">
<h3 class="title">Note 10 Pro</h3>
<p class="desc">天玑1100年度旗舰芯，VC液冷散热</p>
<p class="price">
<span class="num">1599元起</span>
<del><span class="num">1699元</span></del>
</p>
</a>
</li>
<li>
<a href="javascript:;">
<img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/8909080ddb0851af0b87530e2927844f.jpg?thumb=1&w=250&h=250&f=webp&q=90" alt="">
<h3 class="title"> Redmi Note 10 5G</h3>
<p class="desc">5G小金刚，旗舰长续航</p>
<p class="price">
<span class="num">1099元起</span>
</p>
</a>
</li>
<li>
<a href="javascript:;">
<img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/5dc32ec73299ff79556dcd1cf0f0ac11.png?thumb=1&w=250&h=250&f=webp&q=90" alt="">
<h3 class="title">Note 10 Pro</h3>
<p class="desc">小米MIX FOLD</p>
<p class="price">
<span class="num">9999元起</span>
</p>
</a>
</li>
<li>
<a href="javascript:;">
<img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/eb69512d9d6430d865d457ec52eebb51.png?thumb=1&w=250&h=250&f=webp&q=90" alt="">
<h3 class="title">小米11 Ultra</h3>
<p class="desc">天玑1100年度旗舰芯，VC液冷散热</p>
<p class="price">
<span class="num">5499元起</span>
<del><span class="num">5999元</span></del>
</p>
</a>
</li>
<li>
<a href="javascript:;">
<img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/eb69512d9d6430d865d457ec52eebb51.png?thumb=1&w=250&h=250&f=webp&q=90" alt="">
<h3 class="title">小米11 Ultra</h3>
<p class="desc">1/1.12''GN2｜2K四微曲屏</p>
<p class="price">
<span class="num">5499元起</span>
<del><span class="num">5999元</span></del>
</p>
</a>
</li>
<li>
<a href="javascript:;">
<img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/3b7fbb6fe07907c60f08358adab5adfe.png?thumb=1&w=250&h=250&f=webp&q=90" alt="">
<h3 class="title">K40 游戏增强版</h3>
<p class="desc">轻薄电竞设计</p>
<p class="price">
<span class="num">1999元起</span>
</p>
</a>
</li>
<li>
<a href="javascript:;">
<img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/34caee2c867bfd8c5e0dc2d8c663e121.jpg?thumb=1&w=250&h=250&f=webp&q=90" alt="">
<h3 class="title">小米11 Pro</h3>
<p class="desc">1/1.12''GN2｜骁龙888</p>
<p class="price">
<span class="num">4499元起</span>
<del><span class="num">4999元</span></del>
</p>
</a>
</li>
<li>
<a href="javascript:;">
<img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/cb554f30eaa0316b0a736c3d59f21584.png?thumb=1&w=250&h=250&f=webp&q=90" alt="">
<h3 class="title"> 小米11 青春版</h3>
<p class="desc">天玑1100年度旗舰芯，VC液冷散热</p>
<p class="price">
<span class="num">2099元起</span>
<del><span class="num">2299元</span></del>
</p>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- 家电 -->
<div class="home-banner-box">
<a href="javascript:;">
<img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/41d16e66381cfeda7b6b39ab67678d5e.jpg?thumb=1&w=1533&h=150&f=webp&q=90" alt="">
</a>
</div>
<div class="home-brick-box">
<div class="box-hd clearfix">
<h2 class="title">家电</h2>
<ul class="tab-list">
<li>热门</li>
<li>电视影音</li>
</ul>
</div>
<div class="box-bd clearfix">
<div class="span4">
<ul>
<li>
<a href="javascript:;">
<img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/116fc43816b87192be4e67cf762e8da5.jpeg?thumb=1&w=293&h=375&f=webp&q=90" alt="">
</a>
</li>
<li>
<a href="javascript:;">
<img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/dfbdabe36b2d630d57a015e6fb5eb3ea.jpg?thumb=1&w=293&h=375&f=webp&q=90" alt="">
</a>
</li>
</ul>
</div>
<div class="span16">
<ul class="brick-list clearfix">
<li>
<a href="javascript:;">
<img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/03a9e7e96a09d256ca1badeec186c859.jpg?thumb=1&w=250&h=250&f=webp&q=90" alt="">
<h3 class="title">小米全面屏电视65英寸 E65X</h3>
<p class="desc">全面屏设计</p>
<p class="price">
<span class="num">3299元起</span>
</p>
</a>
</li>
<li>
<a href="javascript:;">
<img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/20d36fbaa18625e4fe507af31e4e9f83.jpg?thumb=1&w=250&h=250&f=webp&q=90" alt="">
<h3 class="title">全面屏电视E43K</h3>
<p class="desc">全面屏设计，海量内容</p>
<p class="price">
<span class="num">1399元起</span>
<del><span class="num">1599元</span></del>
</p>
</a>
</li>
<li>
<a href="javascript:;">
<img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/9d8674cd21c486feff5328772ab9cf01.jpg?thumb=1&w=250&h=250&f=webp&q=90" alt="">
<h3 class="title">小米电视4A 70英寸</h3>
<p class="desc">大屏更享受</p>
<p class="price">
<span class="num">3999元起</span>
</p>
</a>
</li>
<li>
<a href="javascript:;">
<img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/6bed167fc905bab57dee478bcf1e5e0d.JPG?thumb=1&w=250&h=250&f=webp&q=90" alt="">
<h3 class="title">米家互联网对开门冰箱 540L</h3>
<p class="desc">重磅新品福利特惠</p>
<p class="price">
<span class="num">2899元起</span>
<del><span class="num">3699元</span></del>
</p>
</a>
</li>
<li>
<a href="javascript:;">
<img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/b8c63a2024528fe5410ebe669b7d2407.jpg?thumb=1&w=250&h=250&f=webp&q=90" alt="">
<h3 class="title">Redmi全自动波轮洗衣机1A 8kg</h3>
<p class="desc">一键操作，父母都爱用</p>
<p class="price">
<span class="num">749元起</span>
<del><span class="num">899元</span></del>
</p>
</a>
</li>
<li>
<a href="javascript:;">
<img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/7e5f89adf98ab3fccb34012b5209cd58.jpg?thumb=1&w=250&h=250&f=webp&q=90" alt="">
<h3 class="title"> 米家互联网烟灶套装（天然气）</h3>
<p class="desc">点火排烟，风随火动</p>
<p class="price">
<span class="num">2298元起</span>
</p>
</a>
</li>
<li>
<a href="javascript:;">
<img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/1612c93ad4756215774a0dbec7a81bb2.jpg?thumb=1&w=250&h=250&f=webp&q=90" alt="">
<h3 class="title">米家电烤箱</h3>
<p class="desc">全能烘焙体验</p>
<p class="price">
<span class="num">299元</span>
</p>
</a>
</li>
<div class="brick-item">
<div class="brick-item-s">
<a href="javascrip:;">
<div claas="info">
<h3 class="title">
小米米家空气净化器 2S
</h3>
<p class="price">699元</p>
</div>
<img src="//i8.mifile.cn/v1/a1/d5a39c5e-28e7-f4c1-57fd-59933f26032b!125x125.jpg">
</a>
</div>
<div class="brick-item-s">
<a href="javascript:;">
<div class="info">
<div class="more">
浏览更多
<em>热门</em>
</div>
</div>
<img src="./images/icon7.png" style="width:61px; height:61px;">
</a>
</div>
</div>
</ul>
</div>
</div>
</div>
<!-- 智能 -->
<div class="home-banner-box">
<a href="javascript:;">
<img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/59e8fc8ba9718c266882719fb4bbcedd.jpg?thumb=1&w=1533&h=150&f=webp&q=90" alt="">
</a>
</div>
<div class="home-brick-box">
<div class="box-hd clearfix">
<h2 class="title">智能</h2>
<ul class="tab-list">
<li>热门</li>
<li>安防</li>
<li>出行</li>
</ul>
</div>
<div class="box-bd clearfix">
<div class="span4">
<ul>
<li>
<a href="javascript:;">
<img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/ffe114f73fac3a45e5622c3eff56106b.jpg?thumb=1&w=293&h=375&f=webp&q=90" alt="">
</a>
</li>
<li>
<a href="javascript:;">
<img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/a660ce095e8f553a9ed1515265f4e9fc.jpg?thumb=1&w=293&h=375&f=webp&q=90" alt="">
</a>
</li>
</ul>
</div>
<div class="span16">
<ul class="brick-list clearfix">
<li>
<a href="javascript:;">
<img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/e7c6e79433c883e1a022ec21402c1679.jpg?thumb=1&w=250&h=250&f=webp&q=90" alt="">
<h3 class="title">小米小爱音箱 Play</h3>
<p class="desc">听音乐、语音遥控家电</p>
<p class="price">
<span class="num">109元</span>
</p>
</a>
</li>
<li>
<a href="javascript:;">
<img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/3accd497afc0047cfbd40f442e3b17df.jpg?thumb=1&w=250&h=250&f=webp&q=90" alt="">
<h3 class="title">米家智能窗帘</h3>
<p class="desc">窗帘开合随心控</p>
<p class="price">
<span class="num">799元</span>
</p>
</a>
</li>
<li>
<a href="javascript:;">
<img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/550177d2e54387521bce9e78cb2949dd.jpg?thumb=1&w=250&h=250&f=webp&q=90" alt="">
<h3 class="title">小米体脂秤2</h3>
<p class="desc">轻松掌握身体脂肪率</p>
<p class="price">
<span class="num">99元</span>
</p>
</a>
</li>
<li>
<a href="javascript:;">
<img src="//cdn.cnbj0.fds.api.mi-img.com/b2c-miapp-a1/T1r_x_BgLT1RXrhCrK.jpg?thumb=1&w=250&h=250" alt="">
<h3 class="title">九号平衡车</h3>
<p class="desc">年轻人的酷玩具</p>
<p class="price">
<span class="num">1999元</span>
</p>
</a>
</li>
<li>
<a href="javascript:;">
<img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/5a312d69c1a5447c9e3d14d42d01a8fb.jpg?thumb=1&w=250&h=250&f=webp&q=90" alt="">
<h3 class="title">小米智能门锁 推拉式</h3>
<p class="desc">一键操作，父母都爱用</p>
<p class="price">
<span class="num">1499元起</span>
<del><span class="num">1699元</span></del>
</p>
</a>
</li>
<li>
<a href="javascript:;">
<img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/49f30069c778b494257320d9da5a1a60.jpg?thumb=1&w=250&h=250&f=webp&q=90" alt="">
<h3 class="title"> Redmi小爱触屏音箱 8英寸</h3>
<p class="desc">超大屏，让智能更多可能</p>
<p class="price">
<span class="num">499元</span>
</p>
</a>
</li>
<li>
<a href="javascript:;">
<img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/ec0ec7692ba005710d1887262559609c.jpg?thumb=1&w=250&h=250&f=webp&q=90" alt="">
<h3 class="title">小米手环5</h3>
<p class="desc">11种运动模式 磁吸式充电</p>
<p class="price">
<span class="num">169元起</span>
<del><span class="num">189元</span></del>
</p>
</a>
</li>
<div class="brick-item">
<div class="brick-item-s">
<a href="javascrip:;">
<div claas="info">
<h3 class="title">
米家空气净化器Pro
</h3>
<p class="price">1099元</p>
</div>
<img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/f10b003b4ff46c59f5736e8f324af034.jpg?thumb=1&w=125&h=125&f=webp&q=90">
</a>
</div>
<div class="brick-item-s">
<a href="javascript:;">
<div class="info">
<div class="more">
浏览更多
<em>热门</em>
</div>
</div>
<img src="./images/icon7.png" style="width:61px; height:61px;">
</a>
</div>
</div>
</ul>
</div>
</div>
</div>
<!-- 配件 -->
<div class="home-banner-box">
<a href="javascript:;">
<img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/89c2a209b742fce9b10d9d196149d634.jpg?thumb=1&w=1533&h=150&f=webp&q=90" alt="">
</a>
</div>
<div class="home-brick-box">
<div class="box-hd clearfix">
<h2 class="title">配件</h2>
<ul class="tab-list">
<li>热门</li>
<li>充电器</li>
</ul>
</div>
<div class="box-bd clearfix">
<div class="span4">
<ul>
<li>
<a href="javascript:;">
<img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/9f64bbd58c3f5001bdf0688894f22cb6.jpg?thumb=1&w=293&h=375&f=webp&q=90" alt="">
</a>
</li>
<li>
<a href="javascript:;">
<img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/ffe4182f1d9a5befdf2380ec90ae1620.jpg?thumb=1&w=293&h=375&f=webp&q=90" alt="">
</a>
</li>
</ul>
</div>
<div class="span16">
<ul class="brick-list clearfix">
<li>
<a href="javascript:;">
<img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/9eb0178e3bfeb7d170edd641fb4be4bc.jpg?thumb=1&w=250&h=250&f=webp&q=90" alt="">
<h3 class="title"> 高速无线充套装</h3>
<p class="desc">快速无线闪充，Qi充电标准</p>
<p class="price">
<span class="num">149元</span>
</p>
</a>
</li>
<li>
<a href="javascript:;">
<img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/1f32af53d1ad60f4980146f6a2b81019.jpg?thumb=1&w=250&h=250&f=webp&q=90" alt="">
<h3 class="title"> 小米无线充电宝青春版10000mAh</h3>
<p class="desc">窗帘开合随心控能量满满，无线有线都能充</p>
<p class="price">
<span class="num">129元</span>
</p>
</a>
</li>
<li>
<a href="javascript:;">
<img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/01dba858b327eeeadf34ce8a1d794ed4.jpg?thumb=1&w=250&h=250&f=webp&q=90" alt="">
<h3 class="title">小米车载充电器快充版</h3>
<p class="desc">双口快充，安全稳定</p>
<p class="price">
<span class="num">69元</span>
</p>
</a>
</li>
<li>
<a href="javascript:;">
<img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/573e9cb39b0d8c7f2cd063621142fe44.jpg?thumb=1&w=250&h=250&f=webp&q=90" alt="">
<h3 class="title">小米Type-C转Lightning数据线 1m</h3>
<p class="desc">苹果MFi官方认证，支持快充</p>
<p class="price">
<span class="num">59元</span>
</p>
</a>
</li>
<li>
<a href="javascript:;">
<img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/fffc0a962387dff2f70aeb009ddf69ff.jpg?thumb=1&w=250&h=250&f=webp&q=90" alt="">
<h3 class="title"> 小米车载充电器快充版1A1C 100W</h3>
<p class="desc">小米车载充电器快充版1A1C 100W</p>
<p class="price">
<span class="num">99元</span>
</p>
</a>
</li>
<li>
<a href="javascript:;">
<img src="//cdn.cnbj0.fds.api.mi-img.com/b2c-miapp-a1/287594eb-b765-8db1-3255-0a05c4c07440.jpg?thumb=1&w=250&h=250" alt="">
<h3 class="title"> 小米二合一数据线100cm</h3>
<p class="desc">支持快充，安全保护</p>
<p class="price">
<span class="num">24.9元</span>
</p>
</a>
</li>
<li>
<a href="javascript:;">
<img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/6c19fad90ad73f91e13c97cce2b15d82.jpg?thumb=1&w=250&h=250&f=webp&q=90" alt="">
<h3 class="title"> 小米9 SE 街头风保护壳</h3>
<p class="desc">简约时尚，多彩三色</p>
<p class="price">
<span class="num">49元</span>
</p>
</a>
</li>
<div class="brick-item">
<div class="brick-item-s">
<a href="javascript:;">
<div class="info">
<div class="more">
浏览更多
<em>热门</em>
</div>
</div>
<img src="./images/icon7.png" style="width:61px; height:61px;">
</a>
</div>
</div>
</ul>
</div>
</div>
</div>
<!-- 视频 -->
<div class="home-banner-box">
<a href="javascript:;">
<img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/88e35cffc82cd98cd53172460067af17.jpg?thumb=1&w=1533&h=150&f=webp&q=90" alt="">
</a>
</div>
<div class="home-video-box">
</div>
</div>
</div>
<!-- 底部 -->
<div class="footer">
<div class="container">
<div class="footer-service">
<ul class="clearfix">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
<!-- bar -->
<div class="home-tool-bar">
<ul>
<li>
<a href="javascript:;">
<i class="iconfont icon-shoujiapp"></i>
手机APP
</a>
</li>
<li>
<a href="javascript:;">
<i class="iconfont icon-ren"></i>
个人中心
</a>
</li>
<li>
<a href="javascript:;">
<i class="iconfont icon-shouhoufuwu1 "></i>
售后服务
</a>
</li>
<li>
<a href="javascript:;">
<i class="iconfont icon-rengongkefu"></i>
人工客服
</a>
</li>
<li>
<a href="#header">
<i class="iconfont icon-che-copy"></i>
购物车
</a>
</li>
</ul>
</div>
</body>
</html>
<script type="module">
import Swiper from 'https://unpkg.com/swiper/swiper-bundle.esm.browser.min.js'
const swiper1 = new Swiper('#swiper1', {
loop : true,
pagination: {
el: '.swiper-pagination',
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
speed:150,
autoplay :{
delay:1500
}
})
</script>
icon.css
@font-face {
font-family: "iconfont"; /* Project id 2676745 */
src: url('//at.alicdn.com/t/font_2676745_xay82k575r.woff2?t=1626511659319') format('woff2'),
url('//at.alicdn.com/t/font_2676745_xay82k575r.woff?t=1626511659319') format('woff'),
url('//at.alicdn.com/t/font_2676745_xay82k575r.ttf?t=1626511659319') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-rengongkefu:before {
content: "\e687";
}
.icon-shouhoufuwu1:before {
content: "\e606";
}
.icon-ren:before {
content: "\e60e";
}
.icon-shoujiapp:before {
content: "\e61d";
}
.icon-huidingbu:before {
content: "\e7a0";
}
.icon-che-copy:before {
content: "\e607";
}
.icon-hebingxingzhuang:before {
content: "\e605";
}
.icon-miaosha:before {
content: "\e657";
}
.icon-yijiuhuanxin:before {
content: "\e66d";
}
.icon-mifenka:before {
content: "\e602";
}
.icon-Fmatongdao:before {
content: "\e609";
}
.icon-huafeichongzhi:before {
content: "\e62a";
}
.icon-qiyetuangou-01:before {
content: "\e604";
}
.icon-right:before {
content: "\e600";
}
.icon-xiaomigouwuche:before {
font-size: 20px;
line-height: 20px;
content: "\e601";
}
.icon-fangdajing:before {
content: "\e603";
}
reset.css
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video{
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
font-weight: normal;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section{
display: block;
}
ol, ul, li{
list-style: none;
}
blockquote, q{
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after{
content: '';
content: none;
}
table{
border-collapse: collapse;
border-spacing: 0;
}
/* custom */
a{
color: #7e8c8d;
text-decoration: none;
-webkit-backface-visibility: hidden;
}
::-webkit-scrollbar{
width: 5px;
height: 5px;
}
::-webkit-scrollbar-track-piece{
background-color: rgba(0, 0, 0, 0.2);
-webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:vertical{
height: 5px;
background-color: rgba(125, 125, 125, 0.7);
-webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:horizontal{
width: 5px;
background-color: rgba(125, 125, 125, 0.7);
-webkit-border-radius: 6px;
}
html, body{
width: 100%;
font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", "微软雅黑", sans-serif;
}
body{
line-height: 1;
-webkit-text-size-adjust: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
html{
overflow-y: scroll;
}
/*清除浮动*/
.clearfix:before,
.clearfix:after{
content: " ";
display: inline-block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix{
*zoom: 1;
}
/*隐藏*/
.dn{
display: none;
}
mi_index
.clearfix::after {
content: " ";
clear: both;
display: block;
}
.container {
width: 1226px;
margin: 0px auto;
}
/* 头部 */
.header {
width: 1531px;
height: 140px;
}
/* 导航条 */
.header .site-topbar {
height: 40px;
background-color: #333;
}
.header .site-topbar nav > .nav_left {
float: left;
}
.header .site-topbar nav > .nav_left > li {
float: left;
}
.header .site-topbar nav > ul > li > a {
font-weight: 400;
line-height: 40px;
font-size: 12px;
color: rgb(176, 176, 176);
display: inline-block;
}
.header .site-topbar nav > ul > li > a:hover {
color: #fff;
}
.header .site-topbar nav > ul > li > span {
color: rgb(66, 66, 66);
margin: 0px 0.4em;
font-size: 12px;
font-weight: 400;
font-family: sans-serif;
}
.header .site-topbar nav > .nav_right {
float: right;
}
.header .site-topbar nav > .nav_right > li {
float: left;
}
.header .site-topbar nav > .nav_right > li :nth-child(1) {
padding: 0px 5px;
}
.header .site-topbar nav > .nav_right > li > span {
color: rgb(66, 66, 66);
margin: 0px;
font-size: 12px;
font-weight: 400;
font-family: sans-serif;
}
.header .site-topbar nav > .nav_right > li:last-child {
width: 120px;
text-align: center;
font-size: 12px;
line-height: 40px;
background-color: #424242;
}
.header .site-topbar nav > .nav_right > li:last-child a:hover {
color: #ff6700 !important;
}
/* 导航条下部分 */
.header .site-header {
background-color: #fff;
height: 100px;
}
.header .site-header .login_icon {
margin-top: 22px;
float: left;
width: 62px;
height: 56px;
}
.header .site-header .login_icon > a > img {
width: 56px;
height: 56px;
}
.header .site-header .header-nav {
height: 100px;
float: left;
padding-left: 142px;
}
.header .site-header .header-search {
margin-top: 25px;
width: 296px;
height: 50px;
float: right;
position: relative;
}
input[type="text"] {
border: none;
background: none;
outline: none;
width: 296px;
height: 50px;
padding: 0 61px 0 10px;
font-size: 14px;
border: 1px solid #e0e0e0;
box-sizing: border-box;
}
/* input:focus {
border-color: #ff6700;
} */
.header .site-header .header-search button {
width: 51px;
height: 50px;
background: none;
border: none;
display: inline-block;
position: absolute;
border-left: none;
font-size: 16px;
right: 0px;
border-left: 1px solid #e0e0e0;
}
.header .site-header .header-search button:hover {
color: #fff;
background-color: #ff6700;
}
.header .site-header .header-nav > ul {
height: 100px;
padding-top: 12px;
padding-left: 30px;
box-sizing: border-box;
}
.header .site-header .header-nav > ul > li {
float: left;
height: 88px;
position: relative;
}
.header .site-header .header-nav > ul > li:hover .item-children {
visibility: visible;
height: 224px;
}
.header .site-header .header-nav > ul > li > .item-children {
visibility: hidden;
width: 1531px;
height: 0px;
/* height: 224px; */
background-color: #fff;
position: absolute;
transition: height 1s;
z-index: 999;
top: 89px;
left: -386px;
/* padding-left: 40px; */
box-sizing: border-box;
border-top: 1px solid #cfccca;
overflow: hidden;
}
.header .site-header .header-nav > ul > li > .item-children > .children-list {
width: 1226px;
height: 100%;
margin: 0px auto;
/* background-color: red; */
box-sizing: border-box;
}
.header .site-header .header-nav > ul > li > .item-children > ul > li {
width: 204.33px;
height: 224px;
box-sizing: border-box;
float: left;
text-align: center;
}
.header .site-header .header-nav > ul > li > .item-children > ul > li > a {
display: block;
height: 224px;
}
.header
.site-header
.header-nav
> ul
> li
> .item-children
> ul
> li
> a
> .title {
width: 120px;
margin: 12px auto 10px auto;
font-size: 12px;
color: #757575;
text-align: center;
}
.header
.site-header
.header-nav
> ul
> li
> .item-children
> ul
> li
> a
> .price {
color: #ff6700;
font-size: 10px;
margin-left: -4px;
}
.header
.site-header
.header-nav
> ul
> li
> .item-children
> ul
> li
> a
> img {
width: 160px;
height: 110px;
display: block;
margin-top: 35px;
border-left: 2px solid #b0b0b0;
padding-left: 19px;
}
.header .site-header .header-nav > ul > li > a {
line-height: 24px;
font-size: 16px;
font-weight: 400;
padding: 26px 10px 38px 10px;
display: block;
color: rgb(51, 51, 51);
}
.header .site-header .header-nav > ul > li > a:hover {
color: #ff6700;
}
/* 轮播图 */
.swiper-container {
width: 100%;
height: 460px;
}
.main-swiper {
width: 1531px;
position: relative;
top: -15px;
}
.main-swiper .swiper .swiper-wrapper .swiper-slide > img {
width: 100%;
height: 460px;
}
/* 侧栏：产品列表 */
.main-swiper .categoryList {
position: absolute;
width: 234px;
height: 460px;
padding: 20px 0px;
background-color: rgba(105, 101, 101, 0.6);
z-index: 998;
top: 16px;
box-sizing: border-box;
}
.main-swiper .categoryList > li {
height: 42px;
width: 234px;
}
.main-swiper .categoryList > li::after {
content: "";
clear: both;
display: block;
}
.main-swiper .categoryList > li > i {
color: #e0e0e0;
float: right;
line-height: 42px;
margin-right: 24px;
font-size: 10px;
}
.main-swiper .categoryList > li:hover {
background-color: #ff6700;
}
.main-swiper .categoryList > li:hover .children {
/* width: 992px; */
visibility: visible;
}
.main-swiper .categoryList > li > a {
display: inline-block;
padding-left: 30px;
color: #fff;
font-size: 14px;
line-height: 42px;
}
.main-swiper .categoryList > li > .children {
width: 992px;
/* width: 0px; */
height: 460px;
background-color: #fff;
position: relative;
top: -62px;
left: 234px;
display: flex;
visibility: hidden;
/* overflow: hidden; */
/* transition: width 1s; */
}
.main-swiper .categoryList > li > .children > ul {
width: 248px;
height: 462px;
padding: 2px 0;
box-sizing: border-box;
/* float: left; */
}
.main-swiper .categoryList > li > .children > ul > li {
display: block;
width: 265px;
height: 76px;
}
.main-swiper .categoryList > li > .children > ul > li > a {
display: block;
width: 225px;
height: 40px;
padding: 18px 20px;
}
.main-swiper .categoryList > li > .children > ul > li > a > .text {
color: rgb(51, 51, 51);
font-size: 14px;
}
.main-swiper .categoryList > li > .children > ul > li > a > .text:hover {
color: #ff6700;
}
.main-swiper .categoryList > li > .children > ul > li > a > img {
width: 40px;
height: 40px;
margin-right: 12px;
vertical-align: middle;
}
.main-swiper .advertising {
width: 100%;
height: 170px;
margin-top: 14px;
}
.main-swiper .advertising > ul > li {
float: left;
}
.main-swiper .advertising > ul > li:first-child {
width: 234px;
height: 170px;
box-sizing: border-box;
padding: 3px;
background-color: #5f5750;
margin-right: 14px;
}
.main-swiper .advertising > ul > li:nth-child(n + 2) {
margin-right: 15px;
}
.main-swiper .advertising > ul > li:last-child {
margin-right: 0px;
}
.main-swiper .advertising > ul > li:nth-child(n + 2) img {
width: 316px;
height: 170px;
}
.main-swiper .advertising > ul > li > ul > li {
width: 76px;
height: 82px;
padding: 0 3px;
box-sizing: border-box;
float: left;
color: #cfccca;
font-size: 12px;
text-align: center;
}
.main-swiper .advertising > ul > li > ul > li > i {
width: 24px;
height: 24px;
display: block;
margin: 18px auto 4px auto;
}
.main-swiper .advertising > ul > li > ul > li:hover {
color: #fff;
}
/* page-main */
.page-main {
width: 1531px;
background-color: #f5f5f5;
padding: 4px 0 12px;
}
.page-main .home-banner-box {
margin: 22px auto;
}
.page-main .home-banner-box > a > img {
width: 100%;
height: 120px;
}
.page-main .home-brick-box > .box-hd {
height: 58px;
}
.page-main .home-brick-box > .box-bd {
height: 628px;
}
.page-main .home-brick-box > .box-bd > .span4 {
width: 234px;
height: 628px;
float: left;
}
.page-main .home-brick-box > .box-bd > .span16 {
width: 978px;
height: 628px;
margin-left: 14px;
float: right;
/* background-color: red; */
}
.page-main .home-brick-box > .box-bd > .span16 > .brick-list {
margin-left: -14px;
}
.page-main .home-brick-box > .box-bd > .span16 > .brick-list > li:hover {
z-index: 2;
-webkit-box-shadow: 0 15px 30px rgb(0 0 0 / 10%);
box-shadow: 0 15px 30px rgb(0 0 0 / 10%);
-webkit-transform: translate3d(0, -2px, 0);
transform: translate3d(0, -2px, 0);
}
.page-main .home-brick-box > .box-bd > .span16 > .brick-list > li {
width: 234px;
height: 300px;
background-color: #fff;
margin: 0px 0px 14px 14px;
float: left;
}
.page-main .home-brick-box > .box-bd > .span16 > .brick-list > .brick-item {
float: left;
}
.page-main
.home-brick-box
> .box-bd
> .span16
> .brick-list
> .brick-item
> .brick-item-s {
width: 234px;
height: 93px;
margin: 0px 0px 14px 14px;
padding-top: 50px;
background-color: #fff;
position: relative;
}
.page-main
.home-brick-box
> .box-bd
> .span16
> .brick-list
> .brick-item
> .brick-item-s:hover {
z-index: 2;
-webkit-box-shadow: 0 15px 30px rgb(0 0 0 / 10%);
box-shadow: 0 15px 30px rgb(0 0 0 / 10%);
-webkit-transform: translate3d(0, -2px, 0);
transform: translate3d(0, -2px, 0);
}
.page-main
.home-brick-box
> .box-bd
> .span16
> .brick-list
> .brick-item
> .brick-item-s
> a {
display: block;
}
.page-main
.home-brick-box
> .box-bd
> .span16
> .brick-list
> .brick-item
> .brick-item-s
> a
> div {
width: 94px;
height: 41.6px;
margin: -10px 110px 5px 30px;
font-size: 14px;
color: #333;
line-height: 21px;
font-weight: 400;
}
.page-main
.home-brick-box
> .box-bd
> .span16
> .brick-list
> .brick-item
> .brick-item-s
> a
> div
> .price {
width: 94px;
height: 20.8px;
margin: 0px 110px 0px 0px;
color: #ff6700;
font-size: 12px;
line-height: 18px;
font-weight: 400;
}
.page-main
.home-brick-box
> .box-bd
> .span16
> .brick-list
> .brick-item
> .brick-item-s:last-child
> a
> div
> .more {
width: 94px;
height: 44px;
color: #333;
font-size: 18px;
font-weight: 400;
}
.page-main
.home-brick-box
> .box-bd
> .span16
> .brick-list
> .brick-item
> .brick-item-s:last-child
> a
> div
> .more
> em {
display: block;
width: 94px;
height: 17.6px;
color: #757575;
font-size: 12px;
font-weight: 400;
line-height: 28px;
}
.page-main
.home-brick-box
> .box-bd
> .span16
> .brick-list
> .brick-item
> .brick-item-s
> a
> img {
width: 80px;
height: 80px;
position: absolute;
top: 32px;
left: 134px;
}
.page-main .home-brick-box > .box-bd > .span16 > .brick-list > li > a {
display: block;
height: 260px;
width: 234px;
padding: 20px 0;
text-align: center;
}
.page-main .home-brick-box > .box-bd > .span16 > .brick-list > li > a > img {
width: 160px;
height: 160px;
margin-bottom: 18px;
}
.page-main .home-brick-box > .box-bd > .span16 > .brick-list > li > a > .title {
margin: 0px 10px 2px 10px;
font-size: 14px;
font-weight: 400px;
color: #333;
line-height: 21px;
}
.page-main .home-brick-box > .box-bd > .span16 > .brick-list > li > a > .desc {
color: rgb(176, 176, 176);
margin: 0 10px 10px;
height: 18px;
font-size: 12px;
}
.page-main .home-brick-box > .box-bd > .span16 > .brick-list > li > a > .price {
margin: 0 10px 14px;
text-align: center;
color: #ff6700;
font-size: 14px;
}
.page-main
.home-brick-box
> .box-bd
> .span16
> .brick-list
> li
> a
> .price
> del {
margin-left: 7px;
color: #b0b0b0;
}
.page-main .home-brick-box > .box-bd > .span4 > a > img {
width: 234px;
height: 614px;
}
.page-main .home-brick-box > .box-bd > .span4 > ul > li {
width: 234px;
height: 300px;
margin: 0px 0px 14px 0px;
}
.page-main .home-brick-box > .box-bd > .span4 > ul > li:hover {
z-index: 2;
-webkit-box-shadow: 0 15px 30px rgb(0 0 0 / 10%);
box-shadow: 0 15px 30px rgb(0 0 0 / 10%);
-webkit-transform: translate3d(0, -2px, 0);
transform: translate3d(0, -2px, 0);
}
.page-main .home-brick-box > .box-bd > .span4 > ul > li > a > img {
width: 234px;
height: 300px;
}
.page-main .home-brick-box > .box-hd > .title {
color: rgb(51, 51, 51);
line-height: 58px;
font-size: 22px;
font-weight: 200;
font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei",
"Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
float: left;
}
.page-main .home-brick-box > .box-hd > .more {
width: 92px;
height: 58px;
line-height: 58px;
color: #424242;
font-size: 16px;
font-weight: 400;
cursor: pointer;
float: right;
}
.page-main .home-brick-box > .box-hd > .more > a:hover {
color: #ff6700;
}
.page-main .home-brick-box > .box-hd > .tab-list {
font-size: 16px;
color: rgb(66, 66, 66);
height: 42px;
padding-top: 16px;
float: right;
}
.page-main .home-brick-box > .box-hd > .tab-list > li {
padding-bottom: 6px;
display: inline-block;
margin-left: 30px;
}
.page-main .home-brick-box > .box-hd > .tab-list > li:hover {
border-bottom: 2px solid #ff6700;
color: #ff6700;
cursor: pointer;
}
/* 底部 */
.footer {
width: 1531px;
height: 330px;
background-color: #fff;
}
.footer .footer-service {
height: 25px;
padding: 17px 0px;
border-bottom: 1px solid #e0e0e0;
}
/* bar */
.home-tool-bar {
width: 84px;
height: 455px;
/* background-color: red; */
position: fixed;
z-index: 999;
top: 170px;
right: 2px;
}
.home-tool-bar ul li {
width: 82px;
height: 90px;
border: 1px solid #b8b0b0;
margin-top: -1px;
text-align: center;
}
.home-tool-bar ul li a:hover {
color: #ff6700;
}
.home-tool-bar ul li a {
display: block;
width: 82px;
height: 90px;
padding-top: 14px;
box-sizing: border-box;
font-size: 14px;
color: #757575;
font-weight: 400;
}
.home-tool-bar ul li i {
display: block;
font-size: 30px;
padding-bottom: 12px;
}
swiper.min.css
/**
* Swiper 4.5.3
* Most modern mobile touch slider and framework with hardware accelerated transitions
* http://www.idangero.us/swiper/
*
* Copyright 2014-2019 Vladimir Kharlampidi
*
* Released under the MIT License
*
* Released on: October 16, 2019
*/
.swiper-container{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}.swiper-container-no-flexbox .swiper-slide{float:left}.swiper-container-vertical>.swiper-wrapper{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;-o-transition-property:transform;transition-property:transform;transition-property:transform,-webkit-transform;-webkit-box-sizing:content-box;box-sizing:content-box}.swiper-container-android .swiper-slide,.swiper-wrapper{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.swiper-container-multirow>.swiper-wrapper{-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.swiper-container-free-mode>.swiper-wrapper{-webkit-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out;margin:0 auto}.swiper-slide{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;width:100%;height:100%;position:relative;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;-o-transition-property:transform;transition-property:transform;transition-property:transform,-webkit-transform}.swiper-slide-invisible-blank{visibility:hidden}.swiper-container-autoheight,.swiper-container-autoheight .swiper-slide{height:auto}.swiper-container-autoheight .swiper-wrapper{-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;-webkit-transition-property:height,-webkit-transform;transition-property:height,-webkit-transform;-o-transition-property:transform,height;transition-property:transform,height;transition-property:transform,height,-webkit-transform}.swiper-container-3d{-webkit-perspective:1200px;perspective:1200px}.swiper-container-3d .swiper-cube-shadow,.swiper-container-3d .swiper-slide,.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top,.swiper-container-3d .swiper-wrapper{-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-container-3d .swiper-slide-shadow-left{background-image:-webkit-gradient(linear,right top,left top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(right,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(right,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-right{background-image:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(left,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(left,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-top{background-image:-webkit-gradient(linear,left bottom,left top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(bottom,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(bottom,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-bottom{background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(top,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(top,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-wp8-horizontal,.swiper-container-wp8-horizontal>.swiper-wrapper{-ms-touch-action:pan-y;touch-action:pan-y}.swiper-container-wp8-vertical,.swiper-container-wp8-vertical>.swiper-wrapper{-ms-touch-action:pan-x;touch-action:pan-x}.swiper-button-next,.swiper-button-prev{position:absolute;top:50%;width:27px;height:44px;margin-top:-22px;z-index:10;cursor:pointer;background-size:27px 44px;background-position:center;background-repeat:no-repeat}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-prev,.swiper-container-rtl .swiper-button-next{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");left:10px;right:auto}.swiper-button-next,.swiper-container-rtl .swiper-button-prev{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");right:10px;left:auto}.swiper-button-prev.swiper-button-white,.swiper-container-rtl .swiper-button-next.swiper-button-white{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")}.swiper-button-next.swiper-button-white,.swiper-container-rtl .swiper-button-prev.swiper-button-white{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")}.swiper-button-prev.swiper-button-black,.swiper-container-rtl .swiper-button-next.swiper-button-black{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")}.swiper-button-next.swiper-button-black,.swiper-container-rtl .swiper-button-prev.swiper-button-black{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")}.swiper-button-lock{display:none}.swiper-pagination{position:absolute;text-align:center;-webkit-transition:.3s opacity;-o-transition:.3s opacity;transition:.3s opacity;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-container-horizontal>.swiper-pagination-bullets,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:10px;left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{-webkit-transform:scale(.33);-ms-transform:scale(.33);transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{-webkit-transform:scale(.66);-ms-transform:scale(.66);transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{-webkit-transform:scale(.33);-ms-transform:scale(.33);transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{-webkit-transform:scale(.66);-ms-transform:scale(.66);transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{-webkit-transform:scale(.33);-ms-transform:scale(.33);transform:scale(.33)}.swiper-pagination-bullet{width:8px;height:8px;display:inline-block;border-radius:100%;background:#000;opacity:.2}button.swiper-pagination-bullet{border:none;margin:0;padding:0;-webkit-box-shadow:none;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet-active{opacity:1;background:#007aff}.swiper-container-vertical>.swiper-pagination-bullets{right:10px;top:50%;-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:6px 0;display:block}.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);width:8px}.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;-webkit-transition:.2s top,.2s -webkit-transform;transition:.2s top,.2s -webkit-transform;-o-transition:.2s transform,.2s top;transition:.2s transform,.2s top;transition:.2s transform,.2s top,.2s -webkit-transform}.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 4px}.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);white-space:nowrap}.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{-webkit-transition:.2s left,.2s -webkit-transform;transition:.2s left,.2s -webkit-transform;-o-transition:.2s transform,.2s left;transition:.2s transform,.2s left;transition:.2s transform,.2s left,.2s -webkit-transform}.swiper-container-horizontal.swiper-container-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{-webkit-transition:.2s right,.2s -webkit-transform;transition:.2s right,.2s -webkit-transform;-o-transition:.2s transform,.2s right;transition:.2s transform,.2s right;transition:.2s transform,.2s right,.2s -webkit-transform}.swiper-pagination-progressbar{background:rgba(0,0,0,.25);position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:#007aff;position:absolute;left:0;top:0;width:100%;height:100%;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);-webkit-transform-origin:left top;-ms-transform-origin:left top;transform-origin:left top}.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{-webkit-transform-origin:right top;-ms-transform-origin:right top;transform-origin:right top}.swiper-container-horizontal>.swiper-pagination-progressbar,.swiper-container-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:4px;left:0;top:0}.swiper-container-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-container-vertical>.swiper-pagination-progressbar{width:4px;height:100%;left:0;top:0}.swiper-pagination-white .swiper-pagination-bullet-active{background:#fff}.swiper-pagination-progressbar.swiper-pagination-white{background:rgba(255,255,255,.25)}.swiper-pagination-progressbar.swiper-pagination-white .swiper-pagination-progressbar-fill{background:#fff}.swiper-pagination-black .swiper-pagination-bullet-active{background:#000}.swiper-pagination-progressbar.swiper-pagination-black{background:rgba(0,0,0,.25)}.swiper-pagination-progressbar.swiper-pagination-black .swiper-pagination-progressbar-fill{background:#000}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:10px;position:relative;-ms-touch-action:none;background:rgba(0,0,0,.1)}.swiper-container-horizontal>.swiper-scrollbar{position:absolute;left:1%;bottom:3px;z-index:50;height:5px;width:98%}.swiper-container-vertical>.swiper-scrollbar{position:absolute;right:3px;top:1%;z-index:50;width:5px;height:98%}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:rgba(0,0,0,.5);border-radius:10px;left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;-o-object-fit:contain;object-fit:contain}.swiper-slide-zoomed{cursor:move}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;-webkit-transform-origin:50%;-ms-transform-origin:50%;transform-origin:50%;-webkit-animation:swiper-preloader-spin 1s steps(12,end) infinite;animation:swiper-preloader-spin 1s steps(12,end) infinite}.swiper-lazy-preloader:after{display:block;content:'';width:100%;height:100%;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-position:50%;background-size:100%;background-repeat:no-repeat}.swiper-lazy-preloader-white:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")}@-webkit-keyframes swiper-preloader-spin{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes swiper-preloader-spin{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.swiper-container .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-container-fade.swiper-container-free-mode .swiper-slide{-webkit-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out}.swiper-container-fade .swiper-slide{pointer-events:none;-webkit-transition-property:opacity;-o-transition-property:opacity;transition-property:opacity}.swiper-container-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-fade .swiper-slide-active,.swiper-container-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-cube{overflow:visible}.swiper-container-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0;width:100%;height:100%}.swiper-container-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-cube.swiper-container-rtl .swiper-slide{-webkit-transform-origin:100% 0;-ms-transform-origin:100% 0;transform-origin:100% 0}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-next,.swiper-container-cube .swiper-slide-next+.swiper-slide,.swiper-container-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-container-cube .swiper-slide-shadow-bottom,.swiper-container-cube .swiper-slide-shadow-left,.swiper-container-cube .swiper-slide-shadow-right,.swiper-container-cube .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-container-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0;width:100%;height:100%;background:#000;opacity:.6;-webkit-filter:blur(50px);filter:blur(50px);z-index:0}.swiper-container-flip{overflow:visible}.swiper-container-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-container-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-flip .swiper-slide-active,.swiper-container-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-flip .swiper-slide-shadow-bottom,.swiper-container-flip .swiper-slide-shadow-left,.swiper-container-flip .swiper-slide-shadow-right,.swiper-container-flip .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-container-coverflow .swiper-wrapper{-ms-perspective:1200px}
swiper.esm.bundle.js 需要到 swiper.js 下载
3680
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
