HTML + CSS 实现购物商城小米（提供源码下载）

访问地址

<!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 下载

HTML + CSS 实现购物商城小米（提供源码下载）相关推荐

web课程设计网页规划与设计~时尚服装购物商城模板html源码(HTML+CSS+JS)
HTML网页设计结课作业~橙色时尚服装购物商城模板html源码临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没有合适的模板?等 ...
java毕业设计免税商品优选购物商城设计mybatis+源码+调试部署+系统+数据库+lw
java毕业设计免税商品优选购物商城设计mybatis+源码+调试部署+系统+数据库+lw java毕业设计免税商品优选购物商城设计mybatis+源码+调试部署+系统+数据库+lw 本源码技术栈: ...
【014】基于Vue.js的移动端购物商城网站(含源码、课设报告)
文章目录一.项目介绍二.代码及报告获取一.项目介绍基于Vue.js的移动端购物商城网站(含源码.课设报告),代码获取放在文末了,码字不易,感谢点赞~ 一.系统概述本部分主要是对项目进行简要描 ...
JAVA计算机毕业设计网上购物商城（附源码、数据库）
JAVA计算机毕业设计网上购物商城(附源码.数据库) 目运行环境项配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webstorm也行)+ Eclispe(In ...
基于JAVA网上购物商城计算机毕业设计源码+数据库+lw文档+系统+部署
基于JAVA网上购物商城计算机毕业设计源码+数据库+lw文档+系统+部署基于JAVA网上购物商城计算机毕业设计源码+数据库+lw文档+系统+部署本源码技术栈: 项目架构:B/S架构开发语言:Ja ...
PHP内核微信拼团购物商城小程序源码
简介: ThinkPHP内核微信拼团购物商城小程序源码支持微信网盘下载地址: http://kekewl.cc/RanXsKnF0WN0 图片:
Open Source Blog 开源ASP.NET/C# 博客平台 v2.5 发布（提供源码下载）
EntLib.com Blog 开源ASP.NET/C# 博客平台 v2.5 发布(提供源码下载) 基于Subtext v2.0 开源ASP.NET博客系统的中文汉化及定制化开发,EntLib.c ...
java验证码源码_Java通用验证码程序及应用示例（提供源码下载）
评论 # re: Java通用验证码程序及应用示例(提供源码下载) 2009-11-27 17:09 零全零美多谢博主写出这么好的总结,如果能加上汉字验证码,会更完美! 回复更多评论 # re ...
EntLib.com Forum – 开源ASP.NET论坛 v4.0（提供源码下载）
EntLib.com Forum – 开源ASP.NET论坛 v4.0(提供源码下载) EntLib.com Forum 开源ASP.NET 论坛系统是EntLib.com 小组基于YAF开源论坛进 ...
EntLib.com Forum – 开源ASP.NET论坛 v3.5（提供源码下载）
EntLib.com Forum – 开源ASP.NET论坛 v3.5(提供源码下载) EntLib.com Forum 开源ASP.NET 论坛系统是EntLib.com 小组基于YAF开源论坛,定 ...

HTML + CSS 实现购物商城小米（提供源码下载）

HTML + CSS 实现购物商城小米（提供源码下载）相关推荐

最新文章

热门文章