km-card-layout-component-miniprogram 0.1.8 → 0.1.10

package/example/pages/home/index.js

@@ -1,24 +1,390 @@
-
-
-const layouts = [{"name":"内置布局-右侧logo","width":343,"height":210,"children":[{"id":"f2dd3515-2147-460a-b788-3f58dd5f858b","type":"custom","style":{"borderRadius":0,"backgroundColor":"currentColor"},"layout":{"x":20,"y":104,"mode":"absolute","width":12,"height":1,"zIndex":8}},{"id":"7fd4c8cd-6bea-42d0-9a80-b1ba27f4abd3","type":"custom","style":{"borderRadius":0,"backgroundColor":"currentColor"},"layout":{"x":37,"y":104,"mode":"absolute","width":105,"height":1,"zIndex":9}},{"id":"1","key":"name","type":"text","style":{"color":"","fontSize":16,"textAlign":"left","fontWeight":"bold","lineHeight":22},"layout":{"x":20,"y":45,"mode":"absolute","width":210,"height":22,"zIndex":1},"binding":"user.name","defaultValue":"名片君"},{"id":"2","key":"company","type":"text","style":{"color":"","fontSize":11,"textAlign":"left","fontWeight":"normal","lineHeight":15},"layout":{"x":20,"y":74,"mode":"absolute","width":210,"height":15,"zIndex":3},"binding":"user.company","defaultValue":"合肥魅客网络有限公司"},{"id":"4","key":"duty","type":"text","style":{"color":"","fontSize":10,"textAlign":"left","fontWeight":"normal","lineHeight":15},"layout":{"x":20,"y":21,"mode":"absolute","width":210,"height":15,"zIndex":2},"binding":"user.duty","defaultValue":"销售经理"},{"id":"3","key":"mobile","icon":{"style":"fill","enable":true},"type":"text","style":{"color":"","fontSize":10,"textAlign":"left","fontWeight":"normal","lineHeight":15},"layout":{"x":20,"y":123,"mode":"absolute","width":280,"height":15,"zIndex":5},"binding":"user.mobile","defaultValue":"18888888888"},{"id":"5","key":"email","icon":{"style":"fill","enable":true},"type":"text","style":{"color":"","fontSize":10,"textAlign":"left","fontWeight":"normal","lineHeight":15},"layout":{"x":20,"y":145,"mode":"absolute","width":280,"height":15,"zIndex":6},"binding":"user.email","defaultValue":"km@kuanmai.com"},{"id":"8","key":"logo","type":"image","style":{"color":"#000000","objectFit":"contain","borderRadius":0},"layout":{"x":263,"y":20,"mode":"absolute","width":60,"height":60,"zIndex":4},"binding":"user.logo","defaultValue":"https://km-1257079185.cos.ap-chengdu.myqcloud.com/local/image/202511/4c71811adfa51e1e3ab4181a88cebc87.png"},{"id":"9","key":"address","icon":{"style":"fill","enable":true},"type":"text","style":{"color":"","fontSize":10,"textAlign":"left","fontWeight":"normal","lineHeight":15},"layout":{"x":20,"y":167,"mode":"absolute","width":280,"height":33,"zIndex":7},"binding":"user.address","defaultValue":"安徽省合肥市包河区硅谷大厦"}],"container":{"mode":"absolute"},"fontColor":"#333333","backgroundImage":"https://km-1257079185.cos.ap-chengdu.myqcloud.com/local/image/202511/0a7331e2e1a9a4cbc828afe6c338aaae.png","backgroundZIndex":1}]
-
+const layouts = [
+  {
+    name: "双面布局",
+    width: 343,
+    height: 210,
+    children: [
+      {
+        id: "3",
+        key: "mobile",
+        icon: { name: "mobile", size: 10, style: "fill", enable: true },
+        type: "text",
+        style: { fontSize: 9, textAlign: "left", fontWeight: "normal", lineHeight: 13 },
+        layout: { x: 204, y: 157, mode: "absolute", width: 120, height: 13, zIndex: 1 },
+        binding: "user.mobile",
+      },
+      {
+        id: "4",
+        key: "duty",
+        type: "text",
+        style: { fontSize: 10, textAlign: "left", fontWeight: "normal", lineHeight: 14 },
+        layout: { x: 40, y: 96, mode: "absolute", width: 120, height: 14, zIndex: 2 },
+        binding: "user.duty",
+      },
+      {
+        id: "1",
+        key: "name",
+        type: "text",
+        style: { fontSize: 16, textAlign: "left", fontWeight: "bold", lineHeight: 22 },
+        layout: { x: 40, y: 70, mode: "absolute", width: 120, height: 22, zIndex: 3 },
+        binding: "user.name",
+      },
+      {
+        id: "2",
+        key: "company",
+        icon: { name: "company", size: 10, style: "fill", enable: true },
+        type: "text",
+        style: { fontSize: 9, textAlign: "left", fontWeight: "normal", lineHeight: 13 },
+        layout: { x: 15, y: 157, mode: "absolute", width: 162, height: 13, zIndex: 4 },
+        binding: "user.company",
+      },
+      {
+        id: "5",
+        key: "email",
+        icon: { name: "email", size: 10, style: "fill", enable: true },
+        type: "text",
+        style: { fontSize: 9, textAlign: "left", fontWeight: "normal", lineHeight: 13 },
+        layout: { x: 204, y: 181, mode: "absolute", width: 120, height: 13, zIndex: 9 },
+        binding: "user.email",
+      },
+      {
+        id: "9",
+        key: "address",
+        icon: { name: "address", size: 10, style: "fill", enable: true },
+        type: "text",
+        style: { fontSize: 9, textAlign: "left", fontWeight: "normal", lineHeight: 13 },
+        layout: { x: 15, y: 181, mode: "absolute", width: 162, height: 26, zIndex: 10 },
+        binding: "user.addressName",
+      },
+    ],
+    container: { mode: "absolute" },
+    fontColor: "#ffffff",
+    backgroundImage:
+      "https://km-1257079185.cos.ap-chengdu.myqcloud.com/local/image/202511/4045e1c401d5ecf186409c98f54a4aaf.png",
+    backgroundZIndex: 0,
+  },
+  {
+    name: "双面布局-反面",
+    width: 343,
+    height: 210,
+    children: [
+      {
+        id: "12",
+        key: "en_name",
+        type: "text",
+        style: { fontSize: 16, textAlign: "left", fontWeight: "bold", lineHeight: 22 },
+        layout: { x: 40, y: 70, mode: "absolute", width: 180, height: 22, zIndex: 1 },
+        binding: "user.moreCardInfo.extInfo.name",
+      },
+      {
+        id: "13",
+        key: "en_duty",
+        type: "text",
+        style: { fontSize: 10, textAlign: "left", fontWeight: "normal", lineHeight: 14 },
+        layout: { x: 40, y: 96, mode: "absolute", width: 180, height: 14, zIndex: 2 },
+        binding: "user.moreCardInfo.extInfo.duty",
+      },
+      {
+        id: "14",
+        key: "en_company",
+        icon: { name: "company", style: "fill", enable: true },
+        type: "text",
+        style: { fontSize: 9, textAlign: "left", fontWeight: "normal", lineHeight: 13 },
+        layout: { x: 16, y: 157, mode: "absolute", width: 173, height: 13, zIndex: 3 },
+        binding: "user.moreCardInfo.extInfo.company",
+      },
+      {
+        id: "15",
+        key: "en_address",
+        icon: { name: "address", style: "fill", enable: true },
+        type: "text",
+        style: { fontSize: 9, textAlign: "left", fontWeight: "normal", lineHeight: 13 },
+        layout: { x: 16, y: 181, mode: "absolute", width: 173, height: 26, zIndex: 4 },
+        binding: "user.moreCardInfo.extInfo.address",
+      },
+      {
+        id: "5",
+        key: "email",
+        icon: { name: "email", style: "fill", enable: true },
+        type: "text",
+        style: { fontSize: 9, textAlign: "left", fontWeight: "normal", lineHeight: 13 },
+        layout: { x: 206, y: 181, mode: "absolute", width: 130, height: 13, zIndex: 9 },
+        binding: "user.email",
+      },
+      {
+        id: "3",
+        key: "mobile",
+        icon: { name: "mobile", style: "fill", enable: true },
+        type: "text",
+        style: { fontSize: 9, textAlign: "left", fontWeight: "normal", lineHeight: 13 },
+        layout: { x: 206, y: 157, mode: "absolute", width: 130, height: 13, zIndex: 10 },
+        binding: "user.mobile",
+      },
+    ],
+    container: { mode: "absolute" },
+    fontColor: "#ffffff",
+    backgroundImage:
+      "https://km-1257079185.cos.ap-chengdu.myqcloud.com/local/image/202511/4045e1c401d5ecf186409c98f54a4aaf.png",
+    backgroundZIndex: 0,
+  },
+];
 
 const cardData = {
   user: {
-    company: 'Kuanmai Networks',
-    name: 'Ada Lovelace',
-    duty: 'Product Lead',
-    phone: '+86 188-0000-0000',
-    email: 'ada@kuanmai.com',
-    address: '1 Infinite Loop, Shenzhen',
-    avatar: 'https://picsum.photos/200/200?random=12'
-  }
-}
+    companyRole: 0,
+    shareCardCode: "5fd4621ecd08cde75b915ffea91452b9",
+    vip: 20,
+    vipDays: 913,
+    vipLogo:
+      "https://km-1257079185.cos.ap-chengdu.myqcloud.com/static/wechat/icon/user-vip-advanced-v2.png",
+    shareStyle: {
+      templateId: 7,
+      backgroundId: 33,
+      coverStyleId: 1,
+      hasAvatar: true,
+      hasLogo: true,
+      logo: "https://km-1257079185.cos.ap-chengdu.myqcloud.com/local/image/202505/bf307d891024818150d955f6e5ebcd89.png",
+      bgMix: false,
+      person:
+        "https://km-1257079185.cos.ap-chengdu.myqcloud.com/local/image/202512/c49bb25859bc7d4d62e7117d6e5093bc.png",
+      styleId: 9,
+      template: 2,
+      background:
+        "https://km-1257079185.cos.ap-chengdu.myqcloud.com/local/image/202511/21dd21c0d693a1eb44e53bad64b9b94a.png",
+      colorStyle: 2,
+      coverStyle: 3,
+      backgroundConfig: {
+        id: 33,
+        name: "双面1",
+        fileId: 4834,
+        fontColor: "#ffffff",
+        fontColorExtra: [],
+        createAt: "2025-11-28 13:41:50",
+        updateAt: "2025-11-28 13:41:50",
+        file: {
+          id: 4834,
+          type: "image",
+          contentType: "image/png",
+          ext: "png",
+          hash: "4045e1c401d5ecf186409c98f54a4aaf",
+          url: "https://km-1257079185.cos.ap-chengdu.myqcloud.com/local/image/202511/4045e1c401d5ecf186409c98f54a4aaf.png",
+          src: "https://km-1257079185.cos.ap-chengdu.myqcloud.com/local/image/202511/4045e1c401d5ecf186409c98f54a4aaf.png",
+          imageThumb:
+            "https://km-1257079185.cos.ap-chengdu.myqcloud.com/local/image/202511/4045e1c401d5ecf186409c98f54a4aaf_thumb.jpg",
+          imageWidth: 1029,
+          imageHeight: 630,
+          mediaLong: 0,
+          size: 56139,
+          sensitiveStatus: 1,
+          sensitiveAt: 0,
+          sensitiveTraceId: "",
+          sensitiveResult: null,
+          sensitiveEndAt: 0,
+          checkStatus: 0,
+          checkAuid: 0,
+          checkMark: "",
+          checkAt: 0,
+          createAt: "2025-11-28 13:41:06",
+          updateAt: "2025-11-28 13:41:06",
+          deleteAt: 0,
+        },
+      },
+      templateConfig: {
+        id: 7,
+        name: "双面布局",
+        previewImg:
+          "https://km-1257079185.cos.ap-chengdu.myqcloud.com/static/cardstyleV3/preview_01.png",
+        height: 210,
+        width: 343,
+        isBgCustomize: 0,
+        enableBgIds: "33,34",
+        enableItemIds: "1,2,3,4,5,9,12,13,14,15",
+        content: [
+          {
+            name: "双面布局",
+            width: 343,
+            height: 210,
+            children: [
+              {
+                id: "3",
+                key: "mobile",
+                icon: { name: "mobile", size: 10, style: "fill", enable: true },
+                type: "text",
+                style: { fontSize: 9, textAlign: "left", fontWeight: "normal", lineHeight: 13 },
+                layout: { x: 204, y: 157, mode: "absolute", width: 120, height: 13, zIndex: 1 },
+                binding: "user.mobile",
+              },
+              {
+                id: "4",
+                key: "duty",
+                type: "text",
+                style: { fontSize: 10, textAlign: "left", fontWeight: "normal", lineHeight: 14 },
+                layout: { x: 40, y: 96, mode: "absolute", width: 120, height: 14, zIndex: 2 },
+                binding: "user.duty",
+              },
+              {
+                id: "1",
+                key: "name",
+                type: "text",
+                style: { fontSize: 16, textAlign: "left", fontWeight: "bold", lineHeight: 22 },
+                layout: { x: 40, y: 70, mode: "absolute", width: 120, height: 22, zIndex: 3 },
+                binding: "user.name",
+              },
+              {
+                id: "2",
+                key: "company",
+                icon: { name: "company", size: 10, style: "fill", enable: true },
+                type: "text",
+                style: { fontSize: 9, textAlign: "left", fontWeight: "normal", lineHeight: 13 },
+                layout: { x: 15, y: 157, mode: "absolute", width: 162, height: 13, zIndex: 4 },
+                binding: "user.company",
+              },
+              {
+                id: "5",
+                key: "email",
+                icon: { name: "email", size: 10, style: "fill", enable: true },
+                type: "text",
+                style: { fontSize: 9, textAlign: "left", fontWeight: "normal", lineHeight: 13 },
+                layout: { x: 204, y: 181, mode: "absolute", width: 120, height: 13, zIndex: 9 },
+                binding: "user.email",
+              },
+              {
+                id: "9",
+                key: "address",
+                icon: { name: "address", size: 10, style: "fill", enable: true },
+                type: "text",
+                style: { fontSize: 9, textAlign: "left", fontWeight: "normal", lineHeight: 13 },
+                layout: { x: 15, y: 181, mode: "absolute", width: 162, height: 26, zIndex: 10 },
+                binding: "user.addressName",
+              },
+            ],
+            container: { mode: "absolute" },
+            fontColor: "#ffffff",
+            backgroundImage:
+              "https://km-1257079185.cos.ap-chengdu.myqcloud.com/local/image/202511/4045e1c401d5ecf186409c98f54a4aaf.png",
+            backgroundZIndex: 0,
+          },
+          {
+            name: "双面布局-反面",
+            width: 343,
+            height: 210,
+            children: [
+              {
+                id: "12",
+                key: "en_name",
+                type: "text",
+                style: { fontSize: 16, textAlign: "left", fontWeight: "bold", lineHeight: 22 },
+                layout: { x: 40, y: 70, mode: "absolute", width: 180, height: 22, zIndex: 1 },
+                binding: "user.moreCardInfo.extInfo.name",
+              },
+              {
+                id: "13",
+                key: "en_duty",
+                type: "text",
+                style: { fontSize: 10, textAlign: "left", fontWeight: "normal", lineHeight: 14 },
+                layout: { x: 40, y: 96, mode: "absolute", width: 180, height: 14, zIndex: 2 },
+                binding: "user.moreCardInfo.extInfo.duty",
+              },
+              {
+                id: "14",
+                key: "en_company",
+                icon: { name: "company", style: "fill", enable: true },
+                type: "text",
+                style: { fontSize: 9, textAlign: "left", fontWeight: "normal", lineHeight: 13 },
+                layout: { x: 16, y: 157, mode: "absolute", width: 173, height: 13, zIndex: 3 },
+                binding: "user.moreCardInfo.extInfo.company",
+              },
+              {
+                id: "15",
+                key: "en_address",
+                icon: { name: "address", style: "fill", enable: true },
+                type: "text",
+                style: { fontSize: 9, textAlign: "left", fontWeight: "normal", lineHeight: 13 },
+                layout: { x: 16, y: 181, mode: "absolute", width: 173, height: 26, zIndex: 4 },
+                binding: "user.moreCardInfo.extInfo.address",
+              },
+              {
+                id: "5",
+                key: "email",
+                icon: { name: "email", style: "fill", enable: true },
+                type: "text",
+                style: { fontSize: 9, textAlign: "left", fontWeight: "normal", lineHeight: 13 },
+                layout: { x: 206, y: 181, mode: "absolute", width: 130, height: 13, zIndex: 9 },
+                binding: "user.email",
+              },
+              {
+                id: "3",
+                key: "mobile",
+                icon: { name: "mobile", style: "fill", enable: true },
+                type: "text",
+                style: { fontSize: 9, textAlign: "left", fontWeight: "normal", lineHeight: 13 },
+                layout: { x: 206, y: 157, mode: "absolute", width: 130, height: 13, zIndex: 10 },
+                binding: "user.mobile",
+              },
+            ],
+            container: { mode: "absolute" },
+            fontColor: "#ffffff",
+            backgroundImage:
+              "https://km-1257079185.cos.ap-chengdu.myqcloud.com/local/image/202511/4045e1c401d5ecf186409c98f54a4aaf.png",
+            backgroundZIndex: 0,
+          },
+        ],
+        isDefault: 0,
+        isMoreCompany: 0,
+        isDouble: 1,
+        isVip: 1,
+        createAt: "2025-11-28 13:40:51",
+        updateAt: "2025-12-12 17:04:26",
+      },
+    },
+    shareImage:
+      "https://km-1257079185.cos.ap-chengdu.myqcloud.com/local/share/share_card_my_10094.png?key=1765607846",
+    moreCardInfo: {
+      duty: ["大大", "啊大大", "啊大大", "阿达啊", "啊大大"],
+      enInfo: { duty: "Kim", name: "Kayer", company: "kim" },
+      company: [],
+      extInfo: {
+        tel: "18454785698",
+        duty: "yingwenzhiwei",
+        name: "yingwenname",
+        domain: "www.baidu.com",
+        address: "yingwendizhi",
+        company: "yingwengongsi",
+        stockCode: "12121",
+      },
+    },
+    verifyAt: 1745910103,
+    jobCertifyAt: 0,
+    companyVerifyAt: 0,
+    spm: "u10094",
+    userId: 10094,
+    name: "灌灌灌灌",
+    image:
+      "https://km-1257079185.cos.ap-chengdu.myqcloud.com/local/avatar/202510/b60765d80e1f1af725988a97116b06d9.jpg",
+    imageId: 3687,
+    mobile: "18451976582",
+    duty: "嘎嘎嘎花城",
+    company: "嘎嘎嘎超小号",
+    companyId: 0,
+    email: "youxiang@qq.com",
+    wechat: "qeqe33小舅自己",
+    wechatQrcode: "",
+    address: "安徽省合肥市蜀山区望江ad啊大大阿达大大啊哒哒哒哒哒哒阿达大大阿达大大多大西路",
+    addressName: "蜀山区合力大厦A座(望江西路南100米)",
+    latitude: "31.829139",
+    longitude: "117.258776",
+    industry: "IT/互联网",
+    finishAt: 1742201476,
+    coin: 38,
+    showVisitor: 0,
+    showExperience: 1,
+  },
+};
 
 Page({
   data: {
     layouts,
     cardData,
-    description: 'CardLayoutInput + data.user binding with stacked cards.'
-  }
-})
+    description: "CardLayoutInput + data.user binding with stacked cards.",
+  },
+});

