From ee89cdaca0370440731cd724d05868830d7b1d16 Mon Sep 17 00:00:00 2001
From: zhangyongzhangyong <2012005003@qq.com>
Date: Tue, 30 Nov 2021 10:42:09 +0800
Subject: [PATCH 1/5] =?UTF-8?q?=E5=85=B1=E5=BB=BA=E8=81=94=E7=9B=9F?=
 =?UTF-8?q?=EF=BC=8C=E5=A2=9E=E5=8A=A0=E9=A6=96=E5=9B=BE=E3=80=81=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../heart/volunteerunion-add-or-update.vue    | 225 +++++++++++++++-
 .../modules/heart/volunteerunion-detail.vue   | 245 ++++++++++++++++++
 src/views/modules/heart/volunteerunion.vue    |  27 +-
 3 files changed, 476 insertions(+), 21 deletions(-)
 create mode 100644 src/views/modules/heart/volunteerunion-detail.vue

diff --git a/src/views/modules/heart/volunteerunion-add-or-update.vue b/src/views/modules/heart/volunteerunion-add-or-update.vue
index af8d6b2..a39c9f6 100644
--- a/src/views/modules/heart/volunteerunion-add-or-update.vue
+++ b/src/views/modules/heart/volunteerunion-add-or-update.vue
@@ -1,6 +1,26 @@
 <template>
   <el-dialog :visible.sync="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false" :close-on-press-escape="false">
     <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'">
+        <el-row>
+          <el-form-item label="联盟图片"
+                        v-loading="loading"
+                        prop="headPic">
+            <el-upload class="avatar-uploader"
+                       :action="uploadUrl"
+                       :show-file-list="false"
+                       :on-success="handleAvatarActSuccess"
+                       :on-error="handelError"
+                       :before-upload="beforeAvatarUpload">
+              <img v-if="dataForm.headPic"
+                   :src="dataForm.headPic"
+                   class="avatar">
+              <i v-else
+                 class="el-icon-plus avatar-uploader-icon"></i>
+              <div slot="tip"
+                   class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
+            </el-upload>
+          </el-form-item>
+        </el-row>
           <el-form-item label="联盟名称" prop="unionName">
           <el-input v-model="dataForm.unionName" placeholder="联盟名称" style="width: 260px"></el-input>
       </el-form-item>
@@ -14,7 +34,7 @@
             <el-input-number v-model="dataForm.sort" controls-position="right" :min="0" label="排序" style="width: 260px"></el-input-number>
         </el-form-item>
         <el-form-item prop="content"
-                      label="团队介绍">
+                      label="联盟简介">
             <el-row style="height: 400px;">
                 <tinymce-editor v-model="dataForm.content"></tinymce-editor>
             </el-row>
@@ -28,6 +48,7 @@
 </template>
 
 <script>
+import Cookies from 'js-cookie'
 import debounce from 'lodash/debounce'
 import TinymceEditor from '@/components/tinymce-editor'
 export default {
@@ -46,8 +67,11 @@ export default {
         createdTime: '',
         updatedBy: '',
         updatedTime: '',
-        delFlag: ''
-      }
+        delFlag: '',
+        headPic: ''
+      },
+      loading: false,
+      uploadUrl: ''
     }
   },
   computed: {
@@ -61,18 +85,27 @@ export default {
         ],
         phone: [
           { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-        ], content: [
+        ],
+        content: [
           { required: true, message: this.$t('validate.required'), trigger: 'blur' }
         ],
-          sort: [
-              { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-          ],
+        sort: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        headPic: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ]
       }
     }
   },
-    components: {
-        TinymceEditor
-    },
+  components: {
+    TinymceEditor
+  },
+  created () {
+    this.$nextTick(() => {
+      this.uploadUrl = `${window.SITE_CONFIG['apiURL']}/oss/file/upload?token=${Cookies.get('token')}`
+    })
+  },
   methods: {
     init () {
       this.visible = true
@@ -116,7 +149,177 @@ export default {
           })
         }).catch(() => {})
       })
-    }, 1000, { 'leading': true, 'trailing': false })
+    }, 1000, { 'leading': true, 'trailing': false }),
+    handleAvatarActSuccess (res, file) {
+      this.loading = false
+      this.dataForm.headPic = res.data.url
+    },
+    beforeAvatarUpload (file) {
+      this.loading = true
+    },
+    handelError () {
+      this.loading = false
+    }
   }
 }
 </script>
