✨ feat(home): 首页粘性布局

src/pages/index/index.vue

@@ -9,17 +9,19 @@
 }
 </route>
 <template>
-  <view class="bg-white overflow-hidden" :style="{ marginTop: safeAreaInsets?.top + 'px' }">
-    <view class="pos-msg-container">
-      <view class="pos-container">
-        <image style="width: 36rpx" src="@/static/images/pos.svg" mode="widthFix"></image>
-        <view class="pos-name">Serbia</view>
-        <image style="width: 36rpx" src="@/static/images/select.svg" mode="widthFix"></image>
-      </view>
-      <view class="msg-info">
-        <image style="width: 76rpx" src="@/static/images/msg.svg" mode="widthFix"></image>
+  <view class="bg-white overflow-hidden pb-tab" :style="{ marginTop: safeAreaInsets?.top + 'px' }">
+    <wd-sticky>
+      <view class="pos-msg-container w-100vw bg-white">
+        <view class="pos-container">
+          <image style="width: 36rpx" src="@/static/images/pos.svg" mode="widthFix"></image>
+          <view class="pos-name">Serbia</view>
+          <image style="width: 36rpx" src="@/static/images/select.svg" mode="widthFix"></image>
+        </view>
+        <view class="msg-info">
+          <image style="width: 76rpx" src="@/static/images/msg.svg" mode="widthFix"></image>
+        </view>
       </view>
-    </view>
+    </wd-sticky>
     <view class="search-container">
       <view class="search-item">
         <image style="width: 40rpx" src="@/static/images/search.svg" mode="widthFix"></image>
@@ -104,20 +106,24 @@
 </script>
 
 <style lang="scss" scoped>
+  :deep(.wd-sticky__container) {
+    top: 0 !important;
+  }
   .hot-selling {
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     justify-content: center;
-    padding: 24rpx 32rpx;
+    padding: 24rpx 0 24rpx 32rpx;
 
     .selling-title {
+      box-sizing: border-box;
       display: flex;
       align-items: center;
       justify-content: space-between;
       width: 100%;
-      padding-right: 5rpx;
+      padding-right: 32rpx;
       font-family: 'PingFang SC';
       font-size: 36rpx;
       font-style: normal;

uno.config.ts

@@ -77,6 +77,7 @@ export default defineConfig({
     ['pt-safe', { 'padding-top': 'env(safe-area-inset-top)' }],
     ['pb-safe', { 'padding-bottom': 'env(safe-area-inset-bottom)' }],
     ['border', { border: '1rpx solid red' }],
+    ['pb-tab', { 'padding-bottom': '100rpx' }],
   ],
 })