添加弹框

src/components/PopupFrame.vue

+<template>
+    <div class="PopupFrame" v-if="visible">
+        <div class="iframe" :style="`width:${layout.width};height:${layout.height}`">
+            <!-- <div class="title">
+                <span>
+                    {{ title }}
+                </span>
+            </div> -->
+            <div class="close" @click="closeBullet"></div>
+            <div class="content">
+                <!-- 内容部分 -->
+                <slot></slot>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'PopupFrame',
+
+    data () {
+        return {
+        }
+    },
+
+    props: {
+        visible: {
+            type: Boolean,
+            default: false
+        },
+        title: '',
+        layout: {
+            type: Object,
+            default () {
+                return {
+                    width: '1440px',
+                    height: '815px'
+                }
+            }
+        }
+    },
+
+    components: {
+    },
+
+    methods: {
+        // 关闭弹出框
+        closeBullet () {
+            this.$emit('beforeClose', false)
+        }
+    }
+}
+</script>
+
+<style lang="less">
+.PopupFrame {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    z-index: 101;
+    background-color: rgba(0, 0, 0, 0.6);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .iframe {
+        width: 1280px;
+        height: 721px;
+        position: relative;
+        background-color: rgba(0, 0, 0, 0.8);
+        .title {
+            width: 1090px;
+            height: 38px;
+            text-align: center;
+            margin: 0 auto;
+            span {
+                font-size: 22px;
+                font-family: Source Han Sans CN;
+                font-weight: bold;
+                color: #ffffff;
+                line-height: 22px;
+                background: linear-gradient(0deg, #a3dcff 0%, #ffffff 100%);
+                -webkit-background-clip: text;
+                -webkit-text-fill-color: transparent;
+                position: relative;
+                top: 7px;
+            }
+        }
+        .content {
+            margin-top: 15px;
+        }
+        .close {
+            width: 24px;
+            height: 24px;
+            background: url('../../static/images/index/bulletFrame-close.png')
+                no-repeat left top;
+            position: absolute;
+            top: 36px;
+            right: 19px;
+            cursor: pointer;
+        }
+    }
+}
+</style>
\ No newline at end of file

src/pages/index/Right.vue

@@ -24,7 +24,16 @@
                 <bar-chart :option="lineConfig.option" />
             </div>
         </div>
+        <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">
@@ -114,6 +123,7 @@ export default {
     },
     data () {
         return {
+            showVisible: false,
             eduConfig: {},
             edu: [
                 { value: 168, name: '教师数' }
@@ -347,6 +357,14 @@ export default {
                     }
                 }
             }
+        },
+        // 交流会/专题弹框
+        topicDialog () {
+            this.showVisible = true
+        },
+        // 关闭交流会/专题弹框弹框前的回调
+        beforeCloses (flag) {
+            this.showVisible = flag
         }
     }
 }
@@ -393,7 +411,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;
             }
         }
@@ -433,6 +451,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;
@@ -475,16 +507,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 {
@@ -509,7 +535,7 @@ export default {
                         font-weight: 400;
                         color: #ffffff;
                         left: 3px;
-                        top: 5px;
+                        top: 6px;
                     }
                     span:nth-child(2) {
                         left: 20px;
@@ -521,7 +547,7 @@ export default {
                     }
                     span:nth-child(4) {
                         left: 16px;
-                        top: 108px;
+                        top: 105px;
                     }
                 }
                 .text {
@@ -539,7 +565,7 @@ export default {
                         font-weight: 400;
                         color: #ffffff;
                         left: 0;
-                        top: 7px;
+                        top: 9px;
                     }
                     .item:nth-child(2) {
                         left: 10px;
@@ -547,7 +573,7 @@ export default {
                     }
                     .item:nth-child(3) {
                         left: 0;
-                        top: 80px;
+                        top: 78px;
                     }
                     .item:nth-child(4) {
                         left: 10px;

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