<template>
  <div class="about" v-loading="loading">
    <div v-if="!state.banner" style="height: 394px; background-color: #ccc"></div>
    <div
      v-else
      style="height: 394px;background-size: cover;background-color: #ccc"
      :style="{ backgroundImage: `url(${state.banner})` }"
    ></div>

    <div class="box conter1000">
      <div class="_l">
        <div
          class="_item pointer"
          v-for="(item,index) in state.data"
          :class="index == kindId ? 'x_fff x_bg_blue' : ''"
          :key="item.id"
          @click="handleActive(index)"
        >{{ item.title }}</div>
      </div>
      <div class="_r">
        <div v-if="state.data.length" class="html" v-html="state.data[kindId]['content']"></div>
        <!-- 公司简介---后期可能是接收富文本内容 -->
        <!-- <h3>公司简介</h3>
        <p>
          中国科学院重庆绿色智能技术研究院合肥分院（以下简称“合肥分院”）是在响应中科院号召支持合肥国家科学中心建设的前提下，中国科学院重庆绿色智能技术研究院与合肥市共建的直属事业法人科研机构。2018年2月20号在中科院与安徽省共建领导小组会议上正式签约筹建，2018年12月20日，正式获得事业法人登记证书合肥分院设立科技咨询委员会和产业咨询委员会设人工智能、精准医疗、5G物联、绿色环保等研究单元。主要从事绿色智能科技研发与科技成果转化。合肥分院秉持重庆研究院“市场为魂，创新为本的理念。按照“院企共建、源头创新、科技共享、产业集聚”模式建设。以服务好科技工作者，服务好合作企业为宗旨。开展形式多样的成果转移转化加快科研成果落地。
        </p>
        <el-image
          src="https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg"
          fit="fill"
        ></el-image>
        <p>
          中国科学院重庆绿色智能技术研究院合肥分院（以下简称“合肥分院”）是在响应中科院号召支持合肥国家科学中心建设的前提下，中国科学院重庆绿色智能技术研究院与合肥市共建的直属事业法人科研机构。2018年2月20号在中科院与安徽省共建领导小组会议上正式签约筹建，2018年12月20日，正式获得事业法人登记证书合肥分院设立科技咨询委员会和产业咨询委员会设人工智能、精准医疗、5G物联、绿色环保等研究单元。主要从事绿色智能科技研发与科技成果转化。合肥分院秉持重庆研究院“市场为魂，创新为本的理念。按照“院企共建、源头创新、科技共享、产业集聚”模式建设。以服务好科技工作者，服务好合作企业为宗旨。开展形式多样的成果转移转化加快科研成果落地。
        </p>
        <p>
          中国科学院重庆绿色智能技术研究院合肥分院（以下简称“合肥分院”）是在响应中科院号召支持合肥国家科学中心建设的前提下，中国科学院重庆绿色智能技术研究院与合肥市共建的直属事业法人科研机构。2018年2月20号在中科院与安徽省共建领导小组会议上正式签约筹建，2018年12月20日，正式获得事业法人登记证书合肥分院设立科技咨询委员会和产业咨询委员会设人工智能、精准医疗、5G物联、绿色环保等研究单元。主要从事绿色智能科技研发与科技成果转化。合肥分院秉持重庆研究院“市场为魂，创新为本的理念。按照“院企共建、源头创新、科技共享、产业集聚”模式建设。以服务好科技工作者，服务好合作企业为宗旨。开展形式多样的成果转移转化加快科研成果落地。
        </p>
        <p>
          中国科学院重庆绿色智能技术研究院合肥分院（以下简称“合肥分院”）是在响应中科院号召支持合肥国家科学中心建设的前提下，中国科学院重庆绿色智能技术研究院与合肥市共建的直属事业法人科研机构。2018年2月20号在中科院与安徽省共建领导小组会议上正式签约筹建，2018年12月20日，正式获得事业法人登记证书合肥分院设立科技咨询委员会和产业咨询委员会设人工智能、精准医疗、5G物联、绿色环保等研究单元。主要从事绿色智能科技研发与科技成果转化。合肥分院秉持重庆研究院“市场为魂，创新为本的理念。按照“院企共建、源头创新、科技共享、产业集聚”模式建设。以服务好科技工作者，服务好合作企业为宗旨。开展形式多样的成果转移转化加快科研成果落地。主要从事绿色智能科技研发与科技成果转化。合肥分院秉持重庆研究院“市场为魂，创新为本的理念。按照“院企共建、源头创新、科技共享、产业集聚”模式建设。以服务好科技工作者，服务好合作企业为宗旨。开展形式多样的成果转移转化加快科研成果落地。
        </p>-->
      </div>
    </div>
    <webFooter></webFooter>
  </div>
</template>

<script setup>
import webFooter from "@/components/webFooter/index.vue";
import request from '@/utils/request'
import { banner } from "@/api/website/home/index";
function about () {
  return request({
    url: '/v1/sys/about',
    method: 'get',
  })
}
const loading = ref(true);
const state = reactive({
  data: [],
  banner: ''
});
const kindId = ref(0);

/** 查询 */
function getData () {
  loading.value = true;
  banner('关于我们').then(res => {
    if (200 == res.code) {
      state.banner = res.data.images
      loading.value = false;
    }
  }).catch(() => {
    loading.value = false;
  })
  console.log('baout1')
  about().then(res => {
    console.log('baout2')
    if (200 == res.code) {
      console.log('baout', res)
      state.data = res.data;
    }
  })
}
onMounted(() => {
  getData()
});
function handleActive (id) {
  kindId.value = id;
}
</script>

<style lang="scss" scoped>
.about {
  background-color: #f2f6ff;
  .box {
    margin-bottom: 30px;
    padding-top: 20px;
    display: flex;
    ._l {
      width: 230px;
      margin-right: 14px;
      ._item {
        text-align: center;
        height: 53px;
        line-height: 53px;
        font-size: 16px;
        color: #333;
        background-color: #fff;
      }
    }
    ._r {
      flex: 1;
      background: #fff;
      padding: 20px 40px;
      h3 {
        font-weight: 600;
        text-align: center;
        font-size: 18px;
        color: #333333;
      }
      p {
        font-size: 14px;
        color: #333333;
        line-height: 36px;
      }
    }
  }
}
</style>
