<template>
  <!--搜索区块（Banner）-轮播横-->
  <div style="margin-top:-60px">
    <q-carousel v-model="slide" :autoplay="5000" swipeable animated control-color="white" padding arrows navigation
      transition-prev="slide-right" transition-next="slide-left" infinite height="666px"
      class="bg-primary text-white shadow-1">
      <q-carousel-slide v-for="(x, i) in plugData.Details" v-if="x.ImageUrl!=''" :key="i" @click="clickSlideHandler(x.LinkUrl)" :name="i"
        :img-src="x.ImageUrl" />
    </q-carousel>
  </div>
</template>
<script>
  //搜索区块（Banner）-轮播横
  import popup from "../props/index";
  export default {
    props: ["plugData"],
    components: {
      popup
    },
    data() {
      return {
        slide: 0,
      };
    },
    mounted() {
      this.$root.$emit("change-head-style", 2);
    },
    methods: {
      clickSlideHandler(url) {
        if (url && url.length > 1) {
          this.OpenNewUrl(url);
        }
      }
    }
  };

</script>

<style>
  .showbox {
    position: absolute;
    box-sizing: border-box;
    width: 100%;
    height: 345px;
    background: #fff;
    left: 0;
    top: 56px;
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3), 0px 0px 20px rgba(0, 0, 0, 0.1);
  }

  .showspbox {
    position: absolute;
    box-sizing: border-box;
    width: calc(41.6667% - 22px);
    height: 345px;
    background: #fff;
    left: 0;
    top: 56px;
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3), 0px 0px 20px rgba(0, 0, 0, 0.1);
  }

  .my-menu-link {
    background-color: rgb(237, 237, 237) !important;
  }

  .area-box .h3 {
    font-size: 22px;
    color: #333;
    font-weight: 600;
    padding: 0;
    height: unset;
    list-style: unset;
    margin: 0;
    cursor: pointer;
  }

  .area-box .h4 {
    font-size: 18px;
    color: #424242;
    padding: 0;
    height: unset;
    list-style: unset;
    margin: 0;
    margin-right: 20px;
    font-weight: 600;
    cursor: pointer;
  }

  .area-box .h5 {
    font-size: 16px;
    color: #636363;
    padding: 0;
    height: unset;
    list-style: unset;
    margin: 0;
    margin-right: 12px;
    cursor: pointer;
  }

  .area-box .h6 {
    font-size: 14px;
    color: gray;
    padding: 0;
    height: unset;
    list-style: unset;
    margin: 0;
    text-align: right;
    cursor: pointer;
  }

  .area-box .h6:hover,
  .area-box .h5:hover,
  .area-box .h4:hover,
  .area-box .h3:hover {
    color: var(--q-color-primary);
  }

  .area-box .to-end {
    align-items: flex-end;
  }

  .chosen-box {
    padding: 15px;
    min-height: 30vh;
  }

  .chosen-box .title {
    font-size: 20px;
    font-weight: 600;
    color: #111;
    margin-bottom: 5px;
  }

  .chosen-box .split-word {
    font-size: 15px;
    color: #333;
    line-height: 56px;
  }

</style>
