luffycity項目開發

時間 2019-11-09

標籤 luffycity 項目開發简体版

原文原文鏈接

一. 首頁的頁腳

　　子組件Footer.vue文件：css

<template>
    <div class="footer">
      <ul>
        <li>關於咱們</li>
        <li>聯繫咱們</li>
        <li>商務合做</li>
        <li>幫助中心</li>
        <li>意見反饋</li>
        <li>新手指南</li>
      </ul>
      <p>Copyright © luffycity.com版權全部 | 京ICP備17072161號-1</p>
    </div>
</template>

<script>
    export default {
        name: "Footer"
    }
</script>

<style scoped>
.footer {
  width: 100%;
  height: 128px;
  background: #25292e;
  color: #fff;
  margin-top: 40px;
}
.footer ul{
  margin: 0 auto 16px;
  padding-top: 38px;
  width: 810px;
}
.footer ul li{
  float: left;
  width: 112px;
  margin: 0 10px;
  text-align: center;
  font-size: 14px;
  cursor: pointer;
}
.footer ul::after{
  content:"";
  display:block;
  clear:both;
}
.footer p{
  text-align: center;
  font-size: 12px;
}
</style>

　　效果：html

二. 免費課頁面

　　1. 在router/index.js路由中註冊路由

// 引入路由類和Vue類
import Vue from 'vue'
import Router from 'vue-router'

import Home from '../components/Home'
import Login from '../components/Login'
import Course from '../components/Course'

// 註冊路由類
Vue.use(Router);

// 初始化路由對象
export default new Router({
  // 設置路由模式爲‘history’，去掉默認的#
  mode: "history",
  routes: [
    // 路由列表
    // { // 一個字典，表明一條url
      // name: "路由別名",
      // path: "路由地址",
      // component: 組件類名,
    // }
    {
      name: "Home",
      path: "/",
      component: Home
    },
    {
      name: "Home",
      path: "/home",
      component: Home
    },
    {
      name: "Login",
      path: "/login",
      component: Login
    },
    {
      name: "Course",
      path: "/course",
      component: Course,
    }

  ]
})

　　2. 完善首頁頭部的連接效果

　　Header.vue，代碼：vue

<li><router-link to="/course">免費課</router-link></li>

　　router-link，本質上仍是給咱們生成了A連接，可是，咱們本身手寫的A連接跳轉會刷新頁面，因此咱們必須使用router-link生成的A連接纔不會出現頁面刷新。css3

　　3. 完成免費課程組件的內容

