cart.html 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <style>
  6. th, td { margin: 0; padding: 0; width: 180px; text-align: left; }
  7. .name { font-size: 14px; font-weight: bolder; width: 280px; }
  8. .price { color: red; font-size: 18px; }
  9. a { display: inline-block; text-align: center; background-color: red; }
  10. .back { width: 120px; height: 30px; line-height: 30px; }
  11. .del { width: 60px; height: 20px; line-height: 20px; }
  12. a:link, a:visited { color: white; text-decoration: none; }
  13. .left { float: left; width: 1000px;}
  14. .right { float: right; }
  15. .total { text-align: right; }
  16. </style>
  17. </head>
  18. <body>
  19. <div class="left">
  20. <h1>购物车列表</h1>
  21. <hr>
  22. </div>
  23. <div class="right">
  24. <a href="/" class="back">返回</a>
  25. </div>
  26. {% if cart %}
  27. <table style="clear: both;">
  28. <tr>
  29. <th>商品名称</th>
  30. <th>商品单价</th>
  31. <th>商品数量</th>
  32. <th>商品总价</th>
  33. <th>操作</th>
  34. </tr>
  35. {% for item in cart %}
  36. <tr>
  37. <td class="name">{{ item.goods.name }}</td>
  38. <td class="price">&yen;{{ item.goods.price }}</td>
  39. <td>{{ item.amount }}</td>
  40. <td class="price">&yen;{{ item.total }}</td>
  41. <td>
  42. <a href="" class="del">删除</a>
  43. </td>
  44. </tr>
  45. {% endfor %}
  46. <tr>
  47. <td colspan="5" class="total price">&yen;{{ cart.total }}元</td>
  48. </tr>
  49. </table>
  50. <a href="" class="back">清空购物车</a>
  51. {% else %}
  52. <h3 style="clear: both;">购物车中暂时没有商品!</h3>
  53. {% endif %}
  54. </body>
  55. </html>