<template>
  <div class="culture-page">
    <div class="joshine-culture">
      <div class="joshine-culture-banner">
        <img class="culture-img" src="../../assets/culture/01.jpg" />
        <div class="culture-text">与卓越团队自由驰骋，尽情发挥你的创意</div>
      </div>
      <div class="joshine-mission">
        <img src="../../assets/culture/08.jpg" alt="" class="mission-img" />
        <div class="mission-text">企业使命-让时尚更普惠</div>
      </div>
      <div class="joshine-idea">
        <div class="manage-idea hover-hl">
          <div class="manage-text hover-hl-content">
            <div class="idea">经营理念</div>
            <div class="idea-des">上善若水，德以佑人</div>
          </div>

          <img src="~@/assets/culture/02.jpg" />
          >
        </div>
        <div class="idea-content hover-hl">
          <div class="content-text hover-hl-content">
            <div class="idea">服务理念</div>
            <div class="idea-des">
              <div>传递真诚</div>
              <div>为客户提供优质的产品批发及生产服务</div>
            </div>
          </div>
          <img src="~@/assets/culture/03.jpg" />
        </div>
      </div>
      <div class="joshine-value">
        <div class="value-title">企业价值观</div>
        <div class="value-content">
          <div class="value-pic">
            <div class="value-pic-title">客户至上</div>
            <div class="value-pic-content">
              坚持企业发展的价值以客户的满意来考量，创新客户需求的产品体系，构建客户导向的组织形式和建立导向的组织形式和建立客户导向的发展思维，以高质量的产品和服务达到客户的满意
            </div>
            <img src="~@/assets/culture/04.jpg" />
          </div>
          <div class="value-pic">
            <div class="value-pic-title">诚实守信</div>
            <div class="value-pic-content">
              打造企业诚信品牌，促进企业稳健发展
            </div>
            <img src="~@/assets/culture/05.jpg" />
          </div>
          <div class="value-pic">
            <div class="value-pic-title">团队协作</div>
            <div class="value-pic-content">
              团队意识、积极主动、资源共享、互相成就
            </div>
            <img src="~@/assets/culture/06.jpg" />
          </div>
          <div class="value-pic">
            <div class="value-pic-title">拼搏进取</div>
            <div class="value-pic-content">
              全心投入、专注求精、保持进步、张弛有度，职业是底线，专业即标准
              立足当下，放眼未来
            </div>
            <img src="~@/assets/culture/07.jpg" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'CulturePage',
}
</script>
<style lang="scss" scoped>
.joshine-culture-banner,
.joshine-mission {
  position: relative;
}
.joshine-culture-banner,
.joshine-mission,
.manage-idea,
.idea-content {
  font-size: 0;
}
.mission-img,
.culture-img {
  width: 100%;
}

.culture-img {
  height: 30vw;
  object-fit: cover;
}

.mission-img {
  height: 20vw;
}

.joshine-idea {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.manage-idea {
  position: relative;
  flex: 1;
}

.manage-idea img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.manage-idea .manage-text {
  font-size: 1.66vw;
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.idea-content {
  position: relative;
  flex: 1;
}

.idea-content img {
  width: 100%;
}

.idea-content .content-text {
  font-size: 1.66vw;
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.idea {
  position: relative;
  margin-bottom: 2.6vw;
}

.idea::after {
  content: '';
  display: block;
  width: 3.1vw;
  height: 0.03vw;
  background-color: #fff;
  position: absolute;
  left: 0;
  top: 2.6vw;
}
.joshine-value {
  width: 80%;
  margin: 0 auto;
  padding-top: 2.5vw;
  padding-bottom: 3.33vw;
}
.value-content {
  font-size: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.04vw;
  margin-top: 3.1vw;
}

.value-title {
  font-size: 3.33vw;
  font-weight: 400;
  position: relative;
  color: #111;
}

.value-title::after {
  width: 3.1vw;
  height: 0.13vw;
  content: '';
  display: block;
  background: #f08917;
  position: absolute;
  bottom: -0.13vw;
}

.value-pic {
  position: relative;
  cursor: pointer;
}

.value-pic img {
  width: 100%;
}

.value-pic .value-pic-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.5vw;
  font-weight: 400;
  color: #fff;
  transition: all 0.8s;
}

.value-pic:hover .value-pic-title {
  top: 5.2vw;
}

.value-pic:hover .value-pic-content {
  top: 9vw;
  opacity: 1;
}

.value-pic-content {
  position: absolute;
  text-align: center;
  top: 10vw;
  opacity: 0;
  padding: 0 2.1vw;
  font-size: 0.8vw;
  line-height: 1.3vw;
  font-weight: 200;
  color: #fff;
  transition: all 0.8s;
  width: 100%;
  text-align: center;
}

.manage-text .idea-des,
.content-text .idea-des {
  font-size: 1.4vw;
  font-weight: 400;
}

.culture-text {
  width: 100%;
  font-size: 28px;
  font-weight: 100;
  letter-spacing: 8px;
  position: absolute;
  text-align: center;
  top: 50%;
  left: 50%;
  color: #fff;
  transform: translate(-50%);
}

.mission-text {
  font-size: 26px;
  left: 50%;
  top: 40px;
  position: absolute;
  transform: translateX(-50%);
  color: #fff;
}

@media screen and (max-width: 1000px) {
  .joshine-idea {
    grid-template-columns: repeat(1, 1fr);
    gap: 1.04vw;
    background-color: #eb8820;
    padding: 1.66vw;
  }

  .manage-idea,
  .idea-content {
    &::before {
      display: none;
    }
  }

  .manage-idea .manage-text,
  .idea-content .content-text {
    font-size: 18px;

    .idea-des {
      font-size: 14px;

      & > div {
        white-space: nowrap;
      }
    }

    .idea::after {
      top: 30px;
      width: 2em;
      height: 2px;
    }
  }

  .joshine-value {
    padding-top: 30px;
    padding-bottom: 40px;
  }

  .value-content {
    grid-template-columns: repeat(1, 1fr);
  }

  .value-title {
    font-size: 20px;
  }

  .value-title:after {
    width: 2em !important;
    height: 2px;
    bottom: -4px !important;
  }

  .value-pic-title {
    top: 7.8vw !important;
    font-size: 14px !important;
  }

  .value-pic-content {
    top: 13.8vw !important;
    line-height: 4.8vw;
    opacity: 1 !important;
    font-size: 12px !important;
  }

  .culture-text {
    font-size: 18px;
    width: 100%;
    text-align: center;
  }

  .mission-text {
    font-size: 18px;
    top: 8px;
  }
}
</style>
