From 698e27d9c3eea0b1d0b5f168cf37a43c313d5c66 Mon Sep 17 00:00:00 2001
From: maochaoying <925670706@qq.com>
Date: Sat, 20 May 2023 13:13:03 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E5=B1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                     |   4 +-
 index.html                    |   2 +-
 src/components/AboutUs.vue    |  44 ++++++++++++++
 src/components/HeadLine.vue   |  39 ++++++++++++-
 src/components/Header.vue     |  63 +++++++++++++++++++-
 src/components/HomeScreen.vue |  57 +++++++++++++++++-
 src/main.js                   |   1 +
 src/pages/index.vue           |   6 +-
 src/static/css/reset.css      | 133 ++++++++++++++++++++++++++++++++++++++++++
 9 files changed, 333 insertions(+), 16 deletions(-)
 create mode 100644 src/components/AboutUs.vue
 create mode 100644 src/static/css/reset.css
diff --git a/README.md b/README.md
index f2c04e8..d482fa8 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,4 @@
-# zwsd@192.168.1.3:maochaoying/subsea-side-website.git
-
-# 做专业的水下设备制造商
+# 做铁路相关的设备研发和制造
 
 静态网站，没有后台交互
 
diff --git a/index.html b/index.html
index 85e82af..e505c09 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>产品梦工厂-做专业的水下设备制造商</title>
+    <title>产品梦工厂 - 做铁路相关的设备研发和制造</title>
   </head>
   <body>
     <div id="app"></div>
diff --git a/src/components/AboutUs.vue b/src/components/AboutUs.vue
new file mode 100644
index 0000000..40e37ee
--- /dev/null
+++ b/src/components/AboutUs.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="about_us_container">
+    <HeadLine />
+    <div class="more_btn">
+      <span>了解更多</span>
+      <img :src="RightArrow" alt="right_arrow" class="right_arrow" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import HeadLine from '@/components/HeadLine'
+import RightArrow from '@/static/img/jiantou.png'
+</script>
+
+<style lang="scss" scoped>
+.about_us_container {
+  margin: 0 auto;
+  width: 70vw;
+  padding: 103px 0;
+  .more_btn {
+    width: 173px;
+    height: 43px;
+    background: linear-gradient(90deg, #facc22, #f83600);
+    border-radius: 22px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 13px 30px;
+    font-size: 18px;
+    font-weight: 300;
+    color: #fafafa;
+    box-sizing: border-box;
+
+    margin: 0 auto;
+    margin-top: 36px;
+    margin-bottom: 86px;
+    .right_arrow {
+      width: 19px;
+      height: 10px;
+    }
+  }
+}
+</style>
diff --git a/src/components/HeadLine.vue b/src/components/HeadLine.vue
index 0727713..8764361 100644
--- a/src/components/HeadLine.vue
+++ b/src/components/HeadLine.vue
@@ -1,7 +1,42 @@
 <template>
-  <div>head line</div>
+  <div class="header_line_container">
+    <h2 class="title">关于我们</h2>
+    <p class="line"></p>
+    <p class="desc">
+      专业水下视学设备团队，研发出品,多年的使用经验打磨的好产品，支持定制，想您所想,另外公司有硬件研发团队
+    </p>
+    <p class="desc">
+      软件研发团队、结构研发团队、外观研发团队也能帮您研发设计其他产品。
+    </p>
+  </div>
 </template>
 
 <script setup></script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.header_line_container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  .title {
+    font-size: 30px;
+    font-weight: bold;
+    color: #000000;
+    margin-bottom: 24px;
+  }
+  .line {
+    width: 38px;
+    height: 4px;
+    background: #f95926;
+    border-radius: 2px;
+    margin-bottom: 24px;
+  }
+  .desc {
+    font-size: 18px;
+    font-weight: 300;
+    color: #686868;
+    line-height: 28px;
+  }
+}
+</style>
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 8eaa8f3..0d10958 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -1,7 +1,64 @@
 <template>
