dvcp_v2_wxcp_app/src/saas/AppCountryAlbum/AddReport.vue

<template>
  <div class="report">
    <components class="report-item" :is="component"></components>
    <div class="report-list">
      <image @click="component = 'WorkReport'" :class="[component === 'WorkReport' ? 'active' : '']" src="./images/report1.png" />
      <image @click="component = 'Daily'" :class="[component === 'Daily' ? 'active' : '']" src="./images/report4.png" />
      <image @click="component = 'InspectLog'" :class="[component === 'InspectLog' ? 'active' : '']" src="./images/report2.png" />
      <image @click="component = 'MeetingMminutes'" :class="[component === 'MeetingMminutes' ? 'active' : '']" src="./images/report3.png" />
    </div>
  </div>
</template>

<script>
  import Daily from './components/Daily'
  import WorkReport from './components/WorkReport'
  import InspectLog from './components/InspectLog'
  import MeetingMminutes from './components/MeetingMminutes'

  export default {
    name: 'Report',

    appName: '工作汇报',

    data () {
      return {
        component: 'WorkReport'
      }
    },

    components: {
      Daily,
      InspectLog,
      WorkReport,
      MeetingMminutes
    },

    onLoad () {

    },

    methods: {

    }
  }
</script>

<style lang="scss" scoped>
  .report {
    height: 100vh;

    * {
      box-sizing: border-box;
    }

    .report-item {
      min-height: calc(100% - 240px);
      overflow-y: auto;
    }

    .report-list {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 240px;
      padding: 0 24px;
      background: #FFFFFF;

      image {
        width: 156px;
        height: 208px;
        margin-right: 16px;
        border: 4px solid transparent;

        &:last-child {
          margin-right: 0;
        }

        &.active {
          border: 4px solid #408EF6;
        }
      }
    }
  }
</style>