cloundPc/src/views/aboutUs/minAboutus.vue

<template>
  <div>
    <div class="banner">
      <img src="./images/minBanner.png" alt="" />
    </div>
    <div class="whyShow">
      <h2>为什么<span>选择酷乐秀</span></h2>
      <div class="chioseItemList">
        <div class="chioseItem">
          <p class="title">
            <count-to :endVal="20" :decimals="0" :class="'num'" />年
          </p>
          <p class="subTitle">器乐教学领域技术研究</p>
          <p class="concat">
            酷乐秀技术团队通过对器乐教学多年的深入研究，深谙器乐教育行业痛点，通过独有的专利技术赋能器乐教育发展。
          </p>
        </div>
        <div class="chioseItem">
          <p class="title">
            <count-to :endVal="10" :decimals="0" :class="'num'" />万+
          </p>
          <p class="subTitle">10w在读学员的信赖之选</p>
          <p class="concat">
            团队所研发的软件产品经历10万多在读学员的使用与赞赏，陪伴学员从入门到精通的乐器学习之路，为学员带来极佳的学习体验。
          </p>
        </div>
        <div class="chioseItem">
          <p class="title">
            <count-to :endVal="300" :decimals="0" :class="'num'" />万+
          </p>
          <p class="subTitle">在线直播课堂经验</p>
          <p class="concat">
            专属器乐教学的线上课堂经历过300多万节线上课程的验证，独创的音乐模式课堂深受老师与学员好评。
          </p>
        </div>
      </div>
    </div>
    <div class="aboutShow">
      <h2>关于<span>酷乐秀</span></h2>
      <img class="showImg" src="./images/minAboutShow.png" alt="" />
      <p class="concatP first">
        酷乐秀是武汉市景明云乐网络科技有限公司专为全国管乐教学机构研发的服务平台。为合作机构提供远程视频直播的技术支持，独创“音乐演奏模式”高度还原乐器演奏的现场感及音色。并开创管乐智能评测功能，为广大管乐学习者带来福音。
      </p>
      <p class="concatP">
        景明云乐汇聚了在音乐在线教育，云计算，AI智能行业的顶尖人才
        ，运用在音乐教育行业积累的十八年经验结合在语音视频领域多年研究，高度还原了乐器线上演奏场景，并已成功平稳运行六十多万课时。
      </p>
    </div>
    <div class="careServe">
      <h2>全方位<span>贴心服务</span></h2>
      <div class="careList">
        <div class="whyItem">
          <div class="imgWrap">
            <img src="./images/1111.png" alt="" />
          </div>
          <div class="right">
            <h4>售前咨询</h4>
            <p>一对一客服全程服务 解答您的所有问题</p>
          </div>
        </div>
        <div class="whyItem">
          <div class="imgWrap">
            <img src="./images/2222.png" alt="" />
          </div>
          <div class="right">
            <h4>免费试用</h4>
            <p>平台提供14天免费试用 让您先体验后选择</p>
          </div>
        </div>
        <div class="whyItem">
          <div class="imgWrap">
            <img src="./images/3333.png" alt="" />
          </div>
          <div class="right">
            <h4>全程培训辅导</h4>
            <p>三端操作一对一辅导 助您快速上手解决管理难题</p>
          </div>
        </div>
        <div class="whyItem">
          <div class="imgWrap">
            <img src="./images/4444.png" alt="" />
          </div>
          <div class="right">
            <h4>技术支持</h4>
            <p>专业人员提供技术支持 7x24小时服务提供保障</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import countTo from "vue-count-to";
export default {
  components: {
    "count-to": countTo,
  },
  data() {
    return {};
  },
};
</script>
<style lang="less" scoped>
img {
  display: block;
}
.banner {
  img {
    width: 100%;
  }
}
.whyShow {
  padding: 0.5rem 0.4rem 0;
  h2 {
    text-align: center;
    font-size: 0.38rem;
    font-weight: 400;
    color: #000000;
    line-height: 0.64rem;
    margin-bottom: 0.44rem;
    span {
      font-weight: 600;
    }
  }
  .chioseItemList {
    padding-bottom: .3rem;
    .chioseItem {
      text-align: center;
      margin-bottom: 0.5rem;
      width: 6.7rem;
      height: 3.34rem;
      background: #ffffff;
      border-radius: 8px;
      box-shadow: 0px 4px 10px 0px rgba(211, 225, 223, 0.47);
      padding: 0 0.44rem;
      border:1px solid #e8f7f4;
      .title {
        margin-top: 0.17rem;
        margin-bottom: 0.26rem;
        color: #10aaae;
        font-size: 0.34rem;
        .num {
          font-size: 0.75rem;
        }
      }
      .subTitle {
        height: 0.42rem;
        font-size: 0.3rem;
        font-weight: 600;
        color: #000000;
        line-height: 0.42rem;
        margin-bottom: 0.23rem;
      }
      .concat {
        font-size: 0.22rem;
        font-weight: 400;
        color: #6a7388;
        line-height: 0.36rem;
        text-align: left;
      }
    }
  }
}

.aboutShow {
  background: #2c454c;
  padding: 0.5rem 0.4rem 0.6rem;
  .showImg {
    width: 100%;
    margin-bottom: 0.45rem;
  }
  h2 {
    color: #fff;
    font-size: 0.38rem;
    font-weight: 400;
    color: #ffffff;
    line-height: 0.64rem;
    text-align: center;
    margin-bottom: 0.45rem;
    span {
      font-weight: 600;
    }
  }
  .first {
    margin-bottom: 0.6rem;
  }
  .concatP {
    font-size: 0.22rem;
    font-weight: 400;
    color: #ffffff;
    line-height: 0.42rem;
    text-indent: 0.44rem;
  }
}
.careServe {
  background: linear-gradient(135deg, #f0eef3 0%, #d8eff3 100%);
  padding: 0.5rem 0.4rem 0.57rem;
  h2 {
    color: #000;
    font-size: 0.38rem;
    font-weight: 400;
    line-height: 0.64rem;
    text-align: center;
    margin-bottom: 0.45rem;
    span {
      font-weight: 600;
    }
  }
  .careList {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    .whyItem {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      width: 3.26rem;
      padding: 0.3rem 0.14rem 0 0.24rem;
      height: 1.92rem;
      background: #ffffff;
      box-shadow: 0px 5px 12px 0px rgba(211, 225, 223, 0.47);
      border-radius: 0.1rem;
      border: 1px solid #ddecea;
      margin-bottom: .24rem;
      .imgWrap {
        margin-right: 0.23rem;
        img {
          width: 0.85rem;
          height: 0.85rem;
        }
      }
      .right {
        h4 {
          font-size: 0.28rem;
          font-weight: 600;
          color: #000000;
          line-height: 0.4rem;
          text-align: left;
        }
        p {
          margin-top: 0.08rem;
          font-weight: 400;
          color: #6a7388;
          line-height: 0.28rem;
          font-size: 0.2rem;
          text-align: left;
        }
      }
    }
  }
}
</style>