adaptation dark mode

This commit is contained in:
Timi
2025-12-10 15:02:17 +08:00
parent ad755c7d0e
commit 69bf186f0e
11 changed files with 195 additions and 201 deletions

View File

@ -53,6 +53,7 @@
color: var(--theme-wx);
margin: 0;
font-size: 80rpx;
background: transparent;
}
.thumbnail {
@ -85,15 +86,6 @@
position: absolute;
font-size: 45rpx;
}
.delete {
top: 10rpx;
right: 10rpx;
color: rgba(0, 0, 0, .7);
z-index: 3;
position: absolute;
font-size: 45rpx;
}
}
}
}

View File

@ -76,7 +76,7 @@
disabled="{{isSubmitting}}"
bind:tap="addMedia"
>
<t-icon name="add" />
<t-icon class="icon" name="add" />
</t-button>
</view>
</view>

View File

@ -21,147 +21,146 @@
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, .15);
}
}
}
.date-detail {
height: 61.8vh;
.date-detail {
height: 61.8vh;
display: flex;
border-radius: 24rpx 24rpx 0 0;
flex-direction: column;
.detail-content {
flex: 1;
display: flex;
background: var(--theme-bg-card);
border-radius: 24rpx 24rpx 0 0;
overflow: hidden;
flex-direction: column;
.detail-content {
flex: 1;
.header {
display: flex;
overflow: hidden;
flex-direction: column;
padding: 24rpx 24rpx 4rpx;
flex-shrink: 0;
align-items: flex-start;
justify-content: space-between;
.header {
.info {
flex: 1;
display: flex;
padding: 24rpx 24rpx 4rpx;
flex-shrink: 0;
align-items: flex-start;
justify-content: space-between;
flex-direction: column;
.info {
flex: 1;
display: flex;
flex-direction: column;
.date {
color: var(--theme-text);
font-size: 32rpx;
font-weight: 600;
margin-bottom: 8rpx;
}
.count {
color: var(--theme-text-secondary);
font-size: 26rpx;
}
.date {
color: var(--theme-text);
font-size: 32rpx;
font-weight: 600;
margin-bottom: 8rpx;
}
.actions {
gap: 16rpx;
display: flex;
flex-shrink: 0;
align-items: center;
.indicator {
color: var(--theme-text-secondary);
padding: 8rpx 16rpx;
font-size: 24rpx;
border-radius: 24rpx;
background: var(--theme-bg);
}
.count {
color: var(--theme-text-secondary);
font-size: 26rpx;
}
}
.journals-swiper {
flex: 1;
.actions {
gap: 16rpx;
display: flex;
flex-shrink: 0;
align-items: center;
.swiper-item-wrapper {
height: 100%;
.indicator {
color: var(--theme-text-secondary);
padding: 8rpx 16rpx;
font-size: 24rpx;
border-radius: 24rpx;
background: var(--theme-bg);
}
}
}
.journals-swiper {
flex: 1;
.swiper-item-wrapper {
height: 100%;
display: flex;
padding: 0 24rpx;
box-sizing: border-box;
.journal-item {
flex: 1;
display: flex;
padding: 0 24rpx;
box-sizing: border-box;
background: var(--theme-bg);
flex-direction: column;
.journal-item {
flex: 1;
.journal-header {
display: flex;
background: var(--theme-bg);
flex-direction: column;
margin-top: 16rpx;
flex-shrink: 0;
align-items: center;
justify-content: space-between;
.journal-header {
display: flex;
margin-top: 16rpx;
flex-shrink: 0;
align-items: center;
justify-content: space-between;
.location {
flex: 1;
color: var(--theme-text);
overflow: hidden;
font-size: 28rpx;
white-space: nowrap;
text-overflow: ellipsis;
}
.time {
color: var(--theme-text-secondary);
font-size: 24rpx;
margin-left: 16rpx;
flex-shrink: 0;
}
}
.idea {
color: var(--theme-text);
display: block;
font-size: 28rpx;
line-height: 1.6;
flex-shrink: 0;
}
.items-scroll {
.location {
flex: 1;
height: 0;
margin-top: 16rpx;
color: var(--theme-text);
overflow: hidden;
font-size: 28rpx;
white-space: nowrap;
text-overflow: ellipsis;
}
.items {
.time {
color: var(--theme-text-secondary);
font-size: 24rpx;
margin-left: 16rpx;
flex-shrink: 0;
}
}
.wrapper {
position: relative;
column-gap: 8rpx;
column-count: 3;
.idea {
color: var(--theme-text);
display: block;
font-size: 28rpx;
line-height: 1.6;
flex-shrink: 0;
}
.item {
overflow: hidden;
break-inside: avoid;
margin-bottom: 8rpx;
background: var(--theme-bg-card);
.items-scroll {
flex: 1;
height: 0;
margin-top: 16rpx;
&.thumbnail {
width: 100%;
display: block;
}
.items {
&.video {
position: relative;
.wrapper {
position: relative;
column-gap: 8rpx;
column-count: 3;
&::after {
top: 50%;
left: 53%;
width: 0;
height: 0;
content: "";
position: absolute;
transform: translate(-50%, -50%);
border-top: 16rpx solid transparent;
border-left: 24rpx solid rgba(255, 255, 255, .9);
border-bottom: 16rpx solid transparent;
pointer-events: none;
}
.item {
overflow: hidden;
break-inside: avoid;
margin-bottom: 8rpx;
background: var(--theme-bg-card);
&.thumbnail {
width: 100%;
display: block;
}
&.video {
position: relative;
&::after {
top: 50%;
left: 53%;
width: 0;
height: 0;
content: "";
position: absolute;
transform: translate(-50%, -50%);
border-top: 16rpx solid transparent;
border-left: 24rpx solid rgba(255, 255, 255, .9);
border-bottom: 16rpx solid transparent;
pointer-events: none;
}
}
}

View File

@ -7,62 +7,63 @@
<view wx:if="{{isLoading}}" class="loading">
<view class="loading-text">加载中...</view>
</view>
<!-- 详情面板 -->
<t-popup
visible="{{popupVisible}}"
placement="bottom"
bind:visible-change="onPopupVisibleChange"
>
<view class="date-detail">
<view class="detail-content">
<view class="header">
<view class="info">
<view class="date">{{selectedDate.displayDate}}</view>
<view class="count">{{selectedDate.journals.length}} 条日记</view>
</view>
<view class="actions">
<view wx:if="{{selectedDate.journals.length > 1}}" class="indicator">
{{currentJournalIndex + 1}}/{{selectedDate.journals.length}}
</view>
<t-icon name="close" catchtap="closeDetail" size="48rpx" />
</view>
</view>
<swiper
class="journals-swiper"
current="{{currentJournalIndex}}"
bindchange="onSwiperChange"
bindanimationfinish="onSwiperAnimationFinish"
previous-margin="{{0}}"
next-margin="{{swiperNextMargin}}"
>
<block wx:for="{{selectedDate.journals}}" wx:key="id">
<swiper-item class="swiper-item-wrapper">
<view class="journal-item" data-id="{{item.id}}">
<view class="journal-header">
<view wx:if="{{item.location}}" class="location">📍 {{item.location}}</view>
<view class="time">{{item.time}}</view>
</view>
<view wx:if="{{item.idea}}" class="idea">{{item.idea}}</view>
<scroll-view wx:if="{{item.items && item.items.length > 0}}" scroll-y class="items-scroll">
<view class="items">
<view class="wrapper">
<block wx:for="{{item.items}}" wx:key="mongoId" wx:for-item="media">
<image
class="item thumbnail {{media.type === 1 ? 'video' : 'image'}}"
src="{{media.thumbURL}}"
mode="widthFix"
catchtap="previewMedia"
data-media-index="{{mediaIndex}}"
/>
</block>
</view>
</view>
</scroll-view>
</view>
</swiper-item>
</block>
</swiper>
</view>
</view>
</t-popup>
</view>
<!-- 详情面板 -->
<t-popup
class="popup"
visible="{{popupVisible}}"
placement="bottom"
bind:visible-change="onPopupVisibleChange"
>
<view class="date-detail">
<view class="detail-content">
<view class="header">
<view class="info">
<view class="date">{{selectedDate.displayDate}}</view>
<view class="count">{{selectedDate.journals.length}} 条日记</view>
</view>
<view class="actions">
<view wx:if="{{selectedDate.journals.length > 1}}" class="indicator">
{{currentJournalIndex + 1}}/{{selectedDate.journals.length}}
</view>
<t-icon name="close" catchtap="closeDetail" size="48rpx" />
</view>
</view>
<swiper
class="journals-swiper"
current="{{currentJournalIndex}}"
bindchange="onSwiperChange"
bindanimationfinish="onSwiperAnimationFinish"
previous-margin="{{0}}"
next-margin="{{swiperNextMargin}}"
>
<block wx:for="{{selectedDate.journals}}" wx:key="id">
<swiper-item class="swiper-item-wrapper">
<view class="journal-item" data-id="{{item.id}}">
<view class="journal-header">
<view wx:if="{{item.location}}" class="location">📍 {{item.location}}</view>
<view class="time">{{item.time}}</view>
</view>
<view wx:if="{{item.idea}}" class="idea">{{item.idea}}</view>
<scroll-view wx:if="{{item.items && item.items.length > 0}}" scroll-y class="items-scroll">
<view class="items">
<view class="wrapper">
<block wx:for="{{item.items}}" wx:key="mongoId" wx:for-item="media">
<image
class="item thumbnail {{media.type === 1 ? 'video' : 'image'}}"
src="{{media.thumbURL}}"
mode="widthFix"
catchtap="previewMedia"
data-media-index="{{mediaIndex}}"
/>
</block>
</view>
</view>
</scroll-view>
</view>
</swiper-item>
</block>
</swiper>
</view>
</view>
</t-popup>

View File

@ -50,6 +50,7 @@
color: var(--theme-wx);
margin: 0;
font-size: 80rpx;
background: transparent;
}
.thumbnail {

View File

@ -45,7 +45,6 @@
.location {
flex: 1;
color: #999;
display: flex;
overflow: hidden;
font-size: 24rpx;
white-space: nowrap;
@ -91,7 +90,7 @@
z-index: 999;
display: flex;
position: fixed;
background: #FFF;
background: var(--theme-bg-card);
box-shadow: 0 -2rpx 20rpx rgba(0, 0, 0, .15);
border-radius: 24rpx 24rpx 0 0;
flex-direction: column;

View File

@ -8,7 +8,6 @@
longitude="{{centerLng}}"
scale="{{scale}}"
markers="{{markers}}"
show-location
bindmarkertap="onMarkerTap"
bindcallouttap="onCalloutTap"
>

View File

@ -35,6 +35,7 @@
}
.text {
color: var(--theme-text-primary);
width: calc(100% - 32px - 2rem);
padding: 8px 16px;
margin: .5rem 1rem 1rem 1rem;

View File

@ -127,6 +127,7 @@
}
&.form {
padding-bottom: 32rpx;
.content {
padding: 16rpx 32rpx;