natasha преди 3 години
родител
ревизия
d7a061cab5
променени са 2 файла, в които са добавени 463 реда и са изтрити 121 реда
  1. 344 0
      src/components/common/SentenceEn.vue
  2. 119 121
      vue.config.js

+ 344 - 0
src/components/common/SentenceEn.vue

@@ -0,0 +1,344 @@
+<!--  -->
+<template>
+  <div class="sentence">
+    <div class="sent-top">
+      <div class="sent-top-left">
+        <span class="num">{{ index + 1 }}.</span>
+        <template v-if="mp3">
+          <AudioLineSentence
+            :key="'sent' + index"
+            :mp3="mp3"
+            :getCurTime="getCurTime"
+            ref="audioLineSent"
+            :audioId="'artPraAudioId' + index"
+            :stopAudio="stopAudio"
+            :width="120"
+            :hideSlider="true"
+            :bg="bg"
+            :ed="ed"
+          />
+        </template>
+      </div>
+      <div class="cancle-coll" @click="cancleColl">
+        <span class="coll-icon"></span>
+        <span class="coll-text">取消收藏</span>
+      </div>
+    </div>
+    <div class="vc-main" v-if="item">
+      <div class="NNPE-words-box">
+        <div
+          class="NNPE-words"
+          v-for="(pItem, pIndex) in item"
+          :key="'wordsList' + pIndex"
+          :class="[pItem.wordIndex == 0 ? 'textLeft' : 'textCenter']"
+        >
+          <template v-if="pItem.isShow">
+                <template
+                  v-if="
+                    item[pIndex + 1] &&
+                    item[pIndex + 1].en &&
+                    enFhList.indexOf(item[pIndex + 1].en.word_bt) > -1
+                  "
+                >
+                  <span class="NNPE-words-box NNPE-words-box-Both">
+                    <span
+                      :class="[]"
+                    >
+                        <span class="NNPE-words-box">
+                            <span
+                                :class="[pItem.timeList &&
+                                        pItem.timeList[pItem.leg - 1] &&
+                                        curTime >= pItem.timeList[pItem.leg - 1].wordBg &&
+                                        curTime <= ed
+                                        ? 'active'
+                                        : '',]"
+                            >
+                                {{pItem.en.word_bt}}
+                            </span>
+                        </span>
+                      <span
+                        :class="[pItem.timeList[pItem.leg - 1] &&
+                                curTime >= pItem.timeList[pItem.leg - 1].wordBg &&
+                                curTime <= ed
+                                ? 'active'
+                                : '',
+                        ]"
+                        >{{ item[pIndex + 1].en.word_bt }}</span
+                      >
+                    </span>
+                  </span>
+                </template>
+                <template v-else>
+                    <span class="NNPE-words-box NNPE-words-box-single">
+                        <span
+                        :class="[
+                            pItem.padding? 'padding' : '',
+                            pItem.timeList &&
+                            pItem.timeList[pItem.leg - 1] &&
+                            curTime >= pItem.timeList[pItem.leg - 1].wordBg &&
+                            curTime <= ed
+                                ? 'active'
+                                : '',
+                        ]"
+                        >
+                            {{pItem.en.word_bt}}
+                        </span>
+                    </span>
+                </template>
+              </template>
+        </div>
+      </div>
+      <div style="clear: both; overflow: hidden"></div>
+      <div v-if="item.enwords" class="enwords">
+        {{ item.enwords }}
+      </div>
+    </div>
+    <div class="sent-bottom">
+      <span class="create_time">{{ sItem.create_time }}</span>
+      <span class="resource" v-if="sItem.resource"
+        >来自:{{ sItem.resource }}</span
+      >
+    </div>
+  </div>
+</template>
+
+<script>
+import AudioLineSentence from "./AudioLineSentence.vue";
+import { getLearnWebContent } from "@/api/ajax";
+export default {
+  name: "sentence",
+  components: {
+    AudioLineSentence,
+  },
+  props: ["sItem", "index"],
+  data() {
+    return {
+      item: null,
+      bg: 0,
+      ed: 0,
+      mp3: "",
+      stopAudio: false,
+      chsFhList: [",", "。", "“", ":", "》", "《", "?", "!", ";"],
+      enFhList: [",", ".", ";", "?", "!", ":", ">", "<"],
+      noFont: ["~", "!", "@", "#", "$", "%", "^", "&", "*", "(", ")", "/"],
+      NumberList: [
+        "①",
+        "②",
+        "③",
+        "④",
+        "⑤",
+        "⑥",
+        "⑦",
+        "⑧",
+        "⑨",
+        "⑩",
+        "⑪",
+        "⑫",
+        "⑬",
+        "⑭",
+        "⑮",
+        "⑯",
+        "⑰",
+        "⑱",
+        "⑲",
+        "⑳",
+      ],
+      pyPosition: "top",
+      curTime: 0,
+    };
+  },
+  computed: {},
+  watch: {},
+  //方法集合
+  methods: {
+    handleData() {
+      let sentence_json = JSON.parse(this.sItem.sentence.sentence_json);
+      if (sentence_json) {
+        this.item = JSON.parse(sentence_json.item);
+        this.bg = sentence_json.bg;
+        this.ed = sentence_json.ed;
+        this.pyPosition = sentence_json.pyPosition;
+        this.mp3 = sentence_json.mp3;
+      }
+    },
+    getCurTime(curTime) {
+      let _this = this;
+      _this.curTime = curTime * 1000;
+    },
+    pauseAudio() {
+      let audio = document.getElementsByTagName("audio");
+      audio.forEach((item) => {
+        item.pause();
+      });
+    },
+    cancleColl() {
+      let data = {
+        id_list: [this.sItem.id],
+      };
+      let MethodName = "order-collection_manager-DeleteMyCollection";
+      getLearnWebContent(MethodName, data).then((res) => {
+        this.$message.success("取消成功!");
+        this.$emit("getMyCollectionList");
+      });
+    },
+  },
+  //生命周期 - 创建完成(可以访问当前this实例)
+  created() {},
+  //生命周期 - 挂载完成(可以访问DOM元素)
+  mounted() {
+    this.handleData();
+  },
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能,这个函数会触发
+};
+</script>
+<style lang='scss' scoped>
+//@import url(); 引入公共css类
+.sentence {
+  width: 100%;
+  .sent-top {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    margin-bottom: 8px;
+    &-left {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      .num {
+        font-size: 14px;
+        line-height: 22px;
+        color: #000000;
+        min-width: 22px;
+        margin-right: 8px;
+      }
+    }
+    .cancle-coll {
+      float: right;
+      padding: 0 12px;
+      height: 32px;
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      cursor: pointer;
+      border: 1px solid rgba(0, 0, 0, 0.1);
+      box-sizing: border-box;
+      border-radius: 4px;
+
+      > .coll-icon {
+        width: 16px;
+        height: 16px;
+        background: url("../../assets/starfill-16-normal-red.png") no-repeat
+          left top;
+        background-size: 100% 100%;
+        margin-right: 4px;
+      }
+      > .coll-text {
+        font-size: 14px;
+        line-height: 22px;
+        color: #000000;
+      }
+    }
+  }
+  .sent-bottom {
+    > span {
+      font-size: 14px;
+      line-height: 22px;
+      color: #2c2c2c;
+      opacity: 0.5;
+      margin-right: 8px;
+    }
+  }
+}
+.vc-main {
+  width: 100%;
+  margin-bottom: 8px;
+  .enwords {
+    font-size: 12px;
+    line-height: 20px;
+    color: rgba(0, 0, 0, 0.85);
+    font-family: "robot";
+  }
+}
+.NNPE-words {
+  float: left;
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  &-box {
+    float: left;
+    > span {
+      display: block;
+      &.NNPE-pinyin {
+        font-family: "GB-PINYINOK-B";
+        font-weight: normal;
+        font-size: 14px;
+        line-height: 22px;
+        box-sizing: border-box;
+        color: rgba(0, 0, 0, 0.85);
+
+        &.noFont {
+          font-family: initial;
+        }
+        &.textLeft {
+          text-align: left;
+        }
+        &.font-white {
+          color: #fff;
+        }
+        &.wordBlank {
+          color: rgba(0, 0, 0, 0.85);
+        }
+      }
+      &.NNPE-chs {
+        font-family: "FZJCGFKTK";
+        font-size: 20px;
+        line-height: 24px;
+        color: rgba(0, 0, 0, 0.85);
+
+        .font-white {
+          color: #fff;
+        }
+        .active {
+          color: #de4444;
+          &-yellow {
+            color: #ffc600;
+          }
+        }
+
+        .wordActive {
+          color: #de4444;
+        }
+        .wordActive-blue {
+          color: #ffc600;
+        }
+      }
+      // &.padding {
+      //   padding-right: 6px;
+      // }
+    }
+  }
+  &.textLeft {
+    text-align: left;
+  }
+  &.textCenter {
+    text-align: center;
+  }
+  .active {
+    color: #de4444;
+  }
+  > span {
+    display: block;
+    margin-right: 6px;
+    font-size: 18px;
+    color: rgba(0, 0, 0, 0.85);
+  }
+}
+</style>

