feat: 调整了组件的样式
This commit is contained in:
@@ -5,7 +5,7 @@
|
|||||||
.swiper-stage {
|
.swiper-stage {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 270px;
|
height: 265px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -33,7 +33,7 @@
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
border-radius: 24px;
|
border-radius: 24px;
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
box-shadow: 0 12px 20px rgba(15, 23, 42, 0.14);
|
box-shadow: 0 12px 16px rgba(15, 23, 42, 0.14);
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-media {
|
.card-media {
|
||||||
@@ -93,7 +93,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.is-current .card-shell {
|
.is-current .card-shell {
|
||||||
box-shadow: 0 12px 20px rgba(15, 23, 42, 0.18);
|
box-shadow: 0 12px 16px rgba(15, 23, 42, 0.18);
|
||||||
}
|
}
|
||||||
|
|
||||||
.is-single .swiper-stage {
|
.is-single .swiper-stage {
|
||||||
|
|||||||
@@ -1,9 +1,9 @@
|
|||||||
.discovery-audio-tool-card {
|
.discovery-audio-tool-card {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 96px;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
padding: 0 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.discovery-audio-tool-card.is-pressed {
|
.discovery-audio-tool-card.is-pressed {
|
||||||
@@ -28,7 +28,7 @@
|
|||||||
height: 88px;
|
height: 88px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
padding: 18px 12px 14px;
|
padding: 12px;
|
||||||
border-radius: 28px;
|
border-radius: 28px;
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
@@ -94,7 +94,6 @@
|
|||||||
.audio-progress-row {
|
.audio-progress-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-top: 16px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.audio-progress-track {
|
.audio-progress-track {
|
||||||
@@ -114,9 +113,9 @@
|
|||||||
.audio-time {
|
.audio-time {
|
||||||
flex: 0 0 90px;
|
flex: 0 0 90px;
|
||||||
max-width: 90px;
|
max-width: 90px;
|
||||||
margin-left: 12px;
|
margin-left: 10px;
|
||||||
color: #94a0b2;
|
color: #94a0b2;
|
||||||
font-size: 15px;
|
font-size: 12px;
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
|
|||||||
@@ -4,6 +4,7 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
padding: 0 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.discovery-guide-map-tool-card.is-pressed {
|
.discovery-guide-map-tool-card.is-pressed {
|
||||||
|
|||||||
@@ -4,6 +4,7 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
padding: 0 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.discovery-photo-tool-card.is-pressed {
|
.discovery-photo-tool-card.is-pressed {
|
||||||
@@ -28,7 +29,7 @@
|
|||||||
height: 142px;
|
height: 142px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
padding: 16px 12px 12px;
|
padding: 12px;
|
||||||
border-radius: 28px;
|
border-radius: 28px;
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
@@ -197,7 +198,7 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
margin-top: 10px;
|
margin-top: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.photo-option {
|
.photo-option {
|
||||||
@@ -250,7 +251,7 @@
|
|||||||
.photo-option-label {
|
.photo-option-label {
|
||||||
display: block;
|
display: block;
|
||||||
max-width: 76px;
|
max-width: 76px;
|
||||||
margin: 5px auto 0;
|
margin: 2px auto 0;
|
||||||
color: $theme-color-500;
|
color: $theme-color-500;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 18px;
|
line-height: 18px;
|
||||||
|
|||||||
@@ -2,7 +2,6 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 356px;
|
height: 356px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
padding-bottom: 12px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.explore-scroll {
|
.explore-scroll {
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
.container-scroll {
|
.container-scroll {
|
||||||
margin: 4px 0 6px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-item {
|
.card-item {
|
||||||
|
|||||||
@@ -12,9 +12,9 @@
|
|||||||
<QuickQuestions v-if="discoveryQuickQuestions.length > 0" :list="discoveryQuickQuestions"
|
<QuickQuestions v-if="discoveryQuickQuestions.length > 0" :list="discoveryQuickQuestions"
|
||||||
@didSelectItem="handleQuickQuestionClick" />
|
@didSelectItem="handleQuickQuestionClick" />
|
||||||
|
|
||||||
<!-- <DiscoveryPhotoToolCard @didSelectItem="handleToolCardClick" @didSelectOption="handleToolOptionClick" />
|
<DiscoveryPhotoToolCard @didSelectItem="handleToolCardClick" @didSelectOption="handleToolOptionClick" />
|
||||||
<DiscoveryAudioToolCard @didSelectItem="handleToolCardClick" />
|
<DiscoveryAudioToolCard @didSelectItem="handleToolCardClick" />
|
||||||
<DiscoveryGuideMapToolCard @didSelectItem="handleToolCardClick" /> -->
|
<DiscoveryGuideMapToolCard @didSelectItem="handleToolCardClick" />
|
||||||
</view>
|
</view>
|
||||||
</scroll-view>
|
</scroll-view>
|
||||||
</view>
|
</view>
|
||||||
@@ -260,5 +260,8 @@ onMounted(() => {
|
|||||||
|
|
||||||
.discovery-body {
|
.discovery-body {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
gap: 12px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user