feat:弹框

 <template>
   <transition name="msgbox-fade">
-    <div class="el-message-box__wrapper" tabindex="-1" v-show="visible" @click.self="handleWrapperClick" role="dialog"
+    <div class="el-message-box__wrapper" tabindex="-1"   
+    v-show="visible" @click.self="handleWrapperClick" role="dialog"
       aria-modal="true" :aria-label="title || 'dialog'">
       <div class="el-message-box"  :class="[customClass, center && 'el-message-box--center']">
-        <div class="el-message-box__header" v-if="title !== null">
-          <div class="el-message-box__title">
-            <div :class="['el-message-box__status', icon]" v-if="icon && center">
-            </div>
-            <span>{{ title }}</span>
-          </div>
-          <button type="button" class="el-message-box__headerbtn" aria-label="Close" v-if="showClose"
-            @click="handleAction(distinguishCancelAndClose ? 'close' : 'cancel')"
-            @keydown.enter="handleAction(distinguishCancelAndClose ? 'close' : 'cancel')">
-            <i class="el-message-box__close el-icon-close"></i>
-          </button>
-        </div>
         <div class="el-message-box__content">
-          <div class="el-message-box__message" v-if="message !== ''">
           <slot>
             <p>{{ message }}</p>
           </slot>
         </div>
+        <div class="el-message-box__btns">
+          <el-button :loading="cancelButtonLoading" :class="[cancelButtonClasses]" :round="roundButton" size="small"
+            @click.native="handleAction('cancel')" @keydown.enter="handleAction('cancel')">
+            {{ cancelButtonText || t('el.messagebox.cancel') }}
+          </el-button>
         </div>
       </div>
     </div>
@@ -44,7 +37,6 @@ let typeMap = {
 
 export default {
   mixins: [Popup, Locale],
-
   props: {
     modal: {
       default: true
@@ -271,3 +263,15 @@ export default {
   }
 };
 </script>
+<style scoped lang="scss">
+.el-message-box__wrapper {
+  background: none;
+}
+.el-message-box {
+  border: none;
+}
+.el-message-box__content {
+  min-height: 150px;
+  padding-top: 30px;
+}
+</style>

@@ -20,7 +20,7 @@
               <i class="el-icon-s-unfold pointer"></i>
             </div>
             <ul>
-              <li v-for="(item, index) in notice" :key="index" class="flexst pointer">
+              <li v-for="(item, index) in notice" :key="index" @click="handleNotice" class="flexst pointer">
                 <p class="list-title">{{ item.title }}</p>
                 <p class="marginZL15">{{ item.date }}</p>
                 <p>{{ item.state }}</p>
@@ -237,6 +237,9 @@ export default {
       chart.area().position('year*value').shape('smooth');
       chart.line().position('year*value').size(2).shape('smooth');
       chart.render();
+    },
+    handleNotice () {
+      this.$alertMes('9999999999')
     }
   }
 }