Skip to content

ZhangJianFrontEnd
ZhangJianFrontEnd
Commit 22bfddf5 by wangr
Options

add

parents a282a72f 95c0cf89
Showing with 1179 additions and 17 deletions
src/App.vue
......@@ -38,7 +38,6 @@ export default {
body {
background-color: #011428;
background: url('../static/images/index/bg.png') no-repeat left top;
}
#app {
......
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,6 +48,72 @@ export default {
<style lang="less" scoped>
.managePlatform-center {
height: 500px;
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/Left.vue
......@@ -43,8 +43,8 @@
<!-- 党派分布/民族分布 -->
<div class="distribution">
<div class="title">
<p :class="distShowKey === 'party' ? 'curr' : ''">党派分布</p>
<p :class="distShowKey === 'ethnic' ? 'curr' : ''">民族分布</p>
<p :class="distShowKey === 'party' ? 'curr' : ''" @click="changeDist('party')">党派分布</p>
<p :class="distShowKey === 'ethnic' ? 'curr' : ''" @click="changeDist('ethnic')">民族分布</p>
</div>
<ul>
<li v-for="(item, index) in distribution[distShowKey]" :key="index">
......@@ -53,6 +53,55 @@
</li>
</ul>
</div>
<!-- 行业分布 -->
<div class="industry">
<div class="partTitle margin20-10">年龄结构</div>
<bar-chart :option="industryConfig.option" :layout="industryConfig.layout" />
</div>
<!-- 参与度|活跃度 -->
<div class="degree">
<div class="selectTitle">
<span :class="degreeKey === 'participate' ? 'curr' : ''" @click="changeDegree('participate')">参与度</span>
<i> | </i>
<span :class="degreeKey === 'active' ? 'curr' : ''" @click="changeDegree('active')">活跃度</span>
</div>
<line-chart :option="degreeConfig.option" />
</div>
<!-- 学员风采|明星班级 -->
<div class="great">
<div class="selectTitle">
<span :class="greatKey === 0 ? 'curr' : ''" @click="greatKey = 0">学员风采</span>
<i> | </i>
<span :class="greatKey === 1 ? 'curr' : ''" @click="greatKey = 1">明星班级</span>
</div>
<!-- 学员风采 -->
<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)">
<p>{{item.name}}</p>
<p>{{item.position}}</p>
</swiper-slide>
</swiper>
</div>
<!-- 明星班级 -->
<div class="starClass" v-if="greatKey === 1">
<vue-seamless-scroll
:data="starClass"
:class-option="classOption"
class="scrolliframe"
>
<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>
</li>
</ul>
</vue-seamless-scroll>
</div>
</div>
</div>
</template>
......@@ -60,6 +109,9 @@
import TitleLine from '@/components/TitleLine'
import BarChart from '@/components/echarts/BarChart.vue'
import PieChart from '@/components/echarts/PieChart.vue'
import LineChart from '@/components/echarts/LineChart.vue'
import Swiper from '@/components/Swiper'
import { swiperSlide } from 'vue-awesome-swiper'
import utils from 'utils'
export default {
name: 'Left',
......@@ -67,7 +119,10 @@ export default {
components: {
TitleLine,
BarChart,
PieChart
PieChart,
LineChart,
Swiper,
swiperSlide
},
filters: {
......@@ -155,7 +210,196 @@ export default {
]
},
// 分布当前展示数据标识
distShowKey: 'party'
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
}
]
}
]
},
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: '主持人/作家'
}
],
swiperOption: {
loop: false,
autoplay: false,
centeredSlides: false,
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人企业家'
}
],
classOption: {
step: 0.35,
singleHeight: 50
},
greatKey: 0
}
},
......@@ -163,6 +407,8 @@ export default {
this.init()
this.getAge()
this.getEdu()
this.getIndustry()
this.changeDegree('participate')
},
methods: {
......@@ -206,6 +452,89 @@ export default {
]
}
}
},
// 党派/民族分布
changeDist (type) {
this.distShowKey = type
},
// 行业分布
getIndustry () {
this.industryConfig.option = {
seriesData: [
{
label: {
fontSize: 24,
formatter: item => {
return utils.dealWithNumber(item.value)
}
},
data: this.industry.map(item => item.value).reverse()
}
],
base: {
grid: {
left: 10,
right: 80
},
yAxis: [{
axisLabel: {
color: '#6DCDFF',
fontSize: 16,
padding: [0, 10, 0, 0],
fontFamily: 'Microsoft YaHei'
},
data: this.industry.map(item => item.name).reverse()
}]
}
}
},
// 切换参与度与活跃度
changeDegree (type) {
this.degreeKey = type
const legendData = this.degree[this.degreeKey].map(v => v.name)
const xData = this.degree[this.degreeKey][0].value.map(v => v.name)
const y1Data = this.degree[this.degreeKey][0].value.map(v => v.value)
const y2Data = this.degree[this.degreeKey][1].value.map(v => v.value)
this.degreeConfig = {
option: {
base: {
xAxis: {
data: xData
},
legend: {
data: legendData
}
},
seriesData: [
{
name: this.degree[this.degreeKey][0].name,
data: y1Data
}, {
name: this.degree[this.degreeKey][1].name,
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(0, 222, 125, .85)' // 0% 处的颜色
}, {
offset: 1, color: 'rgba(0, 190, 255, 0.11)' // 100% 处的颜色
}],
global: false // 缺省为 false
}
},
data: y2Data
}
]
}
}
},
// 学员风采
openStudent (index) {
console.log(index)
}
}
}
......@@ -220,6 +549,9 @@ export default {
font-weight: 400;
color: #FFFFFF;
line-height: 18px;
&.margin20-10 {
margin: 20px 0 10px;
}
}
.gender {
display: flex;
......@@ -297,6 +629,7 @@ export default {
}
}
.distribution {
margin-top: 10px;
.title {
display: flex;
font-size: 16px;
......@@ -315,6 +648,101 @@ export default {
}
}
}
ul {
display: flex;
justify-content: space-between;
margin-top: 10px;
li {
width: 91px;
height: 62px;
background: url(../../../static/images/index/distBg.png) no-repeat left top;
p {
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #6DCDFF;
line-height: 37px;
padding-left: 10px;
}
span {
font-size: 20px;
font-family: CenturyGothic;
font-weight: 400;
color: #FFFFFF;
line-height: 20px;
padding-left: 10px;
}
}
}
}
.selectTitle {
font-family: Microsoft YaHei;
font-weight: 400;
line-height: 28px;
font-size: 16px;
color: #6DCDFF;
span {
cursor: pointer;
&.curr {
font-size: 18px;
color: #FFFFFF;
}
}
i {
font-size: 18px;
color: #FFFFFF;
}
}
.degree {
margin-top: 10px;
}
.great {
margin-top: 10px;
.studentDemeanor {
margin-top: 17px;
width: 100%;
height: 150px;
.swiper-container {
.swiper-slide {
cursor: pointer;
text-align: center;
.img {
width: 88px;
height: 88px;
}
p {
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #FFFFFF;
line-height: 20px;
margin-top: 10px;
&:nth-child(3) {
margin-top: 5px;
}
}
}
}
}
.starClass {
.scrolliframe {
width: 100%;
height: 150px;
overflow: hidden;
ul {
li {
width: 480px;
height: 50px;
background: url('../../../static/images/index/starClassBg.png') no-repeat left center;
font-family: Microsoft YaHei;
font-weight: 400;
color: #6DCDFF;
line-height: 34px;
padding: 8px 0px 8px 40px;
}
}
}
}
}
}
</style>
\ No newline at end of file
src/pages/index/Right.vue
<template>
<div class="managePlatform-right">
<title-line :con="'师资/课程/活动'"></title-line>
<div class="faculty">
<div class="teachernum">
<div class="teacherTitle">师资力量</div>
<pie-chart :option="eduConfig.option" />
</div>
<div class="staff">
<bar-chart :option="staffConfig.option" />
</div>
</div>
<div class="course">
<div class="coursetitle">
<div class="left">教学课程</div>
<div class="seemore">查看更多</div>
</div>
<p class="percent">
<span>课程数</span>
<span>学习总时长</span>
<span>出勤率</span>
</p>
<div class="line">
<bar-chart :option="lineConfig.option" />
</div>
</div>
<div class="right-bottom">
<title-line :con="'交流会/专题'"></title-line>
<div class="topic">
<div class="left">
<p class="sub-title">****交流会</p>
<div class="swiper-content">
<swiper
:options="swiperOption"
class="swipers"
>
<swiper :options="swiperOption" class="swipers">
<swiper-slide
v-for="(item, index) in topicList"
:key="index"
......@@ -80,15 +101,54 @@
import TitleLine from '@/components/TitleLine'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
import BarChart from '@/components/echarts/BarChart.vue'
import PieChart from '@/components/echarts/PieChart.vue'
export default {
name: 'Right',
components: {
TitleLine,
BarChart,
PieChart,
swiper,
swiperSlide
},
data () {
return {
eduConfig: {},
edu: [
{ value: 168, name: '教师数' }
],
staffConfig: {},
// 师资数据
staff: [
{
name: '****教授',
value: 41
}, {
name: '****名师',
value: 53
}, {
name: '*****专家',
value: 61
}, {
name: '*******',
value: 12
}
],
lineConfig: {},
line: [
{
name: '线下',
value: 32
}, {
name: '线上',
value: 68
}
],
genderPercent: {
male: '32%',
female: '68%'
},
swiperOption: {
mousewheel: true,
centeredSlides: true,
......@@ -102,7 +162,6 @@ export default {
el: '.swiper-pagination',
clickable: true,
type: 'bullets'
}
},
topicList: [
......@@ -120,15 +179,259 @@ export default {
}
},
mounted () {
this.getstaff()
this.getEdu()
this.getline()
},
methods: {}
methods: {
getline () {
this.lineConfig = {
option: {
seriesData: [
{
name: 'A',
type: 'bar',
stack: 'Tik Tok',
barWidth: 25,
itemStyle: {
shadowOffsetY: 0,
shadowOffsetX: 0,
barBorderRadius: [2, 0, 0, 2]
},
label: {
normal: {
show: true,
position: 'insideRight',
offset: [-20, 0],
formatter: '{c}%',
textStyle: {
align: 'center',
baseline: 'middle',
fontSize: 14,
fontWeight: '400',
color: '#fff',
textShadowColor: '#000',
textShadowBlur: '0',
textShadowOffsetX: 1,
textShadowOffsetY: 1
}
}
},
data: [32]
},
{
name: 'B',
type: 'bar',
stack: 'Tik Tok',
barWidth: 25,
itemStyle: {
shadowOffsetY: 0,
shadowOffsetX: 0
},
label: {
normal: {
show: true,
position: 'insideRight',
offset: [-20, 0],
formatter: '{c}%',
textStyle: {
align: 'center',
baseline: 'middle',
fontSize: 14,
fontWeight: '400',
color: '#fff',
textShadowColor: '#000',
textShadowBlur: '0',
textShadowOffsetX: 1,
textShadowOffsetY: 1
}
}
},
data: [68]
}
]
}
}
},
getEdu () {
this.eduConfig = {
option: {
base: {
legend: {
show: false
}
},
seriesData: [
{
type: 'pie',
name: '师资力量',
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
},
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
}
},
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'
}
}
}
]
}
]
}
}
},
getstaff () {
this.staffConfig = {
option: {
seriesData: [
{
data: this.staff.map(item => item.value).reverse()
}
],
base: {
yAxis: [{
data: this.staff.map(item => item.name).reverse()
}]
}
}
}
}
}
}
</script>
<style lang="less">
.managePlatform-right {
height: 500px;
.faculty {
margin-top: 7px;
height: 156px;
display: flex;
.teachernum {
width: 134px;
height: 100%;
.teacherTitle {
font-size: 18px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #ffffff;
}
}
.staff {
margin-top: 47px;
width: 340px;
}
}
.course {
height: 110px;
.coursetitle {
display: flex;
justify-content: space-between;
.left {
font-size: 18px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #ffffff;
}
.seemore {
width: 94px;
cursor: pointer;
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #18d1c6;
background: url('./../../../static/images/index/查看更多.png')
no-repeat right;
}
}
.percent {
margin-top: 10px;
display: flex;
justify-content: space-between;
span {
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #6dcdff;
}
}
.line {
margin-top: 12px;
display: flex;
margin-top: 5px;
margin-bottom: 4px;
span {
width: 0%;
height: 31px;
transition: width linear 300ms;
&.male {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
background-color: #00beff;
opacity: 0.5;
}
&.female {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
background-color: #00de7d;
opacity: 0.5;
}
}
}
}
.right-bottom {
.topic {
margin-top: 19px;
......
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
static/styles/layoutMain.less
// 覆盖默认组纪检样式, 使用id(layoutMain), class由于权重问题会导致无效
.main-container {
background: url('../images/index/bg.png') no-repeat left top;
background-size: cover;
}
#layoutMain {
height: 1080px;
.left {
padding-right: 0px;
background: url('../images/index/leftBg.png') no-repeat right top;
}
.right {
padding-left: 0px;
background: url('../images/index/rightBg.png') no-repeat left top;
}
}
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