123

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

@@ -16,7 +16,7 @@
               :end="20"
               :autoPlay="false"
               :i="start_count"
-              :duration="3000"
+              :duration="duration"
             />
           </span>
           年
@@ -27,7 +27,7 @@
               :start="0"
               :end="500"
               :autoPlay="false"
-              :duration="3000"
+              :duration="duration"
               :i="start_count"
               suffix="+"
             /> </span
@@ -39,7 +39,7 @@
               :start="0"
               :end="1000"
               :autoPlay="false"
-              :duration="3000"
+              :duration="duration"
               :i="start_count"
               suffix="+" /></span
           >项目
@@ -50,7 +50,7 @@
               :start="0"
               :end="1000"
               :autoPlay="false"
-              :duration="3000"
+              :duration="duration"
               :i="start_count"
               suffix="W+" /></span
           >量产
@@ -120,6 +120,7 @@ import { storeToRefs } from 'pinia'
 // Import Swiper styles
 import 'swiper/css'
 const countStore = useCountStore()
+const duration = ref(2000)
 const { start_count } = storeToRefs(countStore)
 const handleScroll = (id, speed) => {
   var oDiv = document.getElementById(id)

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

@@ -0,0 +1,126 @@
+<template>
+  <div :class="getBg()">
+    <div class="dialog_text">
+      {{ title }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  title: String,
+  i: String,
+})
+
+const getBg = () => {
+  if (props.i == '1') {
+    return 'read_card_container bg1'
+  }
+  if (props.i == '2') {
+    return 'read_card_container bg2'
+  }
+  if (props.i == '3') {
+    return 'read_card_container bg3'
+  }
+  if (props.i == '4') {
+    return 'read_card_container bg4'
+  }
+  if (props.i == '5') {
+    return 'read_card_container bg5'
+  }
+  if (props.i == '6') {
+    return 'read_card_container bg6'
+  }
+  if (props.i == '7') {
+    return 'read_card_container bg7'
+  }
+  if (props.i == '8') {
+    return 'read_card_container bg8'
+  }
+  if (props.i == '9') {
+    return 'read_card_container bg9'
+  }
+  if (props.i == '10') {
+    return 'read_card_container bg10'
+  }
+  if (props.i == '11') {
+    return 'read_card_container bg11'
+  }
+  if (props.i == '12') {
+    return 'read_card_container bg12'
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.read_card_container {
+  width: 350px;
+  height: 205px;
+  position: relative;
+  .dialog_text {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.68);
+    font-size: 24px;
+    font-family: 'SourceHanSans';
+    font-weight: 500;
+    color: #ffffff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+.bg1 {
+  background: url(../../../../../assets/img/readwidely/01.png) no-repeat;
+  background-size: 100% 100%;
+}
+.bg2 {
+  background: url(../../../../../assets/img/readwidely/02.png) no-repeat;
+  background-size: 100% 100%;
+}
+.bg3 {
+  background: url(../../../../../assets/img/readwidely/03.png) no-repeat;
+  background-size: 100% 100%;
+}
+.bg4 {
+  background: url(../../../../../assets/img/readwidely/04.png) no-repeat;
+  background-size: 100% 100%;
+}
+.bg5 {
+  background: url(../../../../../assets/img/readwidely/05.png) no-repeat;
+  background-size: 100% 100%;
+}
+.bg6 {
+  background: url(../../../../../assets/img/readwidely/06.png) no-repeat;
+  background-size: 100% 100%;
+}
+.bg7 {
+  background: url(../../../../../assets/img/readwidely/07.png) no-repeat;
+  background-size: 100% 100%;
+}
+.bg8 {
+  background: url(../../../../../assets/img/readwidely/08.png) no-repeat;
+  background-size: 100% 100%;
+}
+.bg9 {
+  background: url(../../../../../assets/img/readwidely/09.png) no-repeat;
+  background-size: 100% 100%;
+}
+.bg10 {
+  background: url(../../../../../assets/img/readwidely/10.png) no-repeat;
+  background-size: 100% 100%;
+}
+.bg11 {
+  background: url(../../../../../assets/img/readwidely/11.png) no-repeat;
+  background-size: 100% 100%;
+}
+.bg12 {
+  background: url(../../../../../assets/img/readwidely/12.png) no-repeat;
+  background-size: 100% 100%;
+}
+</style>

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

@@ -1,7 +1,116 @@
-<template>corporate culture</template>
+<template>
+  <div class="wrap">
+    <div class="read_widely_container" id="read_widely_container">
+      <div class="empty" v-if="showEmpty"></div>
+      <div class="contract_title">
+        <p class="line"></p>
+        <p class="title">我们<span class="blue_font">涉猎广泛</span></p>
+        <p class="detail">我们努力构建一个跨行业研发综合体</p>
+      </div>
+      <div class="content">
+        <div class="card_wrap">
+          <Card title="3C消费电子" i="1" />
+          <Card title="医疗器械" i="2" />
+          <Card title="工业设备" i="3" />
+          <Card title="军工特种装备" i="4" />
+          <Card title="智能硬件" i="5" />
+          <Card title="物联网" i="6" />
+          <Card title="新能源" i="7" />
+          <Card title="消毒设备" i="8" />
+          <Card title="产线自动化" i="9" />
+          <Card title="人工智能" i="10" />
+          <Card title="机器视觉" i="11" />
+          <Card title="实验仪器" i="12" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
 
-<script>
-export default {}
+<script setup>
+import { ref, onMounted } from 'vue'
+import { handleScreenAuto } from '@/common/utils'
+import Card from './Card'
+const showEmpty = ref(false)
+onMounted(() => {
+  handleScreenAuto(showEmpty, '#read_widely_container')
+  window.onresize = handleScreenAuto(showEmpty, '#read_widely_container')
+})
 </script>
 
-<style></style>
+<style lang="scss" scoped>
+.wrap {
+  width: 100%;
+  height: 100%;
+  background: url(../../../../assets/img/readwidely/back1.png) no-repeat;
+  background-size: 100% 100%;
+  .read_widely_container {
+    width: 100%;
+    height: 100%;
+    .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: 56px 0 35px 0;
+      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;
+        font-family: 'SourceHanSansLight';
+      }
+    }
+    .content {
+      padding: 0 164px 55px 164px;
+      box-sizing: border-box;
+      width: 100%;
+      .card_wrap {
+        padding: 41px;
+        background: url(../../../../assets/img/readwidely/back2.png) no-repeat;
+        background-size: 100% 100%;
+        display: grid;
+        justify-content: space-evenly;
+        row-gap: 33px;
+        align-items: center;
+        grid-template-rows: repeat(3, 1fr);
+        grid-template-columns: repeat(4, 1fr);
+      }
+    }
+  }
+}
+</style>