package/miniprogram_dist/components/card-layout/elements/custom-element/index.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const index_1 = require("../../../../vendor/km-card-layout-core/index");
+Component({
+    options: {
+        styleIsolation: 'apply-shared',
+    },
+    properties: {
+        element: {
+            type: Object,
+            value: {},
+        },
+        rootData: {
+            type: Object,
+            value: {},
+        },
+    },
+    data: {
+        wrapperStyle: '',
+        contentStyle: '',
+    },
+    observers: {
+        element(el) {
+            if (!el)
+                return;
+            const wrapperStyle = (0, index_1.styleObjectToString)((0, index_1.buildWrapperStyle)(el, 'rpx'), 'rpx');
+            const contentStyle = (0, index_1.styleObjectToString)((0, index_1.buildBaseContentStyle)(el), 'rpx');
+            this.setData({ wrapperStyle, contentStyle });
+        },
+    },
+});

package/miniprogram_dist/components/card-layout/elements/custom-element/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

package/miniprogram_dist/components/card-layout/elements/custom-element/index.wxml

@@ -0,0 +1,5 @@
+<view class="km-node km-node--custom" style="{{wrapperStyle}}">
+  <view class="km-node__custom" style="{{contentStyle}}">
+    <slot name="{{element.id}}"></slot>
+  </view>
+</view>

