hjyd-mobile/src/components/AboutUs.vue

<template>
  <div class="about_us_card_container">
    <HeadLine themeTitle="关于" title="我们" line1="ABOUT US" :theme="theme" />
    <div :class="isHard ? 'hard_color tag' : theme ? 'theme_color tag' : 'tag'">
      <span class="fontscale">专业从事研发13年</span>
    </div>
    <article class="article">
      产品梦工厂作为一家资深的研发公司，主导了大量产品从需求→产品定义→策划→外
      观→结构→硬件→嵌软→软件→全功能样机→模具→批量→灰度测试→产能爬坡全流
      程经验核心团队有工业控制/物联网领域/机械传动领域的专家组成，在机器视觉、自
      动化控制行业有多年的从业经验。是行业领先的智慧创新产品服务提供商，为客户提供一体化研发服务，聚焦产品创新研发服务。对于硬件、软件、机械传动结构、wifi、
      zigbee、蓝牙、射频、工业机器视觉等，源码级别开发。
    </article>
  </div>
</template>

<script setup>
import HeadLine from 'cpns/HeadLine'
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
const isHard = ref(false)

onMounted(() => {
  if (route.path.indexOf('/hardware') != -1) {
    isHard.value = true
  }
})
const props = defineProps({
  theme: {
    type: Boolean,
    default: false,
  },
})
</script>

<style lang="scss" scoped>
.about_us_card_container {
  padding: 0 31px;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  .tag {
    width: 90px;
    height: 17px;
    background: $home-color;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
    border-radius: 8px;
    .fontscale {
      font-size: 14px;
      transform: scale(0.5);
      white-space: nowrap;
    }
  }
  .hard_color {
    background: $hardware-theme;
  }
  .theme_color {
    background: $theme-color;
  }
  .article {
    font-family: Source Han Sans CN;
    font-weight: 300;
    color: #595959;
    line-height: 20px;
    font-size: 14px;
    transform: scale(0.5);
    width: 200%;
    max-height: 66px;
  }
}
</style>