|
@@ -1,6 +1,7 @@
|
|
|
<template>
|
|
|
<view>
|
|
|
- <view class="picture">
|
|
|
+ <u-navbar></u-navbar>
|
|
|
+ <!-- <view class="picture">
|
|
|
<view class="icon">
|
|
|
<u-icon name="arrow-left" color="#ffffff"></u-icon>
|
|
|
</view>
|
|
@@ -8,9 +9,13 @@
|
|
|
<view class="tag">
|
|
|
1/5
|
|
|
</view>
|
|
|
+ </view> -->
|
|
|
+ <view class="picture">
|
|
|
+ <u-swiper :list="list" mode="number" indicator-pos="bottomRight" :autoplay="false"
|
|
|
+ height="560"></u-swiper>
|
|
|
</view>
|
|
|
<view class="space">
|
|
|
-
|
|
|
+
|
|
|
</view>
|
|
|
<view class="main">
|
|
|
<view class="infos">
|
|
@@ -53,116 +58,116 @@
|
|
|
|
|
|
|
|
|
</view>
|
|
|
-
|
|
|
- <view class="teacher">
|
|
|
- <view class="title">
|
|
|
- 授课老师
|
|
|
- </view>
|
|
|
- <view class="teacher-card">
|
|
|
- <view class="item">
|
|
|
- <view class="photo">
|
|
|
- <img src="../../../assets/img/teachercard.png" alt="">
|
|
|
+
|
|
|
+ <view class="teacher">
|
|
|
+ <view class="title">
|
|
|
+ 授课老师
|
|
|
+ </view>
|
|
|
+ <view class="teacher-card">
|
|
|
+ <view class="item">
|
|
|
+ <view class="photo">
|
|
|
+ <img src="../../../assets/img/teachercard.png" alt="">
|
|
|
+ </view>
|
|
|
+ <view class="teacher-name">
|
|
|
+ <view class="name">
|
|
|
+ 翟老师
|
|
|
+ </view>
|
|
|
+ <view class="status">
|
|
|
+ 主讲老师
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="more">
|
|
|
+ <u-icon name="arrow-right" color="#cccccc"></u-icon>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <view class="teacher-name">
|
|
|
- <view class="name">
|
|
|
- 翟老师
|
|
|
+ <view class="item">
|
|
|
+ <view class="photo">
|
|
|
+ <img src="../../../assets/img/teachercard.png" alt="">
|
|
|
</view>
|
|
|
- <view class="status">
|
|
|
- 主讲老师
|
|
|
+ <view class="teacher-name">
|
|
|
+ <view class="name">
|
|
|
+ 翟老师
|
|
|
+ </view>
|
|
|
+ <view class="status">
|
|
|
+ 主讲老师
|
|
|
+ </view>
|
|
|
</view>
|
|
|
+ <view class="more">
|
|
|
+ <u-icon name="arrow-right" color="#cccccc"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="tag">
|
|
|
+ <view class="item">
|
|
|
+ <view class="icon">
|
|
|
+ <u-icon name="phone" color="#0DBAC7" size="48"></u-icon>
|
|
|
</view>
|
|
|
- <view class="more">
|
|
|
- <u-icon name="arrow-right" color="#cccccc"></u-icon>
|
|
|
+ <view class="name">
|
|
|
+ 免费试听
|
|
|
</view>
|
|
|
</view>
|
|
|
+ <u-line color="#0DBAC7" direction="col" length="24" />
|
|
|
<view class="item">
|
|
|
- <view class="photo">
|
|
|
- <img src="../../../assets/img/teachercard.png" alt="">
|
|
|
+ <view class="icon">
|
|
|
+ <u-icon name="email" color="#0DBAC7" size="48"></u-icon>
|
|
|
</view>
|
|
|
- <view class="teacher-name">
|
|
|
- <view class="name">
|
|
|
- 翟老师
|
|
|
- </view>
|
|
|
- <view class="status">
|
|
|
- 主讲老师
|
|
|
- </view>
|
|
|
+ <view class="name">
|
|
|
+ 金牌教师
|
|
|
</view>
|
|
|
- <view class="more">
|
|
|
- <u-icon name="arrow-right" color="#cccccc"></u-icon>
|
|
|
+ </view>
|
|
|
+ <u-line color="#0DBAC7" direction="col" length="24" />
|
|
|
+ <view class="item">
|
|
|
+ <view class="icon">
|
|
|
+ <u-icon name="weixin-fill" color="#0DBAC7" size="48"></u-icon>
|
|
|
+ </view>
|
|
|
+ <view class="name">
|
|
|
+ 品质保障
|
|
|
</view>
|
|
|
</view>
|
|
|
-
|
|
|
</view>
|
|
|
-
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="tag">
|
|
|
- <view class="item">
|
|
|
- <view class="icon">
|
|
|
- <u-icon name="phone" color="#0DBAC7" size="48"></u-icon>
|
|
|
+
|
|
|
+ <view class="class-detail">
|
|
|
+ <view class="title">
|
|
|
+ 课程详情
|
|
|
+ </view>
|
|
|
+ <view class="detail">
|
|
|
+ 课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍。
|
|
|
</view>
|
|
|
- <view class="name">
|
|
|
- 免费试听
|
|
|
+ <view class="img">
|
|
|
+ <img src="../../../assets/img/detaiimg.png" alt="">
|
|
|
</view>
|
|
|
+
|
|
|
</view>
|
|
|
- <u-line color="#0DBAC7" direction="col" length="24"/>
|
|
|
- <view class="item">
|
|
|
- <view class="icon">
|
|
|
- <u-icon name="email" color="#0DBAC7" size="48"></u-icon>
|
|
|
+ <view class="school-age">
|
|
|
+ <view class="title">
|
|
|
+ 适学年龄
|
|
|
</view>
|
|
|
- <view class="name">
|
|
|
- 金牌教师
|
|
|
+ <view class="content">
|
|
|
+ 适合4-12岁儿童、青少年
|
|
|
</view>
|
|
|
+
|
|
|
</view>
|
|
|
- <u-line color="#0DBAC7" direction="col" length="24"/>
|
|
|
- <view class="item">
|
|
|
- <view class="icon">
|
|
|
- <u-icon name="weixin-fill" color="#0DBAC7" size="48"></u-icon>
|
|
|
+
|
|
|
+ <view class="target">
|
|
|
+ <view class="title">
|
|
|
+ 课程目标
|
|
|
</view>
|
|
|
- <view class="name">
|
|
|
- 品质保障
|
|
|
+ <view class="content">
|
|
|
+ 了解足球相关基础知识,培养兴趣。
|
|
|
</view>
|
|
|
</view>
|
|
|
+
|
|
|
</view>
|
|
|
-
|
|
|
- <view class="class-detail">
|
|
|
- <view class="title">
|
|
|
- 课程详情
|
|
|
- </view>
|
|
|
- <view class="detail">
|
|
|
- 课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍。
|
|
|
- </view>
|
|
|
- <view class="img">
|
|
|
- <img src="../../../assets/img/detaiimg.png" alt="">
|
|
|
- </view>
|
|
|
-
|
|
|
- </view>
|
|
|
- <view class="school-age">
|
|
|
- <view class="title">
|
|
|
- 适学年龄
|
|
|
- </view>
|
|
|
- <view class="content">
|
|
|
- 适合4-12岁儿童、青少年
|
|
|
- </view>
|
|
|
-
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="target">
|
|
|
- <view class="title">
|
|
|
- 课程目标
|
|
|
- </view>
|
|
|
- <view class="content">
|
|
|
- 了解足球相关基础知识,培养兴趣。
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="bottom">
|
|
|
- <button>仅剩9席 立即报名
|
|
|
|
|
|
-</button>
|
|
|
- </view>
|
|
|
+ <view class="bottom">
|
|
|
+ <button>仅剩9席 立即报名
|
|
|
+
|
|
|
+ </button>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
@@ -170,7 +175,10 @@
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
-
|
|
|
+ list: [{
|
|
|
+ image: 'https://cdn.uviewui.com/uview/swiper/1.jpg'
|
|
|
+ }
|
|
|
+ ]
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
@@ -180,10 +188,11 @@
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
- page{
|
|
|
+ page {
|
|
|
padding-bottom: 132px;
|
|
|
background-color: #fff;
|
|
|
}
|
|
|
+
|
|
|
.picture {
|
|
|
height: 280px;
|
|
|
position: relative;
|
|
@@ -208,7 +217,7 @@
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .space{
|
|
|
+ .space {
|
|
|
background-color: #fff;
|
|
|
border-radius: 24rpx 24rpx 0px 0px;
|
|
|
height: 22px;
|
|
@@ -219,8 +228,9 @@
|
|
|
right: 0;
|
|
|
border-bottom: none;
|
|
|
}
|
|
|
+
|
|
|
.main {
|
|
|
-
|
|
|
+
|
|
|
background-color: rgba(255, 255, 255, 1);
|
|
|
padding: 16rpx 40rpx;
|
|
|
|
|
@@ -274,124 +284,140 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .title{
|
|
|
- color: rgba(51, 51, 51, 1);
|
|
|
- font-size: 18px;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
-
|
|
|
- .teacher{
|
|
|
- margin-top:40px;
|
|
|
-
|
|
|
- .teacher-card{
|
|
|
-
|
|
|
- margin-top: 24rpx;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- .item{
|
|
|
- width: 47.5%;
|
|
|
- padding: 24rpx 0 24rpx 24rpx;
|
|
|
- border-radius: 24rpx;
|
|
|
- background-color: rgba(236, 236, 236, 1);
|
|
|
+
|
|
|
+ .title {
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .teacher {
|
|
|
+ margin-top: 40px;
|
|
|
+
|
|
|
+ .teacher-card {
|
|
|
+
|
|
|
+ margin-top: 24rpx;
|
|
|
display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ width: 47.5%;
|
|
|
+ padding: 24rpx 0 24rpx 24rpx;
|
|
|
+ border-radius: 24rpx;
|
|
|
+ background-color: rgba(236, 236, 236, 1);
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+
|
|
|
+ .photo {
|
|
|
+ width: 96rpx;
|
|
|
+ height: 96rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ border-radius: 100rpx;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .teacher-name {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-left: 16rpx;
|
|
|
+
|
|
|
+ .name {
|
|
|
+ line-height: 44rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .status {
|
|
|
+ color: rgba(119, 119, 119, 1);
|
|
|
+ line-height: 40rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .more {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-left: 16rpx;
|
|
|
+ }
|
|
|
}
|
|
|
- .photo{
|
|
|
- width: 96rpx;
|
|
|
- height: 96rpx;
|
|
|
- overflow: hidden;
|
|
|
- border-radius: 100rpx;
|
|
|
- img{
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
- .teacher-name{
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-between;
|
|
|
- margin-left: 16rpx;
|
|
|
- .name{
|
|
|
- line-height: 44rpx;
|
|
|
- font-size: 32rpx;
|
|
|
- color: rgba(51, 51, 51, 1);
|
|
|
- }
|
|
|
- .status{
|
|
|
- color: rgba(119, 119, 119, 1);
|
|
|
- line-height: 40rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .more{
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- margin-left: 16rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .tag{
|
|
|
- margin-top: 48rpx;
|
|
|
- padding: 18px 12px;
|
|
|
- border-radius: 12px;
|
|
|
- background-color: rgba(13, 186, 199, 0.1);
|
|
|
- height: 120rpx;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- .item{
|
|
|
+ }
|
|
|
+
|
|
|
+ .tag {
|
|
|
+ margin-top: 48rpx;
|
|
|
+ padding: 18px 12px;
|
|
|
+ border-radius: 12px;
|
|
|
+ background-color: rgba(13, 186, 199, 0.1);
|
|
|
+ height: 120rpx;
|
|
|
display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
align-items: center;
|
|
|
- .name{
|
|
|
- margin-left: 8rpx;
|
|
|
- color: rgba(16, 16, 16, 1);
|
|
|
+
|
|
|
+ .item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .name {
|
|
|
+ margin-left: 8rpx;
|
|
|
+ color: rgba(16, 16, 16, 1);
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .class-detail{
|
|
|
- margin-top: 80rpx;
|
|
|
-
|
|
|
- .detail{
|
|
|
- color: rgba(119, 119, 119, 1);
|
|
|
- line-height: 20px;
|
|
|
- margin-top: 24rpx;
|
|
|
- }
|
|
|
- .img{
|
|
|
- margin-top: 40rpx;
|
|
|
- width: 100%;
|
|
|
- height: 200px;
|
|
|
- img{
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .school-age,.target{
|
|
|
- margin-top: 80rpx;
|
|
|
- .content{
|
|
|
- margin-top: 12px;
|
|
|
- color: rgba(119, 119, 119, 1);
|
|
|
}
|
|
|
+
|
|
|
+ .class-detail {
|
|
|
+ margin-top: 80rpx;
|
|
|
+
|
|
|
+ .detail {
|
|
|
+ color: rgba(119, 119, 119, 1);
|
|
|
+ line-height: 20px;
|
|
|
+ margin-top: 24rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .img {
|
|
|
+ margin-top: 40rpx;
|
|
|
+ width: 100%;
|
|
|
+ height: 200px;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .school-age,
|
|
|
+ .target {
|
|
|
+ margin-top: 80rpx;
|
|
|
+
|
|
|
+ .content {
|
|
|
+ margin-top: 12px;
|
|
|
+ color: rgba(119, 119, 119, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
}
|
|
|
-
|
|
|
-
|
|
|
- }
|
|
|
- .bottom{
|
|
|
- width: 100%;
|
|
|
- background-color: rgba(255, 255, 255, 1);
|
|
|
- position: fixed;
|
|
|
- bottom: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- padding: 10px 0;
|
|
|
- button{
|
|
|
- width: 91.4%;
|
|
|
- border-radius: 50px;
|
|
|
- background-color: rgba(13, 186, 199, 1);
|
|
|
- line-height: 40px;
|
|
|
- color: rgba(255, 255, 255, 1);
|
|
|
- font-size: 16px;
|
|
|
- z-index: 999;
|
|
|
- }
|
|
|
+
|
|
|
+ .bottom {
|
|
|
+ width: 100%;
|
|
|
+ background-color: rgba(255, 255, 255, 1);
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ padding: 10px 0;
|
|
|
+
|
|
|
+ button {
|
|
|
+ width: 91.4%;
|
|
|
+ border-radius: 50px;
|
|
|
+ background-color: rgba(13, 186, 199, 1);
|
|
|
+ line-height: 40px;
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
+ font-size: 16px;
|
|
|
+ z-index: 999;
|
|
|
+ }
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|