手机适配

src/assets/css/course.css

@@ -656,3 +656,104 @@
   .classlist li-new li .buy-pop .mask-bg {
     height: 256px;
   }
+
+@media screen and (max-width: 768px) {
+  .m-history-course {
+    width: 94%;
+    max-width: 94%;
+    height: auto;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    overflow: hidden;
+  }
+
+  .m-history-course .course-img {
+    float: none;
+    width: 100%;
+    overflow: hidden;
+  }
+
+  .m-history-course .course-img img {
+    width: 100%;
+    height: auto;
+    display: block;
+  }
+
+  .m-history-course .course-img .p-ico2 {
+    width: 48px;
+    height: 48px;
+    margin: -24px 0 0 -24px;
+  }
+
+  .m-history-course .history-course-bd {
+    width: 100%;
+    padding: 10px;
+    box-sizing: border-box;
+  }
+
+  .m-history-course .history-course-bd .course-info li {
+    width: 33.33%;
+    height: auto;
+    float: left;
+    border-left: none;
+    border-top: 1px solid #e8e8e8;
+    padding: 8px 0 8px 10px;
+    text-align: center;
+  }
+
+  .m-history-course .history-course-bd .course-info li:nth-child(1),
+  .m-history-course .history-course-bd .course-info li:nth-child(2),
+  .m-history-course .history-course-bd .course-info li:nth-child(3) {
+    border-top: none;
+  }
+
+  .m-history-course .history-course-bd .course-info li p {
+    height: auto;
+  }
+
+  .m-history-course .history-course-bd .course-info li p span {
+    font-size: 18px;
+  }
+
+  .m-history-course .ui-btn {
+    position: static;
+    width: 100%;
+    margin-top: 10px;
+  }
+
+  .m-history-course .a-nd {
+    padding-top: 0;
+    margin-top: 10px;
+  }
+
+  .classlist li {
+    width: 100%;
+    max-width: 100%;
+    float: none;
+    margin-right: 0;
+    overflow: hidden;
+  }
+
+  .classlist li .img {
+    width: 100%;
+    height: auto;
+    overflow: hidden;
+  }
+
+  .classlist li .img img {
+    width: 100%;
+    max-width: 100%;
+    height: auto;
+    display: block;
+  }
+
+  .classlist li .tit {
+    width: auto;
+    white-space: normal;
+  }
+
+  .classlist li .info {
+    width: auto;
+  }
+}

src/containers/center/play/index.css

@@ -23,3 +23,19 @@
   position: relative;
   width: calc(100% - 15px);
 }
+
+@media screen and (max-width: 768px) {
+  .learn {
+    margin: 0;
+    padding-left: 0;
+  }
+
+  .video-js .vjs-big-play-button {
+    width: 60px !important;
+    height: 60px !important;
+    line-height: 60px !important;
+    font-size: 30px !important;
+    bottom: 30% !important;
+    top: auto !important;
+  }
+}

src/containers/center/play/index.vue

