|
|
@@ -4,6 +4,203 @@ |
|
|
|
<div class="mask" v-show="showChooseModel"></div> |
|
|
|
<!-- 左侧栏 --> |
|
|
|
<div class="left"> |
|
|
|
<!-- 字幕框 --> |
|
|
|
<div v-show="videoType == 2" class="subtitlesBoxTop"> |
|
|
|
<!-- 开关 --> |
|
|
|
<div class="tab4Item"> |
|
|
|
<div v-if="materialList.BGI.material" class="SubtitlesSwitch"> |
|
|
|
<p>{{ $t("createVideo.subtitlesSwitch") }}</p> |
|
|
|
<el-switch |
|
|
|
v-model="Subtitles.SubtitlesSwitch" |
|
|
|
style="--el-switch-on-color: #000" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- 字体系列 --> |
|
|
|
<div class="tab4Item"> |
|
|
|
<div v-if="materialList.BGI.material" class="SubtitlesSwitch"> |
|
|
|
<p> |
|
|
|
{{ lanChange == "zh-cn" ? `字体` : `Font Family` }} |
|
|
|
</p> |
|
|
|
<el-select |
|
|
|
v-model="Subtitles.SubtitlesFontFamily" |
|
|
|
style="width: 100px" |
|
|
|
placeholder=" " |
|
|
|
size="default" |
|
|
|
> |
|
|
|
<el-option |
|
|
|
v-for="item in Subtitles.fontFamilyList" |
|
|
|
:key="item.value" |
|
|
|
:label="item.label" |
|
|
|
:value="item.value" |
|
|
|
/> |
|
|
|
</el-select> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- y轴 --> |
|
|
|
<div class="tab4Item"> |
|
|
|
<div v-if="materialList.BGI.material" class="SubtitlesSwitch"> |
|
|
|
<p> |
|
|
|
{{ lanChange == "zh-cn" ? `纵坐标` : `Y-axis` }} |
|
|
|
</p> |
|
|
|
<el-input-number |
|
|
|
:precision="0" |
|
|
|
v-model="Subtitles.SubtitlesTop" |
|
|
|
size="large" |
|
|
|
controls-position="right" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- 字号大小 --> |
|
|
|
<div class="tab4Item"> |
|
|
|
<div v-if="materialList.BGI.material" class="SubtitlesSwitch"> |
|
|
|
<p> |
|
|
|
{{ lanChange == "zh-cn" ? `字号大小` : `Font Size` }} |
|
|
|
</p> |
|
|
|
<el-select |
|
|
|
v-model="Subtitles.SubtitlesSize" |
|
|
|
style="width: 100px" |
|
|
|
placeholder=" " |
|
|
|
size="default" |
|
|
|
> |
|
|
|
<el-option |
|
|
|
v-for="item in Subtitles.fontSizeList" |
|
|
|
:key="item" |
|
|
|
:label="item" |
|
|
|
:value="item" |
|
|
|
:style="{ |
|
|
|
height: item + 'px', |
|
|
|
lineHeight: item + 'px', |
|
|
|
}" |
|
|
|
> |
|
|
|
<span :style="{ fontSize: item + 'px', padding: '5px' }">{{ |
|
|
|
item |
|
|
|
}}</span> |
|
|
|
</el-option> |
|
|
|
</el-select> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- 字色 --> |
|
|
|
<div class="tab4Item"> |
|
|
|
<div v-if="materialList.BGI.material" class="SubtitlesSwitch"> |
|
|
|
<p> |
|
|
|
{{ lanChange == "zh-cn" ? `字体颜色` : `Font Color` }} |
|
|
|
</p> |
|
|
|
<div |
|
|
|
@click="handleSubtitlesColorShow" |
|
|
|
class="myColorBox" |
|
|
|
:style="{ backgroundColor: Subtitles.SubtitlesColor }" |
|
|
|
> |
|
|
|
<div v-show="SubtitlesColorShow" class="selectColor"> |
|
|
|
<div |
|
|
|
v-for="item in Subtitles.colorList" |
|
|
|
:style="{ backgroundColor: item }" |
|
|
|
class="selectColor-item" |
|
|
|
@click="Subtitles.SubtitlesColor = item" |
|
|
|
></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div v-show="videoType == 1" class="subtitlesBoxLeft"> |
|
|
|
<!-- 开关 --> |
|
|
|
<div class="tab4Item"> |
|
|
|
<div v-if="materialList.BGI.material" class="SubtitlesSwitch"> |
|
|
|
<p>{{ $t("createVideo.subtitlesSwitch") }}</p> |
|
|
|
<el-switch |
|
|
|
v-model="Subtitles.SubtitlesSwitch" |
|
|
|
style="--el-switch-on-color: #000" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- 字体系列 --> |
|
|
|
<div class="tab4Item"> |
|
|
|
<div v-if="materialList.BGI.material" class="SubtitlesSwitch"> |
|
|
|
<p> |
|
|
|
{{ lanChange == "zh-cn" ? `字体` : `Font Family` }} |
|
|
|
</p> |
|
|
|
<el-select |
|
|
|
v-model="Subtitles.SubtitlesFontFamily" |
|
|
|
style="width: 100px" |
|
|
|
placeholder=" " |
|
|
|
size="default" |
|
|
|
> |
|
|
|
<el-option |
|
|
|
v-for="item in Subtitles.fontFamilyList" |
|
|
|
:key="item.value" |
|
|
|
:label="item.label" |
|
|
|
:value="item.value" |
|
|
|
/> |
|
|
|
</el-select> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- y轴 --> |
|
|
|
<div class="tab4Item"> |
|
|
|
<div v-if="materialList.BGI.material" class="SubtitlesSwitch"> |
|
|
|
<p> |
|
|
|
{{ lanChange == "zh-cn" ? `纵坐标` : `Y-axis` }} |
|
|
|
</p> |
|
|
|
<el-input-number |
|
|
|
:precision="0" |
|
|
|
v-model="Subtitles.SubtitlesTop" |
|
|
|
size="large" |
|
|
|
controls-position="right" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- 字号大小 --> |
|
|
|
<div class="tab4Item"> |
|
|
|
<div v-if="materialList.BGI.material" class="SubtitlesSwitch"> |
|
|
|
<p> |
|
|
|
{{ lanChange == "zh-cn" ? `字号大小` : `Font Size` }} |
|
|
|
</p> |
|
|
|
<el-select |
|
|
|
v-model="Subtitles.SubtitlesSize" |
|
|
|
style="width: 100px" |
|
|
|
placeholder=" " |
|
|
|
size="default" |
|
|
|
> |
|
|
|
<el-option |
|
|
|
v-for="item in Subtitles.fontSizeList" |
|
|
|
:key="item" |
|
|
|
:label="item" |
|
|
|
:value="item" |
|
|
|
:style="{ |
|
|
|
height: item + 'px', |
|
|
|
lineHeight: item + 'px', |
|
|
|
}" |
|
|
|
> |
|
|
|
<span :style="{ fontSize: item + 'px', padding: '5px' }">{{ |
|
|
|
item |
|
|
|
}}</span> |
|
|
|
</el-option> |
|
|
|
</el-select> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- 字色 --> |
|
|
|
<div class="tab4Item"> |
|
|
|
<div v-if="materialList.BGI.material" class="SubtitlesSwitch"> |
|
|
|
<p> |
|
|
|
{{ lanChange == "zh-cn" ? `字体颜色` : `Font Color` }} |
|
|
|
</p> |
|
|
|
<div |
|
|
|
@click="handleSubtitlesColorShow" |
|
|
|
class="myColorBox" |
|
|
|
:style="{ backgroundColor: Subtitles.SubtitlesColor }" |
|
|
|
> |
|
|
|
<div v-show="SubtitlesColorShow" class="selectColor"> |
|
|
|
<div |
|
|
|
v-for="item in Subtitles.colorList" |
|
|
|
:style="{ backgroundColor: item }" |
|
|
|
class="selectColor-item" |
|
|
|
@click="Subtitles.SubtitlesColor = item" |
|
|
|
></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- 选择模版弹出框 --> |
|
|
|
<div class="chooseModelBox" :class="showChooseModel ? '' : 'noModel'"> |
|
|
|
<!-- 伸缩按钮 --> |
|
|
@@ -177,6 +374,7 @@ |
|
|
|
<!-- tab栏 --> |
|
|
|
<div class="tab"> |
|
|
|
<div |
|
|
|
id="tab-0" |
|
|
|
class="tabItem" |
|
|
|
:class="tabItemActive == 1 ? 'tabItemActive' : ''" |
|
|
|
@click="tabItemActive = 1" |
|
|
@@ -204,6 +402,13 @@ |
|
|
|
> |
|
|
|
{{ $t("createVideo.subtitles") }} |
|
|
|
</div> |
|
|
|
<!-- <div |
|
|
|
class="tabItem" |
|
|
|
:class="tabItemActive == 5 ? 'tabItemActive' : ''" |
|
|
|
@click="tabItemActive = 5" |
|
|
|
> |
|
|
|
{{ $t("createVideo.AItext") }} |
|
|
|
</div> --> |
|
|
|
</div> |
|
|
|
<!-- 文案 只能使用v-if,不能使用v-show--> |
|
|
|
<div v-if="tabItemActive == 1" class="tabContent tab1"> |
|
|
@@ -466,126 +671,54 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- 字幕 --> |
|
|
|
<!-- 智能文案 --> |
|
|
|
<div v-if="tabItemActive == 4" class="tabContent tab4"> |
|
|
|
<!-- 开关 --> |
|
|
|
<div class="tab4Item"> |
|
|
|
<div v-if="materialList.BGI.material" class="SubtitlesSwitch"> |
|
|
|
<p>{{ $t("createVideo.subtitlesSwitch") }}</p> |
|
|
|
<el-switch |
|
|
|
v-model="Subtitles.SubtitlesSwitch" |
|
|
|
style="--el-switch-on-color: #000" |
|
|
|
<div class="card4"> |
|
|
|
<!-- 语言 --> |
|
|
|
<div class="text"> |
|
|
|
<!-- 文本域 --> |
|
|
|
<el-input |
|
|
|
maxlength="200" |
|
|
|
id="textInputId" |
|
|
|
v-model="problemContent" |
|
|
|
:rows="5" |
|
|
|
type="textarea" |
|
|
|
:placeholder="$t('createVideo.inputRequirement')" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- 字体系列 --> |
|
|
|
<div class="tab4Item"> |
|
|
|
<div v-if="materialList.BGI.material" class="SubtitlesSwitch"> |
|
|
|
<p> |
|
|
|
{{ lanChange == "zh-cn" ? `字体` : `Font Family` }} |
|
|
|
</p> |
|
|
|
<el-select |
|
|
|
v-model="Subtitles.SubtitlesFontFamily" |
|
|
|
style="width: 100px" |
|
|
|
placeholder=" " |
|
|
|
size="default" |
|
|
|
> |
|
|
|
<el-option |
|
|
|
v-for="item in Subtitles.fontFamilyList" |
|
|
|
:key="item.value" |
|
|
|
:label="item.label" |
|
|
|
:value="item.value" |
|
|
|
/> |
|
|
|
</el-select> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- y轴 --> |
|
|
|
<div class="tab4Item"> |
|
|
|
<div v-if="materialList.BGI.material" class="SubtitlesSwitch"> |
|
|
|
<p> |
|
|
|
{{ lanChange == "zh-cn" ? `纵坐标` : `Y-axis` }} |
|
|
|
</p> |
|
|
|
<el-input-number |
|
|
|
:precision="0" |
|
|
|
v-model="Subtitles.SubtitlesTop" |
|
|
|
size="large" |
|
|
|
controls-position="right" |
|
|
|
<el-button |
|
|
|
type="primary" |
|
|
|
:disabled="sendLoading" |
|
|
|
@click="sendRequirement" |
|
|
|
color="#000" |
|
|
|
> |
|
|
|
<my-Loading-Icon2 v-if="sendLoading"></my-Loading-Icon2> |
|
|
|
<span v-if="!sendLoading"> |
|
|
|
{{ $t("createVideo.GeneratedText") }} |
|
|
|
</span> |
|
|
|
</el-button> |
|
|
|
|
|
|
|
<p>{{ $t("createVideo.SmartText") }}</p> |
|
|
|
<!-- 语言 --> |
|
|
|
<div class="text" style="cursor: text"> |
|
|
|
<!-- 文本域 --> |
|
|
|
<el-input |
|
|
|
maxlength="500" |
|
|
|
id="textInputId" |
|
|
|
v-model="answerContent" |
|
|
|
:rows="15" |
|
|
|
type="textarea" |
|
|
|
disabled="" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- 字号大小 --> |
|
|
|
<div class="tab4Item"> |
|
|
|
<div v-if="materialList.BGI.material" class="SubtitlesSwitch"> |
|
|
|
<p> |
|
|
|
{{ lanChange == "zh-cn" ? `字号大小` : `Font Size` }} |
|
|
|
</p> |
|
|
|
<el-select |
|
|
|
v-model="Subtitles.SubtitlesSize" |
|
|
|
style="width: 100px" |
|
|
|
placeholder=" " |
|
|
|
size="default" |
|
|
|
<i |
|
|
|
>{{ $t("createVideo.entered") }} {{ answerContent.length }} / |
|
|
|
500</i |
|
|
|
> |
|
|
|
<el-option |
|
|
|
v-for="item in Subtitles.fontSizeList" |
|
|
|
:key="item" |
|
|
|
:label="item" |
|
|
|
:value="item" |
|
|
|
:style="{ |
|
|
|
height: item + 'px', |
|
|
|
lineHeight: item + 'px', |
|
|
|
}" |
|
|
|
> |
|
|
|
<span :style="{ fontSize: item + 'px', padding: '5px' }">{{ |
|
|
|
item |
|
|
|
}}</span> |
|
|
|
</el-option> |
|
|
|
</el-select> |
|
|
|
</div> |
|
|
|
<el-button color="#000" @click="copyAnswerContent"> |
|
|
|
{{ $t("createVideo.copy") }} |
|
|
|
</el-button> |
|
|
|
</div> |
|
|
|
<!-- 字色 --> |
|
|
|
<div class="tab4Item"> |
|
|
|
<div v-if="materialList.BGI.material" class="SubtitlesSwitch"> |
|
|
|
<p> |
|
|
|
{{ lanChange == "zh-cn" ? `字体颜色` : `Font Color` }} |
|
|
|
</p> |
|
|
|
<div |
|
|
|
@click="handleSubtitlesColorShow" |
|
|
|
class="myColorBox" |
|
|
|
:style="{ backgroundColor: Subtitles.SubtitlesColor }" |
|
|
|
> |
|
|
|
<div v-show="SubtitlesColorShow" class="selectColor"> |
|
|
|
<div |
|
|
|
v-for="item in Subtitles.colorList" |
|
|
|
:style="{ backgroundColor: item }" |
|
|
|
class="selectColor-item" |
|
|
|
@click="Subtitles.SubtitlesColor = item" |
|
|
|
></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- 字粗 --> |
|
|
|
<!-- <div class="tab4Item"> |
|
|
|
<div v-if="materialList.BGI.material" class="SubtitlesSwitch"> |
|
|
|
<p> |
|
|
|
{{ lanChange == "zh-cn" ? `字号大小` : `Font Size` }} |
|
|
|
</p> |
|
|
|
<el-select |
|
|
|
v-model="Subtitles.SubtitlesWeight" |
|
|
|
style="width: 100px" |
|
|
|
placeholder=" " |
|
|
|
size="default" |
|
|
|
> |
|
|
|
<el-option |
|
|
|
v-for="item in Subtitles.fontWeightList" |
|
|
|
:key="item" |
|
|
|
:label="item" |
|
|
|
:value="item" |
|
|
|
> |
|
|
|
</el-option> |
|
|
|
</el-select> |
|
|
|
</div> |
|
|
|
</div> --> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- 试听的mp3 --> |
|
|
@@ -1518,8 +1651,82 @@ function NumToFixed(num1, num2) { |
|
|
|
} |
|
|
|
//#endregion ---------------------------- |
|
|
|
|
|
|
|
//#region |
|
|
|
//#region AI文案 |
|
|
|
// 创建websocket |
|
|
|
let mySocket = null; //websocket对象 |
|
|
|
const sendLoading = ref(false); //发送状态 |
|
|
|
function createWS() { |
|
|
|
mySocket = new WebSocket("wss://gptsocket.malls.iformall.com:8010"); |
|
|
|
mySocket.onopen = () => { |
|
|
|
console.log("WebSocket 连接成功1"); |
|
|
|
sendRequirement(); |
|
|
|
}; |
|
|
|
mySocket.onmessage = (event) => { |
|
|
|
// console.log("接收到 WebSocket 消息2:", event.data); |
|
|
|
if (!event.data) { |
|
|
|
return; |
|
|
|
} |
|
|
|
if (event.data == "___talk_end___") { |
|
|
|
sendLoading.value = false; |
|
|
|
mySocket.close(); |
|
|
|
return; |
|
|
|
} |
|
|
|
answerContent.value = answerContent.value + event.data; |
|
|
|
}; |
|
|
|
mySocket.onclose = () => { |
|
|
|
console.log( |
|
|
|
"WebSocket 连接关闭3,关闭代码:", |
|
|
|
event.code, |
|
|
|
"关闭原因:", |
|
|
|
event.reason |
|
|
|
); |
|
|
|
console.log(mySocket.readyState, "链接状态3"); |
|
|
|
}; |
|
|
|
|
|
|
|
mySocket.onerror = (error) => { |
|
|
|
ElMessage.error( |
|
|
|
lanChange.value == "zh-cn" |
|
|
|
? `GPT服务器连接失败,请稍后重试!` |
|
|
|
: `GPT Server connection failed, please try again later` |
|
|
|
); |
|
|
|
sendLoading.value = false; |
|
|
|
mySocket.close(); |
|
|
|
console.error("WebSocket 错误4:", error); |
|
|
|
}; |
|
|
|
} |
|
|
|
const problemContent = ref(""); //问题输入框内容 |
|
|
|
const answerContent = ref(""); //回答输入框内容 |
|
|
|
// 点击发送需求 |
|
|
|
async function sendRequirement() { |
|
|
|
// loading |
|
|
|
sendLoading.value = true; |
|
|
|
|
|
|
|
// 无需求时 |
|
|
|
if (!problemContent.value) { |
|
|
|
sendLoading.value = false; |
|
|
|
mySocket.close(); |
|
|
|
return; |
|
|
|
} |
|
|
|
const sendMessage = [ |
|
|
|
{ |
|
|
|
role: "user", |
|
|
|
content: problemContent.value, |
|
|
|
}, |
|
|
|
]; |
|
|
|
// 如果处于链接状态 |
|
|
|
|
|
|
|
if (mySocket.readyState != WebSocket.OPEN) { |
|
|
|
createWS(); |
|
|
|
} else { |
|
|
|
answerContent.value = ""; |
|
|
|
mySocket.send(JSON.stringify(sendMessage)); |
|
|
|
} |
|
|
|
} |
|
|
|
// 复制到文案 |
|
|
|
function copyAnswerContent() { |
|
|
|
textareaContent.value = answerContent.value; |
|
|
|
document.getElementById("tab-0").click(); |
|
|
|
} |
|
|
|
//#endregion ---------------------------- |
|
|
|
|
|
|
|
//#region |
|
|
@@ -1547,6 +1754,7 @@ onMounted(async () => { |
|
|
|
if (route.query.id) { |
|
|
|
getModelDetailById(); |
|
|
|
} |
|
|
|
createWS(); |
|
|
|
}); |
|
|
|
</script> |
|
|
|
|
|
|
@@ -1570,6 +1778,171 @@ onMounted(async () => { |
|
|
|
width: 68%; |
|
|
|
height: 100%; |
|
|
|
padding: 20px; |
|
|
|
// 字幕盒子 |
|
|
|
.subtitlesBoxTop { |
|
|
|
z-index: 3; |
|
|
|
position: absolute; |
|
|
|
top: 50px; |
|
|
|
left: 225px; |
|
|
|
width: 700px; |
|
|
|
// height: 50px; |
|
|
|
background-color: #e9ecf1; |
|
|
|
border-radius: 20px; |
|
|
|
padding: 10px; |
|
|
|
box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 15px; |
|
|
|
display: flex; |
|
|
|
justify-content: flex-start; |
|
|
|
align-content: flex-start; |
|
|
|
flex-wrap: wrap; |
|
|
|
.tab4Item { |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
width: 130px; |
|
|
|
background-color: rgba(71, 105, 218, 0.1); |
|
|
|
text-align: center; |
|
|
|
padding: 10px; |
|
|
|
height: 80px; |
|
|
|
border-radius: 10px; |
|
|
|
margin: auto; |
|
|
|
// margin-bottom: 10px; |
|
|
|
p { |
|
|
|
padding-bottom: 5px; |
|
|
|
} |
|
|
|
} |
|
|
|
.SubtitlesSwitch { |
|
|
|
width: 100%; |
|
|
|
.el-input-number--large { |
|
|
|
width: 100px; |
|
|
|
} |
|
|
|
.el-input-number__increase { |
|
|
|
width: none; |
|
|
|
} |
|
|
|
} |
|
|
|
.myColorBox { |
|
|
|
position: relative; |
|
|
|
width: 25px; |
|
|
|
height: 25px; |
|
|
|
margin: auto; |
|
|
|
border: #000 solid 2px; |
|
|
|
cursor: pointer; |
|
|
|
.selectColor { |
|
|
|
position: absolute; |
|
|
|
top: 150%; |
|
|
|
left: 50%; |
|
|
|
transform: translateX(-50%); |
|
|
|
display: flex; |
|
|
|
justify-content: flex-start; |
|
|
|
flex-wrap: wrap; |
|
|
|
width: 142px; |
|
|
|
background-color: #ffffff; |
|
|
|
z-index: 99; |
|
|
|
box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 5px 5px; |
|
|
|
&::before { |
|
|
|
content: ""; |
|
|
|
display: block; |
|
|
|
position: absolute; |
|
|
|
top: -10%; |
|
|
|
left: 50%; |
|
|
|
transform: translateX(-50%); |
|
|
|
width: 0; |
|
|
|
height: 0; |
|
|
|
border-left: 15px solid transparent; |
|
|
|
border-right: 15px solid transparent; |
|
|
|
border-bottom: 15px solid white; |
|
|
|
} |
|
|
|
&-item { |
|
|
|
width: 25px; |
|
|
|
height: 25px; |
|
|
|
margin: 5px 5px; |
|
|
|
border: #000 solid 2px; |
|
|
|
border-radius: 5px; |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.subtitlesBoxLeft { |
|
|
|
z-index: 3; |
|
|
|
position: absolute; |
|
|
|
top: 150px; |
|
|
|
left: 150px; |
|
|
|
width: 150px; |
|
|
|
// height: 50px; |
|
|
|
background-color: #e9ecf1; |
|
|
|
border-radius: 20px; |
|
|
|
padding: 10px; |
|
|
|
box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 15px; |
|
|
|
display: flex; |
|
|
|
justify-content: flex-start; |
|
|
|
align-content: flex-start; |
|
|
|
flex-wrap: wrap; |
|
|
|
.tab4Item { |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
width: 130px; |
|
|
|
background-color: rgba(71, 105, 218, 0.1); |
|
|
|
text-align: center; |
|
|
|
padding: 10px; |
|
|
|
height: 80px; |
|
|
|
border-radius: 10px; |
|
|
|
margin: auto; |
|
|
|
margin-bottom: 10px; |
|
|
|
p { |
|
|
|
padding-bottom: 5px; |
|
|
|
} |
|
|
|
} |
|
|
|
.SubtitlesSwitch { |
|
|
|
width: 100%; |
|
|
|
.el-input-number--large { |
|
|
|
width: 100px; |
|
|
|
} |
|
|
|
.el-input-number__increase { |
|
|
|
width: none; |
|
|
|
} |
|
|
|
} |
|
|
|
.myColorBox { |
|
|
|
position: relative; |
|
|
|
width: 25px; |
|
|
|
height: 25px; |
|
|
|
margin: auto; |
|
|
|
border: #000 solid 2px; |
|
|
|
cursor: pointer; |
|
|
|
.selectColor { |
|
|
|
position: absolute; |
|
|
|
top: 150%; |
|
|
|
left: 50%; |
|
|
|
transform: translateX(-50%); |
|
|
|
display: flex; |
|
|
|
justify-content: flex-start; |
|
|
|
flex-wrap: wrap; |
|
|
|
width: 142px; |
|
|
|
background-color: #ffffff; |
|
|
|
z-index: 99; |
|
|
|
box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 5px 5px; |
|
|
|
&::before { |
|
|
|
content: ""; |
|
|
|
display: block; |
|
|
|
position: absolute; |
|
|
|
top: -10%; |
|
|
|
left: 50%; |
|
|
|
transform: translateX(-50%); |
|
|
|
width: 0; |
|
|
|
height: 0; |
|
|
|
border-left: 15px solid transparent; |
|
|
|
border-right: 15px solid transparent; |
|
|
|
border-bottom: 15px solid white; |
|
|
|
} |
|
|
|
&-item { |
|
|
|
width: 25px; |
|
|
|
height: 25px; |
|
|
|
margin: 5px 5px; |
|
|
|
border: #000 solid 2px; |
|
|
|
border-radius: 5px; |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
// 选择模版弹出框 |
|
|
|
.chooseModelBox { |
|
|
|
position: absolute; |
|
|
@@ -1917,10 +2290,72 @@ onMounted(async () => { |
|
|
|
} |
|
|
|
} |
|
|
|
.tab4 { |
|
|
|
display: flex; |
|
|
|
justify-content: flex-start; |
|
|
|
align-content: flex-start; |
|
|
|
flex-wrap: wrap; |
|
|
|
// display: flex; |
|
|
|
// justify-content: flex-start; |
|
|
|
// align-content: flex-start; |
|
|
|
// flex-wrap: wrap; |
|
|
|
.card4 { |
|
|
|
.text { |
|
|
|
padding: 10 px; |
|
|
|
border: 1px solid #c0c4cc; |
|
|
|
.el-button { |
|
|
|
float: right; |
|
|
|
margin-top: 10px; |
|
|
|
} |
|
|
|
:deep(.el-textarea__inner) { |
|
|
|
cursor: text; |
|
|
|
} |
|
|
|
:deep(.el-textarea__inner) { |
|
|
|
resize: none; |
|
|
|
box-shadow: none; |
|
|
|
} |
|
|
|
i { |
|
|
|
font-size: 14px; |
|
|
|
float: right; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
p { |
|
|
|
margin: 7px 0; |
|
|
|
} |
|
|
|
.card4Btn { |
|
|
|
margin-top: 10px; |
|
|
|
border-radius: 5px; |
|
|
|
height: 50px; |
|
|
|
width: 100%; |
|
|
|
color: #fff; |
|
|
|
background-color: #000; |
|
|
|
text-align: center; |
|
|
|
line-height: 50px; |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
.el-button { |
|
|
|
width: 100%; |
|
|
|
height: 50px; |
|
|
|
margin-top: 10px; |
|
|
|
} |
|
|
|
} |
|
|
|
:deep(.el-tabs__item.is-active) { |
|
|
|
color: #909393; |
|
|
|
background-color: #000; |
|
|
|
} |
|
|
|
|
|
|
|
:deep(.el-tabs__nav) { |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
:deep(.el-tabs__item) { |
|
|
|
width: 26%; |
|
|
|
} |
|
|
|
|
|
|
|
:deep(.el-tabs__item:hover) { |
|
|
|
color: #909393; |
|
|
|
} |
|
|
|
|
|
|
|
:deep(.el-tabs__content) { |
|
|
|
height: calc(100% - 60px); |
|
|
|
padding: 0; |
|
|
|
} |
|
|
|
.tab4Item { |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|