72 lines
1.1 KiB
Vue
72 lines
1.1 KiB
Vue
<!--
|
|
filename: ShadowRect.vue
|
|
author: liubin
|
|
date: 2023-12-05 14:28:57
|
|
description: 阴影矩形
|
|
-->
|
|
|
|
<template>
|
|
<div class="shadow-rect" :style="{ borderRadius: rounded ? '8px' : '2px' }">
|
|
<slot>
|
|
<div
|
|
class="test-data"
|
|
style="flex: 1; display: flex; align-items: center">
|
|
<span
|
|
style="
|
|
flex: 7;
|
|
color: #fff;
|
|
text-align: right;
|
|
font-size: 18px;
|
|
line-height: 1.12;
|
|
letter-spacing: 1px;
|
|
padding-right: 12px;
|
|
">
|
|
窑炉压力碹顶加权
|
|
</span>
|
|
<span
|
|
style="
|
|
flex: 3;
|
|
color: #fff;
|
|
text-align: left;
|
|
font-size: 18px;
|
|
line-height: 1.12;
|
|
padding-right: 8px;
|
|
">
|
|
92Kpa
|
|
</span>
|
|
</div>
|
|
</slot>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: '',
|
|
components: {},
|
|
props: ['rounded'],
|
|
data() {
|
|
return {};
|
|
},
|
|
watch: {
|
|
rounded(val) {
|
|
if (val) {
|
|
console.log('val', val);
|
|
}
|
|
},
|
|
},
|
|
computed: {},
|
|
methods: {},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.shadow-rect {
|
|
padding: 8px;
|
|
border-radius: 2px;
|
|
box-shadow: inset 0 0 8px 2px #ccc3;
|
|
color: white;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
</style>
|