<template>
  <div class="course">
    <Header></Header>
    <div class="main">
      <!-- 篩選條件 -->
      <div class="condition">
        <ul class="cate-list">
          <li class="title">課程分類:</li>
          <li class="this">所有</li>
          <li>Python</li>
          <li>Linux運維</li>
          <li>Python進階</li>
          <li>開發工具</li>
          <li>Go語言</li>
          <li>機器學習</li>
          <li>技術生涯</li>
        </ul>

        <div class="ordering">
          <ul>
            <li class="title">篩&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;選:</li>
            <li class="default this">默認</li>
            <li class="hot">人氣</li>
            <li class="price">價格</li>
          </ul>
          <p class="condition-result">共21個課程</p>
        </div>
      </div>

      <!-- 課程列表 -->
      <div class="course-list">
        <div class="course-item">
          <div class="course-image">
            <img src="/static/image/course-cover.jpeg" alt="">
          </div>
          <div class="course-info">
            <h3>Python開發21天入門 <span><img src="/static/image/avatar1.svg" alt="">100人已加入學習</span></h3>
            <p class="teather-info">Alex 金角大王 老男孩Python教學總監 <span>共154課時/更新完成</span></p>
            <ul class="lesson-list">
              <li><span class="lesson-title">01 | 第1節：初識編碼</span> <span class="free">免費</span></li>
              <li><span class="lesson-title">01 | 第1節：初識編碼初識編碼</span> <span class="free">免費</span></li>
              <li><span class="lesson-title">01 | 第1節：初識編碼</span> <span class="free">免費</span></li>
              <li><span class="lesson-title">01 | 第1節：初識編碼初識編碼初識編碼初識編碼</span> <span class="free">免費</span></li>
            </ul>
            <div class="pay-box">
              <span class="discount-type">限時免費</span>
              <span class="discount-price">￥0.00元</span>
              <span class="original-price">原價：9.00元</span>
              <span class="buy-now">當即購買</span>
            </div>
          </div>
        </div>
        <div class="course-item">
          <div class="course-image">
            <img src="/static/image/course-cover.jpeg" alt="">
          </div>
          <div class="course-info">
            <h3>Python開發21天入門 <span><img src="/static/image/avatar1.svg" alt="">100人已加入學習</span></h3>
            <p class="teather-info">Alex 金角大王 老男孩Python教學總監 <span>共154課時/更新完成</span></p>
            <ul class="lesson-list">
              <li><span class="lesson-title">01 | 第1節：初識編碼</span> <span class="free">免費</span></li>
              <li><span class="lesson-title">01 | 第1節：初識編碼初識編碼</span> <span class="free">免費</span></li>
              <li><span class="lesson-title">01 | 第1節：初識編碼</span> <span class="free">免費</span></li>
              <li><span class="lesson-title">01 | 第1節：初識編碼初識編碼初識編碼初識編碼</span> <span class="free">免費</span></li>
            </ul>
            <div class="pay-box">
              <span class="discount-type">限時免費</span>
              <span class="discount-price">￥0.00元</span>
              <span class="original-price">原價：9.00元</span>
              <span class="buy-now">當即購買</span>
            </div>
          </div>
        </div>
        <div class="course-item">
          <div class="course-image">
            <img src="/static/image/course-cover.jpeg" alt="">
          </div>
          <div class="course-info">
            <h3>Python開發21天入門 <span><img src="/static/image/avatar1.svg" alt="">100人已加入學習</span></h3>
            <p class="teather-info">Alex 金角大王 老男孩Python教學總監 <span>共154課時/更新完成</span></p>
            <ul class="lesson-list">
              <li><span class="lesson-title">01 | 第1節：初識編碼</span> <span class="free">免費</span></li>
              <li><span class="lesson-title">01 | 第1節：初識編碼初識編碼</span> <span class="free">免費</span></li>
              <li><span class="lesson-title">01 | 第1節：初識編碼</span> <span class="free">免費</span></li>
              <li><span class="lesson-title">01 | 第1節：初識編碼初識編碼初識編碼初識編碼</span> <span class="free">免費</span></li>
            </ul>
            <div class="pay-box">
              <span class="discount-type">限時免費</span>
              <span class="discount-price">￥0.00元</span>
              <span class="original-price">原價：9.00元</span>
              <span class="buy-now">當即購買</span>
            </div>
          </div>
        </div>
        <div class="course-item">
          <div class="course-image">
            <img src="/static/image/course-cover.jpeg" alt="">
          </div>
          <div class="course-info">
            <h3>Python開發21天入門 <span><img src="/static/image/avatar1.svg" alt="">100人已加入學習</span></h3>
            <p class="teather-info">Alex 金角大王 老男孩Python教學總監 <span>共154課時/更新完成</span></p>
            <ul class="lesson-list">
              <li><span class="lesson-title">01 | 第1節：初識編碼</span> <span class="free">免費</span></li>
              <li><span class="lesson-title">01 | 第1節：初識編碼初識編碼</span> <span class="free">免費</span></li>
              <li><span class="lesson-title">01 | 第1節：初識編碼</span> <span class="free">免費</span></li>
              <li><span class="lesson-title">01 | 第1節：初識編碼初識編碼初識編碼初識編碼</span> <span class="free">免費</span></li>
            </ul>
            <div class="pay-box">
              <span class="discount-type">限時免費</span>
              <span class="discount-price">￥0.00元</span>
              <span class="original-price">原價：9.00元</span>
              <span class="buy-now">當即購買</span>
            </div>
          </div>
        </div>

      </div>
    </div>
      <Footer></Footer>
    </div>
