151 lines
5.1 KiB
Plaintext
151 lines
5.1 KiB
Plaintext
<!-- 全屏遮蔽层 -->
|
||
<view class="overlay-mask" catchtouchmove="preventTouchMove" bindtap="onOverlayTap">
|
||
<view class="overlay-image-wrap">
|
||
<image class="overlay-image" src="./assets/get.png" mode="aspectFill"></image>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 淘宝风格商品详情页 -->
|
||
<!-- 商品主图 -->
|
||
<view class="product-image-wrap">
|
||
<image class="product-image" src="./assets/test.jpg" 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">89</text>
|
||
<text class="price-decimal">.22起</text>
|
||
<text class="price-original">优惠前¥258起</text>
|
||
<view class="discount-tag">已售1000+</view>
|
||
</view>
|
||
<view class="promo-row">
|
||
<view class="promo-tag">平台礼金补贴</view>
|
||
<text class="promo-text">补贴21元 即时到账</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">药房直售</text>
|
||
</view>
|
||
<text class="product-title">吉林敖东控糖胶囊益壹生牌怡络和胶囊官方旗舰店正品药房直售 9gv</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">淘金币已抵2.58元</view>
|
||
<view class="coupon-tag">限时立减145.2</view>
|
||
<view class="coupon-tag">国家贴息3期免息</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">预计明天发货 | 承诺48小时内发货 | 多仓发货</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">1盒</view>
|
||
<view class="sku-option">2盒装</view>
|
||
<view class="sku-option">3盒装</view>
|
||
<view class="sku-option">5盒装</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.9</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">用户评价(15)</view>
|
||
<view class="detail-tab">问大家</view>
|
||
</view>
|
||
|
||
<!-- 商品详情图片 -->
|
||
<view class="detail-images">
|
||
<image class="detail-img" src="./assets/test.jpg" 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">收藏 94</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>
|