Skip to content

Commit 7a72cd7

Browse files
ZebzhongZebzhong
committed
修改图片名字，增加lesson页面
1 parent 4a88928 commit 7a72cd7

16 files changed

+422
-119
lines changed

‎src/assets/images/nav11.png ‎src/assets/images/home-active.png

File renamed without changes.

‎src/assets/images/nav1.png ‎src/assets/images/home.png

File renamed without changes.

‎src/assets/images/nav33.png ‎src/assets/images/kebiao-active.png

File renamed without changes.

‎src/assets/images/nav3.png ‎src/assets/images/kebiao.png

File renamed without changes.

‎src/assets/images/center4.png ‎src/assets/images/wo-active.png

File renamed without changes.

‎src/assets/images/nav4.png ‎src/assets/images/wo.png

File renamed without changes.

‎src/assets/images/nav2.png ‎src/assets/images/zhitiao-active.png

File renamed without changes.

‎src/assets/images/zhitiao.png

2.33 KB
Loading

‎src/components/Footer.vue

+110
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
<template>
2+
<footer class="foot">
3+
<ul class="foot-list">
4+
<li class="active">
5+
<a>首页</a>
6+
</li>
7+
<li>
8+
<a>纸条</a>
9+
</li>
10+
<li>
11+
<a>课表</a>
12+
</li>
13+
<li>
14+
<a>我</a>
15+
</li>
16+
</ul>
17+
</footer>
18+
</template>
19+
<script>
20+
export default {
21+
data () {
22+
return {
23+
24+
}
25+
}
26+
}
27+
</script>
28+
<style lang="scss" scoped>
29+
@import '../style/variable.scss';
30+
.foot{
31+
position: fixed;
32+
z-index:100;
33+
bottom:0;
34+
width:100%;
35+
background-color: #dfdfdf;
36+
border-top: 1px solid transparent;
37+
border-image: svg(1px-border param(--color #757575) 2 2 stretch);
38+
@at-root .foot-list{
39+
display: flex;
40+
height:97px;
41+
li{
42+
flex:1;
43+
display: flex;
44+
justify-content: center;
45+
align-items: center;
46+
height:100%;
47+
a{
48+
width:100%;
49+
box-sizing: border-box;
50+
padding-top:50px;
51+
font-size:24px;
52+
text-align: center;
53+
}
54+
&:nth-child(1){
55+
a{
56+
background:url('../assets/images/home.png') no-repeat center top;
57+
background-size:48px 44px;
58+
}
59+
}
60+
&:nth-child(2){
61+
a{
62+
background:url('../assets/images/zhitiao.png') no-repeat center top;
63+
background-size:50px 44px;
64+
}
65+
}
66+
&:nth-child(3){
67+
a{
68+
background:url('../assets/images/kebiao.png') no-repeat center top;
69+
background-size:46px 44px;
70+
}
71+
}
72+
&:nth-child(4){
73+
a{
74+
background:url('../assets/images/wo.png') no-repeat center top;
75+
background-size:36px 44px;
76+
}
77+
}
78+
}
79+
.active{
80+
a{
81+
color:$green;
82+
}
83+
&:nth-child(1){
84+
a{
85+
background:url('../assets/images/home-active.png') no-repeat center top;
86+
background-size:48px 44px;
87+
}
88+
}
89+
&:nth-child(2){
90+
a{
91+
background:url('../assets/images/zhitiao-active.png') no-repeat center top;
92+
background-size:50px 44px;
93+
}
94+
}
95+
&:nth-child(3){
96+
a{
97+
background:url('../assets/images/kebiao-active.png') no-repeat center top;
98+
background-size:46px 44px;
99+
}
100+
}
101+
&:nth-child(4){
102+
a{
103+
background:url('../assets/images/wo-active.png') no-repeat center top;
104+
background-size:36px 44px;
105+
}
106+
}
107+
}
108+
}
109+
}
110+
</style>

‎src/components/Header.vue

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<template>
2+
<header>
3+
4+
</header>
5+
</template>
6+
<script>
7+
export default{
8+
9+
}
10+
</script>
11+
<style lang="scss" scoped>
12+
@import '../style/variable.scss';
13+
</style>

‎src/components/TabBox.vue

+126
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
<template>
2+
<section class="tab-box">
3+
<nav class="tab-nav">
4+
<div class="tab-nav-top">
5+
<a :class="['tab-nav-item',{'active':index === tabIndx}]"
6+
@click="switchTab(index)" v-for="(item,index) in tabNav" :key="index">
7+
{{item}}
8+
</a>
9+
</div>
10+
<div class="tab-border"></div>
11+
</nav>
12+
<section class="tab-cont" :class="{'active':0 === tabIndx}">
13+
<div class="tab-cont-item" v-for="(item,index) in lessonList" :key="index">
14+
<div class="cont-item-img">
15+
<a>
16+
<img :src="item.imgUrl" alt="">
17+
</a>
18+
</div>
19+
<div class="cont-item-intro">
20+
<h3 class="item-intro-tit ellipsis">{{item.title}}</h3>
21+
<p class="item-intro-subtit ellipsis">{{item.subtit}}</p>
22+
<div class="item-intro-info">
23+
<i>{{item.view}}次学习</i>
24+
<a :class="[item.price === 0 ? 'ft-green':'ft-orange']">{{item.price | formatPrice}}</a>
25+
</div>
26+
</div>
27+
</div>
28+
</section>
29+
<section class="tab-cont" :class="{'active':1 === tabIndx}">
30+
<div class="tab-cont-item">精品小课</div>
31+
</section>
32+
</section>
33+
</template>
34+
<script>
35+
export default {
36+
data () {
37+
return {
38+
tabIndx: 0,
39+
tabNav: ['系列课程', '精品小课']
40+
}
41+
},
42+
props: ['lessonList'],
43+
filters: {
44+
formatPrice (value) {
45+
return value === 0 ? '免费' : '¥' + value
46+
}
47+
},
48+
methods: {
49+
switchTab (index) {
50+
this.tabIndx = index
51+
}
52+
}
53+
}
54+
</script>
55+
<style lang="scss" scoped>
56+
@import "../style/variable.scss";
57+
.tab-box {
58+
@at-root .tab-nav-top {
59+
display: flex;
60+
justify-content: space-between;
61+
background-color: #fcfcfc;
62+
@at-root .tab-nav-item {
63+
width: 50%;
64+
height: 88px;
65+
line-height: 88px;
66+
color: $green;
67+
font-size: 36px;
68+
text-align: center;
69+
background-color: #fff;
70+
border-bottom: 3px solid #bfbfbf;
71+
}
72+
.active {
73+
color: $orange;
74+
border-color: $orange;
75+
}
76+
}
77+
}
78+
.tab-cont{
79+
display: none;
80+
}
81+
.tab-cont.active{
82+
display: block;
83+
}
84+
.tab-cont-item{
85+
height:200px;
86+
box-sizing: border-box;
87+
padding:25px 0;
88+
overflow: hidden;
89+
background-color: #fff;
90+
margin-bottom: 2px;
91+
@at-root .cont-item-img{
92+
width: 50%;
93+
height:150px;
94+
float: left;
95+
display: flex;
96+
justify-content: center;
97+
img{
98+
width:300px;
99+
height:100%;
100+
}
101+
}
102+
@at-root .cont-item-intro{
103+
width:50%;
104+
float: left;
105+
box-sizing: border-box;
106+
padding-right:33px;
107+
color:$gray3;
108+
@at-root .item-intro-tit{
109+
font-size:30px;
110+
line-height: 30px;
111+
margin-bottom: 20px;
112+
}
113+
@at-root .item-intro-subtit{
114+
font-size:24px;
115+
height:70px;
116+
overflow: hidden;
117+
}
118+
@at-root .item-intro-info{
119+
display: flex;
120+
justify-content: space-between;
121+
font-size:24px;
122+
color:#757575;
123+
}
124+
}
125+
}
126+
</style>

0 commit comments

Comments
 (0)