1. <template>
    2. <div class="about">
    3. <h2>我的购物车</h2>
    4. <table>
    5. <thead>
    6. <tr>
    7. <th>选择</th>
    8. <th>商品</th>
    9. <th>价格</th>
    10. <th>小计</th>
    11. <td>操作</td>
    12. </tr>
    13. </thead>
    14. <tbody>
    15. <tr>
    16. <td>
    17. <van-checkbox checked-color="#FF6700" v-model="checked"></van-checkbox>
    18. </td>
    19. <td>
    20. <img src="https://img.yzcdn.cn/vant/t-thirt.jpg" />
    21. <span>衣服</span>
    22. </td>
    23. <td>
    24. <van-stepper v-model="value" integer />
    25. </td>
    26. <td>
    27. <span>2220</span>
    28. </td>
    29. <td>
    30. <el-button type="danger">删除</el-button>
    31. </td>
    32. </tr>
    33. </tbody>
    34. </table>
    35. <van-submit-bar :price="3050" button-text="提交订单">
    36. <van-checkbox v-model="checked">全选</van-checkbox>
    37. </van-submit-bar>
    38. </div>
    39. </template>
    40. <script>
    41. export default {
    42. data() {
    43. return {
    44. checked: false,
    45. value: 1
    46. };
    47. }
    48. };
    49. </script>
    50. <style scoped>
    51. table >>> .van-checkbox {
    52. margin-left: 20px;
    53. }
    54. table {
    55. background: #fff;
    56. border-collapse: collapse;
    57. width: 100%;
    58. border: 1px solid #666;
    59. border-radius: 15px;
    60. margin: 0 auto;
    61. /* display: block; */
    62. text-align: center;
    63. }
    64. table img {
    65. width: 100px;
    66. }
    67. table th {
    68. text-align: center;
    69. }
    70. .about>.van-submit-bar{
    71. padding:0 20px;
    72. }
    73. .about>>>.van-checkbox__icon .van-icon {
    74. border-color:#FF6700 !important;
    75. }
    76. table >>> .van-stepper .van-stepper__input {
    77. width: 40px !important;
    78. }
    79. thead {
    80. background: #333;
    81. color: #fff;
    82. line-height: 50px;
    83. }
    84. tbody tr {
    85. line-height: 100px;
    86. }
    87. </style>