|
|
@@ -21,11 +21,12 @@
|
|
|
/>
|
|
|
<div class="tab-content">
|
|
|
<div class="tab-img flex">
|
|
|
- <img src="@/assets/images/detail/cjt.svg" alt="场景图生成" class="tab-icon" />
|
|
|
+ <img v-if="form.services.includes('is_product_scene')" src="@/assets/images/detail/cjt_h.svg" alt="场景图生成" class="tab-icon" />
|
|
|
+ <img v-else src="@/assets/images/detail/cjt.svg" alt="场景图生成" class="tab-icon" />
|
|
|
</div>
|
|
|
<span class="tab-name">场景图生成</span>
|
|
|
</div>
|
|
|
- <div class="tab-edit-btn" @click.stop="openScenePromptDialog" v-if="form.services.includes('is_product_scene')" v-log="{ describe: { action: '点击编辑场景图', service: '场景图生成-弹窗' } }">
|
|
|
+ <div class="tab-edit-btn" @click.stop="openScenePromptDialog" v-log="{ describe: { action: '点击编辑场景图', service: '场景图生成-弹窗' } }">
|
|
|
<el-icon><EditPen /></el-icon>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -47,11 +48,12 @@
|
|
|
/>
|
|
|
<div class="tab-content">
|
|
|
<div class="tab-img flex">
|
|
|
- <img src="@/assets/images/detail/mtt.svg" alt="模特图生成" class="tab-icon" />
|
|
|
+ <img v-if="form.services.includes('is_upper_footer')" src="@/assets/images/detail/mtt_h.svg" alt="模特图生成" class="tab-icon" />
|
|
|
+ <img v-else src="@/assets/images/detail/mtt.svg" alt="模特图生成" class="tab-icon" />
|
|
|
</div>
|
|
|
<span class="tab-name">模特图生成</span>
|
|
|
</div>
|
|
|
- <div class="tab-edit-btn" @click.stop="openModelDialog" v-if="form.services.includes('is_upper_footer')" v-log="{ describe: { action: '点击编辑模特图', service: '模特图生成-弹窗' } }">
|
|
|
+ <div class="tab-edit-btn" @click.stop="openModelDialog" v-log="{ describe: { action: '点击编辑模特图', service: '模特图生成-弹窗' } }">
|
|
|
<el-icon><EditPen /></el-icon>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -73,7 +75,8 @@
|
|
|
/>
|
|
|
<div class="tab-content">
|
|
|
<div class="tab-img flex">
|
|
|
- <img src="@/assets/images/detail/xqy.svg" alt="详情页生成" class="tab-icon" />
|
|
|
+ <img v-if="form.services.includes('is_detail')" src="@/assets/images/detail/xqy_h.svg" alt="详情页生成" class="tab-icon" />
|
|
|
+ <img v-else src="@/assets/images/detail/xqy.svg" alt="详情页生成" class="tab-icon" />
|
|
|
</div>
|
|
|
<span class="tab-name">详情页生成</span>
|
|
|
</div>
|
|
|
@@ -205,6 +208,7 @@
|
|
|
v-for="(template, index) in visibleTemplates"
|
|
|
:key="index"
|
|
|
class="template-item"
|
|
|
+ :class="form.selectTemplate?.id == template.id ? 'active' : ''"
|
|
|
@click="handleTemplateItemClick(template)"
|
|
|
v-log="{ describe: { action: '点击选择详情模板', template_name: template.template_name } }"
|
|
|
>
|
|
|
@@ -222,7 +226,7 @@
|
|
|
</div>
|
|
|
|
|
|
<div class="template-tips c-333 fs-14 line-20 te-l mar-top-20 flex left">
|
|
|
- <el-icon><WarningFilled /></el-icon>
|
|
|
+ <el-icon><Warning /></el-icon>
|
|
|
<span class="mar-left-10">该模版需提供{{form.selectTemplate?.template_image_order?.split(',').length || 5}}张标准视角的商品图:{{form.selectTemplate?.template_image_order || '俯视、侧视、后跟、鞋底、内里'}}。请确保图片清晰度高,背景干净。</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -233,46 +237,57 @@
|
|
|
<!-- 主图LOGO -->
|
|
|
<div class="right-section">
|
|
|
<div class="section-title">
|
|
|
- <img src="@/assets/images/Photography/zhuangshi.png" style="width: 32px; height: 32px;" />
|
|
|
+ <div class="section-title-line"></div>
|
|
|
主图LOGO
|
|
|
</div>
|
|
|
- <div class="logo-section flex left top multi-line">
|
|
|
- <upload
|
|
|
- v-for="item,index in logoList"
|
|
|
- :value="item"
|
|
|
- :key="item"
|
|
|
- v-show="item"
|
|
|
- @input="onRemove(index)"
|
|
|
- class="mar-right-10 upload-item"
|
|
|
- :class="{ active: item === form.logo_path }"
|
|
|
- @click.native="selectLogo(item)"
|
|
|
- ></upload>
|
|
|
- <upload @input="onInput"></upload>
|
|
|
+ <div class="logo-upload-area">
|
|
|
+ <div v-if="!form.logo_path" class="logo-upload-placeholder" @click="openLogoUpload">
|
|
|
+ <div class="logo-upload-icon">
|
|
|
+ <img src="@/assets/images/detail/sctp.png" />
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="logo-upload-text">点击或拖拽上传</div>
|
|
|
+ <div class="logo-upload-hint">支持PNG、JPG格式</div>
|
|
|
+ </div>
|
|
|
+ <div v-else class="logo-upload-preview">
|
|
|
+ <img :src="'file:///' + form.logo_path" alt="LOGO预览" class="logo-preview-image" />
|
|
|
+ <div class="logo-upload-actions">
|
|
|
+ <span class="logo-action-btn" @click.stop="previewLogo">
|
|
|
+ <el-icon><ZoomIn /></el-icon>
|
|
|
+ </span>
|
|
|
+ <span class="logo-action-btn" @click.stop="removeLogo">
|
|
|
+ <el-icon><Delete /></el-icon>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 详情资料准备 -->
|
|
|
- <div class="right-section">
|
|
|
+ <div class="right-section data-prep-section">
|
|
|
<div class="section-title">
|
|
|
- <img src="@/assets/images/Photography/zhuangshi.png" style="width: 32px; height: 32px;" />
|
|
|
+ <div class="section-title-line"></div>
|
|
|
详情资料准备
|
|
|
</div>
|
|
|
<div class="data-prep-content">
|
|
|
- <el-radio-group v-model="form.dataType" class="ml-4">
|
|
|
- <el-radio label="1" size="large">Excel上传</el-radio>
|
|
|
- <el-radio label="2" size="large">系统对接</el-radio>
|
|
|
+ <el-radio-group v-model="form.dataType" class="data-type-radio">
|
|
|
+ <el-radio-button label="1" size="large">
|
|
|
+ <img v-if="form.dataType == 1" src="@/assets/images/detail/excel_h.png" />
|
|
|
+ <img v-else src="@/assets/images/detail/excel.png" />
|
|
|
+ Excel上传</el-radio-button>
|
|
|
+ <el-radio-button label="2" size="large">
|
|
|
+ <img v-if="form.dataType == 2" src="@/assets/images/detail/xtdj_h.png" />
|
|
|
+ <img v-else src="@/assets/images/detail/xtdj.png" />
|
|
|
+ 系统对接</el-radio-button>
|
|
|
</el-radio-group>
|
|
|
|
|
|
<div v-if="form.dataType == '1'" class="excel-upload-section">
|
|
|
- <el-button
|
|
|
- type="primary"
|
|
|
- class="select-file-btn"
|
|
|
- @click="selectExcel"
|
|
|
- v-log="{ describe: { action: '点击选择Excel文件' } }"
|
|
|
- >
|
|
|
- <img src="@/assets/images/Photography/wenjian.png" style="width: 16px; margin-right: 4px;" />
|
|
|
- 点击选择文件
|
|
|
- </el-button>
|
|
|
+ <div class="excel-upload-area" @click="selectExcel" v-log="{ describe: { action: '点击选择Excel文件' } }">
|
|
|
+ <div class="excel-icon">
|
|
|
+ <img src="@/assets/images/detail/file-excel.png" class="tab-icon" />
|
|
|
+ </div>
|
|
|
+ <div class="excel-upload-text">点击选择文件</div>
|
|
|
+ </div>
|
|
|
<el-button
|
|
|
type="text"
|
|
|
class="download-link"
|
|
|
@@ -287,22 +302,22 @@
|
|
|
|
|
|
<!-- 一键上架平台 -->
|
|
|
<div
|
|
|
- class="right-section"
|
|
|
+ class="right-section publish-section"
|
|
|
:class="{ 'publish-section--disabled': !canUsePublishSection }"
|
|
|
v-if="onlineStoreTempList.length || onlineStoreTempListForeign.length"
|
|
|
>
|
|
|
<div class="section-title">
|
|
|
- <img src="@/assets/images/Photography/zhuangshi.png" style="width: 32px; height: 32px;" />
|
|
|
+ <div class="section-title-line"></div>
|
|
|
一键上架平台
|
|
|
</div>
|
|
|
<div class="publish-content">
|
|
|
- <div class="form-item" v-if="onlineStoreTempList.length">
|
|
|
- <div class="label">国内电商平台：</div>
|
|
|
+ <div class="publish-form-item" v-if="onlineStoreTempList.length">
|
|
|
+ <div class="publish-label">国内电商平台：</div>
|
|
|
<el-select
|
|
|
v-model="domesticPlatforms"
|
|
|
multiple
|
|
|
placeholder="请选择"
|
|
|
- style="width: 100%;"
|
|
|
+ class="publish-select"
|
|
|
:disabled="!canUsePublishSection"
|
|
|
>
|
|
|
<el-option
|
|
|
@@ -314,13 +329,13 @@
|
|
|
/>
|
|
|
</el-select>
|
|
|
</div>
|
|
|
- <div class="form-item" v-if="onlineStoreTempListForeign.length">
|
|
|
- <div class="label">跨境电商平台：</div>
|
|
|
+ <div class="publish-form-item" v-if="onlineStoreTempListForeign.length">
|
|
|
+ <div class="publish-label">跨境电商平台：</div>
|
|
|
<el-select
|
|
|
v-model="foreignPlatforms"
|
|
|
multiple
|
|
|
placeholder="请选择"
|
|
|
- style="width: 100%;"
|
|
|
+ class="publish-select"
|
|
|
:disabled="!canUsePublishSection"
|
|
|
>
|
|
|
<el-option
|
|
|
@@ -334,8 +349,6 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
-
|
|
|
<!-- 底部按钮 -->
|
|
|
<div class="footer">
|
|
|
<el-button
|
|
|
@@ -345,9 +358,12 @@
|
|
|
@click="generate"
|
|
|
v-log="{ describe: { action: '点击开始生成详情页' } }"
|
|
|
>
|
|
|
- 开始生成→
|
|
|
+ <img src="@/assets/images/processImage.vue/sc.png" />
|
|
|
+ 开始生成
|
|
|
+ <img src="@/assets/images/processImage.vue/go.png" class="go"/>
|
|
|
</el-button>
|
|
|
</div>
|
|
|
+
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
@@ -428,6 +444,11 @@
|
|
|
<img style="width: 100%;" :src="dialogImageUrl" alt="Preview Image" />
|
|
|
</el-dialog>
|
|
|
|
|
|
+ <!-- LOGO预览弹窗 -->
|
|
|
+ <el-dialog v-model="logoPreviewVisible" title="LOGO预览">
|
|
|
+ <img style="width: 100%;" :src="logoPreviewUrl" alt="LOGO Preview" />
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
<!-- 模特生成弹窗 -->
|
|
|
<ModelGenerationDialog
|
|
|
v-model="modelDialogVisible"
|
|
|
@@ -460,8 +481,8 @@ import { ElMessage, ElMessageBox } from 'element-plus'
|
|
|
|
|
|
import BlueHeaderBar from '@/components/header-bar/blue-header.vue'
|
|
|
import { ref, computed, reactive, onMounted, onBeforeUnmount, nextTick, watch } from 'vue';
|
|
|
-import { Select, EditPen } from '@element-plus/icons-vue'
|
|
|
-import upload from '@/components/upload'
|
|
|
+import { Select, EditPen, ZoomIn, Delete, Picture, Document } from '@element-plus/icons-vue'
|
|
|
+// import upload from '@/components/upload' // 不再需要，改为单LOGO上传
|
|
|
import client from "@/stores/modules/client";
|
|
|
import icpList from '@/utils/ipc'
|
|
|
const clientStore = client();
|
|
|
@@ -953,11 +974,7 @@ const openScenePromptDialog = () => {
|
|
|
}
|
|
|
|
|
|
// 选择LOGO
|
|
|
-const selectLogo = (logoPath: string) => {
|
|
|
- form.logo_path = logoPath
|
|
|
- // 保存LOGO选择到缓存
|
|
|
- saveLogoToCache(logoPath)
|
|
|
-}
|
|
|
+// selectLogo 函数已移除，现在只支持单个LOGO上传
|
|
|
const handleModelSelection = (models: { female: any; male: any }) => {
|
|
|
selectedModels.value = models
|
|
|
saveModelsToCache(models)
|
|
|
@@ -1493,31 +1510,57 @@ const openLoadingDialog = (timer: number) => {
|
|
|
|
|
|
//logo
|
|
|
const logoList = ref([])
|
|
|
-const onInput = (value) => {
|
|
|
- addLogo(value)
|
|
|
+const logoPreviewVisible = ref(false)
|
|
|
+const logoPreviewUrl = ref('')
|
|
|
+
|
|
|
+// 打开LOGO上传
|
|
|
+const openLogoUpload = () => {
|
|
|
+ clientStore.ipc.removeAllListeners(icpList.utils.openImage);
|
|
|
+ clientStore.ipc.send(icpList.utils.openImage);
|
|
|
+ clientStore.ipc.on(icpList.utils.openImage, async (event, result) => {
|
|
|
+ if (result && result.filePath) {
|
|
|
+ await addLogo(result.filePath)
|
|
|
+ }
|
|
|
+ clientStore.ipc.removeAllListeners(icpList.utils.openImage);
|
|
|
+ })
|
|
|
}
|
|
|
-const onRemove = (index) => {
|
|
|
- if(logoList.value[index] === form.logo_path){
|
|
|
- form.logo_path = ''
|
|
|
+
|
|
|
+// 预览LOGO
|
|
|
+const previewLogo = () => {
|
|
|
+ if (form.logo_path) {
|
|
|
+ logoPreviewUrl.value = 'file:///' + form.logo_path
|
|
|
+ logoPreviewVisible.value = true
|
|
|
}
|
|
|
- clientStore.ipc.send(icpList.generate.deleteLogo,{
|
|
|
- path:logoList.value[index]
|
|
|
- });
|
|
|
- logoList.value.splice(index, 1)
|
|
|
- clientStore.ipc.on(icpList.generate.deleteLogo, async (event, result) => {
|
|
|
- console.log('deleteLogo');
|
|
|
- console.log(result);
|
|
|
+}
|
|
|
|
|
|
- clientStore.ipc.removeAllListeners(icpList.generate.deleteLogo);
|
|
|
- })
|
|
|
+// 删除LOGO
|
|
|
+const removeLogo = () => {
|
|
|
+ if (form.logo_path) {
|
|
|
+ const currentLogoPath = form.logo_path
|
|
|
+ clientStore.ipc.send(icpList.generate.deleteLogo, {
|
|
|
+ path: currentLogoPath
|
|
|
+ });
|
|
|
+ clientStore.ipc.on(icpList.generate.deleteLogo, async (event, result) => {
|
|
|
+ console.log('deleteLogo', result);
|
|
|
+ form.logo_path = ''
|
|
|
+ saveLogoToCache('')
|
|
|
+ // 从列表中移除
|
|
|
+ const index = logoList.value.indexOf(currentLogoPath)
|
|
|
+ if (index > -1) {
|
|
|
+ logoList.value.splice(index, 1)
|
|
|
+ }
|
|
|
+ clientStore.ipc.removeAllListeners(icpList.generate.deleteLogo);
|
|
|
+ })
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
const getLogolist = async () => {
|
|
|
clientStore.ipc.send(icpList.generate.getLogoList);
|
|
|
clientStore.ipc.on(icpList.generate.getLogoList, async (event, result) => {
|
|
|
+ // 保持数组格式，兼容老的格式
|
|
|
logoList.value = result.data || []
|
|
|
- console.log('getLogoList')
|
|
|
- console.log(result.data)
|
|
|
+ console.log('getLogoList', result.data)
|
|
|
+ // 只使用第一个LOGO（如果存在且当前没有选择）
|
|
|
if(logoList.value.length && !form.logo_path){
|
|
|
form.logo_path = logoList.value[0]
|
|
|
// 保存默认LOGO到缓存
|
|
|
@@ -1527,24 +1570,30 @@ const getLogolist = async () => {
|
|
|
})
|
|
|
}
|
|
|
|
|
|
-
|
|
|
const addLogo = async (path) => {
|
|
|
- console.log(path);
|
|
|
- clientStore.ipc.send(icpList.generate.addLogo,{
|
|
|
- logo_path:path
|
|
|
+ console.log('addLogo', path);
|
|
|
+ clientStore.ipc.send(icpList.generate.addLogo, {
|
|
|
+ logo_path: path
|
|
|
});
|
|
|
clientStore.ipc.on(icpList.generate.addLogo, async (event, result) => {
|
|
|
- console.log(result);
|
|
|
+ console.log('addLogo result', result);
|
|
|
|
|
|
if (result.code === 0) {
|
|
|
- console.log("添加成功")
|
|
|
- console.log(result)
|
|
|
+ console.log("添加成功")
|
|
|
if(result.data.logo){
|
|
|
- form.logo_path = result.data.logo
|
|
|
+ const newLogo = result.data.logo
|
|
|
+ form.logo_path = newLogo
|
|
|
// 保存新添加的LOGO到缓存
|
|
|
saveLogoToCache(form.logo_path)
|
|
|
- if(logoList.value.indexOf(result.data.logo) <0){
|
|
|
- logoList.value.push(result.data.logo)
|
|
|
+ // 保持数组格式：如果列表中没有，添加到数组；如果已有，更新数组（保持兼容性）
|
|
|
+ const index = logoList.value.indexOf(newLogo)
|
|
|
+ if(index < 0){
|
|
|
+ // 新LOGO，添加到数组（保持数组格式兼容性）
|
|
|
+ logoList.value.push(newLogo)
|
|
|
+ } else {
|
|
|
+ // 已存在的LOGO，移动到第一个位置（UI只显示第一个）
|
|
|
+ logoList.value.splice(index, 1)
|
|
|
+ logoList.value.unshift(newLogo)
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -1653,6 +1702,16 @@ const selectFolder = () => {
|
|
|
position: absolute;
|
|
|
left: 10px;
|
|
|
top:10px;
|
|
|
+ ::v-deep {
|
|
|
+ .is-checked .el-checkbox__inner {
|
|
|
+ background: #2957FF;
|
|
|
+ border-color: #2957FF;
|
|
|
+ }
|
|
|
+ .el-checkbox__inner {
|
|
|
+ border-radius: 18px;
|
|
|
+ transform: scale(1.2);
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.tab-img {
|
|
|
@@ -1706,6 +1765,10 @@ const selectFolder = () => {
|
|
|
&.active {
|
|
|
border-color: #2957FF;
|
|
|
border-bottom: 4px solid #2957FF;
|
|
|
+
|
|
|
+ .tab-img {
|
|
|
+ background: #2957FF;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
&.disabled {
|
|
|
@@ -1718,7 +1781,7 @@ const selectFolder = () => {
|
|
|
|
|
|
.detail-container {
|
|
|
background: #F5F6F7;
|
|
|
- padding: 0 20px 20px 20px;
|
|
|
+ padding: 0 20px 20px 20px; // 底部留出空间给固定按钮
|
|
|
|
|
|
.detail-content {
|
|
|
max-width: 100%;
|
|
|
@@ -1838,7 +1901,6 @@ const selectFolder = () => {
|
|
|
.logo-section,
|
|
|
.template-section,
|
|
|
.data-prep-section {
|
|
|
- margin-bottom: 20px;
|
|
|
}
|
|
|
|
|
|
.template-section {
|
|
|
@@ -1852,6 +1914,16 @@ const selectFolder = () => {
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
}
|
|
|
+
|
|
|
+ .template-tips {
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ padding: 0 10px;
|
|
|
+ background: #FFFBEA;
|
|
|
+ border-radius: 10px;
|
|
|
+ border: 1px solid #FEEEB0;
|
|
|
+ color: #9B4D26;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.template-section--disabled {
|
|
|
@@ -1893,30 +1965,130 @@ const selectFolder = () => {
|
|
|
border-radius: 8px;
|
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
|
|
|
|
+ &.data-prep-section {
|
|
|
+ height: 225px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
.section-title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 10px;
|
|
|
font-weight: 600;
|
|
|
font-size: 16px;
|
|
|
color: #333333;
|
|
|
+ margin-bottom: 16px;
|
|
|
+
|
|
|
+ .section-title-line {
|
|
|
+ width: 3px;
|
|
|
+ height: 16px;
|
|
|
+ background: linear-gradient(135deg, #7C3AED 0%, #2957FF 100%);
|
|
|
+ border-radius: 2px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .section-title-hint {
|
|
|
+ font-weight: normal;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.data-prep-content {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
- gap: 15px;
|
|
|
+ gap: 12px;
|
|
|
+ flex: 1;
|
|
|
+
|
|
|
+ .data-type-radio {
|
|
|
+ padding:5px;
|
|
|
+ background:#F3F5F6;
|
|
|
+ border-radius:10px;
|
|
|
+ ::v-deep {
|
|
|
+ .el-radio {
|
|
|
+ margin-right: 20px;
|
|
|
+ }
|
|
|
+ .el-radio-button {
|
|
|
+ flex:1;
|
|
|
+ box-shadow:none !important;
|
|
|
+
|
|
|
+ .el-radio-button__inner {
|
|
|
+ width: 100%;
|
|
|
+ background: none !important;
|
|
|
+ border: none !important;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ border-radius:10px !important;
|
|
|
+ justify-content: center;
|
|
|
+ img {
|
|
|
+ height: 14px;
|
|
|
+ margin: 0 5px;
|
|
|
+ position: relative;
|
|
|
+ top:-1px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.is-active {
|
|
|
+ background: #F8F9FF;
|
|
|
+ .el-radio-button__inner {
|
|
|
+ background: #fff !important;
|
|
|
+ color: #2957FF !important;
|
|
|
+ border-radius: 10px !important;
|
|
|
+ box-shadow: none !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
.excel-upload-section {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
- gap: 10px;
|
|
|
+ gap: 8px;
|
|
|
+ flex: 1;
|
|
|
|
|
|
- .select-file-btn {
|
|
|
+ .excel-upload-area {
|
|
|
width: 100%;
|
|
|
+ height: 64px;
|
|
|
+ border: 1px dashed #D9D9D9;
|
|
|
+ border-radius: 8px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 16px;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.3s;
|
|
|
+ background: #fff;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ border-color: #2957FF;
|
|
|
+ background: #F8F9FF;
|
|
|
+ }
|
|
|
+
|
|
|
+ .excel-icon {
|
|
|
+ width: 32px;
|
|
|
+ height:32px;
|
|
|
+ margin-right: 10px;
|
|
|
+ img {
|
|
|
+ width: 32px;
|
|
|
+ height:32px;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .excel-upload-text {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #333;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.download-link {
|
|
|
color: #2957FF;
|
|
|
text-decoration: underline;
|
|
|
padding: 0;
|
|
|
+ font-size: 14px;
|
|
|
+ margin-top: 0;
|
|
|
+ justify-content: flex-start;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -1926,16 +2098,28 @@ const selectFolder = () => {
|
|
|
flex-direction: column;
|
|
|
gap: 15px;
|
|
|
|
|
|
- .form-item {
|
|
|
+ .publish-form-item {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
gap: 8px;
|
|
|
|
|
|
- .label {
|
|
|
- min-width: auto;
|
|
|
- margin-right: 0;
|
|
|
+ .publish-label {
|
|
|
font-size: 14px;
|
|
|
- color: #666;
|
|
|
+ color: #333;
|
|
|
+ margin-bottom: 4px;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ .publish-select {
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ ::v-deep {
|
|
|
+ .el-input.is-disabled .el-input__inner {
|
|
|
+ background-color: #F5F6F7;
|
|
|
+ border-color: #E8E8E8;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -1972,6 +2156,116 @@ const selectFolder = () => {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+// LOGO上传区域样式
|
|
|
+.logo-upload-area {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.logo-upload-placeholder {
|
|
|
+ width: 100%;
|
|
|
+ height: 160px;
|
|
|
+ border: 1px dashed #D9D9D9;
|
|
|
+ border-radius: 10px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.3s;
|
|
|
+ background: #fff;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ border-color: #2957FF;
|
|
|
+ background: #F8F9FF;
|
|
|
+ }
|
|
|
+
|
|
|
+ .logo-upload-icon {
|
|
|
+ width: 42px;
|
|
|
+ height: 42px;
|
|
|
+ margin-bottom: 12px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ background: linear-gradient(135deg, #EFF6FF 0%, #F3E8FF 100%);
|
|
|
+ border-radius: 8px;
|
|
|
+ color: #2957FF;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 42px;
|
|
|
+ height: 42px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .logo-upload-text {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #333;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+
|
|
|
+ .logo-upload-hint {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.logo-upload-preview {
|
|
|
+ width: 100%;
|
|
|
+ height: 160px;
|
|
|
+ border: 1px solid #E8E8E8;
|
|
|
+ border-radius: 8px;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ background: #F5F5F5;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ .logo-preview-image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ object-fit: contain;
|
|
|
+ }
|
|
|
+
|
|
|
+ .logo-upload-actions {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ height: 40px;
|
|
|
+ background: rgba(0, 0, 0, 0.5);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ gap: 20px;
|
|
|
+ opacity: 0;
|
|
|
+ transition: opacity 0.3s;
|
|
|
+
|
|
|
+ .logo-action-btn {
|
|
|
+ width: 32px;
|
|
|
+ height: 32px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ background: rgba(255, 255, 255, 0.2);
|
|
|
+ border-radius: 4px;
|
|
|
+ cursor: pointer;
|
|
|
+ color: #fff;
|
|
|
+ transition: background 0.3s;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background: rgba(255, 255, 255, 0.3);
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-icon {
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &:hover .logo-upload-actions {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
.logo-upload {
|
|
|
border: 1px dashed #ccc;
|
|
|
border-radius: 5px;
|
|
|
@@ -2034,25 +2328,29 @@ const selectFolder = () => {
|
|
|
cursor: pointer;
|
|
|
background: #f0f0f0;
|
|
|
position: relative;
|
|
|
- height: 700px;
|
|
|
+ height: 660px;
|
|
|
overflow: hidden;
|
|
|
|
|
|
+ &.active {
|
|
|
+
|
|
|
+ border-color: #1677FF;
|
|
|
+ }
|
|
|
+
|
|
|
|
|
|
.template-info {
|
|
|
position: absolute;
|
|
|
bottom: 0;
|
|
|
left: 0;
|
|
|
- background: rgba($color: #000000, $alpha: .3);
|
|
|
+ background: #fff;
|
|
|
width: 100%;
|
|
|
- height: 36px;
|
|
|
- line-height: 36px;
|
|
|
- color: #eee;
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ color: #333;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
|
|
|
.template-view {
|
|
|
- background: #DFE2E3;
|
|
|
color: #3366FF;
|
|
|
height: 30px;
|
|
|
line-height: 30px;
|
|
|
@@ -2104,9 +2402,14 @@ const selectFolder = () => {
|
|
|
.select-warp {
|
|
|
width: 18px;
|
|
|
height: 18px;
|
|
|
- border-radius: 4px;
|
|
|
+ border-radius: 18px;
|
|
|
background-color: #fff;
|
|
|
position: absolute;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 18px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
top: 10px;
|
|
|
left: 10px;
|
|
|
|
|
|
@@ -2226,16 +2529,22 @@ const selectFolder = () => {
|
|
|
|
|
|
.footer {
|
|
|
display: flex;
|
|
|
- justify-content: flex-end;
|
|
|
- padding: 20px;
|
|
|
- background: #fff;
|
|
|
- border-top: 1px solid #e8e8e8;
|
|
|
z-index: 100;
|
|
|
|
|
|
.footer-button {
|
|
|
padding: 12px 40px;
|
|
|
font-size: 16px;
|
|
|
border-radius: 8px;
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ height: 50px;
|
|
|
+ img {
|
|
|
+ height: 16px;;
|
|
|
+ margin: 0 10px;
|
|
|
+ }
|
|
|
+ .go {
|
|
|
+ opacity: .5;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
