提交 9450065b 编写于 作者: guangjun.yang's avatar guangjun.yang

从教培前端项目(专项合作)中创建的CME项目

上级
{
"presets": ["env", "es2015", "stage-2"],
"plugins": [
"add-module-exports",
"transform-runtime",
],
"comments": false,
}
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
node_modules
dist/index.js
dist/authUseful.js
dist/stroke.js
dist/
/yqy/
node_modules/
.DS_Store
.vscode
此差异已折叠。
基于dev-app-home-plugin-1115的改版的
Branch_tag-lecturer-rev-all-0115
\ No newline at end of file
// https://github.com/shelljs/shelljs
require('shelljs/global')
env.NODE_ENV = 'production'
var path = require('path')
var config = require('../config')
var ora = require('ora')
var webpack = require('webpack')
var webpackConfig = require('./webpack.prod.conf')
var spinner = ora('building for production...')
spinner.start()
var assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory)
rm('-rf', assetsPath)
mkdir('-p', assetsPath)
cp('-R', 'static/*', assetsPath)
webpack(webpackConfig, function(err, stats) {
spinner.stop()
if (err) throw err
process.stdout.write(stats.toString({
colors: true,
modules: false,
children: false,
chunks: false,
chunkModules: false
}) + '\n')
})
\ No newline at end of file
/* eslint-disable */
require('eventsource-polyfill')
var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')
hotClient.subscribe(function(event) {
if (event.action === 'reload') {
window.location.reload()
}
})
\ No newline at end of file
var config = require('../config')
if (!process.env.NODE_ENV) process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
var path = require('path')
var express = require('express')
var webpack = require('webpack')
var opn = require('opn')
var proxyMiddleware = require('http-proxy-middleware')
var webpackConfig = require('./webpack.dev.conf')
// default port where dev server listens for incoming traffic
var port = process.env.PORT || config.dev.port
// Define HTTP proxies to your custom API backend
// https://github.com/chimurai/http-proxy-middleware
var server = express()
var compiler = webpack(webpackConfig)
var devMiddleware = require('webpack-dev-middleware')(compiler, {
publicPath: webpackConfig.output.publicPath,
stats: {
colors: true,
chunks: false
}
})
var hotMiddleware = require('webpack-hot-middleware')(compiler)
// force page reload when html-webpack-plugin template changes
compiler.plugin('compilation', function(compilation) {
compilation.plugin('html-webpack-plugin-after-emit', function(data, cb) {
hotMiddleware.publish({
action: 'reload'
})
cb()
})
})
var context = config.dev.context
switch(process.env.NODE_ENV){
case 'local': var proxypath = 'http://localhost:8001'; break;
case 'online': var proxypath = 'http://yqy.cangdu.org'; break;
default: var proxypath = config.dev.proxypath;
}
var options = {
target: proxypath,
changeOrigin: true,
}
if (context.length) {
server.use(proxyMiddleware(context, options))
}
// handle fallback for HTML5 history API
server.use(require('connect-history-api-fallback')())
// serve webpack bundle output
server.use(devMiddleware)
// enable hot-reload and state-preserving
// compilation error display
server.use(hotMiddleware)
// serve pure static assets
var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
server.use(staticPath, express.static('./static'))
module.exports = server.listen(port, function(err) {
if (err) {
console.log(err)
return
}
var uri = 'http://localhost:' + port
console.log('Listening at ' + uri + '\n')
// when env is testing, don't need open it
if (process.env.NODE_ENV !== 'testing') {
opn(uri)
}
})
var path = require('path')
var config = require('../config')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
exports.assetsPath = function(_path) {
var assetsSubDirectory = process.env.NODE_ENV === 'production' ? config.build.assetsSubDirectory : config.dev.assetsSubDirectory
return path.posix.join(assetsSubDirectory, _path)
}
exports.cssLoaders = function(options) {
options = options || {}
// generate loader string to be used with extract text plugin
function generateLoaders(loaders) {
var sourceLoader = loaders.map(function(loader) {
var extraParamChar
if (/\?/.test(loader)) {
loader = loader.replace(/\?/, '-loader?')
extraParamChar = '&'
} else {
loader = loader + '-loader'
extraParamChar = '?'
}
return loader + (options.sourceMap ? extraParamChar + 'sourceMap' : '')
}).join('!')
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract('vue-style-loader', sourceLoader)
} else {
return ['vue-style-loader', sourceLoader].join('!')
}
}
// http://vuejs.github.io/vue-loader/en/configurations/extract-css.html
return {
css: generateLoaders(['css']),
postcss: generateLoaders(['css']),
less: generateLoaders(['css', 'less']),
sass: generateLoaders(['css', 'sass?indentedSyntax']),
scss: generateLoaders(['css', 'sass']),
stylus: generateLoaders(['css', 'stylus']),
styl: generateLoaders(['css', 'stylus'])
}
}
// Generate loaders for standalone style files (outside of .vue)
exports.styleLoaders = function(options) {
var output = []
var loaders = exports.cssLoaders(options)
for (var extension in loaders) {
var loader = loaders[extension]
output.push({
test: new RegExp('\\.' + extension + '$'),
loader: loader
})
}
return output
}
\ No newline at end of file
var path = require('path')
var config = require('../config')
var utils = require('./utils')
var projectRoot = path.resolve(__dirname, '../')
var env = process.env.NODE_ENV
// check env & config/index.js to decide weither to enable CSS Sourcemaps for the
// various preprocessor loaders added to vue-loader at the end of this file
var cssSourceMapDev = (env === 'development' && config.dev.cssSourceMap)
var cssSourceMapProd = (env === 'production' && config.build.productionSourceMap)
var useCssSourceMap = cssSourceMapDev || cssSourceMapProd
module.exports = {
entry: {
app: './src/main.js'
},
output: {
path: config.build.assetsRoot,
publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath,
filename: '[name].js'
},
resolve: {
extensions: ['', '.js', '.vue', '.less', '.css', '.scss'],
fallback: [path.join(__dirname, '../node_modules')],
alias: {
'vue$': 'vue/dist/vue.common.js',
'src': path.resolve(__dirname, '../src'),
'assets': path.resolve(__dirname, '../src/assets'),
'components': path.resolve(__dirname, '../src/components'),
'@': path.resolve('src')
}
},
resolveLoader: {
fallback: [path.join(__dirname, '../node_modules')]
},
module: {
loaders: [{
test: /\.vue$/,
loader: 'vue'
}, {
test: /\.js$/,
loader: 'babel',
include: projectRoot,
exclude: /node_modules/
}, {
test: /\.json$/,
loader: 'json'
}, {
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url',
query: {
limit: 10000,
name: utils.assetsPath('img/[name].[ext]')
}
}, {
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url',
query: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}]
},
vue: {
loaders: utils.cssLoaders({
sourceMap: useCssSourceMap
}),
postcss: [
require('autoprefixer')({
browsers: ['last 10 versions']
})
]
}
}
\ No newline at end of file
var config = require('../config')
var webpack = require('webpack')
var merge = require('webpack-merge')
var utils = require('./utils')
var baseWebpackConfig = require('./webpack.base.conf')
var HtmlWebpackPlugin = require('html-webpack-plugin')
// add hot-reload related code to entry chunks
Object.keys(baseWebpackConfig.entry).forEach(function(name) {
baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
})
module.exports = merge(baseWebpackConfig, {
module: {
loaders: utils.styleLoaders({
sourceMap: config.dev.cssSourceMap
})
},
// eval-source-map is faster for development
devtool: 'source-map',
plugins: [
new webpack.DefinePlugin({
'process.env': config.dev.env
}),
// https://github.com/glenjamin/webpack-hot-middleware#installation--usage
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
// https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
favicon: 'favicon.ico',
inject: true
})
]
})
\ No newline at end of file
var path = require('path')
var config = require('../config')
var utils = require('./utils')
var webpack = require('webpack')
var merge = require('webpack-merge')
var baseWebpackConfig = require('./webpack.base.conf')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var env = config.build.env
console.log('@@@@@@@@@@@@@@@@@@@', env)
var webpackConfig = merge(baseWebpackConfig, {
module: {
loaders: utils.styleLoaders({
sourceMap: config.build.productionSourceMap,
extract: true
})
},
//devtool: config.build.productionSourceMap ? '#source-map' : false,
output: {
path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[hash:8].js'),
chunkFilename: utils.assetsPath('js/[name].[hash:8].min.js')
},
vue: {
loaders: utils.cssLoaders({
sourceMap: config.build.productionSourceMap,
extract: true
})
},
plugins: [
// http://vuejs.github.io/vue-loader/en/workflow/production.html
new webpack.DefinePlugin({
'process.env': env
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
}),
new webpack.optimize.OccurrenceOrderPlugin(),
// extract css into its own file
new ExtractTextPlugin(utils.assetsPath('css/[name].[hash:8].css')),
// generate dist index.html with correct asset hash for caching.
// you can customize output by editing /index.html
// see https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: config.build.index,
template: 'index.html',
inject: true,
// minify: {
// removeComments: true,
// collapseWhitespace: true,
// removeAttributeQuotes: true
// // more options:
// // https://github.com/kangax/html-minifier#options-quick-reference
// },
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
chunksSortMode: 'dependency'
}),
// split vendor js into its own file
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: function(module, count) {
// any required modules inside node_modules are extracted to vendor
return (
module.resource &&
/\.js$/.test(module.resource) &&
module.resource.indexOf(
path.join(__dirname, '../node_modules')
) === 0
)
}
}),
// extract webpack runtime and module manifest to its own file in order to
// prevent vendor hash from being updated whenever app bundle is updated
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
chunks: ['vendor']
})
]
})
if (config.build.productionGzip) {
var CompressionWebpackPlugin = require('compression-webpack-plugin')
webpackConfig.plugins.push(
new CompressionWebpackPlugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp(
'\\.(' +
config.build.productionGzipExtensions.join('|') +
')$'
),
threshold: 10240,
minRatio: 0.8
})
)
}
module.exports = webpackConfig
\ No newline at end of file
// see http://vuejs-templates.github.io/webpack for documentation.
var path = require('path')
module.exports = {
build: {
env: {
NODE_ENV: '"production"',
BUILD_ENV: '"' + process.env.BUILD_ENV + '"'
},
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: './static',
assetsPublicPath: './',
productionSourceMap: false,
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css']
},
dev: {
env: {
NODE_ENV: '"development"',
BUILD_ENV: '"' + process.env.BUILD_ENV + '"'
},
port: 8009,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
// proxyTable: {
// '/': {
// target: 'http://test1-sc.yunqueyi.com/',
// changeOrigin: true
// }
// },
context: [ //代理路径
'/test'
],
proxypath: 'http://localhost:9000',
cssSourceMap: true
}
}
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
<meta name="screen-orientation" content="portrait"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<meta name="full-screen" content="yes">
<meta name="x5-fullscreen" content="true">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<title>云鹊·医</title>
</head>
<body id="appBody">
<div id="app">
<router-view></router-view>
</div>
</body>
</html>
此差异已折叠。
{
"name": "yqy",
"version": "2.0.1",
"description": "vue2-yqy",
"author": "cangdu <1264889788@qq.com>",
"private": true,
"license": "GPL",
"scripts": {
"dev": "cross-env BUILD_ENV=development node build/dev-server.js",
"local": "cross-env BUILD_ENV=development node build/dev-server.js",
"build": "node build/build.js",
"build:dev": "cross-env BUILD_ENV=dev node build/build.js",
"build:test": "cross-env BUILD_ENV=test node build/build.js",
"build:uat": "cross-env BUILD_ENV=uat node build/build.js",
"build:pro": "cross-env BUILD_ENV=pro node build/build.js"
},
"dependencies": {
"@babel/polyfill": "^7.2.5",
"axios": "0.16.2",
"better-scroll": "^0.1.15",
"echarts": "^4.2.0-rc.2",
"fastclick": "^1.0.6",
"img-vuer": "^0.17.2",
"iscroll": "^5.2.0",
"js-cookie": "^2.2.0",
"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"
},
"devDependencies": {
"autoprefixer": "^6.4.0",
"autoprefixer-loader": "^3.2.0",
"babel-core": "^6.0.0",
"babel-loader": "^6.0.0",
"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",
"css-loader": "^0.25.0",
"eventsource-polyfill": "^0.9.6",
"express": "^4.13.3",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.9.0",
"function-bind": "^1.0.2",
"html-webpack-plugin": "^2.8.1",
"http-proxy-middleware": "^0.17.2",
"json-loader": "^0.5.4",
"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",
"semver": "^5.3.0",
"shelljs": "^0.7.4",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"vue-lazyload": "^1.2.6",
"vue-loader": "^10.0.0",
"vue-style-loader": "^1.0.0",
"vue-tcplayer": "^0.1.0",
"vue-template-compiler": "^2.1.0",
"webpack": "^1.13.2",
"webpack-dev-middleware": "^1.8.3",
"webpack-dev-server": "^1.16.2",
"webpack-hot-middleware": "^2.12.2",
"webpack-merge": "^0.14.1"
},
"engines": {
"node": ">= 4.0.0",
"npm": ">= 3.0.0"
}
}
<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/mixin';
@import './style/common';
@import './style/global';
.router-fade-enter-active, .router-fade-leave-active {
transition: opacity .1s;
}
.router-fade-enter, .router-fade-leave-active {
opacity: 0;
}
</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>
<CommonTitle :title="moduleName" :isShowCert="false"></CommonTitle>
<article class="cell-container">
<span class="" v-for="(item, index) in paramData" :key="index">
<div v-if="index > 0 && paramData[index].templetId!= paramData[index-1].templetId" class="bottom-line"></div>
<div class="cell-container-item" @click="gotoExamOrCourse(item)" >
<div class="name">
<div class="name-logo" :class="{'name-learn': item.type == 2, 'name-logo-no': item.useFlag == 2}" >
{{item.type | contentType}}
</div>
<p class="name-title" :class="{'name-title-no': item.useFlag == 2}">{{item.name | shortName(30)}}</p>
<!-- <span v-if="item.certificateFlag !== 2 && index == 0">
<img class="banner-img" src="../../images/has-owner-cert.png">
</span> -->
</div>
<!-- 'bg-13': item.status == 13 -->
<span
class="text-action"
:class="{'text-action-no': item.useFlag == 2}"
>
<!-- <img v-show="item.status == 13" class="text-action-dh" src="../../images/icon-dh.png"> -->
{{getActionText(item.status)}}
</span>
<div class="connect-line"
:class="{'len1': item.height === 1, 'len2': item.height === '1','len3': item.height === 2, 'len4': item.height === '2'}"
v-if="index+1 < paramData.length && paramData[index].templetId == paramData[index+1].templetId">
</div>
</div>
<span v-if="item.certificateFlag == 2">
<img class="banner-img" :class="{'space2': item.height == 2 }" src="../../images/has-owner-cert.png">
</span>
</span>
</article>
<NoMoreContent v-if="paramData.length > 9"/>
<Toast ref="toastTitle"></Toast>
</section>
</template>
<script>
import CommonTitle from "@/components/common/common-title";
import NoMoreContent from "@/components/business/no-more-content";
import Toast from "@/components/common/common-toast";
import { mapGetters } from "vuex";
import { getAppVersion } from "@/utils";
import vueFilters from '@/utils/filter';
const actionMap = {
11: "去考试",
12: "再考一次",
13: "已通过",
14: "已完成",
15: "去刷分",
16: "未通过",
21: "去学习",
22: "继续学习",
23: "去复习"
};
export default {
name: "cell-list-item",
data() {
return {
appVersion: "200",
hocImg: require("../../images/has-owner-cert.png")
};
},
props: {
moduleName: {
type: String,
default: ""
},
paramData: {
type: Array,
default: () => []
},
courseRequire: {
type: Number,
default: 0,
}
},
computed: {
...mapGetters(["userInfo"])
},
components: {
CommonTitle,
NoMoreContent,
Toast,
},
mounted() {
},
created() {
},
methods: {
// 跳转到考试或课程 type 1: 考试; 2: 课程
// 如果是考试,将根据appVersion判断是新考试还是老考试,如果是301或之前的,都是老考试
gotoExamOrCourse(item) {
let appVersion = getAppVersion(this.userInfo.appVersion);
if (item.useFlag == 2) return;
if (window.__isWeb) {
this.$refs.toastTitle.toast("请您下载App");
return;
}
if (item.type == 1) {
if (appVersion <= 300) {
this.$refs.toastTitle.toast("请您下载新版本App");
return;
} else {
this.gotoExam(item.id);
}
} else if (item.type == 2) {
this.gotoCourse(item.id);
}
console.log(item);
},
// 跳转到课程
gotoCourse: function(courseId) {
let paramList = []
paramList = [
{
key: "className",
// value: "com.picahealth.yunque.activitys.courseplaynew.CourseIntroduceActivity###WeexCourseIntroViewController",
value: "com.picahealth.yunque.activitys.courseplaynew.MyTcPlayVideoActivity###CourseMultiMediaPlayController",
type: 4,
seqNo: 1
},
{
key: "isCHC",
value: 0,
type: 4,
seqNo: 1
},
{
key: "courseId",
value: courseId,
type: 4,
seqNo: 1
},
{
key: "courseRequire",
value: this.courseRequire,
type: 4,
seqNo: 1
},
];
rocNative.dispatchEventByModuleCode({
modeCode: "M200",
jsonString: paramList
});
},
// 跳转到考试
gotoExam: function(examId) {
let paramList = [
{
key: "className",
value:
"com.picahealth.yunque.activitys.exammodule.ExamPreActivity###PicaDo.ExamModuleManager",
type: 4,
seqNo: 1
},
{
key: "examId",
value: examId,
type: 4,
seqNo: 1
}
];
rocNative.dispatchEventByModuleCode({
modeCode: "M200",
jsonString: paramList
});
},
getActionText(status) {
return actionMap[status];
}
}
};
</script>
<style lang="scss" scoped>
@import "../../style/mixin";
.cell-container {
display: flex;
flex-direction: column;
margin: 0 px2rem(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);
// background: rgba(248, 249, 250, 1);
// border-bottom: 1px solid #f0f0f0;
// border-radius: px2rem(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);
text-align: center;
background:rgba(68,146,132,1);
font-size: px2rem(12px);
font-weight: 700;
color: #FFFFFF;
border-radius: 50%;
float: left;
line-height: px2rem(22px);
// display:table;
// overflow:hidden;
// span {
// color: #FFFFFF;
// font-size: px2rem(12px);
// font-weight: 700;
// display: table-cell;
// text-align: center;
// vertical-align: middle;
// line-height: px2rem(20px);
// }
&::before {
position: absolute;
top: px2rem(-6px);
left: px2rem(8px);
display: inline-block;
height: px2rem(6px);
width: px2rem(4px);
background: #FFFFFF;
content: "";
}
&::after {
position: absolute;
top: px2rem(20px);
left: px2rem(8px);
display: inline-block;
height: px2rem(6px);
width: px2rem(4px);
background: #FFFFFF;
content: "";
}
}
&-learn {
background:rgba(246, 131, 103, 1);
}
&-logo-no {
background:rgba(231, 232, 233, 1);
}
&-title {
// font-family: "PingFangSC-Medium", "PingFangSC", "Microsoft Yahei";
width: px2rem(231px);
font-size: px2rem(15px);
font-weight: 700;
line-height: px2rem(21px);
color: #373839;
float: left;
}
&-title-no {
color: rgba(151, 152, 153, 1);
}
// &::before {
// position: relative;
// top: px2rem(3px);
// display: inline-block;
// width: px2rem(4px);
// content: "";
// margin-right: px2rem(5px);
// height: px2rem(16px);
// background: #449284;
// border-radius: px2rem(3px);
// }
// span {
// img {
// margin-top: px2rem(4px);
// position: relative;
// top: px2rem(2px);
// width: px2rem(70px);
// height: px2rem(20px);
// }
// }
}
.text-action {
width: px2rem(68px);
height: px2rem(25px);
line-height: px2rem(25px);
text-align: center;
font-size: px2rem(12px);
font-weight: 700;
border-radius: px2rem(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);
}
&-no {
border: 0.5px solid #c7c8c9;
color: #c7c8c9;
}
}
// span {
// width: 100%;
// }
}
span {
img {
margin-left: px2rem(26px);
position: relative;
top: px2rem(-28px);
width: px2rem(70px);
height: px2rem(20px);
}
.space2 {
top: px2rem(-26px);
}
}
.connect-line {
position: absolute;
// top: px2rem(32px);
top: px2rem(3px);
left: px2rem(9.5px);
height: px2rem(42px);
width: 0.5px;
border: 0.5px dashed rgba(240, 241, 244, 1);
}
.len4 {
height: px2rem(100px);
}
.len3 {
height: px2rem(82px);
}
.len2 {
height: px2rem(82px);
}
.len1 {
height: px2rem(62px);
}
.bottom-line {
position: relative;
margin: px2rem(6px) 0 px2rem(28px) 0;
bottom: 0px;
width: 100%;
border-bottom: 0.5px solid #F0F1F2;
}
}
.bg-13 {
background: #abcec7;
}
</style>
<template>
<section class="cert-show-container" @click="gotoCertList">
<img src="../../images/has-all-cert-new.png">
</section>
</template>
<script>
export default {
name: "cert-show",
data() {
return {};
},
props: {},
mounted() {},
methods: {
gotoCertList: function() {
let paramList = [
{
key: "className",
value:
"com.picahealth.yunque.activitys.honor.MyHonorActivity###AchievementShowController",
type: 4,
seqNo: 1
}
];
rocNative.dispatchEventByModuleCode({
modeCode: "M200",
jsonString: paramList
});
}
}
};
</script>
<style lang="scss" scoped>
@import "../../style/mixin";
.cert-show-container {
display: flex;
margin: px2rem(10px) px2rem(15px) 0 px2rem(15px);
img {
width: px2rem(345px);
height: px2rem(70px);
}
}
</style>
<template>
<!-- 项目组件列表项 -->
<section>
<article v-for="(item, index) in paramData" :key="item.id">
<CommonTitle :title="item.name" :isShowCert="item.status == 2"></CommonTitle>
<article class="comp-container">
<div class="comp-container-item"
:class="{'ht-for-m16': model.moduleName.length > 16}"
v-for="model in paramData[index].portalModulesModels" :key="model.id">
<span class="name">{{model.moduleName}}</span>
<!-- <span class="name">{{model.moduleName | shortName(10)}}</span> -->
<span v-if="model.status == 2" class="action" @click="showModule(model, item.id)">查看</span>
<span v-else class="action-no" >即将开始</span>
</div>
</article>
</article>
</section>
</template>
<script>
import CommonTitle from "@/components/common/common-title";
import NoMoreContent from "@/components/business/no-more-content";
import { getWebPageUrl } from "@/utils/index"
export default {
name: "comp-list-item",
data() {
return {};
},
props: {
paramData: {
type: Array,
default: () => []
},
projectId: {
type: String | Number,
default: 1
},
courseRequire: {
type: Number,
default: 0
}
},
components: {
CommonTitle,
NoMoreContent
},
mounted() {},
methods: {
// // 跳转到模块内容页面
// showModule(item, id) {
// this.$router.push({
// path: "/comp",
// query: {
// componentId: id,
// // projectId: this.projectId,
// moduleId: item.moduleId,
// moduleName: item.moduleName
// }
// });
// },
// 跳转到模块内容页面
showModule(item, id) {
if (window.__isWeb) {
this.$router.push({
path: "/comp2",
query: {
componentId: id,
projectId: this.projectId,
moduleId: item.moduleId,
moduleName: item.moduleName,
courseRequire: this.courseRequire,
}
});
return;
}
let pageUrl = getWebPageUrl('coopv2/#/comp2');
let moduleName = encodeURIComponent(item.moduleName)
let paramList = [
{
key: "pageUrl",
value: pageUrl + `?componentId=${id}&moduleId=${item.moduleId}&moduleName=${moduleName}&projectId=${this.projectId}&courseRequire=${this.courseRequire}`,
type: 4,
seqNo: 1
}
]
rocNative.dispatchEventByModuleCode({
modeCode: "M300",
jsonString: paramList
});
}
}
};
</script>
<style lang="scss" scoped>
@import "../../style/mixin";
.comp-container {
display: flex;
flex-direction: column;
margin: 0 px2rem(15px);
&-item {
display: flex;
flex-direction: row;
margin: px2rem(6px) px2rem(0px);
height: px2rem(51px);
// line-height: px2rem(51px);
font-size: px2rem(15px);
padding: px2rem(0px) px2rem(15px);
background: rgba(248, 249, 250, 1);
border-radius: px2rem(6px);
justify-content: space-between;
align-items: center;
.name {
max-width: px2rem(240px);
font-size: px2rem(15px);
line-height: px2rem(25px) !important;
color: #676869;
}
.action {
width: px2rem(60px);
height: px2rem(25px);
line-height: px2rem(25px);
text-align: center;
font-size: px2rem(12px);
font-weight: 700;
border-radius: px2rem(15px);
// font-family: "PingFangSC-Medium", "PingFangSC", "Microsoft Yahei";
// opacity: 0.45;
border: 1px solid rgba(68, 146, 132, 0.6);
color: rgba(68, 146, 132, 1);
}
.action-no {
width: px2rem(60px);
height: px2rem(25px);
line-height: px2rem(25px);
text-align: center;
font-size: px2rem(12px);
font-weight: 700;
border-radius: px2rem(15px);
// font-family: "PingFangSC-Medium", "PingFangSC", "Microsoft Yahei";
// opacity: 0.45;
border: 1px solid #E7E8E9;
color: #C7C8C9;
}
// span {
// width: 100%;
// }
}
}
.ht-for-m16 {
height: px2rem(66px);
}
</style>
此差异已折叠。
<template>
<!-- 相关资料列表 -->
<div class="mater-container-wrapper">
<CommonTitle
title="相关资料"
:isShowCert="false"
:isShowMore="paramData.length > 3"
@showMore="gotoPDFList()"
></CommonTitle>
<section class="mater-container">
<div
v-show="paramData.length && index < 3"
v-for="(item, index) in paramData"
:key="index"
class="mater-item"
>
<div class="mater-item-left">
<!-- <img src="../../images/pdf-icon.png"> -->
<img :src="item.iconUrl">
</div>
<div class="mater-item-right">
<span class="mater-item-right-title">{{item.name}}</span>
<span class="mater-item-right-other">文件大小:{{item.size | formatFileSize}}</span>
</div>
<div class="mater-details" @click="gotoPDFDetail(item)">
<span>查看</span>
<img :src="rightIcon" alt>
</div>
</div>
<NoContent v-show="!paramData.length"></NoContent>
</section>
<Toast ref="toastTitle"></Toast>
</div>
</template>
<script>
import CommonTitle from "@/components/common/common-title";
// import NoMoreContent from "@/components/business/no-more-content";
import NoContent from "@/components/business/no-content";
import Toast from "@/components/common/common-toast";
import { mapGetters } from "vuex";
import { getAppVersion } from "@/utils";
export default {
name: "mater-list-item",
data() {
return {
bgColor: "green",
statusText: "进行中",
rightIcon: require("../../images/right-icon.png"),
appVersion: "200"
};
},
props: {
paramData: {
type: Array,
default: () => []
},
projectId: {
type: Number | String,
default: 1
}
},
computed: {
...mapGetters(["userInfo"])
},
components: {
// NoMoreContent,
NoContent,
CommonTitle,
Toast
},
mounted() {
},
methods: {
gotoPDFList() {
let appVersion = getAppVersion(this.userInfo.appVersion);
if (window.__isWeb) {
this.$refs.toastTitle.toast("请您下载App");
return;
}
if (appVersion <= 300) {
this.$refs.toastTitle.toast("请您下载新版本App");
return;
}
let itemData = {
title: "",
imageUrl: "",
appModuleInfo: {
code: "M200",
type: 4,
name: "wwww",
paramFlag: 1,
paramList: [
{
key: "className",
value:
"com.picahealth.yunque.activitys.scanpdf.AllRelevantInfoActivity###PicaDo.InstructionManagerController",
type: 4,
seqNo: 1
},
{
key: "portalProjectId",
value: this.projectId,
type: 1,
seqNo: 2
}
]
}
};
rocNative.dispatchEventByModuleCode({
modeCode: "M200",
jsonString: itemData.appModuleInfo.paramList
});
},
gotoPDFDetail: function(item) {
let appVersion = getAppVersion(this.userInfo.appVersion);
if (window.__isWeb) {
this.$refs.toastTitle.toast("请您下载App");
return;
}
if (appVersion <= 300) {
this.$refs.toastTitle.toast("请您下载新版本App");
return;
}
let itemData = {
title: "",
imageUrl: "",
appModuleInfo: {
code: "M200",
type: 4,
name: "wwww",
paramFlag: 1,
paramList: [
{
key: "className",
value:
"com.picahealth.yunque.activitys.scanpdf.ReadPDFActivity###LiveStreamingCoursewareController",
type: 4,
seqNo: 1
},
{
key: "portalProjectId",
value: 1,
type: 1,
seqNo: 2
},
{
key: "pdfURL",
value: item.url,
type: 1,
seqNo: 2
},
{
key: "navTitle",
value: item.name,
type: 1,
seqNo: 2
},
{
key: "pdfId",
value: item.id,
type: 1,
seqNo: 2
}
]
}
};
rocNative.dispatchEventByModuleCode({
modeCode: "M200",
jsonString: itemData.appModuleInfo.paramList
});
}
}
};
</script>
<style lang="scss" scoped>
@import "../../style/mixin";
.mater-container {
position: relative;
margin: px2rem(0px) px2rem(15px);
}
.mater-item {
display: flex;
// width: 100%;
height: px2rem(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);
}
&-left {
display: flex;
position: relative;
top: 0;
}
&-right {
display: flex;
// width: px2rem(215px);
flex: 1;
flex-direction: column;
padding-top: px2rem(4px);
&-title {
// height: px2rem(50px);
line-height: px2rem(23px);
font-size: px2rem(15px);
font-weight: 700;
color: rgba(55, 56, 57, 1);
}
&-other {
height: px2rem(22px);
line-height: px2rem(20px);
font-size: px2rem(13px);
font-weight: 400;
color: rgba(151, 152, 153, 1);
}
}
.mater-details {
position: relative;
right: px2rem(-10px);
display: flex;
flex-direction: row;
align-items: center;
span {
// font-family: "PingFangSC-Medium", "PingFangSC", "Microsoft Yahei";
font-size: px2rem(14px);
font-weight: 700;
color: #666;
}
img {
width: px2rem(15px);
height: px2rem(16px);
}
}
}
</style>
<template>
<section class="comp-title-container">
<div class="comp-text">
<p
class="comp-title"
:style="{
'color': fontColor,
'font-weight': fontWeight,
'font-size': cTextFontSize,
}"
>{{title }}</p>
<p v-show="isShowExplain" @click="showDialog" class="comp-title-explain">
<span>查看说明</span>
<img :src="rightNew">
</p>
</div>
<div v-show="isShowCert === 2" class="cert-img">
<img class="banner-img" :src="hocImg">
</div>
</section>
</template>
<script>
export default {
name: "common-title",
data() {
return {
fontSize: 37.5,
cImgPaddingTop: "1rem",
hocImg: require("../../images/has-cert-new.png"),
rightIcon: require("../../images/right-icon.png"),
rightNew: require("../../images/right-new.png"),
};
},
props: {
title: {
type: String,
default: ""
},
fontColor: {
type: String,
default: "#333"
},
fontWeight: {
type: Number,
default: 700
},
textFontSize: {
type: Number,
default: 18
},
paddingTop: {
type: Number,
default: 20
},
paddingBottom: {
type: Number,
default: 15
},
isShowCert: {
type: Number,
default: 1
},
isShowMore: {
type: Boolean,
default: false
},
isShowExplain: {
type: Boolean,
default: false
}
},
created() {},
mounted() {
let htmlDom = document.getElementsByTagName("html")[0].style.fontSize;
this.fontSize = htmlDom;
console.log(htmlDom);
},
computed: {
cTextFontSize() {
return this.textFontSize / this.fontSize + "rem";
},
cPaddingTop() {
this.cImgPaddingTop = (this.paddingTop + 3) / this.fontSize + "rem";
return this.paddingTop / this.fontSize + "rem";
},
cPaddingBottom() {
return this.paddingBottom / this.fontSize + "rem";
}
},
methods: {
showMove() {
this.$emit("showMore");
},
showDialog() {
this.$emit("showDialog");
}
}
};
</script>
<style lang="scss" scoped>
@import "../../style/mixin";
.comp-title-container {
margin-top: px2rem(17px);
padding-left: px2rem(15px);
// display: flex;
// flex-direction: row;
// justify-content: space-between;
.comp-text {
position: relative;
width: px2rem(345px);
overflow: hidden;
}
}
.comp-title {
position: relative;
width: px2rem(238px);
float: left;
line-height: px2rem(30px);
}
.comp-title-explain {
position: relative;
float: right;
// margin-right: px2rem(15px);
margin-top: px2rem(3px);
span {
font-size: px2rem(14px);
font-weight: 400;
color: rgba(12, 21, 39, 0.4);
// margin-right: px2rem(3px);
line-height: px2rem(18px);
height: px2rem(18px);
vertical-align: middle;
}
img {
width: px2rem(8px);
height: px2rem(12px);
vertical-align: middle;
}
}
.cert-img {
margin-top: px2rem(1px);
.banner-img {
width: px2rem(70px);
height: px2rem(20px);
padding-top: px2rem(2px);
}
}
</style>
\ No newline at end of file
<template>
<!-- 专项合作无内容 -->
<section class="nc-container">
<img
class="nc-container-img"
src="https://pica-pro.oss-cn-shanghai.aliyuncs.com/2019/03/07/cooperation/no-content.png"
>
<span class="nc-container-text">暂无内容</span>
</section>
</template>
<script>
export default {
name: "no-content",
data() {
return {};
}
};
</script>
<style lang="scss" scoped>
@import "../../style/mixin";
.nc-container {
display: flex;
width: 100%;
flex-direction: column;
justify-content: center;
align-content: center;
margin-top: px2rem(20px);
margin-bottom: px2rem(20px);
text-align: center;
// margin: 0 auto;
&-img {
margin-left: px2rem(100px);
width: px2rem(150px);
height: px2rem(150px);
}
&-text {
height: px2rem(21px);
line-height: px2rem(21px);
font-size: px2rem(15px);
font-weight: 400;
color: rgba(153, 153, 153, 1);
}
}
</style>
<template>
<!-- 到底了 -->
<section class="nc-container">
<img class="nc-container-content"
:src="nmcImg">
</section>
</template>
<script>
export default {
name: 'no-more-content',
data() {
return {
nmcImg: require('../../images/no-more-content.png')
}
}
}
</script>
<style lang="scss" scoped>
@import "../../style/mixin";
.nc-container {
display: flex;
&-content {
width: 100%;
height: px2rem(62px);
}
}
</style>
<template>
<!-- 专项合作无内容 -->
<section class="nc-container">
<img
class="nc-container-img"
src="https://pica-pro.oss-cn-shanghai.aliyuncs.com/2019/03/07/cooperation/no-permision.png"
>
<span class="nc-container-text1">你尚未获得该项目的权限</span>
<span class="nc-container-text2">若想了解课程和考试内容请联系云鹊医工作人员</span>
</section>
</template>
<script>
export default {
name: "no-content",
data() {
return {};
}
};
</script>
<style lang="scss" scoped>
@import "../../style/mixin";
.nc-container {
display: flex;
width: 100%;
flex-direction: column;
justify-content: center;
align-content: center;
margin-top: px2rem(70px);
text-align: center;
// margin: 0 auto;
&-img {
width: px2rem(60px);
height: px2rem(72px);
margin-left: px2rem(157px);
margin-bottom: px2rem(15px);
}
&-text1 {
height: px2rem(15px);
line-height: px2rem(15px);
font-size: px2rem(15px);
font-weight: 500;
color:rgba(103, 104, 105, 1);
}
&-text2 {
height: px2rem(16px);
line-height: px2rem(16px);
margin-top: px2rem(6px);
font-size: px2rem(13px);
font-weight: 400;
color: rgba(151, 152, 153, 1);
}
}
</style>
<template>
<div class="item-notice-wrapper" :style="{'margin-top': marginTop}">
<div class="content" @click="clickNoticeItem">
<img :style="{'margin-top': imgMarginTop}" src="../../images/notice.png">
<span class="gg">公告</span>
<span :style="{'margin-top': imgMarginTop}" class="vtc-line"></span>
<span class="content">{{content}}</span>
<img :style="{'margin-top': imgMarginTop}" src="../../images/notice-arr-right.png">
</div>
</div>
</template>
<script>
export default {
props: {
content: {
type: String,
default: ''
},
clientType: {
type: String | Number,
default: 0
}
},
methods: {
clickNoticeItem() {
this.$emit('clickNoticeItem')
}
},
data() {
return {
marginTop: '0px',
imgMarginTop: '0px'
}
},
watch: {
clientType(newVal) {
if(newVal == 1) {
} else if(newVal == 2){
this.marginTop = '10px';
this.imgMarginTop = '-3px'
} else if(newVal == 3){
this.marginTop = '-2px';
}
}
},
};
</script>
<style lang="scss" scoped>
@import "../../style/mixin";
.item-notice-wrapper {
.content {
display: flex;
flex-direction: row;
height: px2rem(32px);
line-height: px2rem(32px);
padding: 0 px2rem(15px);
text-align: left;
align-items: center;
background: #FEFAF5;
img {
width: px2rem(12px);
height: px2rem(12px);
line-height: px2rem(32px);
}
span {
font-size: px2rem(13px);
text-align: left;
&.gg {
// width: px2rem(30px);
padding: px2rem(1px) px2rem(5px) 0;
font-size: px2rem(13px);
font-weight: 700;
color: #835800;
}
&.vtc-line {
margin-top: px2rem(0px);
width: px2rem(1px);
height: px2rem(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);
text-align: left;
font-size: px2rem(13px);
font-weight: 700;
color: #E6A23C;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
}
</style>
<template>
<div v-show="isShow && needShow" class="pop-sign-box">
<div class="pop-mask"></div>
<div class="pop-box">
<img src="../../images/tankuang.png">
<div class="pop-text">
<p class="pop-text-joy">恭喜你获得</p>
<p class="pop-text-tips">{{popText}}</p>
</div>
<span class="pop-box-btn" @click="gotoCertDetail">查看证书</span>
<div class="sin-close" @click="close">
<img src="../../images/close.png">
</div>
</div>
<Toast ref="toastTitle"></Toast>
</div>
</template>
<script>
import Toast from "@/components/common/common-toast";
import { mapGetters } from "vuex";
import { getAppVersion } from "@/utils";
export default {
data() {
return {
isShow: true,
// appVersion: "200",
// certUrl: '',
// certId: '',
textTips:
"国家公共卫生办公室高血压慢病管理资格国家公共卫生办公室高血压慢病管理资格"
};
},
props: {
certUrl: {
type: String,
default: ""
},
certId: {
type: String || Number,
default: ""
},
popText: {
type: String,
default: ""
},
needShow: {
type: Boolean,
default: false
}
},
computed: {
...mapGetters(["userInfo"])
},
components: {
Toast
},
mounted() {
},
methods: {
// 显示组件
show() {
this.isShow = true;
},
// 关闭组件
close() {
this.isShow = false;
},
// 设置组件文本内容,并根据条件进行显示
// setCertInfo(tips, certUrl, certId, isShow = true) {
// this.textTips = tips;
// this.certUrl = certUrl;
// this.certId = ticertIdps;
// if (this.isShow) {
// this.isShow = isShow;
// }
// },
// 跳转到证书详情页面
gotoCertDetail: function() {
let _this = this;
let param = {
id: _this.certId,
token: _this.userInfo.userToken
};
if (window.__isWeb) {
_this.$refs.toastTitle.toast("请您下载App");
return;
}
let appVersion = getAppVersion(_this.userInfo.appVersion);
if (appVersion <= 300) {
_this.$refs.toastTitle.toast("请您下载新版本App");
return;
}
_this.API_GET("app/certificate/downLoad", param).then(res => {
if (res.respCode == 200) {
// id=418644
let paramList = [
{
key: "className",
value:
"com.picahealth.yunque.activitys.honor.CheckCertificatesActivity###YQWebView",
type: 4,
seqNo: 1
},
{
key: "url",
value: res.certificateUrl,
type: 4,
seqNo: 2
},
{
key: "id",
value: _this.certId,
type: 4,
seqNo: 3
},
{
key: "navTitle",
value: _this.popText,
type: 4,
seqNo: 4
},
{
key: "isNotTab",
value: true,
type: 4,
seqNo: 5
},
{
key: "isShowDownload",
value: true,
type: 4,
seqNo: 6
}
];
rocNative.dispatchEventByModuleCode({
modeCode: "M200",
jsonString: paramList
});
}
});
}
}
};
</script>
<style lang="scss" scoped>
@import "../../style/mixin";
.pop-sign-box {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 110;
.pop-box {
background: #fff;
// background: #00FF00 url(../../images/tankuang.png) no-repeat center center ;
width: px2rem(280px);
height: px2rem(312px);
border-radius: px2rem(7px);
position: absolute;
z-index: 112;
text-align: center;
left: 50%;
top: 50%;
margin: px2rem(-180px) 0 0 px2rem(-140px);
img {
width: px2rem(280px);
height: px2rem(312px);
vertical-align: middle;
}
&-btn {
position: relative;
top: px2rem(-62px);
display: inline-block;
width: px2rem(215px);
height: px2rem(44px);
line-height: px2rem(44px);
// font-family: "PingFangSC-Medium", "PingFangSC", "Microsoft Yahei";
font-size: px2rem(16px);
background: linear-gradient(
360deg,
rgba(255, 227, 97, 1) 0%,
rgba(255, 217, 121, 1) 100%
);
box-shadow: 0px px2rem(4px) px2rem(4px) 0px rgba(0, 0, 0, 0.09);
border-radius: px2rem(22px);
color: #a78400;
font-weight: 700;
}
}
.pop-text {
position: absolute;
top: px2rem(160px);
width: 100%;
text-align: center;
&-joy {
color: #ff9a4b;
font-size: px2rem(24px);
// font-family: "PingFangSC-Medium", "PingFangSC", "Microsoft Yahei";
font-weight: 700;
}
&-tips {
// font-family: "PingFangSC-Medium", "PingFangSC", "Microsoft Yahei";
color: #ff9a4b;
font-size: px2rem(14px);
font-weight: 400;
padding: px2rem(8px) px2rem(10px) px2rem(24px) px2rem(10px);
}
}
// .si-joy {
// color: #ff7c26;
// font-size: px2rem(18px);
// }
// .si-tips {
// color: #666;
// font-size: px2rem(14px);
// padding: px2rem(8px) px2rem(10px) px2rem(24px) px2rem(10px);
// }
.pop-mask {
position: absolute;
background: rgba(0, 0, 0, 0.5);
width: 100%;
height: 100%;
z-index: 111;
}
.sin-close {
position: absolute;
width: px2rem(30px);
height: px2rem(30px);
bottom: px2rem(-50px);
margin-left: px2rem(-15px);
left: 50%;
img {
width: px2rem(30px);
height: px2rem(30px);
display: block;
}
}
// font-size:px2rem(12px) ;
}
</style>
<template>
<div class="pop-notice-wrapper">
<div class="mask"></div>
<div class="content">
<div class="top">
<span class="title">{{noticeData.noticeTitle | shortName(20)}}</span>
<div></div>
<span class="body">
<!-- 该项目已于2019年12月1日
<span class="b">停止发放项目证书</span>,但仍可以继续学习该项目 -->
{{noticeData.noticeContent | shortName(150)}}
</span>
</div>
<div class="line"></div>
<div class="bottom" @click="clickNotice">
<span>我知道了</span>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {};
},
props: {
popText: {
type: String,
default: ""
},
btnText: {
type: String,
default: ""
},
noticeData: {
type: Object,
default: () => {
return {
noticeContent: "",
noticeId: '',
noticeTitle: "",
readFlag: 0
}
}
}
},
filters: {
shortContent(value, maxLength = 18) {
if(value && value.length > maxLength) {
return value.substr(0, maxLength) + '...'
}
}
},
methods: {
clickNotice() {
this.$emit("clickNotice");
}
}
};
</script>
<style lang="scss" scoped>
@import "../../style/mixin";
.pop-notice-wrapper {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 110;
font-size: px2rem(20px);
.mask {
position: absolute;
background: rgba(0, 0, 0, 0.5);
width: 100%;
height: 100%;
z-index: 111;
}
.content {
position: absolute;
left: 50%;
top: 50%;
z-index: 112;
width: px2rem(300px);
// height: px2rem(185px);
margin: px2rem(-150px) 0 0 px2rem(-150px);
border-radius: px2rem(3px);
text-align: center;
background: #fff;
.top {
padding: px2rem(30px);
.title {
display: inline-block;
font-size: px2rem(18px);
line-height: px2rem(28px);
word-break: break-all;
font-weight: 400;
color: #333333;
}
.body {
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);
font-weight: 400;
color: #676869;
.b {
font-weight: 700;
}
}
}
.line {
width: px2rem(300px);
height: px2rem(1px);
background: rgba(240, 241, 242, 1);
}
.bottom {
text-align: center;
font-size: px2rem(17px);
height: px2rem(50px);
line-height: px2rem(50px);
font-weight: 400;
span {
font-size: px2rem(17px);
color: #449284;
}
}
}
}
</style>
<template>
<div class="dialog-mask-container" v-if="showGoUpdate">
<div class="dialog-mask"></div>
<div class="dialog-container">
<div class="dialog-content">更新至最新版本才能观看视频哦</div>
<div class="dialog-footer v-hairline-top">
<span @click.stop.prevent="goUpdateHandler(1)">取消</span>
<span class="confirm-btn v-hairline-left" @click.stop.prevent="goUpdateHandler(2)">立即更新</span>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'update-dialog',
data() {
return {
}
},
props: {
showGoUpdate: {
type: Boolean,
default: false
},
},
methods: {
goUpdateHandler(type) {
this.$emit("goUpdateHandler",type);
}
}
}
</script>
<style lang="scss" scoped>
@import "../../style/mixin";
.dialog-mask-container{
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 2019;
.dialog-mask{
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.5);
z-index: 2020;
}
.dialog-container{
z-index: 2021;
position: absolute;
top: 50%;
left: 50%;
overflow: hidden;
width: px2rem(300px);
font-size: px2rem(18px);
-webkit-transition: .3s;
transition: .3s;
border-radius: px2rem(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);
text-align: center;
font-size: px2rem(18px);
color: #373839;
}
.dialog-footer{
height: px2rem(50px);
display: flex;
align-items: center;
&.v-hairline-top::after{
border-top-width: 1px;
}
span{
display: inline-block;
width: 50%;
height: px2rem(50px);
line-height: px2rem(50px);
font-size: px2rem(17px);
text-align: center;
color: #979899;
&.v-hairline-left::after{
border-left-width: 1px;
}
&.confirm-btn{
color: #449284;
}
}
}
}
[class*=v-hairline] {
position: relative;
&::after{
content: ' ';
position: absolute;
pointer-events: none;
box-sizing: border-box;
top: -50%;
left: -50%;
right: -50%;
bottom: -50%;
-webkit-transform: scale(.5);
transform: scale(.5);
border: 0 solid #F0F1F2;
}
}
}
</style>
<template>
<div class="">
<span class="comp-title"
:style="{
'color': bgColor,
'font-weight': fontWeight,
'font-size': cTextFontSize,
'padding-top': cPaddingTop,
'padding-bottom': cPaddingBottom
}"
>{{title}}</span>
</div>
</template>
<script>
export default {
name: 'common-title',
data() {
return {
fontSize: 37.5
};
},
props: {
title: {
type: String,
default: ""
},
bgColor: {
type: String,
default: "#999"
},
fontWeight: {
type: Number,
default: 600
},
textFontSize: {
type: Number,
default: 16
},
paddingTop: {
type: Number,
default: 15
},
paddingBottom: {
type: Number,
default: 15
}
},
created() {},
mounted() {
let htmlDom = document.getElementsByTagName("html")[0].style.fontSize;
this.fontSize = htmlDom;
console.log(htmlDom);
},
computed: {
cTextFontSize() {
return this.textFontSize / this.fontSize + "rem";
},
cPaddingTop() {
return this.paddingTop / this.fontSize + "rem";
},
cPaddingBottom() {
return this.paddingBottom / this.fontSize + "rem";
}
},
methods: {}
};
</script>
<style lang="scss" scoped>
@import "../../style/mixin";
.comp-title {
display: flex;
padding-left: px2rem(15px);
}
</style>
<template>
<CommonTcPlayer style="flex" :options="videoOptions">
</CommonTcPlayer>
</template>
<script>
// import TcPlayer from 'vue-tcplayer'
import CommonTcPlayer from "@/components/common/common-tcplayer";
export default {
name: 'common-banner-video',
data() {
return {
isShow: false,
// videoOptions: {
// "mp4": 'https://pica-pro.oss-cn-shanghai.aliyuncs.com/2019/03/05/movie.mp4',
// // "mp4": this.cVideoUrl,
// // "mp4": "http://1258717429.vod2.myqcloud.com/24a74910vodcq1258717429/7c37c18f5285890786204547811/9BFIyaoXYAcA.mp4",
// // "m3u8": "http://2157.liveplay.myqcloud.com/2157_358535a.m3u8",
// // "flv": "http://2157.liveplay.myqcloud.com/live/2157_358535a.flv", //增加了一个flv的播放地址,用于PC平台的播放 请替换成实际可用的播放地址
// "autoplay" : true, //iOS下safari浏览器,以及大部分移动端浏览器是不开放视频自动播放这个能力的
// "coverpic" : "http://www.test.com/myimage.jpg",
// "width" : '375',//视频的显示宽度,请尽量使用视频分辨率宽度
// "height" : '210'//视频的显示高度,请尽量使用视频分辨率高度
// }
}
},
props: {
videoUrl: {
type: String,
default: ''
},
videoOptions: {
type: Object,
default: () => {}
}
},
computed: {
cVideoUrl() {
return this.videoUrl
},
},
watch: {
videoOptions: {
handler: function(val,oldval){
this.isShow = true
},
deep:true//对象内部的属性监听,也叫深度监听
},
},
components: {
CommonTcPlayer
},
props: {
title: {
type: String,
default: ""
},
bgColor: {
type: String,
default: "#999"
},
fontWeight: {
type: Number,
default: 600
},
textFontSize: {
type: Number,
default: 16
},
paddingTop: {
type: Number,
default: 15
},
paddingBottom: {
type: Number,
default: 15
}
},
created() {},
mounted() {
},
computed: {
},
methods: {}
};
</script>
<style lang="scss" scoped>
@import "../../style/mixin";
.comp-title {
display: flex;
padding-left: px2rem(15px);
}
</style>
<template>
<div>
<div class="desc-title" v-show="isShowTitle">
<span>{{descTitle}}</span>
</div>
<div class="desc-detail">
<span class="desc_text" v-html="message"></span>
<!-- <CommonSpliteLine></CommonSpliteLine> -->
<div class="split-line"></div>
<div class="desc_text_tp" @click="showDesc()">
<span v-show="!isShowFlag">显示全部</span>
<span v-show="isShowFlag">收起</span>
</div>
</div>
</div>
</template>
<script>
import CommonSpliteLine from "@/components/common/common-splite-line";
export default {
name: "common-description",
data() {
return {
isShowFlag: false
};
},
computed: {
CommonSpliteLine
},
props: {
isShowTitle: {
type: Boolean,
default: true
},
descTitle: {
type: String,
default: ""
},
value: {
type: String,
default: ""
}
},
created() {},
mounted() {},
computed: {
message: function() {
// return this.isShowFlag
// ? '<span style="color: red;">简介</span>' + this.value
// : '<span style="color: red;">简介</span>' +
// this.value.slice(0, 34) +
// "...";
let shortMsg = this.value || "";
if (shortMsg.length > 63) {
shortMsg = this.value.slice(0, 63) + "...";
}
return this.isShowFlag ? this.value : shortMsg;
}
},
methods: {
showDesc() {
this.isShowFlag = !this.isShowFlag;
}
}
};
</script>
<style lang="scss" scoped>
@import "../../style/mixin";
.desc-title {
display: flex;
padding: px2rem(15px);
padding-bottom: 0px;
line-height: px2rem(22px);
font-weight: 700;
color: rgba(51, 51, 51, 1);
span {
font-family: "PingFangSC-Medium", "PingFangSC", "Microsoft Yahei";
font-size: px2rem(18px);
font-weight: 700;
}
}
.desc-detail {
display: flex;
position: relative;
word-break: normal;
margin-bottom: px2rem(40px);
// height: px2rem(60px);
}
.display-none {
position: fixed;
top: 0;
visibility: hidden;
}
.desc_text {
padding: px2rem(15px);
padding-top: px2rem(6px);
font-size: px2rem(14px);
color: #999999;
line-height: px2rem(25px);
letter-spacing: 1px;
word-wrap: break-word;
word-break: break-all;
// word-break: normal;
text-align: justify;
flex-direction: row;
flex-wrap: wrap;
}
.desc_text_tp {
position: absolute;
left: 0;
bottom: px2rem(-30px);
// left: 50%;
// transform: translateX(px2rem(-32px));
width: 100%;
text-align: center;
font-size: px2rem(16px);
font-weight: 700;
color: #cccccc;
// border-top: 1px solid #f1f1f1;
}
.split-line {
display: flex;
width: 92%;
position: absolute;
left: 4%;
bottom: px2rem(0px);
border-bottom: 0.5px solid #f1f1f1;
}
</style>
<template>
<div class="loader loader--style3" title="2">
<div class="loader-mask"></div>
<svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="40px" height="40px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<path fill="#000" d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z">
<animateTransform attributeType="xml"
attributeName="transform"
type="rotate"
from="0 25 25"
to="360 25 25"
dur="0.6s"
repeatCount="indefinite"/>
</path>
</svg>
</div>
</template>
<style lang="scss" scoped>
@import '../../style/mixin';
.loader {
&-mask {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 200;
background: rgba(0, 0, 0, 0);
}
svg {
position: fixed;
top: px2rem(280px);
left: px2rem(166px);
z-index: 201;
}
}
svg path, svg rect{
// fill: #fff;
fill: #449284;
}
</style>
<template>
<section :class="isFixNavbar ? 'nav-top fixed' : 'nav-top'" :style="'height:' + navHeight">
<!-- <section v-if="isWeb" :class="isFixNavbar ? 'nav-top fixed' : 'nav-top'"> -->
<div
class="nav-part"
:style="'background:' + bgColor + ';'
+ 'padding-top:' + paddingTop + ';border-bottom:' + borderStyle"
>
<div class="nav-title">
<span class="nav-back" @click="goBack">
<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-show="isShowShare" class="nav-share" @click="goShare">
<img
src="https://pica-pro.oss-cn-shanghai.aliyuncs.com/eagle_plan/courses/Group17_hover%403x.png"
>
<!-- <img src="../../images/share-icon.png"/> -->
</span>
</div>
</div>
</section>
</template>
<script>
export default {
name: "common-navbar",
data() {
return {
isWeb: window.__isWeb,
navbarHeight: 28,
contentHeight: 35,
fontSize: 37.5,
content: "",
shareImageUrl:
"https://file.yunqueyi.com/logo.png?version=" + new Date().getTime()
};
},
props: {
bgColor: {
type: String,
default: ""
},
title: {
type: String,
default: "暂无数据"
},
isFixNavbar: {
//是否fix定位
type: Boolean,
default: false
},
burialPoint: {
default: "",
type: String
},
backMethod: {
type: String,
default: "native" // inner native
},
isShowShare: {
type: Boolean,
default: false
},
borderStyle: {
type: String,
default: "1px solid #e7e7e7"
}
},
computed: {
// bgColor2() {
// return this.bgColor
// },
// borderStyle() {
// return this.bgColor === 'no{ne' ? '0px solid #e7e7e7' : '1px solid #e7e7e7'
// },
navHeight() {
if (this.isFixNavbar) {
return 0;
// return (this.contentHeight) / this.fontSize + 'rem';
} else {
return (this.navbarHeight + this.contentHeight) / this.fontSize + "rem";
}
},
paddingTop() {
// return this.isWeb ? 0 : this.navbarHeight / this.fontSize + 'rem'
return this.navbarHeight / this.fontSize + "rem";
}
},
mounted() {
let htmlDom = document.getElementsByTagName("html")[0].style.fontSize;
this.fontSize = htmlDom;
},
methods: {
//返回
goBack() {
// if (this.burialPoint == "activity") {
// this.pageBurialPoin(this.objPoint);
// }
if (this.backMethod === "inner") {
this.$router.back(-1);
} else {
rocNative.goBack();
}
//rocNative.backPreviousPage();
},
//分享
goShare() {
let url = location.href,
_this = this;
rocNative.shareWechat({
// url: url,
// title: '_this.title',
// content: '_this.content',
// shareImageUrl: '_this.shareImageUrl'
type: 6,
shareId: 0,
shareUrl: 'shareUrl',
title1: "this.shareTitle1",
title2: "this.shareTitle2",
shareImageUrl: "https://file.yunqueyi.com/logo.png?version=" + new Date().getTime()
});
}
}
};
</script>
<style lang="scss" scoped>
@import "../../style/mixin";
.back {
position: absolute;
left: px2rem(8px);
top: px2rem(15px);
display: inline-block;
width: px2rem(50px);
height: px2rem(50px);
img {
padding: px2rem(10px);
width: px2rem(25px);
height: px2rem(25px);
}
}
.nav-top {
// height: px2rem(65px);
background: #fff;
color: #333;
position: relative;
z-index: 109;
.nav-back {
display: inline-block;
position: absolute;
left: px2rem(16px);
top: 0;
height: px2rem(25px);
width: px2rem(25px);
// -ms-transform: translate(180deg);
// -webkit-transform: (180deg);
// transform: rotate(180deg);
}
img {
display: block;
width: 100%;
height: 100%;
}
.nav-icon {
display: inline-block;
width: 50px;
height: 50px;
svg {
stroke: #000;
fill: #0000ff;
}
}
.nav-share {
position: absolute;
right: px2rem(16px);
top: 0;
height: px2rem(25px);
width: px2rem(25px);
}
.nav-title {
position: relative;
top: px2rem(10px);
left: 0;
display: inline-block;
width: 100%;
/* padding:0 px2rem(33px);*/
height: px2rem(36px);
&-title {
height: px2rem(18px);
font-size: px2rem(18px);
font-weight: 500;
color: rgba(51, 51, 51, 1);
line-height: px2rem(26px);
}
}
.nav-part {
width: 100%;
font-size: px2rem(18px);
text-align: center;
padding: 0 0 px2rem(10px) 0;
/* height: px2rem(25px);*/
}
}
.nav-part {
position: fixed;
top: 0;
left: 0;
border-bottom: 1px solid #e7e7e7;
/* height: px2rem(25px);*/
}
</style>
\ No newline at end of file
<template>
<section :class="isFixNavbar ? 'nav-top fixed' : 'nav-top'" :style="'height:' + navHeight">
<!-- <section v-if="isWeb" :class="isFixNavbar ? 'nav-top fixed' : 'nav-top'"> -->
<div
class="nav-part"
:style="'background:' + bgColor + ';'
+ 'padding-top:' + paddingTop + ';border-bottom:' + borderStyle"
>
<div class="nav-title">
<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-show="isShowShare" class="nav-share" @click="goShare">
<img
src="https://pica-pro.oss-cn-shanghai.aliyuncs.com/eagle_plan/courses/Group17_hover%403x.png"
>
<!-- <img src="../../images/share-icon.png"/> -->
</span>
</div>
</div>
</section>
</template>
<script>
export default {
name: "common-navbar",
data() {
return {
isWeb: window.__isWeb,
navbarHeight: 28,
contentHeight: 35,
fontSize: 37.5,
content: "",
shareImageUrl:
"https://file.yunqueyi.com/logo.png?version=" + new Date().getTime()
};
},
props: {
bgColor: {
type: String,
default: ""
},
title: {
type: String,
default: "暂无数据"
},
isFixNavbar: {
//是否fix定位
type: Boolean,
default: false
},
burialPoint: {
default: "",
type: String
},
backMethod: {
type: String,
default: "native" // inner native
},
isShowShare: {
type: Boolean,
default: false
},
borderStyle: {
type: String,
default: "1px solid #e7e7e7"
},
isBlack: {
type: Boolean,
default: true
}
},
computed: {
// bgColor2() {
// return this.bgColor
// },
// borderStyle() {
// return this.bgColor === 'no{ne' ? '0px solid #e7e7e7' : '1px solid #e7e7e7'
// },
navHeight() {
if (this.isFixNavbar) {
return 0;
// return (this.contentHeight) / this.fontSize + 'rem';
} else {
return (this.navbarHeight + this.contentHeight) / this.fontSize + "rem";
}
},
paddingTop() {
// return this.isWeb ? 0 : this.navbarHeight / this.fontSize + 'rem'
return this.navbarHeight / this.fontSize + "rem";
}
},
mounted() {
let htmlDom = document.getElementsByTagName("html")[0].style.fontSize;
this.fontSize = htmlDom;
},
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();
},
//分享
goShare() {
let url = location.href,
_this = this;
rocNative.shareWechat({
// url: url,
// title: '_this.title',
// content: '_this.content',
// shareImageUrl: '_this.shareImageUrl'
type: 6,
shareId: 0,
shareUrl: 'shareUrl',
title1: "this.shareTitle1",
title2: "this.shareTitle2",
shareImageUrl: "https://file.yunqueyi.com/logo.png?version=" + new Date().getTime()
});
}
}
};
</script>
<style lang="scss" scoped>
@import "../../style/mixin";
.back {
position: absolute;
left: px2rem(px);
top: px2rem(15px);
display: inline-block;
width: px2rem(50px);
height: px2rem(50px);
img {
padding: px2rem(10px);
width: px2rem(25px);
height: px2rem(25px);
}
}
.nav-top {
// height: px2rem(65px);
background: #fff;
color: #333;
position: relative;
z-index: 109;
.nav-back {
display: inline-block;
position: absolute;
left: px2rem(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);
}
img {
display: block;
width: 100%;
height: 100%;
}
.nav-icon {
display: inline-block;
width: 50px;
height: 50px;
svg {
stroke: #000;
fill: #0000ff;
}
}
.nav-share {
position: absolute;
right: px2rem(16px);
top: 0;
height: px2rem(25px);
width: px2rem(25px);
}
.nav-title {
position: relative;
top: px2rem(10px);
left: 0;
display: inline-block;
width: 100%;
/* padding:0 px2rem(33px);*/
height: px2rem(36px);
&-title {
height: px2rem(18px);
font-size: px2rem(18px);
font-weight: 700;
color: rgba(51, 51, 51, 1);
line-height: px2rem(26px);
}
}
.nav-part {
width: 100%;
font-size: px2rem(18px);
text-align: center;
padding: 0 0 px2rem(10px) 0;
/* height: px2rem(25px);*/
}
}
.nav-part {
position: fixed;
top: 0;
left: 0;
border-bottom: 1px solid #e7e7e7;
/* height: px2rem(25px);*/
}
</style>
\ No newline at end of file
<template>
<div class="split-line" :style="{'background-color': bgColor, 'height': lineHeight}"></div>
</template>
<script>
export default {
name: 'common-splite-line',
data() {
return {};
},
props: {
bgColor: {
type: String,
default: '#F8F9FA'
},
lineHeight: {
type: String,
default: '6px'
}
},
created() {},
mounted() {},
computed: {},
methods: {}
};
</script>
<style lang="scss" scoped>
@import "../../style/mixin";
.split-line {
display: flex;
}
</style>
<template>
<!-- <div :id="id" class="banner-img" autoplay="autoplay"> -->
<div :id="id" class="banner-img">
</div>
</template>
<script>
// const TcPlayer = window.TcPlayer
import { TcPlayer } from "@/utils/tc-player-2.2.0";
export default {
props: {
id: {
type: String,
default: "tc-player"
},
width: {
type: [Number, String],
default: 375
},
height: {
type: [Number, String],
default: 210
},
listener: {
type: Function,
default() {
return function(msg) {};
}
},
live: {
type: Boolean,
default: false
},
options: {
type: Object
},
pStatus: {
type: Number,
default: 1
}
},
data() {
return {
tcPlayer: null
};
},
mounted() {
this.$nextTick(function(){
let htmlDom = document.getElementsByTagName('html')[0];
let htmlWidth = parseFloat(htmlDom.style.fontSize) * 10
this.init(htmlWidth);
})
},
methods: {
init(htmlWidth) {
const options = {
// width: String(htmlWidth),
// width: String(this.width),
// width: String('100%'),
// height: String(this.height),
live: this.live,
listener: this.listener,
...this.options
};
options.width = htmlWidth
this.tcPlayer = new TcPlayer(this.id, options);
},
reset() {
if (this.tcPlayer) {
this.tcPlayer.destroy();
this.init();
}
},
play() {
if (!this.tcPlayer) return;
return this.tcPlayer.play();
},
pause() {
if (!this.tcPlayer) return;
return this.tcPlayer.pause();
},
togglePlay() {
if (!this.tcPlayer) return;
return this.tcPlayer.togglePlay();
},
mute(muted) {
if (!this.tcPlayer) return;
return this.tcPlayer.mute(muted);
},
volume(val) {
if (!this.tcPlayer) return;
return this.tcPlayer.volume(val);
},
playing() {
if (!this.tcPlayer) return;
return this.tcPlayer.playing();
},
duration() {
if (!this.tcPlayer) return;
return this.tcPlayer.duration();
},
currentTime(time) {
if (!this.tcPlayer) return;
return this.tcPlayer.currentTime(time);
},
fullscreen(enter) {
if (!this.tcPlayer) return;
return this.tcPlayer.fullscreen(enter);
},
buffered() {
if (!this.tcPlayer) return;
return this.tcPlayer.buffered();
},
switchClarity(clarity) {
if (!this.tcPlayer) return;
return this.tcPlayer.switchClarity(clarity);
}
},
destroyed() {
if (this.tcPlayer) {
this.tcPlayer.destroy();
}
}
};
</script>
<style lang="scss" scoped>
@import "../../style/mixin";
.banner-img {
// display: inherit;
width: px2rem(375px);
height: px2rem(210px);
}
</style>
\ No newline at end of file
<template>
<section class="comp-title-container">
<span>
<span
class="comp-title"
:style="{
'color': fontColor,
'font-weight': fontWeight,
'font-size': cTextFontSize,
'padding-top': cPaddingTop,
'padding-bottom': cPaddingBottom
}"
>{{title | shortName(13)}}</span>
<!-- <img
v-show="isShowCert"
:style="{
'padding-top': cImgPaddingTop,
}"
class="banner-img"
:src="hocImg"
>-->
<img v-show="isShowCert" class="banner-img" :src="hocImg">
</span>
<span v-show="isShowMore" @click.stop.prevent="showMove" class="comp-title-more">
<span>更多</span>
<img :src="rightIcon">
</span>
<span v-show="isShowExplain" @click="showDialog" class="comp-title-explain">
<span>查看说明</span>
<img :src="rightNew">
</span>
</section>
</template>
<script>
export default {
name: "common-title",
data() {
return {
fontSize: 37.5,
cImgPaddingTop: "1rem",
hocImg: require("../../images/has-cert-new.png"),
rightIcon: require("../../images/right-icon.png"),
rightNew: require("../../images/right-new.png"),
};
},
props: {
title: {
type: String,
default: ""
},
fontColor: {
type: String,
default: "#333"
},
fontWeight: {
type: Number,
default: 700
},
textFontSize: {
type: Number,
default: 18
},
paddingTop: {
type: Number,
default: 20
},
paddingBottom: {
type: Number,
default: 15
},
isShowCert: {
type: Boolean,
default: true
},
isShowMore: {
type: Boolean,
default: false
},
isShowExplain: {
type: Boolean,
default: false
}
},
created() {},
mounted() {
let htmlDom = document.getElementsByTagName("html")[0].style.fontSize;
this.fontSize = htmlDom;
console.log(htmlDom);
},
computed: {
cTextFontSize() {
return this.textFontSize / this.fontSize + "rem";
},
cPaddingTop() {
this.cImgPaddingTop = (this.paddingTop + 3) / this.fontSize + "rem";
return this.paddingTop / this.fontSize + "rem";
},
cPaddingBottom() {
return this.paddingBottom / this.fontSize + "rem";
}
},
methods: {
showMove() {
this.$emit("showMore");
},
showDialog() {
this.$emit("showDialog");
}
}
};
</script>
<style lang="scss" scoped>
@import "../../style/mixin";
.comp-title-container {
padding-left: px2rem(15px);
display: flex;
flex-direction: row;
justify-content: space-between;
span {
display: flex;
align-items: center;
}
}
.comp-title {
// font-family: "PingFangSC-Medium", "PingFangSC", "Microsoft Yahei";
&-more {
display: flex;
flex-direction: row;
align-items: center;
margin-right: px2rem(15px);
span {
font-size: px2rem(14px);
font-weight: 400;
color: rgba(40, 52, 76, 0.4);
}
img {
width: px2rem(15px);
height: px2rem(16px);
}
}
&-explain {
display: flex;
flex-direction: row;
align-items: center;
margin-right: px2rem(15px);
span {
font-size: px2rem(14px);
font-weight: 400;
color: rgba(40, 52, 76, 0.4);
margin-right: px2rem(3px);
line-height: px2rem(14px);
}
img {
width: px2rem(8px);
height: px2rem(14px);
}
}
}
.banner-img {
width: px2rem(70px);
height: px2rem(20px);
padding-top: px2rem(2px);
}
</style>
<template>
<div v-show="needShow" class="loader" title="2">
<!-- <div class="loader-mask"></div> -->
<div class="loader-title">
<span>{{toastTitle}}</span>
</div>
</div>
</template>
<script>
export default {
data() {
return {
needShow: false,
toastTitle: ''
};
},
methods: {
toast(toastTitle, time = 1000) {
this.toastTitle = toastTitle
this.needShow = true
window.setTimeout( () => {
this.needShow = false
this.toastTitle = ''
}, time)
}
},
};
</script>
<style lang="scss" scoped>
@import "../../style/mixin";
.loader {
&-mask {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 300;
background: rgba(0, 0, 0, 0.5);
}
&-title {
position: fixed;
width: 100%;
left: 0;
z-index: 301;
bottom: px2rem(30px);
text-align: center;
span {
padding: px2rem(2px) px2rem(10px);
background: #eee;
}
}
}
</style>
<template>
<section>
<article class>
<span></span>
<span>{{title}}</span>
<span></span>
<span>{{title}}</span>
<span></span>
</article>
<article>
<section >1</section>
<section >2</section>
</article>
</section>
</template>
<script>
export default {
name: "common-title",
data() {
return {
fontSize: 37.5
};
},
props: {
title: {
type: String,
default: ""
},
bgColor: {
type: String,
default: "#999"
},
fontWeight: {
type: Number,
default: 600
},
textFontSize: {
type: Number,
default: 16
},
paddingTop: {
type: Number,
default: 15
},
paddingBottom: {
type: Number,
default: 15
}
},
created() {},
mounted() {
let htmlDom = document.getElementsByTagName("html")[0].style.fontSize;
this.fontSize = htmlDom;
console.log(htmlDom);
},
computed: {
cTextFontSize() {
return this.textFontSize / this.fontSize + "rem";
},
cPaddingTop() {
return this.paddingTop / this.fontSize + "rem";
},
cPaddingBottom() {
return this.paddingBottom / this.fontSize + "rem";
}
},
methods: {}
};
</script>
<style lang="scss" scoped>
@import "../../style/mixin";
.comp-title {
display: flex;
padding-left: px2rem(15px);
}
</style>
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册