-  <div>hader</div>
+  <div class="header_container">
+    <img :src="Logo" alt="logo" class="logo_img" />
+    <ul class="tab_group">
+      <li :class="activeTab == 0 ? 'active' : ''" @click="changeActiveTab(0)">
+        首页
+      </li>
+      <li :class="activeTab == 1 ? 'active' : ''" @click="changeActiveTab(1)">
+        关于我们
+      </li>
+      <li :class="activeTab == 2 ? 'active' : ''" @click="changeActiveTab(2)">
+        产品中心
+      </li>
+      <li :class="activeTab == 3 ? 'active' : ''" @click="changeActiveTab(3)">
+        联系我们
+      </li>
+    </ul>
+  </div>
 </template>
 
-<script setup></script>
+<script setup>
+import { ref } from 'vue'
+import Logo from '@/static/img/2.png'
+const activeTab = ref(0)
+const changeActiveTab = index => {
+  activeTab.value = index
+}
+</script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.header_container {
+  padding: 23px 200px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  .logo_img {
+    width: 216px;
+    height: 44px;
+    cursor: pointer;
+  }
+  .tab_group {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 18px;
+    font-weight: 200;
+    color: #ffffff;
+    & > li {
+      margin-right: 65px;
+      cursor: pointer;
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+    .active {
+      font-weight: 500;
+    }
+  }
+}
+</style>
diff --git a/src/components/HomeScreen.vue b/src/components/HomeScreen.vue
index 835109e..4f0d4ba 100644
--- a/src/components/HomeScreen.vue
+++ b/src/components/HomeScreen.vue
@@ -1,7 +1,58 @@
 <template>
-  <div>home screen</div>
+  <div class="home_screen_container">
+    <Header />
+    <h1 class="main_title">
+      做铁路相关的设备<span class="sign">研发和制造</span>
+    </h1>
+    <div class="to_bottom">
+      <img :src="Arrow" alt="arrow" class="arrow" />
+    </div>
+  </div>
 </template>
 
-<script setup></script>
+<script setup>
+import Header from '@/components/Header'
+import Arrow from '@/static/img/jiantou.png'
+</script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.home_screen_container {
+  position: relative;
+  width: 100vw;
+  height: 100vh;
+  background: url(../static/img/1.png) no-repeat;
+  background-size: 100% 100%;
+  .main_title {
+    font-size: 76px;
+    font-family: Alibaba PuHuiTi;
+    font-weight: bold;
+    color: #f1f1f1;
+    position: absolute;
+    top: 45%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    white-space: nowrap;
+    .sign {
+      color: RGBA(249, 89, 38, 1);
+    }
+  }
+  .to_bottom {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 38px;
+    height: 38px;
+    cursor: pointer;
+    border: 2px solid #ffffff;
+    border-radius: 50%;
+    position: absolute;
+    bottom: 53px;
+    left: 50%;
+    transform: translateX(-50%);
+    .arrow {
+      width: 17px;
+      height: 10px;
+    }
+  }
+}
+</style>
diff --git a/src/main.js b/src/main.js
index d36456a..391ea0e 100644
--- a/src/main.js
+++ b/src/main.js
@@ -2,6 +2,7 @@ import { createApp } from 'vue'
 import router from './router'
 import store from './store'
 import App from './App.vue'
+import './static/css/reset.css'
 import './style.scss'
 
 createApp(App).use(router).use(store).mount('#app')
diff --git a/src/pages/index.vue b/src/pages/index.vue
index 3e7a96a..47907b2 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -1,15 +1,13 @@
 <template>
   <div class="main_container">
-    <Header />
     <HomeSceen />
-    <HeadLine />
+    <AboutUs />
   </div>
 </template>
 
 <script setup>
-import Header from '@/components/Header'
 import HomeSceen from '@/components/HomeScreen'
-import HeadLine from '@/components/HeadLine'
+import AboutUs from '@/components/AboutUs'
 </script>
 
 <style scoped lang="scss">
diff --git a/src/static/css/reset.css b/src/static/css/reset.css
new file mode 100644
index 0000000..e91b184
--- /dev/null
+++ b/src/static/css/reset.css
@@ -0,0 +1,133 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+ol,
+ul {
+  list-style: none;
+}
+blockquote,
+q {
+  quotes: none;
+}
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: '';
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+* {
+  font-family: Source Han Sans CN;
+}
