提交官网文件

fhKeeper/formulahousekeeper/inva_4_tivo/css/customerNew/customerNew.css

@@ -0,0 +1,412 @@
+.bannar {
+  width: 100%;
+  height: 57.5rem;
+  position: relative;
+}
+.bannar .bannar_text {
+  position: absolute;
+  left: 9.875rem;
+  bottom: 4.375rem;
+}
+.bannar .bannar_text .bannar_text_item {
+  font-family: PingFangSC, PingFang SC;
+  font-size: 34px;
+  color: #5c5d61;
+  line-height: 4.375rem;
+}
+.bannar .bannar_text .bannar_text_title {
+  font-size: 5.625rem;
+  color: #12174e;
+  margin-bottom: 3.75rem;
+}
+.customer_integration {
+  width: 100%;
+  height: 51.875rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.customer_integration .customer_integration_conter {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.customer_integration .customer_integration_conter .integrationImg {
+  width: 180px;
+  height: 180px;
+  padding-bottom: 0.625rem;
+  margin: auto;
+}
+.customer_integration .customer_integration_conter .integrationImg img {
+  width: 100%;
+  height: 100%;
+}
+.customer_integration .customer_integration_conter .integrationText {
+  font-size: 34px;
+  color: #354155;
+}
+.core {
+  background: #f8f9ff;
+  width: 100%;
+  position: relative;
+  padding: 6.25rem 0 6rem 0;
+}
+.core .core-title {
+  color: #000000;
+  font-size: 3.125rem;
+  padding-bottom: 1.4375rem;
+  text-align: center;
+}
+.core .core-text {
+  color: #5a5a5a;
+  font-size: 1.625rem;
+  text-align: center;
+}
+.core .core-content {
+  padding-top: 4.875rem;
+  width: 100rem;
+  height: 41.25rem;
+  margin: auto;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+.core .core-content .core-content-item {
+  width: 31.875rem;
+  height: 18.75rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  background: #fff;
+  position: relative;
+  box-shadow: 0px 20px 30px 0px rgba(0, 0, 0, 0.06);
+}
+.core .core-content .core-content-item .item-img {
+  width: 14.375rem;
+  height: 14.375rem;
+  position: absolute;
+  top: 0.875rem;
+  right: 3.75rem;
+}
+.core .core-content .core-content-item .item-img img {
+  width: 100%;
+  height: 100%;
+}
+.core .core-content .core-content-item .item-text {
+  height: 4.125rem;
+  display: flex;
+  align-items: center;
+  line-height: 2.0625rem;
+  font-size: 1.5rem;
+  color: #5a5a5a;
+  padding: 1.625rem 0 1.75rem 2.3125rem;
+  position: relative;
+  z-index: 1;
+}
+.core .core-content .core-content-item .item-title {
+  font-size: 2rem;
+  color: #000000;
+  padding-left: 2.3125rem;
+}
+.demand {
+  background: #fff;
+  width: 100%;
+  height: 62.5rem;
+  padding: 7.0625rem 0 7.75rem 0;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-content: space-around;
+}
+.demand .demand-title {
+  width: 100%;
+  text-align: center;
+  font-size: 3.125rem;
+  color: #000000;
+}
+.demand .demand-content {
+  position: relative;
+  width: 59.375rem;
+  height: 46.875rem;
+  padding-bottom: 1.375rem;
+}
+.demand .demand-content .demand-item {
+  position: absolute;
+}
+.demand .demand-content .demand-item .demand-item-title {
+  display: flex;
+  align-items: center;
+  font-size: 1.75rem;
+  color: #000000;
+}
+.demand .demand-content .demand-item .demand-item-title .item-title-img {
+  width: 2.5rem;
+  height: 2.5rem;
+}
+.demand .demand-content .demand-item .demand-item-text {
+  font-weight: 500;
+  font-size: 1.375rem;
+  color: #5a5a5a;
+  line-height: 2.25rem;
+  padding-top: 0.25rem;
+}
+.demand .demand-content .orientation1 {
+  top: 2.75rem;
+  left: -6.875rem;
+}
+.demand .demand-content .orientation2 {
+  top: 2.75rem;
+  right: -11.75rem;
+}
+.demand .demand-content .orientation3 {
+  top: 17.875rem;
+  left: -23.75rem;
+}
+.demand .demand-content .orientation4 {
+  top: 17.875rem;
+  right: -22.625rem;
+}
+.demand .demand-content .orientation5 {
+  bottom: 2rem;
+  left: -6.4375rem;
+}
+.demand .demand-content .orientation6 {
+  bottom: 2rem;
+  right: -4.0625rem;
+}
+.demand img {
+  width: 100%;
+  height: 100%;
+}
+.exhibition {
+  width: 100%;
+  padding: 6rem 0;
+  background: #f8f9ff;
+}
+.exhibition .exhibition-title {
+  text-align: center;
+  font-size: 3.125rem;
+  line-height: 4.375rem;
+  padding-bottom: 1.6875rem;
+}
+.exhibition .exhibition-content {
+  width: 103.5625rem;
+  margin: auto;
+  display: flex;
+  justify-content: space-between;
+}
+.exhibition .exhibition-content .exhibition-item {
+  display: flex;
+}
+.exhibition .exhibition-content .exhibition-item .exhibition-item-line {
+  width: 0.125rem;
+  height: 55rem;
+  background: #979797;
+  position: relative;
+}
+.exhibition .exhibition-content .exhibition-item .exhibition-item-line .optFor {
+  width: 0.3125rem;
+  height: 5rem;
+  background: #3f76f7;
+  position: relative;
+  left: 50%;
+  transform: translateX(-50%);
+  transition: 0.5s;
+}
+.exhibition .exhibition-content .exhibition-item .exhibition-item-text {
+  padding-left: 1.75rem;
+}
+.exhibition .exhibition-content .exhibition-item .exhibition-item-text .text {
+  height: 5rem;
+  display: flex;
+  align-items: center;
+  color: #6f7b8f;
+  font-size: 1.75rem;
+  cursor: pointer;
+}
+.exhibition .exhibition-content .exhibition-item .exhibition-item-text .text-On {
+  color: #000000;
+}
+.exhibition .exhibition-content .exhibition-show {
+  margin-top: 4.375rem;
+  width: 90.625rem;
+  height: 48.75rem;
+  background: url("../../image/customerNew/characteristicDisplay.png") no-repeat;
+  background-size: cover;
+  position: relative;
+}
+.exhibition .exhibition-content .exhibition-show .exhibition-show-carouselImage {
+  position: absolute;
+  top: 3.8125rem;
+  left: 11.0625rem;
+  width: 67.0625rem;
+  height: 37.6875rem;
+}
+.exhibition .exhibition-content .exhibition-show .exhibition-show-carouselImage img {
+  width: 100%;
+  height: 100%;
+}
+.solution {
+  padding: 7.375rem 0 0 0;
+  background: #fff;
+}
+.solution .solution-title {
+  font-size: 3.125rem;
+  color: #000000;
+  line-height: 4.375rem;
+  text-align: center;
+  margin-bottom: 8.125rem;
+}
+.solution .solution-content {
+  width: 101.125rem;
+  height: 40.625rem;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  margin: auto;
+}
+.solution .solution-content .solution-item {
+  width: 18.75rem;
+  height: 18.75rem;
+  margin-right: 1.5625rem;
+  border-radius: 0.25rem;
+  overflow: hidden;
+  box-shadow: 0px 20px 30px 0px rgba(0, 0, 0, 0.06);
+}
+.solution .solution-content .solution-item:nth-child(5n) {
+  margin-right: 0;
+}
+.solution .solution-content .solution-item:nth-child(2) .solution-item-title {
+  background: #58c1f1;
+}
+.solution .solution-content .solution-item:nth-child(4) .solution-item-title {
+  background: #58c1f1;
+}
+.solution .solution-content .solution-item:nth-child(7) .solution-item-title {
+  background: #58c1f1;
+}
+.solution .solution-content .solution-item:nth-child(9) .solution-item-title {
+  background: #58c1f1;
+}
+.solution .solution-content .solution-item .solution-item-title {
+  width: 100%;
+  height: 5.625rem;
+  font-size: 1.75rem;
+  color: #fff;
+  display: flex;
+  padding-left: 1.25rem;
+  align-items: center;
+  background: #20a0ff;
+  box-sizing: border-box;
+}
+.solution .solution-content .solution-item .solution-item-text {
+  width: 100%;
+  height: 13.125rem;
+  font-size: 1.5rem;
+  line-height: 2.0625rem;
+  color: #5a5a5a;
+  padding: 2.125rem 1.25rem;
+  box-sizing: border-box;
+}
+.customerReviews {
+  padding: 6.25rem 0 7.5rem 0;
+  background: #fff;
+}
+.customerReviews .customerReviews-title {
+  font-size: 3.125rem;
+  color: #000000;
+  line-height: 4.375rem;
+  text-align: center;
+  margin-bottom: 7.6875rem;
+}
+.customerReviews .customerReviews-content {
+  width: 100rem;
+  height: 37.5rem;
+  margin: auto;
+  position: relative;
+}
+.customerReviews .customerReviews-content .carouselImage {
+  width: 100%;
+  height: 100%;
+  border-radius: 0.375rem;
+  overflow: hidden;
+}
+.customerReviews .customerReviews-content .carouselImage img {
+  width: 100%;
+  height: 100%;
+}
+.customerReviews .icon {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 5rem;
+  height: 5rem;
+  cursor: pointer;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.customerReviews .icon img {
+  width: 75%;
+  height: 75%;
+}
+.customerReviews .left {
+  left: -7.1875rem;
+}
+.customerReviews .right {
+  right: -7.1875rem;
+}
+/* 咨询 */
+.zhixun {
+  display: block;
+  position: fixed;
+  bottom: 7.5rem;
+  right: 2.5rem;
+  padding: 1rem;
+  background: #fff;
+  box-shadow: 0.1875rem 0.1875rem 0.625rem #ccc;
+  z-index: 99999999;
+  text-align: center;
+}
+.zhixun p {
+  margin: 8px 0;
+}
+.zhixun img {
+  width: 8rem;
+}
+.tabOn {
+  background: #fff;
+  color: #20a0ff !important;
+}
+.white {
+  background: #fff !important;
+}
+/* 质询图标 */
+.consulting {
+  width: 3.125rem;
+  height: 3.125rem;
+  border-radius: 50%;
+  background: #fff;
+  position: fixed;
+  bottom: 3.75rem;
+  right: 6.25rem;
+  z-index: 4;
+  box-shadow: 0 0 1.25rem 0px #cbcbcb;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.consulting:hover {
+  background: #3396fb;
+}
+.conImgConImg {
+  width: 2.5rem;
+  height: 2.5rem;
+  position: relative;
+  margin-top: 1.5625rem;
+  margin-left: 1.125rem;
+}
+.conImgConImg img {
+  width: 100%;
+}

fhKeeper/formulahousekeeper/inva_4_tivo/css/customerNew/customerNew.less

@@ -0,0 +1,427 @@
+.bannar {
+  width: 100%;
+  height: 57.5rem;
+  position: relative;
+  .bannar_text {
+    position: absolute;
+    left: 9.875rem;
+    bottom: 4.375rem;
+    .bannar_text_item {
+      font-family: PingFangSC, PingFang SC;
+      font-size: 34px;
+      color: #5c5d61;
+      line-height: 4.375rem;
+    }
+    .bannar_text_title {
+      font-size: 5.625rem;
+      color: #12174e;
+      margin-bottom: 3.75rem;
+    }
+  }
+}
+
+// 客户一体化
+.customer_integration {
+  width: 100%;
+  height: 51.875rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .customer_integration_conter {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    .integrationImg {
+      width: 180px;
+      height: 180px;
+      padding-bottom: 0.625rem;
+      margin: auto;
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .integrationText {
+      font-size: 34px;
+      color: #354155;
+    }
+  }
+}
+
+// 核心功能
+.core {
+  background: #f8f9ff;
+  width: 100%;
+  position: relative;
+  padding: 6.25rem 0 6rem 0;
+  .core-title {
+    color: #000000;
+    font-size: 3.125rem;
+    padding-bottom: 1.4375rem;
+    text-align: center;
+  }
+  .core-text {
+    color: #5a5a5a;
+    font-size: 1.625rem;
+    text-align: center;
+  }
+  .core-content {
+    padding-top: 4.875rem;
+    width: 100rem;
+    height: 41.25rem;
+    margin: auto;
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    .core-content-item {
+      width: 31.875rem;
+      height: 18.75rem;
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-end;
+      background: #fff;
+      position: relative;
+      box-shadow: 0px 20px 30px 0px rgba(0, 0, 0, 0.06);
+      .item-img {
+        width: 14.375rem;
+        height: 14.375rem;
+        position: absolute;
+        top: 0.875rem;
+        right: 3.75rem;
+        img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+      .item-text {
+        height: 4.125rem;
+        display: flex;
+        align-items: center;
+        line-height: 2.0625rem;
+        font-size: 1.5rem;
+        color: #5a5a5a;
+        padding: 1.625rem 0 1.75rem 2.3125rem;
+        position: relative;
+        z-index: 1;
+      }
+      .item-title {
+        font-size: 2rem;
+        color: #000000;
+        padding-left: 2.3125rem;
+      }
+    }
+  }
+}
+
+// 需求
+.demand {
+  background: #fff;
+  width: 100%;
+  height: 62.5rem;
+  padding: 7.0625rem 0 7.75rem 0;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-content: space-around;
+  .demand-title {
+    width: 100%;
+    text-align: center;
+    font-size: 3.125rem;
+    color: #000000;
+  }
+  .demand-content {
+    position: relative;
+    width: 59.375rem;
+    height: 46.875rem;
+    padding-bottom: 1.375rem;
+    .demand-item {
+      position: absolute;
+      .demand-item-title {
+        display: flex;
+        align-items: center;
+        font-size: 1.75rem;
+        color: #000000;
+        .item-title-img {
+          width: 2.5rem;
+          height: 2.5rem;
+        }
+      }
+      .demand-item-text {
+        font-weight: 500;
+        font-size: 1.375rem;
+        color: #5a5a5a;
+        line-height: 2.25rem;
+        padding-top: 0.25rem;
+      }
+    }
+    .orientation1 {
+      top: 2.75rem;
+      left: -6.875rem;
+    }
+    .orientation2 {
+      top: 2.75rem;
+      right: -11.75rem;
+    }
+    .orientation3 {
+      top: 17.875rem;
+      left: -23.75rem;
+    }
+    .orientation4 {
+      top: 17.875rem;
+      right: -22.625rem;
+    }
+    .orientation5 {
+      bottom: 2rem;
+      left: -6.4375rem;
+    }
+    .orientation6 {
+      bottom: 2rem;
+      right: -4.0625rem;
+    }
+  }
+  img {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+// 特色展示
+.exhibition {
+  width: 100%;
+  padding: 6rem 0;
+  background: #f8f9ff;
+  .exhibition-title {
+    text-align: center;
+    font-size: 3.125rem;
+    line-height: 4.375rem;
+    padding-bottom: 1.6875rem;
+  }
+  .exhibition-content {
+    width: 103.5625rem;
+    margin: auto;
+    display: flex;
+    justify-content: space-between;
+    .exhibition-item {
+      display: flex;
+      .exhibition-item-line {
+        width: 0.125rem;
+        height: 55rem;
+        background: #979797;
+        position: relative;
+        .optFor {
+          width: 0.3125rem;
+          height: 5rem;
+          background: #3f76f7;
+          position: relative;
+          left: 50%;
+          transform: translateX(-50%);
+          transition: 0.5s;
+        }
+      }
+      .exhibition-item-text {
+        padding-left: 1.75rem;
+        .text {
+          height: 5rem;
+          display: flex;
+          align-items: center;
+          color: #6f7b8f;
+          font-size: 1.75rem;
+          cursor: pointer;
+        }
+        .text-On {
+          color: #000000;
+        }
+      }
+    }
+    .exhibition-show {
+      margin-top: 4.375rem;
+      width: 90.625rem;
+      height: 48.75rem;
+      background: url("../../image/customerNew/characteristicDisplay.png")
+        no-repeat;
+      background-size: cover;
+      position: relative;
+      .exhibition-show-carouselImage {
+        position: absolute;
+        top: 3.8125rem;
+        left: 11.0625rem;
+        width: 67.0625rem;
+        height: 37.6875rem;
+        img {
+          width: 100%;
+          height: 100%;
+        }
+      } 
+    }
+  }
+}
+
+// 行业解决方案
+.solution {
+  padding: 7.375rem 0 0 0;
+  background: #fff;
+  .solution-title {
+    font-size: 3.125rem;
+    color: #000000;
+    line-height: 4.375rem;
+    text-align: center;
+    margin-bottom: 8.125rem;
+  }
+  .solution-content {
+    width: 101.125rem;
+    height: 40.625rem;
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    margin: auto;
+    .solution-item {
+      width: 18.75rem;
+      height: 18.75rem;
+      margin-right: 1.5625rem;
+      border-radius: 0.25rem;
+      overflow: hidden;
+      box-shadow: 0px 20px 30px 0px rgba(0, 0, 0, 0.06);
+      &:nth-child(5n) {
+        margin-right: 0;
+      }
+      &:nth-child(2) .solution-item-title {
+        background: #58c1f1;
+      }
+      &:nth-child(4) .solution-item-title {
+        background: #58c1f1;
+      }
+      &:nth-child(7) .solution-item-title {
+        background: #58c1f1;
+      }
+      &:nth-child(9) .solution-item-title {
+        background: #58c1f1;
+      }
+      .solution-item-title {
+        width: 100%;
+        height: 5.625rem;
+        font-size: 1.75rem;
+        color: #fff;
+        display: flex;
+        padding-left: 1.25rem;
+        align-items: center;
+        background: #20a0ff;
+        box-sizing: border-box;
+      }
+      .solution-item-text {
+        width: 100%;
+        height: 13.125rem;
+        font-size: 1.5rem;
+        line-height: 2.0625rem;
+        color: #5a5a5a;
+        padding: 2.125rem 1.25rem;
+        box-sizing: border-box;
+      }
+    }
+  }
+}
+
+// 客户评价
+.customerReviews {
+  padding: 6.25rem 0 7.5rem 0;
+  background: #fff;
+  .customerReviews-title {
+    font-size: 3.125rem;
+    color: #000000;
+    line-height: 4.375rem;
+    text-align: center;
+    margin-bottom: 7.6875rem;
+  }
+  .customerReviews-content {
+    width: 100rem;
+    height: 37.5rem;
+    margin: auto;
+    position: relative;
+    .carouselImage {
+      width: 100%;
+      height: 100%;
+      border-radius: 0.375rem;
+      overflow: hidden;
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+  .icon {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 5rem;
+    height: 5rem;
+    cursor: pointer;
+    top: 50%;
+    transform: translateY(-50%);
+    img {
+      width: 75%;
+      height: 75%;
+    }
+  }
+  .left {
+    left: -7.1875rem;
+  }
+  .right {
+    right: -7.1875rem;
+  }
+}
+
+/* 咨询 */
+.zhixun {
+  display: block;
+  position: fixed;
+  bottom: 7.5rem;
+  right: 2.5rem;
+  padding: 1rem;
+  background: #fff;
+  box-shadow: 0.1875rem 0.1875rem 0.625rem #ccc;
+  z-index: 99999999;
+  text-align: center;
+}
+.zhixun p {
+  margin: 8px 0;
+}
+.zhixun img {
+  width: 8rem;
+}
+
+.tabOn {
+  background: #fff;
+  color: #20a0ff !important;
+}
+.white {
+  background: #fff !important;
+}
+/* 质询图标 */
+.consulting {
+  width: 3.125rem;
+  height: 3.125rem;
+  border-radius: 50%;
+  background: #fff;
+  position: fixed;
+  bottom: 3.75rem;
+  right: 6.25rem;
+  z-index: 4;
+  box-shadow: 0 0 1.25rem 0px #cbcbcb;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.consulting:hover {
+  background: #3396fb;
+}
+.conImgConImg {
+  width: 2.5rem;
+  height: 2.5rem;
+  position: relative;
+  margin-top: 1.5625rem;
+  margin-left: 1.125rem;
+}
+.conImgConImg img {
+  width: 100%;
+}

fhKeeper/formulahousekeeper/inva_4_tivo/css/reset.css

@@ -58,3 +58,48 @@ table {width:100%;border-collapse:collapse;border-spacing:0;table-layout:fixed;}
   width: 130px !important;
   height: 58px !important;
 }
+
+/* 公共样式 */
+.iframeClass {
+  width: 100%;
+  background: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 99;
+  border: 0;
+  overflow: hidden;
+}
+
+.resetIframe {
+  width: 100%;
+  background: none;
+  border: 0;
+}
+.resetIframebtn {
+  height: 30.5rem;
+}
+
+::-webkit-scrollbar {
+  width: 0px; /* 设置滚动条宽度 */
+}
+
+::-webkit-scrollbar-button {
+  height: 0;
+  background-color: #ccc; /* 按钮背景颜色 */
+}
+
+::-webkit-scrollbar-track {
+  background-color: #f1f1f1;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #888; 
+  border-radius: 5px; 
+}
+::-webkit-scrollbar-thumb:hover {
+  background-color: #555; 
+}
+::-webkit-scrollbar-thumb:active {
+  background-color: #333;
+}

fhKeeper/formulahousekeeper/inva_4_tivo/customerNew.html

@@ -0,0 +1,319 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta name="keywords" content="工时管理,项目工时管理,项目成本管理,工时统计,项目成本统计,工时记录表,工时统计表" />
+  <meta name="description"
+    content="工时管家是专业的工时管理和项目管理软件。提供工时填报，审核和工时统计功能。引进现代工时管理和项目管理的理念，核算项目投入成本准确便捷，企业IPO项目成本分摊好帮手" />
+  <title>工时管理|工时记录表|项目成本管理-工时管家是强大易用的项目工时管理系统。工时填报|工时统计|手机移动填报|核算项目成本|企业IPO利器！</title>
+  <link href="css/styles.css" rel="stylesheet">
+  <link rel="stylesheet" href="./css/reset.css">
+  <link rel="stylesheet" href="./css/customerNew/customerNew.css">
+  <link rel="stylesheet" href="./css/element-uiCss.css">
+  <script src="./js/vue.min.js"></script>
+  <script src="./js/element-ui.js"></script>
+  <script src="js/jquery1.42.min.js"></script>
+  </link>
+</head>
+
+<body data-spy="scroll" data-target=".fixed-top" id="body">
+  <div id="app">
+    <div class="spinner-wrapper">
+      <div class="spinner">
+        <div class="bounce1"></div>
+        <div class="bounce2"></div>
+        <div class="bounce3"></div>
+      </div>
+    </div>
+    <!-- 头部 -->
+    <iframe id="headerIframe" src="./moduleView/header.html" class="iframeClass" onLoad="reinitIframe();"></iframe>
+
+    <!-- 咨询客服 -->
+    <div class="zhixun" id="zhixun" style="display: none">
+      <p>微信扫码咨询</p>
+      <img src="./image/codecopy.jpg" alt="">
+      <p><span style="color: #595959;">客服QQ：</span>3052894409</p>
+    </div>
+    <!-- 咨询的图标 -->
+    <div class="consulting" id="consulting">
+      <img id="consultigImg" src="./image/ions/kefu2.png" alt="">
+    </div>
+
+    <!-- banner -->
+    <div class="bannar">
+      <img src="./image/customerNew/banner.gif" alt="" />
+      <div class="bannar_text">
+        <div class="bannar_text_title">客户管家</div>
+        <div class="bannar_text_item">· 节约成本<br />· 提高企业营收<br />· 用高效的客户追踪系统和智能数据处理</div>
+      </div>
+    </div>
+
+    <!-- 客户一体化 -->
+    <div class="customer_integration">
+      <div class="customer_integration_conter">
+        <div class="integrationImg">
+          <img src="./image/customerNew/integrationImg.png" alt="">
+        </div>
+        <div class="integrationText">· 客户管家,一体化智能管理</div>
+      </div>
+    </div>
+
+    <!-- 核心功能 -->
+    <div class="core">
+      <div class="core-title">核心功能</div>
+      <div class="core-text">一站式AI智能报表、客户管理、线索商机、数据分析、产品管理、个性化等功能。</div>
+      <div class="core-content">
+        <div class="core-content-item">
+          <div class="item-img"><img src="./image/customerNew/core1.png" /></div>
+          <div class="item-title">AI 智能填报</div>
+          <div class="item-text">通过AI大模型对数据的理解，<br /> 根据用户描述的需求实时生成报表。</div>
+        </div>
+        <div class="core-content-item">
+          <div class="item-img"><img src="./image/customerNew/core2.png" /></div>
+          <div class="item-title">客户管理</div>
+          <div class="item-text">管理客户名称、行业、地区、联系人信息等</div>
+        </div>
+        <div class="core-content-item">
+          <div class="item-img"><img src="./image/customerNew/core3.png" /></div>
+          <div class="item-title">线索商机</div>
+          <div class="item-text">归纳线索信息、线索转商机、商机可能性、预期收益等</div>
+        </div>
+        <div class="core-content-item">
+          <div class="item-img"><img src="./image/customerNew/core4.png" /></div>
+          <div class="item-title">数据分析</div>
+          <div class="item-text">线索分析、来源排行、商机分析、任务统计</div>
+        </div>
+        <div class="core-content-item">
+          <div class="item-img"><img src="./image/customerNew/core5.png" /></div>
+          <div class="item-title">产品管理</div>
+          <div class="item-text">产品基础信息、销售时间、产品描述等</div>
+        </div>
+        <div class="core-content-item">
+          <div class="item-img"><img src="./image/customerNew/core6.png" /></div>
+          <div class="item-title">个性化</div>
+          <div class="item-text">自定义组件、个性化UI等</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 需求 -->
+    <div class="demand">
+      <div class="demand-title">满足您的各类需求</div>
+      <div class="demand-content">
+        <img src="./image/customerNew/demand.png" alt="">
+        <div class="demand-item orientation1">
+          <div class="demand-item-title">
+            <div class="item-title-img"><img src="./image/customerNew/demandIcon.png" alt=""></div>
+            智能销售管理
+          </div>
+          <div class="demand-item-text">
+            商机信息字段齐全并可自定义；<br />
+            商机分阶段处理；<br />
+            根据商机创建任务。
+          </div>
+        </div>
+
+        <div class="demand-item orientation2">
+          <div class="demand-item-title">
+            <div class="item-title-img"><img src="./image/customerNew/demandIcon.png" alt=""></div>
+            提高销售成单率
+          </div>
+          <div class="demand-item-text">
+            商机信息字段齐全并可自定义；<br />
+            商机分阶段处理；<br />
+            根据商机创建任务。
+          </div>
+        </div>
+
+        <div class="demand-item orientation3">
+          <div class="demand-item-title">
+            <div class="item-title-img"><img src="./image/customerNew/demandIcon.png" alt=""></div>
+            便捷用户操作
+          </div>
+          <div class="demand-item-text">
+            操作逻辑简单易学；<br />
+            系统界面简洁明了；<br />
+            内容展示完整易读。
+          </div>
+        </div>
+
+        <div class="demand-item orientation4">
+          <div class="demand-item-title">
+            <div class="item-title-img"><img src="./image/customerNew/demandIcon.png" alt=""></div>
+            降低客户流失率
+          </div>
+          <div class="demand-item-text">
+            客户信息字段齐全并可自定义；<br />
+            客户回访创建；<br />
+            客户问题记录。
+          </div>
+        </div>
+
+        <div class="demand-item orientation5">
+          <div class="demand-item-title">
+            <div class="item-title-img"><img src="./image/customerNew/demandIcon.png" alt=""></div>
+            提高线索转化率
+          </div>
+          <div class="demand-item-text">
+            线索信息字段齐全并可自定义；<br />
+            根据线索创建任务；<br />
+            线索长时间未转化自动加入公共池。
+          </div>
+        </div>
+
+        <div class="demand-item orientation6">
+          <div class="demand-item-title">
+            <div class="item-title-img"><img src="./image/customerNew/demandIcon.png" alt=""></div>
+            缩短销售周期
+          </div>
+          <div class="demand-item-text">
+            全流程清晰明了；<br />
+            可创建任务协同工作；<br />
+            设置提醒防止遗漏。
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 特色展示 -->
+    <div class="exhibition">
+      <div class="exhibition-title">特色展示</div>
+      <div class="exhibition-content">
+        <div class="exhibition-item">
+          <div class="exhibition-item-line">
+            <div :class="`optFor`" :style="`top: ${exhibitionTop}`"></div>
+          </div>
+          <div class="exhibition-item-text">
+            <div :class="`text ${exhibitionIndex == index ? 'text-On' : ''}`" v-for="(item,index) in exhibitionList"
+              :key="index" @click="changeExhibitionIndex(index)">{{item.label}}</div>
+          </div>
+        </div>
+        <div class="exhibition-show">
+          <div class="exhibition-show-carouselImage">
+            <el-carousel ref="exhibitionRef" direction="vertical" :autoplay="false" arrow="never" height="37.6875rem" indicator-position="none">
+              <el-carousel-item v-for="(item, index) in exhibitionList" :key="index">
+                <img :src="item.img" />
+              </el-carousel-item>
+            </el-carousel>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 行业解决方案 -->
+    <div class="solution">
+      <div class="solution-title">行业解决方案</div>
+      <div class="solution-content">
+        <div class="solution-item" v-for="(item, index) in solutionList" :key="index">
+          <div class="solution-item-title">{{ item.title }}</div>
+          <div class="solution-item-text">{{ item.text }}</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 客户评价 -->
+    <div class="customerReviews">
+      <div class="customerReviews-title">客户评价</div>
+      <div class="customerReviews-content">
+        <div class="carouselImage">
+          <el-carousel ref="carouselRef" :interval="5000" height="37.5rem" arrow="never" indicator-position="none">
+            <el-carousel-item v-for="item in carouselImageList" :key="item">
+              <img :src="item"></img>
+            </el-carousel-item>
+          </el-carousel>
+        </div>
+        <!-- 左右箭头 -->
+        <div class="icon left" @click="prev()"><img src="./image/customerNew/left.png" alt=""></div>
+        <div class="icon right" @click="next()"><img src="./image/customerNew/right.png" alt=""></div>
+      </div>
+    </div>
+
+    <!-- 底部 -->
+    <iframe id="bottomIframe" src="./moduleView/bottom.html" class="resetIframe resetIframebtn"></iframe>
+  </div>
+</body>
+<script>
+  new Vue({
+    el: "#app",
+    data: {
+      exhibitionIndex: 0,
+      exhibitionList: [
+        { label: '线索', img: './image/customerNew/exhibitionListImg1.png' },
+        { label: '商机', img: './image/customerNew/exhibitionListImg2.png' },
+        { label: '客户', img: './image/customerNew/exhibitionListImg3.png' },
+        { label: '任务', img: './image/customerNew/exhibitionListImg4.png' },
+        { label: '报表', img: './image/customerNew/exhibitionListImg5.png' },
+        { label: '产品', img: './image/customerNew/exhibitionListImg6.png' },
+        { label: '联系人', img: './image/customerNew/exhibitionListImg7.png' },
+        { label: '数据分析', img: './image/customerNew/exhibitionListImg8.png' },
+        { label: '销售订单', img: './image/customerNew/exhibitionListImg9.png' },
+        { label: '组织机构', img: './image/customerNew/exhibitionListImg10.png' },
+        { label: '系统基础设置', img: './image/customerNew/exhibitionListImg11.png' },
+      ],
+      solutionList: [
+        { title: '生产制造业', text: '机械制造业、电子信息制造业、汽车制造业、化工制造业、纺织制造业和食品加工业等。' },
+        { title: '互联网行业', text: '互联网服务、电子商务、在线娱乐、数字内容、信息技术、人工智能等。' },
+        { title: '家居装修行业', text: '设计、建筑施工、建材生产、装饰及家具产品制造等。' },
+        { title: '医疗医药行业', text: '各类医疗机构、药品、医疗器械等。' },
+        { title: '外贸行业', text: '商品贸易、服务贸易、技术贸易、跨国投资等。' },
+        { title: '高科技技术制造业', text: '电子信息制造业、航空航天制造业、生物医药制造业、新能源与环保制造业等。' },
+        { title: '教育培训行业', text: '学校教育、职业教育、语言培训、艺术教育等。' },
+        { title: '金融行业', text: '银行业、保险业、证券业、基金业、期货与期权业等。' },
+        { title: 'IT软件行业', text: '软件开发、硬件制造、云计算、大数据、人工智能等。' },
+        { title: '物流行业', text: '运输、仓储、配送、信息管理等。' },
+      ],
+      carouselImageList: [
+        'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
+        'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
+        'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
+        'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
+        'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
+        'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
+        'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
+      ]
+    },
+    computed: {
+      exhibitionTop() {
+        return `${this.exhibitionIndex * 80}px`
+      }
+    },
+    mounted() {
+    },
+    methods: {
+      prev() {
+        this.$refs.carouselRef.prev()
+      },
+      next() {
+        this.$refs.carouselRef.next()
+      },
+      changeExhibitionIndex(index) {
+        console.log(index, '<==== 点击的索引')
+        this.$refs.exhibitionRef.setActiveItem(index)
+        this.exhibitionIndex = index
+      }
+    },
+  })
+</script>
+
+<script src="js/js/jquery.min.js"></script>
+<script src="js/js/scripts.js"></script>
+<script src="js/iframe.js"></script>
+<script>
+  $('#zhixun').hover(function () {
+    $("#zhixun").show()
+    $("#consultigImg").attr("src", './image/ions/kefu1.png')
+  }, function () {
+    $("#zhixun").hide()
+    $("#consultigImg").attr("src", './image/ions/kefu2.png')
+  })
+  $('#consulting').hover(function () {
+    $("#zhixun").show()
+    $("#consultigImg").attr("src", './image/ions/kefu1.png')
+  }, function () {
+    $("#zhixun").hide()
+    $("#consultigImg").attr("src", './image/ions/kefu2.png')
+  })
+</script>
+</html>

fhKeeper/formulahousekeeper/inva_4_tivo/js/iframe.js

@@ -0,0 +1,75 @@
+const iframe = document.getElementById("headerIframe");
+let observer = null
+const backcolor = {
+  project: { background: '#F6FEF9', color: '#3C86DF', logo: './image/logo.jpg' },
+  mobile: { background: 'none', color: '#000', logo: './image/logo.jpg' },
+  about: { background: 'none', color: '#000', logo: './image/logo.jpg' },
+  dynamic: { background: 'none', color: '#000', logo: './image/logo.jpg' }
+}
+
+function removeListener() {
+  if (observer) {
+    observer.disconnect();
+  }
+}
+function reinitIframe() {
+  if (iframe) {
+      console.log('开始执行')
+      const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
+      const iframeBody = iframeDocument.body
+      observer = new MutationObserver(function(mutationsList, observer) {
+          const bodyHeight = iframeBody.clientHeight;
+          iframe.style.height = `${bodyHeight + 1}px`;
+      });
+
+      observer.observe(iframeBody, { attributes: true, childList: true, subtree: true });
+  }
+}
+
+function handleScroll() {
+  const scrollYnma = window.scrollY
+  const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
+  let imgElement = iframeDocument.getElementById('logo');
+  let headerItems = iframeDocument.querySelectorAll('.header-item')
+  const urls = window.location.href
+  const filed = urls.match(/\/([^\/]+)\.html$/) && urls.match(/\/([^\/]+)\.html$/)[1];
+  if(scrollYnma > 1) {
+    iframe.style.background = '#fff'
+    imgElement.src = './image/logo.jpg'
+    iframe.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.2)';
+    headerItems.forEach(function(item) {
+      item.style.color = '#000'; // 设置你想要的字体颜色
+    });
+    return
+  }
+  console.log(backcolor[filed], filed)
+  iframe.style.background = (backcolor[filed] && backcolor[filed].background) || 'none'
+  iframe.style.boxShadow = '0 0 0 rgba(0, 0, 0, 0)';
+  imgElement.src = (backcolor[filed] && backcolor[filed].logo) || './image/logo.png'
+  headerItems.forEach(function(item) {
+    item.style.color = (backcolor[filed] && backcolor[filed].color) || '#fff'; // 设置你想要的字体颜色
+  });
+}
+
+// 页面滚动事件
+document.addEventListener('scroll', handleScroll);
+
+iframe.onload = function() {
+  reinitIframe();
+  handleScroll()
+}
+
+window.addEventListener('beforeunload', function() {
+  removeListener();
+  document.removeEventListener('scroll', handleScroll);
+});
+
+// 设计稿尺寸
+function bodyScale() {
+    var devicewidth = document.documentElement.clientWidth;
+    var scale = devicewidth / 1920;  // 设计稿的尺寸
+    document.body.style.zoom = scale;
+}
+window.onload = window.onresize = function () {
+    bodyScale();
+};

fhKeeper/formulahousekeeper/inva_4_tivo/moduleView/bottom.html

@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="./css/reset.css">
+  <link rel="stylesheet" href="./css/bottom.css">
+  <script>
+    function bodyScale() {
+      var devicewidth = document.documentElement.clientWidth;
+      var scale = devicewidth / 1920;  // 设计稿的尺寸
+      document.body.style.zoom = scale;
+    }
+    window.onload = window.onresize = function () {
+      bodyScale();
+    };
+  </script>
+</head>
+
+<body>
+  <div>
+    <svg class="footer-frame" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"
+      viewBox="0 0 1920 79">
+      <defs>
+        <style>
+          .cls-2 {
+            fill: #20a0ff;
+          }
+        </style>
+      </defs>
+      <title>footer-frame</title>
+      <path class="cls-2"
+        d="M0,72.427C143,12.138,255.5,4.577,328.644,7.943c147.721,6.8,183.881,60.242,320.83,53.737,143-6.793,167.826-68.128,293-60.9,109.095,6.3,115.68,54.364,225.251,57.319,113.58,3.064,138.8-47.711,251.189-41.8,104.012,5.474,109.713,50.4,197.369,46.572,89.549-3.91,124.375-52.563,227.622-50.155A338.646,338.646,0,0,1,1920,23.467V79.75H0V72.427Z"
+        transform="translate(0 -0.188)" />
+    </svg>
+
+    <div class="indexBottom">
+      <div class="indexBottomBox">
+        <div class="indexBottomBox_box">
+          <div class="indexBottomBox_one">
+            <div class="indexBottomBox_one_til">推荐产品</div>
+            <div>工时管家</div>
+            <div>随访管家</div>
+            <div>项目管家</div>
+            <div>客户管家</div>
+          </div>
+          <div class="indexBottomBox_one">
+            <div class="indexBottomBox_one_til">热门链接</div>
+            <div>客户案例</div>
+            <div>手机版</div>
+            <div>产品定价</div>
+            <div>关于我们</div>
+          </div>
+          <div class="indexBottomBox_video">
+            <div class="indexBottomBox_one_til">视频中心</div>
+            <div class="indexBottomBox_video_box" id="videoBox"><img src="../image/videos.png" alt=""></div>
+          </div>
+          <div class="contactUs">
+            <div class="indexBottomBox_one_til">联系我们</div>
+            <div class="contactUs_box">
+              <div class="contactUs_box_img"><img src="../image/code.jpg"></div>
+              <div class="contactUs_box_tex">扫码添加客服微信</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="copyright_mob">
+      <div class="container">
+        <div class="row">
+          <div class="col-lg-12">
+            <p class="p-small-sl">Copyright©2016 南京火石闪信网络科技有限公司&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a
+                href="http://beian.miit.gov.cn" target="_blank" style="color:white;">苏ICP备18064522号-1</a></p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+<script src="../js/jquery1.42.min.js"></script>
+<script>
+  $('#videoBox').click(function () {
+    window.open("../video/guanwang.mp4")
+  })
+  $('#videoCli').click(function () {
+    window.open("../video/guanwang.mp4")
+  })
+</script>
+
+</html>

fhKeeper/formulahousekeeper/inva_4_tivo/moduleView/css/bottom.css

@@ -0,0 +1,77 @@
+/* 底部重写 */
+.indexBottom {
+  background: #20a0ff;
+  padding: 4rem 0;
+  margin-top: -2px !important;
+}
+.indexBottomBox {
+  display: flex;
+  justify-content: space-between;
+  width: 80rem;
+  margin: auto;
+}
+.indexBottomBox_box {
+  width: 80rem;
+  display: flex;
+}
+.indexBottomBox_one {
+  margin-right: 10rem;
+}
+.indexBottomBox_one .indexBottomBox_one_til, .indexBottomBox_video .indexBottomBox_one_til, .contactUs .indexBottomBox_one_til{
+  font-size: 1.5rem;
+  color: #fff;
+  font-weight: bold;
+  margin-bottom: 1.5rem;
+}
+.indexBottomBox_one div {
+  font-size: 1.2rem;
+  color: #fff;
+  margin-bottom: 1.2rem;
+}
+.indexBottomBox_video {
+  width: 16rem;
+}
+.indexBottomBox_video_box {
+  width: 100%;
+  height: 10rem;
+  cursor: pointer;
+}
+.indexBottomBox_video_box img{
+  width: 100%;
+  height: 100%;
+}
+.contactUs {
+  margin-left: 10rem;
+}
+.contactUs_box_img {
+  width: 9rem;
+  height: 9rem;
+}
+.contactUs_box_img img{
+  width: 100%;
+  height: 100%;
+}
+.contactUs_box_tex {
+  text-align: center;
+  line-height: 2rem;
+  font-size: 1rem;
+  color: #fff;
+  width: 100%;
+}
+
+.copyright_mob {
+  width: 100%;
+  text-align: center;
+  line-height: 2.5rem !important;
+  color: #fff !important;
+  font-size: 1rem !important;
+  background: #20a0ff !important;
+  border-top: 1px solid #fff;
+}
+.p-small-sl {
+  margin: 0;
+  line-height: 3.2rem !important;
+  color: #fff !important;
+  font-size: 1.3rem !important;
+  background: #20a0ff !important;
+}

fhKeeper/formulahousekeeper/inva_4_tivo/moduleView/css/header.css

@@ -0,0 +1,123 @@
+#app {
+  width: 100%;
+}
+.headerView {
+  width: 101.25rem;
+  height: 5rem;
+  margin: auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.headerView .headerView-left,
+.headerView .headerView-right {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  height: 100%;
+}
+.headerView .headerView-left .header-logo,
+.headerView .headerView-right .header-logo {
+  width: 6.25rem;
+}
+.headerView .headerView-left .header-list,
+.headerView .headerView-right .header-list {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  margin-left: 4rem;
+}
+.headerView .headerView-left .header-list .header-item,
+.headerView .headerView-right .header-list .header-item {
+  margin-right: 2rem;
+  font-size: 1.125rem;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+}
+.headerView .headerView-left .header-list .header-item a,
+.headerView .headerView-right .header-list .header-item a {
+  display: block;
+  display: flex;
+  align-items: center;
+  height: 3.5rem;
+}
+.headerView .headerView-left .header-list .header-item::last-child,
+.headerView .headerView-right .header-list .header-item::last-child {
+  margin-right: 0;
+}
+.headerView .headerView-left .header-list .item-hover,
+.headerView .headerView-right .header-list .item-hover {
+  border-bottom: 0.125rem solid #37b8ff;
+}
+.headerView .headerView-left .header-list a,
+.headerView .headerView-right .header-list a {
+  display: block;
+  height: 100%;
+  color: inherit;
+  text-decoration: none;
+}
+.headerView .img {
+  width: 100%;
+  height: 100%;
+}
+.headerProduct {
+  width: 100%;
+  padding-bottom: 20px;
+  border-top: 0.0625rem solid #dcdfe6;
+  background: #fff;
+}
+.headerProduct .content {
+  width: 100rem;
+  display: flex;
+  margin: auto;
+}
+.headerProduct .content .product {
+  width: 48%;
+  font-size: 1.125rem;
+}
+.headerProduct .content .product .product-title {
+  display: flex;
+  padding: 1.25rem 0 0.9375rem 1.875rem;
+  align-items: center;
+  border-bottom: 0.0625rem solid #dcdfe6;
+}
+.headerProduct .content .product .hove {
+  background: #f0f4ff;
+  color: #3370ff;
+}
+.headerProduct .content .product .product-item {
+  margin-top: 0.625rem;
+  width: 7.5rem;
+  padding: 0.625rem 1.25rem;
+  border-radius: 0.25rem;
+}
+.headerProduct .content .product .product-item a {
+  display: block;
+  height: 100%;
+  color: inherit;
+  text-decoration: none;
+}
+::-webkit-scrollbar {
+  width: 0px;
+  /* 设置滚动条宽度 */
+}
+::-webkit-scrollbar-button {
+  height: 0;
+  background-color: #ccc;
+  /* 按钮背景颜色 */
+}
+::-webkit-scrollbar-track {
+  background-color: #f1f1f1;
+}
+::-webkit-scrollbar-thumb {
+  background-color: #888;
+  border-radius: 5px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background-color: #555;
+}
+::-webkit-scrollbar-thumb:active {
+  background-color: #333;
+}

fhKeeper/formulahousekeeper/inva_4_tivo/moduleView/css/header.less

@@ -0,0 +1,123 @@
+#app {
+  width: 100%;
+}
+.headerView {
+  width: 101.25rem;
+  height: 5rem;
+  margin: auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  .headerView-left,
+  .headerView-right {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: 100%;
+    .header-logo {
+      width: 6.25rem;
+    }
+    .header-list {
+      display: flex;
+      align-items: center;
+      height: 100%;
+      margin-left: 4rem;
+      .header-item {
+        margin-right: 2rem;
+        font-size: 1.125rem;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        box-sizing: border-box;
+        a {
+          display: block;
+          display: flex;
+          align-items: center;
+          height: 3.5rem;
+        }
+        &::last-child {
+          margin-right: 0;
+        }
+      }
+
+      .item-hover {
+        border-bottom: 0.125rem solid #37b8ff;
+      }
+
+      a {
+        display: block;
+        height: 100%;
+        color: inherit;
+        text-decoration: none;
+      }
+    }
+  }
+
+  .img {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.headerProduct {
+  width: 100%;
+  padding-bottom: 20px;
+  border-top: 0.0625rem solid #dcdfe6;
+  background: #fff;
+  .content {
+    width: 100rem;
+    display: flex;
+    margin: auto;
+    .product {
+      width: 48%;
+      font-size: 1.125rem;
+      .product-title {
+        display: flex;
+        padding: 1.25rem 0 0.9375rem 1.875rem;
+        align-items: center;
+        border-bottom: 0.0625rem solid #dcdfe6;
+      }
+      .hove {
+        background: #f0f4ff;
+        color: #3370ff;
+      }
+      .product-item {
+        margin-top: 0.625rem;
+        width: 7.5rem;
+        padding: 0.625rem 1.25rem;
+        border-radius: 0.25rem;
+
+        a {
+          display: block;
+          height: 100%;
+          color: inherit;
+          text-decoration: none;
+        }
+      }
+    }
+  }
+}
+
+::-webkit-scrollbar {
+  width: 0px; /* 设置滚动条宽度 */
+}
+
+::-webkit-scrollbar-button {
+  height: 0;
+  background-color: #ccc; /* 按钮背景颜色 */
+}
+
+::-webkit-scrollbar-track {
+  background-color: #f1f1f1;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #888; 
+  border-radius: 5px; 
+}
+::-webkit-scrollbar-thumb:hover {
+  background-color: #555; 
+}
+::-webkit-scrollbar-thumb:active {
+  background-color: #333;
+}

fhKeeper/formulahousekeeper/inva_4_tivo/moduleView/css/reset.css

@@ -0,0 +1,349 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+ 
+/* Document
+   ========================================================================== */
+ 
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+ 
+ html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+ 
+/* Sections
+   ========================================================================== */
+ 
+/**
+ * Remove the margin in all browsers.
+ */
+ 
+body {
+  margin: 0;
+}
+ 
+/**
+ * Render the `main` element consistently in IE.
+ */
+ 
+main {
+  display: block;
+}
+ 
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+ 
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+ 
+/* Grouping content
+   ========================================================================== */
+ 
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+ 
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+ 
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+ 
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+ 
+/* Text-level semantics
+   ========================================================================== */
+ 
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+ 
+a {
+  background-color: transparent;
+}
+ 
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+ 
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+ 
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+ 
+b,
+strong {
+  font-weight: bolder;
+}
+ 
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+ 
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+ 
+/**
+ * Add the correct font size in all browsers.
+ */
+ 
+small {
+  font-size: 80%;
+}
+ 
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+ 
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+ 
+sub {
+  bottom: -0.25em;
+}
+ 
+sup {
+  top: -0.5em;
+}
+ 
+/* Embedded content
+   ========================================================================== */
+ 
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+ 
+img {
+  border-style: none;
+}
+ 
+/* Forms
+   ========================================================================== */
+ 
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+ 
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+ 
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+ 
+button,
+input { /* 1 */
+  overflow: visible;
+}
+ 
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+ 
+button,
+select { /* 1 */
+  text-transform: none;
+}
+ 
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+ 
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+ 
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+ 
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+ 
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+ 
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+ 
+/**
+ * Correct the padding in Firefox.
+ */
+ 
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+ 
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+ 
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+ 
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+ 
+progress {
+  vertical-align: baseline;
+}
+ 
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+ 
+textarea {
+  overflow: auto;
+}
+ 
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+ 
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+ 
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+ 
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+ 
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+ 
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+ 
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+ 
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+ 
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+ 
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+ 
+/* Interactive
+   ========================================================================== */
+ 
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+ 
+details {
+  display: block;
+}
+ 
+/*
+ * Add the correct display in all browsers.
+ */
+ 
+summary {
+  display: list-item;
+}
+ 
+/* Misc
+   ========================================================================== */
+ 
+/**
+ * Add the correct display in IE 10+.
+ */
+ 
+template {
+  display: none;
+}
+ 
+/**
+ * Add the correct display in IE 10.
+ */
+ 
+[hidden] {
+  display: none;
+}

fhKeeper/formulahousekeeper/inva_4_tivo/moduleView/header.html

@@ -0,0 +1,138 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="./css/reset.css">
+  <link rel="stylesheet" href="./css/header.css">
+  <link rel="stylesheet" href="../css/element-uiCss.css">
+  <script src="../js/vue.min.js"></script>
+  <script src="../js/element-ui.js"></script>
+  <script src="./js/setRem.js"></script>
+</head>
+<body>
+  <div id="app">
+    <div class="headerView">
+      <div class="headerView-left">
+        <div class="header-logo">
+          <img id="logo" src="./image/logo.jpg" class="img" alt="">
+          <!-- <img src="./image/logo.png" class="img" alt=""> -->
+        </div>
+        <div class="header-list" @mouseleave="mouseleave('left')">
+          <div class="header-item" @mouseenter="mouseenter('product', true)" @mouseleave="mouseleave('product')">产品矩形</div>
+          <div v-for="(item, index) in leftItemList" :key="index" @mouseenter="mouseenter('left', index)" :class="`${item.class}`">
+            <a :href="item.value" target="_top" :class="`${ leftItemIndex == index ? 'item-hover' : '' }`"> {{ item.label }} </a>
+          </div>
+        </div>
+      </div>
+      <div class="headerView-right">
+        <div class="header-list" @mouseleave="mouseleave('right')" v-if="showRight">
+          <div :class="`header-item`" @mouseenter="mouseenter('right', 1)" v-if="urlFiled != 'workshop'">
+            <a :href="rightCilckUrl[urlFiled] && rightCilckUrl[urlFiled].signIn" :class="`${ rightItemIndex == 1 ? 'item-hover' : '' }`" target="_top">立即注册</a>
+          </div>
+          <div :class="`header-item`" @mouseenter="mouseenter('right', 0)">
+            <a :href="rightCilckUrl[urlFiled] && rightCilckUrl[urlFiled].logIn" :class="`${ rightItemIndex == 0 ? 'item-hover' : '' }`" target="_top">后台登陆</a>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 产品矩形 -->
+    <div class="headerProduct" v-if="productFlag" @mouseenter="mouseenter('product', true)" @mouseleave="mouseleave('product')">
+      <div class="content">
+        <div class="product">
+          <div class="product-title">管家</div>
+          <div class="product-list" @mouseleave="mouseleave('other')">
+            <div :class="`product-item ${otherItemIndex == index ? 'hove' : ''}`" v-for="(item, index) in otherList" :key="index" @click="toPath(item)" @mouseenter="mouseenter('other', index)">
+              <a :href="item.path" target="_top">{{ item.label }}</a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+<script>
+  new Vue({
+      el: "#app",
+      data: {
+          leftItemIndex: null,
+          rightItemIndex: null,
+          otherItemIndex: null,
+          productFlag: false,
+          productTimer: null,
+          leftItemList: [
+            { label: '客户评价', value: '../index.html#customer', class: 'header-item' },
+            { label: '手机版', value: '../mobile.html', class: 'header-item' },
+            { label: '产品定价', value: '../index.html#pricing', class: 'header-item' },
+            { label: '关于我们', value: '../about.html', class: 'header-item' },
+            { label: '企业动态', value: '../dynamic.html', class: 'header-item' },
+          ],
+          otherList: [
+            { label: '工时管家', path: '../index.html' },
+            { label: '随访管家', path: '../followup.html' },
+            { label: '项目管家', path: '../project.html' },
+            { label: '客户管家', path: '../customerNew.html' },
+            { label: '生产车间管家', path: '../workshop.html' },
+          ],
+          showRight: true,
+          urlFiled: 'index',
+          rightCilckUrl: {
+            index: { signIn: 'http://worktime.ttkuaiban.com/#/register', logIn: 'http://worktime.ttkuaiban.com/#/login' },
+            followup: { signIn: 'http://clinic.ttkuaiban.com/#/register', logIn: 'http://clinic.ttkuaiban.com/#/login' },
+            project: { signIn: 'http://worktime.ttkuaiban.com/#/register', logIn: 'http://worktime.ttkuaiban.com/#/login' },
+            customerNew: { signIn: '#', logIn: '#' },
+            workshop: { signIn: '', logIn: 'http://workshop.ttkuaiban.com' },
+            mobile: { signIn: 'http://worktime.ttkuaiban.com/#/register', logIn: 'http://worktime.ttkuaiban.com/#/login' },
+          }
+      },
+      mounted () {
+          this.processingData()
+      },
+      methods: {
+        processingData() {
+          const urls = window.parent.location.href
+          const filed = urls.match(/\/([^\/]+)\.html$/) && urls.match(/\/([^\/]+)\.html$/)[1];
+          const strList = ['dynamic', 'about']
+          this.urlFiled = filed
+          this.showRight = !strList.includes(filed)
+        },
+        toPath(item) {
+          console.log(item, '<==== 看看数据')
+        },
+        mouseenter(type, index) {
+          if(type == 'left') {
+            this.leftItemIndex = index
+          }
+          if(type == 'right') {
+            this.rightItemIndex = index
+          }
+          if(type == 'other') {
+            this.otherItemIndex = index
+          }
+          if(type == 'product') {
+            if(this.productTimer) {
+              clearTimeout(this.productTimer)
+            }
+            this.productFlag = true
+          }
+        },
+        mouseleave(type) {
+          if(type == 'left') {
+            this.leftItemIndex = null
+          }
+          if(type == 'right') {
+            this.rightItemIndex = null
+          }
+          if(type == 'other') {
+            this.otherItemIndex = null
+          }
+          if(type == 'product') {
+            this.productTimer = setTimeout(() => {
+              this.productFlag = false
+            }, 200)
+          }
+        }
+      },
+  })
+</script>
+</html>

fhKeeper/formulahousekeeper/inva_4_tivo/moduleView/js/setRem.js

@@ -0,0 +1,8 @@
+function bodyScale() {
+  var devicewidth = document.documentElement.clientWidth;
+  var scale = devicewidth / 1920;  // 设计稿的尺寸
+  document.body.style.zoom = scale;
+}
+window.onload = window.onresize = function () {
+  bodyScale();
+};

fhKeeper/formulahousekeeper/inva_4_tivo/workshop.html

@@ -17,6 +17,7 @@
     <title>
       工时管理|工时记录表|项目成本管理-工时管家是强大易用的项目工时管理系统。工时填报|工时统计|手机移动填报|核算项目成本|企业IPO利器！
     </title>
+    <link href="css/styles.css" rel="stylesheet">
     <link rel="icon" href="image/favicon.png" />
     <link rel="stylesheet" href="css/tongyong.css" />
     <link rel="stylesheet" href="css/reset.css" />
@@ -26,64 +27,17 @@
     <link rel="stylesheet" href="css/bottom.css" />
     <script src="./js/jquery1.42.min.js"></script>
   </head>
-  <body>
-    <!-- <nav class="navbar headers" style="z-index: 9">
-      <div class="navigationBar" id="navigationBar">
-        <div class="navigationBarBack" id="all"></div>
-        <div class="navigationTitle abc" id="abc">
-          <div class="flexs">
-            <div class="inBlock">
-              <a href="./index.html"
-                ><img id="loGo" src="./image/logo.jpg" alt=""
-              /></a>
-            </div>
-            <div class="inBlock">
-              <ul class="navigationUl fonsColorBai aus">
-                <li class="til" id="productHov">产品矩阵</li>
-                <li class="til"><a href="#customer"> 客户评价</a></li>
-                <li class="til"><a href="./mobile.html">手机版</a></li>
-                <li class="til"><a href="#pricing">产品定价</a></li>
-                <li class="til"><a href="./about.html">关于我们</a></li>
-              </ul>
-            </div>
-          </div>
-
-          <div class="flexs">
-            <ul class="navigationUl fonsColorBai auss">
-              <li class="til"><a href="#">立即注册</a></li>
-              <li class="til"><a href="#">后台登录</a></li>
-            </ul>
-          </div>
+  <body data-spy="scroll" data-target=".fixed-top" id="body">
+    <div class="spinner-wrapper">
+        <div class="spinner">
+            <div class="bounce1"></div>
+            <div class="bounce2"></div>
+            <div class="bounce3"></div>
         </div>
-      </div>
-    </nav> -->
-    <nav class="navbar headers" style="z-index: 9;">
-      <div class="navigationBar" id="navigationBar">
-          <div class="navigationBarBack" id="all"></div>
-          <div class="navigationTitle abc" id="abc">
-              <div class="flexs">
-                  <div class="inBlock"><a href="./index.html"><img id="loGo" src="./image/logo.png" alt=""></a></div>
-                  <div class="inBlock">
-                      <ul class="navigationUl fonsColorBai aus">
-                          <li class="til" id="productHov">产品矩阵</li>
-                          <li class="til"><a href="#customer"> 客户评价</a></li>
-                          <li class="til"><a href="./mobile.html">手机版</a></li>
-                          <li class="til"><a href="#pricing">产品定价</a></li>
-                          <li class="til"><a href="./about.html">关于我们</a></li>
-                          <li class="til"><a href="./dynamic.html">企业动态</a></li>
-                      </ul>
-                  </div>
-              </div>
+    </div>
+    <!-- 头部 -->
+    <iframe id="headerIframe" src="./moduleView/header.html" class="iframeClass" onLoad="reinitIframe();"></iframe>
 
-              <div class="flexs">
-                  <ul class="navigationUl fonsColorBai auss">
-                      <!-- <li class="til"><a href="#">立即注册</a></li> -->
-                      <li class="til"><a href="http://workshop.ttkuaiban.com">后台登录</a></li>
-                  </ul>
-              </div>
-          </div>
-      </div>
-  </nav>
     <!-- 咨询客服 -->
     <div class="zhixun" id="zhixun" style="display: none">
       <p>微信扫码咨询</p>
@@ -537,80 +491,12 @@
       </div>
     </div>
     <!-- 底部 -->
-    <svg
-      class="footer-frame footsst"
-      data-name="Layer 2"
-      xmlns="http://www.w3.org/2000/svg"
-      preserveAspectRatio="none"
-      viewBox="0 0 1920 79"
-    >
-      <defs>
-        <style>
-          .cls-2 {
-            fill: #2162E4;
-          }
-        </style>
-      </defs>
-      <title>footer-frame</title>
-      <path
-        class="cls-2"
-        d="M0,72.427C143,12.138,255.5,4.577,328.644,7.943c147.721,6.8,183.881,60.242,320.83,53.737,143-6.793,167.826-68.128,293-60.9,109.095,6.3,115.68,54.364,225.251,57.319,113.58,3.064,138.8-47.711,251.189-41.8,104.012,5.474,109.713,50.4,197.369,46.572,89.549-3.91,124.375-52.563,227.622-50.155A338.646,338.646,0,0,1,1920,23.467V79.75H0V72.427Z"
-        transform="translate(0 -0.188)"
-      />
-    </svg>
-    <div class="indexBottom" style="background: #2162E4;">
-      <div class="indexBottomBox">
-        <div class="indexBottomBox_box">
-          <div class="indexBottomBox_one">
-            <div class="indexBottomBox_one_til">推荐产品</div>
-            <div>工时管家</div>
-            <div>随访管家</div>
-            <div>项目管家</div>
-            <div>客户管家</div>
-          </div>
-          <div class="indexBottomBox_one">
-            <div class="indexBottomBox_one_til">热门链接</div>
-            <div>客户案例</div>
-            <div>手机版</div>
-            <div>产品定价</div>
-            <div>关于我们</div>
-          </div>
-          <div class="indexBottomBox_video">
-            <div class="indexBottomBox_one_til">视频中心</div>
-            <div class="indexBottomBox_video_box" id="videoBox">
-              <img src="./image/videos.png" alt="" />
-            </div>
-          </div>
-          <div class="contactUs">
-            <div class="indexBottomBox_one_til">联系我们</div>
-            <div class="contactUs_box">
-              <div class="contactUs_box_img"><img src="image/code.jpg" /></div>
-              <div class="contactUs_box_tex">扫码添加客服微信</div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="copyright" style="background: #2162E4;">
-      <div class="container">
-        <div class="row">
-          <div class="col-lg-12">
-            <p class="p-small">
-              Copyright©2016
-              南京火石闪信网络科技有限公司&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a
-                href="http://beian.miit.gov.cn"
-                target="_blank"
-                style="color: white"
-                >苏ICP备18064522号-1</a
-              >
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>
+    <iframe id="bottomIframe" src="./moduleView/bottom.html" class="resetIframe resetIframebtn" style="height: 24.2rem"></iframe>
   </body>
+  <script src="js/js/jquery.min.js"></script>
+  <script src="js/js/scripts.js"></script>
   <script src="./js/customer.js"></script>
-  <script src="./js/one.js"></script>
+  <!-- <script src="./js/one.js"></script> -->
   <script src="./js/workshop/workshop.js"></script>
+  <script src="js/iframe.js"></script>
 </html>