166 lines
6.0 KiB
Plaintext
166 lines
6.0 KiB
Plaintext
<!-- 全屏遮蔽层 -->
|
||
<view class="overlay-mask" catchtouchmove="preventTouchMove" bindtap="onOverlayTap">
|
||
<view class="overlay-image-wrap">
|
||
<image class="overlay-image" src="./assets/get.png" mode="aspectFit"></image>
|
||
<view class="overlay-blur-top"></view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 淘宝风格商品详情页 -->
|
||
<!-- 商品主图 -->
|
||
<view class="product-image-wrap">
|
||
<image class="product-image" src="./assets/test.png" mode="aspectFill"></image>
|
||
</view>
|
||
|
||
<!-- 商品信息区域 -->
|
||
<scroll-view class="page-scroll" scroll-y enhanced show-scrollbar="{{false}}">
|
||
<!-- 价格区域 -->
|
||
<view class="price-section">
|
||
<view class="price-row">
|
||
<text class="price-symbol">¥</text>
|
||
<text class="price-value">299</text>
|
||
<text class="price-decimal">.00</text>
|
||
<text class="price-original">¥599.00</text>
|
||
<view class="discount-tag">限时5折</view>
|
||
</view>
|
||
<view class="promo-row">
|
||
<view class="promo-tag">跨店满减</view>
|
||
<text class="promo-text">每满200减30</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 商品标题 -->
|
||
<view class="title-section">
|
||
<view class="title-tags">
|
||
<text class="tag tag-brand">品牌</text>
|
||
<text class="tag tag-guarantee">正品保证</text>
|
||
<text class="tag tag-shipping">24h发货</text>
|
||
</view>
|
||
<text class="product-title">2024新款男士轻薄羽绒服 短款立领保暖外套 秋冬季百搭休闲潮牌上衣 加厚防风防水</text>
|
||
</view>
|
||
|
||
<!-- 优惠与配送 -->
|
||
<view class="info-section">
|
||
<view class="info-item">
|
||
<text class="info-label">促销</text>
|
||
<view class="info-content">
|
||
<view class="coupon-row">
|
||
<view class="coupon-tag">满299减20</view>
|
||
<view class="coupon-tag">满499减50</view>
|
||
<view class="coupon-tag">店铺券</view>
|
||
</view>
|
||
</view>
|
||
<text class="info-arrow">›</text>
|
||
</view>
|
||
<view class="info-item">
|
||
<text class="info-label">配送</text>
|
||
<view class="info-content">
|
||
<text class="info-text">广东广州 | 快递: 免运费</text>
|
||
</view>
|
||
<text class="info-arrow">›</text>
|
||
</view>
|
||
<view class="info-item">
|
||
<text class="info-label">服务</text>
|
||
<view class="info-content">
|
||
<text class="info-text">7天无理由 · 运费险 · 极速退款</text>
|
||
</view>
|
||
<text class="info-arrow">›</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- SKU选择区域 -->
|
||
<view class="sku-section">
|
||
<view class="sku-item">
|
||
<text class="sku-label">颜色分类</text>
|
||
<view class="sku-options">
|
||
<view class="sku-option sku-option-selected">黑色</view>
|
||
<view class="sku-option">深灰色</view>
|
||
<view class="sku-option">卡其色</view>
|
||
<view class="sku-option">军绿色</view>
|
||
</view>
|
||
</view>
|
||
<view class="sku-item">
|
||
<text class="sku-label">尺码</text>
|
||
<view class="sku-options">
|
||
<view class="sku-option sku-option-selected">M</view>
|
||
<view class="sku-option">L</view>
|
||
<view class="sku-option">XL</view>
|
||
<view class="sku-option">2XL</view>
|
||
<view class="sku-option">3XL</view>
|
||
</view>
|
||
</view>
|
||
<view class="sku-item">
|
||
<text class="sku-label">数量</text>
|
||
<view class="quantity-selector">
|
||
<text class="qty-btn">−</text>
|
||
<text class="qty-value">1</text>
|
||
<text class="qty-btn">+</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 店铺信息 -->
|
||
<view class="shop-section">
|
||
<view class="shop-info">
|
||
<image class="shop-logo" src="https://img.alicdn.com/imgextra/i3/O1CN01Wr5Kxq1NqSGZXMKBf_!!6000000001621-2-tps-120-120.png" mode="aspectFill"></image>
|
||
<view class="shop-detail">
|
||
<view class="shop-name-row">
|
||
<text class="shop-name">潮流前线官方旗舰店</text>
|
||
<view class="shop-badge">品牌店</view>
|
||
</view>
|
||
<view class="shop-stats">
|
||
<text class="shop-stat">描述 4.8</text>
|
||
<text class="shop-stat">服务 4.8</text>
|
||
<text class="shop-stat">物流 4.9</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="shop-actions">
|
||
<view class="shop-btn shop-btn-all">全部宝贝</view>
|
||
<view class="shop-btn shop-btn-follow">关注店铺</view>
|
||
<view class="shop-btn shop-btn-enter">进店逛逛</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 商品详情 Tab -->
|
||
<view class="detail-tabs">
|
||
<view class="detail-tab detail-tab-active">商品详情</view>
|
||
<view class="detail-tab">用户评价(1280)</view>
|
||
<view class="detail-tab">问大家</view>
|
||
</view>
|
||
|
||
<!-- 商品详情图片 -->
|
||
<view class="detail-images">
|
||
<image class="detail-img" src="https://via.placeholder.com/750x800/FFF5F0/333333?text=产品细节图1" mode="widthFix"></image>
|
||
<image class="detail-img" src="https://via.placeholder.com/750x600/FFF5F0/333333?text=产品细节图2" mode="widthFix"></image>
|
||
<image class="detail-img" src="https://via.placeholder.com/750x900/FFF5F0/333333?text=产品细节图3" mode="widthFix"></image>
|
||
<image class="detail-img" src="https://via.placeholder.com/750x700/FFF5F0/333333?text=尺码表" mode="widthFix"></image>
|
||
<image class="detail-img" src="https://via.placeholder.com/750x800/FFF5F0/333333?text=产品实拍图4" mode="widthFix"></image>
|
||
</view>
|
||
|
||
<!-- 底部占位 -->
|
||
<view class="bottom-placeholder"></view>
|
||
</scroll-view>
|
||
|
||
<!-- 底部操作栏 -->
|
||
<view class="bottom-bar">
|
||
<view class="bar-icons">
|
||
<view class="bar-icon">
|
||
<text class="bar-icon-symbol">♡</text>
|
||
<text class="bar-icon-label">收藏</text>
|
||
</view>
|
||
<view class="bar-icon">
|
||
<text class="bar-icon-symbol">◐</text>
|
||
<text class="bar-icon-label">购物车</text>
|
||
</view>
|
||
<view class="bar-icon">
|
||
<text class="bar-icon-symbol">◉</text>
|
||
<text class="bar-icon-label">店铺</text>
|
||
</view>
|
||
</view>
|
||
<view class="bar-buttons">
|
||
<view class="bar-btn bar-btn-cart">加入购物车</view>
|
||
<view class="bar-btn bar-btn-buy">立即购买</view>
|
||
</view>
|
||
</view>
|