Sfoglia il codice sorgente

修改弹窗按钮样式

liucf 5 anni fa
parent
commit
c376ebab84
1 ha cambiato i file con 23 aggiunte e 14 eliminazioni
  1. 23 14
      src/common/Toast.vue

+ 23 - 14
src/common/Toast.vue

@@ -6,8 +6,8 @@
                 <!-- {{message||msg}} -->
               </div>
               <div class="btn">
-                <span @click="comfirn">确定</span>
-                <span @click="cancel">取消</span>
+                <span @click="comfirn" class="comf">确定</span>
+                <span @click="cancel" class="canc">取消</span>
               </div>
             </div>
             <div class="mask"></div>
@@ -39,8 +39,8 @@ import $ from 'jquery';
   @import '../less/base.less';
   .toast-wrap{
     .content{
-      width: 6rem;
-      height: 3.5rem;
+      width: 6.3rem;
+      height: 3.52rem;
       background: #fff;
       z-index: 999;
       // position: absolute;
@@ -50,7 +50,7 @@ import $ from 'jquery';
       transform: translate(-50%,-50%);
       padding: .5rem;
       box-sizing: border-box;
-      border-radius: .20rem;
+      border-radius: .2rem;
       z-index: 1000;
       .text{
         color:#000;
@@ -61,21 +61,30 @@ import $ from 'jquery';
         font-size: .3rem;
       }
       .btn{
-        margin-top: .20rem;
+        margin-top: .30rem;
+        padding: 0 .7rem;
         display: flex;
         justify-content: space-between;
         span{
           display: inline-block;
-          width: 2rem;
-          height: .77rem;
-          line-height: .77rem;
+          width: 1.6rem;
+          height: .70rem;
+          line-height: .70rem;
           text-align: center;
-          color: #fff;
+          // color: #fff;
           font-size: .30rem;
-          background: -webkit-gradient(linear, right top, left top, from(#4F8BFF), to(#4F4FFF));
-          background: linear-gradient(right, #4F8BFF, #4F4FFF);
-          box-shadow: 0 .12rem .24rem 0 rgba(79,129,255,0.40);
-          border-radius: .22rem;
+          // background: -webkit-gradient(linear, right top, left top, from(#4F8BFF), to(#4F4FFF));
+          // background: linear-gradient(right, #4F8BFF, #4F4FFF);
+          // box-shadow: 0 .12rem .24rem 0 rgba(79,129,255,0.40);
+          border-radius: .35rem;
+        }
+        .comf{
+          color:#F64B44;
+          border:2px solid rgba(246,75,68,1);
+        }
+        .canc{
+          color: #4F50FF;
+          border:2px solid rgba(79,80,255,1);
         }
       }
     }