Skip to content

P
pica-learning-report
提交 c4665e61 编写于 作者: guangjun.yang's avatar guangjun.yang
浏览文件
操作

修改很多样式问题

上级 e13a6879
展开全部 显示空白字符变更
内嵌 并排
正在显示 包含 989 行增加 和 64 行删除
components/bussiness/charts/chart-column-horizontal-tc-long.vue
浏览文件 @ c4665e61
...@@ -96,7 +96,7 @@ export default { ...@@ -96,7 +96,7 @@ export default {
axisPointer: { axisPointer: {
type: "shadow" type: "shadow"
}, },
formatter: "{b}<br/>{a0}: {c0}%<br/>{a1}: {c1}%" formatter: "{b}<br/>{a0}{c0}%<br/>{a1}{c1}%"
}, },
legend: { legend: {
show: false, show: false,
......
components/bussiness/charts/chart-column-horizontal-tc.vue
浏览文件 @ c4665e61
...@@ -93,7 +93,7 @@ export default { ...@@ -93,7 +93,7 @@ export default {
axisPointer: { axisPointer: {
type: "shadow" type: "shadow"
}, },
formatter: "{b}<br/>{a0}: {c0}%<br/>{a1}: {c1}%" formatter: "{b}<br/>{a0}{c0}%<br/>{a1}{c1}%"
}, },
legend: { legend: {
top: 20, top: 20,
......
components/bussiness/charts/chart-column-stack.vue
浏览文件 @ c4665e61
...@@ -142,24 +142,27 @@ export default { ...@@ -142,24 +142,27 @@ export default {
type: "shadow" // 默认为直线，可选为：'line' | 'shadow' type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
}, },
formatter: function (params) { formatter: function (params) {
let relVal = params[0].name + "人数："; // let relVal = params[0].name + "人数：";
let relVal = params[0].name + "人数";
let value = 0; let value = 0;
for (let i = 0, l = params.length; i < l; i++) { for (let i = 0, l = params.length; i < l; i++) {
value += params[i].value; value += params[i].value;
} }
relVal += value + "人"; relVal += value + "人";
let divList = []; let divList = [];
divList[0] = "<div style='background: #3BA0FF;height: 12px;width: 20px;margin: 5px 5px 0 2px;float: left;border-radius:2px;'></div>"; divList[0] = "<div style='background: #3BA0FF;height: 12px;width: 0px;margin: 5px 5px 0 2px;float: left;border-radius:2px;'></div>";
divList[1] = "<div style='background: #FF9A4B;height: 12px;width: 20px;margin: 5px 5px 0 2px;float: left;border-radius:2px;'></div>"; divList[1] = "<div style='background: #FF9A4B;height: 12px;width: 0px;margin: 5px 5px 0 2px;float: left;border-radius:2px;'></div>";
divList[2] = "<div style='background: #FFB01B;height: 12px;width: 20px;margin: 5px 5px 0 2px;float: left;border-radius:2px;'></div>"; divList[2] = "<div style='background: #FFB01B;height: 12px;width: 0px;margin: 5px 5px 0 2px;float: left;border-radius:2px;'></div>";
divList[3] = "<div style='background: #39AF9A;height: 12px;width: 20px;margin: 5px 5px 0 2px;float: left;border-radius:2px;'></div>"; divList[3] = "<div style='background: #39AF9A;height: 12px;width: 0px;margin: 5px 5px 0 2px;float: left;border-radius:2px;'></div>";
divList[4] = "<div style='background: #5D7092;height: 12px;width: 20px;margin: 5px 5px 0 2px;float: left;border-radius:2px;'></div>"; divList[4] = "<div style='background: #5D7092;height: 12px;width: 0px;margin: 5px 5px 0 2px;float: left;border-radius:2px;'></div>";
for (let j = params.length - 1; j >= 0; j--) { for (let j = params.length - 1; j >= 0; j--) {
if(value != 0) { if(value != 0) {
relVal += relVal +=
"<br/>" + divList[j] + // "<br/>" + divList[j] +
"<br/>" +
params[j].seriesName + params[j].seriesName +
"占比： " + "占比" +
// "占比： " +
( (
(100 * parseFloat(params[j].value)) / (100 * parseFloat(params[j].value)) /
parseFloat(value) parseFloat(value)
...@@ -169,15 +172,12 @@ export default { ...@@ -169,15 +172,12 @@ export default {
relVal += relVal +=
"<br/>" + divList[j] + "<br/>" + divList[j] +
params[j].seriesName + params[j].seriesName +
"占比： "+ "0%"; "占比"+ "0%";
// "占比： "+ "0%";
} }
} }
return relVal; return relVal;
} }
// formatter: "{b}<br/>{a0}: {c0} + {c1}%<br/>{a1}: {c2}%"
// formatter: function(config) {
// console.log('config', config);
// }
}, },
legend: { legend: {
top: 20, top: 20,
......
components/bussiness/charts/chart-column-vertical-tc.vue
浏览文件 @ c4665e61
...@@ -93,7 +93,7 @@ export default { ...@@ -93,7 +93,7 @@ export default {
type: "shadow" type: "shadow"
}, },
// formatter: '{a}<br/>{b}<br/>{c}<br/>{a0}<br/>{a1}<br/>{b0}<br/>{b1}', // formatter: '{a}<br/>{b}<br/>{c}<br/>{a0}<br/>{a1}<br/>{b0}<br/>{b1}',
formatter: '{b}<br/>{a0}: {c0}%<br/> {a1}: {c1}%' formatter: '{b}<br/>{a0}{c0}%<br/> {a1}{c1}%'
}, },
legend: { legend: {
top: 20, top: 20,
......
components/bussiness/course-times-list.vue
浏览文件 @ c4665e61
...@@ -80,7 +80,7 @@ export default { ...@@ -80,7 +80,7 @@ export default {
justify-content: space-between; justify-content: space-between;
border-bottom: 1px solid #f0f1f2; border-bottom: 1px solid #f0f1f2;
span { span {
font-weight: 700; font-weight: 400;
color: #373839; color: #373839;
} }
span:nth-child(1) { span:nth-child(1) {
......
components/common/common-area-select-old.vue 0 → 100644
浏览文件 @ c4665e61
<!-- 区域与机构选择（表头）组件 -->
<template>
<ul class="common-area-select">
<li class="center" @click="areaClick">
{{areaName}}<img v-show="!showArea" src="../../assets/images/arr-down.png"/><img v-show="showArea" src="../../assets/images/arr-up.png"/>
</li>
<li class="center" :class="{'gray': isNotVisible}" @click="orgClick">
{{orgName}}<img v-show="isNotVisible" src="../../assets/images/arr-down-white.png"/><img v-show="!showOrg && !isNotVisible" src="../../assets/images/arr-down.png"/><img v-show="showOrg && !isNotVisible" src="../../assets/images/arr-up.png"/>
</li>
</ul>
</template>
<script>
import { mapGetters } from "vuex";
export default {
props: {
areaName: {
type: String,
default: "全部"
},
orgName: {
type: String,
default: "全部机构"
},
showArea: {
type: Boolean,
default: false,
},
showOrg: {
type: Boolean,
default: false
}
},
computed: {
...mapGetters({
orgList: 'orgList',
areaDegree: 'areaDegree'
}),
isNotVisible() {
if((this.orgList && this.orgList.length == 0) || this.areaDegree == 0 || this.areaDegree == 1 || this.areaDegree == 2) {
return true;
} else {
return false;
}
}
},
methods: {
areaClick() {
this.$emit("areaClick");
},
orgClick() {
this.$emit("orgClick");
}
}
};
</script>
<style lang="scss" scoped>
.common-area-select {
// padding-top: 50px;
display: flex;
width: 100%;
height: 35px;
line-height: 35px;
margin: 2px 0 10px;
flex-direction: row nowrap;
align-content: center;
align-items: center;
text-align: center;
justify-content: center; /* 水平居中 */
.center {
flex: 1;
font-size: 15px;
font-weight: 400;
color: #676869;
&.gray {
color: #C7C8C9;
}
}
img {
// padding-top: 10px;
position: relative;
left: 3px;
top: 1px;
width: 12px;
height: 12px;
}
}
</style>
components/common/common-area-select.vue
浏览文件 @ c4665e61
...@@ -57,12 +57,17 @@ export default { ...@@ -57,12 +57,17 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.common-area-select { .common-area-select {
&.fixed {
position: fixed;
top: 69px;
z-index: 10000000;
}
// padding-top: 50px; // padding-top: 50px;
display: flex; display: flex;
width: 100%; width: 100%;
height: 35px; height: 35px;
line-height: 35px; line-height: 35px;
margin: 2px 0 10px; margin: 2px 0 0px;
flex-direction: row nowrap; flex-direction: row nowrap;
align-content: center; align-content: center;
align-items: center; align-items: center;
......
components/common/common-header.vue
浏览文件 @ c4665e61
...@@ -132,7 +132,7 @@ export default { ...@@ -132,7 +132,7 @@ export default {
background: #fff; background: #fff;
color: #333; color: #333;
position: relative; position: relative;
z-index: 10000000; z-index: 100000000;
.nav-back { .nav-back {
display: inline-block; display: inline-block;
position: absolute; position: absolute;
......
components/common/common-swiper-item.vue
浏览文件 @ c4665e61
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<article class="middle"> <article class="middle">
<div class="title"> <div class="title">
<span class="ratio">{{certFlag ? '获证率' : '完成率'}} <span class="ratio">{{certFlag ? '获证率' : '完成率'}}
<img @click="tipsClick" :class="{'top-10': isAndroid}" v-show="certFlag" src="../../assets/images/what-icon-2.png" /> <img @click="tipsClick" :class="{'top-10': isAndroid}" src="../../assets/images/what-icon-2.png" />
</span> </span>
<span> <span>
<img src="../../assets/images/tips-1.png" /> <img src="../../assets/images/tips-1.png" />
...@@ -118,7 +118,11 @@ export default { ...@@ -118,7 +118,11 @@ export default {
}, },
methods: { methods: {
tipsClick() { tipsClick() {
this.$emit('tipsClick') let tipsContent = '是已完成人数/应参与人数*100%';
if(this.certFlag) {
tipsContent = '是已获证人数/应参与人数*100%'
}
this.$emit('tipsClick', tipsContent)
} }
} }
}; };
...@@ -132,13 +136,10 @@ export default { ...@@ -132,13 +136,10 @@ export default {
.middle { .middle {
display: block; display: block;
box-sizing: border-box; box-sizing: border-box;
// width: 100%;
height: 120px; height: 120px;
margin: 5px 15px; margin: 5px 15px;
// width: 345px;
height: 128px; height: 128px;
padding: 20px 15px; padding: 20px 15px;
// background: #b4d4ce;
background: linear-gradient( background: linear-gradient(
180deg, 180deg,
rgba(6, 190, 182, 1) 0%, rgba(6, 190, 182, 1) 0%,
...@@ -146,13 +147,11 @@ export default { ...@@ -146,13 +147,11 @@ export default {
); );
box-shadow: 0px 5px 10px 0px rgba(68, 146, 132, 0.1); box-shadow: 0px 5px 10px 0px rgba(68, 146, 132, 0.1);
border-radius: 6px; border-radius: 6px;
// border: 1px solid rgba(180, 212, 206, 1);
.ratio { .ratio {
height: 24px; height: 24px;
line-height: 24px; line-height: 24px;
width: 100px; width: 100px;
margin: 10px 0 24px; margin: 10px 0 24px;
// height: 80px;
span { span {
display: inline-block; display: inline-block;
height: 24px; height: 24px;
...@@ -177,7 +176,7 @@ export default { ...@@ -177,7 +176,7 @@ export default {
left: 0; left: 0;
img { img {
position: absolute; position: absolute;
top: 5px; top: 3px;
left: 46px; left: 46px;
width: 14px; width: 14px;
height: 14px; height: 14px;
...@@ -195,10 +194,8 @@ export default { ...@@ -195,10 +194,8 @@ export default {
.middle-org { .middle-org {
display: block; display: block;
box-sizing: border-box; box-sizing: border-box;
// width: 100%;
height: 120px; height: 120px;
margin: 5px 15px; margin: 5px 15px;
// width: 345px;
height: 98px; height: 98px;
margin-top: 10px; margin-top: 10px;
padding: 15px; padding: 15px;
...@@ -210,7 +207,6 @@ export default { ...@@ -210,7 +207,6 @@ export default {
line-height: 21px; line-height: 21px;
width: 100px; width: 100px;
margin: 7px 0 15px; margin: 7px 0 15px;
// height: 80px;
span { span {
display: inline-block; display: inline-block;
height: 21px; height: 21px;
...@@ -287,8 +283,5 @@ export default { ...@@ -287,8 +283,5 @@ export default {
} }
} }
} }
.top-10 {
}
} }
</style> </style>
components/common/common-tabs-old.vue 0 → 100644
浏览文件 @ c4665e61
<!-- Tabs组件 -->
<template>
<div class="common-tabs-wrapper">
<ul class="common-tabs">
<li
v-show="(item === '总体概况'
|| item === '人群分析'
|| item === '课程分析' && projectInfo.existCourse === 1)
|| (item === '考试分析' && projectInfo.existExam === 1)
|| (item === '学习效果分析' && projectInfo.existEffect === 1)"
v-for="(item, index) in tapList"
:class="{'active': index === cIndex}"
:key="index"
@click="clickTab(index)"
>{{item}}</li>
</ul>
<span class="over"></span>
<span class="border"></span>
</div>
</template>
<script>
export default {
data() {
return {
cIndex: 0,
tapList: [
"总体概况",
"人群分析",
"课程分析",
"考试分析",
"学习效果分析"
]
};
},
props: {
projectInfo: {
type: Object
}
},
mounted() {},
methods: {
clickTab(index) {
this.cIndex = index;
this.$emit("tabClicked", index);
}
}
};
</script>
<style lang="scss" scoped>
.common-tabs-wrapper {
display: flex;
position: relative;
top: 0;
left: 0;
z-index: 1;
font-size: 13px;
.common-tabs {
white-space: nowrap;
overflow-x: auto;
padding-bottom: 6px;
font-size: 13px;
li {
display: inline-block;
height: 30px;
line-height: 30px;
font-size: 13px;
font-weight: 700;
margin: 0 6px;
color: #979899;
background: #f0f1f2;
padding: 0 12px;
border-radius: 30px;
&:first-child {
margin-left: 15px;
}
&.active {
color: #449284;
background: #e3efed;
}
}
margin-top: 0;
}
.over {
display: block;
position: absolute;
bottom: 0px;
left: 0;
width: 100%;
height: 6px;
z-index: 2;
background: #fff;
}
.border {
display: block;
width: 100%;
height: 1px;
bottom: -3px;
left: 0;
border-bottom: 1px solid #f0f1f2;
position: absolute;
z-index: 2;
}
}
</style>
components/common/common-tabs.vue
浏览文件 @ c4665e61
<!-- Tabs组件 --> <!-- Tabs组件 -->
<template> <template>
<div class="common-tabs-wrapper"> <div class="common-tabs-wrapper" :class="{'fixed': needFixed}">
<ul class="common-tabs"> <ul class="common-tabs">
<li <li
v-show="(item === '总体概况' v-show="(item === '总体概况'
...@@ -35,6 +35,10 @@ export default { ...@@ -35,6 +35,10 @@ export default {
props: { props: {
projectInfo: { projectInfo: {
type: Object type: Object
},
needFixed: {
type: Boolean,
default: false
} }
}, },
mounted() {}, mounted() {},
...@@ -49,6 +53,12 @@ export default { ...@@ -49,6 +53,12 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.common-tabs-wrapper { .common-tabs-wrapper {
&.fixed {
position: fixed;
top: 70px;
z-index: 10000000;
background: #fff;
}
display: flex; display: flex;
position: relative; position: relative;
top: 0; top: 0;
...@@ -58,8 +68,9 @@ export default { ...@@ -58,8 +68,9 @@ export default {
.common-tabs { .common-tabs {
white-space: nowrap; white-space: nowrap;
overflow-x: auto; overflow-x: auto;
padding-bottom: 6px; padding: 9px 0;
font-size: 13px; font-size: 13px;
// padding: 5px 0;
li { li {
display: inline-block; display: inline-block;
height: 30px; height: 30px;
...@@ -87,19 +98,19 @@ export default { ...@@ -87,19 +98,19 @@ export default {
bottom: 0px; bottom: 0px;
left: 0; left: 0;
width: 100%; width: 100%;
height: 6px; height: 9px;
z-index: 2; z-index: 10000000;
background: #fff; background: #fff;
} }
.border { .border {
display: block; display: block;
width: 100%; width: 100%;
height: 1px; height: 1px;
bottom: -3px; bottom: 0px;
left: 0; left: 0;
border-bottom: 1px solid #f0f1f2; border-bottom: 1px solid #f0f1f2;
position: absolute; position: absolute;
z-index: 2; z-index: 10000000;
} }
} }
</style> </style>
components/common/common-title-with-what.vue
浏览文件 @ c4665e61
...@@ -2,7 +2,6 @@ ...@@ -2,7 +2,6 @@
<template> <template>
<ul class="common-title-with-what"> <ul class="common-title-with-what">
<li class="left">{{title}}<img @click="tipsClick" src="../../assets/images/what-icon-1.png" /></li> <li class="left">{{title}}<img @click="tipsClick" src="../../assets/images/what-icon-1.png" /></li>
<!-- <li v-if="needRightBtn"></li> -->
</ul> </ul>
</template> </template>
<script> <script>
......
package.json
浏览文件 @ c4665e61
...@@ -18,8 +18,7 @@ ...@@ -18,8 +18,7 @@
"koa": "^2.6.2", "koa": "^2.6.2",
"nuxt": "^2.0.0", "nuxt": "^2.0.0",
"v-charts": "^1.19.0", "v-charts": "^1.19.0",
"vant": "^2.2.13", "vant": "^2.2.13"
"vconsole": "^3.3.4"
}, },
"devDependencies": { "devDependencies": {
"@nuxtjs/axios": "^5.5.4", "@nuxtjs/axios": "^5.5.4",
......
pages/index-old.vue 0 → 100644
浏览文件 @ c4665e61
此差异已折叠。
pages/index.vue
浏览文件 @ c4665e61
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
<section class="container"> <section class="container">
<CommonHeader :title="projectInfo.projectName | shortName"></CommonHeader> <CommonHeader :title="projectInfo.projectName | shortName"></CommonHeader>
<CommonAreaSelect <CommonAreaSelect
v-show="!isScroll"
@areaClick="areaTabClick" @areaClick="areaTabClick"
@orgClick="orgTabClick" @orgClick="orgTabClick"
:areaName="areaName" :areaName="areaName"
...@@ -9,8 +10,9 @@ ...@@ -9,8 +10,9 @@
:showArea="isShowArea" :showArea="isShowArea"
:showOrg="isShowOrg"> :showOrg="isShowOrg">
</CommonAreaSelect> </CommonAreaSelect>
<CommonTaps :projectInfo="projectInfo" @tabClicked="tabClicked"></CommonTaps> <CommonTaps :needFixed="isScroll" :projectInfo="projectInfo" @tabClicked="tabClicked"></CommonTaps>
<!-- 总体概况 --> <!-- 总体概况 -->
<div v-show="isScroll" class="pd-top-60"></div>
<article v-show="cIndex === 0"> <article v-show="cIndex === 0">
<CommonSwiperItem <CommonSwiperItem
:isSingleOrg="isSingleOrg" :isSingleOrg="isSingleOrg"
...@@ -156,7 +158,7 @@ import ExamList from "@/components/bussiness/exam-list"; ...@@ -156,7 +158,7 @@ import ExamList from "@/components/bussiness/exam-list";
import PopTips from "@/components/bussiness/pop-tips"; import PopTips from "@/components/bussiness/pop-tips";
import CommonCard from "@/components/common/common-card"; import CommonCard from "@/components/common/common-card";
import { getGeneralData } from "@/service/index"; import { getGeneralData } from "@/service/index";
let timeOutId = null;
export default { export default {
components: { components: {
CommonHeader, CommonHeader,
...@@ -193,6 +195,7 @@ export default { ...@@ -193,6 +195,7 @@ export default {
}, },
data() { data() {
return { return {
isScroll: false,
isShowArea: false, isShowArea: false,
isShowOrg: false, isShowOrg: false,
isShowTips: false, isShowTips: false,
...@@ -339,8 +342,30 @@ export default { ...@@ -339,8 +342,30 @@ export default {
if (this.$rocNative.isWeb) { if (this.$rocNative.isWeb) {
this.getProjectInfo(this.queryParams); this.getProjectInfo(this.queryParams);
} }
window.addEventListener(
'scroll',
() => {
if (timeOutId) {
clearTimeout(timeOutId);
}
timeOutId = setTimeout(this.handleScroll, 10);
},
false
);
}, },
methods: { methods: {
handleScroll() {
var scrollTop =
window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop;
if (scrollTop > 5) {
this.isScroll = true;
} else {
this.isScroll = false;
}
},
// 获取可区域高度 // 获取可区域高度
getViewportHeight() { getViewportHeight() {
var doc = document; var doc = document;
...@@ -498,7 +523,6 @@ export default { ...@@ -498,7 +523,6 @@ export default {
if(viewportHeight > (468 + (courseLength - 1) * 60)) { if(viewportHeight > (468 + (courseLength - 1) * 60)) {
this.needFixedBottomInfo = true; this.needFixedBottomInfo = true;
} }
console.log(viewportHeight, (468 + (courseLength - 1) * 60))
} }
}); });
}, },
...@@ -651,8 +675,8 @@ export default { ...@@ -651,8 +675,8 @@ export default {
}, },
// 弹出提示信息二 // 弹出提示信息二
tipsSwiperClick() { tipsSwiperClick(tipsContent) {
this.tipsContent = '是已获证人数/应参与人数*100%' this.tipsContent = tipsContent; //'是已获证人数/应参与人数*100%'
this.isShowTips = true this.isShowTips = true
}, },
...@@ -706,5 +730,8 @@ export default { ...@@ -706,5 +730,8 @@ export default {
bottom: 0; bottom: 0;
left: 0; left: 0;
} }
.pd-top-60 {
padding-top: 40px;
}
} }
</style> </style>
plugins/vue-inject.js
浏览文件 @ c4665e61
import Vue from 'vue' import Vue from 'vue'
import rocNative from '@/utils/jsbridge' import rocNative from '@/utils/jsbridge'
import echarts from 'echarts' import echarts from 'echarts'
import { DropdownMenu, DropdownItem } from 'vant';
import { Toast } from 'vant'; import { Toast } from 'vant';
// import picaArea from 'pica-area'
// Vue.use(picaArea)
Vue.use(Toast); Vue.use(Toast);
// Vue.filter('formatNum',function(num, arg1, arg2){ // import VConsole from 'vconsole/dist/vconsole.min.js' //import vconsole
// var str = num + ''; // let vConsole = new VConsole() // 初始化
// return str.split("").reverse().reduce((prev, next, index) => {
// return ((index % 3) ? next : (next + ',')) + prev;
// })
// })
import VConsole from 'vconsole/dist/vconsole.min.js' //import vconsole
let vConsole = new VConsole() // 初始化
Vue.use(DropdownMenu).use(DropdownItem);
Vue.prototype.$echarts = echarts Vue.prototype.$echarts = echarts
Vue.prototype.$rocNative = new rocNative(); Vue.prototype.$rocNative = new rocNative();
\ No newline at end of file
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或