Du kannst nicht mehr als 25 Themen auswählen Themen müssen entweder mit einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.
 
 
 

1600 Zeilen
34 KiB

  1. <template>
  2. <view class="translation" @click="changeEditing(false)">
  3. <view class="top" style="margin-top: 30rpx;">
  4. <view class="title">
  5. <view class="call_record_time">{{date}}</view>
  6. <view class="hash" @click="gotoChat" v-if="commentList.length != 0">
  7. 查看全部评论
  8. </view>
  9. </view>
  10. <view class="call_record_time_one">接待时长 {{alltimeStr}}
  11. <u-icon name="list-dot" color="#333" size="48" @click="showFile"></u-icon>
  12. <view class="file-change" v-if="isshowFile">
  13. <view class="file-item" @click="filechange(item,index)"
  14. :class="csdFileindex == index ? 'fileactive' : ''" v-for="(item,index) in luyinList"
  15. :key="index">录音文件{{index+1}}</view>
  16. </view>
  17. </view>
  18. <zaudio :duration="duration" theme="theme4"></zaudio>
  19. </view>
  20. <scroll-view lower-threshold='20px' @scrolltolower="ltolower()" scroll-y="true" class="text scroll-Y"
  21. :scroll-top="scrollTop" :scroll-into-view="scrollId">
  22. <!-- 音频识别模块 -->
  23. <view>
  24. <!-- 聊天记录-->
  25. <view class="dialog-block" v-for="(dialog,i) in dialogList" :key="i">
  26. <view :id="'dialog'+i" class="fileName">录音文件</view>
  27. <view class="text dingweishiy" v-for="(item,index) in dialog.message" :key="index"
  28. :id="'dialog'+csdFileindex+'text'+item.bg"
  29. :class="{active: Math.floor(item.bg/1000) <= playNow && Math.floor(item.ed/1000) > playNow && i==0}"
  30. :data-speaker="item.speaker">
  31. <view class="avatar">
  32. <text :style="[SPEAKERSTYLE(item.speaker)]">{{ item.speaker | toCapital }}</text>
  33. </view>
  34. <view class="content">
  35. <view v-html="item.onebest"></view>
  36. </view>
  37. <template v-if="refinement(item)">
  38. <view class="tankuangcss">
  39. <view class="tags">标签</view>
  40. <view class="tags-t" @click="dianjibiaoqian()">
  41. <view class="tags-t-c">{{biaoqian}}</view>
  42. <view v-if="biaoqian.length>4" class="tipsss">
  43. <u-icon name="chat-fill" color="#ffffff" size="32rpx"></u-icon>
  44. </view>
  45. </view>
  46. </view>
  47. <view class="biaoqianya">
  48. <view class="biaoqianyaisshow" v-if="biaoqianyaisshow">
  49. {{biaoqian}}
  50. </view>
  51. </view>
  52. </template>
  53. </view>
  54. </view>
  55. <!-- 点赞 -->
  56. <view class="likeArea" :class="{'liked':isLiked}">
  57. <image
  58. :src="isLiked?'/static/images/recordingManagement/likeActive.png':'/static/images/recordingManagement/like_gray.png'"
  59. mode=""></image>
  60. </view>
  61. <view class="hash" id="hash">
  62. </view>
  63. </view>
  64. </scroll-view>
  65. <!-- 评语列表 -->
  66. <u-popup v-model="watchAllCommit" mode="bottom">
  67. <scroll-view scroll-y style="height: 70vh;">
  68. <view class="boxs">
  69. <view class="chat">
  70. <view class="total">
  71. 全部评论(共{{commentList.length}}条)
  72. </view>
  73. <view class="list">
  74. <view class="message" v-for="(item,index) in commentList" :key="index">
  75. <u-avatar class="avator" size="72"
  76. :src="item.commentPic ||'https://qufang.oss-cn-beijing.aliyuncs.com/upload/icon/xcx/jjycrm/my/headPicture.png'">
  77. </u-avatar>
  78. <view class="right">
  79. <view class="name">
  80. {{item.commentName||"未知昵称"}}
  81. </view>
  82. <view class="subtitle" v-if="item.commentAutoGraph">
  83. {{item.commentAutoGraph}}
  84. </view>
  85. <view class="answer" v-if="item.replyName">
  86. 回复@{{item.replyName}}
  87. </view>
  88. <view class="content" v-if="item.content">
  89. {{item.content}}
  90. </view>
  91. <view class="pic" v-if="item.picUrl">
  92. <image style="width: 100%;max-width: 240px;" :src="item.picUrl" mode="widthFix">
  93. </image>
  94. </view>
  95. <view class="bottom">
  96. <view class="time">
  97. {{item.createTime}}
  98. </view>
  99. <view class="button" v-if="myId != item.commentUser"
  100. @click.stop="answer(item.commentUser,item.id)">
  101. 回复
  102. </view>
  103. </view>
  104. </view>
  105. </view>
  106. </view>
  107. </view>
  108. <!-- 写评价 -->
  109. <view class="bottomArea">
  110. <image class="voice" @click.stop="changeVoiceShow"
  111. src="/static/images/recordingManagement/voice.png" mode=""></image>
  112. <view class="inputArea">
  113. <textarea :value="content" :focus="textareaFocus" type="text" @input="changeContent"
  114. :auto-height="true" class="editor" :class="{'active':editing}"
  115. @click.stop="changeEditing(true)" @confirm="sendComment">
  116. </textarea>
  117. <view class="placeholder" :class="{'editing':editing}" v-if="!content">写评价</view>
  118. <image class="edit" v-if="!editing && content == ''"
  119. src="/static/images/recordingManagement/edit.png" mode=""></image>
  120. </view>
  121. <image class="like" v-if="myId != createUser && !editing" @click="changeLike"
  122. src="/static/images/recordingManagement/like.png" mode=""></image>
  123. <image class="add" @click.stop="uploadImage" v-if="!editing && content == ''"
  124. src="/static/images/recordingManagement/add.png" mode=""></image>
  125. <view class="send" @click="sendComment" v-if="content!=''">
  126. 发送
  127. </view>
  128. </view>
  129. </view>
  130. </scroll-view>
  131. </u-popup>
  132. <!-- 回到顶部 -->
  133. <!-- <view class="backTop" @click="gotoTop">
  134. <image src="/static/images/backTop.png" mode=""></image>
  135. </view> -->
  136. <!-- 语音输入 -->
  137. <cover-view class="voiceContent" v-if="voiceShow" @click="changeVoiceShow">
  138. <cover-view class="box" @click.stop="" @touchstart="voiceStart" @touchend="voiceEnd">
  139. <cover-view class="center">
  140. <cover-image class="voice" src="/static/images/voice.png" mode="widthFix"></cover-image>
  141. <cover-view class="text">
  142. {{isRecording?'正在输入':'长按语音输入'}}
  143. </cover-view>
  144. </cover-view>
  145. </cover-view>
  146. </cover-view>
  147. </view>
  148. </template>
  149. <script>
  150. var app = getApp();
  151. var util = require("../../../utils/util.js");
  152. var config = require("../../../config");
  153. var plugin = requirePlugin("WechatSI")
  154. let manager = plugin.getRecordRecognitionManager();
  155. import zaudio from '@/components/uniapp-zaudio/zaudio';
  156. export default {
  157. components: {
  158. zaudio
  159. },
  160. data() {
  161. return {
  162. dialogList: [], // 录音对话转移列表
  163. isshowFile: false, // 录音文件默认隐藏
  164. luyinList: [], //录音文件列表
  165. fileIndex: 0, //文件索引
  166. fileId: '', //选中的录音ID
  167. id: "",
  168. audioStop: false,
  169. customerId: '',
  170. date: "",
  171. time: "",
  172. message: "", //聊天记录表
  173. durationTimeStr: "",
  174. autoLoad: true,
  175. playNow: 0,
  176. scrollTop: 0,
  177. scrollId: "",
  178. editing: false,
  179. isLiked: null,
  180. createUser: null,
  181. commentList: [], //评论列表
  182. content: "",
  183. voiceShow: false,
  184. isRecording: false,
  185. answerUserId: null,
  186. answerId: null,
  187. textareaFocus: false,
  188. myId: uni.getStorageSync("weapp_session_userInfo_data").accountId,
  189. startTime: "",
  190. watchAllCommit: false, // 查看全部评论
  191. alltimeStr: "00:00",
  192. audioPlay: false, //当前的播放状态控制
  193. sliderValue: 0, //进度条最小值
  194. end: false,
  195. recordPath: "",
  196. csdFileindex: 0,
  197. biaoqian: "",
  198. biaoqianyaisshow: false,
  199. startFile: '',
  200. num: 0, //上拉 转写文件下标
  201. Bnum: 0, //下拉 转写文件下标
  202. pageInfo: {}, // 当前转写页面的值
  203. ACTION: Symbol('zaudio'), // 唯一值区分每个页面的方法
  204. isPageHide: false, // 是否息屏
  205. duration: '',
  206. };
  207. },
  208. computed: {
  209. // 通过时间戳筛选找到需要展示的加精标签
  210. refinement() {
  211. return timestamp => {
  212. if (this.pageInfo.zatd instanceof Array) {
  213. return this.pageInfo.zatd.findIndex(item => (item.startTime == timestamp.bg && item.jjTransfer == timestamp.onebest)) != -1
  214. } else {
  215. return false
  216. }
  217. }
  218. }
  219. },
  220. onLoad(options) {
  221. this.startTime = options.startTime
  222. this.customerId = options.customerId;
  223. this.biaoqian = options.biaoqian;
  224. this.startFile = options.startFile;
  225. this.getdianzan()
  226. this.getCommentList();
  227. //注意: 不同的回调方法, 相同的业务函数方法名, 不会相互影响;
  228. this.$zaudio.on('stop', this.ACTION, () => {
  229. console.log('我是强制暂停或关闭小程序音频浮窗触发的')
  230. })
  231. this.$zaudio.on('seek', this.ACTION, (time) => {
  232. this.sliderChangeComplate(this.TIMEEVENT(time))
  233. })
  234. this.$zaudio.on('playing', this.ACTION, (obj) => {
  235. this.duration = obj.duration
  236. this.TimeUpdate(this.TIMEEVENT(obj.current))
  237. })
  238. this.$zaudio.on('ended', this.ACTION, e => {
  239. this.qeihuanwenjian()
  240. })
  241. },
  242. onShow() {
  243. //实时渲染当前的播放状态
  244. this.$zaudio.syncRender()
  245. this.initRecord();
  246. !this.isPageHide && this.getluyinList();
  247. },
  248. onHide() {
  249. this.isPageHide = true
  250. },
  251. onUnload() {
  252. //卸载不需要的业务和获取播放状态的业务,提高页面性能
  253. this.$zaudio.off('seek', this.ACTION);
  254. this.$zaudio.off('stop', this.ACTION);
  255. this.$zaudio.off('playing', this.ACTION);
  256. this.$zaudio.off('ended', this.ACTION);
  257. },
  258. methods: {
  259. TimeUpdate(currentTime) {
  260. this.playNow = Number(currentTime)
  261. if (this.dialogList.length == 0) {
  262. return
  263. } else {
  264. const message = this.dialogList[0].message;
  265. if (!message) return
  266. for (let i = 0; i < message.length; i++) {
  267. if ((Math.floor(message[i].bg / 1000) <= this.playNow && this.playNow < Math.floor(message[i].ed /
  268. 1000))) {
  269. this.scrollId = "dialog" + this.csdFileindex + "text" + message[i].bg;
  270. break;
  271. }
  272. if (i < message.length - 1 && Math.floor(message[i].ed / 1000) < this.playNow && this.playNow <
  273. Math.floor(message[i + 1].bg / 1000)) {
  274. this.scrollId = "dialog" + this.csdFileindex + "text" + message[i].bg;
  275. break;
  276. }
  277. }
  278. }
  279. this.$forceUpdate()
  280. },
  281. //下一页
  282. ltolower() {
  283. var lengthcz = this.luyinList.length - 1;
  284. if (this.num >= lengthcz) {
  285. uni.showToast({
  286. title: '到底了',
  287. duration: 2000
  288. });
  289. return
  290. } else {
  291. this.num = this.num + 1;
  292. uni.request({
  293. url: config.service.getCorpusAnalysis + '?corpusId=' + this.luyinList[this.num].id +
  294. "&customerId=" + this.customerId, //仅为示例,并非真实接口地址。
  295. method: "GET",
  296. header: {
  297. 'content-type': 'application/json',
  298. 'Access-Token': uni.getStorageSync('weapp_session_login_data').token
  299. },
  300. success: (data) => {
  301. if (data.data.code == 10000) {
  302. if (data.data.data.audioContent.length == 0) {} else {
  303. const jsonInfo = JSON.parse(data.data.data.audioContent);
  304. this.dialogList.push({
  305. message: jsonInfo
  306. });
  307. this.dialogList.forEach((asd, idx) => {
  308. asd.message.forEach((qwe, inde) => {
  309. qwe.isshow = false;
  310. })
  311. })
  312. }
  313. }
  314. },
  315. })
  316. }
  317. },
  318. //点击标签
  319. dianjibiaoqian() {
  320. if (this.biaoqian.length > 4) {
  321. this.biaoqianyaisshow = !this.biaoqianyaisshow;
  322. }
  323. },
  324. //获取点赞列表isLiked likegetLike
  325. getdianzan() {
  326. uni.request({
  327. url: config.service.likegetLike + '?targetId=' + this.customerId, //仅为示例,并非真实接口地址。
  328. method: "GET",
  329. header: {
  330. 'content-type': 'application/json',
  331. 'Access-Token': uni.getStorageSync('weapp_session_login_data').token
  332. },
  333. success: (data) => {
  334. if (data.data.code == 10000) {
  335. this.isLiked = data.data.data.like;
  336. } else {
  337. uni.hideLoading();
  338. uni.showModal({
  339. title: '提示',
  340. content: '请求数据失败,请重新尝试',
  341. showCancel: false
  342. });
  343. }
  344. },
  345. fail(error) {
  346. uni.hideLoading();
  347. uni.showModal({
  348. title: '提示',
  349. content: '网络异常,请重新尝试',
  350. showCancel: false
  351. });
  352. return false;
  353. }
  354. });
  355. },
  356. // 获取评论列表
  357. getCommentList() {
  358. const that = this;
  359. util.getRequestPromise(config.service.cmmentList + '?targetId=' + this.customerId, {}, false, "GET").then(
  360. data => {
  361. let tmp = data;
  362. tmp.reverse();
  363. that.commentList = tmp;
  364. });
  365. },
  366. // 获取录音记录列表
  367. getluyinList() {
  368. const parames = {
  369. pageNum: 1,
  370. pageSize: 100,
  371. query: {
  372. whetherFinish: 1,
  373. customerId: this.customerId,
  374. id: this.startFile
  375. }
  376. }
  377. this.$u.post("/corpus/fendianFindByPage", parames).then(res => {
  378. if (res && res.length) {
  379. let alltime = 1;
  380. res.forEach(item => {
  381. alltime += item.recordDuration
  382. })
  383. this.alltimeStr = this.getTime(alltime)
  384. res.forEach((cet, index) => {
  385. if (cet.id == this.startFile) {
  386. this.csdFileindex = index;
  387. this.recordPath = res[index].recordPath
  388. this.date = res[index].receptionTime
  389. this.num = index; //下拉起始位置
  390. this.Bnum = index;
  391. this.luyinList = res;
  392. this.zyAudio();
  393. this.getCorpusAnalysis()
  394. var itc = parseInt(this.startTime / 1000)
  395. this.adasdasdasd(itc)
  396. } else {
  397. console.log("my")
  398. }
  399. })
  400. }
  401. })
  402. },
  403. //首次跳转
  404. adasdasdasd(e) {
  405. this.stepPlay(e)
  406. },
  407. //录音文件切换隐藏
  408. showFile() {
  409. this.isshowFile = !this.isshowFile
  410. },
  411. changeVoiceShow() {
  412. this.voiceShow = !this.voiceShow;
  413. },
  414. voiceStart: function() {
  415. manager.start({
  416. lang: "zh_CN"
  417. });
  418. },
  419. voiceEnd: function() {
  420. // uni.showToast();
  421. if (this.isRecording) {
  422. uni.showLoading({
  423. title: "识别中"
  424. })
  425. }
  426. this.voiceShow = false;
  427. this.isRecording = false;
  428. manager.stop();
  429. },
  430. // 语音初始化
  431. initRecord() {
  432. const that = this;
  433. manager.onStart = function(res) {
  434. that.isRecording = true;
  435. };
  436. //有新的识别内容返回,则会调用此事件
  437. manager.onRecognize = (res) => {
  438. console.log('ing' + res.result);
  439. }
  440. // 识别结束事件
  441. manager.onStop = (res) => {
  442. uni.hideLoading();
  443. let newText = that.content + res.result;
  444. if (newText.length > 140) {
  445. newText = newText.substring(0, 140)
  446. }
  447. that.content = newText;
  448. that.textareaFocus = true;
  449. }
  450. // 识别错误事件
  451. manager.onError = (res) => {
  452. uni.hideLoading();
  453. }
  454. },
  455. //音频前进回退
  456. sliderChangeComplate(currentTime) {},
  457. // 获取转义后的对话结果
  458. getCorpusAnalysis() {
  459. this.dialogList = [];
  460. uni.request({
  461. url: config.service.getCorpusAnalysis + '?corpusId=' + this.luyinList[this.csdFileindex].id +
  462. "&customerId=" + this.customerId, //仅为示例,并非真实接口地址。
  463. method: "GET",
  464. header: {
  465. 'content-type': 'application/json',
  466. 'Access-Token': uni.getStorageSync('weapp_session_login_data').token
  467. },
  468. success: (data) => {
  469. if (data.data.code == 10000) {
  470. this.pageInfo = data.data.data
  471. const jsonInfo = JSON.parse(data.data.data.audioContent);
  472. this.dialogList.push({
  473. message: jsonInfo
  474. });
  475. setTimeout(function() {
  476. uni.hideLoading();
  477. }, 2000);
  478. } else {}
  479. },
  480. fail(error) {
  481. return false;
  482. }
  483. });
  484. },
  485. getTime(time) {
  486. return util.formatSecond(time)
  487. },
  488. // 文件切换播放
  489. filechange(item, i) {
  490. this.num = i; //下拉起始位置
  491. this.Bnum = i;
  492. this.csdFileindex = i;
  493. this.recordPath = item.recordPath;
  494. this.date = item.receptionTime;
  495. this.isshowFile = false;
  496. setTimeout(() => {
  497. this.$zaudio.operate(i)
  498. }, 50)
  499. this.getCorpusAnalysis()
  500. },
  501. // 自动播放下一个文件
  502. qeihuanwenjian() {
  503. let index = this.csdFileindex + 1;
  504. if (index < this.luyinList.length) {
  505. this.csdFileindex = index;
  506. this.getCorpusAnalysis()
  507. let item = this.luyinList[this.csdFileindex];
  508. let i = this.csdFileindex;
  509. this.filechange(item, i)
  510. }
  511. },
  512. formatTime(num) {
  513. //格式化时间格式
  514. num = num.toFixed(0);
  515. let second = num % 60;
  516. if (second < 10) second = '0' + second;
  517. let min = Math.floor(num / 60);
  518. if (min < 10) min = '0' + min;
  519. return min + ":" + second;
  520. },
  521. changeContent(e) {
  522. this.content = e.detail.value;
  523. },
  524. answer(userId, tid) {
  525. this.answerId = tid;
  526. this.answerUserId = userId;
  527. this.editing = true;
  528. this.textareaFocus = true;
  529. },
  530. // 保存评论
  531. sendComment() {
  532. if (this.content == "") {
  533. uni.showToast({
  534. icon: "none",
  535. title: "请输入标题"
  536. })
  537. return;
  538. }
  539. let parames = {
  540. targetId: this.customerId,
  541. content: this.content,
  542. commentType: 1
  543. };
  544. if (this.answerUserId) {
  545. parames.replyCommentId = this.answerId;
  546. parames.replyUser = this.answerUserId;
  547. }
  548. const that = this;
  549. util.getRequestPromise(config.service.saveCmment, parames, false).then(data => {
  550. that.getCommentList();
  551. uni.showToast({
  552. title: "评论成功",
  553. icon: "none"
  554. })
  555. that.textareaFocus = false;
  556. that.content = "";
  557. });
  558. },
  559. uploadImage() {
  560. const that = this;
  561. var parames = {
  562. targetId: that.id,
  563. commentType: 1
  564. };
  565. if (this.answerUserId) {
  566. parames.replyCommentId = this.answerId;
  567. parames.replyUser = this.answerUserId;
  568. }
  569. uni.chooseImage({
  570. count: 1, //默认9
  571. sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
  572. sourceType: ['album', 'camera'],
  573. success: function(res) {
  574. uni.showLoading({
  575. title: "上传中"
  576. })
  577. uni.uploadFile({
  578. url: config.service.saveCmmentUpload,
  579. filePath: res.tempFilePaths[0],
  580. name: 'file',
  581. header: {
  582. "Access-Token": uni.getStorageSync('weapp_session_login_data').token
  583. },
  584. formData: parames,
  585. success: (uploadFileRes) => {
  586. that.getCommentList();
  587. uni.hideLoading();
  588. uni.showToast({
  589. icon: "none",
  590. title: "上传成功"
  591. })
  592. console.log(uploadFileRes.data);
  593. }
  594. });
  595. }
  596. });
  597. },
  598. uploadAudio() {
  599. },
  600. changeLike() {
  601. uni.showLoading({
  602. title: "请求中",
  603. mask: true
  604. })
  605. if (this.isLiked) {
  606. this.cancelLike();
  607. } else {
  608. this.saveLike();
  609. }
  610. },
  611. // 点赞
  612. saveLike() {
  613. const that = this;
  614. util.getRequestPromise(config.service.saveLike, {
  615. targetId: this.customerId
  616. }, false).then(data => {
  617. that.isLiked = true;
  618. uni.hideLoading();
  619. uni.showToast({
  620. icon: "none",
  621. title: "点赞成功"
  622. })
  623. });
  624. },
  625. // 取消点赞
  626. cancelLike() {
  627. const that = this;
  628. util.getRequestPromise(config.service.cancelLike, {
  629. targetId: this.customerId
  630. }, false).then(data => {
  631. that.isLiked = false;
  632. uni.hideLoading();
  633. uni.showToast({
  634. icon: "none",
  635. title: "取消点赞成功"
  636. })
  637. });
  638. },
  639. gotoChat() {
  640. this.watchAllCommit = true
  641. },
  642. gotoTop() {
  643. this.scrollId = null;
  644. this.$nextTick(() => {
  645. this.scrollId = "top";
  646. })
  647. },
  648. changeEditing(type) {
  649. this.editing = type;
  650. this.answerId = null;
  651. this.answerUserId = null;
  652. this.textareaFocus = false;
  653. this.dialogList.forEach(res => {
  654. res.message.forEach(asd => {
  655. asd.isshow = false;
  656. })
  657. })
  658. },
  659. //录音实例
  660. zyAudio() {
  661. let data = this.luyinList.map((item, index) => {
  662. return {
  663. src: item.recordPath,
  664. title: `录音文件${index + 1}`,
  665. singer: '',
  666. coverImgUrl: ''
  667. }
  668. })
  669. this.$zaudio.setAudio(data)
  670. //渲染第一首音频
  671. this.$zaudio.setRender(0)
  672. if (this.startTime) {
  673. setTimeout(() => {
  674. this.stepPlay(parseInt(this.startTime / 1000))
  675. })
  676. }
  677. },
  678. // 跳转指定位置播放
  679. stepPlay(t) {
  680. console.log(t)
  681. this.$zaudio.seek(t)
  682. if (this.$zaudio.paused) {
  683. this.$zaudio.operate()
  684. }
  685. },
  686. }
  687. };
  688. </script>
  689. <style lang="scss" scoped>
  690. .audio-container {
  691. width: 100%;
  692. display: flex;
  693. justify-content: space-between;
  694. align-items: center;
  695. .audio-head {
  696. width: 60rpx;
  697. height: 60rpx;
  698. flex-shrink: 0;
  699. }
  700. .audio-head .image {
  701. width: 100%;
  702. height: 100%;
  703. }
  704. .audio-slider {
  705. width: 96%;
  706. position: relative;
  707. padding: 2px 0rpx 0px 20px;
  708. display: flex;
  709. justify-content: space-between;
  710. align-items: center;
  711. }
  712. .audio-slider .slider {
  713. width: 100%;
  714. padding: 0px 15rpx;
  715. box-sizing: border-box;
  716. }
  717. .audio-time {
  718. width: 110rpx;
  719. text-align: right;
  720. font-size: 24rpx;
  721. line-height: 28rpx;
  722. color: #70798D;
  723. display: flex;
  724. justify-content: space-between;
  725. }
  726. .audio-play {
  727. width: 40rpx;
  728. height: 40rpx;
  729. flex-shrink: 0;
  730. }
  731. .audio-play .image {
  732. width: 100%;
  733. height: 100%;
  734. }
  735. }
  736. .tags {
  737. max-width: 85rpx;
  738. height: 38rpx;
  739. font-size: 24rpx;
  740. color: #333333;
  741. text-align: center;
  742. line-height: 38rpx;
  743. border-radius: 2rpx;
  744. border: 1px solid #979797;
  745. }
  746. .tags-t {
  747. max-width: 171rpx;
  748. height: 38rpx;
  749. background: #008EF2;
  750. border-radius: 2rpx;
  751. display: flex;
  752. align-items: center;
  753. margin-left: 10rpx;
  754. .tags-t-c {
  755. width: 126rpx;
  756. height: 38rpx;
  757. line-height: 38rpx;
  758. font-size: 24rpx;
  759. color: #FFFFFF;
  760. text-align: center;
  761. overflow: hidden;
  762. .tipsss {
  763. width: 37rpx;
  764. height: 37rpx;
  765. line-height: 37rpx;
  766. }
  767. }
  768. }
  769. .biaoqiantom {
  770. background-color: #008EF2;
  771. color: #FFFFFF;
  772. border: none;
  773. }
  774. // 表单
  775. .tian-view {
  776. width: 570upx;
  777. background-color: #FFFFFF;
  778. border-bottom: 1px solid #ededee;
  779. display: flex;
  780. min-height: 96rpx;
  781. .tian-view-t1 {
  782. width: 20rpx;
  783. font-size: 34rpx;
  784. height: 34rpx;
  785. line-height: 110rpx;
  786. letter-spacing: 0px;
  787. color: red;
  788. }
  789. .tian-view-t2 {
  790. width: 30%;
  791. min-height: 96rpx;
  792. line-height: 96rpx;
  793. font-size: 34rpx;
  794. color: #333;
  795. }
  796. .tian-view-t3 {
  797. width: 61%;
  798. padding-top: 31rpx;
  799. padding-bottom: 31rpx;
  800. display: flex;
  801. .tian-input {
  802. width: 98%;
  803. font-size: 34rpx;
  804. border: none;
  805. }
  806. }
  807. }
  808. .zhezhoa {
  809. position: fixed;
  810. top: 0;
  811. left: 0;
  812. z-index: 999;
  813. width: 100%;
  814. height: 100vh;
  815. opacity: 0.5;
  816. background-color: #666666;
  817. }
  818. .bounced {
  819. width: 570upx;
  820. background: #FFFFFF;
  821. z-index: 1000;
  822. border-radius: 10upx;
  823. position: fixed;
  824. left: 50%;
  825. top: 50%;
  826. transform: translate(-50%, -50%);
  827. /* 50%为自身尺寸的一半 */
  828. .jiajinghuatit {
  829. width: 100%;
  830. height: 68rpx;
  831. font-size: 30rpx;
  832. text-align: center;
  833. line-height: 68rpx;
  834. }
  835. .jiajinghuaview {
  836. padding: 18rpx 18rpx 18rpx 18rpx;
  837. display: flex;
  838. flex-wrap: wrap;
  839. .jiajinghuaview1 {
  840. padding: 8rpx 8rpx 8rpx 8rpx;
  841. font-size: 26rpx;
  842. border-radius: 12rpx;
  843. border: 1px solid #979797;
  844. margin-left: 8rpx;
  845. }
  846. .jighuaview2 {
  847. padding: 8rpx 8rpx 8rpx 8rpx;
  848. font-size: 26rpx;
  849. border-radius: 12rpx;
  850. border: 1px solid #979797;
  851. margin-left: 8rpx;
  852. display: flex;
  853. .view1-text {
  854. text-align: center;
  855. // border-right: 1rpx solid red;
  856. }
  857. .view1-img {
  858. width: 50rpx;
  859. }
  860. }
  861. }
  862. .bounced3 {
  863. height: 100upx;
  864. width: 100%;
  865. margin-top: 40upx;
  866. border-top: 1px solid #dddddd;
  867. display: flex;
  868. }
  869. .bounced3-1 {
  870. width: 50%;
  871. height: 100%;
  872. text-align: center;
  873. line-height: 100upx;
  874. border-right: 1px solid #dddddd;
  875. font-size: 36upx;
  876. color: #999999;
  877. }
  878. .bounced3-2 {
  879. width: 50%;
  880. height: 100%;
  881. text-align: center;
  882. line-height: 100upx;
  883. font-size: 36upx;
  884. color: #108ee9;
  885. }
  886. }
  887. .bosdttom {
  888. color: #008EF2;
  889. }
  890. .tab-box {
  891. width: 100%;
  892. display: flex;
  893. justify-content: center;
  894. align-items: center;
  895. .yinpinshibie {
  896. width: 156rpx;
  897. height: 50rpx;
  898. font-size: 36rpx;
  899. font-weight: 400;
  900. color: #333333;
  901. text-align: center;
  902. line-height: 50rpx;
  903. letter-spacing: 2rpx;
  904. margin-right: 188rpx;
  905. &.active {
  906. position: relative;
  907. &::after {
  908. position: absolute;
  909. content: '';
  910. width: 119rpx;
  911. height: 8rpx;
  912. background: #008EF2;
  913. border-radius: 4rpx;
  914. top: 50rpx;
  915. right: 0;
  916. left: 0;
  917. margin: 0 auto;
  918. }
  919. }
  920. }
  921. .rate {
  922. width: 156rpx;
  923. height: 50rpx;
  924. font-size: 36rpx;
  925. font-weight: 400;
  926. color: #333333;
  927. line-height: 50rpx;
  928. letter-spacing: 2rpx;
  929. text-align: center;
  930. &.active {
  931. position: relative;
  932. &::after {
  933. position: absolute;
  934. content: '';
  935. width: 119rpx;
  936. height: 8rpx;
  937. background: #008EF2;
  938. border-radius: 4rpx;
  939. top: 50rpx;
  940. right: 0;
  941. left: 0;
  942. margin: 0 auto;
  943. }
  944. }
  945. }
  946. }
  947. .dialog-block {
  948. margin: 20rpx 0;
  949. border-bottom: 1px solid #ccc;
  950. .fileName {
  951. text-align: center;
  952. margin: 10rpx auto;
  953. width: 115rpx;
  954. height: 42rpx;
  955. line-height: 42rpx;
  956. background: #EFEFEF;
  957. border-radius: 4rpx;
  958. font-size: 20rpx;
  959. font-weight: 400;
  960. color: #333333;
  961. }
  962. }
  963. // 评分
  964. .rate-box {
  965. padding: 10rpx 20rpx;
  966. .date {
  967. width: 300rpx;
  968. height: 33rpx;
  969. font-size: 24rpx;
  970. font-weight: 400;
  971. color: #333333;
  972. line-height: 33rpx;
  973. letter-spacing: 1rpx;
  974. margin-bottom: 8rpx;
  975. }
  976. .title {
  977. width: 100%;
  978. height: 42rpx;
  979. font-size: 30rpx;
  980. font-weight: 500;
  981. color: #333333;
  982. line-height: 42rpx;
  983. letter-spacing: 2rpx;
  984. margin-bottom: 20rpx;
  985. }
  986. .level1 {
  987. display: flex;
  988. align-items: center;
  989. .level-name {
  990. width: 104rpx;
  991. height: 33rpx;
  992. font-size: 24rpx;
  993. font-weight: 500;
  994. color: #333333;
  995. line-height: 33rpx;
  996. letter-spacing: 1rpx;
  997. margin-right: 10rpx;
  998. }
  999. .level-progress {
  1000. flex: 1;
  1001. border-radius: 11rpx;
  1002. height: 21rpx;
  1003. background-color: #BEE4FF;
  1004. position: relative;
  1005. .color {
  1006. width: 0;
  1007. position: absolute;
  1008. top: 0;
  1009. left: 0;
  1010. height: 21rpx;
  1011. border-radius: 11rpx 0 0 11rpx;
  1012. background-color: #008EF2;
  1013. }
  1014. }
  1015. .level-rate {
  1016. width: 65rpx;
  1017. height: 33rpx;
  1018. font-size: 24rpx;
  1019. font-weight: 500;
  1020. color: #333333;
  1021. line-height: 33rpx;
  1022. letter-spacing: 1rpx;
  1023. margin: 0 20rpx 0 15rpx;
  1024. }
  1025. .arrow {
  1026. width: 37rpx;
  1027. height: 21rpx;
  1028. padding: 5rpx 20rpx;
  1029. }
  1030. .rotatearrow {
  1031. transform: rotate(270deg);
  1032. }
  1033. }
  1034. .level1-subbox {
  1035. display: flex;
  1036. margin-top: 20rpx;
  1037. flex-wrap: wrap;
  1038. .sub-name {
  1039. width: 50%;
  1040. display: flex;
  1041. margin-bottom: 18rpx;
  1042. .subitem-name {
  1043. width: 104rpx;
  1044. height: 33rpx;
  1045. font-size: 24rpx;
  1046. font-weight: 400;
  1047. color: #999999;
  1048. line-height: 33rpx;
  1049. letter-spacing: 1rpx;
  1050. margin-right: 12rpx;
  1051. }
  1052. .checkimg {
  1053. width: 27rpx;
  1054. height: 27rpx;
  1055. }
  1056. }
  1057. }
  1058. }
  1059. .luyin {
  1060. height: 100rpx;
  1061. width: 100%;
  1062. }
  1063. .translation {
  1064. padding-left: 30rpx;
  1065. padding-right: 30rpx;
  1066. background: #FFFFFF;
  1067. display: flex;
  1068. flex-direction: column;
  1069. height: 100vh;
  1070. }
  1071. .translation .top {
  1072. margin: 0 -30upx;
  1073. padding: 0 30upx;
  1074. background: #ffffff;
  1075. border-bottom: 1rpx solid #F2F2F2;
  1076. padding-bottom: 10rpx;
  1077. }
  1078. .translation .top .title {
  1079. display: flex;
  1080. justify-content: space-between;
  1081. .hash {
  1082. color: rgba(21, 144, 233, 1);
  1083. font-size: 24upx;
  1084. }
  1085. }
  1086. .call_record_time {
  1087. height: 44rpx;
  1088. font-size: 28rpx;
  1089. font-weight: 600;
  1090. color: #008EF2;
  1091. line-height: 44rpx;
  1092. }
  1093. .call_record_time_one {
  1094. height: 48rpx;
  1095. font-size: 24rpx;
  1096. font-weight: 500;
  1097. color: #70798d;
  1098. line-height: 48rpx;
  1099. display: flex;
  1100. justify-content: space-between;
  1101. position: relative;
  1102. .diangweitupian {
  1103. width: 46rpx;
  1104. height: 46rpx;
  1105. // border: 1px solid red;
  1106. position: absolute;
  1107. top: 0rpx;
  1108. right: 75rpx;
  1109. }
  1110. .file-change {
  1111. position: absolute;
  1112. top: 50rpx;
  1113. right: 0rpx;
  1114. width: 184rpx;
  1115. background: #FFFFFF;
  1116. box-shadow: 0rpx 0rpx 6rpx 2rpx rgba(230, 230, 230, 0.5);
  1117. border-radius: 4rpx;
  1118. z-index: 99;
  1119. height: auto;
  1120. max-height: 600rpx;
  1121. overflow: auto;
  1122. }
  1123. .file-item {
  1124. width: 184rpx;
  1125. height: 60rpx;
  1126. line-height: 60rpx;
  1127. text-align: center;
  1128. font-size: 30rpx;
  1129. font-weight: 400;
  1130. color: #333333;
  1131. border-bottom: 1rpx solid #E2E2E2;
  1132. }
  1133. .file-item:last-child {
  1134. border: 0
  1135. }
  1136. .fileactive {
  1137. color: #008EF2
  1138. }
  1139. }
  1140. .dingweishiy {
  1141. position: relative;
  1142. .tankuangcss {
  1143. position: absolute;
  1144. bottom: -50rpx;
  1145. left: 0rpx;
  1146. width: 100%;
  1147. // border: 1rpx solid red;
  1148. font-size: 24rpx;
  1149. color: #FFFFFF;
  1150. padding-top: 4rpx;
  1151. padding-bottom: 4rpx;
  1152. display: flex;
  1153. justify-content: center;
  1154. border-radius: 15rpx;
  1155. z-index: 1000;
  1156. }
  1157. .biaoqianya {
  1158. width: 631rpx;
  1159. margin: 0 auto;
  1160. position: absolute;
  1161. bottom: -120rpx;
  1162. left: 0rpx;
  1163. z-index: 2000;
  1164. color: #FFFFFF;
  1165. .biaoqianyaisshow {
  1166. background-image: url(../../../static/images/biaoqianya.png);
  1167. background-size: 100% 100%;
  1168. text-align: left;
  1169. text-indent: 20rpx;
  1170. }
  1171. }
  1172. }
  1173. .scroll-Y {
  1174. font-size: 36upx;
  1175. color: #999999;
  1176. background: #FFFFFF;
  1177. margin-top: 30upx;
  1178. flex: 1;
  1179. overflow-y: scroll;
  1180. width: 100%;
  1181. }
  1182. .scroll-Y .text {
  1183. margin: 80upx 30upx;
  1184. line-height: 80upx;
  1185. display: flex;
  1186. align-items: center;
  1187. }
  1188. .scroll-Y .text[data-speaker="2"],
  1189. .scroll-Y .text[data-speaker="4"],
  1190. .scroll-Y .text[data-speaker="6"] {
  1191. flex-direction: row-reverse;
  1192. text-align: right;
  1193. .content {
  1194. margin-left: 0;
  1195. margin-right: 30upx;
  1196. background: #F6F6F6;
  1197. color: #999999;
  1198. }
  1199. }
  1200. .scroll-Y .text .avatar {
  1201. width: 64upx;
  1202. height: 64upx;
  1203. line-height: 64upx;
  1204. text-align: center;
  1205. // border: 1rpx solid red;
  1206. font-size: 36rpx;
  1207. border-radius: 50%;
  1208. background: #F2F2F2;
  1209. color: #008EF2;
  1210. // display: flex;
  1211. // justify-content: center;
  1212. // align-items: center;
  1213. // image {
  1214. // width: 40upx;
  1215. // }
  1216. }
  1217. .scroll-Y .text .content {
  1218. margin-left: 30upx;
  1219. line-height: 60rpx;
  1220. text-align: left;
  1221. padding: 0 5px;
  1222. background: #2BC805;
  1223. border-radius: 8upx;
  1224. max-width: 442rpx;
  1225. color: #FFFFFF;
  1226. }
  1227. .scroll-Y .text.active .content {
  1228. color: #38FFF1 !important;
  1229. position: relative;
  1230. }
  1231. .scroll-Y .text.active[data-speaker="2"] .content,
  1232. .scroll-Y .text.active[data-speaker="4"] .content,
  1233. .scroll-Y .text.active[data-speaker="6"] .content {
  1234. color: #FF7538 !important;
  1235. position: relative;
  1236. }
  1237. .likeArea {
  1238. width: 86upx;
  1239. height: 84upx;
  1240. margin: 20upx auto 38upx auto;
  1241. border-radius: 50%;
  1242. display: flex;
  1243. justify-content: center;
  1244. align-items: center;
  1245. border: 1upx solid #C1C2C1;
  1246. &.liked {
  1247. border: 1upx solid rgba(21, 144, 233, 1);
  1248. }
  1249. image {
  1250. width: 38upx;
  1251. height: 39upx;
  1252. }
  1253. }
  1254. .chat {
  1255. display: flex;
  1256. flex-direction: column;
  1257. border-top: 1upx solid rgba(151, 151, 151, 0.4);
  1258. padding-top: 20upx;
  1259. .total {
  1260. color: rgba(21, 144, 233, 1);
  1261. font-size: 24upx;
  1262. }
  1263. .list {
  1264. display: flex;
  1265. flex-direction: column;
  1266. .message {
  1267. display: flex;
  1268. margin-top: 20upx;
  1269. border-bottom: 1upx solid rgba(151, 151, 151, 0.4);
  1270. padding-bottom: 20upx;
  1271. &:last-child {
  1272. border-bottom: 0;
  1273. }
  1274. .avator {
  1275. margin-left: 120upx;
  1276. }
  1277. &:first-child {
  1278. .avator {
  1279. margin-left: 0;
  1280. }
  1281. }
  1282. .right {
  1283. display: flex;
  1284. flex-direction: column;
  1285. margin-left: 20upx;
  1286. flex: 1;
  1287. .name {
  1288. color: rgba(16, 16, 16, 1);
  1289. font-size: 30upx;
  1290. }
  1291. .subtitle {
  1292. color: rgba(120, 120, 120, 1);
  1293. font-size: 24upx;
  1294. margin-top: 16upx;
  1295. }
  1296. .answer {
  1297. font-size: 24upx;
  1298. color: #787878;
  1299. }
  1300. .content {
  1301. color: rgba(49, 48, 48, 1);
  1302. font-size: 30upx;
  1303. margin-top: 20upx;
  1304. position: relative;
  1305. }
  1306. .bottom {
  1307. margin-top: 16upx;
  1308. display: flex;
  1309. justify-content: space-between;
  1310. .time {
  1311. color: rgba(185, 185, 185, 1);
  1312. font-size: 20upx;
  1313. }
  1314. .button {
  1315. color: rgba(144, 144, 144, 1);
  1316. font-size: 30upx;
  1317. width: 111upx;
  1318. height: 44upx;
  1319. border-radius: 22upx;
  1320. border: 1upx solid rgba(151, 151, 151, 1);
  1321. text-align: center;
  1322. }
  1323. }
  1324. }
  1325. }
  1326. }
  1327. }
  1328. .bottomArea {
  1329. min-height: 90upx;
  1330. background: #F0F2F5;
  1331. width: 100vw;
  1332. margin: 0 -30rpx;
  1333. display: flex;
  1334. align-items: center;
  1335. border-top: 1upx solid rgba(151, 151, 151, 0.25);
  1336. .voice {
  1337. width: 44upx;
  1338. height: 44upx;
  1339. margin-left: 38upx;
  1340. }
  1341. .inputArea {
  1342. margin-left: 38upx;
  1343. margin-right: 38upx;
  1344. flex: 1;
  1345. display: flex;
  1346. position: relative;
  1347. .edit {
  1348. width: 30upx;
  1349. height: 28upx;
  1350. position: absolute;
  1351. top: 31upx;
  1352. left: 27upx;
  1353. }
  1354. .editor {
  1355. background: rgba(0, 139, 245, 0.17);
  1356. border-radius: 29upx;
  1357. flex: 1;
  1358. min-height: 58upx;
  1359. width: unset;
  1360. padding: 0 32upx;
  1361. font-size: 30upx;
  1362. margin: 16rpx 0;
  1363. line-height: 29px;
  1364. }
  1365. .placeholder {
  1366. position: absolute;
  1367. left: 70rpx;
  1368. top: 22rpx;
  1369. color: #26A2FF;
  1370. &.editing {
  1371. left: 36rpx;
  1372. }
  1373. }
  1374. }
  1375. .download {
  1376. width: 41upx;
  1377. height: 35upx;
  1378. margin-right: 36upx;
  1379. }
  1380. .like {
  1381. width: 38upx;
  1382. height: 39upx;
  1383. margin-right: 38upx;
  1384. }
  1385. .add {
  1386. width: 50upx;
  1387. height: 50upx;
  1388. margin-right: 38upx;
  1389. }
  1390. .send {
  1391. background: #1590e9;
  1392. color: white;
  1393. padding: 10rpx 20rpx;
  1394. margin: 5px;
  1395. border-radius: 8rpx;
  1396. }
  1397. }
  1398. .backTop {
  1399. width: 60upx;
  1400. height: 60upx;
  1401. background: rgba(211, 235, 253, 1);
  1402. box-shadow: 0upx 0upx 2upx 4upx rgba(38, 161, 255, 0.04);
  1403. border-radius: 50%;
  1404. position: fixed;
  1405. bottom: 200upx;
  1406. right: 8upx;
  1407. display: flex;
  1408. justify-content: center;
  1409. align-items: center;
  1410. image {
  1411. width: 26upx;
  1412. height: 34upx;
  1413. }
  1414. }
  1415. .voiceContent {
  1416. position: fixed;
  1417. top: 0;
  1418. bottom: 0;
  1419. left: 0;
  1420. right: 0;
  1421. width: 100vw;
  1422. height: 100vh;
  1423. display: flex;
  1424. justify-content: center;
  1425. align-items: center;
  1426. background: rgba(30, 30, 30, 0.4592);
  1427. z-index: 10001;
  1428. }
  1429. .box {
  1430. background: rgba(21, 144, 233, 0.299);
  1431. width: 524upx;
  1432. height: 524upx;
  1433. border-radius: 50%;
  1434. display: flex;
  1435. align-items: center;
  1436. justify-content: center;
  1437. .center {
  1438. width: 412upx;
  1439. height: 412upx;
  1440. background: #1590E9;
  1441. border-radius: 50%;
  1442. display: flex;
  1443. align-items: center;
  1444. justify-content: center;
  1445. flex-direction: column;
  1446. .voice {
  1447. width: 110upx;
  1448. height: 133upx;
  1449. }
  1450. .text {
  1451. color: #FFFFFF;
  1452. font-size: 36upx;
  1453. margin-top: 24upx;
  1454. }
  1455. }
  1456. }
  1457. </style>