Explorar el Código

feat: 【我的素材】素材重命名弹窗样式更新

任一存 hace 4 años
padre
commit
54f800fc53
Se han modificado 2 ficheros con 27 adiciones y 25 borrados
  1. 1 1
      src/assets/style/component.less
  2. 26 24
      src/views/material/popup/rename.vue

+ 1 - 1
src/assets/style/component.less

@@ -764,7 +764,7 @@ textarea:-ms-input-placeholder {
 }
 }
 
 
 .message-material{
 .message-material{
-  border-radius: 2px;
+  border-radius: 4px;
   @color:#0076F6;
   @color:#0076F6;
   background: #fff;
   background: #fff;
   padding: 26px;
   padding: 26px;

+ 26 - 24
src/views/material/popup/rename.vue

@@ -7,20 +7,18 @@
             <i class="iconfont icon_close"></i>
             <i class="iconfont icon_close"></i>
           </span>
           </span>
         </div>
         </div>
-        <div class="ui-message-main re-name">
-          <div>
-            <input
-              class="ui-input"
-              type="text"
-              maxlength="50"
-              placeholder="输入素材名字,限50字"
-              v-model="key"
-            />
-          </div>
-        </div>
-        <div class="ma-line"></div>
+        <input
+          class="ui-input"
+          type="text"
+          maxlength="50"
+          placeholder="请输入"
+          v-model="key"
+        />
         <div class="ui-message-footer">
         <div class="ui-message-footer">
           <div class="btn">
           <div class="btn">
+            <button @click="$emit('close')" class="ui-button ui-button-rect cancel" >
+              取消
+            </button>
             <button @click="emitname" class="ui-button ui-button-rect submit" :class="{disable:!key}" >
             <button @click="emitname" class="ui-button ui-button-rect submit" :class="{disable:!key}" >
               确定
               确定
             </button>
             </button>
@@ -61,25 +59,29 @@ export default {
 
 
 <style lang="less" scoped>
 <style lang="less" scoped>
 .ui-message-confirm{
 .ui-message-confirm{
-  border-radius: 0;
-  .icon_close{
-    color: #909090;
-  }
+  width: 400px;
+  height: 230px;
   .ui-message-header{
   .ui-message-header{
-    border-bottom: 1px solid #EBEBEB;
+    .icon_close{
+      color: #969799;
+    }
   }
   }
-  .ui-message-main{
-    width: 330px;
-    margin: 20px auto;
-    background: #fff;
+  .ui-input {
+    margin: 40px 0;
+    height: 36px;
+    color: #323233;
+    font-size: 14px;
+    border-radius: 4px;
+    border: 1px solid #EBEDF0;
+    &:focus {
+      border: 1px solid @color;
+    }
   }
   }
   .ui-message-footer{
   .ui-message-footer{
     width: 100%;
     width: 100%;
     .btn{
     .btn{
-      width: 80%;
       display: flex;
       display: flex;
-      justify-content: center;
-      margin: 0 auto;
+      justify-content: flex-end;
       .ui-button{
       .ui-button{
         max-width: 104px
         max-width: 104px
       }
       }