|
|
@@ -4,11 +4,11 @@
|
|
|
|
|
|
</div>
|
|
|
<div class="o_content">
|
|
|
- <div class="type_box" :style="{width: oWidth}">
|
|
|
+ <div class="type_box" :style="{ width: oWidth }" v-if="cjson.type !== 'createRole'">
|
|
|
{{ getType(cjson) }}
|
|
|
</div>
|
|
|
<div class="word_box" v-if="cjson.type == 'word' || cjson.type == 'QA'" ref="wb">
|
|
|
- <div class="word_bbox" :style="{maxHeight: oheight}">
|
|
|
+ <div class="word_bbox" :style="{ maxHeight: oheight }">
|
|
|
<img class="word_img" :src="cjson.img" alt="" v-if="cjson.img" @click="previewImg(cjson.img)">
|
|
|
<div class="word_content" v-html="cjson.content">
|
|
|
</div>
|
|
|
@@ -16,9 +16,12 @@
|
|
|
</div>
|
|
|
<div class="sentence_box" v-if="cjson.type == 'sentence'" ref="wb">
|
|
|
<span v-html="cjson.content"></span>
|
|
|
+ <div v-if="cjson.img" class="sentence_div">
|
|
|
+ <img :src="cjson.img" alt="" @click="previewImg(cjson.img)">
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="word_box" v-if="cjson.type == 'theme'" ref="wb" style="max-height: calc(100% - 95px);">
|
|
|
- <div class="word_bbox" :style="{maxHeight: oheight}">
|
|
|
+ <div class="word_bbox" :style="{ maxHeight: oheight }">
|
|
|
<div class="word_content" v-html="cjson.content"></div>
|
|
|
<div class="word_content2" v-html="cjson.content2" v-if="cjson.content2"></div>
|
|
|
</div>
|
|
|
@@ -28,6 +31,7 @@
|
|
|
<span>倒计时</span>
|
|
|
<span>{{ Times.min }}:{{ Times.secode }}</span>
|
|
|
</div>
|
|
|
+ <testRole v-if="cjson.type == 'createRole'" :checkJson="answerArray"></testRole>
|
|
|
</div>
|
|
|
<div class="o_bottom" v-loading="isloading">
|
|
|
<div class="audio" v-if="!LuAudioUrl">
|
|
|
@@ -61,6 +65,8 @@
|
|
|
<span>正在录音...</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <iframe allow="camera *; microphone *;display-capture;midi;encrypted-media;"
|
|
|
+ src="https://beta.cloud.cocorobo.cn/browser/public/index.html" ref="iiframe"></iframe>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -84,7 +90,11 @@ recorder.onprogress = function (params) {
|
|
|
// console.log('当前录音的总数据([DataView, DataView...])', params.data);
|
|
|
// console.log('--------------END---------------')
|
|
|
};
|
|
|
+import testRole from "./testRole.vue";
|
|
|
export default {
|
|
|
+ components: {
|
|
|
+ testRole,
|
|
|
+ },
|
|
|
props: {
|
|
|
checkJson: {
|
|
|
type: Array,
|
|
|
@@ -107,6 +117,7 @@ export default {
|
|
|
oWidth: '500px',
|
|
|
calcTimer: null,
|
|
|
totalSeconds: 0,
|
|
|
+ answerArray: []
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
@@ -119,14 +130,14 @@ export default {
|
|
|
// return parentHeight + 'px'
|
|
|
// }
|
|
|
getType() {
|
|
|
- return function(json) {
|
|
|
- if(json.type == 'word'){
|
|
|
+ return function (json) {
|
|
|
+ if (json.type == 'word') {
|
|
|
return '单词/词组'
|
|
|
- }else if(json.type == 'QA'){
|
|
|
+ } else if (json.type == 'QA') {
|
|
|
return '问答题目'
|
|
|
- }else if(json.type == 'sentence'){
|
|
|
+ } else if (json.type == 'sentence') {
|
|
|
return '句子/短文'
|
|
|
- }else if(json.type == 'theme'){
|
|
|
+ } else if (json.type == 'theme') {
|
|
|
return '主题陈述'
|
|
|
}
|
|
|
};
|
|
|
@@ -144,8 +155,48 @@ export default {
|
|
|
watch: {
|
|
|
checkType: {
|
|
|
handler: function (newVal, oldVal) {
|
|
|
+ this.isloading = false
|
|
|
this.cjson = JSON.parse(JSON.stringify(this.checkJson[newVal]));
|
|
|
- this.LuAudioUrl = this.work[newVal] ? JSON.parse(JSON.stringify(this.work[newVal])) : ''
|
|
|
+ this.LuAudioUrl = ''
|
|
|
+ if (typeof this.work[newVal] == 'string') {
|
|
|
+ this.LuAudioUrl = this.work[newVal] ? JSON.parse(JSON.stringify(this.work[newVal])) : ''
|
|
|
+ } else if (typeof this.work[newVal] == 'object' && this.cjson.type != 'createRole') {
|
|
|
+ this.LuAudioUrl = this.work[newVal].audio ? JSON.parse(JSON.stringify(this.work[newVal].audio)) : ''
|
|
|
+ } else if (typeof this.work[newVal] == 'object' && this.cjson.type == 'createRole') {
|
|
|
+ var a = Array.isArray(this.work[newVal])
|
|
|
+ if (a) {
|
|
|
+ this.answerArray = JSON.parse(JSON.stringify(this.work[newVal]))
|
|
|
+ } else {
|
|
|
+ this.answerArray = []
|
|
|
+ this.answerArray.push(
|
|
|
+ {
|
|
|
+ isY: false,
|
|
|
+ content: this.cjson.content3,
|
|
|
+ name: this.cjson.content,
|
|
|
+ img: this.cjson.img
|
|
|
+ }
|
|
|
+ )
|
|
|
+ }
|
|
|
+ this.$emit('setWork', this.answerArray, this.checkType)
|
|
|
+ }
|
|
|
+ if (!this.work[newVal] && this.cjson.type == 'createRole') {
|
|
|
+ var a = Array.isArray(this.work[newVal])
|
|
|
+ if (a) {
|
|
|
+ this.answerArray = JSON.parse(JSON.stringify(this.work[newVal]))
|
|
|
+ } else {
|
|
|
+ this.answerArray = []
|
|
|
+ this.answerArray.push(
|
|
|
+ {
|
|
|
+ isY: false,
|
|
|
+ content: this.cjson.content3,
|
|
|
+ name: this.cjson.content,
|
|
|
+ img: this.cjson.img
|
|
|
+ }
|
|
|
+ )
|
|
|
+ }
|
|
|
+ this.$emit('setWork', this.answerArray, this.checkType)
|
|
|
+ }
|
|
|
+
|
|
|
this.oheight = 'auto'
|
|
|
this.oWidth = '500px'
|
|
|
const images = this.$refs['obox'].querySelectorAll('img');
|
|
|
@@ -162,7 +213,12 @@ export default {
|
|
|
// });
|
|
|
// });
|
|
|
// }else{
|
|
|
+ if (this.cjson.type != "createRole") {
|
|
|
this.calculateParentHeight()
|
|
|
+ }
|
|
|
+ if (this.cjson.type == "createRole") {
|
|
|
+ this.createRole(this.cjson.content2, this.cjson.content)
|
|
|
+ }
|
|
|
// }
|
|
|
|
|
|
},
|
|
|
@@ -174,10 +230,19 @@ export default {
|
|
|
this.$hevueImgPreview(url);
|
|
|
},
|
|
|
restart() {
|
|
|
- this.LuAudioUrl = ""
|
|
|
- setTimeout(() => {
|
|
|
- this.startRecorder()
|
|
|
- }, 500);
|
|
|
+ let _this = this
|
|
|
+ _this.$confirm("确定重新录音么？", "提示", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning",
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ _this.LuAudioUrl = ""
|
|
|
+ setTimeout(() => {
|
|
|
+ _this.startRecorder()
|
|
|
+ }, 500);
|
|
|
+ })
|
|
|
+ .catch(() => { });
|
|
|
},
|
|
|
checkIndex(type) {
|
|
|
if (type == '1') {
|
|
|
@@ -198,7 +263,7 @@ export default {
|
|
|
if (!_this.isRecord) {
|
|
|
recorder.destroy(); // 销毁录音
|
|
|
_this.isRecord = true;
|
|
|
- if(this.cjson.type == 'theme'){
|
|
|
+ if (this.cjson.type == 'theme') {
|
|
|
this.setSecodes()
|
|
|
}
|
|
|
recorder.start().then(
|
|
|
@@ -209,15 +274,14 @@ export default {
|
|
|
_this.$message.error(`没有找到可使用的麦克风，或者您没有允许此网页使用麦克风`);
|
|
|
// 出错了
|
|
|
console.log(`${error.name} : ${error.message}`);
|
|
|
- if(_this.calcTimer){
|
|
|
+ if (_this.calcTimer) {
|
|
|
clearInterval(_this.calcTimer)
|
|
|
_this.calcTimer = null;
|
|
|
}
|
|
|
}
|
|
|
);
|
|
|
-
|
|
|
} else {
|
|
|
- if(_this.calcTimer){
|
|
|
+ if (_this.calcTimer) {
|
|
|
clearInterval(_this.calcTimer)
|
|
|
_this.calcTimer = null;
|
|
|
}
|
|
|
@@ -253,10 +317,49 @@ export default {
|
|
|
this.$message.error("请录音后在上传语音");
|
|
|
return;
|
|
|
}
|
|
|
- const mp3Blob = this.convertToMp3(recorder.getWAV());
|
|
|
- let audioFile = this.dataURLtoAudio(mp3Blob, "mp3");
|
|
|
+
|
|
|
+ const mp3Blob = recorder.getWAVBlob();
|
|
|
+ // const mp3Blob = this.convertToMp3(recorder.getWAV());
|
|
|
+ let audioFile = this.dataURLtoAudio(mp3Blob, "wav");
|
|
|
console.log(audioFile);
|
|
|
- this.beforeUpload1(audioFile, 3);
|
|
|
+ let iiframe = this.$refs['iiframe']
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ // this.isloading = true
|
|
|
+ // this.beforeUpload1(audioFile, 3);
|
|
|
+ // return;
|
|
|
+ if (this.cjson.type == 'theme') {
|
|
|
+ this.isloading = true
|
|
|
+ this.beforeUpload1(audioFile, 3);
|
|
|
+ } else if (this.cjson.type == 'createRole') {
|
|
|
+ // this.isloading = true
|
|
|
+ // this.beforeUpload1(audioFile, 3);
|
|
|
+ this.isloading = true
|
|
|
+ let _this = this
|
|
|
+ iiframe.contentWindow.onRecognizedResult = function (e) {
|
|
|
+ console.log('onRecognizedResult', e);
|
|
|
+ let privText = e.privText
|
|
|
+ _this.beforeUpload1(audioFile, 3, privText);
|
|
|
+ }
|
|
|
+
|
|
|
+ iiframe.contentWindow.doPronunciationAssessmentOnceAsync('', { files: [audioFile] })
|
|
|
+ } else {
|
|
|
+ this.isloading = true
|
|
|
+ let _this = this
|
|
|
+ iiframe.contentWindow.onRecognizedResult = function (e) {
|
|
|
+ console.log('onRecognizedResult', e);
|
|
|
+ let privText = e.privText
|
|
|
+ let star = JSON.parse(e.privJson).NBest[0].PronunciationAssessment
|
|
|
+ console.log('star', star)
|
|
|
+ // e.privText
|
|
|
+ // JSON.parse(e.privJson).NBest[0].PronunciationAssessment
|
|
|
+
|
|
|
+ _this.beforeUpload1(audioFile, 3, privText, star);
|
|
|
+ }
|
|
|
+ iiframe.contentWindow.doPronunciationAssessmentOnceAsync(this.cjson.content, { files: [audioFile] })
|
|
|
+ }
|
|
|
+
|
|
|
// recorder.download(mp3Blob, "recorder", "mp3");
|
|
|
},
|
|
|
convertToMp3(wavDataView) {
|
|
|
@@ -294,13 +397,12 @@ export default {
|
|
|
if (enc.length > 0) {
|
|
|
buffer.push(enc);
|
|
|
}
|
|
|
- return new Blob(buffer, { type: "audio/mp3" });
|
|
|
+ return new Blob(buffer, { type: "audio/wav" });
|
|
|
},
|
|
|
dataURLtoAudio(blob, filename) {
|
|
|
- return new File([blob], filename, { type: "audio/mp3" });
|
|
|
+ return new File([blob], filename, { type: "audio/wav" });
|
|
|
},
|
|
|
- beforeUpload1(event, type) {
|
|
|
- this.isloading = true
|
|
|
+ beforeUpload1(event, type, text, star) {
|
|
|
var file;
|
|
|
if (type == 3) {
|
|
|
file = event;
|
|
|
@@ -342,7 +444,9 @@ export default {
|
|
|
// _this.progress = parseInt((evt.loaded * 80) / evt.total);
|
|
|
})
|
|
|
.send(function (err, data) {
|
|
|
- _this.isloading = false
|
|
|
+ if (_this.cjson.type != 'createRole') {
|
|
|
+ _this.isloading = false
|
|
|
+ }
|
|
|
// _this.progress = 100;
|
|
|
if (err) {
|
|
|
var a = _this.$refs.upload1.uploadFiles;
|
|
|
@@ -350,8 +454,23 @@ export default {
|
|
|
_this.$message.error("上传失败");
|
|
|
} else {
|
|
|
if (type == 3) {
|
|
|
- _this.LuAudioUrl = data.Location;
|
|
|
- _this.$emit('setWork', _this.LuAudioUrl, _this.checkType)
|
|
|
+ if (_this.cjson.type == 'createRole') {
|
|
|
+ _this.answerArray.push(
|
|
|
+ {
|
|
|
+ isY: true,
|
|
|
+ content: text,
|
|
|
+ voice: data.Location,
|
|
|
+ name: '',
|
|
|
+ img: ''
|
|
|
+ }
|
|
|
+ )
|
|
|
+ _this.answerCode(text)
|
|
|
+ } else {
|
|
|
+ _this.LuAudioUrl = data.Location;
|
|
|
+ _this.$emit('setWork', _this.LuAudioUrl, _this.checkType, text, star)
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
}
|
|
|
console.log(data.Location);
|
|
|
}
|
|
|
@@ -360,19 +479,19 @@ export default {
|
|
|
},
|
|
|
calculateParentHeight() {
|
|
|
this.$nextTick(() => {
|
|
|
- setTimeout(() => {
|
|
|
- // 获取父元素
|
|
|
- var parentElement = this.$refs['wb'];
|
|
|
+ setTimeout(() => {
|
|
|
+ // 获取父元素
|
|
|
+ var parentElement = this.$refs['wb'];
|
|
|
|
|
|
// 计算父元素的高度
|
|
|
// var parentHeight = parentElement.offsetHeight + 1;
|
|
|
var parentWidth = parentElement.offsetWidth;
|
|
|
// this.oheight = parentHeight + 'px'
|
|
|
this.oWidth = parentWidth + 'px'
|
|
|
- }, 50);
|
|
|
+ }, 50);
|
|
|
});
|
|
|
},
|
|
|
- setSecodes(){
|
|
|
+ setSecodes() {
|
|
|
this.totalSeconds = this.checkJson[this.checkType].oTime * 60
|
|
|
// this.totalSeconds = 10
|
|
|
this.calcTimer = setInterval(() => {
|
|
|
@@ -385,11 +504,115 @@ export default {
|
|
|
console.log("倒计时结束"); // 输出日志
|
|
|
}
|
|
|
}, 1000);
|
|
|
+ },
|
|
|
+ answerCode(msg) {
|
|
|
+ var _this = this;
|
|
|
+ _this.ajax.post('https://gpt4.cocorobo.cn/assistants_completion_response', {
|
|
|
+ uid: _this.guid(),
|
|
|
+ message: msg,
|
|
|
+ }).then(function (response) {
|
|
|
+ console.log(response);
|
|
|
+ _this.answerArray.push(
|
|
|
+ {
|
|
|
+ isY: false,
|
|
|
+ content: response.FunctionResponse,
|
|
|
+ name: _this.answerArray[0].name,
|
|
|
+ img: _this.answerArray[0].img
|
|
|
+ }
|
|
|
+ )
|
|
|
+ _this.isloading = false
|
|
|
+ }).catch(function (error) {
|
|
|
+ _this.isloading = false
|
|
|
+ console.log(error);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ guid() {
|
|
|
+ var _num,
|
|
|
+ i,
|
|
|
+ _guid = "";
|
|
|
+ for (i = 0; i < 32; i++) {
|
|
|
+ _guid += Math.floor(Math.random() * 16).toString(16); //随机0 - 16 的数字 转变为16进制的字符串
|
|
|
+ _num = Math.floor((i - 7) / 4); //计算 (i-7)除4
|
|
|
+ if (_num > -1 && _num < 4 && i == 7 + 4 * _num) {
|
|
|
+ //会使guid中间加 "-" 形式为xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
|
|
|
+ _guid += "-";
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return _guid;
|
|
|
+ },
|
|
|
+ createRole(content, name) {
|
|
|
+ var _this = this;
|
|
|
+ _this.ajax.post('https://gpt4.cocorobo.cn/create_free_assistants', {
|
|
|
+ filename: [],
|
|
|
+ url: [],
|
|
|
+ uid: _this.guid(),
|
|
|
+ instructions: content,
|
|
|
+ assistantName: name
|
|
|
+ }).then(function (response) {
|
|
|
+ console.log(response);
|
|
|
+ }).catch(function (error) {
|
|
|
+ console.log(error);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ if (!this.isRecord) {
|
|
|
+ } else {
|
|
|
+ if (this.calcTimer) {
|
|
|
+ clearInterval(this.calcTimer)
|
|
|
+ this.calcTimer = null;
|
|
|
+ }
|
|
|
+ recorder.stop(); // 结束录音
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
+
|
|
|
this.cjson = JSON.parse(JSON.stringify(this.checkJson[this.checkType]));
|
|
|
- this.LuAudioUrl = this.work[this.checkType] ? JSON.parse(JSON.stringify(this.work[this.checkType])) : ''
|
|
|
+ this.LuAudioUrl = ''
|
|
|
+ if (typeof this.work[this.checkType] == 'string') {
|
|
|
+ this.LuAudioUrl = this.work[this.checkType] ? JSON.parse(JSON.stringify(this.work[this.checkType])) : ''
|
|
|
+ } else if (typeof this.work[this.checkType] == 'object' && this.cjson.type != 'createRole') {
|
|
|
+ this.LuAudioUrl = this.work[this.checkType].audio ? JSON.parse(JSON.stringify(this.work[this.checkType].audio)) : ''
|
|
|
+ } else if (typeof this.work[this.checkType] == 'object' && this.cjson.type == 'createRole') {
|
|
|
+ var a = Array.isArray(this.work[this.checkType])
|
|
|
+ if (a) {
|
|
|
+ this.answerArray = JSON.parse(JSON.stringify(this.work[this.checkType]))
|
|
|
+ } else {
|
|
|
+ this.answerArray = []
|
|
|
+ this.answerArray.push(
|
|
|
+ {
|
|
|
+ isY: false,
|
|
|
+ content: this.cjson.content3,
|
|
|
+ name: this.cjson.content,
|
|
|
+ img: this.cjson.img
|
|
|
+ }
|
|
|
+ )
|
|
|
+ }
|
|
|
+ this.$emit('setWork', this.answerArray, this.checkType)
|
|
|
+ }
|
|
|
+ if (!this.work[this.checkType] && this.cjson.type == 'createRole') {
|
|
|
+ var a = Array.isArray(this.work[this.checkType])
|
|
|
+ if (a) {
|
|
|
+ this.answerArray = JSON.parse(JSON.stringify(this.work[this.checkType]))
|
|
|
+ } else {
|
|
|
+ this.answerArray = []
|
|
|
+ this.answerArray.push(
|
|
|
+ {
|
|
|
+ isY: false,
|
|
|
+ content: this.cjson.content3,
|
|
|
+ name: this.cjson.content,
|
|
|
+ img: this.cjson.img
|
|
|
+ }
|
|
|
+ )
|
|
|
+ }
|
|
|
+ this.$emit('setWork', this.answerArray, this.checkType)
|
|
|
+ }
|
|
|
+ if (this.cjson.type != "createRole") {
|
|
|
+ this.calculateParentHeight()
|
|
|
+ }
|
|
|
+ if (this.cjson.type == "createRole") {
|
|
|
+ this.createRole(this.cjson.content2, this.cjson.content)
|
|
|
+ }
|
|
|
},
|
|
|
}
|
|
|
</script>
|
|
|
@@ -434,11 +657,13 @@ export default {
|
|
|
max-height: calc(100% - 70px);
|
|
|
/* overflow: auto; */
|
|
|
}
|
|
|
-.tips_box{
|
|
|
+
|
|
|
+.tips_box {
|
|
|
margin-top: 30px;
|
|
|
color: #727272;
|
|
|
}
|
|
|
-.word_box > .word_bbox {
|
|
|
+
|
|
|
+.word_box>.word_bbox {
|
|
|
width: 100%;
|
|
|
position: relative;
|
|
|
z-index: 999;
|
|
|
@@ -488,7 +713,7 @@ export default {
|
|
|
left: 15px;
|
|
|
}
|
|
|
|
|
|
-.word_box > .word_bbox>.word_img {
|
|
|
+.word_box>.word_bbox>.word_img {
|
|
|
width: calc(100% - 30px);
|
|
|
max-height: 300px;
|
|
|
z-index: 999;
|
|
|
@@ -501,7 +726,7 @@ export default {
|
|
|
}
|
|
|
|
|
|
|
|
|
-.word_box > .word_bbox>.word_content {
|
|
|
+.word_box>.word_bbox>.word_content {
|
|
|
position: relative;
|
|
|
z-index: 999;
|
|
|
text-align: center;
|
|
|
@@ -514,7 +739,7 @@ export default {
|
|
|
white-space: pre-line;
|
|
|
}
|
|
|
|
|
|
-.word_box > .word_bbox>.word_content2 {
|
|
|
+.word_box>.word_bbox>.word_content2 {
|
|
|
position: relative;
|
|
|
z-index: 999;
|
|
|
text-align: left;
|
|
|
@@ -645,18 +870,19 @@ export default {
|
|
|
margin: 0 !important;
|
|
|
}
|
|
|
|
|
|
-.audio_b >>> .vueAudioBetter span:before{
|
|
|
+.audio_b>>>.vueAudioBetter span:before {
|
|
|
color: #fff;
|
|
|
}
|
|
|
|
|
|
.audio_class>>>.slider .process {
|
|
|
background: #000;
|
|
|
}
|
|
|
-.audio_b >>> .vueAudioBetter .iconfont:active{
|
|
|
+
|
|
|
+.audio_b>>>.vueAudioBetter .iconfont:active {
|
|
|
position: unset !important;
|
|
|
}
|
|
|
|
|
|
-.time_box{
|
|
|
+.time_box {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
@@ -664,21 +890,38 @@ export default {
|
|
|
margin-top: 25px;
|
|
|
}
|
|
|
|
|
|
-.time_box > span:nth-child(1){
|
|
|
+.time_box>span:nth-child(1) {
|
|
|
color: #727272;
|
|
|
font-size: 16px;
|
|
|
}
|
|
|
-.time_box > span:nth-child(2){
|
|
|
+
|
|
|
+.time_box>span:nth-child(2) {
|
|
|
/* margin-top: 10px; */
|
|
|
font-size: 32px;
|
|
|
color: #3581FC;
|
|
|
}
|
|
|
|
|
|
-.type_box{
|
|
|
+.type_box {
|
|
|
min-width: 500px;
|
|
|
- width: 70%;
|
|
|
- text-align: right;
|
|
|
- color: #a5a5a5;
|
|
|
- margin-bottom: 10px;
|
|
|
+ width: 70%;
|
|
|
+ text-align: right;
|
|
|
+ color: #a5a5a5;
|
|
|
+ margin-bottom: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.sentence_div {
|
|
|
+ width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ margin-top: 10px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+}
|
|
|
+
|
|
|
+.sentence_div>img {
|
|
|
+ width: 60px;
|
|
|
+ height: 60px;
|
|
|
+ object-fit: cover;
|
|
|
+ cursor: pointer;
|
|
|
+ border-radius: 4px
|
|
|
}
|
|
|
</style>
|
