1054425342@qq.com
2 months ago
10 changed files with 2105 additions and 2159 deletions
@ -1,339 +1,382 @@ |
|||||
<template> |
<template> |
||||
<view class="memorial-detail"> |
<view class="memorial-detail"> |
||||
<!-- 主图区域 --> |
<!-- 轮播图区域 --> |
||||
<view class="main-image-section"> |
<view class="banner-content"> |
||||
<image |
<swiper class="top-banner" :circular="true" :interval="6000" :duration="800" :indicator-dots="false" |
||||
:src="showImg(detailInfo.image)" |
:autoplay="true" @change="swiperChange"> |
||||
mode="aspectFill" |
<swiper-item v-for="(item, index) in topBanner" :key="index"> |
||||
class="main-image" |
<image class="top-banner" :src="showImg(item)" mode="aspectFill"></image> |
||||
@click="previewMainImage" |
</swiper-item> |
||||
/> |
</swiper> |
||||
</view> |
|
||||
|
<view class="dot-container"> |
||||
<!-- 数字资产信息卡片 --> |
<view :class="['dot-line', index == swiperIndex ? 'active' : '']" v-for="(item, index) in topBanner" |
||||
<view class="asset-info-card"> |
:key="index"></view> |
||||
<view class="card-header"> |
</view> |
||||
<text class="asset-title">{{ detailInfo.title }}</text> |
|
||||
</view> |
<!-- 页码指示器 --> |
||||
|
<view class="page-indicator"> |
||||
<view class="info-row"> |
<text class="page-text">{{ swiperIndex + 1 }}/{{ topBanner.length }}</text> |
||||
<text class="info-label">发行数量：</text> |
</view> |
||||
<text class="info-value">{{ detailInfo.totalSupply }}份</text> |
</view> |
||||
</view> |
|
||||
|
<!-- 数字资产信息卡片 --> |
||||
<view class="divider"></view> |
<view class="asset-info-card"> |
||||
|
<view class="card-header"> |
||||
<view class="info-row"> |
<text class="asset-title">{{ detailInfo.goodsName }}</text> |
||||
<text class="info-label">数字资产所有方：</text> |
</view> |
||||
<text class="info-value">{{ detailInfo.owner }}</text> |
|
||||
</view> |
<view class="info-row"> |
||||
|
<text class="info-label">发行数量：</text> |
||||
<view class="info-row"> |
<text class="info-value">{{ detailInfo.publishQuantity||0 }}份</text> |
||||
<text class="info-label">数字资产权利方：</text> |
</view> |
||||
<text class="info-value">{{ detailInfo.rightHolder }}</text> |
|
||||
</view> |
<view class="divider"></view> |
||||
|
|
||||
<view class="info-row"> |
<view class="info-row"> |
||||
<text class="info-label">数字资产所有方：</text> |
<text class="info-label">数字资产所有方：</text> |
||||
<text class="info-value">{{ detailInfo.assetOwner }}</text> |
<text class="info-value">{{ detailInfo.ownPart||'-' }}</text> |
||||
</view> |
</view> |
||||
|
|
||||
<!-- 收藏信息 --> |
<view class="info-row"> |
||||
<view class="collection-info"> |
<text class="info-label">数字资产权利方：</text> |
||||
<view class="collection-header">— 收藏信息 —</view> |
<text class="info-value">{{ detailInfo.powerPart||'-' }}</text> |
||||
<view class="collector-info"> |
</view> |
||||
<text class="collector-label">收藏者</text> |
<view class="info-row"> |
||||
<text class="collector-name">{{ detailInfo.collector }}</text> |
<text class="info-label">授权品牌：</text> |
||||
<text class="collection-number">编号</text> |
<text class="info-value">{{ detailInfo.authorizeBrand||'-' }}</text> |
||||
<text class="collection-code">{{ detailInfo.collectionCode }}</text> |
</view> |
||||
<text class="collection-time-label">收藏时间</text> |
<!-- 收藏信息 --> |
||||
<text class="collection-time">{{ detailInfo.collectionTime }}</text> |
<view class="collection-info"> |
||||
</view> |
<view class="collection-header">— 收藏信息 —</view> |
||||
</view> |
<view class="collector-info"> |
||||
</view> |
<text class="collector-label">收藏者</text> |
||||
|
<text class="collector-name">{{ detailInfo.nickname||'--' }}</text> |
||||
<!-- 认证信息卡片 --> |
<text class="collection-number">编号</text> |
||||
<view class="cert-info-card"> |
<text class="collection-code">{{ detailInfo.code||'--' }}</text> |
||||
<view class="cert-header">— 认证信息 —</view> |
<text class="collection-time-label">收藏时间</text> |
||||
|
<text class="collection-time">{{ detailInfo.activeTime||'--' }}</text> |
||||
<view class="cert-row"> |
</view> |
||||
<text class="cert-label">权证码</text> |
</view> |
||||
<text class="cert-value">{{ detailInfo.certificateCode }}</text> |
</view> |
||||
</view> |
|
||||
|
<!-- 认证信息卡片 --> |
||||
<view class="cert-row"> |
<view class="cert-info-card"> |
||||
<text class="cert-label">合约地址</text> |
<view class="cert-header">— 认证信息 —</view> |
||||
<text class="cert-value">{{ detailInfo.contractAddress }}</text> |
|
||||
</view> |
<view class="cert-row"> |
||||
|
<text class="cert-label">授权码</text> |
||||
<view class="cert-row"> |
<text class="cert-value">{{ detailInfo.activeCode||"--" }}</text> |
||||
<text class="cert-label">交易HASH</text> |
</view> |
||||
<text class="cert-value">{{ detailInfo.transactionHash }}</text> |
</view> |
||||
</view> |
|
||||
|
<!-- 藏品详情卡片 --> |
||||
<view class="cert-row"> |
<view class="product-detail-card"> |
||||
<text class="cert-label">钱包地址</text> |
<view class="product-header">— 藏品详情 —</view> |
||||
<text class="cert-value">{{ detailInfo.walletAddress }}</text> |
<view class="product-content"> |
||||
</view> |
<view class="" v-html="detailInfo.detailUrl"> |
||||
</view> |
|
||||
|
</view> |
||||
<!-- 藏品详情卡片 --> |
</view> |
||||
<view class="product-detail-card"> |
</view> |
||||
<view class="product-header">— 藏品详情 —</view> |
</view> |
||||
<view class="product-content"> |
|
||||
<!-- 这里可以放置藏品的详细描述内容 --> |
|
||||
<text class="product-description">{{ detailInfo.description }}</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
export default { |
export default { |
||||
name: "MemorialDetail", |
name: "MemorialDetail", |
||||
data() { |
data() { |
||||
return { |
return { |
||||
detailInfo: { |
swiperIndex: 0, |
||||
id: "", |
detailInfo: { |
||||
title: "这里是数字资产的名称", |
|
||||
totalSupply: "2000", |
}, |
||||
owner: "XXX博物馆", |
topBanner: [] |
||||
rightHolder: "江苏大运河公司", |
}; |
||||
assetOwner: "江苏大运河公司", |
}, |
||||
collector: "XXX用户", |
onLoad(options) { |
||||
collectionCode: "#001-0050/1000", |
// 获取传入的参数 |
||||
collectionTime: "2025-085-04 15:20:20", |
if (options.id) { |
||||
certificateCode: "SUA-DA-01-20250729A123456-001-0050/1000-v1", |
this.loadDetailInfo(options.id); |
||||
contractAddress: "0xd4efaba236f7c110fe85fcbcde5489a7a3c71ec3", |
} |
||||
transactionHash: "0xd412da236f7c110fe81ewl5fcbcde5489a7a3c7", |
}, |
||||
walletAddress: "0x8df5d733a0dd127022f7740be4f9c10ec8a23b", |
methods: { |
||||
image: "/uploads/20250729/42fe2364167c2342076c4e094df3d288.png", |
swiperChange(e) { |
||||
description: "这里是藏品的详细描述信息...", |
this.swiperIndex = e.detail.current; |
||||
}, |
}, |
||||
}; |
// 加载详情信息 |
||||
}, |
async loadDetailInfo(id) { |
||||
onLoad(options) { |
try { |
||||
// 获取传入的参数 |
this.Post({ |
||||
if (options.id) { |
orderChildId: id |
||||
this.loadDetailInfo(options.id); |
}, `/framework/order/ipOrderDetail`, "DES").then((res) => { |
||||
} |
if (res.code == 200) { |
||||
}, |
res.data.detailUrl = this.addImgStyleToHtml(res.data.detailUrl) |
||||
methods: { |
this.detailInfo = res.data; |
||||
// 加载详情信息 |
this.topBanner = res.data.hdUrl.split(',') |
||||
async loadDetailInfo(id) { |
|
||||
try { |
} else { |
||||
// 这里应该调用实际的API获取详情数据 |
uni.showToast({ |
||||
// const response = await this.getMemorialDetail(id); |
title: res.msg, |
||||
// this.detailInfo = response.data; |
icon: "none", |
||||
|
}); |
||||
// 模拟数据加载 |
} |
||||
console.log("加载纪念册详情，ID:", id); |
}); |
||||
} catch (error) { |
// 模拟数据加载 |
||||
console.error("加载详情失败:", error); |
console.log("加载纪念册详情，ID:", id); |
||||
uni.showToast({ |
} catch (error) { |
||||
title: "加载失败", |
console.error("加载详情失败:", error); |
||||
icon: "none", |
uni.showToast({ |
||||
}); |
title: "加载失败", |
||||
} |
icon: "none", |
||||
}, |
}); |
||||
|
} |
||||
// 预览主图 |
}, |
||||
previewMainImage() { |
|
||||
const imageUrl = this.showImg(this.detailInfo.image); |
// 预览主图 |
||||
uni.previewImage({ |
previewMainImage() { |
||||
urls: [imageUrl], |
const imageUrl = this.showImg(this.detailInfo.image); |
||||
current: imageUrl, |
uni.previewImage({ |
||||
}); |
urls: [imageUrl], |
||||
}, |
current: imageUrl, |
||||
|
}); |
||||
// 图片路径处理 |
}, |
||||
showImg(img) { |
|
||||
if (!img) return ""; |
// 图片路径处理 |
||||
if (img.startsWith("http")) { |
showImg(img) { |
||||
return img; |
if (!img) return ""; |
||||
} |
if (img.startsWith("http")) { |
||||
const NEWAPIURL = "https://epic.js-dyyj.com"; |
return img; |
||||
return `${NEWAPIURL}${img}`; |
} |
||||
}, |
const NEWAPIURL = "https://epic.js-dyyj.com"; |
||||
}, |
return `${NEWAPIURL}${img}`; |
||||
}; |
}, |
||||
|
}, |
||||
|
}; |
||||
</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-info-card { |
.asset-info-card { |
||||
.card-header { |
.card-header { |
||||
margin-bottom: 32rpx; |
margin-bottom: 32rpx; |
||||
|
|
||||
.asset-title { |
.asset-title { |
||||
font-size: 36rpx; |
font-size: 36rpx; |
||||
font-weight: 600; |
font-weight: 600; |
||||
color: #333; |
color: #333; |
||||
line-height: 1.4; |
line-height: 1.4; |
||||
} |
} |
||||
} |
} |
||||
|
|
||||
.info-row { |
.info-row { |
||||
display: flex; |
display: flex; |
||||
margin-bottom: 20rpx; |
margin-bottom: 20rpx; |
||||
align-items: flex-start; |
align-items: flex-start; |
||||
|
|
||||
.info-label { |
.info-label { |
||||
font-size: 28rpx; |
font-size: 28rpx; |
||||
color: #666; |
color: #666; |
||||
margin-right: 16rpx; |
margin-right: 16rpx; |
||||
flex-shrink: 0; |
flex-shrink: 0; |
||||
} |
} |
||||
|
|
||||
.info-value { |
.info-value { |
||||
font-size: 28rpx; |
font-size: 28rpx; |
||||
color: #333; |
color: #333; |
||||
flex: 1; |
flex: 1; |
||||
} |
} |
||||
} |
} |
||||
|
|
||||
.divider { |
.divider { |
||||
height: 1rpx; |
height: 1rpx; |
||||
background: #e0e0e0; |
background: #e0e0e0; |
||||
margin: 24rpx 0; |
margin: 24rpx 0; |
||||
} |
} |
||||
|
|
||||
// 收藏信息 |
// 收藏信息 |
||||
.collection-info { |
.collection-info { |
||||
margin-top: 40rpx; |
margin-top: 40rpx; |
||||
padding: 32rpx; |
padding: 32rpx; |
||||
background: #f8f9fa; |
background: #f8f9fa; |
||||
border-radius: 12rpx; |
border-radius: 12rpx; |
||||
border: 2rpx solid #e0e0e0; |
border: 2rpx solid #e0e0e0; |
||||
|
|
||||
.collection-header { |
.collection-header { |
||||
text-align: center; |
text-align: center; |
||||
font-size: 28rpx; |
font-size: 28rpx; |
||||
color: #666; |
color: #666; |
||||
margin-bottom: 24rpx; |
margin-bottom: 24rpx; |
||||
font-weight: 500; |
font-weight: 500; |
||||
} |
} |
||||
|
|
||||
.collector-info { |
.collector-info { |
||||
display: grid; |
display: grid; |
||||
grid-template-columns: auto auto; |
grid-template-columns: auto auto; |
||||
gap: 16rpx 24rpx; |
gap: 16rpx 24rpx; |
||||
text-align: center; |
text-align: center; |
||||
|
|
||||
.collector-label, |
.collector-label, |
||||
.collection-number, |
.collection-number, |
||||
.collection-time-label { |
.collection-time-label { |
||||
font-size: 24rpx; |
font-size: 24rpx; |
||||
color: #666; |
color: #666; |
||||
} |
} |
||||
|
|
||||
.collector-name, |
.collector-name, |
||||
.collection-code, |
.collection-code, |
||||
.collection-time { |
.collection-time { |
||||
font-size: 26rpx; |
font-size: 26rpx; |
||||
color: #333; |
color: #333; |
||||
font-weight: 500; |
font-weight: 500; |
||||
} |
} |
||||
|
|
||||
.collection-code { |
.collection-code { |
||||
font-family: "Courier New", monospace; |
font-family: "Courier New", monospace; |
||||
} |
} |
||||
|
|
||||
.collection-time { |
.collection-time { |
||||
font-family: "Courier New", monospace; |
font-family: "Courier New", monospace; |
||||
} |
} |
||||
} |
} |
||||
} |
} |
||||
} |
} |
||||
|
|
||||
// 认证信息卡片 |
// 认证信息卡片 |
||||
.cert-info-card { |
.cert-info-card { |
||||
.cert-header { |
.cert-header { |
||||
text-align: center; |
text-align: center; |
||||
font-size: 28rpx; |
font-size: 28rpx; |
||||
color: #666; |
color: #666; |
||||
margin-bottom: 32rpx; |
margin-bottom: 32rpx; |
||||
font-weight: 500; |
font-weight: 500; |
||||
} |
} |
||||
|
|
||||
.cert-row { |
.cert-row { |
||||
margin-bottom: 24rpx; |
margin-bottom: 24rpx; |
||||
padding-bottom: 20rpx; |
padding-bottom: 20rpx; |
||||
border-bottom: 1rpx solid #f0f0f0; |
border-bottom: 1rpx solid #f0f0f0; |
||||
|
|
||||
&:last-child { |
&:last-child { |
||||
margin-bottom: 0; |
margin-bottom: 0; |
||||
padding-bottom: 0; |
padding-bottom: 0; |
||||
border-bottom: none; |
border-bottom: none; |
||||
} |
} |
||||
|
|
||||
.cert-label { |
.cert-label { |
||||
display: block; |
display: block; |
||||
font-size: 26rpx; |
font-size: 26rpx; |
||||
color: #666; |
color: #666; |
||||
margin-bottom: 8rpx; |
margin-bottom: 8rpx; |
||||
} |
} |
||||
|
|
||||
.cert-value { |
.cert-value { |
||||
display: block; |
display: block; |
||||
font-size: 24rpx; |
font-size: 24rpx; |
||||
color: #333; |
color: #333; |
||||
font-family: "Courier New", monospace; |
font-family: "Courier New", monospace; |
||||
word-break: break-all; |
word-break: break-all; |
||||
line-height: 1.5; |
line-height: 1.5; |
||||
} |
} |
||||
} |
} |
||||
} |
} |
||||
|
|
||||
// 藏品详情卡片 |
// 藏品详情卡片 |
||||
.product-detail-card { |
.product-detail-card { |
||||
.product-header { |
.product-header { |
||||
text-align: center; |
text-align: center; |
||||
font-size: 28rpx; |
font-size: 28rpx; |
||||
color: #666; |
color: #666; |
||||
margin-bottom: 32rpx; |
margin-bottom: 32rpx; |
||||
font-weight: 500; |
font-weight: 500; |
||||
} |
} |
||||
|
|
||||
.product-content { |
.product-content { |
||||
.product-description { |
.product-description { |
||||
font-size: 28rpx; |
font-size: 28rpx; |
||||
color: #333; |
color: #333; |
||||
line-height: 1.6; |
line-height: 1.6; |
||||
} |
} |
||||
} |
} |
||||
} |
} |
||||
</style> |
|
||||
|
.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> |
||||
@ -1,212 +1,185 @@ |
|||||
<template> |
<template> |
||||
<view class="memorial-album"> |
<view class="memorial-album"> |
||||
<!-- 纪念册网格 --> |
<!-- 纪念册网格 --> |
||||
<view class="memorial-grid"> |
<view class="memorial-grid"> |
||||
<view |
<view class="memorial-item" v-for="(item, index) in memorialItems" :key="index" @click="goToDetail(item)"> |
||||
class="memorial-item" |
<view class="memorial-card"> |
||||
v-for="(item, index) in memorialItems" |
<image :src="item.goodsImg.split(',')[0]" mode="aspectFill" class="memorial-image" /> |
||||
:key="index" |
<view class="memorial-info"> |
||||
@click="goToDetail(item)" |
<text class="memorial-title">{{ item.goodsTitle }}</text> |
||||
> |
<text class="memorial-code">{{ item.code }}</text> |
||||
<view class="memorial-card"> |
<text class="memorial-status">{{ item.ownPart }}</text> |
||||
<image |
</view> |
||||
:src="item.goodsImg.split(',')[0]" |
</view> |
||||
mode="aspectFill" |
</view> |
||||
class="memorial-image" |
</view> |
||||
/> |
</view> |
||||
<view class="memorial-info"> |
|
||||
<text class="memorial-title">{{ item.goodsTitle }}</text> |
|
||||
<text class="memorial-code">{{ item.code }}</text> |
|
||||
<text class="memorial-status">{{ item.ownPart }}</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
export default { |
export default { |
||||
name: "MemorialAlbum", |
name: "MemorialAlbum", |
||||
data() { |
data() { |
||||
return { |
return { |
||||
memorialItems: [ |
memorialItems: [ |
||||
|
|
||||
], |
], |
||||
}; |
}; |
||||
}, |
}, |
||||
onLoad() { |
onLoad() { |
||||
this.getList() |
this.getList() |
||||
}, |
}, |
||||
methods: { |
methods: { |
||||
getList(){ |
getList() { |
||||
this.Post( |
this.Post({}, |
||||
{ |
"/framework/order/ipOrderList", |
||||
}, |
"DES" |
||||
"/framework/order/ipOrderList", |
).then((res) => { |
||||
"DES" |
if (res.code == 200) { |
||||
).then((res) => { |
this.memorialItems = res.data |
||||
if (res.code == 200) { |
} else { |
||||
this.memorialItems = res.data |
uni.showToast({ |
||||
} else { |
title: res.msg, |
||||
uni.showToast({ |
icon: "none", |
||||
title: res.msg, |
}); |
||||
icon: "none", |
} |
||||
}); |
}); |
||||
} |
}, |
||||
}); |
// 跳转到详情页面 |
||||
}, |
goToDetail(item) { |
||||
// 跳转到详情页面 |
uni.navigateTo({ |
||||
goToDetail(item) { |
url: `/subPackages/memorialAlbum/detail?id=${item.orderChildId}`, |
||||
uni.navigateTo({ |
}); |
||||
url: `/subPackages/memorialAlbum/detail?id=${item.id}`, |
}, |
||||
}); |
|
||||
}, |
|
||||
|
|
||||
// 图片预览 |
|
||||
previewImage(imagePath) { |
}, |
||||
const imageUrl = this.showImg(imagePath); |
}; |
||||
uni.previewImage({ |
|
||||
urls: [imageUrl], |
|
||||
current: imageUrl, |
|
||||
}); |
|
||||
}, |
|
||||
|
|
||||
// 图片路径处理 |
|
||||
showImg(img) { |
|
||||
if (!img) return ""; |
|
||||
if (img.startsWith("http")) { |
|
||||
return img; |
|
||||
} |
|
||||
// 这里需要根据你的项目实际情况调整API地址 |
|
||||
const NEWAPIURL = "https://epic.js-dyyj.com"; |
|
||||
return `${NEWAPIURL}${img}`; |
|
||||
}, |
|
||||
}, |
|
||||
}; |
|
||||
</script> |
</script> |
||||
|
|
||||
<style lang="scss" scoped> |
<style lang="scss" scoped> |
||||
.memorial-album { |
.memorial-album { |
||||
min-height: 100vh; |
min-height: 100vh; |
||||
background: #f8f9fa; |
background: #f8f9fa; |
||||
padding-bottom: env(safe-area-inset-bottom); |
padding-bottom: env(safe-area-inset-bottom); |
||||
} |
} |
||||
|
|
||||
// 顶部导航 |
// 顶部导航 |
||||
.nav-header { |
.nav-header { |
||||
display: flex; |
display: flex; |
||||
align-items: center; |
align-items: center; |
||||
justify-content: space-between; |
justify-content: space-between; |
||||
padding: 20rpx 30rpx; |
padding: 20rpx 30rpx; |
||||
background: white; |
background: white; |
||||
border-bottom: 1rpx solid #eee; |
border-bottom: 1rpx solid #eee; |
||||
position: sticky; |
position: sticky; |
||||
top: 0; |
top: 0; |
||||
z-index: 100; |
z-index: 100; |
||||
} |
} |
||||
|
|
||||
.nav-back { |
.nav-back { |
||||
width: 60rpx; |
width: 60rpx; |
||||
height: 60rpx; |
height: 60rpx; |
||||
display: flex; |
display: flex; |
||||
align-items: center; |
align-items: center; |
||||
justify-content: center; |
justify-content: center; |
||||
} |
} |
||||
|
|
||||
.nav-title { |
.nav-title { |
||||
font-size: 32rpx; |
font-size: 32rpx; |
||||
font-weight: 600; |
font-weight: 600; |
||||
color: #333; |
color: #333; |
||||
} |
} |
||||
|
|
||||
.nav-placeholder { |
.nav-placeholder { |
||||
width: 60rpx; |
width: 60rpx; |
||||
} |
} |
||||
|
|
||||
// 纪念册网格 |
// 纪念册网格 |
||||
.memorial-grid { |
.memorial-grid { |
||||
padding: 30rpx; |
padding: 30rpx; |
||||
display: grid; |
display: grid; |
||||
grid-template-columns: 1fr 1fr; |
grid-template-columns: 1fr 1fr; |
||||
gap: 20rpx; |
gap: 20rpx; |
||||
} |
} |
||||
|
|
||||
.memorial-item { |
.memorial-item { |
||||
background: white; |
background: white; |
||||
border-radius: 16rpx; |
border-radius: 16rpx; |
||||
overflow: hidden; |
overflow: hidden; |
||||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08); |
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08); |
||||
transition: transform 0.2s ease; |
transition: transform 0.2s ease; |
||||
|
|
||||
&:active { |
&:active { |
||||
transform: scale(0.98); |
transform: scale(0.98); |
||||
} |
} |
||||
} |
} |
||||
|
|
||||
.memorial-card { |
.memorial-card { |
||||
width: 100%; |
width: 100%; |
||||
} |
} |
||||
|
|
||||
.memorial-image { |
.memorial-image { |
||||
width: 100% !important; |
width: 100% !important; |
||||
height: 460rpx !important; |
height: 460rpx !important; |
||||
background: #f5f5f5; |
background: #f5f5f5; |
||||
display: block; |
display: block; |
||||
object-fit: cover; |
object-fit: cover; |
||||
} |
} |
||||
|
|
||||
.memorial-info { |
.memorial-info { |
||||
padding: 28rpx 24rpx; |
padding: 28rpx 24rpx; |
||||
display: flex; |
display: flex; |
||||
flex-direction: column; |
flex-direction: column; |
||||
gap: 12rpx; |
gap: 12rpx; |
||||
} |
} |
||||
|
|
||||
.memorial-title { |
.memorial-title { |
||||
font-size: 32rpx; |
font-size: 32rpx; |
||||
font-weight: 600; |
font-weight: 600; |
||||
color: #333; |
color: #333; |
||||
line-height: 1.4; |
line-height: 1.4; |
||||
display: -webkit-box; |
display: -webkit-box; |
||||
-webkit-line-clamp: 1; |
-webkit-line-clamp: 1; |
||||
-webkit-box-orient: vertical; |
-webkit-box-orient: vertical; |
||||
overflow: hidden; |
overflow: hidden; |
||||
} |
} |
||||
|
|
||||
.memorial-code { |
.memorial-code { |
||||
font-size: 26rpx; |
font-size: 26rpx; |
||||
color: #666; |
color: #666; |
||||
font-family: "Courier New", monospace; |
font-family: "Courier New", monospace; |
||||
} |
} |
||||
|
|
||||
.memorial-status { |
.memorial-status { |
||||
font-size: 24rpx; |
font-size: 24rpx; |
||||
color: #999; |
color: #999; |
||||
overflow: hidden; |
overflow: hidden; |
||||
display: -webkit-box; |
display: -webkit-box; |
||||
-webkit-line-clamp: 1; |
-webkit-line-clamp: 1; |
||||
-webkit-box-orient: vertical; |
-webkit-box-orient: vertical; |
||||
overflow: hidden; |
overflow: hidden; |
||||
} |
} |
||||
|
|
||||
// 响应式处理 |
// 响应式处理 |
||||
@media screen and (max-width: 400px) { |
@media screen and (max-width: 400px) { |
||||
.memorial-grid { |
.memorial-grid { |
||||
padding: 20rpx; |
padding: 20rpx; |
||||
gap: 15rpx; |
gap: 15rpx; |
||||
} |
} |
||||
|
|
||||
.memorial-image { |
.memorial-image { |
||||
height: 460rpx !important; // 保持较高的高度，即使在小屏幕上 |
height: 460rpx !important; // 保持较高的高度，即使在小屏幕上 |
||||
} |
} |
||||
|
|
||||
.memorial-info { |
.memorial-info { |
||||
padding: 24rpx 20rpx; |
padding: 24rpx 20rpx; |
||||
} |
} |
||||
|
|
||||
.memorial-title { |
.memorial-title { |
||||
font-size: 28rpx; |
font-size: 28rpx; |
||||
} |
} |
||||
} |
} |
||||
</style> |
</style> |
||||
File diff suppressed because it is too large
Loading…
Reference in new issue