showWork.html 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"/>
  6. <title>优容智汇</title>
  7. <link rel="stylesheet" href="./css/reset.css">
  8. <!-- <link rel="stylesheet" href="./css/publicStyle.css"> -->
  9. <link rel="stylesheet" media="screen and (max-width:1024px)" href="./css/publicStyle.css" >
  10. <link rel="stylesheet" media="screen and (min-width:1025px) " href="./css/publicIE.css">
  11. <!-- <link rel="stylesheet" href="./css/showWork.css"> -->
  12. <link rel="stylesheet" media="screen and (max-width:1024px)" href="./css/showWork.css" >
  13. <link rel="stylesheet" media="screen and (min-width:1025px) " href="./css/showWorkPC.css">
  14. <link rel="shortcut icon" href="./images/icon.png" type="image/x-icon">
  15. </head>
  16. <body>
  17. <div class="container">
  18. <div class="main">
  19. <!-- 头部 -->
  20. <div class="header">
  21. <div class="icon">
  22. <img src="./images/icon.png" alt="">
  23. </div>
  24. <div class="nav">
  25. <ul class="nav-ul">
  26. <li class="item ">
  27. <a href="./index.html" >首页</a>
  28. </li >
  29. <li class='item active'>
  30. <a href="./showWork.html">作品案例</a>
  31. </li>
  32. <li class='item '>
  33. <a href="./contactUs.html">联系我们</a>
  34. </li>
  35. </ul>
  36. </div>
  37. </div>
  38. </div>
  39. <!-- banner 视频区 -->
  40. <div class="banner">
  41. <img src="./images/官网_02.png" alt="">
  42. </div>
  43. <!-- 主题展示 -->
  44. <div class="section">
  45. <div class="main">
  46. <div class="title">
  47. <p class="desc">客户案例</p>
  48. <p class="info">专业精湛的技术+服务营销理念 为客户提供高校卓越的营销体验</p>
  49. </div>
  50. <div class="showlist">
  51. <div class="change-page">
  52. <img src="./images/01.png" alt="" class="left">
  53. <img src="./images/04.png" alt="" class="right">
  54. </div>
  55. <div class="firstPage">
  56. <div class="list" >
  57. <video
  58. src="http://ctop-www.oss-cn-beijing.aliyuncs.com/yourong/case/1.m4v"
  59. webkit-playsinline
  60. playsinline="true"
  61. x5-video-player-type="h5"
  62. poster='./images/1.jpg'
  63. style="object-fit:fill"
  64. x5-playsinline="x5-playsinline" x-webkit-airplay="true" preload="auto"
  65. class="video">
  66. </video>
  67. <p class="from">媒体:快手</p>
  68. <img src="./images/play.png" alt="" class="play">
  69. </div>
  70. <div class="list" >
  71. <video src="http://ctop-www.oss-cn-beijing.aliyuncs.com/yourong/case/2.m4v"
  72. x5-video-player-type="h5" style="object-fit:fill"
  73. poster='./images/2.jpg'
  74. webkit-playsinline playsinline="true"
  75. x5-playsinline="x5-playsinline" x-webkit-airplay="true" preload="auto"
  76. class="video"></video>
  77. <p class="from">媒体:快手</p>
  78. <img src="./images/play.png" alt="" class="play">
  79. </div>
  80. <div class="list" >
  81. <video src="http://ctop-www.oss-cn-beijing.aliyuncs.com/yourong/case/3.m4v"
  82. x5-video-player-type="h5" style="object-fit:fill"
  83. poster='./images/3.jpg'
  84. webkit-playsinline playsinline="true"
  85. x5-playsinline="x5-playsinline" x-webkit-airplay="true" preload="auto"
  86. x5-video-orientation="portraint"
  87. class="video"></video>
  88. <p class="from">媒体:快手</p>
  89. <img src="./images/play.png" alt="" class="play">
  90. </div>
  91. <div class="list clear-right" >
  92. <video src="http://ctop-www.oss-cn-beijing.aliyuncs.com/yourong/case/4.m4v"
  93. x5-video-player-type="h5" style="object-fit:fill"
  94. poster='./images/4.jpg'
  95. webkit-playsinline playsinline="true"
  96. x5-playsinline="x5-playsinline" x-webkit-airplay="true" preload="auto"
  97. x5-video-orientation="portraint"
  98. class="video"></video>
  99. <p class="from">媒体:快手</p>
  100. <img src="./images/play.png" alt="" class="play">
  101. </div>
  102. </div>
  103. <div class="nextPage">
  104. <div class="list" >
  105. <video src="http://ctop-www.oss-cn-beijing.aliyuncs.com/yourong/case/5.m4v"
  106. x5-video-player-type="h5" style="object-fit:fill"
  107. poster='./images/5.jpg'
  108. playsinline="true" webkit-playsinline
  109. x5-playsinline="x5-playsinline" x-webkit-airplay="true" preload="auto"
  110. x5-video-orientation="portraint"
  111. class="video"></video>
  112. <p class="from">媒体:快手</p>
  113. <img src="./images/play.png" alt="" class="play">
  114. </div>
  115. <div class="list" >
  116. <video src="http://ctop-www.oss-cn-beijing.aliyuncs.com/yourong/case/6.m4v"
  117. x5-video-player-type="h5" style="object-fit:fill"
  118. poster='./images/6.jpg'
  119. playsinline="true" webkit-playsinline
  120. x5-playsinline="x5-playsinline" x-webkit-airplay="true" preload="auto"
  121. x5-video-orientation="portraint"
  122. class="video"></video>
  123. <p class="from">媒体:快手</p>
  124. <img src="./images/play.png" alt="" class="play">
  125. </div>
  126. <div class="list" >
  127. <video src="http://ctop-www.oss-cn-beijing.aliyuncs.com/yourong/case/7.m4v"
  128. x5-video-player-type="h5" style="object-fit:fill"
  129. poster='./images/7.jpg'
  130. playsinline="true" webkit-playsinline
  131. x5-playsinline="x5-playsinline" x-webkit-airplay="true" preload="auto"
  132. x5-video-orientation="portraint"
  133. class="video"></video>
  134. <p class="from">媒体:快手</p>
  135. <img src="./images/play.png" alt="" class="play">
  136. </div>
  137. <div class="list clear-right" >
  138. <video src="http://ctop-www.oss-cn-beijing.aliyuncs.com/yourong/case/8.m4v"
  139. x5-video-player-type="h5" style="object-fit:fill"
  140. poster='./images/8.jpg'
  141. playsinline="true" webkit-playsinline
  142. x5-playsinline="x5-playsinline" x-webkit-airplay="true" preload="auto"
  143. x5-video-orientation="portraint"
  144. class="video"></video>
  145. <p class="from">媒体:快手</p>
  146. <img src="./images/play.png" alt="" class="play">
  147. </div>
  148. </div>
  149. </div>
  150. </div>
  151. </div>
  152. <div class='footer'>
  153. <div class="title">
  154. <ul>
  155. <li><span>首页</span></li>
  156. <li><span>关于我们</span></li>
  157. <li><span>服务领域</span></li>
  158. <li><span>服务能力</span></li>
  159. <li><span>合作客户</span></li>
  160. <li><span>联系我们</span></li>
  161. </ul>
  162. </div>
  163. <div class="info">
  164. <div class="box clearfix">
  165. <p class="infobox">
  166. <img src="./images/time.png" alt="">
  167. <span>AM 9:30 - PM 18:30 </span>
  168. </p>
  169. <p class="infobox chuli">
  170. <img src="./images/qq.png" alt="">
  171. <span>2015402235</span>
  172. </p>
  173. <p class="infobox email">
  174. <img src="./images/email.png" alt="">
  175. <span>tjyr@tjyourong.com.cn</span>
  176. </p>
  177. </div>
  178. <div class="box clearfix">
  179. <p class="infobox">
  180. <img src="./images/phone.png" alt="">
  181. <span>010-86467990 转 945</span>
  182. </p>
  183. <p class="infobox clear-right">
  184. <img src="./images/local.png" alt="">
  185. <span>北京市朝阳区高井文化传媒产业园东亿国际传媒产业园一期3号楼301室</span>
  186. </p>
  187. </div>
  188. <div class="box clearfix">
  189. <p class="beian">优容智汇 &copy; 版权所有 <span class="beianinfo">津ICP备20003173号</span> </p>
  190. </div>
  191. </div>
  192. </div>
  193. <a class="aside" href="#">
  194. <img src="./images/goTop.png" alt="">
  195. </a>
  196. </div>
  197. <script src="./js/phone.js"></script>
  198. <script src="./js/showWork.js"></script>
  199. </body>
  200. </html>