vue实现购物页面右侧悬浮弹出电商购物车代码-html代码-BFW代码库

代码语言：html

所属分类：电商

代码描述：vue实现购物页面右侧悬浮弹出电商购物车代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1">



    <style>
        * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }
        :root {
          font: 100%/1.6 Roboto, Helvetica Neue, sans-serif;
        }
        button {
          font: inherit;
          outline: 0;
        }
        .btn,
        button {
          line-height: 1;
          padding: 0.7em 1em;
          display: inline-block;
          margin: 0.5em;
          text-decoration: none;
          white-space: nowrap;
          cursor: pointer;
          border-radius: 0.4em;
          letter-spacing: 1px;
          border: 0.1em solid #86adbf;
          background: #fff;
          color: #86adbf;
          box-shadow: 4px 4px 0 0 rgba(136,136,136,0.4), 0 2px 10px 0 rgba(0,0,0,0.2);
          transition: background-color 0.3s, color 0.3s;
        }
        .btn:hover,
        button:hover {
          color: #fff;
          background: #86adbf;
        }
        .btn:active,
        button:active {
          transform: translate(0.2em, 0.2em);
        }
        .btn.-red,
        button.-red {
          background-color: #fff;
          color: #ff8383;
          border-color: #ff8383;
        }
        .btn.-red:hover,
        button.-red:hover {
          color: #fff;
          background: #ff8d8d;
        }
        .btn.-green,
        button.-green {
          background-color: #fff;
          color: #82c8a0;
          border-color: #82c8a0;
        }
        .btn.-green:hover,
        button.-green:hover {
          color: #fff;
          background: #8cd2aa;
        }
        .btn.-orange,
        button.-orange {
          background-color: #fff;
          color: #ffa07a;
          border-color: #ffa07a;
        }
        .btn.-orange:hover,
        button.-orange:hover {
          color: #fff;
          background: #ffaa84;
        }
        .Modal_Overlay {
          z-index: 100;
          position: fixed;
          left: 0;
          top: 0;
          display: flex;
          justify-content: flex-end;
          width: 100%;
          height: 100%;
          cursor: pointer;
          background: rgba(68,68,68,0.7);
        }
        .Modal_Card {
          cursor: auto;
          background: #fff;
          overflow: overlay;
          -webkit-animation: rModal 0.2s 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
                  animation: rModal 0.2s 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
          transform: translateX(100%);
          padding: 1em;
          max-width: 400px;
        }
        #shop {
          padding: 4em 0;
          max-width: 1280px;
          margin: 0 auto;
        }
        .noScroll {
          overflow: hidden;
          height: 100vh;
        }
        #topLine {
          position: fixed;
          z-index: 5;
          width: 100%;
          top: 0;
          left: 0;
          height: 50px;
          line-height: 50px;
          box-shadow: 0 -5px 5px 5px rgba(0,0,0,0.3);
          background: rgba(255,255,255,0.8);
          display: flex;
          justify-content: flex-end;
        }
        #topLine .btn {
          margin: 0 1em;
        }
        .topLine_cartInfo {
          background: #c4d1cc;
          color: #fff;
          padding-left: 2em;
          border-radius: 0 0 0 1em;
        }
        #Total {
          position: sticky;
          top: -1em;
          width: 100%;
          background: #82c8a0;
          color: #fff;
          margin-bottom: 1em;
        }
        img {
          display: inline-block;
          max-width: 100%;
        }
        .productList {
          display: flex;
          flex-wrap: wrap;
        }
        .productList_item {
          text-align: center;
          flex: 1 1 22%;
          margin: 1em;
        }
        .item_buy {
          background: #f0f8ff;
        }
        @-webkit-keyframes Ups {
          50% {
            transform: translateX(3px) rotate(1deg);
          }
          100% {
            transform: translateX(-3px) rotate(-1deg);
          }
        }
        @keyframes Ups {
          50% {
            transform: translateX(3px) rotate(1deg);
          }
          100% {
            transform: translateX(-3px) rotate(-1deg);
          }
        }
        @-webkit-keyframes rModal {
          to {
            transform: translateX(0);
          }
        }
        @keyframes rModal {
          to {
            transform: translateX(0);
          }
        }
    </style>



</head>

<body>
    <div id="shop" :class="{noScroll : show_rModal}">
        <div id="topLine">
            <div class="topLine_cartInfo">
                {{count}} / {{total}} 元
                <div class="btn" :class=" count &gt; 0 ? '-red': '-green' " @click="show_rModal = true">查看购物车</div>
            </div>
        </div>
        <center>
            <h1>购物</h1>
        </center>
        <div class="productList">
            <div class="productList_item" v-for="(item,i) in products" :key="i"><img :src="item.src"  />
                <div class="item_buy">
                    <div>{{item.name}} / {{item.price}} 元</div>
                    <button v-if="!item.qty" @click="addToCart(item)">添加购物车</button>
                    <button class="-green" v-else="v-else" @click="show_rModal = true">» 已添加 </button>
                </div>
            </div>
        </div>
        <r-modal :show.sync="show_rModal">
            <center>
                <div id="Total">Total {{count}} / {{total}}</div>
             .........完整代码请登录后点击上方下载按钮下载查看