Skip to content

P
pica.cloud.web-education-admin
提交 4c4c6d2b 编写于 作者: chendeli's avatar chendeli
浏览文件
操作

one day home

上级 2cd6ec0d
展开全部 隐藏空白字符变更
内嵌 并排
正在显示 包含 10074 行增加 和 208 行删除
package-lock.json 0 → 100644
浏览文件 @ 4c4c6d2b
此差异已折叠。
src/components/business/yqy-adjust.vue 0 → 100644
浏览文件 @ 4c4c6d2b
<template>
<div class="courceTeach">
<div class="space-between courceTeachHeader">
<div :style="{'text-align': direction}" class="fontTitle">{{teacherData.title}}</div>
</div>
<div class="couseList">
<div :class="index%2==1 ? 'courseItem endLeft' : 'courseItem'" :key="index" v-for="(item,index) in cource">
<div class="coursePic">
<img src="../../images/552064153@2x.png" class="pic-tec" />
<span class="courseTag">高血压</span>
</div>
<p class="courseTxt">
高血压伴糖尿病的规范化治疗
</p>
<div class="courseOpt">
<span class="optInfo">刚刚 | 89人已学</span>
<span class="opt collect">
收藏
</span>
<span class="opt collected">
已收藏
</span>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'YqyTeacherList',
components: {
},
props:
{
teacherData: {
type: Object,
default: ()=>{
return {
title: '为您推荐',
hasSelect: true,
showMoreBtn: true,
selectOptions: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
],
firstOption: '综合',
options: [
{
isCheck: false,
title: '在学人数'
},
{
isCheck: false,
title: '最新发布'
}
]
}
}
},
hasPersonName: {
type: Boolean,
default: true
},
courceData: {
type: Object,
default:()=>{
return {
selected: '综合1',
hasHospital: true,
hasType: true,
ascending: true,
data: [
{
img: '../../images/Shape@2x.png',
name: '检查',
isLeft: true,
hospital: '阜外医院',
color: 'blue',
teacher: '小单',
count: 477,
type: '检查'
},
{
img: '../../images/Shape@2x.png',
name: '检查',
isLeft: true,
hospital: '阜外医院',
color: 'green',
teacher: '小单',
count: 477,
type: '检查'
},
{
img: '../../images/Shape@2x.png',
name: '检查',
isLeft: true,
hospital: '阜外医院',
color: 'pink',
teacher: '小单',
count: 477,
type: '检查'
},
{
img: '../../images/Shape@2x.png',
name: '检查',
isLeft: true,
hospital: '阜外医院',
color: 'yellow',
teacher: '小单',
count: 477,
type: '检查'
},
{
img: '../../images/Shape@2x.png',
name: '检查',
isLeft: true,
hospital: '阜外医院',
color: 'blue',
teacher: '小单',
count: 477,
type: '检查'
},
{
img: '../../images/Shape@2x.png',
name: '检查',
isLeft: true,
hospital: '阜外医院',
color: 'green',
teacher: '小单',
count: 477,
type: '检查'
},
{
img: '../../images/Shape@2x.png',
name: '检查',
isLeft: true,
hospital: '阜外医院',
color: 'pink',
teacher: '小单',
count: 477,
type: '检查'
},
{
img: '../../images/Shape@2x.png',
name: '检查',
isLeft: true,
hospital: '阜外医院',
color: 'yellow',
teacher: '小单',
count: 477,
type: '检查'
}
]
}
}
},
direction: {
type: String,
default: 'left'
}
},
watch: {
selected(val){
console.log('val',val);
this.$emit('selected',val)
}
},
data () {
return {
selected: 'A',
isStudy: false,
ascending: true,
cource: [
{
img: '../../images/Shape@2x.png',
name: '检查',
hospital: '阜外医院',
color: 'blue'
},
{
img: '../../images/Shape@2x.png',
name: '检查',
hospital: '阜外医院',
color: 'blue'
},
{
img: '../../images/Shape@2x.png',
name: '检查',
hospital: '阜外医院',
color: 'blue'
},
{
img: '../../images/Shape@2x.png',
name: '检查',
hospital: '阜外医院'
},
{
img: '../../images/Shape@2x.png',
name: '检查',
hospital: '阜外医院'
},
{
img: '../../images/Shape@2x.png',
name: '检查',
hospital: '阜外医院'
},
{
img: '../../images/Shape@2x.png',
name: '检查',
hospital: '阜外医院'
},
{
img: '../../images/Shape@2x.png',
name: '检查',
hospital: '阜外医院'
}
],
showMore: false,
options: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
]
}
},
created () {
},
mounted(){
this.flag();
},
methods: {
disable(val){
console.log('val',val);
},
teacherChange(){
console.log('teacherChange');
this.$emit('teacherChange')
},
teacherMore(){
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);
console.log('fourCource',fourCource);
if(!this.showMore&&this.teacherData.showMoreBtn){
this.cource = fourCource;
}else{
this.cource = this.courceData.data;
}
},
showMoreFn(){
console.log('more',1);
this.showMore = !this.showMore;
this.flag();
},
collection(){
},
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)
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
@import '../../style/global.scss';
.ellipsis{
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
width: px2rem(170px);
}
.couseList{
overflow: hidden;
}
.courceTeach{
padding:0 px2rem(15px);
}
.courseItem{
float: left;
margin-bottom: px2rem(19px);
margin-right: px2rem(5px);
}
.endLeft{
margin-right: 0;
}
.coursePic{
width:px2rem(170px);
height:px2rem(95px);
position: relative;
.pic-tec{
width: 100%;
display: block;
}
.courseTag{
position: absolute;
display: inline-block;
top:px2rem(5px);
left: px2rem(5px);
height: px2rem(16px);
color:#4A87D4;
padding: 0 px2rem(3px);
background: #C3DCFB;
font-size: px2rem(10px);
border-radius: px2rem(2px);
}
}
.courseTxt{
margin-top: px2rem(5px);
font-size: px2rem(14px);
line-height: px2rem(19px);
color: #333;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
width: px2rem(170px);
}
.courseOpt{
font-size: px2rem(12px);
margin-top: px2rem(6px);
.optInfo{
color:#999;
}
.opt{
height: px2rem(18px);
line-height: px2rem(18px);
padding:0 px2rem(4px);
}
.collect{
background: #F7F8F9;
color: #666;
}
.collected{
color: #F47A48;
background: RGBA(244, 122, 72, 0.04);
}
}
.fontTitle{
font-size: px2rem(18px);
padding: 0 0 px2rem(21px) px2rem(5px);
font-weight: bold;
}
.title{
font-size: px2rem(16px);
text-align: left;
width: px2rem(170px);
max-height: px2rem(20px);
}
</style>
src/components/business/yqy-category-three-1.vue
浏览文件 @ 4c4c6d2b
......@@ -84,6 +84,7 @@ export default {
.hotTeacher{
width: 100%;
background-color: #fff;
margin-top: px2rem(15px);
padding: 0 px2rem(15px) px2rem(26px);
.teacherItem{
width: 100%;
......
src/components/business/yqy-five-minutes.vue
浏览文件 @ 4c4c6d2b
<template>
<div class="hotTeacher">
<div class="space-between">
<img class="img" src="../../images/Shape@2x.png"/>
<div @click="fiveMinutesMore" class="five-more gray fs11">更多></div>
<img class="img" src="../../images/mins.png"/>
<div @click="fiveMinutesMore" class="five-more gray fs11">
更多<img src="../../images/right-throw.png" class="thorwIcon"/>
</div>
</div>
<div class="teacherItem space-between" :key="index" v-for="(item,index) in hotTeachers">
<div class="teacherItemImg">
......@@ -11,7 +13,7 @@
<div class="fiveText">
<div class="teacherItemName fs14">{{item.name}}</div>
<div class="five-tag fs11">#心动时刻</div>
<img @click="video(index)" class="five-radio" src="../../images/Shape@2x.png"/>
<img @click="video(index)" class="five-radio" src="../../images/play.png"/>
</div>
</div>
</div>
......@@ -80,17 +82,21 @@ export default {
width: 100%;
background-color: #fff;
padding: 0 px2rem(15px) px2rem(26px);
margin-top:px2rem(15px);
.img{
width: px2rem(109px);
height: px2rem(22px);
}
.thorwIcon{
width: px2rem(8px);
height: px2rem(8px);
}
.five-more{
border: 1px solid RGBA(169, 174, 183, 1);
border-radius: px2rem(9px);
width: px2rem(40px);
height: px2rem(16px);
text-align: center;
line-height: px2rem(15px);
padding: px2rem(3px) px2rem(5px) px2rem(2px) px2rem(6px);
vertical-align: middle;
}
.teacherItem{
width: 100%;
......
src/components/business/yqy-home-adv.vue
浏览文件 @ 4c4c6d2b
<template>
<div class="hotTeacher">
<div class="teacherItem" :key="index" v-for="(item,index) in hotTeachers">
<img class="teacherItemImg" :src="item.img"/>
<span class="teacherItemName">{{item.name}}</span>
<div class="title">
{{title}}
</div>
<div class="teacherList">
<div class="teacherItemBox">
<div class="teacherItem" :key="index" v-for="(item,index) in hotTeachers">
<div class="headPic">
<img class="teacherItemImg" src="../../images/552064153@2x.png"/>
</div>
<span class="teacherItemName">{{item.name}}</span>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'YqyHotTeacher',
components: {
},
watch: {
},
props: {
name: 'YqyHotTeacher',
props: {
title:{
type:String,
default:'云鹊名师'
},
hotTeachers: {
type: Array,
default:()=>{
return [
{
img: '../../images/Shape@2x.png',
img: '../../images/552064153@2x.png',
name: '蒋立新'
},
{
img: '../../images/head-test.png',
name: '蒋立新'
},
{
img: '../../images/head-test.png',
name: '蒋立新'
},
{
img: '../../images/Shape@2x.png',
img: '../../images/head-test.png',
name: '蒋立新'
},
{
img: '../../images/Shape@2x.png',
img: '../../images/head-test.png',
name: '蒋立新'
},
{
img: '../../images/Shape@2x.png',
img: '../../images/head-test.png',
name: '蒋立新'
},
{
img: '../../images/head-test.png',
name: '蒋立新'
}
]
......@@ -57,25 +80,49 @@ export default {
width: 100%;
background-color: #fff;
padding: 0 px2rem(15px) px2rem(26px);
.title{
font-size: px2rem(18px);
padding: 0 0 px2rem(21px) px2rem(5px);
font-weight: bold;
}
.teacherList{
width: 100%;
overflow: hidden;
height: px2rem(75px);
overflow-x: scroll;
-webkit-tap-highlight-color:rgba(0,0,0,0);
outline: 0;
-webkit-overflow-scrolling : touch;
}
.teacherItemBox{
width: 1100px;
}
.teacherItem{
font-size: px2rem(13pt);
margin: px2rem(10pt) px2rem(15pt) 0 0;
font-size: px2rem(13px);
margin: 0 px2rem(19px) 0 0;
display: inline-block;
padding: px2rem(8px) px2rem(10px);
position: relative;
box-shadow: 0 px2rem(2px) px2rem(8px) RGBA(49, 127, 119, 0.1);
float: left;
text-align: center;
.headPic{
background: #ECECEC;
width: px2rem(50px);
height: px2rem(50px);
border-radius: 50%;
}
.teacherItemImg{
width: px2rem(22px);
height: px2rem(22px);
width: px2rem(39px);
height: px2rem(44px);
margin-top: px2rem(6px);
border-radius: 50%;
position: absolute;
top: 10px;
}
.teacherItemName{
color: RGBA(102, 102, 102, 1);
padding: px2rem(2px) px2rem(6px);
font-size: px2rem(14pt);
margin-left: px2rem(24px);
padding-top: px2rem(5px);
font-size: px2rem(13px);
line-height: px2rem(19px);
}
}
}
......
src/components/business/yqy-home-banner.vue
浏览文件 @ 4c4c6d2b
<template>
<div class="hello">
<div class="bannerBox">
<div class="banner space-between">
<div class="bannerItem" :key="index" v-for="(item,index) in resourceData">
<div :class="index+1==resourceData.length ?'bannerItem itemEnd' : 'bannerItem'" :key="index" v-for="(item,index) in resourceData">
<!-- <img class="bannerImg" :src="item.img"/> -->
<img class="bannerImg" src="../../images/Shape@2x.png"/>
<span class="bannerText fs24">{{item.name}}</span>
<span class="bannerText fs24">
{{item.name}}<i></i>
</span>
</div>
</div>
</div>
......@@ -54,22 +56,31 @@ html,body{
height: px2rem(100%);
background-color: #F8F8F8;
}
.bannerBox{
position: relative;
height: px2rem(47px);
padding:0 px2rem(15px);
}
.banner{
width: px2rem(345px);
height: px2rem(74px);
background-color: #fff;
position: absolute;
top: px2rem(165px);
left: px2rem(17px);
top:-(px2rem(27px));
padding: px2rem(15px) px2rem(10px);
box-shadow: 0 px2rem(1px) px2rem(5px) RGBA(42, 94, 161, 0.15);
border-radius: px2rem(3px);
}
.bannerItem{
width: px2rem(50px);
display: inline;
display: inline-block;
position: relative;
// margin-right: px2rem(18px);
margin-right: px2rem(18px);
text-align: center;
}
.itemEnd{
margin-right: 0
}
.bannerImg{
min-width: px2rem(22px);
......@@ -78,11 +89,20 @@ html,body{
display: block;
}
.bannerText{
position: absolute;
top: px2rem(30px);
width: px2rem(50px);
left: 0;
display: inline-block;
position: relative;
font-size: px2rem(12px);
text-align: center;
}
.bannerText i{
width: px2rem(4px);
height: px2rem(4px);
display: inline-block;
background: #FB5B52;
border-radius: 100%;
position: absolute;
top:0;
right: -4px
}
</style>
src/components/business/yqy-home-header.vue
浏览文件 @ 4c4c6d2b
......@@ -2,10 +2,10 @@
<div class="space-between header">
<div :class="resourceData.isTransparent?'searchTransparent':'bgWhite'" class="search">
<input type="search" :class="resourceData.isTransparent?'searchTransparent':''" class="input" v-model="message" :placeholder="resourceData.placeholder"/>
<img class="searchImg" :src="resourceData.img">
<img class="searchImg" src='../../images/Group2@2x.png'>
</div>
<div class="headerRight">
<img class="info" :src="resourceData.img">
<img class="info" src='../../images/msg1.png'>
<div :class="resourceData.isTransparent?'transparent':'notTransparent'" class="info-count fs10">{{resourceData.count}}</div>
</div>
</div>
......@@ -14,6 +14,11 @@
<script>
export default {
name: 'header',
data(){
return {
}
},
components: {
},
props: {
......@@ -23,8 +28,8 @@ export default {
return {
isTransparent: true,
placeholder: '请输入课程名称',
img: '../../images/Shape@2x.png',
count: 0
img: '../../images/msg1.png',
count: "10"
}
}
}
......@@ -57,7 +62,7 @@ html,body{
}
.searchTransparent{
background: transparent;
border: 1px solid #fff;
border: 1px solid rgba(255, 255, 255, 0.5);
color: #fff;
}
.searchTransparent::-webkit-input-placeholder{
......@@ -69,6 +74,7 @@ html,body{
.headerRight{
width: px2rem(30px);
height: px2rem(30px);
position: relative;
}
.fs30{
font-size: px2rem(15px);
......@@ -102,7 +108,7 @@ html,body{
.searchImg{
width: px2rem(16px);
height: px2rem(16px);
margin: px2rem(8px) px2rem(18px) px2rem(8px) 0;
margin: px2rem(6px) px2rem(15px) px2rem(9px) 0;
float: right;
}
.info{
......@@ -112,12 +118,13 @@ html,body{
.info-count{
position:absolute;
top: 0;
right: px2rem(21px);
width: px2rem(15px);
left: px2rem(21px);
/*width: px2rem(15px);*/
padding:0 px2rem(3px);
height: px2rem(15px);
border-radius: 50%;
text-align: center;
line-height: 15px;
line-height: px2rem(15px);
}
.transparent{
background-color: #fff;
......
src/components/business/yqy-home-keepon.vue
浏览文件 @ 4c4c6d2b
<template>
<div class="header bgWhite">
<div v-show="isShow" class="border-bottom space-between">
<div>
<div class="keepLearn">
<div v-show="isShow" class="border-bottom space-between keepLearnBox">
<div class="learningTxt">
<div class="gray keeponTitle">{{resourceData.message}}</div>
<div>
<span class="gray fs24 keeponRight">已学习:{{resourceData.week}} 周</span>
<span class="gray fs24 keeponRight">剩余:{{resourceData.Remaining}}%</span>
<span class="gray fs24 continueStudy" @click="continueStudy">继续学习></span>
</div>
</div>
<div>
<img @click="cancel" src="../../images/Shape@2x.png"/>
</div>
<span class="closeM">
<img @click="cancel" src="../../images/close.png"/>
</span>
</div>
</div>
</template>
......@@ -26,7 +28,7 @@ export default {
type: Object,
default:()=>{
return {
message: '动态',
message: '动态血压监测与高血压精准治疗该如何进行',
week: 2,
Remaining: 2
}
......@@ -60,9 +62,16 @@ export default {
<style lang="scss" scoped>
@import '../../style/mixin.scss';
@import '../../style/global.scss';
.header{
.keepLearn{
width: 100%;
padding: 0 px2rem(15px);
margin-top: px2rem(15px);
.keepLearnBox{
padding: px2rem(10px);
position: relative;
}
.border-bottom{
width: 100%;
border-bottom: 1px solid RGBA(231, 231, 231, 1);
......@@ -77,6 +86,21 @@ export default {
.keeponRight{
margin-right: px2rem(15px);
}
.learningTxt{
position: relative;
}
.closeM{
position: absolute;
width: px2rem(25px);
height: px2rem(25px);
display: inline-block;
right: px2rem(10px);
top:50%;
margin-top:-(px2rem(8px));
img{
width: 100%;
display: block;
}
}
}
</style>
15px
\ No newline at end of file
src/components/business/yqy-home-porter.vue
浏览文件 @ 4c4c6d2b
<template>
<div class="hotTeacher">
<div class="space-between">
<img class="img" src="../../images/Shape@2x.png"/>
<img class="img" src="../../images/Group21@2x.png"/>
</div>
<div class="teacherItem space-between">
<div class="teacherItemImg">
......@@ -76,9 +76,10 @@ export default {
}
.teacherItem{
width: 100%;
height: px2rem(85px);
height: px2rem(65px);
position: relative;
margin-top: px2rem(20px);
background: #F9FAFC;
&:not(:last-child){
border-bottom: 1px solid RGBA(240, 240, 240, 1);
}
......@@ -89,7 +90,8 @@ export default {
}
.fiveText{
width: px2rem(280px);
height: px2rem(38px);
position: relative;
}
.teacherItemName{
color: RGBA(102, 102, 102, 1);
......@@ -107,8 +109,9 @@ export default {
text-align: center;
line-height: px2rem(20px);
position:absolute;
right: 0;
top: px2rem(18px);
right: px2rem(10px);;
top: 50%;
margin-top:-(px2rem(10px));
}
}
}
......
src/components/business/yqy-teacher-list.vue
浏览文件 @ 4c4c6d2b
<template>
<div class="courceTeach">
<div class="space-between courceTeachHeader">
<div :style="{'text-align': direction}" class="fontTitle">{{teacherData.title}}</div>
<div @click="teacherChange" class="fs11 gray change">换一批
<img src=""/>
</div>
</div>
<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>needLeft
</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 :style="{'text-align': direction}" class="fontTitle">{{teacherData.title}}</div>
</div>
<div class="content">
<div class="needLeft bgWhite white" :key="index" v-for="(item,index) in cource">
<img class="courceImg" src=""/>
<div v-if="courceData.hasType" :style="{'color':item.color}" :class="[item.isLeft?'flex-start':'flex-end']" class="courceType fs22 bgWhite">{{item.type}}
<div class="couseList">
<div :class="index%2==1 ? 'courseItem endLeft' : 'courseItem'" :key="index" v-for="(item,index) in cource">
<div class="coursePic">
<img src="../../images/552064153@2x.png" class="pic-tec" />
<span class="courseTag">高血压</span>
</div>
<div :class="hasPersonName?'space-between':'flex-end'" class="courceText fs22 white">
<div v-if="hasPersonName"><img class="avatar" src="../../images/Shape@2x.png"/><span class="person white">{{item.teacher}}</span></div>
<div class="white">{{item.count}}人已学</div>
</div>
<div class="title">{{item.name}}
<span v-if="courceData.hasHospital" class="gray fs24">{{item.hospital}}</span>
<p class="courseTxt">
高血压伴糖尿病的规范化治疗
</p>
<div class="courseOpt">
<span class="optInfo">刚刚 | 89人已学</span>
<span class="opt collect">
收藏
</span>
<span class="opt collected">
已收藏
</span>
</div>
</div>
</div>
<div @click="showMoreFn" v-if="teacherData.showMoreBtn" class="courceMore">更多课程</div>
</div>
</template>
......@@ -51,7 +39,7 @@ export default {
type: Object,
default: ()=>{
return {
title: '课程教学',
title: '最新课程',
hasSelect: true,
showMoreBtn: true,
selectOptions: [
......@@ -276,18 +264,10 @@ export default {
console.log('more',1);
this.showMore = !this.showMore;
// let temp = this.cource;
// let fourCource = temp&&temp.slice(0,4);
// console.log('fourCource',fourCource);
// if(!this.showMore){
// this.courceData = fourCource;
// }else{
// this.courceData = this.cource;
// }
this.flag();
},
collection(){
console.log('收藏');
},
study(val){
......@@ -313,80 +293,80 @@ export default {
-webkit-line-clamp: 2;
width: px2rem(170px);
}
.courceTeachHeader{
width: 100%;
}
.titlegGreen{
color: RGBA(68, 146, 132, 1)
}
.change{
width: px2rem(57px);
height: px2rem(16px);
text-align: center;
line-height: px2rem(14px);
border: 1px solid RGBA(204, 204, 204, 1);
border-radius: px2rem(9px);
margin-top: px2rem(6px);
}
.teacherMore{
width: px2rem(65px);
height: px2rem(16px);
text-align: center;
line-height: px2rem(14px);
border-radius: px2rem(9px);
border: 1px solid RGBA(204, 204, 204, 1);
margin-top: px2rem(10px);
}
.content{
width: 100%;
height: px2rem(300px);
.couseList{
overflow: hidden;
}
.courceTeach{
background: #fff;
padding: px2rem(15px) px2rem(15px) 0 px2rem(10px);
padding:0 px2rem(15px);
}
.blue{
background: RGBA(236, 244, 242, 1);
color: RGBA(68, 146, 132, 1);
}
.green{
background: RGBA(235, 242, 249, 1);
color: RGBA(74, 135, 212, 1);
}
.pink{
background: RGBA(254, 242, 237, 1);
color: RGBA(244, 122, 72, 1);
}
.yellow{
background: RGBA(248, 245, 238, 1);
color: RGBA(202, 168, 97, 1);
.courseItem{
float: left;
margin-bottom: px2rem(19px);
margin-right: px2rem(5px);
}
.courceText{
position: absolute;
top: px2rem(75px);
width: 90%;
padding-left: px2rem(7px);
.endLeft{
margin-right: 0;
}
.courceType{
.coursePic{
width:px2rem(170px);
height:px2rem(95px);
position: relative;
.pic-tec{
width: 100%;
display: block;
}
.courseTag{
position: absolute;
top: px2rem(5px);
// right: px2rem(5px);
width: 90%;
text-align: right;
width: px2rem(30px);
display: inline-block;
top:px2rem(5px);
left: px2rem(5px);
height: px2rem(16px);
color:#4A87D4;
padding: 0 px2rem(3px);
background: #C3DCFB;
font-size: px2rem(10px);
border-radius: px2rem(2px);
line-height: px2rem(16px);
text-align: center;
display: flex;
justify-content: flex-start;
margin: 0 10px;
}
}
.courseTxt{
margin-top: px2rem(5px);
font-size: px2rem(14px);
line-height: px2rem(19px);
color: #333;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
width: px2rem(170px);
}
.courseOpt{
font-size: px2rem(12px);
margin-top: px2rem(6px);
.optInfo{
color:#999;
}
.opt{
height: px2rem(18px);
line-height: px2rem(18px);
padding:0 px2rem(4px);
}
.collect{
background: #F7F8F9;
color: #666;
}
.collected{
color: #F47A48;
background: RGBA(244, 122, 72, 0.04);
}
}
.fontTitle{
font-size: px2rem(18px);
padding: 0 0 px2rem(21px) px2rem(5px);
// width: 100%;
text-align: left;
font-weight: bold;
}
.title{
......@@ -395,44 +375,6 @@ export default {
width: px2rem(170px);
max-height: px2rem(20px);
}
.courceLeft{
padding-left: px2rem(15px);
}
.needLeft{
float: left;
padding: 0 0 px2rem(40px) px2rem(5px);
position: relative;
min-height: px2rem(123px);
min-width: px2rem(170px);
margin-bottom: 10px
}
.courceTime{
float: left;
}
.courceImg{
width: px2rem(170px);
height: px2rem(96px);
margin-bottom: px2rem(10px);
background-color: yellow;
}
.courceMore{
font-size: px2rem(15px);
color: #999999;
text-align: center;
}
.teachTitle{
width: 100%;
padding-left: px2rem(5px);
text-align: left;
}
.avatar{
width: px2rem(11px);
height: px2rem(11px);
position: absolute;
top: px2rem(4px);
}
.person{
position: absolute;
left: px2rem(25px);
}
</style>
src/views/home/home-new.vue 0 → 100644
浏览文件 @ 4c4c6d2b
<template>
<section class="font-style">
<section class="home-header">
<div class="home-topMenu">
<YqyHomeHeader/>
</div>
<div class="swiper">
<mt-swipe :auto="0">
<mt-swipe-item>
<img src="../../images/552064153@2x.png"/>
</mt-swipe-item>
<mt-swipe-item>
<img src="../../images/552064153@2x.png"/>
</mt-swipe-item>
</mt-swipe>
</div>
</section>
<section class="home-body">
<YqyHomeBanner/>
<div class="pathologicList">
<div class="pathologicItem">
<span class="pathologicIcon">
<img src="../../images/G@2x.png"/>
</span>
<span class="pathologicTxt fs14">高血压全解析</span>
</div>
<div class="pathologicItem" style="margin-right: 0">
<span class="pathologicIcon">
<img src="../../images/G3x.png"/>
</span>
<span class="pathologicTxt fs14">高血压全解析</span>
</div>
<div class="clear"></div>
</div>
<!--继续学习-->
<YqyHomeKeepon/>
<!--专题分类-->
<YqyCategoryThree1/>
<!--健康守门人-->
<YqyHomePorter/>
<!--云雀名师-->
<YqyHomeAdv/>
<!--最新课程-->
<YqyTeacherList/>
<!--分钟医学院-->
<YqyFiveMinutes/>
<!--为你推荐-->
<YqyHomeAdjust/>
</section>
<section class="home-bottom">
<!-- <yqyTest/> -->
</section>
</section>
</template>
<script>
import { Swipe, SwipeItem ,Header} from 'mint-ui';
// import yqyTest from '@/components/common/yqy/yqyTest'
import YqyHotLabel from '../../components/business/yqy-hot-label';
import YqyHotTeacher from '../../components/business/yqy-hot-teacher';
import YqyTeacherList from '../../components/business/yqy-teacher-list';
import YqyTeacherInfo from '../../components/business/yqy-teacher-info';
import YqyHomeHeader from '../../components/business/yqy-home-header';
import YqyHomeAdv from '../../components/business/yqy-home-adv';
import YqyFiveMinutes from '../../components/business/yqy-five-minutes';
import YqyCategoryThree1 from '../../components/business/yqy-category-three-1';
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 YqyHomeAdjust from '../../components/business/yqy-adjust';
export default {
data(){
return {
}
},
components:{
Header,
Swipe,
SwipeItem,
// yqyTest
YqyHotLabel,
YqyHotTeacher,
YqyTeacherList,
YqyTeacherInfo,
YqyHomeHeader,
YqyHomeAdv,
YqyFiveMinutes,
YqyCategoryThree1,
YqyHomeBanner,
YqyHomeKeepon,
YqyHomePorter,
YqyHomeAdjust
},
mounted(){
this.init()
},
computed:{
},
methods:{
init() {
this.API_GET('contents/homeButton/msg', {}).then( res => {
logger.debug(res)
this.$log.debug(res)
})
let para = {
sysCode: 27,
token: this.token,
setEntry: 'headers'
}
this.GET('analysis/activityDetail', para).then( res => {
logger.debug(res)
})
para = {
sysCode: 27,
rankingType: 27,
flag: 1,
token: this.token,
setEntry: 'headers'
}
this.GET('exams/rankings', para).then( res => {
logger.debug(res)
})
},
pushView : function(page){
console.log('pushView');
rocNative.pushView({
url : page
}).then(function(res) {
console.log('pushView then' + JSON.stringify(res));
}).catch(function(res){
console.log('pushView catch' + JSON.stringify(res));
});
},
goBack: function (msg) {
console.log('goBack');
rocNative.goBack()
.then(function(res) {
console.log('goBack then' + JSON.stringify(res));
}).catch(function(res){
console.log('goBack catch' + JSON.stringify(res));
});
},
toast : function(msg){
console.log('toast');
rocNative.toast({
msg: msg
}).then(function(res) {
console.log('toast then' + JSON.stringify(res));
}).catch(function(res){
console.log('toast catch' + JSON.stringify(res));
});
},
},
}
</script>
<style>
.swiper .mint-swipe-indicators{
right: 6px;
top:50%;
bottom: inherit;
left:inherit;
width:10px;
text-align: center;
transform: translateX(0%);
transform: translateY(-50%);
}
.swiper .mint-swipe-indicator{
width:2px;
height: 8px;
background: #fff;
opacity: 0.4;
}
.swiper .is-active{
opacity: 1;
}
</style>
<style lang="scss" scoped>
@import '../../style/mixin';
.mint-header {
background-color: rgba($color: #000000, $alpha: 0)
}
.font-style {
@include sc(0.6rem, #666);
}
.home-topMenu{
width: 100%;
text-align:center;
top:0.84375rem;
position: absolute;
z-index: 10;
}
.home-header {
height: px2rem(202px);
.swiper{
height: 100%;
/* @include bis('../../images/552064153@2x.png');*/
}
.logo_img{
height: px2rem(85px);
width: px2rem(345px);
text-align: center;
}
}
.home-body{
background: #fff
}
.pathologicList{
width: 100%;
padding: 0 px2rem(15px);
margin-top: px2rem(15px);
.pathologicItem{
float: left;
width:48%;
box-shadow: 0 px2rem(2px) px2rem(6px) RGBA(42, 94, 161, 0.15);
border-radius: px2rem(3px);
background: #fff;
padding: px2rem(12px) 0 px2rem(12px) 0;
margin-right: 4%;
text-align: center;
.pathologicIcon{
vertical-align: middle;
img{
width: px2rem(20px);
height: px2rem(20px);
}
}
.pathologicTxt{
font-size: px2rem(14px);
line-height: px2rem(20px);
font-weight: 700;
display: inline-block;
vertical-align: middle;
}
}
.clear{
clear: both;
}
}
</style>
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或