vue实现自适应购物车勾选数量选择删除总价计算等效果代码-html代码-BFW代码库

代码语言：html
所属分类：电商
代码描述：vue实现购物车勾选数量选择删除总价计算等效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue的购物车实例</title>
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <style>
        /* base */
        *,
        *::before,
        *::after {
            box-sizing: border-box;
        }

        html,
        body {
            overflow-x: hidden;
        }

        html {
            font-family: sans-serif;
            font-size: 100%;
            -ms-text-size-adjust: 100%;
            -webkit-text-size-adjust: 100%;
        }

        body {
            margin: 0;
            padding: 0;
        }

        ul, ol {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        div, p, dl, dt, dd {
            margin: 0;
            padding: 0;
        }

        li,
        dl,
        dt,
        dd,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        hgroup,
        p,
        blockquote,
        figure,
        form,
        fieldset,
        input,
        legend,
        pre,
        abbr,
        button {
            margin: 0;
            padding: 0;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            font-weight: normal;
        }

        pre,
        code,
        address,
        caption,
        th,
        figcaption {
            font-size: 1em;
            font-weight: normal;
            font-style: normal;
        }

        fieldset,
        iframe,
        img {
            border: 0;
        }

        caption,
        th {
            text-align: left;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
        }

        article,
        aside,
        footer,
        header,
        nav,
        main,
        section,
        summary,
        details,
        figure,
        figcaption {
            display: block;
        }

        audio,
        canvas,
        video,
        progress {
            display: inline-block;
            vertical-align: baseline;
        }

        button {
            background: none;
            border: 0;
            box-sizing: border-box;
            color: inherit;
            cursor: pointer;
            font: inherit;
            line-height: inherit;
            overflow: visible;
            vertical-align: inherit;
        }

        button:disabled {
            cursor: default;
        }

        a {
            color: inherit;
            text-decoration: none;
        }

        a:active,
        a:hover {
            outline: 0;
        }

        h1 {
            font-size: 2em;
        }

        img {
            border: 0;
        }

        [hidden] {
            display: none;
        }

        .nobr {
            white-space: nowrap;
        }

        i,
        em,
        code {
            font-style: normal;
        }

        b,
        strong {
            font-weight: bold;
        }

        sub,
        sup {
            font-size: 75%;
            line-height: 0;
            position: relative;
            vertical-align: baseline;
        }

        sup {
            top: -0.5em;
        }

        button,
        input,
        select,
        textarea {
            font-family: inherit;
            /* 1 */
            font-size: 100%;
            /* 2 */
            margin: 0;
            /* 3 */
        }

        input:focus,
        select:focus,
        textarea:focus,
        button:focus, button:active {
            outline: none;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
        }

        .clearfix:after {
            visibility: hidden;
            display: block;
            content: " ";
            clear: both;
        }

        .clearfix {
            zoom: 1;
        }

@media print {
            body,
            #main,
            #content {
                color: #000;
            }
            a,
            a:link,
            a:visited {
                color: #000;
                text-decoration: none;
            }
        }


        html {
            font-size: 10px;
        }

        body {
            font-size: 1.4rem;
            font-family: sans-serif;
            color: #333;
            font-family: "akkurat", sans-serif;
        }

        .container {
            max-width: 1280px;
            margin: 0 auto;
        }

