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

<template>
  <div class="product-center">
    <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 class="product_top_con_right"></div>
        </div>
      </div>
      <prod-navi class="nav" default="case"></prod-navi>
      
    </div>

    <div class="secondHouse-middle">
      <div class="secondHouse_content">
        <div class="Features">
          <div class="secondHouse_tittle">
            <div class="secondHouse_tittle_words">痛点描述</div>
            <div class="secondHouse_tittle_bg"></div>
            <div class="secondHouse_tittle_eng">EXSTING PROBLEMS</div>
          </div>
          <div class="discribe">
            <div class="module_box">
              <div class="module_box_top">
                <div class="boxes">
                  <div class="boxes_img">
                    <img src="../../../assets/image/release/area.png" alt>
                  </div>
                  <div class="module_box_words">传统营销地域限制大</div>
                </div>
                <div class="boxes">
                  <div class="boxes_img">
                    <img src="../../../assets/image/release/lag.png" alt>
                  </div>

                  <div class="module_box_words">信息滞后</div>
                </div>
                <div class="boxes">
                  <div class="boxes_img">
                    <img src="../../../assets/image/release/lost.png" alt>
                  </div>

                  <div class="module_box_words">数据管理模式繁琐，数据易丢失</div>
                </div>
              </div>
              <div class="module_box_bottom">
                <div class="boxes">
                  <div class="boxes_img">
                    <img src="../../../assets/image/release/cost.png" alt>
                  </div>
                  <div class="module_box_words">造价成本高，展现形式单一</div>
                </div>
                <div class="boxes">
                  <div class="boxes_img">
                    <img src="../../../assets/image/release/Evaluation.png" alt>
                  </div>
                  <div class="module_box_words">营销效果无法评估</div>
                </div>
                <div class="boxes">
                  <div class="boxes_img">
                    <img src="../../../assets/image/release/system.png" alt>
                  </div>
                  <div class="module_box_words">没有科学有效的老客户管理系统</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="product_int">
          <div class="secondHouse_tittle">
            <div class="secondHouse_tittle_words">产品介绍</div>
            <div class="secondHouse_tittle_bg"></div>
            <div class="secondHouse_tittle_eng">PRODUCT INTROD CTION</div>
          </div>
          <div class="discribe">
            <div class="module_boxA">
              <div class="module_box_topA">
                <div class="product_int_boxes">
                  <div class="boxes_img">
                    <img src="../../../assets/image/release/Group2.jpg" alt>
                  </div>
                  <div class="module_box_words">
                    <div class="product_int_p">
                      <p class="product_int_p1">实时沟通</p>
                      <p class="product_int_p2">400免费通话，无缝对接售楼处</p>
                      <p class="product_int_p3">微信客服机器人，线上咨询</p>
                    </div>
                  </div>
                </div>
                <div class="product_int_boxes">
                  <div class="boxes_img">
                    <img src="../../../assets/image/release/Group3.jpg" alt>
                  </div>
                  <div class="module_box_words">
                    <div class="product_int_p">
                      <p class="product_int_p1">用户报名</p>
                      <p class="product_int_p2">用户可以在线预约看房</p>
                      <p class="product_int_p3">在线报名参与开发商举办的活动</p>
                    </div>
                  </div>
                </div>
                <div class="product_int_boxes">
                  <div class="boxes_img">
                    <img src="../../../assets/image/release/Group4.jpg" alt>
                  </div>

                  <div class="module_box_words">
                    <div class="product_int_p">
                      <p class="product_int_p1">数据采集</p>
                      <p class="product_int_p2">获取用户行为数据</p>
                      <p class="product_int_p3">收集用户有效信息、完善用户画像</p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="module_box_bottomA">
                <div class="product_int_boxes">
                  <div class="boxes_img">
                    <img src="../../../assets/image/release/Group6.jpg" alt>
                  </div>
                  <div class="module_box_words">
                    <div class="product_int_p">
                      <p class="product_int_p1">楼盘展示</p>
                      <p class="product_int_p2">通过地图形式展示楼盘矩阵</p>
                      <p class="product_int_p3">楼盘基本信息展示以及动态更新</p>
                      <p class="product_int_p4">360全景看房、VR看房、实景相册、视频</p>
                    </div>
                  </div>
                </div>
                <div class="product_int_boxes_A">
                  <div class="module_box_words">
                    <div class="product_int_P">
                      <p class="product_int_pA">购房工具</p>
                    <p class="product_int_pB">购房资格测试</p>
                    <p class="product_int_pC">积分落户政策</p>
                    <p class="product_int_pD">购房百科，专业解答购房问题</p>
                    </div>
                  </div>
                </div>
                <div class="product_int_boxes">
                  <div class="boxes_img">
                    <img src="../../../assets/image/release/Group5.jpg" alt>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <footerNav></footerNav>
  </div>
