<template>
  <!--背景圖 - 文左-->
  <div class="q-mt-md">
    <section
      class="about1"
      :style="{ backgroundImage: `url('${plugData.ImageUrl}')` }"
      :class="{ padding: isPadding }"
    >
      <div class="section-block">
        <div class="about-main">
          <h2 class="about-title">{{ plugData.Title.split("|")[0] }}</h2>
          <div class="about-content f12">
            {{ plugData.Describe }}
          </div>
          <q-btn
          v-if="link"
            label="立即奔赴"
            class="q-mt-md"
            icon-right="iconfont iconswap-right"
            style="background: rgba(210, 210, 210, 0.7)"
            unelevated
            @click="OpenNewUrl"
          />
        </div>
      </div>
    </section>
  </div>
</template>
<script>
export default {
  props: ["plugData"],
  data() {
    return {
      isPadding: false,
      link: "",
    };
  },
  mounted() {
    if (this.plugData) {
      if (this.plugData.Title.indexOf("|padding") != -1) {
        this.isPadding = true;
      }
      if (this.plugData.Title.indexOf("http://") != -1) {
        let t = this.plugData.Title.split("|").find(
          (x) => x.indexOf("http://") != -1
        );
        this.link = t;
      }
    }
  },
  methods: {
    OpenNewUrl(){
      window.location.href=this.link
    }
  },
};
</script>
<style>
.about1 {
  background-size: cover;
  background-position: center;
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
}
.about1.padding {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
  border-radius: 5px;
  overflow: hidden;
}
.about1::after {
  top: 0;
  left: 0;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  content: "";
  right: 0;
  position: absolute;
  bottom: 0;
}

.about1 .about-main {
  position: relative;
  padding: 100px 0;
  z-index: 2;
  width: 50%;
  color: #fff;
  font-weight: 700;
  letter-spacing: 1px;
}

.about1 .about-main .about-title {
  margin-bottom: 35px;
  font-size: 38px;
  margin: 0;
  padding: 0;
  line-height: unset;
  font-weight: 600;
}

.about1 .about-main .about-content {
  font-size: 16px;
  line-height: 2.1;
  margin: 0;
  padding: 0;
}

@media only screen and (max-width: 1200px) {
  .about1 .about-main {
    padding-right: 30px !important;
    padding-left: 30px !important;
    width: 100% !important;
  }
}
</style>
