ソースを参照

Merge branch 'xqy_topic' into dev

xuqiaoying 3 年 前
コミット
91ecb2211e

BIN
src/assets/topic/banner_one.png


BIN
src/assets/topic/banner_two.png


BIN
src/assets/topic/detail_one.png


BIN
src/assets/topic/detail_three.png


BIN
src/assets/topic/detail_two.png


BIN
src/assets/topic/topic_bg.png


+ 2 - 2
src/pages/goodsTopic/components/catalogue.vue

@@ -613,7 +613,7 @@ export default {
     justify-items: center;
 }
 .con_header {
-    width: 1104px;
+    width: 1113px;
     height: 44px;
     background: #3F4449;
     display: flex;
@@ -637,7 +637,7 @@ export default {
     justify-items: center;
 }
 .video_box {
-    width: 700px;
+    width: 709px;
     height: 484px;
     background-size: 100% 100%;
     @media screen and (max-width: 1370px){

+ 247 - 246
src/pages/goodsTopic/index.vue

@@ -381,7 +381,7 @@ export default {
     }
     .mains {
         // width: 100%;
-        padding: 0px 116px;
+        // padding: 0px 116px;
         .content_up {
             width: 100%;
             height: 808px;
@@ -397,252 +397,252 @@ export default {
             .banner_two {
                 width: 100%;
                 height: 528px;
-                background: url('../../assets/topic/banner_bg.png') center center no-repeat;
+                background: url('../../assets/topic/banner_two.png') center center no-repeat;
                 background-size: 100% 100%;
-                .con_header {
-                    width: 1120px;
-                    height: 44px;
-                    background: #3F4449;
-                    display: flex;
-                    .con_item {
-                        padding: 12px 20px;
-                        font-size: 16px;
-                        font-weight: 500;
-                        color: #FFFFFF;
-                        &.nactive {
-                            background: #3F8DFD;
-                        }
-                    }
-                }
-                .course_info {
-                    display: flex;
-                    align-items: center;
-                    justify-items: center;
-                }
-                .left_box {
-                    width: 700px;
-                    height: 528px;
-                    .video {
-                        width: 100%;
-                        height: 100%;
-                    }
-                }
-                .right-box {
-                    width: 420px;
-                    height: 528px;
-                    background: #3f4449;
-                    border-radius: 0px;
-                    &__header {
-                        .tabs {
-                            /deep/.el-tabs__nav-wrap::after {
-                                background-color: #999;
-                            }
-
-                            /deep/ .el-tabs__header {
-                                margin: 0;
-                            }
-
-                            .label {
-                                color: #fff;
-                                height: 40px;
-                                line-height: 40px;
-                                padding: 0 20px;
-                            }
-
-                            .item {
-                                &__title {
-                                    padding-left: 12px;
-                                    height: 40px;
-                                    line-height: 40px;
-                                    cursor: pointer;
-                                    font-size: 14px;
-                                    font-family: Microsoft YaHei;
-                                    font-weight: bold;
-                                    color: #fff;
-
-                                    .el-icon-caret-right,
-                                    .el-icon-caret-bottom {
-                                    color: #999;
-                                    }
-                                }
-
-                                &__content {
-                                    .bank-chapter {
-                                        &__item {
-                                            color: #fff;
-                                            font-size: 14px;
-
-                                            &__text {
-                                            padding: 8px 8px 8px 24px;
-                                            cursor: pointer;
-                                            flex: 1;
-
-                                            .el-icon-caret-right,
-                                            .el-icon-caret-bottom {
-                                                color: #999;
-                                            }
-                                            }
-                                        }
-                                    }
-
-                                    .bank-section {
-                                        &__item {
-                                            user-select: none;
-                                            color: #fff;
-                                            font-size: 14px;
-                                            display: flex;
-                                            align-items: center;
-
-                                            &.active {
-                                            background: #132b4d;
-                                            font-size: 14px;
-                                            font-family: Microsoft YaHei;
-                                            font-weight: bold;
-                                            color: #3f8dfd;
-                                            }
-
-                                            &__text {
-                                            flex: 1;
-                                            padding: 8px 8px 8px 12px;
-                                            height: 40px;
-                                            display: flex;
-                                            flex-direction: column;
-                                            justify-content: center;
-                                            cursor: pointer;
-
-                                            .el-icon-caret-right,
-                                            .el-icon-caret-bottom {
-                                                color: #999;
-                                            }
-                                            }
-
-                                            .test-btn {
-                                            margin-left: 10px;
-                                            width: 32px;
-                                            height: 20px;
-                                            background: #007aff;
-                                            border-radius: 4px;
-                                            line-height: 18px;
-                                            color: #fff;
-                                            text-align: center;
-                                            }
-
-                                            .note {
-                                            margin-left: 10px;
-                                            width: 32px;
-                                            height: 20px;
-                                            border: 1px solid #ff3b30;
-                                            border-radius: 4px;
-                                            line-height: 18px;
-                                            color: #ff3b30;
-                                            text-align: center;
-
-                                            &--yellow {
-                                                border-color: #ff9500;
-                                                color: #ff9500;
-                                            }
-
-                                            &--blue {
-                                                border-color: #3f8dfd;
-                                                color: #3f8dfd;
-                                            }
-                                            }
-
-                                            .during {
-                                            color: #999;
-                                            margin-right: 10px;
-                                            }
-
-                                            .btn {
-                                            margin-right: 12px;
-                                            width: 48px;
-                                            height: 20px;
-                                            border: 1px solid #ff3b30;
-                                            background: #ff3b30;
-                                            border-radius: 4px;
-                                            line-height: 18px;
-                                            color: #fff;
-                                            text-align: center;
-
-                                            &--green {
-                                                border: 1px solid #34c759;
-                                                background: #34c759;
-                                            }
-                                            }
-
-                                            .live-btn {
-                                            margin-left: 20px;
-                                            width: 60px;
-                                            height: 20px;
-                                            border-radius: 4px;
-                                            background: #eeeeee;
-                                            line-height: 18px;
-                                            color: #666666;
-                                            text-align: center;
-
-                                            &--yellow {
-                                                background: #fff7eb;
-                                                color: #ff9500;
-                                            }
-
-                                            &--blue {
-                                                border-color: #ebf4ff;
-                                                color: #007aff;
-                                            }
-                                            }
-                                        }
-                                    }
-                                }
-                            }
-                        }
-
-                        .title {
-                            height: 40px;
-                            border-bottom: 1px solid #999;
-                            color: #fff;
-
-                            .select {
-                            width: 100%;
-                            }
-
-                            /deep/ .el-input__icon {
-                            width: 20px;
-                            height: 20px;
-                            border: 1px solid #fff;
-                            border-radius: 4px;
-                            margin-top: 10px;
-                            line-height: 20px;
-                            }
-
-                            /deep/ .el-input__inner {
-                            color: #fff;
-                            font-size: 16px;
-                            background: none;
-                            border: 0;
-                            }
-                        }
-                    }
-                    &__body {
-                        height: 374px;
-                        overflow-y: scroll;
-                        &::-webkit-scrollbar {
-                            // width: 6px;
-                            display: none;
-                        }
-                        &::-webkit-scrollbar-track {
-                            background-color: #060e1a;
-                            -webkit-border-radius: 2em;
-                            -moz-border-radius: 2em;
-                            border-radius: 2em;
-                        }
-                        &::-webkit-scrollbar-thumb {
-                            background-color: #eeeeee;
-                            -webkit-border-radius: 2em;
-                            -moz-border-radius: 2em;
-                            border-radius: 2em;
-                        }
-                    }
-                }
+                // .con_header {
+                //     width: 1113px;
+                //     height: 44px;
+                //     background: #3F4449;
+                //     display: flex;
+                //     .con_item {
+                //         padding: 12px 20px;
+                //         font-size: 16px;
+                //         font-weight: 500;
+                //         color: #FFFFFF;
+                //         &.nactive {
+                //             background: #3F8DFD;
+                //         }
+                //     }
+                // }
+                // .course_info {
+                //     display: flex;
+                //     align-items: center;
+                //     justify-items: center;
+                // }
+                // .left_box {
+                //     width: 700px;
+                //     height: 528px;
+                //     .video {
+                //         width: 100%;
+                //         height: 100%;
+                //     }
+                // }
+                // .right-box {
+                //     width: 420px;
+                //     height: 528px;
+                //     background: #3f4449;
+                //     border-radius: 0px;
+                //     &__header {
+                //         .tabs {
+                //             /deep/.el-tabs__nav-wrap::after {
+                //                 background-color: #999;
+                //             }
+
+                //             /deep/ .el-tabs__header {
+                //                 margin: 0;
+                //             }
+
+                //             .label {
+                //                 color: #fff;
+                //                 height: 40px;
+                //                 line-height: 40px;
+                //                 padding: 0 20px;
+                //             }
+
+                //             .item {
+                //                 &__title {
+                //                     padding-left: 12px;
+                //                     height: 40px;
+                //                     line-height: 40px;
+                //                     cursor: pointer;
+                //                     font-size: 14px;
+                //                     font-family: Microsoft YaHei;
+                //                     font-weight: bold;
+                //                     color: #fff;
+
+                //                     .el-icon-caret-right,
+                //                     .el-icon-caret-bottom {
+                //                     color: #999;
+                //                     }
+                //                 }
+
+                //                 &__content {
+                //                     .bank-chapter {
+                //                         &__item {
+                //                             color: #fff;
+                //                             font-size: 14px;
+
+                //                             &__text {
+                //                             padding: 8px 8px 8px 24px;
+                //                             cursor: pointer;
+                //                             flex: 1;
+
+                //                             .el-icon-caret-right,
+                //                             .el-icon-caret-bottom {
+                //                                 color: #999;
+                //                             }
+                //                             }
+                //                         }
+                //                     }
+
+                //                     .bank-section {
+                //                         &__item {
+                //                             user-select: none;
+                //                             color: #fff;
+                //                             font-size: 14px;
+                //                             display: flex;
+                //                             align-items: center;
+
+                //                             &.active {
+                //                             background: #132b4d;
+                //                             font-size: 14px;
+                //                             font-family: Microsoft YaHei;
+                //                             font-weight: bold;
+                //                             color: #3f8dfd;
+                //                             }
+
+                //                             &__text {
+                //                             flex: 1;
+                //                             padding: 8px 8px 8px 12px;
+                //                             height: 40px;
+                //                             display: flex;
+                //                             flex-direction: column;
+                //                             justify-content: center;
+                //                             cursor: pointer;
+
+                //                             .el-icon-caret-right,
+                //                             .el-icon-caret-bottom {
+                //                                 color: #999;
+                //                             }
+                //                             }
+
+                //                             .test-btn {
+                //                             margin-left: 10px;
+                //                             width: 32px;
+                //                             height: 20px;
+                //                             background: #007aff;
+                //                             border-radius: 4px;
+                //                             line-height: 18px;
+                //                             color: #fff;
+                //                             text-align: center;
+                //                             }
+
+                //                             .note {
+                //                             margin-left: 10px;
+                //                             width: 32px;
+                //                             height: 20px;
+                //                             border: 1px solid #ff3b30;
+                //                             border-radius: 4px;
+                //                             line-height: 18px;
+                //                             color: #ff3b30;
+                //                             text-align: center;
+
+                //                             &--yellow {
+                //                                 border-color: #ff9500;
+                //                                 color: #ff9500;
+                //                             }
+
+                //                             &--blue {
+                //                                 border-color: #3f8dfd;
+                //                                 color: #3f8dfd;
+                //                             }
+                //                             }
+
+                //                             .during {
+                //                             color: #999;
+                //                             margin-right: 10px;
+                //                             }
+
+                //                             .btn {
+                //                             margin-right: 12px;
+                //                             width: 48px;
+                //                             height: 20px;
+                //                             border: 1px solid #ff3b30;
+                //                             background: #ff3b30;
+                //                             border-radius: 4px;
+                //                             line-height: 18px;
+                //                             color: #fff;
+                //                             text-align: center;
+
+                //                             &--green {
+                //                                 border: 1px solid #34c759;
+                //                                 background: #34c759;
+                //                             }
+                //                             }
+
+                //                             .live-btn {
+                //                             margin-left: 20px;
+                //                             width: 60px;
+                //                             height: 20px;
+                //                             border-radius: 4px;
+                //                             background: #eeeeee;
+                //                             line-height: 18px;
+                //                             color: #666666;
+                //                             text-align: center;
+
+                //                             &--yellow {
+                //                                 background: #fff7eb;
+                //                                 color: #ff9500;
+                //                             }
+
+                //                             &--blue {
+                //                                 border-color: #ebf4ff;
+                //                                 color: #007aff;
+                //                             }
+                //                             }
+                //                         }
+                //                     }
+                //                 }
+                //             }
+                //         }
+
+                //         .title {
+                //             height: 40px;
+                //             border-bottom: 1px solid #999;
+                //             color: #fff;
+
+                //             .select {
+                //             width: 100%;
+                //             }
+
+                //             /deep/ .el-input__icon {
+                //             width: 20px;
+                //             height: 20px;
+                //             border: 1px solid #fff;
+                //             border-radius: 4px;
+                //             margin-top: 10px;
+                //             line-height: 20px;
+                //             }
+
+                //             /deep/ .el-input__inner {
+                //             color: #fff;
+                //             font-size: 16px;
+                //             background: none;
+                //             border: 0;
+                //             }
+                //         }
+                //     }
+                //     &__body {
+                //         height: 374px;
+                //         overflow-y: scroll;
+                //         &::-webkit-scrollbar {
+                //             // width: 6px;
+                //             display: none;
+                //         }
+                //         &::-webkit-scrollbar-track {
+                //             background-color: #060e1a;
+                //             -webkit-border-radius: 2em;
+                //             -moz-border-radius: 2em;
+                //             border-radius: 2em;
+                //         }
+                //         &::-webkit-scrollbar-thumb {
+                //             background-color: #eeeeee;
+                //             -webkit-border-radius: 2em;
+                //             -moz-border-radius: 2em;
+                //             border-radius: 2em;
+                //         }
+                //     }
+                // }
             }
             
         }
@@ -681,6 +681,7 @@ export default {
             display: flex;
             justify-content: center;
             align-items: center;
+            margin-right: -20px;
             .detail_one {
                 width: 358px;
                 height: 2753px;