1054425342@qq.com
2 months ago
7 changed files with 622 additions and 448 deletions
@ -1,382 +1,569 @@ |
|||
<template> |
|||
<view class="memorial-detail"> |
|||
<!-- 轮播图区域 --> |
|||
<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="asset-info-card"> |
|||
<view class="card-header"> |
|||
<text class="asset-title">{{ detailInfo.goodsName }}</text> |
|||
</view> |
|||
|
|||
<view class="info-row"> |
|||
<text class="info-label">发行数量：</text> |
|||
<text class="info-value">{{ detailInfo.publishQuantity||0 }}份</text> |
|||
</view> |
|||
|
|||
<view class="divider"></view> |
|||
|
|||
<view class="info-row"> |
|||
<text class="info-label">数字资产所有方：</text> |
|||
<text class="info-value">{{ detailInfo.ownPart||'-' }}</text> |
|||
</view> |
|||
|
|||
<view class="info-row"> |
|||
<text class="info-label">数字资产权利方：</text> |
|||
<text class="info-value">{{ detailInfo.powerPart||'-' }}</text> |
|||
</view> |
|||
<view class="info-row"> |
|||
<text class="info-label">授权品牌：</text> |
|||
<text class="info-value">{{ detailInfo.authorizeBrand||'-' }}</text> |
|||
</view> |
|||
<!-- 收藏信息 --> |
|||
<view class="collection-info"> |
|||
<view class="collection-header">— 收藏信息 —</view> |
|||
<view class="collector-info"> |
|||
<text class="collector-label">收藏者</text> |
|||
<text class="collector-name">{{ detailInfo.nickname||'--' }}</text> |
|||
<text class="collection-number">编号</text> |
|||
<text class="collection-code">{{ detailInfo.code||'--' }}</text> |
|||
<text class="collection-time-label">收藏时间</text> |
|||
<text class="collection-time">{{ detailInfo.activeTime||'--' }}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 认证信息卡片 --> |
|||
<view class="cert-info-card"> |
|||
<view class="cert-header">— 认证信息 —</view> |
|||
|
|||
<view class="cert-row"> |
|||
<text class="cert-label">授权码</text> |
|||
<text class="cert-value">{{ detailInfo.activeCode||"--" }}</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 藏品详情卡片 --> |
|||
<view class="product-detail-card"> |
|||
<view class="product-header">— 藏品详情 —</view> |
|||
<view class="product-content"> |
|||
<view class="" v-html="detailInfo.detailUrl"> |
|||
|
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="memorial-detail"> |
|||
<!-- 轮播图区域 --> |
|||
<view class="content"> |
|||
<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> |
|||
<view class="asset-title"> |
|||
{{ detailInfo.goodsName }} |
|||
</view> |
|||
|
|||
<!-- 发行数量胶囊 --> |
|||
<view class="issue-quantity-pill"> |
|||
<text class="pill-text" |
|||
>发行数量: {{ detailInfo.publishQuantity || 0 }}份</text |
|||
> |
|||
</view> |
|||
|
|||
<!-- 收藏信息区域 --> |
|||
<view class="info-section"> |
|||
<view |
|||
class="info-row" |
|||
style="flex-direction: row; justify-content: space-around" |
|||
> |
|||
<view class="info-item"> |
|||
<text class="info-label">收藏者</text> |
|||
<text class="info-value">{{ |
|||
(userInfo && userInfo.nickname) || "--" |
|||
}}</text> |
|||
</view> |
|||
<view class="info-item"> |
|||
<text class="info-label">编号</text> |
|||
<text class="info-value">{{ detailInfo.code || "--" }}</text> |
|||
</view> |
|||
<view class="info-item"> |
|||
<text class="info-label">收藏时间</text> |
|||
<text class="info-value">{{ detailInfo.activeTime || "--" }}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 分割线 --> |
|||
<view class="section-divider"></view> |
|||
|
|||
<!-- 资产权利信息区域 --> |
|||
<view class="info-section"> |
|||
<view class="info-row"> |
|||
<view class="info-item"> |
|||
<text class="info-label">数字资产所有方</text> |
|||
<text class="info-value">{{ detailInfo.ownPart || "--" }}</text> |
|||
</view> |
|||
<view class="info-item"> |
|||
<text class="info-label">数字资产权利方</text> |
|||
<text class="info-value">{{ detailInfo.powerPart || "--" }}</text> |
|||
</view> |
|||
<view class="info-item"> |
|||
<text class="info-label">授权品牌</text> |
|||
<text class="info-value">{{ |
|||
detailInfo.authorizeBrand || "--" |
|||
}}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 分割线 --> |
|||
<view class="section-divider"></view> |
|||
|
|||
<!-- 授权码和下载按钮区域 --> |
|||
<view class="auth-section"> |
|||
<view class="auth-code-item"> |
|||
<text class="info-label">授权码</text> |
|||
<text class="auth-code-value">{{ |
|||
detailInfo.activeCode || "--" |
|||
}}</text> |
|||
</view> |
|||
<view class="download-button" @click="handleDownload"> |
|||
<text class="download-text">点击下载</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 藏品详情卡片 --> |
|||
<view class="product-detail-card"> |
|||
<view class="product-header">— 藏品详情 —</view> |
|||
<view class="product-content"> |
|||
<view class="" v-html="detailInfo.detailUrl"> </view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "MemorialDetail", |
|||
data() { |
|||
return { |
|||
swiperIndex: 0, |
|||
detailInfo: { |
|||
|
|||
}, |
|||
topBanner: [] |
|||
}; |
|||
}, |
|||
onLoad(options) { |
|||
// 获取传入的参数 |
|||
if (options.id) { |
|||
this.loadDetailInfo(options.id); |
|||
} |
|||
}, |
|||
methods: { |
|||
swiperChange(e) { |
|||
this.swiperIndex = e.detail.current; |
|||
}, |
|||
// 加载详情信息 |
|||
async loadDetailInfo(id) { |
|||
try { |
|||
this.Post({ |
|||
orderChildId: id |
|||
}, `/framework/order/ipOrderDetail`, "DES").then((res) => { |
|||
if (res.code == 200) { |
|||
res.data.detailUrl = this.addImgStyleToHtml(res.data.detailUrl) |
|||
this.detailInfo = res.data; |
|||
this.topBanner = res.data.hdUrl.split(',') |
|||
|
|||
} else { |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: "none", |
|||
}); |
|||
} |
|||
}); |
|||
// 模拟数据加载 |
|||
console.log("加载纪念册详情，ID:", id); |
|||
} catch (error) { |
|||
console.error("加载详情失败:", error); |
|||
uni.showToast({ |
|||
title: "加载失败", |
|||
icon: "none", |
|||
}); |
|||
} |
|||
}, |
|||
|
|||
// 预览主图 |
|||
previewMainImage() { |
|||
const imageUrl = this.showImg(this.detailInfo.image); |
|||
uni.previewImage({ |
|||
urls: [imageUrl], |
|||
current: imageUrl, |
|||
}); |
|||
}, |
|||
|
|||
// 图片路径处理 |
|||
showImg(img) { |
|||
if (!img) return ""; |
|||
if (img.startsWith("http")) { |
|||
return img; |
|||
} |
|||
const NEWAPIURL = "https://epic.js-dyyj.com"; |
|||
return `${NEWAPIURL}${img}`; |
|||
}, |
|||
}, |
|||
}; |
|||
export default { |
|||
name: "MemorialDetail", |
|||
data() { |
|||
return { |
|||
swiperIndex: 0, |
|||
detailInfo: {}, |
|||
topBanner: [], |
|||
userInfo: null, |
|||
}; |
|||
}, |
|||
onLoad(options) { |
|||
let userInfo = uni.getStorageSync("userInfo"); |
|||
if (userInfo) { |
|||
this.userInfo = JSON.parse(userInfo); |
|||
} |
|||
// 获取传入的参数 |
|||
if (options.id) { |
|||
this.loadDetailInfo(options.id); |
|||
} |
|||
}, |
|||
methods: { |
|||
swiperChange(e) { |
|||
this.swiperIndex = e.detail.current; |
|||
}, |
|||
// 加载详情信息 |
|||
async loadDetailInfo(id) { |
|||
try { |
|||
this.Post( |
|||
{ |
|||
orderChildId: id, |
|||
}, |
|||
`/framework/order/ipOrderDetail`, |
|||
"DES" |
|||
).then((res) => { |
|||
if (res.code == 200) { |
|||
res.data.detailUrl = this.addImgStyleToHtml(res.data.detailUrl); |
|||
this.detailInfo = res.data; |
|||
this.topBanner = res.data.hdUrl.split(","); |
|||
} else { |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
icon: "none", |
|||
}); |
|||
} |
|||
}); |
|||
// 模拟数据加载 |
|||
console.log("加载纪念册详情，ID:", id); |
|||
} catch (error) { |
|||
console.error("加载详情失败:", error); |
|||
uni.showToast({ |
|||
title: "加载失败", |
|||
icon: "none", |
|||
}); |
|||
} |
|||
}, |
|||
|
|||
// 预览主图 |
|||
previewMainImage() { |
|||
const imageUrl = this.showImg(this.detailInfo.image); |
|||
uni.previewImage({ |
|||
urls: [imageUrl], |
|||
current: imageUrl, |
|||
}); |
|||
}, |
|||
// 处理下载按钮点击 |
|||
handleDownload() { |
|||
// 获取主图URL |
|||
const imageUrl = this.topBanner[0]; |
|||
console.log(imageUrl); |
|||
// 下载图片到本地 |
|||
uni.downloadFile({ |
|||
url: imageUrl, |
|||
success: (res) => { |
|||
console.log(res); |
|||
if (res.statusCode === 200) { |
|||
// 保存到相册 |
|||
uni.saveImageToPhotosAlbum({ |
|||
filePath: res.tempFilePath, |
|||
success: () => { |
|||
uni.showToast({ |
|||
title: "图片已保存到相册", |
|||
icon: "success", |
|||
}); |
|||
}, |
|||
fail: (err) => { |
|||
uni.showToast({ |
|||
title: "保存失败，请检查权限", |
|||
icon: "none", |
|||
}); |
|||
}, |
|||
}); |
|||
} else { |
|||
uni.showToast({ |
|||
title: "下载失败", |
|||
icon: "none", |
|||
}); |
|||
} |
|||
}, |
|||
fail: (err) => { |
|||
console.log(err); |
|||
uni.showToast({ |
|||
title: "下载失败", |
|||
icon: "none", |
|||
}); |
|||
}, |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.memorial-detail { |
|||
min-height: 100vh; |
|||
background: #f8f9fa; |
|||
padding-bottom: env(safe-area-inset-bottom); |
|||
} |
|||
|
|||
// 主图区域 |
|||
.main-image-section { |
|||
width: 100%; |
|||
height: 600rpx; |
|||
background: #f0f0f0; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
|
|||
.main-image { |
|||
width: 100%; |
|||
height: 100%; |
|||
object-fit: cover; |
|||
} |
|||
} |
|||
|
|||
// 通用卡片样式 |
|||
.asset-info-card, |
|||
.cert-info-card, |
|||
.product-detail-card { |
|||
margin: 20rpx; |
|||
background: white; |
|||
border-radius: 16rpx; |
|||
padding: 32rpx; |
|||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08); |
|||
} |
|||
|
|||
// 数字资产信息卡片 |
|||
.asset-info-card { |
|||
.card-header { |
|||
margin-bottom: 32rpx; |
|||
|
|||
.asset-title { |
|||
font-size: 36rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
line-height: 1.4; |
|||
} |
|||
} |
|||
|
|||
.info-row { |
|||
display: flex; |
|||
margin-bottom: 20rpx; |
|||
align-items: flex-start; |
|||
|
|||
.info-label { |
|||
font-size: 28rpx; |
|||
color: #666; |
|||
margin-right: 16rpx; |
|||
flex-shrink: 0; |
|||
} |
|||
|
|||
.info-value { |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
flex: 1; |
|||
} |
|||
} |
|||
|
|||
.divider { |
|||
height: 1rpx; |
|||
background: #e0e0e0; |
|||
margin: 24rpx 0; |
|||
} |
|||
|
|||
// 收藏信息 |
|||
.collection-info { |
|||
margin-top: 40rpx; |
|||
padding: 32rpx; |
|||
background: #f8f9fa; |
|||
border-radius: 12rpx; |
|||
border: 2rpx solid #e0e0e0; |
|||
|
|||
.collection-header { |
|||
text-align: center; |
|||
font-size: 28rpx; |
|||
color: #666; |
|||
margin-bottom: 24rpx; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.collector-info { |
|||
display: grid; |
|||
grid-template-columns: auto auto; |
|||
gap: 16rpx 24rpx; |
|||
text-align: center; |
|||
|
|||
.collector-label, |
|||
.collection-number, |
|||
.collection-time-label { |
|||
font-size: 24rpx; |
|||
color: #666; |
|||
} |
|||
|
|||
.collector-name, |
|||
.collection-code, |
|||
.collection-time { |
|||
font-size: 26rpx; |
|||
color: #333; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.collection-code { |
|||
font-family: "Courier New", monospace; |
|||
} |
|||
|
|||
.collection-time { |
|||
font-family: "Courier New", monospace; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 认证信息卡片 |
|||
.cert-info-card { |
|||
.cert-header { |
|||
text-align: center; |
|||
font-size: 28rpx; |
|||
color: #666; |
|||
margin-bottom: 32rpx; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.cert-row { |
|||
margin-bottom: 24rpx; |
|||
padding-bottom: 20rpx; |
|||
border-bottom: 1rpx solid #f0f0f0; |
|||
|
|||
&:last-child { |
|||
margin-bottom: 0; |
|||
padding-bottom: 0; |
|||
border-bottom: none; |
|||
} |
|||
|
|||
.cert-label { |
|||
display: block; |
|||
font-size: 26rpx; |
|||
color: #666; |
|||
margin-bottom: 8rpx; |
|||
} |
|||
|
|||
.cert-value { |
|||
display: block; |
|||
font-size: 24rpx; |
|||
color: #333; |
|||
font-family: "Courier New", monospace; |
|||
word-break: break-all; |
|||
line-height: 1.5; |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 藏品详情卡片 |
|||
.product-detail-card { |
|||
.product-header { |
|||
text-align: center; |
|||
font-size: 28rpx; |
|||
color: #666; |
|||
margin-bottom: 32rpx; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.product-content { |
|||
.product-description { |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
line-height: 1.6; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.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: #94fafa; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.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; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
.memorial-detail { |
|||
min-height: 100vh; |
|||
background: #f8f9fa; |
|||
padding-bottom: env(safe-area-inset-bottom); |
|||
} |
|||
|
|||
// 主图区域 |
|||
.main-image-section { |
|||
width: 100%; |
|||
height: 600rpx; |
|||
background: #f0f0f0; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
|
|||
.main-image { |
|||
width: 100%; |
|||
height: 100%; |
|||
object-fit: cover; |
|||
} |
|||
} |
|||
|
|||
// 通用卡片样式 |
|||
.asset-info-card, |
|||
.cert-info-card, |
|||
.product-detail-card { |
|||
margin: 20rpx; |
|||
background: white; |
|||
border-radius: 16rpx; |
|||
padding: 32rpx; |
|||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08); |
|||
} |
|||
.asset-title { |
|||
font-size: 44rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
line-height: 1.4; |
|||
text-align: center; |
|||
margin-top: 45rpx; |
|||
} |
|||
// 数字资产信息卡片 |
|||
.asset-info-card { |
|||
.card-header { |
|||
margin-bottom: 32rpx; |
|||
} |
|||
|
|||
.info-row { |
|||
display: flex; |
|||
margin-bottom: 20rpx; |
|||
align-items: center; |
|||
|
|||
.info-label { |
|||
font-size: 28rpx; |
|||
color: #989898; |
|||
margin-right: 16rpx; |
|||
flex-shrink: 0; |
|||
text-align: center; |
|||
} |
|||
|
|||
.info-value { |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
flex: 1; |
|||
} |
|||
} |
|||
|
|||
.divider { |
|||
height: 1rpx; |
|||
background: #e0e0e0; |
|||
margin: 24rpx 0; |
|||
} |
|||
|
|||
// 收藏信息 |
|||
.collection-info { |
|||
margin-top: 40rpx; |
|||
padding: 32rpx; |
|||
background: #f8f9fa; |
|||
border-radius: 12rpx; |
|||
border: 2rpx solid #e0e0e0; |
|||
|
|||
.collection-header { |
|||
text-align: center; |
|||
font-size: 28rpx; |
|||
color: #666; |
|||
margin-bottom: 24rpx; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.collector-info { |
|||
display: grid; |
|||
grid-template-columns: auto auto; |
|||
gap: 16rpx 24rpx; |
|||
text-align: center; |
|||
|
|||
.collector-label, |
|||
.collection-number, |
|||
.collection-time-label { |
|||
font-size: 24rpx; |
|||
color: #666; |
|||
} |
|||
|
|||
.collector-name, |
|||
.collection-code, |
|||
.collection-time { |
|||
font-size: 26rpx; |
|||
color: #333; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.collection-code { |
|||
font-family: "Courier New", monospace; |
|||
} |
|||
|
|||
.collection-time { |
|||
font-family: "Courier New", monospace; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 认证信息卡片 |
|||
.cert-info-card { |
|||
.cert-header { |
|||
text-align: center; |
|||
font-size: 28rpx; |
|||
color: #666; |
|||
margin-bottom: 32rpx; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.cert-row { |
|||
margin-bottom: 24rpx; |
|||
padding-bottom: 20rpx; |
|||
border-bottom: 1rpx solid #f0f0f0; |
|||
|
|||
&:last-child { |
|||
margin-bottom: 0; |
|||
padding-bottom: 0; |
|||
border-bottom: none; |
|||
} |
|||
|
|||
.cert-label { |
|||
display: block; |
|||
font-size: 26rpx; |
|||
color: #666; |
|||
margin-bottom: 8rpx; |
|||
} |
|||
|
|||
.cert-value { |
|||
display: block; |
|||
font-size: 24rpx; |
|||
color: #333; |
|||
font-family: "Courier New", monospace; |
|||
word-break: break-all; |
|||
line-height: 1.5; |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 藏品详情卡片 |
|||
.product-detail-card { |
|||
.product-header { |
|||
text-align: center; |
|||
font-size: 28rpx; |
|||
color: #000000; |
|||
margin-bottom: 32rpx; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.product-content { |
|||
.product-description { |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
line-height: 1.6; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.banner-content { |
|||
width: 100%; |
|||
height: 1624rpx; |
|||
position: relative; |
|||
|
|||
.top-banner { |
|||
width: 100%; |
|||
height: 100%; |
|||
border-radius: 20rpx; |
|||
} |
|||
|
|||
.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: #94fafa; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.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; |
|||
} |
|||
} |
|||
} |
|||
.content { |
|||
margin: 30rpx; |
|||
background: white; |
|||
border-radius: 16rpx; |
|||
padding: 20rpx; |
|||
box-shadow: 0 4rpx 20rpx #00ff02; |
|||
} |
|||
|
|||
// 发行数量胶囊 |
|||
.issue-quantity-pill { |
|||
display: flex; |
|||
justify-content: center; |
|||
margin: 30rpx 0; |
|||
|
|||
.pill-text { |
|||
background: linear-gradient(135deg, #00fffe, #00ff08); |
|||
border-radius: 50rpx; |
|||
padding: 10rpx 20rpx; |
|||
font-size: 24rpx; |
|||
color: #333333; |
|||
font-weight: 500; |
|||
} |
|||
} |
|||
|
|||
// 信息区域 |
|||
.info-section { |
|||
margin: 20rpx 0; |
|||
|
|||
.info-row { |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 20rpx; |
|||
} |
|||
|
|||
.info-item { |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 8rpx; |
|||
padding: 16rpx; |
|||
align-items: center; |
|||
.info-label { |
|||
font-size: 24rpx; |
|||
color: #989898; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.info-value { |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
font-weight: bold; |
|||
word-break: break-all; |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 分割线 |
|||
.section-divider { |
|||
height: 2rpx; |
|||
background: #e5e5e5; |
|||
margin: 30rpx 0; |
|||
} |
|||
|
|||
// 授权码和下载按钮区域 |
|||
.auth-section { |
|||
margin: 20rpx 0; |
|||
|
|||
.auth-code-item { |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 8rpx; |
|||
padding: 16rpx; |
|||
margin-bottom: 30rpx; |
|||
align-items: center; |
|||
|
|||
.info-label { |
|||
font-size: 24rpx; |
|||
color: #989898; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.auth-code-value { |
|||
font-size: 24rpx; |
|||
color: #333; |
|||
font-family: "Courier New", monospace; |
|||
font-weight: bold; |
|||
word-break: break-all; |
|||
padding: 12rpx; |
|||
border-radius: 8rpx; |
|||
} |
|||
} |
|||
|
|||
.download-button { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
background: linear-gradient(135deg, #00fffe, #00ff08); |
|||
width: 334rpx; |
|||
border-radius: 20rpx; |
|||
padding: 15rpx 40rpx; |
|||
transition: all 0.3s ease; |
|||
margin: 0 auto; |
|||
|
|||
&:active { |
|||
transform: scale(0.95); |
|||
box-shadow: 0 2rpx 10rpx rgba(119, 243, 249, 0.5); |
|||
} |
|||
|
|||
.download-text { |
|||
margin: 0 auto; |
|||
font-size: 28rpx; |
|||
color: #000000; |
|||
font-weight: bold; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
Loading…
Reference in new issue