shop-app/src/pages/cart/cart.vue

<route lang="json5">
{
  layout: 'tabbar',
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '%tabbar.cart%',
  },
}
</route>
<script setup lang="ts">
  import { t } from '@/locale'
  const { safeAreaInsets } = uni.getSystemInfoSync()
</script>
<template>
  <view
    class="pb-tab bg-white overflow-hidden box-border"
    :style="{ marginTop: safeAreaInsets?.top + 'px' }"
  >
    <wd-sticky>
      <view class="nav-bar bg-white w-100vw">
        <view class="cart-pos">
          <view class="text">{{ t('tabbar.cart') }}</view>
          <view class="pos">
            <image class="w-36rpx" src="@/static/images/cart/pos.svg" mode="widthFix"></image>
            <view class="address-name">{{ t('cart.homeName') }}</view>
            <image class="w-36rpx" src="@/static/images/cart/right.svg" mode="widthFix"></image>
          </view>
        </view>
        <view class="manage-cart">{{ t('cart.manageCart') }}</view>
      </view>
    </wd-sticky>

    <view class="cart-list"></view>
    <view class="cart-bottom-area pb-tab">
      <view class="cart-control">
        <view class="icon"></view>
        <view class="text">{{ t('cart.selectAll') }}</view>
        <view class="price">
          {{ t('cart.totalPrice') }}
          <view class="price-text flex">
            {{ t('cart.priceUint') }}
            <view v-format.price class="price-num">83.97</view>
          </view>
        </view>
        <view class="button">{{ t('cart.settlement') }}</view>
      </view>
    </view>
  </view>
</template>
<style lang="scss" scoped>
  :deep(.wd-sticky__container) {
    top: 0 !important;
  }

  .cart-list {
    height: 100vh;
    margin-bottom: 130rpx;
  }

  .cart-bottom-area {
    position: fixed;
    bottom: 0;
    box-sizing: border-box;
    width: 750rpx;
    background: $shop-white;

    .cart-control {
      box-sizing: border-box;
      display: flex;
      align-items: center;
      width: 750rpx;
      height: 120rpx;
      padding: 16rpx 32rpx;
      border-bottom: 2rpx solid var(--f-2-f-2-f-2, $shop-bg-line);

      .icon {
        box-sizing: border-box;
        width: 42rpx;
        height: 42rpx;
        margin-right: 16rpx;
        border: 4rpx solid $shop-bg-line;
        border-radius: 50%;
      }

      .text {
        margin-right: 96rpx;
        font-family: 'PingFang SC';
        font-size: 24rpx;
        font-style: normal;
        font-weight: 400;
        line-height: 40rpx;
        color: $shop-text-6;
      }

      .price {
        width: 142rpx;
        margin-right: 24rpx;
        font-family: 'PingFang SC';
        font-size: 28rpx;
        font-style: normal;
        font-weight: 400;
        line-height: 44rpx;
        color: var(--666, $shop-text-6);
        text-align: center;

        .price-text {
          font-family: 'PingFang SC';
          font-size: 28rpx;
          font-style: normal;
          font-weight: 500;
          line-height: 44rpx; /* 157.143% */
          color: var(--ff-4-c-1-b, $shop-primary);
          text-align: center;
        }
      }

      .button {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 260rpx;
        height: 88rpx;
        font-family: 'PingFang SC';
        font-size: 32rpx;
        font-style: normal;
        font-weight: 600;
        line-height: 48rpx; /* 150% */
        color: #fff;
        text-align: center;
        text-transform: capitalize;
        background: linear-gradient(270deg, $shop-primary 0%, $shop-help 100%);
        border-radius: 42rpx;
      }
    }
  }

  .nav-bar {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 88rpx;
    padding: 18rpx 32rpx;

    .manage-cart {
      font-family: 'PingFang SC';
      font-size: 28rpx;
      font-style: normal;
      font-weight: 400;
      line-height: 44rpx; /* 157.143% */
      color: var(--666, $shop-text-6);
      text-align: right;
      text-transform: capitalize;
    }

    .cart-pos {
      display: flex;
      align-items: center;

      .text {
        font-family: 'PingFang SC';
        font-size: 36rpx;
        font-style: normal;
        font-weight: 600;
        line-height: 26rpx;
        color: var($shop-text-3, #333333);
      }

      .pos {
        box-sizing: border-box;
        display: flex;
        gap: 8rpx;
        align-items: center;
        align-self: stretch;
        height: 52rpx;
        padding: 10rpx 16rpx;
        margin-left: 32rpx;
        font-family: 'PingFang SC';
        font-size: 24rpx;
        font-style: normal;
        font-weight: 400;
        line-height: 40rpx; /* 166.667% */
        color: var(--666, $shop-text-6);
        background: var(--f-2-f-2-f-2, $shop-bg-line);
        border-radius: 200rpx;
      }
    }
  }
</style>