Przeglądaj źródła

登录引导弹窗样式修改

任一存 4 lat temu
rodzic
commit
87a404fdd1

+ 49 - 56
src/assets/style/component.less

@@ -637,7 +637,6 @@ textarea:-ms-input-placeholder {
   &.link {
   &.link {
     display: inline-block;
     display: inline-block;
     text-decoration: none;
     text-decoration: none;
-    height: 34px;
     line-height: 36px;
     line-height: 36px;
   }
   }
   &.danger {
   &.danger {
@@ -731,13 +730,14 @@ textarea:-ms-input-placeholder {
   z-index: 999;
   z-index: 999;
   background: #fff;
   background: #fff;
   width: 500px;
   width: 500px;
-  color: #000;
+  color: #323233;
   text-align: center;
   text-align: center;
   transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
   overflow: hidden;
   overflow: hidden;
   box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.06);
   box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.06);
   border-radius: 4px;
   border-radius: 4px;
   border: 1px solid #E4E7ED;
   border: 1px solid #E4E7ED;
+  padding: 26px;
   &.dark {
   &.dark {
     background: #252828;
     background: #252828;
     .ui-message-header {
     .ui-message-header {
@@ -805,16 +805,11 @@ textarea:-ms-input-placeholder {
 
 
 .ui-message-header {
 .ui-message-header {
   width: 100%;
   width: 100%;
-  border-bottom: 1px solid #e3e3e3;
-  font-size: 14px;
-  height: 40px;
-  line-height: 40px;
+  font-size: 18px;
   display: flex;
   display: flex;
   justify-content: space-between;
   justify-content: space-between;
 
 
   span {
   span {
-    margin-left: 14px;
-    font-size: 18px;
     &:last-child {
     &:last-child {
       width: 40px;
       width: 40px;
       cursor: pointer;
       cursor: pointer;
@@ -824,9 +819,9 @@ textarea:-ms-input-placeholder {
 
 
 
 
 .ui-message-footer {
 .ui-message-footer {
-  margin: 18px 0;
-
+  text-align: right;
   .ui-button {
   .ui-button {
+    margin-left: 16px;
   }
   }
 }
 }
 
 
@@ -904,59 +899,57 @@ textarea:-ms-input-placeholder {
   }
   }
 }
 }
 
 
-  
-
-  .message-mobile {
-    width: 80%;
-
-    .ui-button.cancel {
-      color: #fff;
-      border: 1px solid #ccc;
-      background-color: transparent;
-    }
-
-    .ui-message-header {
-      display: none;
-    }
+.message-mobile {
+  width: 80%;
 
 
-    .ui-message-title {
-      font-weight: 600;
-      margin-bottom: 0;
-      color: #595959;
-    }
+  .ui-button.cancel {
+    color: #fff;
+    border: 1px solid #ccc;
+    background-color: transparent;
+  }
 
 
-    .ui-message-content {
-      font-size: 14px;
-      font-weight: 400;
-      color: #595959;
-      margin: 5px;
-      margin-top: 2px;
-    }
+  .ui-message-header {
+    display: none;
+  }
 
 
-    .ui-message-footer {
-      margin-bottom: 0;
-      white-space: nowrap;
-      a.link,
-      button {
-        //float: right;
-        width: 50%;
-        letter-spacing: 1px;
-        margin: 0;
-        border-radius: 0;
-        border: none;
+  .ui-message-title {
+    font-weight: 600;
+    margin-bottom: 0;
+    color: #595959;
+  }
 
 
-        &:last-child {
-          background-color: fade(@color, 40%);
-        }
+  .ui-message-content {
+    font-size: 14px;
+    font-weight: 400;
+    color: #595959;
+    margin: 5px;
+    margin-top: 2px;
+  }
+
+  .ui-message-footer {
+    margin-bottom: 0;
+    white-space: nowrap;
+    a.link,
+    button {
+      //float: right;
+      width: 50%;
+      letter-spacing: 1px;
+      margin: 0;
+      border-radius: 0;
+      border: none;
 
 
-        &:first-child:last-child {
-          width: 100%;
-          background-color: @color;
-        }
+      &:last-child {
+        background-color: fade(@color, 40%);
       }
       }
-      a.link {
-        line-height: 1.4rem;
+
+      &:first-child:last-child {
+        width: 100%;
+        background-color: @color;
       }
       }
     }
     }
+    a.link {
+      line-height: 1.4rem;
+    }
   }
   }
+}
 
 

+ 8 - 15
src/components/shared/message/LoginTips.vue

@@ -9,23 +9,23 @@
                 <div class="ui-message-title">{{tips}}</div>
                 <div class="ui-message-title">{{tips}}</div>
                 <div class="ui-message-content" v-html="content"></div>
                 <div class="ui-message-content" v-html="content"></div>
             </div>
             </div>
-            <div class="ui-message-footer" v-if="okLink">
-                <a
-                    :href="okLink"
-                    target="_blank"
-                    class="ui-button link submit"
-                    @click="onOk"
-                >{{okText}}</a>
+            <div v-if="okLink" class="ui-message-footer">
                 <a
                 <a
                     :href="noLink"
                     :href="noLink"
                     target="_blank"
                     target="_blank"
                     class="ui-button link cancel"
                     class="ui-button link cancel"
                     @click="onNo"
                     @click="onNo"
                 >{{noText}}</a>
                 >{{noText}}</a>
+                <a
+                    :href="okLink"
+                    target="_blank"
+                    class="ui-button link submit"
+                    @click="onOk"
+                >{{okText}}</a>
             </div>
             </div>
             <div v-else class="ui-message-footer">
             <div v-else class="ui-message-footer">
-                <button class="ui-button submit" @click="onOk">{{okText}}</button>
                 <button class="ui-button cancel" @click="onNo">{{noText}}</button>
                 <button class="ui-button cancel" @click="onNo">{{noText}}</button>
+                <button class="ui-button submit" @click="onOk">{{okText}}</button>
             </div>
             </div>
         </div>
         </div>
     </popup>
     </popup>
@@ -75,13 +75,6 @@ export default {
 };
 };
 </script>
 </script>
 <style lang="less" scoped>
 <style lang="less" scoped>
-.ui-message-footer {
-    .ui-button {
-        width: 170px;
-        font-size: 12px;
-    }
-}
-
 [show-mode="mobile"],
 [show-mode="mobile"],
 [edit-mode="mobile"] {
 [edit-mode="mobile"] {
     .ui-message-footer {
     .ui-message-footer {