使用Vue.js实现的购物车界面

Vue.js Shopping Cart

vue, cart

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 5584
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var shop = [{
    name: "One-Punch Man, Vol. 5",
    price: 10.02,
    quantity: 0
}, {
    name: "Batman '66 Vol. 5",
    price: 9.98,
    quantity: 0
}, {
    name: "Dragon Ball Freeza Arc, Vol. 1",
    price: 15.98,
    quantity: 0
}, {
    name: "Uzumaki: Spiral into Horror, Vol. 1",
    price: 4.84,
    quantity: 0
}, {
    name: "Superman: Red Son (New Edition)",
    price: 10.93,
    quantity: 0
}];

编译

CSS

body {
    height: 100%;
    background: #ffb8c3;
}
#app {
    font-family: 'Roboto Slab', serif;
}
.header {
    height: 80px;
}
.header h2 {
    color: #fff;
    font-family: 'Rock Salt';
    float: left;
    font-weight: bolder;
    margin: 10px 20px;
}
.header button {
    border: 0;
    background: #FFDBE0;
    transition: all .1s ease-out;
}
.header button:hover {
    background: #ffd1d7;
}
.header div {
    float: right;
    display: inline;
    margin: 10px;
}
li {
    list-style: none;
}
.fa {
    cursor: pointer;
    margin-left: 5px;
}
.fade-transition {
    transition: all 0.2s ease-out;
}
.fade-enter,
.fade-leave {
    opacity: 0;
}
.cart > div {
    z-index: 100;
    background: #fff;
    padding: 20px 30px;
    position: absolute;
    right: 30px;
    box-shadow: 2px 2px 6px 0 rgba(0, 0, 0, 0.3);
}
.cart > div div {
    text-align: center;
}
.cart ul,
.cart li,
.cart p {
    margin-bottom: 0;
}
.cart button {
    margin: 20px 0 10px;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: bold;
    letter-spacing: 2px;
}
.shop h3 {
    position: absolute;
    top: -85px;
    left: -30px;
    color: rgba(255, 255, 255, 0.3);
    font-family: sans-serif;
    font-size: 4em;
    font-weight: bold;
    letter-spacing: -2px;
}
.shop ul {
    margin-top: 90px;
}
.shop li div {
    padding: 30px;
    background: #fff;
    margin-bottom: 20px;
    box-shadow: 1px 1px 6px 0 rgba(0, 0, 0, 0.3);
}
.shop button {
    color: white;
    border: 0;
    background: #00ADB5;
    margin: 0;
    transition: all .1s ease-out;
}
.shop button:hover {
    background: #00959c;
}
.checkout {
    background: #fff;
    box-shadow: 1px 1px 6px 0 rgba(0, 0, 0, 0.3);
    margin-top: 90px;
    padding: 50px 60px;
}
.checkout h3 {
    position: absolute;
    top: -85px;
    left: -30px;
    color: rgba(255, 255, 255, 0.3);
    font-family: sans-serif;
    font-size: 4em;
    font-weight: bold;
    letter-spacing: -2px;
}
.checkout span {
    float: right;
}
@media screen and (max-width: 630px) {
    .checkout {
        padding: 30px 40px;
    }
    .checkout h5 {
        font-size: 1.2em;
    }
}
@media screen and (max-width: 550px) {
    .shop h3,
    .checkout h3 {
        font-size: 3.3em;
        top: -70px;
        left: 0px;
    }
}

HTML

Vue.js Shopping Cart

vue, cart

编辑器支持Emmet

快捷键

Vue.js Shopping Cart

vue, cart

使用Vue.js实现的增删改查内容管理界面

使用Vue.JS实现的自适应材质化商品卡片和购物篮（购物车）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：