index.vue 7.35 KB
<template>
  <div class="page flex-col">
    <div class="group_1 flex-row justify-between">
      <span class="text_1">9:41</span>
      <img
        class="image_1"
        referrerpolicy="no-referrer"
        src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng41ebf05313566695702fdc28688b6ed52dbbba555ddd1f6c423593ff63b3f65e"
      />
    </div>
    <div class="group_2 flex-row justify-between">
      <img
        class="thumbnail_1"
        referrerpolicy="no-referrer"
        src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng66b8991933f35bccdd7664c63b4a7cba9b2c3554be75da299d9c33e4b9efda22"
      />
      <span class="text_2">产品中心</span>
    </div>
    <div class="group_3 flex-col">
      <div class="group_4 flex-col">
        <div class="group_5 flex-row justify-between">
          <div class="text-wrapper_1 flex-col">
            <span class="text_3">全部产品</span>
          </div>
          <div class="text-wrapper_2 flex-col">
            <span class="text_4">人寿保险</span>
          </div>
          <div class="text-wrapper_3 flex-col">
            <span class="text_5">医疗保险</span>
          </div>
          <div class="text-wrapper_4 flex-col">
            <span class="text_6">意外保险</span>
          </div>
        </div>
      </div>
      <span class="text_7">全部产品</span>
      <div class="grid_1 flex-row">
        <div class="box_1 flex-col">
          <div class="image-text_1 flex-col">
            <div class="box_2 flex-col">
              <div class="text-wrapper_5 flex-col">
                <span class="text_8">热卖</span>
              </div>
            </div>
            <span class="text-group_1">终身寿险尊享版</span>
          </div>
          <div class="text-wrapper_6 flex-col">
            <span class="text_9">5年超值</span>
          </div>
        </div>
        <div class="box_3 flex-col">
          <span class="text_10">百万医疗保险计划</span>
          <div class="block_1 flex-row justify-between">
            <img
              class="thumbnail_2"
              referrerpolicy="no-referrer"
              src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPnga1fc927b8312af6aec1a5da5cbcba571a10640194d44885876793d4472bcffe2"
            />
            <div class="group_6 flex-col">
              <div class="text-wrapper_7 flex-col">
                <span class="text_11">收益率3.5%</span>
              </div>
            </div>
          </div>
        </div>
        <div class="box_4 flex-col">
          <span class="text_12">意外伤害保障计划</span>
          <div class="box_5 flex-row justify-between">
            <img
              class="thumbnail_3"
              referrerpolicy="no-referrer"
              src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng4c86d1d1b122075e3c3268fd63f98594b586778c6dc6b611dc372913490d2807"
            />
            <div class="box_6 flex-col">
              <div class="text-wrapper_8 flex-col">
                <span class="text_13">保证收益万能</span>
              </div>
            </div>
          </div>
        </div>
        <div class="box_7 flex-col">
          <div class="image-text_2 flex-col">
            <div class="box_8 flex-col">
              <div class="text-wrapper_9 flex-col">
                <span class="text_14">热卖</span>
              </div>
            </div>
            <span class="text-group_2">分红型年金保险</span>
          </div>
          <div class="box_9 flex-row justify-between">
            <img
              class="thumbnail_4"
              referrerpolicy="no-referrer"
              src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPnga1fc927b8312af6aec1a5da5cbcba571a10640194d44885876793d4472bcffe2"
            />
            <div class="block_2 flex-col">
              <div class="text-wrapper_10 flex-col">
                <span class="text_15">保证收益万能</span>
              </div>
            </div>
          </div>
        </div>
        <div class="box_10 flex-col">
          <span class="text_16">重大疾病保险</span>
          <div class="group_7 flex-row justify-between">
            <img
              class="thumbnail_5"
              referrerpolicy="no-referrer"
              src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng4c86d1d1b122075e3c3268fd63f98594b586778c6dc6b611dc372913490d2807"
            />
            <div class="group_8 flex-col">
              <div class="text-wrapper_11 flex-col">
                <span class="text_17">收益率4.2%</span>
              </div>
            </div>
          </div>
        </div>
        <div class="box_11 flex-col">
          <div class="image-text_3 flex-col">
            <div class="box_12 flex-col">
              <div class="text-wrapper_12 flex-col">
                <span class="text_18">热卖</span>
              </div>
            </div>
            <span class="text-group_3">少儿教育金保险</span>
          </div>
          <div class="group_9 flex-row justify-between">
            <img
              class="thumbnail_6"
              referrerpolicy="no-referrer"
              src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPnga1fc927b8312af6aec1a5da5cbcba571a10640194d44885876793d4472bcffe2"
            />
            <div class="group_10 flex-col">
              <div class="text-wrapper_13 flex-col">
                <span class="text_19">教育专属</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="group_11 flex-col">
        <img
          class="image_2"
          referrerpolicy="no-referrer"
          src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngbf3e746af52a38753bd540d5f486761a166161ff3c8f2985aa5e994a36349ea4"
        />
        <div class="list_1 flex-row">
          <div
            class="image-text_4 flex-col"
            v-for="(item, index) in loopData0"
            :key="index"
          >
            <img
              class="label_1"
              referrerpolicy="no-referrer"
              :src="item.lanhuimage0"
            />
            <span
              class="text-group_4"
              :style="{ color: item.lanhufontColor0 }"
              v-html="item.lanhutext0"
            ></span>
          </div>
        </div>
        <img
          class="image_3"
          referrerpolicy="no-referrer"
          src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngd87bce34194e46404c7ac21a64bed8e9f8454451baaf336c5201241680a20c9d"
        />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      loopData0: [
        {
          lanhuimage0:
            'https://lanhu-oss-2537-2.lanhuapp.com/SketchPnga613c67a645a5984586afecdb62939c0f7a50579c221b1918780e7886dfe9c43',
          lanhutext0: '首页',
          lanhufontColor0: 'rgba(37,99,235,1.000000)',
        },
        {
          lanhuimage0:
            'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng355fd7cd6d5c986d30655db577fe8e511f878d37c9506e77dc53be60228d6453',
          lanhutext0: 'AI答疑',
          lanhufontColor0: 'rgba(156,163,175,1.000000)',
        },
        {
          lanhuimage0:
            'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng13ceb19b113cdc23fbf47e15ccf14d27aec044ad2c13f88539fc8459993ade6f',
          lanhutext0: '我的',
          lanhufontColor0: 'rgba(156,163,175,1.000000)',
        },
      ],
      constants: {},
    };
  },
  methods: {},
};
</script>
<style src="./common.css" />
<style src="./index.css" />