yanglijie/smart-large-screen-light-ln
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

2026新UI

Browse Source
This commit is contained in:
lnljyang
2026-01-28 17:54:51 +08:00
parent 667006bb89
commit daa9749c96
24 changed files with 1443 additions and 1048 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
src/components/item-wrap/item-wrap.vue
View File

@@ -6,18 +6,17 @@
* @FilePath: \web-pc\src\pages\big-screen\components\item-wrap\item-wrap.vue
-->
<template>
<dv-border-box-13 class="lr_titles">
<div class="lr_titles">
<div class="item_title" v-if="title !== ''">
<div class="zuo"></div>
<span class="title-inner"> &nbsp;&nbsp;{{ title }}&nbsp;&nbsp; </span>
<div class="you"></div>
<span class="title-inner">{{ title }}</span>
<span class="unit">单位: kg</span>
</div>
<div
:class="title !== '' ? 'item_title_content' : 'item_title_content_def'"
>
<slot></slot>
</div>
</dv-border-box-13>
</div>
</template>
<script>
@@ -37,56 +36,62 @@ export default {
methods: {},
};
</script>
<style lang='scss' scoped>
$item-title-height: 38px;
$item_title_content-height: calc(100% - 38px);
<style lang="scss" scoped>
$item-title-height: 20px;
$item_title_content-height: calc(100% - 20px);
.lr_titles {
height: 100%;
box-sizing: border-box;
:deep(.border-box-content) {
box-sizing: border-box;
padding: 6px 16px 0px;
}
background: #ffffff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
padding: 16px;
display: flex;
flex-direction: column;
.item_title {
height: $item-title-height;
line-height: $item-title-height;
width: 100%;
color: #1976d2;
text-align: center;
// background: linear-gradient(to right, transparent, #f5f7fa, transparent);
position: relative;
padding-bottom: 12px;
display: flex;
align-items: center;
justify-content: center;
.zuo,
.you {
width: 58px;
height: 14px;
background-image: url("../../assets/img/titles/zuo.png");
}
.you {
transform: rotate(180deg);
}
justify-content: space-between;
.title-inner {
font-weight: 900;
letter-spacing: 2px;
background: linear-gradient(
92deg,
#666666 0%,
#1976d2 48.8525390625%,
#1565c0 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 16px;
font-weight: 600;
color: #333333;
letter-spacing: 1px;
position: relative;
// &::before {
// content: '';
// position: absolute;
// left: 0;
// top: 50%;
// transform: translateY(-50%);
// width: 4px;
// height: 16px;
// background: linear-gradient(180deg, #00D4AA 0%, #00bfa5 100%);
// border-radius: 2px;
// }
}
.unit {
width: 53px;
line-height: 19px;
border-radius: 4px;
background: #ecfdf5;
color: #059669;
font-family: "PingFang SC";
font-weight: 400;
font-size: 10px;
text-align: center;
}
}
.item_title_content {
height: $item_title_content-height;
flex: 1;
overflow: hidden;
}
.item_title_content_def {
@@ -94,4 +99,4 @@ $item_title_content-height: calc(100% - 38px);
height: 100%;
}
}
</style>
</style>