<template>
  <div class="culture-page">
    <div class="joshine-culture">
      <div class="joshine-culture-banner">
        <img class="culture-img" src="../../assets/culture/01.jpg" />
      </div>
      <div class="joshine-mission">
        <img src="../../assets/culture/08.jpg" alt="" class="mission-img" />
      </div>
      <div class="joshine-idea">
        <div class="manage-idea">
          <div class="manage-text">
            <div class="idea">经营理念</div>
            <div>客户至上 以人为本</div>
          </div>
          <img src="~@/assets/culture/02.jpg" />
        </div>
        <div class="idea-content">
          <div class="content-text">
            <div class="idea">管理理念</div>
            <div class="idea-des">
              决策正确、选贤育人、崇尚行动<br />保持创新、协同互助、达成目标
            </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="valuePicTitle">诚信正直</div>
            <div class="valuePicContent">
              严格遵守公司制度，做到言行如一，实事求是；遇到利益诱惑时能坚持原则，以公司利益为先，不凭借职位之便谋取私利
            </div>
            <img src="~@/assets/culture/04.jpg" />
          </div>
          <div class="value-pic">
            <div class="valuePicTitle">开放分享</div>
            <div class="valuePicContent">
              积极探索和学习新的市场、技术和产品知识，以开放的胸怀对待新理念和不同意见，相互尊重，相互信任，相互分享，营造良好的学习氛围和搭建信息共享平台。
            </div>
            <img src="~@/assets/culture/05.jpg" />
          </div>
          <div class="value-pic">
            <div class="valuePicTitle">拥抱变化</div>
            <div class="valuePicContent">
              以积极主动的心态拥抱公司的变革和新的商业模式，学习借鉴成功经验，持续创新，不断挑战自我，改善自我，超越自我。
            </div>
            <img src="~@/assets/culture/06.jpg" />
          </div>
          <div class="value-pic">
            <div class="valuePicTitle">快速行动</div>
            <div class="valuePicContent">
              快速有效整合现有资源，不因害怕承担责任或过度追求完美而延缓行动，确保在规定时限内以较高的质量完成任务，达到更加卓越的业务结果。
            </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,
.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: flex;
}

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

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

.manage-idea .manage-text {
  font-size: 32px;
  color: #fff;
  font-weight: bold;
  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: 32px;
  color: #fff;
  font-weight: bold;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.idea {
  position: relative;
  margin-bottom: 50px;
}

.idea::after {
  content: '';
  display: block;
  width: 60px;
  height: 6px;
  background-color: #fff;
  position: absolute;
  left: 0;
  top: 50px;
}
.joshine-value {
  width: 80%;
  margin: 0 auto;
  padding-top: 48px;
  padding-bottom: 64px;
}
.value-content {
  font-size: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 60px;
}

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

.value-title::after {
  width: 56px;
  height: 2.4px;
  content: '';
  display: block;
  background: #f08917;
  position: absolute;
  bottom: -24px;
}

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

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

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

.value-pic:hover .valuePicTitle {
  top: 100px;
}

.value-pic:hover .valuePicContent {
  top: 120px;
  opacity: 1;
}

.valuePicContent {
  position: absolute;
  text-align: center;
  top: 130px;
  opacity: 0;
  padding: 0 40px;
  font-size: 16px;
  font-family: lantingxh;
  line-height: 24px;
  font-weight: 200;
  color: #fff;
  transition: all 0.8s;
}

.content-text .idea-des {
  font-size: 26px;
  font-weight: 400;
}
</style>