+<style>
+.avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+.avatar-uploader .el-upload:hover {
+  border-color: #409eff;
+}
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 178px;
+  height: 178px;
+  line-height: 178px;
+  text-align: center;
+}
+.avatar {
+  width: 178px;
+  height: 178px;
+  display: block;
+}
+</style>
+<style lang="scss">
+.project-handle {
+  .el-timeline {
+    padding-left: 9px;
+    font-size: 13px;
+  }
+  .el-textarea {
+    width: 600px !important;
+  }
+  .el-input {
+    width: 600px !important;
+  }
+}
+.el-form-item__label {
+  font-weight: bold;
+}
+</style>
+<style lang="scss" scoped>
+.project-handle {
+  width: 100%;
+  height: calc(100vh - 120px);
+  background: #ffffff;
+  box-sizing: border-box;
+  padding: 10px;
+  .project-detail {
+    width: 100%;
+    height: 49%;
+    border: 2px solid #ccc;
+    box-sizing: border-box;
+    padding: 10px;
+    padding-top: 20px;
+    float: left;
+    margin-bottom: 1%;
+    position: relative;
+    .project-detail-tip {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 80px;
+      height: 30px;
+      line-height: 30px;
+      color: #ffffff;
+      background: #4ac38b;
+      text-align: center;
+    }
+    .el-form {
+      width: 58%;
+      height: 100%;
+      float: left;
+      overflow-y: auto;
+      &::-webkit-scrollbar {
+        width: 5px;
+        height: 1px;
+      }
+      &::-webkit-scrollbar-thumb {
+        border-radius: 5px;
+        background: #ccc;
+      }
+      &::-webkit-scrollbar-track {
+        border-radius: 10px;
+        background: #fff;
+      }
+    }
+    .container {
+      width: 40%;
+      height: 100%;
+      float: right;
+      .location {
+        height: 30px;
+        line-height: 30px;
+      }
+      #map {
+        width: 100%;
+        height: calc(100% - 30px);
+      }
+    }
+  }
+  .project-progress {
+    width: 20%;
+    height: 100%;
+    float: right;
+    border: 2px solid #ccc;
+    box-sizing: border-box;
+    margin-left: 1%;
+    padding-top: 20px;
+    overflow-y: auto;
+    &::-webkit-scrollbar {
+      width: 5px;
+      height: 1px;
+    }
+    &::-webkit-scrollbar-thumb {
+      border-radius: 5px;
+      background: #aaa;
+    }
+    &::-webkit-scrollbar-track {
+      border-radius: 10px;
+      background: #ccc;
+    }
+  }
+  .handle-operation {
+    padding-top: 30px;
+    box-sizing: border-box;
+    width: 100%;
+    height: 49%;
+    box-sizing: border-box;
+    border: 2px solid #ccc;
+    float: left;
+    position: relative;
+    overflow-y: auto;
+    &::-webkit-scrollbar {
+      width: 5px;
+      height: 1px;
+    }
+    &::-webkit-scrollbar-thumb {
+      border-radius: 5px;
+      background: #aaa;
+    }
+    &::-webkit-scrollbar-track {
+      border-radius: 10px;
+      background: #ccc;
+    }
+    .handle-operation-tip {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 80px;
+      height: 30px;
+      line-height: 30px;
+      color: #ffffff;
+      background: #ff7600;
+      text-align: center;
+    }
+  }
+}
+</style>
diff --git a/src/views/modules/heart/volunteerunion-detail.vue b/src/views/modules/heart/volunteerunion-detail.vue
new file mode 100644
index 0000000..48f9d08
--- /dev/null
+++ b/src/views/modules/heart/volunteerunion-detail.vue
@@ -0,0 +1,245 @@
+<template>
+  <el-dialog :visible.sync="visible" title="详情" :close-on-click-modal="false" :close-on-press-escape="false">
+    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'">
+        <el-row>
+          <el-form-item label="联盟图片">
+            <img v-if="dataForm.headPic"
+                 :src="dataForm.headPic"
+                 class="avatar">
+          </el-form-item>
+        </el-row>
+          <el-form-item label="联盟名称">
+          {{dataForm.unionName}}
+      </el-form-item>
+          <el-form-item label="联系人">
+          {{dataForm.contacts}}
+      </el-form-item>
+          <el-form-item label="联系电话">
+          {{dataForm.phone}}
+      </el-form-item>
+          <el-form-item label="排序">
+          {{dataForm.sort}}
+        </el-form-item>
+          <el-form-item label="联盟简介">
+            <el-row style="height: 400px;">
+                <tinymce-editor v-model="dataForm.content"></tinymce-editor>
+            </el-row>
+        </el-form-item>
+      </el-form>
+    <template slot="footer">
+      <el-button @click="visible = false">返回</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import TinymceEditor from '@/components/tinymce-editor'
+export default {
+  data () {
+    return {
+      visible: false,
+      dataForm: {
+        id: '',
+        unionName: '',
+        contacts: '',
+        phone: '',
+        content: '',
+        sort: '',
+        headPic: ''
+      }
+    }
+  },
+  computed: {
+    dataRule () {
+      return {
+      }
+    }
+  },
+  components: {
+    TinymceEditor
+  },
+  methods: {
+    init () {
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.dataForm.id) {
+          this.getInfo()
+        }
+      })
+    },
+    // 获取信息
+    getInfo () {
+      this.$http.get(`/heart/volunteerunion/${this.dataForm.id}`).then(({ data: res }) => {
+        if (res.code !== 0) {
+          return this.$message.error(res.msg)
+        }
+        this.dataForm = {
+          ...this.dataForm,
+          ...res.data
+        }
+      }).catch(() => {})
+    }
+  }
+}
+</script>
+<style>
+.avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+.avatar-uploader .el-upload:hover {
+  border-color: #409eff;
+}
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 178px;
+  height: 178px;
+  line-height: 178px;
+  text-align: center;
+}
+.avatar {
+  width: 178px;
+  height: 178px;
+  display: block;
+}
+</style>
+<style lang="scss">
+.project-handle {
+  .el-timeline {
+    padding-left: 9px;
+    font-size: 13px;
+  }
+  .el-textarea {
+    width: 600px !important;
+  }
+  .el-input {
+    width: 600px !important;
+  }
+}
+.el-form-item__label {
+  font-weight: bold;
+}
+</style>
+<style lang="scss" scoped>
+.project-handle {
+  width: 100%;
+  height: calc(100vh - 120px);
+  background: #ffffff;
+  box-sizing: border-box;
+  padding: 10px;
+  .project-detail {
+    width: 100%;
+    height: 49%;
+    border: 2px solid #ccc;
+    box-sizing: border-box;
+    padding: 10px;
+    padding-top: 20px;
+    float: left;
+    margin-bottom: 1%;
+    position: relative;
+    .project-detail-tip {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 80px;
+      height: 30px;
+      line-height: 30px;
+      color: #ffffff;
+      background: #4ac38b;
+      text-align: center;
+    }
+    .el-form {
+      width: 58%;
+      height: 100%;
+      float: left;
+      overflow-y: auto;
+      &::-webkit-scrollbar {
+        width: 5px;
+        height: 1px;
+      }
+      &::-webkit-scrollbar-thumb {
+        border-radius: 5px;
+        background: #ccc;
+      }
+      &::-webkit-scrollbar-track {
+        border-radius: 10px;
+        background: #fff;
+      }
+    }
+    .container {
+      width: 40%;
+      height: 100%;
+      float: right;
+      .location {
+        height: 30px;
+        line-height: 30px;
+      }
+      #map {
+        width: 100%;
+        height: calc(100% - 30px);
+      }
+    }
+  }
+  .project-progress {
+    width: 20%;
+    height: 100%;
+    float: right;
+    border: 2px solid #ccc;
+    box-sizing: border-box;
+    margin-left: 1%;
+    padding-top: 20px;
+    overflow-y: auto;
+    &::-webkit-scrollbar {
+      width: 5px;
+      height: 1px;
+    }
+    &::-webkit-scrollbar-thumb {
+      border-radius: 5px;
+      background: #aaa;
+    }
+    &::-webkit-scrollbar-track {
+      border-radius: 10px;
+      background: #ccc;
+    }
+  }
+  .handle-operation {
+    padding-top: 30px;
+    box-sizing: border-box;
+    width: 100%;
+    height: 49%;
+    box-sizing: border-box;
+    border: 2px solid #ccc;
+    float: left;
+    position: relative;
+    overflow-y: auto;
+    &::-webkit-scrollbar {
+      width: 5px;
+      height: 1px;
+    }
+    &::-webkit-scrollbar-thumb {
+      border-radius: 5px;
+      background: #aaa;
+    }
+    &::-webkit-scrollbar-track {
+      border-radius: 10px;
+      background: #ccc;
+    }
+    .handle-operation-tip {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 80px;
+      height: 30px;
+      line-height: 30px;
+      color: #ffffff;
+      background: #ff7600;
+      text-align: center;
+    }
+  }
+}
+</style>
diff --git a/src/views/modules/heart/volunteerunion.vue b/src/views/modules/heart/volunteerunion.vue
index 615a1c5..660a9d1 100644
--- a/src/views/modules/heart/volunteerunion.vue
+++ b/src/views/modules/heart/volunteerunion.vue
@@ -31,21 +31,14 @@
         <el-table-column type="index"
                          width="50"
                          label="序号" align="center"></el-table-column>