package/miniprogram_dist/components/card-layout/elements/custom-element/index.wxss

@@ -0,0 +1,14 @@
+.km-node {
+  box-sizing: border-box;
+  color: inherit;
+}
+
+.km-node--custom {
+  box-sizing: border-box;
+}
+
+.km-node__custom {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}

package/miniprogram_dist/components/card-layout/elements/icon-element/index.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const index_1 = require("../../../../vendor/km-card-layout-core/index");
+const icon_map_1 = require("../../icon-map");
+const mapIconGlyph = (name, fallback) => {
+    if (!name)
+        return fallback;
+    const glyph = icon_map_1.ICON_CODE_MAP[name];
+    if (glyph)
+        return String.fromCharCode(parseInt(glyph, 16));
+    return fallback || name;
+};
+Component({
+    options: {
+        styleIsolation: 'apply-shared',
+    },
+    properties: {
+        element: {
+            type: Object,
+            value: {},
+        },
+        rootData: {
+            type: Object,
+            value: {},
+        },
+    },
+    data: {
+        wrapperStyle: '',
+        contentStyle: '',
+        iconText: '',
+    },
+    observers: {
+        element(el) {
+            if (!el)
+                return;
+            const wrapperStyle = (0, index_1.styleObjectToString)((0, index_1.buildWrapperStyle)(el, 'rpx'), 'rpx');
+            const contentStyle = (0, index_1.styleObjectToString)((0, index_1.buildBaseContentStyle)(el), 'rpx');
+            const name = (0, index_1.getIconName)(el);
+            const iconText = mapIconGlyph(name, name || '');
+            this.setData({ wrapperStyle, contentStyle, iconText });
+        },
+    },
+});

