<template>
  <!--圖片 - 4x3-->
  <div>
    <section class="scence1 section-block">
      <div class="content">
        <h2 class="block-title">{{plugData.Title}}</h2>
        <p class="title-teaser">{{plugData.SubTitle}}</p>
      </div>
      <div class="scence-wrap">
        <ul class="scence-list">
          <li v-for="(item,index) in plugData.Details" :key="index" v-if="item.ImageUrl">
            <a @click="OpenNewUrl(item.LinkUrl)" target="_blank" class="img"
              :style="{backgroundImage:`url('${item.ImageUrl}')`}">
              <h4 class="scence-title" :title="item.TripTitle">{{
                  (item.TripTitle  &&item.TripTitle.length>14)? item.TripTitle.substring(0,14):item.TripTitle}}</h4>
            </a>
          </li>
        </ul>
      </div>
    </section>
  </div>
</template>

<script>
  //圖片 - 4x3
  export default {
    props: ["plugData"]
  };

</script>

<style>
  .scence1 {}

  .scence1 .block-title {
    font-size: 22px;
    font-weight: 600;
    padding: 0;
    margin: 0;
    line-height: unset;
  }

  .scence1 .title-teaser {
    margin-bottom: 10px;
    font-size: 16px;
    color: #999;
  }

  .scence1 .scence-wrap {
    margin-top: 15px;
  }

  .scence1 .scence-list {
    margin-left: -8px;
    margin-right: -8px;
    display: flex;
    flex-wrap: wrap;
    padding: 0;
  }

  .scence1 .scence-list>* {
    padding: 0;
    margin: 0;
    display: block;
    width: calc(25% - 16px);
    margin: 8px;
    transition: -webkit--webkit-transform 0.2s ease,
      -webkit--moz-transform 0.2s ease, -webkit--o-transform 0.2s ease,
      -webkit-transform 0.2s ease, -webkit-transform 0.2s ease,
      -moz-transform 0.2s ease, -o-transform 0.2s ease, transform 0.2s ease,
      box-shadow 0.2s ease;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.09);
  }

  .scence1 .scence-list>*:last-child {
    margin-right: 0px;
  }

  .scence1 .scence-list>* a {
    position: relative;
    display: block;
    width: 100%;
    padding-bottom: 44%;
    background-size: cover;
    border: 0;
    cursor: pointer;
  }

  .scence1 .scence-list>* a::before {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 50%;
    content: "";
    background-image: linear-gradient(to bottom,
        rgba(0, 0, 0, 0.02) 0,
        rgba(0, 0, 0, 0.8) 100%);
  }

  .scence1 .scence-list>* a .scence-title {
    position: absolute;
    display: block;
    padding: 0 16px 16px;
    white-space: pre-wrap;
    right: 0;
    bottom: 0;
    left: 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 20px;
    color: #fff;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    word-break: break-all;
  }

  .scence1 .scence-list>* {
    display: block;
    width: calc(25% - 16px);
    margin: 8px;
    transition: -webkit--webkit-transform 0.2s ease,
      -webkit--moz-transform 0.2s ease, -webkit--o-transform 0.2s ease,
      -webkit-transform 0.2s ease, -webkit-transform 0.2s ease,
      -moz-transform 0.2s ease, -o-transform 0.2s ease, transform 0.2s ease,
      box-shadow 0.2s ease;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.09);
  }

  @media only screen and (min-width: 1200px) {
    .scence1 .scence-list> :hover {
      transform: translate(0, -4px) !important;
      box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.2), 0 0 0 0 rgba(0, 0, 0, 0.1) !important;
    }
  }

  @media only screen and (max-width: 800px) {
    .scence1 .scence-wrap {
      height: 135px !important;
      overflow: hidden !important;
    }

    .scence1 .scence-list {
      padding-bottom: 30px !important;
      width: 100% !important;
      display: block !important;
      white-space: nowrap !important;
      overflow-y: scroll !important;
    }

    .scence1 .scence-list>* {
      display: inline-block !important;
      vertical-align: middle !important;
      width: 280px !important;
    }
  }

</style>
