refactor travel

This commit is contained in:
Timi
2025-12-13 18:44:37 +08:00
parent 880e702288
commit 69659a1746
37 changed files with 4154 additions and 400 deletions

View File

@ -0,0 +1,308 @@
// pages/main/travel-detail/index.less
.detail-container {
width: 100vw;
min-height: 100vh;
box-sizing: border-box;
background: var(--theme-bg-page);
.content {
gap: 24rpx;
display: flex;
padding-top: 48rpx;
flex-direction: column;
.status-section {
display: flex;
padding: 16rpx 0;
justify-content: center;
}
.title-section {
padding: 24rpx;
text-align: center;
background: var(--theme-bg-card);
box-shadow: 0 2px 12px var(--theme-shadow-light);
.title {
color: var(--theme-text-primary);
font-size: 40rpx;
font-weight: bold;
line-height: 1.5;
}
}
.info-card,
.content-card,
.locations-card {
overflow: hidden;
background: var(--theme-bg-card);
box-shadow: 0 2px 12px var(--theme-shadow-light);
.card-title {
display: flex;
padding: 24rpx;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid var(--theme-border-light);
.title-left {
gap: 12rpx;
display: flex;
align-items: center;
.icon {
color: var(--theme-primary);
}
.text {
color: var(--theme-text-primary);
font-size: 32rpx;
font-weight: bold;
}
}
.title-right {
gap: 16rpx;
display: flex;
align-items: center;
.icon-btn {
display: flex;
padding: 8rpx;
align-items: center;
justify-content: center;
transition: all .2s;
&:active {
transform: scale(1.1);
}
}
}
}
.info-list {
padding: 24rpx;
.info-item {
display: flex;
padding: 20rpx 0;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid var(--theme-border-light);
&:last-child {
border-bottom: none;
}
.label {
gap: 12rpx;
flex: 1;
display: flex;
align-items: center;
.icon {
color: var(--theme-text-secondary);
}
.text {
color: var(--theme-text-secondary);
font-size: 28rpx;
}
}
.value {
color: var(--theme-text-primary);
font-size: 28rpx;
font-weight: 500;
}
}
}
.content-text {
color: var(--theme-text-primary);
padding: 24rpx;
font-size: 28rpx;
line-height: 1.8;
white-space: pre-wrap;
word-break: break-all;
}
.loading-container {
display: flex;
padding: 48rpx;
align-items: center;
justify-content: center;
}
.locations-list {
padding: 24rpx;
.location-item {
gap: 24rpx;
display: flex;
padding: 24rpx;
margin-bottom: 20rpx;
border-radius: 12rpx;
background: var(--theme-bg-page);
border: 1px solid var(--theme-border-light);
transition: all .3s;
&:last-child {
margin-bottom: 0;
}
&:active {
transform: scale(.98);
background: var(--theme-bg-card);
}
.location-icon {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
}
.location-content {
gap: 16rpx;
flex: 1;
display: flex;
overflow: hidden;
flex-direction: column;
.location-header {
display: flex;
align-items: center;
justify-content: space-between;
.location-title {
flex: 1;
color: var(--theme-text-primary);
overflow: hidden;
font-size: 30rpx;
font-weight: bold;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.location-description {
color: var(--theme-text-secondary);
font-size: 26rpx;
line-height: 1.6;
word-break: break-all;
}
.location-info {
gap: 24rpx;
display: flex;
flex-wrap: wrap;
.info-item {
gap: 8rpx;
display: flex;
align-items: center;
color: var(--theme-text-secondary);
font-size: 24rpx;
}
}
}
.location-arrow {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
}
}
}
.empty-state {
gap: 16rpx;
display: flex;
padding: 64rpx 24rpx;
align-items: center;
flex-direction: column;
justify-content: center;
.empty-text {
color: var(--theme-text-secondary);
font-size: 26rpx;
}
}
}
.time-card {
gap: 16rpx;
display: flex;
padding: 24rpx;
flex-direction: column;
background: var(--theme-bg-card);
box-shadow: 0 2px 12px var(--theme-shadow-light);
.time-item {
display: flex;
align-items: center;
justify-content: space-between;
.label {
color: var(--theme-text-secondary);
font-size: 24rpx;
}
.value {
color: var(--theme-text-secondary);
font-size: 24rpx;
}
}
}
.action-section {
gap: 24rpx;
display: flex;
padding: 24rpx 16rpx 48rpx 16rpx;
.edit-btn {
flex: 2;
}
.delete-btn {
flex: 1;
}
}
}
}
.delete-dialog-content {
gap: 32rpx;
display: flex;
flex-direction: column;
.delete-warning {
gap: 16rpx;
display: flex;
padding: 24rpx;
align-items: center;
border-radius: 12rpx;
flex-direction: column;
background: #FFF4F4;
.warning-text {
color: #E34D59;
font-size: 28rpx;
text-align: center;
}
}
.delete-confirm {
gap: 16rpx;
display: flex;
flex-direction: column;
.confirm-label {
color: var(--theme-text-primary);
font-size: 28rpx;
}
}
}