103 lines
2.1 KiB
Vue
103 lines
2.1 KiB
Vue
<!--
|
|
* @Author: szy
|
|
* @Date: 2022-03-01 09:16:22
|
|
* @LastEditors: Please set LastEditors
|
|
* @LastEditTime: 2022-09-29 15:12:34
|
|
* @FilePath: \web-pc\src\pages\big-screen\components\item-wrap\item-wrap.vue
|
|
-->
|
|
<template>
|
|
<div class="lr_titles">
|
|
<div class="item_title" v-if="title !== ''">
|
|
<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>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {};
|
|
},
|
|
props: {
|
|
title: {
|
|
type: String,
|
|
default: () => "",
|
|
},
|
|
},
|
|
created() {},
|
|
|
|
mounted() {},
|
|
methods: {},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
$item-title-height: 20px;
|
|
$item_title_content-height: calc(100% - 20px);
|
|
|
|
.lr_titles {
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
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%;
|
|
padding-bottom: 12px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.title-inner {
|
|
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 {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.item_title_content_def {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
</style>
|