<template>
<div class="page-wrapper">
<!-- 顶部标题 -->
<header class="page-header">
<h1>
图片生成视频</h1>
</header>
<!-- 主内容区 -->
<main class="main-container">
<!-- 左侧操作栏 (734px) -->
<section class="left-box">
<!-- 生成参数标题 -->
<div class="section-title">生成参数</div>
<!-- 模型选择 -->
<div class="form-item">
<el-select v-model="form.model" placeholder="模型选择" class="full-width-select"
popper-class="custom-dropdown">
<el-option label="通用视频模型 v1.0" value="v1"></el-option>
<el-option label="动漫增强模型 v2.0" value="v2"></el-option>
</el-select>
</div>
<!-- 提示词输入 -->
<div class="form-item">
<div class="prompt-label">提示词</div>
<div class="textarea-container">
<el-input type="textarea" :rows="5" placeholder="描述你想要融合的
图片" v-model="form.prompt" resize="none"
class="custom-textarea"></el-input>
<div class="upload-trigger" @click="triggerUpload">
<i class="el-icon-link"></i> 上传
图片
</div>
<!-- 隐藏的文件输入 -->
<input type="file" ref="fileInput" style="display: none" accept="image/*"
@change="onFileChange" />
</div>
</div>
<!-- 比例选择 -->
<div class="form-item row-flex">
<span class="label-text">比例</span>
<div class="options-group">
<div class="option-pill" :class="{ active: form.ratio === 
9;vertical
9; }"
@click="form.ratio = 
9;vertical
9;">
竖屏 (手机)
</div>
<div class="option-pill" :class="{ active: form.ratio === 
9;horizontal
9; }"
@click="form.ratio = 
9;horizontal
9;">
横屏 (电脑)
</div>
</div>
</div>
<!-- 时长选择 -->
<div class="form-item row-flex">
<span class="label-text">时长</span>
<div class="options-group">
<div v-for="time in durations" :key="time.val" class="option-tag"
:class="{ active: form.duration === time.val }" @click="form.duration = time.val">
{{ time.label }}
</div>
</div>
</div>
<!-- 风格选择 -->
<div class="form-item">
<div class="label-text mb-10">风格选择</div>
<div class="style-grid">
<div v-for="(item, index) in 4" :key="index" class="style-box"
:class="{ active: form.styleIndex === index }" @click="form.styleIndex = index">
风格{{ index + 1 }}
</div>
</div>
</div>
<!-- 是否生成拼图 -->
<div class="form-item row-flex space-between">
<span class="label-text">是否生成拼图</span>
<div class="select-wrapper-small">
<el-select v-model="form.gridType" size="small">
<el-option label="四
宫格" value="4"></el-option>
<el-option label="单张" value="1"></el-option>
</el-select>
</div>
</div>
<!-- 信息
展示栏 -->
<div class="info-panel">
<div class="info-row">
<span class="info-label">当前模型：</span>
<span class="info-val">{{ currentModelText }}</span>
</div>
<div class="info-row">
<span class="info-label">预计消耗：</span>
<span class="info-val">3-5 分钟</span>
</div>
</div>
<!-- 提交次数 -->
<div class="form-item row-flex space-between counter-area">
<span class="label-text">提交次数</span>
<div class="custom-counter">
<button class="counter-btn" @click="handleCount(-1)" :disabled="form.count <= 1">-</button>
<input type="text" class="counter-input" v-model="form.count" readonly />
<button class="counter-btn" @click="handleCount(1)">+</button>
</div>
</div>
<!-- 底部大按钮 -->
<el-button type="primary" class="submit-btn" @click="startGenerate">开始生成</el-button>
</section>
<!-- 右侧
展示栏 -->
<section class="right-box">
<!--
图片/视频
预览区 -->
<div class="preview-area">
<div class="placeholder-content">
<img v-if="previewImage" :src="previewImage" alt="
预览图" />
<div v-else class="placeholder-bg">点击左侧“上传
图片”添加素材</div>
</div>
</div>
<!-- 底部按钮组 -->
<div class="action-buttons">
<el-button type="primary" class="btn-capcut">导出剪映</el-button>
<el-button plain class="btn-download">
<i class="el-icon-download"></i> 下载
</el-button>
</div>
</section>
</main>
</div>
</template>
<script>
export default {
name: 
9;ImageToVideo
9;,
data() {
return {
form: {
model: 
9;
9;,
prompt: 
9;
9;,
ratio: 
9;vertical
9;,
duration: 
9;25s
9;,
styleIndex: null,
gridType: 
9;4
9;,
count: 1
},
durations: [{
label: 
9;10秒 (普通)
9;,
val: 
9;10s
9;
},
{
label: 
9;15秒 (普通)
9;,
val: 
9;15s
9;
},
{
label: 
9;25秒 (Pro普通)
9;,
val: 
9;25s
9;
},
{
label: 
9;12秒 (Pro普通)
9;,
val: 
9;12s
9;
}
],
previewImage: 
9;
9; // 存储上传的
图片预览 URL
};
},
computed: {
currentModelText() {
return this.form.model === 
9;v1
9; ? 
9;通用视频模型 v1.0
9; : this.form.model === 
9;v2
9; ? 
9;动漫增强模型 v2.0
9; : 
9;未选择
9;;
}
},
methods: {
handleCount(step) {
const newVal = this.form.count + step;
if (newVal >= 1) this.form.count = newVal;
},
startGenerate() {
if (!this.form.model || !this.form.prompt.trim()) {
this.$message.error(
9;请填写模型和提示词！
9;);
return;
}
this.$message.success(`开始生成 ${this.form.count} 个视频任务`);
},
triggerUpload() {
this.$refs.fileInput.click();
},
onFileChange(e) {
const file = e.target.files?.[0];
if (!file) return;
if (!file.type.startsWith(
9;image/
9;)) {
this.$message.warning(
9;请选择有效的
图片文件
9;);
return;
}
const reader = new FileReader();
reader.onload = () => {
this.previewImage = reader.result;
this.$message.success(
9;
图片上传成功
9;);
};
reader.readAsDataURL(file);
}
}
};
</script>
<style scoped>
* {
box-sizing: border-box;
}
.page-wrapper {
background-color: #fff;
color: #333;
padding: 30px 16px;
font-family: -apple-system, BlinkMacSystemFont, 
9;Segoe UI
9;, Roboto, 
9;Helvetica Neue
9;, Arial, sans-serif;
width: 100%;
box-sizing: border-box;
}
/* 头部与主容器设置最大宽度并居中 */
.page-header.main-container {
width: 100%;
max-width: 1468px;
/* 1500 - 32 (两边16px) */
/* margin: 0 auto; */
/* 关键：水平居中，确保左右间距一致 */
}
.main-container {
width: 100%;
max-width: 1468px;
/* 1500 - 32 (两边16px) */
display: flex;
justify-content: space-between;
/* margin: 0 auto; */
/* 关键：水平居中，确保左右间距一致 */
}
.page-header h1 {
font-size: 20px;
font-weight: 600;
margin: 0;
color: #1f2d3d;
border-bottom: 1px solid #ebeef5;
padding-bottom: 15px;
}
.main-container {
display: flex;
justify-content: space-between;
gap: 32px;
margin-top: 24px;
}
/* --- 左侧样式 --- */
.left-box {
width: 734px;
flex-shrink: 0;
}
.section-title {
font-size: 16px;
font-weight: bold;
margin-bottom: 20px;
color: #303133;
}
.form-item {
margin-bottom: 24px;
}
.full-width-select {
width: 100%;
}
::v-deep .el-input__inner,
::v-deep .el-textarea__inner {
background-color: #f7f8fa;
border-color: transparent;
border-radius: 6px;
}
::v-deep .el-input__inner:focus,
::v-deep .el-textarea__inner:focus {
background-color: #fff;
border-color: #40
9eff;
}
.prompt-label {
font-size: 14px;
margin-bottom: 8px;
font-weight: 500;
}
.textarea-container {
position: relative;
}
.custom-textarea ::v-deep .el-textarea__inner {
padding-bottom: 30px;
height: 120px;
}
.upload-trigger {
position: absolute;
bottom: 10px;
right: 15px;
color: #
90
93
99;
font-size: 13px;
cursor: pointer;
z-index: 10;
}
.upload-trigger:hover {
color: #40
9eff;
}
/* Flex 行 */
.row-flex {
display: flex;
align-items: center;
}
.space-between {
justify-content: space-between;
}
.label-text {
font-size: 14px;
font-weight: 500;
width: 50px;
flex-shrink: 0;
margin-right: 10px;
}
.mb-10 {
margin-bottom: 10px;
display: block;
}
/* 胶囊选项组 */
.options-group {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.option-pill {
padding: 6px 20px;
border-radius: 20px;
font-size: 13px;
cursor: pointer;
background-color: transparent;
color: #606266;
border: 1px solid transparent;
transition: all 0.3s;
}
.option-pill:hover {
background-color: #f0f2f5;
}
.option-pill.active {
background-color: #0066cc;
color: #fff;
box-shadow: 0 2px 6px rgba(0, 102, 204, 0.3);
}
.option-tag {
padding: 6px 12px;
border-radius: 4px;
background-color: #f2f3f5;
color: #606266;
font-size: 12px;
cursor: pointer;
transition: all 0.2s;
}
.option-tag:hover {
background-color: #e4e7ed;
}
.option-tag.active {
background-color: #0066cc;
color: white;
}
/* 风格网格 */
.style-grid {
display: flex;
gap: 12px;
}
.style-box {
flex: 1;
aspect-ratio: 1;
background-color: #d
9d
9d
9;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 12px;
cursor: pointer;
border: 2px solid transparent;
}
.style-box:hover {
opacity: 0.
9;
}
.style-box.active {
border-color: #0066cc;
}
.select-wrapper-small {
width: 120px;
}
/* 信息面板 */
.info-panel {
background-color: #f7f8fa;
border-radius: 6px;
padding: 16px;
margin-bottom: 24px;
}
.info-row {
font-size: 14px;
margin-bottom: 8px;
display: flex;
}
.info-row:last-child {
margin-bottom: 0;
}
.info-label {
color: #303133;
width: 80px;
}
.info-val {
color: #
90
93
99;
}
/* 计数器 */
.custom-counter {
display: flex;
align-items: center;
}
.counter-btn {
width: 32px;
height: 32px;
background-color: #f7f8fa;
border: 1px solid #dcdfe6;
color: #606266;
cursor: pointer;
outline: none;
display: flex;
align-items: center;
justify-content: center;
}
.counter-btn:first-child {
border-radius: 4px 0 0 4px;
border-right: none;
}
.counter-btn:last-child {
border-radius: 0 4px 4px 0;
border-left: none;
}
.counter-btn:hover:not(:disabled) {
color: #40
9eff;
background-color: #fff;
}
.counter-input {
width: 60px;
height: 32px;
text-align: center;
border: 1px solid #dcdfe6;
outline: none;
font-size: 14px;
color: #606266;
}
.counter-input:focus {
border-color: #40
9eff;
z-index: 1;
}
.submit-btn {
width: 100%;
height: 44px;
font-size: 16px;
background-color: #0066cc;
border-color: #0066cc;
}
.submit-btn:hover {
background-color: #0052a3;
border-color: #0052a3;
}
/* --- 右侧样式 --- */
.right-box {
width: 734px;
flex-shrink: 0;
display: flex;
flex-direction: column;
}
.preview-area {
width: 100%;
flex: 1;
min-height: 600px;
background-color: #e6e6e6;
border-radius: 8px;
overflow: hidden;
margin-bottom: 20px;
position: relative;
}
.placeholder-content {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: #
999;
font-size: 14px;
background-color: #f
9f
9f
9;
}
.placeholder-content img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.action-buttons {
display: flex;
justify-content: flex-end;
gap: 15px;
}
.btn-capcut {
background-color: #0066cc;
border-color: #0066cc;
}
.btn-download {
color: #0066cc;
border-color: #0066cc;
}
.btn-download:hover {
background-color: #ecf5ff;
border-color: #0066cc;
color: #0066cc;
}
</style>
为什么左右盒子的flex布局最右边的还有空
扫一扫
898
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
