古刹巡礼列表页设计优化
This commit is contained in:
minimaxagent1
parent
29848591ab
commit
d00274c6f5
|
|
@ -9,7 +9,7 @@
|
|||
:refresher-triggered="refreshing"
|
||||
@refresherrefresh="onRefresh"
|
||||
>
|
||||
<view class="header" :style="{ backgroundColor: '#ffffff' }">
|
||||
<view class="header" >
|
||||
<!-- 状态展示 -->
|
||||
<status-display
|
||||
v-if="loading && templeList.length === 0"
|
||||
|
|
@ -142,7 +142,7 @@ export default {
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.page {
|
||||
background: #F5F0E7;
|
||||
background: #FAF8F3;
|
||||
}
|
||||
|
||||
.scroll-container {
|
||||
|
|
@ -155,24 +155,26 @@ export default {
|
|||
width: 100%;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
padding: 0 15rpx;
|
||||
padding-bottom: 40rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.temple-list {
|
||||
width: 100%;
|
||||
margin-top: 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20rpx;
|
||||
padding: 20rpx 0;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 30rpx;
|
||||
|
||||
}
|
||||
|
||||
.temple-card {
|
||||
width: 100%;
|
||||
margin-bottom: 20rpx;
|
||||
//margin-bottom: 20rpx;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.no-data {
|
||||
|
|
@ -214,16 +216,4 @@ export default {
|
|||
object-fit: cover; // 保持图片比例
|
||||
}
|
||||
}
|
||||
|
||||
// 响应式设计
|
||||
@media (max-width: 768px) {
|
||||
.temple-list {
|
||||
gap: 15rpx;
|
||||
padding: 15rpx 0;
|
||||
}
|
||||
|
||||
.temple-card {
|
||||
margin-bottom: 15rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -54,110 +54,111 @@ export default {
|
|||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
/* ==================== 卡片容器 ==================== */
|
||||
.ancient-card {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
height: 280px;
|
||||
border-radius: 16px;
|
||||
width: 670rpx;
|
||||
height: 286rpx;
|
||||
border-radius: 16rpx;
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.background-image {
|
||||
/* ========== 背景层 ========== */
|
||||
.card-background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
filter: blur(8px);
|
||||
background: #3D3D3D;
|
||||
|
||||
/* 真实背景图 */
|
||||
.background-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover; // 保持比例填充
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
/* 缺省背景（渐变+模糊） */
|
||||
.placeholder-background {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
filter: blur(8px);
|
||||
}
|
||||
}
|
||||
|
||||
.placeholder-background {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
filter: blur(8px);
|
||||
}
|
||||
}
|
||||
|
||||
.card-content {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
height: 100%;
|
||||
padding: 32px 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: 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 {
|
||||
color: white;
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
margin: 0 0 12px 0;
|
||||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.card-description {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
font-size: 16px;
|
||||
margin: 0 0 24px 0;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.card-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 20px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
border-radius: 25px;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.arrow-icon {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.arrow-text {
|
||||
font-size: 16px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
// 响应式设计
|
||||
@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;
|
||||
position: relative;
|
||||
z-index: 2; // 确保内容在背景上层
|
||||
height: 100%;
|
||||
padding: 40rpx 28rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
|
||||
/* 标题样式 */
|
||||
.card-title {
|
||||
width: 160rpx;
|
||||
height: 54rpx;
|
||||
font-weight: 500;
|
||||
font-size: 40rpx;
|
||||
color: #FFFFFF;
|
||||
line-height: 54rpx;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/* 描述文本 */
|
||||
.card-description {
|
||||
margin: 20rpx 0 28rpx 0;
|
||||
width: 258rpx;
|
||||
height: 38rpx;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #FFFFFF;
|
||||
line-height: 38rpx;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/* 按钮样式 */
|
||||
.card-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 15rpx;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
//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 {
|
||||
margin-left: 8px;
|
||||
|
||||
.arrow-text {
|
||||
width: 96rpx;
|
||||
height: 32rpx;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #FFFFFF;
|
||||
line-height: 32rpx;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user