购物车结算底部实现

最新推荐文章于 2023-05-21 20:58:34 发布

化华桦

最新推荐文章于 2023-05-21 20:58:34 发布

阅读量209

点赞数

分类专栏： vue 前端文章标签： bootstrap vue.js

本文链接：https://blog.csdn.net/XiuBi_251/article/details/128684572

版权

前端同时被 2 个专栏收录

5 篇文章 1 订阅

订阅专栏

vue

1 篇文章 0 订阅

订阅专栏

<div class="footer-container">
    <!-- 全选区域 -->
    <div class="custom-control custom-checkbox">
      <input type="checkbox" class="custom-control-input" id="fullCheck"/>
      <label class="custom-control-label" for="fullCheck">全选</label>
    </div>

    <!-- 合计区域 -->
    <div>
      <span>合计：</span>
      <span class="amount">￥</span>
    </div>

    <!-- 结算按钮 -->
    <button type="button" class="btn btn-primary btn-settle">结算</button>
</div>


<style lang="less" scoped>
.footer-container {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: #fff;
  border-top: 1px solid #efefef;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
}

.amount {
  font-weight: bold;
  color: red;
}

.btn-settle {
  min-width: 90px;
  height: 38px;
  border-radius: 19px;
}

</style>