src/views/prompts/authentication.vue

   1 <style lang="" scoped>
   2   .warp {
   3     position: absolute;
   4     top: 0;
   5     left: 0;
   6     right: 0;
   7     height: 600px;
   8     z-index: 2;
   9     overflow: scroll;
  10   }
  11   .header {
  12     display: flex;
  13   }
  14   .header p{
  15     text-align: center;
  16     width: 280px;
  17     padding-top: 17px;
  18   }
  19
  20   .content {
  21     margin: 20px;
  22     padding: 20px;
  23     overflow: hidden;
  24     border-radius:4px;
  25     width: 280px;
  26   }
  27
  28   .btn-inline .btn {
  29     margin: 10px 15px;
  30   }
  31   .row{
  32     word-break: break-all;
  33   }
  34   .col{
  35     font-size: 14px;
  36     width: 35%;
  37   }
  38   .label{
  39     color: #7B7B7B;
  40   }
  41   .message{
  42     font-size: 14px;
  43     color: #7B7B7B;
  44   }
  45   .value{
  46     color: #282828;
  47     width: 60%;
  48   }
  49   table{
  50     width: 100%;
  51   }
  52   .form-item{
  53     padding:0;
  54     margin:0;
  55     margin-bottom: 10px;
  56   }
  57   .btn-container .btn{
  58     margin-top: 20px;
  59     height: 48px;
  60     width: 320px;
  61   }
  62 </style>
  63
  64 <template>
  65   <div class="warp bg-gray">
  66     <section class="header bg-header">
  67       <i class="iconfont icon-back" @click="denied"></i>
  68       <p>{{$t('enable.title')}}</p>
  69     </section>
  70
  71     <section class="content bg-white">
  72       <table>
  73         <tbody>
  74           <tr class="row">
  75             <td class="col label">{{$t('enable.domain')}}</td>
  76             <td  class="col value">{{prompt.domain}}</td>
  77           </tr>
  78         </tbody>
  79       </table>
  80     </section>
  81
  82     <section class="content bg-white">
  83       <div class="message">{{$t('enable.message')}}</div>
  84     </section>
  85
  86     <div class="row btn-container" style="bottom: 20px; left: 20px; position: absolute;">
  87       <div class="btn" @click="denied">{{$t('enable.cancel')}}</div>
  88       <div class="btn bg-green" @click="accepted">{{$t('enable.confirm')}}</div>
  89     </div>
  90
  91   </div>
  92 </template>
  93
  94 <script>
  95 import { BTM } from "@/utils/constants";
  96 import {apis} from '@/utils/BrowserApis';
  97 import NotificationService from '../../services/NotificationService'
  98
  99
 100 export default {
 101     data() {
 102         return {
 103             prompt:''
 104         };
 105     },
 106     computed: {
 107     },
 108     watch: {
 109     },
 110     methods: {
 111       accepted(){
 112         this.prompt.responder(true);
 113         NotificationService.close();
 114       },
 115       denied(){
 116         this.prompt.responder(false);
 117         NotificationService.close();
 118       }
 119     }, mounted() {
 120         this.prompt = window.data || apis.extension.getBackgroundPage().notification || null;
 121       }
 122 };
 123 </script>