朱鑫波 2 gadi atpakaļ
vecāks
revīzija
475166f6cf
98 mainītis faili ar 8169 papildinājumiem un 0 dzēšanām
  1. 679 0
      contactUs.html
  2. 202 0
      css/contactUs.css
  3. 204 0
      css/contactUsPC.css
  4. 1493 0
      css/index.css
  5. 1489 0
      css/indexPC.css
  6. 286 0
      css/publicIE.css
  7. 294 0
      css/publicStyle.css
  8. 6 0
      css/reset.css
  9. 198 0
      css/showWork.css
  10. 342 0
      css/showWorkPC.css
  11. 13 0
      css/swiper.min.css
  12. 514 0
      example.html
  13. 539 0
      fontsize/demo.css
  14. 191 0
      fontsize/demo_index.html
  15. 21 0
      fontsize/iconfont.css
  16. BIN
      fontsize/iconfont.eot
  17. 1 0
      fontsize/iconfont.js
  18. 16 0
      fontsize/iconfont.json
  19. 29 0
      fontsize/iconfont.svg
  20. BIN
      fontsize/iconfont.ttf
  21. BIN
      fontsize/iconfont.woff
  22. BIN
      fontsize/iconfont.woff2
  23. BIN
      images/icon.png
  24. BIN
      img/1.png
  25. BIN
      img/111.png
  26. BIN
      img/2.jpg
  27. BIN
      img/222.png
  28. BIN
      img/333.png
  29. BIN
      img/case-banner.png
  30. BIN
      img/case_bg.png
  31. BIN
      img/close.jpg
  32. BIN
      img/company.jpg
  33. BIN
      img/core1.png
  34. BIN
      img/core2.png
  35. BIN
      img/core3.png
  36. BIN
      img/core4.png
  37. BIN
      img/icon/gmv低.png
  38. BIN
      img/icon/roi低.png
  39. BIN
      img/icon/不专业.png
  40. BIN
      img/icon/数码.png
  41. BIN
      img/icon/无流量.png
  42. BIN
      img/icon/服饰.png
  43. BIN
      img/icon/母婴.png
  44. BIN
      img/icon/珠宝.png
  45. BIN
      img/icon/生活用品.png
  46. BIN
      img/icon/美妆.png
  47. BIN
      img/icon/食品.png
  48. BIN
      img/information.png
  49. BIN
      img/left.png
  50. BIN
      img/logo.png
  51. BIN
      img/logo1.png
  52. BIN
      img/map.png
  53. BIN
      img/partner1.png
  54. BIN
      img/partner10.png
  55. BIN
      img/partner11.png
  56. BIN
      img/partner12.png
  57. BIN
      img/partner13.png
  58. BIN
      img/partner14.png
  59. BIN
      img/partner2.png
  60. BIN
      img/partner3.png
  61. BIN
      img/partner4.png
  62. BIN
      img/partner5.png
  63. BIN
      img/partner6.png
  64. BIN
      img/partner7.png
  65. BIN
      img/partner8.png
  66. BIN
      img/partner9.png
  67. BIN
      img/right.png
  68. BIN
      img/teamimg.png
  69. BIN
      img/专注.png
  70. BIN
      img/价值观.png
  71. BIN
      img/使命.jpg
  72. BIN
      img/使命.png
  73. BIN
      img/历史.png
  74. BIN
      img/图层.png
  75. BIN
      img/地址.png
  76. BIN
      img/增值1.png
  77. BIN
      img/增值2.png
  78. BIN
      img/增值3.png
  79. BIN
      img/增值4.png
  80. BIN
      img/愿景.png
  81. BIN
      img/核心img.png
  82. BIN
      img/珠宝.png
  83. BIN
      img/电话.png
  84. BIN
      img/痛点.png
  85. BIN
      img/直投.png
  86. BIN
      img/直播.png
  87. BIN
      img/美妆.png
  88. BIN
      img/行业.png
  89. BIN
      img/食品.png
  90. 592 0
      index.html
  91. 24 0
      js/contactUs.js
  92. 234 0
      js/index.js
  93. 5 0
      js/jquery.min.js
  94. 18 0
      js/phone.js
  95. 17 0
      js/rem.js
  96. 140 0
      js/showWork.js
  97. 14 0
      js/swiper.min.js
  98. 608 0
      showWork.html

+ 679 - 0
contactUs.html

@@ -0,0 +1,679 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" />
+    <title>北京五六七广告有限公司</title>
+
+    <meta name="title" content="北京五六七广告有限公司">
+    <meta name="keywords" content="信息流广告 互联网广告 广告服务商 KOL代理 短视频服务商 代播 直播引流  直播带货 直播服务商">
+    <meta name="description" content="打通效果和KOL结合的代理商,短视频整合服务商,直播+引流一站式服务商,客户集中在电商、网服、金融、教育、游戏等领域">
+
+    <link rel="shortcut icon" href="./images/icon.png" type="image/x-icon">
+    <link rel="stylesheet" href="./css/reset.css">
+    <link rel="stylesheet" href="./fontsize/iconfont.css">
+    <link rel="stylesheet" href="./css/swiper.min.css">
+    <!-- <link rel="stylesheet"  href="./css/indexPC.css" > -->
+    <link rel="stylesheet" media="screen and (max-width:1024px)" href="./css/index.css">
+    <link rel="stylesheet" media="screen and (min-width:1025px) " href="./css/indexPC.css">
+    <link rel="stylesheet" media="screen and (max-width:1024px)" href="./css/showWork.css">
+    <link rel="stylesheet" media="screen and (min-width:1025px) " href="./css/showWorkPC.css">
+    <link rel="stylesheet" media="screen and (max-width:1024px)" href="./css/contactUs.css">
+    <link rel="stylesheet" media="screen and (min-width:1025px) " href="./css/contactUsPC.css">
+    <style>
+        .nav ul li:hover .menu {
+            display: block !important;
+        }
+
+        .menu {
+            display: none;
+            position: absolute;
+            top: 1rem;
+            z-index: 100;
+            color: black;
+            line-height: 0.5rem;
+            font-size: 0.2rem;
+            text-align: left;
+            border: 1px solid white;
+            background: white;
+            cursor: pointer;
+        }
+
+        .menu p:hover {
+            color: #FFFFFF;
+        }
+
+        .bottom-border-a {
+            border-bottom: 5px solid black;
+        }
+
+        .a-color {
+            color: black;
+        }
+    </style>
+    <style>
+        .hover-a:hover {
+            color: #00A0E9;
+            transition: all .5s;
+        }
+
+        a {
+            transition: color .5s;
+        }
+
+        #close-box,
+        #menu {
+            transition: all .5s;
+        }
+    </style>
+</head>
+
+<body>
+
+    <div class="container  service-content">
+        <div class="background-image-all">
+            <div class="swiper-container">
+                <div class="swiper-wrapper">
+                    <div class="swiper-slide">
+
+                        <img src="./img/information.png" alt="" srcset="" class="banner-img">
+                    </div>
+                    <!-- <div class="swiper-slide">
+                        <div class="main">
+                            <h2 class="banner-title">专注抖音直播投流</h2>
+                            <p class="banner-title-content">
+                                all in实体经济数字化转型
+                            </p>
+                        </div>
+                        <img src="./img/2.jpg" alt="" srcset="" class="banner-img">
+                    </div> -->
+                </div>
+            </div>
+            <div class="main pc-class" style="position: absolute;top: 0;z-index: 10">
+                <div class="header"
+                    style="width: 100%;
+                height: 80px;margin-top: 0.2rem;box-sizing: border-box;display: flex;justify-content: space-between;align-items: center;">
+                    <div>
+                        <img src="./img/logo1.png" alt="" style="font-size: 16px;" id="logo">
+                    </div>
+                    <div style="width: 80%;display: flex;justify-content: space-around;" id="show">
+                        <a href="./index.html" style="    line-height: 60px;height:60px;box-sizing: border-box;">首页</a>
+                        <a href="./showWork.html"
+                            style="    line-height: 60px;height:60px;box-sizing: border-box;">公司信息</a>
+                        <a href="./contactUs.html"
+                            style="    line-height: 60px;height:60px;box-sizing: border-box;">服务内容与优势</a>
+                        <a href="./example.html"
+                            style="    line-height: 60px;height:60px;box-sizing: border-box;">优秀案例</a>
+                        <a href="./contactUs.html#footer"
+                            style="    line-height: 60px;height:60px;box-sizing: border-box;">联系我们</a>
+                    </div>
+
+                </div>
+
+            </div>
+            <div class="main phone-class" style="position: absolute;top: 0;z-index: 10">
+                <div class="header" style="width: 100%;
+            height: 80px;box-sizing: border-box;display: flex;justify-content: space-between;align-items: center;">
+                    <div>
+                        <img src="./img/logo1.png" alt="" style="font-size: 16px;height: 20px;">
+                    </div>
+                    <div id="show">
+                        <div id="show-menu" style="position: relative;top: -5px;">
+                            <i style="display: block;width: 0.4rem;height: 2px;background-color: white;"></i>
+                            <i
+                                style="display: block;width: 0.4rem;height: 2px;background-color: white;margin: 0.1rem 0;"></i>
+                            <i style="display: block;width: 0.4rem;height: 2px;background-color: white;"></i>
+                        </div>
+                        <!-- <a href="./index.html"
+                            style="border-bottom:5px solid black;    line-height: 60px;height:60px;box-sizing: border-box;">首页</a>
+                        <a href="./showWork.html"
+                            style="border-bottom:5px solid black;    line-height: 60px;height:60px;box-sizing: border-box;">公司信息</a>
+                        <a href="./contactUs.html"
+                            style="border-bottom:5px solid black;    line-height: 60px;height:60px;box-sizing: border-box;">服务内容与优势</a>
+                        <a href="./example.html"
+                            style="border-bottom:5px solid black;    line-height: 60px;height:60px;box-sizing: border-box;">优秀案例</a>
+                        <a href="./contactUs.html"
+                            style="border-bottom:5px solid black;    line-height: 60px;height:60px;box-sizing: border-box;">联系我们</a> -->
+                    </div>
+
+                </div>
+            </div>
+        </div>
+        <div style="width: 100%;height: 100vh;background: rgba(0, 0, 0, 0.7);position: fixed;top: 0;z-index: 100;visibility:hidden;"
+            id="close-box">
+            <div style="width: 60%;height: 100vh;background: rgb(246, 246, 246);position: absolute;right: -60%;"
+                id="menu">
+                <!-- <div><img src="./img/close.jpg" id="close" alt=""
+                        style="width: 0.8rem;position: absolute;left: 0.2rem;top: 0.2rem;"></div> -->
+                <div style="display: flex;flex-direction: column;margin-top: 1rem;text-align: left;padding: 0 0.4rem;"
+                    class="hover-a">
+                    <a href="./index.html"
+                        style="color:black !important;line-height: 60px;height:60px;box-sizing: border-box;">首页</a>
+                    <a href="./showWork.html"
+                        style="color:black !important;line-height: 60px;height:60px;box-sizing: border-box;">公司信息</a>
+                    <a href="./contactUs.html"
+                        style="color:black !important;line-height: 60px;height:60px;box-sizing: border-box;">服务内容与优势</a>
+                    <a href="./example.html"
+                        style="color:black !important;line-height: 60px;height:60px;box-sizing: border-box;">优秀案例</a>
+                    <a href="./contactUs.html#footer"
+                        style="color:black !important;line-height: 60px;height:60px;box-sizing: border-box;">联系我们</a>
+                </div>
+            </div>
+        </div>
+        <div id="hide-all"
+            style="background-color: white;width: 100%;
+    box-sizing: border-box;transition:all .5s;overflow: hidden;display: flex;justify-content: space-between;position: absolute;top: 0;z-index: 1;">
+            <div>
+
+            </div>
+            <div style="display: flex;justify-content:space-between;" id="show-all" class=" main">
+                <div>
+
+                </div>
+                <div style="width: 80%;display:flex;justify-content: space-around;" id="show-small">
+                    <div style="height: 0;overflow: hidden;color: white;">
+                        首页
+                    </div>
+                    <div style="height: 0;overflow: hidden;color: white;">
+                        公司信息
+                    </div>
+                    <div style="height: 0;overflow: hidden;color: white;">
+                        服务内容与优势
+
+                    </div>
+                    <div style="height: 0;overflow: hidden;color: white;">优秀案例</div>
+                    <div style="height: 0;overflow: hidden;color: white;">连西我们</div>
+                </div>
+
+            </div>
+        </div>
+        <div class="main " id="painPoint">
+            <!-- banner 视频区 -->
+            <!-- <div class="banner"> -->
+
+            <div class="banner-box" style="background-color: #f2f2f2;margin-top: 0.5rem;height: auto;min-height: 0;">
+                <div class="main-content-title" style="position: static;margin-bottom: 0;border-bottom: 0;">
+                    <div class="main-content-title-border">
+                        直播间投放痛点分析
+                    </div>
+                </div>
+                <!-- <div> -->
+                <!-- </div> -->
+            </div>
+
+            <!-- </div> -->
+        </div>
+        <div class="background-image-all excellent-cases">
+            <img src="./img/痛点.png" alt="" class="case-bg-img  pain-point-img" style="max-height:3rem">
+            <div class="main pain-point">
+                <div class="box">
+                    <img src="./img/icon/无流量.png" alt="">
+                    <p>无流量</p>
+                </div>
+                <div class="box">
+                    <img src="./img/icon/不专业.png" alt="">
+                    <p>不专业</p>
+                </div>
+                <div class="box">
+                    <img src="./img/icon/roi低.png" alt="">
+                    <p>ROI低</p>
+                </div>
+                <div class="box">
+                    <img src="./img/icon/gmv低.png" alt="">
+                    <p>GMV低</p>
+                </div>
+
+            </div>
+        </div>
+
+        <div class="main " id="experience">
+            <!-- banner 视频区 -->
+            <!-- <div class="banner"> -->
+
+            <div class="banner-box" style="background-color: #f2f2f2;margin-top: 0.6rem;">
+                <div class="main-content-title" style="position: static;">
+                    <div class="main-content-title-border">
+                        经验丰富
+                    </div>
+                </div>
+                <!-- <div> -->
+
+
+                <div style="padding:0.2rem;font-size: 0.2rem;color: #1B1F25;">
+                    <p>累计直播引流投放金额过 <span style="font-weight: bold;">3亿</span>,中小企业为主</p>
+                    <p>覆盖行业包括:美妆、母婴、个护、图书、珠宝、3C、服饰、食品等品类</p>
+                </div>
+                <div class="service-experience">
+                    <div class="image">
+                        <img src="./img/left.png" alt="" style="width: 100%;">
+                        <div class="top">
+                            <p>千万粉丝量级的超过30位</p>
+                            <p> 500w以上粉丝量级的超过80位</p>
+                        </div>
+                    </div>
+                    <div class="image">
+                        <img src="./img/right.png" alt="" style="width: 100%;">
+                        <div class="top">
+                            <p>品牌自播直播间40+</p>
+                            <p>高品牌知名度客户为主</p>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- </div> -->
+            </div>
+
+            <!-- </div> -->
+        </div>
+        <div class="main " id="efficient">
+            <!-- banner 视频区 -->
+            <!-- <div class="banner"> -->
+
+            <div class="banner-box" style="background-color: #f2f2f2;margin-top: 0.5rem;">
+                <div class="main-content-title" style="position: static;">
+                    <div class="main-content-title-border">
+                        人群精准触达
+                    </div>
+                </div>
+                <!-- <div> -->
+
+
+                <div style="padding:0.2rem;font-size: 0.2rem;color: #1B1F25;">
+                    <p>567广告利用 <span style="font-weight: bold;">短视频引流广告+直播间直投</span>,精准触达目标用户群体</p>
+                    <p>实现不同时空用户群的高效汇聚,吸引观看直播</p>
+                </div>
+                <div class="service-efficient">
+                    <div class="image">
+                        <img src="./img/直播.png" alt="" style="width: 100%;height:100%">
+                    </div>
+                    <div class="top">
+                        <p style="margin-bottom:0.5rem;">短视频引流直播间</p>
+                        <p>介绍:适用于有短视频广告素材的客户</p>
+                        <p> 优势:稳健的投产比,快速见效,品效合一</p>
+                        <p>内容:直播前流量积聚,直播中产品推荐</p>
+                    </div>
+                </div>
+                <div class="service-efficient service-efficient-else">
+                    <div class="top">
+                        <p style="margin-bottom:0.5rem;">直播间直投</p>
+                        <p>介绍:适用于直播经验充足的客户,直播可根据用户反馈实时调整,主动把控导流率,引流用户转化意向高 </p>
+                        <p>内容:直播当中的视频切片发布</p>
+                    </div>
+                    <div class="image">
+                        <img src="./img/直投.png" alt="" style="width: 100%;height:100%">
+                    </div>
+                </div>
+                <!-- </div> -->
+            </div>
+
+            <!-- </div> -->
+        </div>
+
+        <div class="main " id="industry">
+            <!-- banner 视频区 -->
+            <!-- <div class="banner"> -->
+
+            <div class="banner-box" style="background-color: #f2f2f2;margin-top: 0.5rem;">
+                <div class="main-content-title" style="position: static;margin-bottom: 0;">
+                    <div class="main-content-title-border">
+                        行业垂直运营服务
+                    </div>
+                </div>
+                <div style="padding:0.2rem;font-size: 0.2rem;color: #1B1F25;">
+                    <p>七大行业覆盖,专业投手定制化服务</p>
+                </div>
+            </div>
+
+            <!-- </div> -->
+        </div>
+        <div class="background-image-all excellent-cases">
+            <img src="./img/行业.png" alt="" class="case-bg-img  industry-img">
+            <div class="main industry">
+                <div class="industry" style="flex-wrap: wrap;width: 100%;">
+                    <div class="box">
+                        <img src="./img/icon/美妆.png" alt="">
+                        <p>美妆</p>
+                    </div>
+                    <div class="box">
+                        <img src="./img/icon/食品.png" alt="">
+                        <p>食品</p>
+                    </div>
+                    <div class="box">
+                        <img src="./img/icon/珠宝.png" alt="">
+                        <p>珠宝</p>
+                    </div>
+                    <div class="box">
+                        <img src="./img/icon/数码.png" alt="">
+                        <p>3C</p>
+                    </div>
+                    <div class="box box-left">
+                        <img src="./img/icon/母婴.png" alt="">
+                        <p>母婴</p>
+                    </div>
+                    <div class="box">
+                        <img src="./img/icon/服饰.png" alt="">
+                        <p>服饰</p>
+                    </div>
+                    <div class="box box-right">
+                        <img src="./img/icon/生活用品.png" alt="">
+                        <p>个护</p>
+                    </div>
+                </div>
+                <!-- 
+                <div class="industry" style="flex-wrap: wrap;width: 100%;">
+                  
+                </div> -->
+                <!-- height: 80%;
+                display: flex;
+                position: absolute;
+                top: 10%;
+                justify-content: space-around;
+                align-items: center; -->
+            </div>
+
+
+
+        </div>
+
+
+        <!-- 
+        <div class="main " id="major">
+
+
+            <div class="banner-box" style="background-color: #f2f2f2;margin-top: 0.5rem;">
+                <div class="main-content-title" style="position: static;">
+                    <div class="main-content-title-border">
+                        专业指导
+                    </div>
+                </div>
+                <div style="padding:0.2rem;font-size: 0.25rem;color: #1B1F25;">
+                    <p> 自有主播团队,覆盖美妆日化、数码3C、食品饮料等行业经验,可提供现场指导</p>
+                    <p>远程协助,可在线上提供直播节奏、直播内容等现场指导,提升直播间ROI</p>
+                </div>
+                <div class="service-major">
+                    <div class="image">
+                        <img src="./img/专业指导.png" alt="" style="width: 100%;">
+
+                    </div>
+                    <div class="image main-title">
+                        <p>专业主播,直播指导服务</p>
+                        <p> <span style="font-weight: bold;">30+</span>
+                            主播现场指导,360度全方位,实战经验丰富。</p>
+
+                    </div>
+                </div>
+            </div>
+        </div> -->
+
+        <div class="main " id="increment">
+            <!-- banner 视频区 -->
+            <!-- <div class="banner"> -->
+
+            <div class="banner-box" style="background-color: #f2f2f2;margin-top: 0.5rem;">
+                <div class="main-content-title" style="position: static;">
+                    <div class="main-content-title-border">
+                        增值服务
+                    </div>
+                </div>
+                <div style="padding:0.2rem;font-size: 0.2rem;color: #1B1F25;">
+                    <p> 短视频广告制作,爆量率<span style="font-weight: bold;font-size: 0.25rem;">40%+</span></p>
+                    <p>自有视频团队,协同视频基地,保障充足素材量,全力打造爆款</p>
+                </div>
+                <div class="service-increment">
+                    <div class="image">
+                        <img src="./img/增值1.png" alt="" style="width: 100%;    height: 100%;">
+                        <div class="share">数据沟通机制
+                        </div>
+                    </div>
+                    <div class="image">
+                        <img src="./img/增值2.png" alt="" style="width: 100%;    height: 100%;">
+                        <div class="share">团队人力值班
+                        </div>
+                    </div>
+                    <div class="image">
+                        <img src="./img/增值3.png" alt="" style="width: 100%;    height: 100%;">
+                        <div class="share">高效精准配合</div>
+                    </div>
+                    <div class="image">
+                        <img src="./img/增值4.png" alt="" style="width: 100%;    height: 100%;">
+                        <div class="share">临时需求响应
+                        </div>
+                    </div>
+                </div>
+
+                <!-- </div> -->
+            </div>
+
+            <!-- </div> -->
+        </div>
+
+        <div class='footer' id="footer">
+
+            <div class="title">
+                <div class="main-content-title"
+                    style="position: static;justify-content: start;border-color: #f2f2f2;font-size: 0.2rem;font-weight: bold;">
+                    <div style="color: white;margin-bottom: 0.1rem;">
+                        联系我们
+                    </div>
+                </div>
+            </div>
+            <div style="width: 100%;display: flex;margin-bottom: 0.5rem;">
+                <div style="width: 50%;height: 100%;line-height: 0.5rem;">
+                    <p style="font-size: 0.3rem;color: white;text-align: left;    margin-bottom: 0.2rem;">北京总部</p>
+                    <p style="font-size: 0.18rem;color: white;text-align: left;line-height: 0.3rem;">
+                        <img src="./img/地址.png" alt="" style="width: 0.2rem;margin-right: 0.1rem;    position: relative;
+                        top: 0.03rem;">
+                        北京市朝阳区酒仙桥东风北桥宝信行东风kaso 3楼308
+                    </p>
+                    <p style="font-size: 0.18rem;color: white;text-align: left;">
+                        <img src="./img/电话.png" alt="" style="width: 0.2rem;margin-right: 0.1rem;">
+                        13811821639
+                    </p>
+                    <p style="font-size: 0.18rem;color: white;text-align: left;position: relative;top: -0.12rem;">
+                        <span style="width: 0.2rem;margin-right: 0.1rem;">✉</span>
+                        wuliuqi@567c-top.cn
+                    </p>
+
+
+
+                </div>
+                <div style="width: 50%;height: 100%;">
+                    <div id="myMap" ControlAnchor='BMAP_ANCHOR_TOP_LEFT' style="    width: 100%;
+                    height:2.5rem;">
+
+                    </div>
+                </div>
+            </div>
+            <div style="display: flex;flex-wrap: wrap;">
+                <div style="width: 35%;padding-bottom: 0.2rem;line-height: 0.3rem;margin-right: 0.3rem;">
+                    <p style="font-size: 0.2rem;color: white;text-align: left;margin-bottom: 0.2rem;">石家庄分公司</p>
+                    <p style="font-size: 0.15rem;color: white;text-align: left;">
+                        <img src="./img/地址.png" alt="" style="width: 0.15rem;margin-right: 0.1rem;    position: relative;
+                        top: 0.03rem;">
+                        石家庄市长安区广安大街86 号财富大厦裙楼4B1 房间
+                    </p>
+                </div>
+                <div style="width:30%;padding-bottom: 0.2rem;line-height: 0.3rem;">
+                    <p style="font-size: 0.2rem;color: white;text-align: left;margin-bottom: 0.2rem;">杭州分公司</p>
+                    <p style="font-size: 0.15rem;color: white;text-align: left;">
+                        <img src="./img/地址.png" alt="" style="width: 0.15rem;margin-right: 0.1rem;    position: relative;
+                        top: 0.03rem;">
+                        杭州市西湖区蒋村商务中心B1座318室
+                    </p>
+                </div>
+                <div style="width:  30%;padding-bottom: 0.2rem;line-height: 0.3rem;">
+                    <p style="font-size: 0.2rem;color: white;text-align: left;margin-bottom: 0.2rem;">上海分公司</p>
+                    <p style="font-size: 0.15rem;color: white;text-align: left;">
+                        <img src="./img/地址.png" alt="" style="width: 0.15rem;margin-right: 0.1rem;    position: relative;
+                        top: 0.03rem;">
+                        上海市静安区康定路359号1楼
+                    </p>
+                </div>
+            </div>
+            <div>
+                <a href="https://beian.miit.gov.cn/" target="_block">
+                    京ICP备18045244号-1
+                </a>
+            </div>
+        </div>
+        <a class="aside" href="#">
+            <img src="./images/goTop.png" alt="">
+        </a>
+    </div>
+    <a class="aside" href="#">
+        <img src="./images/goTop.png" alt="">
+    </a>
+    </div>
+    <script src="./js/jquery.min.js"></script>
+    <script src="./js/phone.js"></script>
+    <script src="./js/swiper.min.js"></script>
+    <script src="./js/index.js"></script>
+    <script type="text/javascript"
+        src="http://api.map.baidu.com/api?v=3.0&ak=QNWNbHbcOSEyeOlyc1GT2DLFdRDRd4yv"></script>
+    <script src="./js/contactUs.js"></script>
+    <script>
+        // console.log(1)
+        var mySwiper = new Swiper('.swiper-container', {
+            // autoplay: true,//可选选项,自动滑动
+            disableOnInteraction: true,
+            loop: true,
+        })
+        let caseTitle = document.getElementsByClassName('left-box-title')
+        $('.left-box-title').on('click', function () {
+            $(this).addClass('left-box-title-active')
+            $(this).siblings().removeClass('left-box-title-active')
+            // $('#img-right').addClass('active-hide')
+            if ($(this).index() == 0) {
+                $('#img-right').attr('src', './img/美妆.png')
+            } else if ($(this).index() == 1) {
+                $('#img-right').attr('src', './img/珠宝.png')
+            } else if ($(this).index() == 2) {
+                $('#img-right').attr('src', './img/食品.png')
+            }
+
+        })
+        $('#show-menu').on('click', function () {
+            $('#close-box').css({
+                visibility: "visible"
+            })
+            $('#menu').css({ right: 0 })
+        })
+        $('#close-box').on('click', function () {
+            $('#menu').css({ right: '-60%' })
+            setTimeout(() => {
+                $('#close-box').css({
+                    visibility: "hidden"
+                })
+            }, 200)
+
+        })
+
+        var box = document.getElementById('hide-all');
+        var showBox = document.getElementById('show')
+        var timer = null;
+        $('#show a').on('mouseover', function (e) {
+            // if (timer) clearTimeout(timer)
+
+            $(this).addClass('bottom-border-a')
+            $(this).siblings().removeClass('bottom-border-a')
+            if ($(this).index() == 0) {
+                box.style.height = '0';
+                box.style.padding = '0';
+                $('#logo').attr('src', './img/logo1.png')
+                $(this).removeClass('a-color')
+                $(this).siblings().removeClass('a-color')
+                $("#show-small div").eq($(this).index()).siblings().css({
+                    height: "0"
+                })
+            } else if ($(this).index() == 1) {
+                box.style.height = '350px';
+                $(this).addClass('a-color')
+                $(this).siblings().addClass('a-color')
+                $('#logo').attr('src', './img/logo.png')
+                // box.style.padding = '0.2rem 0';
+                $("#show-small div").eq($(this).index()).css({
+                    height: "300px"
+                })
+                $("#show-small div").eq($(this).index()).html(`
+                <a style="color:#000000;display:block;margin:105px  0 0.2rem 0" href="./showWork.html#culture">企业文化</a>
+                <a style="color:#000000;display:block;margin:0.2rem 0" href="./showWork.html#team" >团队成员</a>
+                <a style="color:#000000;display:block;margin:0.2rem 0" href="./showWork.html#history">历史荣耀</a>公司信息`)
+                $("#show-small div").eq($(this).index()).siblings().css({
+                    height: "0"
+                })
+                // $("#show-small div").eq($(this).index()).siblings().empty("p")
+            } else if ($(this).index() == 2) {
+                $(this).addClass('a-color')
+                $(this).siblings().addClass('a-color')
+                box.style.height = '350px';
+                $('#logo').attr('src', './img/logo.png')
+                // box.style.padding = '0.2rem 0';
+                $("#show-small div").eq($(this).index()).css({
+                    height: "300px"
+                })
+                $("#show-small div").eq($(this).index()).html(`
+                <a style="color:#000000;display:block;margin:105px 0 0.2rem 0" href="./contactUs.html#painPoint">投放痛点分析</a>
+                <a style="color:#000000;display:block;margin:0.2rem 0" href="./contactUs.html#experience" >经验丰富</a>
+                <a style="color:#000000;display:block;margin:0.2rem 0" href="./contactUs.html#efficient">人群精准触达</a>
+                <a style="color:#000000;display:block;margin:0.2rem 0" href="./contactUs.html#industry">行业运营服务</a>
+                <a style="color:#000000;display:block;margin:0.2rem 0" href="./contactUs.html#increment">增值服务</a>服务内容与优势`)
+                $("#show-small div").eq($(this).index()).siblings().css({
+                    height: "0"
+                })
+                // $("#show-small div").eq($(this).index()).siblings().empty("p")
+            } else if ($(this).index() == 3) {
+                box.style.height = '0';
+                box.style.padding = '0';
+                $('#logo').attr('src', './img/logo1.png')
+                $(this).removeClass('a-color')
+                $(this).siblings().removeClass('a-color')
+                $("#show-small div").eq($(this).index()).siblings().css({
+                    height: "0"
+                })
+                // $("#show-small div").eq($(this).index()).siblings().empty("p")
+            } else if ($(this).index() == 4) {
+                box.style.height = '0';
+                box.style.padding = '0';
+                $('#logo').attr('src', './img/logo1.png')
+                $(this).removeClass('a-color')
+                $(this).siblings().removeClass('a-color')
+                $("#show-small div").eq($(this).index()).siblings().css({
+                    height: "0"
+                })
+
+            }
+            e.stopPropagation();
+        })
+        $('#show a').on('mouseout', function () {
+
+            $(this).removeClass('bottom-border-a')
+            $('#show a').removeClass('a-color')
+        })
+        $("#show-small div").on('mouseover', function () {
+
+            $('#logo').attr('src', './img/logo.png')
+        })
+        showBox.onmouseover = function () {
+
+        }
+        box.onmouseover = function () {
+            box.style.height = '350px';
+            $('#show a').addClass('a-color')
+        }
+        showBox.onmouseout = function () {
+            $('#show a').removeClass('bottom-border-a')
+            $('#show a').removeClass('a-color')
+        }
+        box.onmouseout = function () {
+            box.style.height = '0';
+            box.style.padding = '0';
+            $('#logo').attr('src', './img/logo1.png')
+            $('#show a').removeClass('bottom-border-a')
+            $('#show a').removeClass('a-color')
+        }
+    </script>
+</body>
+
+</html>

