吸顶

src/views/item/index.vue

@@ -14,80 +14,82 @@
         </div>
       </div>
       <img v-if="carousel && carousel.length > 0" :src="carousel[carouselIndex]" alt="" class="carousel-img" />
-      <div class="head-right flex-column-between">
-        <div>
-          <div class="right-title">{{ dataInfo.itemName || '' }}</div>
-          <div class="right-num">商品库存 {{ dataInfo.stock || 0 }}套</div>
-          <div class="right-price flex-row-between">
-            <div class="flex-row-start">
-              <div class="price1">
-                <span>¥</span>
-                <span style="font-size: 24px">{{ dataInfo.standardPrice || 0 }}</span>
+      <el-affix :offset="0">
+        <div class="head-right flex-column-between">
+          <div>
+            <div class="right-title">{{ dataInfo.itemName || '' }}</div>
+            <div class="right-num">商品库存 {{ dataInfo.stock || 0 }}套</div>
+            <div class="right-price flex-row-between">
+              <div class="flex-row-start">
+                <div class="price1">
+                  <span>¥</span>
+                  <span style="font-size: 24px">{{ dataInfo.standardPrice || 0 }}</span>
+                </div>
+                <div class="price2">平台价</div>
+                <div class="price3">
+                  <span>¥</span>
+                  <span style="font-size: 16px">{{ dataInfo.midRangePrice || 0 }}</span>
+                </div>
               </div>
-              <div class="price2">平台价</div>
-              <div class="price3">
-                <span>¥</span>
-                <span style="font-size: 16px">{{ dataInfo.midRangePrice || 0 }}</span>
+              <div class="right-collect flex-row-start" @click="editCollection">
+                <el-icon v-if="collection" :size="16" color="#e7000b"><StarFilled /></el-icon>
+                <el-icon v-else class="icon-star" :size="16"><Star /></el-icon>
+                <!-- <img src="@/assets/images/dark.svg" alt="" /> -->
+                <span>{{ collection ? '已收藏' : '收藏' }}</span>
               </div>
             </div>
-            <div class="right-collect flex-row-start" @click="editCollection">
-              <el-icon v-if="collection" :size="16" color="#e7000b"><StarFilled /></el-icon>
-              <el-icon v-else class="icon-star" :size="16"><Star /></el-icon>
-              <!-- <img src="@/assets/images/dark.svg" alt="" /> -->
-              <span>{{ collection ? '已收藏' : '收藏' }}</span>
-            </div>
-          </div>
-          <div class="address flex-row-start">
-            <img class="address-img" src="@/assets/images/item1.png" alt="" />
-            <div style="margin-right: 10px">配送至</div>
-            <el-cascader v-model="regionCodes" :options="regionData as any" :placeholder="'请选择省/市/区'" style="width: 260px" />
-            <!-- <el-icon color="#000000" size="15">
+            <div class="address flex-row-start">
+              <img class="address-img" src="@/assets/images/item1.png" alt="" />
+              <div style="margin-right: 10px">配送至</div>
+              <el-cascader v-model="regionCodes" :options="regionData as any" :placeholder="'请选择省/市/区'" style="width: 260px" />
+              <!-- <el-icon color="#000000" size="15">
               <ArrowDown />
             </el-icon> -->
-          </div>
-          <div class="specs-bos">
-            <div class="specs-list">
-              <div>商品编号</div>
-              <div class="specs-item hig">
-                {{ dataInfo.productNo }}
-              </div>
-              <div class="specs-box"></div>
             </div>
-            <div class="specs-list">
-              <div>单位</div>
-              <div class="specs-item hig">
-                {{ dataInfo.unitName }}
+            <div class="specs-bos">
+              <div class="specs-list">
+                <div>商品编号</div>
+                <div class="specs-item hig">
+                  {{ dataInfo.productNo }}
+                </div>
+                <div class="specs-box"></div>
               </div>
-              <div class="specs-box"></div>
-            </div>
-            <div class="specs-list">
-              <div>规格型号</div>
-              <div class="specs-item hig">
-                {{ dataInfo.specification }}
+              <div class="specs-list">
+                <div>单位</div>
+                <div class="specs-item hig">
+                  {{ dataInfo.unitName }}
+                </div>
+                <div class="specs-box"></div>
+              </div>
+              <div class="specs-list">
+                <div>规格型号</div>
+                <div class="specs-item hig">
+                  {{ dataInfo.specification }}
+                </div>
+                <div class="specs-box"></div>
+              </div>
+              <div class="specs-list">
+                <div>UPC(69)条码</div>
+                <div class="specs-item hig">
+                  {{ dataInfo.upcBarcode }}
+                </div>
+                <div class="specs-box"></div>
               </div>
-              <div class="specs-box"></div>
             </div>
-            <div class="specs-list">
-              <div>UPC(69)条码</div>
-              <div class="specs-item hig">
-                {{ dataInfo.upcBarcode }}
+            <div class="number-bos">
+              <div>数量</div>
+              <div class="flex-row-start number-box">
+                <el-input-number v-model="num" :min="1" :max="10" @change="handleChange" />
+                <div style="margin-left: 10px">本产品限购2件</div>
               </div>
-              <div class="specs-box"></div>
             </div>
           </div>
-          <div class="number-bos">
-            <div>数量</div>
-            <div class="flex-row-start number-box">
-              <el-input-number v-model="num" :min="1" :max="10" @change="handleChange" />
-              <div style="margin-left: 10px">本产品限购2件</div>
-            </div>
+          <div class="bnt-bos flex-row-start">
+            <div @click="onCart">加入购物车</div>
+            <!-- <div>立即购买</div> -->
           </div>
         </div>
-        <div class="bnt-bos flex-row-start">
-          <div @click="onCart">加入购物车</div>
-          <!-- <div>立即购买</div> -->
-        </div>
-      </div>
+      </el-affix>
     </div>
     <div class="nav-bos flex-row-start">
       <div @click="onNav(index)" v-for="(item, index) in navList" :key="index" :class="navIndex == index ? 'hig' : ''">{{ item.title }}</div>
@@ -307,7 +309,6 @@ const onCart = () => {
   });
 };
 </script>
-
 <style lang="scss" scoped>
 .shop-pages {
   width: 1200px;
@@ -525,6 +526,9 @@ const onCart = () => {
   .pcDetail {
     width: 696px;
     margin-top: 20px;
+    :deep(img) {
+      width: 100% !important;
+    }
   }
 
   .service {