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

<template>
  <div class="product-center">
    <!-- <div class="cover-bg">
            
    </div>-->
    <headerTab></headerTab>
    <icon></icon>
    <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 class="top_con_right_img">
              <img src="../../../assets/image/yincheng/home1116-1copy2.png" alt>
              <img src="../../../assets/image/yincheng/home1116-1copy4.png" alt>
              <img src="../../../assets/image/yincheng/home1116-1copy5.png" alt>
            </div>
          </div>
        </div>
      </div>
      <prod-navi class="nav" default="community-1"></prod-navi>
    </div>

    <div class="community">
      <div class="community_content">
        <div class="community_contentA">
          <div class="community_content_word">
            <p class="community_content_p1">智能门禁管理</p>
            <p class="community_content_p2">人员管理更安全、物业提高效率、用户便捷通行</p>
            <p class="community_content_p3">支持手机APP、人脸识别、二维码扫码、刷卡等多种方式开门，无感通行</p>
            <p class="community_content_p4">更清晰的追溯方式，高性价比的安防系统</p>
            <p class="community_content_p5">发送访客二维码，亲友来访宾至如归</p>
          </div>
          <div class="community_content_img">
            <div class="community_content_img1">
              <img class="main_img" src="../../../assets/image/yincheng/Group15.png" alt>
              <img src="../../../assets/image/yincheng/Group12.png" alt class="assist_img1">
              <img src="../../../assets/image/yincheng/Group13.png" alt class="assist_img2">
              <img src="../../../assets/image/yincheng/Group14.png" alt class="assist_img3">
            </div>
          </div>
        </div>
        <div class="community_contentB">
          <div class="community_content_img">
            <div class="community_content_img1">
              <img class="main_img" src="../../../assets/image/yincheng/Group2.png" alt>
              <img src="../../../assets/image/yincheng/Group4.png" alt class="assist_img1">
              <img src="../../../assets/image/yincheng/Group6.png" alt class="assist_img2">
              <img src="../../../assets/image/yincheng/Group5.png" alt class="assist_img3">
              <img src="../../../assets/image/yincheng/Group3.png" alt class="assist_img4">
              <img src="../../../assets/image/yincheng/camera.png" alt class="assist_img5">
            </div>
          </div>
          <div class="community_content_word">
            <p class="community_content_p1">智能出行优化</p>
            <p class="community_content_p2">物业减员增效、车主便捷通行</p>
            <p class="community_content_p3">停车快速通行，无需刷卡/取票，视频识别车辆自动出入</p>
            <p class="community_content_p4">可脱机运行，前置数据存储功能，网络中断后仍可运行</p>
            <p class="community_content_p5">支持微信/APP/扫码等多种方式缴费</p>
          </div>
        </div>
        <div class="community_contentC">
          <div class="community_content_word">
            <p class="community_content_p1">社区安全监护</p>
            <p class="community_content_p2">脉冲式电子围栏，防止外来入侵</p>
            <p class="community_content_p3">云视频监控，消除安全隐患，方便查看保存</p>
            <p class="community_content_p4">智慧巡更，APP一键查看巡查轨迹及结果</p>
            <p class="community_content_p5">户外儿童智能监控，家长更放心</p>
          </div>
          <div class="community_content_img">
            <div class="community_content_img1">
              <img class="main_img" src="../../../assets/image/yincheng/Group2Copy.png" alt>

              <img src="../../../assets/image/yincheng/Group3Copy7.png" alt class="assist_img2">
              <img src="../../../assets/image/yincheng/Group3Copy8.png" alt class="assist_img1">
              <img src="../../../assets/image/yincheng/Group3Copy5.png" alt class="assist_img3">
              <img src="../../../assets/image/yincheng/Group3Copy3.png" alt class="assist_img4">
              <img src="../../../assets/image/yincheng/Group3Copy4.png" alt class="assist_img5">
            </div>
          </div>
        </div>
        <div class="community_contentD">
          <div class="community_content_img">
            <div class="community_content_img1">
              <img class="main_img" src="../../../assets/image/yincheng/cost.png" alt>
              <img src="../../../assets/image/yincheng/Propertycosts.png" alt class="assist_img1">
              <img src="../../../assets/image/yincheng/water.png" alt class="assist_img2">
              <img src="../../../assets/image/yincheng/family.png" alt class="assist_img3">
              <img src="../../../assets/image/yincheng/pay.png" alt class="assist_img4">
            </div>
          </div>
          <div class="community_content_word">
            <p class="community_content_p1">物管智能贴心</p>
            <p class="community_content_p2">多渠道报事，快速处理工单，响应业主诉求</p>
            <p class="community_content_p3">服务质量有监控，服务价值可评估。</p>
            <p class="community_content_p4">工单处理结果智能分析，数据产生智能报表</p>
          </div>
        </div>
        <div class="community_contentE">
          <div class="community_content_word">
            <p class="community_content_p1">家居智能控制</p>
            <p class="community_content_p2">远程控制、语音控制，多重家电控制方式</p>
            <p class="community_content_p3">多种实时探测器，为居家安全保驾护航</p>
            <p class="community_content_p4">老人独自在家，一键报警更安心</p>
            <p class="community_content_p5">支持多种模式定制，让家更懂你</p>
          </div>
          <div class="community_content_img">
            <div class="community_content_img1">
              <img class="main_img" src="../../../assets/image/yincheng/GroupCopy3.png" alt>
              <img src="../../../assets/image/yincheng/microphone.png" alt class="assist_img1">
              <img src="../../../assets/image/yincheng/alarm.png" alt class="assist_img2">
              <img src="../../../assets/image/yincheng/light.png" alt class="assist_img3">
              <img src="../../../assets/image/yincheng/bright.png" alt class="assist_img4">
            </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";
