Skip to content

ZhangJianFrontEnd
ZhangJianFrontEnd
Commit cfb16da4 by yangqingjie
Options

add

parents cdc0e44c 35c1303d
Showing with 429 additions and 3 deletions
src/components/CountTo.vue 0 → 100644
<template>
<CountTo
:startVal="startVal"
:endVal="endVal"
:duration="duration"
:decimals="decimals"
:separator="separator"
:suffix="suffix"
:prefix="prefix"
/>
</template>
<script>
import CountTo from 'vue-count-to'
export default {
name: 'VueCountTo', // TODO: 数字变动组件
components: { CountTo },
props: {
autoplay: { type: Boolean, default: true }, // 自动播放 默认为 True
startVal: { type: Number, default: 0 }, // 起始值
endVal: { type: Number, default: 0 }, // 结束值
duration: { type: Number, default: 800 }, // 持续时间，以毫秒为单位
decimals: { type: Number, default: 0 }, // 要显示的小数位数
separator: { type: String, default: ',' }, // 分隔符
prefix: { type: String, default: '' }, // 前缀
suffix: { type: String, default: '' } // 后缀
}
}
</script>
<style scoped>
span {
font-family: "Century Gothic";
}
</style>
src/components/Swiper/index.vue 0 → 100644
<template>
<swiper :options="swiperOption">
<slot>
<!-- 滚动内容 -->
<!-- 下面的按需求引入 -->
</slot>
<!-- <div class="swiper-pagination" slot="pagination"></div>
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div> -->
</swiper>
</template>
<script>
import { swiper } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
export default {
name: 'Swiper',
props: {
options: {
type: Object,
default () {
return {}
}
}
},
data () {
return {
swiperOption: {
// 滚动方向
// direction: 'vertical',
// 展示swiper-slide的个数
slidesPerView: 1,
// 展示swiper-slide是否居中
centeredSlides: true,
autoplay: {
delay: 3000,
disableOnInteraction: false // 手动切换之后继续自动轮播
},
loop: true
// 显示分页
// pagination: {
// el: '.swiper-pagination',
// clickable: true // 允许分页点击跳转
// },
// 设置点击箭头
// navigation: {
// nextEl: '.swiper-button-next',
// prevEl: '.swiper-button-prev'
// }
}
}
},
components: {
swiper
},
created () {
this.initPage()
},
methods: {
initPage () {
// 合并参数
Object.assign(this.swiperOption, this.options)
}
}
}
</script>
<style lang="less" scoped>
.swiper-container {
position: relative;
width: 100%;
height: 100%;
.swiper-slide {
width: 100%;
height: 100%;
}
}
</style>
\ No newline at end of file
src/components/echarts/LineChart.vue 0 → 100644
<template>
<chart-el :chartOpt="chartConf" />
</template>
<script>
import mixinChart from 'runner/common/mixins/mixinChart'
export default {
name: 'LineChart',
mixins: [mixinChart],
data () {
return {
chartConf: {}
}
},
props: {
// 图表布局配置 - width, height
layout: {
type: Object,
default () {
return {
width: '100%',
height: '160px'
}
}
},
// 图表配置
option: {
type: Object,
default () {
return {
base: {},
seriesData: []
}
}
}
},
mounted () {
this.initComponents()
},
methods: {
initComponents () {
const { width = '100%', height = '160px' } = this.layout
const option = this.getChartOption() || {}
this.chartConf = {
width,
height,
option
}
},
/**
* @method getSeriesData 图表数据
*/
getSeriesData () {
const defSeriesOpts = {
type: 'line',
symbol: 'circle',
symbolSize: 4,
lineStyle: {
width: 2,
shadowOffsetX: 5,
shadowOffsetY: 3,
shadowBlur: 20
},
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(36, 139, 255, 0.85)' // 0% 处的颜色
}, {
offset: 1, color: 'rgba(0, 190, 255, 0.11)' // 100% 处的颜色
}],
global: false // 缺省为 false
}
},
data: []
}
let result = [defSeriesOpts]
const { seriesData = [] } = this.option
if (seriesData.length) {
const temp = []
seriesData.forEach(item => {
temp.push(this.deepMerge({}, defSeriesOpts, item))
})
result = temp
}
return result
},
/**
* @method getSeriesData 图表数据
*/
getChartOption () {
const defaultColors = ['#00BEFF', '#00DE7D']
const defaultOption = {
color: defaultColors,
title: {
show: false
},
legend: {
icon: 'circle',
itemWidth: 8,
itemHeight: 8,
top: '-2%',
right: '0%',
itemGap: 40,
textStyle: {
color: '#fff',
fontSize: 14,
fontFamily: 'MicrosoftYaHei'
},
data: []
},
tooltip: {
trigger: 'item',
position: 'top',
padding: [3, 5],
borderColor: '#3EB9FF',
backgroundColor: '#1771B8',
textStyle: {
height: 12,
fontSize: 14,
color: '#fff'
},
formatter (item) {
return item.value
}
},
grid: {
left: 0,
right: 30,
bottom: 0,
top: 20,
containLabel: true
},
xAxis: {
type: 'category',
// 两边留白
boundaryGap: false,
axisTick: {
show: false
},
axisLabel: {
textStyle: {
fontSize: 14,
fontFamily: 'CenturyGothic',
fontWeight: 400,
color: '#469CCC'
}
},
axisLine: {
show: true,
lineStyle: {
color: '#3EB9FF',
opacity: 0.3
}
},
data: []
},
yAxis: {
type: 'value',
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: '#9CBCF9',
opacity: 0.5
}
},
splitLine: {
show: false
},
axisLabel: {
textStyle: {
fontSize: 14,
fontFamily: 'CenturyGothic',
fontWeight: 400,
color: '#469CCC'
}
}
}
}
// 添加series
const result = this.deepMerge({}, defaultOption, this.option.base)
result.series = this.getSeriesData()
return result
}
}
}
</script>
src/pages/index/Center.vue
<template>
<div class="managePlatform-center"></div>
<div class="managePlatform-center">
<div class="survey-content">
<div class="item" v-for="(g, l) in survey" :key="l">
<count-to :endVal="g.value" />
<p>{{g.name}}</p>
</div>
</div>
<div class="footer">
<div class="item course">
<title-line :con="'发展历程'"></title-line>
<div class="courseModal">
2021年学校成立
***********************
</div>
</div>
<div class="item framework">
<title-line :con="'组织架构'"></title-line>
</div>
</div>
</div>
</template>
<script>
import TitleLine from '@/components/TitleLine'
export default {
name: 'Center',
components: {
TitleLine
},
data () {
return {}
return {
survey: [
{ name: '学员数', value: 31721 },
{ name: '班级数', value: 105 },
{ name: '二级协会数', value: 15 }
]
}
},
mounted () {},
......@@ -18,5 +48,72 @@ export default {
<style lang="less" scoped>
.managePlatform-center {
width: 100%;
position: relative;
.survey-content {
width: 100%;
display: flex;
justify-content: center;
margin-top: 20px;
.item {
width: 220px;
height: 72px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
span {
font-size: 42px;
color: #FFFFFF;
font-weight: 400;
}
p {
font-size: 18px;
font-weight: 400;
color: #FFFFFF;
}
}
.item:nth-child(2) {
border-left: 1px solid rgba(89, 183, 249, 0.8);
border-right: 1px solid rgba(89, 183, 249, 0.8);
}
}
.footer {
width: calc(100% - 30px);
height: 270px;
position: absolute;
left: 15px;
top: 740px;
background: rgba(0, 7, 17, 0.18);
padding: 10px 15px;
display: flex;
justify-content: space-between;
.item {
width: 50%;
height: 100%;
box-sizing: border-box;
}
.course {
background: url('../../../static/images/index/courseBG.png') left top 113px no-repeat;
}
.courseModal {
width: 214px;
height: 75px;
background: rgba(0, 190, 255, 0.1);
border: 1px solid;
border-image: linear-gradient(176deg, rgba(61, 162, 242, 0), #3DA2F2, rgba(10, 79, 135, 0)) 1 1;
box-sizing: border-box;
padding: 8px 12px;
font-size: 14px;
font-weight: 300;
color: #FFFFFF;
line-height: 20px;
margin-top: 10px;
}
.framework{
padding-left: 42px;
background: url('../../../static/images/index/frameworkBG.png') right top 43px no-repeat;
}
}
}
</style>
\ No newline at end of file
src/pages/index/index.vue
......@@ -40,5 +40,8 @@ export default {
</script>
<style lang="less" scoped>
.index-page {
width: 1920px;
margin: 0 auto;
}
</style>
src/public/plugins/index.js
......@@ -4,6 +4,8 @@ import mixins from '../mixins'
import ContentContainer from 'components/ContentContainer'
// 页面头
import Header from 'components/Header'
// 插件
import CountTo from 'components/CountTo.vue'
const UsePlugin = {}
......@@ -18,6 +20,8 @@ UsePlugin.install = function (Vue, options = {}) {
// 内容容器
Vue.component('content-container', ContentContainer)
Vue.component('page-head', Header)
// 数组滚动
Vue.component('count-to', CountTo)
}
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