website/src/components/pages/productCenter/online.vue

<template>
  <div class="product-center">
    <!-- <div class="cover-bg">
      <img src="../../../assets/image/program/bg2.png" alt>
    </div> -->
    <div class="product_center_top">
      <headerTab></headerTab>
      <div class="product_box">
        <div class="product_top">
          <div class="product_top_con">
            <div class="product_top_con_left">
              <h3>{{tittle}}</h3>
              <p class="p1">{{P1}}</p>
              <p class="p2">{{P2}}</p>
              <p class="p3">{{P3}}</p>
            </div>
          </div>
        </div>
        <prod-navi class="nav" default="product-1"></prod-navi>
      </div>
    </div>
    <div class="online_middle">
      <div class="online_content">
        <div class="online_features">
          <div class="online_features_tittle">
            <div class="online_features_tittle_words">8大功能</div>
            <div class="online_features_tittle_bg"></div>
            <div class="online_features_tittle_eng">Eight big functions</div>
          </div>
          <div class="online_features_content">
            <div class="online_features_content_top">
              <div class="online_features_content_project">
                <div class="online_features_content_project_logo">
                  <img src="../../../assets/image/platform/project.png" alt>
                </div>
                <div class="online_features_content_project_tittle">多项目</div>
                <div class="online_features_content_project_con">支持一个平台下多项目营销</div>
              </div>
              <div class="online_features_content_project">
                <div class="online_features_content_project_logo">
                  <img src="../../../assets/image/platform/Multi-business.png" alt>
                </div>
                <div class="online_features_content_project_tittle">多业态</div>
                <div class="online_features_content_project_con">支持新房、二手房、租赁等多种业态模式</div>
              </div>
              <div class="online_features_content_project">
                <div class="online_features_content_project_logo">
                  <img src="../../../assets/image/platform/mechanism.png" alt>
                </div>
                <div class="online_features_content_project_tittle">多机构</div>
                <div class="online_features_content_project_con">支持多级机构架构、支持渠道销售管控</div>
              </div>
              <div class="online_features_content_project">
                <div class="online_features_content_project_logo">
                  <img src="../../../assets/image/platform/Character.png" alt>
                </div>
                <div class="online_features_content_project_tittle">多角色</div>
                <div class="online_features_content_project_con">支持内部销售、代理销售、老带新粉丝销售等多种角色参与</div>
              </div>
            </div>
            <div class="online_features_content_top">
              <div class="online_features_content_project">
                <div class="online_features_content_project_logo">
                  <img src="../../../assets/image/platform/level.png" alt>
                </div>
                <div class="online_features_content_project_tittle">多层级</div>
                <div class="online_features_content_project_con">支持团队分销模式的朋友圈推广营销</div>
              </div>
              <div class="online_features_content_project">
                <div class="online_features_content_project_logo">
                  <img src="../../../assets/image/platform/data.png" alt>
                </div>
                <div class="online_features_content_project_tittle">数据通道</div>
                <div class="online_features_content_project_con">打通销控状态ERP数据通道全面支持“明源”，“用友”数据同步</div>
              </div>
              <div class="online_features_content_project">
                <div class="online_features_content_project_logo">
                  <img src="../../../assets/image/platform/customize.png" alt>
                </div>
                <div class="online_features_content_project_tittle">自定义</div>
                <div class="online_features_content_project_con">支持销售状态、佣金比例、结算 方案等多环节参数自定义</div>
              </div>
              <div class="online_features_content_project">
                <div class="online_features_content_project_logo">
                  <img src="../../../assets/image/platform/platform.png" alt>
                </div>
                <div class="online_features_content_project_tittle">全平台</div>
                <div class="online_features_content_project_con">不止微信，支持PC网站，QQ微博，邮件，短信等多媒介传播</div>
              </div>
            </div>
            <div class="online_features_content_line"></div>
          </div>
        </div>
        <div class="introduction">
          <div class="introduction_tittle">
            <div class="introduction_tittle_words">产品介绍</div>
            <div class="introduction_tittle_bg"></div>
            <div class="introduction_tittle_eng">PRODUCT INTRODUCTION</div>
          </div>
          <div class="introduction_content_box">
            <div class="introduction_content">
              <div class="introduction_content_left">
                <div class="introduction_content_registered">
                  <div class="introduction_content_img">
                    <img src="../../../assets/image/platform/Group3.png" alt>
                  </div>
                  <div class="registered_con">
                    <p class="registered_con_p1">经纪人注册</p>
                    <p class="registered_con_p2">每个用户都可以注册成为经纪人</p>
                    <p class="registered_con_p3">强力拓宽营销渠道</p>
                  </div>
                </div>

                <div class="introduction_content_registered">
                  <div class="introduction_content_img">
                    <img src="../../../assets/image/platform/Group5.png" alt>
                  </div>
                  <div class="registered_con">
                    <p class="registered_con_p1">客户报备</p>
                    <p class="registered_con_p2">楼盘页报备:</p>
                    <p class="registered_con_p3">一个客户信息一次只能报备到一个楼盘</p>
                    <p class="registered_con_p4">客户页报备:</p>
                    <p class="registered_con_p5">一个客户信息一次可以报备到多个楼盘</p>
                  </div>
                </div>

                <div class="introduction_content_registered">
                  <div class="introduction_content_img">
                    <img src="../../../assets/image/platform/Group8.png" alt>
                  </div>
                  <div class="registered_con">
                    <p class="registered_con_p1">报备管理</p>
                    <p class="registered_con_p2">平台认报备型</p>
                    <p class="registered_con_p3">平台认到访型</p>
                    <p class="registered_con_p4">跟进记录管理</p>
                    <p class="registered_con_p5">客户意向度管理</p>
                  </div>
                </div>

                <div class="introduction_content_registered">
                  <div class="introduction_content_img">
                    <img src="../../../assets/image/platform/Group10.png" alt>
                  </div>
                  <div class="registered_con">
                    <p class="registered_con_p1">案场管理</p>
                    <p class="registered_con_p2">案场管理人员对报备的处理</p>
                  </div>
                </div>
              </div>
              <div class="introduction_content_right">
                <div class="introduction_content_registered">
                  <div class="introduction_content_img">
                    <img src="../../../assets/image/platform/Group4.png" alt>
                  </div>
                  <div class="registered_con">
                    <p class="registered_con_p1">楼盘查看</p>
                    <p class="registered_con_p2">所有可报备的楼盘基本信息</p>
                    <p class="registered_con_p3">报备及收益信息</p>
                  </div>
                </div>

                <div class="introduction_content_registered">
                  <div class="introduction_content_img">
                    <img src="../../../assets/image/platform/Group7.png" alt>
                  </div>
                  <div class="registered_con">
                    <p class="registered_con_p1">客户管理</p>
                    <p class="registered_con_p2">客户查询、筛选</p>
                    <p class="registered_con_p3">客户基本详情查看和冲突说明</p>
                    <p class="registered_con_p4">客户报备信息和跟进记录</p>
                    <p class="registered_con_p5">重复报备提醒</p>
                  </div>
                </div>

                <div class="introduction_content_registered">
                  <div class="introduction_content_img">
                    <img src="../../../assets/image/platform/Group9.png" alt>
                  </div>
                  <div class="registered_con">
                    <p class="registered_con_p1">跟踪管理</p>
                    <p class="registered_con_p2">新增跟进记录</p>
                  </div>
                </div>

                <div class="introduction_content_registered">
                  <div class="introduction_content_img">
                    <img src="../../../assets/image/platform/Group13.png" alt>
                  </div>
                  <div class="registered_con">
                    <p class="registered_con_p1">个人信息</p>
                    <p class="registered_con_p2">经纪人个人信息</p>
                    <p class="registered_con_p3">数据查看佣金结算</p>
                    <p class="registered_con_p4">建议和反馈</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="highlight">
          <div class="highlight_tittle">
            <div class="highlight_tittle_words">产品亮点</div>
            <div class="highlight_tittle_bg"></div>
            <div class="highlight_tittle_eng">PRODUCT ADVANTAGE</div>
          </div>
          <div class="height_content">
            <div class="height_content_left">
              <div class="height_content_box">
                <div class="height_content_box_img">
                  <img src="../../../assets/image/platform/Group6.jpg" alt>
                </div>
                <div class="height_content_box_tittle">为代理公司搭建冠名的分销平台</div>
                <div class="height_content_box_con">分销产品可以快速帮新房代理公司搭建属于自己品牌的新房分销平台，有便捷的业务员端、管理业务进度的项目专员端和强大的后台管理系统。</div>
              </div>

              <div class="height_content_box">
                <div class="height_content_box_img">
                  <img src="../../../assets/image/platform/Group6Copy2.jpg" alt>
                </div>
                <div class="height_content_box_tittle">到场流程系统化</div>
                <div class="height_content_box_con">项目专员在项目现场使用手机进行商机确认、到场确认和成交确认，数据实时更新更有微信消息提醒，让项目现场客户管理更专业公正。</div>
              </div>

              <div class="height_content_box">
                <div class="height_content_box_img">
                  <img src="../../../assets/image/platform/Group6Copy4.jpg" alt>
                </div>
                <div class="height_content_box_tittle">系统全自动佣金结算</div>
                <div class="height_content_box_con">强大的财务后台，统一对外进行业绩公布和佣金结算，大大提高平台的诚信度。</div>
              </div>

              <div class="height_content_box">
                <div class="height_content_box_img">
                  <img src="../../../assets/image/platform/Group6Copy6.jpg" alt>
                </div>
                <div class="height_content_box_tittle">系统自动统计报表输出</div>
                <div class="height_content_box_con">分销产品可以快速帮新房代理公司搭建属于自己品牌的新房分销平台，有便捷的业务员端、管理业务进度的项目专员端和强大的后台管理系统。</div>
              </div>
            </div>
            <div class="height_content_right">
              <div class="height_content_box">
                <div class="height_content_box_img">
                  <img src="../../../assets/image/platform/Group6Copy.jpg" alt>
                </div>
                <div class="height_content_box_tittle">经纪人快速报备</div>
                <div class="height_content_box_con">合作公司的经纪人可以通过微信端或APP端访问分销平台，进行快速客户报备和客户跟进，并实时了解最新的项目成交和分佣情况。</div>
              </div>

              <div class="height_content_box">
                <div class="height_content_box_img">
                  <img src="../../../assets/image/platform/Group6Copy3.jpg" alt>
                </div>
                <div class="height_content_box_tittle">销售进度全掌控</div>
                <div class="height_content_box_con">公司管理层可以通过分销系统系统查询和管控最新的报备、到场、成交情况，一手掌握各个楼盘的最新客户信息和销售进度！</div>
              </div>

              <div class="height_content_box">
                <div class="height_content_box_img">
                  <img src="../../../assets/image/platform/Group6Copy5.jpg" alt>
                </div>
                <div class="height_content_box_tittle">微信消息动态提醒</div>
                <div class="height_content_box_con">重要业务环节，如：报备确认，客户到场，保护期失效等环节，系统自动对经纪人和项目专员进行职能消息提醒。</div>
              </div>

              <div class="height_content_box">
                <div class="height_content_box_img">
                  <img src="../../../assets/image/platform/Group6Copy7.jpg" alt>
                </div>
                <div class="height_content_box_tittle">为代理公司搭建冠名的分销平台</div>
                <div class="height_content_box_con">下游分销公司管理层可以通过手机实时查看公司员工的整体报表数据和成交分佣数据。</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <footerNav></footerNav>
  </div>
