Skip to content

Commit 4455356

Browse files
ZebzhongZebzhong
committed
添加课表
1 parent c45236f commit 4455356

File tree

8 files changed

+233
-48
lines changed

8 files changed

+233
-48
lines changed

‎package.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -18,14 +18,16 @@
1818
"postcss-viewport-units": "^0.1.4",
1919
"postcss-write-svg": "^3.0.1",
2020
"vue": "^2.5.2",
21-
"vue-router": "^3.0.1"
21+
"vue-router": "^3.0.1",
22+
"vuejs-datepicker": "^0.9.29"
2223
},
2324
"devDependencies": {
2425
"autoprefixer": "^7.1.2",
2526
"babel-core": "^6.22.1",
2627
"babel-eslint": "^8.2.1",
2728
"babel-helper-vue-jsx-merge-props": "^2.0.3",
2829
"babel-loader": "^7.1.1",
30+
"babel-plugin-component": "^1.1.0",
2931
"babel-plugin-syntax-jsx": "^6.18.0",
3032
"babel-plugin-transform-runtime": "^6.22.0",
3133
"babel-plugin-transform-vue-jsx": "^3.5.0",

‎src/components/Footer.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export default {
2222
navList: [
2323
{id: 0, name: '首页', active: false, url: '/home'},
2424
{id: 1, name: '纸条', active: false, url: '/noteIndex'},
25-
{id: 2, name: '课程', active: false},
25+
{id: 2, name: '课程', active: false, url: '/lessonTable'},
2626
{id: 3, name: '我', active: false}
2727
]
2828
}

‎src/components/TabBox.vue

+20-6
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
</div>
1919
<div class="cont-item-intro">
2020
<h3 class="item-intro-tit ellipsis">{{item.title}}</h3>
21-
<p class="item-intro-subtit ellipsis">{{item.subtit}}</p>
21+
<p class="item-intro-subtit">{{item.subtit}}</p>
2222
<div class="item-intro-info">
2323
<i>{{item.view}}次学习</i>
2424
<a :class="[item.price === 0 ? 'ft-green':'ft-orange']">{{item.price | formatPrice}}</a>
@@ -27,7 +27,21 @@
2727
</div>
2828
</section>
2929
<section class="tab-cont" :class="{'active':1 === tabIndx}">
30-
<div class="tab-cont-item">精品小课</div>
30+
<div class="tab-cont-item" v-for="(item,index) in goodList" :key="index">
31+
<div class="cont-item-img">
32+
<a>
33+
<img :src="item.imgUrl" alt="">
34+
</a>
35+
</div>
36+
<div class="cont-item-intro">
37+
<h3 class="item-intro-tit ellipsis">{{item.title}}</h3>
38+
<p class="item-intro-subtit">{{item.subtit}}</p>
39+
<div class="item-intro-info">
40+
<i>{{item.view}}次学习</i>
41+
<a :class="[item.price === 0 ? 'ft-green':'ft-orange']">{{item.price | formatPrice}}</a>
42+
</div>
43+
</div>
44+
</div>
3145
</section>
3246
</section>
3347
</template>
@@ -39,7 +53,7 @@ export default {
3953
tabNav: ['系列课程', '精品小课']
4054
}
4155
},
42-
props: ['lessonList'],
56+
props: ['lessonList', 'goodList'],
4357
filters: {
4458
formatPrice (value) {
4559
return value === 0 ? '免费' : '¥' + value
@@ -108,12 +122,12 @@ export default {
108122
@at-root .item-intro-tit{
109123
font-size:30px;
110124
line-height: 30px;
111-
margin-bottom: 20px;
125+
margin-bottom: 10px;
112126
}
113127
@at-root .item-intro-subtit{
114128
font-size:24px;
115-
height:70px;
116-
overflow: hidden;
129+
height:80px;
130+
@include multEllipsis(2);
117131
}
118132
@at-root .item-intro-info{
119133
display: flex;

‎src/page/Home.vue ‎src/page/home/Home.vue

+49-27
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
11
<template>
22
<div id="webHome">
3+
<header class="head">
4+
<input type="text" class="search" placeholder="搜索">
5+
<a class="msg-btn"></a>
6+
</header>
37
<div class="container">
4-
<header class="head">
5-
<input type="text" class="search" placeholder="搜索">
6-
<a class="msg-btn"></a>
7-
</header>
88
<section class="slider"></section>
99
<nav class="lesson-list">
1010
<router-link class="lesson-item" :to="{path: '/lesson', query: {lessonName: item.lessonName, id: item.id}}" v-for="(item,index) in lessonNav" :key="index">
1111
<img class="lesson-item-icon" :src="item.imgUrl" alt="">
1212
<span class="lesson-item-name">{{item.lessonName}}</span>
1313
</router-link>
1414
</nav>
15-
<tab-box :lessonList="lessonList"></tab-box>
16-
<foot-bottom :active=0></foot-bottom>
15+
<tab-box :lessonList="lessonList" :goodList="goodList"></tab-box>
1716
</div>
17+
<foot-bottom :active=0></foot-bottom>
1818
</div>
1919
</template>
2020
<script>
@@ -28,77 +28,100 @@ export default {
2828
lessonNav: [
2929
{
3030
lessonName: '语文',
31-
imgUrl: require('../assets/images/yuwen.png'),
31+
imgUrl: require('../../assets/images/yuwen.png'),
3232
id: 1
3333
},
3434
{
3535
lessonName: '数学',
36-
imgUrl: require('../assets/images/shuxue.png'),
36+
imgUrl: require('../../assets/images/shuxue.png'),
3737
id: 2
3838
},
3939
{
4040
lessonName: '英语',
41-
imgUrl: require('../assets/images/yingyu.png'),
41+
imgUrl: require('../../assets/images/yingyu.png'),
4242
id: 3
4343
},
4444
{
4545
lessonName: '政治',
46-
imgUrl: require('../assets/images/zhengzhi.png'),
46+
imgUrl: require('../../assets/images/zhengzhi.png'),
4747
id: 4
4848
},
4949
{
5050
lessonName: '历史',
51-
imgUrl: require('../assets/images/lishi.png'),
51+
imgUrl: require('../../assets/images/lishi.png'),
5252
id: 5
5353
},
5454
{
5555
lessonName: '地理',
56-
imgUrl: require('../assets/images/dili.png'),
56+
imgUrl: require('../../assets/images/dili.png'),
5757
id: 6
5858
},
5959
{
6060
lessonName: '化学',
61-
imgUrl: require('../assets/images/huaxue.png'),
61+
imgUrl: require('../../assets/images/huaxue.png'),
6262
id: 7
6363
},
6464
{
6565
lessonName: '生物',
66-
imgUrl: require('../assets/images/shengwu.png'),
66+
imgUrl: require('../../assets/images/shengwu.png'),
6767
id: 8
6868
},
6969
{
7070
lessonName: '物理',
71-
imgUrl: require('../assets/images/wuli.png'),
71+
imgUrl: require('../../assets/images/wuli.png'),
7272
id: 9
7373
},
7474
{
7575
lessonName: '其他',
76-
imgUrl: require('../assets/images/qita.png'),
76+
imgUrl: require('../../assets/images/qita.png'),
7777
id: 10
7878
}
7979
],
8080
lessonList: [
8181
{
8282
title: '小学语文精彩课程',
8383
subtit: '1-6单元详细讲解',
84-
imgUrl: require('../assets/images/series_1.png'),
84+
imgUrl: require('../../assets/images/series_1.png'),
8585
view: '2145',
8686
price: 0
8787
},
8888
{
8989
title: '小学语文精彩课程',
9090
subtit: '1-6单元详细讲解',
91-
imgUrl: require('../assets/images/series_2.png'),
91+
imgUrl: require('../../assets/images/series_2.png'),
9292
view: '2145',
9393
price: 0
9494
},
9595
{
9696
title: '小学语文精彩课程',
9797
subtit: '1-6单元详细讲解',
98-
imgUrl: require('../assets/images/series_1.png'),
98+
imgUrl: require('../../assets/images/series_1.png'),
9999
view: '2145',
100100
price: 0
101101
}
102+
],
103+
goodList: [
104+
{
105+
title: '中考语文精彩课程',
106+
subtit: '知识点精讲沪教版',
107+
imgUrl: require('../../assets/images/series_1.png'),
108+
view: '1255',
109+
price: 108
110+
},
111+
{
112+
title: '中考语文精彩课程',
113+
subtit: '知识点精讲人教版',
114+
imgUrl: require('../../assets/images/series_2.png'),
115+
view: '3215',
116+
price: 99.5
117+
},
118+
{
119+
title: '初一语文上学期',
120+
subtit: '古诗词文言文讲解',
121+
imgUrl: require('../../assets/images/series_1.png'),
122+
view: '1265',
123+
price: 53.6
124+
}
102125
]
103126
}
104127
},
@@ -110,19 +133,18 @@ export default {
110133
</script>
111134

112135
<style scoped lang="scss">
113-
@import '../style/variable.scss';
136+
@import '../../style/variable.scss';
114137
.container{
115-
// padding-top:84px;
116-
background-color:#d2d2d2;
138+
background-color:$backgroundColor;
139+
padding-top:84px;
117140
padding-bottom: 98px;
118141
box-sizing: border-box;
119-
min-height: 100vh;
120142
}
121143
.head{
122-
/* position: fixed;
144+
position: fixed;
123145
top:0;
124146
left:0;
125-
z-index:10; */
147+
z-index:10;
126148
padding:0 30px;
127149
box-sizing: border-box;
128150
width: 100%;
@@ -138,14 +160,14 @@ export default {
138160
box-sizing: border-box;
139161
border-radius: 5px;
140162
padding-left: 64px;
141-
background: #fff url('../assets/images/search.png') no-repeat;
163+
background: #fff url('../../assets/images/search.png') no-repeat;
142164
background-position: 24px center;
143165
background-size:31px 31px;
144166
}
145167
.msg-btn{
146168
width:35px;
147169
height: 35px;
148-
background: url('../assets/images/top_msg.png') no-repeat;
170+
background: url('../../assets/images/top_msg.png') no-repeat;
149171
background-size: cover;
150172
}
151173
}

‎src/page/Lesson.vue ‎src/page/home/Lesson.vue

+54-10
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<section class="head-tit">{{headTitle}}</section>
66
<a class="head-search"></a>
77
</header>
8-
<tab-box :lessonList="lessonList"></tab-box>
8+
<tab-box :lessonList="lessonList" :goodList="goodList"></tab-box>
99
</div>
1010
</template>
1111
<script>
@@ -19,45 +19,89 @@ export default {
1919
{
2020
title: '小学语文精彩课程',
2121
subtit: '1-6单元详细讲解',
22-
imgUrl: require('../assets/images/series_1.png'),
22+
imgUrl: require('../../assets/images/series_1.png'),
2323
view: '2145',
2424
price: 0
2525
},
2626
{
2727
title: '小学语文精彩课程',
2828
subtit: '1-6单元详细讲解',
29-
imgUrl: require('../assets/images/series_2.png'),
29+
imgUrl: require('../../assets/images/series_2.png'),
3030
view: '2145',
3131
price: 0
3232
},
3333
{
3434
title: '小学语文精彩课程',
3535
subtit: '1-6单元详细讲解',
36-
imgUrl: require('../assets/images/series_1.png'),
36+
imgUrl: require('../../assets/images/series_1.png'),
3737
view: '2145',
3838
price: 0
3939
},
4040
{
4141
title: '小学语文精彩课程',
4242
subtit: '1-6单元详细讲解',
43-
imgUrl: require('../assets/images/series_1.png'),
43+
imgUrl: require('../../assets/images/series_1.png'),
4444
view: '2145',
4545
price: 0
4646
},
4747
{
4848
title: '小学语文精彩课程',
4949
subtit: '1-6单元详细讲解',
50-
imgUrl: require('../assets/images/series_1.png'),
50+
imgUrl: require('../../assets/images/series_1.png'),
5151
view: '2145',
5252
price: 0
5353
},
5454
{
5555
title: '小学语文精彩课程',
5656
subtit: '1-6单元详细讲解',
57-
imgUrl: require('../assets/images/series_1.png'),
57+
imgUrl: require('../../assets/images/series_1.png'),
5858
view: '2145',
5959
price: 0
6060
}
61+
],
62+
goodList: [
63+
{
64+
title: '中考语文精彩课程',
65+
subtit: '知识点精讲沪教版',
66+
imgUrl: require('../../assets/images/series_1.png'),
67+
view: '1255',
68+
price: 108
69+
},
70+
{
71+
title: '中考语文精彩课程',
72+
subtit: '知识点精讲人教版',
73+
imgUrl: require('../../assets/images/series_2.png'),
74+
view: '3215',
75+
price: 99.5
76+
},
77+
{
78+
title: '初一语文上学期',
79+
subtit: '古诗词文言文讲解',
80+
imgUrl: require('../../assets/images/series_1.png'),
81+
view: '1265',
82+
price: 53.6
83+
},
84+
{
85+
title: '初一语文上学期',
86+
subtit: '古诗词文言文讲解',
87+
imgUrl: require('../../assets/images/series_1.png'),
88+
view: '1265',
89+
price: 53.6
90+
},
91+
{
92+
title: '初一语文上学期',
93+
subtit: '古诗词文言文讲解',
94+
imgUrl: require('../../assets/images/series_1.png'),
95+
view: '1265',
96+
price: 53.6
97+
},
98+
{
99+
title: '初一语文上学期',
100+
subtit: '古诗词文言文讲解',
101+
imgUrl: require('../../assets/images/series_1.png'),
102+
view: '1265',
103+
price: 53.6
104+
}
61105
]
62106
}
63107
},
@@ -76,7 +120,7 @@ export default {
76120
}
77121
</script>
78122
<style lang="scss" scoped>
79-
@import '../style/variable.scss';
123+
@import '../../style/variable.scss';
80124
.container{
81125
background-color:#d2d2d2;
82126
}
@@ -95,7 +139,7 @@ export default {
95139
background-color: $green;
96140
position:relative;
97141
.head-goback{
98-
background:url('../assets/images/fanhui_03.png') no-repeat center left;
142+
background:url('../../assets/images/fanhui_03.png') no-repeat center left;
99143
background-size:24px 48px;
100144
width:60px;
101145
height:100%;
@@ -110,7 +154,7 @@ export default {
110154
line-height:84px;
111155
}
112156
.head-search{
113-
background:url('../assets/images/serach_course.png') no-repeat center right;
157+
background:url('../../assets/images/serach_course.png') no-repeat center right;
114158
background-size:40px 40px;
115159
width:60px;
116160
height:100%;

0 commit comments

Comments
 (0)