购物车（前端静态页面编写）

注意：

1.这里的商品数量 用了一个vant组件 ，要先全局安装， Vue 3 项目，安装 Vant 3： npm i vant@next -S

vant 官网文档 vant-contrib.gitee.io/vant/#/zh-C…

2. 在main.js 全局引入vant 和css样式，之后才能使用
 // 引入vant
import Vant from 'vant';
import 'vant/lib/index.css';

<script>
import Header from "@/components/my/Header.vue";

export default {
  name: "Cart",
  components: { Header },
  data() {
    return {
      checked: true,
      value: 1,
    };
  },
};
</script>
<style lang="less" scoped>
.cart {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  background-color: rgb(238, 237, 237);
  section {
    flex: 1;
    .produs {
      display: flex;
      align-items: center;
      line-height: 1.333333rem;
      border-bottom: 1px #ccc solid;
      .checks {
        display: flex;
        justify-content: center;
        width: 10%;
      }
      span {
        font-size: 0.426667rem;
      }
    }
    .section {
      ul {
        li {
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 2.56rem;
          margin-bottom: 0.266667rem;
          background-color: #ffff;
          .checks {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 10%;
          }
          .imgs {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 20%;
            // background-color: #000;
            img {
              width: 1.973333rem;
              height: 1.973333rem;
            }
          }
          .goodsList {
            width: 70%;
            font-size: 0.32rem;
            display: flex;
            justify-content: center;
            flex-direction: column;
            .goodTtitle,
            .goodPrice {
              display: flex;
              justify-content: space-between;
              margin: 0.266667rem 0.533333rem;
            }
            .goodPrice {
              color: red;
            }
          }
        }
      }
    }
  }
  .edit {
    margin: 0 0.266667rem;
    font-size: 0.426667rem;
  }
  footer {
    background-color: #ffff;
    border-top: 1px #ccc solid;
    display: flex;
    justify-content: space-between;
    height: 1.2rem;
    width: 100vw;
    align-items: center;
    .checks {
      width: 10%;
      display: flex;
      justify-content: center;
    }

    .total {
      font-size: 0.426667rem;
      width: 50%;
      // padding-left: 0.266667rem;
      .goods,
      .total_goods {
        color: #13acf3;
      }
      .add {
        color: #000;
      }
    }
    .count {
      width: 40%;
      line-height: 1.2rem;
      text-align: center;
      background-color: #13acf3;
      color: #ffff;
      font-size: 0.533333rem;
    }
  }
}
</style>