1054425342@qq.com
2 months ago
7 changed files with 622 additions and 448 deletions
@ -1,382 +1,569 @@ |
|||||
<template> |
<template> |
||||
<view class="memorial-detail"> |
<view class="memorial-detail"> |
||||
<!-- 轮播图区域 --> |
<!-- 轮播图区域 --> |
||||
<view class="banner-content"> |
<view class="content"> |
||||
<swiper class="top-banner" :circular="true" :interval="6000" :duration="800" :indicator-dots="false" |
<view class="banner-content"> |
||||
:autoplay="true" @change="swiperChange"> |
<swiper |
||||
<swiper-item v-for="(item, index) in topBanner" :key="index"> |
class="top-banner" |
||||
<image class="top-banner" :src="showImg(item)" mode="aspectFill"></image> |
:circular="true" |
||||
</swiper-item> |
:interval="6000" |
||||
</swiper> |
:duration="800" |
||||
|
:indicator-dots="false" |
||||
<view class="dot-container"> |
:autoplay="true" |
||||
<view :class="['dot-line', index == swiperIndex ? 'active' : '']" v-for="(item, index) in topBanner" |
@change="swiperChange" |
||||
:key="index"></view> |
> |
||||
</view> |
<swiper-item v-for="(item, index) in topBanner" :key="index"> |
||||
|
<image |
||||
<!-- 页码指示器 --> |
class="top-banner" |
||||
<view class="page-indicator"> |
:src="showImg(item)" |
||||
<text class="page-text">{{ swiperIndex + 1 }}/{{ topBanner.length }}</text> |
mode="aspectFill" |
||||
</view> |
></image> |
||||
</view> |
</swiper-item> |
||||
|
</swiper> |
||||
<!-- 数字资产信息卡片 --> |
|
||||
<view class="asset-info-card"> |
<view class="dot-container"> |
||||
<view class="card-header"> |
<view |
||||
<text class="asset-title">{{ detailInfo.goodsName }}</text> |
:class="['dot-line', index == swiperIndex ? 'active' : '']" |
||||
</view> |
v-for="(item, index) in topBanner" |
||||
|
:key="index" |
||||
<view class="info-row"> |
></view> |
||||
<text class="info-label">发行数量：</text> |
</view> |
||||
<text class="info-value">{{ detailInfo.publishQuantity||0 }}份</text> |
</view> |
||||
</view> |
<view class="asset-title"> |
||||
|
{{ detailInfo.goodsName }} |
||||
<view class="divider"></view> |
</view> |
||||
|
|
||||
<view class="info-row"> |
<!-- 发行数量胶囊 --> |
||||
<text class="info-label">数字资产所有方：</text> |
<view class="issue-quantity-pill"> |
||||
<text class="info-value">{{ detailInfo.ownPart||'-' }}</text> |
<text class="pill-text" |
||||
</view> |
>发行数量: {{ detailInfo.publishQuantity || 0 }}份</text |
||||
|
> |
||||
<view class="info-row"> |
</view> |
||||
<text class="info-label">数字资产权利方：</text> |
|
||||
<text class="info-value">{{ detailInfo.powerPart||'-' }}</text> |
<!-- 收藏信息区域 --> |
||||
</view> |
<view class="info-section"> |
||||
<view class="info-row"> |
<view |
||||
<text class="info-label">授权品牌：</text> |
class="info-row" |
||||
<text class="info-value">{{ detailInfo.authorizeBrand||'-' }}</text> |
style="flex-direction: row; justify-content: space-around" |
||||
</view> |
> |
||||
<!-- 收藏信息 --> |
<view class="info-item"> |
||||
<view class="collection-info"> |
<text class="info-label">收藏者</text> |
||||
<view class="collection-header">— 收藏信息 —</view> |
<text class="info-value">{{ |
||||
<view class="collector-info"> |
(userInfo && userInfo.nickname) || "--" |
||||
<text class="collector-label">收藏者</text> |
}}</text> |
||||
<text class="collector-name">{{ detailInfo.nickname||'--' }}</text> |
</view> |
||||
<text class="collection-number">编号</text> |
<view class="info-item"> |
||||
<text class="collection-code">{{ detailInfo.code||'--' }}</text> |
<text class="info-label">编号</text> |
||||
<text class="collection-time-label">收藏时间</text> |
<text class="info-value">{{ detailInfo.code || "--" }}</text> |
||||
<text class="collection-time">{{ detailInfo.activeTime||'--' }}</text> |
</view> |
||||
</view> |
<view class="info-item"> |
||||
</view> |
<text class="info-label">收藏时间</text> |
||||
</view> |
<text class="info-value">{{ detailInfo.activeTime || "--" }}</text> |
||||
|
</view> |
||||
<!-- 认证信息卡片 --> |
</view> |
||||
<view class="cert-info-card"> |
</view> |
||||
<view class="cert-header">— 认证信息 —</view> |
|
||||
|
<!-- 分割线 --> |
||||
<view class="cert-row"> |
<view class="section-divider"></view> |
||||
<text class="cert-label">授权码</text> |
|
||||
<text class="cert-value">{{ detailInfo.activeCode||"--" }}</text> |
<!-- 资产权利信息区域 --> |
||||
</view> |
<view class="info-section"> |
||||
</view> |
<view class="info-row"> |
||||
|
<view class="info-item"> |
||||
<!-- 藏品详情卡片 --> |
<text class="info-label">数字资产所有方</text> |
||||
<view class="product-detail-card"> |
<text class="info-value">{{ detailInfo.ownPart || "--" }}</text> |
||||
<view class="product-header">— 藏品详情 —</view> |
</view> |
||||
<view class="product-content"> |
<view class="info-item"> |
||||
<view class="" v-html="detailInfo.detailUrl"> |
<text class="info-label">数字资产权利方</text> |
||||
|
<text class="info-value">{{ detailInfo.powerPart || "--" }}</text> |
||||
</view> |
</view> |
||||
</view> |
<view class="info-item"> |
||||
</view> |
<text class="info-label">授权品牌</text> |
||||
</view> |
<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> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
export default { |
export default { |
||||
name: "MemorialDetail", |
name: "MemorialDetail", |
||||
data() { |
data() { |
||||
return { |
return { |
||||
swiperIndex: 0, |
swiperIndex: 0, |
||||
detailInfo: { |
detailInfo: {}, |
||||
|
topBanner: [], |
||||
}, |
userInfo: null, |
||||
topBanner: [] |
}; |
||||
}; |
}, |
||||
}, |
onLoad(options) { |
||||
onLoad(options) { |
let userInfo = uni.getStorageSync("userInfo"); |
||||
// 获取传入的参数 |
if (userInfo) { |
||||
if (options.id) { |
this.userInfo = JSON.parse(userInfo); |
||||
this.loadDetailInfo(options.id); |
} |
||||
} |
// 获取传入的参数 |
||||
}, |
if (options.id) { |
||||
methods: { |
this.loadDetailInfo(options.id); |
||||
swiperChange(e) { |
} |
||||
this.swiperIndex = e.detail.current; |
}, |
||||
}, |
methods: { |
||||
// 加载详情信息 |
swiperChange(e) { |
||||
async loadDetailInfo(id) { |
this.swiperIndex = e.detail.current; |
||||
try { |
}, |
||||
this.Post({ |
// 加载详情信息 |
||||
orderChildId: id |
async loadDetailInfo(id) { |
||||
}, `/framework/order/ipOrderDetail`, "DES").then((res) => { |
try { |
||||
if (res.code == 200) { |
this.Post( |
||||
res.data.detailUrl = this.addImgStyleToHtml(res.data.detailUrl) |
{ |
||||
this.detailInfo = res.data; |
orderChildId: id, |
||||
this.topBanner = res.data.hdUrl.split(',') |
}, |
||||
|
`/framework/order/ipOrderDetail`, |
||||
} else { |
"DES" |
||||
uni.showToast({ |
).then((res) => { |
||||
title: res.msg, |
if (res.code == 200) { |
||||
icon: "none", |
res.data.detailUrl = this.addImgStyleToHtml(res.data.detailUrl); |
||||
}); |
this.detailInfo = res.data; |
||||
} |
this.topBanner = res.data.hdUrl.split(","); |
||||
}); |
} else { |
||||
// 模拟数据加载 |
uni.showToast({ |
||||
console.log("加载纪念册详情，ID:", id); |
title: res.msg, |
||||
} catch (error) { |
icon: "none", |
||||
console.error("加载详情失败:", error); |
}); |
||||
uni.showToast({ |
} |
||||
title: "加载失败", |
}); |
||||
icon: "none", |
// 模拟数据加载 |
||||
}); |
console.log("加载纪念册详情，ID:", id); |
||||
} |
} catch (error) { |
||||
}, |
console.error("加载详情失败:", error); |
||||
|
uni.showToast({ |
||||
// 预览主图 |
title: "加载失败", |
||||
previewMainImage() { |
icon: "none", |
||||
const imageUrl = this.showImg(this.detailInfo.image); |
}); |
||||
uni.previewImage({ |
} |
||||
urls: [imageUrl], |
}, |
||||
current: imageUrl, |
|
||||
}); |
// 预览主图 |
||||
}, |
previewMainImage() { |
||||
|
const imageUrl = this.showImg(this.detailInfo.image); |
||||
// 图片路径处理 |
uni.previewImage({ |
||||
showImg(img) { |
urls: [imageUrl], |
||||
if (!img) return ""; |
current: imageUrl, |
||||
if (img.startsWith("http")) { |
}); |
||||
return img; |
}, |
||||
} |
// 处理下载按钮点击 |
||||
const NEWAPIURL = "https://epic.js-dyyj.com"; |
handleDownload() { |
||||
return `${NEWAPIURL}${img}`; |
// 获取主图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> |
</script> |
||||
|
|
||||
<style lang="scss" scoped> |
<style lang="scss" scoped> |
||||
.memorial-detail { |
.memorial-detail { |
||||
min-height: 100vh; |
min-height: 100vh; |
||||
background: #f8f9fa; |
background: #f8f9fa; |
||||
padding-bottom: env(safe-area-inset-bottom); |
padding-bottom: env(safe-area-inset-bottom); |
||||
} |
} |
||||
|
|
||||
// 主图区域 |
// 主图区域 |
||||
.main-image-section { |
.main-image-section { |
||||
width: 100%; |
width: 100%; |
||||
height: 600rpx; |
height: 600rpx; |
||||
background: #f0f0f0; |
background: #f0f0f0; |
||||
display: flex; |
display: flex; |
||||
align-items: center; |
align-items: center; |
||||
justify-content: center; |
justify-content: center; |
||||
|
|
||||
.main-image { |
.main-image { |
||||
width: 100%; |
width: 100%; |
||||
height: 100%; |
height: 100%; |
||||
object-fit: cover; |
object-fit: cover; |
||||
} |
} |
||||
} |
} |
||||
|
|
||||
// 通用卡片样式 |
// 通用卡片样式 |
||||
.asset-info-card, |
.asset-info-card, |
||||
.cert-info-card, |
.cert-info-card, |
||||
.product-detail-card { |
.product-detail-card { |
||||
margin: 20rpx; |
margin: 20rpx; |
||||
background: white; |
background: white; |
||||
border-radius: 16rpx; |
border-radius: 16rpx; |
||||
padding: 32rpx; |
padding: 32rpx; |
||||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08); |
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08); |
||||
} |
} |
||||
|
.asset-title { |
||||
// 数字资产信息卡片 |
font-size: 44rpx; |
||||
.asset-info-card { |
font-weight: 600; |
||||
.card-header { |
color: #333; |
||||
margin-bottom: 32rpx; |
line-height: 1.4; |
||||
|
text-align: center; |
||||
.asset-title { |
margin-top: 45rpx; |
||||
font-size: 36rpx; |
} |
||||
font-weight: 600; |
// 数字资产信息卡片 |
||||
color: #333; |
.asset-info-card { |
||||
line-height: 1.4; |
.card-header { |
||||
} |
margin-bottom: 32rpx; |
||||
} |
} |
||||
|
|
||||
.info-row { |
.info-row { |
||||
display: flex; |
display: flex; |
||||
margin-bottom: 20rpx; |
margin-bottom: 20rpx; |
||||
align-items: flex-start; |
align-items: center; |
||||
|
|
||||
.info-label { |
.info-label { |
||||
font-size: 28rpx; |
font-size: 28rpx; |
||||
color: #666; |
color: #989898; |
||||
margin-right: 16rpx; |
margin-right: 16rpx; |
||||
flex-shrink: 0; |
flex-shrink: 0; |
||||
} |
text-align: center; |
||||
|
} |
||||
.info-value { |
|
||||
font-size: 28rpx; |
.info-value { |
||||
color: #333; |
font-size: 28rpx; |
||||
flex: 1; |
color: #333; |
||||
} |
flex: 1; |
||||
} |
} |
||||
|
} |
||||
.divider { |
|
||||
height: 1rpx; |
.divider { |
||||
background: #e0e0e0; |
height: 1rpx; |
||||
margin: 24rpx 0; |
background: #e0e0e0; |
||||
} |
margin: 24rpx 0; |
||||
|
} |
||||
// 收藏信息 |
|
||||
.collection-info { |
// 收藏信息 |
||||
margin-top: 40rpx; |
.collection-info { |
||||
padding: 32rpx; |
margin-top: 40rpx; |
||||
background: #f8f9fa; |
padding: 32rpx; |
||||
border-radius: 12rpx; |
background: #f8f9fa; |
||||
border: 2rpx solid #e0e0e0; |
border-radius: 12rpx; |
||||
|
border: 2rpx solid #e0e0e0; |
||||
.collection-header { |
|
||||
text-align: center; |
.collection-header { |
||||
font-size: 28rpx; |
text-align: center; |
||||
color: #666; |
font-size: 28rpx; |
||||
margin-bottom: 24rpx; |
color: #666; |
||||
font-weight: 500; |
margin-bottom: 24rpx; |
||||
} |
font-weight: 500; |
||||
|
} |
||||
.collector-info { |
|
||||
display: grid; |
.collector-info { |
||||
grid-template-columns: auto auto; |
display: grid; |
||||
gap: 16rpx 24rpx; |
grid-template-columns: auto auto; |
||||
text-align: center; |
gap: 16rpx 24rpx; |
||||
|
text-align: center; |
||||
.collector-label, |
|
||||
.collection-number, |
.collector-label, |
||||
.collection-time-label { |
.collection-number, |
||||
font-size: 24rpx; |
.collection-time-label { |
||||
color: #666; |
font-size: 24rpx; |
||||
} |
color: #666; |
||||
|
} |
||||
.collector-name, |
|
||||
.collection-code, |
.collector-name, |
||||
.collection-time { |
.collection-code, |
||||
font-size: 26rpx; |
.collection-time { |
||||
color: #333; |
font-size: 26rpx; |
||||
font-weight: 500; |
color: #333; |
||||
} |
font-weight: 500; |
||||
|
} |
||||
.collection-code { |
|
||||
font-family: "Courier New", monospace; |
.collection-code { |
||||
} |
font-family: "Courier New", monospace; |
||||
|
} |
||||
.collection-time { |
|
||||
font-family: "Courier New", monospace; |
.collection-time { |
||||
} |
font-family: "Courier New", monospace; |
||||
} |
} |
||||
} |
} |
||||
} |
} |
||||
|
} |
||||
// 认证信息卡片 |
|
||||
.cert-info-card { |
// 认证信息卡片 |
||||
.cert-header { |
.cert-info-card { |
||||
text-align: center; |
.cert-header { |
||||
font-size: 28rpx; |
text-align: center; |
||||
color: #666; |
font-size: 28rpx; |
||||
margin-bottom: 32rpx; |
color: #666; |
||||
font-weight: 500; |
margin-bottom: 32rpx; |
||||
} |
font-weight: 500; |
||||
|
} |
||||
.cert-row { |
|
||||
margin-bottom: 24rpx; |
.cert-row { |
||||
padding-bottom: 20rpx; |
margin-bottom: 24rpx; |
||||
border-bottom: 1rpx solid #f0f0f0; |
padding-bottom: 20rpx; |
||||
|
border-bottom: 1rpx solid #f0f0f0; |
||||
&:last-child { |
|
||||
margin-bottom: 0; |
&:last-child { |
||||
padding-bottom: 0; |
margin-bottom: 0; |
||||
border-bottom: none; |
padding-bottom: 0; |
||||
} |
border-bottom: none; |
||||
|
} |
||||
.cert-label { |
|
||||
display: block; |
.cert-label { |
||||
font-size: 26rpx; |
display: block; |
||||
color: #666; |
font-size: 26rpx; |
||||
margin-bottom: 8rpx; |
color: #666; |
||||
} |
margin-bottom: 8rpx; |
||||
|
} |
||||
.cert-value { |
|
||||
display: block; |
.cert-value { |
||||
font-size: 24rpx; |
display: block; |
||||
color: #333; |
font-size: 24rpx; |
||||
font-family: "Courier New", monospace; |
color: #333; |
||||
word-break: break-all; |
font-family: "Courier New", monospace; |
||||
line-height: 1.5; |
word-break: break-all; |
||||
} |
line-height: 1.5; |
||||
} |
} |
||||
} |
} |
||||
|
} |
||||
// 藏品详情卡片 |
|
||||
.product-detail-card { |
// 藏品详情卡片 |
||||
.product-header { |
.product-detail-card { |
||||
text-align: center; |
.product-header { |
||||
font-size: 28rpx; |
text-align: center; |
||||
color: #666; |
font-size: 28rpx; |
||||
margin-bottom: 32rpx; |
color: #000000; |
||||
font-weight: 500; |
margin-bottom: 32rpx; |
||||
} |
font-weight: bold; |
||||
|
} |
||||
.product-content { |
|
||||
.product-description { |
.product-content { |
||||
font-size: 28rpx; |
.product-description { |
||||
color: #333; |
font-size: 28rpx; |
||||
line-height: 1.6; |
color: #333; |
||||
} |
line-height: 1.6; |
||||
} |
} |
||||
} |
} |
||||
|
} |
||||
.banner-content { |
|
||||
width: 100%; |
.banner-content { |
||||
height: 700rpx; |
width: 100%; |
||||
position: relative; |
height: 1624rpx; |
||||
|
position: relative; |
||||
.top-banner { |
|
||||
width: 100%; |
.top-banner { |
||||
height: 100%; |
width: 100%; |
||||
} |
height: 100%; |
||||
|
border-radius: 20rpx; |
||||
.dot-container { |
} |
||||
position: absolute; |
|
||||
bottom: 43rpx; |
.dot-container { |
||||
display: flex; |
position: absolute; |
||||
align-items: center; |
bottom: 43rpx; |
||||
justify-content: center; |
display: flex; |
||||
width: 100%; |
align-items: center; |
||||
left: 0; |
justify-content: center; |
||||
|
width: 100%; |
||||
.dot-line { |
left: 0; |
||||
width: 52rpx; |
|
||||
height: 4rpx; |
.dot-line { |
||||
margin: 0 8rpx; |
width: 52rpx; |
||||
background: RGBA(189, 170, 173, 0.8); |
height: 4rpx; |
||||
|
margin: 0 8rpx; |
||||
&.active { |
background: RGBA(189, 170, 173, 0.8); |
||||
background: #94fafa; |
|
||||
} |
&.active { |
||||
} |
background: #94fafa; |
||||
} |
} |
||||
|
} |
||||
.page-indicator { |
} |
||||
position: absolute; |
|
||||
bottom: 20rpx; |
.page-indicator { |
||||
right: 20rpx; |
position: absolute; |
||||
// background: rgba(0, 0, 0, 0.5); |
bottom: 20rpx; |
||||
border-radius: 10rpx; |
right: 20rpx; |
||||
padding: 10rpx 20rpx; |
// background: rgba(0, 0, 0, 0.5); |
||||
|
border-radius: 10rpx; |
||||
.page-text { |
padding: 10rpx 20rpx; |
||||
font-size: 24rpx; |
|
||||
color: #fff; |
.page-text { |
||||
font-weight: 500; |
font-size: 24rpx; |
||||
} |
color: #fff; |
||||
} |
font-weight: 500; |
||||
} |
} |
||||
</style> |
} |
||||
|
} |
||||
|
.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