弹出层完成

src/components/exam/dialogComponent.vue

 <template>
-  <div>
+  <div class="main">
+    <p>
+      <slot name="title"></slot>
+    </p>
+    <div class="prompt">
+      <slot name="prompt"></slot>
+    </div>
+    <div class="button">
+      <div>
+        <slot name="button"></slot>
+      </div>
+    </div>
+    <div class="out"></div>
   </div>
 </template>
 <script>
@@ -7,4 +19,80 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+.main{
+  position: relative;
+  width: 342px;
+  height: 220px;
+  background-color: #fff;
+  border-radius: 15px;
+  p{
+    position: absolute;
+    top: -10px;
+    left: 50%;
+    transform: translateX(-50%);
+    font-size: 18px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #222222;
+  }
+  .prompt {
+    position: absolute;
+    left: 50%;
+    top: 50px;
+    transform: translateX(-50%);
+    width: 280px;
+    height: auto;
+    text-align: center;
+    font-size: 14px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #222222;
+  }
+  .button {
+    display:flex;
+    justify-content: center;
+    width: 100%;
+    position: absolute;
+    height: 40px;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    button {
+      // display:inline-block;
+      float: left;
+      border: 1px solid #eee;
+      background-color: #fff;
+      width: 120px;
+      height: 40px;
+      margin-right: 22px;
+      line-height: 40px;
+      text-align: center;
+      font-size: 14px;
+      font-family: PingFangSC-Semibold, PingFang SC;
+      font-weight: 600;
+      color: #666666;
+      outline: none;
+      border-radius: 5px;
+    }
+    button:focus{
+      border: 0.5px solid lightblue;
+    }
+    button:hover{
+      cursor: pointer;
+    }
+    button:nth-child(2) {
+      margin-right: 0px;
+    }
+  }
+  .out {
+    position: absolute;
+    right: -30px;
+    width: 23px;
+    height: 23px;
+    background-image: url(../../assets/images/out-btn.png);
+  }
+  .out:hover {
+    cursor: pointer;
+  }
+}
 </style>

src/main.js

@@ -11,12 +11,10 @@ import Element from 'element-ui'
 import modules from './modules'
 
 import createBefore from './components/beforeEnter'
-
 Vue.use(VueRouter)
 const router = createRouter()
 Vue.use(VueI18n)
 const i18n = createI18n()
-
 Vue.use(MetaInfo)
 
 Vue.use(Element, { i18n: (key, value) => i18n.t(key, value) })