diff options
| author | 2024-09-03 07:41:34 +0800 | |
|---|---|---|
| committer | 2024-09-03 07:41:34 +0800 | |
| commit | a1a20e51d6c9efea406cf18facf707ea50e3d18c (patch) | |
| tree | f8516f5ce30efa59189c78a1cdfaf5614acb7d58 /site/src/components/WelcomeItem.vue | |
| parent | d77828d97ee98792e50a034f905cd3894807d5ff (diff) | |
| download | HydroRoll-a1a20e51d6c9efea406cf18facf707ea50e3d18c.tar.gz HydroRoll-a1a20e51d6c9efea406cf18facf707ea50e3d18c.zip | |
refactor: Optimize the structure of the code
Diffstat (limited to 'site/src/components/WelcomeItem.vue')
| -rw-r--r-- | site/src/components/WelcomeItem.vue | 87 |
1 files changed, 0 insertions, 87 deletions
diff --git a/site/src/components/WelcomeItem.vue b/site/src/components/WelcomeItem.vue deleted file mode 100644 index 6d7086a..0000000 --- a/site/src/components/WelcomeItem.vue +++ /dev/null @@ -1,87 +0,0 @@ -<template> - <div class="item"> - <i> - <slot name="icon"></slot> - </i> - <div class="details"> - <h3> - <slot name="heading"></slot> - </h3> - <slot></slot> - </div> - </div> -</template> - -<style scoped> -.item { - margin-top: 2rem; - display: flex; - position: relative; -} - -.details { - flex: 1; - margin-left: 1rem; -} - -i { - display: flex; - place-items: center; - place-content: center; - width: 32px; - height: 32px; - - color: var(--color-text); -} - -h3 { - font-size: 1.2rem; - font-weight: 500; - margin-bottom: 0.4rem; - color: var(--color-heading); -} - -@media (min-width: 1024px) { - .item { - margin-top: 0; - padding: 0.4rem 0 1rem calc(var(--section-gap) / 2); - } - - i { - top: calc(50% - 25px); - left: -26px; - position: absolute; - border: 1px solid var(--color-border); - background: var(--color-background); - border-radius: 8px; - width: 50px; - height: 50px; - } - - .item:before { - content: ' '; - border-left: 1px solid var(--color-border); - position: absolute; - left: 0; - bottom: calc(50% + 25px); - height: calc(50% - 25px); - } - - .item:after { - content: ' '; - border-left: 1px solid var(--color-border); - position: absolute; - left: 0; - top: calc(50% + 25px); - height: calc(50% - 25px); - } - - .item:first-of-type:before { - display: none; - } - - .item:last-of-type:after { - display: none; - } -} -</style> |
