1054425342@qq.com
3 months ago
11 changed files with 1050 additions and 105 deletions
@ -0,0 +1,706 @@ |
|||||
|
<template> |
||||
|
<view class="detail-container"> |
||||
|
<!-- 轮播图区域 --> |
||||
|
<view class="banner-content"> |
||||
|
<swiper |
||||
|
class="top-banner" |
||||
|
:circular="true" |
||||
|
:interval="6000" |
||||
|
:duration="800" |
||||
|
:indicator-dots="false" |
||||
|
:autoplay="true" |
||||
|
@change="swiperChange" |
||||
|
> |
||||
|
<swiper-item v-for="(item, index) in topBanner" :key="index"> |
||||
|
<image |
||||
|
class="top-banner" |
||||
|
:src="showImg(item)" |
||||
|
mode="aspectFill" |
||||
|
></image> |
||||
|
</swiper-item> |
||||
|
</swiper> |
||||
|
|
||||
|
<view class="dot-container"> |
||||
|
<view |
||||
|
:class="['dot-line', index == swiperIndex ? 'active' : '']" |
||||
|
v-for="(item, index) in topBanner" |
||||
|
:key="index" |
||||
|
></view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 页码指示器 --> |
||||
|
<view class="page-indicator"> |
||||
|
<text class="page-text" |
||||
|
>{{ swiperIndex + 1 }}/{{ topBanner.length }}</text |
||||
|
> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 商品信息区域 --> |
||||
|
<view class="product-info"> |
||||
|
<!-- 标题和标签 --> |
||||
|
<view class="title-section"> |
||||
|
<view class="product-title">食在苏州｜世界美食之都巡礼</view> |
||||
|
<view class="tags-container"> |
||||
|
<view class="limit-tag">限量</view> |
||||
|
<view class="limit-count">1000份</view> |
||||
|
<view class="remaining">剩余 900份</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 价格和收藏 --> |
||||
|
<view class="price-section"> |
||||
|
<view class="price-container"> |
||||
|
<text class="currency">¥</text> |
||||
|
<text class="price">699.00</text> |
||||
|
</view> |
||||
|
<view class="collect-container"> |
||||
|
<image |
||||
|
class="heart-icon" |
||||
|
src="https://epic.js-dyyj.com/uploads/20250728/2f3ae212c01fa3b67be81abc5723cf5c.png" |
||||
|
@click.stop="handleLikeClick(item, index)" |
||||
|
></image> |
||||
|
<text class="collect-count">1700收藏</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 权益信息 --> |
||||
|
<view class="equity-section"> |
||||
|
<view class="equity-row"> |
||||
|
<view class="equity-item"> |
||||
|
<view class="equity-label">创作数字资产所属方者</view> |
||||
|
<view class="equity-value">苏州xxx博物馆</view> |
||||
|
</view> |
||||
|
<view class="equity-item"> |
||||
|
<view class="equity-label">数字资产权力方</view> |
||||
|
<view class="equity-value">江苏大运河见</view> |
||||
|
</view> |
||||
|
<view class="equity-item"> |
||||
|
<view class="equity-label">备案平台</view> |
||||
|
<view class="equity-value">江苏文交所</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 权益信息标题 --> |
||||
|
<view class="equity-title"> |
||||
|
<view class="title-line"></view> |
||||
|
<text class="title-text">权益信息</text> |
||||
|
<view class="title-line"></view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 权益详情 --> |
||||
|
<view class="equity-details"> |
||||
|
<!-- 显示前两个权益项 --> |
||||
|
<view |
||||
|
class="equity-detail-item" |
||||
|
v-for="(item, index) in displayEquityList" |
||||
|
:key="index" |
||||
|
> |
||||
|
<view class="detail-content-wrapper"> |
||||
|
<text class="detail-label">{{ item.label }}</text> |
||||
|
<text class="detail-content">{{ item.content }}</text> |
||||
|
</view> |
||||
|
<!-- 在最后一个显示项的右侧添加展开收起图标 --> |
||||
|
<view |
||||
|
v-if="index === displayEquityList.length - 1" |
||||
|
class="toggle-icon" |
||||
|
@click="toggleEquityExpand" |
||||
|
> |
||||
|
<text class="icon-text">{{ |
||||
|
isEquityExpanded ? "收起" : "展开" |
||||
|
}}</text> |
||||
|
<text class="icon-arrow" :class="{ expanded: isEquityExpanded }" |
||||
|
>▼</text |
||||
|
> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- Tab切换区域 --> |
||||
|
<view class="tab-nav"> |
||||
|
<view |
||||
|
v-for="(tab, index) in tabList" |
||||
|
:key="index" |
||||
|
:class="['tab-item', { active: currentTab === index }]" |
||||
|
@click="switchTab(index)" |
||||
|
> |
||||
|
<text class="tab-text">{{ tab.name }}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="tab-section"> |
||||
|
<!-- Tab导航 --> |
||||
|
|
||||
|
<!-- Tab内容 --> |
||||
|
<view class="tab-content"> |
||||
|
<!-- 登记证书 --> |
||||
|
<view v-if="currentTab === 0" class="tab-panel"> |
||||
|
<view class="certificate-container"> |
||||
|
<image |
||||
|
class="certificate-image" |
||||
|
src="https://epic.js-dyyj.com/uploads/20250731/d7d5be03617e3cce94dc34e8de426395.png" |
||||
|
mode="widthFix" |
||||
|
></image> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- IP资产详情 --> |
||||
|
<view v-if="currentTab === 1" class="tab-panel"> |
||||
|
<view class="info-content"> |
||||
|
<view class="info-item"> |
||||
|
<text class="info-label">IP资产名称：</text> |
||||
|
<text class="info-value">食在苏州｜世界美食之都巡礼</text> |
||||
|
</view> |
||||
|
<view class="info-item"> |
||||
|
<text class="info-label">创作者：</text> |
||||
|
<text class="info-value">苏州xxx博物馆</text> |
||||
|
</view> |
||||
|
<view class="info-item"> |
||||
|
<text class="info-label">发行数量：</text> |
||||
|
<text class="info-value">1000份</text> |
||||
|
</view> |
||||
|
<view class="info-item"> |
||||
|
<text class="info-label">发行时间：</text> |
||||
|
<text class="info-value">2024年6月16日</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 数据商品详情 --> |
||||
|
<view v-if="currentTab === 2" class="tab-panel"> |
||||
|
<image |
||||
|
:src=" |
||||
|
showImg('/uploads/20250731/ecf91ddfb9f89658a7d82e3ff846f71c.png') |
||||
|
" |
||||
|
style="width: 100%" |
||||
|
mode="widthFix" |
||||
|
></image> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 权益信息 --> |
||||
|
<view v-if="currentTab === 3" class="tab-panel"> |
||||
|
<view class="equity-info-content"> |
||||
|
<view |
||||
|
class="equity-info-item" |
||||
|
v-for="(item, index) in equityList" |
||||
|
:key="index" |
||||
|
> |
||||
|
<text class="equity-info-label">{{ item.label }}</text> |
||||
|
<text class="equity-info-value">{{ item.content }}</text> |
||||
|
</view> |
||||
|
<view class="equity-description"> |
||||
|
<text class="description-text"> |
||||
|
本数字文创作品基于区块链技术发行，具有唯一性和不可篡改性。持有者享有以下权益： |
||||
|
1. |
||||
|
数字资产所有权：获得该数字文创作品的完整所有权，包括展示、收藏等权利； |
||||
|
2. |
||||
|
实物权益兑换：可凭此数字资产兑换相应的实物文创产品，包括限量版公仔、纪念品等； |
||||
|
3. |
||||
|
文化体验权益：享受苏州相关文化场所的优惠门票、专属活动参与资格等特殊权益； |
||||
|
4. |
||||
|
增值收益权：作为限量发行的数字资产，具有一定的收藏价值和增值潜力； |
||||
|
5. |
||||
|
社区会员权益：加入专属收藏者社区，享受优先购买新品、参与线下活动等会员特权。 |
||||
|
注：以上权益的具体实施细则以官方最终解释为准，部分权益可能存在时效性限制。 |
||||
|
</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 立即购买按钮 --> |
||||
|
<view class="purchase-section"> |
||||
|
<view class="purchase-button" @click="handlePurchase"> |
||||
|
<text class="purchase-text">立即购买</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
topBanner: [ |
||||
|
"/uploads/20250731/5f6f00e6f037c5ca03423b3ed190c20d.png", |
||||
|
"/uploads/20250731/5f6f00e6f037c5ca03423b3ed190c20d.png", |
||||
|
], |
||||
|
list: [], |
||||
|
swiperIndex: 0, |
||||
|
isEquityExpanded: false, // 权益详情展开状态 |
||||
|
currentTab: 0, // 当前选中的tab索引 |
||||
|
tabList: [ |
||||
|
{ name: "登记证书" }, |
||||
|
{ name: "IP资产详情" }, |
||||
|
{ name: "资源商品详情" }, |
||||
|
{ name: "权益信息详情" }, |
||||
|
], |
||||
|
equityList: [ |
||||
|
// 权益列表数据 |
||||
|
{ label: "权益1：", content: "数字资产*1、数字资产*1" }, |
||||
|
{ label: "权益2：", content: "IP文创公仔*1、IP文创公仔*1" }, |
||||
|
{ label: "权益3：", content: "XX园林门票*1、XX园林门票*1" }, |
||||
|
], |
||||
|
}; |
||||
|
}, |
||||
|
computed: { |
||||
|
// 根据展开状态显示不同数量的权益项 |
||||
|
displayEquityList() { |
||||
|
return this.isEquityExpanded |
||||
|
? this.equityList |
||||
|
: this.equityList.slice(0, 2); |
||||
|
}, |
||||
|
}, |
||||
|
methods: { |
||||
|
swiperChange(e) { |
||||
|
this.swiperIndex = e.detail.current; |
||||
|
}, |
||||
|
|
||||
|
// 切换权益详情展开收起状态 |
||||
|
toggleEquityExpand() { |
||||
|
this.isEquityExpanded = !this.isEquityExpanded; |
||||
|
}, |
||||
|
// 处理购买点击 |
||||
|
handlePurchase() { |
||||
|
console.log("立即购买"); |
||||
|
// 这里可以添加购买逻辑 |
||||
|
}, |
||||
|
// 处理收藏点击 |
||||
|
handleLikeClick(item, index) { |
||||
|
console.log("收藏点击", item, index); |
||||
|
// 这里可以添加收藏逻辑 |
||||
|
}, |
||||
|
// 切换tab |
||||
|
switchTab(index) { |
||||
|
this.currentTab = index; |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.detail-container { |
||||
|
background: #f5f5f5; |
||||
|
min-height: 100vh; |
||||
|
} |
||||
|
|
||||
|
.banner-content { |
||||
|
width: 100%; |
||||
|
height: 700rpx; |
||||
|
position: relative; |
||||
|
|
||||
|
.top-banner { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
|
||||
|
.dot-container { |
||||
|
position: absolute; |
||||
|
bottom: 43rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
width: 100%; |
||||
|
left: 0; |
||||
|
|
||||
|
.dot-line { |
||||
|
width: 52rpx; |
||||
|
height: 4rpx; |
||||
|
margin: 0 8rpx; |
||||
|
background: RGBA(189, 170, 173, 0.8); |
||||
|
|
||||
|
&.active { |
||||
|
background: #ff1e55; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.page-indicator { |
||||
|
position: absolute; |
||||
|
bottom: 20rpx; |
||||
|
right: 20rpx; |
||||
|
// background: rgba(0, 0, 0, 0.5); |
||||
|
border-radius: 10rpx; |
||||
|
padding: 10rpx 20rpx; |
||||
|
|
||||
|
.page-text { |
||||
|
font-size: 24rpx; |
||||
|
color: #fff; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.product-info { |
||||
|
background: white; |
||||
|
padding: 40rpx 30rpx; |
||||
|
margin: 20rpx; |
||||
|
border-radius: 20rpx 20rpx 0 0; |
||||
|
padding-bottom: 20rpx; |
||||
|
|
||||
|
.title-section { |
||||
|
margin-bottom: 30rpx; |
||||
|
|
||||
|
.product-title { |
||||
|
font-size: 31rpx; |
||||
|
font-weight: bold; |
||||
|
color: #000000; |
||||
|
line-height: 1.4; |
||||
|
margin-bottom: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.tags-container { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
flex-wrap: wrap; |
||||
|
|
||||
|
.limit-tag { |
||||
|
background: #ff1e55; |
||||
|
color: white; |
||||
|
padding: 8rpx 16rpx; |
||||
|
font-size: 20rpx; |
||||
|
border-radius: 6rpx 0 0 6rpx; |
||||
|
} |
||||
|
|
||||
|
.limit-count { |
||||
|
background: #f0f0f0; |
||||
|
color: #000000; |
||||
|
padding: 8rpx 16rpx; |
||||
|
font-size: 20rpx; |
||||
|
border-radius: 0rpx 6rpx 6rpx 0; |
||||
|
} |
||||
|
|
||||
|
.remaining { |
||||
|
color: #808080; |
||||
|
font-size: 17rpx; |
||||
|
margin-left: auto; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.price-section { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
margin-bottom: 40rpx; |
||||
|
|
||||
|
.price-container { |
||||
|
display: flex; |
||||
|
align-items: baseline; |
||||
|
|
||||
|
.currency { |
||||
|
font-size: 28rpx; |
||||
|
color: #333; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.price { |
||||
|
font-size: 40rpx; |
||||
|
color: #333; |
||||
|
font-weight: bold; |
||||
|
font-family: "Futura"; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.collect-container { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 10rpx; |
||||
|
|
||||
|
.heart-icon { |
||||
|
width: 35rpx; |
||||
|
height: 29rpx; |
||||
|
transition: all 0.3s ease; |
||||
|
flex-shrink: 0; |
||||
|
|
||||
|
&.liked { |
||||
|
opacity: 1; |
||||
|
filter: hue-rotate(320deg) saturate(2); |
||||
|
} |
||||
|
|
||||
|
&:active { |
||||
|
transform: scale(1.2); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.collect-count { |
||||
|
color: #231815; |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.equity-section { |
||||
|
margin-bottom: 40rpx; |
||||
|
border-top: 0.5rpx solid #e5e5e5; |
||||
|
border-bottom: 0.5rpx solid #e5e5e5; |
||||
|
padding: 40rpx 0; |
||||
|
|
||||
|
.equity-row { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
gap: 20rpx; |
||||
|
|
||||
|
.equity-item { |
||||
|
text-align: left; |
||||
|
|
||||
|
.equity-label { |
||||
|
font-size: 23rpx; |
||||
|
color: #231815; |
||||
|
font-weight: bold; |
||||
|
margin-bottom: 10rpx; |
||||
|
line-height: 1.3; |
||||
|
} |
||||
|
|
||||
|
.equity-value { |
||||
|
font-size: 20rpx; |
||||
|
color: #595757; |
||||
|
font-weight: 500; |
||||
|
line-height: 1.3; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.equity-title { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
margin: 40rpx 0 30rpx; |
||||
|
|
||||
|
.title-line { |
||||
|
width: 30rpx; |
||||
|
height: 2rpx; |
||||
|
background: #ff1e55; |
||||
|
} |
||||
|
|
||||
|
.title-text { |
||||
|
padding: 0 30rpx; |
||||
|
font-size: 25rpx; |
||||
|
color: #ff1e55; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.equity-details { |
||||
|
.equity-detail-item { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
margin-bottom: 20rpx; |
||||
|
line-height: 1.5; |
||||
|
|
||||
|
.detail-content-wrapper { |
||||
|
display: flex; |
||||
|
flex: 1; |
||||
|
|
||||
|
.detail-label { |
||||
|
font-size: 23rpx; |
||||
|
color: #231815; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
.detail-content { |
||||
|
font-size: 23rpx; |
||||
|
color: #231815; |
||||
|
flex: 1; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.toggle-icon { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 8rpx; |
||||
|
cursor: pointer; |
||||
|
padding: 10rpx; |
||||
|
margin-left: 20rpx; |
||||
|
|
||||
|
.icon-text { |
||||
|
font-size: 22rpx; |
||||
|
color: #666; |
||||
|
} |
||||
|
|
||||
|
.icon-arrow { |
||||
|
font-size: 20rpx; |
||||
|
color: #666; |
||||
|
transition: transform 0.3s ease; |
||||
|
transform: rotate(0deg); |
||||
|
|
||||
|
&.expanded { |
||||
|
transform: rotate(180deg); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&:active { |
||||
|
opacity: 0.7; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
// Tab导航 |
||||
|
.tab-nav { |
||||
|
margin: 0 40rpx; |
||||
|
margin-top: 40rpx; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
.tab-item { |
||||
|
padding: 10rpx 20rpx; |
||||
|
text-align: center; |
||||
|
color: #3e3a39; |
||||
|
cursor: pointer; |
||||
|
transition: all 0.3s ease; |
||||
|
|
||||
|
&.active { |
||||
|
background-color: #ff1e55; |
||||
|
color: #fff; |
||||
|
border-radius: 20rpx 20rpx 0 0; |
||||
|
} |
||||
|
|
||||
|
.tab-text { |
||||
|
font-size: 23rpx; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
// Tab切换区域 |
||||
|
.tab-section { |
||||
|
margin: 0 20rpx; |
||||
|
background-color: #fff; |
||||
|
border-radius: 20rpx; |
||||
|
overflow: hidden; |
||||
|
margin-bottom: calc(20px + constant(safe-area-inset-bottom)); |
||||
|
margin-bottom: calc(20px + env(safe-area-inset-bottom)); |
||||
|
|
||||
|
// Tab内容 |
||||
|
.tab-content { |
||||
|
padding: 30rpx; |
||||
|
|
||||
|
.tab-panel { |
||||
|
min-height: 400rpx; |
||||
|
|
||||
|
// 证书容器 |
||||
|
.certificate-container { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
|
||||
|
.certificate-image { |
||||
|
width: 100%; |
||||
|
max-width: 600rpx; |
||||
|
height: auto; |
||||
|
border-radius: 12rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 信息内容 |
||||
|
.info-content { |
||||
|
padding: 20rpx 0; |
||||
|
|
||||
|
.info-item { |
||||
|
display: flex; |
||||
|
margin-bottom: 20rpx; |
||||
|
align-items: flex-start; |
||||
|
|
||||
|
.info-label { |
||||
|
font-size: 28rpx; |
||||
|
color: #666; |
||||
|
min-width: 160rpx; |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
|
|
||||
|
.info-value { |
||||
|
font-size: 28rpx; |
||||
|
color: #333; |
||||
|
flex: 1; |
||||
|
line-height: 1.5; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 权益信息内容 |
||||
|
.equity-info-content { |
||||
|
padding: 20rpx 0; |
||||
|
|
||||
|
.equity-info-item { |
||||
|
display: flex; |
||||
|
margin-bottom: 20rpx; |
||||
|
align-items: flex-start; |
||||
|
|
||||
|
.equity-info-label { |
||||
|
font-size: 28rpx; |
||||
|
color: #666; |
||||
|
min-width: 160rpx; |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
|
|
||||
|
.equity-info-value { |
||||
|
font-size: 28rpx; |
||||
|
color: #333; |
||||
|
flex: 1; |
||||
|
line-height: 1.5; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.equity-description { |
||||
|
margin-top: 30rpx; |
||||
|
padding: 20rpx; |
||||
|
background-color: #f8f9fa; |
||||
|
border-radius: 12rpx; |
||||
|
|
||||
|
.description-text { |
||||
|
font-size: 26rpx; |
||||
|
color: #666; |
||||
|
line-height: 1.6; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 立即购买按钮 |
||||
|
.purchase-section { |
||||
|
position: fixed; |
||||
|
bottom: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
background: white; |
||||
|
padding: 20rpx 30rpx 40rpx; |
||||
|
border-top: 1rpx solid #e5e5e5; |
||||
|
z-index: 100; |
||||
|
padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx); |
||||
|
padding-bottom: calc(constant(safe-area-inset-bottom) + 20rpx); |
||||
|
.purchase-button { |
||||
|
width: 100%; |
||||
|
height: 88rpx; |
||||
|
background: linear-gradient(135deg, #ff1e55 0%, #ff4081 100%); |
||||
|
border-radius: 44rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
box-shadow: 0 8rpx 20rpx rgba(255, 30, 85, 0.3); |
||||
|
transition: all 0.3s ease; |
||||
|
|
||||
|
&:active { |
||||
|
transform: scale(0.98); |
||||
|
box-shadow: 0 4rpx 10rpx rgba(255, 30, 85, 0.2); |
||||
|
} |
||||
|
|
||||
|
.purchase-text { |
||||
|
font-size: 32rpx; |
||||
|
font-weight: bold; |
||||
|
color: white; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 为底部按钮预留空间 |
||||
|
.detail-container { |
||||
|
padding-bottom: 140rpx; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue