Vue-項目之免費課和購物車實現

調整首頁細節

  1. 固定頭部
    App.vue中代碼
    
    <style>
      body{
        padding: 0;
        margin:0;
        margin-top: 80px;
      }
      
    </style>
    
    
    Header中代碼:
    
    <style scoped>
      .header{
        top:0;
        left:0;
        right:0;
        margin: auto;
        background-color: #fff;
        height: 80px;
        z-index: 1000;
        position: fixed;
        box-shadow: 0 0.5px 0.5px 0 #c9c9c9;
      }
    
    </style>

     

  2. 調整輪播圖左右兩邊的按鈕
    注意,style標籤中要設置全局樣式,因此不須要scoped
    <style>
    .el-carousel__arrow{
      width: 100px!important;
      height: 100px!important;
    }
    .el-icon-arrow-left{
      font-size: 35px;
      margin-left: 50px;
    }
    .el-carousel__arrow--left{
      left: -50px;
    }
    </style>

     

免費課

在組件目錄components下建立Course.vue組件文件,代碼以下:vue

  1. <template>
      <div class="course">
    
      </div>
    </template>
    
    <script>
    export default {
      name: "Course",
      data(){
        return {
    
        }
      },
    }
    </script>
    
    
    <style scoped>
      
    </style>

     

  2. 在routers/index.js路由中註冊路由
    import Vue from "vue"
    import Router from "vue-router"
    
    // 導入能夠被用戶訪問的組件
    import Home from "@/components/Home"
    import Course from "@/components/Course"
    
    Vue.use(Router);
    
    export default new Router({
      mode: "history",
      routes:[
        // 路由列表
        {
          path: "/",
          name: "Home",
          component:Home,
        },
        {
          path: "/home",
          name: "Home",
          component:Home,
        },
        {
          path: "/course",
          name: "Course",
          component:Course,
        },
    
      ]
    })

     

  3. 完成免費課課程列表
    文件代碼結構,Course.vue代碼
    <template>
      <div class="course">
        <Header/>
        <div class="main">
          <!-- 篩選功能 -->
          <div class="top">
            <ul class="condition condition1">
              <li class="cate-condition">課程分類:</li>
              <li class="item current">所有</li>
              <li class="item">Python</li>
              <li class="item">Linux運維</li>
              <li class="item">Python進階</li>
              <li class="item">開發工具</li>
              <li class="item">Go語言</li>
              <li class="item">機器學習</li>
              <li class="item">技術生涯</li>
            </ul>
            <ul class="condition condition2">
              <li class="cate-condition">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;選:</li>
              <li class="item current">默認</li>
              <li class="item">人氣</li>
              <li class="item price">價格</li>
              <li class="course-length">共21個課程</li>
            </ul>
          </div>
          <!-- 課程列表 --->
          <div class="list">
            <ul>
              <li class="course-item">
                <div class="course-cover">
                  <img src="../../static/course/Python.jpeg" alt="">
                </div>
                <div class="course-info">
                  <div class="course-title">
                    <h3>Python開發21天入門</h3>
                    <span>46520人已加入學習</span>
                  </div>
                  <p class="teacher">
                    <span class="info">Alex 金角大王 老男孩Python教學總監</span>
                    <span class="lesson">共154課時/更新完成</span>
                  </p>
                  <ul class="lesson-list">
                    <li>
                      <p class="lesson-title">01 | 經常使用模塊學習-模塊的種類和導入方法</p>
                      <span class="free">免費</span>
                    </li>
                    <li>
                      <p class="lesson-title">02 | 編程語言介紹(三)高級語言</p>
                      <span class="free">免費</span>
                    </li>
                    <li>
                      <p class="lesson-title">03 | 編程語言介紹(一)</p>
                      <span class="free">免費</span>
                    </li>
                    <li>
                      <p class="lesson-title">04 | 課程介紹(二)-Python與其餘語言的區別</p>
                      <span class="free">免費</span>
                    </li>
                  </ul>
                  <div class="buy-info">
                    <span class="discount">限時免費</span>
                    <span class="present-price">¥0.00元</span>
                    <span class="original-price">原價:29.00元</span>
                    <button class="buy-now">當即購買</button>
                  </div>
                </div>
              </li>
              <li class="course-item">
                <div class="course-cover">
                  <img src="../../static/course/Linux.jpeg" alt="">
                </div>
                <div class="course-info">
                  <div class="course-title">
                    <h3>Linux系統基礎5周入門</h3>
                    <span>23213人已加入學習</span>
                  </div>
                  <p class="teacher">
                    <span class="info">李泳誼 老男孩Linux學科帶頭人</span>
                    <span class="lesson">共148課時/已更新147課時</span>
                  </p>
                  <ul class="lesson-list">
                    <li>
                      <p class="lesson-title">01 | 服務器頭部介紹 </p>
                      <span class="free">免費</span>
                    </li>
                    <li>
                      <p class="lesson-title">02 | 第一章總結 </p>
                      <span class="free">免費</span>
                    </li>
                    <li>
                      <p class="lesson-title">03 | 服務器硬件詳解 </p>
                      <span class="free">免費</span>
                    </li>
                    <li>
                      <p class="lesson-title">04 | 服務器核心硬件-raid卡-光驅</p>
                      <span class="free">免費</span>
                    </li>
                  </ul>
                  <div class="buy-info">
                    <span class="discount">限時免費</span>
                    <span class="present-price">¥0.00元</span>
                    <span class="original-price">原價:9.00元</span>
                    <button class="buy-now">當即購買</button>
                  </div>
                </div>
              </li>
              <li class="course-item">
                <div class="course-cover">
                  <img src="../../static/course/pycharm.jpeg" alt="">
                </div>
                <div class="course-info">
                  <div class="course-title">
                    <h3>Pycharm</h3>
                    <span>2247人已加入學習</span>
                  </div>
                  <p class="teacher">
                    <span class="info">李文周 前段搜狗自身工程師</span>
                    <span class="lesson">共1課時/更新完成</span>
                  </p>
                  <ul class="lesson-list">
                    <li>
                      <p class="lesson-title">01 | Pycharm使用祕籍視頻課程</p>
                      <span class="free">免費</span>
                    </li>
                  </ul>
                  <div class="buy-info">
                    <span class="discount">限時免費</span>
                    <span class="present-price">¥0.00元</span>
                    <span class="original-price">原價:9.00元</span>
                    <button class="buy-now">當即購買</button>
                  </div>
                </div>
              </li>
              <li class="course-item">
                <div class="course-cover">
                  <img src="../../static/course/PC列表頁.jpeg" alt="">
                </div>
                <div class="course-info">
                  <div class="course-title">
                    <h3>網管到CEO的10年逆襲之路</h3>
                    <span>4580人已加入學習</span>
                  </div>
                  <p class="teacher">
                    <span class="info">Alex 金角大王 老男孩Python教學總監</span>
                    <span class="lesson">共10課時/更新完成</span>
                  </p>
                  <ul class="lesson-list">
                    <li>
                      <p class="lesson-title">01 | 技術人員如何度過經濟寒冬</p>
                      <span class="free">免費</span>
                    </li>
                    <li>
                      <p class="lesson-title">02 | 7天集訓營開班直播</p>
                      <span class="free">免費</span>
                    </li>
                    <li>
                      <p class="lesson-title">03 | 失敗性人格剖析</p>
                    </li>
                    <li>
                      <p class="lesson-title">04 | 焦慮改變命運</p>
                    </li>
                  </ul>
                  <div class="buy-info">
                    <span class="discount">限時折扣</span>
                    <span class="present-price">¥1.00元</span>
                    <span class="original-price">原價:100.00元</span>
                    <button class="buy-now">當即購買</button>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <Footer/>
      </div>
    </template>
    
    <script>
    import Header from "./common/Header"
    import Footer from "./common/Footer"
    export default {
      name: "Course",
      data(){
        return {
    
        }
      },
      components:{Header,Footer}
    }
    </script>
    
    <style scoped>
    .main{
        width: 1100px;
        height: auto;
        margin: 0 auto;
        padding-top: 35px;
    }
    .main .top{
        margin-bottom: 35px;
        padding: 25px 30px 25px 20px;
        background: #fff;
        border-radius: 4px;
        box-shadow: 0 2px 4px 0 #f0f0f0;
    }
    .condition{
        border-bottom: 1px solid #333;
        border-bottom-color: rgba(51,51,51,.05);
        padding-bottom: 18px;
        margin-bottom: 17px;
        overflow: hidden;
    }
    .condition li{
        float: left;
    }
    .condition .cate-condition{
        color: #888;
        font-size: 16px;
    }
    .condition .item{
        padding: 6px 16px;
        line-height: 16px;
        margin-left: 14px;
        position: relative;
        transition: all .3s ease;
        cursor: pointer;
        color: #4a4a4a;
    }
    .condition1 .current{
        color: #ffc210;
        border: 1px solid #ffc210!important;
        border-radius: 30px;
    }
    .condition2 .current{
      color: #ffc210;
    }
    .condition .price:before{
        content: "";
        width: 0;
        border: 5px solid transparent;
        border-top-color: #d8d8d8;
        position: absolute;
        right: 0;
        bottom: 2.5px;
    }
    .condition .price:after{
        content: "";
        width: 0;
        border: 5px solid transparent;
        border-bottom-color: #ffc210;
        position: absolute;
        right: 0;
        top: 2.5px;
    }
    .condition2 .course-length{
        float: right;
        font-size: 14px;
        color: #9b9b9b;
    }
    .course-item{
        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);
        transition: all .2s ease;
        overflow: hidden;
        cursor:pointer;
    }
    .course-cover {
        width: 423px;
        height: 210px;
        margin-right: 30px;
        float: left;
    }
    .course-info{
        width: 597px;
        float: left;
    }
    .course-title{
      margin-bottom: 8px;
      overflow: hidden;
    
    }
    .course-title h3{
      font-size: 26px;
      color: #333;
      float: left;
    }
    .course-title span {
      float: right;
      font-size: 14px;
      color: #9b9b9b;
      margin-top: 12px;
      text-indent: 1em; /* 縮進 2字符寬度 */
      background: url("../assets/people.svg") no-repeat 0px 3px;
    }
    .teacher{
        justify-content: space-between;
        font-size: 14px;
        color: #9b9b9b;
        margin-bottom: 14px;
        padding-bottom: 14px;
        border-bottom: 1px solid #333;
        border-bottom-color: rgba(51,51,51,.05);
    }
    .teacher .lesson{
        float: right;
    }
    .lesson-list{
      overflow: hidden;
    }
    .lesson-list li{
        width: 49%;
        margin-bottom: 15px;
        cursor: pointer;
        float: left;
        margin-right:1%;
    }
    .lesson-list li .player{
        width: 16px;
        height: 16px;
        vertical-align: text-bottom;
    }
    .lesson-list li .lesson-title {
      display: inline-block;
      max-width: 227px;
      text-overflow: ellipsis; /* 若是字體太多超出元素的寬度,則添加省略符號 */
      color: #666;
      overflow: hidden;
      white-space: nowrap;
      font-size: 14px;
      vertical-align: text-bottom; /* 文本的垂直對齊方式: text-botton 文本底部對齊 */
      text-indent: 1.5em;
      background: url(../../static/player.svg) no-repeat 0px 3px;
    }
    
    .lesson-list .free{
        width: 34px;
        height: 20px;
        color: #fd7b4d;
        margin-left: 10px;
        border: 1px solid #fd7b4d;
        border-radius: 2px;
        text-align: center;
        font-size: 13px;
        white-space: nowrap;
    }
    .lesson-list li:hover .lesson-title{
        color: #ffc210;
        background-image: url(../../static/player2.svg);
    }
    .lesson-list li:hover .free{
        border-color: #ffc210;
        color: #ffc210;
    }
    
    .buy-info .discount{
        padding: 0px 10px;
        font-size: 16px;
        color: #fff;
        display: inline-block;
        height: 36px;
        text-align: center;
        margin-right: 8px;
        background: #fa6240;
        border: 1px solid #fa6240;
        border-radius: 10px 0 10px 0;
        line-height: 36px;
    }
    .present-price{
        font-size: 24px;
        color: #fa6240;
    }
    .original-price{
        text-decoration: line-through;
        font-size: 14px;
        color: #9b9b9b;
        margin-left: 10px;
    }
    .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;
        margin-top: 5px;
    }
    .buy-now:hover{
        color: #fff;
        background: #ffc210;
        border: 1px solid #ffc210;
        cursor: pointer;
    }
    </style>
    View Code
  4. 針對頁面頭部部分增長高亮和登錄按鈕,根據登錄狀態顯示登錄註冊按鈕
    <template>
      <div class="header">
        <el-container>
          <el-header>
            <el-row>
              <el-col class="logo" :span="3">
                <a href="/">
                  <img src="@/assets/head-logo.svg" alt="">
                </a>
              </el-col>
              <el-col class="nav" :span="16">
                  <el-row>
                    <el-col :span="3"><router-link class="current" to="/">免費課</router-link></el-col>
                    <el-col :span="3"><router-link to="/">輕課</router-link></el-col>
                    <el-col :span="3"><router-link to="/">學位課</router-link></el-col>
                    <el-col :span="3"><router-link to="/">題庫</router-link></el-col>
                    <el-col :span="3"><router-link to="/">教育</router-link></el-col>
                  </el-row>
              </el-col>
              <el-col class="login-bar" :span="5">
                <el-row v-if="token">
                  <el-col class="cart-ico" :span="9">
                    <router-link to="">
                      <b class="goods-number">0</b>
                      <img class="cart-icon" src="@/assets/cart.svg" alt="">
                      <span>購物車</span>
                    </router-link>
                  </el-col>
                  <el-col class="study" :span="8" :offset="2"><router-link to="">學習中心</router-link></el-col>
                  <el-col class="member" :span="5">
                    <el-menu class="el-menu-demo" mode="horizontal">
                      <el-submenu index="2">
                        <template slot="title"><router-link to=""><img src="@/assets/logo@2x.png" alt=""></router-link></template>
                        <el-menu-item index="2-1">個人帳戶</el-menu-item>
                        <el-menu-item index="2-2">個人訂單</el-menu-item>
                        <el-menu-item index="2-3">個人優惠卷</el-menu-item>
                        <el-menu-item index="2-3">退出登陸</el-menu-item>
                      </el-submenu>
                    </el-menu>
                  </el-col>
                </el-row>
                <el-row v-else>
                  <el-col class="cart-ico" :span="9">
                    <router-link to="">
                      <img class="cart-icon" src="@/assets/cart.svg" alt="">
                      <span>購物車</span>
                    </router-link>
                  </el-col>
                  <el-col :span="10" :offset="5">
                    <span class="register">
                      <router-link to="/login">登陸</router-link>
                      &nbsp;&nbsp;|&nbsp;&nbsp;
                      <router-link to="/register">註冊</router-link>
                    </span>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </el-header>
        </el-container>
      </div>
    </template>
    
    <script>
      export default {
        name: "Header",
        data(){
          return {
            // 設置一個登陸標識,表示是否登陸
            token: true,
          };
        }
      }
    </script>
    
    <style scoped>
      .header{
        top:0;
        left:0;
        right:0;
        margin: auto;
        background-color: #fff;
        height: 80px;
        z-index: 1000;
        position: fixed;
        box-shadow: 0 0.5px 0.5px 0 #c9c9c9;
      }
      .header .el-container{
        width: 1200px;
        margin: 0 auto;
      }
      .el-header{
        height: 80px!important;
        padding:0;
      }
      .logo{
    
      }
      .logo img{
        padding-top: 22px;
      }
    
      .nav{
        margin-top: 22px;
      }
    
      .nav .el-col a{
        display: inline-block;
        text-align: center;
        padding-bottom: 16px;
        padding-left: 5px;
        padding-right: 5px;
        position: relative;
        font-size: 16px;
        margin-left: 20px;
      }
    
      .nav .el-col .current{
        color: #4a4a4a;
        border-bottom: 4px solid #ffc210;
      }
    
      .login-bar{
        margin-top: 22px;
      }
      .cart-ico{
        position: relative;
        border-radius: 17px;
      }
      .cart-ico:hover{
        background: #f0f0f0;
      }
      .goods-number{
        width: 16px;
        height: 16px;
        line-height: 17px;
        font-size: 12px;
        color: #fff;
        text-align: center;
        background: #fa6240;
        border-radius: 50%;
        transform: scale(.8);
        position: absolute;
        left: 16px;
        top: -1px;
      }
      .cart-icon{
        width: 15px;
        height: auto;
        margin-left: 6px;
      }
      .cart-ico span{
        margin-left: 12px;
      }
      .member img{
        width: 26px;
        height: 26px;
        border-radius: 50%;
        display: inline-block;
      }
      .member img:hover{
        border: 1px solid yellow;
      }
      .el-menu.el-menu--horizontal{
        border-bottom: None;
      }
    </style>
    View Code

