Merge branch 'master' of http://192.168.11.205:9000/r/~shiwenshuai/productO...

CliveNi

2024-04-07 cd7a885a6d232c83a3b5bf5ce7ea6c4fc753f83b

 src/views/CIM.vue

@@ -46,14 +46,8 @@
        </ul>
      </div> -->
      <div class="contentRight">
        <div
          class="contentRight_l contentRight_l_c"
          :class="item.className"
          v-for="(item, i) in htmlObj"
          :key="i"
          v-html="item.html"
          ref="item"
        ></div>
        <div class="contentRight_l contentRight_l_c" :class="item.className" v-for="(item, i) in htmlObj" :key="i"
          v-html="item.html" ref="item"></div>
      </div>
    </div>
  </div>
@@ -218,18 +212,23 @@
    },
  ];
}
onMounted(() => {});
onBeforeUnmount(() => {});
onMounted(() => {
  window.onbeforeunload = function () {
    window.scrollTo(0, 0)

  }
});
onBeforeUnmount(() => { });
</script>
<style lang="less" scoped>
.banner {
  width: 100%;
  height: 100vh;
  position: relative;
  background: url("../assets/img/index/javier-miranda-Jn2EaLLYZfY-unsplash.png")
    no-repeat center;
    cursor: pointer;
  background: url("../assets/img/index/javier-miranda-Jn2EaLLYZfY-unsplash.png") no-repeat center;
  cursor: pointer;
  background-size: cover;

  .pcimg {
    width: 100%;
    height: 100%;
@@ -238,16 +237,19 @@
    left: 0;
    object-fit: cover;
  }

  .banner_bg {
    width: 100%;
    height: 100%;
    position: relative;
    background: rgba(0, 0, 0, 0.4);
  }

  .title {
    position: absolute;
    top: 39%;
    left: 200px;

    h3 {
      font-size: 60px;
      font-family: WDCHT;
@@ -256,6 +258,7 @@
      margin: 0;
      padding-bottom: 10px;
    }

    p {
      font-size: 30px;
      font-family: MicrosoftYaHei;
@@ -263,14 +266,17 @@
      padding-top: 20px;
    }
  }

  .QRcode {
    position: absolute;
    right: 200px;
    bottom: 6%;

    img {
      width: 164px;
      height: 164px;
    }

    .QRcode_title {
      font-size: 18px;
      color: #fff;
@@ -283,6 +289,7 @@

.title_btn {
  padding-top: 80px;

  .btn {
    width: 160px;
    height: 44px;
@@ -293,15 +300,16 @@
    font-size: 16px;
  }
}

@media (max-width: 1125px) {
  .banner {
    width: 100%;
    height: 360px;
    background: url("../assets/img/index/pic_banner_1beitu.png") no-repeat
      center;
    background: url("../assets/img/index/pic_banner_1beitu.png") no-repeat center;
    background-size: cover;
    cursor: pointer;
  }

  .title_btn {
    padding-top: 10px;
    // .btn {
@@ -310,6 +318,7 @@
    // }
  }
}

.content {
  width: 1530px;
  margin: 0 auto;
@@ -331,10 +340,12 @@
    // -ms-overflow-style: none;
    // overflow: -moz-scrollbars-none;
  }

  .contentLeft {
    position: absolute;
    top: 0px;
    left: 0;

    .left_top {
      width: 200px;
      height: 44px;
@@ -347,6 +358,7 @@
      line-height: 44px;
      margin-bottom: 30px;
    }

    .left_top_title {
      padding-left: 16px;
      font-size: 30px;
@@ -355,8 +367,10 @@
      color: #192236;
      margin-bottom: 40px;
    }

    .left_ul {
      padding-left: 50px;

      li {
        width: 20px;
        height: 20px;
@@ -371,17 +385,21 @@
        margin-bottom: 12px;
        cursor: pointer;
      }

      .highLight {
        background: rgba(25, 34, 54, 1);
        color: #fff;
      }

      li:hover {
        background-color: rgba(25, 34, 54, 1);
        color: #fff;
      }
    }
  }

  .contentRight {

    // width: 100%;
    .contentRight_l {
      // width: 100%;
@@ -395,12 +413,14 @@
        width: calc(300px + 100px);
        position: relative;
        margin-right: 60px;

        h3 {
          font-size: 28px;
          font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
          font-weight: bold;
          color: #192236;
          padding-bottom: 20px;

          span {
            font-size: 26px;
            font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
@@ -409,6 +429,7 @@
            padding-right: 10px;
          }
        }

        p {
          font-size: 24px;
          font-family: MicrosoftYaHei;
@@ -416,6 +437,7 @@
          text-align: justify;
          text-align-last: auto;
        }

        .contentRight_num1 {
          position: absolute;
          width: 189px;
@@ -425,6 +447,7 @@
          background: url("../assets/img/index/1.png") no-repeat center;
          background-size: 100% 100%;
        }

        .contentRight_num3 {
          position: absolute;
          width: 189px;
@@ -435,21 +458,23 @@
          background-size: 100% 100%;
        }
      }

      .contentRight_l_rgiht {
        width: 908px;
        height: 523px;
        background: url("../assets/img/index/sign_waikuang_da.png") no-repeat
          center;
        background: url("../assets/img/index/sign_waikuang_da.png") no-repeat center;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
          width: 880px;
          height: 495px;
        }
      }
    }

    .contentRight_R {
      display: flex;
      // align-items: center;
@@ -458,17 +483,20 @@
      flex-direction: row-reverse;
      // margin-bottom: 180px;
      margin-bottom: 160px;

      .contentRight_l_left {
        width: calc(300px + 100px);
        position: relative;
        margin-left: 60px;
        margin-right: 0;

        h3 {
          font-size: 28px;
          font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
          font-weight: bold;
          color: #192236;
          padding-bottom: 20px;

          span {
            font-size: 26px;
            font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
@@ -477,6 +505,7 @@
            padding-right: 10px;
          }
        }

        p {
          font-size: 24px;
          font-family: MicrosoftYaHei;
@@ -484,6 +513,7 @@
          text-align: justify;
          text-align-last: auto;
        }

        .contentRight_num2 {
          position: absolute;
          width: 189px;
@@ -493,6 +523,7 @@
          background: url("../assets/img/index/2.png") no-repeat center;
          background-size: 100% 100%;
        }

        .contentRight_num4 {
          position: absolute;
          width: 189px;
@@ -503,21 +534,23 @@
          background-size: 100% 100%;
        }
      }

      .contentRight_l_rgiht {
        width: 908px;
        height: 523px;
        background: url("../assets/img/index/sign_waikuang_da.png") no-repeat
          center;
        background: url("../assets/img/index/sign_waikuang_da.png") no-repeat center;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
          width: 880px;
          height: 495px;
        }
      }
    }

    // .contentRight_l:nth-child(2) {
    //   margin-bottom: 0;
    //   padding-bottom: 80px;
@@ -530,6 +563,7 @@
      margin-bottom: 0;
      // padding-bottom: 80px;
    }

    .pcvideo {
      width: 880px;
      height: 495px;
@@ -537,15 +571,18 @@
    }
  }
}

.parent::-webkit-scrollbar {
  width: 0 !important;
}

.content_bottom {
  width: 100%;
  // height: 884px;
  background: rgba(25, 34, 54, 1);
  position: relative;
  padding-bottom: 100px;

  .content_bottom_bg {
    width: 100%;
    position: absolute;
@@ -556,6 +593,7 @@
    left: 0;
    z-index: 0;
  }

  .content_bottom_title {
    position: relative;
    font-size: 36px;
@@ -565,6 +603,7 @@
    text-align: center;
    padding-bottom: 85px;
  }

  .content_bottom_b {
    width: 100%;

@@ -574,14 +613,15 @@
    justify-content: space-around;
    flex-wrap: wrap;
  }

  .content_bottom_b_x {
    width: 536px;
  }

  .content_bottom_b_c_b {
    width: 536px;
    height: 312px;
    background: url("../assets/img/index/sign_waikuang_xiao.png") no-repeat
      center;
    background: url("../assets/img/index/sign_waikuang_xiao.png") no-repeat center;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
@@ -593,12 +633,14 @@
      background: url("../assets/img/index/pic_bottom_1.png") no-repeat center !important;
      background-size: 100% 100%;
    }

    .content_bottom_b_c_b2 {
      width: 512px;
      height: 288px;
      background: url("../assets/img/index/pic_bottom_2.png") no-repeat center !important;
      background-size: 100% 100%;
    }

    .content_bottom_b_c_b3 {
      width: 512px;
      height: 288px;
@@ -606,8 +648,11 @@
      background-size: 100% 100%;
    }
  }

  .content_bottom_b_c_n {
    padding-top: 16px /* 16/192 */;
    padding-top: 16px
      /* 16/192 */
    ;
    font-size: 24px;
    font-family: MicrosoftYaHei;
    color: #ffffff;