首页mock

2 years ago · cc25762cef
6 changed files with 140 additions and 84 deletions
--- a/src/components/AboutUs.vue
+++ b/src/components/AboutUs.vue
@ -1,15 +1,15 @@
 <template>
  <div class="about_us_container" id="about_us">
    <HeadLine
-      title="关于我们"
-      line1="专业铁路设备研发和制造团队，研发出品,多年的使用经验打磨的好产品，支持定制，想您所想,另外公司有硬件研发团队"
-      line2="软件研发团队、结构研发团队、外观研发团队也能帮您研发设计其他产品。"
+      :title="aboutInfo.title"
+      :line1="aboutInfo.line1"
+      :line2="aboutInfo.line2"
    />
    <div class="more_btn" @click="toAboutPage()" ref="el">
      <span ref="elLeft">了解更多</span>
      <span ref="elRight">→</span>
    </div>
-    <FourCard />
+    <FourCard :fourCard="fourCard" />
  </div>
 </template>

@ -19,6 +19,14 @@ import FourCard from '@/components/FourCard'
 import { useRouter } from 'vue-router'
 import { animateCSS } from '@/constant'
 import { ref, onMounted } from 'vue'
+const props = defineProps({
+  aboutInfo: {
+    type: Object,
+  },
+  fourCard: {
+    type: Object,
+  },
+})
 const router = useRouter()
 const toAboutPage = () => {
  router.push('/about')
--- a/src/components/FourCard.vue
+++ b/src/components/FourCard.vue
@ -37,12 +37,12 @@
          </g>
        </g>
      </svg>
-      <h3 class="card_title">硬件定制</h3>
+      <h3 class="card_title">{{ fourCard.one.title }}</h3>
      <div class="desc">
-        <p class="line">专业定制专用的硬件设备、机械设备</p>
-        <p>高度定制以满足产品需求</p>
+        <p class="line">{{ fourCard.one.line1 }}</p>
+        <p>{{ fourCard.one.line2 }}</p>
      </div>
-      <p class="en">HARDWARE</p>
+      <p class="en">{{ fourCard.one.en }}</p>
    </div>
    <p class="ver_line"></p>
    <div class="card_container">
@ -124,12 +124,12 @@
          </g>
        </g>
      </svg>
-      <h3 class="card_title">软件定制</h3>
+      <h3 class="card_title">{{ fourCard.two.title }}</h3>
      <div class="desc">
-        <p class="line">专业定制驱动程序、应用软件</p>
-        <p>深挖产品需求和特点</p>
+        <p class="line">{{ fourCard.two.line1 }}</p>
+        <p>{{ fourCard.two.line2 }}</p>
      </div>
-      <p class="en">SOFTWARE</p>
+      <p class="en">{{ fourCard.two.en }}</p>
    </div>
    <p class="ver_line"></p>
    <div class="card_container">
@ -208,12 +208,12 @@
          />
        </g>
      </svg>
-      <h3 class="card_title">结构定制</h3>
+      <h3 class="card_title">{{ fourCard.three.title }}</h3>
      <div class="desc">
-        <p class="line">专业定制外部内部结构、线路布置及人机交互</p>
-        <p>为好产品保驾护航</p>
+        <p class="line">{{ fourCard.three.line1 }}</p>
+        <p>{{ fourCard.three.line2 }}</p>
      </div>
-      <p class="en">STRUCTURE</p>
+      <p class="en">{{ fourCard.three.en }}</p>
    </div>
    <p class="ver_line"></p>
    <div class="card_container">
@ -261,17 +261,23 @@
          />
        </g>
      </svg>
-      <h3 class="card_title">外观定制</h3>
+      <h3 class="card_title">{{ fourCard.four.title }}</h3>
      <div class="desc">
-        <p class="line">专业的外形、色彩及品牌设计</p>
-        <p>营造品牌独特的视觉形象</p>
+        <p class="line">{{ fourCard.four.line1 }}</p>
+        <p>{{ fourCard.four.line2 }}</p>
      </div>
-      <p class="en">APPEARANCE</p>
+      <p class="en">{{ fourCard.four.en }}</p>
    </div>
  </div>
 </template>

-<script setup></script>
+<script setup>
+const props = defineProps({
+  fourCard: {
+    type: Object,
+  },
+})
+</script>

 <style lang="scss" scoped>
 .four_card_container {
--- a/src/components/HomeScreen.vue
+++ b/src/components/HomeScreen.vue
@ -1,7 +1,7 @@
 <template>
  <div class="home_screen_container">
    <h1 class="main_title">
-      做铁路相关的设备<span class="sign">研发和制造</span>
+      {{ titleCommon }}<span class="sign">{{ titleColor }}</span>
    </h1>
    <div class="to_bottom" @click="toNextPage()">
      <svg class="arrow" viewBox="0 0 1024 1024">
@ -19,6 +19,14 @@ const toNextPage = () => {
    behavior: 'smooth',
  })
 }
