Skip to content

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

home

上级 9aaf9e3d
显示空白字符变更
内嵌 并排
正在显示 包含 564 行增加 和 86 行删除
src/components/business/yqy-header-top.vue 0 → 100644
浏览文件 @ bb6b32ba
<template>
<div class="hello">
<div class="header">
<div class="white gxy fs50">{{resourceData.title}}</div>
<div>
<span class="white fs30 gxyStudy">{{resourceData.studyCount}}人学习</span>
<span class="white fs30">{{resourceData.follower}}人关注</span>
</div>
<Banner/>
</div>
</div>
</template>
<script>
export default {
name: 'YqyHeaderTop',
components: {
},
props: {
resourceData: {
type: Object,
default:()=>{
return {
title: '高血压',
studyCount: 27,
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-banner.vue
浏览文件 @ bb6b32ba
<template>
<div class="hello">
<div class="banner">
<div class="bannerItem" :key="index" v-for="(item,index) in bannerData">
<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">{{item.name}}</span>
<span class="bannerText fs24">{{item.name}}</span>
</div>
</div>
</div>
......@@ -15,9 +15,11 @@ export default {
name: 'YqyHomeBanner',
watch: {
},
data () {
return {
bannerData: [
props: {
resourceData: {
type: Array,
default:()=>{
return [
{img: '../../images/Shape@2x.png',
name: '微专业'},
{img: '../../images/Shape@2x.png',
......@@ -30,6 +32,11 @@ export default {
name: '活动掠影'}
]
}
}
},
data () {
return {
}
},
mounted(){
},
......
src/components/business/yqy-hot-label.vue
浏览文件 @ bb6b32ba
......@@ -47,7 +47,8 @@ export default {
.hotTag{
width: 100%;
background-color: #fff;
padding: px2rem(123px) px2rem(15px) px2rem(26px);
padding: px2rem(60px) px2rem(15px) px2rem(26px);
margin-bottom: px2rem(6px);
}
.hotTagTitle{
font-size: px2rem(18px);
......
src/components/business/yqy-teacher-list.vue
浏览文件 @ bb6b32ba
<template>
<div class="courceTeach">
<div :style="{'text-align': direction}" class="fontTitle">{{data.title}}</div>
<div v-if="data.hasSelect" class="teachTitle mb42">
<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 v-if="teacherData.hasSelect" class="teachTitle mb42">
<select v-model="selected">
<option :key="index" v-for="(option,index) in data.selectOptions" v-bind:value="option.value">
<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 data.options">
<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">更多课程
<img src=""/>
</div>
</div>
<div class="content">
<div class="needLeft white" :key="index" v-for="(item,index) in cource">
<img class="courceImg" src=""/>
<div :class="[item.color,item.isLeft?'flex-start':'flex-end']" class="courceType fs22 white">{{item.name}}
<div v-if="courceData.hasType" :style="{'color':item.color}" :class="[item.isLeft?'flex-start':'flex-end']" class="courceType fs22 bgWhite">{{item.type}}
</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>
......@@ -25,7 +33,7 @@
</div>
</div>
</div>
<div @click="showMoreFn" v-if="data.showMoreBtn" class="courceMore">更多课程</div>
<div @click="showMoreFn" v-if="teacherData.showMoreBtn" class="courceMore">更多课程</div>
</div>
</template>
......@@ -36,7 +44,7 @@ export default {
},
props:
{
data: {
teacherData: {
type: Object,
default: ()=>{
return {
......@@ -62,6 +70,7 @@ export default {
return {
selected: '综合1',
hasHospital: true,
hasType: true,
data: [
{
img: '../../images/Shape@2x.png',
......@@ -70,7 +79,8 @@ export default {
hospital: '阜外医院',
color: 'blue',
teacher: '小单',
count: 477
count: 477,
type: '检查'
},
{
img: '../../images/Shape@2x.png',
......@@ -79,7 +89,8 @@ export default {
hospital: '阜外医院',
color: 'green',
teacher: '小单',
count: 477
count: 477,
type: '检查'
},
{
img: '../../images/Shape@2x.png',
......@@ -88,7 +99,8 @@ export default {
hospital: '阜外医院',
color: 'pink',
teacher: '小单',
count: 477
count: 477,
type: '检查'
},
{
img: '../../images/Shape@2x.png',
......@@ -97,7 +109,8 @@ export default {
hospital: '阜外医院',
color: 'yellow',
teacher: '小单',
count: 477
count: 477,
type: '检查'
},
{
img: '../../images/Shape@2x.png',
......@@ -106,7 +119,8 @@ export default {
hospital: '阜外医院',
color: 'blue',
teacher: '小单',
count: 477
count: 477,
type: '检查'
},
{
img: '../../images/Shape@2x.png',
......@@ -115,7 +129,8 @@ export default {
hospital: '阜外医院',
color: 'green',
teacher: '小单',
count: 477
count: 477,
type: '检查'
},
{
img: '../../images/Shape@2x.png',
......@@ -124,7 +139,8 @@ export default {
hospital: '阜外医院',
color: 'pink',
teacher: '小单',
count: 477
count: 477,
type: '检查'
},
{
img: '../../images/Shape@2x.png',
......@@ -133,10 +149,10 @@ export default {
hospital: '阜外医院',
color: 'yellow',
teacher: '小单',
count: 477
count: 477,
type: '检查'
}
],
options: ['在学人数', '最新发布']
]
}
}
},
......@@ -216,11 +232,19 @@ export default {
disable(val){
console.log('val',val);
},
teacherChange(){
console.log('teacherChange');
this.$emit('teacherChange')
},
teacherMore(){
console.log('teacherMore');
this.$emit('teacherMore')
},
flag(){
let temp = this.courceData.data;
let fourCource = temp&&temp.slice(0,4);
console.log('fourCource',fourCource);
if(!this.showMore){
if(!this.showMore&&this.teacherData.showMoreBtn){
this.cource = fourCource;
}else{
this.cource = this.courceData.data;
......@@ -262,13 +286,34 @@ export default {
-webkit-line-clamp: 2;
width: px2rem(170px);
}
.courceTeachHeader{
width: 100%;
}
.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);
display: inline-block;
border-radius: px2rem(9px);
border: 1px solid RGBA(204, 204, 204, 1);
}
.content{
width: 100%;
height: px2rem(300px);
}
.courceTeach{
background: #fff;
padding: 0 px2rem(15px) 0 px2rem(10px);
padding: px2rem(15px) px2rem(15px) 0 px2rem(10px);
}
.blue{
background: RGBA(236, 244, 242, 1);
......@@ -310,7 +355,7 @@ export default {
.fontTitle{
font-size: px2rem(18px);
padding: 0 0 px2rem(21px) px2rem(5px);
width: 100%;
// width: 100%;
text-align: left;
font-weight: bold;
}
......@@ -329,6 +374,7 @@ export default {
position: relative;
min-height: px2rem(123px);
min-width: px2rem(170px);
margin-bottom: 10px
}
.courceTime{
float: left;
......
src/style/global.scss
浏览文件 @ bb6b32ba
......@@ -60,6 +60,9 @@
.fs30{
font-size: px2rem(15px);
}
.fs50{
font-size: px2rem(25px);
}
.fw{
font-weight: 600;
}
......
src/views/home/home.1.vue 0 → 100644
浏览文件 @ bb6b32ba
<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
浏览文件 @ bb6b32ba
......@@ -8,28 +8,16 @@
<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' />
<YqyHeaderTop :resourceData="header"/>
</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/> -->
<YqyHomeBanner :resourceData="resourceData"/>
<YqyHotLabel :allTags="allTags"/>
<YqyTeacherList :teacherData="teacherData" :courceData="courceData"/>
<YqyTeacherList :teacherData="needData" :courceData="needcourceData"/>
</section>
<section class="home-bottom">
<!-- <yqyTest/> -->
</section>
</section>
</template>
......@@ -48,10 +36,158 @@ 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';
export default {
data(){
return {
header: {
title: '糖尿病',
studyCount: 27,
follower: 1
},
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,
selectOptions: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
],
options: ['学习人数', '发布时间']
},
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:{
......@@ -67,7 +203,8 @@ export default {
YqyCategoryThree1,
YqyHomeBanner,
YqyHomeKeepon,
YqyHomePorter
YqyHomePorter,
YqyHeaderTop
},
mounted(){
this.init()
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或