WindowBird/buddhism
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

古刹巡礼列表页设计优化

Browse Source
This commit is contained in:
minimaxagent1 2025-08-07 15:39:13 +08:00
parent 29848591ab
commit d00274c6f5
2 changed files with 106 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
pages/ancient/ancient.vue
View File

@ -9,7 +9,7 @@
:refresher-triggered="refreshing" :refresher-triggered="refreshing"
@refresherrefresh="onRefresh" @refresherrefresh="onRefresh"
> >
<view class="header" :style="{ backgroundColor: '#ffffff' }"> <view class="header" >
<!-- 状态展示 --> <!-- 状态展示 -->
<status-display <status-display
v-if="loading && templeList.length === 0" v-if="loading && templeList.length === 0"
@ -142,7 +142,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.page { .page {
background: #F5F0E7; background: #FAF8F3;
} }
.scroll-container { .scroll-container {
@ -155,24 +155,26 @@ export default {
width: 100%; width: 100%;
min-height: 100vh; min-height: 100vh;
display: flex; display: flex;
align-items: flex-start; align-items: center;
flex-direction: column; flex-direction: column;
padding: 0 15rpx;
padding-bottom: 40rpx; padding-bottom: 40rpx;
box-sizing: border-box; box-sizing: border-box;
} }
.temple-list { .temple-list {
width: 100%; margin-top: 20rpx;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 20rpx; justify-content: center;
padding: 20rpx 0; align-items: center;
gap: 30rpx;
} }
.temple-card { .temple-card {
width: 100%; width: 100%;
margin-bottom: 20rpx; //margin-bottom: 20rpx;
align-items: center;
} }
.no-data { .no-data {
@ -214,16 +216,4 @@ export default {
object-fit: cover; // 保持图片比例 object-fit: cover; // 保持图片比例
} }
} }
// 响应式设计
@media (max-width: 768px) {
.temple-list {
gap: 15rpx;
padding: 15rpx 0;
}
.temple-card {
margin-bottom: 15rpx;
}
}
</style> </style>

107
pages/ancient/commponts/ancientItem.vue
View File

@ -54,29 +54,33 @@ export default {
</template> </template>
<style scoped lang="scss"> <style scoped lang="scss">
/* ==================== 卡片容器 ==================== */
.ancient-card { .ancient-card {
position: relative; position: relative;
width: 100%; width: 670rpx;
max-width: 400px; height: 286rpx;
height: 280px; border-radius: 16rpx;
border-radius: 16px;
overflow: hidden;
}
overflow: hidden;
/* ========== 背景层 ========== */
.card-background { .card-background {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: #3D3D3D;
/* 真实背景图 */
.background-image { .background-image {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover; // 保持比例填充
filter: blur(8px); opacity: 0.4;
} }
/* 缺省背景（渐变+模糊） */
.placeholder-background { .placeholder-background {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -85,79 +89,76 @@ export default {
} }
} }
/* ========== 内容层 ========== */
.card-content { .card-content {
position: relative; position: relative;
z-index: 2; z-index: 2; // 确保内容在背景上层
height: 100%; height: 100%;
padding: 32px 24px; padding: 40rpx 28rpx;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: flex-start;
align-items: flex-start; align-items: flex-start;
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.1) 0%,
rgba(255, 255, 255, 0.05) 100%
);
backdrop-filter: blur(10px);
}
/* 标题样式 */
.card-title { .card-title {
color: white; width: 160rpx;
font-size: 28px; height: 54rpx;
font-weight: 600; font-weight: 500;
margin: 0 0 12px 0; font-size: 40rpx;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); color: #FFFFFF;
line-height: 1.2; line-height: 54rpx;
text-align: left;
font-style: normal;
text-transform: none;
} }
/* 描述文本 */
.card-description { .card-description {
color: rgba(255, 255, 255, 0.9); margin: 20rpx 0 28rpx 0;
font-size: 16px; width: 258rpx;
margin: 0 0 24px 0; height: 38rpx;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); font-weight: 400;
line-height: 1.4; font-size: 28rpx;
color: #FFFFFF;
line-height: 38rpx;
text-align: left;
font-style: normal;
text-transform: none;
} }
/* 按钮样式 */
.card-button { .card-button {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 12px 20px; padding: 0 15rpx;
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 25px;
color: white; color: white;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
backdrop-filter: blur(10px); //background: rgba(255, 255, 255, 0.2);
} //backdrop-filter: blur(10px); // 毛玻璃效果
width: 176rpx;
height: 54rpx;
border-radius: 33rpx 33rpx 33rpx 33rpx;
border: 1rpx solid #FFFFFF;
/* 箭头图标 */
.arrow-icon { .arrow-icon {
margin-left: 8px; margin-left: 8px;
}
.arrow-text { .arrow-text {
font-size: 16px; width: 96rpx;
color: white; height: 32rpx;
font-weight: 400;
font-size: 24rpx;
color: #FFFFFF;
line-height: 32rpx;
text-align: left;
font-style: normal;
text-transform: none;
} }
// 响应式设计
@media (max-width: 768px) {
.ancient-card {
max-width: 100%;
height: 240px;
} }
.card-content {
padding: 24px 20px;
} }
.card-title {
font-size: 24px;
}
.card-description {
font-size: 14px;
} }
} }
</style> </style>