Revamp Step2EnvSetup.vue styling for improved user experience
- Updated the narrative box styling for a cleaner and more modern look, including background color, padding, and border adjustments. - Enhanced the box label design with improved alignment and visual hierarchy. - Modified narrative text styling for better readability and consistency. - Adjusted hot topic tag color for improved visibility and aesthetic appeal.
This commit is contained in:
parent
39824c88e2
commit
2812225734
1 changed files with 33 additions and 8 deletions
|
|
@ -1403,18 +1403,43 @@ onUnmounted(() => {
|
||||||
}
|
}
|
||||||
|
|
||||||
.narrative-box {
|
.narrative-box {
|
||||||
background: #F9F9F9;
|
background: #FFFFFF;
|
||||||
padding: 12px;
|
padding: 20px 24px;
|
||||||
border-radius: 6px;
|
border-radius: 12px;
|
||||||
border-left: 3px solid #FF5722;
|
border: 1px solid #EEF2F6;
|
||||||
|
box-shadow: 0 4px 24px rgba(0,0,0,0.03);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.narrative-box .box-label {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
color: #64748B;
|
||||||
|
font-size: 12px;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.narrative-box .box-label::before {
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
width: 6px;
|
||||||
|
height: 6px;
|
||||||
|
background: #6366F1;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-right: 8px;
|
||||||
|
box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
|
||||||
}
|
}
|
||||||
|
|
||||||
.narrative-text {
|
.narrative-text {
|
||||||
font-size: 13px;
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||||
color: #444;
|
font-size: 14px;
|
||||||
line-height: 1.6;
|
color: #334155;
|
||||||
|
line-height: 1.8;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
text-align: justify;
|
text-align: justify;
|
||||||
|
letter-spacing: 0.01em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.topics-section {
|
.topics-section {
|
||||||
|
|
@ -1429,7 +1454,7 @@ onUnmounted(() => {
|
||||||
|
|
||||||
.hot-topic-tag {
|
.hot-topic-tag {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #FF5722;
|
color:rgba(255, 86, 34, 0.88);
|
||||||
background: #FFF3E0;
|
background: #FFF3E0;
|
||||||
padding: 4px 10px;
|
padding: 4px 10px;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue