提交 0e68c1f7 编写于 作者: guangjun.yang's avatar guangjun.yang

Merge branch 'dev-coursedetail-0817' into 'release'

CME、职称考页面,样式优化等   code reviewer:杨广俊

CME、职称考页面,样式优化等   code reviewer:杨广俊

See merge request !1
{
"presets": ["env", "es2015", "stage-2"],
"presets": [
"@babel/preset-env"
],
"plugins": [
"add-module-exports",
"transform-runtime",
"add-module-exports",
[
"@babel/plugin-transform-runtime",
{
"corejs": 2
}
],
"@babel/plugin-syntax-dynamic-import",
"@babel/plugin-syntax-import-meta",
"@babel/plugin-proposal-class-properties",
"@babel/plugin-proposal-json-strings",
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
],
"@babel/plugin-proposal-function-sent",
"@babel/plugin-proposal-export-namespace-from",
"@babel/plugin-proposal-numeric-separator",
"@babel/plugin-proposal-throw-expressions"
],
"comments": false,
"comments": false
}
......@@ -55,4 +55,4 @@ exports.styleLoaders = function(options) {
})
}
return output
}
\ No newline at end of file
}
......@@ -40,7 +40,7 @@ module.exports = {
loader: 'vue'
}, {
test: /\.js$/,
loader: 'babel',
loader: 'babel-loader',
include: projectRoot,
exclude: /node_modules/
}, {
......@@ -69,7 +69,16 @@ module.exports = {
postcss: [
require('autoprefixer')({
browsers: ['last 10 versions']
}),
require('postcss-pxtorem')({
rootValue: 37.5,
unitPrecision: 5,
propWhiteList: [],
selectorBlackList: [/^html$/],
replace: true,
mediaQuery: false,
minPixelValue: 2
})
]
}
}
\ No newline at end of file
}
此差异已折叠。
......@@ -15,40 +15,41 @@
"build:pro": "cross-env BUILD_ENV=pro node build/build.js"
},
"dependencies": {
"@babel/polyfill": "^7.2.5",
"@babel/polyfill": "^7.10.4",
"axios": "0.16.2",
"better-scroll": "^0.1.15",
"clipboard": "^2.0.6",
"echarts": "^4.2.0-rc.2",
"fastclick": "^1.0.6",
"img-vuer": "^0.17.2",
"install": "^0.13.0",
"iscroll": "^5.2.0",
"js-cookie": "^2.2.0",
"npm": "^6.14.6",
"pdfjs-dist": "^2.4.456",
"pica-topic-stencil": "^1.0.8",
"showdown": "^1.6.4",
"vant": "^2.2.15",
"vconsole": "^3.3.4",
"vue": "^2.1.0",
"vue-router": "^2.1.1",
"vuex": "^2.0.0",
"web-buried-point": "^2.1.0"
"web-buried-point": "^2.1.0",
"weixin-js-sdk": "^1.4.0-test"
},
"devDependencies": {
"@babel/core": "^7.0.0",
"@babel/plugin-proposal-class-properties": "^7.0.0",
"@babel/plugin-proposal-decorators": "^7.0.0",
"@babel/plugin-proposal-export-namespace-from": "^7.0.0",
"@babel/plugin-proposal-function-sent": "^7.0.0",
"@babel/plugin-proposal-json-strings": "^7.0.0",
"@babel/plugin-proposal-numeric-separator": "^7.0.0",
"@babel/plugin-proposal-throw-expressions": "^7.0.0",
"@babel/plugin-syntax-dynamic-import": "^7.0.0",
"@babel/plugin-syntax-import-meta": "^7.0.0",
"@babel/plugin-transform-runtime": "^7.0.0",
"@babel/preset-env": "^7.0.0",
"@babel/register": "^7.0.0",
"@babel/runtime-corejs2": "^7.0.0",
"autoprefixer": "^6.4.0",
"autoprefixer-loader": "^3.2.0",
"babel-core": "^6.0.0",
"babel-loader": "^6.0.0",
"babel-core": "^7.0.0-bridge.0",
"babel-loader": "7.1.1",
"babel-plugin-add-module-exports": "^1.0.0",
"babel-plugin-component": "^1.1.1",
"babel-plugin-import": "^1.11.0",
"babel-plugin-transform-runtime": "^6.0.0",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.0.0",
"babel-preset-stage-2": "^6.0.0",
"babel-register": "^6.0.0",
"babel-runtime": "^6.23.0",
"chalk": "^1.1.3",
"connect-history-api-fallback": "^1.1.0",
"cross-env": "^5.0.0",
......@@ -64,13 +65,9 @@
"less": "^2.7.1",
"less-loader": "^2.2.3",
"node-gyp": "^3.4.0",
"node-sass": "^4.9.2",
"opn": "^4.0.2",
"ora": "^0.3.0",
"sass": "^0.5.0",
"sass-loader": "^4.1.1",
"scss": "^0.2.4",
"scss-loader": "0.0.1",
"postcss-pxtorem": "^5.1.1",
"semver": "^5.3.0",
"shelljs": "^0.7.4",
"style-loader": "^0.13.1",
......
<template>
<div>
<div class="router-container">
<transition name="router-fade" mode="out-in">
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
</transition>
<transition name="router-fade" mode="out-in">
</transition>
<transition name="router-fade" mode="out-in">
<router-view v-if="!$route.meta.keepAlive"></router-view>
</transition>
<!-- <svg-icon></svg-icon> -->
......@@ -22,7 +22,7 @@
</script>
<style lang="scss">
<style lang="less">
@import './style/mixin';
@import './style/common';
@import './style/global';
......@@ -32,4 +32,7 @@
.router-fade-enter, .router-fade-leave-active {
opacity: 0;
}
.router-container{
height: 100%;
}
</style>
......@@ -44,15 +44,14 @@ export default {
};
</script>
<style lang="scss" scoped>
@import "../../style/mixin";
<style lang="less" scoped>
.back-btn {
position: fixed;
width: px2rem(35px);
height: px2rem(35px);
right: px2rem(15px);
width: 35px;
height: 35px;
right: 15px;
z-index: 100;
bottom: px2rem(80px);
bottom: 80px;
img {
width: 100%;
height: 100%;
......
此差异已折叠。
此差异已折叠。
......@@ -179,70 +179,69 @@ export default {
};
</script>
<style lang="scss" scoped>
@import "../../style/mixin";
<style lang="less" scoped>
.cell-container {
display: flex;
flex-direction: column;
margin: 0 px2rem(15px);
margin: 0 15px;
&-item {
position: relative;
display: flex;
flex-direction: row;
// margin: px2rem(6px) px2rem(0px);
// height: px2rem(51px);
margin-bottom: px2rem(32px);
line-height: px2rem(51px);
font-size: px2rem(15px);
// padding: px2rem(0px) px2rem(15px);
// margin: 6px 0px;
// height: 51px;
margin-bottom: 32px;
line-height: 51px;
font-size: 15px;
// padding: 0px 15px;
// background: rgba(248, 249, 250, 1);
// border-bottom: 1px solid #f0f0f0;
// border-radius: px2rem(6px);
// border-radius: 6px;
justify-content: space-between;
align-items: center;
.name {
&-logo {
position: relative;
z-index: 9;
margin-right: px2rem(6px);
width: px2rem(20px);
height: px2rem(20px);
margin-right: 6px;
width: 20px;
height: 20px;
text-align: center;
background:rgba(68,146,132,1);
font-size: px2rem(12px);
font-size: 12px;
font-weight: 700;
color: #FFFFFF;
border-radius: 50%;
float: left;
line-height: px2rem(22px);
line-height: 22px;
// display:table;
// overflow:hidden;
// span {
// color: #FFFFFF;
// font-size: px2rem(12px);
// font-size: 12px;
// font-weight: 700;
// display: table-cell;
// text-align: center;
// vertical-align: middle;
// line-height: px2rem(20px);
// line-height: 20px;
// }
&::before {
position: absolute;
top: px2rem(-6px);
left: px2rem(8px);
top: -6px;
left: 8px;
display: inline-block;
height: px2rem(6px);
width: px2rem(4px);
height: 6px;
width: 4px;
background: #FFFFFF;
content: "";
}
&::after {
position: absolute;
top: px2rem(20px);
left: px2rem(8px);
top: 20px;
left: 8px;
display: inline-block;
height: px2rem(6px);
width: px2rem(4px);
height: 6px;
width: 4px;
background: #FFFFFF;
content: "";
}
......@@ -254,57 +253,59 @@ export default {
background:rgba(231, 232, 233, 1);
}
&-title {
flex: 1;
// font-family: "PingFangSC-Medium", "PingFangSC", "Microsoft Yahei";
width: px2rem(231px);
font-size: px2rem(15px);
// width: 231px;
font-size: 15px;
font-weight: 700;
line-height: px2rem(21px);
line-height: 21px;
color: #373839;
float: left;
padding-right: 10px;
// float: left;
}
&-title-no {
color: rgba(151, 152, 153, 1);
}
// &::before {
// position: relative;
// top: px2rem(3px);
// top: 3px;
// display: inline-block;
// width: px2rem(4px);
// width: 4px;
// content: "";
// margin-right: px2rem(5px);
// height: px2rem(16px);
// margin-right: 5px;
// height: 16px;
// background: #449284;
// border-radius: px2rem(3px);
// border-radius: 3px;
// }
// span {
// img {
// margin-top: px2rem(4px);
// margin-top: 4px;
// position: relative;
// top: px2rem(2px);
// width: px2rem(70px);
// height: px2rem(20px);
// top: 2px;
// width: 70px;
// height: 20px;
// }
// }
}
.text-action {
width: px2rem(68px);
height: px2rem(25px);
line-height: px2rem(25px);
width: 68px;
height: 25px;
line-height: 25px;
text-align: center;
font-size: px2rem(12px);
font-size: 12px;
font-weight: 700;
border-radius: px2rem(15px);
border-radius: 15px;
// font-family: "PingFangSC-Medium", "PingFangSC", "Microsoft Yahei";
// opacity: 0.45;
border: 0.5px solid rgba(68, 146, 132, 0.6);
color: rgba(68, 146, 132, 1);
img {
position: relative;
left: px2rem(2px);
top: px2rem(3px);
width: px2rem(8px);
height: px2rem(12px);
left: 2px;
top: 3px;
width: 8px;
height: 12px;
}
&-no {
border: 0.5px solid #c7c8c9;
......@@ -317,40 +318,40 @@ export default {
}
span {
img {
margin-left: px2rem(26px);
margin-left: 26px;
position: relative;
top: px2rem(-28px);
width: px2rem(70px);
height: px2rem(20px);
top: -28px;
width: 70px;
height: 20px;
}
.space2 {
top: px2rem(-26px);
top: -26px;
}
}
.connect-line {
position: absolute;
// top: px2rem(32px);
top: px2rem(3px);
left: px2rem(9.5px);
height: px2rem(42px);
// top: 32px;
top: 3px;
left: 9.5px;
height: 42px;
width: 0.5px;
border: 0.5px dashed rgba(240, 241, 244, 1);
}
.len4 {
height: px2rem(100px);
height: 100px;
}
.len3 {
height: px2rem(82px);
height: 82px;
}
.len2 {
height: px2rem(82px);
height: 82px;
}
.len1 {
height: px2rem(62px);
height: 62px;
}
.bottom-line {
position: relative;
margin: px2rem(6px) 0 px2rem(28px) 0;
margin: 6px 0 28px 0;
bottom: 0px;
width: 100%;
border-bottom: 0.5px solid #F0F1F2;
......
......@@ -173,26 +173,25 @@ export default {
};
</script>
<style lang="scss" scoped>
@import "../../style/mixin";
<style lang="less" scoped>
.mater-container {
position: relative;
margin: px2rem(0px) px2rem(15px);
margin: 0px 15px;
}
.mater-item {
display: flex;
// width: 100%;
height: px2rem(80px);
height: 80px;
border-bottom: 1px solid #f0f0f0;
background: #fff;
flex-direction: row;
justify-content: space-between;
align-items: center;
img {
width: px2rem(35px);
height: px2rem(37px);
margin-right: px2rem(10px);
border-radius: px2rem(3px) px2rem(2px) px2rem(2px) px2rem(3px);
width: 35px;
height: 37px;
margin-right: 10px;
border-radius: 3px 2px 2px 3px;
}
&-left {
display: flex;
......@@ -201,40 +200,40 @@ export default {
}
&-right {
display: flex;
// width: px2rem(215px);
// width: 215px;
flex: 1;
flex-direction: column;
padding-top: px2rem(4px);
padding-top: 4px;
&-title {
// height: px2rem(50px);
line-height: px2rem(23px);
font-size: px2rem(15px);
// height: 50px;
line-height: 23px;
font-size: 15px;
font-weight: 700;
color: rgba(55, 56, 57, 1);
}
&-other {
height: px2rem(22px);
line-height: px2rem(20px);
font-size: px2rem(13px);
height: 22px;
line-height: 20px;
font-size: 13px;
font-weight: 400;
color: rgba(151, 152, 153, 1);
}
}
.mater-details {
position: relative;
right: px2rem(-10px);
right: -10px;
display: flex;
flex-direction: row;
align-items: center;
span {
// font-family: "PingFangSC-Medium", "PingFangSC", "Microsoft Yahei";
font-size: px2rem(14px);
font-size: 14px;
font-weight: 700;
color: #666;
}
img {
width: px2rem(15px);
height: px2rem(16px);
width: 15px;
height: 16px;
}
}
}
......
......@@ -97,52 +97,52 @@ export default {
}
};
</script>
<style lang="scss" scoped>
@import "../../style/mixin";
<style lang="less" scoped>
.comp-title-container {
margin-top: px2rem(17px);
padding-left: px2rem(15px);
margin-top: 17px;
padding-left: 15px;
// display: flex;
// flex-direction: row;
// justify-content: space-between;
.comp-text {
position: relative;
width: px2rem(345px);
// width: 345px;
width: 100%;
overflow: hidden;
}
}
.comp-title {
position: relative;
width: px2rem(238px);
width: 238px;
float: left;
line-height: px2rem(30px);
line-height: 30px;
}
.comp-title-explain {
position: relative;
float: right;
// margin-right: px2rem(15px);
margin-top: px2rem(3px);
// margin-right: 15px;
margin-top: 3px;
span {
font-size: px2rem(14px);
font-size: 14px;
font-weight: 400;
color: rgba(12, 21, 39, 0.4);
// margin-right: px2rem(3px);
line-height: px2rem(18px);
height: px2rem(18px);
// margin-right: 3px;
line-height: 18px;
height: 18px;
vertical-align: middle;
}
img {
width: px2rem(8px);
height: px2rem(12px);
width: 8px;
height: 12px;
vertical-align: middle;
}
}
.cert-img {
margin-top: px2rem(1px);
margin-top: 1px;
.banner-img {
width: px2rem(70px);
height: px2rem(20px);
padding-top: px2rem(2px);
width: 70px;
height: 20px;
padding-top: 2px;
}
}
</style>
\ No newline at end of file
</style>
......@@ -24,27 +24,26 @@ export default {
};
</script>
<style lang="scss" scoped>
@import "../../style/mixin";
<style lang="less" scoped>
.nc-container {
display: flex;
width: 100%;
flex-direction: column;
justify-content: center;
align-content: center;
margin-top: px2rem(100px);
margin-bottom: px2rem(20px);
margin-top: 100px;
margin-bottom: 20px;
text-align: center;
// margin: 0 auto;
&-img {
margin-left: px2rem(100px);
width: px2rem(150px);
height: px2rem(150px);
margin-left: 100px;
width: 150px;
height: 150px;
}
&-text {
height: px2rem(21px);
line-height: px2rem(21px);
font-size: px2rem(15px);
height: 21px;
line-height: 21px;
font-size: 15px;
font-weight: 400;
color: rgba(153, 153, 153, 1);
}
......
<template>
<!-- 到底了 -->
<section class="nc-container">
<img class="nc-container-content"
<img class="nc-container-content"
:src="nmcImg">
</section>
</template>
......@@ -17,13 +17,12 @@
}
</script>
<style lang="scss" scoped>
@import "../../style/mixin";
<style lang="less" scoped>
.nc-container {
display: flex;
&-content {
width: 100%;
height: px2rem(62px);
height: 62px;
}
}
</style>
......
......@@ -41,62 +41,61 @@ export default {
this.marginTop = '10px';
this.imgMarginTop = '-3px'
} else if(newVal == 3){
this.marginTop = '-2px';
this.marginTop = '-2px';
}
}
},
};
</script>
<style lang="scss" scoped>
@import "../../style/mixin";
<style lang="less" scoped>
.item-notice-wrapper {
.content {
display: flex;
flex-direction: row;
height: px2rem(32px);
line-height: px2rem(32px);
padding: 0 px2rem(15px);
height: 32px;
line-height: 32px;
padding: 0 15px;
text-align: left;
align-items: center;
background: #FEFAF5;
img {
width: px2rem(12px);
height: px2rem(12px);
line-height: px2rem(32px);
width: 12px;
height: 12px;
line-height: 32px;
}
span {
font-size: px2rem(13px);
font-size: 13px;
text-align: left;
&.gg {
// width: px2rem(30px);
padding: px2rem(1px) px2rem(5px) 0;
font-size: px2rem(13px);
// width: 30px;
padding: 1px 5px 0;
font-size: 13px;
font-weight: 700;
color: #835800;
}
&.vtc-line {
margin-top: px2rem(0px);
width: px2rem(1px);
height: px2rem(15px);
margin-top: 0px;
width: 1px;
height: 15px;
background: #835800;
}
&.content {
display: block;
flex: 1;
padding-top: px2rem(1px);
// padding-left: px2rem(5px) !important;
padding: 0 px2rem(10px) 0 px2rem(5px);
height: px2rem(32px);
line-height: px2rem(32px);
padding-top: 1px;
// padding-left: 5px !important;
padding: 0 10px 0 5px;
height: 32px;
line-height: 32px;
text-align: left;
font-size: px2rem(13px);
font-size: 13px;
font-weight: 700;
color: #E6A23C;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
}
......
......@@ -40,7 +40,7 @@ export default {
noticeContent: "",
noticeId: '',
noticeTitle: "",
readFlag: 0
readFlag: 0
}
}
}
......@@ -60,8 +60,7 @@ export default {
};
</script>
<style lang="scss" scoped>
@import "../../style/mixin";
<style lang="less" scoped>
.pop-notice-wrapper {
position: fixed;
width: 100%;
......@@ -69,7 +68,7 @@ export default {
left: 0;
top: 0;
z-index: 110;
font-size: px2rem(20px);
font-size: 20px;
.mask {
position: absolute;
background: rgba(0, 0, 0, 0.5);
......@@ -82,19 +81,19 @@ export default {
left: 50%;
top: 50%;
z-index: 112;
width: px2rem(300px);
// height: px2rem(185px);
margin: px2rem(-150px) 0 0 px2rem(-150px);
border-radius: px2rem(3px);
width: 300px;
// height: 185px;
margin: -150px 0 0 -150px;
border-radius: 3px;
text-align: center;
background: #fff;
.top {
padding: px2rem(30px);
padding: 30px;
.title {
display: inline-block;
font-size: px2rem(18px);
line-height: px2rem(28px);
font-size: 18px;
line-height: 28px;
word-break: break-all;
font-weight: 400;
color: #333333;
......@@ -103,10 +102,10 @@ export default {
text-align: left;
word-break: break-all;
display: inline-block;
margin: px2rem(14px) 0;
font-size: px2rem(14px);
height: px2rem(21px);
line-height: px2rem(21px);
margin: 14px 0;
font-size: 14px;
height: 21px;
line-height: 21px;
font-weight: 400;
color: #676869;
.b {
......@@ -115,18 +114,18 @@ export default {
}
}
.line {
width: px2rem(300px);
height: px2rem(1px);
width: 300px;
height: 1px;
background: rgba(240, 241, 242, 1);
}
.bottom {
text-align: center;
font-size: px2rem(17px);
height: px2rem(50px);
line-height: px2rem(50px);
font-size: 17px;
height: 50px;
line-height: 50px;
font-weight: 400;
span {
font-size: px2rem(17px);
font-size: 17px;
color: #449284;
}
}
......
......@@ -31,8 +31,7 @@ export default {
}
}
</script>
<style lang="scss" scoped>
@import "../../style/mixin";
<style lang="less" scoped>
.dialog-mask-container{
position: fixed;
top: 0;
......@@ -54,24 +53,24 @@ export default {
top: 50%;
left: 50%;
overflow: hidden;
width: px2rem(300px);
font-size: px2rem(18px);
width: 300px;
font-size: 18px;
-webkit-transition: .3s;
transition: .3s;
border-radius: px2rem(4px);
border-radius: 4px;
background-color: #fff;
-webkit-transform: translate3d(-50%,-50%,0);
transform: translate3d(-50%,-50%,0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
.dialog-content{
padding: px2rem(30px) px2rem(22px);
padding: 30px 22px;
text-align: center;
font-size: px2rem(18px);
font-size: 18px;
color: #373839;
}
.dialog-footer{
height: px2rem(50px);
height: 50px;
display: flex;
align-items: center;
&.v-hairline-top::after{
......@@ -80,9 +79,9 @@ export default {
span{
display: inline-block;
width: 50%;
height: px2rem(50px);
line-height: px2rem(50px);
font-size: px2rem(17px);
height: 50px;
line-height: 50px;
font-size: 17px;
text-align: center;
color: #979899;
&.v-hairline-left::after{
......
......@@ -64,37 +64,36 @@ export default {
},
projectName: {
type: String,
default: ""
default: ""
}
}
};
</script>
<style lang="scss" scoped>
@import "../../style/mixin";
<style lang="less" scoped>
.basic-container {
padding-bottom: px2rem(20px);
margin: px2rem(30px) px2rem(15px) 0px;
border-bottom: px2rem(1px) solid #e7e8e9;
padding-bottom: 20px;
margin: 30px 15px 0px;
border-bottom: 1px solid #e7e8e9;
.basic-title {
font-size: px2rem(18px);
line-height: px2rem(18px);
font-size: 18px;
line-height: 18px;
color: #373839;
font-weight: 700;
}
.pro-name {
display: flex;
flex-direction: row;
margin-top: px2rem(16px);
font-size: px2rem(14px);
margin-top: 16px;
font-size: 14px;
span {
display: flex;
font-size: px2rem(14px);
font-size: 14px;
align-items: center;
line-height: px2rem(22px);
line-height: 22px;
align-content: flex-start;
text-align: justify;
&.title {
width: px2rem(84px);
width: 84px;
color: #979899;
}
&.name {
......@@ -104,20 +103,20 @@ export default {
}
}
.content {
margin-top: px2rem(16px);
height: px2rem(16px);
line-height: px2rem(0px);
margin-top: 16px;
height: 16px;
line-height: 0px;
span {
display: inline-block;
font-size: px2rem(14px);
font-size: 14px;
.split {
display: inline-block;
position: relative;
top: px2rem(2px);
top: 2px;
left: 0;
width: px2rem(1px);
height: px2rem(13px);
margin: 0 px2rem(2px);
width: 1px;
height: 13px;
margin: 0 2px;
background: #676869;
}
}
......@@ -125,36 +124,36 @@ export default {
color: #979899;
}
span:last-child {
margin-left: px2rem(15px);
margin-left: 15px;
color: #676869;
}
}
.remind {
line-height: px2rem(14px);
margin-top: px2rem(10px);
line-height: 14px;
margin-top: 10px;
span {
position: relative;
display: inline-block;
padding: px2rem(5px) px2rem(10px);
margin-left: px2rem(78px);
font-size: px2rem(14px);
padding: 5px 10px;
margin-left: 78px;
font-size: 14px;
color: #fb5b52;
background: #fceeed;
border-radius: px2rem(4px);
border-radius: 4px;
}
span:after {
content: "";
position: absolute;
left: px2rem(10px);
bottom: px2rem(20px);
left: 10px;
bottom: 20px;
width: 0;
height: 0;
border-width: 0 px2rem(8px) px2rem(8px);
border-width: 0 8px 8px;
border-style: solid;
border-color: transparent transparent #fceeed;
}
}
}
</style>
\ No newline at end of file
</style>
<template>
<section class="bind-cart-wrapper">
<article class="left">
<div class="top">
<!-- <span class="discount">{{cardInfo.costPrice | formatMoney}}</span> -->
<span class="discount">{{(cardInfo.couponPrice || cardInfo.preferentialPrice || cardInfo.costPrice) | formatMoney}}</span>
<span v-show="cardInfo.couponPrice || cardInfo.preferentialPrice" class="price">
<del>原价¥{{cardInfo.costPrice | formatMoney}}</del>
</span>
</div>
<div class="bottom">
<img src="../../images/cme/phrase2/info.png" />
<span>激活或购买后可学习课程</span>
</div>
</article>
<article class="right">
<span class="left" @click="download">APP购买更优惠</span>
</article>
</section>
</template>
<script>
export default {
props: {
cardInfo: {
type: Object,
default: () => {}
}
},
data() {
return {};
},
methods: {
download() {
window.location.href =
"https://a.app.qq.com/o/simple.jsp?pkgname=com.picahealth.yunque";
},
}
};
</script>
<style lang="less" scoped>
.bind-cart-wrapper {
position: fixed;
left: 0;
bottom: 0;
z-index: 100;
width: 100%;
display: flex;
flex-direction: row;
height: 60px;
line-height: 1;
justify-content: space-between;
padding: 10px 15px;
font-size: 14px;
background: rgba(255, 255, 255, 1);
box-shadow: 0px -2px 10px 0px rgba(0, 0, 0, 0.1);
.left {
display: flex;
flex-direction: column;
height: 40px;
line-height: 1;
font-size: 12px;
// align-items: ;
.top {
margin-top: 3px;
height: 24px;
.discount {
color: #fb5b52;
font-size: 18px;
font-weight: 700;
margin-right: 4px;
}
.price {
color: #979899;
}
}
.bottom {
display: flex;
flex-direction: row;
img {
width: 12px;
height: 12px;
margin-left: 1px;
margin-right: 4px;
}
color: #979899;
}
}
.right {
display: flex;
flex-direction: row;
span {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 138px;
font-size: 14px;
font-weight: 700;
text-align: center;
&.left {
// border: 1px solid rgba(255, 122, 75, 1);
// border-right-style: none;
color: #FFFFFF;
background:linear-gradient(137deg,rgba(255,166,95,1) 0%,rgba(255,122,75,1) 100%);
border-radius: 20px;
}
}
}
}
</style>
......@@ -39,8 +39,7 @@ export default {
}
};
</script>
<style lang="scss" scoped>
@import "../../style/mixin";
<style lang="less" scoped>
.bind-cart-wrapper {
position: fixed;
left: 0;
......@@ -49,28 +48,28 @@ export default {
width: 100%;
display: flex;
flex-direction: row;
height: px2rem(60px);
height: 60px;
line-height: 1;
justify-content: space-between;
padding: px2rem(10px) px2rem(15px);
font-size: px2rem(14px);
padding: 10px 15px;
font-size: 14px;
background: rgba(255, 255, 255, 1);
box-shadow: 0px -2px 10px 0px rgba(0, 0, 0, 0.1);
.left {
display: flex;
flex-direction: column;
height: px2rem(40px);
height: 40px;
line-height: 1;
font-size: 12px;
// align-items: ;
.top {
margin-top: px2rem(3px);
height: px2rem(24px);
margin-top: 3px;
height: 24px;
.discount {
color: #fb5b52;
font-size: px2rem(18px);
font-size: 18px;
font-weight: 700;
margin-right: px2rem(4px);
margin-right: 4px;
}
.price {
color: #979899;
......@@ -80,10 +79,10 @@ export default {
display: flex;
flex-direction: row;
img {
width: px2rem(12px);
height: px2rem(12px);
width: 12px;
height: 12px;
margin-left: 1px;
margin-right: px2rem(4px);
margin-right: 4px;
}
color: #979899;
}
......@@ -96,12 +95,12 @@ export default {
flex-direction: row;
align-items: center;
justify-content: center;
width: px2rem(80px);
font-size: px2rem(14px);
width: 80px;
font-size: 14px;
font-weight: 700;
text-align: center;
&.left {
border-radius: px2rem(20px) 0px 0px px2rem(20px);
border-radius: 20px 0px 0px 20px;
border: 1px solid rgba(255, 122, 75, 1);
border-right-style: none;
color: #ff7a4b;
......@@ -112,10 +111,10 @@ export default {
rgba(255, 166, 95, 1) 0%,
rgba(255, 122, 75, 1) 100%
);
border-radius: 0px px2rem(20px) px2rem(20px) 0px;
border-radius: 0px 20px 20px 0px;
color: #fff;
}
}
}
}
</style>
\ No newline at end of file
</style>
......@@ -67,45 +67,44 @@ export default {
}
};
</script>
<style lang="scss" scoped>
@import "../../style/mixin";
<style lang="less" scoped>
.card-banner-wrapper {
width: 100%;
height: px2rem(40px);
height: 40px;
display: flex;
flex-direction: row;
padding: 0 px2rem(15px);
padding: 0 15px;
justify-content: space-between;
align-items: center;
background: #fefaf5;
.left {
display: flex;
height: px2rem(40px);
height: 40px;
flex-direction: row;
align-items: center;
img {
width: px2rem(13px);
height: px2rem(13px);
margin-right: px2rem(4px);
width: 13px;
height: 13px;
margin-right: 4px;
&.is-android {
width: px2rem(12px);
height: px2rem(13px);
margin-bottom: px2rem(2px);
width: 12px;
height: 13px;
margin-bottom: 2px;
}
}
span {
font-size: px2rem(13px);
font-size: 13px;
color: #e6a23c;
}
}
.right {
height: px2rem(25px);
line-height: px2rem(25px);
font-size: px2rem(12px);
padding: 0 px2rem(10px);
height: 25px;
line-height: 25px;
font-size: 12px;
padding: 0 10px;
background: rgba(230, 162, 60, 1);
border-radius: px2rem(25px);
border: px2rem(1px) solid rgba(230, 162, 60, 1);
border-radius: 25px;
border: 1px solid rgba(230, 162, 60, 1);
color: #ffffff;
}
}
......
......@@ -113,13 +113,12 @@ export default {
}
};
</script>
<style lang="scss" scoped>
@import "../../style/mixin";
<style lang="less" scoped>
.bind-cart-wrapper {
width: 100%;
display: flex;
line-height: 1;
padding: px2rem(10px) px2rem(15px);
padding: 10px 15px;
display: flex;
flex-direction: column;
background: rgba(255, 255, 255, 1);
......@@ -132,40 +131,40 @@ export default {
align-items: center;
justify-content: center;
width: 100%;
margin-top: px2rem(20px);
margin-top: 20px;
img {
position: relative;
top: 0;
right: px2rem(-120px);
width: px2rem(12px);
height: px2rem(12px);
right: -120px;
width: 12px;
height: 12px;
}
}
.tip {
display: flex;
margin-top: px2rem(40px);
margin-top: 40px;
.left {
display: flex;
line-height: 1.2;
font-size: px2rem(12px);
font-size: 12px;
.img-wrapper {
width: px2rem(20px);
// margin-right: px2rem(4px);
width: 20px;
// margin-right: 4px;
img {
position: relative;
top: px2rem(1px);
width: px2rem(12px);
height: px2rem(12px);
top: 1px;
width: 12px;
height: 12px;
}
img.android {
top: px2rem(1.5px);
width: px2rem(11.5px);
top: 1.5px;
width: 11.5px;
}
}
span {
display: inline-block;
margin-left: px2rem(4px);
margin-left: 4px;
}
color: #979899;
}
......@@ -176,40 +175,40 @@ export default {
position: relative;
display: flex;
flex-direction: column;
padding: px2rem(20px) 0;
padding: 20px 0;
padding-top: 0;
.cover {
width: px2rem(286px);
width: 286px;
position: absolute;
top: px2rem(21.5px);
top: 21.5px;
z-index: 1000;
border-top: px2rem(4px) solid #fff;
margin-left: px2rem(57px);
margin-right: px2rem(1px);
border-radius: px2rem(4px);
border-top: 4px solid #fff;
margin-left: 57px;
margin-right: 1px;
border-radius: 4px;
}
}
.error {
position: absolute;
top: px2rem(66px);
left: px2rem(56px);
top: 66px;
left: 56px;
display: inline-block;
color: red;
font-size: px2rem(12px);
font-size: 12px;
}
img {
position: absolute;
top: px2rem(33px);
right: px2rem(12px);
width: px2rem(15px);
height: px2rem(15px);
top: 33px;
right: 12px;
width: 15px;
height: 15px;
}
}
.bottom {
display: flex;
margin-bottom: px2rem(40px);
margin-bottom: 40px;
}
}
</style>
......@@ -3,12 +3,12 @@
<div class="common-bottom">
<span>若有问题可联系客服:</span>
<img src="../../images/cme/icon-phone.png" />
<span>400-920-8877</span>
<!-- <span>400-920-8877</span> -->
<a href="tel:4009208877"><span>400-920-8877</span></a>
</div>
</div>
</template>
<style lang="scss" scoped>
@import "../../style/mixin";
<style lang="less" scoped>
.common-bottom-info-wrapper {
position: fixed;
width: 100%;
......@@ -29,9 +29,9 @@
height: 14px;
line-height: 14px;
color: #676869;
&:nth-child(3) {
color: #449284;
}
}
a span {
color: #449284;
}
// span:nth-child(1) {
// color: #449284;
......
......@@ -27,20 +27,19 @@ export default {
},
}
</script>
<style lang="scss" scoped>
@import "../../style/mixin";
<style lang="less" scoped>
.common-button-wrapper {
font-size: px2rem(14px);
margin: px2rem(20px) px2rem(15px);
font-size: 14px;
margin: 20px 15px;
text-align: center;
&.button-default {
span {
display: block;
height: px2rem(50px);
line-height: px2rem(50px);
height: 50px;
line-height: 50px;
width: 100%;
border-radius: px2rem(25px);
font-size: px2rem(17px);
border-radius: 25px;
font-size: 17px;
font-weight: 700;
color: #FFFFFF;
background: #449284;
......@@ -60,4 +59,4 @@ export default {
}
}
</style>
\ No newline at end of file
</style>
......@@ -56,8 +56,7 @@ export default {
}
};
</script>
<style lang="scss" scoped>
@import "../../style/mixin";
<style lang="less" scoped>
.common-dialog-wrraper {
position: fixed;
top: 0;
......@@ -79,35 +78,35 @@ export default {
top: 50%;
left: 50%;
overflow: hidden;
width: px2rem(300px);
font-size: px2rem(18px);
width: 300px;
font-size: 18px;
-webkit-transition: 0.3s;
transition: 0.3s;
border-radius: px2rem(4px);
border-radius: 4px;
background-color: #fff;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
.dialog-content {
// margin: px2rem(30px) px2rem(22px);
margin: px2rem(30px);
// margin: 30px 22px;
margin: 30px;
text-align: center;
font-size: px2rem(18px);
font-size: 18px;
font-weight: 400;
color: #373839;
}
.dialog-sub-content {
margin: px2rem(-16px) px2rem(30px) px2rem(30px);
// margin: px2rem(-16px) px2rem(22px) px2rem(30px);
margin: -16px 30px 30px;
// margin: -16px 22px 30px;
text-align: left;
font-size: px2rem(14px);
line-height: px2rem(24px);
font-size: 14px;
line-height: 24px;
font-weight: 400;
color: #676869;
}
.dialog-footer {
height: px2rem(50px);
height: 50px;
display: flex;
align-items: center;
&.v-hairline-top::after {
......@@ -117,9 +116,9 @@ export default {
display: inline-block;
// width: 50%;
flex: 1;
height: px2rem(50px);
line-height: px2rem(50px);
font-size: px2rem(17px);
height: 50px;
line-height: 50px;
font-size: 17px;
text-align: center;
color: #979899;
&.v-hairline-left::after {
......
......@@ -56,8 +56,7 @@ export default {
}
};
</script>
<style lang="scss" scoped>
@import "../../style/mixin";
<style lang="less" scoped>
.common-dialog-wrraper {
position: fixed;
top: 0;
......@@ -79,35 +78,35 @@ export default {
top: 50%;
left: 50%;
overflow: hidden;
width: px2rem(300px);
font-size: px2rem(18px);
width: 300px;
font-size: 18px;
-webkit-transition: 0.3s;
transition: 0.3s;
border-radius: px2rem(4px);
border-radius: 4px;
background-color: #fff;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
.dialog-content {
// margin: px2rem(30px) px2rem(22px);
margin: px2rem(30px);
// margin: 30px 22px;
margin: 30px;
text-align: center;
font-size: px2rem(18px);
font-size: 18px;
font-weight: 400;
color: #373839;
}
.dialog-sub-content {
margin: px2rem(-16px) px2rem(30px) px2rem(30px);
// margin: px2rem(-16px) px2rem(22px) px2rem(30px);
margin: -16px 30px 30px;
// margin: -16px 22px 30px;
text-align: left;
font-size: px2rem(14px);
line-height: px2rem(24px);
font-size: 14px;
line-height: 24px;
font-weight: 400;
color: #676869;
}
.dialog-footer {
height: px2rem(50px);
height: 50px;
display: flex;
align-items: center;
&.v-hairline-top::after {
......@@ -117,9 +116,9 @@ export default {
display: inline-block;
// width: 50%;
flex: 1;
height: px2rem(50px);
line-height: px2rem(50px);
font-size: px2rem(17px);
height: 50px;
line-height: 50px;
font-size: 17px;
text-align: center;
color: #979899;
&.v-hairline-left::after {
......@@ -154,7 +153,7 @@ export default {
&.shikan {
.dialog-sub-content {
text-align: center;
font-size: px2rem(16px);
font-size: 16px;
}
}
}
......
......@@ -27,26 +27,25 @@ export default {
},
}
</script>
<style lang="scss" scoped>
@import "../../style/mixin";
<style lang="less" scoped>
.exjumper-button-wrapper {
position: fixed;
left: 0;
bottom: 0;
right: 0;
z-index: 1000;
font-size: px2rem(14px);
padding: px2rem(20px) px2rem(15px);
font-size: 14px;
padding: 20px 15px;
background: linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
text-align: center;
&.button-default {
span {
display: block;
height: px2rem(50px);
line-height: px2rem(50px);
height: 50px;
line-height: 50px;
width: 100%;
border-radius: px2rem(25px);
font-size: px2rem(17px);
border-radius: 25px;
font-size: 17px;
font-weight: 700;
color: #FFFFFF;
background: #449284;
......@@ -66,4 +65,4 @@ export default {
}
}
</style>
\ No newline at end of file
</style>
......@@ -66,8 +66,7 @@ export default {
}
};
</script>
<style lang="scss" scoped>
@import "../../style/mixin";
<style lang="less" scoped>
.exjumper-dialog-wrraper {
position: fixed;
top: 0;
......@@ -89,54 +88,54 @@ export default {
top: 50%;
left: 50%;
overflow: hidden;
width: px2rem(300px);
font-size: px2rem(18px);
width: 300px;
font-size: 18px;
-webkit-transition: 0.3s;
transition: 0.3s;
border-radius: px2rem(4px);
border-radius: 4px;
background-color: #fff;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
.title {
margin: px2rem(30px) 0 px2rem(20px);
margin: 30px 0 20px;
text-align: center;
font-size: px2rem(18px);
font-size: 18px;
font-weight: 700;
color: #373839;
}
.dialog-content {
// margin: px2rem(30px) px2rem(22px);
margin: px2rem(20px) px2rem(16px) px2rem(30px);
// margin: 30px 22px;
margin: 20px 16px 30px;
text-align: left;
font-size: px2rem(14px);
font-size: 14px;
font-weight: 400;
color: #373839;
}
.sub-wrapper {
margin-right: px2rem(5px);
max-height: px2rem(300px);
margin-right: 5px;
max-height: 300px;
overflow: auto;
.dialog-sub-content {
margin: 0 px2rem(8px) px2rem(20px) px2rem(16px);
margin: 0 8px 20px 16px;
text-align: left;
font-size: px2rem(14px);
line-height: px2rem(24px);
font-size: 14px;
line-height: 24px;
font-weight: 400;
color: #979899;
}
.dialog-img-1 {
width: px2rem(268px);
height: px2rem(165px);
margin-left: px2rem(16px);
margin-bottom: px2rem(20px);
width: 268px;
height: 165px;
margin-left: 16px;
margin-bottom: 20px;
}
.dialog-img-2 {
width: px2rem(268px);
height: px2rem(145px);
margin-left: px2rem(16px);
margin-bottom: px2rem(20px);
width: 268px;
height: 145px;
margin-left: 16px;
margin-bottom: 20px;
}
&::-webkit-scrollbar-track-piece {
......@@ -144,30 +143,30 @@ export default {
border-left: 1px solid rgba(0, 0, 0, 0);
}
&::-webkit-scrollbar {
width: px2rem(5px);
height: px2rem(13px);
-webkit-border-radius: px2rem(3px);
-moz-border-radius: px2rem(3px);
border-radius: px2rem(3px);
width: 5px;
height: 13px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
&::-webkit-scrollbar-thumb {
background-color: #C7C8C9;
background-clip: padding-box;
-webkit-border-radius: px2rem(3px);
-moz-border-radius: px2rem(3px);
border-radius: px2rem(3px);
min-height: px2rem(28px);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
min-height: 28px;
}
&::-webkit-scrollbar-thumb:hover {
background-color: #C7C8C9;
-webkit-border-radius: px2rem(3px);
-moz-border-radius: px2rem(3px);
border-radius: px2rem(3px);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
}
.dialog-footer {
height: px2rem(50px);
height: 50px;
display: flex;
align-items: center;
&.v-hairline-top::after {
......@@ -177,9 +176,9 @@ export default {
display: inline-block;
// width: 50%;
flex: 1;
height: px2rem(50px);
line-height: px2rem(50px);
font-size: px2rem(17px);
height: 50px;
line-height: 50px;
font-size: 17px;
text-align: center;
color: #979899;
&.v-hairline-left::after {
......
......@@ -40,43 +40,42 @@ export default {
}
}
</script>
<style lang="scss" scoped>
@import "../../style/mixin";
<style lang="less" scoped>
.item-intro-container {
padding-bottom: px2rem(20px);
margin: px2rem(30px) px2rem(15px) 0px;
border-bottom: px2rem(1px) solid #E7E8E9;
padding-bottom: 20px;
margin: 30px 15px 0px;
border-bottom: 1px solid #E7E8E9;
.basic-title {
font-size: px2rem(18px);
line-height: px2rem(18px);
font-size: 18px;
line-height: 18px;
color: #373839;
font-weight: 700;
}
.content {
position: relative;
margin-top: px2rem(16px);
margin-top: 16px;
.text {
font-size: px2rem(14px);
line-height: px2rem(21px);
font-size: 14px;
line-height: 21px;
color: #676869;
}
.desc {
// position: absolute;
// right: 0;
// bottom: px2rem(1px);
// bottom: 1px;
text-align: right;
background: #fff;
line-height: px2rem(14px);
line-height: 14px;
z-index: 99;
span {
font-size: px2rem(14px);
line-height: px2rem(14px);
font-size: 14px;
line-height: 14px;
color: #449284;
}
img {
width: px2rem(12px);
width: 12px;
}
}
}
}
</style>
\ No newline at end of file
</style>
......@@ -53,58 +53,60 @@ export default {
}
};
</script>
<style lang="scss" scoped>
@import "../../style/mixin";
<style lang="less" scoped>
.item-leader-container {
padding-bottom: px2rem(20px);
margin: px2rem(30px) px2rem(15px) 0px;
border-bottom: px2rem(1px) solid #e7e8e9;
padding-bottom: 20px;
margin: 30px 15px 0px;
border-bottom: 1px solid #e7e8e9;
.basic-title {
font-size: px2rem(18px);
line-height: px2rem(18px);
font-size: 18px;
line-height: 18px;
color: #373839;
font-weight: 700;
}
.leader-info {
display: flex;
flex-direction: row;
margin-top: px2rem(16px);
margin-top: 16px;
img {
display: inline-block;
width: px2rem(44px);
height: px2rem(44px);
width: 44px;
height: 44px;
border-radius: 50%;
}
.leader-text {
margin-left: px2rem(16px);
margin-top: px2rem(6px);
flex: 1;
width: 100px;
margin-left: 16px;
margin-top: 6px;
.leader-con {
line-height: px2rem(14px);
line-height: 14px;
display: flex;
flex-direction: row;
white-space: nowrap;
span {
font-size: px2rem(16px);
font-size: 16px;
color: #676869;
}
span:first-child {
font-size: px2rem(16px);
font-size: 16px;
color: #373839;
font-weight: 700;
}
.leader-title {
width: px2rem(220px);
width: 220px;
overflow : hidden;
text-overflow: ellipsis;
white-space:nowrap;
line-height: px2rem(16px);
margin-left: px2rem(10px);
line-height: 16px;
margin-left: 10px;
}
}
.address {
margin-top: px2rem(5px);
font-size: px2rem(13px);
margin-top: 5px;
font-size: 13px;
color: #979899;
width: px2rem(240px);
width: 240px;
overflow : hidden;
text-overflow: ellipsis;
white-space:nowrap;
......@@ -113,28 +115,28 @@ export default {
}
.content {
position: relative;
margin-top: px2rem(16px);
margin-top: 16px;
.text {
font-size: px2rem(14px);
line-height: px2rem(21px);
font-size: 14px;
line-height: 21px;
color: #676869;
}
.desc {
// position: absolute;
// right: 0;
// bottom: px2rem(1px);
// bottom: 1px;
text-align: right;
background: #fff;
line-height: px2rem(14px);
line-height: 14px;
z-index: 99;
span {
font-size: px2rem(14px);
font-size: 14px;
color: #449284;
}
img {
width: px2rem(12px);
width: 12px;
}
}
}
}
</style>
\ No newline at end of file
</style>
......@@ -16,25 +16,24 @@ export default {
}
}
</script>
<style lang="scss" scoped>
@import "../../style/mixin";
<style lang="less" scoped>
.learn-know-container {
margin: px2rem(30px) px2rem(15px) px2rem(20px);
margin: 30px 15px 20px;
.basic-title {
font-size: px2rem(18px);
line-height: px2rem(18px);
font-size: 18px;
line-height: 18px;
color: #373839;
font-weight: 700;
}
.content {
margin-top: px2rem(16px);
line-height: px2rem(21px);
margin-top: 16px;
line-height: 21px;
span {
display: inline-block;
text-align: justify;
font-size: px2rem(14px);
font-size: 14px;
color: #676869;
}
}
}
</style>
\ No newline at end of file
</style>
......@@ -23,72 +23,74 @@ export default {
},
data() {
return {
}
},
created() {
},
mounted() {
},
methods: {
}
}
</script>
<style lang="scss" scoped>
@import "../../style/mixin";
<style lang="less" scoped>
.teacter-intro-container {
margin: px2rem(30px) px2rem(15px) 0px;
margin: 30px 15px 0px;
.basic-title {
font-size: px2rem(18px);
line-height: px2rem(18px);
font-size: 18px;
line-height: 18px;
color: #373839;
font-weight: 700;
}
.leader-info {
display: flex;
flex-direction: row;
margin-top: px2rem(16px);
padding-bottom: px2rem(16px);
margin-top: 16px;
padding-bottom: 16px;
img {
display: inline-block;
width: px2rem(44px);
height: px2rem(44px);
width: 44px;
height: 44px;
border-radius: 50%;
}
.leader-text {
margin-left: px2rem(16px);
margin-top: px2rem(6px);
flex: 1;
width: 100px;
margin-left: 16px;
margin-top: 6px;
.leader-con {
line-height: px2rem(14px);
line-height: 14px;
display: flex;
flex-direction: row;
white-space: nowrap;
span {
font-size: px2rem(16px);
font-size: 16px;
color: #676869;
}
span:first-child {
font-size: px2rem(16px);
font-size: 16px;
color: #373839;
font-weight: 700;
line-height: 1.1;
}
.leader-title {
width: px2rem(220px);
width: 220px;
overflow : hidden;
text-overflow: ellipsis;
white-space:nowrap;
line-height: px2rem(16px);
margin-left: px2rem(10px);
line-height: 16px;
margin-left: 10px;
}
}
.address {
margin-top: px2rem(5px);
font-size: px2rem(13px);
margin-top: 5px;
font-size: 13px;
color: #979899;
width: px2rem(240px);
width: 240px;
overflow : hidden;
text-overflow: ellipsis;
white-space:nowrap;
......@@ -96,4 +98,4 @@ export default {
}
}
}
</style>
\ No newline at end of file
</style>
<template>
<div class="common-adert-wrapper">
<img :class="{'margin-top-20': needPadTop}" v-if="showInfo.imageUrl" @click="jumpPage" :src="showInfo.imageUrl" alt="">
<img
:class="{'margin-top-20': needPadTop}"
v-if="showInfo.imageUrl"
@click="jumpPage"
:src="showInfo.imageUrl"
alt
/>
</div>
</template>
<script>
import { EMLINK } from 'constants';
import { EMLINK } from "constants";
export default {
name: 'common-title',
name: "common-title",
data() {
return {
isWeb: window.__isWeb,
showInfo: {
imageUrl: '',
jumpUrl: ''
imageUrl: "",
jumpUrl: ""
}
};
},
......@@ -31,9 +38,9 @@ export default {
},
watch: {
advertInfoList: {
handler (list) {
handler(list) {
list.forEach(element => {
if(element.position == this.position) {
if (element.position == this.position) {
this.showInfo = element;
}
});
......@@ -42,16 +49,15 @@ export default {
}
},
created() {},
mounted() {
},
computed: {
},
mounted() {},
computed: {},
methods: {
// 广告位跳转
jumpPage() {
// if (this.isWeb) {
// window.location.href = this.showInfo.jumpUrl;
// return;
// }
let paramList = [
{
key: "pageUrl",
......@@ -59,25 +65,24 @@ export default {
type: 4,
seqNo: 1
}
]
];
rocNative.dispatchEventByModuleCode({
modeCode: "M300",
jsonString: paramList
});
});
}
}
};
</script>
<style lang="scss" scoped>
@import "../../style/mixin";
<style lang="less" scoped>
.common-adert-wrapper {
img {
width: 100%;
// padding: px2rem(10px) 0;
// height: px2rem(60px);
// padding: 10px 0;
// height: 60px;
}
.margin-top-20 {
margin-top: px2rem(20px);
margin-top: 20px;
}
}
</style>
......@@ -65,10 +65,9 @@ export default {
methods: {}
};
</script>
<style lang="scss" scoped>
@import "../../style/mixin";
<style lang="less" scoped>
.comp-title {
display: flex;
padding-left: px2rem(15px);
padding-left: 15px;
}
</style>
<template>
<CommonTcPlayer style="flex" :options="videoOptions">
</CommonTcPlayer>
</template>
<script>
......@@ -84,10 +84,9 @@ export default {
methods: {}
};
</script>
<style lang="scss" scoped>
@import "../../style/mixin";
<style lang="less" scoped>
.comp-title {
display: flex;
padding-left: px2rem(15px);
padding-left: 15px;
}
</style>
......@@ -14,7 +14,7 @@ export default {
name: "common-description",
data() {
return {
};
},
props: {
......@@ -34,7 +34,7 @@ export default {
computed: {
newStudyNum: function() {
if(this.studyNum > 1000 && this.studyNum < 10000) {
return ((Math.round((this.studyNum / 1000) * 10) / 10) + 'K');
return ((Math.round((this.studyNum / 1000) * 10) / 10) + 'K');
}else if(this.studyNum > 10000) {
return ((Math.round((this.studyNum / 10000) * 10) / 10) + 'W');
}else {
......@@ -47,22 +47,21 @@ export default {
},
methods: {
}
};
</script>
<style lang="scss" scoped>
@import "../../style/mixin";
<style lang="less" scoped>
.desc-container {
padding: px2rem(20px) px2rem(15px);
padding: 20px 15px;
.desc-title {
display: flex;
padding-bottom: 0px;
line-height: px2rem(22px);
line-height: 22px;
font-weight: 700;
span {
font-family: "PingFangSC-Medium", "PingFangSC", "Microsoft Yahei";
font-size: px2rem(18px);
font-size: 18px;
font-weight: 700;
color: #333333;
}
......@@ -71,13 +70,13 @@ export default {
display: flex;
position: relative;
word-break: normal;
// margin-bottom: px2rem(40px);
// height: px2rem(60px);
// margin-bottom: 40px;
// height: 60px;
.desc_text {
padding-top: px2rem(6px);
font-size: px2rem(13px);
padding-top: 6px;
font-size: 13px;
color: #676869;
line-height: px2rem(25px);
line-height: 25px;
letter-spacing: 1px;
word-wrap: break-word;
word-break: break-all;
......@@ -87,7 +86,7 @@ export default {
flex-wrap: wrap;
}
}
}
</style>
......@@ -17,8 +17,7 @@
</template>
<style lang="scss" scoped>
@import '../../style/mixin';
<style lang="less" scoped>
.loader {
&-mask {
position: fixed;
......@@ -31,8 +30,8 @@
}
svg {
position: fixed;
top: px2rem(280px);
left: px2rem(166px);
top: 280px;
left: 166px;
z-index: 9999;
}
}
......
......@@ -124,23 +124,22 @@ export default {
}
};
</script>
<style lang="scss" scoped>
@import "../../style/mixin";
<style lang="less" scoped>
.back {
position: absolute;
left: px2rem(8px);
top: px2rem(15px);
left: 8px;
top: 15px;
display: inline-block;
width: px2rem(50px);
height: px2rem(50px);
width: 50px;
height: 50px;
img {
padding: px2rem(10px);
width: px2rem(25px);
height: px2rem(25px);
padding: 10px;
width: 25px;
height: 25px;
}
}
.nav-top {
// height: px2rem(65px);
// height: 65px;
background: #fff;
color: #333;
position: relative;
......@@ -148,10 +147,10 @@ export default {
.nav-back {
display: inline-block;
position: absolute;
left: px2rem(16px);
left: 16px;
top: 0;
height: px2rem(25px);
width: px2rem(25px);
height: 25px;
width: 25px;
// -ms-transform: translate(180deg);
// -webkit-transform: (180deg);
// transform: rotate(180deg);
......@@ -172,33 +171,33 @@ export default {
}
.nav-share {
position: absolute;
right: px2rem(16px);
right: 16px;
top: 0;
height: px2rem(25px);
width: px2rem(25px);
height: 25px;
width: 25px;
}
.nav-title {
position: relative;
top: px2rem(10px);
top: 10px;
left: 0;
display: inline-block;
width: 100%;
/* padding:0 px2rem(33px);*/
height: px2rem(36px);
/* padding:0 33px;*/
height: 36px;
&-title {
height: px2rem(18px);
font-size: px2rem(18px);
height: 18px;
font-size: 18px;
font-weight: 500;
color: rgba(51, 51, 51, 1);
line-height: px2rem(26px);
line-height: 26px;
}
}
.nav-part {
width: 100%;
font-size: px2rem(18px);
font-size: 18px;
text-align: center;
padding: 0 0 px2rem(10px) 0;
/* height: px2rem(25px);*/
padding: 0 0 10px 0;
/* height: 25px;*/
}
}
......@@ -207,6 +206,6 @@ export default {
top: 0;
left: 0;
border-bottom: 1px solid #e7e7e7;
/* height: px2rem(25px);*/
/* height: 25px;*/
}
</style>
\ No newline at end of file
</style>
<template>
<section :class="isFixNavbar ? 'nav-top fixed' : 'nav-top'" :style="'height:' + navHeight">
<!-- <section v-if="isWeb" :class="isFixNavbar ? 'nav-top fixed' : 'nav-top'"> -->
<section v-if="!isWeb" :class="isFixNavbar ? 'nav-top fixed' : 'nav-top'" :style="'height:' + navHeight">
<div
class="nav-part"
:style="'background:' + bgColor + ';'
......@@ -10,8 +9,6 @@
<span class="nav-back" @click="goBack">
<img v-show="isBlack" src="../../images/left-array-black.png" alt="">
<img v-show="!isBlack" src="../../images/left-array-whiter.png" alt="">
<!-- <img src="https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/left-icon.png"> -->
<!-- <img class="nav-back" src="../../images//grey-throw.png"/> -->
</span>
<span class="nav-title-title" v-show="bgColor!=='none'">{{title}}</span>
<span v-if="isShowShare" class="nav-share" @click="goShare">
......@@ -25,6 +22,8 @@
</section>
</template>
<script>
import { getWebPageUrl } from "@/utils/index";
import { mapGetters } from 'vuex';
export default {
name: "common-navbar",
data() {
......@@ -35,7 +34,8 @@ export default {
fontSize: 37.5,
content: "",
shareImageUrl:
"https://file.yunqueyi.com/logo.png?version=" + new Date().getTime()
"https://file.yunqueyi.com/logo.png?version=" + new Date().getTime(),
shareUrl: ''
};
},
props: {
......@@ -79,15 +79,18 @@ export default {
shareTitleInfo: {
type: String,
default: ""
},
projectId: {
type: String,
default: ""
},
limitTimes: {
type: String | Number,
default: 0
}
},
computed: {
// bgColor2() {
// return this.bgColor
// },
// borderStyle() {
// return this.bgColor === 'no{ne' ? '0px solid #e7e7e7' : '1px solid #e7e7e7'
// },
...mapGetters(["userInfo"]),
navHeight() {
if (this.isFixNavbar) {
return 0;
......@@ -108,28 +111,51 @@ export default {
methods: {
//返回
goBack() {
// if (this.burialPoint == "activity") {
// this.pageBurialPoin(this.objPoint);
// }
// if (this.backMethod === "inner" || window.__isWeb) {
// this.$router.back(-1);
// } else {
// rocNative.goBack();
// }
rocNative.goBack();
},
//分享
// 生成分享的url
goShare() {
let url = location.href,
_this = this;
let _this = this;
let videoUrl = this.$route.query.videoUrl || '';
let info = "";
if(videoUrl) {
info = JSON.stringify({
projectId: this.projectId,
videoUrl: videoUrl,
limitTimes: this.limitTimes || 0
})
} else {
info = JSON.stringify({
projectId: this.projectId,
})
}
let param = {
channel: 1, // 分享渠道 1:APP
info: info,
type: 3, // 业务类型 1:教培项目 2:继教项目 3:职称考项目
token: _this.userInfo.userToken,
setEntry: true
};
_this.NEW_POST("portal/shareParam/save", param).then(res => {
if (res.code == "000000") {
let url = getWebPageUrl(`profexam/#/sharecoop?uuid=${res.data}`);
_this.shareUrl = url;
_this.goShareAction();
}
}).catch( e => {
console.error(e);;
});
},
//分享
goShareAction() {
// let url = location.href,
let _this = this;
rocNative.shareWechat({
// url: url,
// title: '_this.title',
// content: '_this.content',
// shareImageUrl: '_this.shareImageUrl'
type: 6,
shareId: 0,
shareUrl: url,
shareUrl: _this.shareUrl,
title1: _this.shareTitle,
title2: _this.shareTitleInfo,
shareImageUrl: "https://file.yunqueyi.com/logo.png?version=" + new Date().getTime()
......@@ -138,23 +164,22 @@ export default {
}
};
</script>
<style lang="scss" scoped>
@import "../../style/mixin";
<style lang="less" scoped>
.back {
position: absolute;
left: px2rem(px);
top: px2rem(15px);
left: px;
top: 15px;
display: inline-block;
width: px2rem(50px);
height: px2rem(50px);
width: 50px;
height: 50px;
img {
padding: px2rem(10px);
width: px2rem(25px);
height: px2rem(25px);
padding: 10px;
width: 25px;
height: 25px;
}
}
.nav-top {
// height: px2rem(65px);
// height: 65px;
background: #fff;
color: #333;
position: relative;
......@@ -162,15 +187,12 @@ export default {
.nav-back {
display: inline-block;
position: absolute;
left: px2rem(0px);
left: 0px;
top: 0;
height: px2rem(25px);
width: px2rem(55px);
padding-left: px2rem(15px);
padding-right: px2rem(15px);
// -ms-transform: translate(180deg);
// -webkit-transform: (180deg);
// transform: rotate(180deg);
height: 25px;
width: 55px;
padding-left: 15px;
padding-right: 15px;
}
img {
display: block;
......@@ -188,33 +210,33 @@ export default {
}
.nav-share {
position: absolute;
right: px2rem(16px);
right: 16px;
top: 0;
height: px2rem(25px);
width: px2rem(25px);
height: 25px;
width: 25px;
}
.nav-title {
position: relative;
top: px2rem(10px);
top: 10px;
left: 0;
display: inline-block;
width: 100%;
/* padding:0 px2rem(33px);*/
height: px2rem(36px);
/* padding:0 33px;*/
height: 36px;
&-title {
height: px2rem(18px);
font-size: px2rem(18px);
height: 18px;
font-size: 18px;
font-weight: 700;
color: rgba(51, 51, 51, 1);
line-height: px2rem(26px);
line-height: 26px;
}
}
.nav-part {
width: 100%;
font-size: px2rem(18px);
font-size: 18px;
text-align: center;
padding: 0 0 px2rem(10px) 0;
/* height: px2rem(25px);*/
padding: 0 0 10px 0;
/* height: 25px;*/
}
}
......@@ -223,6 +245,6 @@ export default {
top: 0;
left: 0;
border-bottom: 1px solid #e7e7e7;
/* height: px2rem(25px);*/
/* height: 25px;*/
}
</style>
\ No newline at end of file
</style>
......@@ -23,8 +23,7 @@ export default {
methods: {}
};
</script>
<style lang="scss" scoped>
@import "../../style/mixin";
<style lang="less" scoped>
.split-line {
display: flex;
}
......
......@@ -124,11 +124,10 @@ export default {
};
</script>
<style lang="scss" scoped>
@import "../../style/mixin";
<style lang="less" scoped>
.banner-img {
// display: inherit;
width: px2rem(375px);
height: px2rem(210px);
width: 375px;
height: 210px;
}
</style>
\ No newline at end of file
</style>
......@@ -63,12 +63,11 @@ export default {
...this.options
};
options.width = htmlWidth;
const tcPlayer = new TcPlayer(this.id, options);
tcPlayer.video.on('timeupdate', (event) => {
let ct = tcPlayer.currentTime();
console.log('视频播放时长S => ', ct);
// console.log('视频播放时长S => ', ct);
if (options.trySeeTime && ct >= options.trySeeTime) {
tcPlayer.currentTime(0);
tcPlayer.pause();
......@@ -136,11 +135,10 @@ export default {
};
</script>
<style lang="scss" scoped>
@import "../../style/mixin";
<style lang="less" scoped>
.banner-img {
// display: inherit;
width: px2rem(375px);
height: px2rem(210px);
width: 375px;
height: 210px;
}
</style>
\ No newline at end of file
</style>
......@@ -109,10 +109,9 @@ export default {
}
};
</script>
<style lang="scss" scoped>
@import "../../style/mixin";
<style lang="less" scoped>
.comp-title-container {
padding-left: px2rem(15px);
padding-left: 15px;
display: flex;
flex-direction: row;
justify-content: space-between;
......@@ -127,39 +126,39 @@ export default {
display: flex;
flex-direction: row;
align-items: center;
margin-right: px2rem(15px);
margin-right: 15px;
span {
font-size: px2rem(14px);
font-size: 14px;
font-weight: 400;
color: rgba(40, 52, 76, 0.4);
}
img {
width: px2rem(15px);
height: px2rem(16px);
width: 15px;
height: 16px;
}
}
&-explain {
display: flex;
flex-direction: row;
align-items: center;
margin-right: px2rem(15px);
margin-right: 15px;
span {
font-size: px2rem(14px);
font-size: 14px;
font-weight: 400;
color: rgba(40, 52, 76, 0.4);
margin-right: px2rem(3px);
line-height: px2rem(14px);
margin-right: 3px;
line-height: 14px;
}
img {
width: px2rem(8px);
height: px2rem(14px);
width: 8px;
height: 14px;
}
}
}
.banner-img {
width: px2rem(70px);
height: px2rem(20px);
padding-top: px2rem(2px);
width: 70px;
height: 20px;
padding-top: 2px;
}
</style>
......@@ -26,8 +26,7 @@ export default {
},
};
</script>
<style lang="scss" scoped>
@import "../../style/mixin";
<style lang="less" scoped>
.loader {
&-mask {
position: fixed;
......@@ -43,10 +42,10 @@ export default {
width: 100%;
left: 0;
z-index: 301;
bottom: px2rem(30px);
bottom: 30px;
text-align: center;
span {
padding: px2rem(2px) px2rem(10px);
padding: 2px 10px;
background: #eee;
}
}
......
......@@ -67,10 +67,9 @@ export default {
methods: {}
};
</script>
<style lang="scss" scoped>
@import "../../style/mixin";
<style lang="less" scoped>
.comp-title {
display: flex;
padding-left: px2rem(15px);
padding-left: 15px;
}
</style>
<template>
<div class="brief-intro-wrapper">
<TeacherIntro :doctorList="doctorList"></TeacherIntro>
<CourseIntro :intro="intro"></CourseIntro>
<CourseHarvest :harvest="harvest"></CourseHarvest>
</div>
</template>
<script>
import TeacherIntro from "@/components/course/course-teacher";
import CourseIntro from "@/components/course/course-intro";
import CourseHarvest from "@/components/course/course-harvest";
export default {
components: {
TeacherIntro,
CourseIntro,
CourseHarvest,
},
props: {
doctorList: {
type: Array,
default() {
return [];
}
},
intro: {
type: String,
default: "",
},
harvest: {
type: Array,
default() {
return [];
}
}
},
};
</script>
<style lang="less" scoped>
.brief-intro-wrapper {
padding-bottom: 20px;
}
</style>
<template>
<section>
<div class="common-error-tips-wrapper">
<img src="../../images/course/danger.png" alt="">
<span>{{errorMsg}}</span>
</div>
<CommonBottomInfo></CommonBottomInfo>
</section>
</template>
<script>
import CommonBottomInfo from "@/components/cme/common-bottom-info";
export default {
components: {
CommonBottomInfo
},
props: {
errorMsg: {
type: String,
default: '此课程已下架无法查看'
}
}
}
</script>
<style lang="less">
.common-error-tips-wrapper {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 120px;
img {
width: 40px;
height: 40px;
}
span {
display: inline-block;
margin-top: 15px;
font-size: 16px;
line-height: 16px;
font-weight: 700;
color: #111A34;
}
}
</style>
<template>
<span class="common-title-wrapper">{{title}}</span>
</template>
<script>
export default {
props: {
title: {
type: String,
default: "课程简介"
}
}
}
</script>
<style lang="less" scoped>
.common-title-wrapper {
display: inline-block;
height: 18px;
line-height: 18px;
margin: 30px 15px 15px;
font-size: 18px;
font-weight: 700;
color: #373839;
}
</style>
<template>
<span class="course-button-wrapper button-default" :class="type" @click="btnClick">{{btnText}}</span>
</template>
<script>
export default {
props: {
btnText: {
type: String,
default: "去云鹊医App"
},
type: {
type: String,
default: "primary"
}
},
data() {
return {};
},
methods: {
btnClick() {
if (this.type == "disabled") return;
this.$emit("btnClick");
}
}
};
</script>
<style lang="less" scoped>
.course-button-wrapper {
display: inline-block;
text-align: center;
margin: 0 5px;
&.button-default {
display: inline-block;
padding: 0 16px;
text-align: center;
height: 30px;
line-height: 30px;
// width: 100%;
border-radius: 15px;
font-size: 12px;
font-weight: 700;
color: #ffffff;
background: #449284;
}
&.primary {
color: #ffffff;
background: #449284;
}
&.plain {
color: #ffffff;
background: none;
border: 1px solid rgba(255, 255, 255, 1);
}
&.disabled {
color: rgba(255, 255, 255, 0.95);
background: rgba(68, 146, 132, 0.4);
}
}
</style>
<template>
<div class="course-catalog">
<div class="chapter-box" v-for="(chapter, index) in list" :key="index">
<div class="head">
<div class="name ellipsis">{{ chapter.chapterNameText }}</div>
<div class="total" @click="onToggle(index)">
{{ chapter.lectureNum }}
<img class="arrow" :class="{'arrow-active': chapter.showAll}" src="~@/images/course/arrow_down.png" />
</div>
</div>
<div class="lecture-box" v-show="chapter.showAll">
<div class="item"
:class="{'item-active': curtId === lecture.lectureId}"
v-for="lecture in chapter.lectures"
:key="lecture.lectureId"
@click="onSelect(lecture, 1)">
<img class="icon" src="~@/images/course/icon_play.png" />
<div class="info-box line">
<div class="info">
<p class="subname ellipsis">{{ lecture.lectureNameText }}</p>
<p class="time">
时长: {{ lecture.totalTimeText }}
<span>{{ lecture.statusText }}</span>
</p>
</div>
<div class="btn" v-if="lecture.btnText">{{ lecture.btnText }}</div>
<img v-else class="lock" src="~@/images/course/lock.png" alt="" />
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
list: {
type: Array,
default() {
return []
}
},
curtId: {
type: Number,
default: 0,
},
onToggle: {
type: Function
},
onSelect: {
type: Function
}
},
};
</script>
<style lang="less" scoped>
.course-catalog{
.chapter-box{
position: relative;
padding: 0 15px;
&::after{
position: absolute;
content: "";
left: 0;
bottom: 0;
width: 200%;
height: 0;
transform: scale(0.5);
transform-origin: left center;
border-bottom: 1px solid #E7E8E9;
}
.head{
display: flex;
height: 50px;
line-height: 50px;
}
.name{
flex: 1;
width: 100px;
font-size: 15px;
}
.total{
position: relative;
color: #A1A2A3;
font-size: 14px;
padding-right: 15px;
}
.arrow{
position: absolute;
right: 0;
top: 19px;
width: 12px;
height: 12px;
transition: all 0.3s;
}
.arrow-active{
transform: rotate(180deg);
}
}
.lecture-box{
.item{
position: relative;
padding: 15px 0 0 25px;
}
.item-active{
.subname, .time{
color: #449284;
}
}
.icon{
position: absolute;
left: 0;
top: 20px;
width: 12px;
}
.info-box{
position: relative;
display: flex;
align-items: center;
padding-bottom: 15px;
}
.info{
position: relative;
flex: 1;
width: 100px;
padding-right: 5px;
}
.line{
&::after{
position: absolute;
content: "";
left: 0;
bottom: 0;
width: 200%;
height: 0;
transform: scale(0.5);
transform-origin: left center;
border-bottom: 1px solid #E7E8E9;
}
}
.btn{
position: relative;
width: 60px;
height: 26px;
line-height: 26px;
color: #449284;
font-size: 12px;
text-align: center;
&::after{
position: absolute;
content: "";
left: -1px;
top: -1px;
width: 200%;
height: 200%;
border: 1px solid #449284;
transform: scale(0.5);
transform-origin: left top;
border-radius: 26px;
}
}
.lock{
display: block;
width: 16px;
margin: 0 22px;
}
.subname{
color: #676869;
font-size: 15px;
}
.time{
color: #A3A3A3;
font-size: 12px;
margin-top: 8px;
}
}
}
</style>
<template>
<div class="course-comment">
<div class="item" v-for="(item, index) in comments" :key="index">
<img class="img" :src="item.imageUrl || 'https://file.yunqueyi.com/File/doctor_default.png'" alt="头像" @error="onAvatarError" />
<div class="info-box">
<div class="info-user">
<div class="name">{{ item.doctorName }}</div>
<div class="date">{{ item.createTime }}</div>
</div>
<div class="message">{{ item.message }}</div>
<div class="reply-box" v-if="item.len">
<div class="reply-item" v-for="child in item.cList" :key="child.qaId">
<div class="reply-user">
<div class="name">{{ child.doctorName }}</div>
<div class="date">{{ child.createTime }}</div>
</div>
<div class="message">{{ child.message }}</div>
</div>
<div class="show-all" v-if="item.len > 2" @click="spreadAll(index)">
{{ item.showAll ? '收起回复' : `查看全部${item.len}条回复` }}
<img class="show-arrow" :class="{'show-arrow-up': item.showAll}" src="~@/images/course/arrow_down.png" alt="箭头" />
</div>
</div>
</div>
</div>
<div class="go-app" @click="download">
<span>打开App,查看更多讨论内容</span>
</div>
</div>
</template>
<script>
export default {
props: {
list: {
type: Array,
default() {
return []
}
},
download: {
type: Function
}
},
data() {
return {
comments: []
};
},
watch: {
list(val) {
this.dealList(val);
}
},
mounted() {
this.dealList(this.list);
},
methods: {
dealList(list) {
this.comments = list.map(item => {
const aList = item.aList || [];
return {
...item,
aList,
len: aList.length,
cList: aList.slice(0, 2),
showAll: false,
}
})
},
spreadAll(index) {
const { ...item } = this.comments[index];
if (item.showAll) {
item.showAll = false;
item.cList = item.aList.slice(0, 2);
} else {
item.showAll = true;
item.cList = item.aList;
}
this.comments.splice(index, 1, item);
},
}
};
</script>
<style lang="less" scoped>
.course-comment {
padding: 0 15px;
.item{
position: relative;
display: flex;
font-size: 14px;
padding: 20px 0;
&::after{
position: absolute;
content: "";
left: 0;
bottom: 0;
width: 200%;
height: 0;
transform: scale(0.5);
transform-origin: left center;
border-bottom: 1px solid #F0F0F0;
}
}
.img{
display: block;
width: 32px;
height: 32px;
margin-right: 10px;
}
.info-box{
flex: 1;
width: 100px;
}
.info-user, .reply-user{
display: flex;
padding-bottom: 10px;
.name{
color: #676869;
flex: 1;
width: 80px;
}
.date{
color: #979899;
font-size: 12px;
}
}
.message{
line-height: 22px;
text-align: justify;
word-break: break-all;
}
.reply-box{
margin-top: 15px;
padding: 12px 12px 0;
background-color: #F8F9FA;
}
.reply-item{
padding-bottom: 20px;
}
.show-all{
position: relative;
color: #676869;
text-align: right;
font-size: 12px;
padding: 10px 18px 20px 0;
}
.show-arrow{
position: absolute;
right: 0;
top: 12px;
width: 12px;
height: 12px;
transition: all 0.3s;
}
.show-arrow-up{
transform: rotate(180deg);
}
.go-app{
color: #449284;
font-size: 14px;
line-height: 16px;
text-align: center;
padding: 20px 0;
span{
display: inline-block;
padding-right: 20px;
background: url('~@/images/course/array-right.png') no-repeat right center;
background-size: 14px auto;
}
}
}
</style>
<template>
<div class="course-covers-wrapper">
<div class="tips" v-html="coverTips"></div>
<div v-if="isShowBtn" class="course-button-group">
<CourseButton v-if="!isSingle" type="plain" @btnClick="btnClick(1)" :btnText="leftBtnText"></CourseButton>
<CourseButton @btnClick="btnClick(2)" :btnText="rightBtnText"></CourseButton>
</div>
</div>
</template>
<script>
import CourseButton from "@/components/course/course-button";
export default {
components: {
CourseButton
},
props: {
coverTips: {
type: String,
default: "上次观看至7分钟,正在续播"
},
isShowBtn: {
type: Boolean,
default: true
},
isSingle: {
type: Boolean,
default: false
},
leftBtnText: {
type: String,
default: "学习下一节"
},
rightBtnText: {
type: String,
default: "去云鹊医App"
}
},
data() {
return {};
},
methods: {
btnClick(index) {
this.$emit("btnClick", index);
}
}
};
</script>
<style lang="less" scoped>
.course-covers-wrapper {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
// background: rgba(0, 0, 0, 0.8);
justify-content: center;
align-content: center;
.tips {
display: inline-block;
margin-bottom: 15px;
color: #fff;
text-align: center;
font-size: 15px;
}
.course-button-group {
display: flex;
align-items: center;
justify-content:center;
}
}
</style>
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册