|
@@ -1,312 +1,234 @@
|
|
|
<template>
|
|
|
<ModuleBase :type="data.type">
|
|
|
<template #content>
|
|
|
- <div style="text-align: left">
|
|
|
- <label>标题:</label>
|
|
|
- <RichText
|
|
|
- v-model="data.title_con"
|
|
|
- :inline="true"
|
|
|
- :placeholder="'输入标题'"
|
|
|
- toolbar="fontselect fontsizeselect forecolor backcolor | underline | bold italic strikethrough alignleft aligncenter alignright"
|
|
|
- />
|
|
|
+ <UploadFile
|
|
|
+ key="upload_image"
|
|
|
+ :courseware-id="courseware_id"
|
|
|
+ :component-id="id"
|
|
|
+ :type="data.type"
|
|
|
+ :total-size="data.total_size"
|
|
|
+ :file-list="data.image_list"
|
|
|
+ :file-id-list="data.image_id_list"
|
|
|
+ :file-info-list="data.image_info_list"
|
|
|
+ :label-text="labelText"
|
|
|
+ :accept-file-type="acceptFileType"
|
|
|
+ :icon-class="iconClass"
|
|
|
+ :limit="1"
|
|
|
+ :singleSize="500"
|
|
|
+ @updateFileList="updateFileList"
|
|
|
+ />
|
|
|
+ <div class="image-size">
|
|
|
+ <span>图片大小</span
|
|
|
+ ><el-input-number v-model="data.image_width" :step="100" :min="200" :max="800"></el-input-number
|
|
|
+ ><el-input-number v-model="data.image_height" :step="100" :min="200" :max="800"></el-input-number>
|
|
|
</div>
|
|
|
- <el-table :data="data.option" border style="width: 100%">
|
|
|
- <el-table-column fixed prop="number" label="序号" width="70">
|
|
|
- <template slot-scope="scope">
|
|
|
- <el-input v-model="scope.row.number"></el-input>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column fixed prop="new_word" label="生词/短语" width="110">
|
|
|
- <template slot-scope="scope">
|
|
|
- <el-input v-model="scope.row.new_word" @blur="handleBlurCon(scope.row)"></el-input>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="mp3_list" label="读音" width="200">
|
|
|
- <template slot-scope="scope">
|
|
|
- <div v-if="scope.row.mp3_list">
|
|
|
- <SoundRecord :wav-blob.sync="scope.row.mp3_list" />
|
|
|
- </div>
|
|
|
- <template v-else>
|
|
|
- <div :class="['upload-audio-play']">
|
|
|
- <UploadAudio
|
|
|
- v-if="data.property.audio_generation_method === 'upload'"
|
|
|
- :file-id="scope.row.mp3_list"
|
|
|
- :item-index="scope.$index"
|
|
|
- :show-upload="!scope.row.mp3_list"
|
|
|
- @upload="uploads"
|
|
|
- @deleteFile="deleteFiles"
|
|
|
- />
|
|
|
- <div
|
|
|
- v-else-if="data.property.audio_generation_method === 'auto'"
|
|
|
- class="auto-matic"
|
|
|
- @click="handleMatic(scope.$index)"
|
|
|
- >
|
|
|
- <SvgIcon icon-class="voiceprint-line" class="record" />
|
|
|
- <span class="auto-btn">{{ scope.row.mp3_list ? '已生成' : '生成音频' }}</span
|
|
|
- >{{ scope.row.mp3_list ? '成功' : '' }}
|
|
|
- </div>
|
|
|
- <SoundRecord v-else :wav-blob.sync="scope.row.mp3_list" />
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="pinyin" label="拼音" width="110">
|
|
|
- <template slot-scope="scope">
|
|
|
- <el-input v-model="scope.row.pinyin"></el-input>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="cixing" label="词性" width="110">
|
|
|
- <template slot-scope="scope">
|
|
|
- <RichText
|
|
|
- v-model="scope.row.cixing"
|
|
|
- :inline="true"
|
|
|
- toolbar="fontselect fontsizeselect forecolor backcolor | underline | bold italic strikethrough alignleft aligncenter alignright"
|
|
|
- />
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="definition_list" label="释义" width="200">
|
|
|
- <template slot-scope="scope">
|
|
|
- <RichText
|
|
|
- v-model="scope.row.definition_list"
|
|
|
- :inline="true"
|
|
|
- :placeholder="'多个释义用;隔开'"
|
|
|
- toolbar="fontselect fontsizeselect forecolor backcolor | underline | bold italic strikethrough alignleft aligncenter alignright"
|
|
|
- />
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="collocation" label="搭配" width="200">
|
|
|
- <template slot-scope="scope">
|
|
|
- <RichText
|
|
|
- v-model="scope.row.collocation"
|
|
|
- :inline="true"
|
|
|
- toolbar="fontselect fontsizeselect forecolor backcolor | underline | bold italic strikethrough alignleft aligncenter alignright"
|
|
|
- />
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="liju_list" label="例句" width="300">
|
|
|
- <template slot-scope="scope">
|
|
|
- <RichText
|
|
|
- v-model="scope.row.liju_list"
|
|
|
- :inline="true"
|
|
|
- :placeholder="'多条例句用回车'"
|
|
|
- toolbar="fontselect fontsizeselect forecolor backcolor | underline | bold italic strikethrough alignleft aligncenter alignright"
|
|
|
- />
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="header_con" label="页眉" width="100">
|
|
|
- <template slot-scope="scope">
|
|
|
- <el-input v-model="scope.row.header_con"></el-input>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="label" label="标签" width="100">
|
|
|
- <template slot-scope="scope">
|
|
|
- <el-input v-model="scope.row.label"></el-input>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="操作" width="150">
|
|
|
- <template slot-scope="scope">
|
|
|
- <el-button size="mini" type="text" @click="handleDelete(scope.$index)">删除</el-button>
|
|
|
- <el-button size="mini" type="text" @click="moveElement(scope.row, scope.$index, 'up')">上移</el-button>
|
|
|
- <el-button size="mini" type="text" @click="moveElement(scope.row, scope.$index, 'down')">下移</el-button>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
- <el-button icon="el-icon-plus" style="margin: 24px 0" @click="addElement">增加一个</el-button>
|
|
|
- <SelectUpload label="生词音频" type="audio" width="500px" @uploadSuccess="uploadAudioSuccess" />
|
|
|
- <div v-if="data.audio_data.url.length > 0" class="upload-file">
|
|
|
+ <SelectUpload label="音频" type="audio" width="500px" @uploadSuccess="uploadAudioSuccess" />
|
|
|
+ <div v-if="data.mp3_list.length > 0" class="upload-file">
|
|
|
<div class="file-name">
|
|
|
<span>
|
|
|
- <SvgIcon icon-class="note" size="12" />
|
|
|
- <span>{{ data.audio_data.name }}</span>
|
|
|
+ <SvgIcon icon-class="mp3" size="12" />
|
|
|
+ <span>{{ data.mp3_list[0].name }}</span>
|
|
|
</span>
|
|
|
+ <span> 完成 </span>
|
|
|
</div>
|
|
|
- <SvgIcon icon-class="delete-black" size="12" @click="removeFile('audio')" />
|
|
|
+ <SvgIcon icon-class="delete-black" size="12" @click="removeFile" />
|
|
|
</div>
|
|
|
- <SelectUpload label="lrc 文件" :limit="1" type="lrc" width="500px" @uploadSuccess="uploadLrcSuccess" />
|
|
|
- <div v-if="data.lrc_data.url.length > 0" class="upload-file">
|
|
|
- <div class="file-name">
|
|
|
- <span>
|
|
|
- <SvgIcon icon-class="note" size="12" />
|
|
|
- <span>{{ data.lrc_data.name }}</span>
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- <SvgIcon icon-class="delete-black" size="12" @click="removeFile('lrc')" />
|
|
|
+ <div
|
|
|
+ v-if="data.image_list[0]"
|
|
|
+ id="selectableArea"
|
|
|
+ @mousedown="startSelection"
|
|
|
+ @mousemove="updateSelection"
|
|
|
+ @mouseup="endSelection"
|
|
|
+ @mouseleave="endSelection"
|
|
|
+ :style="{
|
|
|
+ width: data.image_width + 'px',
|
|
|
+ height: data.image_height + 'px',
|
|
|
+ background: 'url(' + data.image_list[0].url + ') center / contain no-repeat',
|
|
|
+ position: 'relative',
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ v-if="isSelecting"
|
|
|
+ :style="{
|
|
|
+ position: 'absolute',
|
|
|
+ top: `${startY}px`,
|
|
|
+ left: `${startX}px`,
|
|
|
+ width: `${endX - startX}px`,
|
|
|
+ height: `${endY - startY}px`,
|
|
|
+ border: '2px solid #165DFF',
|
|
|
+ }"
|
|
|
+ ></div>
|
|
|
+ <template v-for="(itemh, indexh) in data.text_list">
|
|
|
+ <div
|
|
|
+ v-if="indexh === hotspotsActiveIndex"
|
|
|
+ :key="indexh"
|
|
|
+ :style="{
|
|
|
+ position: 'absolute',
|
|
|
+ top: `${itemh.y}`,
|
|
|
+ left: `${itemh.x}`,
|
|
|
+ width: `${itemh.width}`,
|
|
|
+ height: `${itemh.height}`,
|
|
|
+ border: '2px solid #165DFF',
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <label
|
|
|
+ :style="{
|
|
|
+ position: 'absolute',
|
|
|
+ top: '-13px',
|
|
|
+ right: '-13px',
|
|
|
+ width: '26px',
|
|
|
+ height: '26px',
|
|
|
+ border: '2px solid #165DFF',
|
|
|
+ textAlign: 'center',
|
|
|
+ borderRadius: '50%',
|
|
|
+ boxShadow: ' 0px 5px 5px -3px #0000001A',
|
|
|
+ background: '#fff',
|
|
|
+ color: '#165DFF',
|
|
|
+ }"
|
|
|
+ >{{ indexh + 1 }}</label
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
</div>
|
|
|
+ <ul class="hotspots-list" v-if="data.image_list[0] && data.text_list">
|
|
|
+ <li v-for="(itemh, indexh) in data.text_list" :key="indexh">
|
|
|
+ <span>{{ indexh + 1 }}</span>
|
|
|
+ <div class="content">
|
|
|
+ <el-input
|
|
|
+ v-if="indexh === hotspotsActiveIndex"
|
|
|
+ type="textarea"
|
|
|
+ :rows="2"
|
|
|
+ placeholder="请输入"
|
|
|
+ v-model="itemh.text"
|
|
|
+ maxlength="500"
|
|
|
+ show-word-limit
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ <p v-else>{{ itemh.text }}</p>
|
|
|
+ </div>
|
|
|
+ <el-button
|
|
|
+ v-if="hotspotsActiveIndex !== indexh"
|
|
|
+ type="primary"
|
|
|
+ size="small"
|
|
|
+ @click="hotspotsActiveIndex = indexh"
|
|
|
+ >编辑</el-button
|
|
|
+ >
|
|
|
+ <el-button v-else type="primary" size="small" @click="hotspotsActiveIndex = null">保存</el-button>
|
|
|
+ <el-button type="danger" size="small" @click="deletehotspots(indexh)">删除</el-button>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
</template>
|
|
|
</ModuleBase>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import ModuleMixin from '../../common/ModuleMixin';
|
|
|
-import SoundRecord from '@/views/book/courseware/create/components/question/fill/components/SoundRecord.vue';
|
|
|
-import UploadAudio from '@/views/book/courseware/create/components/question/fill/components/UploadAudio.vue';
|
|
|
-
|
|
|
-import { getNewWordData, getOption } from '@/views/book/courseware/data/newWord';
|
|
|
+import UploadFile from '../../base/common/UploadFile.vue';
|
|
|
+import { getImageTextData } from '@/views/book/courseware/data/imageText';
|
|
|
import SelectUpload from '@/views/book/courseware/create/components/common/SelectUpload.vue';
|
|
|
-import { GetStaticResources } from '@/api/app';
|
|
|
-import cnchar from 'cnchar';
|
|
|
+import { GetFileURLMap } from '@/api/app';
|
|
|
|
|
|
export default {
|
|
|
- name: 'NewWordPage',
|
|
|
- components: {
|
|
|
- SelectUpload,
|
|
|
- SoundRecord,
|
|
|
- UploadAudio,
|
|
|
- },
|
|
|
+ name: 'ImageTextPage',
|
|
|
+ components: { UploadFile, SelectUpload },
|
|
|
mixins: [ModuleMixin],
|
|
|
data() {
|
|
|
return {
|
|
|
- data: getNewWordData(),
|
|
|
+ data: getImageTextData(),
|
|
|
+ labelText: '背景图',
|
|
|
+ acceptFileType: '.jpg,.png,.jpeg',
|
|
|
+ iconClass: 'picture',
|
|
|
+ isSelecting: false,
|
|
|
+ startX: 0,
|
|
|
+ startY: 0,
|
|
|
+ endX: 0,
|
|
|
+ endY: 0,
|
|
|
+ hotspotsActiveIndex: null, // 当前编辑热区索引
|
|
|
+ genloading: false, // 字幕节点loading
|
|
|
};
|
|
|
},
|
|
|
- methods: {
|
|
|
- /**
|
|
|
- * 解析lrc文件
|
|
|
- */
|
|
|
- parseLrcFile() {
|
|
|
- if (this.data.lrc_data.file_id.length === 0) {
|
|
|
- return this.$message.warning('请先上传lrc文件');
|
|
|
- }
|
|
|
- const loading = this.$loading({ text: '解析lrc文件中' });
|
|
|
- GetStaticResources('tool-ParseLRCFile', {
|
|
|
- content_type: 'FILE',
|
|
|
- file_id: this.data.lrc_data.file_id,
|
|
|
- }).then(({ lrc_list }) => {
|
|
|
- let lrc_list_res = [];
|
|
|
- lrc_list.forEach((item) => {
|
|
|
- let obj = {
|
|
|
- bg: item.begin_time,
|
|
|
- ed: item.end_time,
|
|
|
- };
|
|
|
- lrc_list_res.push(obj);
|
|
|
- });
|
|
|
- this.data.lrc_arr = lrc_list_res;
|
|
|
- loading.close();
|
|
|
- });
|
|
|
+ watch: {
|
|
|
+ 'data.image_list': {
|
|
|
+ handler(val) {
|
|
|
+ if (val.length > 0) {
|
|
|
+ this.handleData();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ immediate: true,
|
|
|
},
|
|
|
- uploadLrcSuccess(fileList) {
|
|
|
- if (fileList.length > 0) {
|
|
|
- const { file_name: name, file_url: url, file_id } = fileList[0];
|
|
|
- this.data.lrc_data = {
|
|
|
- name,
|
|
|
- url,
|
|
|
- id: file_id,
|
|
|
- file_id,
|
|
|
- };
|
|
|
- this.parseLrcFile();
|
|
|
- }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ updateFileList({ file_list, file_id_list, file_info_list }) {
|
|
|
+ this.data.image_list = file_list;
|
|
|
+ this.data.image_id_list = file_id_list;
|
|
|
+ this.data.image_info_list = file_info_list;
|
|
|
},
|
|
|
uploadAudioSuccess(fileList) {
|
|
|
if (fileList.length > 0) {
|
|
|
const { file_name: name, file_url: temporary_url, file_id, media_duration } = fileList[0];
|
|
|
- this.data.audio_data = {
|
|
|
- name,
|
|
|
- media_duration,
|
|
|
- temporary_url,
|
|
|
- url: file_id,
|
|
|
- file_id,
|
|
|
- };
|
|
|
- }
|
|
|
- },
|
|
|
- /**
|
|
|
- * 删除文件
|
|
|
- * @param {'audio' | 'lrc'} type
|
|
|
- */
|
|
|
- removeFile(type) {
|
|
|
- if (type === 'audio') {
|
|
|
- this.data.audio_data = {
|
|
|
- name: '',
|
|
|
- media_duration: 0,
|
|
|
- temporary_url: '',
|
|
|
- url: '',
|
|
|
- file_id: '',
|
|
|
- };
|
|
|
- } else if (type === 'lrc') {
|
|
|
- this.data.lrc_data = {
|
|
|
- name: '',
|
|
|
- url: '',
|
|
|
- id: '',
|
|
|
- file_id: '',
|
|
|
- };
|
|
|
+ this.data.mp3_list = [
|
|
|
+ {
|
|
|
+ name,
|
|
|
+ media_duration,
|
|
|
+ temporary_url,
|
|
|
+ url: file_id,
|
|
|
+ file_id,
|
|
|
+ },
|
|
|
+ ];
|
|
|
}
|
|
|
- this.data.lrc_arr = [];
|
|
|
- },
|
|
|
- uploads(file_id, index) {
|
|
|
- this.data.option[index].mp3_list = file_id;
|
|
|
- },
|
|
|
- deleteFiles(file_id, index) {
|
|
|
- this.data.option[index].mp3_list = '';
|
|
|
},
|
|
|
- uploadPic(file_id, index) {
|
|
|
- this.data.option[index].file_list[0] = file_id;
|
|
|
+ removeFile() {
|
|
|
+ this.data.mp3_list = [];
|
|
|
},
|
|
|
- deletePic(file_id, index) {
|
|
|
- this.data.option[index].file_list[0] = '';
|
|
|
- },
|
|
|
- // 自动生成音频
|
|
|
- handleMatic(index) {
|
|
|
- GetStaticResources('tool-TextToVoiceFile', {
|
|
|
- text: this.data.option[index].new_word.replace(/<[^>]+>/g, ''),
|
|
|
- })
|
|
|
- .then(({ status, file_id }) => {
|
|
|
- if (status === 1) {
|
|
|
- this.data.option[index].mp3_list = file_id;
|
|
|
- }
|
|
|
- })
|
|
|
- .catch(() => {});
|
|
|
+ startSelection(event) {
|
|
|
+ this.isSelecting = true;
|
|
|
+ let clientRect = document.getElementById('selectableArea').getBoundingClientRect();
|
|
|
+
|
|
|
+ this.startX = event.clientX - clientRect.left;
|
|
|
+ this.startY = event.clientY - clientRect.top;
|
|
|
},
|
|
|
- // 删除行
|
|
|
- handleDelete(index) {
|
|
|
- this.data.option.splice(index, 1);
|
|
|
+ updateSelection(event) {
|
|
|
+ if (!this.isSelecting) return;
|
|
|
+ let clientRect = document.getElementById('selectableArea').getBoundingClientRect();
|
|
|
+
|
|
|
+ this.endX = event.clientX - clientRect.left;
|
|
|
+ this.endY = event.clientY - clientRect.top;
|
|
|
},
|
|
|
- // 上移下移
|
|
|
- moveElement(dItem, index, type) {
|
|
|
- let obj = JSON.parse(JSON.stringify(dItem));
|
|
|
- if (type == 'up' && index > 0) {
|
|
|
- this.data.option.splice(index - 1, 0, obj);
|
|
|
- this.data.option.splice(index + 1, 1);
|
|
|
- }
|
|
|
- if (type == 'down' && index < this.data.option.length - 1) {
|
|
|
- this.data.option[index] = this.data.option.splice(index + 1, 1, this.data.option[index])[0];
|
|
|
+ endSelection() {
|
|
|
+ this.isSelecting = false;
|
|
|
+ const width = Math.abs(this.endX - this.startX);
|
|
|
+ const height = Math.abs(this.endY - this.startY);
|
|
|
+ const x = this.endX > this.startX ? this.startX + 'px' : this.endX + 'px';
|
|
|
+ const y = this.endY > this.startY ? this.startY + 'px' : this.endY + 'px';
|
|
|
+ if (width && height) {
|
|
|
+ this.data.text_list.push({
|
|
|
+ id: Math.random().toString(36).substring(2, 10),
|
|
|
+ width: width + 'px',
|
|
|
+ height: height + 'px',
|
|
|
+ x: x,
|
|
|
+ y: y,
|
|
|
+ text: '',
|
|
|
+ });
|
|
|
+ this.startX = 0;
|
|
|
+ this.endX = 0;
|
|
|
+ this.startY = 0;
|
|
|
+ this.endY = 0;
|
|
|
+ this.hotspotsActiveIndex = this.data.text_list.length - 1;
|
|
|
}
|
|
|
},
|
|
|
- // 增加
|
|
|
- addElement() {
|
|
|
- this.data.option.push(getOption());
|
|
|
- },
|
|
|
- // 获取数据
|
|
|
- handleBlurCon(row) {
|
|
|
- let cons = row.new_word.trim();
|
|
|
- let MethodName = 'hz_resource_manager-GetMultHZStrokesContent';
|
|
|
- let data = {
|
|
|
- hz_str: cons,
|
|
|
- };
|
|
|
- GetStaticResources(MethodName, data)
|
|
|
- .then((res) => {
|
|
|
- for (let key in res) {
|
|
|
- if (key != 'status' && key != ',' && res[key]) {
|
|
|
- res[key] = JSON.parse(res[key]);
|
|
|
- }
|
|
|
- }
|
|
|
- let hzDetailList = res;
|
|
|
- let hz_list = [];
|
|
|
- cons.split('').forEach((items) => {
|
|
|
- let res = JSON.parse(JSON.stringify(hzDetailList[items]));
|
|
|
- let obj = {
|
|
|
- con: items,
|
|
|
- hzDetail: {
|
|
|
- hz_json: res,
|
|
|
- },
|
|
|
- };
|
|
|
- hz_list.push(obj);
|
|
|
- });
|
|
|
- row.hz_info = hz_list;
|
|
|
- })
|
|
|
- .catch(() => {
|
|
|
- this.loading = false;
|
|
|
+ handleData() {
|
|
|
+ this.data.image_list.forEach((item) => {
|
|
|
+ GetFileURLMap({ file_id_list: [item.file_id] }).then(({ url_map }) => {
|
|
|
+ this.$set(item, 'url', url_map[item.file_id]);
|
|
|
});
|
|
|
-
|
|
|
- row.pinyin = cnchar.spell(cons, 'array', 'low', 'tone').join(' ');
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 删除热区
|
|
|
+ deletehotspots(index) {
|
|
|
+ this.data.text_list.splice(index, 1);
|
|
|
+ if (this.hotspotsActiveIndex === index) {
|
|
|
+ this.hotspotsActiveIndex = null;
|
|
|
+ }
|
|
|
},
|
|
|
},
|
|
|
};
|
|
@@ -340,9 +262,60 @@ export default {
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
}
|
|
|
-</style>
|
|
|
-<style lang="scss">
|
|
|
-.tox .tox-editor-header {
|
|
|
- z-index: 3;
|
|
|
+
|
|
|
+.image-size {
|
|
|
+ display: flex;
|
|
|
+ gap: 10px;
|
|
|
+ align-items: center;
|
|
|
+ padding: 20px 0;
|
|
|
+}
|
|
|
+
|
|
|
+.hotspots-list {
|
|
|
+ padding: 0;
|
|
|
+ margin: 0;
|
|
|
+ list-style: none;
|
|
|
+
|
|
|
+ li {
|
|
|
+ display: flex;
|
|
|
+ column-gap: 8px;
|
|
|
+ width: 100%;
|
|
|
+ padding: 16px;
|
|
|
+ margin-bottom: 4px;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 8%);
|
|
|
+ }
|
|
|
+
|
|
|
+ span {
|
|
|
+ display: block;
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 600;
|
|
|
+ line-height: 24px;
|
|
|
+ color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ background: #004eff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-button--danger,
|
|
|
+ .el-button--primary {
|
|
|
+ height: 32px;
|
|
|
+ margin-left: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ flex: 1;
|
|
|
+
|
|
|
+ .el-textarea {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ p {
|
|
|
+ margin: 0;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 24px;
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|