fix: 按照UI的意思修改样式

src/components/TemplateDetail.vue

 <template>
   <div class="template-detail">
      <div v-if="Array.isArray(detailInformation)">
-       <div v-for="(item) in detailInformation" :key="item.id">
+       <div v-for="(item) in detailInformation" :key="item.id" class="content-wrapper">
          <div class="title-text">
            {{item.label}}
          </div>
@@ -51,10 +51,15 @@ export default class TemplateDetail extends Vue {
 
 <style scoped lang="scss">
 .template-detail{
+  .content-wrapper{
+    background-color: white;
+    padding: 0 17px;
+  }
   .title-text{
     text-align: left;
     font-size: 18px;
-    padding: 15px 0;
+    line-height: 60px;
+    border-bottom: 1px solid #F0F0F0;;
   }
 }
 </style>

src/views/template/components/PreviewTemplate.vue

@@ -5,11 +5,11 @@
     :close-on-click-overlay="false"
     :style="{height: '100%'}"
     class="base-info select-template" >
-   <div class="preview">
+   <div class="preview-page">
       <template-detail
         :detailInformation="proof" 
         class="detail"
-        style="padding:0 17px;" ></template-detail>
+      ></template-detail>
       <div class="btn-group" style="opacity:0;position:relative">
         <div role="button" class="cancel" @click="cancel">取消</div>
         <div role="button" class="confirm" @click="employ">使用</div>
@@ -61,7 +61,7 @@ export default class PreviewTemplate extends Vue {
 }
 </script>
 <style scoped lang="scss">
-    .preview{
+    .preview-page{
       position: absolute;
       left: 0;
       right: 0;
@@ -69,8 +69,8 @@ export default class PreviewTemplate extends Vue {
       bottom: 0;
       padding: 10px 0;
       min-height: 100vh;
+      background: #F9F9FB;
       z-index: 20001;
-      background: #ffffff;
       ::v-deep .van-field{
         flex-direction: column;
         input{

src/views/template/components/WordItem.vue

 <template>
   <div>
-    <div v-if="word.type === 3">
+    <div v-if="word.type === 3" class="word-item">
         <div style="display:flex;flex-direction:row;justify-content:space-between;" class="data-item van-hairline--bottom">
           <div style="color:#353535;font-size:18px;font-weight:500;">{{word.label}}</div>
           <div style="width: 30px;text-align:center;">

src/views/template/components/WordsManager.vue

@@ -450,6 +450,11 @@ export default class Add extends Vue {
 }
 </script>
 <style scoped lang="scss">
+.template{
+  display: flow-root;
+  min-height: 100vh;
+  background-color:#F0F1F5;
+}
 .template-item {
   text-align: left;
   display: flex;
@@ -459,7 +464,7 @@ export default class Add extends Vue {
   color: #818181;
   background: #ffffff;
   padding: 0 17px;
-  margin-bottom: 20px;
+  margin-top: 10px;
 }
 .add-word {
   padding: 17px;