提交 5d74c46b 编写于 作者: 杨广俊's avatar 杨广俊

添加代码

上级 dae20b4c
无法预览此类型文件
无法预览此类型文件
此差异已折叠。
<template>
<div class="hot-teacher" id="famus-teacher">
<div class="titleTop">
<span class="title">{{title}}</span>
<!-- <div class="get-more gray fs11" @click="goToPage('','list')">
更多<img src="../../images/right-throw.png" class="thorw-icon"/>
</div> -->
</div>
<div class="tea-list">
<div class="tea-listbox">
<div class="tea-item" :key="index" v-for="(item,index) in parmData" @click="goToPage(item)">
<div class="head-pic">
<img class="tea-itemimg" v-lazy="item.avatarImageUrl"/>
</div>
<span class="tea-itemname">{{item.name}}</span>
</div>
</div>
</div>
</div>
</template>
<script>
// import { setEventByModuleCode } from '@/utils/index'
import { jumpWebPageUrl } from '@/utils/index'
export default {
data(){
return {
title:'热门讲师',
list: [],
pageNo: 1,
pageSize: 10,
parmData: []
}
},
beforeMount(){
},
mounted(){
this.getData();
},
props:{
userToken:{
type:String,
default:''
}
},
methods: {
//跳转
goToPage(item,parm){
let _this = this,
url = '',action_code = '',label_id = '';
if(parm == 'list'){
url = jumpWebPageUrl+'teachers?userToken='+_this.userToken;
action_code = 'c_more'
}else{
url = jumpWebPageUrl+'teachersDetail?id='+item.id+"&from=appHome&userToken="+_this.userToken
action_code = 'c_teacher';
label_id = item.id;
}
let itemData={
"title":"",
"imageUrl":"",
"appModuleInfo":{
"code":"M300",
"type":4,
"name":"wwww",
"paramFlag":1,
"paramList":[
{
"key":"pageUrl",
"value": url,
"type":4,
"seqNo":1
},{
"key":"showTitle",
"value": false,
"type":1,
"seqNo":2
},{
"key":"title",
"value": '',
"type":1,
"seqNo":3
}
]
}
};
rocNative.dispatchEventByModuleCode({
modeCode: itemData.appModuleInfo.code,
jsonString: itemData.appModuleInfo.paramList
})
this.pageBurialPoin({
menuLevel:1,
menuCode:'m_home',
functionCode:'f_teacher',
actionCode:action_code,
labelId:label_id,
labelValue :item.name,
})
},
getData(){
let _this = this,
para = {
pageNo: this.pageNo,
pageSize: this.pageSize,
token: this.userToken,
setEntry: 'headers'
}
this.GET('contents/HomeLecturer/LecturerInformation', para).then(res => {
if(res.code == '000000'){
_this.parmData = (res.data && res.data.pCourseDoctorModels || []).slice()
}
})
}
}
}
</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: px2rem(15px);
.titleTop{
padding: 0 px2rem(15px) px2rem(15px) 0;
overflow: hidden;
height: px2rem(40px);
}
.title{
font-size: px2rem(18px);
float: left;
font-weight: bold;
}
.get-more{
border: 1px solid RGBA(169, 174, 183, 0.5);
border-radius: px2rem(16px);
padding: 0 px2rem(5px) 0 px2rem(6px);
vertical-align: middle;
display: inline-block;
float: right;
margin-top:px2rem(3px);
height: px2rem(16px);
line-height: px2rem(16px);
}
.thorw-icon{
width: px2rem(8px);
height: px2rem(8px);
}
.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%;
text-align: center;
}
.tea-itemimg{
width: px2rem(50px);
height: px2rem(50px);
border-radius: 50%;
}
.tea-itemname{
color: RGBA(102, 102, 102, 1);
margin-top: px2rem(4px);
font-size: px2rem(13px);
line-height: px2rem(19px);
height: px2rem(19px);
display: inline-block;
}
}
}
</style>
<template>
<div>
<transition name="router-fade" mode="out-in">
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
</transition>
<transition name="router-fade" mode="out-in">
<router-view v-if="!$route.meta.keepAlive"></router-view>
</transition>
<svg-icon></svg-icon>
</div>
</template>
<script>
import svgIcon from './components/common/svg';
export default {
components:{
svgIcon
},
}
</script>
<style lang="scss">
@import './style/common';
.router-fade-enter-active, .router-fade-leave-active {
transition: opacity .3s;
}
.router-fade-enter, .router-fade-leave-active {
opacity: 0;
}
</style>
此差异已折叠。
<template>
<div class="hot-teacher">
<div class="title">{{title}}</div>
<!--展示形式 左一 右二-->
<div class="teacher-item space-between">
<div class="category-left" @click="goToPage(leftObj)">
<img class="category-img" :src="leftObj.imageUrl"/>
</div>
<div class="category-right">
<div class="right-img" @click="goToPage(rightTop)">
<img class="category-img" :src="rightTop.imageUrl"/>
</div>
<div class="right-img mt5" @click="goToPage(rightBottom)">
<img class="category-img" :src="rightBottom.imageUrl"/>
</div>
</div>
</div>
<div class="holder-img" @click="goToPage(rightBp)">
<img :src="rightBp.imageUrl" class="category-img"/>
</div>
</div>
</template>
<script>
// import { setEventByModuleCode } from '@/utils/index'
export default {
data(){
return{
list: [],
leftObj: {"imageUrl": require('../../images/defaults/icon-p3-1.png')},
rightTop: {"imageUrl": require('../../images/defaults/icon-p3-2.png')},
rightBottom: {"imageUrl": require('../../images/defaults/icon-p3-2.png')},
rightBp: {"imageUrl": require('../../images/defaults/icon-p3-3.png')},
title: '专题分类'
}
},
props: {
parmData: {
type: Array,
defalut: () => []
}
},
mounted(){
// this.getData();
},
watch: {
parmData(val) {
this.list = val
this.leftObj = this.list[0] || {};
this.rightTop = this.list[1] || {};
this.rightBottom = this.list[2] || {};
this.rightBp = this.list[3] || {};
}
},
methods: {
goToPage(itemData){
this.pageBurialPoin({
menuLevel: 1,
menuCode: 'm_home',
functionCode: 'f_module',
actionCode: 'c_module',
labelId: itemData.id,
labelValue: itemData.name,
})
let paramList = this.setEventByModuleCode(itemData);
rocNative.dispatchEventByModuleCode({
modeCode: itemData.appModuleInfo.code,
jsonString: paramList
})
},
getData(){
let _this = this,
para = {
category: 1,
position: 3,
token: this.userToken,
setEntry: 'headers'
}
this.GET('contents/HomeColumn/Information', para).then(res => {
if(res.code == '000000'){
//console.log(res);
_this.list = res.data && res.data.iconColumnInformationModels || [];
/// console.log(_this.list);
_this.leftObj = _this.list[0] || {};
_this.rightTop = _this.list[1] || {};
_this.rightBottom = _this.list[2] || {};
_this.rightBp = _this.list[3] || {};
}
})
},
},
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
@import '../../style/global.scss';
// img {
// @include bis('../../images/evaluatBg.png');
// }
.title{
font-size: px2rem(18px);
font-weight: bold;
margin-bottom: px2rem(15px);
color: #62647f;
}
.hot-teacher{
width: 100%;
margin-top: px2rem(30px);
padding: 0 px2rem(15px) px2rem(40px);
.category-img{
width: 100%;
height: 100%;
}
.teacher-item{
width: 100%;
/* height: px2rem(190px);*/
.category-left{
width: px2rem(170px);
height: px2rem(195px);
border-radius: px2rem(3px);
}
.category-img{
width: 100%;
height: 100%;
display: block;
border-radius: px2rem(3px);
}
.mt5{
margin-top: px2rem(5px);
}
.category-right{
width: px2rem(170px);
height: px2rem(190px);
.right-img{
width: px2rem(170px);
height: px2rem(95px);
border-radius: px2rem(3px);
}
}
}
.holder-img{
margin-top:px2rem(5px);
width: 100%;
height: px2rem(126px);
border-radius: px2rem(3px);
img{
border-radius: px2rem(3px);
}
}
}
</style>
<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>
<template>
<div class="hot-teacher" id="famus-teacher">
<div class="titleTop">
<span class="title">{{title}}</span>
<div class="get-more gray fs11" @click="goToPage('','list')">
更多<img src="../../images/right-throw.png" class="thorw-icon"/>
</div>
</div>
<div class="tea-list">
<div class="tea-listbox">
<div class="tea-item" :key="index" v-for="(item,index) in parmData" @click="goToPage(item)">
<div class="head-pic">
<img class="tea-itemimg" v-lazy="item.avatarImageUrl"/>
</div>
<span class="tea-itemname">{{item.name}}</span>
</div>
</div>
</div>
</div>
</template>
<script>
// import { setEventByModuleCode } from '@/utils/index'
import { jumpWebPageUrl } from '@/utils/index'
export default {
data(){
return {
title:'云鹊名师',
list: [],
pageNo: 1,
pageSize: 10,
parmData: []
}
},
beforeMount(){
},
mounted(){
this.getData();
},
props:{
userToken:{
type:String,
default:''
}
},
methods: {
//跳转
goToPage(item,parm){
let _this = this,
url = '',action_code = '',label_id = '';
if(parm == 'list'){
url = jumpWebPageUrl+'teachers?userToken='+_this.userToken;
action_code = 'c_more'
}else{
url = jumpWebPageUrl+'teachersDetail?id='+item.id+"&from=appHome&userToken="+_this.userToken
action_code = 'c_teacher';
label_id = item.id;
}
let itemData={
"title":"",
"imageUrl":"",
"appModuleInfo":{
"code":"M300",
"type":4,
"name":"wwww",
"paramFlag":1,
"paramList":[
{
"key":"pageUrl",
"value": url,
"type":4,
"seqNo":1
},{
"key":"showTitle",
"value": false,
"type":1,
"seqNo":2
},{
"key":"title",
"value": '',
"type":1,
"seqNo":3
}
]
}
};
rocNative.dispatchEventByModuleCode({
modeCode: itemData.appModuleInfo.code,
jsonString: itemData.appModuleInfo.paramList
})
this.pageBurialPoin({
menuLevel:1,
menuCode:'m_home',
functionCode:'f_teacher',
actionCode:action_code,
labelId:label_id,
labelValue :item.name,
})
},
getData(){
let _this = this,
para = {
pageNo: this.pageNo,
pageSize: this.pageSize,
token: this.userToken,
setEntry: 'headers'
}
this.GET('contents/HomeLecturer/LecturerInformation', para).then(res => {
if(res.code == '000000'){
_this.parmData = (res.data && res.data.pCourseDoctorModels || []).slice()
}
})
}
}
}
</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 0 px2rem(40px) px2rem(15px);
.titleTop{
padding: 0 px2rem(15px) px2rem(15px) 0;
overflow: hidden;
height: px2rem(40px);
}
.title{
font-size: px2rem(18px);
float: left;
font-weight: bold;
}
.get-more{
border: 1px solid RGBA(169, 174, 183, 0.5);
border-radius: px2rem(16px);
padding: 0 px2rem(5px) 0 px2rem(6px);
vertical-align: middle;
display: inline-block;
float: right;
margin-top:px2rem(3px);
height: px2rem(16px);
line-height: px2rem(16px);
}
.thorw-icon{
width: px2rem(8px);
height: px2rem(8px);
}
.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%;
text-align: center;
}
.tea-itemimg{
width: px2rem(50px);
height: px2rem(50px);
border-radius: 50%;
}
.tea-itemname{
color: RGBA(102, 102, 102, 1);
margin-top: px2rem(4px);
font-size: px2rem(13px);
line-height: px2rem(19px);
height: px2rem(19px);
display: inline-block;
}
}
}
</style>
<template>
<div class="banner-box">
<div class="banner space-between">
<div :class="index+1==list.length ? 'banner-item item-end' : 'banner-item'"
v-for="(item, index) in list"
@click="goToPage(item)"
:key="index" >
<img class="banner-img" :src="item.imageUrl"/>
<span class="banner-text fs24">
{{item.name}}
</span>
</div>
</div>
</div>
</template>
<script>
import { jumpWebPageUrl } from '@/utils/index'
export default {
name: 'YqyHomeBanner',
data(){
return {
list:[{
"imageUrl": require('../../images/defaults/icon-p1.png'),
"name": "微专业"
},{
"imageUrl": require('../../images/defaults/icon-p1.png'),
"name": "名师讲堂"
},{
"imageUrl": require('../../images/defaults/icon-p1.png'),
"name": "患者教育"
},{
"imageUrl": require('../../images/defaults/icon-p1.png'),
"name": "专项合作"
},{
"imageUrl": require('../../images/defaults/icon-p1.png'),
"name": "活动掠影"
}],
}
},
mounted(){
// this.getData()
},
computed: {
compData() {
return this.list
}
},
watch: {
parmData(val) {
this.list = val
}
},
props:{
userToken: {
type: String,
default: ''
},
parmData: {
type: Array,
default: () => []
}
},
methods: {
goToPage(itemData){
let paramList = this.setEventByModuleCode(itemData);
let code = '',categoryId = '',item = {};
if(itemData.appModuleInfo && itemData.appModuleInfo.code == 'M500'){
//let url = jumpWebPageUrl+'activity?categoryId=1';
code = 'M300';
let url = '';
if(itemData.appModuleInfo.paramList.length>0){
if(itemData.appModuleInfo.paramList[0].value.indexOf('activity') > -1){
url = itemData.appModuleInfo.paramList[0].value + '?categoryId='+itemData.appModuleInfo.paramList[1].value+'&userToken='+this.userToken;
}
if(itemData.appModuleInfo.paramList[0].value.indexOf('teachers') > -1){
url = itemData.appModuleInfo.paramList[0].value+'?userToken='+this.userToken;
}
}
item = {
"name":itemData.name,
"id":itemData.id,
"title":"",
"imageUrl":"",
"appModuleInfo":{
"code":code == '' ? itemData.appModuleInfo.code : code,
"type":4,
"name":"wwww",
"paramFlag":1,
"paramList":[
{
"key":"pageUrl",
"value": url,
"type":4,
"seqNo":1
},{
"key":"showTitle",
"value": false,
"type":1,
"seqNo":2
},{
"key":"title",
"value": '',
"type":1,
"seqNo":3
}
]
}
};
}else{
item = itemData;
}
rocNative.dispatchEventByModuleCode({
modeCode: item.appModuleInfo.code,
jsonString: item.appModuleInfo.paramList
})
this.pageBurialPoin({
menuLevel:1,
menuCode:'m_home',
functionCode:'f_icon',
actionCode:'c_icon_files',
labelId:itemData.id,
labelValue :itemData.name,
})
},
getData(){
let _this = this,
para = {
category: 1,
position:1,
setEntry: 'headers',
}
this.GET('contents/HomeColumn/Information', para).then(res => {
if(res.code == '000000'){
_this.list = res.data && res.data.iconColumnInformationModels || []
}
})
},
},
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
@import '../../style/global.scss';
// img {
// @include bis('../../images/evaluatBg.png');
// }
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(49, 127, 119, 0.1);
border-radius: px2rem(3px);
z-index: 2;
}
.banner-item{
width: px2rem(60px);
display: inline-block;
// margin-right: px2rem(15px);
text-align: center;
}
.item-end{
margin-right: 0
}
.banner-img{
width: px2rem(22px);
height: px2rem(22px);
margin: 0 auto;
display:block;
}
.banner-text{
margin-top:px2rem(5px);
display: block;
position: relative;
font-size: px2rem(12px);
text-align: center;
width: 100%;
color:#666;
}
.banner-text i{
width: px2rem(4px);
height: px2rem(4px);
display: inline-block;
background: #FB5B52;
border-radius: 100%;
position: absolute;
top:0;
right: -4px
}
</style>
<template>
<div :class="searchFix?'header fixed' : 'header' " id="search-top" :style="{height:menuptop}">
<div class="search-menu">
<div class="bgFill" :style="{height:ptop}"></div>
<div class="fixBox">
<div :class="isTransparent?'search-transparent':'bgWhite'" class="search" @click="goSearch">
<span class="input">{{placeholder}}</span>
<img class="search-img" src='../../images/search-white.png'>
</div>
<div class="header-right" @click="goToPage">
<img v-if="searchFix" class="info" src='../../images/msg1.png'>
<img v-else class="info" src='../../images/msg1.png'>
<div :class="isMax?'num-max':'num-min'" class="info-count fs10" v-show="msgCount>0">{{msgCount>99?'99+':msgCount}}</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { jumpSearchUrl } from '@/utils/index'
export default {
data(){
return {
placeholder: '搜索疾病、课程、讲师',
disabled:'disabled',
searchVal:'',
isTransparent: true, //更改颜色 背景
isMax:false,//消息数量是否大于99
count:'',
isShowMsg:true,
ptop:0,
menuptop:0,
popHeight:0
}
},
props:{
msgCount:{
type:String,
default:''
},
statusBarHeight:{
type:Number,
default:0
},
searchFix:{
type:Boolean,
default:false,
}
},
watch:{
// searchFix:function(n){
// if(n){
// alert(this.searchFix)
// }
// }
},
created(){
let _this = this;
window.__getStatusBarHeight = function(parm){
//lert(parm.statusBarHeight)
if(window.__isAndroid){
_this.popHeight = parseInt(parm.statusBarHeight)/2.5
}else{
_this.popHeight = parm.statusBarHeight
}
_this.ptop = _this.popHeight+'px';
_this.menuptop = _this.popHeight+'px'
// alert(parm.statusBarHeight);
}
this.getStatusHight()
},
mounted(){
// this.getStatusHight();
// if(window.__isAndroid){
// this.popHeight = this.statusBarHeight/2
// }else{
// this.popHeight = this.statusBarHeight
// }
// this.count = this.msgCount;
// this.ptop = this.popHeight+7+'px';
// this.menuptop = this.popHeight+7+'px'
// console.log(this.statusBarHeight);
// if(this.msgCount == ''){
// this.isShowMsg = false
// }
// if(this.count>=99){
// this.count += '+';
// this.isMax = true
// }
},
methods: {
getStatusHight(){
rocNative.getStatusBarHeight({
__funcName: '__getStatusBarHeight'
})
},
goSearch(){
let _this = this,
url = jumpSearchUrl;
//alert(url)
let itemData={
"title":"",
"imageUrl":"",
"appModuleInfo":{
"code":"M300",
"type":4,
"name":"wwww",
"paramFlag":1,
"paramList":[
{
"key":"pageUrl",
"value": url,
"type":4,
"seqNo":1
},{
"key":"showTitle",
"value": false,
"type":1,
"seqNo":2
},{
"key":"title",
"value": '',
"type":1,
"seqNo":3
}
]
}
};
rocNative.dispatchEventByModuleCode({
modeCode: itemData.appModuleInfo.code,
jsonString: itemData.appModuleInfo.paramList
})
},
goToPage(){
// alert("000");
this.$emit('setAppMsg',false)
this.pageBurialPoin({
menuLevel:1,
menuCode:'m_home',
functionCode:'f_notification',
actionCode:'c_notification',
})
rocNative.readMessage();
}
},
}
</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, 1);
color: #fff;
margin: px2rem(8px) 0 0 0;
}
.search-transparent::-webkit-input-placeholder{
color:#fff;
}
.white{
color: #fff;
}
.header-right{
width: px2rem(20px);
height: px2rem(20px);
position: relative;
margin-top:px2rem(13px);
float: right;
img{
width: 100%;
height: 100%;
display: block;
}
}
.bgFill{
background: inherit;
height: 20px;
}
.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%;
/*//height: px2rem(50px);*/
position: relative;
}
.fixed {
.search-menu{
position: fixed;
z-index: 110;
top:0;
left: 0;
}
.fixBox{
background: #4CBBA9;
height:px2rem(46px);
padding:0 px2rem(25px);
/* padding-top: px2rem(7px)*/
}
.bgFill{
background: #4CBBA9;
}
.search-transparent::-webkit-input-placeholder{
color:#fff;
}
.search{
border-color:#fff;
}
.info-count{
background: #FB5B52;
color: #fff
}
}
.fixBox{
padding:0 px2rem(25px);
height: px2rem(30px);
/* padding-top: px2rem(7px)*/
}
.search-menu{
width: 100%;
position: absolute;
}
.search{
width: px2rem(290px);
height: px2rem(30px);
border-radius: px2rem(19px);
float: left;
text-align: left;
}
.input{
outline: none;
border: none;
float: left;
font-size: px2rem(13px);
margin: 0 0 0 px2rem(15px);
line-height: px2rem(28px);
width: 80%;
color: #fff;
}
.search-img{
width: px2rem(13px);
height: px2rem(13px);
margin: px2rem(8px) px2rem(10px) 0 0;
float: right;
}
.info-count{
position:absolute;
top: -(px2rem(5px));
left: (px2rem(10px));
/*max-width: px2rem(25px);*/
padding:0 px2rem(3px) 0 px2rem(2px);
height: px2rem(15px);
line-height: px2rem(15px);
border-radius: px2rem(15px);
text-align: center;
font-size:px2rem(12px);
/*font-weight: bold;*/
background-color: #fff;
color: RGBA(53, 134, 126, 1);
}
.num-min{
max-width: px2rem(25px);
min-width: px2rem(15px);
/*padding:0;*/
}
.num-max{
width: auto;
/* 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>
<template>
<div class="keep-learn">
<div class="border-bottom keep-learnbox">
<div class="learning-txt">
<div class="gray keepon-title">{{parmData.name || '糖尿病诊疗'}}</div>
<div class="keepon-txt">
<span class="gray fs24 keepon-right">已学习:{{parmData.day}}</span>
<span class="gray fs24 keepon-right">剩余:{{parmData.remanentCourseNum}}%</span>
<span class="gray fs24 continue-study" @click="continueStudy(parmData)">继续学习></span>
</div>
</div>
<span class="close-m">
<img @click="cancel" src="../../images/close.png"/>
</span>
</div>
</div>
</template>
<script>
// import { setEventByModuleCode } from '@/utils/index'
export default {
name: 'YqyHomeKeepon',
data(){
return {
isShow: true,
parmObj:{}
}
},
props:{
parmData:{
type:Object,
default:{}
},
},
mounted(){
// if(this.userMobile != ''){
// this.getData();
// }else{
// this.isShow = false;
// }
},
methods: {
continueStudy(item){
this.pageBurialPoin({
menuLevel:1,
menuCode:'m_home',
functionCode:'f_course',
actionCode:'c_play',
labelId:item.courseId,
labelValue :item.name,
})
let itemData={
"title":item.name,
"imageUrl":"",
"appModuleInfo":{
"code":"M200",
"type":4,
"name":"课程介绍页",
"paramFlag":1,
"paramList":[
{
"key":"className",
"value":"com.picahealth.yunque.activitys.courseplaynew.CourseIntroduceActivity###WeexCourseIntroViewController",
"type":4,
"seqNo":1
},
{
"key":"courseId",
"value":`${item.courseId}`,
"type":1,
"seqNo":2
}
]
}
};
let paramList = this.setEventByModuleCode(itemData);
rocNative.dispatchEventByModuleCode({
modeCode: itemData.appModuleInfo.code,
jsonString: paramList
});
this.isShow = false;
//this.$emit('hideKeepon',false)
},
cancel(){
this.$emit('hideKeepon',false)
this.pageBurialPoin({
menuLevel:1,
menuCode:'m_home',
functionCode:'f_course',
actionCode:'c_close',
//labelId:itemData.id,
//labelValue :itemData.name,
})
this.isShow = false
},
getData(){
let _this = this,
parm = {
token:_this.userToken,
setEntry: 'headers'
}
_this.GET('contents/courses/continueLearningCourse',parm).then(function(res){
if(res.code === '000000'){
_this.parmObj = res.data && res.data.continueLearningCourseModel || {};
if(_this.parmObj.remanentCourseNum == 0){
_this.isShow = false;
}else{
_this.isShow = _this.parmObj.showFlag ? true : false;
}
}
})
}
}
}
</script>
<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);
color:#666;
line-height: px2rem(19px);
}
.keepon-txt{
margin-top:px2rem(5px);
line-height: px2rem(17px);
height: px2rem(17px);
span{
float: left;
font-size: px2rem(12px);
}
}
.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>
<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 v-lazy="resourceData.img" :key="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>
<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>
<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" v-lazy="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>
<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" v-lazy="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" v-lazy="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" v-lazy="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>
<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>
<template>
<div class="cource-teach" >
<div class="cource-header">
<div class="title" id="new-course">
{{title}}
<div class="get-more gray fs11" @click="goToPage('')">
更多<img src="../../images/right-throw.png" class="thorw-icon"/>
</div>
</div>
</div>
<div class="couse-list">
<div :class="index%2==1 ? 'course-item end-left' : 'course-item'" :key="index" v-for="(item,index) in parmData">
<div class="course-pic" @click="goToPage(item)">
<img v-lazy="item.courseInfoUrl" class="pic-tec" :key="item.courseInfoUrl"/>
<!-- <span class="course-tag">{{item.disName}}</span> -->
</div>
<p class="course-txt">
{{item.name}}
</p>
<div class="course-opt">
<span class="opt-info">{{!item.showTime ? '' : item.showTime + ' |'}} {{item.joinNum}}人已学</span>
<span :class="item.whetherFavors==2?'opt collect':'opt collected'"@click="collectFun(item.whetherFavors,item.id,item.name)">
{{item.whetherFavors==2?'收藏':'已收藏'}}
</span>
</div>
</div>
</div>
<div v-if="parmData.length==0" class="noSource">暂无最新教程数据</div>
</div>
</template>
<script>
//import { setEventByModuleCode } from '@/utils/index'
export default {
name: 'YqyTeacherList',
data () {
return {
list: [],
title:'最新课程',
pageNo:1,
pageSize:6,
}
},
mounted(){
//this.getData()
//this.list = this.parmData;
},
props:{
parmData:{
type:Array,
default: () => []
},
userToken:{
type:String,
default:''
},
},
methods: {
//跳转
goToPage(item){
this.$emit("setRefrshParm",{isclick:true,id:item.id})
this.pageBurialPoin({
menuLevel:1,
menuCode:'m_home',
functionCode:'f_new_course',
actionCode:'c_course',
labelId:item.id,
labelValue :item.name,
})
let itemData = {};
if(item == ''){
itemData = {
"title":item.name,
"imageUrl":"",
"appModuleInfo":{
"code":"M200",
"type":4,
"name":"课程介绍页",
"paramFlag":1,
"paramList":[
{
"key":"className",
"value":"com.picahealth.yunque.activitys.famousteacherschool.AllDiseaseActivity###MicroProfessionMoreTableController",
"type":4,
"seqNo":1
},
{
"key":"disCategoryId",
"value":'-1',
"type":1,
"seqNo":2
}
]
}
};
}else{
itemData = {
"title":item.name,
"imageUrl":"",
"appModuleInfo":{
"code":"M200",
"type":4,
"name":"课程介绍页",
"paramFlag":1,
"paramList":[
{
"key":"className",
"value":"com.picahealth.yunque.activitys.courseplaynew.CourseIntroduceActivity###WeexCourseIntroViewController",
"type":4,
"seqNo":1
},
{
"key":"courseId",
"value":`${item.id}`,
"type":1,
"seqNo":2
}
]
}
};
}
let paramList = this.setEventByModuleCode(itemData);
rocNative.dispatchEventByModuleCode({
modeCode: itemData.appModuleInfo.code,
jsonString: paramList
})
},
//收藏 取消收藏
collectFun(status,id,name){
// alert(this.userToken)
status = status == 1 ? 2 : 1;
this.pageBurialPoin({
menuLevel:1,
menuCode:'m_home',
functionCode:'f_new_course',
actionCode:'c_collect',
labelId:id,
labelValue :name,
})
let _this = this,
parm = {
token:_this.userToken,
type:status,
courseId:id,
setEntry: 'headers',
data:{
token:_this.userToken,
}
}
_this.POST('contents/favors',parm).then(function(res){
if(res.code === '000000'){
_this.handelData(id,status);
}else{
//alert(res.message);
rocNative.showNativeToast({
message: '注册登陆后才能收藏哦'
})
}
})
},
handelData(id,status){
let d = this.parmData;
for(let i=0;i<d.length;i++){
if(id == d[i].id){
d[i].whetherFavors = status;
}
}
},
getData(){
//alert("最新课程");
let _this = this,
parm = {
pageNo:_this.pageNo,
pageSize:_this.pageSize,
token:_this.userToken,
setEntry: 'headers'
}
_this.GET('/contents/HomeNewCourse/NewCourseInformation',parm).then(function(res){
if(res.code === '000000'){
_this.list = res.data.contentAppModels || [];
}
})
}
}
}
</script>
<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;
display: flex;
flex-wrap: wrap;
}
.get-more{
border: 1px solid RGBA(169, 174, 183, 0.5);
border-radius: px2rem(16px);
padding: 0 px2rem(5px) 0 px2rem(6px);
vertical-align: middle;
display: inline-block;
float: right;
margin-top:px2rem(3px);
height: px2rem(16px);
line-height: px2rem(16px);
font-size: px2rem(11px);
}
.thorw-icon{
width: px2rem(8px);
height: px2rem(8px);
}
.noSource{
text-align: center;
font-size: px2rem(13px);
padding:px2rem(13px) 0;
color:#999;
}
.cource-teach{
padding:0 px2rem(15px);
}
.course-item{
/*float: left;*/
width:px2rem(170px);
display: flex;
flex-direction: column;
justify-content: space-between;
align-content: flex-start;
margin-bottom: px2rem(19px);
margin-right: px2rem(5px);
}
.end-left{
margin-right: 0;
}
.course-pic{
width:px2rem(170px);
height:px2rem(95px);
border-radius: px2rem(3px);
position: relative;
.pic-tec{
width:px2rem(170px);
height:px2rem(95px);
border-radius: px2rem(3px);
/* display: block;*/
}
.course-tag{
position: absolute;
display: inline-block;
top:px2rem(5px);
left: px2rem(5px);
line-height: px2rem(16px);
height:px2rem(16px);
color:#4A87D4;
padding: 0 px2rem(3px);
background: #FAFCFF;
border:1px solid #C3DCFB;
font-size: px2rem(10px);
border-radius: px2rem(2px);
}
}
.course-txt{
margin-top: px2rem(5px);
font-size: px2rem(14px);
line-height: px2rem(19px);
max-height: px2rem(38px);
color: #333;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
width: px2rem(170px);
}
.opt-info{
color:#999;
}
.course-opt{
font-size: px2rem(12px);
width:px2rem(170px);
/* margin-top: px2rem(6px);*/
position: relative;
.opt{
display: inline-block;
top:0;
right: 0;
position: absolute;
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;
color:#28344C
}
</style>
<template>
<div class="alet_container">
<section class="tip_text_container">
<div class="tip_icon">
<span></span>
<span></span>
</div>
<p class="tip_text">{{alertText}}</p>
<div class="confrim" @click="closeTip">确认</div>
</section>
</div>
</template>
<script>
export default {
data(){
return{
positionY: 0,
timer: null,
}
},
mounted(){
},
props: ['alertText'],
methods: {
closeTip(){
this.$emit('closeTip')
}
}
}
</script>
<style lang="scss" scoped>
@import '../../style/mixin';
@keyframes tipMove{
0% { transform: scale(1) }
35% { transform: scale(.8) }
70% { transform: scale(1.1) }
100% { transform: scale(1) }
}
.alet_container{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 200;
}
.tip_text_container{
position: absolute;
top: 50%;
left: 50%;
margin-top: -6rem;
margin-left: -6rem;
width: 12rem;
animation: tipMove .4s ;
background-color: rgba(255,255,255,1);
border: 1px;
padding-top: .6rem;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
border: 1px;
border-radius: 0.25rem;
.tip_icon{
@include wh(3rem, 3rem);
border: 0.15rem solid #f8cb86;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
span:nth-of-type(1){
@include wh(.12rem, 1.5rem);
background-color: #f8cb86;
}
span:nth-of-type(2){
@include wh(.2rem, .2rem);
border: 1px;
border-radius: 50%;
margin-top: .2rem;
background-color: #f8cb86;
}
}
.tip_text{
@include sc(.7rem, #333);
line-height: .9rem;
text-align: center;
margin-top: .8rem;
padding: 0 .4rem;
}
.confrim{
@include sc(.8rem, #fff);
font-weight: bold;
margin-top: .8rem;
background-color: #4cd964;
width: 100%;
text-align: center;
line-height: 1.8rem;
border: 1px;
border-bottom-left-radius: 0.25rem;
border-bottom-right-radius: 0.25rem;
}
}
</style>
<template>
<section class="back-top">
<div class="back-btn" @click="backTop">
<img src="../../images/backTop.png"/>
</div>
</section>
</template>
<script>
export default {
data(){
return{
objPoint:{}
}
},
props:{
burialPoint:{
default:'',
type:String
}
},
mounted(){
if(this.burialPoint == 'activity'){
this.objPoint = {
menuLevel:2,
menuFromCode:'m_home',
menuCode:'m_content_list',
functionCode:'f_activity',
actionCode:'c_top'
}
}
},
methods: {
backTop:function(){
if(this.burialPoint == 'activity'){
this.pageBurialPoin(this.objPoint);
}
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>
<template>
<section class="cart_module">
<section v-if="!foods.specifications.length" class="cart_button">
<transition name="showReduce">
<span @click="removeOutCart(foods.category_id, foods.item_id, foods.specfoods[0].food_id, foods.specfoods[0].name, foods.specfoods[0].price, '', foods.specfoods[0].packing_fee, foods.specfoods[0].sku_id, foods.specfoods[0].stock)" v-if="foodNum">
<svg>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#cart-minus"></use>
</svg>
</span>
</transition>
<transition name="fade">
<span class="cart_num" v-if="foodNum">{{foodNum}}</span>
</transition>
<svg class="add_icon" @touchstart="addToCart(foods.category_id, foods.item_id, foods.specfoods[0].food_id, foods.specfoods[0].name, foods.specfoods[0].price, '', foods.specfoods[0].packing_fee, foods.specfoods[0].sku_id, foods.specfoods[0].stock, $event)">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#cart-add"></use>
</svg>
</section>
<section v-else class="choose_specification">
<section class="choose_icon_container">
<transition name="showReduce">
<svg class="specs_reduce_icon" v-if="foodNum" @click="showReduceTip">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#cart-minus"></use>
</svg>
</transition>
<transition name="fade">
<span class="cart_num" v-if="foodNum">{{foodNum}}</span>
</transition>
<span class="show_chooselist" @click="showChooseList(foods)">选规格</span>
</section>
</section>
</section>
</template>
<script>
import {mapState, mapMutations} from 'vuex'
export default {
data(){
return{
showMoveDot: [], //控制下落的小圆点显示隐藏
}
},
mounted(){
},
computed: {
...mapState([
'cartList'
]),
/**
* 监听cartList变化,更新当前商铺的购物车信息shopCart,同时返回一个新的对象
*/
shopCart: function (){
return Object.assign({},this.cartList[this.shopId]);
},
//shopCart变化的时候重新计算当前商品的数量
foodNum: function (){
let category_id = this.foods.category_id;
let item_id = this.foods.item_id;
if (this.shopCart&&this.shopCart[category_id]&&this.shopCart[category_id][item_id]) {
let num = 0;
Object.values(this.shopCart[category_id][item_id]).forEach((item,index) => {
num += item.num;
})
return num;
}else {
return 0;
}
},
},
props:['foods', 'shopId'],
methods: {
...mapMutations([
'ADD_CART','REDUCE_CART',
]),
//移出购物车
removeOutCart(category_id, item_id, food_id, name, price, specs, packing_fee, sku_id, stock){
if (this.foodNum > 0) {
this.REDUCE_CART({shopid: this.shopId, category_id, item_id, food_id, name, price, specs, packing_fee, sku_id, stock});
}
},
//加入购物车,计算按钮位置。
addToCart(category_id, item_id, food_id, name, price, specs, packing_fee, sku_id, stock, event){
this.ADD_CART({shopid: this.shopId, category_id, item_id, food_id, name, price, specs, packing_fee, sku_id, stock});
let elLeft = event.target.getBoundingClientRect().left;
let elBottom = event.target.getBoundingClientRect().bottom;
this.showMoveDot.push(true);
this.$emit('showMoveDot', this.showMoveDot, elLeft, elBottom);
},
//显示规格列表
showChooseList(foodScroll){
this.$emit('showChooseList', foodScroll)
},
//点击多规格商品的减按钮,弹出提示
showReduceTip(){
this.$emit('showReduceTip')
},
},
}
</script>
<style lang="scss" scoped>
@import '../../style/mixin';
.cart_module{
.add_icon{
position: relative;
z-index: 999;
}
.cart_button{
display: flex;
align-items: center;
}
svg{
@include wh(.9rem, .9rem);
fill: #3190e8;
}
.specs_reduce_icon{
fill: #999;
}
.cart_num{
@include sc(.65rem, #666);
min-width: 1rem;
text-align: center;
font-family: Helvetica Neue,Tahoma;
}
.choose_specification{
.choose_icon_container{
display: flex;
align-items: center;
.show_chooselist{
display: block;
@include sc(.55rem, #fff);
padding: .1rem .2rem;
background-color: $blue;
border-radius: 0.2rem;
border: 1px solid $blue;
}
}
}
}
.showReduce-enter-active, .showReduce-leave-active {
transition: all .3s ease-out;
}
.showReduce-enter, .showReduce-leave-active {
opacity: 0;
transform: translateX(1rem);
}
.fade-enter-active, .fade-leave-active {
transition: all .3s;
}
.fade-enter, .fade-leave-active {
opacity: 0;
}
.fadeBounce-enter-active, .fadeBounce-leave-active {
transition: all .3s;
}
.fadeBounce-enter, .fadeBounce-leave-active {
opacity: 0;
transform: scale(.7);
}
</style>
<template>
<div class="page">
<span class="rem_time" style="color: orange;border-width: 1px;border-style: solid;border-color: orange;" @click="gotoPay">
{{remaining}}
</span>
<alert-tip v-if="showAlert" @closeTip="showAlert = false" :alertText="alertText"></alert-tip>
</div>
</template>
<script>
import alertTip from 'src/components/common/alertTip'
export default {
data(){
return{
countNum: 900,
showAlert: false,
alertText: null,
}
},
mounted(){
this.countNum -= this.numTime;
this.remainingTime();
},
props: ['time'],
components: {
alertTip,
},
methods: {
closeTip(){
this.$emit('closeTip')
},
//计算时间
remainingTime(){
clearInterval(this.timer);
this.timer = setInterval(() => {
this.countNum --;
if (this.countNum == 0) {
clearInterval(this.timer);
this.showAlert = true;
this.alertText = '支付超时';
}
}, 1000);
},
gotoPay(){
this.showAlert = true;
this.alertText = '暂不开放支付接口';
}
},
computed: {
//转换时间成分秒
remaining: function (){
let minute = parseInt(this.countNum/60);
let second = parseInt(this.countNum%60);
if (minute < 10) {
minute = '0' + minute;
}
if (second < 10) {
second = '0' + second;
}
return '去支付(还剩' + minute + '分' + second + '秒)';
},
//订单返回时间秒分分别处理
numTime: function (){
if (this.time.toString().indexOf('分钟') !== -1) {
return parseInt(this.time)*60;
}else{
return parseInt(this.time);
}
}
},
}
</script>
<style lang="scss" scoped>
@import 'src/style/mixin';
.page{
display: inline-block;
.rem_time{
@include sc(.55rem, orange);
padding: .1rem .2rem;
border-radius: .15rem;
}
}
</style>
<template>
<div class="up-maps-loading" v-show="lock">
<img src="../../images/loading-new.png">&nbsp;正在加载
</div>
</template>
<script>
export default {
data(){
return{
positionY: 0,
timer: null,
lock:true
}
},
mounted(){
// this.timer = setInterval(() => {
// this.positionY ++;
// }, 600)
},
// beforeDestroy(){
// clearInterval(this.timer);
// }
}
</script>
<style lang="scss" scoped>
@import '../../style/mixin';
.up-maps-loading{
margin: 10px 0;
text-align: center;
line-height: 20px;
}
.up-maps-loading>img{
display: inline-block;
margin: 0 auto;
width: 20px;
height: auto;
animation: circle 1s infinite linear;
-webkit-animation: circle 1s infinite linear;
}
</style>
<template>
<div class="loading_container">
<div class="load_img" :style="{backgroundPositionY: -(positionY%7)*2.5 + 'rem'}">
</div>
<svg class="load_ellipse" xmlns="http://www.w3.org/2000/svg" version="1.1">
<ellipse cx="26" cy="10" rx="26" ry="10" style="fill:#ddd;stroke:none;"></ellipse>
</svg>
</div>
</template>
<script>
export default {
data(){
return{
positionY: 0,
timer: null,
}
},
mounted(){
this.timer = setInterval(() => {
this.positionY ++;
}, 600)
},
beforeDestroy(){
clearInterval(this.timer);
}
}
</script>
<style lang="scss" scoped>
@import '../../style/mixin';
@keyframes load{
0% {transform: translateY(0px);}
50% {transform: translateY(-50px);}
100% {transform: translateY(0px);}
}
@keyframes ellipse{
0% {transform: scale(1);}
50% {transform: scale(0.3);}
100% {transform: scale(1);}
}
.loading_container{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
@include wh(2.5rem, 2.5rem);
}
.load_img{
@include wh(100%, 100%);
background: url(../../images/icon_loading.png) no-repeat 0 0;
background-size: 2.5rem auto;
transform: translateY(0px);
animation: load .6s infinite ease-in-out;
position: relative;
z-index: 11;
}
.load_ellipse{
position: absolute;
@include wh(2.6rem, 2rem);
top: 2.2rem;
left: 0.2rem;
z-index: 10;
animation: ellipse .6s infinite ease-in-out;
}
</style>
import { getStyle } from '../../config/mUtils'
import { imgBaseUrl, localapi, proapi } from '../../config/env'
export const loadMore = {
directives: {
'load-more': {
bind: (el, binding) => {
let windowHeight = window.screen.height;
let height;
let setTop;
let paddingBottom;
let marginBottom;
let requestFram;
let oldScrollTop;
let scrollEl;
let heightEl;
let scrollType = el.attributes.type && el.attributes.type.value;
let scrollReduce = 2;
if (scrollType == 2) {
scrollEl = el;
heightEl = el.children[0];
} else {
scrollEl = document.body;
heightEl = el;
}
el.addEventListener('touchstart', () => {
height = heightEl.clientHeight;
if (scrollType == 2) {
height = height
}
setTop = el.offsetTop;
paddingBottom = getStyle(el, 'paddingBottom');
marginBottom = getStyle(el, 'marginBottom');
}, false)
el.addEventListener('touchmove', () => {
loadMore();
}, false)
el.addEventListener('touchend', () => {
oldScrollTop = scrollEl.scrollTop;
moveEnd();
}, false)
const moveEnd = () => {
requestFram = requestAnimationFrame(() => {
if (scrollEl.scrollTop != oldScrollTop) {
oldScrollTop = scrollEl.scrollTop;
moveEnd()
} else {
cancelAnimationFrame(requestFram);
height = heightEl.clientHeight;
loadMore();
}
})
}
const loadMore = () => {
if (scrollEl.scrollTop + windowHeight >= height + setTop + paddingBottom + marginBottom - scrollReduce) {
binding.value();
}
}
}
}
}
};
export const getImgPath = {
methods: {
//传递过来的图片地址需要处理后才能正常使用
getImgPath(path) {
let suffix;
if (!path) {
return '//yqy.cangdu.org/img/default.jpg'
}
if (path.indexOf('jpeg') !== -1) {
suffix = '.jpeg'
} else {
suffix = '.png'
}
let url = '/' + path.substr(0, 1) + '/' + path.substr(1, 2) + '/' + path.substr(3) + suffix;
return 'https://fuss10.elemecdn.com' + url
},
}
}
\ No newline at end of file
<template>
<div class="rating_container">
<section class="star_container">
<svg class="grey_fill" v-for="num in 5" :key="num">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#star"></use>
</svg>
</section>
<div :style="'width:' + rating*2/5 + 'rem'" class="star_overflow">
<section class="star_container" >
<svg class="orange_fill" v-for="num in 5" :key="num">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#star"></use>
</svg>
</section>
</div>
</div>
</template>
<script>
export default {
data(){
return{
}
},
mounted(){
},
props:['rating'],
}
</script>
<style lang="scss" scoped>
@import '../../style/mixin';
.rating_container{
position: relative;
top: .2rem;
@include wh(2rem, .4rem);
.star_overflow{
overflow: hidden;
position: relative;
height: 100%;
}
.star_container{
position: absolute;
display: flex;
width: 2rem;
height: 0.4rem;
top: -0.02rem;
left: -0.02rem;
.grey_fill{
fill: #d1d1d1;
}
.orange_fill{
fill: #ff9a0d;
}
}
}
</style>
<template>
<div class="shoplist_container">
<ul v-load-more="loaderMore" v-if="shopListArr.length" type="1">
<router-link :to="{path: 'shop', query:{geohash, id: item.id}}" v-for="item in shopListArr" tag='li' :key="item.id" class="shop_li">
<section>
<img v-lazy="imgBaseUrl + item.image_path" class="shop_img">
</section>
<hgroup class="shop_right">
<header class="shop_detail_header">
<h4 :class="item.is_premium? 'premium': ''" class="" class="shop_title ellipsis">{{item.name}}</h4>
<ul class="shop_detail_ul">
<li v-for="item in item.supports" :key="item.id" class="supports">{{item.icon_name}}</li>
</ul>
</header>
<h5 class="rating_order_num">
<section class="rating_order_num_left">
<section class="rating_section">
<rating-star :rating='item.rating'></rating-star>
<span class="rating_num">{{item.rating}}</span>
</section>
<section class="order_section">
月售{{item.recent_order_num}}
</section>
</section>
<section class="rating_order_num_right">
<span class="delivery_style delivery_left" v-if="item.delivery_mode">{{item.delivery_mode.text}}</span>
<span class="delivery_style delivery_right" v-if="zhunshi(item.supports)">准时达</span>
</section>
</h5>
<h5 class="fee_distance">
<p class="fee">
¥{{item.float_minimum_order_amount}}起送
<span class="segmentation">/</span>
{{item.piecewise_agent_fee.tips}}
</p>
<p class="distance_time">
<span v-if="Number(item.distance)">{{item.distance > 1000? (item.distance/1000).toFixed(2) + 'km': item.distance + 'm'}}
<span class="segmentation">/</span>
</span>
<span v-else>{{item.distance}}</span>
<span class="segmentation">/</span>
<span class="order_time">{{item.order_lead_time}}</span>
</p>
</h5>
</hgroup>
</router-link>
</ul>
<ul v-else class="animation_opactiy">
<li class="list_back_li" v-for="item in 10" :key="item">
<img src="../../images/shopback.svg" class="list_back_svg">
</li>
</ul>
<p v-if="touchend" class="empty_data">没有更多了</p>
<aside class="return_top" @click="backTop" v-if="showBackStatus">
<svg class="back_top_svg">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#backtop"></use>
</svg>
</aside>
<div ref="abc" style="background-color: red;"></div>
<transition name="loading">
<loading v-show="showLoading"></loading>
</transition>
</div>
</template>
<script>
import {mapState} from 'vuex'
import {shopList} from 'src/service/getData'
import {imgBaseUrl} from 'src/config/env'
import {showBack, animate} from 'src/config/mUtils'
import {loadMore, getImgPath} from './mixin'
import loading from './loading'
import ratingStar from './ratingStar'
export default {
data(){
return {
offset: 0, // 批次加载店铺列表,每次加载20个 limit = 20
shopListArr:[], // 店铺列表数据
preventRepeatReuqest: false, //到达底部加载数据,防止重复加载
showBackStatus: false, //显示返回顶部按钮
showLoading: true, //显示加载动画
touchend: false, //没有更多数据
imgBaseUrl,
}
},
mounted(){
this.initData();
},
components: {
loading,
ratingStar,
},
props: ['restaurantCategoryId', 'restaurantCategoryIds', 'sortByType', 'deliveryMode', 'supportIds', 'confirmSelect', 'geohash'],
mixins: [loadMore, getImgPath],
computed: {
...mapState([
'latitude','longitude'
]),
},
updated(){
// console.log(this.supportIds, this.sortByType)
},
methods: {
async initData(){
//获取数据
let res = await shopList(this.latitude, this.longitude, this.offset, this.restaurantCategoryId);
this.shopListArr = [...res];
if (res.length < 20) {
this.touchend = true;
}
this.hideLoading();
//开始监听scrollTop的值,达到一定程度后显示返回顶部按钮
showBack(status => {
this.showBackStatus = status;
});
},
//到达底部加载更多数据
async loaderMore(){
if (this.touchend) {
return
}
//防止重复请求
if (this.preventRepeatReuqest) {
return
}
this.showLoading = true;
this.preventRepeatReuqest = true;
//数据的定位加20位
this.offset += 20;
let res = await shopList(this.latitude, this.longitude, this.offset, this.restaurantCategoryId);
this.hideLoading();
this.shopListArr = [...this.shopListArr, ...res];
//当获取数据小于20,说明没有更多数据,不需要再次请求数据
if (res.length < 20) {
this.touchend = true;
return
}
this.preventRepeatReuqest = false;
},
//返回顶部
backTop(){
animate(document.body, {scrollTop: '0'}, 400,'ease-out');
},
//监听父级传来的数据发生变化时,触发此函数重新根据属性值获取数据
async listenPropChange(){
this.showLoading = true;
this.offset = 0;
let res = await shopList(this.latitude, this.longitude, this.offset, '', this.restaurantCategoryIds, this.sortByType, this.deliveryMode, this.supportIds);
this.hideLoading();
//考虑到本地模拟数据是引用类型,所以返回一个新的数组
this.shopListArr = [...res];
},
//开发环境与编译环境loading隐藏方式不同
hideLoading(){
this.showLoading = false;
},
zhunshi(supports){
let zhunStatus;
if ((supports instanceof Array) && supports.length) {
supports.forEach(item => {
if (item.icon_name === '准') {
zhunStatus = true;
}
})
}else{
zhunStatus = false;
}
return zhunStatus
},
},
watch: {
//监听父级传来的restaurantCategoryIds,当值发生变化的时候重新获取餐馆数据,作用于排序和筛选
restaurantCategoryIds: function (value){
this.listenPropChange();
},
//监听父级传来的排序方式
sortByType: function (value){
this.listenPropChange();
},
//监听父级的确认按钮是否被点击,并且返回一个自定义事件通知父级,已经接收到数据,此时父级才可以清除已选状态
confirmSelect: function (value){
this.listenPropChange();
}
}
}
</script>
<style lang="scss" scoped>
@import 'src/style/mixin';
.shoplist_container{
background-color: #fff;
margin-bottom: 2rem;
}
.shop_li{
display: flex;
border-bottom: 0.025rem solid #f1f1f1;
padding: 0.7rem 0.4rem;
}
.shop_img{
@include wh(2.7rem, 2.7rem);
display: block;
margin-right: 0.4rem;
}
.list_back_li{
height: 4.85rem;
.list_back_svg{
@include wh(100%, 100%)
}
}
.shop_right{
flex: auto;
.shop_detail_header{
@include fj;
align-items: center;
.shop_title{
width: 8.5rem;
color: #333;
padding-top: .01rem;
@include font(0.65rem, 0.65rem, 'PingFangSC-Regular');
font-weight: 700;
}
.premium::before{
content: '品牌';
display: inline-block;
font-size: 0.5rem;
line-height: .6rem;
color: #333;
background-color: #ffd930;
padding: 0 0.1rem;
border-radius: 0.1rem;
margin-right: 0.2rem;
}
.shop_detail_ul{
display: flex;
transform: scale(.8);
margin-right: -0.3rem;
.supports{
@include sc(0.5rem, #999);
border: 0.025rem solid #f1f1f1;
padding: 0 0.04rem;
border-radius: 0.08rem;
margin-left: 0.05rem;
}
}
}
.rating_order_num{
@include fj(space-between);
height: 0.6rem;
margin-top: 0.52rem;
.rating_order_num_left{
@include fj(flex-start);
.rating_section{
display: flex;
.rating_num{
@include sc(0.4rem, #ff6000);
margin: 0 0.2rem;
}
}
.order_section{
transform: scale(.8);
margin-left: -0.2rem;
@include sc(0.4rem, #666);
}
}
.rating_order_num_right{
display: flex;
align-items: center;
transform: scale(.7);
min-width: 5rem;
justify-content: flex-end;
margin-right: -0.8rem;
.delivery_style{
font-size: 0.4rem;
padding: 0.04rem 0.08rem 0;
border-radius: 0.08rem;
margin-left: 0.08rem;
border: 1px;
}
.delivery_left{
color: #fff;
background-color: $blue;
border: 0.025rem solid $blue;
}
.delivery_right{
color: $blue;
border: 0.025rem solid $blue;
}
}
}
.fee_distance{
margin-top: 0.52rem;
@include fj;
@include sc(0.5rem, #333);
.fee{
transform: scale(.9);
@include sc(0.5rem, #666);
}
.distance_time{
transform: scale(.9);
span{
color: #999;
}
.order_time{
color: $blue;
}
.segmentation{
color: #ccc;
}
}
}
}
.loader_more{
@include font(0.6rem, 3);
text-align: center;
color: #999;
}
.empty_data{
@include sc(0.5rem, #666);
text-align: center;
line-height: 2rem;
}
.return_top{
position: fixed;
bottom: 3rem;
right: 1rem;
.back_top_svg{
@include wh(2rem, 2rem);
}
}
.loading-enter-active, .loading-leave-active {
transition: opacity 1s
}
.loading-enter, .loading-leave-active {
opacity: 0
}
</style>
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册