样式

src/components/learnCenter/Textbook.vue

@@ -22,9 +22,7 @@
         </div>
         <p class="one_name">{{ item.name }}</p>
         <p class="price">
-          ￥
-          <span class="price_1" v-text="changePrice('1', item.price)"></span>
-          <span class="price_2" v-text="changePrice('2', item.price)"></span>
+          ￥<span class="price_1" v-html="changePrice(item.price)"></span>
         </p>
       </div>
     </div>
@@ -45,22 +43,18 @@ export default {
       });
     },
     // 处理价格
-    changePrice(type, item) {
-      item = item + "";
-      if (item.indexOf(".") != -1) {
-        if (type == 1) {
-          return item.split(".")[0];
-        } else if (type == 2) {
-          return "." + item.split(".")[1];
-        }
+    // 处理价格
+    changePrice(price) {
+      let str = "";
+      price = price ? price.toString() : "0.00";
+      if (price.indexOf(".") > -1) {
+        let arr = price.split(".");
+        str = `<span style="font-size: 24px;">${arr[0]}</span>.<span style="font-size: 16px;">${arr[1]}</span>`;
       } else {
-        if (type == 1) {
-          return item;
-        }
-        if (type == 2) {
-          return ".00";
-        }
+        str = `<span style="font-size: 24px;">${price}</span>.<span  style="font-size: 16px;">00</span>`;
       }
+
+      return str;
     },
     // 需要跳到教材系统的教材详情
     gotoIntroduce(item) {

src/views/learn-center/ListPage.vue

@@ -21,45 +21,17 @@
         ></component>
       </div>
       <div class="paging" v-if="CourseList">
-        <!-- 
-        :current-page.sync="targetPage"
-        layout="prev, pager, next, jumper"
-       -->
         <el-pagination
           background
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
-          layout="prev, pager, next"
+          :page-sizes="[10, 20, 30, 40, 50]"
+          layout="prev, pager, next,total, sizes,jumper"
           :current-page="pageNum"
           :page-size="pageSize"
           :total="CourseList.total_count"
         >
         </el-pagination>
-        <span> | </span>
-        <span>
-          <span class="number">
-            {{ Math.ceil(CourseList.total_count / 8) }}
-          </span>
-          页
-        </span>
-        <span> | </span>
-        <span>
-          每页
-          <span class="number">{{ navName == "TEXTBOOK" ? "10" : "8" }} </span>
-          <span> 个 </span>
-        </span>
-        <span>|</span>
-        <span> 跳转 </span>
-        <span>
-          <el-input
-            @input="toPageChange"
-            v-model="gotoPage"
-            :maxlength="1"
-            class="gotoPage"
-            type="text"
-          />
-        </span>
-        <span>页</span>
       </div>
     </div>
   </div>
@@ -185,7 +157,8 @@ export default {
 </script>
 <style lang="scss"  scoped>
 .teacher_edu {
-  height: 100%;
+  min-height: 100vh;
+  background: #f6f6f6;
   .nav {
     background: url("../../assets/learncenter/Homebg2.png") no-repeat center;
     background-size: cover;
@@ -248,13 +221,12 @@ export default {
     padding-bottom: 20px;
   }
   .paging {
-    // position: fixed;
-    // bottom: 0;
+    width: 1200px;
+    margin: 0 auto;
     display: flex;
     align-items: center;
-    height: 150px;
-    padding-left: 170px;
     color: darkgrey;
+    padding: 32px 0;
     .number {
       color: black;
     }
@@ -272,4 +244,20 @@ export default {
 .el-pagination.is-background .el-pager li:not(.disabled).active {
   background: #ff9900;
 }
+.el-pagination.is-background .btn-next,
+.el-pagination.is-background .btn-prev,
+.el-pagination.is-background .el-pager li {
+  background: #fff;
+  min-width: 32px;
+  height: 32px;
+  line-height: 32px;
+  border-radius: 4px;
+  font-size: 18px;
+  color: #2c2c2c;
+}
+.el-pagination button,
+.el-pagination span:not([class*="suffix"]) {
+  height: 32px;
+  line-height: 32px;
+}
 </style>

src/views/learn-center/Seekresult.vue

@@ -49,37 +49,13 @@
               background
               @size-change="handleSizeChange"
               @current-change="handleCurrentChange"
-              layout="prev, pager, next"
+              :page-sizes="[10, 20, 30, 40, 50]"
+              layout="prev, pager, next,total, sizes,jumper"
               :current-page="pageNum"
               :page-size="pageSize"
               :total="dataList.total_count"
             >
             </el-pagination>
-            <span> | </span>
-            <span>
-              <span class="number">
-                {{ Math.ceil(CourseList.total_count / 8) }}
-              </span>
-              页
-            </span>
-            <span> | </span>
-            <span>
-              每页
-              <span class="number"> 8 </span>
-              <span> 个 </span>
-            </span>
-            <span>|</span>
-            <span> 跳转 </span>
-            <span>
-              <el-input
-                @input="toPageChange"
-                v-model="gotoPage"
-                :maxlength="1"
-                class="gotoPage"
-                type="text"
-              />
-            </span>
-            <span>页</span>
           </div>
         </div>
       </template>
@@ -248,6 +224,8 @@ export default {
 
 <style lang="scss"  scoped>
 .SeekResult {
+  min-height: 100vh;
+  background: #f6f6f6;
   .nav {
     background: url("../../assets/learncenter/Homebg2.png") no-repeat center;
     background-size: cover;
@@ -375,11 +353,15 @@ export default {
     }
   }
   .paging {
+    width: 1200px;
+    margin: 0 auto;
     display: flex;
-    width: 1220px;
-    margin: 20px auto;
-    color: darkgrey;
     align-items: center;
+    color: darkgrey;
+    padding: 32px 0;
+    .number {
+      color: black;
+    }
     span {
       margin-left: 10px;
     }

src/views/learn-center/index.vue

@@ -7,31 +7,33 @@
       <div class="shade"></div>
     </div>
     <div class="nav_title">
-      <el-menu
-        :default-active="activeIndex"
-        class="el-menu-demo"
-        mode="horizontal"
-        @select="handleSelect"
-        text-color="#000"
-        active-text-color="#FF9900"
-      >
-        <el-menu-item index="COURSE">教学</el-menu-item>
-        <el-menu-item index="TEXTBOOK">教材</el-menu-item>
-        <!-- <el-menu-item index="LIVE LESSON">LIVE LESSON</el-menu-item>
-        <el-menu-item index="VIDEO COURSE">VIDEO COURSE</el-menu-item> -->
-      </el-menu>
-      <div class="seek" @keydown="keyDownSeekData">
-        <el-input
-          v-model="SeekName"
-          style="width: 300px"
-          placeholder="请输入内容"
+      <div class="inner">
+        <el-menu
+          :default-active="activeIndex"
+          class="el-menu-demo"
+          mode="horizontal"
+          @select="handleSelect"
+          text-color="#000"
+          active-text-color="#FF9900"
         >
-        </el-input>
-        <img
-          @click="gotoSeekResult"
-          src="../../assets/learncenter/Group2149.png"
-          alt=""
-        />
+          <el-menu-item index="COURSE">教学</el-menu-item>
+          <el-menu-item index="TEXTBOOK">教材</el-menu-item>
+          <!-- <el-menu-item index="LIVE LESSON">LIVE LESSON</el-menu-item>
+        <el-menu-item index="VIDEO COURSE">VIDEO COURSE</el-menu-item> -->
+        </el-menu>
+        <div class="seek" @keydown="keyDownSeekData">
+          <el-input
+            v-model="SeekName"
+            style="width: 300px"
+            placeholder="请输入内容"
+          >
+          </el-input>
+          <img
+            @click="gotoSeekResult"
+            src="../../assets/learncenter/Group2149.png"
+            alt=""
+          />
+        </div>
       </div>
     </div>
     <!-- 主要信息列表 -->
@@ -236,7 +238,8 @@ export default {
 
 <style lang="scss"  scoped>
 .lear_center {
-  height: 100%;
+  min-height: 100vh;
+  background: #f6f6f6;
   .nav {
     background: url("../../assets/learncenter/Homebg2.png") no-repeat;
     background-size: cover;
@@ -266,12 +269,16 @@ export default {
     }
   }
   .nav_title {
-    width: 1200px;
-    margin: 0 auto;
-    height: 64px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+    background: #fff;
+
+    .inner {
+      width: 1200px;
+      margin: 0 auto;
+      height: 64px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
     .el-menu-item {
       font-size: 16px;
     }
@@ -330,5 +337,8 @@ export default {
     height: 64px;
     line-height: 64px;
   }
+  .el-menu--horizontal > .el-menu-item.is-active {
+    font-weight: 600;
+  }
 }
 </style>