Skip to content

P
pica-admin-consultation
提交 afef0e19 编写于 作者: haoguojing's avatar haoguojing
浏览文件
操作

1024组件

上级 dd0b28d3
隐藏空白字符变更
内嵌 并排
正在显示 包含 576 行增加 和 4 行删除
src/components/business/yqy-hot-label.vue 0 → 100644
浏览文件 @ afef0e19
<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(123px) px2rem(15px) px2rem(26px);
}
.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
浏览文件 @ afef0e19
<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-teacher-list.vue 0 → 100644
浏览文件 @ afef0e19
<template>
<div class="courceTeach">
<div :style="{'text-align': direction}" class="fontTitle">{{data.title}}</div>
<div v-if="data.hasSelect" class="teachTitle mb42">
<select v-model="selected">
<option :key="index" v-for="(option,index) in data.selectOptions" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<span :key="index" v-for="(item,index) in data.options">
<span @click="study(index)" class="gray fs26 marginLR40">{{item}}</span>
</span>
</div>
<div class="content">
<div class="needLeft white" :key="index" v-for="(item,index) in cource">
<img class="courceImg" src=""/>
<div :class="item.color" class="courceType fs22 white">{{item.name}}
</div>
<div :class="hasPersonName?'space-between':'flex-end'" class="courceText fs22 white">
<div v-if="hasPersonName"><img class="avatar" src="../../images/Shape@2x.png"/><span class="person white">{{item.teacher}}</span></div>
<div class="white">{{item.count}}人已学</div>
</div>
<div class="title">{{item.name}}
<span v-if="courceData.hasHospital" class="gray fs24">{{item.hospital}}</span>
</div>
</div>
</div>
<div @click="showMoreFn" v-if="data.showMoreBtn" class="courceMore">更多课程</div>
</div>
</template>
<script>
export default {
name: 'YqyTeacherList',
components: {
},
props:
{
data: {
type: Object,
default: ()=>{
return {
title: '课程教学',
hasSelect: true,
showMoreBtn: true,
selectOptions: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
],
options: ['在学人数', '最新发布']
}
}
},
hasPersonName: {
type: Boolean,
default: true
},
courceData: {
type: Object,
default:()=>{
return {
selected: '综合1',
hasHospital: true,
data: [
{
img: '../../images/Shape@2x.png',
name: '检查',
hospital: '阜外医院',
color: 'blue',
teacher: '小单',
count: 477
},
{
img: '../../images/Shape@2x.png',
name: '检查',
hospital: '阜外医院',
color: 'green',
teacher: '小单',
count: 477
},
{
img: '../../images/Shape@2x.png',
name: '检查',
hospital: '阜外医院',
color: 'pink',
teacher: '小单',
count: 477
},
{
img: '../../images/Shape@2x.png',
name: '检查',
hospital: '阜外医院',
color: 'yellow',
teacher: '小单',
count: 477
},
{
img: '../../images/Shape@2x.png',
name: '检查',
hospital: '阜外医院',
color: 'blue',
teacher: '小单',
count: 477
},
{
img: '../../images/Shape@2x.png',
name: '检查',
hospital: '阜外医院',
color: 'green',
teacher: '小单',
count: 477
},
{
img: '../../images/Shape@2x.png',
name: '检查',
hospital: '阜外医院',
color: 'pink',
teacher: '小单',
count: 477
},
{
img: '../../images/Shape@2x.png',
name: '检查',
hospital: '阜外医院',
color: 'yellow',
teacher: '小单',
count: 477
}
],
options: ['在学人数', '最新发布']
}
}
},
direction: {
type: String,
default: 'left'
}
},
watch: {
selected(val){
console.log('val',val);
this.$emit('selected',val)
}
},
data () {
return {
selected: 'A',
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);
},
flag(){
let temp = this.courceData.data;
let fourCource = temp&&temp.slice(0,4);
console.log('fourCource',fourCource);
if(!this.showMore){
this.cource = fourCource;
}else{
this.cource = this.courceData.data;
}
},
showMoreFn(){
console.log('more',1);
this.showMore = !this.showMore;
// let temp = this.cource;
// let fourCource = temp&&temp.slice(0,4);
// console.log('fourCource',fourCource);
// if(!this.showMore){
// this.courceData = fourCource;
// }else{
// this.courceData = this.cource;
// }
this.flag();
},
collection(){
console.log('收藏');
},
study(val){
console.log('val',val);
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);
}
.content{
width: 100%;
height: px2rem(300px);
}
.courceTeach{
background: #fff;
padding: 0 px2rem(15px) 0 px2rem(10px);
}
.blue{
background: RGBA(236, 244, 242, 1);
color: RGBA(68, 146, 132, 1);
}
.green{
background: RGBA(235, 242, 249, 1);
color: RGBA(74, 135, 212, 1);
}
.pink{
background: RGBA(254, 242, 237, 1);
color: RGBA(244, 122, 72, 1);
}
.yellow{
background: RGBA(248, 245, 238, 1);
color: RGBA(202, 168, 97, 1);
}
.courceText{
position: absolute;
top: px2rem(75px);
width: 90%;
padding-left: px2rem(7px);
}
.courceType{
position: absolute;
top: px2rem(5px);
right: px2rem(5px);
width: 90%;
text-align: right;
width: px2rem(30px);
height: px2rem(16px);
border-radius: px2rem(2px);
line-height: px2rem(16px);
text-align: center;
}
.fontTitle{
font-size: px2rem(18px);
padding: 0 0 px2rem(21px) px2rem(5px);
width: 100%;
text-align: left;
font-weight: bold;
}
.title{
font-size: px2rem(16px);
text-align: left;
width: px2rem(170px);
max-height: px2rem(20px);
}
.courceLeft{
padding-left: px2rem(15px);
}
.needLeft{
float: left;
padding: 0 0 px2rem(40px) px2rem(5px);
position: relative;
min-height: px2rem(123px);
min-width: px2rem(170px);
}
.courceTime{
float: left;
}
.courceImg{
width: px2rem(170px);
height: px2rem(96px);
margin-bottom: px2rem(10px);
background-color: yellow;
}
.courceMore{
font-size: px2rem(15px);
color: #999999;
text-align: center;
}
.teachTitle{
width: 100%;
padding-left: px2rem(5px);
text-align: left;
}
.avatar{
width: px2rem(11px);
height: px2rem(11px);
position: absolute;
top: px2rem(4px);
}
.person{
position: absolute;
left: px2rem(25px);
}
</style>
src/style/global.scss 0 → 100644
浏览文件 @ afef0e19
@import './common.scss';
.flex{
display: flex;
}
.space-between{
display: flex;
justify-content: space-between;
}
.flex-end{
display: flex;
justify-content: flex-end;
}
.textLeft{
float: left;
}
.line20{
margin-top: px2rem(10px);
}
.mb42{
margin-bottom: px2rem(21px);
}
.marginLR40{
margin: 0 px2rem(20px);
}
.fs22{
font-size: px2rem(11px);
}
.fs24{
font-size: px2rem(12px);
}
.fs26{
font-size: px2rem(13px);
}
.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.vue
浏览文件 @ afef0e19
...@@ -15,17 +15,22 @@ ...@@ -15,17 +15,22 @@
<span @click="pushView('http://10.177.10.121:8080/yqy/index.html?1')"> pushView 1</span> <span @click="pushView('http://10.177.10.121:8080/yqy/index.html?1')"> pushView 1</span>
<span @click="goBack"> goBack 2</span> <span @click="goBack"> goBack 2</span>
<span @click="toast('Hi, 你好，宾宾！')"> toast 3</span> <span @click="toast('Hi, 你好，宾宾！')"> toast 3</span>
<YqyHotLabel/>
<YqyHotTeacher/>
<YqyTeacherList/>
</section> </section>
<section class="home-bottom"> <section class="home-bottom">
<yqyTest/> <!-- <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';
export default { export default {
data(){ data(){
return { return {
...@@ -34,7 +39,10 @@ export default { ...@@ -34,7 +39,10 @@ export default {
}, },
components:{ components:{
Header, Header,
yqyTest // yqyTest
YqyHotLabel,
YqyHotTeacher,
YqyTeacherList
}, },
mounted(){ mounted(){
this.init() this.init()
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或