Yusaki/MiroFish
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactor Step2EnvSetup.vue for improved hot topics display and timeline styling

Browse source 
- 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:
666ghj 2025-12-11 19:16:10 +08:00
parent 8b5d082fb1
commit c44cb13d23
1 changed files with 7 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
frontend/src/components/Step2EnvSetup.vue
View file

@ -191,12 +191,9 @@
<div class="topics-section"> <div class="topics-section">
<span class="box-label">初始热点话题</span> <span class="box-label">初始热点话题</span>
<div class="hot-topics-grid"> <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 }} # {{ topic }}
</span> </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>
</div> </div>
@ -1449,18 +1446,16 @@ onUnmounted(() => {
.timeline-item { .timeline-item {
position: relative; position: relative;
padding-left: 16px; padding-left: 20px;
} }
.timeline-marker { .timeline-marker {
position: absolute; position: absolute;
left: -5px; left: 0;
top: 6px; top: 14px;
width: 8px; width: 12px;
height: 8px; height: 2px;
background: #CCC; background: #DDD;
border-radius: 50%;
border: 2px solid #FFF;
} }
.timeline-content { .timeline-content {