+ 119 - 121
vue.config.js

@@ -5,7 +5,7 @@ const CompressionPlugin = require('compression-webpack-plugin');
 
 
 function resolve(dir) {
-  return path.join(__dirname, dir)
+    return path.join(__dirname, dir)
 }
 
 const name = defaultSettings.title || '个人中心' // page title
@@ -19,129 +19,127 @@ const port = process.env.port || process.env.npm_config_port || 9528 // dev port
 
 // All configuration item explanations can be find in https://cli.vuejs.org/config/
 module.exports = {
-  /**
-   * You will need to set publicPath if you plan to deploy your site under a sub path,
-   * for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,
-   * then publicPath should be set to "/bar/".
-   * In most cases please use '/' !!!
-   * Detail: https://cli.vuejs.org/config/#publicpath
-   */
-  publicPath: process.env.NODE_ENV === 'development' ? '/' : '/GCLS-Personal',
-  outputDir: 'dist',
-  assetsDir: 'static',
-  lintOnSave: false,
-  productionSourceMap: false,
-  devServer: {
-    port: port,
-    open: true,
-    overlay: {
-      warnings: false,
-      errors: true
-    },
-    proxy: {
-      // change xxx-api/login => mock/login
-      // detail: https://cli.vuejs.org/config/#devserver-proxy
-      [process.env.VUE_APP_BASE_API]: {
-        target: `http://gcls.utschool.cn/`,
-        // target: `http://gcls.helxsoft.cn/`,
-        changeOrigin: true,
-        pathRewrite: {
-          ['^' + process.env.VUE_APP_BASE_API]: ''
-        }
-      }
-    },
-    // after: require('./mock/mock-server.js')
-  },
-  configureWebpack: {
-    // provide the app's title in webpack's name field, so that
-    // it can be accessed in index.html to inject the correct title.
-    name: name,
-    resolve: {
-      alias: {
-        '@': resolve('src')
-      }
+    /**
+     * You will need to set publicPath if you plan to deploy your site under a sub path,
+     * for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,
+     * then publicPath should be set to "/bar/".
+     * In most cases please use '/' !!!
+     * Detail: https://cli.vuejs.org/config/#publicpath
+     */
+    publicPath: process.env.NODE_ENV === 'development' ? '/' : '/GCLS-Personal',
+    outputDir: 'dist',
+    assetsDir: 'static',
+    lintOnSave: false,
+    productionSourceMap: false,
+    devServer: {
+        port: port,
+        open: true,
+        overlay: {
+            warnings: false,
+            errors: true
+        },
+        proxy: {
+            // change xxx-api/login => mock/login
+            // detail: https://cli.vuejs.org/config/#devserver-proxy
+            [process.env.VUE_APP_BASE_API]: {
+                // target: `http://gcls.utschool.cn/`,
+                target: `http://gcls.helxsoft.cn/`,
+                changeOrigin: true,
+                pathRewrite: {
+                    ['^' + process.env.VUE_APP_BASE_API]: ''
+                }
+            }
+        },
+        // after: require('./mock/mock-server.js')
     },
-    plugins: [
+    configureWebpack: {
+        // provide the app's title in webpack's name field, so that
+        // it can be accessed in index.html to inject the correct title.
+        name: name,
+        resolve: {
+            alias: {
+                '@': resolve('src')
+            }
+        },
+        plugins: [
 
-      new CompressionPlugin({
-        algorithm: 'gzip', // 使用gzip压缩
-        test: /\.js$|\.html$|\.css$/, // 匹配文件名
-        minRatio: 0.8, // 压缩率小于0.8才会压缩
-        threshold: 10240, // 对超过10k的数据压缩
-        deleteOriginalAssets: false // 是否删除未压缩的源文件,谨慎设置,如果希望提供非gzip的资源,可不设置或者设置为false(比如删除打包后的gz后还可以加载到原始资源文件)
-      })
-    ]
-  },
-  chainWebpack(config) {
-    // it can improve the speed of the first screen, it is recommended to turn on preload
-    config.plugin('preload').tap(() => [
-      {
-        rel: 'preload',
-        // to ignore runtime.js
-        // https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/config/app.js#L171
-        fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
-        include: 'initial'
-      }
-    ])
-
-    // when there are many pages, it will cause too many meaningless requests
-    config.plugins.delete('prefetch')
+            new CompressionPlugin({
+                algorithm: 'gzip', // 使用gzip压缩
+                test: /\.js$|\.html$|\.css$/, // 匹配文件名
+                minRatio: 0.8, // 压缩率小于0.8才会压缩
+                threshold: 10240, // 对超过10k的数据压缩
+                deleteOriginalAssets: false // 是否删除未压缩的源文件,谨慎设置,如果希望提供非gzip的资源,可不设置或者设置为false(比如删除打包后的gz后还可以加载到原始资源文件)
+            })
+        ]
+    },
+    chainWebpack(config) {
+        // it can improve the speed of the first screen, it is recommended to turn on preload
+        config.plugin('preload').tap(() => [{
+            rel: 'preload',
+            // to ignore runtime.js
+            // https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/config/app.js#L171
+            fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
+            include: 'initial'
+        }])
 
-    // set svg-sprite-loader
-    config.module
-      .rule('svg')
-      .exclude.add(resolve('src/icons'))
-      .end()
-    config.module
-      .rule('icons')
-      .test(/\.svg$/)
-      .include.add(resolve('src/icons'))
-      .end()
-      .use('svg-sprite-loader')
-      .loader('svg-sprite-loader')
-      .options({
-        symbolId: 'icon-[name]'
-      })
-      .end()
+        // when there are many pages, it will cause too many meaningless requests
+        config.plugins.delete('prefetch')
 
-    config
-      .when(process.env.NODE_ENV !== 'development',
-        config => {
-          config
-            .plugin('ScriptExtHtmlWebpackPlugin')
-            .after('html')
-            .use('script-ext-html-webpack-plugin', [{
-              // `runtime` must same as runtimeChunk name. default is `runtime`
-              inline: /runtime\..*\.js$/
-            }])
+        // set svg-sprite-loader
+        config.module
+            .rule('svg')
+            .exclude.add(resolve('src/icons'))
             .end()
-          config
-            .optimization.splitChunks({
-              chunks: 'all',
-              cacheGroups: {
-                libs: {
-                  name: 'chunk-libs',
-                  test: /[\\/]node_modules[\\/]/,
-                  priority: 10,
-                  chunks: 'initial' // only package third parties that are initially dependent
-                },
-                elementUI: {
-                  name: 'chunk-elementUI', // split elementUI into a single package
-                  priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
-                  test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
-                },
-                commons: {
-                  name: 'chunk-commons',
-                  test: resolve('src/components'), // can customize your rules
-                  minChunks: 3, //  minimum common number
-                  priority: 5,
-                  reuseExistingChunk: true
-                }
-              }
+        config.module
+            .rule('icons')
+            .test(/\.svg$/)
+            .include.add(resolve('src/icons'))
+            .end()
+            .use('svg-sprite-loader')
+            .loader('svg-sprite-loader')
+            .options({
+                symbolId: 'icon-[name]'
             })
-          // https:// webpack.js.org/configuration/optimization/#optimizationruntimechunk
-          config.optimization.runtimeChunk('single')
-        }
-      )
-  }
-}
+            .end()
+
+        config
+            .when(process.env.NODE_ENV !== 'development',
+                config => {
+                    config
+                        .plugin('ScriptExtHtmlWebpackPlugin')
+                        .after('html')
+                        .use('script-ext-html-webpack-plugin', [{
+                            // `runtime` must same as runtimeChunk name. default is `runtime`
+                            inline: /runtime\..*\.js$/
+                        }])
+                        .end()
+                    config
+                        .optimization.splitChunks({
+                            chunks: 'all',
+                            cacheGroups: {
+                                libs: {
+                                    name: 'chunk-libs',
+                                    test: /[\\/]node_modules[\\/]/,
+                                    priority: 10,
+                                    chunks: 'initial' // only package third parties that are initially dependent
+                                },
+                                elementUI: {
+                                    name: 'chunk-elementUI', // split elementUI into a single package
+                                    priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
+                                    test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
+                                },
+                                commons: {
+                                    name: 'chunk-commons',
+                                    test: resolve('src/components'), // can customize your rules
+                                    minChunks: 3, //  minimum common number
+                                    priority: 5,
+                                    reuseExistingChunk: true
+                                }
+                            }
+                        })
+                        // https:// webpack.js.org/configuration/optimization/#optimizationruntimechunk
+                    config.optimization.runtimeChunk('single')
+                }
+            )
+    }
+}