-<!--        <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>-->
-<!--        <el-table-column prop="id" label="主键" header-align="center" align="center"></el-table-column>-->
         <el-table-column prop="unionName" label="联盟名称" header-align="center" align="center"></el-table-column>
         <el-table-column prop="contacts" label="联系人" header-align="center" align="center"></el-table-column>
         <el-table-column prop="phone" label="联系电话" header-align="center" align="center"></el-table-column>
         <el-table-column prop="sort" label="排序" header-align="center" align="center"></el-table-column>
-<!--        <el-table-column prop="content" label="团队介绍" header-align="center" align="center"></el-table-column>-->
-<!--        <el-table-column prop="revision" label="乐观锁" header-align="center" align="center"></el-table-column>-->
-<!--        <el-table-column prop="createdBy" label="创建人" header-align="center" align="center"></el-table-column>-->
         <el-table-column prop="createdTime" label="创建时间" header-align="center" align="center"></el-table-column>
-<!--        <el-table-column prop="updatedBy" label="更新人" header-align="center" align="center"></el-table-column>-->
-<!--        <el-table-column prop="updatedTime" label="更新时间" header-align="center" align="center"></el-table-column>-->
-<!--        <el-table-column prop="delFlag" label="删除标识" header-align="center" align="center"></el-table-column>-->
         <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
           <template slot-scope="scope">
+            <el-button type="text" size="small" @click="detailHandle(scope.row.id)">详情</el-button>
             <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button>
             <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>
           </template>
@@ -62,6 +55,8 @@
       </el-pagination>
       <!-- 弹窗, 新增 / 修改 -->
       <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
+      <!-- 详情 -->
+      <volunteerunion-detail v-if="detailVisible" ref="volunteerunionDetail" @refreshDataList="getDataList"></volunteerunion-detail>
     </div>
   </el-card>
 </template>
@@ -69,6 +64,7 @@
 <script>
 import mixinViewModule from '@/mixins/view-module'
 import AddOrUpdate from './volunteerunion-add-or-update'
+import volunteerunionDetail from './volunteerunion-detail'
 export default {
   mixins: [mixinViewModule],
   data () {
@@ -81,11 +77,22 @@ export default {
       },
       dataForm: {
         id: ''
-      }
+      },
+      detailVisible: false
+    }
+  },
+  methods: {
+    detailHandle (id) {
+      this.detailVisible = true
+      this.$nextTick(() => {
+        this.$refs.volunteerunionDetail.dataForm.id = id
+        this.$refs.volunteerunionDetail.init()
+      })
     }
   },
   components: {
-    AddOrUpdate
+    AddOrUpdate,
+    volunteerunionDetail
   }
 }
 </script>

From 85d01f62a1aa8171ed2d10fb987703e3b953814d Mon Sep 17 00:00:00 2001
From: zhangyongzhangyong <2012005003@qq.com>
Date: Tue, 30 Nov 2021 17:25:11 +0800
Subject: [PATCH 2/5] =?UTF-8?q?=E5=85=B1=E5=BB=BA=E8=81=94=E7=9B=9F?=
 =?UTF-8?q?=E6=B4=BB=E5=8A=A8=20PC=E7=AB=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../heart/volunteerunionact-add-or-update.vue | 180 ++++++++++++++++++
 .../heart/volunteerunionact-detail.vue        |  98 ++++++++++
 src/views/modules/heart/volunteerunionact.vue | 104 ++++++++++
 3 files changed, 382 insertions(+)
 create mode 100644 src/views/modules/heart/volunteerunionact-add-or-update.vue
 create mode 100644 src/views/modules/heart/volunteerunionact-detail.vue
 create mode 100644 src/views/modules/heart/volunteerunionact.vue