+const props = defineProps({
+  titleCommon: {
+    type: String,
+  },
+  titleColor: {
+    type: String,
+  },
+})
 </script>

 <style lang="scss" scoped>
--- a/src/components/Product.vue
+++ b/src/components/Product.vue
@ -1,68 +1,21 @@
 <template>
  <div class="product_container">
-    <HeadLine title="产品中心" line1="做专业的铁路设备研发和制造" />
+    <HeadLine :title="headInfo.title" :line1="headInfo.line1" />
    <div class="product_card_container">
-      <div class="product_card">
-        <img :src="A1" alt="" class="product_img" />
+      <div class="product_card" v-for="item in dataList" :key="item.id">
+        <img :src="item.imgUrl" alt="" class="product_img" />
        <div class="bottom_tip">
-          <p>动车底部巡检</p>
-          <div class="btn" @click="toProductDetail(1)">
+          <p>{{ item.productName }}</p>
+          <div class="btn" @click="toProductDetail(item.id)">
            <span>查看详情</span>
            <span>→</span>
          </div>
        </div>
        <div class="detail_show_container">
          <div class="content">
-            助力列车底部检测由“人检人修”迈向“机检人修”！动车底部巡检机器人采用机器视觉、图像识别、深度学习等人工智能技术，在车底按程序路线行走，可全自动检测CRH系列、中国标准动车组等所有动车组车型的车底和转向架可视部件，实现动车组相关部位零部件外观故障的识别和报警，收集、反馈的指标值细微至毫米级别，人眼观察不出或者精度不够的点位，机器人的“火眼金睛”都能立刻发现，不会出现漏检漏修，基本覆盖动车组日常一级修的作业内容，实现了动车组一级检修作业由“人检”向“机检”作业模式的升级。
+            {{ item.content }}
          </div>
