fix template page ‘t1’

src/views/template/t1.vue

@@ -1,61 +1,71 @@
 <template>
-    <div>
+  <div>
+    <el-form>
+      <el-col :style="{ padding: '0px 0px 10px' }" style="display:flex;justify-content:center;">
+        <el-card :body-style="{ padding: '10px' }" shadow="always" style="width: 90%;">
+          <div slot="header" class="clearfix">
+            <span>干系人信息</span>
+          </div>
+          <img :src="personal.avatar" />
+          <div>{{personal.stakeholder}}</div>
+          <div>{{personal.stakeholderBirthday}}</div>
+        </el-card>
+      </el-col>
+    </el-form>
 
-      <el-form> 
-          <el-col :style="{ padding: '0px 0px 10px' }" style="display:flex;justify-content:center;">
-            <el-card :body-style="{ padding: '10px' }" shadow="always" style="width: 90%;">
-              <div slot="header" class="clearfix">
-                <span>干系人信息</span>
-              </div>
-              <img :src="personal.avatar">
-              <div>{{personal.stakeholder}}</div>
-              <div>{{personal.stakeholderBirthday}}</div>
-            </el-card>
-        </el-col>
-      </el-form>
-
-      <el-form> 
-          <el-col :style="{ padding: '0px 0px 10px' }" style="display:flex;justify-content:center;">
-            <el-card :body-style="{ padding: '10px' }" shadow="always" style="width: 90%;">
-              <div slot="header" class="clearfix">
-                <span>平生描述</span>
-              </div>
-              <div v-html="personal.content"></div>
-            </el-card>
-        </el-col>
-      </el-form>
+    <el-form>
+      <el-col :style="{ padding: '0px 0px 10px' }" style="display:flex;justify-content:center;">
+        <el-card :body-style="{ padding: '10px' }" shadow="always" style="width: 90%;">
+          <div slot="header" class="clearfix">
+            <span>平生描述</span>
+          </div>
+          <div v-html="personal.content"></div>
+        </el-card>
+      </el-col>
+    </el-form>
 
-      <div  style="width: 100%;display:flex;justify-content:center;">
+    <div style="width: 100%;display:flex;justify-content:center;">
       <el-card :body-style="{ padding: '0px' }" shadow="always" style="width: 90%;">
         <div slot="header" class="clearfix">
           <span>干系人照片</span>
         </div>
-        <el-form> 
-          <el-col :span="5" v-for="item in picList" :offset="1" :style="{ padding: '0px 0px 10px',display:'flex',justifyContent:'center' }" :key="item.key">
-              <el-card :body-style="{ padding: '0px' }" shadow="always">
-                  <el-image  :key="item.value" :src="item.value" :preview-src-list="[item.value]" class="image"></el-image>
-              </el-card>
+        <el-form>
+          <el-col
+            :span="5"
+            v-for="item in picList"
+            :offset="1"
+            :style="{ padding: '0px 0px 10px',display:'flex',justifyContent:'center' }"
+            :key="item.key"
+          >
+            <el-card :body-style="{ padding: '0px' }" shadow="always">
+              <el-image
+                :key="item.value"
+                :src="item.value"
+                :preview-src-list="[item.value]"
+                class="image"
+              ></el-image>
+            </el-card>
           </el-col>
         </el-form>
       </el-card>
-      </div>
-    </div> 
+    </div>
+  </div>
 </template>
 
 <script>
-import { allPersonalImg,getPersonal } from "@/api/common/template";
-import { setToken } from '@/utils/auth'
+import { allPersonalImg, getPersonal } from "@/api/common/template";
+import { setToken } from "@/utils/auth";
 
 export default {
   data() {
     return {
-        pid: 0,
-        personal: {},
-        personalImg: {
-          personalId: null,
-        },
-        picList: [],
-    }
+      pid: 0,
+      personal: {},
+      personalImg: {
+        personalId: null,
+      },
+      picList: [],
+    };
   },
   created() {
     this.pid = this.$route.params && this.$route.params.id;
@@ -64,37 +74,37 @@ export default {
     this.getImgs(this.pid);
   },
   methods: {
-      getContent(id){
-        getPersonal(id).then(response => {
-            this.personal = response.data;
-            console.log(this.personal)
-        });
-      },
-      getImgs(id){
-        allPersonalImg(this.personalImg).then(res => {
-            if(res.code !== 200){
-                this.$message.error('获取照片列表失败')
-                return
-            }
-            var apiUrl = process.env.VUE_APP_BASE_API;
-            var items = res.data;
-            for (const i in items) {
-                var url = apiUrl + items[i].url;
-                this.picList.push({ key: items[i].id, value: url})
-            }
-        })
-      }
-  }
-}
+    getContent(id) {
+      getPersonal(id).then((response) => {
+        this.personal = response.data;
+        console.log(this.personal);
+      });
+    },
+    getImgs(id) {
+      allPersonalImg(this.personalImg).then((res) => {
+        if (res.code !== 200) {
+          this.$message.error("获取照片列表失败");
+          return;
+        }
+        var apiUrl = process.env.VUE_APP_BASE_API;
+        var items = res.data;
+        for (const i in items) {
+          var url = apiUrl + items[i].url;
+          this.picList.push({ key: items[i].id, value: url });
+        }
+      });
+    },
+  },
+};
 </script>
 
 <style>
 .clearfix:before,
-  .clearfix:after {
-    display: table;
-    content: "";
-  }
-  .clearfix:after {
-    clear: both
-  }
+.clearfix:after {
+  display: table;
+  content: "";
+}
+.clearfix:after {
+  clear: both;
+}
 </style>