From e24e8a57f17fd612be95628909a52296d05c473a Mon Sep 17 00:00:00 2001
From: daihh <seastar@bjxask.com>
Date: Sun, 9 Oct 2022 10:56:47 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AF=BE=E7=A8=8B=E8=AF=A6=E7=BB=86=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E7=9A=84=E4=BF=AE=E6=94=B9=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/styles/portal.scss      |  39 ++++++++-
 src/views/portal/course/Detail.vue | 130 +++++++++++++++--------------
 2 files changed, 105 insertions(+), 64 deletions(-)

diff --git a/src/assets/styles/portal.scss b/src/assets/styles/portal.scss
index b51d50a5..612a05d9 100644
--- a/src/assets/styles/portal.scss
+++ b/src/assets/styles/portal.scss
@@ -2,7 +2,11 @@
  * 门户页面的一些通用样式定义在这里面
  */
 body {margin: 0px;padding: 0px;}
-
+//定义全局的核心区域宽度
+.xcontent{
+  min-width: 1100px;
+  margin: 0px auto;
+}
 //[文章，案例，问答]详细页面内容部分
 .xpage-detail-content{
   padding: 50px;
@@ -24,6 +28,35 @@ body {margin: 0px;padding: 0px;}
     color:#3d3d3d;
   }
 }
