foresightVertures/src/views/AboutView.vue

<template>
  <div class="about">
    <div class="container">
      <!-- 标题 title -->
      <BigTitleComVue bigTitle="About" text-align="right" />
      <div class="about-foresight">
        <!--        <LineTitleComVue :msg="'About Foresight'" />-->
        <div class="about-foresight-content" v-html="aboutDesc.content" />
      </div>
      <!-- 分类标题 sideTitle -->
      <BigTitleComVue bigTitle="Team" text-align="right" />
      <!-- <div class="s_title">Team</div> -->
      <!-- 团队成员 team members -->
      <div class="members">
        <template v-for="item in teamData" :key="item">
          <MembersComVue :info="item" />
        </template>
      </div>
    </div>
    <div class="touch">
      <div class="container">
        <div class="block"></div>
        <BigTitleComVue bigTitle="Get in Touch" text-align="right" />
        <div class="touch-list">
          <div :key="item" v-for="item in Object.keys(get_in_touch)" class="touch-email">
            <div class="touch-email-title">
              {{ item }}
            </div>
            <div class="touch-email-content">
              {{ get_in_touch[item] }}
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>
<script setup>
import BigTitleComVue from '../components/BigTitleCom.vue';
import LineTitleComVue from '../components/LineTitleCom.vue';
import MembersComVue from '../components/MembersCom.vue';
import { onMounted, reactive, ref, computed } from "vue";
import { getConfigApi, getNavData, getNavInfoApi, getPageApi, getTeamApi } from "../api/manage.js";
import { useStore } from "vuex";
import { useRoute } from "vue-router";
import useTitleInfo from "../utils/useTitleInfo.js";
const titleInfo = useTitleInfo()
const get_in_touch = ref({
})
const teamData = ref([])

const aboutDesc = ref({})
// 虚拟数据
/*
const teamData = [
  {
    img: '/images/About/image 63.jpg',
    name: 'Forest Bai',
    post: 'Co-founder & General Partner'
  },
  {
    img: '/images/About/image 56.jpg',
    name: 'Tony Cheng',
    post: 'General Partner'
  },
  {
    img: '/images/About/image 57.jpg',
    name: 'Hippy Pei',
    post: 'Partner'
  },
  {
    img: '/images/About/image 58.jpg',
    name: 'Jeff Ji',
    post: 'Vice President'
  },
  {
    img: '/images/About/image 59.jpg',
    name: 'Stella Xu',
    post: 'Vice President'
  },
  {
    img: '/images/About/image 60.jpg',
    name: 'Chelsea Jiang',
    post: 'Investment Manager'
  },
  {
    img: '/images/About/image 62.jpg',
    name: 'Jonas Guo',
    post: 'Trader'
  },
  {
    img: '/images/About/image 61.jpg',
    name: 'Yaxin Wang',
    post: 'PR Director'
  },
  {
    img: '/images/About/image 64.jpg',
    name: 'Suning Yao',
    post: 'Researcher'
  },
  {
    img: '/images/About/image 65.jpg',
    name: 'Alex Ge',
    post: 'Researcher'
  },
  {
    img: '/images/About/image 66.jpg',
    name: 'Alice Li',
    post: 'Researcher'
  },
  {
    img: '/images/About/image 67.jpg',
    name: 'Peter Li',
    post: 'Researcher'
  },
]
*/

const getData = () => {
  getTeamApi().then(res => {
    teamData.value = res.data
  })
  getConfigApi({ key: 'get_in_touch' }).then(res => {
    get_in_touch.value = res.data;
  })

  getPageApi({ title: 'About Foresight' }).then(res => {
    aboutDesc.value = res.data
  })
}

onMounted(() => {
  getData()
})
</script>
<style lang="scss" scoped>
.about {
  .members {
    padding: 28px 0 0;
    display: flex;
    flex-wrap: wrap;
    // justify-content: space-between;
    margin: 0 auto;

    @media screen and (min-width:1440Px) and (max-width: 100vw) {
      margin: 0 -20px;
    }

    @media screen and (min-width:0Px) and (max-width: 415Px) {
      margin: 0;
      padding: 0;
    }
  }

  .touch {
    padding: 20px 0 30px;

    @media screen and (min-width:1440Px) and (max-width: 100vw) {
      padding: 0px;
    }

    .block {
      display: none;
    }

    .touch-list {
      width: 100%;
      display: flex;
      justify-content: flex-end;
      margin-bottom: 80px;
    }

    @media (max-width: 1280Px) {
      .touch-list {
        flex-direction: column;
        margin-bottom: 0px;

        .touch-email {
          margin-bottom: 20px;
        }
      }
    }

    @media (max-width: 767Px) {
      .touch-list {
        flex-direction: column;
        margin-bottom: 0px;

        .touch-email {
          width: 100%;

          .touch-email-title {}

          .touch-email-content {
            font-size: 14px !important;
          }
        }
      }
    }

    .touch-email {
      background: #EFEFEF;
      margin-right: 14px;
      padding: 20px 26px;
      width: 360px;
      box-sizing: border-box;
      // margin-top: 24px;
      // margin-bottom: 10px;

      .touch-email-title {
        font-family: 'Libre Bodoni';
        font-style: normal;
        font-weight: 400;
        font-size: 12px;
        line-height: 18px;
        color: #999999;
      }

      .touch-email-content {
        font-family: 'Libre Bodoni';
        font-style: normal;
        font-weight: 400;
        font-size: 20px;
        line-height: 36px;
        color: rgba(0, 0, 0, 0.75);
      }

      @media screen and (min-width:1440Px) and (max-width: 100vw) {
        margin-top: 36px !important;

        .touch-email-title {
          font-size: 16px !important;
          line-height: 24px !important;
        }

        .touch-email-content {
          font-size: 24px !important;
          line-height: 36px !important;
        }
      }

      @media screen and (min-width:0Px) and (max-width: 415Px) {
        margin-top: 22px !important;
        margin-bottom: 0px !important;

        .touch-email-title {
          font-size: 14px !important;
          line-height: 24px !important;
        }

        .touch-email-content {
          font-size: 24px !important;
          line-height: 36px !important;
        }
      }
    }
  }

  .about-foresight {
    margin-bottom: 40px !important;

    .block {
      height: 44px;
    }

    .about-foresight-content {
      //padding-top: 24px;
      //padding-bottom: 60px;
      text-align: right;
      font-family: 'Raleway';
      font-style: normal;
      font-weight: 400;
      font-size: 14Px;
      line-height: 16px;
      color: rgba(0, 0, 0, 1);

      @media screen and (min-width:1440Px) and (max-width: 100vw) {
        font-size: 16Px;
        //padding-bottom: 44px;

      }

      @media screen and (min-width:0Px) and (max-width: 415Px) {
        //padding-top: 36px;
        font-size: 12Px !important;
      }
    }

    .tabline {
      height: 14px;
    }

    @media screen and (min-width:1440Px) and (max-width: 100vw) {
      .container {
        padding-top: 0 !important;
      }

      .block {
        height: 54px !important;
      }
    }

    @media screen and (min-width:0Px) and (max-width: 415Px) {
      margin: 0;
      padding: 0;

      .container {
        padding-top: 0 !important;
      }
    }
  }
}

.s_title {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 400;
  font-size: 22px;
  line-height: 24px;
  text-align: right;
  color: rgba(0, 0, 0, 0.25);

  margin-top: 50Px;

  @media screen and (min-width:1440Px) and (max-width: 100vw) {
    font-size: 24px !important;
  }

  @media (max-width: 431Px) {
    margin-top: 36Px;
  }
}
</style>