refactor(demo): 重构标题组件布局
- 使用 el-row 和 el-col 组件包裹标题和副标题 - 保持原有样式不变，优化 HTML 结构
This commit is contained in:
BIN
public/assets/demo/sb1.png
Normal file
BIN
public/assets/demo/sb1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
BIN
public/assets/demo/sb2.png
Normal file
BIN
public/assets/demo/sb2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
BIN
public/assets/demo/sb3.png
Normal file
BIN
public/assets/demo/sb3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
BIN
public/assets/demo/sb4.png
Normal file
BIN
public/assets/demo/sb4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
BIN
public/assets/demo/sbi1.png
Normal file
BIN
public/assets/demo/sbi1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.5 KiB |
BIN
public/assets/demo/sbi2.png
Normal file
BIN
public/assets/demo/sbi2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 107 KiB |
@ -1,11 +1,18 @@
|
|||||||
<template>
|
<template>
|
||||||
<div style="color: rgba(0, 30, 59, 1);;font-family: 'Alibaba-PuHuiTi-Bold';margin: 10px 0 0 0;"
|
<el-row>
|
||||||
:style="{ fontSize: fontLevelMap[props.fontLevel] }">
|
<el-col>
|
||||||
{{ props.title }}
|
<div style="color: rgba(0, 30, 59, 1);;font-family: 'Alibaba-PuHuiTi-Bold';margin: 10px 0 0 0;"
|
||||||
</div>
|
:style="{ fontSize: fontLevelMap[props.fontLevel] }">
|
||||||
<p style="color: rgba(154, 154, 154, 1);font-size: 14px;">
|
{{ props.title }}
|
||||||
{{ props.subtitle }}
|
</div>
|
||||||
</p>
|
</el-col>
|
||||||
|
<el-col>
|
||||||
|
<p style="color: rgba(154, 154, 154, 1);font-size: 14px;">
|
||||||
|
{{ props.subtitle }}
|
||||||
|
</p>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
</el-row>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
|
|||||||
186
src/views/demo1/components/sbqk.vue
Normal file
186
src/views/demo1/components/sbqk.vue
Normal file
@ -0,0 +1,186 @@
|
|||||||
|
<template>
|
||||||
|
<el-card>
|
||||||
|
<div class="container">
|
||||||
|
<div class="item">
|
||||||
|
<div class="top">
|
||||||
|
<div class="icon">
|
||||||
|
<img src="/assets/demo/sb1.png" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<p class="t1">运行中</p>
|
||||||
|
<p class="t2">当前状态</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bottom">
|
||||||
|
<span class="icon"><svg xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:xlink="http://www.w3.org/1999/xlink" width="17.4462890625" height="4.361663818359375"
|
||||||
|
viewBox="0 0 17.4462890625 4.361663818359375" fill="none">
|
||||||
|
<path
|
||||||
|
d="M14.43 2.05L14.43 0.4C14.43 0.32495 14.5049 0.25 14.58 0.25L14.66 0.25L17.14 2.05C17.2151 2.12505 17.2151 2.20495 17.14 2.28L14.66 4.08C14.585 4.15505 14.505 4.08 14.43 4.08L14.43 2.5L0.55 2.5C0.399897 2.6501 0.25 2.4301 0.25 2.28C0.25 2.12988 0.399897 1.98 0.55 1.98L14.43 1.98L14.43 2.05Z"
|
||||||
|
stroke="rgba(67, 207, 124, 1)" stroke-width="0.5" fill="#43CF7C">
|
||||||
|
</path>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<span class="t1">平稳运行</span>
|
||||||
|
<span class="t2">(30 days)</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<div class="top">
|
||||||
|
<div class="icon">
|
||||||
|
<img src="/assets/demo/sb2.png" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<p class="t1">128小时</p>
|
||||||
|
<p class="t2">运行时长</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bottom">
|
||||||
|
<span class="icon"><svg xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:xlink="http://www.w3.org/1999/xlink" width="17.4462890625" height="4.361663818359375"
|
||||||
|
viewBox="0 0 17.4462890625 4.361663818359375" fill="none">
|
||||||
|
<path
|
||||||
|
d="M14.43 2.05L14.43 0.4C14.43 0.32495 14.5049 0.25 14.58 0.25L14.66 0.25L17.14 2.05C17.2151 2.12505 17.2151 2.20495 17.14 2.28L14.66 4.08C14.585 4.15505 14.505 4.08 14.43 4.08L14.43 2.5L0.55 2.5C0.399897 2.6501 0.25 2.4301 0.25 2.28C0.25 2.12988 0.399897 1.98 0.55 1.98L14.43 1.98L14.43 2.05Z"
|
||||||
|
stroke="rgba(67, 207, 124, 1)" stroke-width="0.5" fill="#43CF7C">
|
||||||
|
</path>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<span class="t1">平稳运行</span>
|
||||||
|
<span class="t2">(30 days)</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<div class="top">
|
||||||
|
<div class="icon">
|
||||||
|
<img src="/assets/demo/sb3.png" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<p class="t1">5/8</p>
|
||||||
|
<p class="t2">已完成步骤</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bottom">
|
||||||
|
<span class="icon"><svg xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:xlink="http://www.w3.org/1999/xlink" width="12.393798828125" height="7.42498779296875"
|
||||||
|
viewBox="0 0 12.393798828125 7.42498779296875" fill="none">
|
||||||
|
<path
|
||||||
|
d="M12.2438 0.225L12.2438 0.150012L12.2438 0.0750058L12.1688 0.0750058C12.1688 0.0750058 12.0937 0.0750058 12.0188 0L8.34376 0C7.96876 0 7.66876 0.300006 7.66876 0.675C7.66876 1.05001 7.96876 1.35 8.34376 1.35L10.2188 1.35L6.61876 4.95L4.81876 3.15C4.44375 2.775 3.69376 2.775 3.31875 3.15L0.16875 6.3C-0.05625 6.525 -0.05625 6.975 0.16875 7.2C0.318762 7.35001 0.468756 7.425 0.61875 7.425C0.768762 7.425 0.918756 7.425 1.06875 7.2L3.99375 4.275L5.79375 6.075C6.16876 6.45001 6.91875 6.45001 7.29376 6.075L11.0438 2.32501L11.0438 4.20001C11.0438 4.575 11.3438 4.87501 11.7188 4.87501C12.0937 4.87501 12.3938 4.575 12.3938 4.20001L12.3938 0.825011L12.3938 0.600011L12.2438 0.225Z"
|
||||||
|
fill="#00B87A">
|
||||||
|
</path>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
</span>
|
||||||
|
<span class="t1">完成率98%</span>
|
||||||
|
<span class="t2">(30 days)</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<div class="top">
|
||||||
|
<div class="icon">
|
||||||
|
<img src="/assets/demo/sb4.png" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<p class="t1" style="color: rgba(255, 153, 0, 1);">2条</p>
|
||||||
|
<p class="t2">告警信息</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bottom">
|
||||||
|
<span class="icon"><svg xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:xlink="http://www.w3.org/1999/xlink" width="12.393798828125" height="7.42498779296875"
|
||||||
|
viewBox="0 0 12.393798828125 7.42498779296875" fill="none">
|
||||||
|
<path
|
||||||
|
d="M12.2438 0.225L12.2438 0.150012L12.2438 0.0750058L12.1688 0.0750058C12.1688 0.0750058 12.0937 0.0750058 12.0188 0L8.34376 0C7.96876 0 7.66876 0.300006 7.66876 0.675C7.66876 1.05001 7.96876 1.35 8.34376 1.35L10.2188 1.35L6.61876 4.95L4.81876 3.15C4.44375 2.775 3.69376 2.775 3.31875 3.15L0.16875 6.3C-0.05625 6.525 -0.05625 6.975 0.16875 7.2C0.318762 7.35001 0.468756 7.425 0.61875 7.425C0.768762 7.425 0.918756 7.425 1.06875 7.2L3.99375 4.275L5.79375 6.075C6.16876 6.45001 6.91875 6.45001 7.29376 6.075L11.0438 2.32501L11.0438 4.20001C11.0438 4.575 11.3438 4.87501 11.7188 4.87501C12.0937 4.87501 12.3938 4.575 12.3938 4.20001L12.3938 0.825011L12.3938 0.600011L12.2438 0.225Z"
|
||||||
|
fill="#00B87A">
|
||||||
|
</path>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
</span>
|
||||||
|
<span class="t1">4%</span>
|
||||||
|
<span class="t2">(30 days)</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="back">
|
||||||
|
<span>34522天</span>
|
||||||
|
<span>已安全运行</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</template>
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.content {
|
||||||
|
font-family: "Alibaba-PuHuiTi-Bold";
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item {
|
||||||
|
background-color: rgba(240, 249, 255, 1);
|
||||||
|
padding: 20px 40px 20px 20px;
|
||||||
|
border-radius: 20px;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.top {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
text-align: left;
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: block;
|
||||||
|
margin-top: -20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.t1 {
|
||||||
|
font-size: 26px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.t2 {
|
||||||
|
font-size: 18px;
|
||||||
|
color: rgba(62, 73, 84, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom {
|
||||||
|
font-size: 12px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.t1 {
|
||||||
|
color: rgba(0, 184, 122, 1);
|
||||||
|
margin: 0 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.t2 {
|
||||||
|
color: rgba(150, 155, 160, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.back {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script setup>
|
||||||
|
|
||||||
|
</script>
|
||||||
23
src/views/demo1/index.vue
Normal file
23
src/views/demo1/index.vue
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
<template>
|
||||||
|
<div style="padding: 20px;">
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="15">
|
||||||
|
<TitleComponent title="设备情况" subtitle="电站一次监控数据" />
|
||||||
|
<sbqk />
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
<style scoped>
|
||||||
|
.el-card {
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script setup>
|
||||||
|
import TitleComponent from '@/views/demo/components/TitleComponent.vue';
|
||||||
|
import sbqk from './components/sbqk.vue';
|
||||||
|
|
||||||
|
</script>
|
||||||
Reference in New Issue
Block a user