-          <div class="botton_txt">动车底部巡检</div>
-        </div>
-      </div>
-      <div class="product_card">
-        <img :src="A2" alt="" class="product_img" />
-        <div class="bottom_tip">
-          <p>受电弓压力检测</p>
-          <div class="btn" @click="toProductDetail(2)">
-            <span>查看详情</span> <span>→</span>
-          </div>
-        </div>
-        <div class="detail_show_container">
-          <div class="content">
-            高铁、动车在高速行驶过程中，必须要保持其受流状态处于长期的稳定之中，就是要求受电弓与其接触的线路中间要维持合适的接触压力。接触压力值有严格的设计标准，一般在静态之下为60~90N，如果接触压力过小的话，就会容易造成离线并会产生电弧；而当接触压力过大时，接触线的拾升量也会随之变大，使接触线路局部发生弯曲并导致疲劳损伤，同时让接触线路和碳刷磨损变大，最严重时有可能造成弓网事故。为了消除高铁、动车的安全隐患，发展我国电力接触网技术，必须要开发受电弓的压力检测装置。
-          </div>
-          <div class="botton_txt">受电弓压力检测</div>
-        </div>
-      </div>
-      <div class="product_card">
-        <img :src="A3" alt="" class="product_img" />
-        <div class="bottom_tip">
-          <p>异响检测装置</p>
-          <div class="btn" @click="toProductDetail(3)">
-            <span>查看详情</span> <span>→</span>
-          </div>
-        </div>
-        <div class="detail_show_container">
-          <div class="content">
-            在当今高速发展的工业制造领域，消费者对产品的质量要求越来越高。产品的声学性能已成为衡量其品质的重要指标之一，尤其在汽车、家电、医疗、电子等行业。异音异响检测作为一种关键的声学性能测试技术，正日益受到广泛关注。异音异响检测的核心原理是通过声学传感器（如麦克风）捕捉产品运行过程中产生的声音信号，然后对这些信号进行频谱分析、时域分析等处理，以便识别出异常声音。
-          </div>
-          <div class="botton_txt">异响检测装置</div>
-        </div>
-      </div>
-      <div class="product_card">
-        <img :src="A4" alt="" class="product_img" />
-        <div class="bottom_tip">
-          <p>线性光源发生器</p>
-          <div class="btn" @click="toProductDetail(4)">
-            <span>查看详情</span> <span>→</span>
-          </div>
-        </div>
-        <div class="detail_show_container">
-          <div class="content">
-            线性光源是建筑照明术语，指一个连续的灯或灯具，其发光带的总长度远大于其到照度计算点之间的距离，可视为线光源。
-            线性光源一般是多个LED灯珠排成一行，发出线性的光，形成一条线。可选择365nm、385nm、395nm、405nm波长的不同功
-            率的LED，在出光处加透镜可以调节光斑大小。
-          </div>
-          <div class="botton_txt">线性光源发生器</div>
+          <div class="botton_txt">{{ item.productName }}</div>
        </div>
      </div>
    </div>
@ -71,13 +24,14 @@

 <script setup>
 import HeadLine from '@/components/HeadLine'
-import A1 from '@/static/img/index/a1.png'
-import A2 from '@/static/img/index/a2.png'
-import A3 from '@/static/img/index/a3.png'
-import A4 from '@/static/img/index/a4.png'
 import { useRouter } from 'vue-router'
+import { dataList } from '@/mock'
 const router = useRouter()
