課程頁面設計
路由：router.jscss
{
path: '/course',
name: 'course',
component: Course
},
視圖：Course.vuevue
<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">篩 選:</li>
<li class="default this">默認</li>
<li class="hot this">人氣</li>
<li class="price this">價格</li>
</ul>
<p class="condition-result">共21個課程</p>
</div>
</div>
<!-- 課程列表 -->
<div class="course-list">
<div class="course-item">
<div class="course-image">
<img src="@/assets/img/course-cover.jpeg" alt="">
</div>
<div class="course-info">
<h3>
<router-link to="/course/detail/1">Python開發21天入門</router-link>
<span><img src="@/assets/img/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="@/assets/img/course-cover.jpeg" alt="">
</div>
<div class="course-info">
<h3>Python開發21天入門 <span><img src="@/assets/img/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="@/assets/img/course-cover.jpeg" alt="">
</div>
<div class="course-info">
<h3>Python開發21天入門 <span><img src="@/assets/img/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="@/assets/img/course-cover.jpeg" alt="">
</div>
<div class="course-info">
<h3>Python開發21天入門 <span><img src="@/assets/img/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 "@/components/Header"
import Footer from "@/components/Footer"
export default {
name: "Course",
data() {
return {
category: 0,
}
},
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: 0px;
height: 0px;
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("/src/assets/img/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("/src/assets/img/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>
相關文章
- 1. 網頁設計課程設計報告
- 2. 《網頁設計》課程學習（20170911）
- 3. 課程設計
- 4. 【數據庫課程設計】主頁面（二）
- 5. Java課程設計+購物車WEB頁面
- 6. C語言，課程設計，簡單可視化頁面（僞）
- 7. 《面向對象程序設計》課程設計
- 8. ui界面設計課程有哪些：ui設計所學課程
- 9. C++課程設計 面積運算
- 10. java課程設計
- 更多相關文章...
- • XSL-FO 頁面 - XSL-FO 教程
- • jQuery Mobile 頁面 - jQuery Mobile 教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • IntelliJ IDEA代碼格式化設置
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 字節跳動21屆秋招運營兩輪面試經驗分享
- 2. Java 3 年，25K 多嗎？
- 3. mysql安裝部署
- 4. web前端開發中父鏈和子鏈方式實現通信
- 5. 3.1.6 spark體系之分佈式計算-scala編程-scala中trait特性
- 6. dataframe2
- 7. ThinkFree在線
- 8. 在線畫圖
- 9. devtools熱部署
- 10. 編譯和鏈接
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 網頁設計課程設計報告
- 2. 《網頁設計》課程學習（20170911）
- 3. 課程設計
- 4. 【數據庫課程設計】主頁面（二）
- 5. Java課程設計+購物車WEB頁面
- 6. C語言，課程設計，簡單可視化頁面（僞）
- 7. 《面向對象程序設計》課程設計
- 8. ui界面設計課程有哪些：ui設計所學課程
- 9. C++課程設計 面積運算
- 10. java課程設計