<script setup>
import QrcodeVue from "qrcode.vue";
import make1 from "/images/make1.png";
import make2 from "/images/make2.png";
import { user } from "~/store/user";
let qrCode = $ref("");
qrCode = `${window.GLOBAL_CONFIG.origin}/mobile/#/home/caiji?token=${user.token}`;
</script>

<template>
  <div class="">
    <div class="h-full min-w-800px flex flex-col px-40px py-60px">
      <div class="flex justify-between">
        <div class="h-417px max-w-666px w-4/9 rounded-30px">
          <div class="max-h-340px w-full overflow-hidden">
            <img class="w-full" :src="make1" alt="" />
          </div>
          <div
            class="w-full flex items-center justify-between rounded bg-white px-50px py-15px"
          >
            <p class="text-24px">2D数字人定制</p>
            <div>
              <qrcode-vue :value="qrCode" :size="110" level="H"></qrcode-vue>
            </div>
          </div>
        </div>
        <div class="h-417px max-w-666px w-4/9 rounded-10px">
          <div class="max-h-340px w-full overflow-hidden">
            <img class="w-full" :src="make2" alt="" />
          </div>
          <div
            class="w-full flex items-center justify-between rounded bg-white px-50px py-15px"
          >
            <p class="text-24px">声音定制</p>
            <qrcode-vue :value="qrCode" :size="110" level="H"></qrcode-vue>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<route lang="json">
  {
    "meta":{
      "title":"数字人定制",
      "img":"/images/szr-title.png",
      "sort":1
    }
  }
</route>


<style lang="scss" scoped>
:deep {
  .el-input__wrapper {
    // background: #f7f7f7;
    box-shadow: none;
  }
}

.rounded {
  border-radius: 0 0 24px 24px;
}

.rounded_sm {
  border-radius: 0 10px 0 10px;
}

.shadow_gray {
  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.14);
}

.shadow_green {
  box-shadow: 0px 0px 8px 2px #cceabb;
}
</style>
