Skip to content

P
pica.cloud.web-education-admin
提交 9d13ebb0 编写于 作者: guojing.hao's avatar guojing.hao
浏览文件
操作

home over

上级 bb6b32ba
隐藏空白字符变更
内嵌 并排
正在显示 包含 221 行增加 和 30 行删除
src/components/business/yqy-header-top.vue
浏览文件 @ 9d13ebb0
......@@ -6,7 +6,6 @@
<span class="white fs30 gxyStudy">{{resourceData.studyCount}}人学习</span>
<span class="white fs30">{{resourceData.follower}}人关注</span>
</div>
<Banner/>
</div>
</div>
</template>
......
src/components/business/yqy-new-class.vue 0 → 100644
浏览文件 @ 9d13ebb0
<template>
<div class="newClass">
<div :style="{'text-align': direction}" class="hotTagTitle">{{resourceData.title}}</div>
<mt-swipe :show-indicators="false" :auto="0">
<mt-swipe-item>
<img class="newClassImg" :src="resourceData.item[0].img"/>
<div class="fs32">{{resourceData.item[0].title}}</div>
<div class="space-between">
<div>
<span class="gray fs24">{{resourceData.item[0].time}}</span>
<span class="gray fs24">|</span>
<span class="gray fs24">{{resourceData.item[0].peopleCount}}人已学</span>
</div>
<div @click="collect(0)" v-if="!resourceData.item[0].isCollect" class="fs22 collect">收藏</div>
<div @click="collect(0)" v-else class="fs22 collect">已收藏</div>
</div>
</mt-swipe-item>
<mt-swipe-item v-if="resourceData.item[1]">
<img class="newClassImg" :src="resourceData.item[1].img"/>
<div class="fs32">{{resourceData.item[1].title}}</div>
<div class="space-between">
<div>
<span class="gray fs24">{{resourceData.item[1].time}}</span>
<span class="gray fs24">|</span>
<span class="gray fs24">{{resourceData.item[1].peopleCount}}人已学</span>
</div>
<div @click="collect(1)" v-if="!resourceData.item[1].isCollect" class="fs22 collect">收藏</div>
<div @click="collect(1)" v-else class="fs22 collect">已收藏</div>
</div>
</mt-swipe-item>
<mt-swipe-item v-if="resourceData.item[2]">
<img class="newClassImg" :src="resourceData.item[2].img"/>
<div class="fs32">{{resourceData.item[2].title}}</div>
<div class="space-between">
<div>
<span class="gray fs24">{{resourceData.item[2].time}}</span>
<span class="gray fs24">|</span>
<span class="gray fs24">{{resourceData.item[2].peopleCount}}人已学</span>
</div>
<div @click="collect(2)" v-if="!resourceData.item[2].isCollect" class="fs22 collect">收藏</div>
<div @click="collect(2)" v-else class="fs22 collect">已收藏</div>
</div>
</mt-swipe-item>
</mt-swipe>
</div>
</template>
<script>
import { Swipe, SwipeItem } from 'mint-ui';
export default {
name: 'YqyNewClass',
components: {
},
watch: {
},
props: {
resourceData: {
type: Object,
default:()=>{
return {
title: '新课上线',
item: [
{
img: '',
title: '1',
time: '刚刚',
peopleCount: 9,
isCollect: false
},
{
img: '',
title: '1',
time: '刚刚',
peopleCount: 9,
isCollect: false
},
{
img: '',
title: '1',
time: '刚刚',
peopleCount: 9,
isCollect: false
}
]
}
}
},
direction: {
type: String,
default: 'left'
}
},
data () {
return {
}
},
mounted(){
},
methods: {
collect(val){
this.resourceData.item[val].isCollect = !this.resourceData.item[val].isCollect;
console.log('collect',this.resourceData.item[val].isCollect,val);
this.$emit('collect',this.resourceData.item[val].isCollect, val)
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
@import '../../style/global.scss';
.newClass{
width: 100%;
height: px2rem(320px);
background-color: #fff;
padding: px2rem(15px) px2rem(15px) px2rem(26px);
margin-bottom: px2rem(6px);
}
.collect{
height: px2rem(18px);
background-color: RGBA(247, 248, 249, 1);
line-height: px2rem(18px);
color: RGBA(102, 102, 102, 1);
padding: 0 px2rem(4px);
}
.newClassImg{
width: px2rem(345px);
height: px2rem(191px);
}
.hotTagTitle{
font-size: px2rem(18px);
font-weight: bold;
margin-bottom: px2rem(15px);
}
.hotTagItem{
margin: px2rem(10px) px2rem(15px) 0 0;
display: inline-block;
.itemName{
background-color: RGBA(244, 247, 255, 1);
color: RGBA(121, 148, 237, 1);
padding: px2rem(2px) px2rem(6px);
font-size: px2rem(13pt);
}
}
</style>
src/components/business/yqy-teacher-list.vue
浏览文件 @ 9d13ebb0
......@@ -6,16 +6,19 @@
<img src=""/>
</div>
</div>
<div v-if="teacherData.hasSelect" class="teachTitle mb42">
<select v-model="selected">
<option :key="index" v-for="(option,index) in teacherData.selectOptions" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<span :key="index" v-for="(item,index) in teacherData.options">
<span @click="study(index)" class="gray fs26 marginLR40">{{item}}</span>
</span>
<div @click="teacherMore" class="fs11 gray teacherMore">更多课程
<div class="space-between">
<div v-if="teacherData.hasSelect" class="teachTitle mb42">
<!-- <select v-model="selected">
<option :key="index" v-for="(option,index) in teacherData.selectOptions" v-bind:value="option.value">
{{ option.text }}
</option>
</select> -->
<span @click="firstOption" :class="!isStudy?'titlegGreen':'gray'" class="fs26">{{teacherData.firstOption}}</span>
<span :key="index" v-for="(item,index) in teacherData.options">
<span @click="study(index)" :class="isStudy&&item.isCheck?'titlegGreen':'gray'" class="fs26 marginLR40">{{item.title}}</span>
</span>
</div>
<div v-if="teacherData.hasSelect" @click="teacherMore" class="fs11 gray teacherMore">更多课程
<img src=""/>
</div>
</div>
......@@ -56,7 +59,17 @@ export default {
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
],
options: ['在学人数', '最新发布']
firstOption: '综合',
options: [
{
isCheck: false,
title: '在学人数'
},
{
isCheck: false,
title: '最新发布'
}
]
}
}
},
......@@ -71,6 +84,7 @@ export default {
selected: '综合1',
hasHospital: true,
hasType: true,
ascending: true,
data: [
{
img: '../../images/Shape@2x.png',
......@@ -170,6 +184,8 @@ export default {
data () {
return {
selected: 'A',
isStudy: false,
ascending: true,
cource: [
{
img: '../../images/Shape@2x.png',
......@@ -240,6 +256,12 @@ export default {
console.log('teacherMore');
this.$emit('teacherMore')
},
firstOption(){
this.isStudy = false;
this.ascending = !this.ascending;
console.log('firstOption');
this.$emit('firstOption',this.ascending)
},
flag(){
let temp = this.courceData.data;
let fourCource = temp&&temp.slice(0,4);
......@@ -269,7 +291,12 @@ export default {
},
study(val){
this.isStudy = true;
console.log('val',val);
this.teacherData.options[val].isCheck=!this.teacherData.options[val].isCheck;
this.teacherData.options.filter((item,index)=>
index!==val
)[0].isCheck= false
this.$emit('study',val)
}
}
......@@ -289,6 +316,9 @@ export default {
.courceTeachHeader{
width: 100%;
}
.titlegGreen{
color: RGBA(68, 146, 132, 1)
}
.change{
width: px2rem(57px);
height: px2rem(16px);
......@@ -303,9 +333,9 @@ export default {
height: px2rem(16px);
text-align: center;
line-height: px2rem(14px);
display: inline-block;
border-radius: px2rem(9px);
border: 1px solid RGBA(204, 204, 204, 1);
margin-top: px2rem(10px);
}
.content{
width: 100%;
......
src/style/global.scss
浏览文件 @ 9d13ebb0
......@@ -57,6 +57,9 @@
.fs28{
font-size: px2rem(14px);
}
.fs32{
font-size: px2rem(16px);
}
.fs30{
font-size: px2rem(15px);
}
......
src/views/home/home.vue
浏览文件 @ 9d13ebb0
......@@ -14,6 +14,7 @@
<section class="home-body">
<YqyHomeBanner :resourceData="resourceData"/>
<YqyHotLabel :allTags="allTags"/>
<YqyNewClass/>
<YqyTeacherList :teacherData="teacherData" :courceData="courceData"/>
<YqyTeacherList :teacherData="needData" :courceData="needcourceData"/>
</section>
......@@ -37,7 +38,25 @@ import YqyHomeBanner from '../../components/business/yqy-home-banner';
import YqyHomeKeepon from '../../components/business/yqy-home-keepon';
import YqyHomePorter from '../../components/business/yqy-home-porter';
import YqyHeaderTop from '../../components/business/yqy-header-top';
import YqyNewClass from '../../components/business/yqy-new-class';
export default {
components:{
Header,
// yqyTest
YqyHotLabel,
YqyHotTeacher,
YqyTeacherList,
YqyTeacherInfo,
YqyHomeHeader,
YqyHomeAdv,
YqyFiveMinutes,
YqyCategoryThree1,
YqyHomeBanner,
YqyHomeKeepon,
YqyHomePorter,
YqyHeaderTop,
YqyNewClass
},
data(){
return {
header: {
......@@ -62,12 +81,22 @@ export default {
title: '课程教学',
hasSelect: true,
showMoreBtn: false,
firstOption: '综合',
selectOptions: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
],
options: ['学习人数', '发布时间']
options: [
{
isCheck: false,
title: '在学人数'
},
{
isCheck: false,
title: '最新发布'
}
]
},
courceData: {
selected: '综合1',
......@@ -189,22 +218,6 @@ export default {
]
}
}
},
components:{
Header,
// yqyTest
YqyHotLabel,
YqyHotTeacher,
YqyTeacherList,
YqyTeacherInfo,
YqyHomeHeader,
YqyHomeAdv,
YqyFiveMinutes,
YqyCategoryThree1,
YqyHomeBanner,
YqyHomeKeepon,
YqyHomePorter,
YqyHeaderTop
},
mounted(){
this.init()
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或