add: 1

src/views/marketing_center/components/headerCard.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="item">
+    <img :src="getIconPath(props.icon)" class="icon" />
+    <div class="info">
+      <div class="name">{{ props.name }}</div>
+      <div class="intro">
+        {{ props.intro }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import defaultIcon from '@/assets/logo.png';
+
+const props = defineProps({
+  icon: {
+    type: String,
+    defautl: ''
+  },
+  name: {
+    type: String,
+    default: ''
+  },
+  intro: {
+    type: String,
+    default: ''
+  }
+});
+
+// 动态获取PNG图标路径
+const getIconPath = (iconName) => {
+  try {
+    // 直接导入对应PNG文件
+    return new URL(`/src/assets/applocation/${iconName}.png`, import.meta.url).href;
+  } catch (error) {
+    console.warn(`图标 ${iconName}.png 不存在`);
+    return defaultIcon; // 图标不存在时使用默认图标
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.item {
+  display: flex;
+  align-items: center;
+  padding: 10px;
+  background-color: #F8F8F8;
+  border-radius: 4px;
+  transition: all 0.1s ease-in-out;
+
+  // &:hover {
+  //   cursor: pointer;
+  //   background-color: #d5ebff;
+  // }
+
+  .icon {
+    width: 48px;
+    height: 48px;
+    margin-right: 10px;
+  }
+
+  .info {
+    .name {
+      font-size: 14px;
+    }
+
+    .intro {
+      margin-top: 4px;
+      font-size: 14px;
+      color: #666;
+      line-height: 1.4em;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 1;
+      line-clamp: 1;
+      -webkit-box-orient: vertical;
+      word-break: break-all;
+      white-space: normal;
+    }
+  }
+}
+</style>