|
|
@@ -0,0 +1,712 @@
|
|
|
+<template>
|
|
|
+ <div
|
|
|
+ v-if="height"
|
|
|
+ class="Module"
|
|
|
+ :style="{
|
|
|
+ height: height,
|
|
|
+ maxHeight: height,
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <div class="module-inner">
|
|
|
+ <div class="top" v-if="data">
|
|
|
+ <div class="operation">
|
|
|
+ <div>
|
|
|
+ <img
|
|
|
+ style="margin-right: 8px"
|
|
|
+ src="../../assets/Left-16-normal-Black.png"
|
|
|
+ alt=""
|
|
|
+ @click="lastDetail"
|
|
|
+ v-if="!notshowNext"
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ src="../../assets/Right-16-normal-Black.png"
|
|
|
+ alt=""
|
|
|
+ @click="nextDetail"
|
|
|
+ v-if="!notshowNext"
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ @click="closeWordShow"
|
|
|
+ src="../../assets/Cross-16-normal-Black.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="wordDetail">
|
|
|
+ <p class="word">{{ data.new_word }}</p>
|
|
|
+ <div class="yinpin" v-if="data.pinyin">
|
|
|
+ <span> /{{ data.pinyin }}/</span>
|
|
|
+ <img
|
|
|
+ @click="palyAudio('deafult')"
|
|
|
+ :src="playBtn == 'deafult' ? voicePlaySrc : voicePauseSrc"
|
|
|
+ alt=""
|
|
|
+ v-if="
|
|
|
+ data.mp3_list &&
|
|
|
+ data.mp3_list.length > 0 &&
|
|
|
+ playWord == 'deafult' &&
|
|
|
+ voiceSrc
|
|
|
+ "
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ @click="palyAudio('deafult')"
|
|
|
+ :src="voicePauseSrc"
|
|
|
+ alt=""
|
|
|
+ v-else-if="data.mp3_list && data.mp3_list.length > 0"
|
|
|
+ />
|
|
|
+ <audio
|
|
|
+ v-if="data.mp3_list && data.mp3_list.length > 0"
|
|
|
+ id="deafult"
|
|
|
+ :src="data.mp3_list[0].id"
|
|
|
+ ></audio>
|
|
|
+ </div>
|
|
|
+ <p class="jieshu" v-for="(fy, i) in data.definition_list" :key="i">
|
|
|
+ <template v-if="fy.indexOf('. ') > -1">
|
|
|
+ <i>{{ fy.substring(0, fy.indexOf(". ") + 2) }}</i>
|
|
|
+ <span
|
|
|
+ >{{ fy.substring(fy.indexOf(". ") + 2, fy.length)
|
|
|
+ }}{{
|
|
|
+ i == data.definition_list.length - 1 ? "" : "；"
|
|
|
+ }}</span
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <span>{{
|
|
|
+ i == data.definition_list.length - 1 ? fy : fy + "；"
|
|
|
+ }}</span>
|
|
|
+ </template>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <div class="zhedie">
|
|
|
+ <div v-if="list1 && list1.length > 0">
|
|
|
+ <div class="topTitle">
|
|
|
+ <span>本课例句（{{list1.length}}）</span>
|
|
|
+ <span @click="handleChangeTab('wordShow')"
|
|
|
+ >{{ wordShow ? "收起" : "展开" }}
|
|
|
+ <img
|
|
|
+ v-if="wordShow"
|
|
|
+ src="../../assets/down-black.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ v-else
|
|
|
+ class="rotate"
|
|
|
+ src="../../assets/up-black.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <el-collapse-transition>
|
|
|
+ <div class="liju" v-if="wordShow">
|
|
|
+ <div v-for="(item, i) in list1" :key="i">
|
|
|
+ <div>{{ i + 1 }}.</div>
|
|
|
+ <div style="flex: 1">
|
|
|
+ <p v-html="item.res">
|
|
|
+ </p>
|
|
|
+ <p class="p2">
|
|
|
+ 来源：{{ item.source_courseware_name_path }}
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-collapse-transition>
|
|
|
+ </div>
|
|
|
+ <div v-if="list2 && list2.length > 0">
|
|
|
+ <div class="topTitle">
|
|
|
+ <span>本书例句（{{list2.length}}）</span>
|
|
|
+ <span @click="handleChangeTab('wordShow2')"
|
|
|
+ >{{ wordShow2 ? "收起" : "展开" }}
|
|
|
+ <img
|
|
|
+ v-if="wordShow2"
|
|
|
+ src="../../assets/down-black.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ v-else
|
|
|
+ class="rotate"
|
|
|
+ src="../../assets/up-black.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <el-collapse-transition>
|
|
|
+ <div class="liju" v-if="wordShow2">
|
|
|
+ <div v-for="(item, i) in list2" :key="i">
|
|
|
+ <div>{{ i + 1 }}.</div>
|
|
|
+ <div style="flex: 1">
|
|
|
+ <p v-html="item.res">
|
|
|
+ <p class="p2">
|
|
|
+ 来源：{{ item.source_courseware_name_path }}
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-collapse-transition>
|
|
|
+ </div>
|
|
|
+ <div v-if="list3 && list3.length > 0">
|
|
|
+ <div class="topTitle">
|
|
|
+ <span>本套教材例句（{{list3.length}}）</span>
|
|
|
+ <span @click="handleChangeTab('wordShow3')"
|
|
|
+ >{{ wordShow3 ? "收起" : "展开" }}
|
|
|
+ <img
|
|
|
+ v-if="wordShow3"
|
|
|
+ src="../../assets/down-black.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ v-else
|
|
|
+ class="rotate"
|
|
|
+ src="../../assets/up-black.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <el-collapse-transition>
|
|
|
+ <div class="liju" v-if="wordShow3">
|
|
|
+ <div v-for="(item, i) in list3" :key="i">
|
|
|
+ <div>{{ list3.length + i + 1 }}.</div>
|
|
|
+ <div style="flex: 1">
|
|
|
+ <p v-html="item.res">
|
|
|
+ <p class="p2">
|
|
|
+ 来源：{{ item.source_courseware_name_path }}
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-collapse-transition>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="bottom" v-if="data && data.endata">
|
|
|
+ <div class="from">
|
|
|
+ 来自网易有道<img
|
|
|
+ @click="closeWordShow"
|
|
|
+ src="../../assets/Cross-16-normal-Black.png"
|
|
|
+ alt=""
|
|
|
+ v-if="!data"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="wordDetail">
|
|
|
+ <p class="word">
|
|
|
+ {{
|
|
|
+ data.endata && data.endata["query"]
|
|
|
+ ? data.endata["query"]
|
|
|
+ : data.new_word
|
|
|
+ }}
|
|
|
+ </p>
|
|
|
+ <div class="yinpin">
|
|
|
+ <div class="yinpin-box">
|
|
|
+ <span>英 </span>
|
|
|
+ <span v-if='data.endata["uk-phonetic"]'> /{{ data.endata["uk-phonetic"] }}/</span>
|
|
|
+ <img
|
|
|
+ @click="palyAudio('Y')"
|
|
|
+ :src="playBtn == 'Y' ? voicePlaySrc : voicePauseSrc"
|
|
|
+ alt=""
|
|
|
+ v-if="
|
|
|
+ data.endata &&
|
|
|
+ data.endata['uk-sound'] &&
|
|
|
+ playWord == 'Y' &&
|
|
|
+ voiceSrc
|
|
|
+ "
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ @click="palyAudio('Y')"
|
|
|
+ :src="voicePauseSrc"
|
|
|
+ alt=""
|
|
|
+ v-else-if="data.endata && data.endata['uk-sound']"
|
|
|
+ />
|
|
|
+ <audio id="Y" :src="data.endata['uk-sound']"></audio>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span>美 </span>
|
|
|
+ <span v-if='data.endata["us-phonetic"]'> /{{ data.endata["us-phonetic"] }}/</span>
|
|
|
+ <img
|
|
|
+ @click="palyAudio('M')"
|
|
|
+ :src="playBtn == 'M' ? voicePlaySrc : voicePauseSrc"
|
|
|
+ alt=""
|
|
|
+ v-if="
|
|
|
+ data.endata &&
|
|
|
+ data.endata['us-sound'] &&
|
|
|
+ playWord == 'M' &&
|
|
|
+ voiceSrc
|
|
|
+ "
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ @click="palyAudio('M')"
|
|
|
+ :src="voicePauseSrc"
|
|
|
+ alt=""
|
|
|
+ v-else-if="data.endata && data.endata['us-sound']"
|
|
|
+ />
|
|
|
+ <audio id="M" :src="data.endata['us-sound']"></audio>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="jieshu" v-for="(fy, i) in data.endata.part" :key="i">
|
|
|
+ <i>
|
|
|
+ {{ fy.part }}
|
|
|
+ </i>
|
|
|
+ <div>
|
|
|
+ {{ fy.exp }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
|
|
|
+//例如：import 《组件名称》from ‘《组件路径》';
|
|
|
+import { LearnWebSI, getContent } from "@/api/ajax";
|
|
|
+export default {
|
|
|
+ //import引入的组件需要注入到对象中才能使用
|
|
|
+ components: {},
|
|
|
+ props: [
|
|
|
+ "data",
|
|
|
+ "curQue",
|
|
|
+ "changeDetailIndex",
|
|
|
+ "closeWord",
|
|
|
+ "detailIndex",
|
|
|
+ "notshowNext",
|
|
|
+ "currentTreeID"
|
|
|
+ ],
|
|
|
+ data() {
|
|
|
+ //这里存放数据
|
|
|
+ return {
|
|
|
+ height: "",
|
|
|
+ margintop: "",
|
|
|
+ wordShow: true,
|
|
|
+ wordShow2: false,
|
|
|
+ wordShow3: false,
|
|
|
+ list1: [],
|
|
|
+ list2: [],
|
|
|
+ list3: [],
|
|
|
+ playWord: "",
|
|
|
+ playBtn: "",
|
|
|
+ voiceSrc: require("../../assets/play-red.png"),
|
|
|
+ voicePauseSrc: require("../../assets/play-red.png"),
|
|
|
+ voicePlaySrc: require("../../assets/icon-voice-play-red.png"),
|
|
|
+ collFlag: false,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ // 计算属性 类似于data概念
|
|
|
+ computed: {},
|
|
|
+ // 监控data中数据变化
|
|
|
+ watch: {},
|
|
|
+ // 方法集合
|
|
|
+ methods: {
|
|
|
+ palyAudio(new_word) {
|
|
|
+ let node = document.getElementById(new_word);
|
|
|
+ this.playWord = new_word;
|
|
|
+ if (node) {
|
|
|
+ node.play();
|
|
|
+ this.voiceSrc = this.voicePlaySrc;
|
|
|
+ this.playBtn = new_word;
|
|
|
+ }
|
|
|
+ this.handleListenPlay();
|
|
|
+ },
|
|
|
+ handleListenPlay() {
|
|
|
+ let _this = this;
|
|
|
+
|
|
|
+ if (_this.playWord) {
|
|
|
+ let node = document.getElementById(_this.playWord);
|
|
|
+ node.addEventListener("play", function () {});
|
|
|
+ node.addEventListener("pause", function () {
|
|
|
+ _this.playBtn = "";
|
|
|
+ });
|
|
|
+ node.addEventListener("ended", function () {
|
|
|
+ _this.playBtn = "";
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 关闭单词详情
|
|
|
+ closeWordShow() {
|
|
|
+ this.closeWord(false);
|
|
|
+ },
|
|
|
+ // 上一个单词详情
|
|
|
+ lastDetail() {
|
|
|
+ if (this.detailIndex == 0) {
|
|
|
+ this.$message.warning("当前已经是第一个");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.changeDetailIndex("last");
|
|
|
+ },
|
|
|
+ // 下一个单词详情
|
|
|
+ nextDetail() {
|
|
|
+ if (this.detailIndex == this.curQue.option.length - 1) {
|
|
|
+ this.$message.warning("当前已经是最后一个了 ");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.changeDetailIndex("next");
|
|
|
+ },
|
|
|
+ handleChangeTab(flag) {
|
|
|
+ this[flag] = !this[flag];
|
|
|
+ },
|
|
|
+ viewIntp() {
|
|
|
+ this.loading1 = true;
|
|
|
+ this.loading2 = true;
|
|
|
+ this.loading3 = true;
|
|
|
+ let Mname =
|
|
|
+ "book-courseware_manager-GetCoursewareWordExampleSentenceList";
|
|
|
+ // 获取本课的 本教材的 本套的 的例句
|
|
|
+ getContent(Mname, {
|
|
|
+ courseware_id: this.currentTreeID, // 课件id
|
|
|
+ word: this.data.new_word, //生词
|
|
|
+ search_scope: 0, //检索范围0 本课件 1本教材 2本套
|
|
|
+ is_contain_word_variants: false,
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ this.loading1 = false;
|
|
|
+ this.list1 = this.handleExample(res.sentence_list);
|
|
|
+ console.log(this.list1);
|
|
|
+ getContent(Mname, {
|
|
|
+ courseware_id: this.currentTreeID, // 课件id
|
|
|
+ word: this.data.new_word, //生词
|
|
|
+ search_scope: 1, //检索范围0 本课件 1本教材 2本套
|
|
|
+ is_contain_word_variants: false,
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ this.loading2 = false;
|
|
|
+ this.list2 = this.handleExample(res.sentence_list);
|
|
|
+ getContent(Mname, {
|
|
|
+ courseware_id: this.currentTreeID, // 课件id
|
|
|
+ word: this.data.new_word, //生词
|
|
|
+ search_scope: 2, //检索范围0 本课件 1本教材 2本套
|
|
|
+ is_contain_word_variants: false,
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ this.loading3 = false;
|
|
|
+ this.list3 = this.handleExample(res.sentence_list);
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ this.loading3 = false;
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ this.loading2 = false;
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ this.loading1 = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 处理例句高亮数据
|
|
|
+ handleExample(list) {
|
|
|
+ let _this = this;
|
|
|
+ // let list1Ora = JSON.parse(JSON.stringify(_this.data.list1))
|
|
|
+ list = list.map((item,index) =>{
|
|
|
+ let position_str = []
|
|
|
+ let sentence = JSON.parse(JSON.stringify(item.sentence))
|
|
|
+ let res = ""
|
|
|
+ for(let i=0;i<item.position_list.length;i++){
|
|
|
+ let part1 = "";
|
|
|
+ let part2 = "";
|
|
|
+ let part3 = "";
|
|
|
+ if(item.position_list.length>1){
|
|
|
+ if(i==0){
|
|
|
+ part1 = sentence.substring(0, item.position_list[i].begin);
|
|
|
+ part2 = sentence.substring(item.position_list[i].begin,item.position_list[i].end);
|
|
|
+ part3 = sentence.substring(item.position_list[i].end,item.position_list[i+1].begin)
|
|
|
+ }else if(i==item.position_list.length-1){
|
|
|
+ part1 = "";
|
|
|
+ part2 = sentence.substring(item.position_list[i].begin,item.position_list[i].end);
|
|
|
+ part3 = sentence.substring(item.position_list[i].end)
|
|
|
+ }else{
|
|
|
+ part1 = "";
|
|
|
+ part2 = sentence.substring(item.position_list[i].begin,item.position_list[i].end);
|
|
|
+ part3 = sentence.substring(item.position_list[i].end,item.position_list[i+1].begin)
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ part1 = sentence.substring(0, item.position_list[i].begin);
|
|
|
+ part2 = sentence.substring(item.position_list[i].begin,item.position_list[i].end);
|
|
|
+ part3 = sentence.substring(item.position_list[i].end)
|
|
|
+ }
|
|
|
+ res += part1 + '<span style="color:#DE4444;">' + part2 + "</span>" + part3;
|
|
|
+ }
|
|
|
+ item.res = res;
|
|
|
+ return item
|
|
|
+ })
|
|
|
+ return list;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ //生命周期 - 创建完成（可以访问当前this实例）
|
|
|
+ created() {
|
|
|
+ this.viewIntp();
|
|
|
+ },
|
|
|
+ //生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
+ mounted() {
|
|
|
+ let Fathernode = document.getElementsByClassName(
|
|
|
+ "NNPE-Big-Book-preview"
|
|
|
+ )[0];
|
|
|
+ if (Fathernode) {
|
|
|
+ // this.height = Fathernode.clientHeight + "px";
|
|
|
+ this.height = Fathernode.clientHeight + "px";
|
|
|
+ // this.margintop = "-" + window.innerHeight / 2 + "px";
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //生命周期-创建之前
|
|
|
+ beforeCreated() {},
|
|
|
+ //生命周期-挂载之前
|
|
|
+ beforeMount() {},
|
|
|
+ //生命周期-更新之前
|
|
|
+ beforUpdate() {},
|
|
|
+ //生命周期-更新之后
|
|
|
+ updated() {},
|
|
|
+ //生命周期-销毁之前
|
|
|
+ beforeDestory() {},
|
|
|
+ //生命周期-销毁完成
|
|
|
+ destoryed() {},
|
|
|
+ //如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
+ activated() {},
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+/* @import url(); 引入css类 */
|
|
|
+.Module {
|
|
|
+ position: fixed;
|
|
|
+ width: 100%;
|
|
|
+ max-height: 100% !important;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ z-index: 999;
|
|
|
+ background: rgba(0, 0, 0, 0.33);
|
|
|
+ overflow-y: scroll;
|
|
|
+ .module-inner {
|
|
|
+ // position: fixed;
|
|
|
+ // top: 0%;
|
|
|
+ // left: 50%;
|
|
|
+ // margin-left: -394px;
|
|
|
+ width: 788px;
|
|
|
+ margin: 0 auto;
|
|
|
+ > div {
|
|
|
+ width: 788px;
|
|
|
+ margin-left: 36px;
|
|
|
+ background: #ffffff;
|
|
|
+ box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.25);
|
|
|
+ border-radius: 8px;
|
|
|
+ padding-top: 16px;
|
|
|
+ .operation {
|
|
|
+ height: 24px;
|
|
|
+ div {
|
|
|
+ float: right;
|
|
|
+ margin-right: 16px;
|
|
|
+ > :nth-child(1) {
|
|
|
+ margin-right: 16px;
|
|
|
+ }
|
|
|
+ > :nth-child(2) {
|
|
|
+ margin-right: 8px;
|
|
|
+ }
|
|
|
+ > :nth-child(3) {
|
|
|
+ margin-right: 16px;
|
|
|
+ }
|
|
|
+ > :last-child{
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .top {
|
|
|
+ margin-top: 33px;
|
|
|
+ padding-bottom: 42px;
|
|
|
+ .wordDetail {
|
|
|
+ width: 538px;
|
|
|
+ margin-left: 40px;
|
|
|
+ padding-bottom: 23px;
|
|
|
+ p {
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ .word {
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 24px;
|
|
|
+ line-height: 28px;
|
|
|
+ color: #7b61ff;
|
|
|
+ }
|
|
|
+ .yinpin {
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 150%;
|
|
|
+ color: #000000;
|
|
|
+ margin-top: 16px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-start;
|
|
|
+ > div {
|
|
|
+ height: 16px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ img {
|
|
|
+ margin-left: 10px;
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .jieshu {
|
|
|
+ margin-top: 16px;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 150%;
|
|
|
+ color: #000000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .zhedie {
|
|
|
+ width: 708px;
|
|
|
+ margin: 0 auto;
|
|
|
+ > div {
|
|
|
+ margin-bottom: 16px;
|
|
|
+ }
|
|
|
+ .topTitle {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 0 12px;
|
|
|
+ align-items: center;
|
|
|
+ background: #fff !important;
|
|
|
+ height: 40px;
|
|
|
+ background: #fff !important;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ -webkit-box-sizing: border-box;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 8px 8px 0px 0px;
|
|
|
+ > :nth-child(1) {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 150%;
|
|
|
+ color: rgba(0, 0, 0, 0.85);
|
|
|
+ }
|
|
|
+ > :nth-child(2) {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-weight: normal;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 22px;
|
|
|
+ color: rgba(0, 0, 0, 0.85);
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ img {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ margin-left: 4px;
|
|
|
+ }
|
|
|
+ .rotate {
|
|
|
+ animation-name: firstrotate;
|
|
|
+ animation-direction: 2s;
|
|
|
+ animation-fill-mode: both;
|
|
|
+ animation-timing-function: linear;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .liju {
|
|
|
+ padding-bottom: 16px;
|
|
|
+ padding-right: 24px;
|
|
|
+ background: #f7f7f7;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ border-top: none;
|
|
|
+ border-radius: 0 0 4px 4px;
|
|
|
+ > div {
|
|
|
+ padding-top: 16px;
|
|
|
+ margin-left: 8px;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ > :nth-child(1) {
|
|
|
+ margin-right: 6px;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ p {
|
|
|
+ margin: 0;
|
|
|
+ line-height: 24px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: rgba(0, 0, 0, 0.85);
|
|
|
+ word-break: break-word;
|
|
|
+ }
|
|
|
+ .p2 {
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 20px;
|
|
|
+ color: rgba(0, 0, 0, 0.85);
|
|
|
+ opacity: 0.3;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .bottom {
|
|
|
+ margin-top: 16px;
|
|
|
+ padding-bottom: 23px;
|
|
|
+ .from {
|
|
|
+ // text-align: right;
|
|
|
+ margin-right: 16px;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 16px;
|
|
|
+ color: #000000;
|
|
|
+ opacity: 0.2;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ align-items: center;
|
|
|
+ img {
|
|
|
+ width: 16px;
|
|
|
+ margin-left: 16px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .wordDetail {
|
|
|
+ width: 708px;
|
|
|
+ margin-left: 40px;
|
|
|
+ padding-bottom: 23px;
|
|
|
+ border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ p {
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ .word {
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 24px;
|
|
|
+ line-height: 28px;
|
|
|
+ color: #7b61ff;
|
|
|
+ }
|
|
|
+ .yinpin {
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 150%;
|
|
|
+ color: #000000;
|
|
|
+ margin-top: 16px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+ > div {
|
|
|
+ height: 24px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ > :nth-child(1) {
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ > :nth-child(2) {
|
|
|
+ margin-left: 27px;
|
|
|
+ }
|
|
|
+ img {
|
|
|
+ margin-left: 10px;
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .jieshu {
|
|
|
+ margin-top: 16px;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 150%;
|
|
|
+ color: #000000;
|
|
|
+ display: flex;
|
|
|
+ > :nth-child(1) {
|
|
|
+ // width: 30px;
|
|
|
+ // text-align: right;
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+ :nth-child(2) {
|
|
|
+ max-width: 524px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
natasha