Niko
/
sy-water-data-board-ui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat: 左侧面板

feature-v1.0.0
will 1 month ago
parent
61501c4c5d
commit
6d20535631
4 changed files with 254 additions and 17 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      src/assets/card/measuring-reporting-facility.png
  2. 53
      src/theme/index.scss
  3. 124
      src/views/Main/InspectionCard/index.vue
  4. 94
      src/views/Main/MonitoringCard/index.vue

BIN
src/assets/card/measuring-reporting-facility.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.1 KiB

53
src/theme/index.scss
View File

@ -1,18 +1,18 @@
// import dark theme
@use 'element-plus/theme-chalk/src/dark/css-vars.scss' as *;
@use "element-plus/theme-chalk/src/dark/css-vars.scss" as *;
@use 'element-plus/theme-chalk/src/index.scss' as *;
@use './overview.scss' as *;
@use './search.scss' as *;
@use './date.scss' as *;
@use './input.scss' as *;
@use './select.scss' as *;
@use './dialog.scss' as *;
@use './tree.scss' as *;
@use './table.scss' as *;
@use './tabs.scss' as *;
@use './step.scss' as *;
@use './upload.scss' as *;
@use "element-plus/theme-chalk/src/index.scss" as *;
@use "./overview.scss" as *;
@use "./search.scss" as *;
@use "./date.scss" as *;
@use "./input.scss" as *;
@use "./select.scss" as *;
@use "./dialog.scss" as *;
@use "./tree.scss" as *;
@use "./table.scss" as *;
@use "./tabs.scss" as *;
@use "./step.scss" as *;
@use "./upload.scss" as *;
body {
font-family: 思源黑体;
@ -22,6 +22,9 @@ body {
font-size: var(--sy-font-size);
font-weight: 400;
}
div {
box-sizing: border-box;
}
#app {
position: absolute;
left: 0;
@ -40,3 +43,27 @@ code {
background-color: var(--ep-color-primary-light-9);
color: var(--sy-color-primary);
}
.sy-water-cart-title {
height: 28px;
/* 自动布局 */
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 3px 0px 3px 16px;
border-left: 4px solid #59b295;
background: linear-gradient(
90deg,
rgba(134, 191, 105, 0.8) 0%,
rgba(57, 147, 191, 0.1) 100%
);
font-family: PingFang SC;
font-size: 16px;
font-weight: 500;
line-height: 22px;
letter-spacing: 0px;
color: #262626;
}

124
src/views/Main/InspectionCard/index.vue
View File

@ -1,5 +1,39 @@
<template>
<div></div>
<div class="inspection-card">
<div class="sy-water-cart-title">监管检查总览</div>
<div class="card-item">
<div class="left">
<div class="name">今日告警</div>
<div class="count">142</div>
</div>
<div class="right">
<div class="ok">
<span class="name">已处理</span>
<span class="count">15</span>
</div>
<div class="wait">
<span class="name">待处理</span>
<span class="count">47</span>
</div>
</div>
</div>
<div class="card-item">
<div class="left">
<div class="name">本月告警</div>
<div class="count">3250</div>
</div>
<div class="right">
<div class="ok">
<span class="name">已处理</span>
<span class="count">156</span>
</div>
<div class="wait">
<span class="name">待处理</span>
<span class="count">975</span>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
@ -8,4 +42,90 @@ defineOptions({
});
</script>
<style scoped></style>
<style scoped lang="less">
.inspection-card {
width: 100%;
display: flex;
flex-direction: column;
gap: 16px;
.card-item {
width: 100%;
display: flex;
flex-direction: row;
gap: 12px;
.left {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: rgba(54, 178, 158, 0.1);
border: 2px solid rgba(54, 178, 158, 0.6);
width: 160px;
.name {
font-family: 思源黑体;
font-size: 14px;
font-weight: normal;
line-height: normal;
letter-spacing: 0em;
color: rgba(0, 0, 0, 0.9);
}
.count {
font-family: DIN;
font-size: 32px;
font-weight: bold;
line-height: 40px;
letter-spacing: 0em;
font-variation-settings: "opsz" auto;
color: #36b29e;
}
}
.right {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
.ok,
.wait {
display: flex;
flex-direction: row;
width: 238px;
padding: 8px 16px;
justify-content: space-between;
align-items: center;
.name {
font-family: 思源黑体;
font-size: 14px;
font-weight: normal;
line-height: normal;
letter-spacing: 0em;
color: rgba(0, 0, 0, 0.9);
}
.count {
font-family: 思源黑体;
font-size: 24px;
font-weight: 500;
line-height: normal;
letter-spacing: 0em;
}
}
.ok {
background: rgba(40, 206, 142, 0.15);
border: 1px solid #28ce8e;
.count {
color: #28ce8e;
}
}
.wait {
background: rgba(250, 173, 16, 0.1);
border: 1px solid #faad10;
.count {
color: #ff9a23;
}
}
}
}
}
</style>

94
src/views/Main/MonitoringCard/index.vue
View File

@ -1,5 +1,26 @@
<template>
<div></div>
<div class="monitoring-card">
<div class="sy-water-cart-title">测报设施建设</div>
<div class="cart-item">
<div class="left">
<img src="@/assets/card/measuring-reporting-facility.png" />
</div>
<div class="right">
<div class="name">测报设施建设</div>
<div class="count">3250123</div>
</div>
</div>
<div class="cart-item-row">
<div class="left">
<div class="count">4513</div>
<div class="name">水雨情监测设施</div>
</div>
<div class="right">
<div class="count">3235</div>
<div class="name">水库大坝安全监测设施</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
@ -8,4 +29,73 @@ defineOptions({
});
</script>
<style scoped></style>
<style scoped lang="less">
.monitoring-card {
width: 100%;
display: flex;
flex-direction: column;
gap: 16px;
.cart-item {
// width: calc(100% - 32px);
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
padding: 8px 16px;
gap: 16px;
background: rgba(54, 178, 158, 0.1);
border: 2px solid rgba(54, 178, 158, 0.6);
.left {
img {
width: 64px;
height: 64px;
}
}
.right {
// width: calc(100% - 64px - 16px);
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
}
}
.cart-item-row {
// width: calc(100% - 32px);
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
gap: 16px;
.left,
.right {
width: 50%;
padding: 8px 16px;
background: rgba(54, 178, 158, 0.1);
border: 2px solid rgba(54, 178, 158, 0.6);
text-align: center;
}
}
.cart-item,
.cart-item-row {
.name {
font-family: 思源黑体;
font-size: 16px;
font-weight: normal;
line-height: normal;
letter-spacing: 0em;
color: #000000;
}
.count {
font-family: DIN;
font-size: 32px;
font-weight: bold;
line-height: 40px;
letter-spacing: 0em;
font-variation-settings: "opsz" auto;
color: #36b29e;
}
}
}
</style>

Write Preview
Loading…
Cancel
Save