Skip to content

ZhangJianFrontEnd
ZhangJianFrontEnd
Commit 866742ef by zsh
Options

Merge branch '20210819' of 123.207.147.179:vue-project/liangXing/frontEnd into 20210819

parents f759ebb2 397b10c7
Showing with 480 additions and 453 deletions
src/components/PopupFrame.vue 0 → 100644
<template>
<div class="PopupFrame" v-if="visible">
<div class="iframe" :style="`width:${layout.width};height:${layout.height}`">
<!-- <div class="title">
<span>
{{ title }}
</span>
</div> -->
<div class="close" @click="closeBullet"></div>
<div class="content">
<!-- 内容部分 -->
<slot></slot>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'PopupFrame',
data () {
return {
}
},
props: {
visible: {
type: Boolean,
default: false
},
title: '',
layout: {
type: Object,
default () {
return {
width: '1440px',
height: '815px'
}
}
}
},
components: {
},
methods: {
// 关闭弹出框
closeBullet () {
this.$emit('beforeClose', false)
}
}
}
</script>
<style lang="less">
.PopupFrame {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 101;
background-color: rgba(0, 0, 0, 0.6);
display: flex;
justify-content: center;
align-items: center;
.iframe {
width: 1280px;
height: 721px;
position: relative;
background-color: rgba(0, 0, 0, 0.8);
.title {
width: 1090px;
height: 38px;
text-align: center;
margin: 0 auto;
span {
font-size: 22px;
font-family: Source Han Sans CN;
font-weight: bold;
color: #ffffff;
line-height: 22px;
background: linear-gradient(0deg, #a3dcff 0%, #ffffff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
position: relative;
top: 7px;
}
}
.content {
margin-top: 15px;
}
.close {
width: 24px;
height: 24px;
background: url('../../static/images/index/bulletFrame-close.png')
no-repeat left top;
position: absolute;
top: 36px;
right: 19px;
cursor: pointer;
}
}
}
</style>
\ No newline at end of file
src/components/echarts/BarChart.vue
......@@ -116,7 +116,7 @@ export default {
show: false
},
grid: {
left: -10,
left: 0,
right: 35,
bottom: 0,
top: 0,
......
src/pages/index/Left.vue
......@@ -8,16 +8,16 @@
</div>
<div class="details">
<p class="percent">
<span>{{genderPercent.male}}</span>
<span>{{genderPercent.female}}</span>
<span>{{genderPercent.malePer}}</span>
<span>{{genderPercent.femalePer}}</span>
</p>
<div class="line">
<span class="male" :style={width:genderPercent.male}></span>
<span class="female" :style={width:genderPercent.female}></span>
<span class="male" :style={width:genderPercent.malePer}></span>
<span class="female" :style={width:genderPercent.femalePer}></span>
</div>
<p class="num">
<span>{{gender.male | dealWithNumber}}</span>
<span>{{gender.female | dealWithNumber}}</span>
<span>{{genderPercent.male | dealWithNumber}}</span>
<span>{{genderPercent.female | dealWithNumber}}</span>
</p>
</div>
<div class="female">
......@@ -48,14 +48,14 @@
</div>
<ul>
<li v-for="(item, index) in distribution[distShowKey]" :key="index">
<p>{{item.name}}</p>
<p>{{item.key}}</p>
<count-to :endVal="item.value"/>
</li>
</ul>
</div>
<!-- 行业分布 -->
<div class="industry">
<div class="partTitle margin20-10">年龄结构</div>
<div class="partTitle margin20-10">行业分布</div>
<bar-chart :option="industryConfig.option" :layout="industryConfig.layout" />
</div>
<!-- 参与度|活跃度 -->
......@@ -78,9 +78,9 @@
<div class="studentDemeanor" v-if="greatKey === 0">
<swiper :options="swiperOption">
<swiper-slide v-for="(item, index) in studentDemeanor" :key="index">
<img :src="item.pic" alt="照片" @click="openStudent(index)">
<img :src="item.iconUrl" alt="照片" @click="openStudent(index)">
<p>{{item.name}}</p>
<p>{{item.position}}</p>
<p>{{item.desc}}</p>
</swiper-slide>
</swiper>
</div>
......@@ -93,10 +93,7 @@
>
<ul>
<li v-for="(item, index) in starClass" :key="index">
<span>{{item.name}}</span>
<span>{{item.content1}}</span>
<span>{{item.content2}}</span>
<span>{{item.content3}}</span>
<span v-for="(con, i) in item" :key="i + 'key'">{{con}}</span>
</li>
</ul>
</vue-seamless-scroll>
......@@ -142,233 +139,40 @@ export default {
data () {
return {
// 男女学员数量
gender: {
male: 92768,
female: 41768
// 男女学员比例
genderPercent: {
male: 0,
female: 0,
malePer: '0%',
femalePer: '0%'
},
genderPercent: {},
// 年龄数据
age: [
{
name: '60’s',
value: 32
}, {
name: '70’s',
value: 106
}, {
name: '80’s',
value: 184
}, {
name: '90’s',
value: 131
}
],
// 平均年龄
ageAverage: 45.7,
ageAverage: 0,
// 年龄结构配置
ageConfig: {},
// 学历数据
edu: [
{value: 735, name: '大专'},
{value: 580, name: '本科'},
{value: 484, name: '硕士'},
{value: 300, name: '博士以上'}
],
// 学历情况配置
eduConfig: {},
// 分布
distribution: {
// 党派
party: [
{
name: '民革',
value: 4293
}, {
name: '民盟',
value: 4293
}, {
name: '民健',
value: 4293
}, {
name: '民进',
value: 4293
}, {
name: '无党派',
value: 4293
}
],
party: [],
// 民族
ethnic: [
{
name: '汉族',
value: 3924
}, {
name: '藏族',
value: 3924
}, {
name: '维吾尔族',
value: 3924
}, {
name: '白族',
value: 3924
}, {
name: '苗族',
value: 3924
}
]
ethnic: []
},
// 分布当前展示数据标识
distShowKey: 'party',
// 行业分布
industry: [
{
name: '家电行业',
value: 4172
}, {
name: '电子信息',
value: 892
}, {
name: '机械制造',
value: 8321
}, {
name: '纺织生产',
value: 1892
}, {
name: '生物医药',
value: 1892
}
],
industryConfig: {
layout: {
height: '143px'
}
},
// 参与度活跃度
degree: {
// 参与度
participate: [
{
name: '课程',
value: [
{
name: '0-20%',
value: 100
}, {
name: '21-40%',
value: 180
}, {
name: '41-60%',
value: 310
}, {
name: '61-80%',
value: 380
}, {
name: '81-100%',
value: 489
}
]
}, {
name: '活动',
value: [
{
name: '0-20%',
value: 30
}, {
name: '21-40%',
value: 110
}, {
name: '41-60%',
value: 220
}, {
name: '61-80%',
value: 310
}, {
name: '81-100%',
value: 320
}
]
}
],
// 活跃度
active: [
{
name: '课程',
value: [
{
name: '0-20%',
value: 100
}, {
name: '21-40%',
value: 29
}, {
name: '41-60%',
value: 300
}, {
name: '61-80%',
value: 200
}, {
name: '81-100%',
value: 300
}
]
}, {
name: '活动',
value: [
{
name: '0-20%',
value: 30
}, {
name: '21-40%',
value: 80
}, {
name: '41-60%',
value: 20
}, {
name: '61-80%',
value: 400
}, {
name: '81-100%',
value: 500
}
]
}
]
},
degree: {},
degreeKey: '',
degreeConfig: {},
// 学员风采
studentDemeanor: [
{
pic: require('../../../static/images/index/persion.png'),
name: '白岩松1',
position: '主持人/作家'
}, {
pic: require('../../../static/images/index/persion.png'),
name: '白岩松2',
position: '主持人/作家'
}, {
pic: require('../../../static/images/index/persion.png'),
name: '白岩松3',
position: '主持人/作家'
}, {
pic: require('../../../static/images/index/persion.png'),
name: '白岩松4',
position: '主持人/作家'
}, {
pic: require('../../../static/images/index/persion.png'),
name: '白岩松5',
position: '主持人/作家'
}, {
pic: require('../../../static/images/index/persion.png'),
name: '白岩松6',
position: '主持人/作家'
}, {
pic: require('../../../static/images/index/persion.png'),
name: '白岩松7',
position: '主持人/作家'
}
],
studentDemeanor: [],
swiperOption: {
loop: false,
autoplay: false,
......@@ -376,34 +180,7 @@ export default {
slidesPerView: 4.5
},
// 明星班级
starClass: [
{
name: '2021年秋季班（21人）',
content1: '5人博士后',
content2: '6人博士',
content3: '5人企业家'
}, {
name: '2021年秋季班（22人）',
content1: '5人博士后',
content2: '6人博士',
content3: '5人企业家'
}, {
name: '2021年秋季班（23人）',
content1: '5人博士后',
content2: '6人博士',
content3: '5人企业家'
}, {
name: '2021年秋季班（24人）',
content1: '5人博士后',
content2: '6人博士',
content3: '5人企业家'
}, {
name: '2021年秋季班（25人）',
content1: '5人博士后',
content2: '6人博士',
content3: '5人企业家'
}
],
starClass: [],
classOption: {
step: 0.35,
singleHeight: 50
......@@ -418,56 +195,86 @@ export default {
methods: {
init () {
this.dealGender()
this.getAge()
this.getEdu()
this.getIndustry()
this.changeDegree('participate')
const {
gender,
age,
edu,
party,
ethnic,
industry,
participate,
active,
studentDemeanor,
starClass
} = this.leftData
this.dealGender(gender)
this.getAge(age)
this.getEdu(edu)
this.getDist(party, ethnic)
this.getIndustry(industry)
this.getDegree(participate, active)
this.getStudent(studentDemeanor)
this.getClass(starClass)
},
// 求性别百分比
dealGender () {
const arr = Object.values(this.gender)
const total = arr.reduce((pre, next) => pre + next)
dealGender (data) {
// total为1防止NAN
const total = data.total || 1
const maleItem = data.list && data.list.find(item => item.key === '男')
const male = maleItem.value || 0
const femaleItem = data.list && data.list.find(item => item.key === '女')
const female = femaleItem.value || 0
this.genderPercent = {
male: (this.gender.male * 100 / total).toFixed(1) + '%',
female: (this.gender.female * 100 / total).toFixed(1) + '%'
male,
female,
malePer: (male * 100 / total).toFixed(1) + '%',
femalePer: (female * 100 / total).toFixed(1) + '%'
}
},
// 年龄结构
getAge () {
getAge (data) {
this.ageAverage = data.subTitleValue || 0
const age = data.list || []
this.ageConfig = {
option: {
seriesData: [
{
data: this.age.map(item => item.value).reverse()
data: age.map(item => item.value).reverse()
}
],
base: {
yAxis: [{
data: this.age.map(item => item.name).reverse()
data: age.map(item => item.key).reverse()
}]
}
}
}
},
// 学历情况
getEdu () {
getEdu (data) {
const edu = this.formatArr(data.list || [])
this.eduConfig = {
option: {
seriesData: [
{
data: this.edu
data: edu
}
]
}
}
},
// 党派/民族分布
getDist (data1, data2) {
this.distribution.party = data1.list || []
this.distribution.ethnic = data2.list || []
},
// 切换党派/民族
changeDist (type) {
this.distShowKey = type
},
// 行业分布
getIndustry () {
getIndustry (data) {
const industry = data.list || []
this.industryConfig.option = {
seriesData: [
{
......@@ -477,7 +284,7 @@ export default {
return utils.dealWithNumber(item.value)
}
},
data: this.industry.map(item => item.value).reverse()
data: industry.map(item => item.value).reverse()
}
],
base: {
......@@ -492,11 +299,37 @@ export default {
padding: [0, 10, 0, 0],
fontFamily: 'Microsoft YaHei'
},
data: this.industry.map(item => item.name).reverse()
data: industry.map(item => item.key).reverse()
}]
}
}
},
// 获取参与度与活跃度数据
getDegree (data1, data2) {
// 参与度
const oldParticipate = data1.list || []
const participate = []
oldParticipate.forEach(item => {
participate.push({
name: item.title,
value: this.formatArr(item.list || [])
})
})
// 活跃度
const oldActive = data2.list || []
const active = []
oldActive.forEach(item => {
active.push({
name: item.title,
value: this.formatArr(item.list || [])
})
})
this.degree = {
participate,
active
}
this.changeDegree('participate')
},
// 切换参与度与活跃度
changeDegree (type) {
this.degreeKey = type
......@@ -542,8 +375,29 @@ export default {
}
},
// 学员风采
getStudent (data) {
this.studentDemeanor = data.list || []
},
// 明星班级
getClass (data) {
this.starClass = data.valueList || []
},
// 打开学员风采弹框
openStudent (index) {
console.log(index)
},
// 把数组中的key转成name
formatArr (arr) {
const newArr = []
if (this.utils.isArray(arr) && arr.length) {
arr.forEach(item => {
newArr.push({
name: item.key,
value: item.value
})
})
}
return newArr
}
}
}
......@@ -586,7 +440,7 @@ export default {
span {
width: 0%;
height: 8px;
transition: width linear 300ms;
transition: width linear 1000ms;
&.male {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
......@@ -718,6 +572,7 @@ export default {
.img {
width: 88px;
height: 88px;
border-radius: 50%;
}
p {
font-size: 14px;
......@@ -747,7 +602,10 @@ export default {
font-weight: 400;
color: #6DCDFF;
line-height: 34px;
padding: 8px 0px 8px 40px;
font-size: 16px;
padding: 8px 10px 8px 40px;
display: flex;
justify-content: space-between;
}
}
}
......
src/pages/index/Right.vue
......@@ -18,9 +18,10 @@
<div class="seemore">查看更多</div>
</div>
<p class="percent">
<span>课程数<count-to :endVal="120" /></span>
<span>学习总时长<count-to :endVal="1248" /></span>
<span>出勤率<count-to :endVal="88" suffix="%"/></span>
<span v-for="(item, l) in coursedata" :key="l">
{{item.name}}
<count-to :endVal="item.value" :suffix="item.unit"/>
</span>
</p>
<div class="line">
<bar-chart :layout="lineConfig.layout" :option="lineConfig.option" />
......@@ -35,7 +36,16 @@
<div class='activ'>
<active />
</div>
<popup-frame
:visible.sync="showVisible"
@beforeClose="beforeCloses"
>
<div class="img">
<img src="../../../static/images/index/supply-demand2.jpg" alt="">
</div>
</popup-frame>
<div class="right-bottom">
<div class="seemore" @click="topicDialog">查看更多</div>
<title-line :con="'交流会/专题'"></title-line>
<div class="topic">
<div class="left">
......@@ -125,8 +135,17 @@ export default {
swiperSlide,
active
},
props: {
rightData: {
type: Object,
default () {
return {}
}
}
},
data () {
return {
showVisible: false,
// 师资力量
eduConfig: {},
edu: [
......@@ -149,6 +168,21 @@ export default {
}
],
// 教学课程
coursedata: [
{
name: '课程数',
value: 120
},
{
name: '学习总时长',
value: 1248
},
{
name: '出勤率',
value: 88,
unit: '%'
}
],
lineConfig: {},
line: [
{
......@@ -227,109 +261,98 @@ export default {
this.getlearn()
},
methods: {
// 学习内容
getlearn () {
const xData = this.learn.map(v => v.name)
const Data = this.learn.map(v => v.value)
this.learnConfig = {
layout: {
width: '100%',
height: '136px'
},
// 师资力量
getstaff () {
this.staffConfig = {
option: {
seriesData: [
{
data: this.staff.map(item => item.value).reverse()
}
],
base: {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line' // 默认为直线，可选为：'line' | 'shadow'
},
textStyle: {
color: '#ffffff'
},
backgroundColor: 'rgba(55, 128, 246, 0.2)',
borderColor: 'rgba(55, 128, 246, 0.2)'
},
grid: {
left: 0,
right: 0,
bottom: 0,
top: 10,
containLabel: true
},
xAxis: {
type: 'category',
axisTick: {
show: false
},
axisLine: {
show: false,
lineStyle: {
color: 'rgba(17, 63, 116, 1)'
}
},
splitLine: {
show: false
},
axisLabel: {
show: true,
fontSize: 14,
color: '#469CCC'
},
data: xData
},
yAxis: [{
type: 'value',
max: 'dataMax',
axisLine: {
show: true,
lineStyle: {
color: 'rgba(17, 63, 116, 1)'
}
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(17, 63, 116, 1)'
}
},
axisTick: {
show: false
},
axisLabel: {
formatter: '{value}%',
textStyle: {
fontSize: 14,
fontFamily: 'Century Gothic',
fontWeight: 400,
color: '#469CCC'
}
},
boundaryGap: ['20%', '20%']
data: this.staff.map(item => item.name).reverse()
}]
}
}
}
},
getEdu () {
this.eduConfig = {
option: {
base: {
color: [],
legend: {
show: false
}
},
seriesData: [
{
type: 'bar',
barWidth: 6,
type: 'pie',
name: '师资力量',
itemStyle: {
color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 1,
color: '#24E8FF'
normal: {
label: {
show: false
},
{
offset: 0,
color: '#00BEFf'
}
]),
shadowOffsetY: 0,
shadowOffsetX: 0,
barBorderRadius: [3, 3, 0, 0]
},
label: {
show: false
labelLine: {
show: false
},
shadowBlur: 0,
shadowColor: '#3EB8F7'
}
},
data: Data
clockWise: false,
hoverAnimation: false,
center: ['38%', '50%'],
radius: ['65%', '78%'],
data: [
{
value: this.edu[0].value,
label: {
normal: {
rich: {
a: {
color: '#fff',
align: 'center',
fontSize: 30,
fontWeight: '400'
},
b: {
color: '#fff',
align: 'center',
fontWeight: '400',
fontSize: 18
}
},
formatter: function (params) {
return '{a|' + params.value + '}\n{b|教师数}'
},
position: 'center',
show: true
}
},
itemStyle: {
normal: {
color: '#3EB8F7',
shadowColor: '#2c6cc4',
shadowBlur: 0
}
}
}, {
value: this.edu[0].value / 2 + 20,
name: 'invisible',
itemStyle: {
normal: {
color: 'rgba(0, 12, 27)'
},
emphasis: {
color: '#fff'
}
}
}
]
}
]
}
......@@ -435,95 +458,119 @@ export default {
}
}
},
getEdu () {
this.eduConfig = {
// 学习内容
getlearn () {
const xData = this.learn.map(v => v.name)
const Data = this.learn.map(v => v.value)
this.learnConfig = {
layout: {
width: '100%',
height: '136px'
},
option: {
base: {
legend: {
show: false
}
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line'
},
textStyle: {
color: '#ffffff'
},
backgroundColor: 'rgba(55, 128, 246, 0.2)',
borderColor: 'rgba(55, 128, 246, 0.2)'
},
grid: {
left: 0,
right: 0,
bottom: 0,
top: 10,
containLabel: true
},
xAxis: {
type: 'category',
axisTick: {
show: false
},
axisLine: {
show: false,
lineStyle: {
color: 'rgba(17, 63, 116, 1)'
}
},
splitLine: {
show: false
},
axisLabel: {
show: true,
fontSize: 14,
color: '#469CCC'
},
data: xData
},
yAxis: [{
type: 'value',
max: 'dataMax',
axisLine: {
show: true,
lineStyle: {
color: 'rgba(17, 63, 116, 1)'
}
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(17, 63, 116, 1)'
}
},
axisTick: {
show: false
},
axisLabel: {
formatter: '{value}%',
textStyle: {
fontSize: 14,
fontFamily: 'Century Gothic',
fontWeight: 400,
color: '#469CCC'
}
},
boundaryGap: ['20%', '20%']
}]
},
seriesData: [
{
type: 'pie',
name: '师资力量',
type: 'bar',
barWidth: 6,
itemStyle: {
normal: {
shadowBlur: 0,
shadowColor: '#3EB8F7'
}
},
clockWise: false,
hoverAnimation: false,
center: ['38%', '50%'],
radius: ['65%', '78%'],
data: [
{
value: this.edu[0].value,
label: {
normal: {
rich: {
a: {
color: '#fff',
align: 'center',
fontSize: 30,
fontWeight: '400'
},
b: {
color: '#fff',
align: 'center',
fontWeight: '400',
fontSize: 18
}
},
formatter: function (params) {
return '{a|' + params.value + '}\n\n{b|教师数}'
},
position: 'center',
show: true
}
color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 1,
color: '#24E8FF'
},
itemStyle: {
normal: {
color: '#3EB8F7',
shadowColor: '#2c6cc4',
shadowBlur: 0
}
}
}, {
value: this.edu[0].value / 2 + 20,
name: 'invisible',
itemStyle: {
normal: {
color: 'rgba(0, 12, 27)'
},
emphasis: {
color: '#fff'
}
{
offset: 0,
color: '#00BEFf'
}
}
]
]),
barBorderRadius: [3, 3, 0, 0]
},
label: {
show: false
},
data: Data
}
]
}
}
},
// 师资力量
getstaff () {
this.staffConfig = {
option: {
seriesData: [
{
data: this.staff.map(item => item.value).reverse()
}
],
base: {
yAxis: [{
data: this.staff.map(item => item.name).reverse()
}]
}
}
}
// 交流会/专题弹框
topicDialog () {
this.showVisible = true
},
// 关闭交流会/专题弹框弹框前的回调
beforeCloses (flag) {
this.showVisible = flag
}
}
}
......@@ -564,7 +611,7 @@ export default {
font-family: Microsoft YaHei;
font-weight: 400;
color: #18d1c6;
background: url('./../../../static/images/index/查看更多.png')
background: url('./../../../static/images/index/more.png')
no-repeat right;
}
}
......@@ -599,6 +646,20 @@ export default {
height: 150px;
}
.right-bottom {
position: relative;
.seemore {
position: absolute;
top: 0;
right: 0;
width: 94px;
cursor: pointer;
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #18d1c6;
background: url('./../../../static/images/index/more.png')
no-repeat right;
}
.topic {
margin-top: 19px;
width: 482px;
......@@ -641,16 +702,10 @@ export default {
margin-top: 5px;
display: flex;
justify-content: space-between;
// .swiper-pagination-bullet {
// width: 6px;
// height: 6px;
// background: rgba(62, 157, 247, 0.4);
// }
// .swiper-pagination-bullet-active {
// background: #3e9df7;
// }
}
.swiper-pagination-bullet {
width: 6px;
height: 6px;
background: rgba(62, 157, 247, 0.4);
}
.swiper-pagination-bullet-active {
......@@ -675,7 +730,7 @@ export default {
font-weight: 400;
color: #ffffff;
left: 3px;
top: 5px;
top: 6px;
}
span:nth-child(2) {
left: 20px;
......@@ -687,7 +742,7 @@ export default {
}
span:nth-child(4) {
left: 16px;
top: 108px;
top: 105px;
}
}
.text {
......@@ -705,7 +760,7 @@ export default {
font-weight: 400;
color: #ffffff;
left: 0;
top: 7px;
top: 9px;
}
.item:nth-child(2) {
left: 10px;
......@@ -713,7 +768,7 @@ export default {
}
.item:nth-child(3) {
left: 0;
top: 80px;
top: 78px;
}
.item:nth-child(4) {
left: 10px;
......
src/pages/index/active.vue
......@@ -142,7 +142,7 @@ export default {
width: 28px;
height: 24px;
// margin-top: 5px!important;
background:url('../../../static/images/index/查看更多.png') no-repeat;
background:url('../../../static/images/index/more.png') no-repeat;
}
}
......
src/pages/index/index.vue
......@@ -74,6 +74,10 @@ export default {
}
// 右侧数据
this.rightData = {
staff: data.p12 || {}, // 师资力量
coursedata: data.p13 || {}, // 教学课程
line: data.p14 || {}, // 教学线上线下比例
learn: data.p15 || {} // 学习内容
}
} catch (err) {
console.log('managePlatform >', err)
......
src/public/plugins/index.js
......@@ -6,6 +6,7 @@ import ContentContainer from 'components/ContentContainer'
import Header from 'components/Header'
// 插件
import CountTo from 'components/CountTo.vue'
import PopupFrame from '@/components/PopupFrame'
const UsePlugin = {}
......@@ -22,6 +23,8 @@ UsePlugin.install = function (Vue, options = {}) {
Vue.component('page-head', Header)
// 数组滚动
Vue.component('count-to', CountTo)
// 弹框组件
Vue.component('popup-frame', PopupFrame)
}
export default UsePlugin
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment