ShowEasyFrontEnd/FrontEnd/components/exhibition/ExhibitionHighlightReview.vue

<template>
  <v-row class="mb-6">
    <v-col cols="12">
      <div v-if="exhibition.reviews != null" class="reviewsArea">
        <div class="peoplePic">
          <v-img
            src=""
            class="peopleImg"
          ></v-img>
        </div>
        <div class="reviewsDetailArea ml-5">
          <v-sheet>
            <div>
              <b>{{  }}</b>
            </div>
            <div>{{  }}</div>
            <div style="border-radius: 15px; background: #f8f8f8;">
              <div class="ml-3">{{  }}</div>
            </div>
            
          </v-sheet>
        </div>
      </div>
    </v-col>
  </v-row>
</template>

<script>
export default {
  name: "ExhibitionHighlightReview",
  props: {
    exhibition: {
      type: Object,
      default:  () => ({
        reviews: {},
      })
    },
  },
};
</script>

<style>
.peoplePic {
  grid-area: peoplePic;
}
.reviewsDetailArea {
  grid-area: reviewsDetailArea;
}
.reviewsArea {
  display: grid;
  grid-template-areas:
    "peoplePic peoplePic reviewsDetailArea reviewsDetailArea reviewsDetailArea reviewsDetailArea"
    "peoplePic peoplePic reviewsDetailArea reviewsDetailArea reviewsDetailArea reviewsDetailArea"
    "peoplePic peoplePic reviewsDetailArea reviewsDetailArea reviewsDetailArea reviewsDetailArea";
}
</style>