调整首页细节
- 固定头部
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标签中要设置全局样式，所以不需要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组件文件,代码如下:
<template>
<div class="course"> </div>
</template> <script>
export default {
name: "Course",
data(){
return { }
},
}
</script> <style scoped> </style>- 在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,
}, ]
}) - 完成免费课课程列表
文件代码结构，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">筛 选:</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>
购物车页面
- 在头部公共组件中打通购物车的链接地址，Header.vue
<span><router-link to="/cart">购物车</router-link></span>
-
创建购物车页面组件
在components/创建Cart.vue组件文件 - 注册路由地址
routers/index.js代码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>