<template>
  <div class="about_us">
    <!-- 顶部图片 -->
    <div class="about_us_bg">
      <img src="../../assets/aboutus.jpg" alt=""/>
    </div>
    <!--标签栏 -->
    <ProductsTabsItem :tab-list="aboutTabs" :title="1" :fatherMethod="handleClick"/>
    <!-- 关于我们的内容-->
    <el-row type="flex">
      <el-col :xs="1" :sm="2" :md="2" :lg="2" :xl="4"></el-col>
      <el-col :xs="22" :sm="20" :md="20" :lg="20" :xl="16">
        <div class="introduce" id="introduce">
          <span v-html="pList"></span>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import ProductsTabsItem from "@/components/ProductsTabsItem";
import {getArticleInfo} from "@/api";

export default {
  name: "index",
  components: {ProductsTabsItem},
  data() {
    return {
      aboutTabs: [],
      pList: []
    }
  },
  mounted() {
    //获取关于我们的数据
    getArticleInfo(1).then(res => {
      this.aboutTabs = res.data.articlelist;
      this.pList = res.data.articleinfo.content
    });
  },
  methods: {
    handleClick(tab) {
      for (let i = 0; i < this.aboutTabs.length; i++) {
        if (this.aboutTabs[i].title === tab._props.label) {
          getArticleInfo(this.aboutTabs[i].id).then(res => {
            this.aboutTabs = res.data.articlelist;
            this.pList = res.data.articleinfo.content
          });
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
@media only screen and (max-width: 1660px) {
  .culture_img {
    img {
      width: 550px !important;
    }
  }
}

@media only screen and (max-width: 1480px) {
  .culture_img {
    img {
      width: 500px !important;
    }
  }
}

#band {
  display: none;
}

#ideas {
  display: none;
}

#culture {
  display: none;
  margin: 60px 0;
}

* {
  font: 16px/1.8 "微软正黑体", "Microsoft JhengHei", "Microsoft Yahei", "微软雅黑", "Hiragino Sans GB", "冬青黑体", "Arial", "Helvetica", "SimHei", "黑体", "STXihei", "华文细黑", sans-serif;
}

.about_us {
  min-width: 1300px;

  .about_us_bg {
    height: 360px;
    img{
      width: 100%;
      height: 360px;
      object-fit: cover;
    }
  }

  .introduce {
    padding: 40px 0;
    font-size: 16px;

    p {
      padding-bottom: 25px;
    }
  }

  .band {
    p {
      padding-bottom: 50px;

      span {
        display: block;
      }
    }
  }

  .cul_1 {
    flex-direction: row-reverse;
  }

  .cul_3 {
    flex-direction: row-reverse;
  }

  #culture_content {
    display: flex;
    padding: 10px 10px 40px 10px;

    .culture_img {
      padding: 10px;
      margin: 0 30px;
    }


    .culture_right {
      padding: 10px;

      span:first-child {
        display: block;
      }

      span:last-child {
        font-size: 14px;
        margin-top: 0px;
        margin-bottom: 0px;
        white-space: normal;
        padding: 0px;
        line-height: 32px;
        color: rgb(94, 94, 94);
      }
    }
  }
}
</style>
