Refactor Step2EnvSetup.vue for improved hot topics display and timeline styling
- Updated hot topics section to display all topics without truncation, enhancing visibility. - Adjusted timeline marker styling for better alignment and visual consistency, improving overall layout.
This commit is contained in:
parent
8b5d082fb1
commit
c44cb13d23
1 changed files with 7 additions and 12 deletions
|
|
@ -191,12 +191,9 @@
|
|||
<div class="topics-section">
|
||||
<span class="box-label">初始热点话题</span>
|
||||
<div class="hot-topics-grid">
|
||||
<span v-for="topic in simulationConfig.event_config.hot_topics.slice(0, 8)" :key="topic" class="hot-topic-tag">
|
||||
<span v-for="topic in simulationConfig.event_config.hot_topics" :key="topic" class="hot-topic-tag">
|
||||
# {{ topic }}
|
||||
</span>
|
||||
<span v-if="simulationConfig.event_config.hot_topics.length > 8" class="hot-topic-more">
|
||||
+{{ simulationConfig.event_config.hot_topics.length - 8 }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -1449,18 +1446,16 @@ onUnmounted(() => {
|
|||
|
||||
.timeline-item {
|
||||
position: relative;
|
||||
padding-left: 16px;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.timeline-marker {
|
||||
position: absolute;
|
||||
left: -5px;
|
||||
top: 6px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: #CCC;
|
||||
border-radius: 50%;
|
||||
border: 2px solid #FFF;
|
||||
left: 0;
|
||||
top: 14px;
|
||||
width: 12px;
|
||||
height: 2px;
|
||||
background: #DDD;
|
||||
}
|
||||
|
||||
.timeline-content {
|
||||
|
|
|
|||
Loading…
Reference in a new issue