feat: 商品sku交互开发

src/pages/productDetail/productDetail.vue

@@ -33,13 +33,6 @@ const changeNavbarThreshold = 300 // 滚动到这个高度时改变导航栏颜
 
 const showTip = ref(false)
 
-// 添加通知轮播数据
-const notifications = ref([
-  { id: 1, name: 'Aamir Khan', time: '10s' },
-  { id: 2, name: 'John Smith', time: '30s' },
-  { id: 3, name: 'Maria Garcia', time: '1m' },
-])
-
 onPageScroll((e) => {
   // 根据滚动高度改变导航栏背景色
   if (e.scrollTop > changeNavbarThreshold) {
@@ -49,6 +42,13 @@ onPageScroll((e) => {
     navBgColor.value = 'transparent'
   }
 })
+
+// 添加通知轮播数据
+const notifications = ref([
+  { id: 1, name: 'Aamir Khan', time: '10s' },
+  { id: 2, name: 'John Smith', time: '30s' },
+  { id: 3, name: 'Maria Garcia', time: '1m' },
+])
 // 点击页面任意地方隐藏提示
 function handlePageClick() {
   if (showTip.value) {
@@ -88,6 +88,14 @@ const avatarList = ref([
   '/static/images/avatar.jpg',
 ])
 
+// sku 逻辑
+const showSku = ref(false)
+
+const formData = ref({
+  colorSelect: 1,
+  num: 1,
+})
+
 const dataList = ref([])
 function queryList(pageNo, pageSize) {
   // 此处请求仅为演示，请替换为自己项目中的请求
@@ -129,7 +137,7 @@ function queryList(pageNo, pageSize) {
         class="flex items-center justify-between rounded-t-24rpx from-[#FF3779] to-[#FF334A] bg-gradient-to-br px-24rpx pb-24rpx pt-18rpx text-white"
       >
         <view>
-          <view class="mb-12rpx flex items-center">
+          <view class="mb-12rpx flex items-baseline">
             <text class="text-28rpx">
               Price
             </text>
@@ -259,7 +267,7 @@ function queryList(pageNo, pageSize) {
         </view>
         <view class="flex flex-1 items-center justify-end text-32rpx">
           <view class="relative">
-            <view class="rounded-l-full bg-#2F2D31 px-34rpx py-18rpx text-white">
+            <view class="rounded-l-full bg-#2F2D31 px-34rpx py-18rpx text-white" @click="showSku = true">
               Open Group
             </view>
             <CustomTooltip
@@ -275,6 +283,62 @@ function queryList(pageNo, pageSize) {
       </view>
     </template>
   </z-paging>
+  <wd-action-sheet v-model="showSku" :z-index="9999">
+    <view class="px-24rpx">
+      <view class="mb-16rpx flex items-center gap-24rpx border-b-1 border-b-color-#E1E1E1 border-b-solid py-24rpx">
+        <image
+          src="/static/images/avatar.jpg"
+          class="h-160rpx w-160rpx shrink-0"
+        />
+        <view class="flex-1">
+          <view class="line-clamp-2 mb-32rpx text-28rpx">
+            SUCGLES for iPhone 14 Plus Case with MagSafe [Ultra Strong Magnetic]
+          </view>
+          <view class="flex items-baseline">
+            <view class="text-#FF0010">
+              <text class="text-28rpx">
+                ৳
+              </text>
+              <text class="text-48rpx">
+                1000
+              </text>
+            </view>
+            <view class="ml-20rpx text-28rpx text-#787878 line-through">
+              ৳1999
+            </view>
+          </view>
+        </view>
+      </view>
+      <view class="mb-24rpx border-b-1 border-b-color-#E1E1E1 border-b-solid pb-40rpx">
+        <view class="mb-12rpx text-32rpx">
+          Color
+        </view>
+        <view class="grid grid-cols-4 gap-20rpx">
+          <view v-for="i in 5" :key="i" class="box-border flex flex-col border-1 border-transparent border-dashed bg-#F5F5F7 text-center" :style="{ borderColor: formData.colorSelect === i ? 'var(--wot-color-theme)' : '' }">
+            <view class="h-160rpx w-full">
+              <image
+                src="/static/images/avatar.jpg"
+                class="h-full w-full"
+                mode="aspectFit"
+              />
+            </view>
+            <view class="text-22rpx text-#757575">
+              Black
+            </view>
+          </view>
+        </view>
+      </view>
+      <view class="mb-100rpx flex items-center justify-between text-32rpx">
+        <view>Quantity</view>
+        <wd-input-number v-model="formData.num" />
+      </view>
+      <view class="py-24rpx">
+        <wd-button block>
+          Join Group
+        </wd-button>
+      </view>
+    </view>
+  </wd-action-sheet>
 </template>
 
 <style lang="scss" scoped>

src/style/index.scss

@@ -21,43 +21,3 @@ page {
   // 修改按钮背景色
   // --wot-button-primary-bg-color: green;
 }
-
-// ==================== 认证页面公共样式 ====================
-// 包含登录、注册、忘记密码等页面的通用样式
-
-// 背景图片区域样式
-.auth-bg-section {
-  background-image: url('/static/login-bg.png');
-  background-size: cover;
-  background-position: top;
-  background-repeat: no-repeat;
-  min-height: 28vh; /* 占据上半部分屏幕 */
-}
-
-// 输入框样式 - 使用特殊化命名避免冲突
-:deep(.bandhu-auth-input-field) {
-  height: 72rpx !important;
-  background: #ffffff !important;
-  border-radius: 8rpx !important;
-  border: 2rpx solid rgba(166, 166, 166, 0.65) !important;
-  padding: 0 24rpx !important;
-  font-size: 28rpx !important;
-  display: flex !important;
-  align-items: center !important;
-}
-
-// 主要按钮样式
-:deep(.bandhu-auth-primary-btn) {
-  height: 88rpx !important;
-  border-radius: 44rpx !important;
-  font-size: 32rpx !important;
-  font-weight: bold !important;
-}
-
-// 次要按钮样式（如获取验证码按钮）
-:deep(.bandhu-auth-secondary-btn) {
-  width: 160rpx !important;
-  height: 72rpx !important;
-  border-radius: 12rpx !important;
-  font-size: 24rpx !important;
-}