Skip to content

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

home over

上级 bb6b32ba
隐藏空白字符变更
内嵌 并排
正在显示 包含 221 行增加 和 30 行删除
src/components/business/yqy-header-top.vue
浏览文件 @ 9d13ebb0
...@@ -6,7 +6,6 @@ ...@@ -6,7 +6,6 @@
<span class="white fs30 gxyStudy">{{resourceData.studyCount}}人学习</span> <span class="white fs30 gxyStudy">{{resourceData.studyCount}}人学习</span>
<span class="white fs30">{{resourceData.follower}}人关注</span> <span class="white fs30">{{resourceData.follower}}人关注</span>
</div> </div>
<Banner/>
</div> </div>
</div> </div>
</template> </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 @@ ...@@ -6,16 +6,19 @@
<img src=""/> <img src=""/>
</div> </div>
</div> </div>
<div v-if="teacherData.hasSelect" class="teachTitle mb42"> <div class="space-between">
<select v-model="selected"> <div v-if="teacherData.hasSelect" class="teachTitle mb42">
<option :key="index" v-for="(option,index) in teacherData.selectOptions" v-bind:value="option.value"> <!-- <select v-model="selected">
{{ option.text }} <option :key="index" v-for="(option,index) in teacherData.selectOptions" v-bind:value="option.value">
</option> {{ option.text }}
</select> </option>
<span :key="index" v-for="(item,index) in teacherData.options"> </select> -->
<span @click="study(index)" class="gray fs26 marginLR40">{{item}}</span> <span @click="firstOption" :class="!isStudy?'titlegGreen':'gray'" class="fs26">{{teacherData.firstOption}}</span>
</span> <span :key="index" v-for="(item,index) in teacherData.options">
<div @click="teacherMore" class="fs11 gray teacherMore">更多课程 <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=""/> <img src=""/>
</div> </div>
</div> </div>
...@@ -56,7 +59,17 @@ export default { ...@@ -56,7 +59,17 @@ export default {
{ text: 'Two', value: 'B' }, { text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' } { text: 'Three', value: 'C' }
], ],
options: ['在学人数', '最新发布'] firstOption: '综合',
options: [
{
isCheck: false,
title: '在学人数'
},
{
isCheck: false,
title: '最新发布'
}
]
} }
} }
}, },
...@@ -71,6 +84,7 @@ export default { ...@@ -71,6 +84,7 @@ export default {
selected: '综合1', selected: '综合1',
hasHospital: true, hasHospital: true,
hasType: true, hasType: true,
ascending: true,
data: [ data: [
{ {
img: '../../images/Shape@2x.png', img: '../../images/Shape@2x.png',
...@@ -170,6 +184,8 @@ export default { ...@@ -170,6 +184,8 @@ export default {
data () { data () {
return { return {
selected: 'A', selected: 'A',
isStudy: false,
ascending: true,
cource: [ cource: [
{ {
img: '../../images/Shape@2x.png', img: '../../images/Shape@2x.png',
...@@ -240,6 +256,12 @@ export default { ...@@ -240,6 +256,12 @@ export default {
console.log('teacherMore'); console.log('teacherMore');
this.$emit('teacherMore') this.$emit('teacherMore')
}, },
firstOption(){
this.isStudy = false;
this.ascending = !this.ascending;
console.log('firstOption');
this.$emit('firstOption',this.ascending)
},
flag(){ flag(){
let temp = this.courceData.data; let temp = this.courceData.data;
let fourCource = temp&&temp.slice(0,4); let fourCource = temp&&temp.slice(0,4);
...@@ -269,7 +291,12 @@ export default { ...@@ -269,7 +291,12 @@ export default {
}, },
study(val){ study(val){
this.isStudy = true;
console.log('val',val); 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) this.$emit('study',val)
} }
} }
...@@ -289,6 +316,9 @@ export default { ...@@ -289,6 +316,9 @@ export default {
.courceTeachHeader{ .courceTeachHeader{
width: 100%; width: 100%;
} }
.titlegGreen{
color: RGBA(68, 146, 132, 1)
}
.change{ .change{
width: px2rem(57px); width: px2rem(57px);
height: px2rem(16px); height: px2rem(16px);
...@@ -303,9 +333,9 @@ export default { ...@@ -303,9 +333,9 @@ export default {
height: px2rem(16px); height: px2rem(16px);
text-align: center; text-align: center;
line-height: px2rem(14px); line-height: px2rem(14px);
display: inline-block;
border-radius: px2rem(9px); border-radius: px2rem(9px);
border: 1px solid RGBA(204, 204, 204, 1); border: 1px solid RGBA(204, 204, 204, 1);
margin-top: px2rem(10px);
} }
.content{ .content{
width: 100%; width: 100%;
......
src/style/global.scss
浏览文件 @ 9d13ebb0
...@@ -57,6 +57,9 @@ ...@@ -57,6 +57,9 @@
.fs28{ .fs28{
font-size: px2rem(14px); font-size: px2rem(14px);
} }
.fs32{
font-size: px2rem(16px);
}
.fs30{ .fs30{
font-size: px2rem(15px); font-size: px2rem(15px);
} }
......
src/views/home/home.vue
浏览文件 @ 9d13ebb0
...@@ -14,6 +14,7 @@ ...@@ -14,6 +14,7 @@
<section class="home-body"> <section class="home-body">
<YqyHomeBanner :resourceData="resourceData"/> <YqyHomeBanner :resourceData="resourceData"/>
<YqyHotLabel :allTags="allTags"/> <YqyHotLabel :allTags="allTags"/>
<YqyNewClass/>
<YqyTeacherList :teacherData="teacherData" :courceData="courceData"/> <YqyTeacherList :teacherData="teacherData" :courceData="courceData"/>
<YqyTeacherList :teacherData="needData" :courceData="needcourceData"/> <YqyTeacherList :teacherData="needData" :courceData="needcourceData"/>
</section> </section>
...@@ -37,7 +38,25 @@ import YqyHomeBanner from '../../components/business/yqy-home-banner'; ...@@ -37,7 +38,25 @@ import YqyHomeBanner from '../../components/business/yqy-home-banner';
import YqyHomeKeepon from '../../components/business/yqy-home-keepon'; import YqyHomeKeepon from '../../components/business/yqy-home-keepon';
import YqyHomePorter from '../../components/business/yqy-home-porter'; import YqyHomePorter from '../../components/business/yqy-home-porter';
import YqyHeaderTop from '../../components/business/yqy-header-top'; import YqyHeaderTop from '../../components/business/yqy-header-top';
import YqyNewClass from '../../components/business/yqy-new-class';
export default { export default {
components:{
Header,
// yqyTest
YqyHotLabel,
YqyHotTeacher,
YqyTeacherList,
YqyTeacherInfo,
YqyHomeHeader,
YqyHomeAdv,
YqyFiveMinutes,
YqyCategoryThree1,
YqyHomeBanner,
YqyHomeKeepon,
YqyHomePorter,
YqyHeaderTop,
YqyNewClass
},
data(){ data(){
return { return {
header: { header: {
...@@ -62,12 +81,22 @@ export default { ...@@ -62,12 +81,22 @@ export default {
title: '课程教学', title: '课程教学',
hasSelect: true, hasSelect: true,
showMoreBtn: false, showMoreBtn: false,
firstOption: '综合',
selectOptions: [ selectOptions: [
{ text: 'One', value: 'A' }, { text: 'One', value: 'A' },
{ text: 'Two', value: 'B' }, { text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' } { text: 'Three', value: 'C' }
], ],
options: ['学习人数', '发布时间'] options: [
{
isCheck: false,
title: '在学人数'
},
{
isCheck: false,
title: '最新发布'
}
]
}, },
courceData: { courceData: {
selected: '综合1', selected: '综合1',
...@@ -189,22 +218,6 @@ export default { ...@@ -189,22 +218,6 @@ export default {
] ]
} }
} }
},
components:{
Header,
// yqyTest
YqyHotLabel,
YqyHotTeacher,
YqyTeacherList,
YqyTeacherInfo,
YqyHomeHeader,
YqyHomeAdv,
YqyFiveMinutes,
YqyCategoryThree1,
YqyHomeBanner,
YqyHomeKeepon,
YqyHomePorter,
YqyHeaderTop
}, },
mounted(){ mounted(){
this.init() this.init()
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或