diff --git a/src/views/modules/heart/volunteerunionact-add-or-update.vue b/src/views/modules/heart/volunteerunionact-add-or-update.vue
new file mode 100644
index 0000000..0a9bcaa
--- /dev/null
+++ b/src/views/modules/heart/volunteerunionact-add-or-update.vue
@@ -0,0 +1,180 @@
+<template>
+  <el-dialog :visible.sync="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false" :close-on-press-escape="false">
+    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'">
+          <el-form-item label="所属联盟" prop="unionId">
+          <el-select v-model="dataForm.unionId" filterable placeholder="请选择" style="width: 100%">
+            <el-option v-for="item in options"
+                       :key="item.value"
+                       :label="item.label"
+                       :value="item.value">
+            </el-option>
+          </el-select>
+      </el-form-item>
+          <el-form-item label="活动名称" prop="title">
+          <el-input v-model="dataForm.title" placeholder="活动名称"></el-input>
+      </el-form-item>
+          <el-form-item label="活动时间" prop="actTime">
+          <el-date-picker v-model="dataForm.actTime"
+                          type="datetimerange"
+                          range-separator="至"
+                          start-placeholder="开始日期"
+                          end-placeholder="结束日期">
+          </el-date-picker>
+      </el-form-item>
+          <el-form-item label="排序" prop="sort">
+          <el-input-number v-model="dataForm.sort" :min="0" :max="9999999" label="排序" style="width: 260px"></el-input-number>
+      </el-form-item>
+          <el-form-item label="简介" prop="content">
+          <el-row style="height: 400px;">
+              <tinymce-editor v-model="dataForm.content"></tinymce-editor>
+          </el-row>
+      </el-form-item>
+          <el-form-item label="精彩瞬间">
+          <el-upload  accept="image/png, image/jpeg"
+                      :action="uploadUrl"
+                      list-type="picture-card"
+                      :file-list="dataForm.images"
+                      :limit="10"
+                      :on-success="handleAvatarActSuccess"
+                      :on-remove="removeImage"
+                      :on-exceed="handleExceed">
+            <i class="el-icon-plus"></i>
+          </el-upload>
+        </el-form-item>
+      </el-form>
+    <template slot="footer">
+      <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
+      <el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import debounce from 'lodash/debounce'
+import Cookies from 'js-cookie'
+import TinymceEditor from '@/components/tinymce-editor'
+export default {
+  data () {
+    return {
+      visible: false,
+      dataForm: {
+        id: '',
+        unionId: '',
+        title: '',
+        actStartTime: '',
+        actEndTime: '',
+        content: '',
+        sort: '',
+        actTime: [],
+        images: []
+      },
+      uploadUrl: '',
+      imgSort: 0,
+      options: []
+    }
+  },
+  computed: {
+    dataRule () {
+      return {
+        unionId: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        title: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        actTime: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        content: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    init () {
+      this.visible = true
+      this.getOptionVolunteerUnion()
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        this.uploadUrl = `${window.SITE_CONFIG['apiURL']}/oss/file/upload?token=${Cookies.get('token')}`
+        this.dataForm.images = []
+        this.imgSort = 0
+        if (this.dataForm.id) {
+          this.getInfo()
+        }
+      })
+    },
+    // 获取联盟下拉列表
+    getOptionVolunteerUnion () {
+      this.$http.get(`/heart/volunteerunion/optionVolunteerUnion`).then(({ data: res }) => {
+        if (res.code !== 0) {
+          return this.$message.error(res.msg)
+        }
+        this.options = res.data
+      }).catch(() => {})
+    },
+    // 获取信息
+    getInfo () {
+      this.$http.get(`/heart/volunteerunionact/${this.dataForm.id}`).then(({ data: res }) => {
+        if (res.code !== 0) {
+          return this.$message.error(res.msg)
+        }
+        this.dataForm = {
+          ...this.dataForm,
+          ...res.data
+        }
+        // 如果是追加图片，则赋值 imgSort
+        if (this.dataForm.images.length > 0) {
+          this.imgSort = this.dataForm.images[this.dataForm.images.length - 1].imgSort
+        }
+        console.log('this.imgSort:' + this.imgSort)
+      }).catch(() => {})
+    },
+    // 表单提交
+    dataFormSubmitHandle: debounce(function () {
+      this.$refs['dataForm'].validate((valid) => {
+        if (!valid) {
+          return false
+        }
+        this.$http[!this.dataForm.id ? 'post' : 'put']('/heart/volunteerunionact/', this.dataForm).then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg)
+          }
+          this.$message({
+            message: this.$t('prompt.success'),
+            type: 'success',
+            duration: 500,
+            onClose: () => {
+              this.visible = false
+              this.$emit('refreshDataList')
+            }
+          })
+        }).catch(() => {})
+      })
+    }, 1000, { 'leading': true, 'trailing': false }),
+    // 图片处理
+    handleAvatarActSuccess (res, file) {
+      let image = {}
+      image.name = Math.round(Math.random() * 5)
+      image.url = res.data.url
+      this.imgSort = this.imgSort + 1
+      image.imgSort = this.imgSort
+      this.dataForm.images.push(image)
+    },
+    removeImage (file, fileList) {
+      this.dataForm.images = fileList
+    },
+    handleExceed () {
+      this.$message({
+        showClose: true,
+        message: '精彩瞬间最多只能上传十张照片',
+        type: 'warning'
+      })
+    }
+  },
+  components: {
+    TinymceEditor
+  }
+}
+</script>
diff --git a/src/views/modules/heart/volunteerunionact-detail.vue b/src/views/modules/heart/volunteerunionact-detail.vue
new file mode 100644
index 0000000..7a50afd
--- /dev/null
+++ b/src/views/modules/heart/volunteerunionact-detail.vue
@@ -0,0 +1,98 @@
+<template>
+  <el-dialog :visible.sync="visible" title="详情" :close-on-click-modal="false" :close-on-press-escape="false">
+    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '160px' : '120px'">
+          <el-form-item label="所属联盟">
+            {{dataForm.unionName}}
+        </el-form-item>
+          <el-form-item label="活动名称">
+          {{dataForm.title}}
+      </el-form-item>
+          <el-form-item label="活动开始时间">
+          {{dataForm.actStartTime}}
+      </el-form-item>
+          <el-form-item label="活动结束时间">
+          {{dataForm.actEndTime}}
+      </el-form-item>
+          <el-form-item label="排序">
+          {{dataForm.sort}}
+        </el-form-item>
+          <el-form-item label="简介">
+            <el-row style="height: 400px;">
+                <tinymce-editor v-model="dataForm.content"></tinymce-editor>
+            </el-row>
+        </el-form-item>
+          <el-form-item label="精彩瞬间" v-if="this.dataForm.images[0] !== ''">
+          <el-image v-for="item in this.dataForm.images"
+                    style="width: 100px; height: 100px; margin-right: 10px"
+                    :key="item.url"
+                    :src="item.url"
+                    :preview-src-list="previewImgList"
+                    @click="clickImg(item.url)">
+          </el-image>
+        </el-form-item>
+      </el-form>
+    <template slot="footer">
+      <el-button @click="visible = false">返回</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import TinymceEditor from '@/components/tinymce-editor'
+import 'element-ui/lib/theme-chalk/image.css'
+export default {
+  data () {
+    return {
+      visible: false,
+      dataForm: {
+        id: '',
+        unionName: '',
+        unionId: '',
+        title: '',
+        actStartTime: '',
+        actEndTime: '',
+        content: '',
+        sort: '',
+        images: []
+      },
+      previewImgList: []
+    }
+  },
+  computed: {
+    dataRule () {
+      return {
+      }
+    }
+  },
+  components: {
+    TinymceEditor
+  },
+  methods: {
+    init () {
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.dataForm.id) {
+          this.getInfo()
+        }
+      })
+    },
+    clickImg (url) {
+      this.previewImgList = []
+      this.previewImgList.push(url)
+    },
+    // 获取信息
+    getInfo () {
+      this.$http.get(`/heart/volunteerunionact/${this.dataForm.id}`).then(({ data: res }) => {
+        if (res.code !== 0) {
+          return this.$message.error(res.msg)
+        }
+        this.dataForm = {
+          ...this.dataForm,
+          ...res.data
+        }
+      }).catch(() => {})
+    }
+  }
+}
+</script>
diff --git a/src/views/modules/heart/volunteerunionact.vue b/src/views/modules/heart/volunteerunionact.vue
new file mode 100644
index 0000000..3a59c69
--- /dev/null
+++ b/src/views/modules/heart/volunteerunionact.vue
@@ -0,0 +1,104 @@
+<template>
+  <el-card shadow="never" class="aui-card--fill">
+    <div class="mod-heart__volunteerunionact}">
+      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+          <el-form-item label="所属联盟">
+          <el-select v-model="dataForm.unionId" clearable filterable placeholder="请选择">
+            <el-option v-for="item in options"
+                       :key="item.value"
+                       :label="item.label"
+                       :value="item.value">
+            </el-option>
+          </el-select>
+        </el-form-item>
+          <el-form-item label="活动名称">
+          <el-input v-model="dataForm.title"
+                    placeholder="活动名称"
+                    clearable></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="getDataList()">{{ $t('query') }}</el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
+        </el-form-item>
+      </el-form>
+      <el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%;">
+        <el-table-column prop="unionName" label="所属联盟" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="title" label="活动名称" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="actStartTime" label="活动开始时间" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="actEndTime" label="活动结束时间" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="sort" label="排序" header-align="center" align="center"></el-table-column>
+        <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
+          <template slot-scope="scope">
+            <el-button type="text" size="small" @click="detailHandle(scope.row.id)">详情</el-button>
+            <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button>
+            <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+        :current-page="page"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="limit"
+        :total="total"
+        layout="total, sizes, prev, pager, next, jumper"
+        @size-change="pageSizeChangeHandle"
+        @current-change="pageCurrentChangeHandle">
+      </el-pagination>
+      <!-- 弹窗, 新增 / 修改 -->
+      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
+      <!-- 详情 -->
+      <volunteerunionact-detail v-if="detailVisible" ref="volunteerunionactDetail" @refreshDataList="getDataList"></volunteerunionact-detail>
+    </div>
+  </el-card>
+</template>
+
+<script>
+import mixinViewModule from '@/mixins/view-module'
+import AddOrUpdate from './volunteerunionact-add-or-update'
+import volunteerunionactDetail from './volunteerunionact-detail'
+export default {
+  mixins: [mixinViewModule],
+  data () {
+    return {
+      mixinViewModuleOptions: {
+        getDataListURL: '/heart/volunteerunionact/page',
+        getDataListIsPage: true,
+        deleteURL: '/heart/volunteerunionact',
+        deleteIsBatch: true
+      },
+      dataForm: {
+        id: ''
+      },
+      options: [],
+      detailVisible: false
+    }
+  },
+  created () {
+    this.getOptionVolunteerUnion()
+  },
+  methods: {
+    // 获取联盟下拉列表
+    getOptionVolunteerUnion () {
+      this.$http.get(`/heart/volunteerunion/optionVolunteerUnion`).then(({ data: res }) => {
+        if (res.code !== 0) {
+          return this.$message.error(res.msg)
+        }
+        this.options = res.data
+      }).catch(() => {})
+    },
+    detailHandle (id) {
+      this.detailVisible = true
+      this.$nextTick(() => {
+        this.$refs.volunteerunionactDetail.dataForm.id = id
+        this.$refs.volunteerunionactDetail.init()
+      })
+    }
+  },
+  components: {
+    AddOrUpdate,
+    volunteerunionactDetail
+  }
+}
+</script>