-
+const props = defineProps({
+  headInfo: {
+    type: Object,
+  },
+})
 const toProductDetail = index => {
  router.push({
    path: '/product',
--- a/src/mock/index.js
+++ b/src/mock/index.js
@ -0,0 +1,76 @@
+import A1 from '@/static/img/index/a1.png'
+import A2 from '@/static/img/index/a2.png'
+import A3 from '@/static/img/index/a3.png'
+import A4 from '@/static/img/index/a4.png'
+export const dataList = [
+  {
+    id: 1,
+    productName: '动车底部巡检',
+    imgUrl: A1,
+    content:
+      '助力列车底部检测由“人检人修”迈向“机检人修”！动车底部巡检机器人采用机器视觉、图像识别、深度学习等人工智能技术，在车底按程序路线行走，可全自动检测CRH系列、中国标准动车组等所有动车组车型的车底和转向架可视部件，实现动车组相关部位零部件外观故障的识别和报警，收集、反馈的指标值细微至毫米级别，人眼观察不出或者精度不够的点位，机器人的“火眼金睛”都能立刻发现，不会出现漏检漏修，基本覆盖动车组日常一级修的作业内容，实现了动车组一级检修作业由“人检”向“机检”作业模式的升级。',
+  },
+  {
+    id: 2,
+    productName: '受电弓压力检测',
+    imgUrl: A2,
+    content:
+      '高铁、动车在高速行驶过程中，必须要保持其受流状态处于长期的稳定之中，就是要求受电弓与其接触的线路中间要维持合适的接触压力。接触压力值有严格的设计标准，一般在静态之下为60~90N，如果接触压力过小的话，就会容易造成离线并会产生电弧；而当接触压力过大时，接触线的拾升量也会随之变大，使接触线路局部发生弯曲并导致疲劳损伤，同时让接触线路和碳刷磨损变大，最严重时有可能造成弓网事故。为了消除高铁、动车的安全隐患，发展我国电力接触网技术，必须要开发受电弓的压力检测装置。',
+  },
+  {
+    id: 3,
+    productName: '异响检测装置',
+    imgUrl: A3,
+    content:
+      '在当今高速发展的工业制造领域，消费者对产品的质量要求越来越高。产品的声学性能已成为衡量其品质的重要指标之一，尤其在汽车、家电、医疗、电子等行业。异音异响检测作为一种关键的声学性能测试技术，正日益受到广泛关注。异音异响检测的核心原理是通过声学传感器（如麦克风）捕捉产品运行过程中产生的声音信号，然后对这些信号进行频谱分析、时域分析等处理，以便识别出异常声音。',
+  },
+  {
+    id: 4,
+    productName: '线性光源发生器',
+    imgUrl: A4,
+    content:
+      '线性光源是建筑照明术语，指一个连续的灯或灯具，其发光带的总长度远大于其到照度计算点之间的距离，可视为线光源。线性光源一般是多个LED灯珠排成一行，发出线性的光，形成一条线。可选择365nm、385nm、395nm、405nm波长的不同功率的LED，在出光处加透镜可以调节光斑大小。',
+  },
+]
+
+export const mainInfo = {
+  titleCommon: '做铁路相关的设备',
+  titleColor: '研发和制造',
+  aboutUs: {
+    title: '关于我们',
+    line1:
+      '专业铁路设备研发和制造团队，研发出品,多年的使用经验打磨的好产品，支持定制，想您所想,另外公司有硬件研发团队',
+    line2: '软件研发团队、结构研发团队、外观研发团队也能帮您研发设计其他产品。',
+  },
+  fourCard: {
+    one: {
+      title: '硬件定制',
+      line1: '专业定制专用的硬件设备、机械设',
+      line2: '高度定制以满足产品需求',
+      en: 'HARDWARE',
+    },
+    two: {
+      title: '软件定制',
+      line1: '专业定制驱动程序、应用软件',
+      line2: '深挖产品需求和特点',
+      en: 'SOFTWARE',
+    },
+    three: {
+      title: '结构定制',
+      line1: '专业定制外部内部结构、线路布置及人机交互',
+      line2: '为好产品保驾护航',
+      en: 'STRUCTURE',
+    },
+    four: {
+      title: '外观定制',
+      line1: '专业的外形、色彩及品牌设计',
+      line2: '营造品牌独特的视觉形象',
+      en: 'APPEARANCE',
+    },
+  },
+  product: {
+    title: '产品中心',
+    line1: '做专业的铁路设备研发和制造',
+    line2: undefined,
+  },
+}
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@ -1,9 +1,12 @@
 <template>
  <div class="main_container">
    <Header :noFirst="isDetail" />
-    <HomeSceen />
-    <AboutUs />
-    <Product />
+    <HomeSceen
+      :titleCommon="mainInfo.titleCommon"
+      :titleColor="mainInfo.titleColor"
+    />
+    <AboutUs :aboutInfo="mainInfo.aboutUs" :fourCard="mainInfo.fourCard" />
+    <Product :headInfo="mainInfo.product" />
    <Contact />
    <Bottom />
  </div>
@ -16,6 +19,7 @@ import Product from '@/components/Product'
 import Header from '@/components/Header'
 import Contact from '@/components/Contact'
 import Bottom from '@/components/Bottom'
+import { mainInfo } from '@/mock'
 import { onMounted, ref } from 'vue'
 const isDetail = ref(false)
 onMounted(() => {