123

src/views/Index/components/CircuitBoard/index.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="circuit_board_container"></div>
+</template>
+
+<script setup></script>
+
+<style scoped lang="scss">
+.circuit_board_container {
+  width: 100%;
+  height: 100%;
+  background: $common_bg;
+}
+</style>

src/views/Index/components/Culture/Card/index.vue

@@ -0,0 +1,189 @@
+<template>
+  <div :class="getClassName()">
+    <div class="hold_wrap">
+      <div class="top_circle">
+        <div class="circle_wrap">
+          <img :src="Logo" alt="" class="logo" />
+          <div class="new_btn">{{ getTitle() }}</div>
+        </div>
+      </div>
+      <div class="header_card">
+        <div class="btn">{{ getTitle() }}</div>
+      </div>
+      <p class="text">
+        {{ getContent() }}
+      </p>
+      <p class="tip">{{ getTips() }}</p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import Logo from '@/assets/img/culture/zixintubiaoimg.png'
+const props = defineProps({
+  i: String,
+})
+const getClassName = () => {
+  return `culture_card_container bg${props.i}`
+}
+const getTitle = () => {
+  if (props.i == '1') {
+    return '自信'
+  }
+  if (props.i == '2') {
+    return '思维逻辑'
+  }
+  if (props.i == '3') {
+    return '理论结合实践'
+  }
+  if (props.i == '4') {
+    return '文档是我们宝贵的财富'
+  }
+  if (props.i == '5') {
+    return '一个项目代表一个责任'
+  }
+}
+
+const getContent = () => {
+  if (props.i == '1') {
+    return '相信相信的力量，相信自己 能成为逻辑高手，相信自己 能出好方案，相信自己能成 为高手，只要努力一定能做 出好的产品。'
+  }
+  if (props.i == '2') {
+    return '创新的方案，想美事法，探究 各种可能，穷举法，方案要想 彻底，避免想当然自己应该知 道有没有想彻底，方案细节是 经得起推敲的，思维懒惰就是不负责任，任何方案决策都要有依据。'
+  }
+  if (props.i == '3') {
+    return '回归课本计划,探究事物的 理论本质,实践检验理论的 正确性。'
+  }
+  if (props.i == '4') {
+    return '需求文档、研发文档、实验文档、 会议记录、量产文档每个项目的 历史错误总结文档。'
+  }
+  if (props.i == '5') {
+    return '落实绩效考核制度,避免重复错 误,避免低级错误,产品发出去要 睡的着觉。'
+  }
+}
+
+const getTips = () => {
+  if (props.i == '1') {
+    return 'Confident'
+  }
+  if (props.i == '2') {
+    return 'logic'
+  }
+  if (props.i == '3') {
+    return 'pratice'
+  }
+  if (props.i == '4') {
+    return 'file'
+  }
+  if (props.i == '5') {
+    return 'duty'
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.culture_card_container {
+  width: 306px;
+  height: 625px;
+  .hold_wrap {
+    box-sizing: border-box;
+    background: rgba(0, 0, 0, 0.63);
+    height: 100%;
+    padding: 46px 45px 169px 45px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-direction: column;
+    .top_circle {
+      display: none;
+    }
+    .header_card {
+      .btn {
+        border: 2px solid #ffffff;
+        font-size: 18px;
+        font-family: 'SourceHanSans';
+        padding: 10px 16px;
+        font-weight: 400;
+        color: #ffffff;
+        margin-top: 84px;
+      }
+    }
+    .text {
+      font-size: 16px;
+      font-family: 'SourceHanSans';
+      line-height: 32px;
+      font-weight: 300;
+      color: #ffffff;
+    }
+    .tip {
+      font-size: 30px;
+      font-family: 'ZonaPro';
+      font-weight: 400;
+      color: #ffffff;
+    }
+  }
+}
+.culture_card_container:hover {
+  position: relative;
+  overflow: hidden;
+  .hold_wrap {
+    background: rgba(53, 83, 227, 0.63);
+  }
+  .top_circle {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    position: absolute;
+    top: 0;
+    left: -25%;
+    right: 0;
+    width: 150%;
+    height: 195px;
+    border-bottom-left-radius: 50%;
+    border-bottom-right-radius: 50%;
+    background: #b8c5fb;
+    .circle_wrap {
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+      justify-content: space-between;
+      padding: 46px 0;
+      height: 80px;
+      .logo {
+        width: 40px;
+        height: 40px;
+        margin-bottom: 31px;
+      }
+      .new_btn {
+        background: #283fe7;
+        font-size: 20px;
+        font-family: 'SourceHanSans';
+        font-weight: 400;
+        color: #ffffff;
+        padding: 10px 18px;
+      }
+    }
+  }
+}
+.bg1 {
+  background: url(../../../../../assets/img/culture/lilunjieheback.png);
+  background-size: 100% 100%;
+}
+.bg2 {
+  background: url(../../../../../assets/img/culture/lilunjieheback.png);
+  background-size: 100% 100%;
+}
+.bg3 {
+  background: url(../../../../../assets/img/culture/lilunjieheback.png);
+  background-size: 100% 100%;
+}
+.bg4 {
+  background: url(../../../../../assets/img/culture/lilunjieheback.png);
+  background-size: 100% 100%;
+}
+.bg5 {
+  background: url(../../../../../assets/img/culture/lilunjieheback.png);
+  background-size: 100% 100%;
+}
+</style>

src/views/Index/components/Culture/index.vue

@@ -0,0 +1,121 @@
+<template>
+  <div class="culture_container">
+    <img :src="Background" class="bg_img" />
+    <div class="empty"></div>
+    <div class="contract_title">
+      <p class="line"></p>
+      <p class="title">企业文化</p>
+      <p class="detail">
+        有信心、有逻辑、有实践、有责任、有总结这就是我们的财富
+      </p>
+      <img class="img" :src="Back" alt="back" />
+    </div>
+    <div class="card_list">
+      <Card i="1" />
+      <Card i="2" />
+      <Card i="3" />
+      <Card i="4" />
+      <Card i="5" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import Back from '@/assets/img/culture/enterprise.png'
+import Background from '@/assets/img/culture/backimg.png'
+import Card from './Card'
+</script>
+
+<style scoped lang="scss">
+@keyframes rotate {
+  0% {
+    -webkit-transform: rotate(0deg);
+  }
+  25% {
+    -webkit-transform: rotate(90deg);
+  }
+  50% {
+    -webkit-transform: rotate(180deg);
+  }
+  75% {
+    -webkit-transform: rotate(270deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+  }
+}
+.culture_container {
+  width: 100%;
+  height: 100%;
+  background: $common_bg;
+  position: relative;
+  transform-style: preserve-3d;
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+  .bg_img {
+    position: absolute;
+    width: 100vw;
+    height: 100vw;
+    left: 0;
+    top: 0;
+    animation: rotate 60s linear infinite;
+  }
+
+  .empty {
+    min-height: 90px;
+  }
+  .contract_title {
+    z-index: 99;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    font-family: 'SourceHanSans';
+    background-size: 100% 100%;
+    padding: 75px;
+    box-sizing: border-box;
+    position: relative;
+    white-space: nowrap;
+    .line {
+      width: 39px;
+      height: 5px;
+      background: #283fe7;
+      border-radius: 3px;
+      margin-bottom: 12px;
+    }
+    .img {
+      position: absolute;
+      top: 47%;
+      left: 50%;
+      transform: translateX(-50%) translateY(-50%);
+      width: 295px;
+      height: 35px;
+      z-index: 9;
+    }
+    .title {
+      font-size: 30px;
+      font-weight: bold;
+      color: #000000;
+      margin-bottom: 21px;
+      z-index: 10;
+      .blue_font {
+        color: $theme_color;
+      }
+    }
+    .detail {
+      font-size: 18px;
+      font-weight: 300;
+      color: #646a73;
+    }
+  }
+  .card_list {
+    z-index: 99;
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-evenly;
+    padding: 0 137px 113px 137px;
+  }
+}
+</style>

src/views/Index/index.vue

@@ -33,10 +33,10 @@
       <SoftHardwareSummary />
     </swiper-slide>
     <swiper-slide :key="5" :virtualIndex="5">
-      <SoftHardwareSummary />
+      <CircuitBoard />
     </swiper-slide>
     <swiper-slide :key="6" :virtualIndex="6">
-      <SoftHardwarePictureList />
+      <Culture />
     </swiper-slide>
     <swiper-slide :key="7" :virtualIndex="7">
       <SoftHardwareDetail />
@@ -67,6 +67,8 @@ import CaseSummary from '@/views/Index/components/CaseSummary'
 import CasePictureList from '@/views/Index/components/CasePictureList'
 import CaseDetails from '@/views/Index/components/CaseDetails'
 import ContactUs from '@/views/Index/components/ContactUs'
+import CircuitBoard from '@/views/Index/components/CircuitBoard'
+import Culture from '@/views/Index/components/Culture'
 import SoftHardwareSummary from '@/views/Index/components/SoftHardwareSummary'
 import CorporateCulture from '@/views/Index/components/CorporateCulture'
 import SoftHardwarePictureList from '@/views/Index/components/SoftHardwarePictureList'
@@ -82,7 +84,9 @@ export default {
     SwiperSlide,
     ContactUs,
     VideoPlayer,
+    CircuitBoard,
     CorporateCulture,
+    Culture,
     Cooperation,
     CaseDetails,
     HeaderSwiper,