esua-epdc-admin/src/views/pages/projectHandle.vue

<template>
  <div class="project-handle">

    <div class="project-detail">
      <el-form label-position="right" label-width="120px">
        <el-form-item label="议题内容：">

        </el-form-item>
        <el-form-item label="议题图片：">

        </el-form-item>
        <el-form-item label="上报时间：">

        </el-form-item>
        <el-form-item label="上报人：">

        </el-form-item>
        <el-form-item label="电话：">

        </el-form-item>
        <el-form-item label="所属类别：">

        </el-form-item>
        <el-form-item label="项目态度:">

        </el-form-item>
        <el-form-item label="项目评论：">
          <el-button type="text">查看评论</el-button>
        </el-form-item>
      </el-form>
      <div class="container">
        <div class="location">上报位置: 山东省青岛市市北区南宁路138号</div>
        <div id="map"></div>
      </div>
    </div>

    <div class="project-progress">
      <el-timeline>
        <el-timeline-item
          v-for="(activity, index) in activities"
          :key="index"
          :icon="activity.icon"
          :type="activity.type"
          :color="activity.color"
          :size="activity.size">
          <div v-html="activity.content"></div>
        </el-timeline-item>
      </el-timeline>
    </div>

    <div class="handle-operation">
      <el-form label-position="right" label-width="120px">
        <el-form-item label="处理:">

        </el-form-item>
        <el-form-item label="吹哨部门:">

        </el-form-item>
        <el-form-item label="回复居民意见">

        </el-form-item>
        <el-form-item label="项目处理意见">

        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import BMap from 'BMap'
import 'element-ui/lib/theme-chalk/timeline.css'
import 'element-ui/lib/theme-chalk/timeline-item.css'
export default {
  name: 'projectHandle',
  data () {
    return {
      map: '',
      activities: [{
        content: '<div>2019-09-25 12:32:32 【回应】</div><div>处理部门： 街道处理部门</div><div>处理意见： 氛围分隔符方式风格人物</div>',
        color: '#0980ff'
      },
      {
        content: '<div>2019-09-25 12:32:32 【回应】</div><div>处理部门： 街道处理部门</div><div>处理意见： 氛围分隔符方式风格人物</div>',
        color: '#FF4C52'
      },
      {
        content: '<div>2019-09-25 12:32:32 【回应】</div><div>处理部门： 街道处理部门</div><div>处理意见： 氛围分隔符方式风格人物</div>',
        color: '#FF4C52'
      },
      {
        content: '<div>2019-09-25 12:32:32 【回应】</div><div>处理部门： 街道处理部门</div><div>处理意见： 氛围分隔符方式风格人物</div>',
        color: '#FF4C52'
      },
      {
        content: '<div>2019-09-25 12:32:32 【回应】</div><div>处理部门： 街道处理部门</div><div>处理意见： 氛围分隔符方式风格人物</div>',
        color: '#FF4C52'
      },
      {
        content: '<div>2019-09-25 12:32:32 【回应】</div><div>处理部门： 街道处理部门</div><div>处理意见： 氛围分隔符方式风格人物</div>',
        color: '#FF4C52'
      },
      {
        content: '<div>2019-09-25 12:32:32 【回应】</div><div>处理部门： 街道处理部门</div><div>处理意见： 氛围分隔符方式风格人物</div>',
        color: '#FF4C52'
      },
      {
        content: '<div>2019-09-25 12:32:32 【回应】</div><div>处理部门： 街道处理部门</div><div>处理意见： 氛围分隔符方式风格人物</div>',
        color: '#FF4C52'
      },
      {
        content: '<div>2019-09-25 12:32:32 【回应】</div><div>处理部门： 街道处理部门</div><div>处理意见： 氛围分隔符方式风格人物</div>',
        color: '#FF4C52'
      },
      {
        content: '<div>2019-09-25 12:32:32 【回应】</div><div>处理部门： 街道处理部门</div><div>处理意见： 氛围分隔符方式风格人物</div>',
        color: '#FF4C52'
      },
      {
        content: '<div>2019-09-25 12:32:32 【回应】</div><div>处理部门： 街道处理部门</div><div>处理意见： 氛围分隔符方式风格人物</div>',
        color: '#FF4C52'
      },
      {
        content: '<div>2019-09-25 12:32:32 【回应】</div><div>处理部门： 街道处理部门</div><div>处理意见： 氛围分隔符方式风格人物</div>'
      }]
    }
  },
  mounted () {
    this.initBmap()
  },
  methods: {
    initBmap () {
      this.map = new BMap.Map('map')
      const point = new BMap.Point(120.38821849395045, 36.120219258412966)
      var marker = new BMap.Marker(point)
      this.map.addOverlay(marker)
      this.map.centerAndZoom(point, 13)
      this.map.enableScrollWheelZoom(true)
    }
  }
}
</script>

<style lang="scss" scoped>
.project-handle {
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  padding: 10px;
  .project-detail {
    width: 79%;
    height: 49%;
    border: 2px solid #ccc;
    box-sizing: border-box;
    padding: 10px;
    float:left;
    margin-bottom: 1%;
    .el-form {
      width: 58%;
      height: 100%;
      float:left;
      overflow-y:auto;
      &::-webkit-scrollbar {
        width: 5px;
        height: 1px;
      }
      &::-webkit-scrollbar-thumb {
        border-radius: 5px;
        background: #fff;
      }
      &::-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 {
    width: 79%;
    height: 49%;
    box-sizing: border-box;
    border: 2px solid #ccc;
    float:left;
  }
}
</style>