大屏标题组件封装

src/components/card.vue

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