</template>
<script>
import headerTab from "@/components/commonComponents/headerTab";
import footerNav from "@/components/commonComponents/footerNav";
import naviCard from "../../navicard";

export default {
  components: {
    headerTab,
    footerNav,
    ProdNavi: () => import('./prodNavi'),
  },

  data () {
    return {
      tittle: '全渠道在线平台',
      P1: '线上售楼处平台，连接开发商与购房者的沟通桥梁',
      P2: '房产商借助微信小程序，基于微信生态圈，完成商业模式闭环',
      P3: 'Professional product customization',
      activeIndex2: '1',
    }
  },
  methods: {
    active1(){
      this.order1 = false;
      this.order_big = true;
      this.wisdom_nav = true;
      this.wisdom_big = false;
    },
    handleOpen (key, keyPath) {
      // this.collapse == 'false'
      console.log(key, keyPath);
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath);
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.nav {
  width: 1280px;
  position: relative;
  top: -64px;
  // margin-top: -207px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.product-center {
  background: url(../../../assets/image/program/bg1.png) no-repeat center;
  width: 100%;
  min-width: 1260px;
  height: 90%;
  background-size: 100% 100%;
  // background-size: cover;
  position: relative;
  .cover-bg {
      position: absolute;
      top: 0;
      z-index: -1;
      overflow: hidden;
      img {
        width: 100%;
        height: 779px;
      }
    }
}
.product_center_top {
  width: 100%;
  min-width: 1260px;
  height: 100%;
  background-size: cover;
}
.product_box {
  width: 1260px;
  height: 100%;
  margin: 0 auto;
}
.product_top {
  width: 1260px;
  height: 100%;
  display: flex;
  justify-content: center;
}
.product_top_con_left {
  display: inline-block;
  color: #fff;
  h3 {
    font-size: 66px;
    font-weight: 100;
    margin: 0 5px;
    display: flex;
    align-items: flex-start;
  }
  .p1,
  .p2 {
    // float: left;
    font-size: 25px;
    display: flex;
    align-items: flex-start;
  }
  .p3 {
    display: flex;
    align-items: flex-start;
    color: rgba(255, 255, 255, 1);
    font-weight: 100;
    font-size: 12px;
    margin: 19px 0;
  }
}
.product_top_con {
  width: 100%;
  margin: 0 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.el-menu-demo {
  display: flex;
  justify-content: space-around;
}

.product-order {
  margin: 5px 0;
  // line-height: 10px;
}
.order_bot_online {
  height: 58px;
  width: 115px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: space-between;
  img {
    width: 35px;
    height: 42px;
  }
}
.blue_bar {
  width: 73px;
  height: 13px;
  background: rgba(78, 132, 255, 1);
  border-radius: 0px 0px 70px 70px;
}
.order_bot {
  display: flex;
  justify-content: space-between;
}
.order_bot_secondHandHouse {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: space-between;
  height: 58px;
  width: 115px;
  img {
    width: 110px;
    height: 32px;
  }
}
.item1,
.item2,
.item3 {
  width: 314px;
  height: 78px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: rgba(153, 153, 153, 1);
}
.item1 {
  width: 414px;
  height: 134px;
}
.blue_bar {
  display: inline-block;
}
.order {
  text-align: center;
}
.online_middle {
  background: url(../../../assets/image/program/bg.jpg) no-repeat center;
  width: 100%;
  min-width: 1300px;
  background-size: cover;
  .online_content {
    width: 1260px;
    margin: 72px auto 0;
    .online_features {
      height: 600px;
      padding: 80px 0;
      margin: 0 auto;
      .online_features_tittle {
        height: 80px;
        width: 218px;
        margin: 0 auto;
        .online_features_tittle_words {
          font-size: 30px;
          font-weight: 500;
        }
        .online_features_tittle_bg {
          // position: absolute;
          // left: 41px;
          // top: 13px;
          margin: -16px auto 0;
          width: 135px;
          height: 29px;
          background-color: #4e84ff;
        }
        .online_features_tittle_eng {
          margin: 10px 0;
          color: rgba(78, 132, 255, 1);
        }
      }
      .online_features_content {
        margin-top: 70px;
        .online_features_content_line {
          width: 1007px;
          height: 203px;
          border: 1px dashed rgba(162, 194, 255, 1);
          margin: -375px auto 0;
        }
        .online_features_content_top {
          width: 1290px;
          margin-left: -15px;
          display: flex;
          justify-content: space-between;
          .online_features_content_project {
            width: 280px;
            height: 205px;
            // background-color: red;
            .online_features_content_project_logo {
              width: 63px;
              height: 63px;
              border-radius: 50%;
              background: rgba(255, 255, 255, 1);
              box-shadow: 0px 1px 14px 0px rgba(65, 101, 242, 0.2);
              margin: 0 auto;
              img {
                padding-top: 16.5px;
                width: 30px;
                height: 30px;
              }
            }
            .online_features_content_project_tittle {
              font-size: 20px;
              font-weight: 500;
              color: rgba(0, 0, 0, 1);
              margin: 15px 0;
            }
            .online_features_content_project_con {
              font-size: 16px;
              font-weight: 400;
              color: rgba(102, 102, 102, 1);
            }
          }
        }
      }
    }
    .introduction {
      width: 100%;
      margin: 0 auto;
      .introduction_tittle {
        height: 80px;
        width: 218px;
        margin: 70px auto;
        .introduction_tittle_words {
          font-size: 30px;
          font-weight: 500;
        }
        .introduction_tittle_bg {
          margin: -16px auto 0;
          width: 135px;
          height: 29px;
          background-color: #4e84ff;
        }
        .introduction_tittle_eng {
          margin: 10px 0;
          color: rgba(78, 132, 255, 1);
        }
      }
      .introduction_content_box {
        width: 100%;
        margin-top: 76px;

        .introduction_content {
          display: flex;
          justify-content: space-between;
          .introduction_content_left {
            width: 582px;
            //  height: 50px;
            //  background-color: orange;
            .introduction_content_registered {
              width: 100%;
              height: 202px;
              background-color: #fff;
              box-shadow: 0px 1px 14px 0px rgba(65, 101, 242, 0.2);
              border-radius: 8px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding: 30px;
              margin-bottom: 20px;
              .introduction_content_img {
                width: 156px;
                img {
                  width: 224px;
                }
              }
              .registered_con {
                width: 306px;
                font-size: 18px;
                .registered_con_p1 {
                  font-size: 24px;
                  margin: 10px 0;
                }
                .registered_con_p1,
                .registered_con_p2,
                .registered_con_p3,
                .registered_con_p4,
                .registered_con_p5 {
                  display: flex;
                  justify-content: flex-start;
                }
              }
            }
          }
          .introduction_content_right {
            margin-top: 44px;
            width: 582px;

            .introduction_content_registered {
              width: 100%;
              height: 202px;
              background-color: #fff;
              box-shadow: 0px 1px 14px 0px rgba(65, 101, 242, 0.2);
              border-radius: 8px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding: 30px;
              margin-bottom: 20px;
              .introduction_content_img {
                width: 156px;
                img {
                  width: 224px;
                }
              }
              .registered_con {
                width: 306px;
                font-size: 18px;
                .registered_con_p1 {
                  font-size: 24px;
                  margin: 10px 0;
                }
                .registered_con_p1,
                .registered_con_p2,
                .registered_con_p3,
                .registered_con_p4,
                .registered_con_p5 {
                  display: flex;
                  justify-content: flex-start;
                }
              }
            }
          }
        }
      }
    }
    .highlight {
      width: 100%;
      margin: 140px auto;
      .highlight_tittle {
        height: 80px;
        width: 218px;
        margin: 70px auto;
        .highlight_tittle_words {
          font-size: 30px;
          font-weight: 500;
        }
        .highlight_tittle_bg {
          margin: -16px auto 0;
          width: 135px;
          height: 29px;
          background-color: #4e84ff;
        }
        .highlight_tittle_eng {
          margin: 10px 0;
          color: rgba(78, 132, 255, 1);
        }
      }
      .height_content {
        display: flex;
        justify-content: center;
        flex-wrap: nowrap;
        .height_content_left {
          width: 500px;

          margin-top: 80px;
          margin-right: 30px;
        }

        .height_content_right {
          width: 500px;
        }
      }
    }
  }
}
.height_content_box {
  width: 500px;
  height: 430px;
  box-shadow: 0px 1px 14px 0px rgba(65, 101, 242, 0.2);
  border-radius: 6px;
  position: relative;
  margin-bottom: 30px;
  .height_content_box_img {
    img {
      width: 500px;
      height: 318px;
      border-radius: 6px 6px 0 0;
    }
  }
  .height_content_box_tittle {
    position: absolute;
    top: 274px;
    width: 452px;
    height: 45px;
    background: rgba(0, 0, 0, 0.61);
    line-height: 45px;
    color: #fff;
    display: flex;
    justify-content: flex-start;
    padding: 0 24px;
  }
  .height_content_box_con {
    display: flex;
    justify-content: flex-start;
    text-align: left;
    padding: 22px 24px;
  }
}
</style>