admin/zhgdlarge
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

大屏标题组件封装

Browse Source
This commit is contained in:
jxj_yjl 2023-09-05 14:35:22 +08:00
parent 665b6a49f1
commit 0064f8362e
4 changed files with 25 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/titleIcon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 52 KiB

BIN
src/assets/images/titleImg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 436 KiB

BIN
src/assets/images/titleImg.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 519 KiB

27
src/components/card.vue
View File

@ -1,8 +1,11 @@
<template>
<div class="h-card">
<div class="title">
<div><img src="@/assets/images/titleIcon.png" alt="" /></div>
<div class="titltText">
<i>{{ title }}</i>
</div>
</div>
<div class="content">
<slot></slot>
</div>
@ -10,7 +13,6 @@
</template>
<script>
import { ref } from "vue";
export default {
props: ["title"],
setup(props) {
@ -24,22 +26,27 @@ export default {
width: 100%;
height: 100%;
.title {
height: 15%;
line-height: 4vh;
text-align: left;
background: url("@/assets/images/titleImg.png") no-repeat;
background-size: 100% 100%;
display: flex;
div {
font-size: calc(100vw * 18 / 1920);
color: #ffffff;
background: url("@/assets/images/titleImg.webp") no-repeat;
background-size: 100% 100%;
img {
width: 110%;
margin-left: 30%;
}
i {
margin-left: 45px;
font-family: OPPOSansH;
}
}
.titltText {
margin: 1% 0 0 2%;
}
}
.content {
margin-top: 10px;
height: calc(100% - 34px);
margin-top: 2%;
height: 88%;
background: url("@/assets/images/cardImg.png") no-repeat;
background-size: 100% 100%;
}