購物車頁面

  1. 在頭部公共組件中打通購物車的連接地址,Header.vue
    <span><router-link to="/cart">購物車</router-link></span>
  2.  建立購物車頁面組件
    在components/建立Cart.vue組件文件
  3. 註冊路由地址
    routers/index.js代碼
    import Cart from "@/components/Cart"
    
    export default new Router({
      // 路由跳轉模式,注意使用 history
      mode: "history",
    
      // 路由規則
      routes:[
        。。。
        ,{
          name:"Cart",
          path: "/cart",
          component: Cart,
        },
      ]
    })
  4. 顯示錶格數據
    <template>
        <div class="cart">
          <Header/>
          <div class="main">
            <div class="cart-title">
              <h3>個人購物車 <span> 共2門課程</span></h3>
              <el-table :data="courseData" style="width:100%">
                <el-table-column type="selection" label="" width="87"></el-table-column>
                <el-table-column prop="title" label="課程" width="540"></el-table-column>
                <el-table-column prop="expire" label="有效期" width="216"></el-table-column>
                <el-table-column prop="price" label="單價" width="162"></el-table-column>
                <el-table-column label="操做" width="162"></el-table-column>
              </el-table>
            </div>
            <div calss="cart-info"></div>
          </div>
          <Footer/>
        </div>
    </template>
    
    <script>
    import Header from "./common/Header"
    import Footer from "./common/Footer"
    export default {
        name: "Cart",
        data(){
          return{
            courseData:[
              {title:"課程標題一",expire:"2016",price:"12.00"},
              {title:"課程標題一",expire:"2016",price:"12.00"},
              {title:"課程標題一",expire:"2016",price:"12.00"},
              {title:"課程標題一",expire:"2016",price:"12.00"},
              {title:"課程標題一",expire:"2016",price:"12.00"},
              {title:"課程標題一",expire:"2016",price:"12.00"},
              {title:"課程標題一",expire:"2016",price:"12.00"},
              {title:"課程標題一",expire:"2016",price:"12.00"},
            ]
          }
        },
        components:{Header,Footer}
    }
    </script>
    
    <style scoped>
    .main{
      width: 1200px;
      margin: 0 auto;
      overflow: hidden; /* 解決body元素和標題之間的上下外邊距的塌陷問題 */
    }
    .cart-title h3{
      font-size: 18px;
      color: #666;
      margin: 25px 0;
    }
    .cart-title h3 span{
      font-size: 12px;
      color: #d0d0d0;
      display: inline-block;
    }
    </style>
相關文章
相關標籤/搜索