computer.html 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157
  1. <extend name="Public:computerbase" />
  2. <block name="content">
  3. <style>
  4. .pdd-head .ph-tab{float:left;}
  5. .pdd-activity{margin-top: .26rem;}
  6. .pdd-activity .pdd-act-head{border:none;}
  7. .home-banner {
  8. position: relative;
  9. height: auto;
  10. margin: 0 auto;
  11. width: 100%;
  12. z-index: 5;
  13. overflow: hidden;
  14. }
  15. .main{width:auto;margin:0 auto;margin-top:1rem; position:relative;background-color:#f8f8f8;}
  16. .home-banner{position:relative;height:auto;margin:0 auto;width:100%;z-index:5;overflow:hidden;}
  17. .focus-pic{overflow:hidden;width:100%;}
  18. .focus-pic .pic-item{display:block;position:absolute;left:0;top:0;width:100%;}
  19. .focus-pic img{display:block;width:100%;height:auto;}
  20. .focus-pic .footing{position:absolute;bottom:0;left:50%;right:0;padding:0 15px;height:40px;z-index:11;text-align:left;}
  21. .focus-pic .pagination{position:absolute;left:0;right:0;bottom:0;height:30px;text-align:center;}
  22. .focus-pic .pagination-item{display:inline-block;*display:inline;*zoom:1;width:8px;height:8px;overflow:hidden;border:1px solid #fff;border-radius:50%;margin:0 3px;cursor:pointer;}
  23. .focus-pic .pagination-item.active{background:#ffffff;}
  24. .pdd-activity .pdd-act-pic img.cat_hover{display:none;position:absolute;top: -100%;z-index: 999;width:320px;}
  25. </style>
  26. <script src="__PUBLIC__/js/ui.js"></script>
  27. <div class="main">
  28. <div class="home-banner">
  29. <div class="focus-pic" id="focus-pic">
  30. <?php foreach($ad_gundong as $val){ ?>
  31. <a href="<?php echo $val['url']; ?>" class="pic-item"><img src="/Uploads/image/<?php echo $val['image']; ?>"></a>
  32. <?php } ?>
  33. <div class="footing">
  34. <div class="pagination">
  35. <?php $i =1; ?>
  36. <?php foreach($ad_gundong as $val){ ?>
  37. <span class="pagination-item <?php if($i==1){ ?>active <?php } ?>"></span>
  38. <?php $i++; ?>
  39. <?php } ?>
  40. </div>
  41. </div>
  42. </div>
  43. </div>
  44. </div>
  45. <script type="text/javascript">
  46. $(document).ready(function(){
  47. //焦点图
  48. ui.focus('#focus-pic',2000);
  49. $('.cat_image').hover(function(){
  50. var s_height = $(this).siblings('.cat_hover').height();
  51. if( parseFloat($(this).parent().width()) >320 )
  52. {
  53. var s_w = ($(this).parent().width() -320)/2;
  54. $(this).siblings('.cat_hover').css('left', s_w+'px');
  55. }
  56. $(this).siblings('.cat_hover').css('top','-'+s_height+'px')
  57. $(this).siblings('.cat_hover').fadeIn();
  58. },function(){
  59. $(this).siblings('.cat_hover').fadeOut();
  60. })
  61. });
  62. </script>
  63. <div class="pdd-activity" style="margin-bottom:10px;">
  64. <div class="pdd-act-head">
  65. <span class="pdd-act-title"></span>
  66. </div>
  67. <div class="pdd-act-pic">
  68. <?php
  69. $ad_1 = array_slice($plugins_slider_list,0,1);
  70. $ad_2 = array_slice($plugins_slider_list,1,1);
  71. $ad_3 = array_slice($plugins_slider_list,2,1);
  72. $ad_4 = array_slice($plugins_slider_list,3,1);
  73. $ad_5 = array_slice($plugins_slider_list,4,1);
  74. $ad_6 = array_slice($plugins_slider_list,5,1);
  75. ?>
  76. <div class="act-pic-1">
  77. <div class="cat-pic-up">
  78. <img src="/Uploads/image/<?php echo $weixin_group; ?>" class="cat_hover" />
  79. <img src="/Uploads/image/<?php echo $ad_1[0]['image']; ?>" class="cat_image">
  80. </div>
  81. <div class="cat-pic-down">
  82. <img src="/Uploads/image/<?php echo $weixin_group; ?>" class="cat_hover" />
  83. <img src="/Uploads/image/<?php echo $ad_4[0]['image']; ?>" class="cat_image">
  84. </div>
  85. </div>
  86. <div class="act-pic-2">
  87. <div class="cat-pic-up">
  88. <img src="/Uploads/image/<?php echo $weixin_group; ?>" class="cat_hover" />
  89. <img src="/Uploads/image/<?php echo $ad_2[0]['image']; ?>" class="cat_image">
  90. </div>
  91. <div class="cat-pic-down">
  92. <img src="/Uploads/image/<?php echo $weixin_group; ?>" class="cat_hover" />
  93. <img src="/Uploads/image/<?php echo $ad_5[0]['image']; ?>" class="cat_image">
  94. </div>
  95. </div>
  96. <div class="act-pic-3">
  97. <div class="cat-pic-up">
  98. <img src="/Uploads/image/<?php echo $weixin_group; ?>" class="cat_hover" />
  99. <img src="/Uploads/image/<?php echo $ad_3[0]['image']; ?>" class="cat_image">
  100. </div>
  101. <div class="cat-pic-down cat-app-dl">
  102. <img src="/Uploads/image/<?php echo $weixin_group; ?>" class="cat_hover" />
  103. <img src="/Uploads/image/<?php echo $ad_6[0]['image']; ?>" class="cat_image">
  104. </div>
  105. </div>
  106. </div>
  107. </div>
  108. <div class="pdd-catgoods" style="display:none;">
  109. <div class="pdd-cat-head">
  110. <span class="pdd-act-title">精选专题</span>
  111. </div>
  112. <ul class="cat-list">
  113. <?php foreach($subject_list as $subject){ ?>
  114. <li class="cat-list-item" onclick="location.href='<?php echo U('Index/super', array('id' => $subject['id'])); ?>'">
  115. <div class="clt-content">
  116. <img class="clt-content-banner" src="/Uploads/image/<?php echo $subject['banner']; ?>">
  117. <div class="clt-goods" id="index-cat-clothes">
  118. <div class="pdd-index-glist" avalonctrl="index-cat-clothes">
  119. <ul>
  120. <?php foreach($subject['goods_list'] as $goods){ ?>
  121. <?php if(!empty($goods['fan_image'])){
  122. $goods['image'] = $goods['fan_image'];
  123. }
  124. ?>
  125. <li class="pi-glist-item">
  126. <img alt="goods" src="/Uploads/image/<?php echo $goods['image']; ?>">
  127. <p class="index-goods-name"><?php echo $goods['name']; ?></p>
  128. <span class="index-goods-price"><b>¥</b><span><?php echo $goods['pinprice']; ?></span></span>
  129. <span class="index-goods-mprice">¥<span><?php echo $goods['price']; ?></span></span>
  130. </li>
  131. <?php } ?>
  132. </ul>
  133. </div>
  134. </div>
  135. </div>
  136. </li>
  137. <?php } ?>
  138. </ul>
  139. </div>
  140. <include file="Public:foot_computer" />
  141. </block>