新增营销系统、分销系统、会员功能、门店、提现功能

components/canvasShow/basics/imageTextNav.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="ul image-text-nav" :class="'terminal' + terminal">
+    <div
+        v-for="(item, index) in componentContent.imgTextData"
+        :key="index"
+        class="li"
+        :style="{ flex: '0 0 ' + getItemValue() + '%' }"
+        @click="jumpLink(item.linkObj)"
+    >
+      <div class="img-box">
+        <div class="img-box-inner">
+          <image class="img" :src="item.img" fit="contain" />
+        </div>
+      </div>
+      <h4 class="h4">{{ item.title }}</h4>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { toRefs } from 'vue';
+import { funMixin } from '../config/mixin'
+const { jumpLink } = funMixin()
+const props = defineProps({
+  terminal: {
+    type: Number,
+    default: 4,
+  },
+  componentContent: {
+    type: Object,
+    default () {
+      return {};
+    }
+  }
+})
+const { terminal, componentContent } = toRefs(props)
+// 计算生成格子百分比
+function getItemValue () {
+  const len = parseInt(componentContent.value.imgTextData.length)
+  if (len === 0) {
+    return 0
+  } else {
+    return ((1 / len) * 10000) / 100.0
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.image-text-nav {
+  min-height: 102rpx;
+  width: 680rpx;
+  margin: 0 auto;
+  display: flex;
+  padding: 21rpx 0;
+  background-color: #fff;
+  border-radius: 15rpx;
+  .li {
+    text-align: center;
+    .img-box {
+      .img {
+        width: 60rpx;
+        height: 60rpx;
+      }
+    }
+    .h4 {
+      font-size: 24rpx;
+      color: #333;
+      line-height: 33rpx;
+      margin-top: 18rpx;
+    }
+  }
+  &.terminal4 {
+    width: 1000rpx;
+    .li {
+      .img-box {
+        display: inline-block;
+        width: 100rpx;
+        height: 100rpx;
+        border: 2rpx solid #f3f4f5;
+        border-radius: 10rpx;
+        &-inner {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          height: 100%;
+        }
+        .img {
+          width: 60rpx;
+          height: 60rpx;
+        }
+      }
+      .h4 {
+        font-size: 18rpx;
+        color: #ccc;
+        line-height: 1em;
+        padding-top: 20rpx;
+      }
+    }
+  }
+}
+</style>