From f194bc9b647525c85cfaa7760f63254f26e05df3 Mon Sep 17 00:00:00 2001
From: zhangyongzhangyong <2012005003@qq.com>
Date: Wed, 1 Dec 2021 15:01:40 +0800
Subject: [PATCH 3/5] =?UTF-8?q?=E8=AF=A6=E6=83=85=E9=A1=B5=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/modules/heart/volunteerunion-detail.vue    | 8 +-------
 src/views/modules/heart/volunteerunionact-detail.vue | 8 +-------
 2 files changed, 2 insertions(+), 14 deletions(-)

diff --git a/src/views/modules/heart/volunteerunion-detail.vue b/src/views/modules/heart/volunteerunion-detail.vue
index 48f9d08..3c769fb 100644
--- a/src/views/modules/heart/volunteerunion-detail.vue
+++ b/src/views/modules/heart/volunteerunion-detail.vue
@@ -21,9 +21,7 @@
           {{dataForm.sort}}
         </el-form-item>
           <el-form-item label="联盟简介">
-            <el-row style="height: 400px;">
-                <tinymce-editor v-model="dataForm.content"></tinymce-editor>
-            </el-row>
+            <p v-html="dataForm.content"></p>
         </el-form-item>
       </el-form>
     <template slot="footer">
