detail.html 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  1. <!DOCTYPE html>
  2. <html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  3. xsi:schemaLocation="https://www.thymeleaf.org ">
  4. <head>
  5. <title>采美365网-商品详情</title>
  6. <template th:replace="components/headLink"></template>
  7. <link th:href="@{/css/product/detail.h5.css(v=${version})}" media="screen and (max-width:768px)" rel="stylesheet" type="text/css">
  8. <link th:href="@{/css/product/detail.pc.css(v=${version})}" media="screen and (min-width:768px)" rel="stylesheet" type="text/css">
  9. </head>
  10. <body>
  11. <!-- 引用头部 -->
  12. <template th:replace="components/header"></template>
  13. <!--页面主体数据-->
  14. <div id="container">
  15. <div class="wrap">
  16. <div class="productBox clear">
  17. <div class="imageBox" id="imgShown">
  18. <div class="bigImage">
  19. <img :src="images[0]">
  20. <span class="mask"></span>
  21. </div>
  22. <div class="smallImage">
  23. <ul class="clear">
  24. <li v-for="img in images"><img :src="img"></li>
  25. </ul>
  26. </div>
  27. <div class="zoomImage">
  28. <div class="zoom">
  29. <img :src="images[0]">
  30. </div>
  31. </div>
  32. </div>
  33. <div class="detailBox" th:object="${product}">
  34. <div class="crumbs">
  35. <span>所属分类:</span>
  36. <a th:href="@{'/product/list.html?category=' + *{bigTypeId} + '-0-0'}" th:text="*{bigTypeText}"></a>
  37. <span>&gt;</span>
  38. <a th:href="@{'/product/list.html?category=' + *{bigTypeId} + '-' + *{smallTypeId} + '-0'}" th:text="*{smallTypeText}"></a>
  39. <span>&gt;</span>
  40. <a th:href="@{'/product/list.html?category=' + *{bigTypeId} + '-' + *{smallTypeId} + '-' + *{tinyTypeId}}" th:text="*{tinyTypeText}"></a>
  41. </div>
  42. <h1 class="title" th:text="*{name}">商品名称</h1>
  43. <p class="tags">
  44. <span th:each="tag: *{tagList}" th:text="${tag}"></span>
  45. </p>
  46. <div class="detail">
  47. <p class="row"><span class="l">价格</span><i>:</i>
  48. <!--<em class="price" th:text="*{price}"></em>-->
  49. <em class="price"><i class="icon mIcon" th:each="i:${#numbers.sequence(1,5)}">
  50. <i th:if="*{pricegrade}>=${i} or ${i}==1" class="icon mIcon on"></i>
  51. </i></em>
  52. </p>
  53. <p class="row"><span class="l">品牌</span><i>:</i><em th:text="*{brandName}"></em></p>
  54. <p class="row"><span class="l">包装规格</span><i>:</i><em th:text="*{unit}"></em></p>
  55. <p class="row"><span class="l">商品编码</span><i>:</i><em th:text="*{productCode}"></em></p>
  56. <p class="row"><span class="l">库存</span><i>:</i><em th:text="*{stock}"></em></p>
  57. <p class="row"><span class="l">起批量</span><i>:</i><em th:text="*{minBuyNumber}"></em></p>
  58. <p class="row"><span class="l">采购量</span><i>:</i>
  59. <span class="number">
  60. <em class="sub">-</em>
  61. <input type="number" th:value="*{minBuyNumber}">
  62. <em class="add">+</em>
  63. </span>
  64. </p>
  65. <hr>
  66. <p class="row"><span class="l">服务</span><i>:</i>
  67. <em class="ser">无忧退货</em>
  68. <em class="ser">急速退款</em>
  69. <em class="ser">正品保证</em>
  70. </p>
  71. </div>
  72. </div>
  73. </div>
  74. </div>
  75. <hr>
  76. <div th:text="${product.pid}"></div>
  77. <div th:text="${product.priceflag}"></div>
  78. <div th:text="${product.remarks}"></div>
  79. <div th:text="${product.validFlag}"></div>
  80. <div th:text="${product.step}"></div>
  81. <div th:utext="${product.detailInfo}"></div>
  82. <div th:utext="${product.orderInfo}"></div>
  83. <div th:utext="${product.serviceInfo}"></div>
  84. <div th:text="${product.brandId}"></div>
  85. <div th:text="${product.shopId}"></div>
  86. <div th:text="${product.shopTitle}"></div>
  87. <div th:text="${product.businessScope}"></div>
  88. <div th:text="${product.shopAddress}"></div>
  89. <hr>
  90. </div>
  91. <!-- 引入底部 -->
  92. <template th:replace="components/footer"></template>
  93. <template th:replace="components/footLink"></template>
  94. <script charset="utf-8" type="text/javascript" src="/lib/magnifier.js"></script>
  95. <script charset="utf-8" type="text/javascript" th:src="@{/js/product/detail.js(v=${version})}"></script>
  96. </body>
  97. </html>