</template>

<script>
  import Header from './common/Header'
  import Footer from './common/Footer'

  export default {
    name: "Course",
    components: {
      Header,
      Footer
    }
  }
</script>

<style scoped>
  .course {
    background: #f6f6f6;
  }

  .course .main {
    width: 1100px;
    margin: 35px auto 0;
  }

  .course .condition {
    margin-bottom: 35px;
    padding: 25px 30px 25px 20px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 4px 0 #f0f0f0;
  }

  .course .cate-list {
    border-bottom: 1px solid #333;
    border-bottom-color: rgba(51, 51, 51, .05);
    padding-bottom: 18px;
    margin-bottom: 17px;
  }

  .course .cate-list::after {
    content: "";
    display: block;
    clear: both;
  }

  .course .cate-list li {
    float: left;
    font-size: 16px;
    padding: 6px 15px;
    line-height: 16px;
    margin-left: 14px;
    position: relative;
    transition: all .3s ease;
    cursor: pointer;
    color: #4a4a4a;
    border: 1px solid transparent; /* transparent 透明 */
  }

  .course .cate-list .title {
    color: #888;
    margin-left: 0;
    letter-spacing: .36px;
    padding: 0;
    line-height: 28px;
  }

  .course .cate-list .this {
    color: #ffc210;
    border: 1px solid #ffc210 !important;
    border-radius: 30px;
  }

  .course .ordering::after {
    content: "";
    display: block;
    clear: both;
  }

  .course .ordering ul {
    float: left;
  }

  .course .ordering ul::after {
    content: "";
    display: block;
    clear: both;
  }

  .course .ordering .condition-result {
    float: right;
    font-size: 14px;
    color: #9b9b9b;
    line-height: 28px;
  }

  .course .ordering ul li {
    float: left;
    padding: 6px 15px;
    line-height: 16px;
    margin-left: 14px;
    position: relative;
    transition: all .3s ease;
    cursor: pointer;
    color: #4a4a4a;
  }

  .course .ordering .title {
    font-size: 16px;
    color: #888;
    letter-spacing: .36px;
    margin-left: 0;
    padding: 0;
    line-height: 28px;
  }

  .course .ordering .this {
    color: #ffc210;
  }

  .course .ordering .price {
    position: relative;
  }

  .course .ordering .price::before,
  .course .ordering .price::after {
    cursor: pointer;
    content: "";
    display: block;
    width: 0;
    height: 0;
    border: 5px solid transparent;
    position: absolute;
    right: 0;
  }

  .course .ordering .price::before {
    border-bottom: 5px solid #aaa;
    margin-bottom: 2px;
    top: 2px;
  }

  .course .ordering .price::after {
    border-top: 5px solid #aaa;
    bottom: 2px;
  }

  .course .course-item:hover {
    box-shadow: 4px 6px 16px rgba(0, 0, 0, .5);
  }

  .course .course-item {
    width: 1050px;
    background: #fff;
    padding: 20px 30px 20px 20px;
    margin-bottom: 35px;
    border-radius: 2px;
    cursor: pointer;
    box-shadow: 2px 3px 16px rgba(0, 0, 0, .1);
    /* css3.0 過渡動畫 hover 事件操做 */
    transition: all .2s ease;
  }

  .course .course-item::after {
    content: "";
    display: block;
    clear: both;
  }

  /* 頂級元素 父級元素  當前元素{} */
  .course .course-item .course-image {
    float: left;
    width: 423px;
    height: 210px;
    margin-right: 30px;
  }

  .course .course-item .course-image img {
    width: 100%;
  }

  .course .course-item .course-info {
    float: left;
    width: 596px;
  }

  .course-item .course-info h3 {
    font-size: 26px;
    color: #333;
    font-weight: normal;
    margin-bottom: 8px;
  }

  .course-item .course-info h3 span {
    font-size: 14px;
    color: #9b9b9b;
    float: right;
    margin-top: 14px;
  }

  .course-item .course-info h3 span img {
    width: 11px;
    height: auto;
    margin-right: 7px;
  }

  .course-item .course-info .teather-info {
    font-size: 14px;
    color: #9b9b9b;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid #333;
    border-bottom-color: rgba(51, 51, 51, .05);
  }

  .course-item .course-info .teather-info span {
    float: right;
  }

  .course-item .lesson-list::after {
    content: "";
    display: block;
    clear: both;
  }

  .course-item .lesson-list li {
    float: left;
    width: 44%;
    font-size: 14px;
    color: #666;
    padding-left: 22px;
    /* background: url("路徑") 是否平鋪 x軸位置 y軸位置 */
    background: url("/static/image/play-icon-gray.svg") no-repeat left 4px;
    margin-bottom: 15px;
  }

  .course-item .lesson-list li .lesson-title {
    /* 如下3句，文本內容過多，會自動隱藏，並顯示省略符號 */
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    display: inline-block;
    max-width: 200px;
  }

  .course-item .lesson-list li:hover {
    background-image: url("/static/image/play-icon-yellow.svg");
    color: #ffc210;
  }

  .course-item .lesson-list li .free {
    width: 34px;
    height: 20px;
    color: #fd7b4d;
    vertical-align: super;
    margin-left: 10px;
    border: 1px solid #fd7b4d;
    border-radius: 2px;
    text-align: center;
    font-size: 13px;
    white-space: nowrap;
  }

  .course-item .lesson-list li:hover .free {
    color: #ffc210;
    border-color: #ffc210;
  }

  .course-item .pay-box::after {
    content: "";
    display: block;
    clear: both;
  }

  .course-item .pay-box .discount-type {
    padding: 6px 10px;
    font-size: 16px;
    color: #fff;
    text-align: center;
    margin-right: 8px;
    background: #fa6240;
    border: 1px solid #fa6240;
    border-radius: 10px 0 10px 0;
    float: left;
  }

  .course-item .pay-box .discount-price {
    font-size: 24px;
    color: #fa6240;
    float: left;
  }

  .course-item .pay-box .original-price {
    text-decoration: line-through;
    font-size: 14px;
    color: #9b9b9b;
    margin-left: 10px;
    float: left;
    margin-top: 10px;
  }

  .course-item .pay-box .buy-now {
    width: 120px;
    height: 38px;
    background: transparent;
    color: #fa6240;
    font-size: 16px;
    border: 1px solid #fd7b4d;
    border-radius: 3px;
    transition: all .2s ease-in-out;
    float: right;
    text-align: center;
    line-height: 38px;
  }

  .course-item .pay-box .buy-now:hover {
    color: #fff;
    background: #ffc210;
    border: 1px solid #ffc210;
  }