@@ -33,7 +31,6 @@
 </template>
 
 <script>
-import TinymceEditor from '@/components/tinymce-editor'
 export default {
   data () {
     return {
@@ -55,9 +52,6 @@ export default {
       }
     }
   },
-  components: {
-    TinymceEditor
-  },
   methods: {
     init () {
       this.visible = true
diff --git a/src/views/modules/heart/volunteerunionact-detail.vue b/src/views/modules/heart/volunteerunionact-detail.vue
index 7a50afd..a608300 100644
--- a/src/views/modules/heart/volunteerunionact-detail.vue
+++ b/src/views/modules/heart/volunteerunionact-detail.vue
@@ -17,9 +17,7 @@
           {{dataForm.sort}}
         </el-form-item>
           <el-form-item label="简介">
-            <el-row style="height: 400px;">
-                <tinymce-editor v-model="dataForm.content"></tinymce-editor>
-            </el-row>
+             <p v-html="dataForm.content"></p>
         </el-form-item>
           <el-form-item label="精彩瞬间" v-if="this.dataForm.images[0] !== ''">
           <el-image v-for="item in this.dataForm.images"
@@ -38,7 +36,6 @@
 </template>
 
 <script>
-import TinymceEditor from '@/components/tinymce-editor'
 import 'element-ui/lib/theme-chalk/image.css'
 export default {
   data () {
@@ -64,9 +61,6 @@ export default {
       }
     }
   },
-  components: {
-    TinymceEditor
-  },
   methods: {
     init () {
       this.visible = true

From 25739be9a2ae6ac705e34287f831fdc11010d3f4 Mon Sep 17 00:00:00 2001
From: zhangyongzhangyong <2012005003@qq.com>
Date: Wed, 1 Dec 2021 15:25:29 +0800
Subject: [PATCH 4/5] =?UTF-8?q?=E8=A7=A3=E5=86=B3=E7=BB=84=E4=BB=B6=20Angu?=
 =?UTF-8?q?lar=20tinymce-editor=20=E7=AC=AC=E4=BA=8C=E6=AC=A1=E8=BF=9B?=
 =?UTF-8?q?=E5=85=A5=E6=97=B6=EF=BC=88=E5=88=87=E6=8D=A2=E6=A0=87=E7=AD=BE?=
 =?UTF-8?q?=E9=A1=B5=EF=BC=89=EF=BC=8C=E6=95=B0=E6=8D=AE=E6=97=A0=E6=B3=95?=
 =?UTF-8?q?=E5=9B=9E=E6=98=BE=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/modules/heart/volunteerunion-add-or-update.vue | 8 ++++++--
 .../modules/heart/volunteerunionact-add-or-update.vue    | 9 ++++++---
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/views/modules/heart/volunteerunion-add-or-update.vue b/src/views/modules/heart/volunteerunion-add-or-update.vue
index a39c9f6..289f230 100644
--- a/src/views/modules/heart/volunteerunion-add-or-update.vue
+++ b/src/views/modules/heart/volunteerunion-add-or-update.vue
@@ -36,7 +36,7 @@
         <el-form-item prop="content"
                       label="联盟简介">
             <el-row style="height: 400px;">
-                <tinymce-editor v-model="dataForm.content"></tinymce-editor>
+                <tinymce-editor :init="init" :key="tinymceFlag" v-model="dataForm.content"></tinymce-editor>
             </el-row>
         </el-form-item>
       </el-form>
@@ -71,7 +71,8 @@ export default {
         headPic: ''
       },
       loading: false,
-      uploadUrl: ''
+      uploadUrl: '',
+      tinymceFlag: 1
     }
   },
   computed: {
@@ -98,6 +99,9 @@ export default {
       }
     }
   },
+  activated () {
+    this.tinymceFlag++
+  },
   components: {
     TinymceEditor
   },
diff --git a/src/views/modules/heart/volunteerunionact-add-or-update.vue b/src/views/modules/heart/volunteerunionact-add-or-update.vue
index 0a9bcaa..f35c3ae 100644
--- a/src/views/modules/heart/volunteerunionact-add-or-update.vue
+++ b/src/views/modules/heart/volunteerunionact-add-or-update.vue
@@ -26,7 +26,7 @@
       </el-form-item>
           <el-form-item label="简介" prop="content">
           <el-row style="height: 400px;">
-              <tinymce-editor v-model="dataForm.content"></tinymce-editor>
+              <tinymce-editor :init="init" :key="tinymceFlag" v-model="dataForm.content"></tinymce-editor>
           </el-row>
       </el-form-item>
           <el-form-item label="精彩瞬间">
@@ -70,7 +70,8 @@ export default {
       },
       uploadUrl: '',
       imgSort: 0,
-      options: []
+      options: [],
+      tinymceFlag: 1
     }
   },
   computed: {
@@ -128,7 +129,6 @@ export default {
         if (this.dataForm.images.length > 0) {
           this.imgSort = this.dataForm.images[this.dataForm.images.length - 1].imgSort
         }
-        console.log('this.imgSort:' + this.imgSort)
       }).catch(() => {})
     },
     // 表单提交