+ 202 - 0
css/contactUs.css

@@ -0,0 +1,202 @@
+.service-content * {
+  box-sizing: border-box;
+}
+.service-efficient {
+  width: 100%;
+  display: flex;
+  background-color: white;
+  flex-wrap: wrap;
+}
+.service-efficient .top {
+  width: 100%;
+  padding: 0.5rem;
+  font-size: 0.2rem;
+  text-align: left;
+}
+.service-efficient .image {
+  width: 100%;
+}
+.service-efficient img {
+  width: 100%;
+  height: 100%;
+}
+.service-efficient-else {
+  flex-wrap: wrap-reverse;
+}
+
+.service-experience {
+  width: 100%;
+  display: flex;
+  justify-content: space-around;
+  margin: auto;
+  flex-wrap: wrap;
+}
+.service-experience .image {
+  width: 100%;
+  position: relative;
+}
+.service-experience .image .top {
+  font-size: 0.4rem;
+  background-color: #e4e4e4;
+  padding: 0.3rem 0;
+  margin-top: -0.25rem;
+}
+
+.service-major {
+  width: 100%;
+  position: relative;
+  display: flex;
+  justify-content: space-around;
+  margin: auto;
+  flex-wrap: wrap;
+}
+.service-major .image {
+  width: 100%;
+}
+.service-major .main-title {
+  width: 100% !important;
+  background-color: #fff;
+  padding: 0.4rem;
+  font-size: 0.25rem;
+  text-align: left;
+}
+.service-major .main-title p {
+  margin-bottom: 0.2rem;
+}
+
+.service-increment {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+.service-increment .image {
+  width: 48%;
+  position: relative;
+  margin-bottom: 0.3rem;
+  overflow: hidden;
+}
+.service-increment .image:hover img {
+  transform: scale(1.2);
+  transition: all 0.5s;
+}
+.service-increment .image .share {
+  width: 100%;
+  height: 40%;
+  font-size: 0.2rem;
+  padding: 0.2rem;
+  text-align: left;
+  color: #ffffff;
+  position: absolute;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.7);
+}
+
+.example-image {
+  height: 5rem;
+}
+.example-experience {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+.example-experience .image {
+  width: 30%;
+}
+
+.example-experience .image .top {
+  font-size: 0.1rem;
+  background-color: #e4e4e4;
+  margin-top: -0.15rem;
+  text-align: left;
+  padding: 0.2rem 0;
+}
+.pain-point-img {
+  min-height: 3rem;
+  margin-top: 0.1rem;
+}
+.pain-point {
+  height: 100%;
+  display: flex;
+  position: absolute;
+  top: 0;
+  justify-content: space-around;
+  align-items: center;
+}
+.pain-point .box {
+  width: 16%;
+}
+.pain-point .box img {
+  width: 100%;
+}
+.pain-point .box p {
+  font-size: 0.25rem;
+  color: #ffffff;
+  padding-top: 0.2rem;
+}
+.pain-point .box:hover img {
+  transform: scale(1.1);
+  transition: all 0.5s;
+}
+
+.industry-img {
+  min-height: 4rem;
+}
+.industry {
+  height: 80%;
+  display: flex;
+  position: absolute;
+  top: 10%;
+  justify-content: space-around;
+  align-items: center;
+  
+}
+.industry .box-left {
+  margin-left: 0.5rem;
+}
+.industry .box-right {
+  margin-right: 0.5rem;
+}
+
+.industry .box img {
+  width: 50%;
+}
+.industry .box p {
+  font-size: 0.25rem;
+  color: #ffffff;
+  padding-top: 0.2rem;
+}
+.industry .box {
+  width: 22%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.industry .box:hover img {
+  transform: scale(1.1);
+  transition: all 0.5s;
+}
+
+.section {
+  color: #fff;
+  text-align: center;
+  padding: 0.66rem 0;
+  background-color: #838383;
+}
+.section .title .desc {
+  font-size: 0.3rem;
+  margin-bottom: 0.22rem;
+}
+.section .title .info {
+  font-size: 0.22rem;
+  /* margin-bottom: 0.76rem; */
+}
+#myMap {
+  width: 100%;
+  height: 6rem;
+}
+.beianinfo {
+  display: inline-block;
+  margin-left: 0.65rem;
+}

+ 204 - 0
css/contactUsPC.css

@@ -0,0 +1,204 @@
+.service-content * {
+  box-sizing: border-box;
+}
+.service-efficient {
+  width: 100%;
+  display: flex;
+  background-color: white;
+}
+.service-efficient .top {
+  width: 50%;
+  padding: 0.5rem;
+  font-size: 0.2rem;
+  text-align: left;
+}
+.service-efficient .image {
+  width: 50%;
+}
+.service-efficient img {
+  width: 100%;
+  height: 100%;
+}
+
+.service-experience {
+  width: 80%;
+  display: flex;
+  justify-content: space-around;
+  margin: auto;
+}
+.service-experience .image {
+  width: 40%;
+  position: relative;
+}
+.service-experience .image .top {
+  font-size: 0.2rem;
+  background-color: #e4e4e4;
+  padding: 0.3rem 0;
+  position: relative;
+  top: -0.04rem;
+  z-index: 10;
+}
+
+.service-major {
+  width: 100%;
+  position: relative;
+}
+.service-major .image {
+  width: 60%;
+}
+.service-major .main-title {
+  width: 50% !important;
+  height: 3rem;
+  position: absolute;
+  top: 10%;
+  right: 0;
+  background-color: #fff;
+  padding: 0.4rem;
+  font-size: 0.25rem;
+  text-align: left;
+}
+.service-major .main-title p {
+  margin-bottom: 0.2rem;
+}
+
+.service-increment {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+.service-increment .image {
+  width: 48%;
+  position: relative;
+  margin-bottom: 0.3rem;
+  overflow: hidden;
+}
+.service-increment .image:hover img {
+  transform: scale(1.2);
+  transition: all 0.5s;
+}
+.service-increment .image .share {
+  width: 100%;
+  height: 25%;
+  font-size: 0.2rem;
+  padding: 0.2rem;
+  text-align: left;
+  color: #ffffff;
+  position: absolute;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.7);
+}
+.example-margin {
+  margin: 0.5rem 0;
+}
+.example-experience {
+  display: flex;
+  justify-content: space-between;
+}
+.example-experience .image {
+  width: 30%;
+}
+
+.example-experience .image .top {
+  font-size: 0.14rem;
+  background-color: #e4e4e4;
+  padding: 0.2rem 0.5rem;
+  text-align: left;
+  position: relative;
+  top: -0.04rem;
+  z-index: 100;
+}
+
+.pain-point {
+  height: 100%;
+  display: flex;
+  position: absolute;
+  top: 0;
+  justify-content: space-around;
+  align-items: center;
+}
+.pain-point .box {
+  width: 10%;
+}
+.pain-point .box img {
+  width: 100%;
+}
+.pain-point .box p {
+  font-size: 0.25rem;
+  color: #ffffff;
+  padding-top: 0.2rem;
+}
+.pain-point .box:hover img {
+  transform: scale(1.1);
+  transition: all 0.5s;
+}
+
+.industry {
+  height: 80%;
+  display: flex;
+  position: absolute;
+  top: 10%;
+  justify-content: space-around;
+  align-items: center;
+  
+}
+
+
+@media screen and (min-width: 1437px) {
+  .industry .box-left {
+    margin-left: 1.5rem;
+  }
+  .industry .box-right {
+    margin-right: 1.5rem;
+  }
+}
+@media screen and (max-width: 1436px) {
+  .industry .box-left {
+    margin-left: 1rem;
+  }
+  .industry .box-right {
+    margin-right: 1rem;
+  }
+}
+
+.industry .box img {
+  width: 50%;
+}
+.industry .box p {
+  font-size: 0.25rem;
+  color: #ffffff;
+  padding-top: 0.2rem;
+}
+.industry .box {
+  width: 22%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.industry .box:hover img {
+  transform: scale(1.1);
+  transition: all 0.5s;
+}
+.section {
+  color: #fff;
+  text-align: center;
+  padding: 66px 0;
+  background-color: #838383;
+}
+.section .title .desc {
+  font-size: 30px;
+  margin-bottom: 22px;
+}
+.section .title .info {
+  font-size: 22px;
+  /* margin-bottom: 0.76rem; */
+}
+#myMap {
+  width: 100%;
+  height: 600px;
+}
+.beianinfo {
+  display: inline-block;
+  margin-left: 65px;
+}

Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 1493 - 0
css/index.css


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 1489 - 0
css/indexPC.css


+ 286 - 0
css/publicIE.css

@@ -0,0 +1,286 @@
+body,html{
+    width: 100%;
+    height: 100%;
+    margin:0 auto;
+    font-family:PingFangSC-Regular,sans-serif;
+}
+body{
+    font-size: 16px;
+    background-color: white;
+}
+@media screen and (min-width:1025px){
+    .main{
+        width: 62.5%;
+        margin: 0 auto;
+    }
+    .wenan::before{
+        
+        width: 25%;       
+        top: 15px;
+        left: 6%;
+    }
+    .wenan::after{
+        width: 25%;       
+        top: 15px;
+        right: 6%;
+    }
+    .footer{
+        padding: 20px 20%;
+    }
+    .footer .infobox{
+        float: left;
+       
+    }
+    .chuli{
+        position: relative;
+        top: 0;
+        left:12px;
+    }
+    /* 返回顶部按钮 */
+.aside{
+    display: block;
+    width: 40px;
+    height: 40px;
+    position: fixed;
+    bottom: 120px;
+    right: 120px;
+    cursor: pointer;
+    display: none;
+}
+.aside img{
+    width: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+.aside.show{
+    display: block;
+}
+.email{
+    margin-left: 40px;
+  }
+}
+@media screen and (min-width:768px) and (max-width:1024px){
+    .main{
+        width: 96%;
+        margin: 0 auto;
+    }
+    .wenan::before{
+        width: 20%;
+       
+        top: 15px;
+        left: 20px;
+    }
+    .wenan::after{
+        width: 20%;
+       
+        top: 15px;
+        right: 20px;
+    }
+    .footer{
+        padding: 20px 18%;
+    }
+    .footer .infobox{
+        float: none;
+       
+    }
+    /* 返回顶部按钮 */
+        .aside{
+            display: block;
+            width: 30px;
+            height: 30px;
+            position: fixed;
+            bottom: 40px;
+            right: 40px;
+            cursor: pointer;
+            display: none;
+        }
+        .aside img{
+            width: 100%;
+            position: absolute;
+            top: 0;
+            left: 0;
+        }
+        .aside.show{
+            display: block;
+        }
+    }
+@media screen and (max-width:767px){
+    .main{
+        width: 99%;
+        margin: 0 auto;
+    }
+    .wenan::before{       
+        width: 180px;    
+        top: 15px;
+        left: 30px;
+    }
+    .wenan::after{       
+        width: 180px;
+        top: 15px;
+        right: 30px;
+    }
+    .footer{
+        padding: 20px 10%;
+    }
+    .footer .infobox{
+        float: none;
+       
+    }
+    /* 返回顶部按钮 */
+    .aside{
+        display: block;
+        width: 30px;
+        height: 30px;
+        position: fixed;
+        bottom: 30px;
+        right: 30px;
+        cursor: pointer;
+        display: none;
+    }
+    .aside img{
+        width: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+    }
+    .aside.show{
+        display: block;
+    }
+}
+
+
+body,html{
+    width: 100%;
+    height: 100%;
+    margin:0 auto;
+    
+}
+body{
+    font-size: 16px;
+    font-family:PingFangSC-Regular,sans-serif;
+    background-color: #000;
+}
+a{
+    color: #fff;
+}
+.container{
+    width: 100%;   
+    background-color: #000;
+    overflow: hidden;
+}
+
+
+/* 导航样式 */
+.header{
+    width: 100%;
+    height:100px;
+    overflow: hidden;
+}
+.header .icon{
+    width: 70px; 
+    height:100px; 
+    float: left;
+}
+.icon img{
+    display: block;
+    width: 100%;
+    margin-top: 5px;
+   
+}
+.nav{
+    height: 100%;
+    float: right;
+}
+.nav ul{
+    
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    overflow: hidden;
+    line-height:100px;
+}
+.nav ul li{
+    float: left;
+    height: 100%;
+    line-height: 100px;
+    font-size: 36px;
+    color: #FFF;
+}
+.nav a{
+    display: inline-block;
+    width:108px;
+    height: 98px;
+    line-height: 98px;
+    font-size: 18px;
+    font-family:PingFangSC-Regular,sans-serif;
+}
+.nav ul li.active{
+    background-color: #b6885d;
+}
+/* 页脚 */
+.footer{
+    box-sizing: border-box;
+    width: 100%;
+    background: #b6885d;
+    
+}
+
+.footer .title{  
+    font-size: 20px;
+    margin-bottom: 20px;
+}
+    
+
+.footer ul{
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    overflow: hidden;
+}
+.footer ul li{
+    float: left;
+    color: #fff;
+    width: 16.6%\0;
+    text-align: left\0;
+}
+.footer ul li span {
+    font-size: 20px;
+}
+
+.footer .info{
+    font-size: 18px;
+    color: #fff;
+}
+.footer .infobox{
+    text-align: left;
+    margin-right: 30px;
+    font-size: 16px;
+    margin-bottom:10px;
+}
+.footer .box{
+    overflow: hidden;
+    font-size: 16px;
+    margin-right: 11px;
+    
+}
+.footer .infobox img{
+    width: 20px;
+}
+.clearfix::after{
+    content: '';
+    clear: both;
+}
+.beian{
+    text-align: left;
+    
+}
+.beianinfo{
+    display: inline-block;
+    margin-left: 65px;
+}
+
+.footer .clear-right{
+    margin-right: 0;
+}
+

+ 294 - 0
css/publicStyle.css

@@ -0,0 +1,294 @@
+body,html{
+    width: 100%;
+    height: 100%;
+    margin:0 auto;
+    font-family:PingFangSC-Regular,sans-serif;
+}
+body{
+    font-size: 16px;
+    background-color: white;
+}
+@media screen and (min-width:1025px){
+    .main{
+        width: 62.5%;
+        margin: 0 auto;
+    }
+    .wenan::before{
+        
+        width: 25%;       
+        top: 0.15rem;
+        left: 6%;
+    }
+    .wenan::after{
+        width: 25%;       
+        top: 0.15rem;
+        right: 6%;
+    }
+    .footer{
+        padding: 0.2rem 20%;
+    }
+    .footer .infobox{
+        float: left;
+       
+    }
+    .chuli{
+        position: relative;
+        top: 0;
+        left:0.12rem;
+    }
+    
+.email{
+    margin-left: 0.4rem;
+  }
+    /* 返回顶部按钮 */
+.aside{
+    display: block;
+    width: 40px;
+    height: 40px;
+    position: fixed;
+    bottom: 120px;
+    right: 120px;
+    cursor: pointer;
+    display: none;
+}
+.aside img{
+    width: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+.aside.show{
+    display: block;
+}
+}
+@media screen and (min-width:768px) and (max-width:1024px){
+    .main{
+        width: 96%;
+        margin: 0 auto;
+    }
+    .wenan::before{
+        width: 20%;
+       
+        top: 0.15rem;
+        left: 0.2rem;
+    }
+    .wenan::after{
+        width: 20%;
+       
+        top: 0.15rem;
+        right: 0.2rem;
+    }
+    .footer{
+        padding: 0.2rem 18%;
+    }
+    .footer .infobox{
+        float: none;
+       
+    }
+    /* 返回顶部按钮 */
+        .aside{
+            display: block;
+            width: 30px;
+            height: 30px;
+            position: fixed;
+            bottom: 40px;
+            right: 40px;
+            cursor: pointer;
+            display: none;
+        }
+        .aside img{
+            width: 100%;
+            position: absolute;
+            top: 0;
+            left: 0;
+        }
+        .aside.show{
+            display: block;
+        }
+    }
+@media screen and (max-width:767px){
+    .main{
+        width: 99%;
+        margin: 0 auto;
+    }
+    .wenan::before{       
+        width: 1.8rem;    
+        top: 0.15rem;
+        left: 0.3rem;
+    }
+    .wenan::after{       
+        width: 1.8rem;
+        top: 0.15rem;
+        right: 0.3rem;
+    }
+    .footer{
+        padding: 0.2rem 10%;
+    }
+    .footer .infobox{
+        float: none;
+       
+    }
+    /* 返回顶部按钮 */
+    .aside{
+        display: block;
+        width: 0.3rem;
+        height: 0.3rem;
+        position: fixed;
+        bottom: 0.3rem;
+        right: 0.3rem;
+        cursor: pointer;
+        display: none;
+    }
+    .aside img{
+        width: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+    }
+    .aside.show{
+        display: block;
+    }
+    .video{
+        width: 100%;
+        height: 3.55rem;
+      }
+}
+
+
+body,html{
+    width: 100%;
+    height: 100%;
+    margin:0 auto;
+    
+}
+body{
+    font-size: 0.16rem;;
+    font-family:PingFangSC-Regular,sans-serif;
+    background-color: #000;
+}
+a{
+    color: #fff;
+}
+.container{
+    width: 100%;   
+    background-color: #000;
+    overflow: hidden;
+}
+
+
+/* 导航样式 */
+.header{
+    width: 100%;
+    height:1rem; 
+    overflow: hidden;
+}
+.header .icon{
+    width: 0.7rem; 
+    height: 1rem; 
+    float: left;
+}
+.icon img{
+    display: block;
+    width: 100%;
+    margin-top: 0.05rem;
+   
+}
+.nav{
+    height: 100%;
+    float: right;
+}
+.nav ul{
+    
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    overflow: hidden;
+    line-height: 1rem;
+}
+.nav ul li{
+    float: left;
+    height: 100%;
+    line-height: 1rem;
+    font-size: 0.36rem;
+    color: #FFF;
+}
+.nav a{
+    display: inline-block;
+    width: 1.08rem;
+    height: 0.98rem;
+    line-height: 0.98rem;
+    font-size: 0.18rem;
+    font-family:PingFangSC-Regular,sans-serif;
+}
+.nav ul li.active{
+    background-color: #b6885d;
+}
+/* 页脚 */
+.footer{
+    box-sizing: border-box;
+    width: 100%;
+    background: #b6885d;
+    
+}
+
+.footer .title{  
+    font-size: 0.2rem;
+    margin-bottom: 0.2rem;
+}
+    
+
+.footer ul{
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    overflow: hidden;
+}
+.footer ul li{
+    float: left;
+    color: #fff;
+    width: 16.6%\0;
+    text-align: left\0;
+}
+.footer ul li span {
+    font-size: 0.2rem;
+}
+
+.footer .info{
+    font-size: 0.18rem;
+    color: #fff;
+}
+.footer .infobox{
+    text-align: left;
+    margin-right: 0.3rem;
+    font-size: 0.16rem;
+    margin-bottom: 0.1rem;
+}
+.footer .box{
+    overflow: hidden;
+    font-size: 0.16rem;
+    margin-right: 0.11rem;
+    
+}
+.footer .infobox img{
+    width: 0.2rem;
+}
+.clearfix::after{
+    content: '';
+    clear: both;
+}
+.beian{
+    text-align: left;
+    
+}
+.beianinfo{
+    display: inline-block;
+    margin-left: 0.65rem;
+}
+
+.footer .clear-right{
+    margin-right: 0;
+}
+.video{
+    width: 100%;
+   
+  }

+ 6 - 0
css/reset.css

@@ -0,0 +1,6 @@
+body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, legend, input, textarea, button, p, blockquote, th, td
+{margin: 0;padding: 0;}
+body{text-align: center;background-color: #EEEDE8;}
+li{ list-style: none;}
+a{text-decoration: none;}
+input,button,img{border: none}

+ 198 - 0
css/showWork.css

@@ -0,0 +1,198 @@
+.banner img {
+  width: 100%;
+}
+.information-content {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  /* max-height: 4.5rem; */
+}
+.information-content-left {
+  max-height: 4.5rem;
+  width: 100%;
+  min-height: 4.5rem;
+}
+.information-content-right {
+  width: 100%;
+  padding: 0.2rem;
+}
+.information-content-right-title {
+  margin-top: 0.2rem;
+  display: flex;
+  /* flex-wrap: wrap; */
+  flex-direction: column;
+  justify-content: space-around;
+
+  /* height: 60%; */
+}
+.information-content-right-title p {
+  font-size: 0.2rem;
+  text-align: left;
+  margin-bottom: 0.1rem;
+  font-weight: 300;
+}
+.culture-content {
+  width: 100%;
+  display: flex;
+  justify-content: space-around;
+  margin-top: 0.5rem;
+  flex-direction: column;
+  align-items: center;
+}
+.culture-content-one {
+  width: 100%;
+}
+.culture-all {
+  margin: auto;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 50%;
+  border: 3px solid white;
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+}
+.culture-all .share {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #ffffff;
+  font-size: 0.4rem;
+}
+.culture-all:hover img {
+  transform: scale(1.2);
+  transition: all 0.5s;
+}
+.culture-all img {
+  width: 100%;
+  height: 100%;
+}
+.culture-one {
+  margin-top: 0.3rem;
+  /* margin-left: -0.2rem; */
+  width: 90%;
+  height: auto;
+  background-color: white;
+  font-size: 0.15rem;
+  min-height: 1.5rem;
+  padding: 0.2rem;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+}
+.culture-xian-left {
+  height: 1px;
+  width: 10%;
+  border: 1px solid black;
+  position: absolute;
+  background: black;
+  left: 28%;
+  top: 40%;
+  display: none;
+}
+.culture-xian {
+  height: 1px;
+  width: 10%;
+  border: 1px solid black;
+  position: absolute;
+  background: black;
+  right: 28%;
+  top: 40%;
+  display: none;
+}
+.culture-one .title {
+  font-size: 0.2rem;
+  font-weight: 500;
+  margin-bottom: 0.1rem;
+}
+
+.case-bg-img {
+  width: 100%;
+  height: auto;
+}
+
+.history-bg-img {
+  height: 3rem;
+}
+.section {
+  color: #fff;
+  text-align: center;
+  margin-top: 0.83rem;
+}
+.section .title .desc {
+  font-size: 0.3rem;
+  margin-bottom: 0.22rem;
+}
+.section .title .info {
+  font-size: 0.22rem;
+  margin-bottom: 0.76rem;
+}
+.section .showlist {
+  margin-bottom: 0.9rem;
+  /* margin-top: 0.5rem; */
+  overflow: hidden;
+}
+
+.change-page {
+  margin-bottom: 0.14rem;
+  text-align: right;
+  height: 0.36rem;
+}
+
+.change-page .left,
+.change-page .right {
+  width: 0.42rem;
+  cursor: pointer;
+}
+
+.section .showlist .list {
+  width: 23.75%;
+  margin-right: 1.6%;
+
+  /* background-color:#b6885d; */
+  float: left;
+  position: relative;
+}
+.section .showlist .list .play {
+  width: 30%;
+  position: absolute;
+  top: 50%;
+  margin-top: -15%;
+  left: 50%;
+  margin-left: -15%;
+  cursor: pointer;
+  z-index: 3;
+}
+/* .section .showlist .list:hover{
+    transform: translateY(-10px);
+    box-shadow: 0 0  15px rgba(255,255,255,0.85);
+} */
+.section .showlist .clear-right {
+  margin-right: 0;
+}
+.list .video {
+  width: 100%;
+  display: block;
+}
+.list .from {
+  padding: 0.2rem;
+  font-size: 0.2rem;
+  color: #000;
+  background-color: #fff;
+}
+.nextPage {
+  display: none;
+}
+.beianinfo {
+  display: inline-block;
+  margin-left: 0.65rem;
+}

+ 342 - 0
css/showWorkPC.css

@@ -0,0 +1,342 @@
+
+.banner img {
+  width: 100%;
+}
+.information-content {
+  width: 100%;
+  display: flex;
+  max-height: 4.5rem;
+}
+.information-content-left {
+  max-height: 4.5rem;
+  width: 50%;
+  min-height: 4.5rem;
+}
+.information-content-right {
+  width: 50%;
+  padding: 0.4rem 0.2rem 0.2rem;
+}
+.information-content-right-title {
+  margin-top: 0.2rem;
+  display: flex;
+  flex-direction: column;
+}
+.information-content-right-title p {
+  font-size: 0.2rem;
+  text-align: left;
+  margin-bottom: 0.35rem;
+  font-weight: 300;
+  line-height: 0.35rem;
+}
+.time-horizontal-content {
+  padding: 0.4rem 0;
+}
+.history-bg-img {
+  height: 3rem;
+}
+.culture-content {
+  width: 100%;
+  display: flex;
+  justify-content: space-around;
+  margin-top: 0.5rem;
+  align-items: center;
+}
+.culture-content-one {
+  width: 20%;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+
+.culture-all {
+  width: 2rem;
+  height: 2rem;
+  border-radius: 50%;
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+}
+.culture-all .share {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #ffffff;
+  font-size: 0.4rem;
+}
+.culture-all:hover img {
+  transform: scale(1.2);
+  transition: all 0.5s;
+}
+.culture-all img {
+  width: 100%;
+  height: 100%;
+}
+.culture-one {
+  margin-top: 0.3rem;
+  /* margin-left: -0.2rem;
+  width: 120%;
+  height: auto; */
+  width: 120%;
+  background-color: white;
+  font-size: 0.15rem;
+  min-height: 1.5rem;
+  padding: 0.2rem;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+}
+.culture-xian-left {
+  height: 1px;
+  width: 10%;
+  border: 1px solid black;
+  position: relative;
+  background: black;
+  top:-1rem; 
+  
+  /* display: none; */
+}
+.culture-xian {
+  height: 1px;
+  width: 10%;
+  border: 1px solid black;
+  position: relative;
+  background: black;
+  top:-1rem; 
+}
+.culture-one .title {
+  font-size: 0.2rem;
+  font-weight: 500;
+  margin-bottom: 0.1rem;
+}
+
+/* @media screen and (max-width: 1711px) {
+  .culture-all {
+    width: 2rem;
+    height: 2rem;
+    border-radius: 50%;
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+  }
+  .culture-all .share {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #ffffff;
+    font-size: 0.4rem;
+  }
+  .culture-all:hover img {
+    transform: scale(1.2);
+    transition: all 0.5s;
+  }
+  .culture-all img {
+    width: 100%;
+    height: 100%;
+  }
+  .culture-one {
+    margin-top: 0.3rem;
+    margin-left: -0.2rem;
+    width: 120%;
+    height: auto;
+    background-color: white;
+    font-size: 0.15rem;
+    min-height: 1.5rem;
+    padding: 0.2rem;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+  }
+  .culture-xian-left {
+    height: 1px;
+    width: 10%;
+    border: 1px solid black;
+    position: absolute;
+    background: black;
+    left: 28%;
+    top: 40%;
+    display: none;
+  }
+  .culture-xian {
+    height: 1px;
+    width: 10%;
+    border: 1px solid black;
+    position: absolute;
+    background: black;
+    right: 28%;
+    top: 40%;
+    display: none;
+  }
+  .culture-one .title {
+    font-size: 0.2rem;
+    font-weight: 500;
+    margin-bottom: 0.1rem;
+  }
+}
+
+@media screen and (min-width: 1712px) {
+  .culture-all {
+    width: 2rem;
+    height: 2rem;
+    border-radius: 50%;
+    border: 3px solid white;
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+  }
+  .culture-all .share {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #ffffff;
+    font-size: 0.4rem;
+  }
+  .culture-all:hover img {
+    transform: scale(1.2);
+    transition: all 0.5s;
+  }
+  .culture-all img {
+    width: 100%;
+    height: 100%;
+  }
+  .culture-one {
+    margin-top: 0.3rem;
+    margin-left: -0.2rem;
+    width: 100%;
+    height: auto;
+    background-color: white;
+    font-size: 0.15rem;
+    min-height: 1.5rem;
+    padding: 0.2rem;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+  }
+  .culture-xian-left {
+    height: 1px;
+    width: 10%;
+    border: 1px solid black;
+    position: absolute;
+    background: black;
+    left: 28%;
+    top: 40%;
+  }
+  .culture-xian {
+    height: 1px;
+    width: 10%;
+    border: 1px solid black;
+    position: absolute;
+    background: black;
+    right: 28%;
+    top: 40%;
+  }
+  .culture-one .title {
+    font-size: 0.2rem;
+    font-weight: 500;
+    margin-bottom: 0.1rem;
+  }
+} */
+
+.section {
+  color: #fff;
+  text-align: center;
+  margin-top: 83px;
+}
+.section .title .desc {
+  font-size: 30px;
+  margin-bottom: 22px;
+}
+.section .title .info {
+  font-size: 22px;
+  margin-bottom: 76px;
+}
+.section .showlist {
+  margin-bottom: 90px;
+  /* margin-top: 0.5rem; */
+  overflow: hidden;
+}
+
+.change-page {
+  margin-bottom: 14px;
+  text-align: right;
+  height: 36px;
+}
+
+.change-page .left,
+.change-page .right {
+  width: 42px;
+  cursor: pointer;
+}
+
+.section .showlist .list {
+  width: 23.75%;
+  margin-right: 1.6%;
+  /* height: 470px; */
+  /* background-color:#b6885d; */
+  float: left;
+  position: relative;
+}
+
+.section .showlist .list .play {
+  width: 30%;
+  position: absolute;
+  top: 50%;
+  margin-top: -15%;
+  left: 50%;
+  margin-left: -15%;
+  cursor: pointer;
+  z-index: 3;
+}
+.section .showlist .list:hover {
+  transform: translateY(-10px);
+  box-shadow: 0 0 15px rgba(255, 255, 255, 0.85);
+}
+.section .showlist .clear-right {
+  margin-right: 0;
+}
+.list .video {
+  width: 100%;
+  display: block;
+  /* height: 390px; */
+}
+.list .from {
+  height: 80px;
+  padding: 20px;
+  box-sizing: border-box;
+  font-size: 20px;
+  color: #000;
+  background: #fff;
+}
+.nextPage {
+  display: none;
+}
+.beianinfo {
+  display: inline-block;
+  margin-left: 65px;
+}

Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 13 - 0
css/swiper.min.css


+ 514 - 0
example.html

@@ -0,0 +1,514 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" />
+    <title>北京五六七广告有限公司</title>
+
+    <meta name="title" content="北京五六七广告有限公司">
+    <meta name="keywords" content="信息流广告 互联网广告 广告服务商 KOL代理 短视频服务商 代播 直播引流  直播带货 直播服务商">
+    <meta name="description" content="打通效果和KOL结合的代理商,短视频整合服务商,直播+引流一站式服务商,客户集中在电商、网服、金融、教育、游戏等领域">
+
+    <link rel="shortcut icon" href="./images/icon.png" type="image/x-icon">
+    <link rel="stylesheet" href="./css/reset.css">
+    <link rel="stylesheet" href="./fontsize/iconfont.css">
+    <link rel="stylesheet" href="./css/swiper.min.css">
+    <!-- <link rel="stylesheet"  href="./css/indexPC.css" > -->
+    <link rel="stylesheet" media="screen and (max-width:1024px)" href="./css/index.css">
+    <link rel="stylesheet" media="screen and (min-width:1025px) " href="./css/indexPC.css">
+    <link rel="stylesheet" media="screen and (max-width:1024px)" href="./css/showWork.css">
+    <link rel="stylesheet" media="screen and (min-width:1025px) " href="./css/showWorkPC.css">
+    <link rel="stylesheet" media="screen and (max-width:1024px)" href="./css/contactUs.css">
+    <link rel="stylesheet" media="screen and (min-width:1025px) " href="./css/contactUsPC.css">
+    <style>
+        .nav ul li:hover .menu {
+            display: block !important;
+        }
+
+        .menu {
+            display: none;
+            position: absolute;
+            top: 1rem;
+            z-index: 100;
+            color: black;
+            line-height: 0.5rem;
+            font-size: 0.2rem;
+            text-align: left;
+            border: 1px solid white;
+            background: white;
+            cursor: pointer;
+        }
+
+        .menu p:hover {
+            color: #FFFFFF;
+        }
+
+        .bottom-border-a {
+            border-bottom: 5px solid black;
+        }
+    </style>
+    <style>
+        .hover-a:hover {
+            color: #00A0E9;
+            transition: all .5s;
+        }
+
+        #close-box,
+        #menu {
+            transition: all .5s;
+        }
+    </style>
+</head>
+
+<body>
+
+    <div class="container  service-content">
+        <div class="background-image-all">
+            <div class="swiper-container">
+                <div class="swiper-wrapper">
+                    <div class="swiper-slide">
+
+                        <img src="./img/information.png" alt="" srcset="" class="banner-img">
+                    </div>
+                    <!-- <div class="swiper-slide">
+                        <div class="main">
+                            <h2 class="banner-title">专注抖音直播投流</h2>
+                            <p class="banner-title-content">
+                                all in实体经济数字化转型
+                            </p>
+                        </div>
+                        <img src="./img/2.jpg" alt="" srcset="" class="banner-img">
+                    </div> -->
+                </div>
+            </div>
+            <div class="main pc-class" style="position: absolute;top: 0;z-index: 10">
+                <div class="header"
+                    style="width: 100%;
+                height: 80px;margin-top: 0.2rem;box-sizing: border-box;display: flex;justify-content: space-between;align-items: center;">
+                    <div>
+                        <img src="./img/logo1.png" alt="" style="font-size: 16px;" id="logo">
+                    </div>
+                    <div style="width: 80%;display: flex;justify-content: space-around;" id="show">
+                        <a href="./index.html" style=" line-height: 60px;height:60px;box-sizing: border-box;">首页</a>
+                        <a href="./showWork.html"
+                            style=" line-height: 60px;height:60px;box-sizing: border-box;">公司信息</a>
+                        <a href="./contactUs.html"
+                            style=" line-height: 60px;height:60px;box-sizing: border-box;">服务内容与优势</a>
+                        <a href="./example.html" style=" line-height: 60px;height:60px;box-sizing: border-box;">优秀案例</a>
+                        <a href="./example.html#footer"
+                            style="line-height: 60px;height:60px;box-sizing: border-box;">联系我们</a>
+                    </div>
+
+                </div>
+
+            </div>
+            <div class="main phone-class" style="position: absolute;top: 0;z-index: 10">
+                <div class="header" style="width: 100%;
+            height: 80px;box-sizing: border-box;display: flex;justify-content: space-between;align-items: center;">
+                    <div>
+                        <img src="./img/logo1.png" alt="" style="font-size: 16px;height: 20px;">
+                    </div>
+                    <div id="show">
+                        <div id="show-menu" style="position: relative;top: -5px;">
+                            <i style="display: block;width: 0.4rem;height: 2px;background-color: white;"></i>
+                            <i
+                                style="display: block;width: 0.4rem;height: 2px;background-color: white;margin: 0.1rem 0;"></i>
+                            <i style="display: block;width: 0.4rem;height: 2px;background-color: white;"></i>
+                        </div>
+                        <!-- <a href="./index.html"
+                            style="border-bottom:5px solid black;    line-height: 60px;height:60px;box-sizing: border-box;">首页</a>
+                        <a href="./showWork.html"
+                            style="border-bottom:5px solid black;    line-height: 60px;height:60px;box-sizing: border-box;">公司信息</a>
+                        <a href="./contactUs.html"
+                            style="border-bottom:5px solid black;    line-height: 60px;height:60px;box-sizing: border-box;">服务内容与优势</a>
+                        <a href="./example.html"
+                            style="border-bottom:5px solid black;    line-height: 60px;height:60px;box-sizing: border-box;">优秀案例</a>
+                        <a href="./contactUs.html"
+                            style="border-bottom:5px solid black;    line-height: 60px;height:60px;box-sizing: border-box;">联系我们</a> -->
+                    </div>
+
+                </div>
+            </div>
+        </div>
+        <div style="width: 100%;height: 100vh;background: rgba(0, 0, 0, 0.7);position: fixed;top: 0;z-index: 100;visibility:hidden;"
+            id="close-box">
+            <div style="width: 60%;height: 100vh;background: rgb(246, 246, 246);position: absolute;right: -60%;"
+                id="menu">
+                <!-- <div><img src="./img/close.jpg" id="close" alt=""
+                        style="width: 0.8rem;position: absolute;left: 0.2rem;top: 0.2rem;"></div> -->
+                <div style="display: flex;flex-direction: column;margin-top: 1rem;text-align: left;padding: 0 0.4rem;"
+                    class="hover-a">
+                    <a href="./index.html"
+                        style="color:black !important;line-height: 60px;height:60px;box-sizing: border-box;">首页</a>
+                    <a href="./showWork.html"
+                        style="color:black !important;line-height: 60px;height:60px;box-sizing: border-box;">公司信息</a>
+                    <a href="./contactUs.html"
+                        style="color:black !important;line-height: 60px;height:60px;box-sizing: border-box;">服务内容与优势</a>
+                    <a href="./example.html"
+                        style="color:black !important;line-height: 60px;height:60px;box-sizing: border-box;">优秀案例</a>
+                    <a href="./example.html#footer"
+                        style="color:black !important;line-height: 60px;height:60px;box-sizing: border-box;">联系我们</a>
+                </div>
+            </div>
+        </div>
+        <div id="hide-all"
+            style="background-color: white;width: 100%;
+    box-sizing: border-box;transition:all .5s;overflow: hidden;display: flex;justify-content: space-between;position: absolute;top: 0;z-index: 1;">
+            <div>
+
+            </div>
+            <div style="display: flex;justify-content:space-between;" id="show-all" class=" main">
+                <div>
+
+                </div>
+                <div style="width: 80%;display:flex;justify-content: space-around;" id="show-small">
+                    <div style="height: 0;overflow: hidden;color: white;">
+                        首页
+                    </div>
+                    <div style="height: 0;overflow: hidden;color: white;">
+                        公司信息
+                    </div>
+                    <div style="height: 0;overflow: hidden;color: white;">
+                        服务内容与优势
+
+                    </div>
+                    <div style="height: 0;overflow: hidden;color: white;">优秀案例</div>
+                    <div style="height: 0;overflow: hidden;color: white;">连西我们</div>
+                </div>
+
+            </div>
+        </div>
+        <div class="main ">
+            <!-- banner 视频区 -->
+            <!-- <div class="banner"> -->
+
+            <div class="banner-box" style="background-color: #f2f2f2;">
+                <div class="main-content-title" style="position: static;margin-top: 0.5rem;">
+                    <div class="main-content-title-border">
+                        我们的优势
+                    </div>
+                </div>
+
+                <!-- <div> -->
+                <div style="padding:0.2rem;font-size: 0.2rem;color: #1B1F25;">
+                    <p>最早2020年5月开始接入直播投流服务,积累经验近2年,
+                        2020年抖音淘系引流服务商排名 <span style="font-weight: bold;font-size: 0.22rem;">TOP1</span>,
+                        抖音达人带货榜头部承接投放覆盖率达到 <span
+                            style="font-weight: bold;font-size: 0.22rem;">80%以上</span>,头部达人直播投放经验极为丰富</p>
+
+                </div>
+
+            </div>
+
+            <!-- </div> -->
+        </div>
+        <div class="background-image-all excellent-cases">
+            <img src="./img/case_bg.png" alt="" class="case-bg-img example-image">
+            <div class="main" style="position: absolute;top: 0;z-index: 10;height: 100%;">
+                <div class="main-content-title example-margin"
+                    style="border-color:#FFFFFF ;border-bottom:0;position: static;">
+                    <div class="main-content-title-border" style="border-bottom: 0;color: #FFFFFF;">
+                        优秀案例
+                    </div>
+                </div>
+                <div class="example-experience">
+                    <div class="image">
+                        <img src="./img/111.png" alt="" style="width: 100%;">
+                        <div class="top">
+                            <p>GMV:5858.3w
+                            </p>
+                            <p>GPM:4378
+                            </p>
+                            <p>下单率:3.53%
+                            </p>
+                        </div>
+                    </div>
+                    <div class="image">
+                        <img src="./img/222.png" alt="" style="width: 100%;">
+                        <div class="top">
+                            <p>GMV:6054.4w
+                            </p>
+                            <p></p>GPM:3903
+                            </p>
+                            <p>下单率:2.38%</p>
+                        </div>
+                    </div>
+                    <div class="image">
+                        <img src="./img/333.png" alt="" style="width: 100%;">
+                        <div class="top">
+                            <p>GMV:1820.6w
+                            </p>
+                            <p>GPM:6173
+                            </p>
+                            <p>下单率:7.52%
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+
+        <div class="main ">
+            <!-- banner 视频区 -->
+            <!-- <div class="banner"> -->
+
+            <div class="banner-box" style="background-color: #f2f2f2;min-height: 1rem;">
+                <div class="main-content-title" style="position: static;margin-top: 0.5rem;border: 0;">
+                    <div class="main-content-title-border">
+                        直播投流服务体验价
+                    </div>
+                </div>
+
+            </div>
+
+            <!-- </div> -->
+        </div>
+        <div class="background-image-all excellent-cases">
+            <img src="./img/图层.png" alt="" class="case-bg-img" style="height: 2rem;">
+            <div class="main" style="position: absolute;top: 0;z-index: 10;height: 100%;display: flex;justify-content: center;align-items: center;">
+                <div style="width: 2.5rem;height: 1rem;border-radius: 1rem;background: #FFFFFF;font-size: 0.5rem;font-weight: 700;text-align: center;line-height: 1rem;">
+                    567
+                    <span style="font-size: 0.3rem;font-weight: 500;">元</span>
+                </div>
+                <div style="margin: 0 0.5rem;font-size: 0.5rem;font-weight: bold;">
+                    ▶
+                </div>
+                <div style="width: 2.5rem;height: 1rem;border-radius: 1rem;font-size: 0.3rem;font-weight: 500;line-height: 1rem;">
+                    每天<span style="font-size: 0.5rem;font-weight: 700;">10个</span>名额
+                </div>
+            </div>
+        </div>
+
+
+        <div class='footer' id="footer">
+
+            <div class="title">
+                <div class="main-content-title"
+                    style="position: static;justify-content: start;border-color: #f2f2f2;font-size: 0.2rem;font-weight: bold;">
+                    <div style="color: white;margin-bottom: 0.1rem;">
+                        联系我们
+                    </div>
+                </div>
+            </div>
+            <div style="width: 100%;display: flex;margin-bottom: 0.5rem;">
+                <div style="width: 50%;height: 100%;line-height: 0.5rem;">
+                    <p style="font-size: 0.3rem;color: white;text-align: left;    margin-bottom: 0.2rem;">北京总部</p>
+                    <p style="font-size: 0.18rem;color: white;text-align: left;line-height: 0.3rem;">
+                        <img src="./img/地址.png" alt="" style="width: 0.2rem;margin-right: 0.1rem;    position: relative;
+                        top: 0.03rem;">
+                        北京市朝阳区酒仙桥酒仙桥路14号兆维工业园51幢A1-3门2层
+                    </p>
+                    <p style="font-size: 0.18rem;color: white;text-align: left;">
+                        <img src="./img/电话.png" alt="" style="width: 0.2rem;margin-right: 0.1rem;">
+                        13811821639
+                    </p>
+                    <p style="font-size: 0.18rem;color: white;text-align: left;position: relative;top: -0.12rem;">
+                        <span style="width: 0.2rem;margin-right: 0.1rem;">✉</span>
+                        wuliuqi@567c-top.cn
+                    </p>
+
+
+
+                </div>
+                <div style="width: 50%;height: 100%;">
+                    <div id="myMap" ControlAnchor='BMAP_ANCHOR_TOP_LEFT' style="    width: 100%;
+                    height:2.5rem;">
+
+                    </div>
+                </div>
+            </div>
+            <div style="display: flex;flex-wrap: wrap;">
+                <div style="width: 35%;padding-bottom: 0.2rem;line-height: 0.3rem;margin-right: 0.3rem;">
+                    <p style="font-size: 0.2rem;color: white;text-align: left;margin-bottom: 0.2rem;">石家庄分公司</p>
+                    <p style="font-size: 0.15rem;color: white;text-align: left;">
+                        <img src="./img/地址.png" alt="" style="width: 0.15rem;margin-right: 0.1rem;    position: relative;
+                        top: 0.03rem;">
+                        石家庄市长安区广安大街86 号财富大厦裙楼4B1 房间
+                    </p>
+                </div>
+                <div style="width:30%;padding-bottom: 0.2rem;line-height: 0.3rem;">
+                    <p style="font-size: 0.2rem;color: white;text-align: left;margin-bottom: 0.2rem;">杭州分公司</p>
+                    <p style="font-size: 0.15rem;color: white;text-align: left;">
+                        <img src="./img/地址.png" alt="" style="width: 0.15rem;margin-right: 0.1rem;    position: relative;
+                        top: 0.03rem;">
+                        杭州市西湖区蒋村商务中心B1座318室
+                    </p>
+                </div>
+                <div style="width:  30%;padding-bottom: 0.2rem;line-height: 0.3rem;">
+                    <p style="font-size: 0.2rem;color: white;text-align: left;margin-bottom: 0.2rem;">上海分公司</p>
+                    <p style="font-size: 0.15rem;color: white;text-align: left;">
+                        <img src="./img/地址.png" alt="" style="width: 0.15rem;margin-right: 0.1rem;    position: relative;
+                        top: 0.03rem;">
+                        上海市静安区康定路359号1楼
+                    </p>
+                </div>
+            </div>
+            <div>
+                <a href="https://beian.miit.gov.cn/" target="_block">
+                    京ICP备18045244号-1
+                </a>
+            </div>
+        </div>
+        <a class="aside" href="#">
+            <img src="./images/goTop.png" alt="">
+        </a>
+    </div>
+        <a class="aside" href="#">
+            <img src="./images/goTop.png" alt="">
+        </a>
+    </div>
+    <script src="./js/jquery.min.js"></script>
+    <script src="./js/phone.js"></script>
+    <script src="./js/swiper.min.js"></script>
+    <script src="./js/index.js"></script>
+    <script type="text/javascript"
+        src="http://api.map.baidu.com/api?v=3.0&ak=QNWNbHbcOSEyeOlyc1GT2DLFdRDRd4yv"></script>
+    <script src="./js/contactUs.js"></script>
+    <script>
+        // console.log(1)
+        var mySwiper = new Swiper('.swiper-container', {
+            // autoplay: true,//可选选项,自动滑动
+            disableOnInteraction: true,
+            loop: true,
+        })
+        let caseTitle = document.getElementsByClassName('left-box-title')
+        $('.left-box-title').on('click', function () {
+            $(this).addClass('left-box-title-active')
+            $(this).siblings().removeClass('left-box-title-active')
+            // $('#img-right').addClass('active-hide')
+            if ($(this).index() == 0) {
+                $('#img-right').attr('src', './img/美妆.png')
+            } else if ($(this).index() == 1) {
+                $('#img-right').attr('src', './img/珠宝.png')
+            } else if ($(this).index() == 2) {
+                $('#img-right').attr('src', './img/食品.png')
+            }
+
+        })
+        $('#show-menu').on('click', function () {
+            $('#close-box').css({
+                visibility: "visible"
+            })
+            $('#menu').css({ right: 0 })
+        })
+        $('#close-box').on('click', function () {
+            $('#menu').css({ right: '-60%' })
+            setTimeout(() => {
+                $('#close-box').css({
+                    visibility: "hidden"
+                })
+            }, 200)
+
+        })
+
+
+        var box = document.getElementById('hide-all');
+        var showBox = document.getElementById('show')
+        var timer = null;
+        $('#show a').on('mouseover', function (e) {
+            // if (timer) clearTimeout(timer)
+
+            $(this).addClass('bottom-border-a')
+            $(this).siblings().removeClass('bottom-border-a')
+            if ($(this).index() == 0) {
+                box.style.height = '0';
+                box.style.padding = '0';
+                $('#logo').attr('src', './img/logo1.png')
+                $(this).removeClass('a-color')
+                $(this).siblings().removeClass('a-color')
+                $("#show-small div").eq($(this).index()).siblings().css({
+                    height: "0"
+                })
+            } else if ($(this).index() == 1) {
+                box.style.height = '350px';
+                $(this).addClass('a-color')
+                $(this).siblings().addClass('a-color')
+                $('#logo').attr('src', './img/logo.png')
+                // box.style.padding = '0.2rem 0';
+                $("#show-small div").eq($(this).index()).css({
+                    height: "300px"
+                })
+                $("#show-small div").eq($(this).index()).html(`
+                <a style="color:#000000;display:block;margin:105px  0 0.2rem 0" href="./showWork.html#culture">企业文化</a>
+                <a style="color:#000000;display:block;margin:0.2rem 0" href="./showWork.html#team" >团队成员</a>
+                <a style="color:#000000;display:block;margin:0.2rem 0" href="./showWork.html#history">历史荣耀</a>公司信息`)
+                $("#show-small div").eq($(this).index()).siblings().css({
+                    height: "0"
+                })
+                // $("#show-small div").eq($(this).index()).siblings().empty("p")
+            } else if ($(this).index() == 2) {
+                $(this).addClass('a-color')
+                $(this).siblings().addClass('a-color')
+                box.style.height = '350px';
+                $('#logo').attr('src', './img/logo.png')
+                // box.style.padding = '0.2rem 0';
+                $("#show-small div").eq($(this).index()).css({
+                    height: "300px"
+                })
+                $("#show-small div").eq($(this).index()).html(`
+                <a style="color:#000000;display:block;margin:105px 0 0.2rem 0" href="./contactUs.html#painPoint">投放痛点分析</a>
+                <a style="color:#000000;display:block;margin:0.2rem 0" href="./contactUs.html#experience" >经验丰富</a>
+                <a style="color:#000000;display:block;margin:0.2rem 0" href="./contactUs.html#efficient">人群精准触达</a>
+                <a style="color:#000000;display:block;margin:0.2rem 0" href="./contactUs.html#industry">行业运营服务</a>
+                <a style="color:#000000;display:block;margin:0.2rem 0" href="./contactUs.html#increment">增值服务</a>服务内容与优势`)
+                $("#show-small div").eq($(this).index()).siblings().css({
+                    height: "0"
+                })
+                // $("#show-small div").eq($(this).index()).siblings().empty("p")
+            } else if ($(this).index() == 3) {
+                box.style.height = '0';
+                box.style.padding = '0';
+                $('#logo').attr('src', './img/logo1.png')
+                $(this).removeClass('a-color')
+                $(this).siblings().removeClass('a-color')
+                $("#show-small div").eq($(this).index()).siblings().css({
+                    height: "0"
+                })
+                // $("#show-small div").eq($(this).index()).siblings().empty("p")
+            } else if ($(this).index() == 4) {
+                box.style.height = '0';
+                box.style.padding = '0';
+                $('#logo').attr('src', './img/logo1.png')
+                $(this).removeClass('a-color')
+                $(this).siblings().removeClass('a-color')
+                $("#show-small div").eq($(this).index()).siblings().css({
+                    height: "0"
+                })
+
+            }
+            e.stopPropagation();
+        })
+        $('#show a').on('mouseout', function () {
+
+            $(this).removeClass('bottom-border-a')
+            $('#show a').removeClass('a-color')
+        })
+        $("#show-small div").on('mouseover', function () {
+
+            $('#logo').attr('src', './img/logo.png')
+        })
+        showBox.onmouseover = function () {
+
+        }
+        box.onmouseover = function () {
+            box.style.height = '350px';
+            $('#show a').addClass('a-color')
+        }
+        showBox.onmouseout = function () {
+            $('#show a').removeClass('bottom-border-a')
+            $('#show a').removeClass('a-color')
+        }
+        box.onmouseout = function () {
+            box.style.height = '0';
+            box.style.padding = '0';
+            $('#logo').attr('src', './img/logo1.png')
+            $('#show a').removeClass('bottom-border-a')
+            $('#show a').removeClass('a-color')
+        }
+    </script>
+</body>
+
+</html>

+ 539 - 0
fontsize/demo.css

@@ -0,0 +1,539 @@
+/* Logo 字体 */
+@font-face {
+  font-family: "iconfont logo";
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
+}
+
+.logo {
+  font-family: "iconfont logo";
+  font-size: 160px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* tabs */
+.nav-tabs {
+  position: relative;
+}
+
+.nav-tabs .nav-more {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  height: 42px;
+  line-height: 42px;
+  color: #666;
+}
+
+#tabs {
+  border-bottom: 1px solid #eee;
+}
+
+#tabs li {
+  cursor: pointer;
+  width: 100px;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  font-size: 16px;
+  border-bottom: 2px solid transparent;
+  position: relative;
+  z-index: 1;
+  margin-bottom: -1px;
+  color: #666;
+}
+
+
+#tabs .active {
+  border-bottom-color: #f00;
+  color: #222;
+}
+
+.tab-container .content {
+  display: none;
+}
+
+/* 页面布局 */
+.main {
+  padding: 30px 100px;
+  width: 960px;
+  margin: 0 auto;
+}
+
+.main .logo {
+  color: #333;
+  text-align: left;
+  margin-bottom: 30px;
+  line-height: 1;
+  height: 110px;
+  margin-top: -50px;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.main .logo a {
+  font-size: 160px;
+  color: #333;
+}
+
+.helps {
+  margin-top: 40px;
+}
+
+.helps pre {
+  padding: 20px;
+  margin: 10px 0;
+  border: solid 1px #e7e1cd;
+  background-color: #fffdef;
+  overflow: auto;
+}
+
+.icon_lists {
+  width: 100% !important;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.icon_lists li {
+  width: 100px;
+  margin-bottom: 10px;
+  margin-right: 20px;
+  text-align: center;
+  list-style: none !important;
+  cursor: default;
+}
+
+.icon_lists li .code-name {
+  line-height: 1.2;
+}
+
+.icon_lists .icon {
+  display: block;
+  height: 100px;
+  line-height: 100px;
+  font-size: 42px;
+  margin: 10px auto;
+  color: #333;
+  -webkit-transition: font-size 0.25s linear, width 0.25s linear;
+  -moz-transition: font-size 0.25s linear, width 0.25s linear;
+  transition: font-size 0.25s linear, width 0.25s linear;
+}
+
+.icon_lists .icon:hover {
+  font-size: 100px;
+}
+
+.icon_lists .svg-icon {
+  /* 通过设置 font-size 来改变图标大小 */
+  width: 1em;
+  /* 图标和文字相邻时,垂直对齐 */
+  vertical-align: -0.15em;
+  /* 通过设置 color 来改变 SVG 的颜色/fill */
+  fill: currentColor;
+  /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
+      normalize.css 中也包含这行 */
+  overflow: hidden;
+}
+
+.icon_lists li .name,
+.icon_lists li .code-name {
+  color: #666;
+}
+
+/* markdown 样式 */
+.markdown {
+  color: #666;
+  font-size: 14px;
+  line-height: 1.8;
+}
+
+.highlight {
+  line-height: 1.5;
+}
+
+.markdown img {
+  vertical-align: middle;
+  max-width: 100%;
+}
+
+.markdown h1 {
+  color: #404040;
+  font-weight: 500;
+  line-height: 40px;
+  margin-bottom: 24px;
+}
+
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+  color: #404040;
+  margin: 1.6em 0 0.6em 0;
+  font-weight: 500;
+  clear: both;
+}
+
+.markdown h1 {
+  font-size: 28px;
+}
+
+.markdown h2 {
+  font-size: 22px;
+}
+
+.markdown h3 {
+  font-size: 16px;
+}
+
+.markdown h4 {
+  font-size: 14px;
+}
+
+.markdown h5 {
+  font-size: 12px;
+}
+
+.markdown h6 {
+  font-size: 12px;
+}
+
+.markdown hr {
+  height: 1px;
+  border: 0;
+  background: #e9e9e9;
+  margin: 16px 0;
+  clear: both;
+}
+
+.markdown p {
+  margin: 1em 0;
+}
+
+.markdown>p,
+.markdown>blockquote,
+.markdown>.highlight,
+.markdown>ol,
+.markdown>ul {
+  width: 80%;
+}
+
+.markdown ul>li {
+  list-style: circle;
+}
+
+.markdown>ul li,
+.markdown blockquote ul>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown>ul li p,
+.markdown>ol li p {
+  margin: 0.6em 0;
+}
+
+.markdown ol>li {
+  list-style: decimal;
+}
+
+.markdown>ol li,
+.markdown blockquote ol>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown code {
+  margin: 0 3px;
+  padding: 0 5px;
+  background: #eee;
+  border-radius: 3px;
+}
+
+.markdown strong,
+.markdown b {
+  font-weight: 600;
+}
+
+.markdown>table {
+  border-collapse: collapse;
+  border-spacing: 0px;
+  empty-cells: show;
+  border: 1px solid #e9e9e9;
+  width: 95%;
+  margin-bottom: 24px;
+}
+
+.markdown>table th {
+  white-space: nowrap;
+  color: #333;
+  font-weight: 600;
+}
+
+.markdown>table th,
+.markdown>table td {
+  border: 1px solid #e9e9e9;
+  padding: 8px 16px;
+  text-align: left;
+}
+
+.markdown>table th {
+  background: #F7F7F7;
+}
+
+.markdown blockquote {
+  font-size: 90%;
+  color: #999;
+  border-left: 4px solid #e9e9e9;
+  padding-left: 0.8em;
+  margin: 1em 0;
+}
+
+.markdown blockquote p {
+  margin: 0;
+}
+
+.markdown .anchor {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  margin-left: 8px;
+}
+
+.markdown .waiting {
+  color: #ccc;
+}
+
+.markdown h1:hover .anchor,
+.markdown h2:hover .anchor,
+.markdown h3:hover .anchor,
+.markdown h4:hover .anchor,
+.markdown h5:hover .anchor,
+.markdown h6:hover .anchor {
+  opacity: 1;
+  display: inline-block;
+}
+
+.markdown>br,
+.markdown>p>br {
+  clear: both;
+}
+
+
+.hljs {
+  display: block;
+  background: white;
+  padding: 0.5em;
+  color: #333333;
+  overflow-x: auto;
+}
+
+.hljs-comment,
+.hljs-meta {
+  color: #969896;
+}
+
+.hljs-string,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-strong,
+.hljs-emphasis,
+.hljs-quote {
+  color: #df5000;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-type {
+  color: #a71d5d;
+}
+
+.hljs-literal,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-attribute {
+  color: #0086b3;
+}
+
+.hljs-section,
+.hljs-name {
+  color: #63a35c;
+}
+
+.hljs-tag {
+  color: #333333;
+}
+
+.hljs-title,
+.hljs-attr,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #795da3;
+}
+
+.hljs-addition {
+  color: #55a532;
+  background-color: #eaffea;
+}
+
+.hljs-deletion {
+  color: #bd2c00;
+  background-color: #ffecec;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}
+
+/* 代码高亮 */
+/* PrismJS 1.15.0
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+code[class*="language-"],
+pre[class*="language-"] {
+  color: black;
+  background: none;
+  text-shadow: 0 1px white;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+@media print {
+
+  code[class*="language-"],
+  pre[class*="language-"] {
+    text-shadow: none;
+  }
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
+}
+
+:not(pre)>code[class*="language-"],
+pre[class*="language-"] {
+  background: #f5f2f0;
+}
+
+/* Inline code */
+:not(pre)>code[class*="language-"] {
+  padding: .1em;
+  border-radius: .3em;
+  white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: slategray;
+}
+
+.token.punctuation {
+  color: #999;
+}
+
+.namespace {
+  opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #9a6e3a;
+  background: hsla(0, 0%, 100%, .5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #07a;
+}
+
+.token.function,
+.token.class-name {
+  color: #DD4A68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+  color: #e90;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}

+ 191 - 0
fontsize/demo_index.html

@@ -0,0 +1,191 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <title>IconFont Demo</title>
+  <link rel="shortcut icon" href="https://img.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/>
+  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
+  <link rel="stylesheet" href="demo.css">
+  <link rel="stylesheet" href="iconfont.css">
+  <script src="iconfont.js"></script>
+  <!-- jQuery -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
+  <!-- 代码高亮 -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
+</head>
+<body>
+  <div class="main">
+    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">&#xe86b;</a></h1>
+    <div class="nav-tabs">
+      <ul id="tabs" class="dib-box">
+        <li class="dib active"><span>Unicode</span></li>
+        <li class="dib"><span>Font class</span></li>
+        <li class="dib"><span>Symbol</span></li>
+      </ul>
+      
+    </div>
+    <div class="tab-container">
+      <div class="content unicode" style="display: block;">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe630;</span>
+                <div class="name">圆点</div>
+                <div class="code-name">&amp;#xe630;</div>
+              </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="unicode-">Unicode 引用</h2>
+          <hr>
+
+          <p>Unicode 是字体在网页端最原始的应用方式,特点是:</p>
+          <ul>
+            <li>兼容性最好,支持 IE6+,及所有现代浏览器。</li>
+            <li>支持按字体的方式去动态调整图标大小,颜色等等。</li>
+            <li>但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。</li>
+          </ul>
+          <blockquote>
+            <p>注意:新版 iconfont 支持多色图标,这些多色图标在 Unicode 模式下将不能使用,如果有需求建议使用symbol 的引用方式</p>
+          </blockquote>
+          <p>Unicode 使用步骤如下:</p>
+          <h3 id="-font-face">第一步:拷贝项目下面生成的 <code>@font-face</code></h3>
+<pre><code class="language-css"
+>@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.eot');
+  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
+      url('iconfont.woff2') format('woff2'),
+      url('iconfont.woff') format('woff'),
+      url('iconfont.ttf') format('truetype'),
+      url('iconfont.svg#iconfont') format('svg');
+}
+</code></pre>
+          <h3 id="-iconfont-">第二步:定义使用 iconfont 的样式</h3>
+<pre><code class="language-css"
+>.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+</code></pre>
+          <h3 id="-">第三步:挑选相应图标并获取字体编码,应用于页面</h3>
+<pre>
+<code class="language-html"
+>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
+</code></pre>
+          <blockquote>
+            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。</p>
+          </blockquote>
+          </div>
+      </div>
+      <div class="content font-class">
+        <ul class="icon_lists dib-box">
+          
+          <li class="dib">
+            <span class="icon iconfont icon-yuandian"></span>
+            <div class="name">
+              圆点
+            </div>
+            <div class="code-name">.icon-yuandian
+            </div>
+          </li>
+          
+        </ul>
+        <div class="article markdown">
+        <h2 id="font-class-">font-class 引用</h2>
+        <hr>
+
+        <p>font-class 是 Unicode 使用方式的一种变种,主要是解决 Unicode 书写不直观,语意不明确的问题。</p>
+        <p>与 Unicode 使用方式相比,具有如下特点:</p>
+        <ul>
+          <li>兼容性良好,支持 IE8+,及所有现代浏览器。</li>
+          <li>相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。</li>
+          <li>因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用。</li>
+          <li>不过因为本质上还是使用的字体,所以多色图标还是不支持的。</li>
+        </ul>
+        <p>使用步骤如下:</p>
+        <h3 id="-fontclass-">第一步:引入项目下面生成的 fontclass 代码:</h3>
+<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
+</code></pre>
+        <h3 id="-">第二步:挑选相应图标并获取类名,应用于页面:</h3>
+<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
+</code></pre>
+        <blockquote>
+          <p>"
+            iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。</p>
+        </blockquote>
+      </div>
+      </div>
+      <div class="content symbol">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-yuandian"></use>
+                </svg>
+                <div class="name">圆点</div>
+                <div class="code-name">#icon-yuandian</div>
+            </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="symbol-">Symbol 引用</h2>
+          <hr>
+
+          <p>这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
+            这种用法其实是做了一个 SVG 的集合,与另外两种相比具有如下特点:</p>
+          <ul>
+            <li>支持多色图标了,不再受单色限制。</li>
+            <li>通过一些技巧,支持像字体那样,通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
+            <li>兼容性较差,支持 IE9+,及现代浏览器。</li>
+            <li>浏览器渲染 SVG 的性能一般,还不如 png。</li>
+          </ul>
+          <p>使用步骤如下:</p>
+          <h3 id="-symbol-">第一步:引入项目下面生成的 symbol 代码:</h3>
+<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
+</code></pre>
+          <h3 id="-css-">第二步:加入通用 CSS 代码(引入一次就行):</h3>
+<pre><code class="language-html">&lt;style&gt;
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+&lt;/style&gt;
+</code></pre>
+          <h3 id="-">第三步:挑选相应图标并获取类名,应用于页面:</h3>
+<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
+  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
+&lt;/svg&gt;
+</code></pre>
+          </div>
+      </div>
+
+    </div>
+  </div>
+  <script>
+  $(document).ready(function () {
+      $('.tab-container .content:first').show()
+
+      $('#tabs li').click(function (e) {
+        var tabContent = $('.tab-container .content')
+        var index = $(this).index()
+
+        if ($(this).hasClass('active')) {
+          return
+        } else {
+          $('#tabs li').removeClass('active')
+          $(this).addClass('active')
+
+          tabContent.hide().eq(index).fadeIn()
+        }
+      })
+    })
+  </script>
+</body>
+</html>

Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 21 - 0
fontsize/iconfont.css


BIN
fontsize/iconfont.eot


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 1 - 0
fontsize/iconfont.js


+ 16 - 0
fontsize/iconfont.json

@@ -0,0 +1,16 @@
+{
+  "id": "",
+  "name": "",
+  "font_family": "iconfont",
+  "css_prefix_text": "icon-",
+  "description": "",
+  "glyphs": [
+    {
+      "icon_id": "839002",
+      "name": "圆点",
+      "font_class": "yuandian",
+      "unicode": "e630",
+      "unicode_decimal": 58928
+    }
+  ]
+}

+ 29 - 0
fontsize/iconfont.svg

@@ -0,0 +1,29 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<!--
+2013-9-30: Created.
+-->
+<svg>
+<metadata>
+Created by iconfont
+</metadata>
+<defs>
+
+<font id="iconfont" horiz-adv-x="1024" >
+  <font-face
+    font-family="iconfont"
+    font-weight="500"
+    font-stretch="normal"
+    units-per-em="1024"
+    ascent="896"
+    descent="-128"
+  />
+    <missing-glyph />
+    
+    <glyph glyph-name="yuandian" unicode="&#58928;" d="M593.180416 401.092283c0-28.253484-22.89443-51.16531-51.158147-51.16531-28.260647 0-51.172473 22.911826-51.172473 51.16531 0 28.269857 22.911826 51.16531 51.172473 51.16531C570.285986 452.257593 593.180416 429.36214 593.180416 401.092283z"  horiz-adv-x="1024" />
+
+    
+
+
+  </font>
+</defs></svg>

BIN
fontsize/iconfont.ttf


BIN
fontsize/iconfont.woff


BIN
fontsize/iconfont.woff2


BIN
images/icon.png


BIN
img/1.png


BIN
img/111.png


BIN
img/2.jpg


BIN
img/222.png


BIN
img/333.png


BIN
img/case-banner.png


BIN
img/case_bg.png


BIN
img/close.jpg


BIN
img/company.jpg


BIN
img/core1.png


BIN
img/core2.png


BIN
img/core3.png


BIN
img/core4.png


BIN
img/icon/gmv低.png


BIN
img/icon/roi低.png


BIN
img/icon/不专业.png


BIN
img/icon/数码.png


BIN
img/icon/无流量.png


BIN
img/icon/服饰.png


BIN
img/icon/母婴.png


BIN
img/icon/珠宝.png


BIN
img/icon/生活用品.png


BIN
img/icon/美妆.png


BIN
img/icon/食品.png


BIN
img/information.png


BIN
img/left.png


BIN
img/logo.png


BIN
img/logo1.png


BIN
img/map.png


BIN
img/partner1.png


BIN
img/partner10.png


BIN
img/partner11.png


BIN
img/partner12.png


BIN
img/partner13.png


BIN
img/partner14.png


BIN
img/partner2.png


BIN
img/partner3.png


BIN
img/partner4.png


BIN
img/partner5.png


BIN
img/partner6.png


BIN
img/partner7.png


BIN
img/partner8.png


BIN
img/partner9.png


BIN
img/right.png


BIN
img/teamimg.png


BIN
img/专注.png


BIN
img/价值观.png


BIN
img/使命.jpg


BIN
img/使命.png


BIN
img/历史.png


BIN
img/图层.png


BIN
img/地址.png


BIN
img/增值1.png


BIN
img/增值2.png


BIN
img/增值3.png


BIN
img/增值4.png


BIN
img/愿景.png


BIN
img/核心img.png


BIN
img/珠宝.png


BIN
img/电话.png


BIN
img/痛点.png


BIN
img/直投.png


BIN
img/直播.png


BIN
img/美妆.png


BIN
img/行业.png


BIN
img/食品.png


+ 592 - 0
index.html

@@ -0,0 +1,592 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" />
+    <title>北京五六七广告有限公司</title>
+
+    <meta name="title" content="北京五六七广告有限公司">
+    <meta name="keywords" content="信息流广告 互联网广告 广告服务商 KOL代理 短视频服务商 代播 直播引流  直播带货 直播服务商">
+    <meta name="description" content="打通效果和KOL结合的代理商,短视频整合服务商,直播+引流一站式服务商,客户集中在电商、网服、金融、教育、游戏等领域">
+    <link rel="shortcut icon" href="./images/icon.png" type="image/x-icon">
+    <link rel="stylesheet" href="./css/reset.css">
+    <link rel="stylesheet" href="./fontsize/iconfont.css">
+    <link rel="stylesheet" href="./css/swiper.min.css">
+    <!-- <link rel="stylesheet"  href="./css/indexPC.css" > -->
+    <link rel="stylesheet" media="screen and (max-width:1024px)" href="./css/index.css">
+    <link rel="stylesheet" media="screen and (min-width:1025px) " href="./css/indexPC.css">
+    <style>
+        .hover-a:hover {
+            color: #00A0E9;
+            transition: all .5s;
+        }
+
+        #close-box,
+        #menu {
+            transition: all .5s;
+        }
+
+        .bottom-border-a {
+            border-bottom: 5px solid black;
+        }
+
+        a {
+            transition: color .5s;
+        }
+    </style>
+    <script>
+
+    </script>
+</head>
+
+<body>
+    <div class="container">
+        <div class="background-image-all background-image-all-index">
+            <div class="swiper-container">
+                <div class="swiper-wrapper">
+                    <div class="swiper-slide">
+                        <div class="main">
+                            <h2 class="banner-title">专注直播投流</h2>
+                            <p class="banner-title-content">
+                                all in实体经济数字化转型
+                            </p>
+                        </div>
+
+                        <img src="./img/1.png" alt="" srcset="" class="banner-img">
+                    </div>
+                    <div class="swiper-slide">
+                        <div class="main">
+                            <h2 class="banner-title">专注直播投流</h2>
+                            <p class="banner-title-content">
+                                all in实体经济数字化转型
+                            </p>
+                        </div>
+                        <img src="./img/2.jpg" alt="" srcset="" class="banner-img">
+                    </div>
+                </div>
+            </div>
+            <div class="main pc-class" style="position: absolute;top: 0;z-index: 10">
+                <div class="header"
+                    style="width: 100%;
+                height: 80px;margin-top: 0.2rem;box-sizing: border-box;display: flex;justify-content: space-between;align-items: center;">
+                    <div>
+                        <img src="./img/logo1.png" alt="" style="font-size: 16px;" id="logo">
+                    </div>
+                    <div style="width: 80%;display: flex;justify-content: space-around;" id="show">
+                        <a href="./index.html" style="  line-height: 60px;height:60px;box-sizing: border-box;">首页</a>
+                        <a href="./showWork.html"
+                            style="  line-height: 60px;height:60px;box-sizing: border-box;">公司信息</a>
+                        <a href="./contactUs.html"
+                            style="  line-height: 60px;height:60px;box-sizing: border-box;">服务内容与优势</a>
+                        <a href="./example.html"
+                            style="  line-height: 60px;height:60px;box-sizing: border-box;">优秀案例</a>
+                        <a href="./index.html#footer"
+                            style="  line-height: 60px;height:60px;box-sizing: border-box;">联系我们</a>
+                    </div>
+
+                </div>
+
+            </div>
+            <div class="main phone-class" style="position: absolute;top: 0;z-index: 10">
+                <div class="header" style="width: 100%;
+            height: 80px;box-sizing: border-box;display: flex;justify-content: space-between;align-items: center;">
+                    <div>
+                        <img src="./img/logo1.png" alt="" style="font-size: 16px;height: 20px;">
+                    </div>
+                    <div id="show">
+                        <div id="show-menu" style="position: relative;top: -5px;">
+                            <i style="display: block;width: 0.4rem;height: 2px;background-color: white;"></i>
+                            <i
+                                style="display: block;width: 0.4rem;height: 2px;background-color: white;margin: 0.1rem 0;"></i>
+                            <i style="display: block;width: 0.4rem;height: 2px;background-color: white;"></i>
+                        </div>
+                        <!-- <a href="./index.html"
+                            style="border-bottom:5px solid black;    line-height: 60px;height:60px;box-sizing: border-box;">首页</a>
+                        <a href="./showWork.html"
+                            style="border-bottom:5px solid black;    line-height: 60px;height:60px;box-sizing: border-box;">公司信息</a>
+                        <a href="./contactUs.html"
+                            style="border-bottom:5px solid black;    line-height: 60px;height:60px;box-sizing: border-box;">服务内容与优势</a>
+                        <a href="./example.html"
+                            style="border-bottom:5px solid black;    line-height: 60px;height:60px;box-sizing: border-box;">优秀案例</a>
+                        <a href="./contactUs.html"
+                            style="border-bottom:5px solid black;    line-height: 60px;height:60px;box-sizing: border-box;">联系我们</a> -->
+                    </div>
+
+                </div>
+            </div>
+        </div>
+        <div style="width: 100%;height: 100vh;background: rgba(0, 0, 0, 0.7);position: fixed;top: 0;z-index: 100;visibility:hidden;"
+            id="close-box">
+            <div style="width: 60%;height: 100vh;background: rgb(246, 246, 246);position: absolute;right: -60%;"
+                id="menu">
+                <!-- <div><img src="./img/close.jpg" id="close" alt=""
+                        style="width: 0.8rem;position: absolute;left: 0.2rem;top: 0.2rem;"></div> -->
+                <div style="display: flex;flex-direction: column;margin-top: 1rem;text-align: left;padding: 0 0.4rem 0;"
+                    class="hover-a">
+                    <a href="./index.html"
+                        style="color:black !important;line-height: 60px;height:60px;box-sizing: border-box;">首页</a>
+                    <a href="./showWork.html"
+                        style="color:black !important;line-height: 60px;height:60px;box-sizing: border-box;">公司信息</a>
+                    <a href="./contactUs.html"
+                        style="color:black !important;line-height: 60px;height:60px;box-sizing: border-box;">服务内容与优势</a>
+                    <a href="./example.html"
+                        style="color:black !important;line-height: 60px;height:60px;box-sizing: border-box;">优秀案例</a>
+                    <a href="./contactUs.html"
+                        style="color:black !important;line-height: 60px;height:60px;box-sizing: border-box;">联系我们</a>
+                </div>
+            </div>
+        </div>
+        <div id="hide-all"
+            style="background-color: white;width: 100%;
+    box-sizing: border-box;transition:all .5s;overflow: hidden;display: flex;justify-content: space-between;position: absolute;top: 0;z-index: 1;">
+            <div>
+
+            </div>
+            <div style="display: flex;justify-content:space-between;" id="show-all" class=" main">
+                <div>
+
+                </div>
+                <div style="width: 80%;display:flex;justify-content: space-around;" id="show-small">
+                    <div style="height: 0;overflow: hidden;color: white;">
+                        首页
+                    </div>
+                    <div style="height: 0;overflow: hidden;color: white;">
+                        公司信息
+                    </div>
+                    <div style="height: 0;overflow: hidden;color: white;">
+                        服务内容与优势
+
+                    </div>
+                    <div style="height: 0;overflow: hidden;color: white;">优秀案例</div>
+                    <div style="height: 0;overflow: hidden;color: white;">连西我们</div>
+                </div>
+
+            </div>
+        </div>
+        <div class="main main-content">
+            <!-- banner 视频区 -->
+            <div class="banner">
+
+                <div class="banner-box">
+                    <img src="./img/核心img.png" alt="" style="width: 100%;">
+                    <div class="main-content-title">
+                        <div class="main-content-title-border">
+                            核心能力
+                        </div>
+                    </div>
+                    <div class="main-content-core">
+                        <div class="core-box">
+                            <div class="core-ball">
+                                <img src="./img/core1.png" alt="" style="position: absolute;
+                                width: 50%;
+                                height: 50%;
+                                top: 50%;
+                                left: 50%;
+                                margin-left: -25%;
+                                margin-top: -25%;">
+                            </div>
+                            <h5>高效投流</h5>
+                            <p>直播间获取流量的关键因素</p>
+                        </div>
+                        <div class="core-box">
+                            <div class="core-ball">
+                                <img src="./img/core2.png" alt="" style="position: absolute;
+                                 width: 50%;
+                                height: 50%;
+                                top: 50%;
+                                left: 50%;
+                                margin-left: -25%;
+                                margin-top: -25%;">
+                            </div>
+                            <h5>经验丰富</h5>
+                            <p>聚焦头部流量,丰富品牌服务经验</p>
+                        </div>
+                        <div class="core-box">
+                            <div class="core-ball">
+                                <img src="./img/core3.png" alt="" style="position: absolute;
+                                 width: 50%;
+                                height: 50%;
+                                top: 50%;
+                                left: 50%;
+                                margin-left: -25%;
+                                margin-top: -25%;">
+                            </div>
+                            <h5>专业指导</h5>
+                            <p>专业主播,直播指导服务</p>
+                        </div>
+                        <div class="core-box">
+                            <div class="core-ball">
+                                <img src="./img/core4.png" alt="" style="position: absolute;
+                                 width: 50%;
+                                height: 50%;
+                                top: 50%;
+                                left: 50%;
+                                margin-left: -25%;
+                                margin-top: -25%;">
+                            </div>
+                            <h5>增值服务</h5>
+                            <p>短视频广告制作,爆量率40%+</p>
+                        </div>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+        <div class="background-image-all excellent-cases">
+            <img src="./img/case-banner.png" alt="" class="case-bg-img">
+            <div class="main" style="position: absolute;top: 0;z-index: 10;height: 100%;">
+                <div class="case-title">
+                    优秀案例</div>
+
+                <div class="case-box">
+                    <div class="case-one-box" style="height:70%">
+                        <div class="left-box-title left-box-title-active">
+                            <p class="left-box-title-big">美妆类直播案例</p>
+                            <p class="left-box-title-small">配合达人直播间活动放量,8月13日直播间投流峰值消耗150W</p>
+                            <p class="left-box-title-small-show">直播间投流峰值消耗150W</p>
+                        </div>
+                        <div class="left-box-title">
+                            <p class="left-box-title-big">珠宝类优秀案例</p>
+                            <p class="left-box-title-small">翡翠玉石类目:全场GMV:269.8w 直播间转化率:0.53%</p>
+                            <p class="left-box-title-small-show">直播间转化率:0.53%</p>
+                        </div>
+                        <div class="left-box-title">
+                            <p class="left-box-title-big">食品场优秀案例</p>
+                            <p class="left-box-title-small">当场GMV:1000.2W,带货转化率:2.03%,GPM:1066</p>
+                            <p class="left-box-title-small-show">带货转化率:2.03%</p>
+                        </div>
+                    </div>
+                    <div class="case-one-box-right">
+                        <div style="position: relative;width: 100%;height: 100%;top: 0.6rem;">
+                            <div style="position: absolute;z-index: 10;top: -0.3rem;">
+                                <img src="./img/美妆.png" alt="" style="width: 100%;" id="img-right">
+                            </div>
+                            <!-- <div class="phone-none">
+                                <div
+                                    style="width: 1.87rem;height: 3.7rem;background-color: #00AEFF;position: absolute;top: -0.6rem;right: 0;">
+                                </div>
+                                <div
+                                    style="width: 3.5rem;height: 2.21rem;background-color: #F8F8F8;position: absolute; bottom: 1.6rem;left: 0;">
+                                </div>
+                                <div
+                                    style="width: 2.87rem;height: 0.47rem;background-color: #C3C3C3;position: absolute;right: 0;bottom:2.5rem;">
+                                </div>
+                            </div> -->
+
+                        </div>
+
+
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="main">
+            <!-- banner 视频区 -->
+            <div class="banner">
+
+                <div class="banner-box" style="padding-top: 0.78rem;background-color: #f2f2f2;">
+                    <div class="main-content-title" style="position: static;">
+                        <div class="main-content-title-border">
+                            历史荣耀
+                        </div>
+                    </div>
+                    <div class="main-content-core time-horizontal-content">
+                        <ul class="time-horizontal">
+                            <li style="left:0"><b></b>接入投流服务,服务上百个广告主<span class="one"></span></li>
+                            <li><b></b>累计给广告主带来百亿营收<span class="two"></span></li>
+                            <li style="right:0;"><b></b>团队壮大目标破千亿营收<span class="three"></span></li>
+                        </ul>
+
+                    </div>
+                </div>
+
+            </div>
+        </div>
+        <div class="background-image-all excellent-cases">
+            <img src="./img/map.png" alt="" class="case-bg-img partner-bg-img">
+            <div class="main" style="position: absolute;top: 0;z-index: 10;height: 100%;padding-top: 0.35rem;">
+                <div class="main-content-title" style="position: static;border-bottom: 0;">
+                    <div class="main-content-title-border">
+                        我们的合作伙伴
+                    </div>
+                </div>
+                <div class="partner1-main">
+                    <div class="img-yuan">
+                        <img src="./img/partner1.png" alt="">
+                    </div>
+                    <div class="img-yuan">
+                        <img src="./img/partner2.png" alt="">
+                    </div>
+                    <div class="img-yuan">
+                        <img src="./img/partner3.png" alt="">
+                    </div>
+                    <div class="img-yuan">
+                        <img src="./img/partner4.png" alt="">
+                    </div>
+                </div>
+                <div class="partner2-main">
+                    <div class="img-yuan">
+                        <img src="./img/partner5.png" alt="">
+                    </div>
+                    <div class="img-yuan">
+                        <img src="./img/partner6.png" alt="">
+                    </div>
+                    <div class="img-yuan">
+                        <img src="./img/partner7.png" alt="">
+                    </div>
+                    <div class="img-yuan">
+                        <img src="./img/partner8.png" alt="">
+                    </div>
+                    <div class="img-yuan">
+                        <img src="./img/partner9.png" alt="">
+                    </div>
+                    <div class="img-yuan">
+                        <img src="./img/partner10.png" alt="">
+                    </div>
+                </div>
+                <div class="partner3-main">
+                    <div class="img-yuan">
+                        <img src="./img/partner11.png" alt="">
+                    </div>
+                    <div class="img-yuan">
+                        <img src="./img/partner12.png" alt="">
+                    </div>
+                    <div class="img-yuan">
+                        <img src="./img/partner13.png" alt="">
+                    </div>
+                    <div class="img-yuan">
+                        <img src="./img/partner14.png" alt="">
+                    </div>
+                </div>
+            </div>
+
+        </div>
+        <div class='footer' id="footer">
+
+            <div class="title">
+                <div class="main-content-title"
+                    style="position: static;justify-content: start;border-color: #f2f2f2;font-size: 0.2rem;font-weight: bold;">
+                    <div style="color: white;margin-bottom: 0.1rem;">
+                        联系我们
+                    </div>
+                </div>
+            </div>
+            <div style="width: 100%;display: flex;margin-bottom: 0.5rem;">
+                <div style="width: 50%;height: 100%;line-height: 0.5rem;">
+                    <p style="font-size: 0.3rem;color: white;text-align: left;    margin-bottom: 0.2rem;">北京总部</p>
+                    <p style="font-size: 0.18rem;color: white;text-align: left;line-height: 0.3rem;">
+                        <img src="./img/地址.png" alt="" style="width: 0.2rem;margin-right: 0.1rem;    position: relative;
+                        top: 0.03rem;">
+                        北京市朝阳区酒仙桥东风北桥宝信行东风kaso 3楼308
+                    </p>
+                    <p style="font-size: 0.18rem;color: white;text-align: left;">
+                        <img src="./img/电话.png" alt="" style="width: 0.2rem;margin-right: 0.1rem;">
+                        13811821639
+                    </p>
+                    <p style="font-size: 0.18rem;color: white;text-align: left;position: relative;top: -0.12rem;">
+                        <span style="width: 0.2rem;margin-right: 0.1rem;">✉</span>
+                        wuliuqi@567c-top.cn
+                    </p>
+
+
+
+                </div>
+                <div style="width: 50%;height: 100%;">
+                    <div id="myMap" ControlAnchor='BMAP_ANCHOR_TOP_LEFT' style="    width: 100%;
+                    height:2.5rem;">
+
+                    </div>
+                </div>
+            </div>
+            <div style="display: flex;flex-wrap: wrap;">
+                <div style="width: 35%;padding-bottom: 0.2rem;line-height: 0.3rem;margin-right: 0.3rem;">
+                    <p style="font-size: 0.2rem;color: white;text-align: left;margin-bottom: 0.2rem;">石家庄分公司</p>
+                    <p style="font-size: 0.15rem;color: white;text-align: left;">
+                        <img src="./img/地址.png" alt="" style="width: 0.15rem;margin-right: 0.1rem;    position: relative;
+                        top: 0.03rem;">
+                        石家庄市长安区广安大街86 号财富大厦裙楼4B1 房间
+                    </p>
+                </div>
+                <div style="width:30%;padding-bottom: 0.2rem;line-height: 0.3rem;">
+                    <p style="font-size: 0.2rem;color: white;text-align: left;margin-bottom: 0.2rem;">杭州分公司</p>
+                    <p style="font-size: 0.15rem;color: white;text-align: left;">
+                        <img src="./img/地址.png" alt="" style="width: 0.15rem;margin-right: 0.1rem;    position: relative;
+                        top: 0.03rem;">
+                        杭州市西湖区蒋村商务中心B1座318室
+                    </p>
+                </div>
+                <div style="width:  30%;padding-bottom: 0.2rem;line-height: 0.3rem;">
+                    <p style="font-size: 0.2rem;color: white;text-align: left;margin-bottom: 0.2rem;">上海分公司</p>
+                    <p style="font-size: 0.15rem;color: white;text-align: left;">
+                        <img src="./img/地址.png" alt="" style="width: 0.15rem;margin-right: 0.1rem;    position: relative;
+                        top: 0.03rem;">
+                        上海市静安区康定路359号1楼
+                    </p>
+                </div>
+            </div>
+            <div>
+                <a href="https://beian.miit.gov.cn/" target="_block">
+                    京ICP备18045244号-1
+                </a>
+            </div>
+        </div>
+        <a class="aside" href="#">
+            <img src="./images/goTop.png" alt="">
+        </a>
+    </div>
+    <script src="./js/jquery.min.js"></script>
+    <script src="./js/phone.js"></script>
+    <script src="./js/swiper.min.js"></script>
+    <script src="./js/index.js"></script>
+    <script type="text/javascript"
+        src="http://api.map.baidu.com/api?v=3.0&ak=QNWNbHbcOSEyeOlyc1GT2DLFdRDRd4yv"></script>
+    <script src="./js/contactUs.js"></script>
+    <script>
+        // console.log(1)
+        var mySwiper = new Swiper('.swiper-container', {
+            autoplay: true,//可选选项,自动滑动
+            disableOnInteraction: true,
+            loop: true,
+        })
+        let caseTitle = document.getElementsByClassName('left-box-title')
+        $('.left-box-title').on('click', function () {
+            $(this).addClass('left-box-title-active')
+            $(this).siblings().removeClass('left-box-title-active')
+            // $('#img-right').addClass('active-hide')
+            if ($(this).index() == 0) {
+                $('#img-right').attr('src', './img/美妆.png')
+            } else if ($(this).index() == 1) {
+                $('#img-right').attr('src', './img/珠宝.png')
+            } else if ($(this).index() == 2) {
+                $('#img-right').attr('src', './img/食品.png')
+            }
+
+        })
+
+        $('#show-menu').on('click', function () {
+            $('#close-box').css({
+                visibility: "visible"
+            })
+            $('#menu').css({ right: 0 })
+        })
+        $('#close-box').on('click', function () {
+            $('#menu').css({ right: '-60%' })
+            setTimeout(() => {
+                $('#close-box').css({
+                    visibility: "hidden"
+                })
+            }, 200)
+
+        })
+
+
+
+        var box = document.getElementById('hide-all');
+        var showBox = document.getElementById('show')
+        var timer = null;
+        $('#show a').on('mouseover', function (e) {
+            // if (timer) clearTimeout(timer)
+
+            $(this).addClass('bottom-border-a')
+            $(this).siblings().removeClass('bottom-border-a')
+            if ($(this).index() == 0) {
+                box.style.height = '0';
+                box.style.padding = '0';
+                $('#logo').attr('src', './img/logo1.png')
+                $(this).removeClass('a-color')
+                $(this).siblings().removeClass('a-color')
+                $("#show-small div").eq($(this).index()).siblings().css({
+                    height: "0"
+                })
+            } else if ($(this).index() == 1) {
+                box.style.height = '350px';
+                $(this).addClass('a-color')
+                $(this).siblings().addClass('a-color')
+                $('#logo').attr('src', './img/logo.png')
+                // box.style.padding = '0.2rem 0';
+                $("#show-small div").eq($(this).index()).css({
+                    height: "300px"
+                })
+                $("#show-small div").eq($(this).index()).html(`
+                <a style="color:#000000;display:block;margin:105px  0 0.2rem 0" href="./showWork.html#culture">企业文化</a>
+                <a style="color:#000000;display:block;margin:0.2rem 0" href="./showWork.html#team" >团队成员</a>
+                <a style="color:#000000;display:block;margin:0.2rem 0" href="./showWork.html#history">历史荣耀</a>公司信息`)
+                $("#show-small div").eq($(this).index()).siblings().css({
+                    height: "0"
+                })
+                // $("#show-small div").eq($(this).index()).siblings().empty("p")
+            } else if ($(this).index() == 2) {
+                $(this).addClass('a-color')
+                $(this).siblings().addClass('a-color')
+                box.style.height = '350px';
+                $('#logo').attr('src', './img/logo.png')
+                // box.style.padding = '0.2rem 0';
+                $("#show-small div").eq($(this).index()).css({
+                    height: "300px"
+                })
+                $("#show-small div").eq($(this).index()).html(`
+                <a style="color:#000000;display:block;margin:105px 0 0.2rem 0" href="./contactUs.html#painPoint">投放痛点分析</a>
+                <a style="color:#000000;display:block;margin:0.2rem 0" href="./contactUs.html#experience" >经验丰富</a>
+                <a style="color:#000000;display:block;margin:0.2rem 0" href="./contactUs.html#efficient">人群精准触达</a>
+                <a style="color:#000000;display:block;margin:0.2rem 0" href="./contactUs.html#industry">行业运营服务</a>
+                <a style="color:#000000;display:block;margin:0.2rem 0" href="./contactUs.html#increment">增值服务</a>服务内容与优势`)
+                $("#show-small div").eq($(this).index()).siblings().css({
+                    height: "0"
+                })
+                // $("#show-small div").eq($(this).index()).siblings().empty("p")
+            } else if ($(this).index() == 3) {
+                box.style.height = '0';
+                box.style.padding = '0';
+                $('#logo').attr('src', './img/logo1.png')
+                $(this).removeClass('a-color')
+                $(this).siblings().removeClass('a-color')
+                $("#show-small div").eq($(this).index()).siblings().css({
+                    height: "0"
+                })
+                // $("#show-small div").eq($(this).index()).siblings().empty("p")
+            } else if ($(this).index() == 4) {
+                box.style.height = '0';
+                box.style.padding = '0';
+                $('#logo').attr('src', './img/logo1.png')
+                $(this).removeClass('a-color')
+                $(this).siblings().removeClass('a-color')
+                $("#show-small div").eq($(this).index()).siblings().css({
+                    height: "0"
+                })
+
+            }
+            e.stopPropagation();
+        })
+        $('#show a').on('mouseout', function () {
+
+            $(this).removeClass('bottom-border-a')
+            $('#show a').removeClass('a-color')
+        })
+        $("#show-small div").on('mouseover', function () {
+
+            $('#logo').attr('src', './img/logo.png')
+        })
+        showBox.onmouseover = function () {
+
+        }
+        box.onmouseover = function () {
+            box.style.height = '350px';
+            $('#show a').addClass('a-color')
+        }
+        showBox.onmouseout = function () {
+            $('#show a').removeClass('bottom-border-a')
+            $('#show a').removeClass('a-color')
+        }
+        box.onmouseout = function () {
+            box.style.height = '0';
+            box.style.padding = '0';
+            $('#logo').attr('src', './img/logo1.png')
+            $('#show a').removeClass('bottom-border-a')
+            $('#show a').removeClass('a-color')
+        }
+    </script>
+</body>
+
+</html>

+ 24 - 0
js/contactUs.js

@@ -0,0 +1,24 @@
+var map = new BMap.Map("myMap");
+// var city = '北京市朝阳区酒仙桥东风北桥宝马宝信行3楼308';
+var point = new BMap.Point(116.4892292493515,39.95825805698395);
+map.centerAndZoom(point, 15); 
+map.enableScrollWheelZoom(true);//滚轮缩放
+map.addControl(new BMap.NavigationControl());    
+map.addControl(new BMap.ScaleControl());    
+map.addControl(new BMap.OverviewMapControl());    
+map.addControl(new BMap.MapTypeControl());    
+map.setCurrentCity("北京"); // 仅当设置城市信息时,MapTypeControl的切换功能才能可用   
+map.enableKeyboard();//键盘操作
+// map.setDefaultCursor(cursor: 'point')
+var myGeo = new BMap.Geocoder();
+	// 将地址解析结果显示在地图上,并调整地图视野
+	myGeo.getPoint("北京市宝信行汽车销售服务有限公司", function(point){
+		if (point) {
+			map.centerAndZoom(point, 16);
+            map.addOverlay(new BMap.Marker(point));
+            // console.log(1)
+		}else{
+			alert("您选择地址没有解析到结果!");
+		}
+	}, "北京市");
+	

Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 234 - 0
js/index.js


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 5 - 0
js/jquery.min.js


+ 18 - 0
js/phone.js

@@ -0,0 +1,18 @@
+(function (doc, win) {
+    var docEl = doc.documentElement,
+        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
+        recalc = function () {
+            var clientWidth = docEl.clientWidth;
+            if (!clientWidth) return;
+            if (clientWidth >= 750) {
+                docEl.style.fontSize = '100px';
+            } else {
+                //html根元素大小   100设计稿的html大小 
+                docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
+            }
+        };
+
+    if (!doc.addEventListener) return;
+    win.addEventListener(resizeEvt, recalc, false);
+    doc.addEventListener('DOMContentLoaded', recalc, false);
+})(document, window);

+ 17 - 0
js/rem.js

@@ -0,0 +1,17 @@
+(function(doc, win) {
+    var docEl = doc.documentElement,
+        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
+        recalc = function() {
+            var clientWidth = docEl.clientWidth;
+            if(!clientWidth) return;
+            //          docEl.style.fontSize = 100 * (clientWidth / 360) + 'px';
+            if(clientWidth >= 600) {
+                docEl.style.fontSize = '350px';
+            } else {
+                docEl.style.fontSize = 100 * (clientWidth / 360) + 'px';
+            }
+        };
+    if(!doc.addEventListener) return;
+    win.addEventListener(resizeEvt, recalc, false);
+    doc.addEventListener('DOMContentLoaded', recalc, false);
+})(document, window);

+ 140 - 0
js/showWork.js

@@ -0,0 +1,140 @@
+
+var goTop=document.querySelector('.aside');
+var left=document.querySelector('.left')
+var right=document.querySelector('.right')
+
+var pageOne=document.querySelector('.firstPage')
+var pageSecond=document.querySelector('.nextPage')
+
+var videolist = document.querySelectorAll('.video');
+var playControl=document.querySelectorAll('.play')
+
+var pageNo=1;
+
+var imgArr=['./images/01.png','./images/04.png','./images/02.png','./images/03.png'];
+console.log(pageOne)
+left.onclick=function(){
+    if(pageNo>1){
+        pageNo--;
+        console.log(pageNo)
+        left.src=imgArr[0]
+        right.src=imgArr[1]
+        pageOne.style.display='block'
+        pageSecond.style.display='none'
+    }
+}
+right.onclick=function(){
+    if(pageNo<2){
+        pageNo++;
+        console.log(pageNo)
+        left.src=imgArr[3]
+        right.src=imgArr[2]
+        pageOne.style.display='none'
+        pageSecond.style.display='block'
+    }
+}
+
+
+// 给play事件绑定暂停函数
+;[].forEach.call(videolist, function(i){
+    i.addEventListener('play', pauseAll.bind(i))
+    // console.log(isIE())
+    if(isIE()){
+        
+        for (var a=0;a<playControl.length;a++){                                
+            // console.log(playControl[a]) 
+            playControl[a].style.opacity=1
+            
+        }
+        // playControl[i].style.opacity=0  
+    }else{
+        
+        playControl.forEach(function(item,index){
+            if(i==index){
+                item.style.opacity=0
+            }
+            else {          
+                item.style.opacity=1
+            }
+        })
+    }  
+
+});
+
+
+if(isIE()){
+    for (var n=0;n<playControl.length;n++){
+       (function(n){
+        playControl[n].onclick=function(){
+            for (var x=0;x<playControl.length;x++){
+                playControl[x].style.opacity=1
+            }
+            
+            if (videolist[n].paused) {
+                videolist[n].play();
+                playControl[n].style.opacity=0
+               
+            } else {
+                videolist[n].pause();
+                
+                playControl[n].style.opacity=1
+            }
+        }})(n)
+    }
+    
+}else{
+    playControl.forEach(function(item,index){
+    
+        item.onclick=function(){
+           
+            playControl.forEach(function(item,index){
+                item.style.opacity=1
+            })
+            if (videolist[index].paused) {
+                videolist[index].play();
+                item.style.opacity=0
+               
+            } else {
+                videolist[index].pause();
+                
+                item.style.opacity=1
+            }
+        }
+    })
+    
+}
+
+function isIE() {
+    if(!!window.ActiveXObject || "ActiveXObject" in window){
+      return true;
+    }else{
+      return false;
+  }
+}
+function pauseAll() {
+    var self = this;
+    ;[].forEach.call(videolist, function(i) {
+        // 将 videos 中其他的 video 全部暂停
+        i !== self && i.pause();
+
+        // i !== self && i.load();
+    });
+   
+};
+
+window.onload = function () {
+    
+   
+    window.onscroll = function () {
+        
+        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+
+        // 判断是否出现返回顶部
+        if(scrollTop>50){
+            goTop.classList.add('show')
+        }else{
+            goTop.classList.remove('show')
+        }
+    }
+   
+}

Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 14 - 0
js/swiper.min.js


+ 608 - 0
showWork.html

@@ -0,0 +1,608 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" />
+    <title>北京五六七广告有限公司</title>
+
+    <meta name="title" content="北京五六七广告有限公司">
+    <meta name="keywords" content="信息流广告 互联网广告 广告服务商 KOL代理 短视频服务商 代播 直播引流  直播带货 直播服务商">
+    <meta name="description" content="打通效果和KOL结合的代理商,短视频整合服务商,直播+引流一站式服务商,客户集中在电商、网服、金融、教育、游戏等领域">
+    <link rel="shortcut icon" href="./images/icon.png" type="image/x-icon">
+    <link rel="stylesheet" href="./css/reset.css">
+    <link rel="stylesheet" href="./fontsize/iconfont.css">
+    <link rel="stylesheet" href="./css/swiper.min.css">
+    <!-- <link rel="stylesheet"  href="./css/indexPC.css" > -->
+    <link rel="stylesheet" media="screen and (max-width:1024px)" href="./css/index.css">
+    <link rel="stylesheet" media="screen and (min-width:1025px) " href="./css/indexPC.css">
+    <link rel="stylesheet" media="screen and (max-width:1024px)" href="./css/showWork.css">
+    <link rel="stylesheet" media="screen and (min-width:1025px) " href="./css/showWorkPC.css">
+    <style>
+        .nav ul li:hover .menu {
+            display: block !important;
+        }
+
+        .menu {
+            display: none;
+            position: absolute;
+            top: 1rem;
+            z-index: 100;
+            color: black;
+            line-height: 0.5rem;
+            font-size: 0.2rem;
+            text-align: left;
+            border: 1px solid white;
+            background: white;
+            cursor: pointer;
+        }
+
+        .menu p:hover {
+            color: #FFFFFF;
+        }
+
+        .bottom-border-a {
+            border-bottom: 5px solid black;
+        }
+    </style>
+    <style>
+        .hover-a:hover {
+            color: #00A0E9;
+            transition: all .5s;
+        }
+
+        #close-box,
+        #menu {
+            transition: all .5s;
+        }
+
+        .active-white:hover {
+            background-color: white !important;
+            transition: all .5s;
+        }
+    </style>
+</head>
+
+<body>
+
+    <div class="container">
+        <div class="background-image-all">
+            <div class="swiper-container">
+                <div class="swiper-wrapper">
+                    <div class="swiper-slide">
+
+                        <img src="./img/information.png" alt="" srcset="" class="banner-img">
+                    </div>
+                    <!-- <div class="swiper-slide">
+                        <div class="main">
+                            <h2 class="banner-title">专注抖音直播投流</h2>
+                            <p class="banner-title-content">
+                                all in实体经济数字化转型
+                            </p>
+                        </div>
+                        <img src="./img/2.jpg" alt="" srcset="" class="banner-img">
+                    </div> -->
+                </div>
+            </div>
+            <div class="main pc-class" style="position: absolute;top: 0;z-index: 10">
+                <div class="header"
+                    style="width: 100%;
+                height: 80px;margin-top: 0.2rem;box-sizing: border-box;display: flex;justify-content: space-between;align-items: center;">
+                    <div>
+                        <img src="./img/logo1.png" alt="" style="font-size: 16px;" id="logo">
+                    </div>
+                    <div style="width: 80%;display: flex;justify-content: space-around;" id="show">
+                        <a href="./index.html" style="  line-height: 60px;height:60px;box-sizing: border-box;">首页</a>
+                        <a href="./showWork.html"
+                            style="  line-height: 60px;height:60px;box-sizing: border-box;">公司信息</a>
+                        <a href="./contactUs.html"
+                            style="  line-height: 60px;height:60px;box-sizing: border-box;">服务内容与优势</a>
+                        <a href="./example.html"
+                            style="  line-height: 60px;height:60px;box-sizing: border-box;">优秀案例</a>
+                        <a href="./showWork.html#footer"
+                            style="  line-height: 60px;height:60px;box-sizing: border-box;">联系我们</a>
+                    </div>
+
+                </div>
+
+            </div>
+            <div class="main phone-class" style="position: absolute;top: 0;z-index: 10">
+                <div class="header" style="width: 100%;
+            height: 80px;box-sizing: border-box;display: flex;justify-content: space-between;align-items: center;">
+                    <div>
+                        <img src="./img/logo1.png" alt="" style="font-size: 16px;height: 20px;">
+                    </div>
+                    <div id="show">
+                        <div id="show-menu" style="position: relative;top: -5px;">
+                            <i style="display: block;width: 0.4rem;height: 2px;background-color: white;"></i>
+                            <i
+                                style="display: block;width: 0.4rem;height: 2px;background-color: white;margin: 0.1rem 0;"></i>
+                            <i style="display: block;width: 0.4rem;height: 2px;background-color: white;"></i>
+                        </div>
+                        <!-- <a href="./index.html"
+                            style="border-bottom:5px solid black;    line-height: 60px;height:60px;box-sizing: border-box;">首页</a>
+                        <a href="./showWork.html"
+                            style="border-bottom:5px solid black;    line-height: 60px;height:60px;box-sizing: border-box;">公司信息</a>
+                        <a href="./contactUs.html"
+                            style="border-bottom:5px solid black;    line-height: 60px;height:60px;box-sizing: border-box;">服务内容与优势</a>
+                        <a href="./example.html"
+                            style="border-bottom:5px solid black;    line-height: 60px;height:60px;box-sizing: border-box;">优秀案例</a>
+                        <a href="./contactUs.html"
+                            style="border-bottom:5px solid black;    line-height: 60px;height:60px;box-sizing: border-box;">联系我们</a> -->
+                    </div>
+
+                </div>
+            </div>
+        </div>
+        <div style="width: 100%;height: 100vh;background: rgba(0, 0, 0, 0.7);position: fixed;top: 0;z-index: 100;visibility:hidden;"
+            id="close-box">
+            <div style="width: 60%;height: 100vh;background: rgb(246, 246, 246);position: absolute;right: -60%;"
+                id="menu">
+                <!-- <div><img src="./img/close.jpg" id="close" alt=""
+                        style="width: 0.8rem;position: absolute;left: 0.2rem;top: 0.2rem;"></div> -->
+                <div style="display: flex;flex-direction: column;margin-top: 1rem;text-align: left;padding: 0 0.4rem 0;"
+                    class="hover-a">
+                    <a href="./index.html"
+                        style="color:black !important;line-height: 60px;height:60px;box-sizing: border-box;">首页</a>
+                    <a href="./showWork.html"
+                        style="color:black !important;line-height: 60px;height:60px;box-sizing: border-box;">公司信息</a>
+                    <a href="./contactUs.html"
+                        style="color:black !important;line-height: 60px;height:60px;box-sizing: border-box;">服务内容与优势</a>
+                    <a href="./example.html"
+                        style="color:black !important;line-height: 60px;height:60px;box-sizing: border-box;">优秀案例</a>
+                    <a href="./showWork.html#footer"
+                        style="color:black !important;line-height: 60px;height:60px;box-sizing: border-box;">联系我们</a>
+                </div>
+            </div>
+        </div>
+        <div id="hide-all"
+            style="background-color: white;width: 100%;
+    box-sizing: border-box;transition:all .5s;overflow: hidden;display: flex;justify-content: space-between;position: absolute;top: 0;z-index: 1;">
+            <div>
+
+            </div>
+            <div style="display: flex;justify-content:space-between;" id="show-all" class=" main">
+                <div>
+
+                </div>
+                <div style="width: 80%;display:flex;justify-content: space-around;" id="show-small">
+                    <div style="height: 0;overflow: hidden;color: white;">
+                        首页
+                    </div>
+                    <div style="height: 0;overflow: hidden;color: white;">
+                        公司信息
+                    </div>
+                    <div style="height: 0;overflow: hidden;color: white;">
+                        服务内容与优势
+
+                    </div>
+                    <div style="height: 0;overflow: hidden;color: white;">优秀案例</div>
+                    <div style="height: 0;overflow: hidden;color: white;">连西我们</div>
+                </div>
+
+            </div>
+        </div>
+        <div class="main main-content">
+            <!-- banner 视频区 -->
+            <!-- <div class="banner"> -->
+
+            <div class="banner-box" style="padding: 0;">
+                <!-- <div class="main-content-title">
+                        <div class="main-content-title-border">
+                            核心能力
+                        </div>
+                    </div> -->
+                <div class="information-content">
+                    <div class="information-content-left">
+                        <img src="./img/company.jpg" alt="" style="width: 100%;height: 100%;">
+                    </div>
+                    <div class="information-content-right">
+                        <div class="case-title" style="color: #010101;margin: 0;border-left-color: #010101;">
+                            关于我们</div>
+                        <div class="information-content-right-title">
+                            <p>公司成立于2016年,团队规模500+,总部位于北京,上海、广州、杭州设有分公司,
+                                我们定位为专注直播投流的服务商,致力于用服务+短视频+技术,帮助客户实现营销目标,2021年预计营收45亿。</p>
+                            <p>
+                                最早2020年5月开始接入直播投流服务,积累经验近2年,2020年抖音淘系引流服务商排名TOP1,抖音达人带货榜头部承接投放覆盖率达到80%以上头部达人直播投放经验极为丰富。
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- </div> -->
+        </div>
+
+        <div class="main main-content" id="culture">
+            <!-- banner 视频区 -->
+            <!-- <div class="banner"> -->
+
+            <div class="banner-box" style="padding-top: 1rem;background-color: #f2f2f2;position: relative;">
+                <div class="main-content-title" style="border-bottom: 0;">
+                    <div class="main-content-title-border">
+                        企业文化
+                    </div>
+                </div>
+                <div class="culture-content">
+                    <div class="culture-content-one">
+                        <div class="culture-all">
+                            <div class="share" style="border-radius: 50%;">使命</div>
+                            <img src="./img/使命.png" alt="">
+                        </div>
+                        <div class="culture-one">
+                            <p>顺应市场趋势,改变广告行业,重新定义广告。</p>
+                        </div>
+                    </div>
+                    <div class="culture-xian-left"></div>
+                    <div class="culture-content-one">
+                        <div class="culture-all">
+                            <div class="share" style="border-radius: 50%;">愿景</div>
+                            <img src="./img/愿景.png" alt="">
+                        </div>
+                        <div class="culture-one">
+                            <p>致力于成为百亿规模的,技术驱动的,赋能中国制造业数字化转型的,广告头部服务商。</p>
+                        </div>
+                    </div>
+                    <div class="culture-xian"></div>
+                    <div class="culture-content-one">
+                        <div class=" culture-all">
+                            <div class="share" style="border-radius: 50%;">价值观</div>
+                            <img src="./img/价值观.png" alt="">
+                        </div>
+                        <div class="culture-one">
+                            <p class="title">与其更好,不如不同</p>
+                            <p>中国市场5-10年一个经济周期,唯有不断的创新和自我迭代才能顺应市场。我们时刻关注市场的拐点努力抓住市场趋势。</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- </div> -->
+        </div>
+
+
+        <div class="background-image-all excellent-cases main-content">
+            <img src="./img/专注.png" alt="" class="case-bg-img history-bg-img">
+            <div class="main" style="position: absolute;top: 0.6rem;z-index: 10;height: 100%;">
+                <div class="main-content-title" style="border-color:#FFFFFF ;">
+                    <div class="main-content-title-border" style="position: static;border-bottom: 0;color: #FFFFFF;">
+                        专注所以专业
+                    </div>
+                </div>
+            </div>
+        </div>
+
+
+        <div class="main main-content" id="team">
+            <!-- banner 视频区 -->
+            <div class="banner">
+
+                <div class="banner-box" style="padding-top: 0.78rem;background-color: #f2f2f2;">
+                    <div class="main-content-title" style="border-bottom: 0;position: static;">
+                        <div class="main-content-title-border">
+                            团队成员
+                        </div>
+                    </div>
+                    <div class="main-content-core time-horizontal-content" style="    flex-direction: column;">
+                        <img src="./img/teamimg.png" alt="" style="width:100%">
+                        <div
+                            style="font-size: 0.15rem;background-color: #FFFFFF;padding: 0.2rem;min-height: 1rem;display: flex;flex-direction: column;justify-content: space-around;">
+                            <p>
+                                服务过的抖音电商带货头部达人及明星:千万粉丝量级的<span
+                                    style="font-weight:700;font-size: 0.17rem;">超过30位,500w以上</span>粉丝量级的超过80位,品牌自播直播间40+。
+                            </p>
+                            <p>
+                                累计直播引流投放金额过<span
+                                    style="font-weight:700;font-size: 0.17rem;">3亿</span>,客户对于引流效果一致好评,满意度极高。
+                            </p>
+                            <p>
+                                服务过的直播引流场次预算<span
+                                    style="font-weight:700;font-size: 0.19rem;">2w-700w</span>,无论是大预算场次还是小预算场次都给到了足够重视,认真做好每一场投流,以roi为核心目标,达到客户满意效果。
+                            </p>
+                        </div>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+        <div class="background-image-all excellent-cases  main-content" id="history">
+            <img src="./img/历史.png" alt="" class="case-bg-img history-bg-img">
+            <div class="main" style="position: absolute;top: 0.6rem;z-index: 10;height: 100%;">
+                <div class="main-content-title" style="border-color:#FFFFFF ;">
+                    <div class="main-content-title-border" style="position: static;border-bottom: 0;color: #FFFFFF;">
+                        历史荣耀
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="main  main-content">
+            <!-- banner 视频区 -->
+            <div class="banner">
+
+                <div class="banner-box" style="padding-top: 0.78rem;background-color: #f2f2f2;padding-bottom: 0;">
+                    <div class="main-content-title" style="border-bottom: 0;position: static;">
+                        <div class="main-content-title-border">
+                            2019年-2021年
+                        </div>
+                    </div>
+                    <div class="main-content-core time-horizontal-content"
+                        style="flex-direction: column;align-items: center;">
+                        <div style="width: 80%;height: 1rem;display: flex;justify-content: center;">
+                            <div style="border: 1px solid black;width: 50%;border-bottom: 0;">
+
+                            </div>
+                            <div style="border: 1px solid black;width: 50%;border-bottom: 0;">
+
+                            </div>
+                        </div>
+                        <div style="width: 100%;height: 1.2rem;display: flex;justify-content: space-between;">
+                            <div class="active-white" style="width: 30%;font-size: 0.2rem;
+                                background: #E4E4E4;
+                                box-sizing: border-box;
+                                padding: 0.2rem;
+                                display: flex;
+                                align-items: center;
+                                justify-content: center;">
+                                开始接入投流服务 服务上百个广告主
+                            </div>
+                            <div class="active-white" style="width: 30%;font-size: 0.2rem;
+                                background: #E4E4E4;
+                                box-sizing: border-box;
+                                padding: 0.2rem;
+                                display: flex;
+                                align-items: center;
+                                justify-content: center;">
+                                累计给广告主带来百亿营收
+                            </div>
+                            <div class="active-white" style="width: 30%;font-size: 0.2rem;
+                                background: #E4E4E4;
+                                box-sizing: border-box;
+                                padding: 0.2rem;
+                                display: flex;
+                                align-items: center;
+                                justify-content: center;">
+                                团队壮大,目标破千亿营收
+                            </div>
+                        </div>
+                        <div
+                            style="margin-top:0.3rem;width:100%;font-weight:500;font-size: 0.15rem;background-color: #FFFFFF;min-height: 1rem;display: flex;flex-direction: column;justify-content: space-around;">
+                            <p>
+                                2020年抖音淘系引流服务商排名
+
+                                <span style="font-weight: bold;">TOP1</span> ,抖音达人带货榜头部承接投放覆盖率达到<span
+                                    style="font-weight: bold;">80%以上</span> ,头部达人直播投放经验极为丰富。
+
+                            </p>
+                        </div>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+        <div class='footer' id="footer">
+
+            <div class="title">
+                <div class="main-content-title"
+                    style="position: static;justify-content: start;border-color: #f2f2f2;font-size: 0.2rem;font-weight: bold;">
+                    <div style="color: white;margin-bottom: 0.1rem;">
+                        联系我们
+                    </div>
+                </div>
+            </div>
+            <div style="width: 100%;display: flex;margin-bottom: 0.5rem;">
+                <div style="width: 50%;height: 100%;line-height: 0.5rem;">
+                    <p style="font-size: 0.3rem;color: white;text-align: left;    margin-bottom: 0.2rem;">北京总部</p>
+                    <p style="font-size: 0.18rem;color: white;text-align: left;line-height: 0.3rem;">
+                        <img src="./img/地址.png" alt="" style="width: 0.2rem;margin-right: 0.1rem;    position: relative;
+                        top: 0.03rem;">
+                        北京市朝阳区酒仙桥东风北桥宝信行东风kaso 3楼308
+                    </p>
+                    <p style="font-size: 0.18rem;color: white;text-align: left;">
+                        <img src="./img/电话.png" alt="" style="width: 0.2rem;margin-right: 0.1rem;">
+                        13811821639
+                    </p>
+                    <p style="font-size: 0.18rem;color: white;text-align: left;position: relative;top: -0.12rem;">
+                        <span style="width: 0.2rem;margin-right: 0.1rem;">✉</span>
+                        wuliuqi@567c-top.cn
+                    </p>
+
+
+
+                </div>
+                <div style="width: 50%;height: 100%;">
+                    <div id="myMap" ControlAnchor='BMAP_ANCHOR_TOP_LEFT' style="    width: 100%;
+                    height:2.5rem;">
+
+                    </div>
+                </div>
+            </div>
+            <div style="display: flex;flex-wrap: wrap;">
+                <div style="width: 35%;padding-bottom: 0.2rem;line-height: 0.3rem;margin-right: 0.3rem;">
+                    <p style="font-size: 0.2rem;color: white;text-align: left;margin-bottom: 0.2rem;">石家庄分公司</p>
+                    <p style="font-size: 0.14rem;color: white;text-align: left;">
+                        <img src="./img/地址.png" alt="" style="width: 0.15rem;margin-right: 0.1rem;    position: relative;
+                        top: 0.03rem;">
+                        石家庄市长安区广安大街86 号财富大厦裙楼4B1 房间
+                    </p>
+                </div>
+                <div style="width:30%;padding-bottom: 0.2rem;line-height: 0.3rem;">
+                    <p style="font-size: 0.2rem;color: white;text-align: left;margin-bottom: 0.2rem;">杭州分公司</p>
+                    <p style="font-size: 0.14rem;color: white;text-align: left;">
+                        <img src="./img/地址.png" alt="" style="width: 0.15rem;margin-right: 0.1rem;    position: relative;
+                        top: 0.03rem;">
+                        杭州市西湖区蒋村商务中心B1座318室
+                    </p>
+                </div>
+                <div style="width:  30%;padding-bottom: 0.2rem;line-height: 0.3rem;">
+                    <p style="font-size: 0.2rem;color: white;text-align: left;margin-bottom: 0.2rem;">上海分公司</p>
+                    <p style="font-size: 0.14rem;color: white;text-align: left;">
+                        <img src="./img/地址.png" alt="" style="width: 0.15rem;margin-right: 0.1rem;    position: relative;
+                        top: 0.03rem;">
+                        上海市静安区康定路359号1楼
+                    </p>
+                </div>
+            </div>
+            <div>
+                <a href="https://beian.miit.gov.cn/" target="_block">
+                    京ICP备18045244号-1
+                </a>
+            </div>
+        </div>
+        <a class="aside" href="#">
+            <img src="./images/goTop.png" alt="">
+        </a>
+    </div>
+    <script src="./js/jquery.min.js"></script>
+    <script src="./js/phone.js"></script>
+    <script src="./js/swiper.min.js"></script>
+    <script src="./js/index.js"></script>
+    <script type="text/javascript"
+        src="http://api.map.baidu.com/api?v=3.0&ak=QNWNbHbcOSEyeOlyc1GT2DLFdRDRd4yv"></script>
+    <script src="./js/contactUs.js"></script>
+    <script>
+        // console.log(1)
+        var mySwiper = new Swiper('.swiper-container', {
+            // autoplay: true,//可选选项,自动滑动
+            disableOnInteraction: true,
+            loop: true,
+        })
+        let caseTitle = document.getElementsByClassName('left-box-title')
+        $('.left-box-title').on('click', function () {
+            $(this).addClass('left-box-title-active')
+            $(this).siblings().removeClass('left-box-title-active')
+            // $('#img-right').addClass('active-hide')
+            if ($(this).index() == 0) {
+                $('#img-right').attr('src', './img/美妆.png')
+            } else if ($(this).index() == 1) {
+                $('#img-right').attr('src', './img/珠宝.png')
+            } else if ($(this).index() == 2) {
+                $('#img-right').attr('src', './img/食品.png')
+            }
+
+        })
+
+        $('#show-menu').on('click', function () {
+            $('#close-box').css({
+                visibility: "visible"
+            })
+            $('#menu').css({ right: 0 })
+        })
+        $('#close-box').on('click', function () {
+            $('#menu').css({ right: '-60%' })
+            setTimeout(() => {
+                $('#close-box').css({
+                    visibility: "hidden"
+                })
+            }, 200)
+
+        })
+
+
+        var box = document.getElementById('hide-all');
+        var showBox = document.getElementById('show')
+        var timer = null;
+        $('#show a').on('mouseover', function (e) {
+            // if (timer) clearTimeout(timer)
+
+            $(this).addClass('bottom-border-a')
+            $(this).siblings().removeClass('bottom-border-a')
+            if ($(this).index() == 0) {
+                box.style.height = '0';
+                box.style.padding = '0';
+                $('#logo').attr('src', './img/logo1.png')
+                $(this).removeClass('a-color')
+                $(this).siblings().removeClass('a-color')
+                $("#show-small div").eq($(this).index()).siblings().css({
+                    height: "0"
+                })
+            } else if ($(this).index() == 1) {
+                box.style.height = '350px';
+                $(this).addClass('a-color')
+                $(this).siblings().addClass('a-color')
+                $('#logo').attr('src', './img/logo.png')
+                // box.style.padding = '0.2rem 0';
+                $("#show-small div").eq($(this).index()).css({
+                    height: "300px"
+                })
+                $("#show-small div").eq($(this).index()).html(`
+                <a style="color:#000000;display:block;margin:105px  0 0.2rem 0" href="./showWork.html#culture">企业文化</a>
+                <a style="color:#000000;display:block;margin:0.2rem 0" href="./showWork.html#team" >团队成员</a>
+                <a style="color:#000000;display:block;margin:0.2rem 0" href="./showWork.html#history">历史荣耀</a>公司信息`)
+                $("#show-small div").eq($(this).index()).siblings().css({
+                    height: "0"
+                })
+                // $("#show-small div").eq($(this).index()).siblings().empty("p")
+            } else if ($(this).index() == 2) {
+                $(this).addClass('a-color')
+                $(this).siblings().addClass('a-color')
+                box.style.height = '350px';
+                $('#logo').attr('src', './img/logo.png')
+                // box.style.padding = '0.2rem 0';
+                $("#show-small div").eq($(this).index()).css({
+                    height: "300px"
+                })
+                $("#show-small div").eq($(this).index()).html(`
+                <a style="color:#000000;display:block;margin:105px 0 0.2rem 0" href="./contactUs.html#painPoint">投放痛点分析</a>
+                <a style="color:#000000;display:block;margin:0.2rem 0" href="./contactUs.html#experience" >经验丰富</a>
+                <a style="color:#000000;display:block;margin:0.2rem 0" href="./contactUs.html#efficient">人群精准触达</a>
+                <a style="color:#000000;display:block;margin:0.2rem 0" href="./contactUs.html#industry">行业运营服务</a>
+                <a style="color:#000000;display:block;margin:0.2rem 0" href="./contactUs.html#increment">增值服务</a>服务内容与优势`)
+                $("#show-small div").eq($(this).index()).siblings().css({
+                    height: "0"
+                })
+                // $("#show-small div").eq($(this).index()).siblings().empty("p")
+            } else if ($(this).index() == 3) {
+                box.style.height = '0';
+                box.style.padding = '0';
+                $('#logo').attr('src', './img/logo1.png')
+                $(this).removeClass('a-color')
+                $(this).siblings().removeClass('a-color')
+                $("#show-small div").eq($(this).index()).siblings().css({
+                    height: "0"
+                })
+                // $("#show-small div").eq($(this).index()).siblings().empty("p")
+            } else if ($(this).index() == 4) {
+                box.style.height = '0';
+                box.style.padding = '0';
+                $('#logo').attr('src', './img/logo1.png')
+                $(this).removeClass('a-color')
+                $(this).siblings().removeClass('a-color')
+                $("#show-small div").eq($(this).index()).siblings().css({
+                    height: "0"
+                })
+
+            }
+            e.stopPropagation();
+        })
+        $('#show a').on('mouseout', function () {
+
+            $(this).removeClass('bottom-border-a')
+            $('#show a').removeClass('a-color')
+        })
+        $("#show-small div").on('mouseover', function () {
+
+            $('#logo').attr('src', './img/logo.png')
+        })
+        showBox.onmouseover = function () {
+
+        }
+        box.onmouseover = function () {
+            box.style.height = '350px';
+            $('#show a').addClass('a-color')
+        }
+        showBox.onmouseout = function () {
+            $('#show a').removeClass('bottom-border-a')
+            $('#show a').removeClass('a-color')
+        }
+        box.onmouseout = function () {
+            box.style.height = '0';
+            box.style.padding = '0';
+            $('#logo').attr('src', './img/logo1.png')
+            $('#show a').removeClass('bottom-border-a')
+            $('#show a').removeClass('a-color')
+        }
+    </script>
+</body>
+
+</html>