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