</template>

<script>
import headerTab from "@/components/commonComponents/headerTab";
import footerNav from "@/components/commonComponents/footerNav";
export default {
  components: {
    headerTab,
    footerNav,
    ProdNavi: () => import('./prodNavi'),
  },

  data () {
    return {
      tittle: '全案发布平台',
      P1: '线上售楼处平台，连接开发商与购房者的沟通桥梁',
      P2: '房产商借助微信小程序，基于微信生态圈，完成商业模式闭环',
      P3: 'INTELLIGENT FACE RISK CONTROL SYSTEM',
      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/bg3.jpg) no-repeat center;
  width: 100%;
  min-width: 1260px;
  height: 780px;
  background-size: cover;
}
.product_box {
  width: 1260px;
  height: 780px;
  margin: 0 auto;
}
.product_top {
  width: 1260px;
  height: 780px;
  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_right {
  display: inline-block;
  color: #fff;
  img:first-child {
    margin-right: 32px;
  }
  img {
    width: 197px;
    height: 569px;
  }
}
.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;
}
.secondHouse-middle {
  width: 100%;
  background: url(../../../assets/image/program/bg.jpg) no-repeat center;
  background-size: 100%;
  .secondHouse_content {
    width: 1260px;
    margin: 0 auto;
    .Features {
      margin: 0 auto 70px auto;
      padding: 70px 0;
    }
  }
}
.secondHouse_tittle {
  height: 80px;
  width: 218px;
  background-color: #fff;
  margin: 72px auto;
  .secondHouse_tittle_words {
    font-weight: 500;
  }
  .secondHouse_tittle_bg {
    margin: -10px auto 0;
    width: 135px;
    height: 29px;
    background-color: #4e84ff;
  }
  .secondHouse_tittle_eng {
    margin: 10px 0;
    color: rgba(78, 132, 255, 1);
  }
}

.filed_box {
  margin: auto;
  .filed_box_top {
    margin: 0 auto 35px;
    width: 949px;
    display: flex;
    justify-content: space-between;
  }
}
.filed_box_bottom {
  margin: 0 auto;
  width: 1210px;
  display: flex;
  justify-content: space-between;
}

.module_box {
  width: 960px;
  margin: auto;
  .module_box_top {
    width: 960px;
    display: flex;
    justify-content: space-between;
  }
}
.module_box_bottom {
  margin: 80px auto;
  display: flex;
  justify-content: space-between;
}
.boxes {
  width: 252px;
  // height: 60px;

  .boxes_img {
    width: 63px;
    height: 63px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 1px 14px 0px rgba(65, 101, 242, 0.2);
    border-radius: 50%;

    margin: 15px auto;
    img {
      margin-top: 17px;
      height: 29px;
    }
  }
  .module_box_words {
    font-size: 18px;
    color: rgba(0, 0, 0, 1);
  }
}

.product_int_boxes {
  width: 370px;
  height: 276px;
  border-radius: 6px;
  box-shadow: 0px 1px 14px 0px rgba(65, 101, 242, 0.2);
  position: relative;
  .boxes_img {
    width: 370px;
    height: 276px;
    border-radius: 6px;
    img {
      width: 370px;
      height: 276px;
      border-radius: 6px;
    }
  }
  .module_box_words {
    position: absolute;
    top: 0;
    width: 370px;
    height: 276px;
    background: rgba(0, 0, 0, 0.4975);
    border-radius: 6px;
  }
}
.product_int_boxes_A {
  width: 370px;
  height: 276px;
  border-radius: 6px;
  box-shadow: 0px 1px 14px 0px rgba(65, 101, 242, 0.2);
  .module_box_words {
    width: 100%;
    height: 276px;
    position: relative;
     .product_int_P{
       width: 100%;
       position: absolute;
    left: 50%;
    top: 50%;
     transform: translate(-50%, -50%);
     }
  }
}
.module_box_topA,
.module_box_bottomA {
  display: flex;
  justify-content: space-between;
  margin-bottom: 22px;
}
.module_boxA {
  width: 1154px;
  margin: 0 auto;
}
.product_int {
  margin: 0 auto 70px auto;
      padding: 70px 0;
}
.product_int_p {
  width: 100%;
  margin: 0 auto;
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  .product_int_p1 {
    font-size: 18px;
  }
  .product_int_p2,
  .product_int_p3 {
    font-size: 15px;
  }
}
</style>