import icon from "@/components/commonComponents/icon";
export default {
  components: {
    headerTab,
    footerNav,
    icon,
    ProdNavi: () => import('./prodNavi'),
  },

  data () {
    return {
      tittle: '银城慧家APP',
      P1: '让业主享受智慧社区美好生活',
      P2: '整体掌控，一触即发；智能生活，全面掌控',
      P3: 'YINCHENG HUIJIA APP',
      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.jpg") no-repeat center;
  width: 100%;
  min-width: 1260px;
  height: 90%;
  background-size: 100% 100%;
  position: relative;
  .cover-bg {
    position: absolute;
    top: 0;
    z-index: -1;
    overflow: hidden;
    img {
      width: 100%;
      height: 779px;
    }
  }
}
.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;
    font-size: 12px;
    font-family: PingFangSC-Thin;
    font-weight: 100;
    color: rgba(255, 255, 255, 1);
    line-height: 17px;
    letter-spacing: 7px;
    margin: 19px 0;
  }
}
.product_top_con_right {
  display: inline-block;
  color: #fff;
  .top_con_right_img {
    width: 604px;
    display: flex;
    justify-content: space-between;
    img {
      width: 188px;
      height: 406px;
    }
  }
}
.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;
}
.community {
  width: 100%;
  // height: 100%;
  background-color: red;
  background: url(../../../assets/image/yincheng/bg.jpg) no-repeat center;
  background-size: 100% 100%;
  .community_content {
    margin: 0 auto 70px auto;
    padding: 140px 0;
    width: 960px;
    // display: flex;
    // justify-content: space-between;
    .community_contentA,
    .community_contentB,
    .community_contentC,
    .community_contentD,
    .community_contentE,
    .community_contentF {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}
.community_contentA {
  .community_content_img {
    position: relative;
    .main_img {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
    .assist_img1 {
      position: absolute;
      top: 18%;
      left: 60%;
      height: 54px;
    }
    .assist_img2 {
      position: absolute;
      top: 40%;
      left: 10%;
      width: 150px;
    }
    .assist_img3 {
      position: absolute;
      top: 70%;
      left: 63%;
      width: 36px;
    }
  }
}
.community_contentB {
  .community_content_img {
    position: relative;
    .main_img {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
    .assist_img1 {
      position: absolute;
      top: 60%;
      left: 15%;
      height: 80px;
    }
    .assist_img2 {
      position: absolute;
      top: 28%;
      left: 63%;
      width: 36px;
    }
    .assist_img3 {
      position: absolute;
      top: 40%;
      left: 68%;
      width: 36px;
    }
    .assist_img4 {
      position: absolute;
      top: 70%;
      left: 63%;
      width: 80px;
    }
    .assist_img5 {
      position: absolute;
      top: 60%;
      left: 46%;
      width: 36px;
    }
  }
}

.community_contentC {
  .community_content_img {
    position: relative;
    .main_img {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
    .assist_img1 {
      position: absolute;
      top: 40%;
      left: 28%;
      height: 36px;
    }
    .assist_img2 {
      position: absolute;
      top: 43%;
      left: 25%;
      width: 36px;
    }
    .assist_img3 {
      position: absolute;
      top: 80%;
      left: 31%;
      width: 36px;
    }
    .assist_img4 {
      position: absolute;
      top: 15%;
      left: 68%;
      width: 80px;
    }
    .assist_img5 {
      position: absolute;
      top: 60%;
      left: 61%;
      height: 36px;
    }
  }
}

.community_contentD {
  .community_content_img {
    position: relative;
    .main_img {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
    .assist_img1 {
      position: absolute;
      top: 20%;
      left: 24%;
      height: 32px;
    }
    .assist_img2 {
      position: absolute;
      top: 60%;
      left: 25%;
      width: 30px;
    }
    .assist_img3 {
      position: absolute;
      top: 31%;
      left: 64%;
      width: 30px;
    }
    .assist_img4 {
      position: absolute;
      top: 48%;
      left: 50%;
      width: 152px;
    }
  }
}
.community_contentE {
  .community_content_img {
    position: relative;
    .main_img {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
    .assist_img1 {
      position: absolute;
      top: 37%;
      left: 28%;
      height: 38px;
    }
    .assist_img2 {
      position: absolute;
      top: 65%;
      left: 28%;
      width: 52px;
    }
    .assist_img3 {
      position: absolute;
      top: 20%;
      left: 64%;
      width: 38px;
    }
    .assist_img4 {
      position: absolute;
      top: 65%;
      left: 58%;
      height: 36px;
    }
  }
}
.community_content_img1 {
  width: 464px;
  height: 354px;
  .main_img {
    width: 181px;
  }
}

.community_content_word {
  // margin: 45px 0;
  height: 125px;
  // background-color: red;
  .community_content_p1 {
    display: flex;
    align-items: flex-start;
    line-height: 35px;
    font-size: 18px;
    color: rgba(0, 0, 0, 1);
  }
  .community_content_p2,
  .community_content_p3,
  .community_content_p4,
  .community_content_p5 {
    font-size: 14px;
    color: rgba(128, 128, 128, 1);
    line-height: 20px;
    display: flex;
    align-items: flex-start;
  }
}
</style>