xinkeaboard/xinkeaboard-promotion-portal/src/components/TopContent.vue

<template>
  <div class="head-content">
    <img :src="Logo" />
    <div class="head-content-wrap">
      <h2>市场迷雾？罗经开路！</h2>
      <span class="head-content-wrap__title">
        Lookeen 是一个服务于首次出海客户的 AI 商情系统(GTM Analytics
        Tools 市场进入分析工具)。目的是提供客户自己的产品品类在目标市场的商业情报，降低用户对产品在目标市场的不确定性。
      </span>
      <div class="head-content-wrap__step">
        <span class="label">只需三步</span>
        <span class="tip">(每月可免费获取3次商品分析)</span>
      </div>
      <div class="head-content-wrap__select">
        <CountrySelct></CountrySelct>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import CountrySelct from '@/components/CountrySelct.vue';
import Logo from '@/assets/images/logo.svg';
</script>

<style lang="scss" scoped>
.head-content {
  &-wrap {
    margin-top: 1rem;
    h2 {
      margin: 0;
      font-weight: bold;
      font-size: 2.5rem;
      color: #282e30;
    }
    padding-left: 1.25rem;

    &__title {
      display: inline-block;
      font-weight: 400;
      font-size: 1rem;
      color: #282e30;
      margin-top: 1.25rem;
    }

    &__step {
      margin-top: 3.75rem;

      .label {
        font-weight: bold;
        font-size: 1.5rem;
        color: #036eb8;
      }

      .tip {
        font-weight: 400;
        font-size: 0.75rem;
        color: #282e30;
        margin-left: 0.625rem;
      }
    }

    &__select {
      margin-top: 10px;
    }
  }
}
</style>