Semi

sheepzh · Aug 23, 2024 · 4ed913f · 4ed913f
1 parent 4501d96
commit 4ed913f
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 19 deletions.
diff --git a/src/app/components/Analysis/components/Summary/Site.tsx b/src/app/components/Analysis/components/Summary/Site.tsx
@@ -13,16 +13,16 @@ import { useAnalysisSite } from "../../context"
 import siteService from "@service/site-service"
 
 function renderChildren(site: timer.site.SiteInfo) {
- if (!site) return <h1 class="site-alias">{t(msg => msg.analysis.common.emptyDesc)}</h1>
+ if (!site) return <h1 class="alias">{t(msg => msg.analysis.common.emptyDesc)}</h1>
 
  const { iconUrl, alias } = site
  const label = labelOfHostInfo(site)
  const title: string = alias ? alias : label
  const subtitle: string = alias ? label : undefined
  return <>
  {iconUrl && <img src={iconUrl} width={24} height={24} />}
- <h1 class="site-alias">{title}</h1>
- {subtitle && <p class="site-host">{subtitle}</p>}
+ <h1 class="alias">{title}</h1>
+ {subtitle && <p class="host">{subtitle}</p>}
  </>
 }
 
@@ -36,7 +36,9 @@ const _default = defineComponent(() => {
  const siteInfo = computedAsync(() => computedSiteInfo(site.value))
  return () => (
  <div class="site-container">
- {renderChildren(siteInfo.value)}
+ <div class="site-info">
+ {renderChildren(siteInfo.value)}
+ </div>
  </div>
  )
 })

diff --git a/src/app/components/Analysis/components/Summary/summary.sass b/src/app/components/Analysis/components/Summary/summary.sass
@@ -3,21 +3,24 @@
  grid-template-columns: repeat(auto-fill, minmax(min(100%, max(500px, 50%)), 1fr))
  .indicator-area
  .site-container
- position: relative
- top: 50%
- transform: translateY(-50%)
+ display: flex
+ align-items: center
+ justify-content: center
  text-align: center
+ min-height: 140px
  padding: 0 25px
- .site-alias
- font-size: 26px
- margin-block-start: 0.2em
- margin-block-end: 0.5em
- .site-host
- font-size: 14px
- color: var(--el-text-color-secondary)
- .site-host,.site-alias
- white-space: nowrap
- overflow: hidden
- text-overflow: ellipsis
+ .site-info
+ width: 100%
+ .alias
+ font-size: 26px
+ margin-block-start: 0.2em
+ margin-block-end: 0.5em
+ .host
+ font-size: 14px
+ color: var(--el-text-color-secondary)
+ .host,.alias
+ white-space: nowrap
+ overflow: hidden
+ text-overflow: ellipsis
 .analysis-calendar-chart
  height: 280px
diff --git a/src/app/styles/index.sass b/src/app/styles/index.sass
@@ -60,7 +60,7 @@ a
  user-select: none
  .el-card__body
  width: 100%
- padding-bottom: 10px
+ padding-bottom: 18px
  padding-top: 18px
  box-sizing: border-box
  display: flex