|
|
@@ -2,7 +2,7 @@
|
|
|
<div>
|
|
|
<swiper ref="oneSwiper" class="swiper" :options="swiperOptions">
|
|
|
<swiper-slide class="swiper-slide">
|
|
|
- <div class="minClient" @click="showDetail(0)">
|
|
|
+ <div class="minClient" @click="showDetail(0)">
|
|
|
<h2>客户<span>案例</span></h2>
|
|
|
<p class="subTitle">
|
|
|
酷乐秀为众多器乐教学机构提供良策，<br />
|
|
|
@@ -25,17 +25,12 @@
|
|
|
<p class="concat">
|
|
|
线上教育是未来的一大趋势，就目前而言其优势已十分明显，在创业初期，搭建属于自己的网校面临成本、运维、研发、售后等多方面的问题，如何在控制成本的同时实现高效的服务是一大难题。幸运的是，我们遇到了“酷乐秀”这个专业的平台，帮我们提供专业的线上解决方案。
|
|
|
</p>
|
|
|
- <img
|
|
|
- src="../images/down.png"
|
|
|
- class="down"
|
|
|
- alt=""
|
|
|
-
|
|
|
- />
|
|
|
+ <img src="../images/down.png" class="down" alt="" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</swiper-slide>
|
|
|
<swiper-slide class="swiper-slide">
|
|
|
- <div class="minClient" @click="showDetail(1)">
|
|
|
+ <div class="minClient" @click="showDetail(1)">
|
|
|
<h2>客户<span>案例</span></h2>
|
|
|
<p class="subTitle">
|
|
|
酷乐秀为众多器乐教学机构提供良策，<br />
|
|
|
@@ -58,17 +53,12 @@
|
|
|
<p class="concat">
|
|
|
为丰富学生的课外生活，提高学生综合素养，学校在小学部成立了竖笛社团。由于新增的学生日益增多，我个人的精力实属有限，除了上课的学习外，还需要学生课下自觉练习。但学生在家练习没有指导，常常吹错音也不知道，长期如此，不仅没有提升，也浪费了大量的时间和精力。
|
|
|
</p>
|
|
|
- <img
|
|
|
- src="../images/down.png"
|
|
|
- class="down"
|
|
|
- alt=""
|
|
|
-
|
|
|
- />
|
|
|
+ <img src="../images/down.png" class="down" alt="" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</swiper-slide>
|
|
|
<swiper-slide class="swiper-slide">
|
|
|
- <div class="minClient" @click="showDetail(2)">
|
|
|
+ <div class="minClient" @click="showDetail(2)">
|
|
|
<h2>客户<span>案例</span></h2>
|
|
|
<p class="subTitle">
|
|
|
酷乐秀为众多器乐教学机构提供良策，<br />
|
|
|
@@ -91,18 +81,14 @@
|
|
|
<p class="concat">
|
|
|
自去年始受疫情影响，我们一直在寻找一个合适的平台将线下课搬到线上。在此过程中我们遇到重重阻碍，比如上课时语音有延迟，无法查看学生真实演奏情况等问题。当时想解决这个问题可能需要购买昂贵的直播设备，这无疑是雪上加霜。
|
|
|
</p>
|
|
|
- <img
|
|
|
- src="../images/down.png"
|
|
|
- class="down"
|
|
|
- alt=""
|
|
|
-
|
|
|
- />
|
|
|
+ <img src="../images/down.png" class="down" alt="" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</swiper-slide>
|
|
|
<div class="swiper-pagination" slot="pagination"></div>
|
|
|
</swiper>
|
|
|
- <van-dialog v-model="dialogVisible" className='dialog'>
|
|
|
+
|
|
|
+ <van-popup v-model="dialogVisible" className="dialog" class="dialog" :style="{ width: '80%' }" closeable round>
|
|
|
<div class="teacherItem dialog">
|
|
|
<div class="teacherHead">
|
|
|
<div class="headWrap">
|
|
|
@@ -120,9 +106,8 @@
|
|
|
<p class="concat" v-for="(item, index) in detail.list" :key="index">
|
|
|
{{ item }}
|
|
|
</p>
|
|
|
- <!-- <img src="./images/down.png" class="down" alt="" /> -->
|
|
|
</div>
|
|
|
- </van-dialog>
|
|
|
+ </van-popup>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
@@ -130,7 +115,7 @@ import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
|
|
|
import Swiper2, { Navigation, Pagination } from "swiper";
|
|
|
Swiper2.use([Navigation, Pagination]);
|
|
|
export default {
|
|
|
- props:['detailList'],
|
|
|
+ props: ["detailList"],
|
|
|
components: {
|
|
|
Swiper,
|
|
|
SwiperSlide,
|
|
|
@@ -162,7 +147,7 @@ export default {
|
|
|
},
|
|
|
methods: {
|
|
|
showDetail(index) {
|
|
|
- console.log('调用')
|
|
|
+ console.log("调用");
|
|
|
this.detail = { ...this.detailList[index] };
|
|
|
this.dialogVisible = true;
|
|
|
},
|
|
|
@@ -281,15 +266,14 @@ img {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-/deep/.van-dialog__confirm, /deep/.van-dialog__confirm:active{
|
|
|
+/deep/.van-dialog__confirm,
|
|
|
+/deep/.van-dialog__confirm:active {
|
|
|
color: #2dc7aa;
|
|
|
}
|
|
|
-/deep/.dialog{
|
|
|
-
|
|
|
- .teacherItem {
|
|
|
+/deep/.dialog {
|
|
|
+ .teacherItem {
|
|
|
cursor: pointer;
|
|
|
background-color: #fff;
|
|
|
- width: 6.7rem;
|
|
|
background: #ffffff;
|
|
|
border-radius: 8px;
|
|
|
border: 1px solid #dfdfdf;
|
|
|
@@ -298,7 +282,7 @@ img {
|
|
|
overflow: hidden;
|
|
|
.teacherHead {
|
|
|
border-bottom: 1px dotted #d6d6d6;
|
|
|
- padding-bottom: .3rem;
|
|
|
+ padding-bottom: 0.3rem;
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
.headWrap {
|
|
|
@@ -336,7 +320,7 @@ img {
|
|
|
|
|
|
text-indent: 0.44px;
|
|
|
}
|
|
|
- }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
|
|
|
mo