</style>

View Code

　　效果：vue-router

　　4. 補充：針對頁面頭部當前頁面導航高亮效果

　　修改Header.vue組件的代碼：less

<div class="logo full-left">
          <!--<router-link to="/"><img src="/static/image/logo.svg" alt=""></router-link>-->
          <!--跳轉home頁面-->
          <img @click="jump('/')" src="/static/image/logo.svg" alt="">
        </div>
        <ul class="nav full-left">
            <!--<li><span>免費課</span></li>-->
            <!--<li><span><router-link to="/course">免費課</router-link></li>-->
            <!--跳轉免費課-->
            <li><span @click="jump('/course')" :class="this_nav=='/course'?'this':''">免費課</span></li>
            <!--跳轉輕課  -->
          <li><span @click="jump('/light-course')" :class="this_nav=='/light-course'?'this':''">輕課</span></li>
            <li><span>學位課</span></li>
            <li><span>題庫</span></li>
            <li><span>老男孩教育</span></li>
        </ul>

　　注意：要在style里加上this的樣式運維

.header .nav li .this {
  color: #4a4a4a;
  border-bottom: 4px solid #ffc210;
}

　　最後加上script的代碼：機器學習

<script>
    export default {
        name: "Header",
      data(){
          return {
            this_nav: "",
          }
      },
      created(){
          this.this_nav = localStorage.this_nav;
      },
      methods: {
          jump(nav){
            localStorage.this_nav = nav;
            //  vue-router除了提供router-link標籤跳轉頁面之外，還提供了 js跳轉的方式
            this.$router.push(nav);
          }
      }
    }
