样式调整

src/views/proof/components/AddBaseinfo.vue

@@ -38,11 +38,10 @@ import { Route } from 'vue-router';
 export default class AddBaseinfo extends Vue {
   private show: boolean = true;
   @Prop({}) private templateInfo!: any;
-  @Model('input',{})
-  proofName!:string;
-    
+  @Model('input', {})
+  private proofName!: string;
   @Emit('input')
-  change(value: string ){
+  private change(value: string ) {
     return value;
   }
   private cancle() {
@@ -68,7 +67,7 @@ export default class AddBaseinfo extends Vue {
       this.$toast('请填写模板名称');
       return;
     }
-    this.$emit('next')
+    this.$emit('next');
   }
 }
 </script>

src/views/template/Add.vue

@@ -416,7 +416,6 @@ export default class Add extends Vue {
         text-align: left;
         display: flex;
         flex-direction: column;
-        padding: 10px;
         font-size: 10px;
         line-height: 1.5;
         color: #818181;
@@ -456,6 +455,7 @@ export default class Add extends Vue {
         box-shadow: 0px 2px 4px 0px rgba(241,243,251,1);
         background: #FFFFFF;
         .preview{
+          align-self: center;
           color: #353535;
           background: #F0F1F5;
           border-radius:4px;
@@ -465,6 +465,7 @@ export default class Add extends Vue {
         }
         .confirm{
           flex: auto;
+          align-self: center;
           width: 228px;
           padding: 9px;
           color: #FFFFFF;

src/views/template/components/AddOption.vue

@@ -23,7 +23,8 @@
           <div @click="addOption" style="color:#3F79FE;padding:17px;"><common-svg name="tianjia" style="margin-right:10px;"></common-svg>添加选项</div>
         </div>
       </div>
-      <van-button block color="#5D7BF6" type="primary" @click="confirmWordType">确定</van-button>
+      <div class="btn-group"><van-button block color="#5D7BF6" type="primary" @click="confirmWordType">确定</van-button></div>
+      
    </div>
 </template>
 <script lang="ts">
@@ -124,11 +125,20 @@ export default class AddOption extends Vue {
           grid-template-columns: auto 27px;
           grid-template-rows: repeat(2,30px);
           grid-auto-flow: column dense;
+          place-items: center start;
           .active{
             grid-column: 2/ span 1;
             grid-row: 1/ span 2;
             place-self: center;
           }
+          .title{
+            color: #353535;
+            font-size: 15px;
+          }
+          .desc{
+            color: #737582;
+            font-size: 10px;
+          }
        }
      }
    }

src/views/template/components/BaseInfo.vue

@@ -2,20 +2,24 @@
   <van-popup 
     v-model="show"
     position="bottom" 
+    round
     :close-on-click-overlay="false"
     :style="{height: '80%'}"
     class="base-info">
-    <div style="position:relative;margin-bottom:26px;">
+    <div style="position:relative;margin-bottom:26px;font-size:18px;">
       <common-svg
         @click.native="cancel"
-        name="shanchu" 
+        name="shanchu5" 
         style="position:absolute;left:17px;"></common-svg>
       <span>创建模板</span>
     </div>
     <van-field v-model="templateName" placeholder="填写模板名称"></van-field>
     <input type="file" id="thumb" style="display:none" @change="handleFileChange">
     <label for="thumb" class="file-input">
-        <common-svg name="tianjia" style="margin-right:10px;"></common-svg><span>添加模板封面</span><common-svg name="jinru"></common-svg>
+        <common-svg name="tianjia" style="margin-right:10px;"></common-svg>
+        <span>{{imgUrl ? '已上传': '添加模板封面'}}</span>
+        <van-image :src="imgUrl" v-if="imgUrl" height="24px" width="33px" fit="contain"></van-image>
+        <common-svg name="jinru"></common-svg>
     </label>
     <div class="btn-group">
       <div>所在文件夹: <span class="classify" @click="show2 = true;">{{folder.name}}</span></div>
@@ -37,7 +41,7 @@
 </template>
 <script lang="ts">
 import { Component, Prop, Vue, Emit } from 'vue-property-decorator';
-import { Collapse, CollapseItem, Field, Button, NavBar, SwipeCell, Popup, Uploader, Picker } from 'vant';
+import { Collapse, CollapseItem, Field, Button, NavBar, SwipeCell, Popup, Uploader, Picker , Image } from 'vant';
 import { TEMPLATETYPE } from '@/const/enum';
 @Component({
   components: {
@@ -50,6 +54,7 @@ import { TEMPLATETYPE } from '@/const/enum';
     [Popup.name]: Popup,
     [Uploader.name]: Uploader,
     [Picker.name]: Picker,
+    [Image.name]: Image,
   },
 })
 export default class BaseInfo extends Vue {
@@ -107,16 +112,23 @@ export default class BaseInfo extends Vue {
 <style scoped lang="scss">
    .base-info{
      padding: 17px 0 0;
+     ::v-deep .van-field__control{
+        color: #353535;
+        font-size: 22px;
+      }
+      ::-webkit-input-placeholder{
+        color: #CDCDCD
+      }
       .file-input{       
         display: grid;
-        grid-template-columns: 20px auto 10px;
+        grid-template-columns: 20px auto 40px 10px;
         place-items: center;
-        padding: 7px 17px;
+        padding: 0 17px;
         background:#F9F9FB;
         color:#444444;
         font-size:14px;
         span{
-          place-self: start;
+          place-self: center start;
         }
       }
       .btn-group{