feat: 添加按钮组件的倾斜位置属性，更新购物车页面以使用新按钮样式

packages/app/src/components/button-evo.vue

@@ -6,10 +6,11 @@ interface ComponentProps {
   block?: boolean
   color?: string
   size?: 'lg' | 'md' | 'sm'
+  location?: 'left' | 'right'
 }
 const props = withDefaults(
   defineProps<{ customClass?: string; skew?: boolean } & ComponentProps>(),
-  { color: 'primary' },
+  { color: 'primary', location: 'left' },
 )
 const emits = defineEmits<{ click: [] }>()
 const themeVars = { primary: '--evo-theme-primary' }
@@ -24,8 +25,8 @@ const height = computed(() => ({ lg: '2.75rem', md: '2.1875rem' })[props.size] |
 </script>
 <template>
   <button
-    class="left-skew relative bg-transparent hover:bg-transparent h-[--evo-btn-height]!"
-    :class="`${btnClass} ${{ md: 'pl-7! pr-3.5!' }[size] || ''}`"
+    class="relative bg-transparent hover:bg-transparent h-[--evo-btn-height]!"
+    :class="`${btnClass} ${{ md: 'pl-7! pr-3.5!' }[size] || ''} skew skew-${location}`"
     :style="{ '--color': color, '--evo-btn-height': height }"
     :block="block"
     @click="emits('click')"
@@ -40,7 +41,11 @@ const height = computed(() => ({ lg: '2.75rem', md: '2.1875rem' })[props.size] |
 </template>
 <style lang="scss">
 /* 左侧倾斜的按钮 */
-
+// .skew {
+//   &-right {
+//     @apply right-skew;
+//   }
+// }
 .left-skew {
   //   @apply bg-blue-500 text-white px-6 rounded text-center relative;
   //   clip-path: polygon(12% 0%, 100% 0%, 100% 100%, 0% 100%);
@@ -56,4 +61,24 @@ const height = computed(() => ({ lg: '2.75rem', md: '2.1875rem' })[props.size] |
     // @apply opacity-75;
   }
 }
+.skew {
+  @apply border-black  border-1 h-11 pl-8 pr-4.75 opacity-85 box-border border-red;
+}
+.skew-left {
+  &::before {
+    @apply content-empty absolute top-0 right-5 bottom-0 left-1.25 skew-x-154 rounded-tl-1.25 rounded-bl-3.75;
+  }
+  &::after {
+    @apply content-empty absolute top-0 right-0 bottom-0 left-6 w-auto h-auto rounded-2.5 b-none z-0 transform-none;
+  }
+}
+.skew-right {
+  @apply pl-4.75 pr-8;
+  &::before {
+    @apply content-empty absolute top-0 right-1.25 bottom-0 left-5 skew-x-154 rounded-tr-3.75 rounded-br-1.25 border-[#b5b5b5] border-solid;
+  }
+  &::after {
+    @apply content-empty absolute top-0 right-6 bottom-0 left-0 w-auto h-auto rounded-2.5 rounded-tr-0 rounded-br-0 z-0 transform-none border-[#b5b5b5] b-1.5 border-solid border-r-0;
+  }
+}
 </style>

packages/app/src/pages/home/mall/detail/index.vue

@@ -135,8 +135,20 @@ onLoad(async (query: { id: string }) => {
       <wd-img width="100%" mode="widthFix" :src="data?.productDetailsImgUrl"></wd-img>
     </div>
     <BottomAppBar fixed placeholder>
-      <div class="h-[63px] bg-white backdrop-blur-[20px] flex px-3.5 items-center justify-between">
-        <div @click="(show = true), (type = 'add2Cart')">
+      <div
+        class="h-[63px] bg-white backdrop-blur-[20px] flex px-3.5 items-center justify-between gap-2"
+      >
+        <div class="flex-1">
+          <ButtonEvo
+            block
+            color="white"
+            location="right"
+            @click="(show = true), (type = 'add2Cart')"
+          >
+            <span class="text-black/80">加入购物车</span>
+          </ButtonEvo>
+        </div>
+        <!-- <div @click="(show = true), (type = 'add2Cart')">
           <InvertedTrapezoidButton>
             <div
               class="w-20 h-[22px] text-black text-base font-normal font-['PingFang_SC'] leading-tight"
@@ -144,8 +156,8 @@ onLoad(async (query: { id: string }) => {
               加入购物车
             </div>
           </InvertedTrapezoidButton>
-        </div>
-        <div class="w-full">
+        </div> -->
+        <div class="flex-1">
           <!-- <TrapeziumButton size="large">
             <div class="text-white text-base font-normal font-['PingFang_SC'] leading-tight">
               <div class="text-white text-base font-normal font-['PingFang_SC'] leading-tight">