</script>

　　效果：ide

三. 購物車頁面

　　1. 註冊路由信息

　　在router/index.js註冊：svg

// 引入路由類和Vue類
import Vue from 'vue'
import Router from 'vue-router'

import Home from '../components/Home'
import Login from '../components/Login'
import Course from '../components/Course'
import Cart from '../components/Cart'

// 註冊路由類
Vue.use(Router);

// 初始化路由對象
export default new Router({
  // 設置路由模式爲‘history’，去掉默認的#
  mode: "history",
  routes: [
    // 路由列表
    // { // 一個字典，表明一條url
      // name: "路由別名",
      // path: "路由地址",
      // component: 組件類名,
    // }
    {
      name: "Home",
      path: "/",
      component: Home
    },
    {
      name: "Home",
      path: "/home",
      component: Home
    },
    {
      name: "Login",
      path: "/login",
      component: Login
    },
    {
      name: "Course",
      path: "/course",
      component: Course,
    },
    {
      name: "Cart",
      path: "/cart",
      component: Cart,
    }

  ]
})

　　在頭部公共組件中打通購物車的連接地址，Header.vue

<span @click="jump('/cart')">購物車</span>

　　2. 在components下建立Cart.vue組件文件

<template>
    <div class="cart">
      <Header></Header>
      <div class="cart_info">
        <div class="cart_title">
          <span class="text">個人購物車</span>
          <span class="total">共4門課程</span>
        </div>
        <div class="cart_table">
          <div class="cart_head_row">
            <span class="doing_row"></span>
            <span class="course_row">課程</span>
            <span class="expire_row">有效期</span>
            <span class="price_row">單價</span>
            <span class="do_more">操做</span>
          </div>
          <div class="cart_course_list">
            <CartItem></CartItem>
            <CartItem></CartItem>
            <CartItem></CartItem>
            <CartItem></CartItem>
          </div>
          <div class="cart_footer_row">
            <span class="cart_select"><label> <el-checkbox v-model="checked"></el-checkbox><span>全選</span></label></span>
            <span class="cart_delete"><i class="el-icon-delete"></i> <span>刪除</span></span>
            <span class="goto_pay">去結算</span>
            <span class="cart_total">總計：¥0.0</span>
          </div>
        </div>
      </div>
      <Footer></Footer>
    </div>
</template>

<script>
  import Header from './common/Header'
  import Footer from './common/Footer'
  import CartItem from './common/CartItem'
  export default {
      name: "Cart",
    data(){
      return {
        checked: false,
      }
    },
    components: {
        Header,
        Footer,
        CartItem,
    }
  }
</script>

