VUE视图样式定义和使用

1. 自定义div样式： image-container
2. style样式中容器的圆角设置

<template>
  <div class="synthesizing-page">
     
      <!-- <img :src="imgPath" class="synthesis-image"/> -->

      <div class="image-container">
        <img :src="imgPath" class="synthesis-image" />
        <img :src="overlay" class="overlay-image" />
      </div>

    </div>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted, getCurrentInstance } from 'vue';
import TopBar from '@/components/TopBar/index.vue';

const title = ref('我是标题');
const processTips = ref('合成中...');
const resultTips = ref('提示：上传照片时，如果照片中的人脸被遮挡，可能无法识别。');

onMounted(() => {
  const searchParams = new URLSearchParams(window.location.search);
  console.log(`onMounted >>> searchParams ${ searchParams }`);
});

const imgPath = computed(() => {
    return require("@/assets/images/aitool/test_avatar.png");
});

const overlay = computed(() => {
  return require("@/assets/images/voice/loading.webp");
});

</script>

<style lang="less" scoped>
@import '~@/assets/styles/common.less';

.synthesizing-page {
  background-color: #03141A;
  padding-top: env(safe-area-inset-top);
  height: 100vh;
  overflow: hidden;
  font-family: "Poppins";
  background-image: url('~@/assets/images/aitool/bg.png');
  background-size: contain;
  background-position: top;
  background-repeat: no-repeat;
}

* {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.image-container {
  position: relative;
  width: calc(100% - 96px);
  height: auto;
  margin: 64px 48px 0px;
  border: 2px solid red;
  border-radius: 16px;
  overflow: hidden;
}

.synthesis-image {
  width: 100%;
  height: auto;
  border-radius: 16px;
  object-fit: cover;
}

.overlay-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

</style>