@@ -173,6 +173,9 @@ export default {
       })
     }
   },
+  activated () {
+    this.tinymceFlag++
+  },
   components: {
     TinymceEditor
   }

From d397356653df6772b15ad833d6d9279e455be4fa Mon Sep 17 00:00:00 2001
From: zhangyongzhangyong <2012005003@qq.com>
Date: Fri, 3 Dec 2021 14:07:34 +0800
Subject: [PATCH 5/5] =?UTF-8?q?=E8=81=94=E7=9B=9F=E6=B4=BB=E5=8A=A8?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E9=A6=96=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../heart/volunteerunionact-add-or-update.vue | 197 +++++++++++++++++-
 .../heart/volunteerunionact-detail.vue        | 170 ++++++++++++++-
 2 files changed, 365 insertions(+), 2 deletions(-)

diff --git a/src/views/modules/heart/volunteerunionact-add-or-update.vue b/src/views/modules/heart/volunteerunionact-add-or-update.vue
index f35c3ae..9f3bb46 100644
--- a/src/views/modules/heart/volunteerunionact-add-or-update.vue
+++ b/src/views/modules/heart/volunteerunionact-add-or-update.vue
@@ -1,6 +1,26 @@
 <template>
   <el-dialog :visible.sync="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false" :close-on-press-escape="false">
     <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'">
+          <el-row>
+          <el-form-item label="活动头图"
+                        v-loading="loading"
+                        prop="headPic">
+            <el-upload class="avatar-uploader"
+                       :action="uploadUrl"
+                       :show-file-list="false"
+                       :on-success="handleAvatarSuccess"
+                       :on-error="handelError"
+                       :before-upload="beforeAvatarUpload">
+              <img v-if="dataForm.headPic"
+                   :src="dataForm.headPic"
+                   class="avatar">
+              <i v-else
+                 class="el-icon-plus avatar-uploader-icon"></i>
+              <div slot="tip"
+                   class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
+            </el-upload>
+          </el-form-item>
+        </el-row>
           <el-form-item label="所属联盟" prop="unionId">
           <el-select v-model="dataForm.unionId" filterable placeholder="请选择" style="width: 100%">
             <el-option v-for="item in options"
@@ -66,8 +86,10 @@ export default {
         content: '',
         sort: '',
         actTime: [],
-        images: []
+        images: [],
+        headPic: ''
       },
+      loading: false,
       uploadUrl: '',
       imgSort: 0,
       options: [],
@@ -88,6 +110,9 @@ export default {
         ],
         content: [
           { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        headPic: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
         ]
       }
     }
@@ -171,6 +196,16 @@ export default {
         message: '精彩瞬间最多只能上传十张照片',
         type: 'warning'
       })
+    },
+    handleAvatarSuccess (res, file) {
+      this.loading = false
+      this.dataForm.headPic = res.data.url
+    },
+    beforeAvatarUpload (file) {
+      this.loading = true
+    },
+    handelError () {
+      this.loading = false
     }
   },
   activated () {
@@ -181,3 +216,163 @@ export default {
   }
 }
 </script>
+<style>
+.avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+.avatar-uploader .el-upload:hover {
+  border-color: #409eff;
+}
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 178px;
+  height: 178px;
+  line-height: 178px;
+  text-align: center;
+}
+.avatar {
+  width: 178px;
+  height: 178px;
+  display: block;
+}
+</style>
+<style lang="scss">
+.project-handle {
+  .el-timeline {
+    padding-left: 9px;
+    font-size: 13px;
+  }
+  .el-textarea {
+    width: 600px !important;
+  }
+  .el-input {
+    width: 600px !important;
+  }
+}
+.el-form-item__label {
+  font-weight: bold;
+}
+</style>
+<style lang="scss" scoped>
+.project-handle {
+  width: 100%;
+  height: calc(100vh - 120px);
+  background: #ffffff;
+  box-sizing: border-box;
+  padding: 10px;
+  .project-detail {
+    width: 100%;
+    height: 49%;
+    border: 2px solid #ccc;
+    box-sizing: border-box;
+    padding: 10px;
+    padding-top: 20px;
+    float: left;
+    margin-bottom: 1%;
+    position: relative;
+    .project-detail-tip {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 80px;
+      height: 30px;
+      line-height: 30px;
+      color: #ffffff;
+      background: #4ac38b;
+      text-align: center;
+    }
+    .el-form {
+      width: 58%;
+      height: 100%;
+      float: left;
+      overflow-y: auto;
+      &::-webkit-scrollbar {
+        width: 5px;
+        height: 1px;
+      }
+      &::-webkit-scrollbar-thumb {
+        border-radius: 5px;
+        background: #ccc;
+      }
+      &::-webkit-scrollbar-track {
+        border-radius: 10px;
+        background: #fff;
+      }
+    }
+    .container {
+      width: 40%;
+      height: 100%;
+      float: right;
+      .location {
+        height: 30px;
+        line-height: 30px;
+      }
+      #map {
+        width: 100%;
+        height: calc(100% - 30px);
+      }
+    }
+  }
+  .project-progress {
+    width: 20%;
+    height: 100%;
+    float: right;
+    border: 2px solid #ccc;
+    box-sizing: border-box;
+    margin-left: 1%;
+    padding-top: 20px;
+    overflow-y: auto;
+    &::-webkit-scrollbar {
+      width: 5px;
+      height: 1px;
+    }
+    &::-webkit-scrollbar-thumb {
+      border-radius: 5px;
+      background: #aaa;
+    }
+    &::-webkit-scrollbar-track {
+      border-radius: 10px;
+      background: #ccc;
+    }
+  }
+  .handle-operation {
+    padding-top: 30px;
+    box-sizing: border-box;
+    width: 100%;
+    height: 49%;
+    box-sizing: border-box;
+    border: 2px solid #ccc;
+    float: left;
+    position: relative;
+    overflow-y: auto;
+    &::-webkit-scrollbar {
+      width: 5px;
+      height: 1px;
+    }
+    &::-webkit-scrollbar-thumb {
+      border-radius: 5px;
+      background: #aaa;
+    }
+    &::-webkit-scrollbar-track {
+      border-radius: 10px;
+      background: #ccc;
+    }
+    .handle-operation-tip {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 80px;
+      height: 30px;
+      line-height: 30px;
+      color: #ffffff;
+      background: #ff7600;
+      text-align: center;
+    }
+  }
+}
+</style>
diff --git a/src/views/modules/heart/volunteerunionact-detail.vue b/src/views/modules/heart/volunteerunionact-detail.vue
index a608300..df5c522 100644
--- a/src/views/modules/heart/volunteerunionact-detail.vue
+++ b/src/views/modules/heart/volunteerunionact-detail.vue
@@ -1,6 +1,13 @@
 <template>
   <el-dialog :visible.sync="visible" title="详情" :close-on-click-modal="false" :close-on-press-escape="false">
     <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '160px' : '120px'">