<style scoped>
  .cart_info{
  width: 1200px;
  margin: 0 auto 200px;
}
.cart_title{
  margin: 25px 0;
}
.cart_title .text{
  font-size: 18px;
  color: #666;
}
.cart_title .total{
  font-size: 12px;
  color: #d0d0d0;
}
.cart_table{
  width: 1170px;
}
.cart_table .cart_head_row{
  background: #F7F7F7;
  width: 100%;
  height: 80px;
  line-height: 80px;
  padding-right: 30px;
}
.cart_table .cart_head_row::after{
  content: "";
  display: block;
  clear: both;
}
.cart_table .cart_head_row .doing_row,
.cart_table .cart_head_row .course_row,
.cart_table .cart_head_row .expire_row,
.cart_table .cart_head_row .price_row,
.cart_table .cart_head_row .do_more{
  padding-left: 10px;
  height: 80px;
  float: left;
}
.cart_table .cart_head_row .doing_row{
  width: 78px;
}
.cart_table .cart_head_row .course_row{
  width: 530px;
}
.cart_table .cart_head_row .expire_row{
  width: 188px;
}
.cart_table .cart_head_row .price_row{
  width: 162px;
}
.cart_table .cart_head_row .do_more{
  width: 162px;
}

.cart_footer_row{
  padding-left: 30px;
  background: #F7F7F7;
  width: 100%;
  height: 80px;
  line-height: 80px;
}
.cart_footer_row .cart_select span{
  margin-left: 15px;
  font-size: 18px;
  color: #666;
}
.cart_footer_row .cart_delete{
  margin-left: 58px;
}
.cart_delete .el-icon-delete{
  font-size: 18px;
}

.cart_delete span{
  margin-left: 15px;
  cursor: pointer;
  font-size: 18px;
  color: #666;
}
.cart_total{
  float: right;
  margin-right: 62px;
  font-size: 18px;
  color: #666;
}
.goto_pay{
  float: right;
  width: 159px;
  height: 80px;
  outline: none;
  border: none;
  background: #ffc210;
  font-size: 18px;
  color: #fff;
  text-align: center;
  cursor: pointer;
}
</style>

View Code

　　3. 完善購物車中的數據展現

　　注意：這裏咱們採用的是父子組件倆完成的，其中一個子組件就是一個商品信息。

　　在common下新建一個CartItem.vue，代碼：

<template>
    <div class="cart_item">
      <div class="cart_column column_1">
        <el-checkbox class="my_el_checkbox" v-model="checked"></el-checkbox>
      </div>
      <div class="cart_column column_2">
        <img src="/static/image/course_demo.png" alt="">
        <span><router-link to="/course/detail/1">爬蟲從入門到進階</router-link></span>
      </div>
      <div class="cart_column column_3">
        <el-select v-model="expire" size="mini" placeholder="請選擇購買有效期" class="my_el_select">
          <el-option label="1個月有效" value="30" key="30"></el-option>
          <el-option label="2個月有效" value="60" key="60"></el-option>
          <el-option label="3個月有效" value="90" key="90"></el-option>
          <el-option label="永久有效" value="10000" key="10000"></el-option>
        </el-select>
      </div>
      <div class="cart_column column_4">¥499.0</div>
      <div class="cart_column column_4">刪除</div>
    </div>
</template>

<script>
export default {
    name: "CartItem",
    data(){
      return {
        checked:false,
        expire: "1個月有效",
      }
    }
}
</script>

<style scoped>
.cart_item::after{
  content: "";
  display: block;
  clear: both;
}
.cart_column{
  float: left;
  height: 250px;
}
.cart_item .column_1{
  width: 88px;
  position: relative;
}
.my_el_checkbox{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  width: 16px;
  height: 16px;
}
.cart_item .column_2 {
  padding: 67px 10px;
  width: 520px;
  height: 116px;
}
.cart_item .column_2 img{
  width: 175px;
  height: 115px;
  margin-right: 35px;
  vertical-align: middle;
}
.cart_item .column_3{
  width: 197px;
  position: relative;
  padding-left: 10px;
}
.my_el_select{
  width: 117px;
  height: 28px;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}
.cart_item .column_4{
  padding: 67px 10px;
  height: 116px;
  width: 142px;
  line-height: 116px;
}

</style>

View Code

　　效果：

四. 課程詳情頁

　　1. 註冊路由信息

　　在router/index.js註冊：

// 引入路由類和Vue類
import Vue from 'vue'
import Router from 'vue-router'

