Vue统计总价

xiaoxiao2021-02-28  15

Vue项目目录结构

先上一张自己布局后的图片吧!

自己截的图片

先布局 Cart.vue

<template> <div class="hello"> <h1 class="product-title tc">购物清单</h1> <div class="product-box tc"> <table> <tr> <th><input type="checkbox">全选</th> <th>商品</th> <th>数量</th> <th>单价(元)</th> <th>金额(元)</th> <th>操作</th> </tr> <tr class="product-tr"> <td><input type="checkbox"></td> <td> <div class="product-desc clearfix"> <img src="../assets/product.png" alt=""> <div class="product-info"> <h6>【斯文】甘油|丙三醇</h6> <p>品牌:产地:韩国</p> <p>规格/纯度:99.7% 起订量:215千克</p> <p>配送仓储:上海仓海仓储</p> </div> </div> </td> <td class="prod-num clearfix"> <div class="prod-num-box"> <a href="javascript:;">-</a> <input type="text" value="4" /> <a href="javascript:;">+</a> </div> </td> <td><p class="co-fe65"><span>800.0</span></p></td> <td><p class="co-fe65"><span>3200.0</span></p></td> <td>删除</td> </tr> <tr class="product-tr"> <td><input type="checkbox"></td> <td> <div class="product-desc clearfix"> <img src="../assets/product.png" alt=""> <div class="product-info"> <h6>【斯文】甘油|丙三醇</h6> <p>品牌:产地:韩国</p> <p>规格/纯度:99.7% 起订量:215千克</p> <p>配送仓储:上海仓海仓储</p> </div> </div> </td> <td class="prod-num clearfix"> <div class="prod-num-box"> <a href="javascript:;">-</a> <input type="text" value="4" /> <a href="javascript:;">+</a> </div> </td> <td><p class="co-fe65"><span>800.0</span></p></td> <td><p class="co-fe65"><span>3200.0</span></p></td> <td>删除</td> </tr> <tr class="product-tr"> <td><input type="checkbox"></td> <td> <div class="product-desc clearfix"> <img src="../assets/product.png" alt=""> <div class="product-info"> <h6>【斯文】甘油|丙三醇</h6> <p>品牌:产地:韩国</p> <p>规格/纯度:99.7% 起订量:215千克</p> <p>配送仓储:上海仓海仓储</p> </div> </div> </td> <td class="prod-num clearfix"> <div class="prod-num-box"> <a href="javascript:;">-</a> <input type="text" value="4" /> <a href="javascript:;">+</a> </div> </td> <td><p class="co-fe65"><span>800.0</span></p></td> <td><p class="co-fe65"><span>3200.0</span></p></td> <td>删除</td> </tr> </table> </div> <div class="prod-order clearfix"> <div class="fl"> <a href="javascript:;" class="prod-del">删除所选商品</a> <a href="javascript:;" class="prod-continue">继续购物</a> </div> <div class="fr"> <a href="javascript:;" class="prod-pay">去结算</a> </div> <div class="fr"> <span class="co-fe65">4</span>件商品总计(不含运费):<strong class="co-fe65">¥3200.00</strong> </div> </div> </div> </template> <script> export default { name: 'HelloWorld', data () { return { msg: 'Welcome to Your Vue.js App' } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> .hello { width: 680px; margin: 0 auto; color: #2c3e50; border: 1px solid #ccc; } .product-title { font-size: 16px; /*border-bottom: 1px solid #ccc;*/ } .product-box { } table { border-collapse:collapse; border:none; } table tr { border: 1px solid #ccc; border-left: none; border-right: none; } .product-box th { width: 180px; height: 30px; line-height: 30px; } tr td { height: 120px; } .product-info { } .product-tr { /*border-top: 1px solid #ccc;*/ } .product-desc { position: relative; } .product-desc img { position: absolute; left: 0; top: 0px; width: 60px; height: 90px; vertical-align: middle; border: 1px solid #ccc; } .product-info { width: 160px; margin-left: 80px; text-align: left; /*border: 1px solid #000;*/ } .product-info h5 { font-size: 10px; } .product-info p { font-size: 8px; } .prod-num-box { position: relative; border: 1px solid #ccc; width: 60px; margin: 0 20px; } .prod-num a { display: inline-block; } .prod-num input { width: 20px; text-align: center; border: none; outline: none; } .prod-order { height: 30px; line-height: 30px; padding-left: 20px; } .prod-del { margin-right: 20px; } .prod-pay { display: inline-block; padding: 0 20px; margin-left: 20px; color: #fff; background-color: #FE6500; } </style>

App.vue

<template> <div id="app"> <Cart/> </div> </template> <script> import Cart from './components/Cart' export default { name: 'App', components: { Cart } } </script> <style> @import "./assets/css/reset.css"; </style>

reset.css

.clearfix { zoom: 1; } .clearfix:after { display: block; content: ''; clear: both; } .fl { float: left; } .fr { float: right; } .tc { text-align: center; } body { font-size: 12px; } a { color: #000; text-decoration: none; } .co-fe65 { color: #fe6500; }
转载请注明原文地址: https://www.6miu.com/read-2150195.html

最新回复(0)