样式修改

src/pages/goodsTopic/components/buyDialog.vue

@@ -175,7 +175,7 @@ export default {
         }
         .lin_price {
             color: #999999;
-            font-size: 24px;
+            font-size: 18px;
             text-decoration:line-through;
             margin-left: 5px;
         }

src/pages/goodsTopic/components/catalogue.vue

@@ -605,11 +605,21 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.container {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-items: center;
+}
 .con_header {
     width: 1104px;
     height: 44px;
     background: #3F4449;
     display: flex;
+    @media screen and (max-width: 1370px){
+        width: 900px;
+    }
     .con_item {
         padding: 12px 20px;
         font-size: 14px;
@@ -628,8 +638,11 @@ export default {
 }
 .video_box {
     width: 700px;
-    height: 528px;
+    height: 484px;
     background-size: 100% 100%;
+    @media screen and (max-width: 1370px){
+        width: 497px;
+    }
     .video {
         width: 100%;
         height: 100%;
@@ -637,7 +650,7 @@ export default {
 }
 .right-box {
     width: 404px;
-    height: 528px;
+    height: 484px;
     background: #3f4449;
     border-radius: 0px;
     &__header {
@@ -662,7 +675,7 @@ export default {
 }
 .mulu_body {
     width: 404px;
-    height: 446px;
+    height: 401px;
     background: #3f4449;
     border-radius: 0px;
     .left-box {

src/pages/goodsTopic/index.vue

@@ -12,8 +12,10 @@
             </div>
             <div class="course_btns">
                 <div class="meun_btns">
-                    <el-button type="primary" size="small" @click="changeCouMeun()">课程导航</el-button>
-                    <div v-if="showMeun" class="slide-list">
+                    <div class="btns" @click="changeCouMeun()">
+                        课程导航
+                    </div>
+                    <div class="slide-list">
                         <div
                             class="slide-list__item"
                             v-for="(type, typeItem) in typeList"
@@ -44,9 +46,6 @@
                     <div class="banner_two">
                         <catalogue :goodsId='goodsId' :topicId="topicId"></catalogue>
                     </div> 
-                </div>
-                <div class="content_down">
-
                 </div>
                 <div class="topic_detail">
                     <div class="titles">
@@ -307,15 +306,32 @@ export default {
     .course_btns {
         padding: 10px 10px 10px 115px;
         .meun_btns {
+            width: 100%;
+            .btns {
+                width: 96px;
+                height: 32px;
+                line-height: 32px;
+                text-align: center;
+                background: #3F8DFD;
+                border-radius: 4px;
+                color: #fff;
+                font-size: 14px;
+                cursor: pointer;
+                
+            }
+            &:hover {
+                .slide-list {
+                    display: block;
+                }
+            }
             .slide-list {
-                // opacity: 1;
+                display: none;
                 transition: all 0.3s;
                 width: 672px;
-                padding: 0;
-                background: rgba(255, 255, 255, 1);
+                background: #F8F8F8;
                 position: absolute;
-                top: 178px;
-                left: 120px;
+                top: 163px;
+                left: 115px;
                 padding-left: 24px;
                 z-index: 10;
                 border-radius: 4px;
@@ -374,6 +390,9 @@ export default {
                 height: 280px;
                 background: url('../../assets/topic/banner_one.png') center center no-repeat;
                 background-size: 100% 100%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
             }
             .banner_two {
                 width: 100%;
@@ -668,9 +687,12 @@ export default {
                 background-color: #fff;
                 border-radius: 8px;
                 margin-right: 20px;
+                @media screen and (max-width: 1370px){
+                    width: 300px;
+                }
             }
             .deatil_titles {
-                width: 358px;
+                width: 100%;
                 height: 110px;
                 line-height: 110px;
                 text-align: center;
@@ -687,7 +709,7 @@ export default {
                 }
             }
             .detail_mid {
-                width: 358px;
+                width: 100%;
                 padding: 0px 24px;
                 
                 .mid_item {
@@ -727,7 +749,7 @@ export default {
             }
 
             .down_img {
-                width: 358px;
+                width: 100%;
                 height: 2369px;
                 >.l_img {
                     width: 100%;