index.html 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7. <title>首页</title>
  8. <link rel="stylesheet" href="css/swiper-4.1.6.min.css" />
  9. <link rel="stylesheet" type="text/css" href="css/public.css" />
  10. <style type="text/css">
  11. .swiper-pagination-bullet-active {
  12. background-color: #6f6e72;
  13. height: 0.07rem !important;
  14. position: relative;
  15. top: 0.02rem;
  16. }
  17. .swiper-pagination-bullet {
  18. width: 0.54rem;
  19. height: 0.03rem;
  20. border-radius: 0;
  21. }
  22. .img_list {
  23. position: relative;
  24. margin-top: 0.15rem;
  25. }
  26. .img_words {
  27. color: #FFFFFF;
  28. position: absolute;
  29. bottom: 0.37rem;
  30. left: 0.31rem;
  31. }
  32. .img_words h3 {
  33. font-size: 2.6em;
  34. }
  35. .img_words span {
  36. font-size: 1.8em;
  37. }
  38. .img_words p {
  39. background: #FFFFFF;
  40. width: 0.47rem;
  41. height: 0.01rem;
  42. margin: 0.18rem 0;
  43. }
  44. .img_list:last-child {
  45. margin-bottom: 0.3rem;
  46. }
  47. .swiper-slide{
  48. position: relative;
  49. }
  50. .swiper-slide p{
  51. position: absolute;
  52. top: 2.46rem;
  53. left: 1.34rem;
  54. text-align: center;
  55. }
  56. .swiper-slide p>a{
  57. /*background: red;*/
  58. display: inline-block;
  59. width: 1.70rem;
  60. height: 0.65rem;
  61. margin-right: 0.10rem;
  62. }
  63. .swiper-slide p>a:nth-child(2){
  64. width: 1.32rem;
  65. }
  66. .swiper-slide p>a:nth-child(3){
  67. width: 1.56rem;
  68. }
  69. </style>
  70. </head>
  71. <body>
  72. <div class="page_top"><img src="img/introduct/introduct_top.jpg" /></div>
  73. <header>
  74. <div class="hd_nav">
  75. <a class="icon_left"><img src="img/header/nav_left.png" /></a>
  76. <a class="icon_title"><img src="img/header/nav_logo.png" /></a>
  77. <a class="icon_right" href="index.html"><img src="img/header/nav_right.png" /></a>
  78. </div>
  79. <div class="bar_content">
  80. <a href="pdt_idt.html">幻速赛车<img src="img/header/bar_right.png" alt="" /></a>
  81. <a href="join.html">加盟体验店<img src="img/header/bar_right.png" alt="" /></a>
  82. <a href="all_store.html">线下体验店<img src="img/header/bar_right.png" alt="" /></a>
  83. <a href="message.html">在线留言<img src="img/header/bar_right.png" alt="" /></a>
  84. <a href="service.html">服务<img src="img/header/bar_right.png" alt="" /></a>
  85. </div>
  86. </header>
  87. <div class="content">
  88. <!-- Slider -->
  89. <div class="swiper-container" data-space-between='10'>
  90. <div class="swiper-wrapper col">
  91. <div class="swiper-slide">
  92. <a href="pdt_idt.html"><img src="img/home/home_slide_01.jpg" alt=""></a>
  93. <p>
  94. <a href=""></a>
  95. <a href="pdt_idt.html"></a>
  96. <a href="join.html"></a>
  97. </p>
  98. </div>
  99. <div class="swiper-slide"><img src="img/home/home_slide_01.jpg" alt=""></div>
  100. <div class="swiper-slide"><img src="img/home/home_slide_01.jpg" alt=""></div>
  101. </div>
  102. <div class="swiper-pagination"></div>
  103. </div>
  104. <!--图片展示-->
  105. <div class="home_img col">
  106. <div class="img_list">
  107. <a href="pdt_idt.html">
  108. <img src=" img/home/home_01.jpg " alt=" " />
  109. <div class="img_words ">
  110. <h3>体感/VR/力反馈</h3>
  111. <p></p>
  112. <span>了解幻速专业设计与全新科技</span>
  113. </div>
  114. </a>
  115. </div>
  116. <div class="img_list ">
  117. <a href="all_store.html">
  118. <img src="img/home/home_02.jpg " alt=" " />
  119. <div class="img_words ">
  120. <h3>全国线下体验店</h3>
  121. <p></p>
  122. <span>踩过油门,才懂速度。尝试漂移,身体力行 </span>
  123. </div>
  124. </a>
  125. </div>
  126. <div class="img_list ">
  127. <a href="">
  128. <img src="img/home/home_03.jpg " alt=" " />
  129. <div class="img_words ">
  130. <h3>主题挑战赛</h3>
  131. <p></p>
  132. <span>挑战全世界的赛车手</span>
  133. </div>
  134. </a>
  135. </div>
  136. </div>
  137. <!--底部-->
  138. <div class="footer" style="margin-top: 0.2rem;">
  139. <img src="img/introduct/introduct_bot.jpg" style="width: 100%;" />
  140. <a href='' id="rtTop">
  141. 回到顶部&nbsp;&nbsp;<img src="img/footer/rt_top.jpg" alt="" />
  142. </a>
  143. <ul>
  144. <li>
  145. <p>关于我们 <span>+</span></p>
  146. <ul>
  147. <li><a href="pdt_idt.html">产品简介</a></li>
  148. <li><a href="contact.html">联系我们</a></li>
  149. <li><a href="cp_idt.html">公司简介</a></li>
  150. </ul>
  151. </li>
  152. <li>
  153. <p>新闻中心 <span>+</span></p>
  154. <ul>
  155. <li><a href="industry.html">行业动态</a></li>
  156. <li><a href="cp_news.html">公司动态</a></li>
  157. <li><a href="join_news.html">加盟动态</a></li>
  158. </ul>
  159. </li>
  160. <li>
  161. <p>线下体验店 <span>+</span></p>
  162. <ul>
  163. <li><a href="all_store.html">全部门店</a></li>
  164. </ul>
  165. </li>
  166. <li>
  167. <p>客服支持 <span>+</span></p>
  168. <ul>
  169. <li><a href="service.html">售后服务</a></li>
  170. <li><a href="">联系客服</a></li>
  171. </ul>
  172. </li>
  173. </ul>
  174. <div class="footer_bot">
  175. <p class="dy">订阅我们</p>
  176. <p>第一时间获得幻速赛车的最新动态</p>
  177. <p class="ipt_btn">
  178. <input type="text" name="" id="" value="" placeholder="输入您的邮箱地址" />
  179. <button><img src="img/footer/bt_right.png"/></button></p>
  180. <p class="wechat">
  181. <a href=""><img src="img/footer/wechat.jpg" /></a>
  182. <a href="https://weibo.com/u/5804049938"><img src="img/footer/weibo.jpg" /></a>
  183. <a href="http://v.youku.com/v_show/id_XODc0NzY5Njcy.html?qq-pf-to=pcqq.c2c"><img src="img/footer/youku.jpg" /></a>
  184. </p>
  185. <p class="phone">0592-5022711</p>
  186. <p class="last_p">Copyright©2018 厦门欣富地智能科技有限公司 版权所有</p>
  187. </div>
  188. </div>
  189. </div>
  190. <script src="js/jquery-3.3.1.min.js " type="text/javascript " charset="utf-8 "></script>
  191. <script src="js/swiper-4.1.6.min.js " type="text/javascript " charset="utf-8 "></script>
  192. <script src="js/init.js " type="text/javascript " charset="utf-8 "></script>
  193. <script>
  194. </script>
  195. </body>
  196. </html>