<template>
  <view class="overviewWpy eventPageModule">
    <view class="title">概览</view>
    <view class="content">

      <view class="info">
        <view class="left">
          <image src="{{ overviewData.img }}" />
        </view>
        <view class="right">
          <view class="name ellipsis">{{ overviewData.name }}</view>
          <view class="tagTime">
            <view class="tags">
              <repeat for="{{ overviewData.tags }}" item="n" index="i" key="i">
                <view>{{ n }}</view>
              </repeat>
            </view>
            <view class="time">{{ overviewData.time }}</view>
          </view>
        </view>
      </view>

      <view class="desc">{{ overviewData.desc }}</view>

    </view>
  </view>
</template>

<script>
import wepy from 'wepy'

export default class overview extends wepy.component {
  data = {
    overviewData: {
      name: '事件名XXXXXXXXXX',
      img: '../static/img/avatar.png',
      tags: ['负面危机'],
      time: '2018-09-23',
      desc: Array(3).fill('Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ').join('')
    }
  }

  onLoad () {
    console.log('overview')
  }
}
</script>

<style lang="scss" scoped>
.overviewWpy{
  .content{
    padding: 20rpx 24rpx;
    .info{
      display: flex;
      margin-bottom: 30rpx;
      .left{
        image{
          display: block;
          width: 96rpx;
          height: 96rpx;
          border: 2rpx solid #DADADA;
        }
      }
      .right{
        flex: 1 1;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding-left: 30rpx;
        .name{
          color: #49619F;
          font-size: 36rpx;
        }
        .tagTime{
          display: flex;
          justify-content: space-between;
          align-items: center;
          .tags{
            view{
              display: inline-block;
              border: 2rpx solid #49619F;
              padding: 6rpx 12rpx;
              margin-right: 10rpx;
            }
          }
          .time{
            color: #B5B5B5;
          }
        }
      }
    }
    .desc{
      line-height: 1.5;
      color: #646464;
      word-break: break-all;
    }
  }
}
</style>
