lightlimx-website/components/AboutUs/index.vue

<template>
  <section class="section-view" :style="isCssStyle" >
    <div class="section-view-h5-wrap">
      <h1 class="section-view-title wow fadeInUpBig">About Us</h1>
      <div class="section-view-content">
        <div class="section-view-circle wow fadeInUpBig" data-wow-delay=".5s">
          <slot></slot>
        </div>
        <div class="section-view-article">
          <h1 class="section-view-title wow fadeInUpBig" style="text-align: center">About Us</h1>
          <p class="section-view-article-p wow fadeInUpBig"  data-wow-delay=".3s" >LightLimX is an early-stage investment platform. We focus on markets where technology, innovation, and LightLimX can unlock long-term value and drive economic growth.</p>
          <p class="section-view-article-w wow fadeInUpBig" data-wow-delay=".4s">"To create miracles and give insight into the future together with entrepreneurs" is the original aspiration of LightLimX. As an investment institution with strong curiosity and corporate responsibility, we catalyze technological advancement by connecting blue chip corporations with the brightest startups across the globe.</p>
          <p class="section-view-article-w wow fadeInUpBig" data-wow-delay=".5s">In addition to making direct venture investments,LightLimX provides financing& insigths& operating expertise to promising the most compelling companies to flourish.To-date, LightLimX has provided advice and support for more than 20 companies, raised more than $15 million in seed and later-stage funding,valued at over $1 billion dollars.</p>
          <div class="section-view-flower-wrap  wow fadeInUpBig" data-wow-delay=".5s">
            <svg-icon icon-class="flower"></svg-icon>
          </div>
        </div>
      </div>

    </div>
  </section>
</template>

<script>
    export default {
        name: "AboutUs",
      props:{
        cssStyle:{
          type:Object,
          default:()=>{
            return {}
          }
        }
      },
      computed:{
        isCssStyle(){
          return this.cssStyle
        }
      }
    }
</script>

<style scoped lang="less">
  .section-view{
    width: 100%;
    min-height: 100vh;
    box-sizing: border-box;
    background-color: #fff;
    &-content{
      display: flex;
    }
    &-flower-wrap{
      margin-top: 0;
      .svg-icon{
        width: 1.76rem;
        height: .21rem;
      }
    }
    &-title{
      padding-top: 1.21rem;
      margin-bottom: .74rem;
      font-size: .6rem;
      font-family: Manrope;
      font-weight: bold;
      line-height: .84rem;
      color: #302D2C;
      text-align: center;
    }
    &-flower-wrap{
      margin-top: 1.28rem;
      .svg-icon{
        width: 1.76rem;
        height: .21rem;
      }
    }
    &-article{
      padding-top: .39rem;
      padding-bottom: 1.55rem;
      .section-view-title{
        display: none;
      }
      &-w{
        margin-top: .27rem;
        width: 6.12rem;
        font-size: .16rem;
        font-family: Manrope;
        font-weight: 400;
        line-height: .32rem;
        color: #302D2C;
      }
      &-p{
        width: 5.79rem;
        position: relative;
        padding-left: .33rem;
        font-size: .16rem;
        font-family: Manrope;
        font-weight: 400;
        line-height: .32rem;
        color: #302D2C;
        &:before{
          position: absolute;
          content: '';
          display: block;
          width: .08rem;
          height: .77rem;
          background-color: #F49F00;
          left: 0;
          top: .1rem;
        }
      }
    }
    &-circle{
      margin-right: 1.96rem;
      >div{
        transition: all 1s ease-in;
        width: 100%;
        height: 100%;
        max-width: 5.92rem;
        max-height: 5.92rem;
      }
    }
  }

  @media screen and (max-width: 1250px) {
    .section-view{
      &-circle{
        margin-right: 0;
      }
      &-content{
        justify-content: center;
      }
    }
  }
  @media screen and (max-width: 830px) {
    .section-view{
      &-content{
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
    }
  }
  @media screen and (max-width: 768px){
    .section-view{
      margin-top: 0;
      &-content{
        flex-direction: column;
        padding-top: 1rem;
        padding-bottom: 1rem;
      }
      &-flower-wrap{
        margin-top: .9rem;
        .svg-icon{
          width: 3.43rem;
          height: .41rem;
        }
      }
      &-title{
        display: none;
      }
      &-article{
        padding: 0 .3rem ;
        box-sizing: border-box;
        .section-view-title{
          display: block;
          padding-top: 0;
          margin-top: 0;
          margin-bottom: .47rem;
          font-size: .6rem;
          font-weight: bold;
          line-height:.84rem;
        }
        &-w{
          margin-top: .39rem;
          width: 100%;
          font-size: .24rem;
          line-height: .34rem;
        }
        &-p{
          box-sizing: border-box;
          width: 100%;
          padding-left: .25rem;
          font-size: .24rem;
          font-weight: 400;
          line-height: .34rem;
          &:before{
            width: .08rem;
            height: .9rem;
            left: 0;
            top: .05rem;
          }
        }
      }
      &-circle{
        margin: 0 .3rem;
        >div{
          width: 100%;
        }
      }
    }
  }
</style>