import Home from '../components/Home'
import Login from '../components/Login'
import Course from '../components/Course'
import Cart from '../components/Cart'
import Detail from '../components/Detail'

// 註冊路由類
Vue.use(Router);

// 初始化路由對象
export default new Router({
  // 設置路由模式爲‘history’，去掉默認的#
  mode: "history",
  routes: [
    // 路由列表
    // { // 一個字典，表明一條url
      // name: "路由別名",
      // path: "路由地址",
      // component: 組件類名,
    // }
    {
      name: "Home",
      path: "/",
      component: Home
    },
    {
      name: "Home",
      path: "/home",
      component: Home
    },
    {
      name: "Login",
      path: "/login",
      component: Login
    },
    {
      name: "Course",
      path: "/course",
      component: Course,
    },
    {
      name: "Cart",
      path: "/cart",
      component: Cart,
    },
    {
      name:"Detail",
      path: "/course/detail/:id",  // :id爲參數佔位符
      component: Detail,
    },

  ]
})

View Code

　　在課程列表頁中的li裏面新增一個router-link 跳轉連接，Course.vue

<h3>
    <!--Python開發21天入門-->
    <router-link to="/course/detail/1">Python開發21天入門</router-link>
    <span><img src="/static/image/avatar1.svg" alt="">100人已加入學習</span>
</h3>

　　在購物車詳情子組件中，CartItem.vue

<span><router-link to="/course/detail/1">爬蟲從入門到進階</router-link></span>

　　2. 在components下建立Detail.vue組件文件

<template>
  <div class="course_detail">
      <Header></Header>
      <div class="content">
        <div class="course_info">
          <div class="video">視頻</div>
          <div class="core">
            <h3>爬蟲從入門到進階</h3>
            <p class="student">
              <span>3335人在學</span>
              <span>課程總時長：65課時/17小時</span>
              <span>難度：高級</span>
            </p>
            <div class="active">
              <span class="discount_type">限時折扣</span>
              <span class="duration">距離結束：僅剩 196天 12小時 34分 <time>02</time> 秒</span>
            </div>
            <div class="price">
              <span class="tips">活動價</span>
              <span class="discount_price">¥99.50</span>
              <span class="original_price">¥199.00</span>
            </div>
            <div class="btn">
              <span class="buy_now">當即購買</span>
              <span class="free_study">免費試學</span>
              <span class="add_cart"><img src="/static/image/cart-yellow.svg" alt="">加入購物車</span>
            </div>
          </div>
        </div>
        <div class="course_nav">
          <ul>
            <li :class="index==0?'this':''" @click="index=0">詳情介紹</li>
            <li :class="index==1?'this':''" @click="index=1">課程章節 <span class="free_btn">(試學)</span></li>
            <li :class="index==2?'this':''" @click="index=2">用戶評論 (6)</li>
            <li :class="index==3?'this':''" @click="index=3">常見問題</li>
          </ul>
        </div>
        <div class="other_info">
          <div class="course_about">
              <div class="nav_item course_about"  v-show="index==0">
                <img src="/static/image/detail_詳情介紹.jpeg" alt="">
                <img src="/static/image/detail_詳情介紹2.jpeg" alt="">
              </div>
              <div class="nav_item course_about"  v-show="index==1">
                課程章節
              </div>
              <div class="nav_item course_about"  v-show="index==2">
                用戶評論
              </div>
              <div class="nav_item course_about"  v-show="index==3">
                常見問題
              </div>
          </div>
          <div class="teacher_about"></div>
        </div>
      </div>
      <Footer></Footer>
    </div>
</template>

<script>
  import Header from './common/Header'
  import Footer from './common/Footer'

  export default {
    name: "Detail",
    data(){
      return {
        index: 0,
      }
    },
    created() {
      // 獲取課程ID
      console.log(this.$route.params.id);
    },
    components: {
      Header,
      Footer
    }
  }
</script>

