Skip to content

ZhangJianFrontEnd
ZhangJianFrontEnd
Commit 76774393 by yangqingjie
Options

update

parents c70297a4 2a4eda66
Showing with 255 additions and 35 deletions
src/pages/index/PopupFrame.vue → src/components/PopupFrame.vue
<template> <template>
<div class="PopupFrame" v-if="visible"> <div class="PopupFrame" v-if="visible">
<div class="iframe"> <div class="iframe" :style="`width:${layout.width};height:${layout.height}`">
<div class="title"> <!-- <div class="title">
<span> <span>
{{ title }} {{ title }}
</span> </span>
</div> </div> -->
<div class="close" @click="closeBullet"></div> <div class="close" @click="closeBullet"></div>
<div class="content"> <div class="content">
<!-- 内容部分 --> <!-- 内容部分 -->
...@@ -29,7 +29,16 @@ export default { ...@@ -29,7 +29,16 @@ export default {
type: Boolean, type: Boolean,
default: false default: false
}, },
title: '' title: '',
layout: {
type: Object,
default () {
return {
width: '1440px',
height: '815px'
}
}
}
}, },
components: { components: {
...@@ -38,7 +47,7 @@ export default { ...@@ -38,7 +47,7 @@ export default {
methods: { methods: {
// 关闭弹出框 // 关闭弹出框
closeBullet () { closeBullet () {
this.$emit('beforeClose', 1) this.$emit('beforeClose', false)
} }
} }
} }
...@@ -60,9 +69,7 @@ export default { ...@@ -60,9 +69,7 @@ export default {
width: 1280px; width: 1280px;
height: 721px; height: 721px;
position: relative; position: relative;
padding: 0 30px; background-color: rgba(0, 0, 0, 0.8);
background: red;
// background: url('../../static/images/bulletFrame-bg.png') no-repeat -36px -23px;
.title { .title {
width: 1090px; width: 1090px;
height: 38px; height: 38px;
...@@ -87,11 +94,11 @@ export default { ...@@ -87,11 +94,11 @@ export default {
.close { .close {
width: 24px; width: 24px;
height: 24px; height: 24px;
// background: url('../../static/images/bulletFrame-close.png') // background: url('../../static/images/index/bulletFrame-close.png')
// no-repeat left top; // no-repeat left top;
position: absolute; position: absolute;
top: 13px; top: 36px;
right: 13px; right: 19px;
cursor: pointer; cursor: pointer;
} }
} }
......
src/pages/index/Right.vue
...@@ -35,10 +35,7 @@ ...@@ -35,10 +35,7 @@
<div class='activ'> <div class='activ'>
<div class="activity-one"> <div class="activity-one">
<div class="act">活动开展</div> <div class="act">活动开展</div>
<div class="mor" @click="getMore"> <div class="mor" @click="getMore">查看更多</div>
查看更多
<!-- <popup-frame :option="moreConfig.option"/> -->
</div>
</div> </div>
<div class="activity-two"> <div class="activity-two">
...@@ -57,7 +54,25 @@ ...@@ -57,7 +54,25 @@
</div> </div>
</div> </div>
</div> </div>
<popup-frame
:visible.sync="activeShow"
@beforeClose="beforeCloses"
>
<div class="img">
<img src="../../../static/images/index/03.png" alt="">
</div>
</popup-frame>
<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="right-bottom">
<div class="seemore" @click="topicDialog">查看更多</div>
<title-line :con="'交流会/专题'"></title-line> <title-line :con="'交流会/专题'"></title-line>
<div class="topic"> <div class="topic">
<div class="left"> <div class="left">
...@@ -140,7 +155,7 @@ import BarChart from '@/components/echarts/BarChart.vue' ...@@ -140,7 +155,7 @@ import BarChart from '@/components/echarts/BarChart.vue'
import PieChart from '@/components/echarts/PieChart.vue' import PieChart from '@/components/echarts/PieChart.vue'
import LineBar from '@/components/echarts/LineBar' import LineBar from '@/components/echarts/LineBar'
import CountRoll from '@/components/CountRoll.vue' import CountRoll from '@/components/CountRoll.vue'
import PopupFrame from './PopupFrame' // import PopupFrame from './PopupFrame'
export default { export default {
name: 'Right', name: 'Right',
components: { components: {
...@@ -150,11 +165,13 @@ export default { ...@@ -150,11 +165,13 @@ export default {
swiper, swiper,
swiperSlide, swiperSlide,
LineBar, LineBar,
CountRoll, CountRoll
PopupFrame // PopupFrame
}, },
data () { data () {
return { return {
activeShow: false,
showVisible: false,
// 师资力量 // 师资力量
eduConfig: {}, eduConfig: {},
edu: [ edu: [
...@@ -627,10 +644,16 @@ export default { ...@@ -627,10 +644,16 @@ export default {
// 查看更多的点击事件 // 查看更多的点击事件
getMore () { getMore () {
console.log(123) console.log(123)
this.moreConfig.option.visible = true this.activeShow = true
}, },
beforeClose (msg) { // 交流会/专题弹框
console.log(msg) topicDialog () {
this.showVisible = true
},
// 关闭交流会/专题弹框弹框前的回调
beforeCloses (flag) {
this.showVisible = flag
this.activeShow = flag
} }
} }
} }
...@@ -671,7 +694,7 @@ export default { ...@@ -671,7 +694,7 @@ export default {
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-weight: 400; font-weight: 400;
color: #18d1c6; color: #18d1c6;
background: url('./../../../static/images/index/查看更多.png') background: url('./../../../static/images/index/more.png')
no-repeat right; no-repeat right;
} }
} }
...@@ -777,6 +800,20 @@ export default { ...@@ -777,6 +800,20 @@ export default {
} }
} }
.right-bottom { .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 { .topic {
margin-top: 19px; margin-top: 19px;
width: 482px; width: 482px;
...@@ -819,16 +856,10 @@ export default { ...@@ -819,16 +856,10 @@ export default {
margin-top: 5px; margin-top: 5px;
display: flex; display: flex;
justify-content: space-between; 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 { .swiper-pagination-bullet {
width: 6px;
height: 6px;
background: rgba(62, 157, 247, 0.4); background: rgba(62, 157, 247, 0.4);
} }
.swiper-pagination-bullet-active { .swiper-pagination-bullet-active {
...@@ -853,7 +884,7 @@ export default { ...@@ -853,7 +884,7 @@ export default {
font-weight: 400; font-weight: 400;
color: #ffffff; color: #ffffff;
left: 3px; left: 3px;
top: 5px; top: 6px;
} }
span:nth-child(2) { span:nth-child(2) {
left: 20px; left: 20px;
...@@ -865,7 +896,7 @@ export default { ...@@ -865,7 +896,7 @@ export default {
} }
span:nth-child(4) { span:nth-child(4) {
left: 16px; left: 16px;
top: 108px; top: 105px;
} }
} }
.text { .text {
...@@ -883,7 +914,7 @@ export default { ...@@ -883,7 +914,7 @@ export default {
font-weight: 400; font-weight: 400;
color: #ffffff; color: #ffffff;
left: 0; left: 0;
top: 7px; top: 9px;
} }
.item:nth-child(2) { .item:nth-child(2) {
left: 10px; left: 10px;
...@@ -891,7 +922,7 @@ export default { ...@@ -891,7 +922,7 @@ export default {
} }
.item:nth-child(3) { .item:nth-child(3) {
left: 0; left: 0;
top: 80px; top: 78px;
} }
.item:nth-child(4) { .item:nth-child(4) {
left: 10px; left: 10px;
......
src/pages/index/active.vue 0 → 100644
<template>
<!-- 活动开展 -->
<div class="activity">
<div class="activity-one">
<div class="act">活动开展</div>
<div class="mor"><span>查看更多</span><span></span></div>
</div>
<div class="activity-two">
<div class="left">
<count-roll :count="4166" />
<p class="act-num">活动开展次数</p>
</div>
<div class="line"></div>
<div class="right">
<line-bar
:layout="activeConfig.layout"
:option="activeConfig.option"
/>
</div>
</div>
</div>
</template>
<script>
import LineBar from '@/components/echarts/LineBar'
export default {
components: {
LineBar
},
data () {
return {
// 活动开展
activeConfig: {},
activeList: [
{name: '*****活动', value: 381},
{name: '组织活动', value: 1103},
{name: '*****活动', value: 192}
]
}
},
mounted () {
this.getActive(this.activeList)
},
methods: {
getActive (data) {
let yData = data.map(v => v.name).reverse()
let y2Data = data.map(v => v.value).reverse()
let max = 4166
let maxData = new Array(data.length).fill(max)
console.log(maxData)
let pointData = data.reverse().map((v, i) => {
return {
xAxis: v.value,
yAxis: i
}
})
this.activeConfig = {
layout: {
width: '100%',
height: '100%'
},
option: {
base: {
xAxis: {
max: max
},
yAxis: [
{
axisLabel: {
color: '#fff',
align: 'left',
padding: [0, 0, 0, -60]
},
data: yData
}, {
data: y2Data.map(v => v)
}
]
},
seriesData: [
{
name: 'back',
barWidth: '5px',
data: maxData
},
{
name: 'show',
barWidth: '5px',
itemStyle: {
borderRadius: [0, 0, 0, 0],
color: 'rgba(64, 169, 248, .05)'
},
markPoint: {
symbolOffset: [0, 0.5],
data: pointData
},
data: y2Data
}
]
}
}
}
}
}
</script>
<style lang="less" scoped>
/* 活动开展 */
.activity{
width: 100%;
height: 140px;
.activity-one{
display: flex;
justify-content: space-between;
.act{
width: 72px;
height: 19px;
font-size: 18px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #FFFFFF;
line-height: 28px;
}
.mor{
width: 100px;
height: 17px;
display: flex;
span:nth-child(1){
width: 65px;
height: 17px;
margin-top: 2px;
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #18D1C6;
line-height: 24px;
}
span:nth-child(2){
display: inline-block;
width: 28px;
height: 24px;
// margin-top: 5px!important;
background:url('../../../static/images/index/more.png') no-repeat;
}
}
}
.activity-two{
margin-top: 12px;
display: flex;
.left{
margin-top:10px;
.act-num{
width: 108px;
height: 18px;
margin-top: 20px;
font-size: 18px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #6DCDFF;
line-height: 17px;
}
}
.line{
width: 3px;
height: 76px;
margin: 10px 10px 0 10px;
background:url('../../../static/images/index/3.png');
}
.right{
width: 300px;
height: 100%;
}
}
}
</style>
\ No newline at end of file
src/public/plugins/index.js
...@@ -6,6 +6,7 @@ import ContentContainer from 'components/ContentContainer' ...@@ -6,6 +6,7 @@ import ContentContainer from 'components/ContentContainer'
import Header from 'components/Header' import Header from 'components/Header'
// 插件 // 插件
import CountTo from 'components/CountTo.vue' import CountTo from 'components/CountTo.vue'
import PopupFrame from '@/components/PopupFrame'
const UsePlugin = {} const UsePlugin = {}
...@@ -22,6 +23,8 @@ UsePlugin.install = function (Vue, options = {}) { ...@@ -22,6 +23,8 @@ UsePlugin.install = function (Vue, options = {}) {
Vue.component('page-head', Header) Vue.component('page-head', Header)
// 数组滚动 // 数组滚动
Vue.component('count-to', CountTo) Vue.component('count-to', CountTo)
// 弹框组件
Vue.component('popup-frame', PopupFrame)
} }
export default UsePlugin 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