|
|
@@ -0,0 +1,297 @@
|
|
|
+<template>
|
|
|
+ <div class="o_box">
|
|
|
+ <div class="o_content">
|
|
|
+ <span>输入题目</span>
|
|
|
+ <textarea v-autoHeight="38" rows="1" class="binfo_input binfo_textarea" cols v-model="checkJson.content"
|
|
|
+ placeholder="主题陈述" @change="setJson"></textarea>
|
|
|
+ </div>
|
|
|
+ <div class="o_content">
|
|
|
+ <span>输入要点</span>
|
|
|
+ <textarea v-autoHeight="38" rows="1" class="binfo_input binfo_textarea" cols v-model="checkJson.content2"
|
|
|
+ placeholder="请输入对该问题得要点" @change="setJson"></textarea>
|
|
|
+ </div>
|
|
|
+ <!-- <div class="o_content">
|
|
|
+ <span>准备时间</span>
|
|
|
+ <el-input v-model="checkJson.rTime" placeholder="请输入准备时间" style="width: 150px" @change="numberPan('rTime')"></el-input>
|
|
|
+ <span style="margin-left: 10px;">min</span>
|
|
|
+ </div> -->
|
|
|
+ <div class="o_content">
|
|
|
+ <span>演讲时间</span>
|
|
|
+ <el-input v-model="checkJson.oTime" placeholder="请输入演讲时间" style="width: 150px" @change="numberPan('oTime')"></el-input>
|
|
|
+ <span style="margin-left: 10px;">min</span>
|
|
|
+ <!-- <textarea v-autoHeight="38" rows="1" class="binfo_input binfo_textarea" cols v-model="checkJson.content2"
|
|
|
+ placeholder="请输入演讲时间" @change="setJson"></textarea> -->
|
|
|
+ </div>
|
|
|
+ <!-- <div class="o_content">
|
|
|
+ <span>添加图片</span>
|
|
|
+ <div class="o_uploadbox_img" v-if="checkJson.img">
|
|
|
+ <div class="pic_mask">
|
|
|
+ <span @click="checkImg(checkJson.img)">查看</span>
|
|
|
+ <span @click="deleteImg()">删除</span>
|
|
|
+ </div>
|
|
|
+ <img :src="checkJson.img" alt="">
|
|
|
+ </div>
|
|
|
+ <div class="o_uploadbox" v-if="!checkJson.img" @click="getImg()">智能获取</div>
|
|
|
+ <div class="o_uploadbox" style="padding: 0 6px;" @click="addImg($event)" v-if="!checkJson.img">
|
|
|
+ <span class="icon_pic"></span>
|
|
|
+ <input type="file" accept="image/*" style="display: none" @change="beforeUpload($event)" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-if="proVisible" class="mask">
|
|
|
+ <div class="progressBox">
|
|
|
+ <div class="lbox">
|
|
|
+ <img src="../../../../../assets/loading.gif" />上传中，请稍后
|
|
|
+ </div>
|
|
|
+ <div style="margin-bottom: 10px">
|
|
|
+ <span>{{
|
|
|
+ isFinishSize
|
|
|
+ }}M</span>
|
|
|
+ /
|
|
|
+ <span>{{
|
|
|
+ isAllSize
|
|
|
+ }}M</span>
|
|
|
+ </div>
|
|
|
+ <el-progress :text-inside="true" :stroke-width="20" :percentage="progress
|
|
|
+ ? progress
|
|
|
+ : 0
|
|
|
+ " style="width: 80%"></el-progress>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <gpt-img :sysPicVisible.sync="sysPicVisible" :value="checkJson.content"></gpt-img> -->
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import minxin from './minxins/minxin';
|
|
|
+export default {
|
|
|
+ mixins: [minxin],
|
|
|
+ props: {
|
|
|
+ cjson: {
|
|
|
+ type: Object,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ checkJson: {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ setJson() {
|
|
|
+ this.$emit('setJson', this.checkJson)
|
|
|
+ },
|
|
|
+ numberPan(time) {
|
|
|
+ if (!(/^-?\d+(\.\d+)?$/.test(this.checkJson[time])) || this.checkJson[time] <= 0) {
|
|
|
+ this.$message.error('请输入大于0的数字')
|
|
|
+ this.checkJson[time] = 1
|
|
|
+ }else if(!this.checkJson[time]){
|
|
|
+ this.$message.error('请输入大于0的数字')
|
|
|
+ this.checkJson[time] = 1
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ cjson: {
|
|
|
+ handler: function (newVal, oldVal) {
|
|
|
+ this.checkJson = this.depthCopy(newVal);
|
|
|
+ },
|
|
|
+ deep: true,
|
|
|
+ },
|
|
|
+ imgUrl: {
|
|
|
+ handler: function (newVal, oldVal) {
|
|
|
+ this.checkJson.img = newVal
|
|
|
+ this.$forceUpdate()
|
|
|
+ this.$emit('setJson', this.checkJson)
|
|
|
+ },
|
|
|
+ deep: true,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.checkJson = this.depthCopy(this.cjson);
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.o_box {
|
|
|
+ width: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 12px 16px 12px 48px;
|
|
|
+ background: #f5f6f7;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.binfo_input {
|
|
|
+ width: 100%;
|
|
|
+ margin: 0;
|
|
|
+ padding: 8px;
|
|
|
+ display: block;
|
|
|
+ min-width: 0;
|
|
|
+ outline: none;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: none;
|
|
|
+ border: none;
|
|
|
+ border-radius: 4px;
|
|
|
+ background: #fff;
|
|
|
+ font-size: 16px;
|
|
|
+ resize: none;
|
|
|
+ font-family: 'Microsoft YaHei';
|
|
|
+ min-height: 38px;
|
|
|
+ /* border: 1px solid #3682fc00; */
|
|
|
+ border: 1.5px solid #CAD1DC;
|
|
|
+}
|
|
|
+
|
|
|
+.binfo_textarea {
|
|
|
+ border: 1.5px solid #CAD1DC;
|
|
|
+ font-size: 14px;
|
|
|
+ resize: none;
|
|
|
+ /* background: #f6f6f6; */
|
|
|
+ font-family: 'Microsoft YaHei';
|
|
|
+}
|
|
|
+
|
|
|
+.binfo_input:focus-visible {
|
|
|
+ border: 1.5px solid #3681FC !important;
|
|
|
+}
|
|
|
+
|
|
|
+.o_content {
|
|
|
+ display: flex;
|
|
|
+ color: #000;
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+
|
|
|
+.o_content+.o_content {
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.o_content>span {
|
|
|
+ min-width: fit-content;
|
|
|
+ margin-right: 12px;
|
|
|
+ line-height: 38px;
|
|
|
+}
|
|
|
+
|
|
|
+.o_uploadbox {
|
|
|
+ height: 32px;
|
|
|
+ padding: 0 8px;
|
|
|
+ background: #eee;
|
|
|
+ line-height: 32px;
|
|
|
+ margin-top: 3px;
|
|
|
+ font-size: 14px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.o_uploadbox+.o_uploadbox {
|
|
|
+ margin-left: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.icon_pic {
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ background-image: url('../../../../../assets/icon/englishVoice/icon_picture.png');
|
|
|
+ background-size: 100% 100%;
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+
|
|
|
+.mask {
|
|
|
+ background-color: rgb(0 0 0 / 30%);
|
|
|
+ /* position: fixed; */
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ z-index: 90;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+
|
|
|
+.progressBox {
|
|
|
+ width: 300px;
|
|
|
+ height: 150px;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 10px;
|
|
|
+ box-shadow: 0 0 6px 1px #bfbfbf;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ flex-direction: column;
|
|
|
+ position: relative;
|
|
|
+ color: #6c6c6c;
|
|
|
+}
|
|
|
+
|
|
|
+.progressBox>>>.el-progress-bar__outer {
|
|
|
+ background-color: #d1dfff !important;
|
|
|
+}
|
|
|
+
|
|
|
+.progressBox .lbox {
|
|
|
+ height: 50px;
|
|
|
+ font-size: 19px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ color: #747474;
|
|
|
+}
|
|
|
+
|
|
|
+.progressBox .lbox img {
|
|
|
+ width: 40px;
|
|
|
+ margin-right: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.closeCss {
|
|
|
+ position: absolute;
|
|
|
+ top: 8px;
|
|
|
+ right: 8px;
|
|
|
+ cursor: pointer;
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.closeCss>img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.o_uploadbox_img {
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+ border-radius: 5px;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.o_uploadbox_img>img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ object-fit: cover;
|
|
|
+}
|
|
|
+
|
|
|
+.o_uploadbox_img:hover .pic_mask {
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+
|
|
|
+.pic_mask {
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: rgba(0, 0, 0, .3);
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ color: #458dff;
|
|
|
+ display: none;
|
|
|
+ border-radius: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.pic_mask>span {
|
|
|
+ cursor: pointer;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.pic_mask>span+span {
|
|
|
+ margin-top: 10px;
|
|
|
+}</style>
|
