Skip to content

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

add

上级 4c4c6d2b
隐藏空白字符变更
内嵌 并排
正在显示 包含 2649 行增加 和 261 行删除
package-lock.json
浏览文件 @ 68a3ef95
......@@ -2251,6 +2251,14 @@
"safer-buffer": "^2.1.0"
}
},
"echarts": {
"version": "4.2.0-rc.2",
"resolved": "https://registry.npmjs.org/echarts/-/echarts-4.2.0-rc.2.tgz",
"integrity": "sha512-5Y4Kyi4eNsRM9Cnl7Q8C6PFVjznBJv1VIiMm/VSQ9zyqeo+ce1695GqUd9v4zfVx+Ow1gnwMJX67h0FNvarScw==",
"requires": {
"zrender": "4.0.5"
}
},
"editorconfig": {
"version": "0.15.2",
"resolved": "https://registry.npmjs.org/editorconfig/-/editorconfig-0.15.2.tgz",
......@@ -2765,12 +2773,14 @@
"balanced-match": {
"version": "1.0.0",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"brace-expansion": {
"version": "1.1.11",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
......@@ -2785,17 +2795,20 @@
"code-point-at": {
"version": "1.1.0",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"concat-map": {
"version": "0.0.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"core-util-is": {
"version": "1.0.2",
......@@ -2912,7 +2925,8 @@
"inherits": {
"version": "2.0.3",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"ini": {
"version": "1.3.5",
......@@ -2924,6 +2938,7 @@
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
......@@ -2938,6 +2953,7 @@
"version": "3.0.4",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
......@@ -2945,12 +2961,14 @@
"minimist": {
"version": "0.0.8",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"minipass": {
"version": "2.2.4",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"safe-buffer": "^5.1.1",
"yallist": "^3.0.0"
......@@ -2969,6 +2987,7 @@
"version": "0.5.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"minimist": "0.0.8"
}
......@@ -3049,7 +3068,8 @@
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"object-assign": {
"version": "4.1.1",
......@@ -3061,6 +3081,7 @@
"version": "1.4.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"wrappy": "1"
}
......@@ -3182,6 +3203,7 @@
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
......@@ -9171,6 +9193,11 @@
"requires": {
"camelcase": "^4.1.0"
}
},
"zrender": {
"version": "4.0.5",
"resolved": "https://registry.npmjs.org/zrender/-/zrender-4.0.5.tgz",
"integrity": "sha512-SintgipGEJPT9Sz2ABRoE4ZD7Yzy7oR7j7KP6H+C9FlbHWnLUfGVK7E8UV27pGwlxAMB0EsnrqhXx5XjAfv/KA=="
}
}
}
src/components/business-new/yqy-adjust.vue 0 → 100644
浏览文件 @ 68a3ef95
<template>
<div class="cource-teach" id="adjust-u">
<div :class="isFixed ? 'cource-header fixed' : 'cource-header'">
<div class="font-title">{{teacherData.title}}</div>
</div>
<div class="couse-list">
<div :class="index%2==1 ? 'course-item end-left' : 'course-item'" :key="index" v-for="(item,index) in cource">
<div class="course-pic">
<img src="../../images/552064153@2x.png" class="pic-tec" />
<span class="course-tag">高血压</span>
</div>
<p class="course-txt">
高血压伴糖尿病的规范化治疗
</p>
<div class="course-opt">
<span class="opt-info">刚刚 | 89人已学</span>
<span class="opt collect">
收藏
</span>
<span class="opt collected">
已收藏
</span>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'YqyTeacherList',
props:
{
isFixed:{
default:false,
type:Boolean
},
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: [{},{},{},{},{},{},{},{},{},{},{},{}]
}
}
},
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: [{},{},{},{},{},{},{},{},{},{},{},{}],
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);
}
.couse-list{
overflow: hidden;
}
.cource-teach{
padding:0 px2rem(15px);
}
.cource-header{
margin: 0 0 px2rem(21px) 0;
}
.fixed{
.font-title{
position: fixed;
top:0;
left: 0;
width: 100%;
height: px2rem(40px);
line-height: px2rem(40px);
background: #fff;
z-index: 102;
padding: 0 px2rem(15px);;
}
}
.course-item{
float: left;
margin-bottom: px2rem(19px);
margin-right: px2rem(5px);
}
.end-left{
margin-right: 0;
}
.course-pic{
width:px2rem(170px);
height:px2rem(95px);
position: relative;
.pic-tec{
width: 100%;
display: block;
}
.course-tag{
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);
}
}
.course-txt{
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);
}
.course-opt{
font-size: px2rem(12px);
margin-top: px2rem(6px);
.opt-info{
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);
}
}
.font-title{
font-size: px2rem(18px);
font-weight: bold;
}
.title{
font-size: px2rem(16px);
text-align: left;
width: px2rem(170px);
max-height: px2rem(20px);
}
</style>
src/components/business-new/yqy-category-three-1.vue 0 → 100644
浏览文件 @ 68a3ef95
<template>
<div class="hot-teacher">
<div :style="{'text-align': resourceData.direction}" class="title">{{resourceData.title}}</div>
<!--展示形式 左一 右二-->
<div class="teacher-item space-between">
<div class="category-left">
<img class="category-img1" :src="resourceData.item.pic1.right"/>
</div>
<div class="category-right">
<div class="right-img">
<img class="category-img" :src="resourceData.item.pic2.bg"/>
</div>
<div class="right-img mt5">
<img class="category-img" :src="resourceData.item.pic3.bg"/>
</div>
</div>
</div>
<div class="holder-img">
<img :src="resourceData.item.pic3.bg" class="category-img"/>
</div>
</div>
</template>
<script>
export default {
data () {
return {
}
},
mounted(){
},
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'
}
}
}
}
}
},
methods: {
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
@import '../../style/global.scss';
.title{
font-size: px2rem(18px);
font-weight: bold;
margin-bottom: px2rem(15px);
}
.hot-teacher{
width: 100%;
margin-top: px2rem(15px);
padding: 0 px2rem(15px) px2rem(26px);
.teacher-item{
width: 100%;
height: px2rem(190px);
.category-left{
width: px2rem(170px);
height: px2rem(195px);
}
.category-img{
width: 100%;
height: 100%;
display: block;
}
.mt5{
margin-top: px2rem(5px);
}
.category-right{
width: px2rem(170px);
height: px2rem(190px);
.category-img{
width: 100%;
height: 100%;
}
.right-img{
width: px2rem(170px);
height: px2rem(95px);
}
}
}
.holder-img{
width: 100%;
height: px2rem(125px);
}
}
</style>
src/components/business-new/yqy-five-minutes.vue 0 → 100644
浏览文件 @ 68a3ef95
<template>
<div class="hot-teacher">
<div class="space-between">
<img class="img" src="../../images/mins.png"/>
<div @click="fiveMinutesMore" class="five-more gray fs11">
更多<img src="../../images/right-throw.png" class="thorw-icon"/>
</div>
</div>
<div class="teacher-item space-between" :key="index" v-for="(item,index) in hotTeachers">
<div class="teacher-itemimg">
<img :src="item.img"/>
</div>
<div class="five-text">
<div class="teacher-itemname fs14">{{item.name}}</div>
<div class="five-tag fs11">#心动时刻</div>
<img @click="video(index)" class="five-radio" src="../../images/play.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';
.hot-teacher{
width: 100%;
background-color: #fff;
padding: 0 px2rem(15px) px2rem(26px);
margin-top:px2rem(15px);
.img{
width: px2rem(109px);
height: px2rem(22px);
}
.thorw-icon{
width: px2rem(8px);
height: px2rem(8px);
}
.five-more{
border: 1px solid RGBA(169, 174, 183, 1);
border-radius: px2rem(9px);
padding: px2rem(3px) px2rem(5px) px2rem(2px) px2rem(6px);
vertical-align: middle;
}
.teacher-item{
width: 100%;
height: px2rem(85px);
position: relative;
margin-top: px2rem(20px);
&:not(:last-child){
border-bottom: 1px solid RGBA(240, 240, 240, 1);
}
.teacher-itemimg{
width: px2rem(65px);
height: px2rem(65px);
border-radius: px2rem(3px);
}
.five-text{
width: px2rem(260px);
height: px2rem(38px);
}
.teacher-itemname{
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-new/yqy-header-top.vue 0 → 100644
浏览文件 @ 68a3ef95
<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-new/yqy-home-adv.vue 0 → 100644
浏览文件 @ 68a3ef95
<template>
<div class="hot-teacher" id="famus-teacher">
<div class="title">
{{title}}
</div>
<div class="tea-list">
<div class="tea-listbox">
<div class="tea-item" :key="index" v-for="(item,index) in hotTeachers">
<div class="head-pic">
<img class="tea-itemimg" src="../../images/552064153@2x.png"/>
</div>
<span class="tea-itemname">{{item.name}}</span>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
title:{
type:String,
default:'云鹊名师'
},
hotTeachers: {
type: Array,
default:()=>{
return [
{
img: '../../images/552064153@2x.png',
name: '蒋立新'
},
{
img: '../../images/head-test.png',
name: '蒋立新'
},
{
img: '../../images/head-test.png',
name: '蒋立新'
},
{
img: '../../images/head-test.png',
name: '蒋立新'
},
{
img: '../../images/head-test.png',
name: '蒋立新'
},
{
img: '../../images/head-test.png',
name: '蒋立新'
},
{
img: '../../images/head-test.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';
.hot-teacher{
width: 100%;
background-color: #fff;
padding: 0 0 px2rem(26px) px2rem(15px);
.title{
font-size: px2rem(18px);
padding: 0 0 px2rem(21px) px2rem(5px);
font-weight: bold;
}
.tea-list{
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;
}
.tea-listbox{
width: 1100px;
clear: both;
}
.tea-item{
font-size: px2rem(13px);
margin: 0 px2rem(19px) 0 0;
display: inline-block;
position: relative;
float: left;
text-align: center;
.head-pic{
background: #ECECEC;
width: px2rem(50px);
height: px2rem(50px);
border-radius: 50%;
}
.tea-itemimg{
width: px2rem(39px);
height: px2rem(44px);
margin-top: px2rem(6px);
border-radius: 50%;
}
.tea-itemname{
color: RGBA(102, 102, 102, 1);
padding-top: px2rem(5px);
font-size: px2rem(13px);
line-height: px2rem(19px);
}
}
}
</style>
src/components/business-new/yqy-home-banner.vue 0 → 100644
浏览文件 @ 68a3ef95
<template>
<div class="banner-box">
<div class="banner space-between">
<div :class="index+1==resourceData.length ?'banner-item item-end' : 'banner-item'" :key="index" v-for="(item,index) in resourceData">
<!-- <img class="bannerImg" :src="item.img"/> -->
<img class="banner-img" src="../../images/Shape@2x.png"/>
<span class="banner-text fs24">
{{item.name}}<i></i>
</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-box{
position: relative;
height: px2rem(47px);
padding:0 px2rem(15px);
}
.banner{
width: px2rem(345px);
height: px2rem(74px);
background-color: #fff;
position: absolute;
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);
}
.banner-item{
width: px2rem(50px);
display: inline-block;
position: relative;
margin-right: px2rem(18px);
text-align: center;
}
.item-end{
margin-right: 0
}
.banner-img{
min-width: px2rem(22px);
max-height: px2rem(20px);
margin: 0 auto;
display: block;
}
.banner-text{
display: inline-block;
position: relative;
font-size: px2rem(12px);
text-align: center;
}
.banner-text 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-new/yqy-home-header.vue 0 → 100644
浏览文件 @ 68a3ef95
<template>
<div class="space-between header">
<div :class="resourceData.isTransparent?'search-transparent':'bgWhite'" class="search">
<input type="search" :class="resourceData.isTransparent?'search-transparent':''" class="input" v-model="message" :placeholder="resourceData.placeholder"/>
<img class="search-img" src='../../images/Group2@2x.png'>
</div>
<div class="header-right">
<img class="info" src='../../images/msg1.png'>
<div :class="resourceData.isTransparent?'transparent':'not-transparent'" class="info-count fs10">{{resourceData.count}}</div>
</div>
</div>
</template>
<script>
export default {
data(){
return {
}
},
components: {
},
props: {
resourceData: {
type: Object,
default:()=>{
return {
isTransparent: true,
placeholder: '请输入课程名称',
img: '../../images/msg1.png',
count: "10"
}
}
}
},
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;
}
.search-transparent{
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.5);
color: #fff;
}
.search-transparent::-webkit-input-placeholder{
color: #fff;
}
.white{
color: #fff;
}
.header-right{
width: px2rem(30px);
height: px2rem(30px);
position: relative;
}
.fs30{
font-size: px2rem(15px);
}
.gxy-study{
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%;
}
.search-img{
width: px2rem(16px);
height: px2rem(16px);
margin: px2rem(6px) px2rem(15px) px2rem(9px) 0;
float: right;
}
.info{
width: px2rem(20px);
height: px2rem(20px);
}
.info-count{
position:absolute;
top: 0;
left: px2rem(21px);
/*width: px2rem(15px);*/
padding:0 px2rem(3px);
height: px2rem(15px);
border-radius: 50%;
text-align: center;
line-height: px2rem(15px);
}
.transparent{
background-color: #fff;
color: RGBA(53, 134, 126, 1);
}
.not-transparent{
background-color: RGBA(251, 91, 82, 1);
color: #fff;
}
.hot-tag{
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);
}
.font-title{
font-size: px2rem(18px);
padding: 0 0 px2rem(21px) px2rem(15px);
float: left;
width: 100%;
text-align: left;
}
.title{
font-size: px2rem(16px);
}
.cource-left{
float: left;
padding-left: px2rem(15px);
}
.need-left{
float: left;
padding: 0 0 px2rem(40px) px2rem(15px);
}
.cource-time{
float: left;
}
.cource-img{
width: px2rem(170px);
height: px2rem(96px);
margin-bottom: px2rem(10px);
}
.cource-more{
font-size: px2rem(15px);
color: #999999;
}
.need{
width: 100%;
height: px2rem(325px);
margin-top: px2rem(35px);
}
</style>
src/components/business-new/yqy-home-keepon.vue 0 → 100644
浏览文件 @ 68a3ef95
<template>
<div class="keep-learn">
<div v-show="isShow" class="border-bottom space-between keep-learnbox">
<div class="learning-txt">
<div class="gray keepon-title">{{resourceData.message}}</div>
<div>
<span class="gray fs24 keepon-right">已学习:{{resourceData.week}} 周</span>
<span class="gray fs24 keepon-right">剩余:{{resourceData.Remaining}}%</span>
<span class="gray fs24 continue-study" @click="continueStudy">继续学习></span>
</div>
</div>
<span class="close-m">
<img @click="cancel" src="../../images/close.png"/>
</span>
</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';
.keep-learn{
width: 100%;
padding: 0 px2rem(15px);
margin-top: px2rem(15px);
.keep-learnbox{
padding: px2rem(10px);
position: relative;
}
.border-bottom{
width: 100%;
border-bottom: 1px solid RGBA(231, 231, 231, 1);
padding-bottom: px2rem(10px);
}
.keepon-title{
font-size: px2rem(14px);
}
.continue-study{
color: RGBA(31, 121, 115, 1);
}
.keepon-right{
margin-right: px2rem(15px);
}
.learning-txt{
position: relative;
}
.close-m{
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>
src/components/business-new/yqy-home-porter.vue 0 → 100644
浏览文件 @ 68a3ef95
<template>
<div class="hot-teacher">
<div class="space-between">
<img class="img" src="../../images/Group21@2x.png"/>
</div>
<div class="teacher-item space-between">
<div class="tea-itemImg">
<img :src="resourceData.img"/>
</div>
<div class="five-text">
<div class="tea-itemname fw fs30">{{resourceData.name}}</div>
<div class="five-tag fs28 gray">{{resourceData.motto}}</div>
<div @click="btn" class="porter-btn white fs22">查看</div>
</div>
</div>
</div>
</template>
<script>
export default {
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';
.hot-teacher{
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);
}
.teacher-item{
width: 100%;
height: px2rem(65px);
position: relative;
margin-top: px2rem(20px);
background: #F9FAFC;
&:not(:last-child){
border-bottom: 1px solid RGBA(240, 240, 240, 1);
}
.tea-itemimg{
width: px2rem(56px);
height: px2rem(63px);
border-radius: px2rem(3px);
}
.five-text{
width: px2rem(280px);
position: relative;
}
.tea-itemname{
color: RGBA(102, 102, 102, 1);
margin: px2rem(10px) 0 px2rem(6px);
}
.five-tag{
width: px2rem(235px);
height: px2rem(14px);
}
.porter-btn{
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: px2rem(10px);;
top: 50%;
margin-top:-(px2rem(10px));
}
}
}
</style>
src/components/business-new/yqy-hot-label.vue 0 → 100644
浏览文件 @ 68a3ef95
<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-new/yqy-hot-teacher.vue 0 → 100644
浏览文件 @ 68a3ef95
<template>
<div class="hot-teacher">
<div :style="{'text-align': direction}" class="title">{{title}}</div>
<div class="teacher-item" :key="index" v-for="(item,index) in hotTeachers">
<img class="tea-itemimg" :src="item.img"/>
<span class="tea-itemname">{{item.name}}</span>
<span class="tea-hospital">{{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';
.title{
font-size: px2rem(18px);
font-weight: bold;
}
.hot-teacher{
width: 100%;
background-color: #fff;
padding: 0 px2rem(15px) px2rem(26px);
.teacher-item{
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;
.tea-itemimg{
width: px2rem(23px);
height: px2rem(23px);
border-radius: 50%;
position: absolute;
top: 10px;
}
.tea-itemname{
color: RGBA(102, 102, 102, 1);
padding: px2rem(2px) px2rem(6px);
font-size: px2rem(14pt);
margin-left: px2rem(24px);
}
.tea-hospital{
color: RGBA(153, 153, 153, 1);
font-size: px2rem(12pt);
}
}
}
</style>
src/components/business-new/yqy-new-class.vue 0 → 100644
浏览文件 @ 68a3ef95
<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-new/yqy-teacher-info.vue 0 → 100644
浏览文件 @ 68a3ef95
<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 {
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-new/yqy-teacher-list.vue 0 → 100644
浏览文件 @ 68a3ef95
<template>
<div class="cource-teach" id="new-course">
<div class="space-between cource-header" >
<div :style="{'text-align': direction}" class="title" >{{teacherData.title}}</div>
</div>
<div class="couse-list">
<div :class="index%2==1 ? 'course-item end-left' : 'course-item'" :key="index" v-for="(item,index) in cource">
<div class="course-pic">
<img src="../../images/552064153@2x.png" class="pic-tec" />
<span class="course-tag">高血压</span>
</div>
<p class="course-txt">
高血压伴糖尿病的规范化治疗
</p>
<div class="course-opt">
<span class="opt-info">刚刚 | 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/global.scss';
@import '../../style/mixin.scss';
.ellipsis{
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
width: px2rem(170px);
}
.couse-list{
overflow: hidden;
}
.cource-teach{
padding:0 px2rem(15px);
}
.course-item{
float: left;
margin-bottom: px2rem(19px);
margin-right: px2rem(5px);
}
.end-left{
margin-right: 0;
}
.course-pic{
width:px2rem(170px);
height:px2rem(95px);
position: relative;
.pic-tec{
width: 100%;
display: block;
}
.course-tag{
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);
}
}
.course-txt{
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);
}
.opt-info{
color:#999;
}
.course-opt{
font-size: px2rem(12px);
margin-top: px2rem(6px);
.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);
}
}
.title{
font-size: px2rem(18px);
height: px2rem(18px);
margin: 0 0 px2rem(21px) 0;
font-weight: bold;
}
</style>
src/components/business/yqy-adjust.vue
浏览文件 @ 68a3ef95
<template>
<div class="courceTeach">
<div class="space-between courceTeachHeader">
<div :style="{'text-align': direction}" class="fontTitle">{{teacherData.title}}</div>
<div class="cource-teach">
<div class="space-between cource-header">
<div :style="{'text-align': direction}" class="font-title">{{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">
<div class="couse-list">
<div :class="index%2==1 ? 'course-item end-left' : 'course-item'" :key="index" v-for="(item,index) in cource">
<div class="course-pic">
<img src="../../images/552064153@2x.png" class="pic-tec" />
<span class="courseTag">高血压</span>
<span class="course-tag">高血压</span>
</div>
<p class="courseTxt">
<p class="course-txt">
高血压伴糖尿病的规范化治疗
</p>
<div class="courseOpt">
<span class="optInfo">刚刚 | 89人已学</span>
<div class="course-opt">
<span class="opt-info">刚刚 | 89人已学</span>
<span class="opt collect">
收藏
</span>
......@@ -293,21 +293,21 @@ export default {
-webkit-line-clamp: 2;
width: px2rem(170px);
}
.couseList{
.couse-list{
overflow: hidden;
}
.courceTeach{
.cource-teach{
padding:0 px2rem(15px);
}
.courseItem{
.course-item{
float: left;
margin-bottom: px2rem(19px);
margin-right: px2rem(5px);
}
.endLeft{
.end-left{
margin-right: 0;
}
.coursePic{
.course-pic{
width:px2rem(170px);
height:px2rem(95px);
position: relative;
......@@ -315,7 +315,7 @@ export default {
width: 100%;
display: block;
}
.courseTag{
.course-tag{
position: absolute;
display: inline-block;
top:px2rem(5px);
......@@ -328,7 +328,7 @@ export default {
border-radius: px2rem(2px);
}
}
.courseTxt{
.course-txt{
margin-top: px2rem(5px);
font-size: px2rem(14px);
line-height: px2rem(19px);
......@@ -338,10 +338,10 @@ export default {
-webkit-line-clamp: 2;
width: px2rem(170px);
}
.courseOpt{
.course-opt{
font-size: px2rem(12px);
margin-top: px2rem(6px);
.optInfo{
.opt-info{
color:#999;
}
.opt{
......@@ -364,7 +364,7 @@ export default {
.fontTitle{
.font-title{
font-size: px2rem(18px);
padding: 0 0 px2rem(21px) px2rem(5px);
font-weight: bold;
......
src/components/business/yqy-category-three-1.vue
浏览文件 @ 68a3ef95
<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"/>
<div class="hot-teacher">
<div :style="{'text-align': resourceData.direction}" class="title">{{resourceData.title}}</div>
<!--展示形式 左一 右二-->
<div class="teacher-item space-between">
<div class="category-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"/>
<div class="right-img">
<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"/>
<div class="right-img mt5">
<img class="category-img" :src="resourceData.item.pic3.bg"/>
</div>
</div>
</div>
<di class="holder-img">
<img :src="resourceData.item.pic3.bg" class="category-img"/>
</di>
</div>
</template>
......@@ -76,87 +74,49 @@ export default {
<style lang="scss" scoped>
@import '../../style/mixin.scss';
@import '../../style/global.scss';
.hotTagTitle{
.title{
font-size: px2rem(18px);
font-weight: bold;
margin-bottom: px2rem(15px);
}
.hotTeacher{
.hot-teacher{
width: 100%;
background-color: #fff;
margin-top: px2rem(15px);
padding: 0 px2rem(15px) px2rem(26px);
.teacherItem{
.teacher-item{
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;
}
width: px2rem(170px);
height: px2rem(195px);
}
.category-img{
width: 100%;
height: 100%;
display: block;
}
.mt5{
margin-top: px2rem(5px);
}
.category-right{
width: px2rem(168px);
width: px2rem(170px);
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);
.right-img{
width: px2rem(170px);
height: px2rem(95px);
}
}
.teacherItemImg{
width: px2rem(23px);
height: px2rem(23px);
border-radius: 50%;
position: absolute;
top: 10px;
}
}
.holder-img{
width: 100%;
height: px2rem(125px);
}
}
</style>
src/components/business/yqy-five-minutes.vue
浏览文件 @ 68a3ef95
<template>
<div class="hotTeacher">
<div class="hot-teacher">
<div class="space-between">
<img class="img" src="../../images/mins.png"/>
<div @click="fiveMinutesMore" class="five-more gray fs11">
更多<img src="../../images/right-throw.png" class="thorwIcon"/>
更多<img src="../../images/right-throw.png" class="thorw-icon"/>
</div>
</div>
<div class="teacherItem space-between" :key="index" v-for="(item,index) in hotTeachers">
<div class="teacherItemImg">
<div class="teacher-item space-between" :key="index" v-for="(item,index) in hotTeachers">
<div class="teacher-itemimg">
<img :src="item.img"/>
</div>
<div class="fiveText">
<div class="teacherItemName fs14">{{item.name}}</div>
<div class="five-text">
<div class="teacher-itemname fs14">{{item.name}}</div>
<div class="five-tag fs11">#心动时刻</div>
<img @click="video(index)" class="five-radio" src="../../images/play.png"/>
</div>
......@@ -78,7 +78,7 @@ export default {
<style lang="scss" scoped>
@import '../../style/mixin.scss';
@import '../../style/global.scss';
.hotTeacher{
.hot-teacher{
width: 100%;
background-color: #fff;
padding: 0 px2rem(15px) px2rem(26px);
......@@ -87,7 +87,7 @@ export default {
width: px2rem(109px);
height: px2rem(22px);
}
.thorwIcon{
.thorw-icon{
width: px2rem(8px);
height: px2rem(8px);
......@@ -98,7 +98,7 @@ export default {
padding: px2rem(3px) px2rem(5px) px2rem(2px) px2rem(6px);
vertical-align: middle;
}
.teacherItem{
.teacher-item{
width: 100%;
height: px2rem(85px);
position: relative;
......@@ -106,16 +106,16 @@ export default {
&:not(:last-child){
border-bottom: 1px solid RGBA(240, 240, 240, 1);
}
.teacherItemImg{
.teacher-itemimg{
width: px2rem(65px);
height: px2rem(65px);
border-radius: px2rem(3px);
}
.fiveText{
.five-text{
width: px2rem(260px);
height: px2rem(38px);
}
.teacherItemName{
.teacher-itemname{
color: RGBA(102, 102, 102, 1);
margin-bottom: px2rem(13px);
}
......
src/components/business/yqy-home-adv.vue
浏览文件 @ 68a3ef95
<template>
<div class="hotTeacher">
<div class="hot-teacher">
<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 class="tea-list">
<div class="tea-listbox">
<div class="tea-item" :key="index" v-for="(item,index) in hotTeachers">
<div class="head-pic">
<img class="tea-itemimg" src="../../images/552064153@2x.png"/>
</div>
<span class="teacherItemName">{{item.name}}</span>
<span class="tea-itemname">{{item.name}}</span>
</div>
</div>
</div>
</div>
</div>
......@@ -76,16 +76,16 @@ export default {
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
.hotTeacher{
.hot-teacher{
width: 100%;
background-color: #fff;
padding: 0 px2rem(15px) px2rem(26px);
padding: 0 0 px2rem(26px) px2rem(15px);
.title{
font-size: px2rem(18px);
padding: 0 0 px2rem(21px) px2rem(5px);
font-weight: bold;
}
.teacherList{
.tea-list{
width: 100%;
overflow: hidden;
height: px2rem(75px);
......@@ -94,10 +94,11 @@ export default {
outline: 0;
-webkit-overflow-scrolling : touch;
}
.teacherItemBox{
.tea-listbox{
width: 1100px;
clear: both;
}
.teacherItem{
.tea-item{
font-size: px2rem(13px);
margin: 0 px2rem(19px) 0 0;
display: inline-block;
......@@ -105,20 +106,20 @@ export default {
position: relative;
float: left;
text-align: center;
.headPic{
.head-pic{
background: #ECECEC;
width: px2rem(50px);
height: px2rem(50px);
border-radius: 50%;
}
.teacherItemImg{
.tea-itemimg{
width: px2rem(39px);
height: px2rem(44px);
margin-top: px2rem(6px);
border-radius: 50%;
}
.teacherItemName{
.tea-itemname{
color: RGBA(102, 102, 102, 1);
padding-top: px2rem(5px);
font-size: px2rem(13px);
......
src/components/business/yqy-home-banner.vue
浏览文件 @ 68a3ef95
<template>
<div class="bannerBox">
<div class="banner-box">
<div class="banner space-between">
<div :class="index+1==resourceData.length ?'bannerItem itemEnd' : 'bannerItem'" :key="index" v-for="(item,index) in resourceData">
<div :class="index+1==resourceData.length ?'banner-item item-end' : 'banner-item'" :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">
<img class="banner-img" src="../../images/Shape@2x.png"/>
<span class="banner-text fs24">
{{item.name}}<i></i>
</span>
</div>
......@@ -56,7 +56,7 @@ html,body{
height: px2rem(100%);
background-color: #F8F8F8;
}
.bannerBox{
.banner-box{
position: relative;
height: px2rem(47px);
padding:0 px2rem(15px);
......@@ -72,29 +72,29 @@ html,body{
box-shadow: 0 px2rem(1px) px2rem(5px) RGBA(42, 94, 161, 0.15);
border-radius: px2rem(3px);
}
.bannerItem{
.banner-item{
width: px2rem(50px);
display: inline-block;
position: relative;
margin-right: px2rem(18px);
text-align: center;
}
.itemEnd{
.item-end{
margin-right: 0
}
.bannerImg{
.banner-img{
min-width: px2rem(22px);
max-height: px2rem(20px);
margin: 0 auto;
display: block;
}
.bannerText{
.banner-text{
display: inline-block;
position: relative;
font-size: px2rem(12px);
text-align: center;
}
.bannerText i{
.banner-text i{
width: px2rem(4px);
height: px2rem(4px);
display: inline-block;
......
src/components/business/yqy-home-header.vue
浏览文件 @ 68a3ef95
<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='../../images/Group2@2x.png'>
<div :class="resourceData.isTransparent?'search-transparent':'bgWhite'" class="search">
<input type="search" :class="resourceData.isTransparent?'search-transparent':''" class="input" v-model="message" :placeholder="resourceData.placeholder"/>
<img class="search-img" src='../../images/Group2@2x.png'>
</div>
<div class="headerRight">
<div class="header-right">
<img class="info" src='../../images/msg1.png'>
<div :class="resourceData.isTransparent?'transparent':'notTransparent'" class="info-count fs10">{{resourceData.count}}</div>
<div :class="resourceData.isTransparent?'transparent':'not-transparent'" class="info-count fs10">{{resourceData.count}}</div>
</div>
</div>
</template>
......@@ -60,18 +60,18 @@ html,body{
height: 100%;
background-color: #F8F8F8;
}
.searchTransparent{
.search-transparent{
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.5);
color: #fff;
}
.searchTransparent::-webkit-input-placeholder{
.search-transparent::-webkit-input-placeholder{
color: #fff;
}
.white{
color: #fff;
}
.headerRight{
.header-right{
width: px2rem(30px);
height: px2rem(30px);
position: relative;
......@@ -79,7 +79,7 @@ html,body{
.fs30{
font-size: px2rem(15px);
}
.gxyStudy{
.gxy-study{
margin-right: px2rem(19px);
}
.gxy{
......@@ -105,7 +105,7 @@ html,body{
line-height: px2rem(18px);
width: 80%;
}
.searchImg{
.search-img{
width: px2rem(16px);
height: px2rem(16px);
margin: px2rem(6px) px2rem(15px) px2rem(9px) 0;
......@@ -130,11 +130,11 @@ html,body{
background-color: #fff;
color: RGBA(53, 134, 126, 1);
}
.notTransparent{
.not-transparent{
background-color: RGBA(251, 91, 82, 1);
color: #fff;
}
.hotTag{
.hot-tag{
width: 100%;
height: px2rem(150px);
}
......@@ -148,7 +148,7 @@ html,body{
width: 100%;
height: px2rem(350px);
}
.fontTitle{
.font-title{
font-size: px2rem(18px);
padding: 0 0 px2rem(21px) px2rem(15px);
float: left;
......@@ -158,23 +158,23 @@ html,body{
.title{
font-size: px2rem(16px);
}
.courceLeft{
.cource-left{
float: left;
padding-left: px2rem(15px);
}
.needLeft{
.need-left{
float: left;
padding: 0 0 px2rem(40px) px2rem(15px);
}
.courceTime{
.cource-time{
float: left;
}
.courceImg{
.cource-img{
width: px2rem(170px);
height: px2rem(96px);
margin-bottom: px2rem(10px);
}
.courceMore{
.cource-more{
font-size: px2rem(15px);
color: #999999;
}
......
src/components/business/yqy-home-keepon.vue
浏览文件 @ 68a3ef95
<template>
<div class="keepLearn">
<div v-show="isShow" class="border-bottom space-between keepLearnBox">
<div class="learningTxt">
<div class="gray keeponTitle">{{resourceData.message}}</div>
<div class="keep-learn">
<div v-show="isShow" class="border-bottom space-between keep-learnbox">
<div class="learning-txt">
<div class="gray keepon-title">{{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>
<span class="gray fs24 keepon-right">已学习:{{resourceData.week}} 周</span>
<span class="gray fs24 keepon-right">剩余:{{resourceData.Remaining}}%</span>
<span class="gray fs24 continue-study" @click="continueStudy">继续学习></span>
</div>
</div>
<span class="closeM">
<span class="close-m">
<img @click="cancel" src="../../images/close.png"/>
</span>
......@@ -62,12 +62,12 @@ export default {
<style lang="scss" scoped>
@import '../../style/mixin.scss';
@import '../../style/global.scss';
.keepLearn{
.keep-learn{
width: 100%;
padding: 0 px2rem(15px);
margin-top: px2rem(15px);
.keepLearnBox{
.keep-learnbox{
padding: px2rem(10px);
position: relative;
......@@ -77,19 +77,19 @@ export default {
border-bottom: 1px solid RGBA(231, 231, 231, 1);
padding-bottom: px2rem(10px);
}
.keeponTitle{
.keepon-title{
font-size: px2rem(14px);
}
.continueStudy{
.continue-study{
color: RGBA(31, 121, 115, 1);
}
.keeponRight{
.keepon-right{
margin-right: px2rem(15px);
}
.learningTxt{
.learning-txt{
position: relative;
}
.closeM{
.close-m{
position: absolute;
width: px2rem(25px);
height: px2rem(25px);
......
src/components/business/yqy-home-porter.vue
浏览文件 @ 68a3ef95
<template>
<div class="hotTeacher">
<div class="hot-teacher">
<div class="space-between">
<img class="img" src="../../images/Group21@2x.png"/>
</div>
<div class="teacherItem space-between">
<div class="teacherItemImg">
<div class="teacher-item space-between">
<div class="tea-itemImg">
<img :src="resourceData.img"/>
</div>
<div class="fiveText">
<div class="teacherItemName fw fs30">{{resourceData.name}}</div>
<div class="five-text">
<div class="tea-itemname fw fs30">{{resourceData.name}}</div>
<div class="five-tag fs28 gray">{{resourceData.motto}}</div>
<div @click="btn" class="porterBtn white fs22">查看</div>
<div @click="btn" class="porter-btn white fs22">查看</div>
</div>
</div>
</div>
......@@ -58,7 +58,7 @@ export default {
<style lang="scss" scoped>
@import '../../style/mixin.scss';
@import '../../style/global.scss';
.hotTeacher{
.hot-teacher{
width: 100%;
background-color: #fff;
padding: 0 px2rem(15px) px2rem(26px);
......@@ -74,7 +74,7 @@ export default {
text-align: center;
line-height: px2rem(15px);
}
.teacherItem{
.teacher-item{
width: 100%;
height: px2rem(65px);
position: relative;
......@@ -83,17 +83,17 @@ export default {
&:not(:last-child){
border-bottom: 1px solid RGBA(240, 240, 240, 1);
}
.teacherItemImg{
.tea-itemimg{
width: px2rem(56px);
height: px2rem(63px);
border-radius: px2rem(3px);
}
.fiveText{
.five-text{
width: px2rem(280px);
position: relative;
}
.teacherItemName{
.tea-itemname{
color: RGBA(102, 102, 102, 1);
margin: px2rem(10px) 0 px2rem(6px);
}
......@@ -101,7 +101,7 @@ export default {
width: px2rem(235px);
height: px2rem(14px);
}
.porterBtn{
.porter-btn{
width: px2rem(42px);
height: px2rem(20px);
background: linear-gradient(to bottom, RGBA(143, 193, 230, 1), RGBA(88, 144, 221, 1));
......
src/components/business/yqy-hot-teacher.vue
浏览文件 @ 68a3ef95
<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 class="hot-teacher">
<div :style="{'text-align': direction}" class="title">{{title}}</div>
<div class="teacher-item" :key="index" v-for="(item,index) in hotTeachers">
<img class="tea-itemimg" :src="item.img"/>
<span class="tea-itemname">{{item.name}}</span>
<span class="tea-hospital">{{item.hospital}}</span>
</div>
</div>
</template>
......@@ -67,15 +67,15 @@ export default {
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
.hotTagTitle{
.title{
font-size: px2rem(18px);
font-weight: bold;
}
.hotTeacher{
.hot-teacher{
width: 100%;
background-color: #fff;
padding: 0 px2rem(15px) px2rem(26px);
.teacherItem{
.teacher-item{
font-size: px2rem(13pt);
margin: px2rem(10pt) px2rem(15pt) 0 0;
display: inline-block;
......@@ -83,20 +83,20 @@ export default {
border-radius: px2rem(16px);
padding: px2rem(8px) px2rem(10px);
position: relative;
.teacherItemImg{
.tea-itemimg{
width: px2rem(23px);
height: px2rem(23px);
border-radius: 50%;
position: absolute;
top: 10px;
}
.teacherItemName{
.tea-itemname{
color: RGBA(102, 102, 102, 1);
padding: px2rem(2px) px2rem(6px);
font-size: px2rem(14pt);
margin-left: px2rem(24px);
}
.teacherItemHospital{
.tea-hospital{
color: RGBA(153, 153, 153, 1);
font-size: px2rem(12pt);
}
......
src/components/business/yqy-teacher-list.vue
浏览文件 @ 68a3ef95
<template>
<div class="courceTeach">
<div class="space-between courceTeachHeader">
<div :style="{'text-align': direction}" class="fontTitle">{{teacherData.title}}</div>
<div class="cource-teach">
<div class="space-between cource-header">
<div :style="{'text-align': direction}" class="title">{{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">
<div class="couse-list">
<div :class="index%2==1 ? 'course-item end-left' : 'course-item'" :key="index" v-for="(item,index) in cource">
<div class="course-pic">
<img src="../../images/552064153@2x.png" class="pic-tec" />
<span class="courseTag">高血压</span>
<span class="course-tag">高血压</span>
</div>
<p class="courseTxt">
<p class="course-txt">
高血压伴糖尿病的规范化治疗
</p>
<div class="courseOpt">
<span class="optInfo">刚刚 | 89人已学</span>
<div class="course-opt">
<span class="opt-info">刚刚 | 89人已学</span>
<span class="opt collect">
收藏
</span>
......@@ -285,29 +285,30 @@ export default {
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
@import '../../style/global.scss';
@import '../../style/mixin.scss';
.ellipsis{
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
width: px2rem(170px);
}
.couseList{
.couse-list{
overflow: hidden;
}
.courceTeach{
.cource-teach{
padding:0 px2rem(15px);
}
.courseItem{
.course-item{
float: left;
margin-bottom: px2rem(19px);
margin-right: px2rem(5px);
}
.endLeft{
.end-left{
margin-right: 0;
}
.coursePic{
.course-pic{
width:px2rem(170px);
height:px2rem(95px);
position: relative;
......@@ -315,7 +316,7 @@ export default {
width: 100%;
display: block;
}
.courseTag{
.course-tag{
position: absolute;
display: inline-block;
top:px2rem(5px);
......@@ -328,7 +329,7 @@ export default {
border-radius: px2rem(2px);
}
}
.courseTxt{
.course-txt{
margin-top: px2rem(5px);
font-size: px2rem(14px);
line-height: px2rem(19px);
......@@ -338,12 +339,13 @@ export default {
-webkit-line-clamp: 2;
width: px2rem(170px);
}
.courseOpt{
.opt-info{
color:#999;
}
.course-opt{
font-size: px2rem(12px);
margin-top: px2rem(6px);
.optInfo{
color:#999;
}
.opt{
height: px2rem(18px);
......@@ -364,17 +366,11 @@ export default {
.fontTitle{
.title{
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/common/backTop.vue 0 → 100644
浏览文件 @ 68a3ef95
<template>
<section class="back-top">
<div class="back-btn" @click="backTop">
<img src="../../images/backTop.png"/>
</div>
</section>
</template>
<script>
export default {
data(){
return{
}
},
mounted(){
},
methods: {
backTop:function(){
var osTop = document.documentElement.scrollTop || document.body.scrollTop;
if(osTop > 0){
document.documentElement.scrollTop = document.body.scrollTop = 0;
}
}
},
}
</script>
<style lang="scss" scoped>
@import '../../style/mixin';
.back-btn{
position: fixed;
width: px2rem(35px);
height: px2rem(35px);
right: px2rem(15px);
z-index: 100;
bottom: px2rem(80px);;
img{
width: 100%;
height: 100%;
display: block;
}
}
</style>
src/router/router.js
浏览文件 @ 68a3ef95
import App from '../App'
const home = r => require.ensure([], () => r(require('../views/home/home-new')), 'home')
const activity = r => require.ensure([], () => r(require('../views/activity/activity')), 'activity')
const spCooperation = r => require.ensure([], () => r(require('../views/spCooperation/spCooperation')), 'spCooperation')
//const gpranking = r => require.ensure([], () => r(require('../views/gpranking/gpranking.vue')), 'gpranking')
......@@ -19,6 +21,14 @@ export default [{
path: '/home',
component: home
},
{
path: '/activity',
component: activity
},
{
path: '/spCooperation',
component: spCooperation
},
//学习评价gpranking页面
// {
// path: '/gpranking',
......
src/views/activity/activity.vue 0 → 100644
浏览文件 @ 68a3ef95
<template>
<section class="activity-box">
<div class="activity-count">共4个活动</div>
<div class="activity-list">
<div class="activity-item" v-for="(item,index) in list" :key="index">
<img src="../../images/Shape@2x.png" class="img"/>
<div class="time">活动时间：9月3日-9月9日</div>
</div>
</div>
<BackTop></BackTop>
</section>
</template>
<script>
import BackTop from '../../components/common/backTop';
export default {
data(){
return {
tittle:'活动掠影',
list:[{},{},{},{}]
}
},
components:{
BackTop
},
mounted(){
document.tittle = this.tittle;
},
methods:{
},
}
</script>
<style lang="scss" scoped>
@import '../../style/mixin';
.activity-box{
padding: px2rem(15px);
background: #fff;
}
.activity-count{
color: #999;
font-size: px2rem(15px);
}
.activity-item{
position: relative;
width: px2rem(345px);
height: px2rem(170px);
margin-top:px2rem(15px);
box-shadow: 0 px2rem(2px) px2rem(6px) RGBA(42, 94, 161, 0.15);
.img{
width: 100%;
height: 100%;
}
.time{
position: absolute;
color:#fff;
height: px2rem(25px);
line-height: px2rem(25px);
background: RGBA(0, 0, 0, 0.1);
border-radius: 0 0 px2rem(5px) px2rem(5px);
width: 100%;
bottom: 0;
left: 0;
z-index: 10;
font-size: px2rem(14px);
padding-left: px2rem(5px);
}
}
</style>
src/views/home/home-new.vue
浏览文件 @ 68a3ef95
......@@ -18,18 +18,18 @@
<section class="home-body">
<YqyHomeBanner/>
<div class="pathologicList">
<div class="pathologicItem">
<span class="pathologicIcon">
<div class="pathologic-list">
<div class="pathologic-item">
<span class="pathologic-icon">
<img src="../../images/G@2x.png"/>
</span>
<span class="pathologicTxt fs14">高血压全解析</span>
<span class="pathologic-txt fs14">高血压全解析</span>
</div>
<div class="pathologicItem" style="margin-right: 0">
<span class="pathologicIcon">
<div class="pathologic-item" style="margin-right: 0">
<span class="pathologic-icon">
<img src="../../images/G3x.png"/>
</span>
<span class="pathologicTxt fs14">高血压全解析</span>
<span class="pathologic-txt fs14">高血压全解析</span>
</div>
<div class="clear"></div>
</div>
......@@ -41,7 +41,7 @@
<YqyCategoryThree1/>
<!--健康守门人-->
<YqyHomePorter/>
<!-- <YqyHomePorter/> -->
<!--云雀名师-->
<YqyHomeAdv/>
......@@ -53,45 +53,44 @@
<YqyFiveMinutes/>
<!--为你推荐-->
<YqyHomeAdjust/>
</section>
<section class="home-bottom">
<!-- <yqyTest/> -->
<YqyHomeAdjust :isFixed="isFixed"/>
<BackTop v-if="isShowBackTop"/>
<a class="news-update" href="#new-course" v-if="showNewCorse">
<span class="news-info">
10个新内容
<i></i>
</span>
</a>
</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';
import BackTop from '../../components/common/backTop';
import YqyTeacherList from '../../components/business-new/yqy-teacher-list';
import YqyHomeHeader from '../../components/business-new/yqy-home-header';
import YqyHomeAdv from '../../components/business-new/yqy-home-adv';
import YqyFiveMinutes from '../../components/business-new/yqy-five-minutes';
import YqyCategoryThree1 from '../../components/business-new/yqy-category-three-1';
import YqyHomeBanner from '../../components/business-new/yqy-home-banner';
import YqyHomeKeepon from '../../components/business-new/yqy-home-keepon';
import YqyHomePorter from '../../components/business-new/yqy-home-porter';
import YqyHomeAdjust from '../../components/business-new/yqy-adjust';
export default {
data(){
return {
showNewCorse:true, // 是否显示新内容 默认显示
isFixed:false,
isShowBackTop:false,
}
},
components:{
Header,
Swipe,
SwipeItem,
// yqyTest
YqyHotLabel,
YqyHotTeacher,
BackTop,
YqyTeacherList,
YqyTeacherInfo,
YqyHomeHeader,
YqyHomeAdv,
YqyFiveMinutes,
......@@ -102,13 +101,44 @@ export default {
YqyHomeAdjust
},
mounted(){
window.addEventListener('scroll', this.scrollFun);
this.init()
},
computed:{
},
beforeDestroyed(){
window.removeEventListener('scroll', this.scrollFun)
},
methods:{
scrollFun(){
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
//document.body.scrollTop + document.documentElement.scrollTop
//滚动条滚动到最新课程
var newCourseTop = document.querySelector('#famus-teacher').offsetTop;
var clientHeight = document.querySelector('#famus-teacher').clientHeight;
var adjustTop = document.querySelector('#adjust-u').offsetTop;
//console.log(newCourseTop);
if(scrollTop +clientHeight/2 >= newCourseTop){
//alert('scrollTop:'+scrollTop+'newCourseTop:'+newCourseTop);
this.showNewCorse = false;
this.isShowBackTop = true;
}else{
this.isShowBackTop = false;
}
if(scrollTop >= adjustTop){
this.isFixed = true;
}else{
this.isFixed = false;
}
},
init() {
this.API_GET('contents/homeButton/msg', {}).then( res => {
......@@ -198,6 +228,37 @@ export default {
.font-style {
@include sc(0.6rem, #666);
}
.news-update{
display: block;
position: fixed;
background: #F9F6EF;
right: 0;
bottom: px2rem(100px);
height: px2rem(27px);
padding:0 px2rem(12px);;
line-height: px2rem(27px);
border:1px solid RGBA(162, 129, 60, 0.2);
font-size: px2rem(13px);
box-shadow: 0 px2rem(2px) px2rem(3px) RGBA(202, 168, 97, 0.4);
border-radius: px2rem(14px) 0 0 px2rem(14px);
z-index: 101;
.news-info{
color: #A2813C;
position: relative;
display: inline-block;
i{
position: absolute;
right: -(px2rem(6px));
top:px2rem(4px);
display: inline-block;
width: px2rem(4px);
height: px2rem(4px);
border-radius: 100%;
background: #F47A48
}
}
}
.home-topMenu{
width: 100%;
text-align:center;
......@@ -223,12 +284,12 @@ export default {
.home-body{
background: #fff
}
.pathologicList{
.pathologic-list{
width: 100%;
padding: 0 px2rem(15px);
margin-top: px2rem(15px);
.pathologicItem{
.pathologic-item{
float: left;
width:48%;
box-shadow: 0 px2rem(2px) px2rem(6px) RGBA(42, 94, 161, 0.15);
......@@ -237,14 +298,14 @@ export default {
padding: px2rem(12px) 0 px2rem(12px) 0;
margin-right: 4%;
text-align: center;
.pathologicIcon{
.pathologic-icon{
vertical-align: middle;
img{
width: px2rem(20px);
height: px2rem(20px);
}
}
.pathologicTxt{
.pathologic-txt{
font-size: px2rem(14px);
line-height: px2rem(20px);
font-weight: 700;
......
src/views/spCooperation/spCooperation.vue 0 → 100644
浏览文件 @ 68a3ef95
<template>
<section class="cooper-box">
<div class="cooper-count">共4个活动</div>
<div class="cooper-list">
<div class="cooper-item" v-for="(item,index) in list" :key="index">
<img src="../../images/Shape@2x.png" class="tag-img"/>
<div class="txt">国家基本公共卫生服务项目基层高血压管理办公室</div>
<span class="throw-img">
<img src="../../images/grey-throw.png" />
</span>
</div>
</div>
<BackTop></BackTop>
</section>
</template>
<script>
import BackTop from '../../components/common/backTop';
export default {
data(){
return {
tittle:'转型合作',
list:[{},{},{},{}]
}
},
components:{
BackTop
},
mounted(){
document.tittle = this.tittle;
},
methods:{
},
}
</script>
<style lang="scss" scoped>
@import '../../style/mixin';
.cooper-box{
padding: px2rem(15px);
background: #fff;
}
.cooper-count{
color: #999;
font-size: px2rem(15px);
}
.cooper-item{
position: relative;
width: px2rem(345px);
margin-top:px2rem(15px);
box-shadow: 0 px2rem(2px) px2rem(6px) RGBA(42, 94, 161, 0.15);
padding:px2rem(14px) px2rem(30px) px2rem(14px) px2rem(17px);
.img{
width: 100%;
height: 100%;
}
.tag-img{
width:px2rem(48px);
height: px2rem(48px);
float: left;
}
.txt{
font-size: px2rem(15px);
margin-left:px2rem(59px);
}
.throw-img{
position: absolute;
top:50%;
right: px2rem(11px);;
width:px2rem(14px);
height: px2rem(14px);
margin-top:-(px2rem(7px));
img{
display: block;
width: 100%;
height: 100%
}
}
.time{
position: absolute;
color:#fff;
height: px2rem(25px);
line-height: px2rem(25px);
background: RGBA(0, 0, 0, 0.1);
border-radius: 0 0 px2rem(5px) px2rem(5px);
width: 100%;
bottom: 0;
left: 0;
z-index: 10;
font-size: px2rem(14px);
padding-left: px2rem(5px);
}
}
</style>
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或