Skip to content

ZhangJianFrontEnd
ZhangJianFrontEnd
Commit 35c1303d by wangyui2025
Options

Merge branch 'wangrui' into '20210819' 

add

See merge request vue-project/liangXing/frontEnd!7
parents 95c0cf89 22bfddf5
Showing with 327 additions and 69 deletions
src/pages/index/Right.vue
...@@ -4,10 +4,10 @@ ...@@ -4,10 +4,10 @@
<div class="faculty"> <div class="faculty">
<div class="teachernum"> <div class="teachernum">
<div class="teacherTitle">师资力量</div> <div class="teacherTitle">师资力量</div>
<pie-chart :option="eduConfig.option"/> <pie-chart :option="eduConfig.option" />
</div> </div>
<div class="staff"> <div class="staff">
<bar-chart :option="staffConfig.option"/> <bar-chart :option="staffConfig.option" />
</div> </div>
</div> </div>
<div class="course"> <div class="course">
...@@ -21,7 +21,77 @@ ...@@ -21,7 +21,77 @@
<span>出勤率</span> <span>出勤率</span>
</p> </p>
<div class="line"> <div class="line">
<bar-chart :option="lineConfig.option"/> <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-slide
v-for="(item, index) in topicList"
:key="index"
class="swiper-item"
>
<img :src="item.img" alt="" />
</swiper-slide>
</swiper>
<div class="pagination-items">
<div
class="swiper-pagination change"
slot="pagination"
></div>
</div>
</div>
</div>
<div class="right">
<div class="num">
<span><count-to :endVal="110" /></span>
<span><count-to :endVal="120" /></span>
<span><count-to :endVal="270" /></span>
<span><count-to :endVal="4000" /></span>
</div>
<div class="text">
<span class="item"
>对接交流活动 <count-to :endVal="110" />余场</span
>
<span class="item"
>发布大企业创新需求<count-to
:endVal="120"
/>余个</span
>
<span class="item"
>促成项目合作<count-to :endVal="270" />余个</span
>
<span class="item"
>服务创新创业企业<count-to
:endVal="4000"
/>余家次</span
>
</div>
</div>
</div>
<div class="topic-show">
<p class="sub-title">专题展示</p>
<div class="topic-item">
<div class="item">
<img
src="../../../static/images/index/topic-bg4.png"
alt=""
/>
<p>连续两届成功“创客中国”上海赛区总决赛</p>
</div>
<div class="item">
<img
src="../../../static/images/index/topic-bg4.png"
alt=""
/>
<p>连续两届成功“创客中国”上海赛区总决赛</p>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -29,22 +99,24 @@ ...@@ -29,22 +99,24 @@
<script> <script>
import TitleLine from '@/components/TitleLine' 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 BarChart from '@/components/echarts/BarChart.vue'
import PieChart from '@/components/echarts/PieChart.vue' import PieChart from '@/components/echarts/PieChart.vue'
export default { export default {
name: 'Right', name: 'Right',
components: { components: {
TitleLine, TitleLine,
BarChart, BarChart,
PieChart PieChart,
swiper,
swiperSlide
}, },
data () { data () {
return { return {
eduConfig: {}, eduConfig: {},
edu: [ edu: [
{value: 168, name: '教师数'} { value: 168, name: '教师数' }
], ],
staffConfig: {}, staffConfig: {},
// 师资数据 // 师资数据
...@@ -76,16 +148,41 @@ export default { ...@@ -76,16 +148,41 @@ export default {
genderPercent: { genderPercent: {
male: '32%', male: '32%',
female: '68%' female: '68%'
} },
swiperOption: {
mousewheel: true,
centeredSlides: true,
centeredSlidesBounds: true,
autoplay: {
delay: 3000,
disableOnInteraction: false // 手动切换之后继续自动轮播
},
loop: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
type: 'bullets'
}
},
topicList: [
{
img: '../../../static/images/index/topic-bg1.png'
},
{
img: '../../../static/images/index/topic-bg1.png'
},
{
img: '../../../static/images/index/topic-bg1.png'
}
]
} }
}, },
mounted () { mounted () {
this.getstaff() this.getstaff()
this.getEdu() this.getEdu()
this.getline() this.getline()
}, },
methods: { methods: {
getline () { getline () {
this.lineConfig = { this.lineConfig = {
...@@ -255,84 +352,244 @@ export default { ...@@ -255,84 +352,244 @@ export default {
} }
</script> </script>
<style lang="less" scoped> <style lang="less">
.managePlatform-right { .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;
}
}
.faculty{ .course {
margin-top: 7px; height: 110px;
height: 156px; .coursetitle {
display: flex; display: flex;
.teachernum{ justify-content: space-between;
width: 134px; .left {
height: 100%; font-size: 18px;
.teacherTitle{ font-family: Microsoft YaHei;
font-size: 18px; font-weight: 400;
font-family: Microsoft YaHei; color: #ffffff;
font-weight: 400;
color: #FFFFFF;
}
} }
.staff{ .seemore {
margin-top: 47px; width: 94px;
width: 340px; cursor: pointer;
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #18d1c6;
background: url('./../../../static/images/index/查看更多.png')
no-repeat right;
} }
} }
.percent {
.course{ margin-top: 10px;
height: 110px; display: flex;
.coursetitle{ justify-content: space-between;
display: flex; span {
justify-content: space-between; font-size: 16px;
.left{ 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;
width: 482px;
height: 158px;
display: flex;
background: url('../../../static/images/index/comm-bg.png')
no-repeat center;
.left {
margin-left: 11px;
margin-right: 21px;
.sub-title {
font-size: 18px; font-size: 18px;
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-weight: 400; font-weight: 400;
color: #FFFFFF; color: #ffffff;
line-height: 28px;
} }
.seemore{ .swiper-content {
width: 94px; width: 190px;
cursor: pointer; height: 107px;
font-size: 16px; .swipers {
font-family: Microsoft YaHei; width: 100%;
font-weight: 400; height: 100%;
color: #18D1C6; .swiper-item {
background: url('./../../../static/images/index/查看更多.png') no-repeat right; width: 100%;
height: 100%;
img {
width: 190px;
height: 107px;
}
}
}
.pagination-items {
width: 60px;
margin: 0 auto;
.change.swiper-pagination.swiper-pagination-clickable {
width: 60px;
height: 6px;
border-radius: 50%;
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 {
background: rgba(62, 157, 247, 0.4);
}
.swiper-pagination-bullet-active {
background: #3e9df7;
}
}
} }
} }
.percent{ .right {
margin-top: 10px;
display: flex; display: flex;
justify-content: space-between; .num {
span{ position: relative;
font-size: 16px; margin-top: 14px;
font-family: Microsoft YaHei; width: 54px;
font-weight: 400; height: 138px;
color: #6DCDFF; background: url('../../../static/images/index/topic-bg2.png')
no-repeat center 0;
span {
position: absolute;
font-size: 16px;
font-family: Century Gothic;
font-weight: 400;
color: #ffffff;
left: 3px;
top: 5px;
}
span:nth-child(2) {
left: 20px;
top: 40px;
}
span:nth-child(3) {
left: 3px;
top: 70px;
}
span:nth-child(4) {
left: 16px;
top: 108px;
}
}
.text {
position: relative;
margin-top: 14px;
width: 197px;
display: flex;
align-items: center;
height: 138px;
.item {
position: absolute;
height: auto;
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #ffffff;
left: 0;
top: 7px;
}
.item:nth-child(2) {
left: 10px;
top: 45px;
}
.item:nth-child(3) {
left: 0;
top: 80px;
}
.item:nth-child(4) {
left: 10px;
top: 108px;
}
} }
} }
.line { }
margin-top: 12px; .topic-show {
.sub-title {
font-size: 18px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #ffffff;
line-height: 28px;
margin: 15px 0;
}
.topic-item {
display: flex; display: flex;
margin-top: 5px; justify-content: space-between;
margin-bottom: 4px; .item {
span { width: 230px;
width: 0%; height: 105px;
height: 31px; background: url('../../../static/images/index/topic-bg3.png')
transition: width linear 300ms; no-repeat;
&.male { img {
border-top-left-radius: 4px; display: block;
border-bottom-left-radius: 4px; width: 153px;
background-color: #00BEFF; height: 56px;
opacity: 0.5; margin: 0 auto;
margin-top: 17px;
margin-bottom: 8px;
} }
&.female { p {
border-top-right-radius: 4px; font-size: 12px;
border-bottom-right-radius: 4px; font-family: Microsoft YaHei;
background-color: #00DE7D; font-weight: 400;
opacity: 0.5; color: #6dcdff;
} }
} }
} }
} }
} }
}
</style> </style>
\ No newline at end of file
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