+//课程详细页面banner部分
+ .xpage-coures-banner{
+     width: 100%;
+     height: 200px;
+     background-image: url('../../../public/images/couresdetail.png');
+     background-size: cover;
+     .bcourse-title{
+       color: #fff;
+       margin-top: 20px;
+       font-size: 20px;
+     }
+     .bcourse-score{
+       margin-left: 30px;
+       font-size: 16px;
+     }
+     .banner-crumbs{
+        color: #fff;
+        margin-top:50px;
+        .crumbs-first{
+          font-size: 16px;
+        }
+        .crumbs-line{
+          margin: 0px 10px;
+        }
+        .crumbs-last{
+          font-size: 18px;
+        }
+     }
+ }
 
 //原样式，未修改
 .portal-model-btn{// 写文章，发课程等按钮
@@ -274,6 +307,7 @@ body {margin: 0px;padding: 0px;}
 }
 //以下是多分辨率的控制，注意，只是一些样式的高度，宽度，大小控制，非大小控制不要在这里写
 @media screen and (max-width: 1366px){
+  .xcontent{width: 1100px;}
   .xcontent2{
     width: 1100px;
   }
@@ -304,6 +338,7 @@ body {margin: 0px;padding: 0px;}
 }
 
 @media screen and (max-width: 1680px) and (min-width:1367px){
+  .xcontent{width: 1366px;}
   .xcontent2{
     width: 1366px;
   }
@@ -329,6 +364,7 @@ body {margin: 0px;padding: 0px;}
 }
 
 @media screen and (max-width: 1920px) and (min-width: 1681px){
+  .xcontent{width: 1690px;}
   .xcontent2{
     width: 1690px;
   }
@@ -354,6 +390,7 @@ body {margin: 0px;padding: 0px;}
 }
 
 @media screen and (min-width: 1921px){
+  .xcontent{width: 1880px;}
   .xcontent2{
     width: 1880px;
   }
diff --git a/src/views/portal/course/Detail.vue b/src/views/portal/course/Detail.vue
index 688418eb..cf1c4642 100644
--- a/src/views/portal/course/Detail.vue
+++ b/src/views/portal/course/Detail.vue
@@ -1,67 +1,70 @@
 <template>
   <div>
-    <portal-header current="course" :goSearch="1"></portal-header>
-    <div  class="portal-content xcontent">
-      <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb-nav">
-        <el-breadcrumb-item :to="{ path: '/course' }">课程列表</el-breadcrumb-item>
-        <el-breadcrumb-item>课程详情</el-breadcrumb-item>
-      </el-breadcrumb>
-      <!-- <div class="course-title">
-        <div class="title">{{courseInfo.name}}</div>
-        <div class="course-title-right">
-          <interactBar :readonly="!stuStusts || stuStusts==0" :type="1" :data="courseInfo" :comments="false" :views="false"></interactBar>
+    <div class="xpage-coures-banner">
+        <portal-header current="course" textColor="#fff" :goSearch="1"></portal-header>
+        <div class="xcontent">
+            <div class="banner-crumbs">
+               <router-link to="/course"><span class="crumbs-first">课程列表</span></router-link>
+               <span class="crumbs-line">  &gt; </span>
+               <span class="crumbs-last">课程详情</span>
+            </div>
+            <div class="bcourse-title">
+               <!-- <span>{{courseInfo.name}}</span> -->
+                <!-- <span>{{courseInfo.summary}}</span>  -->
+                <!-- <span class="bcourse-score">{{toScore(courseInfo.score)}}分</span> -->
+            </div>
         </div>
-      </div> -->
-      <el-row :gutter="10">
-        <el-col :span="24">
-          <el-card :body-style="{ padding: '0px' }">
-            <div class="detail">
-              <div class="image">
-                <course-image :course="courseInfo"></course-image>
-              </div>
-              <div class="detail-info">
-              <div class="course-title">
-                <div class="title"> {{courseInfo.name}}</div>
-                <interactBar :readonly="!stuStusts || stuStusts==0" :type="1" :data="courseInfo" :praises="false" :comments="false" :views="false"></interactBar>
-              </div>
-                  <!-- <div class="course-title-right"> -->
-                  <!-- <interactBar :readonly="!stuStusts || stuStusts==0" :type="1" :data="courseInfo" :comments="false" :views="false"></interactBar> -->
-                <!-- </div> -->
-                <div>
-                  <div class="study-count">{{courseInfo.studys}}人学习</div>
-                  <!-- <div><span style="font-size:20px;color:#ff8e00">{{courseInfo.score ? courseInfo.score.toFixed(1) : 0}}</span><span style="font-size:12px;color:#ff8e00">分</span></div> -->
-                </div>
-                <div class="label-div">
-                  <el-tag class="label-item" effect="plain" v-for="(item,tagIdx) in tagArray" :key="tagIdx">{{item}}</el-tag>
-                 </div>
-                <!-- <div style="width:160px;height:50px"> -->
-                <!-- </div> -->
-                <!-- <div class="label-div">
-                  <el-tag class="label-item" effect="plain">{{courseType(courseInfo.type)}}</el-tag>
-                </div> -->
-                  <div class="score-div">
-                     <!-- colors="[#FF8E00]" -->
-                    <div v-if="courseInfo.score">
-                      <el-rate disabled v-model="courseInfo.score"></el-rate>
-                      <span class="score-text">{{courseInfo.score ? courseInfo.score.toFixed(1) : 0}}<span style="font-size: 14px;">分</span></span>
-                     </div>
-                     <div v-else class="score-no">未评分</div>
-                  </div>
-                  <div class="btn-div"  style="height:30px;margin-top: 15px;">
-                    <el-button v-if="stuStusts == 0" type="primary" @click="startSigningUp()" >立即报名</el-button>
-                    <el-button v-if="stuStusts == 1" type="primary" @click="jumpJearning">{{btnName}}</el-button>
-                 </div>
+    </div>
 
-                <div class="erweima" v-if="courseInfo.device == 2 || courseInfo.device == 3">
-                  <img class="detail-img" v-show="!showQrcode" @click="showQrcode = true" src="../../../assets/images/qr.png">
-                  <div v-show="showQrcode" class="qrcode" @click="showQrcode = false">
-                    <div id="qrcode" ref="qrcode"></div>
-                    <!-- <div class="qrcode-title">手机扫码观看</div> -->
-                  </div>
+    <div  class="portal-content xcontent">
+
+          <div class="detail">
+            <div class="image">
+              <course-image :course="courseInfo"></course-image>
+            </div>
+            <div class="detail-info">
+            <div class="course-title">
+              <div class="title"> {{courseInfo.name}}</div>
+              <interactBar :readonly="!stuStusts || stuStusts==0" :type="1" :data="courseInfo" :praises="false" :comments="false" :views="false"></interactBar>
+            </div>
+                <!-- <div class="course-title-right"> -->
+                <!-- <interactBar :readonly="!stuStusts || stuStusts==0" :type="1" :data="courseInfo" :comments="false" :views="false"></interactBar> -->
+              <!-- </div> -->
+              <div>
+                <div class="study-count">{{courseInfo.studys}}人学习</div>
+                <!-- <div><span style="font-size:20px;color:#ff8e00">{{courseInfo.score ? courseInfo.score.toFixed(1) : 0}}</span><span style="font-size:12px;color:#ff8e00">分</span></div> -->
+              </div>
+              <div class="label-div">
+                <el-tag class="label-item" effect="plain" v-for="(item,tagIdx) in tagArray" :key="tagIdx">{{item}}</el-tag>
+               </div>
+              <!-- <div style="width:160px;height:50px"> -->
+              <!-- </div> -->
+              <!-- <div class="label-div">
+                <el-tag class="label-item" effect="plain">{{courseType(courseInfo.type)}}</el-tag>
+              </div> -->
+                <div class="score-div">
+                   <!-- colors="[#FF8E00]" -->
+                  <div v-if="courseInfo.score">
+                    <el-rate disabled v-model="courseInfo.score"></el-rate>
+                    <span class="score-text">{{courseInfo.score ? courseInfo.score.toFixed(1) : 0}}<span style="font-size: 14px;">分</span></span>
+                   </div>
+                   <div v-else class="score-no">未评分</div>
+                </div>
+                <div class="btn-div"  style="height:30px;margin-top: 15px;">
+                  <el-button v-if="stuStusts == 0" type="primary" @click="startSigningUp()" >立即报名</el-button>
+                  <el-button v-if="stuStusts == 1" type="primary" @click="jumpJearning">{{btnName}}</el-button>
+               </div>
+
+              <div class="erweima" v-if="courseInfo.device == 2 || courseInfo.device == 3">
+                <img class="detail-img" v-show="!showQrcode" @click="showQrcode = true" src="../../../assets/images/qr.png">
+                <div v-show="showQrcode" class="qrcode" @click="showQrcode = false">
+                  <div id="qrcode" ref="qrcode"></div>
+                  <!-- <div class="qrcode-title">手机扫码观看</div> -->
                 </div>
               </div>
             </div>
-          </el-card>
+          </div>
+
           <el-row :gutter="10">
             <el-col :span="18">
               <el-card :body-style="{ padding: '0px' }" class="info" style="margin-top: 10px;">
@@ -121,8 +124,7 @@
               </el-card>
             </el-col>
           </el-row>
-        </el-col>
-      </el-row>
+
     </div>
     <portal-footer></portal-footer>
   </div>
@@ -220,10 +222,10 @@ export default {
               })
               this.catalogTree=treeList;
           }
-          
-         
-        
-        
+
+
+
+
         this.showQrimage();
         this.isSignUp();
       }else{
@@ -411,6 +413,8 @@ export default {
 
 .detail {
   display: flex;
+  margin-top: 20px;
+  background-color: #fff;
   .image {
       width: 500px;
       height: 280px;