@media only screen and (max-width: 1280px) {
            .container {
                width: 100%;
            }
        }

        .btn {
            display: inline-block;
            height: 54px;
            line-height: 54px;
            padding: 0 1.2em;
            text-align: center;
            font-size: 18px;
            font-family: "moderat", sans-serif;
            transition: all .3s ease-out;
        }
        .btn:hover {
            background-color: #fff;
            color: #e02614;
            transition: all .3s ease-out;
        }

        .btn--orange {
            background-color: #EE7A23;
            border: 1px #EE7A23 solid;
            color: #fff;
        }
        .btn--orange:hover {
            background-color: #fff;
            color: #EE7A23;
        }

        .btn--white {
            background-color: #fff;
            border: 1px #d1434a solid;
            color: #d1434a;
        }
        .btn--white:hover {
            background-color: #d1434a;
            color: #fff;
        }

        .btn--red {
            background-color: #d1434a;
            border: 1px #d1434a solid;
            color: #fff;
        }
        .btn--red:hover {
            background-color: #fff;
            color: #d1434a;
        }

        .btn--gray-white {
            background-color: none;
            border: 1px #605F5F solid;
            color: #605F5F;
        }
        .btn--gray-white:hover {
            background-color: #605F5F;
            color: #fff;
        }

        .btn--dis {
            background-color: #ccc;
            border: 1px #ccc solid;
            color: #fff;
            cursor: disabled;
        }
        .btn--dis:hover {
            background-color: #ccc;
            color: #fff;
        }

        input[type="text"], textarea {
            padding: .5em 20px;
            border: 1px solid #e9e9e9;
            background: #white;
        }

        .up-down-btn {
            color: #EE7A23;
        }

        .i-up-down {
            position: relative;
            display: inline-block;
            width: 14px;
            height: 6px;
            vertical-align: middle;
            z-index: 2;
            -ms-transform: translateY(2px);
            transform: translateY(2px);
            transition: transform .3s ease-out;
        }
        .i-up-down i {
            position: absolute;
            top: 0;
            width: 8px;
            height: 1px;
            background: #EE7A23;
        }
        .i-up-down .i-up-down-l {
            left: 0;
            -ms-transform: rotate(40deg);
            transform: rotate(40deg);
            transition: transform .3s ease-out;
        }
        .i-up-down .i-up-down-r {
            right: 0;
            -ms-transform: rotate(-40deg);
            transform: rotate(-40deg);
            transition: all .3s ease-out;
        }

        .select-self {
            position: relative;
            display: inline-block;
            cursor: pointer;
        }

        .select-self-area {
            width: auto;
            background: #f0f0f0;
            border-radius: 3px;
            min-width: 50px;
            max-width: 240px;
            height: 30px;
            line-height: 30px;
        }
        .select-self-area .select-ipt {
            display: block;
            height: 100%;
            padding: 0 2em 0 1em;
            border: 0;
            color: #605F5F;
            overflow: hidden;
        }
        .select-self-area .select-btn {
            position: absolute;
            right: 0;
            top: 0;
            width: 1.286em;
            height: 100%;
            background: #fff;
            border: 1px solid #ccc;
            border-radius: 3px;
            text-align: center;
        }
        .select-self-area .select-btn .i-up-down {
            width: 8px;
            top: 0;
            left: 0;
        }
        .select-self-area .select-btn .i-up-down i {
            width: 5px;
            height: 2px;
            background-color: #605F5F;
        }

        .select-self-white .select-self-area {
            background: #fff;
            border: 1px solid #ccc;
            border-radius: 0;
        }

        .select-self-white .select-btn {
            border: none;
            background: none;
        }

        .select-options {
            display: none;
            position: absolute;
            top: 30px;
            left: 0;
            width: 100%;
            max-height: 210px;
            background: #f0f0f0;
            border-radius: 0 0 3px 3px;
            overflow-y: auto;
            z-index: 1;
        }
        .select-options li {
            padding: .5em 15px;
            border-top: 1px solid #e9e9e9;
            text-align: left;
        }
        .select-options li:hover {
            color: #EE7A23;
        }

        .select-self-open {
            border-radius: 3px 3px 0 0;
        }
        .select-self-open .select-options {
            display: block;
        }
        .select-self-open .i-up-down .i-up-down-l {
            left: 0;
            -ms-transform: rotate(-40deg);
            transform: rotate(-40deg);
            transition: transform .3s ease-out;
        }
        .select-self-open .i-up-down .i-up-down-r {
            right: 0;
            -ms-transform: rotate(40deg);
            transform: rotate(40deg);
            transition: all .3s ease-out;
        }
        .select-self-open .select-options {
            z-index: 102;
        }

        .select-self:hover, .up-down-btn:hover, .up-down-btn.open {
            transition: all .3s ease-out;
        }
        .select-self:hover .i-up-down-l, .up-down-btn:hover .i-up-down-l, .up-down-btn.open .i-up-down-l {
            -ms-transform: rotate(-40deg);
            transform: rotate(-40deg);
            transition: all .3s ease-out;
        }
        .select-self:hover .i-up-down-r, .up-down-btn:hover .i-up-down-r, .up-down-btn.open .i-up-down-r {
            -ms-transform: rotate(40deg);
            transform: rotate(40deg);
            transition: all .3s ease-out;
        }

@charset "UTF-8";
        .check-step {
            padding: 5px 0;
        }
        .check-step ul {
            display: -ms-flexbox;
            display: flex;
            margin: 25px 0 50px 0;
        }
        .check-step ul:after {
            visibility: hidden;
            display: block;
            content: " ";
            clear: both;
        }
        .check-step li {
            position: relative;
            float: left;
            -ms-flex: 1;
            flex: 1;
            width: 25%;
            line-height: 1.5em;
            padding: 0 1em 1em 1em;
            border-bottom: 2px solid #ccc;
            color: #999;
            font-size: 16px;
            text-align: center;
        }
        .check-step li:after {
            position: absolute;
          .........完整代码请登录后点击上方下载按钮下载查看