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>
<div class="PopupFrame" v-if="visible">
<div class="iframe">
<div class="title">
<div class="iframe" :style="`width:${layout.width};height:${layout.height}`">
<!-- <div class="title">
<span>
{{ title }}
</span>
</div>
</div> -->
<div class="close" @click="closeBullet"></div>
<div class="content">
<!-- 内容部分 -->
......@@ -29,7 +29,16 @@ export default {
type: Boolean,
default: false
},
title: ''
title: '',
layout: {
type: Object,
default () {
return {
width: '1440px',
height: '815px'
}
}
}
},
components: {
......@@ -38,7 +47,7 @@ export default {
methods: {
// 关闭弹出框
closeBullet () {
this.$emit('beforeClose', 1)
this.$emit('beforeClose', false)
}
}
}
......@@ -60,9 +69,7 @@ export default {
width: 1280px;
height: 721px;
position: relative;
padding: 0 30px;
background: red;
// background: url('../../static/images/bulletFrame-bg.png') no-repeat -36px -23px;
background-color: rgba(0, 0, 0, 0.8);
.title {
width: 1090px;
height: 38px;
......@@ -87,11 +94,11 @@ export default {
.close {
width: 24px;
height: 24px;
// background: url('../../static/images/bulletFrame-close.png')
// no-repeat left top;
// background: url('../../static/images/index/bulletFrame-close.png')
// no-repeat left top;
position: absolute;
top: 13px;
right: 13px;
top: 36px;
right: 19px;
cursor: pointer;
}
}
......
src/pages/index/Right.vue
......@@ -35,10 +35,7 @@
<div class='activ'>
<div class="activity-one">
<div class="act">活动开展</div>
<div class="mor" @click="getMore">
查看更多
<!-- <popup-frame :option="moreConfig.option"/> -->
</div>
<div class="mor" @click="getMore">查看更多</div>
</div>
<div class="activity-two">
......@@ -57,7 +54,25 @@
</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="seemore" @click="topicDialog">查看更多</div>
<title-line :con="'交流会/专题'"></title-line>
<div class="topic">
<div class="left">
......@@ -140,7 +155,7 @@ import BarChart from '@/components/echarts/BarChart.vue'
import PieChart from '@/components/echarts/PieChart.vue'
import LineBar from '@/components/echarts/LineBar'
import CountRoll from '@/components/CountRoll.vue'
import PopupFrame from './PopupFrame'
// import PopupFrame from './PopupFrame'
export default {
name: 'Right',
components: {
......@@ -150,11 +165,13 @@ export default {
swiper,
swiperSlide,
LineBar,
CountRoll,
PopupFrame
CountRoll
// PopupFrame
},
data () {
return {
activeShow: false,
showVisible: false,
// 师资力量
eduConfig: {},
edu: [
......@@ -627,10 +644,16 @@ export default {
// 查看更多的点击事件
getMore () {
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 {
font-family: Microsoft YaHei;
font-weight: 400;
color: #18d1c6;
background: url('./../../../static/images/index/查看更多.png')
background: url('./../../../static/images/index/more.png')
no-repeat right;
}
}
......@@ -777,6 +800,20 @@ export default {
}
}
.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 {
margin-top: 19px;
width: 482px;
......@@ -819,16 +856,10 @@ export default {
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 {
width: 6px;
height: 6px;
background: rgba(62, 157, 247, 0.4);
}
.swiper-pagination-bullet-active {
......@@ -853,7 +884,7 @@ export default {
font-weight: 400;
color: #ffffff;
left: 3px;
top: 5px;
top: 6px;
}
span:nth-child(2) {
left: 20px;
......@@ -865,7 +896,7 @@ export default {
}
span:nth-child(4) {
left: 16px;
top: 108px;
top: 105px;
}
}
.text {
......@@ -883,7 +914,7 @@ export default {
font-weight: 400;
color: #ffffff;
left: 0;
top: 7px;
top: 9px;
}
.item:nth-child(2) {
left: 10px;
......@@ -891,7 +922,7 @@ export default {
}
.item:nth-child(3) {
left: 0;
top: 80px;
top: 78px;
}
.item:nth-child(4) {
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'
import Header from 'components/Header'
// 插件
import CountTo from 'components/CountTo.vue'
import PopupFrame from '@/components/PopupFrame'
const UsePlugin = {}
......@@ -22,6 +23,8 @@ UsePlugin.install = function (Vue, options = {}) {
Vue.component('page-head', Header)
// 数组滚动
Vue.component('count-to', CountTo)
// 弹框组件
Vue.component('popup-frame', PopupFrame)
}
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