1

build/utils.js

@@ -4,98 +4,99 @@ const config = require('../config')
 const ExtractTextPlugin = require('extract-text-webpack-plugin')
 const packageConfig = require('../package.json')
 
-exports.assetsPath = function (_path) {
-  const assetsSubDirectory = process.env.NODE_ENV === 'production'
-    ? config.build.assetsSubDirectory
-    : config.dev.assetsSubDirectory
+exports.assetsPath = function(_path) {
+    const assetsSubDirectory = process.env.NODE_ENV === 'production' ?
+        config.build.assetsSubDirectory :
+        config.dev.assetsSubDirectory
 
-  return path.posix.join(assetsSubDirectory, _path)
+    return path.posix.join(assetsSubDirectory, _path)
 }
 
-exports.cssLoaders = function (options) {
-  options = options || {}
+exports.cssLoaders = function(options) {
+    options = options || {}
 
-  const cssLoader = {
-    loader: 'css-loader',
-    options: {
-      sourceMap: options.sourceMap
+    const cssLoader = {
+        loader: 'css-loader',
+        options: {
+            sourceMap: options.sourceMap
+        }
     }
-  }
 
-  const postcssLoader = {
-    loader: 'postcss-loader',
-    options: {
-      sourceMap: options.sourceMap
+    const postcssLoader = {
+        loader: 'postcss-loader',
+        options: {
+            sourceMap: options.sourceMap
+        }
     }
-  }
 
-  // generate loader string to be used with extract text plugin
-  function generateLoaders (loader, loaderOptions) {
-    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
-
-    if (loader) {
-      loaders.push({
-        loader: loader + '-loader',
-        options: Object.assign({}, loaderOptions, {
-          sourceMap: options.sourceMap
-        })
-      })
+    // generate loader string to be used with extract text plugin
+    function generateLoaders(loader, loaderOptions) {
+        const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
+
+        if (loader) {
+            loaders.push({
+                loader: loader + '-loader',
+                options: Object.assign({}, loaderOptions, {
+                    sourceMap: options.sourceMap
+                })
+            })
+        }
+
+        // Extract CSS when that option is specified
+        // (which is the case during production build)
+        if (options.extract) {
+            return ExtractTextPlugin.extract({
+                use: loaders,
+                fallback: 'vue-style-loader',
+                publicPath: '../../'
+            })
+        } else {
+            return ['vue-style-loader'].concat(loaders)
+        }
     }
 
-    // Extract CSS when that option is specified
-    // (which is the case during production build)
-    if (options.extract) {
-      return ExtractTextPlugin.extract({
-        use: loaders,
-        fallback: 'vue-style-loader'
-      })
-    } else {
-      return ['vue-style-loader'].concat(loaders)
+    // https://vue-loader.vuejs.org/en/configurations/extract-css.html
+    return {
+        css: generateLoaders(),
+        postcss: generateLoaders(),
+        less: generateLoaders('less'),
+        sass: generateLoaders('sass', { indentedSyntax: true }),
+        scss: generateLoaders('sass'),
+        stylus: generateLoaders('stylus'),
+        styl: generateLoaders('stylus')
     }
-  }
-
-  // https://vue-loader.vuejs.org/en/configurations/extract-css.html
-  return {
-    css: generateLoaders(),
-    postcss: generateLoaders(),
-    less: generateLoaders('less'),
-    sass: generateLoaders('sass', { indentedSyntax: true }),
-    scss: generateLoaders('sass'),
-    stylus: generateLoaders('stylus'),
-    styl: generateLoaders('stylus')
-  }
 }
 
 // Generate loaders for standalone style files (outside of .vue)
-exports.styleLoaders = function (options) {
-  const output = []
-  const loaders = exports.cssLoaders(options)
-
-  for (const extension in loaders) {
-    const loader = loaders[extension]
-    output.push({
-      test: new RegExp('\\.' + extension + '$'),
-      use: loader
-    })
-  }
-
-  return output
+exports.styleLoaders = function(options) {
+    const output = []
+    const loaders = exports.cssLoaders(options)
+
+    for (const extension in loaders) {
+        const loader = loaders[extension]
+        output.push({
+            test: new RegExp('\\.' + extension + '$'),
+            use: loader
+        })
+    }
+
+    return output
 }
 
 exports.createNotifierCallback = () => {
-  const notifier = require('node-notifier')
+    const notifier = require('node-notifier')
 
-  return (severity, errors) => {
-    if (severity !== 'error') return
+    return (severity, errors) => {
+        if (severity !== 'error') return
 
-    const error = errors[0]
-    const filename = error.file && error.file.split('!').pop()
+        const error = errors[0]
+        const filename = error.file && error.file.split('!').pop()
 
-    notifier.notify({
-      title: packageConfig.name,
-      message: severity + ': ' + error.name,
-      subtitle: filename || '',
-      icon: path.join(__dirname, 'logo.png')
-    })
-  }
-}
+        notifier.notify({
+            title: packageConfig.name,
+            message: severity + ': ' + error.name,
+            subtitle: filename || '',
+            icon: path.join(__dirname, 'logo.png')
+        })
+    }
+}

dist/index.html

@@ -1 +1 @@
-<!DOCTYPE html><html><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><title>pbl-student</title><link href=./static/css/app.2a0c0d828a13de5253d040f6c159971f.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=./static/js/manifest.3ad1d5771e9b13dbdad2.js></script><script type=text/javascript src=./static/js/vendor.35062edb107d42aa0826.js></script><script type=text/javascript src=./static/js/app.fb13f1c70628ffb33d13.js></script></body></html>
+<!DOCTYPE html><html><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><title>pbl-student</title><link href=./static/css/app.528dc865f88839868e044bbd468ad4ed.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=./static/js/manifest.3ad1d5771e9b13dbdad2.js></script><script type=text/javascript src=./static/js/vendor.35062edb107d42aa0826.js></script><script type=text/javascript src=./static/js/app.023762ac1d7f7c8e4ff0.js></script></body></html>

src/components/courseDetail.vue

@@ -3,6 +3,12 @@
     <div class="pb_content_body" style="height: 100%">
       <div class="body_student">
         <div class="student_head">
+          <div
+            class="return"
+            @click.stop="goTo('/index?userid=' + userid + '&oid=' + oid)"
+          >
+            <img src="../assets/icon/return.png" alt="" />
+          </div>
           <div class="box_course">
             <div class="wheel">
               <img
@@ -36,14 +42,22 @@
           </div>
         </div>
         <div class="student_body">
-          <div style="width: 20%; margin-right: 10px; background: #fff">
+          <div
+            style="
+              width: 20%;
+              margin-right: 10px;
+              background: #fff;
+              padding-right: 10px;
+            "
+          >
             <div
               class="blue_box_one"
               v-for="(item, index) in chapInfo"
               :key="index"
+              @click="addUserRate(index)"
             >
               <div>第{{ index + 1 }}阶段</div>
-              <div>{{ item.dyName }}</div>
+              <div :title="item.dyName">{{ item.dyName }}</div>
             </div>
           </div>
           <div style="width: 80%; background: #fff">
@@ -133,6 +147,7 @@ export default {
       dialogVisible: false,
       id: this.$route.query.courseId,
       userid: this.$route.query.userid,
+      oid: this.$route.query.oid,
       courseDetail: {},
       aStudentName: [],
       chapInfo: [],
@@ -176,7 +191,9 @@ export default {
               "&courseId=" +
               this.id +
               "&userid=" +
-              this.userid
+              this.userid +
+              "&oid=" +
+              this.oid
           );
         })
         .catch((err) => {
@@ -250,6 +267,7 @@ export default {
   width: 100%;
   background: #fff;
   height: 30%;
+  position: relative;
 }
 .wheel {
   width: 210px;
@@ -380,7 +398,15 @@ export default {
   border-radius: 5px;
 }
 .dialog_change >>> .el-dialog__header {
-  background: #537bb8;
+  background: #303030;
+  height: 36px;
+  line-height: 36px;
+  padding-left: 10px;
+  font-size: 14px;
+}
+.dialog_change >>> .el-dialog__headerbtn {
+  top: 10px !important;
+  right: 10px !important;
 }
 .dialog_change >>> .el-dialog__title {
   color: #fff;
@@ -410,13 +436,38 @@ export default {
 }
 .blue_box > div:nth-child(1),
 .blue_box_one > div:nth-child(1) {
-  font-size: 17px;
   line-height: 65px;
 }
 .blue_box_one > div:nth-child(1) {
-  margin: 0 10px;
+  margin: 0 5px;
+  width: 40%;
 }
 .blue_box > div:nth-child(2) {
   line-height: 0px;
 }
+.blue_box_one > div:nth-child(2) {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  word-break: break-all;
+  width: 60%;
+}
+.blue_box_one > div:nth-child(2):hover {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+}
+.return {
+  width: 2rem;
+  height: 2rem;
+  top: 7px;
+  position: absolute;
+  left: 10px;
+  cursor: pointer;
+}
+.return > img {
+  width: 100%;
+  height: 100%;
+}
 </style>

src/components/index.vue

@@ -11,7 +11,7 @@
 							:src="item.poster"
 							alt=""
 							@click.stop="
-								goTo('/courseDetail?courseId=' + item.url + '&userid=' + userid)
+								goTo('/courseDetail?courseId=' + item.url + '&userid=' + userid + '&oid=' + oid)
 							"
 						/>
 					</el-carousel-item>
@@ -69,7 +69,7 @@
 											'/courseDetail?courseId=' +
 												item.courseId +
 												'&userid=' +
-												userid
+												userid + '&oid=' + oid
 										)
 									"
 								>

src/components/study.vue

@@ -1,7 +1,14 @@
 <template>
   <div class="pb_content">
-    <div class="pb_content_body" style="display: flex;min-height: 800px;">
-      <div style="width: 20%; margin-right: 10px; background: #fff">
+    <div class="pb_content_body" style="display: flex; min-height: 800px">
+      <div
+        style="
+          width: 20%;
+          margin-right: 10px;
+          background: #fff;
+          padding-right: 10px;
+        "
+      >
         <div class="courseTitle">
           {{ courseDetail.title }}
         </div>
@@ -10,6 +17,7 @@
           class="blue_box_one"
           v-for="(item, index) in chapInfoList"
           :key="index"
+          @click="get(index)"
         >
           <div>第{{ index + 1 }}阶段</div>
           <div>{{ item.dyName }}</div>
@@ -64,10 +72,25 @@
               作业与测验
             </div>
           </div>
+          <div
+            class="returnBtn"
+            @click.stop="
+              goTo(
+                '/courseDetail?userid=' +
+                  userid +
+                  '&oid=' +
+                  oid +
+                  '&courseId=' +
+                  id
+              )
+            "
+          >
+            返回
+          </div>
         </div>
         <div class="student_head" v-if="type == 1">
           <div class="box_course">
-            <div class="wheel">
+            <div class="wheel" v-if="vedio.length > 0">
               <div class="workd_media">
                 <!-- <el-image
                 style="width: 100%; height: 300px"
@@ -125,7 +148,7 @@
             </div>
             <div class="detail_content" v-html="courseDetail.template"></div>
           </div>
-          <div class="project_box" v-if="type == 1">
+          <div class="project_box" v-if="type == 1 && vedio.length > 0">
             <div class="filebox">
               <div class="media" v-for="(media, index) in vedio" :key="index">
                 <img
@@ -143,6 +166,7 @@
               </div>
             </div>
           </div>
+		  <div class="project_box" v-if="type == 1 && vedio.length == 0">暂无视频</div>
           <div class="project_box" v-if="type == 3">
             <div class="filebox">
               <div
@@ -297,6 +321,7 @@ export default {
       id: this.$route.query.courseId,
       userid: this.$route.query.userid,
       courseType: this.$route.query.type,
+      oid: this.$route.query.oid,
       type: 1,
       vedio: [],
       file: [],
@@ -347,6 +372,9 @@ export default {
     };
   },
   methods: {
+    goTo(path) {
+      this.$router.push(path);
+    },
     clean(type) {
       if (type == 1) {
         this.studyJuri[0].cover.splice(0, 1);
@@ -494,6 +522,10 @@ export default {
           });
       }
     },
+    get(i) {
+      this.courseType = i;
+	  this.getCourseDetail()
+    },
     getCourseDetail() {
       const loading = this.$loading.service({
         background: "rgba(255, 255, 255, 0.7)",
@@ -542,6 +574,8 @@ export default {
             "OGG",
             "OGM",
           ];
+		  this.vedio = []
+		  this.file = []
           for (var i = 0; i < a.length; i++) {
             if (
               b.indexOf(
@@ -708,6 +742,7 @@ export default {
   background: #fff;
   margin: 10px 0;
   height: 60px;
+  align-items: center;
 }
 .study_top .checkbox {
   display: flex;
@@ -759,7 +794,7 @@ export default {
   cursor: pointer;
 }
 .project_box {
-  padding: 0 30px 10px 30px;
+  padding: 0 30px 10px 21px;
 }
 
 .filebox {
@@ -927,9 +962,22 @@ export default {
   align-items: center;
 }
 .blue_box_one > div:nth-child(1) {
-  font-size: 17px;
   line-height: 65px;
   margin: 0 10px;
+  width: 40%;
+}
+.blue_box_one > div:nth-child(2) {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  word-break: break-all;
+  width: 60%;
+}
+.blue_box_one > div:nth-child(2):hover {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
 }
 .upFile {
   margin: 0 auto;
@@ -956,4 +1004,23 @@ export default {
   margin-left: 15px;
   color: #d1d1d1;
 }
+.return {
+  width: 2rem;
+  height: 2rem;
+  cursor: pointer;
+}
+.return > img {
+  width: 100%;
+  height: 100%;
+}
+.returnBtn {
+  background: #3ec6a0;
+  width: 80px;
+  height: 35px;
+  color: #fff;
+  text-align: center;
+  line-height: 35px;
+  margin-right: 20px;
+  cursor: pointer;
+}
 </style>