ZKSY-Official-website/public/html/index.css

/* 清除默认样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  padding-top: var(--menu-height);
}

:root {
  /* 设置head高度 */
  --menu-height: 73px;
  /* 设置head部分logo的宽高 */
  --menu-logo-width: 163px;
  --menu-logo-height: 32px;
  /* 设置面包屑的高度 */
  --bread-height: 60px;
}
/* 设置css变量 */
@media (max-width: 1024px) {
  :root {
    --menu-height: 50px;
    --menu-logo-width: 120px;
    --menu-logo-height: 26px;
    --bread-height: 40px;
  }
}

/* 移动端菜单内容 */

/* 头部栏 */
.headMenu {
  position: fixed;
  top: 0;
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  height: var(--menu-height);
  padding: 0 66px;
  background-color: #ffffff;
  .headLogo {
    width: var(--menu-logo-width);
    height: var(--menu-logo-height);
    margin-left: 20px;
  }
  .moveMenu {
    display: none;
    width: var(--menu-logo-height);
    height: var(--menu-logo-height);
  }
  .menu {
    cursor: pointer;
    display: flex;
    transform: translateY(-1px);
    font-size: 16px;
    .cloneImg {
      display: none;
    }
  }
  .menuItem {
    padding: 28px 30px;
  }
}

/* 头部媒介查询 */
@media (max-width: 1024px) {
  .headMenu {
    padding: 0;
    padding-right: 20px;
    .menu {
      display: none;
    }
    .moveMenu {
      display: block;
    }
    .moveMenuContent {
      position: fixed;
      top: 0;
      left: 0;
      display: flex !important;
      width: 100%;
      height: 100%;
      overflow: hidden;
      flex-direction: column;
      background-color: #fff;
      .cloneImg {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 20px;
        font-size: 26px;
      }
      > div {
        border-top: 1px solid #000;
      }
    }
  }
}

/* 面包屑 */
.bread {
  height: var(--bread-height);
  background-color: #f2f2f2;
  .breadcrumb {
    width: 1500px;
    margin: 0 auto;
    color: #818181;
    line-height: var(--bread-height);
  }
  .breadcrumbSpan {
    cursor: pointer;
  }
}
/* 面包屑媒体查询 */
@media (max-width: 1024px) {
  .bread {
    font-size: 14px;
    .breadcrumb {
      width: 100%;
      padding-left: 20px;
    }
    .breadcrumbSpan {
      cursor: pointer;
    }
  }
}

/* 产品详情 */
.productDetail {
  display: flex;
  width: 1500px;
  margin: 60px auto;
  .productImg {
    width: 720px;
    margin: 0 40px;
  }
  .productDetailItem {
    margin: 0 40px;
    flex: 1;
    > h1 {
      font-size: 36px;
      margin-bottom: 26px;
    }
    h2 {
      font-size: 18px;
      margin-bottom: 6px;
    }
    p {
      color: #414347;
      line-height: 25px;
    }
  }
}
/* 产品详情媒体查询 */
@media (max-width: 1024px) {
  .productDetail {
    width: 100%;
    margin: 0;
    margin-bottom: 30px;
    flex-direction: column;
    .productImg {
      width: 95%;
      margin: 20px auto;
    }
    .productDetailItem {
      margin: 0 20px;
      > h1 {
        font-size: 24px;
      }
      h2 {
        font-size: 16px;
      }
      p {
        font-size: 14px;
      }
    }
  }
}

.detailedContent {
  width: 1500px;
  margin: 0 auto;
  .contentSwitch {
    height: 52px;
    background-color: #f2f2f2;
  }
  .liActive {
    color: #ffffff;
    background-color: #00449e;
  }
}
@media (max-width: 1024px) {
  .detailedContent {
    width: 100%;
  }
}

/* 多行省略 */
/* .line_clamp_9 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 9;
} */