@@ -410,7 +410,47 @@
   ::v-deep .el-bg-inner-error .el-progress-bar__inner {
     background-image: linear-gradient(to right, #3587d8, #fb3a7e);
   }
-  ::v-deep .el-bg-inner-done .el-progress-bar__inner {
+   ::v-deep .el-bg-inner-done .el-progress-bar__inner {
     background-image: linear-gradient(to right, #3587d8, #53ff54);
   }
+
+  @media screen and (max-width: 768px) {
+    .m-right-block {
+      padding: 0 10px;
+    }
+
+    .m-account .account-tit {
+      display: flex;
+    }
+
+    .m-account .account-tit a {
+      flex: 1;
+      text-align: center;
+      padding: 8px 0;
+      font-size: 14px;
+    }
+
+    ::v-deep .el-table {
+      width: 100% !important;
+    }
+
+    ::v-deep .el-table__header-wrapper,
+    ::v-deep .el-table__body-wrapper {
+      overflow-x: auto;
+      -webkit-overflow-scrolling: touch;
+    }
+
+    ::v-deep .el-table .cell {
+      padding: 0 6px;
+      font-size: 13px;
+    }
+
+    ::v-deep .el-table .el-table__row td {
+      padding: 6px 0;
+    }
+
+    ::v-deep .el-progress {
+      width: 80px !important;
+    }
+  }
 </style>

src/containers/center/play/play.vue

@@ -980,7 +980,46 @@
     }
 
     .pc-player-container {
-      padding: 12px;
+      padding: 0;
+      min-height: auto;
+    }
+
+    .panel-toggle {
+      display: none;
+    }
+
+    .video-section {
+      border-radius: 0;
+    }
+
+    .video-title {
+      padding: 10px 12px;
+      font-size: 14px;
+    }
+
+    .dialog-footer.pt30 {
+      padding: 6px 10px;
+    }
+
+    .media-footer {
+      flex-wrap: wrap;
+      gap: 6px;
+    }
+
+    .media-center {
+      display: none;
+    }
+
+    .volume-slider {
+      width: 100px !important;
+    }
+
+    .media-select {
+      display: none;
+    }
+
+    .pc-player-right {
+      display: none;
     }
   }
 </style>

src/containers/login/components/isLogin.vue

@@ -2,9 +2,9 @@
   <div class="course-my ng-scope">
     <div class="course-my-info clear">
       <a class="my-headimg">
-        <img v-if="user.gender=='男'" src="../../../assets/images/user-man.jpg" >
-        <img v-else-if="user.gender=='女'" src="../../../assets/images/user-woman.jpg" >
-        <img v-else  src="../../../assets/images/user-img_hash24aa2f2347.jpg">
+        <img v-if="user.gender=='男'" src="@/assets/images/user-man.jpg" >
+        <img v-else-if="user.gender=='女'" src="@/assets/images/user-woman.jpg" >
+        <img v-else  src="@/assets/images/user-img_hash24aa2f2347.jpg">
       </a>
       <div class="info-detail">
         <div class="pt20 fs18">欢迎您，

src/containers/login/components/loginBase.css

@@ -445,3 +445,85 @@ button.btn-b-b {
     text-align: center;
     border-radius: 5px;
 }
+
+@media screen and (max-width: 768px) {
+  .m-login {
+    width: 100%;
+    height: auto;
+    float: none;
+    min-height: 300px;
+  }
+
+  .course-my {
+    width: 100%;
+    height: auto;
+    padding: 15px;
+  }
+
+  .course-my .course-my-info .info-detail {
+    padding-left: 0;
+    padding-top: 70px;
+    text-align: center;
+    line-height: 1.5;
+  }
+
+  .course-my .course-my-info .my-headimg {
+    float: none;
+    margin: 0 auto;
+    display: block;
+  }
+
+  .m-login .login-form .wrong-tips {
+    position: relative;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    margin-top: 4px;
+  }
+
+  .m-login .login-form .wrong-tips:after,
+  .m-login .login-form .wrong-tips:before {
+    display: none;
+  }
+
+  .m-login .login-form-1 li .ipt-s {
+    width: auto;
+    flex: 1;
+    min-width: 0;
+  }
+
+  .m-login .login-form-1 li .qr-code {
+    width: 70px;
+    flex-shrink: 0;
+    margin-left: 4px;
+  }
+
+  .m-login .login-form-1 li .qr-code img {
+    width: 70px;
+    height: 37px;
+  }
+
+  .m-login .login-form-1 .code-row {
+    display: flex;
+    align-items: center;
+  }
+
+  .course-my .entry-box li {
+    width: 33.33%;
+    padding: 0 0 10px;
+  }
+
+  .course-my .entry-box li .p-ico {
+    width: 32px;
+    height: 32px;
+    background-size: 160px auto;
+  }
+
+  .course-my .entry-box li span {
+    font-size: 12px;
+  }
+
+  .course-my .login-entry .btn-b-b {
+    width: 100%;
+  }
+}

src/containers/login/components/unLogin.vue

@@ -19,7 +19,7 @@
               autocomplete="off" placeholder="密码">
           </li>
 
-         <li>
+         <li class="code-row">
             <span class="p-ico picode-ico" @click="changeCode()"></span>
             <input type="text"  v-model="code" class="ui-ipt ipt-s" placeholder="图形验证码" @click="!codeShow&&changeCode()" required="required">
 

src/containers/login/login.css

@@ -131,3 +131,110 @@ div {
     padding: 2px 2px;
     line-height: 1.2;
 }
+
+.category-btn {
+  width: 240px;
+  font-size: 20px;
+}
+
+@media screen and (max-width: 768px) {
+  .training-category {
+    width: 100%;
+    height: auto;
+  }
+
+  .mimg {
+    width: 100%;
+    height: auto;
+  }
+
+  .el-carousel__container {
+    height: 200px;
+  }
+
+  .banner {
+    width: 100%;
+    height: auto;
+    float: none;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .banner .category {
+    width: 100%;
+    height: auto;
+    position: relative;
+    padding: 10px;
+  }
+
+  .banner .category .category-title {
+    font-size: 16px;
+  }
+
+  .banner .category .category-tit {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 6px;
+  }
+
+  .banner .category .btn-box {
+    display: block;
+    width: 45%;
+    margin: 3px 0;
+  }
+
+  .banner .category .btn-box .el-button {
+    width: 100% !important;
+    font-size: 16px !important;
+    padding: 10px 8px;
+  }
+
+  .category-btn {
+    width: 100% !important;
+    font-size: 16px !important;
+  }
+
+  .waphide {
+    display: none !important;
+  }
+
+  .floatbox {
+    width: 120px;
+    height: 50px;
+    right: 10px;
+    top: auto;
+    bottom: 20px;
+    font-size: 20px !important;
+    line-height: 50px;
+  }
+
+  .right-nav {
+    display: none;
+  }
+
+  .p-wrap-full {
+    width: 100%;
+    padding: 0 10px;
+    box-sizing: border-box;
+  }
+
+  .el-table {
+    width: 100% !important;
+  }
+
+  .el-table .cell {
+    padding: 0 8px;
+    font-size: 13px;
+  }
+
+  .el-pagination {
+    text-align: center;
+    margin-top: 10px;
+  }
+
+  .login-dialog .el-dialog {
+    width: 90% !important;
+    max-width: 350px;
+  }
+}

src/containers/login/login.vue

@@ -6,11 +6,11 @@
 
     <div class="p-wrap-full clear">
       <div class="banner">
-        <div class="category" style="height: 350px;overflow: hidden;">
+        <div class="category" style="overflow: hidden;">
           <div class="category-title">培训类别</div>
           <div class="category-tit clear">
             <div class="btn-box" v-for="(item, index) in typeList" :key="index" v-show="item.isOpen">
-              <el-button @click="gotoCategory(item)" type="primary" style="width: 240px;font-size: 20px;">
+              <el-button @click="gotoCategory(item)" type="primary" class="category-btn">
                 {{ item.name }}
               </el-button>
             </div>
@@ -30,12 +30,12 @@
       <el-card style="margin-top: 10px;">
         <el-table :data="postList"  highlight-current-row
         :show-header="false" height="240px" >
-          <el-table-column min-width="600px">
+          <el-table-column min-width="300px">
             <template slot-scope="{row, $index}">
               <span @click="gotoDetail(row.postId)">{{(page*size)-size+$index+1}}、{{ row.title }}</span>
             </template>
           </el-table-column>
-          <el-table-column  width="160px">
+          <el-table-column  width="220px">
             <template slot-scope="{row}">
               <span>{{ row.publishTime  }}</span>
             </template>
@@ -59,6 +59,12 @@
       <friendlink></friendlink>
     </div>
 
+    <div class="right-nav waphide">
+      <img class="right-img" src="../../assets/wxapp.jpg" alt="">
+      <p>使用小程序</p>
+      <p>学习更轻松</p>
+    </div>
+
     <el-dialog
       class="fc tc login-dialog"
       :visible.sync="loginDialog"
@@ -217,7 +223,7 @@ export default {
     position: fixed;
     transition: bottom ease .9s;
     z-index: 0;
-    right: 5px;
+    right: 20px;
     top: 260px;
     text-align: center;
     border-radius: 5px;