ai_service/outputs/poster_layout.vue

<template>
  <div class="poster-container" :style="containerStyle">
    <!-- 图片层 - 根据layout.json定义 -->
    <div
      v-for="(imageInfo, imageName) in layout.images"
      :key="imageName"
      class="image-layer"
      :style="getImageStyle(imageInfo, imageName)"
    ></div>

    <!-- 文本层 -->
    <div class="text-layer title" :style="getTitleStyle()">
      {{ content.layer6_title_content.content }}
    </div>

    <div class="text-layer subtitle" :style="getSubtitleStyle()">
      {{ content.layer7_subtitle_content.content }}
    </div>

    <div
      v-if="content.layer5_logo_content.text"
      class="text-layer logo"
      :style="getLogoStyle()"
    >
      {{ content.layer5_logo_content.text }}
    </div>
  </div>
</template>

<script>
import { ref, reactive, computed } from "vue";

// 导入layout.json和poster_content.json数据
// 注意：实际使用时可能需要动态导入或通过API获取
const layout = {
  canvas: {
    width: 1080,
    height: 1920,
  },
  images: {
    "background.png": {
      position: {
        x: 0,
        y: 0,
      },
      size: {
        width: 1080,
        height: 1920,
      },
    },
    "nankai.png": {
      position: {
        x: 390,
        y: 200,
      },
      size: {
        width: 300,
        height: 300,
      },
    },
    "lotus.jpg": {
      position: {
        x: 270,
        y: 960,
      },
      size: {
        width: 540,
        height: 500,
      },
    },
    "stamp.jpg": {
      position: {
        x: 800,
        y: 1600,
      },
      size: {
        width: 200,
        height: 200,
      },
    },
  },
};

const content = {
  layer5_logo_content: {
    text: "",
    color: "#7E0C6E",
  },
  layer6_title_content: {
    content: "南开风采",
    font_name: "FZLanTingHei-ExtraBold-GB",
    color: "#000000",
  },
  layer7_subtitle_content: {
    content: "百年学府，智慧之光",
    font_name: "Microsoft YaHei",
    color: "#333333",
  },
};

export default {
  name: "PosterLayout",
  setup() {
    const baseUrl = "../outputs/"; // 图像资源的基础路径

    // 计算画布样式
    const containerStyle = computed(() => {
      return {
        width: `${layout.canvas.width}px`,
        height: `${layout.canvas.height}px`,
        position: "relative",
        overflow: "hidden",
        background: "#ffffff",
      };
    });

    // 获取图像层样式
    const getImageStyle = (imageInfo, imageName) => {
      return {
        position: "absolute",
        left: `${imageInfo.position.x}px`,
        top: `${imageInfo.position.y}px`,
        width: `${imageInfo.size.width}px`,
        height: `${imageInfo.size.height}px`,
        backgroundImage: `url(${baseUrl}${imageName})`,
        backgroundSize: "cover",
        backgroundPosition: "center",
        backgroundRepeat: "no-repeat",
        zIndex: imageName.includes("background") ? 1 : 2, // 背景图片优先在底层
      };
    };

    // 获取标题样式
    const getTitleStyle = () => {
      const titleContent = content.layer6_title_content;
      return {
        position: "absolute",
        left: "150px",
        top: "700px",
        width: "780px",
        textAlign: "center",
        color: titleContent.color || "#000000",
        fontFamily: titleContent.font_name || "SimHei",
        fontSize: "80px",
        fontWeight: "bold",
        zIndex: 10,
        textShadow: "2px 2px 4px rgba(0, 0, 0, 0.3)",
      };
    };

    // 获取副标题样式
    const getSubtitleStyle = () => {
      const subtitleContent = content.layer7_subtitle_content;
      return {
        position: "absolute",
        left: "200px",
        top: "820px",
        width: "680px",
        textAlign: "center",
        color: subtitleContent.color || "#333333",
        fontFamily: subtitleContent.font_name || "Microsoft YaHei",
        fontSize: "40px",
        zIndex: 10,
      };
    };

    // 获取logo文本样式
    const getLogoStyle = () => {
      const logoContent = content.layer5_logo_content;
      return {
        position: "absolute",
        left: "50px",
        top: "50px",
        color: logoContent.color || "#000000",
        fontFamily: "Arial, sans-serif",
        fontSize: "24px",
        fontWeight: "bold",
        zIndex: 10,
      };
    };

    return {
      layout,
      content,
      containerStyle,
      getImageStyle,
      getTitleStyle,
      getSubtitleStyle,
      getLogoStyle,
    };
  },
};
</script>

<style scoped>
.poster-container {
  margin: 0 auto;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

.image-layer {
  position: absolute;
}

.text-layer {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}

.title {
  font-size: 80px;
  font-weight: bold;
}

.subtitle {
  font-size: 40px;
}

.logo {
  font-size: 24px;
  font-weight: bold;
}
</style>