+          <el-row>
+          <el-form-item label="活动头图">
+            <img v-if="dataForm.headPic"
+                 :src="dataForm.headPic"
+                 class="avatar">
+          </el-form-item>
+        </el-row>
           <el-form-item label="所属联盟">
             {{dataForm.unionName}}
         </el-form-item>
@@ -50,7 +57,8 @@ export default {
         actEndTime: '',
         content: '',
         sort: '',
-        images: []
+        images: [],
+        headPic: ''
       },
       previewImgList: []
     }
@@ -90,3 +98,163 @@ export default {
   }
 }
 </script>
+<style>
+.avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+.avatar-uploader .el-upload:hover {
+  border-color: #409eff;
+}
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 178px;
+  height: 178px;
+  line-height: 178px;
+  text-align: center;
+}
+.avatar {
+  width: 178px;
+  height: 178px;
+  display: block;
+}
+</style>
+<style lang="scss">
+.project-handle {
+  .el-timeline {
+    padding-left: 9px;
+    font-size: 13px;
+  }
+  .el-textarea {
+    width: 600px !important;
+  }
+  .el-input {
+    width: 600px !important;
+  }
+}
+.el-form-item__label {
+  font-weight: bold;
+}
+</style>
+<style lang="scss" scoped>
+.project-handle {
+  width: 100%;
+  height: calc(100vh - 120px);
+  background: #ffffff;
+  box-sizing: border-box;
+  padding: 10px;
+  .project-detail {
+    width: 100%;
+    height: 49%;
+    border: 2px solid #ccc;
+    box-sizing: border-box;
+    padding: 10px;
+    padding-top: 20px;
+    float: left;
+    margin-bottom: 1%;
+    position: relative;
+    .project-detail-tip {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 80px;
+      height: 30px;
+      line-height: 30px;
+      color: #ffffff;
+      background: #4ac38b;
+      text-align: center;
+    }
+    .el-form {
+      width: 58%;
+      height: 100%;
+      float: left;
+      overflow-y: auto;
+      &::-webkit-scrollbar {
+        width: 5px;
+        height: 1px;
+      }
+      &::-webkit-scrollbar-thumb {
+        border-radius: 5px;
+        background: #ccc;
+      }
+      &::-webkit-scrollbar-track {
+        border-radius: 10px;
+        background: #fff;
+      }
+    }
+    .container {
+      width: 40%;
+      height: 100%;
+      float: right;
+      .location {
+        height: 30px;
+        line-height: 30px;
+      }
+      #map {
+        width: 100%;
+        height: calc(100% - 30px);
+      }
+    }
+  }
+  .project-progress {
+    width: 20%;
+    height: 100%;
+    float: right;
+    border: 2px solid #ccc;
+    box-sizing: border-box;
+    margin-left: 1%;
+    padding-top: 20px;
+    overflow-y: auto;
+    &::-webkit-scrollbar {
+      width: 5px;
+      height: 1px;
+    }
+    &::-webkit-scrollbar-thumb {
+      border-radius: 5px;
+      background: #aaa;
+    }
+    &::-webkit-scrollbar-track {
+      border-radius: 10px;
+      background: #ccc;
+    }
+  }
+  .handle-operation {
+    padding-top: 30px;
+    box-sizing: border-box;
+    width: 100%;
+    height: 49%;
+    box-sizing: border-box;
+    border: 2px solid #ccc;
+    float: left;
+    position: relative;
+    overflow-y: auto;
+    &::-webkit-scrollbar {
+      width: 5px;
+      height: 1px;
+    }
+    &::-webkit-scrollbar-thumb {
+      border-radius: 5px;
+      background: #aaa;
+    }
+    &::-webkit-scrollbar-track {
+      border-radius: 10px;
+      background: #ccc;
+    }
+    .handle-operation-tip {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 80px;
+      height: 30px;
+      line-height: 30px;
+      color: #ffffff;
+      background: #ff7600;
+      text-align: center;
+    }
+  }
+}
+</style>