index

src/components/learnCenter/Course.vue

@@ -23,9 +23,7 @@
 
         <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,23 +43,19 @@ export default {
         query: { id: "COURSE" },
       });
     },
+
     // 处理价格
-    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) {
@@ -85,17 +79,14 @@ export default {
       font-weight: bold;
       font-size: 24px;
       display: flex;
+      align-items: center;
+      justify-content: center;
       span {
         display: inline-block;
         width: 42px;
         height: 42px;
         border-radius: 50%;
-        background: linear-gradient(
-          216.55deg,
-          #ffef5a 10.18%,
-          #ffd337 10.19%,
-          #ffd772 81.9%
-        );
+        background: linear-gradient(215.75deg, #ffa05a 17.74%, #ffb952 82.17%);
         margin-right: 16px;
         display: flex;
         align-items: center;
@@ -134,15 +125,13 @@ export default {
     display: flex;
     flex-wrap: wrap;
     justify-content: flex-start;
-    width: 1160px;
-    padding-top: 50px;
-    padding-left: 20px;
-    padding-right: 20px;
+    width: 1200px;
+    box-sizing: border-box;
+    padding: 50px 24px 8px 24px;
     > div {
-      margin-left: 20px;
-      margin-right: 20px;
       width: 256px;
       cursor: pointer;
+      margin: 0 16px 32px 16px;
       .one_name {
         width: 100%;
         height: 42px;
@@ -165,7 +154,6 @@ export default {
         .price_2 {
           font-size: 16px;
         }
-        margin-bottom: 40px;
       }
       p {
         font-size: 16px;

src/components/learnCenter/Textbook.vue

@@ -73,7 +73,6 @@ export default {
 
 <style lang="scss"  scoped>
 .Textbook {
-  margin-top: 71px;
   .top {
     width: 1200px;
     margin: 0 auto;
@@ -85,6 +84,8 @@ export default {
       font-weight: bold;
       font-size: 24px;
       display: flex;
+      align-items: center;
+      justify-content: center;
       span {
         display: inline-block;
         width: 42px;
@@ -129,13 +130,11 @@ export default {
     display: flex;
     flex-wrap: wrap;
     justify-content: flex-start;
-    width: 1160px;
-    padding-top: 50px;
-    padding-left: 20px;
-    padding-right: 20px;
+    width: 1200px;
+    box-sizing: border-box;
+    padding: 40px 20px 8px;
     > div {
-      margin-left: 20px;
-      margin-right: 20px;
+      margin: 0 20px 32px 20px;
       width: 192px;
       cursor: pointer;
       .one_name {
@@ -157,7 +156,6 @@ export default {
         font-weight: bold;
         color: #2c2c2c;
         font-size: 24px;
-        margin-bottom: 40px;
         .price_2 {
           font-size: 16px;
         }

src/views/learn-center/index.vue

@@ -266,13 +266,13 @@ export default {
     }
   }
   .nav_title {
+    width: 1200px;
+    margin: 0 auto;
     height: 64px;
     display: flex;
-    // justify-content: space-around;
     justify-content: space-between;
-    padding: 0 160px;
     align-items: center;
-    .el-menu-item{
+    .el-menu-item {
       font-size: 16px;
     }
     // 取消组件默认的样式
@@ -311,7 +311,7 @@ export default {
     }
   }
   .main {
-    background: #F6F6F6;
+    background: #f6f6f6;
     padding-bottom: 50px;
     .ClassifyList {
       // margin-top: 50px;
@@ -325,4 +325,10 @@ export default {
     color: black;
   }
 }
+.nav_title {
+  .el-menu--horizontal > .el-menu-item {
+    height: 64px;
+    line-height: 64px;
+  }
+}
 </style>