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>
<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
<template> <div class="course"> </div> </template> <script> export default { name: "Course", data(){ return { } }, } </script> <style scoped> </style>
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,
},
]
})
<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">篩 選:</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>
<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> | <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>
<span><router-link to="/cart">購物車</router-link></span>
import Cart from "@/components/Cart" export default new Router({ // 路由跳轉模式,注意使用 history mode: "history", // 路由規則 routes:[ 。。。 ,{ name:"Cart", path: "/cart", component: Cart, }, ] })
<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>