|
|
@@ -3,6 +3,10 @@
|
|
|
<div class="writeTop" v-bind:class="{ flipped: isFlipped }">
|
|
|
<template v-if="editCardflag">
|
|
|
<div class="left">
|
|
|
+ <div class="header-info">
|
|
|
+ <el-input v-model="data.headerCon" placeholder="输入页眉"></el-input>
|
|
|
+ <el-input class="label" v-model="data.label" placeholder="输入标签"></el-input>
|
|
|
+ </div>
|
|
|
<UploadDrag
|
|
|
:fileList="data.left.fileList"
|
|
|
@changeFillId="changeFillId"
|
|
|
@@ -11,34 +15,57 @@
|
|
|
></UploadDrag>
|
|
|
<div class="item-image" v-else>
|
|
|
<el-image
|
|
|
- style="width: 536px; height: 536px"
|
|
|
+ style="width: 568px; height: 294px"
|
|
|
:src="data.left.fileList[0].fileUrl"
|
|
|
:preview-src-list="[data.left.fileList[0].fileUrl]"
|
|
|
fit="contain"
|
|
|
/>
|
|
|
<span class="item-image-del" @click="handleDeleteImg"><i class="el-icon-delete"></i></span>
|
|
|
</div>
|
|
|
- <el-input class="item-con" v-model="data.left.con" placeholder="输入" @blur="handleBlurCon"></el-input>
|
|
|
+ <div class="item-con">
|
|
|
+ <label>字词</label>
|
|
|
+ <el-input v-model="data.left.con" placeholder="输入" @blur="handleBlurCon"></el-input>
|
|
|
+ </div>
|
|
|
+ <div class="item-con">
|
|
|
+ <label>拼音</label>
|
|
|
+ <el-input class="pinyin" v-model="data.right.pinyin" placeholder="输入"></el-input>
|
|
|
+ </div>
|
|
|
<a class="del-btn" @click="handleDelItem"><i class="el-icon-delete"></i></a>
|
|
|
</div>
|
|
|
<div class="right">
|
|
|
+ <div class="config-box">
|
|
|
+ <span class="title">主题颜色</span>
|
|
|
+ <el-color-picker v-model="data.borderColor" style="margin-right: 16px"></el-color-picker>
|
|
|
+ <span class="title">页眉颜色</span>
|
|
|
+ <el-color-picker v-model="data.fontColor" style="margin-right: 16px"></el-color-picker>
|
|
|
+ <span class="title">页眉对齐</span>
|
|
|
+ <el-radio-group v-model="data.fontAlign">
|
|
|
+ <el-radio label="left">左对齐</el-radio>
|
|
|
+ <el-radio label="center">居中对齐</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </div>
|
|
|
<label>释义</label>
|
|
|
- <el-input type="textarea" :rows="6" v-model="data.right.definition" placeholder="请输入"></el-input>
|
|
|
+ <el-input type="textarea" :rows="3" v-model="data.right.definition" placeholder="请输入"></el-input>
|
|
|
<label>搭配</label>
|
|
|
- <el-input type="textarea" :rows="6" v-model="data.right.collocation" placeholder="请输入"></el-input>
|
|
|
+ <el-input type="textarea" :rows="3" v-model="data.right.collocation" placeholder="请输入"></el-input>
|
|
|
<label>例句</label>
|
|
|
- <el-input type="textarea" :rows="6" v-model="data.right.exampleSent" placeholder="请输入"></el-input>
|
|
|
+ <el-input type="textarea" :rows="3" v-model="data.right.exampleSent" placeholder="请输入"></el-input>
|
|
|
</div>
|
|
|
</template>
|
|
|
<template v-else>
|
|
|
<div
|
|
|
- class="left"
|
|
|
+ class="left left-preview"
|
|
|
:class="[data.left.fileList.length === 0 ? 'left-big' : '']"
|
|
|
v-if="(isPreview && showLeft) || !isPreview"
|
|
|
+ :style="{ borderColor: data.borderColor }"
|
|
|
>
|
|
|
+ <div class="header-info-preview">
|
|
|
+ <h5 :style="{ textAlign: data.fontAlign }">{{ data.headerCon }}</h5>
|
|
|
+ <label :style="{ background: data.borderColor }">{{ data.label }}</label>
|
|
|
+ </div>
|
|
|
<div class="item-image" v-if="data.left.fileList.length > 0">
|
|
|
<el-image
|
|
|
- style="width: 536px; height: 536px"
|
|
|
+ style="width: 568px; height: 294px"
|
|
|
:src="data.left.fileList[0].fileUrl"
|
|
|
:preview-src-list="[data.left.fileList[0].fileUrl]"
|
|
|
fit="contain"
|
|
|
@@ -50,18 +77,25 @@
|
|
|
<a class="overturn-btn" v-if="isPreview" @click="changeShowLeft"><i class="el-icon-refresh"></i></a>
|
|
|
</div>
|
|
|
<div
|
|
|
- class="right right-preview"
|
|
|
+ class="right right-preview left-preview"
|
|
|
:class="[isPreview ? 'right-preview-rota' : '']"
|
|
|
v-if="(isPreview && !showLeft) || !isPreview"
|
|
|
+ :style="{ borderColor: data.borderColor }"
|
|
|
>
|
|
|
+ <div class="header-info-preview">
|
|
|
+ <h5 :style="{ textAlign: data.fontAlign }">{{ data.headerCon }}</h5>
|
|
|
+ <label :style="{ background: data.borderColor }">{{ data.label }}</label>
|
|
|
+ </div>
|
|
|
<div class="hz-box">
|
|
|
<div class="hz-item" v-for="(itemh, indexh) in data.right.hz_info" :key="indexh">
|
|
|
- <p>{{ data.right.pinyin[indexh] ? data.right.pinyin[indexh] : '' }}</p>
|
|
|
+ <p :style="{ color: data.borderColor }">
|
|
|
+ {{ data.right.pinyin.split(' ')[indexh] ? data.right.pinyin.split(' ')[indexh] : '' }}
|
|
|
+ </p>
|
|
|
<Strockplay
|
|
|
className="adult-strockplay"
|
|
|
:Book_text="itemh.con"
|
|
|
:playStorkes="true"
|
|
|
- :strokePlayColor="'#D65353'"
|
|
|
+ :strokePlayColor="data.borderColor"
|
|
|
:strokeColor="'#000000'"
|
|
|
:palyWidth="'18px'"
|
|
|
:BoxbgType="'0'"
|
|
|
@@ -69,21 +103,23 @@
|
|
|
:targetDiv="'writeTops-item-' + pageNumber + '-' + indexh + '-' + itemh.con"
|
|
|
:class="[indexh !== 0 ? 'writeTop-item-noLeft' : '']"
|
|
|
class="writeTop-item"
|
|
|
+ :style="{ borderColor: data.borderColor }"
|
|
|
/>
|
|
|
</div>
|
|
|
+ <AudioPlay :file-id="data.right.audio_file" v-if="data.right.audio_file" />
|
|
|
</div>
|
|
|
- <AudioPlay :file-id="data.right.audio_file" v-if="data.right.audio_file" />
|
|
|
+
|
|
|
<div class="definition-box">
|
|
|
<div v-if="data.right.definition">
|
|
|
- <label>释义：</label>
|
|
|
+ <label class="card-label">释义：</label>
|
|
|
<p>{{ data.right.definition }}</p>
|
|
|
</div>
|
|
|
<div v-if="data.right.collocation">
|
|
|
- <label>搭配：</label>
|
|
|
+ <label class="card-label">搭配：</label>
|
|
|
<p>{{ data.right.collocation }}</p>
|
|
|
</div>
|
|
|
<div v-if="data.right.exampleSent">
|
|
|
- <label>例句：</label>
|
|
|
+ <label class="card-label">例句：</label>
|
|
|
<p>{{ data.right.exampleSent }}</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -218,17 +254,18 @@ export default {
|
|
|
hz_list.push(obj);
|
|
|
});
|
|
|
this.data.right.hz_info = hz_list;
|
|
|
- this.data.right.pinyin = cnchar.spell(con, 'array', 'low', 'tone');
|
|
|
+ this.data.right.pinyin = cnchar.spell(con, 'array', 'low', 'tone').join(' ');
|
|
|
let MethodName = 'tool-TextToVoiceFile';
|
|
|
- let datas = {
|
|
|
- text: con,
|
|
|
- };
|
|
|
- getLogin(MethodName, datas).then((res) => {
|
|
|
- if (res.status === 1) {
|
|
|
- this.data.right.audio_file = res.file_id;
|
|
|
- }
|
|
|
- });
|
|
|
- console.log(this.data);
|
|
|
+ if (con) {
|
|
|
+ let datas = {
|
|
|
+ text: con,
|
|
|
+ };
|
|
|
+ getLogin(MethodName, datas).then((res) => {
|
|
|
+ if (res.status === 1) {
|
|
|
+ this.data.right.audio_file = res.file_id;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
})
|
|
|
.catch(() => {
|
|
|
this.loading = false;
|
|
|
@@ -275,14 +312,14 @@ export default {
|
|
|
<style lang="scss" scoped>
|
|
|
.writeTable {
|
|
|
width: 1208px;
|
|
|
- margin: 0 auto 8px auto;
|
|
|
+ margin: 0 auto 19px auto;
|
|
|
// height: 842px;
|
|
|
box-sizing: border-box;
|
|
|
&-preview {
|
|
|
width: 600px;
|
|
|
}
|
|
|
.writeTop {
|
|
|
- height: 800px;
|
|
|
+ height: 450px;
|
|
|
display: flex;
|
|
|
column-gap: 8px;
|
|
|
perspective: 1000px;
|
|
|
@@ -291,11 +328,63 @@ export default {
|
|
|
.right {
|
|
|
width: 600px;
|
|
|
height: 100%;
|
|
|
- padding: 32px;
|
|
|
+ padding: 8px 12px 18px 12px;
|
|
|
border-radius: 24px;
|
|
|
background: #fff;
|
|
|
box-sizing: border-box;
|
|
|
position: relative;
|
|
|
+ border: 4px solid #fff;
|
|
|
+ overflow: hidden;
|
|
|
+ .header-info {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 12px;
|
|
|
+ :deep .el-input__inner {
|
|
|
+ color: rgba(0, 0, 0, 1);
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 100%;
|
|
|
+ height: 24px;
|
|
|
+ border: none;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ .label {
|
|
|
+ :deep .el-input__inner {
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .left-preview {
|
|
|
+ padding-top: 32px;
|
|
|
+ padding-bottom: 32px;
|
|
|
+ }
|
|
|
+ .header-info-preview {
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ z-index: 1;
|
|
|
+ h5 {
|
|
|
+ color: #000;
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 32px;
|
|
|
+ padding: 0 12px;
|
|
|
+ }
|
|
|
+ label {
|
|
|
+ position: absolute;
|
|
|
+ right: -4px;
|
|
|
+ top: -4px;
|
|
|
+ border-radius: 0px 8px;
|
|
|
+ background: #fff;
|
|
|
+ padding: 0px 16px 0px 8px;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 150%;
|
|
|
+ }
|
|
|
}
|
|
|
.left-big {
|
|
|
display: flex;
|
|
|
@@ -304,13 +393,14 @@ export default {
|
|
|
}
|
|
|
.del-btn {
|
|
|
cursor: pointer;
|
|
|
- border-radius: 8px;
|
|
|
+ border-radius: 40px;
|
|
|
background: #f56767;
|
|
|
- padding: 8px;
|
|
|
+ padding: 5px 8px;
|
|
|
position: absolute;
|
|
|
- right: 24px;
|
|
|
- bottom: 24px;
|
|
|
+ right: 8px;
|
|
|
+ bottom: 8px;
|
|
|
color: #fff;
|
|
|
+ font-size: 24px;
|
|
|
}
|
|
|
.overturn-btn {
|
|
|
position: absolute;
|
|
|
@@ -330,10 +420,10 @@ export default {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
flex-flow: wrap;
|
|
|
- padding: 120px 86px;
|
|
|
+ padding: 16px 24px 26px 24px;
|
|
|
row-gap: 8px;
|
|
|
|
|
|
- label {
|
|
|
+ .card-label {
|
|
|
width: 100%;
|
|
|
color: #4e5969;
|
|
|
font-size: 14px;
|
|
|
@@ -342,14 +432,42 @@ export default {
|
|
|
height: 22px;
|
|
|
}
|
|
|
:deep .el-textarea {
|
|
|
- height: 140px;
|
|
|
+ height: 64px;
|
|
|
+ }
|
|
|
+ .config-box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ span {
|
|
|
+ color: #000;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 20px;
|
|
|
+ margin-right: 8px;
|
|
|
+ }
|
|
|
+ .el-color-picker {
|
|
|
+ height: 32px;
|
|
|
+ }
|
|
|
+ :deep .el-color-picker__trigger {
|
|
|
+ height: 32px;
|
|
|
+ }
|
|
|
+ .el-radio {
|
|
|
+ margin-right: 8px;
|
|
|
+ }
|
|
|
+ .el-radio-group {
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+ :deep .el-radio__input.is-checked .el-radio__inner {
|
|
|
+ border-color: #000;
|
|
|
+ background: #000;
|
|
|
+ }
|
|
|
+ :deep .el-radio__input.is-checked + .el-radio__label {
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
.right-preview {
|
|
|
padding: 72px;
|
|
|
display: block;
|
|
|
.hz-box {
|
|
|
- justify-content: center;
|
|
|
width: 100%;
|
|
|
.hz-item {
|
|
|
text-align: center;
|
|
|
@@ -361,14 +479,14 @@ export default {
|
|
|
color: #de4444;
|
|
|
font-feature-settings: 'cv01' on;
|
|
|
font-family: League;
|
|
|
- font-size: 20px;
|
|
|
+ font-size: 24px;
|
|
|
line-height: 120%;
|
|
|
margin-bottom: 8px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
:deep .audio-wrapper {
|
|
|
- margin: 24px auto;
|
|
|
+ margin: 58px 0 0 35px;
|
|
|
border-radius: 40px;
|
|
|
background: #f3f3f3;
|
|
|
padding: 16px;
|
|
|
@@ -383,9 +501,10 @@ export default {
|
|
|
}
|
|
|
.definition-box {
|
|
|
white-space: pre;
|
|
|
+ margin-top: 16px;
|
|
|
> div {
|
|
|
display: flex;
|
|
|
- margin-bottom: 16px;
|
|
|
+ margin-bottom: 8px;
|
|
|
label,
|
|
|
p {
|
|
|
width: 40px;
|
|
|
@@ -408,6 +527,7 @@ export default {
|
|
|
background: #f2f3f5;
|
|
|
border-radius: 8px;
|
|
|
overflow: hidden;
|
|
|
+ font-size: 0;
|
|
|
.item-image-del {
|
|
|
position: absolute;
|
|
|
top: 8px;
|
|
|
@@ -421,31 +541,48 @@ export default {
|
|
|
padding: 8px;
|
|
|
border-radius: 50%;
|
|
|
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
|
|
|
+ font-size: 16px;
|
|
|
}
|
|
|
}
|
|
|
.item-con {
|
|
|
- margin-top: 74px;
|
|
|
- :deep .el-input__inner {
|
|
|
- color: rgba(0, 0, 0, 1);
|
|
|
- text-align: center;
|
|
|
- font-size: 80px;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 8px;
|
|
|
+ label {
|
|
|
+ color: #4e5969;
|
|
|
+ font-size: 14px;
|
|
|
font-weight: 400;
|
|
|
- line-height: 100%;
|
|
|
- height: 80px;
|
|
|
- font-family: 'FZJCGFKTK';
|
|
|
+ line-height: 22px;
|
|
|
+ width: 44px;
|
|
|
+ }
|
|
|
+ :deep .el-input__inner {
|
|
|
+ border-radius: 2px;
|
|
|
+ background: #f2f3f5;
|
|
|
+ width: 235px;
|
|
|
border: none;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 22px;
|
|
|
+ height: 32px;
|
|
|
+ font-family: FZJCGFKTK;
|
|
|
+ }
|
|
|
+ .pinyin {
|
|
|
+ :deep .el-input__inner {
|
|
|
+ font-family: League;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
.con-preview {
|
|
|
- margin-top: 74px;
|
|
|
+ margin-top: 16px;
|
|
|
color: #000;
|
|
|
text-align: center;
|
|
|
font-family: 'FZJCGFKTK';
|
|
|
- font-size: 80px;
|
|
|
+ font-size: 64px;
|
|
|
font-weight: 400;
|
|
|
line-height: 100%;
|
|
|
&-big {
|
|
|
- font-size: 144px;
|
|
|
+ font-size: 96px;
|
|
|
margin-top: 0;
|
|
|
}
|
|
|
}
|
natasha