DesignReport.vue

<template>
  <div id='designReport'>
    <div class='page'>
      <div class='pageHeader'>
        <div>
          <h2>CHI: Design Report</h2>
        </div>
      </div>

      <div class='pageContent'>
        <div class="renderContainer">
          <b-img class='render' :src="currentProduct.renderedImage || 'https://via.placeholder.com/350x150'"/>
        </div>
        <div class='productSelectionContainer'>
          <h4>Product Summary</h4>
          <div v-if="currentLayer" class="summary">
            <designSelection
              v-for="step of currentLayer.steps"
              v-show="step.selected"
              :class="{ active: step.active }"
              :key="step.name"
              :step="step"
            />
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import { mapState } from 'vuex';
import DesignSelection from '@/components/DesignSelection';

export default {
  name: 'designReport',
  computed: {
    ...mapState([
      'currentLayer',
      'currentProduct',
    ]),
  },
  components: {
    DesignSelection,
  },
};
</script>

<style lang='scss'>
@page {
	size: A4 landscape;
	margin: 0;
}

#designReport {
  .page {
    display: flex;
    flex-flow: column;
    width: 27.9cm;
    height: 19.5cm;
    padding: 2cm;
    margin: 1cm auto;
    border: 1px #D3D3D3 solid;
    background: white;
    box-shadow: 0 0 10px #ccc;

    @media print {
      margin: 0;
      border: initial;
      border-radius: initial;
      width: initial;
      min-height: initial;
      box-shadow: initial;
      background: initial;
      page-break-after: always;
    }

    .pageHeader {
      display: flex;
      flex-flow: column;
      width: 100%;
      height: 85pt;
      text-align: center;
    }

    .pageContent {
      display: flex;
      height: 100%;
      margin-top: 15pt;

      .renderContainer {
        width: 50%;
        margin: auto;
        .render {
          margin-left: auto;
          margin-right: auto;
        }
      }

      .productSelectionContainer {
        display: flex;
        flex-flow: column;
        width: 50%;
        height: 100%;
        margin-top: 15pt;

        h4 {
          margin: 0;
        }

        .summary {
          display: flex;
          flex-flow: column;
          margin-top: auto;
          margin-bottom: auto;
        }
      }
    }
  }
}
</style>