Skip to content

ZhangJianFrontEnd
ZhangJianFrontEnd
Commit 352cb7c8 by yuanfeng
Options

update

parent c3f58445
Showing with 866 additions and 16 deletions
.gitignore 0 → 100644
node_modules
dist
\ No newline at end of file
index.html
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基础Vue框架</title> <title>张謇教育</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
......
src/App.vue
...@@ -38,6 +38,7 @@ export default { ...@@ -38,6 +38,7 @@ export default {
body { body {
background-color: #011428; background-color: #011428;
background: url('../static/images/index/bg.png') no-repeat left top;
} }
#app { #app {
......
src/components/Header/index.vue
<template> <template>
<header id="header">{{ title }}</header> <!-- 使用双飞翼布局, 兼容低版本浏览器 -->
<div class="header-main">
<div class="header-content">
<span class="title-name">{{ title || '' }}</span>
</div>
<div class="right">
<div class="right-content">
<span class="current-date">{{ currDate }}</span>
<span class="current-time">{{ currTime }}</span>
</div>
</div>
</div>
</template> </template>
<script> <script>
let timer = null
export default { export default {
name: 'Header',
props: {
title: {
type: String,
default: '徐汇区教师队伍整体发展情况分析'
}
},
data () { data () {
return {} return {
currDate: '', // 当前日期, 如: 2021年03月21日
currTime: '' // 当前时间, 如: 14:12:45
}
},
mounted () {
this.getCurrTime()
},
beforeDestroy () {
clearTimeout(timer)
timer = null
}, },
props: ['title'], methods: {
/**
* @method getCurrTime 获取当前时间
*/
getCurrTime () {
const date = new Date()
const year = date.getFullYear()
const month = date.getMonth() + 1
const day = date.getDate()
const hour = date.getHours()
const minute = date.getMinutes()
const second = date.getSeconds()
const fullDate = year + '/' + month + '/' + day
const fullTime = this.utils.zeroPadding(hour) + ':' + this.utils.zeroPadding(minute) + ':' + this.utils.zeroPadding(second)
created () { this.currDate = fullDate
window.vm = this this.currTime = fullTime
timer = setTimeout(this.getCurrTime, 1000)
}
} }
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@headerHeight: 67px;
</style>> .header-main {
position: relative;
width: 100%;
height: @headerHeight;
.header-content {
width: 1169px;
margin-right: auto;
margin-left: auto;
line-height: @headerHeight;
text-align: center;
letter-spacing: 3px;
text-indent: 20px;
background: url('./images/header-bg.png') no-repeat center top;
}
.title-name {
font-size: 34px;
font-family: Microsoft YaHei;
font-weight: bold;
color: #FFFFFF;
background: linear-gradient(0deg, #FFFFFF 0%, #609FF2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.right {
position: absolute;
top: 50%;
right: 32px;
transform: translateY(-50%);
font-size: 22px;
font-family: CenturyGothic;
font-weight: 400;
color: #FFFFFF;
line-height: 71px;
}
}
</style>
src/components/TitleLine/index.vue 0 → 100644
<template>
<div class="title">
<b>{{$attrs.con || ''}}</b>
<div class="underLine">
<p>
<span></span>
</p>
<i :style="{width: $attrs.width || '100%'}"></i>
</div>
</div>
</template>
<script>
export default {
name: 'Title',
data () {
return {}
},
mounted () {},
methods: {}
}
</script>
<style lang="less" scoped>
.title {
b {
font-size: 20px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #FFFFFF;
padding-left: 23px;
}
.underLine {
display: flex;
justify-content: flex-start;
p {
position: relative;
width: 14px;
height: 14px;
background: rgba(54, 150, 223, .4);
border-radius: 50%;
span {
position: absolute;
top: 3px;
left: 3px;
width: 8px;
height: 8px;
background: #3696DF;
border-radius: 50%;
}
}
i {
height: 2px;
background: linear-gradient(90deg,rgba(54, 150, 223, .4), transparent);
position: relative;
top: 6px;
}
}
}
</style>
\ No newline at end of file
src/components/echarts/BarChart.vue 0 → 100644
<template>
<chart-el :chartOpt="chartConf" />
</template>
<script>
import mixinChart from 'runner/common/mixins/mixinChart'
export default {
name: 'BarChart',
mixins: [mixinChart],
data () {
return {
chartConf: {}
}
},
props: {
// 图表布局配置 - width, height
layout: {
type: Object,
default () {
return {
width: '100%',
height: '90px'
}
}
},
// 图表配置
option: {
type: Object,
default () {
return {
base: {},
seriesData: []
}
}
}
},
mounted () {
this.initComponents()
},
methods: {
initComponents () {
const { width = '100%', height = '90px' } = this.layout
const option = this.getChartOption() || {}
this.chartConf = {
width,
height,
option
}
},
/**
* @method getSeriesData 图表数据
*/
getSeriesData () {
const defSeriesOpts = {
type: 'bar',
barWidth: '7px',
itemStyle: {
borderRadius: [4, 4, 4, 4],
color: {
// 图形渐变颜色方法，四个数字分别代表，右，下，左，上，offset表示0%到100%
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: '#24E8FF'
},
{
offset: 1,
color: '#00BEFF'
}
]
}
},
label: {
show: true,
position: 'right',
color: '#ffffff',
fontSize: 16,
fontFamily: 'CenturyGothic',
fontWeight: 400
},
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 defaultOption = {
title: {
show: false
},
grid: {
left: -10,
right: 35,
bottom: 0,
top: 0,
containLabel: true
},
xAxis: {
type: 'value',
max: 'dataMax',
axisTick: {
show: false
},
axisLine: {
show: false
},
splitLine: {
show: false
},
axisLabel: {
show: false
}
},
yAxis: [
{
type: 'category',
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
color: '#ffffff',
fontSize: 14,
fontFamily: 'CenturyGothic'
},
data: []
}
]
}
// 添加series
const result = this.deepMerge({}, defaultOption, this.option.base)
result.series = this.getSeriesData()
return result
}
}
}
</script>
src/components/echarts/PieChart.vue 0 → 100644
<template>
<chart-el :chartOpt="chartConf" />
</template>
<script>
import mixinChart from 'runner/common/mixins/mixinChart'
export default {
name: 'PieChart',
mixins: [mixinChart],
data () {
return {
chartConf: {}
}
},
props: {
// 图表布局配置 - width, height
layout: {
type: Object,
default () {
return {
width: '100%',
height: '130px'
}
}
},
// 图表配置
option: {
type: Object,
default () {
return {
base: {},
seriesData: []
}
}
}
},
mounted () {
this.initComponents()
},
methods: {
initComponents () {
const { width = '', height = '' } = this.layout
const option = this.getChartOption() || {}
this.chartConf = {
width,
height,
option
}
},
/**
* @method getSeriesData 图表数据
*/
getSeriesData () {
const defSeriesOpts = {
name: '学历情况',
type: 'pie',
center: ['38%', '50%'],
radius: ['58%', '78%'],
avoidLabelOverlap: false,
itemStyle: {
borderColor: '#001626',
borderWidth: 5
},
label: {
formatter: item => {
return item.percent.toFixed(0) + '%'
},
fontSize: 16,
fontFamily: 'CenturyGothic',
color: '#ffffff'
},
labelLine: {
show: false,
length: 0,
length2: 0
},
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 = [
'#ffffff',
'#00ECFF',
'#00C0FF',
'#00E371'
]
const defaultOption = {
color: defaultColors,
legend: {
orient: 'vertical',
icon: 'circle',
itemWidth: 9,
itemHeight: 9,
right: 0,
top: 'center',
textStyle: {
color: '#ffffff',
fontSize: 12,
fontFamily: 'Microsoft YaHei'
}
}
}
// 添加series
const result = this.deepMerge({}, defaultOption, this.option.base)
result.series = this.getSeriesData()
return result
}
}
}
</script>
src/pages/index/Center.vue 0 → 100644
<template>
<div class="managePlatform-center"></div>
</template>
<script>
export default {
name: 'Center',
data () {
return {}
},
mounted () {},
methods: {}
}
</script>
<style lang="less" scoped>
.managePlatform-center {
height: 500px;
}
</style>
\ No newline at end of file
src/pages/index/Right.vue 0 → 100644
<template>
<div class="managePlatform-right"></div>
</template>
<script>
export default {
name: 'Right',
data () {
return {}
},
mounted () {},
methods: {}
}
</script>
<style lang="less" scoped>
.managePlatform-right {
height: 500px;
}
</style>
\ No newline at end of file
src/pages/index.vue → src/pages/index/index.vue
<template> <template>
<div class="index-page"> <div class="index-page">
<layout :layoutConf="layoutSize"> <layout :layoutConf="layoutSize">
<Header title="头部标题" slot="header" /> <page-head title="张謇教育基地管理平台" slot="header" />
<!-- left --> <!-- left -->
<div class="index-left" slot="left"></div> <left slot="left" />
<!-- center --> <!-- center -->
<div class="index-center" slot="center"></div> <center slot="center" />
<!-- right --> <!-- right -->
<div class="index-right" slot="right"></div> <right slot="right" />
</layout> </layout>
</div> </div>
</template> </template>
<script> <script>
import Left from './Left.vue'
import Center from './Center.vue'
import Right from './Right.vue'
export default { export default {
data () { data () {
return { return {
// 布局设置 // 布局设置
layoutSize: { layoutSize: {
leftWidth: '530px', leftWidth: '510px',
rightWidth: '530px', rightWidth: '510px',
center: { center: {
width: '100%' width: '100%'
} }
} }
} }
},
components: {
Left,
Center,
Right
} }
} }
</script> </script>
......
src/public/plugins/index.js
...@@ -2,6 +2,8 @@ import mixins from '../mixins' ...@@ -2,6 +2,8 @@ import mixins from '../mixins'
// Vue插件(Vue plugin) // Vue插件(Vue plugin)
import ContentContainer from 'components/ContentContainer' import ContentContainer from 'components/ContentContainer'
// 页面头
import Header from 'components/Header'
const UsePlugin = {} const UsePlugin = {}
...@@ -15,6 +17,7 @@ UsePlugin.install = function (Vue, options = {}) { ...@@ -15,6 +17,7 @@ UsePlugin.install = function (Vue, options = {}) {
Vue.mixin(mixins) Vue.mixin(mixins)
// 内容容器 // 内容容器
Vue.component('content-container', ContentContainer) Vue.component('content-container', ContentContainer)
Vue.component('page-head', Header)
} }
export default UsePlugin export default UsePlugin
src/router/routes.js
// 导入页面名称 // 管理平台
import Index from '@/pages/index.vue' import Index from '@/pages/index/index.vue'
export default [ export default [
{ {
......
static/styles/layoutMain.less
// 覆盖默认组纪检样式, 使用id(layoutMain), class由于权重问题会导致无效 // 覆盖默认组纪检样式, 使用id(layoutMain), class由于权重问题会导致无效
#layoutMain {} #layoutMain {
.left {
padding-right: 0px;
}
.right {
padding-left: 0px;
}
}
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