Vue统计总价

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;
}