cas_cloud_web_i18n/src/views/website/about/about.vue

<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 name="AboutUs">
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;
  const res = {
    code: 200,
    message: "ok",
    data: {
      id: "LBZ5aPXa6NkM",
      title: "关于我们",
      is_multiple: 0,
      images:
        "https://www.casshare.com/upimages/upload/20220310/7ed3a751b8c799f5f6f29d68d50cf7da.png",
    },
  };
  banner({ locals: "关于我们" })
    .then((resp) => {
      state.banner = resp.data[0].images;
    })
    .catch(() => {
      loading.value = false;
    });
  //   .then((res) => {
  //     if (200 == res.code) {
  // loading.value = false;
  //   }
  // })
  // console.log("baout1");
  const resp = {
    code: 200,
    message: "ok",
    data: [
      {
        id: "1m9Qa2ZaOvEp",
        title: "机构简介",
        content:
          '\u003cul\u003e\u003cli class="ql-align-justify"\u003e       安徽中科云数字科技有限公司是由中科院中科第三极技术研究院联合中科院文献情报中心共同发起，并创建中科云数字科创服务系统（中科云）。\u003c/li\u003e\u003cli\u003e       中科云致力于中科院及全球科技资源开放共享及科技成果转化。中科云集聚中科院等高校院所体系人才、团队、科技成果等创新资源，为企业提供包括人才专家、科技成果、实验室、科技情报、知识产权等创新资源的精准服务，通过知识图谱、语义理解、智能算法为企业提供“一键匹配”的科技资源信息精准推送服务，提高创新效率，降低创新成本，解决企业在创新发展中遇到的难题。目前中科云平台已集聚中科院约10000+专家教授、30万+科技成果、600+个省部级重点实验室，服务约600家高科技企业。同时中科云服务安徽省合肥市“四送一服”科技专项服务行动，线上征集与发布本地企业需求，科技成果，实现本地科技成果就地转化落地。\u003c/li\u003e\u003cli\u003e       中科云作为“合肥市‘一带一路’科技产业创新战略联盟”的秘书长单位，帮助企业开展国际产学研合作，拓展海外市场。\u003c/li\u003e\u003c/ul\u003e',
        children: null,
      },
      {
        id: "Q7K1Jx6VYodq",
        title: "公司动态",
        content: "\u003cp\u003e\u003cbr\u003e\u003c/p\u003e",
        children: null,
      },
      {
        id: "E8MnaAkwDj1X",
        title: "公司动态二级目录",
        content: "\u003cp\u003e\u003cbr\u003e\u003c/p\u003e",
        children: null,
      },
    ],
  };
  // about().then((res) => {
  //   console.log("baout2");
  //   if (200 == res.code) {
  console.log("baout", resp);
  state.data = resp.data;
  loading.value = false;
  //   }
  // });
}
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>