Skip to content

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

Merge remote-tracking branch 'remotes/origin/dev-component-1025' into release

上级 acaa2808 b28c8e3f
展开全部 隐藏空白字符变更
内嵌 并排
正在显示 包含 2265 行增加 和 12 行删除
src/components/business/yqy-category-three-1.vue 0 → 100644
浏览文件 @ efb671e1
<template>
<div class="hotTeacher">
<div :style="{'text-align': resourceData.direction}" class="hotTagTitle">{{resourceData.title}}</div>
<div class="teacherItem space-between">
<div :style="{'background-color':resourceData.item.pic1.bg}" class="category-left">
<div class="img1-title fs14 center fw">{{resourceData.item.pic1.title}}</div>
<div class="fs14 fw gray">{{resourceData.item.pic1.time}}</div>
<img class="category-img-tag" :src="resourceData.item.pic1.left"/>
<img class="category-img1" :src="resourceData.item.pic1.right"/>
</div>
<div class="category-right">
<div class="relative category-img2">
<div class="category-img2-title fs14">{{resourceData.item.pic2.title}}</div>
<img class="category-img-tag" :src="resourceData.item.pic2.left"/>
<img class="category-img" :src="resourceData.item.pic2.bg"/>
</div>
<div class="category-img3">
<div class="category-img2-title fs14">{{resourceData.item.pic3.title}}</div>
<img class="category-img-tag" :src="resourceData.item.pic3.left"/>
<img class="category-img" :src="resourceData.item.pic3.bg"/>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'YqyHotTeacher',
components: {
},
watch: {
},
props: {
resourceData: {
type: Object,
default:()=>{
return {
title: '专题分类',
direction: 'left',
item: {
pic1:{
bg: 'RGBA(230, 243, 243, 1)',
title: '用医学知识 赢百万现金',
time: '每周四20:00开赛',
left: '../../images/Shape@2x.png',
right: '../../images/Shape@2x.png'
},
pic2:{
bg: '../../images/Shape@2x.png',
title: '心血管病高危人群早期筛查与综合干预',
left: '../../images/Shape@2x.png'
},
pic3:{
bg: '../../images/Shape@2x.png',
title: '心血管病高危人群早期筛查与综合干预',
left: '../../images/Shape@2x.png'
}
}
}
}
}
},
data () {
return {
}
},
mounted(){
},
methods: {
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
@import '../../style/global.scss';
.hotTagTitle{
font-size: px2rem(18px);
font-weight: bold;
margin-bottom: px2rem(15px);
}
.hotTeacher{
width: 100%;
background-color: #fff;
padding: 0 px2rem(15px) px2rem(26px);
.teacherItem{
width: 100%;
height: px2rem(190px);
.category-left{
width: px2rem(168px);
height: px2rem(190px);
position: relative;
padding: px2rem(10px);
.category-img{
width: 100%;
height: 100%;
}
.category-img1{
width: px2rem(101px);
height: px2rem(120px);
position:absolute;
bottom: 0;
right: 0;
}
.category-img-tag{
width: px2rem(55px);
height: px2rem(17px);
position:absolute;
bottom: px2rem(10px);
left: px2rem(10px);
}
.img1-title{
color: RGBA(49, 125, 121, 1);
margin: px2rem(5px) 0 px2rem(3px) 0;
}
}
.category-right{
width: px2rem(168px);
height: px2rem(190px);
position: relative;
.category-img2-title{
color: RGBA(74, 85, 102, 1);
}
.category-img{
width: 100%;
height: 100%;
}
.category-img-tag{
width: px2rem(55px);
height: px2rem(17px);
position:absolute;
bottom: px2rem(10px);
left: px2rem(10px);
}
.category-img3{
width: px2rem(168px);
height: px2rem(90px);
margin-top: px2rem(10px);
}
.category-img2{
width: px2rem(168px);
height: px2rem(90px);
}
.category-img2-title{
position:absolute;
color: RGBA(74, 85, 102, 1);
margin: px2rem(10px);
}
}
.teacherItemImg{
width: px2rem(23px);
height: px2rem(23px);
border-radius: 50%;
position: absolute;
top: 10px;
}
}
}
</style>
src/components/business/yqy-five-minutes.vue 0 → 100644
浏览文件 @ efb671e1
<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>
</div>
<div class="teacherItem space-between" :key="index" v-for="(item,index) in hotTeachers">
<div class="teacherItemImg">
<img :src="item.img"/>
</div>
<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"/>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'YqyFiveMinutes',
components: {
},
watch: {
},
props: {
hotTeachers: {
type: Array,
default:()=>{
return [
{
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: '医院'
}
]
}
}
},
data () {
return {
}
},
mounted(){
},
methods: {
fiveMinutesMore(){
console.log('fiveMinutesMore');
this.$emit('fiveMinutesMore')
},
video(val){
console.log('video',val);
this.$emit('video')
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
@import '../../style/global.scss';
.hotTeacher{
width: 100%;
background-color: #fff;
padding: 0 px2rem(15px) px2rem(26px);
.img{
width: px2rem(109px);
height: px2rem(22px);
}
.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);
}
.teacherItem{
width: 100%;
height: px2rem(85px);
position: relative;
margin-top: px2rem(20px);
&:not(:last-child){
border-bottom: 1px solid RGBA(240, 240, 240, 1);
}
.teacherItemImg{
width: px2rem(65px);
height: px2rem(65px);
border-radius: px2rem(3px);
}
.fiveText{
width: px2rem(260px);
height: px2rem(38px);
}
.teacherItemName{
color: RGBA(102, 102, 102, 1);
margin-bottom: px2rem(13px);
}
.five-tag{
width: px2rem(61px);
height: px2rem(17px);
border-radius: 0 px2rem(3px) px2rem(3px) px2rem(3px);
color: RGBA(191, 158, 21, 1);
background-color: RGBA(250, 229, 175, 1);
}
.five-radio{
width: px2rem(25px);
height: px2rem(25px);
border-radius: 50%;
position:absolute;
right: 0;
top: px2rem(46px);
}
}
}
</style>
src/components/business/yqy-header-top.vue 0 → 100644
浏览文件 @ efb671e1
<template>
<div class="hello">
<div class="header">
<div class="white gxy fs50">{{resourceData.title}}</div>
<div>
<span class="white fs30 gxyStudy">{{resourceData.studyCount.toLocaleString()}}人学习</span>
<span class="white fs30">{{resourceData.follower.toLocaleString()}}人关注</span>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'YqyHeaderTop',
components: {
},
props: {
resourceData: {
type: Object,
default:()=>{
return {
title: '高血压',
studyCount: 270000,
follower: 1
}
}
}
},
watch: {
message(val){
console.log('val',val);
}
},
data () {
return {
message: ''
}
},
mounted(){
},
methods: {
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
@import '../../style/global.scss';
html,body{
width: px2rem(375px);
height: 100%;
background-color: #F8F8F8;
}
.white{
color: #fff;
}
.fs30{
font-size: px2rem(15px);
}
.gxyStudy{
margin-right: px2rem(19px);
}
.gxy{
font-size: px2rem(25px);
margin: px2rem(25px) 0 px2rem(11px) 0;
}
.header{
width: 100%;
height: px2rem(213px);
background-image: url('http://pica-pro.oss-cn-shanghai.aliyuncs.com/teach/bg.png');
}
.hotTag{
width: 100%;
height: px2rem(150px);
}
.hotTagTitle{
font-size: px2rem(18px);
padding: px2rem(73px) px2rem(15px);
float: left;
background-color: #fff;
}
.cource{
width: 100%;
height: px2rem(350px);
}
.fontTitle{
font-size: px2rem(18px);
padding: 0 0 px2rem(21px) px2rem(15px);
float: left;
width: 100%;
text-align: left;
}
.title{
font-size: px2rem(16px);
}
.courceLeft{
float: left;
padding-left: px2rem(15px);
}
.needLeft{
float: left;
padding: 0 0 px2rem(40px) px2rem(15px);
}
.courceTime{
float: left;
}
.courceImg{
width: px2rem(170px);
height: px2rem(96px);
margin-bottom: px2rem(10px);
}
.courceMore{
font-size: px2rem(15px);
color: #999999;
}
.need{
width: 100%;
height: px2rem(325px);
margin-top: px2rem(35px);
}
</style>
src/components/business/yqy-home-adv.vue 0 → 100644
浏览文件 @ efb671e1
<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>
</div>
</template>
<script>
export default {
name: 'YqyHotTeacher',
components: {
},
watch: {
},
props: {
hotTeachers: {
type: Array,
default:()=>{
return [
{
img: '../../images/Shape@2x.png',
name: '蒋立新'
},
{
img: '../../images/Shape@2x.png',
name: '蒋立新'
},
{
img: '../../images/Shape@2x.png',
name: '蒋立新'
},
{
img: '../../images/Shape@2x.png',
name: '蒋立新'
}
]
}
}
},
data () {
return {
}
},
mounted(){
},
methods: {
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
.hotTeacher{
width: 100%;
background-color: #fff;
padding: 0 px2rem(15px) px2rem(26px);
.teacherItem{
font-size: px2rem(13pt);
margin: px2rem(10pt) px2rem(15pt) 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);
.teacherItemImg{
width: px2rem(22px);
height: px2rem(22px);
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);
}
}
}
</style>
src/components/business/yqy-home-banner.vue 0 → 100644
浏览文件 @ efb671e1
<template>
<div class="hello">
<div class="banner space-between">
<div class="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>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'YqyHomeBanner',
watch: {
},
props: {
resourceData: {
type: Array,
default:()=>{
return [
{img: '../../images/Shape@2x.png',
name: '微专业'},
{img: '../../images/Shape@2x.png',
name: '名师讲堂'},
{img: '../../images/Shape@2x.png',
name: '患者教育'},
{img: '../../images/Shape@2x.png',
name: '专项合作'},
{img: '../../images/Shape@2x.png',
name: '活动掠影'}
]
}
}
},
data () {
return {
}
},
mounted(){
},
methods: {
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
@import '../../style/global.scss';
html,body{
width: px2rem(375px);
height: px2rem(100%);
background-color: #F8F8F8;
}
.banner{
width: px2rem(345px);
height: px2rem(74px);
background-color: #fff;
position: absolute;
top: px2rem(165px);
left: px2rem(17px);
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;
position: relative;
// margin-right: px2rem(18px);
}
.bannerImg{
min-width: px2rem(22px);
max-height: px2rem(20px);
margin: 0 auto;
display: block;
}
.bannerText{
position: absolute;
top: px2rem(30px);
width: px2rem(50px);
left: 0;
font-size: px2rem(12px);
text-align: center;
}
</style>
src/components/business/yqy-home-header.vue 0 → 100644
浏览文件 @ efb671e1
<template>
<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">
</div>
<div class="headerRight">
<img class="info" :src="resourceData.img">
<div :class="resourceData.isTransparent?'transparent':'notTransparent'" class="info-count fs10">{{resourceData.count}}</div>
</div>
</div>
</template>
<script>
export default {
name: 'header',
components: {
},
props: {
resourceData: {
type: Object,
default:()=>{
return {
isTransparent: true,
placeholder: '请输入课程名称',
img: '../../images/Shape@2x.png',
count: 0
}
}
}
},
watch: {
message(val){
console.log('val',val);
}
},
data () {
return {
message: ''
}
},
mounted(){
},
methods: {
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
@import '../../style/global.scss';
html,body{
width: px2rem(375px);
height: 100%;
background-color: #F8F8F8;
}
.searchTransparent{
background: transparent;
border: 1px solid #fff;
color: #fff;
}
.searchTransparent::-webkit-input-placeholder{
color: #fff;
}
.white{
color: #fff;
}
.headerRight{
width: px2rem(30px);
height: px2rem(30px);
}
.fs30{
font-size: px2rem(15px);
}
.gxyStudy{
margin-right: px2rem(19px);
}
.gxy{
font-size: px2rem(25px);
margin: px2rem(25px) 0 px2rem(11px) 0;
}
.header{
width: 100%;
padding: 0 px2rem(25px) 0 px2rem(15px);
position: relative;
}
.search{
width: px2rem(290px);
height: px2rem(30px);
border-radius: px2rem(19px);
}
.input{
outline: none;
border: none;
float: left;
font-size: px2rem(13px);
margin: px2rem(6px) 0 px2rem(6px) px2rem(15px);
line-height: px2rem(18px);
width: 80%;
}
.searchImg{
width: px2rem(16px);
height: px2rem(16px);
margin: px2rem(8px) px2rem(18px) px2rem(8px) 0;
float: right;
}
.info{
width: px2rem(20px);
height: px2rem(20px);
}
.info-count{
position:absolute;
top: 0;
right: px2rem(21px);
width: px2rem(15px);
height: px2rem(15px);
border-radius: 50%;
text-align: center;
line-height: 15px;
}
.transparent{
background-color: #fff;
color: RGBA(53, 134, 126, 1);
}
.notTransparent{
background-color: RGBA(251, 91, 82, 1);
color: #fff;
}
.hotTag{
width: 100%;
height: px2rem(150px);
}
.hotTagTitle{
font-size: px2rem(18px);
padding: px2rem(73px) px2rem(15px);
float: left;
background-color: #fff;
}
.cource{
width: 100%;
height: px2rem(350px);
}
.fontTitle{
font-size: px2rem(18px);
padding: 0 0 px2rem(21px) px2rem(15px);
float: left;
width: 100%;
text-align: left;
}
.title{
font-size: px2rem(16px);
}
.courceLeft{
float: left;
padding-left: px2rem(15px);
}
.needLeft{
float: left;
padding: 0 0 px2rem(40px) px2rem(15px);
}
.courceTime{
float: left;
}
.courceImg{
width: px2rem(170px);
height: px2rem(96px);
margin-bottom: px2rem(10px);
}
.courceMore{
font-size: px2rem(15px);
color: #999999;
}
.need{
width: 100%;
height: px2rem(325px);
margin-top: px2rem(35px);
}
</style>
src/components/business/yqy-home-keepon.vue 0 → 100644
浏览文件 @ efb671e1
<template>
<div class="header bgWhite">
<div v-show="isShow" class="border-bottom space-between">
<div>
<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>
</div>
</div>
</template>
<script>
export default {
name: 'YqyHomeKeepon',
components: {
},
props: {
resourceData: {
type: Object,
default:()=>{
return {
message: '动态',
week: 2,
Remaining: 2
}
}
}
},
watch: {
},
data () {
return {
isShow: true
}
},
mounted(){
},
methods: {
continueStudy(){
console.log('continueStudy');
this.$emit('continueStudy')
},
cancel(){
console.log('cancel');
this.isShow = false;
this.$emit('cancel')
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
@import '../../style/global.scss';
.header{
width: 100%;
padding: 0 px2rem(15px);
.border-bottom{
width: 100%;
border-bottom: 1px solid RGBA(231, 231, 231, 1);
padding-bottom: px2rem(10px);
}
.keeponTitle{
font-size: px2rem(14px);
}
.continueStudy{
color: RGBA(31, 121, 115, 1);
}
.keeponRight{
margin-right: px2rem(15px);
}
}
</style>
15px
\ No newline at end of file
src/components/business/yqy-home-porter.vue 0 → 100644
浏览文件 @ efb671e1
<template>
<div class="hotTeacher">
<div class="space-between">
<img class="img" src="../../images/Shape@2x.png"/>
</div>
<div class="teacherItem space-between">
<div class="teacherItemImg">
<img :src="resourceData.img"/>
</div>
<div class="fiveText">
<div class="teacherItemName fw fs30">{{resourceData.name}}</div>
<div class="five-tag fs28 gray">{{resourceData.motto}}</div>
<div @click="btn" class="porterBtn white fs22">查看</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'YqyFiveMinutes',
components: {
},
watch: {
},
props: {
resourceData: {
type: Object,
default:()=>{
return{
img: '../../images/Shape@2x.png',
name: '原来高血压',
motto: '北京大学人民医院'
}
}
}
},
data () {
return {
}
},
mounted(){
},
methods: {
fiveMinutesMore(){
console.log('fiveMinutesMore');
this.$emit('fiveMinutesMore')
},
btn(){
console.log('btn');
this.$emit('btn')
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
@import '../../style/global.scss';
.hotTeacher{
width: 100%;
background-color: #fff;
padding: 0 px2rem(15px) px2rem(26px);
.img{
width: px2rem(109px);
height: px2rem(22px);
}
.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);
}
.teacherItem{
width: 100%;
height: px2rem(85px);
position: relative;
margin-top: px2rem(20px);
&:not(:last-child){
border-bottom: 1px solid RGBA(240, 240, 240, 1);
}
.teacherItemImg{
width: px2rem(56px);
height: px2rem(63px);
border-radius: px2rem(3px);
}
.fiveText{
width: px2rem(280px);
height: px2rem(38px);
}
.teacherItemName{
color: RGBA(102, 102, 102, 1);
margin: px2rem(10px) 0 px2rem(6px);
}
.five-tag{
width: px2rem(235px);
height: px2rem(14px);
}
.porterBtn{
width: px2rem(42px);
height: px2rem(20px);
background: linear-gradient(to bottom, RGBA(143, 193, 230, 1), RGBA(88, 144, 221, 1));
border-radius: px2rem(14px);
text-align: center;
line-height: px2rem(20px);
position:absolute;
right: 0;
top: px2rem(18px);
}
}
}
</style>
src/components/business/yqy-hot-label.vue 0 → 100644
浏览文件 @ efb671e1
<template>
<div class="hotTag">
<div :style="{'text-align': direction}" class="hotTagTitle">{{title}}</div>
<div class="hotTagItem" :key="index" v-for="(item,index) in allTags">
<span class="itemName">{{item}}</span>
</div>
</div>
</template>
<script>
export default {
name: 'YqyHotLabel',
components: {
},
watch: {
},
props: {
allTags: {
type: Array,
default:()=>{
return ['a', '最新发布','在学人数', 'aaaaaa', '最新发布','在学人数', '最新发布','在学人数', '最新发布','在学人数', '最新发布']
}
},
direction: {
type: String,
default: 'left'
},
title: {
type: String,
default: '热门标签'
}
},
data () {
return {
}
},
mounted(){
},
methods: {
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
.hotTag{
width: 100%;
background-color: #fff;
padding: px2rem(60px) px2rem(15px) px2rem(26px);
margin-bottom: px2rem(6px);
}
.hotTagTitle{
font-size: px2rem(18px);
font-weight: bold;
}
.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-hot-teacher.vue 0 → 100644
浏览文件 @ efb671e1
<template>
<div class="hotTeacher">
<div :style="{'text-align': direction}" class="hotTagTitle">{{title}}</div>
<div class="teacherItem" :key="index" v-for="(item,index) in hotTeachers">
<img class="teacherItemImg" :src="item.img"/>
<span class="teacherItemName">{{item.name}}</span>
<span class="teacherItemHospital">{{item.hospital}}</span>
</div>
</div>
</template>
<script>
export default {
name: 'YqyHotTeacher',
components: {
},
watch: {
},
props: {
hotTeachers: {
type: Array,
default:()=>{
return [
{
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: '医院'
}
]
}
},
direction: {
type: String,
default: 'left'
},
title: {
type: String,
default: '热门标签'
}
},
data () {
return {
}
},
mounted(){
},
methods: {
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
.hotTagTitle{
font-size: px2rem(18px);
font-weight: bold;
}
.hotTeacher{
width: 100%;
background-color: #fff;
padding: 0 px2rem(15px) px2rem(26px);
.teacherItem{
font-size: px2rem(13pt);
margin: px2rem(10pt) px2rem(15pt) 0 0;
display: inline-block;
background-color: RGBA(244, 247, 255, 1);
border-radius: px2rem(16px);
padding: px2rem(8px) px2rem(10px);
position: relative;
.teacherItemImg{
width: px2rem(23px);
height: px2rem(23px);
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);
}
.teacherItemHospital{
color: RGBA(153, 153, 153, 1);
font-size: px2rem(12pt);
}
}
}
</style>
src/components/business/yqy-new-class.vue 0 → 100644
浏览文件 @ efb671e1
<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-info.vue 0 → 100644
浏览文件 @ efb671e1
<template>
<div class="hello">
<div class="banner">
<img class="bannerLogo" src="../../images/Shape@2x.png"/>
<div class="fs28 center infoName">{{resourceData.name}}</div>
<div class="fs28 line center">
<span class="gray">{{resourceData.hospital}}</span>
<span class="gray">{{resourceData.rank}}</span>
<span class="gray">{{resourceData.type}}</span>>
</div>
<div class="studyCount">
<div class="fs28">
<div class="fs28">{{resourceData.studyCount}}</div>
<div class="fs24 gray">学习人数</div>
</div>
<div class="fs28">
<div class="fs28">{{resourceData.follower}}</div>
<div class="fs24 gray">关注人数</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'banner',
watch: {
},
props: {
resourceData: {
type: Object,
default:()=>{
return {
name: '蒋立新',
hospital: '阜外医院',
rank: '教授',
type: '主任医师',
studyCount: 8969,
follower: 8969
}
}
}
},
data () {
return {
}
},
mounted(){
},
methods: {
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
@import '../../style/global.scss';
html,body{
width: px2rem(375px);
height: 100%;
background-color: #F8F8F8;
}
.banner{
width: px2rem(335px);
height: px2rem(139px);
background-color: #fff;
position: absolute;
top: px2rem(165px);
left: px2rem(17px);
padding: px2rem(15px) px2rem(22px);
box-shadow: 0 px2rem(1px) px2rem(5px) RGBA(42, 94, 161, 0.15);
border-radius: px2rem(3px);
}
.infoName{
margin-top: px2rem(15px);
}
.line{
margin-top: px2rem(4px);
}
.fs28{
font-size: px2rem(14px);
}
.fs24{
font-size: px2rem(12px);
}
.gray{
color: RGBA(102, 102, 102, 1);
margin-top: px2rem(5px);
}
.bannerLogo{
width: px2rem(45px);
height: px2rem(45px);
border-radius: 50%;
margin: 0 px2rem(122px);
position: absolute;
top: px2rem(-20px);
}
.studyCount{
display: flex;
justify-content: space-between;
padding: 0 px2rem(33px);
margin-top: px2rem(15px);
}
</style>
src/components/business/yqy-teacher-list.vue 0 → 100644
浏览文件 @ efb671e1
此差异已折叠。
src/style/global.scss 0 → 100644
浏览文件 @ efb671e1
@import './common.scss';
//定位
.relative{
position: relative;
}
.flex{
display: flex;
}
.space-between{
display: flex;
justify-content: space-between;
}
.flex-start{
display: flex;
justify-content: flex-start;
}
.flex-end{
display: flex;
justify-content: flex-end;
}
.textLeft{
float: left;
}
.center{
text-align: center;
}
.line20{
margin-top: px2rem(10px);
}
.mb42{
margin-bottom: px2rem(21px);
}
.marginLR40{
margin: 0 px2rem(20px);
}
.fs10{
font-size: px2rem(10px);
}
.fs11{
font-size: px2rem(11px);
}
.fs13{
font-size: px2rem(13px);
}
.fs14{
font-size: px2rem(14px);
}
.fs22{
font-size: px2rem(11px);
}
.fs24{
font-size: px2rem(12px);
}
.fs26{
font-size: px2rem(13px);
}
.fs28{
font-size: px2rem(14px);
}
.fs32{
font-size: px2rem(16px);
}
.fs30{
font-size: px2rem(15px);
}
.fs50{
font-size: px2rem(25px);
}
.fw{
font-weight: 600;
}
//背景颜色
.bgWhite{
background-color: #fff;
}
//字体颜色
.gray{
color: RGBA(177, 181, 184, 1);
}
.white{
color: #fff;
}
.fs30{
font-size: px2rem(15px);
}
\ No newline at end of file
src/views/home/home.1.vue 0 → 100644
浏览文件 @ efb671e1
<template>
<section class="font-style">
<section class="home-header">
<mt-header>
<router-link to="/" slot="left">
<mt-button icon="back"></mt-button>
</router-link>
<mt-button icon="more" slot="right"></mt-button>
</mt-header>
<article style="width: 100%;text-align:center;">
<YqyHomeHeader/>
<img class="logo_img" src='../../images/header-bg-2.png' />
</article>
</section>
<section class="home-body">
<span @click="pushView('http://10.177.10.121:8080/yqy/index.html?1')"> pushView 1</span>
<span @click="goBack"> goBack 2</span>
<span @click="toast('Hi, 你好，宾宾！')"> toast 3</span>
<YqyHotLabel/>
<YqyHomePorter/>
<YqyHomeBanner/>
<YqyHomeKeepon/>
<YqyHomeAdv/>
<YqyCategoryThree1/>
<YqyFiveMinutes/>
<YqyHotTeacher/>
<YqyTeacherList/>
<!-- <YqyTeacherInfo/> -->
</section>
<section class="home-bottom">
<!-- <yqyTest/> -->
</section>
</section>
</template>
<script>
import { 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';
export default {
data(){
return {
}
},
components:{
Header,
// yqyTest
YqyHotLabel,
YqyHotTeacher,
YqyTeacherList,
YqyTeacherInfo,
YqyHomeHeader,
YqyHomeAdv,
YqyFiveMinutes,
YqyCategoryThree1,
YqyHomeBanner,
YqyHomeKeepon,
YqyHomePorter
},
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 lang="scss" scoped>
@import '../../style/mixin';
.mint-header {
background-color: rgba($color: #000000, $alpha: 0)
}
.font-style {
@include sc(0.6rem, #666);
}
.home-header {
height: px2rem(202px);
@include bis('../../images/552064153@2x.png');
.logo_img{
height: px2rem(85px);
width: px2rem(345px);
text-align: center;
}
}
</style>
src/views/home/home.vue
浏览文件 @ efb671e1
...@@ -8,33 +8,216 @@ ...@@ -8,33 +8,216 @@
<mt-button icon="more" slot="right"></mt-button> <mt-button icon="more" slot="right"></mt-button>
</mt-header> </mt-header>
<article style="width: 100%;text-align:center;"> <article style="width: 100%;text-align:center;">
<img class="logo_img" src='../../images/header-bg-2.png' /> <YqyHeaderTop :resourceData="header"/>
</article> </article>
</section> </section>
<section class="home-body"> <section class="home-body">
<span @click="pushView('http://10.177.10.121:8080/yqy/index.html?1')"> pushView 1</span> <YqyHomeBanner :resourceData="resourceData"/>
<span @click="goBack"> goBack 2</span> <YqyHotLabel :allTags="allTags"/>
<span @click="toast('Hi, 你好，宾宾！')"> toast 3</span> <YqyNewClass/>
<YqyTeacherList :teacherData="teacherData" :courceData="courceData"/>
<YqyTeacherList :teacherData="needData" :courceData="needcourceData"/>
</section> </section>
<section class="home-bottom"> <section class="home-bottom">
<yqyTest/>
</section> </section>
</section> </section>
</template> </template>
<script> <script>
import { Header } from 'mint-ui'; import { Header } from 'mint-ui';
import yqyTest from '@/components/common/yqy/yqyTest' // 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 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: {
title: '糖尿病',
studyCount: 2700000,
follower: 10000
},
resourceData: [
{img: '../../images/Shape@2x.png',
name: '检查'},
{img: '../../images/Shape@2x.png',
name: '诊断'},
{img: '../../images/Shape@2x.png',
name: '治疗'},
{img: '../../images/Shape@2x.png',
name: '随访'},
{img: '../../images/Shape@2x.png',
name: '研究'}
],
allTags: ['老年性高血压','早期症状','饮食禁忌','讲师集'],
teacherData: {
title: '课程教学',
hasSelect: true,
showMoreBtn: false,
firstOption: '综合',
selectOptions: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
],
options: [
{
isCheck: false,
title: '在学人数'
},
{
isCheck: false,
title: '最新发布'
}
]
},
courceData: {
selected: '综合1',
hasHospital: false,
hasType: false,
data: [
{
img: '../../images/Shape@2x.png',
name: '全科医学中医患关系全科医学中医患关系',
isLeft: true,
hospital: '阜外医院',
color: 'blue',
teacher: '肖丹',
count: 477
},
{
img: '../../images/Shape@2x.png',
name: '患者顺从度改善经验谈',
isLeft: true,
hospital: '阜外医院',
color: 'green',
teacher: '肖丹',
count: 477
},
{
img: '../../images/Shape@2x.png',
name: '基层医疗患者管理',
isLeft: true,
hospital: '阜外医院',
color: 'yellow',
teacher: '肖丹',
count: 477
},
{
img: '../../images/Shape@2x.png',
name: '患者心理学入门患者心理学入门',
isLeft: true,
hospital: '阜外医院',
color: 'pink',
teacher: '肖丹',
count: 477
},
{
img: '../../images/Shape@2x.png',
name: '基层医疗患者管理',
isLeft: true,
hospital: '阜外医院',
color: 'yellow',
teacher: '肖丹',
count: 477
},
{
img: '../../images/Shape@2x.png',
name: '患者心理学入门患者心理学入门',
isLeft: true,
hospital: '阜外医院',
color: 'blue',
teacher: '肖丹',
count: 477
}
]
},
needData: {
title: '您可能需要',
hasSelect: false,
showMoreBtn: false,
selectOptions: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
],
options: ['学习人数', '发布时间']
},
needcourceData: {
selected: '综合1',
hasHospital: false,
hasType: true,
data: [
{
img: '../../images/Shape@2x.png',
name: '口服降糖药物的药理作用及临床用法',
isLeft: true,
hospital: '阜外医院',
color: 'RGBA(74, 135, 212, 1)',
teacher: '肖丹',
count: 477,
type: '治疗'
},
{
img: '../../images/Shape@2x.png',
name: '高血压伴糖尿病的治疗',
isLeft: true,
hospital: '阜外医院',
color: 'RGBA(74, 135, 212, 1)',
teacher: '肖丹',
count: 477,
type: '诊断'
},
{
img: '../../images/Shape@2x.png',
name: '口服降糖药物的药理作用及临床用法',
isLeft: true,
hospital: '阜外医院',
color: 'RGBA(74, 135, 212, 1)',
teacher: '肖丹',
count: 477,
type: '检查'
},
{
img: '../../images/Shape@2x.png',
name: '高血压伴糖尿病的规范化治疗',
isLeft: true,
hospital: '阜外医院',
color: 'RGBA(74, 135, 212, 1)',
teacher: '肖丹',
count: 477,
type: '随访'
}
]
}
} }
},
components:{
Header,
yqyTest
}, },
mounted(){ mounted(){
this.init() this.init()
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或