Cxx0822/sweet-hut-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:移植工程

Browse Source
This commit is contained in:
Cxx0822
2025-06-10 16:20:21 +08:00
commit 829df0b1d1
356 changed files with 43395 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

163
src/components/Home/Milestone.vue Normal file
View File

@@ -0,0 +1,163 @@
<template>
<div class="milestone-container">
<h2>里程碑事件</h2>
<div class="timeline">
<ul>
<li>
<div class="bullet pink"></div>
<div class="time">2024-09-02</div>
<div class="desc">
<span class="title">今天订婚啦</span>
<br/>
<span class="sub-title">终于订婚咯终于订婚咯终于订婚咯终于订婚咯</span>
</div>
</li>
<li>
<div class="bullet green"></div>
<span class="time">2024-09-02</span>
<div class="desc">
<span class="title">Title</span>
<br/>
<span class="sub-title">终于订婚咯终于订婚咯终于订婚咯</span>
</div>
</li>
<li>
<div class="bullet orange"></div>
<span class="time">2024-09-02</span>
<div class="desc">
<span class="title">Title</span>
<br/>
<span class="sub-title">SubTitle</span>
</div>
</li>
<li>
<div class="bullet green"></div>
<span class="time">2024-09-02</span>
<div class="desc">
<span class="title">Title</span>
<br/>
<span class="sub-title">SubTitle</span>
</div>
</li>
<li>
<div class="bullet orange"></div>
<span class="time">2024-09-02</span>
<div class="desc">
<span class="title">Title</span>
<br/>
<span class="sub-title">SubTitle</span>
</div>
</li>
<li>
<div class="bullet green"></div>
<span class="time">2024-09-02</span>
<div class="desc">
<span class="title">Title</span>
<br/>
<span class="sub-title">SubTitle</span>
</div>
</li>
<li>
<div class="bullet orange"></div>
<span class="time">2024-09-02</span>
<div class="desc">
<span class="title">Title</span>
<br/>
<span class="sub-title">SubTitle</span>
</div>
</li>
<li>
<div class="bullet green"></div>
<span class="time">2024-09-02</span>
<div class="desc">
<span class="title">Title</span>
<br/>
<span class="sub-title">SubTitle</span>
</div>
</li>
</ul>
</div>
</div>
</template>
<script setup lang="ts">
</script>
<style scoped lang="scss">
.milestone-container {
padding: 1vh 0.5vw;
border: solid 2px sandybrown;
border-radius: 0.5vw;
overflow: auto;
h2 {
margin: 1vh 0;
text-align: center;
}
.timeline {
ul {
list-style: none;
position: relative;
display: flex;
flex-direction: column;
gap: 2vh;
&::before {
content: '';
height: 100%;
width: 0.2vw;
background-color: lightgray;
position: absolute;
left: 2.45vw;
}
li {
margin: 1vh 0;
display: flex;
align-items: center;
gap: 0.5vw;
}
}
.bullet {
width: 0.5vw;
height: 0.5vw;
border-radius: 50%;
background: white;
z-index: 1;
}
.bullet:nth-child(2n) {
border: 4px solid orange;
}
.bullet:nth-child(2n+1) {
border: 4px solid green;
}
.time {
width: 30%;
font-size: 0.8vw;
}
.desc {
width: 60%;
.title {
font-size: 1vw;
font-family: '华为行楷',serif;
}
.sub-title {
color: gray;
}
}
span {
font-size: 0.8vw;
}
}
}
</style>