package/miniprogram_dist/components/card-layout/elements/icon-element/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

package/miniprogram_dist/components/card-layout/elements/icon-element/index.wxml

@@ -0,0 +1,5 @@
+<view class="km-node km-node--icon" style="{{wrapperStyle}}">
+  <view class="km-node__icon icon" style="{{contentStyle}}">
+    {{iconText}}
+  </view>
+</view>

package/miniprogram_dist/components/card-layout/elements/icon-element/index.wxss

@@ -0,0 +1,37 @@
+.km-node {
+  box-sizing: border-box;
+  color: inherit;
+}
+
+.km-node--icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.km-node__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  font-family: 'km-icon', 'PingFang SC', 'Microsoft Yahei', sans-serif;
+  font-style: normal;
+  font-weight: normal;
+}
+
+@font-face {
+  font-family: 'km-icon';
+  src: url('data:font/woff;charset=utf-8;base64,d09GRgABAAAAAEl4AA0AAAAAcmgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAABJXAAAABoAAAAcrMtJV0dERUYAAEk8AAAAHgAAAB4AKQByT1MvMgAAAaQAAABGAAAAYDw3SVljbWFwAAAC7AAAAM8AAAIW8XL3K2dhc3AAAEk0AAAACAAAAAj//wADZ2x5ZgAABJgAAEBZAABkZPJymXJoZWFkAAABMAAAADEAAAA2MtZiFmhoZWEAAAFkAAAAIAAAACQNagmCaG10eAAAAewAAAD/AAABqqs3Ii9sb2NhAAADvAAAANoAAADaKv0P7G1heHAAAAGEAAAAHwAAACABmQHEbmFtZQAARPQAAAFGAAACgl6CAQJwb3N0AABGPAAAAvUAAATh1g15W3jaY2BkYGAA4lqffPd4fpuvDNwsDCDwVIyfA0b///i/gXMWcyeQy8HABBIFAAVdCfwAAAB42mNgZGBgbvjfwBDDOfP/x///OWcxAEVQQCYAuxgH/XjaY2BkYGDIYdzBoMwAAkxAzAWEDAz/wXwGACjlAl8AeNpjYGFRYJzAwMrAwNTJdIaBgaEfQjO+ZjBi5ACKMrAyM2AFAWmuKQwHnjE+y2Ju+N/AwMB8h6ERKMyIpESBgREAenQNCwAAeNo90cErBGEYx/Hf1LMH7MVxoigHtS600pzWnMjBlt2dFAeiNuWgXLgokgslbpyE/Aduyl38J3ty4aCs7/vOk6lPv+d5531n3nfGVF5JIZlUx9fAbawnEfIFq14/YhddFPjFmynZ9n4TbYzg2tcMW6Epr4NQT3jSJ2lcW9ec1fSEAheMnVume7KKBbQwiMye+5/kEpqYwQoOY59pn1xGw3Lt8NwHS7UY35frivqbet2fNYZp+4j76vj+GpUhjZJreLfxODecay/eTzVPzmIj9uX7VLnUmfdb/2fN4trcv0kYv8Oxe/V5Rzhg7inZ8wzjN5b0f6z8PV2d/AHivi0JAHja3dBFUoVRDITR88PD3d3d3d3d3d33zQqYwwVGbIGk8qV6kK7qIN7vlIsCRdlBRT865iPsWOig318/PwOjbwYd+7mKSZAoSbIUqdKky5ApS7YcufLkK1CoSLESpcqCZ4VKVarVqFWnXoNGTZq1aNWmXYdOXbr16NWn34BBQ4aNGDVm3IRJU6bNmDVn3oJFS5atWLVm3YZNW7bt2LVn34FDR46dOHXm3IVLV67duHXn3oNHT8Hv2YtXbyFaot9HfMeMC4jztyL/vr4AXx4eawAAAAAAAAAAAACwAPIDSgQ8BLIFUgWUBcIF/gY8BpIHCgdAB3wHoAgOCHAIxgk+CV4JzAnqCkQKrgtUC8QMEAxsDNQNFA1SDegONg6qDyQPgg/CEAIQxBEwEaQSHBLYE14T4hRcFPIVTBYMFkwWqBckGGAYxhmYGegaEBpeGuIbXhvwHPQd5B62Hygf6CBeILog9CFUIbgiBCJ0ItQjbCQSJGgkuCVsJcImKib0J44ocijOKSApUCo2KmQqtituK34sJixkLMgtdC3WLpgvPC+QMBww/DGCMagyMgAA') format('woff');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+.icon {
+  font-family: 'km-icon' !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

package/miniprogram_dist/components/card-layout/elements/image-element/index.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const index_1 = require("../../../../vendor/km-card-layout-core/index");
+Component({
+    options: {
+        styleIsolation: 'apply-shared',
+    },
+    properties: {
+        element: {
+            type: Object,
+            value: {},
+        },
+        rootData: {
+            type: Object,
+            value: {},
+        },
+    },
+    data: {
+        wrapperStyle: '',
+        contentStyle: '',
+        imageSrc: '',
+        mode: 'aspectFill',
+    },
+    observers: {
+        element(el) {
+            if (!el)
+                return;
+            const data = this.data.rootData || {};
+            const wrapperStyle = (0, index_1.styleObjectToString)((0, index_1.buildWrapperStyle)(el, 'rpx'), 'rpx');
+            const contentStyle = (0, index_1.styleObjectToString)((0, index_1.buildImageContentStyle)(el), 'rpx');
+            const imageSrc = (0, index_1.getImageSrc)(el, data);
+            const mode = el.fit === 'contain' ? 'aspectFit' : 'aspectFill';
+            this.setData({ wrapperStyle, contentStyle, imageSrc, mode });
+        },
+    },
+});

package/miniprogram_dist/components/card-layout/elements/image-element/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

package/miniprogram_dist/components/card-layout/elements/image-element/index.wxml

@@ -0,0 +1,8 @@
+<view class="km-node" style="{{wrapperStyle}}">
+  <image
+    class="km-node__image"
+    style="{{contentStyle}}"
+    src="{{imageSrc}}"
+    mode="{{mode}}"
+  />
+</view>

package/miniprogram_dist/components/card-layout/elements/image-element/index.wxss

@@ -0,0 +1,10 @@
+.km-node {
+  box-sizing: border-box;
+  color: inherit;
+}
+
+.km-node__image {
+  width: 100%;
+  height: 100%;
+  display: block;
+}