<style scoped>
.course_info{
  width: 1200px;
  padding-top: 30px;
  margin: 0 auto;
}
.course_info::after{
  content: "";
  display: block;
  clear: both;
}
.course_info .video{
  width: 690px;
  height: 388px;
  background-color: #000;
  float: left;
}
.course_info .core{
  float: left;
  width: 510px;
}
.course_info .core h3{
  font-size: 20px;
  color: #333;
  padding: 10px 23px;
  font-weight: normal;
}
.course_info .core .student{
  padding-left: 23px;
  padding-right: 23px;
  padding-bottom: 16px;
  font-size: 14px;
  color: #9b9b9b;
}
.course_info .core .student span{
  margin-right: 28px;
}
.course_info .core .active{
  background: #fa6240;
  font-size: 14px;
  padding: 10px 23px;
}
.course_info .active .discount_type{
  font-size: 16px;
  color: #fff;
  letter-spacing: .36px;
  line-height: 24px;
}
.course_info .active .duration{
  font-size: 14px;
  color: #fff;
  float: right;
  line-height: 26px;
}
.course_info .active .duration time{
  background-color: #fff;
  color: #5e5e5e;
  width: 24px;
  padding: 6px 4px;
}
.course_info .price{
  padding: 5px 23px;
  font-size: 14px;
  color: #4a4a4a;
}
.course_info .price .discount_price{
  font-size: 26px;
  color: #fa6240;
  margin-left: 10px;
  display: inline-block;
  margin-bottom: -5px;
}
.course_info .price .original_price{
  font-size: 14px;
  color: #9b9b9b;
  margin-left: 10px;
  text-decoration: line-through;
}
.course_info{
  position: relative;
}
.course_info .core .btn{
  position: absolute;
  bottom: 10px;
  width: 486px;
  padding-left: 24px;
}
.course_info .core .btn::after{
  content: "";
  display: block;
  clear: both;
}
.course_info .core .buy_now{
  text-align: center;
  width: 125px;
  height: 40px;
  line-height: 40px;
  background: #ffc210;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  margin-right: 15px;
  float: left;
}
.course_info .core .free_study{
  width: 125px;
  height: 40px;
  border-radius: 4px;
  cursor: pointer;
  margin-right: 15px;
  background: #fff;
  color: #ffc210;
  border: 1px solid #ffc210;
  text-align: center;
  line-height: 40px;
  float: left;
}
.course_info .core .add_cart{
  font-size: 14px;
  color: #ffc210;
  text-align: center;
  cursor: pointer;
  float: right;
  line-height: 42px;

}
.course_info .core .add_cart img{
  width: 20px;
  height: auto;
  margin-right: 7px;
  vertical-align: middle;
}
.content .course_nav{
  width: 100%;
  height: auto;
  background: #fff;
  margin-bottom: 30px;
  box-shadow: 0 2px 4px 0 #f0f0f0;
}
.content .course_nav ul{
  width: 1200px;
  margin: 0 auto;
}
.content .course_nav ul::after{
  content: "";
  display: block;
  clear: both;
}
.content .course_nav ul li{
  margin: 0 auto;
  color: #4a4a4a;
  margin-right: 15px;
  padding: 26px 20px 16px;
  font-size: 17px;
  cursor: pointer;
  float: left;
}
.content .course_nav ul li.this{
  color: #ffc210;
  border-bottom: 2px solid #ffc210;
}
.content .course_nav ul li .free_btn{
  color: #fb7c55;
}


.content .other_info {
  width: 1200px;
  margin: auto;
}
.content .other_info::after {
  content:"";
  display: block;
  clear: both;
}
.content .other_info .course_about{
    width: 880px;
    height: auto;
    padding: 20px;
    background: #fff;
    float: left;
    overflow: hidden;
    position: relative;
    box-shadow: 0 2px 4px 0 #f0f0f0;
}

.content .course_about img{
    width: 100%;
}
</style>

View Code

　　效果：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。