OpenPlatForm/components/index/scene.vue

<template>
  <div class="page-scene-box">
    <div class="flex-box">
      <div class="scene-title">业务场景</div>

      <div class="scene-content-box1">
        <div class="item-font">
          <div class="font1">
            创建标准化应用<br />
            在云应用市场获得销售收入
          </div>
          <div class="font2">
            为多家知名品牌提供了个性化定制服务。有开放的能力让神码可做的解决方案、产品形态更丰富，而通过应用市场获得的稳定客源，帮助神码这支创业团队持续盈利
          </div>
        </div>
        <img src="@/static/img/shouru.png" alt="" />
      </div>

      <div class="scene-content-box1">
        <img src="@/static/img/xuqiu.png" alt="" />
        <div class="item-font">
          <div class="font1">
            自主开发或与客户合作<br />帮助他们解决个性化需求
          </div>
          <div class="font2">
            为客户提供了一整套线上线下SAAS化剧院票务选座方案，支持场馆类型多样化、选座设置、场次设置、核销设置、售票设置等，后台包含门票销售管理模块、剧院运营管理、领导决策分析模块
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "page-scene",
};
</script>

<style lang="scss" scoped>
.page-scene-box {
    display: flex;
    width: 100vw;
    justify-content: center;
  .flex-box {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-flow: column;
    .scene-title {
      color: #333333;
      font-size: 26px;
      font-weight: bold;
      height: 192px;
      display: flex;
      width: 100%;
      justify-content: center;
      align-items: center;
    }

    .scene-content-box1 {
      width: 100%;
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
      height: 427px;
      align-items: center;
      .item-font {
        width: 585px;
        .font1 {
          color: #333333;
          font-weight: bold;
          line-height: 35px;
          font-size: 26px;
          margin-bottom: 10px;
        }
        .font2 {
          font-size: 16px;
          color: #999999;
          line-height: 32px;
        }
      }
    }
  }
}
</style>