更新臉部課程頁面

css/style.css

@@ -171,6 +171,10 @@
   margin: 0 auto;
 }
 
+.navbar-nav .nav-item {
+  white-space: nowrap;
+}
+
 .navbar-nav .nav-link {
   font: 1.2rem 微軟正黑體;
   font-weight: 300 !important;
@@ -422,7 +426,8 @@
   }
 }
 
-.news .news-slide .slick-prev, .news .news-slide .slick-next {
+.news .news-slide .slick-prev,
+.news .news-slide .slick-next {
   width: 50px;
   -o-object-fit: cover;
      object-fit: cover;
@@ -432,7 +437,8 @@
 }
 
 @media screen and (max-width: 767px) {
-  .news .news-slide .slick-prev, .news .news-slide .slick-next {
+  .news .news-slide .slick-prev,
+  .news .news-slide .slick-next {
     width: 30px;
   }
 }
@@ -564,57 +570,67 @@
   background: #fff;
 }
 
-.sec01＿course, .sec02＿course {
+.sec01＿course,
+.sec02＿course {
   padding: 50px 0;
 }
 
-.sec01＿course .sec01＿course_box, .sec02＿course .sec01＿course_box {
+.sec01＿course .sec01＿course_box,
+.sec02＿course .sec01＿course_box {
   width: 80%;
   margin: 0 auto;
   background: #fff;
 }
 
 @media screen and (max-width: 767px) {
-  .sec01＿course .sec01＿course_box, .sec02＿course .sec01＿course_box {
+  .sec01＿course .sec01＿course_box,
+  .sec02＿course .sec01＿course_box {
     width: 90%;
   }
 }
 
-.sec01＿course .sec01＿course_box .sec01＿course_text, .sec02＿course .sec01＿course_box .sec01＿course_text {
+.sec01＿course .sec01＿course_box .sec01＿course_text,
+.sec02＿course .sec01＿course_box .sec01＿course_text {
   text-align: center;
   padding: 15px 5.6%;
   margin-top: 80px;
 }
 
 @media screen and (max-width: 767px) {
-  .sec01＿course .sec01＿course_box .sec01＿course_text, .sec02＿course .sec01＿course_box .sec01＿course_text {
+  .sec01＿course .sec01＿course_box .sec01＿course_text,
+  .sec02＿course .sec01＿course_box .sec01＿course_text {
     padding: 15px 2.8%;
   }
 }
 
-.sec01＿course .sec01＿course_box .sec01＿course_text del, .sec02＿course .sec01＿course_box .sec01＿course_text del {
+.sec01＿course .sec01＿course_box .sec01＿course_text del,
+.sec02＿course .sec01＿course_box .sec01＿course_text del {
   font-size: 1.2rem;
   color: #888;
 }
 
-.sec01＿course .sec01＿course_box .sec01＿course_text span, .sec02＿course .sec01＿course_box .sec01＿course_text span {
+.sec01＿course .sec01＿course_box .sec01＿course_text span,
+.sec02＿course .sec01＿course_box .sec01＿course_text span {
   color: #ef7086;
   font-size: 1.6rem;
 }
 
 @media screen and (max-width: 767px) {
-  .sec01＿course .sec01＿course_box .sec01＿course_text span, .sec02＿course .sec01＿course_box .sec01＿course_text span {
+  .sec01＿course .sec01＿course_box .sec01＿course_text span,
+  .sec02＿course .sec01＿course_box .sec01＿course_text span {
     font-size: 1.4rem;
   }
 }
 
-.sec01＿course .sec01＿course_box .sec01＿course_text p, .sec02＿course .sec01＿course_box .sec01＿course_text p {
+.sec01＿course .sec01＿course_box .sec01＿course_text p,
+.sec02＿course .sec01＿course_box .sec01＿course_text p {
   font-size: 14px;
   color: #555;
   padding: 15px 0 0;
 }
 
-.sec01＿course .sec01＿course_box .sec01＿course_text .submitbutton, .sec02＿course .sec01＿course_box .sec01＿course_text .submitbutton {
+.sec01＿course .sec01＿course_box .sec01＿course_text .submitbutton,
+.sec02＿course .sec01＿course_box .sec01＿course_text .submitbutton {
   width: 80%;
   margin: 20px auto;
   border: none;
@@ -628,7 +644,8 @@
   border: 1px solid #f4c0d0;
 }
 
-.sec01＿course .sec01＿course_box .sec01＿course_text .submitbutton:hover, .sec02＿course .sec01＿course_box .sec01＿course_text .submitbutton:hover {
+.sec01＿course .sec01＿course_box .sec01＿course_text .submitbutton:hover,
+.sec02＿course .sec01＿course_box .sec01＿course_text .submitbutton:hover {
   color: #f4c0d0;
   background-color: #fff;
   border: 1px solid #f4c0d0;

css/style.scss

@@ -12,7 +12,7 @@ $moblie: 767px;
 #top {
   overflow-x: hidden !important;
 }
-.violetbeauty_line{
+.violetbeauty_line {
   margin: 0px auto 20px;
   border: 1px solid transparent;
   background: linear-gradient(to right, white, white), linear-gradient(to right, $subcolor, #d76478);
@@ -88,7 +88,7 @@ $moblie: 767px;
 
 .features_title {
   font-weight: 300 !important;
- 
+
   letter-spacing: 2px;
   font: 1.9375em "微軟正黑體";
   line-height: 25px;
@@ -143,6 +143,9 @@ $moblie: 767px;
   flex-direction: row;
   width: 70%;
   margin: 0 auto;
+  .nav-item {
+    white-space: nowrap;
+  }
   .nav-link {
     font: 1.2rem 微軟正黑體;
     font-weight: 300 !important;
@@ -150,13 +153,13 @@ $moblie: 767px;
     margin: 5px 1rem;
     text-align: center;
     color: #9f9f9f;
-    color:#000;
+    color: #000;
     letter-spacing: 0;
     border-bottom: 5px solid #ffffff;
     box-sizing: border-box;
     cursor: pointer;
     &:hover {
-      color:$maincolor;
+      color: $maincolor;
     }
   }
 }
@@ -170,73 +173,72 @@ $moblie: 767px;
   z-index: 100;
 
   @media screen and(max-width:$table) {
-      height: 8vw;
+    height: 8vw;
   }
   @media screen and(max-width:$moblie) {
-      height: 20vw;
-      position: fixed;
-      z-index: 5;
-    }
-    .menu{
-      font-size: 28px;
-      margin-top: 30px;
-      color: #6c6c6c;
-    }
+    height: 20vw;
+    position: fixed;
+    z-index: 5;
+  }
+  .menu {
+    font-size: 28px;
+    margin-top: 30px;
+    color: #6c6c6c;
+  }
 
   #nav {
-      width: 100vw;
-      margin: 0 auto;
+    width: 100vw;
+    margin: 0 auto;
   }
 
   //    rwd要注意高度
   #logo {
-      padding-top: 1vw;
-      @media screen and(max-width:$moblie) {
-          padding-top: 2vw;
-      }
+    padding-top: 1vw;
+    @media screen and(max-width:$moblie) {
+      padding-top: 2vw;
+    }
 
-      img {
-          width: 120px;
-      }
+    img {
+      width: 120px;
+    }
   }
   #link {
-      text-align: right;
-      padding: 1.5vw 3vw;
-     
-      @media screen and(max-width:$moblie) {
-          display: none;
-      }
+    text-align: right;
+    padding: 1.5vw 3vw;
 
-      a {
-          text-decoration: none;
-          color: #000;
-          letter-spacing: 1px;
-          font-size: 0.9rem;
-          font-weight: 600;
-          cursor: pointer;
-          padding: 15px;
-          position: relative;
-          :hover {
-              opacity: 0.8;
-          }
-          &:after {
-              content: "";
-              display: block;
-              width: 80%;
-              height: 3px;
-              background-color: #fff;
-              position: absolute;
-              left: 12%;
-              bottom: 0;
-              transition: all 0.3s;
-              opacity: 0;
-          }
-          &:hover:after {
-              width: 80%;
-              opacity: 1;
-          }
-        
+    @media screen and(max-width:$moblie) {
+      display: none;
+    }
+
+    a {
+      text-decoration: none;
+      color: #000;
+      letter-spacing: 1px;
+      font-size: 0.9rem;
+      font-weight: 600;
+      cursor: pointer;
+      padding: 15px;
+      position: relative;
+      :hover {
+        opacity: 0.8;
+      }
+      &:after {
+        content: "";
+        display: block;
+        width: 80%;
+        height: 3px;
+        background-color: #fff;
+        position: absolute;
+        left: 12%;
+        bottom: 0;
+        transition: all 0.3s;
+        opacity: 0;
       }
+      &:hover:after {
+        width: 80%;
+        opacity: 1;
+      }
+    }
   }
 }
 // 手機彈跳視窗
@@ -248,74 +250,74 @@ $moblie: 767px;
   z-index: 998;
   overflow: hidden;
   display: none;
-  background: rgba(0,0,0,0.8);
+  background: rgba(0, 0, 0, 0.8);
   @media screen and(min-width:$desktop) {
-      display: none;
+    display: none;
   }
   @media screen and(max-width:$moblie) {
-      height: 100vh;
+    height: 100vh;
   }
   @media screen and(max-width:350px) {
-      height: 55vh;
+    height: 55vh;
   }
 
   hr {
-      display: inline-block;
-      margin: 0px auto !important;
-      width: 55vw;
-      background: #fff;
-      opacity: 1 !important;
+    display: inline-block;
+    margin: 0px auto !important;
+    width: 55vw;
+    background: #fff;
+    opacity: 1 !important;
   }
   #menu-box2 {
-      width: 100vw;
-      height: 25vh;
-      background-color: $subcolor;
-      opacity: 0.95;
-      z-index: 999;
-      text-align: center;
-      @media screen and(max-width:$moblie) {
-          height: 45vh;
-      }
-      @media screen and(max-width:350px) {
-          height: 55vh;
-      }
+    width: 100vw;
+    height: 25vh;
+    background-color: $subcolor;
+    opacity: 0.95;
+    z-index: 999;
+    text-align: center;
+    @media screen and(max-width:$moblie) {
+      height: 45vh;
+    }
+    @media screen and(max-width:350px) {
+      height: 55vh;
+    }
 
-      #menu-link {
-          display: grid;
-          grid-template-columns: repeat(4, 1fr);
-          width: 60vw;
-          margin: 0 auto;
-      }
-      .menu-logo {
-          opacity: 1;
-          img {
-              width: 7vw;
-          }
+    #menu-link {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      width: 60vw;
+      margin: 0 auto;
+    }
+    .menu-logo {
+      opacity: 1;
+      img {
+        width: 7vw;
       }
+    }
 
-      a {
-          display: inline-block;
-          text-decoration: none;
-          color: #fff;
-          font-size: 16px;
-          margin-top: 20px;
-          font-weight: 900;
-          @media screen and(max-width:$moblie) {
-              margin-top: 4vw;
-          }
+    a {
+      display: inline-block;
+      text-decoration: none;
+      color: #fff;
+      font-size: 16px;
+      margin-top: 20px;
+      font-weight: 900;
+      @media screen and(max-width:$moblie) {
+        margin-top: 4vw;
       }
+    }
 
-      .menu-text {
-          width: 70vw;
-          text-align: center;
-          margin-bottom: 10px;
-          border-bottom: 1px solid #fff;
-          margin: 0 auto;
-          padding-bottom: 10px;
-          @media screen and(max-width:$moblie) {
-              margin-bottom: 5px !important;
-          }
+    .menu-text {
+      width: 70vw;
+      text-align: center;
+      margin-bottom: 10px;
+      border-bottom: 1px solid #fff;
+      margin: 0 auto;
+      padding-bottom: 10px;
+      @media screen and(max-width:$moblie) {
+        margin-bottom: 5px !important;
       }
+    }
   }
 }
 
@@ -330,82 +332,80 @@ $moblie: 767px;
     color: $maincolor;
   }
 }
-.banner-slide{
+.banner-slide {
   @media screen and(max-width:$moblie) {
     padding-top: 60px;
   }
 }
-.news{
+.news {
   margin: 100px 0px;
-.news-slide {
- width: 80%;
- margin:0 auto ;
- @media screen and(max-width:$moblie) {
-  width: 95%;
-}
- .slick-prev,.slick-next{
- width: 50px;
- object-fit: cover;
- height: auto;
- filter: invert(52%) sepia(75%) saturate(602%) hue-rotate(306deg) brightness(102%) contrast(87%);
- @media screen and(max-width:$moblie) {
-  width: 30px;
-}
- }
- .slick-prev{
-   left:-50px;
-   @media screen and(max-width:$moblie) {
-    
-    display: none;
-  }
- }
- .slick-next{
-   right:-50px;
-   @media screen and(max-width:$moblie) {
-    display: none;
-  }
- }
-//  .slick-prev:before{
-//    content: "〈";
-//    color:#000;
-//    font-size: 72px;
-//    font-weight: 900;
-//   right:100px;
-//   z-index: 900;
-//   }
+  .news-slide {
+    width: 80%;
+    margin: 0 auto;
+    @media screen and(max-width:$moblie) {
+      width: 95%;
+    }
+    .slick-prev,
+    .slick-next {
+      width: 50px;
+      object-fit: cover;
+      height: auto;
+      filter: invert(52%) sepia(75%) saturate(602%) hue-rotate(306deg) brightness(102%) contrast(87%);
+      @media screen and(max-width:$moblie) {
+        width: 30px;
+      }
+    }
+    .slick-prev {
+      left: -50px;
+      @media screen and(max-width:$moblie) {
+        display: none;
+      }
+    }
+    .slick-next {
+      right: -50px;
+      @media screen and(max-width:$moblie) {
+        display: none;
+      }
+    }
+    //  .slick-prev:before{
+    //    content: "〈";
+    //    color:#000;
+    //    font-size: 72px;
+    //    font-weight: 900;
+    //   right:100px;
+    //   z-index: 900;
+    //   }
 
+    .banner-slide-item {
+      img {
+        padding: 10px;
+        width: 100% !important;
+        @media screen and(max-width:$moblie) {
+          padding: 0px;
+        }
+      }
+    }
+    .slick-dots {
+      bottom: -15px;
+      li {
+        // margin-top: -50px;
+        // 上右下左
 
- .banner-slide-item{
-  
-     img{
-   padding: 10px;
-   width: 100% !important;
-   @media screen and(max-width:$moblie) {
-    padding: 0px;
-  }
- }
- }
- .slick-dots {
- bottom:-15px;
-   li {
-     // margin-top: -50px;
-     // 上右下左
-
-     button:before {
-       font-size: 16px;
-       font-weight: 900;
-       top: 15px;
-       content: "○";
-       color: $maincolor;
-     }
-   }
-   li.slick-active button:before {
-     opacity: 0.75;
-     color: $maincolor;
-     content: "●";
-   }
- }
-}
+        button:before {
+          font-size: 16px;
+          font-weight: 900;
+          top: 15px;
+          content: "○";
+          color: $maincolor;
+        }
+      }
+      li.slick-active button:before {
+        opacity: 0.75;
+        color: $maincolor;
+        content: "●";
+      }
+    }
+  }
 }
 
 .violetbeauty_sec00 {
@@ -419,49 +419,48 @@ $moblie: 767px;
     // background-attachment: inherit;
     background-position: right center;
   }
- 
+
   .bg {
-    background: rgba(0,0,0,0.40);
+    background: rgba(0, 0, 0, 0.4);
     width: 100%;
     height: 100%;
     padding: 100px 0;
   }
-hr{
-  
-  background: #fff;
-  opacity: 1 !important;
-  height: 1px;
-  width: 40px;
-  margin: 15px auto;
-}
-p{
-color:#fff;
-}
-h4{
-color:#fff;
-}
-.violetbeauty_sec00_box {
-  width: 80%;
-  margin: 0 auto;
-  @media screen and(max-width:$moblie) {
-    width: 90%;
+  hr {
+    background: #fff;
+    opacity: 1 !important;
+    height: 1px;
+    width: 40px;
+    margin: 15px auto;
   }
-  .sec00_content_left_img {
-    width: 70%;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+  p {
+    color: #fff;
+  }
+  h4 {
+    color: #fff;
+  }
+  .violetbeauty_sec00_box {
+    width: 80%;
+    margin: 0 auto;
     @media screen and(max-width:$moblie) {
-      width: 80%;
+      width: 90%;
     }
-  }
-  .sec00_content_right {
-    text-align: center;
-    margin-top: 30px;
-    p{
-      margin-bottom: 0.8rem;
+    .sec00_content_left_img {
+      width: 70%;
+      box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+      @media screen and(max-width:$moblie) {
+        width: 80%;
+      }
+    }
+    .sec00_content_right {
+      text-align: center;
+      margin-top: 30px;
+      p {
+        margin-bottom: 0.8rem;
+      }
     }
   }
 }
-}
 //  .slick-prev:before{
 //    content: "〈";
 //    color:#000;
@@ -471,8 +470,6 @@ color:#fff;
 //   z-index: 900;
 //   }
 
-
-
 // .banner-slide {
 //   .slick-dots {
 //     bottom: 30px;
@@ -629,47 +626,48 @@ color:#fff;
 //   // }
 // }
 
-.sec01＿course{
+.sec01＿course {
   background: #fff2f1;
 }
-.sec02＿course{
+.sec02＿course {
   background: #fff;
 }
-.sec01＿course,.sec02＿course{
+.sec01＿course,
+.sec02＿course {
   // margin:80px 0;
   padding: 50px 0;
   // background: #fff2f1;
-  .sec01＿course_box{
+  .sec01＿course_box {
     width: 80%;
     margin: 0 auto;
     background: #fff;
     @media screen and(max-width:$moblie) {
       width: 90%;
     }
-    .sec01＿course_text{
+    .sec01＿course_text {
       text-align: center;
       padding: 15px 5.6%;
       margin-top: 80px;
       @media screen and(max-width:$moblie) {
         padding: 15px 2.8%;
       }
-      del{
+      del {
         font-size: 1.2rem;
-        color:#888;
+        color: #888;
       }
-      span{
-        color:#ef7086;
+      span {
+        color: #ef7086;
         font-size: 1.6rem;
         @media screen and(max-width:$moblie) {
           font-size: 1.4rem;
         }
       }
-      p{
+      p {
         font-size: 14px;
         color: #555;
         padding: 15px 0 0;
       }
-      .submitbutton{
+      .submitbutton {
         width: 80%;
         margin: 20px auto;
         border: none;
@@ -689,7 +687,6 @@ color:#fff;
       }
     }
   }
-  
 }
 
 .violetbeauty_sec03 {
@@ -849,9 +846,9 @@ color:#fff;
   // background: #edcde1;
   background: #fff2f1;
   color: #6c6c6c;
-   .phone{
-      transform: rotate(100deg);
-    }
+  .phone {
+    transform: rotate(100deg);
+  }
   .footer_content_box {
     padding: 50px 0;
     margin: 0 auto;
@@ -864,27 +861,25 @@ color:#fff;
       text-align: left;
       color: #6c6c6c;
     }
-    .border_line{
+    .border_line {
       margin-top: 30px;
       background: #ccc;
       opacity: 1 !important;
       margin-bottom: 0.5rem;
     }
   }
- 
+
   .socail-link {
-  
     a {
       margin-right: 8px;
     }
-   
   }
-  .footer_text_box{
+  .footer_text_box {
     @media screen and(max-width:$moblie) {
-     width: 80%;
-     margin:0 auto ;
-     }
-     h3 {
+      width: 80%;
+      margin: 0 auto;
+    }
+    h3 {
       font-size: 1rem;
     }
     h3,
@@ -916,31 +911,30 @@ color:#fff;
     margin-top: 15px;
     @media screen and(max-width:$moblie) {
       font-size: 0.85rem;
-      }
-  
+    }
   }
   .socail-link {
     margin-top: 30px;
     @media screen and(max-width:$moblie) {
-    text-align: center; 
+      text-align: center;
     }
-  a{
-    transition: 0.3s;
-    &:hover{
-      opacity: 0.8;
+    a {
+      transition: 0.3s;
+      &:hover {
+        opacity: 0.8;
+      }
     }
   }
-  }
   .store {
     width: 85%;
     margin: 0 auto;
     @media screen and(max-width:$moblie) {
-     margin-top: 50px;
+      margin-top: 50px;
     }
     p {
       margin-top: 10px;
     }
- 
+
     h3 {
       font-size: 1.5rem;
       font-weight: 300 !important;

facial.json

@@ -6,7 +6,7 @@
     "price": "800",
     "originalPrice": "1,200",
     "image": "./img/維生素育膚課程/1.jpg",
-    "recommend": "<ul><li>螨蟲肌膚、毛孔粗大</li><li>皮膚粗糙、凹疤多難清潔</li><li>針對咀嚼肌龐大</li><li>不自覺皺眉、法令紋深</li><li>皮膚代謝差</li></ul>"
+    "recommend": ""
   },
   {
     "title": "二倍氧修護課程",
@@ -15,7 +15,7 @@
     "price": "1,600",
     "originalPrice": "3,600",
     "image": "./img/維生素育膚課程/3.jpg",
-    "recommend": "<ul><li>螨蟲肌膚、毛孔粗大</li><li>皮膚粗糙、凹疤多難清潔</li><li>針對咀嚼肌龐大</li><li>不自覺皺眉、法令紋深</li><li>皮膚代謝差</li></ul>"
+    "recommend": ""
   },
   {
     "title": "水行俠氫淨課程",
@@ -24,7 +24,7 @@
     "price": "1,800",
     "originalPrice": "6,600",
     "image": "./img/維生素育膚課程/5.jpg",
-    "recommend": "<ul><li>螨蟲肌膚、毛孔粗大</li><li>皮膚粗糙、凹疤多難清潔</li><li>針對咀嚼肌龐大</li><li>不自覺皺眉、法令紋深</li><li>皮膚代謝差</li></ul>"
+    "recommend": ""
   },
   {
     "title": "粉刺淨化課程",
@@ -33,7 +33,7 @@
     "price": "1,200",
     "originalPrice": "1,600",
     "image": "./img/維生素育膚課程/2.jpg",
-    "recommend": "<ul><li>螨蟲肌膚、毛孔粗大</li><li>皮膚粗糙、凹疤多難清潔</li><li>針對咀嚼肌龐大</li><li>不自覺皺眉、法令紋深</li><li>皮膚代謝差</li></ul>"
+    "recommend": ""
   },
   {
     "title": "極效四合一課程",
@@ -42,7 +42,7 @@
     "price": "1,800",
     "originalPrice": "6,800",
     "image": "./img/維生素育膚課程/25.jpg",
-    "recommend": "<ul><li>螨蟲肌膚、毛孔粗大</li><li>皮膚粗糙、凹疤多難清潔</li><li>針對咀嚼肌龐大</li><li>不自覺皺眉、法令紋深</li><li>皮膚代謝差</li></ul>"
+    "recommend": ""
   },
   {
     "title": "極效淨白課程",
@@ -51,7 +51,7 @@
     "price": "1,600",
     "originalPrice": "3,600",
     "image": "./img/維生素育膚課程/12.jpg",
-    "recommend": "<ul><li>螨蟲肌膚、毛孔粗大</li><li>皮膚粗糙、凹疤多難清潔</li><li>針對咀嚼肌龐大</li><li>不自覺皺眉、法令紋深</li><li>皮膚代謝差</li></ul>"
+    "recommend": ""
   },
   {
     "title": "幹細胞淡斑課程",
@@ -60,7 +60,7 @@
     "price": "1,600",
     "originalPrice": "3,600",
     "image": "./img/維生素育膚課程/7.jpg",
-    "recommend": "<ul><li>螨蟲肌膚、毛孔粗大</li><li>皮膚粗糙、凹疤多難清潔</li><li>針對咀嚼肌龐大</li><li>不自覺皺眉、法令紋深</li><li>皮膚代謝差</li></ul>"
+    "recommend": ""
   },
   {
     "title": "液態皮秒課程",
@@ -69,7 +69,7 @@
     "price": "2,200",
     "originalPrice": "8,800",
     "image": "./img/維生素育膚課程/15.jpg",
-    "recommend": "<ul><li>螨蟲肌膚、毛孔粗大</li><li>皮膚粗糙、凹疤多難清潔</li><li>針對咀嚼肌龐大</li><li>不自覺皺眉、法令紋深</li><li>皮膚代謝差</li></ul>"
+    "recommend": ""
   },
   {
     "title": "淨妍晶靈課程",
@@ -78,7 +78,7 @@
     "price": "1,499",
     "originalPrice": "4,800",
     "image": "./img/維生素育膚課程/13.jpg",
-    "recommend": "<ul><li>螨蟲肌膚、毛孔粗大</li><li>皮膚粗糙、凹疤多難清潔</li><li>針對咀嚼肌龐大</li><li>不自覺皺眉、法令紋深</li><li>皮膚代謝差</li></ul>"
+    "recommend": ""
   },
   {
     "title": "熱麻吉提拉課程",
@@ -87,7 +87,7 @@
     "price": "2,200",
     "originalPrice": "8,800",
     "image": "./img/維生素育膚課程/8.jpg",
-    "recommend": "<ul><li>螨蟲肌膚、毛孔粗大</li><li>皮膚粗糙、凹疤多難清潔</li><li>針對咀嚼肌龐大</li><li>不自覺皺眉、法令紋深</li><li>皮膚代謝差</li></ul>"
+    "recommend": ""
   },
   {
     "title": "黃金亮眼課程",
@@ -96,7 +96,7 @@
     "price": "699",
     "originalPrice": "1,800",
     "image": "./img/維生素育膚課程/6.jpg",
-    "recommend": "<ul><li>螨蟲肌膚、毛孔粗大</li><li>皮膚粗糙、凹疤多難清潔</li><li>針對咀嚼肌龐大</li><li>不自覺皺眉、法令紋深</li><li>皮膚代謝差</li></ul>"
+    "recommend": ""
   },
   {
     "title": "虹鑽黑晶煥顏課程",

js/index.js

@@ -52,9 +52,9 @@ $("#menu-box").hide();
 
 
 $("#menu-btn1").click(function () {
-  $(this).toggleClass( "fa-times" );
+  $(this).toggleClass("fa-times");
   $("#menu-box").fadeToggle(500);
-  $("#menu-box2").fadeToggle(500); 
+  $("#menu-box2").fadeToggle(500);
 });
 $("#menu-box").click(function () {
   // let myDiv = document.getElementById('menu-btn1');
@@ -80,8 +80,8 @@ $(".news-slide").slick({
   autoplaySpeed: 7000,
   initialSlide: 0,
   infinite: true,
-  prevArrow:"<img class='prev slick-prev' src='./img/arrowprev.png'>",
-  nextArrow:"<img class='next slick-next' src='./img/arrownext.png'>"
+  prevArrow: "<img class='prev slick-prev' src='./img/arrowprev.png'>",
+  nextArrow: "<img class='next slick-next' src='./img/arrownext.png'>"
 });
 
 // 避免動畫與使用者滾輪衝突
@@ -241,7 +241,7 @@ $.ajax({
                   </div>
                   <section class="d-flex flex-column justify-content-between">
                     <p>${res[i].description}</p>
-                    <div class="recommend-item">
+                    <div class="recommend-item" style="display: ${res[i].recommend !== "" ? 'flex' : 'none'}">
                       <span class="badge">推薦</span>
                       ${res[i].recommend}
                     </div>