first commit

css/brand.css

@@ -0,0 +1,82 @@
+.brand {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+.brand > .banner {
+  display: flex;
+  width: 100%;
+  position: relative;
+}
+.brand > .banner > img {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+}
+.brand > .banner > div {
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  display: flex;
+  justify-content: center;
+  width: 80%;
+}
+.brand > .banner > div > p {
+  font-size: 12px;
+  text-indent: 24px;
+  color: #666666;
+}
+.brand > ul {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+.brand > ul > li {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  padding-top: 20px;
+}
+.brand > ul > li > img {
+  display: flex;
+  width: 18%;
+}
+.brand > ul > li > section {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 10px 0;
+}
+.brand > ul > li > section > h2 {
+  font-size: 15px;
+  color: #111111;
+  font-weight: bolder;
+  margin: 0;
+  padding: 0;
+}
+.brand > ul > li > section > h4 {
+  font-size: 14px;
+  color: #333333;
+  font-weight: bolder;
+  margin: 0;
+  padding: 0;
+}
+.brand > ul > li >p{
+    font-size: 14px;
+    color: #666666;
+    line-height: 22px;
+    width: 88%;
+}
+.footer{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 40px 0 20px 0;
+}
+.footer>span{
+    font-size: 12px;
+    color: #666666;
+}

css/callme.css

@@ -0,0 +1,52 @@
+.callme{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+}
+.callme>.map{
+  width: 92%;
+  height: 150px;
+  background-color: #999999;
+  margin: 15px 0;
+}
+.callme>.call-phone{
+  display: flex;
+  flex-direction: column;
+  width: 92%;
+}
+.callme>.call-phone>p{
+  font-size: 17px;
+  color: #111111;
+  font-weight: bold;
+}
+.callme>.call-phone>div{
+  display: flex;
+  width: 100%;
+  padding-left:10%;
+}
+.callme>.call-phone>div>span{
+  color: #666666;
+}
+.callme>.call-phone>ul{
+  display: flex;
+  flex-direction: column;
+}
+.callme>.call-phone>ul>li{
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  padding: 4px 0;
+}
+.callme>.call-phone>ul>li>p{
+  font-size: 15px;
+  color: #111111;
+  width: 22%;
+  font-weight: bold;
+}
+.callme>.call-phone>ul>li>span{
+  color: #333333;
+}
+
+

css/handheld.css

@@ -0,0 +1,86 @@
+.hanheld {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.hanheld > img {
+  display: flex;
+  width: 100%;
+}
+.pw-list {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+}
+.pw-list > ul {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 94%;
+  padding: 20px 0;
+}
+.pw-list > ul > li {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  width: 100%;
+  padding: 5px 0;
+}
+.pw-list > ul > li > div {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex: 1;
+}
+.pw-list > ul > li > div > img {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 96%;
+}
+.pw-list > ul > li > .content {
+  display: flex;
+  flex-direction: column;
+}
+.pw-list > ul > li > .content > div {
+  width: 96%;
+}
+.pw-list > ul > li > .content > div > section {
+  display: flex;
+  flex-direction: row;
+}
+.pw-list > ul > li > .content > div > .title {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 4px;
+  border-bottom: 2px solid #333333;
+  padding: 4px 0;
+}
+.pw-list > ul > li > .content > div > section > span {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 18px;
+  height: 18px;
+  background-color: #9a0000;
+  color: #ffffff;
+  font-size: 16px;
+  border-radius: 3px;
+  margin-right: 3px;
+}
+.pw-list > ul > li > .content > div > section > h5 {
+  margin: 0;
+  white-space: normal;
+  font-size: 12px;
+  color: #333333;
+  font-weight: bold;
+}
+.pw-list > ul > .active {
+  display: flex;
+  flex-direction: row-reverse;
+}
+.pw-list > ul > li > .content > div > section > p {
+  font-size: 12px;
+  white-space: normal;
+  color: #333333;
+}

css/header.css

@@ -0,0 +1,95 @@
+html,body{
+  width: 100%;
+  height: 100%;
+  font-family: "微软雅黑";
+}
+#app{
+  max-width: 450px!important;
+  min-width: 320px!important;
+  margin: 0 auto;
+}
+header {
+  width: 100%;
+  height: 60px;
+  background-color: #141414;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+header > div {
+  width: 92%;
+  height: 24px;
+  display: flex;
+  justify-content: space-between;
+}
+#app > header > div > h2 {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #ffffff;
+  font-size: 22px;
+}
+header > div > a {
+  display: flex;
+}
+header > div>a.left{
+  display: flex;
+  width: 24px;
+  height: 24px;
+}
+header > div>a.right{
+  display: flex;
+  width: 24px;
+  height: 24px;
+}
+footer {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 90px;
+  background-color: #141414;
+}
+footer > .callme {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  height: 64px;
+  border-bottom: 1px solid #2c2c2c;
+  padding-left: 8%;
+}
+footer > .callme > .telphone {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding-left: 10px;
+}
+footer > .callme > .telphone > p {
+  font-size: 15px;
+  color: #ffffff;
+  margin-bottom: 6px;
+}
+footer > .callme > .telphone > span {
+  font-size: 17px;
+  color: #ffffff;
+}
+footer > .callme > .online {
+  display: flex;
+  height: 100%;
+}
+footer > .callme > .online > img {
+  display: flex;
+  height: 100%;
+}
+footer > .copy {
+  display: flex;
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+}
+footer > .copy > span {
+  font-size: 12px;
+  color: #ffffff;
+}

css/index.css

@@ -0,0 +1,124 @@
+.bananer {
+  display: flex;
+  width: 100%;
+  height: 100%;
+}
+.bananer > img {
+  display: flex;
+  width: 100%;
+  height: 110vw;
+  max-height: 400px;
+}
+.content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  background-color: #ffffff;
+}
+.content > .video {
+  display: flex;
+  width: 80%;
+  padding: 30px 0;
+  display: none;
+}
+.content > div.company-type {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  padding: 10px 0;
+  
+}
+.content > div.company-type>a {
+  display: flex;
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+}
+.content > div.company-type>a > img {
+  display: flex;
+  width: 100px;
+  /* height: 100px; */
+}
+.introduce {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 0 10%;
+}
+.introduce > h2 {
+  font-weight: bold;
+}
+.introduce > p {
+  font-family: "微软雅黑";
+  font-size: 14px;
+  color: #333333;
+}
+.mall {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  padding-bottom: 20px;
+}
+.shopping-mall {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 20px 0;
+}
+.shopping-mall > h5 {
+  font-size: 26px;
+  font-weight: bold;
+}
+.mall > ul {
+  display: flex;
+  flex-direction: row;
+  width: 95%;
+}
+.mall > ul > li {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.mall > ul > li > span {
+  line-height: 46px;
+}
+.goway {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  width: 100%;
+  height: 140px;
+}
+.goway > img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  width: 100%;
+  height: 100%;
+}
+.goway > p {
+  font-size: 21px;
+  font-weight: bold;
+  display: flex;
+  color: #ffffff;
+  margin-bottom: 6px;
+  z-index: 3;
+}
+.goway > span {
+  font-size: 16px;
+  border: 1px solid #ffffff;
+  z-index: 3;
+  color: #ffffff;
+  padding: 6px 13px;
+  border-radius: 6px;
+}

css/join.css

@@ -0,0 +1,37 @@
+.join-us{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+}
+.join-us>div{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+}
+.join-us>div>img{
+    display: flex;
+    width: 100%;
+}
+.join-us>section{
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 42px;
+}
+.join-us>section>p{
+    font-size: 15px;
+    color: #111111;
+    font-weight: bold;
+    font-family: "微软雅黑";
+    margin-right: 3px;
+}
+.join-us>section>span{
+    font-size: 16px;
+    color: #333333;
+    font-family: "微软雅黑";
+}

css/kind.css

@@ -0,0 +1,42 @@
+html,body{
+    width: 100%;
+    height: 100%;
+}
+#app{
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+}
+.list{
+    display: flex;
+    flex: 1;
+    background-color: #141414;
+    justify-content: center;
+}
+.list>ul{
+    display: flex;
+    flex-direction: column;
+    width: 78%;
+}
+.list>ul>li{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-bottom: 1px solid #ffffff;
+    width: 100%;
+    height: 50px;
+}
+.list>ul>li>a{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    font-size: 16px;
+    color: #ffffff;
+
+}
+.list>ul>li>a:hover{
+    color: #48d23a;
+}

css/normalize.css

@@ -0,0 +1,360 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+  margin: 0;
+}
+
+/**
+ * Render the `main` element consistently in IE.
+ */
+
+main {
+  display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+  border-style: none;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+  display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+  display: none;
+}
+html{
+  font-family: "微软雅黑";
+}
+ul,li {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+p{
+  margin: 0;
+}

css/robot.css

@@ -0,0 +1,44 @@
+  .content{
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      position: relative;
+  }
+  .content>img{
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+  }
+  .content>.content-dis{
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    color: #ffffff;
+  }
+  .content>.content-dis>h5{
+      font-size: 16px;
+      margin: 16px 0 0 0;
+      font-family: "微软雅黑";
+      letter-spacing: 1px;
+      font-weight: 600;
+  }
+  .content>.content-dis>h3{
+    font-size: 20px;
+    margin: 6px 0 6px 0;
+    font-family: "微软雅黑";
+    font-weight: 600;
+    letter-spacing: 2px;
+  }
+  .content>.content-dis>a{
+    font-size: 14px;
+    margin: 2px 0 6px 0;
+    font-family: "微软雅黑";
+    color: #ffffff;
+  }

css/search.css

@@ -0,0 +1,70 @@
+html,body{
+    width: 100%;
+    height: 100%;
+}
+.search-content{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    font-family: "微软雅黑";
+}
+.search-content>div{
+    display: flex;
+    justify-content: flex-start;
+    width: 85%;
+}
+.search-content>div>span{
+    font-size: 16px;
+    color: #333333;
+}
+.search-content>.search-box{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px 0 15px 0;
+}
+.search-content>.search-box>input{
+    display: flex;
+    width: 80%;
+    line-height: 34px;
+    border: none;
+    border-radius: 5px;
+    background-color: #e5e5e5;
+    font-size: 15px;
+    padding: 0 5px;
+    color: #999999;
+}
+.search-content>.search-box>input:focus{
+    /* outline: #4cd3df; */
+    outline: none;
+    box-shadow: 0 0 3px #4cd3df;
+    border-radius: 5px;
+    background-color: #ffffff;
+}
+.search-content>.search-box>button{
+    background-color: #ffffff;
+    border: none;
+    border-radius: 5px;
+    width: 46px;
+    height: 30px;
+    font-size: 16px;
+    color: #333333;
+}
+.search-content>.search-box>button:focus{
+    outline: none;
+    border: 1px solid #4cd3df;
+    border-radius: 5px;
+    color: #35ff52;
+}
+.search-content>div>ul{
+    display: flex;
+    flex-wrap: wrap;
+    margin: 8px 0;
+}
+.search-content>div>ul>li{
+    margin: 8px;
+    padding: 8px 6px;
+    background-color: #e5e5e5;
+    border-radius: 5px;
+}

css/server.css

@@ -0,0 +1,74 @@
+.server {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+}
+.server > .content {
+  display: flex;
+  flex-direction: column;
+  width: 92%;
+}
+.server > .content > ul {
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 20px;
+}
+.server > .content > h5 {
+  text-indent: 24px;
+  white-space: normal;
+  font-size: 15px;
+  color: #111111;
+  font-family: "微软雅黑";
+  margin: 20px 0 10px 0;
+  line-height: 20px;
+  font-weight: 600;
+}
+
+h6 {
+  font-size: 16px;
+  color: #111111;
+  font-weight: bold;
+}
+p {
+  font-size: 14px;
+  color: #333333;
+  text-indent: 24px;
+  font-weight: bold;
+}
+.server > .content > ul > li {
+  display: flex;
+  flex-direction: column;
+}
+.server > .content > ul > li > section {
+  display: flex;
+  align-self: center;
+  flex-direction: column;
+  width: 83.5%;
+}
+table {
+  margin: 6px 0;
+}
+table tr th {
+  font-size: 14px;
+  color: #333333;
+  font-weight: bold;
+}
+table tr th,
+td {
+  text-align: center;
+  border: 1px solid #333333;
+  padding: 4px;
+}
+.server > .content > ul > li > section>div{
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+}
+.server > .content > ul > li > section>div>section>p{
+  text-indent: 0;
+  font-weight: normal;
+  white-space: nowrap;
+  font-size: 13px;
+  line-height: 20px;
+}

css/skillcreate.css

@@ -0,0 +1,123 @@
+.banner{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+}
+.banner>img{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+}
+.introduction{
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    margin: 25px 0 20px 0;
+}
+.introduction>.author{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 36%;
+}
+.introduction>.author>img{
+    display: flex;
+    border: 1px solid #999999;
+    width: 64%;
+}
+.introduction>div{
+    display: flex;
+    flex-direction: column;
+}
+.introduction>div>h2{
+    font-size: 16px;
+    margin: 0 0 10px 0;
+    padding: 0;
+    font-weight: 800;
+    color: #111111;
+}
+.introduction>div>h4{
+    font-size: 14px;
+    margin: 0 0 5px 0;
+    padding: 0;
+    font-weight: bold;
+    color: #333333;
+}
+.introduction>div>p{
+    font-size: 14px;
+    margin: 0;
+    padding: 0;
+    font-weight: 500;
+    color: #666666;
+    line-height: 22px;
+}
+.tablist{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+}
+.tablist>ul{
+    display: flex;
+    width: 90%;
+}
+.tablist>ul>li{
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+.tablist>ul>li>div{
+    display: flex;
+    width: 28px;
+    height: 36px;
+    border: 1px solid #666666;
+    color: #666666;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 6px;
+}
+.tablist>ul>li>div>img{
+   display: flex;
+   width: 100%;
+}
+.tablist>ul>li>span{
+    color: #333333;
+    font-weight: bolder;
+    line-height: 22px;
+}
+.infor{
+    display: flex;
+    padding: 30px 0 50px 0;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+}
+.infor>.infor-bg{
+    display: flex;
+    width: 78%;
+    background: url("../img/create_bg.png") center center/80%  no-repeat;
+}
+.infor>.infor-bg>section:first-child{
+    width: 84%;
+}
+.infor>.infor-bg>section:first-child>p{
+    font-size: 14px;
+    color: #666666;
+
+}
+.infor>.infor-bg>section:last-child{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 16%;
+}
+.infor>.infor-bg>section:last-child>h6{
+   font-size: 20px;
+   color: #333333;
+   font-weight: bolder;
+}

index.html

@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+
+<head>
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>水滴科技有限公司</title>
+  <script type="text/javascript" src="./js/vue.min.js"></script>
+  <link rel="stylesheet" href="./css/bootstrap.min.css" />
+  <link rel="stylesheet" href="./css/header.css" />
+  <link rel="stylesheet" href="./css/index.css" />
+  <link rel="stylesheet" href="./css/normalize.css" />
+</head>
+
+<body>
+  <section id="app">
+    <header>
+      <div>
+        <a class="left" href="./page/search.html"><img src="./img/search.png" alt="" /></a>
+        <a href="javascript:;"><img src="./img/title.png" alt="" /></a>
+        <a class="right" href="./page/kind.html"><img src="./img/tools.png" alt="" /></a>
+      </div>
+    </header>
+    <section class="bananer">
+      <img src="./img/bananer.jpg" alt="" />
+    </section>
+    <section class="content">
+      <div class="video">
+        <video src="" controls></video>
+      </div>
+      <div class="company-type">
+        <a href="./page/brand.html">
+            <img src="./img/home-type_02.jpg" alt="" />
+        </a>
+        <a href="./page/skillcreate.html">
+            <img src="./img/home-type_04.jpg" alt="" />
+        </a>
+        
+      </div>
+      <div class="introduce">
+        <h2>关于DIISEA</h2>
+        <p>
+          滴水科技是一家专注于智能清洁领域的科技公司，我们希望以水滴穿石的研发精神与匠心回归初心，让每一位平凡的使用者与生活的每一个繁琐时刻握手言和，感受智能清洁带来的前所未有的生活轻松体验。通过积极探索如何为每一个使用者带来更好的用户体验，从而改变新一代的生活状态。
+        </p>
+      </div>
+      <div class="mall">
+        <section class="shopping-mall">
+          <h5>Shopping Mall</h5>
+          <h5>商城</h5>
+        </section>
+        <ul>
+          <li v-for="(val,key) in mallList" :key="key">
+            <img :src="val.imguri" />
+            <span>{{ val.title }}</span>
+          </li>
+        </ul>
+      </div>
+      <div class="goway">
+        <img src="./img/goway.jpg" alt="" />
+        <p>清洁探索 追求更好未来</p>
+        <span>我们一直在前行</span>
+      </div>
+      <footer>
+        <section class="callme">
+          <div class="telphone">
+            <p>全国统一服务热线：</p>
+            <span>电话：400-812-0098</span>
+          </div>
+          <div class="online">
+            <img src="./img/call_03.jpg" alt="" />
+          </div>
+        </section>
+        <section class="copy">
+          <span>鄂ICP备19009716号 Copyright@2019 滴水科技版权所有</span>
+        </section>
+      </footer>
+    </section>
+  </section>
+</body>
+<script type="text/javascript">
+  new Vue({
+    el: "#app",
+    data() {
+      return {
+        mallList: [
+          {
+            title: "淘宝商城",
+            imguri: "./img/01_03.png"
+          },
+          {
+            title: "苏宁商城",
+            imguri: "./img/01_05.png"
+          },
+          {
+            title: "京东商城",
+            imguri: "./img/01_07.png"
+          },
+          {
+            title: "微商城",
+            imguri: "./img/01_09.png"
+          }
+        ]
+      };
+    },
+    mounted() { },
+    methods: {}
+  });
+</script>
+
+</html>

page/callme.html

@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>联系我们</title>
+    <script type="text/javascript" src="../js/vue.min.js"></script>
+    <link rel="stylesheet" href="../css/bootstrap.min.css" />
+    <link rel="stylesheet" href="../css/header.css" />
+    <link rel="stylesheet" href="../css/normalize.css" />
+    <link rel="stylesheet" href="../css/callme.css" />
+  </head>
+  <body>
+    <section id="app">
+      <header>
+        <div>
+          <a class="left" href="/"><img src="../img/left-point.png" alt=""/></a>
+          <h2>联系我们</h2>
+          <a class="right" href=""><img src="../img/tools.png" alt=""/></a>
+        </div>
+      </header>
+      <section class="callme">
+        <section class="map"></section>
+        <section class="call-phone">
+          <p>联系方式</p>
+          <div>
+            <span
+              >如果您有任何DIISEA技术的疑问，需要帮助与支援，或想登记注册您的DIISEA产品，请与我们DIISEA专家联系。</span
+            >
+          </div>
+          <ul>
+            <li>
+              <p>总机电话:</p>
+              <span>4008120098</span>
+            </li>
+            <li>
+              <p>招聘邮箱:</p>
+              <span>hr@diisea.com</span>
+            </li>
+            <li>
+              <p>办公地址:</p>
+              <span>湖北省国际级葛店经济开发区光谷联合科技城D3-3栋</span>
+            </li>
+          </ul>
+        </section>
+      </section>
+      <!-- <footer>
+        <section class="callme">
+          <div class="telphone">
+            <p>全国统一服务热线：</p>
+            <span>电话：400-812-0098</span>
+          </div>
+          <div class="online">
+            <img src="../img/call_03.jpg" alt="" />
+          </div>
+        </section>
+        <section class="copy">
+          <span>鄂ICP备19009716号 Copyright@2019 滴水科技版权所有</span>
+        </section>
+      </footer> -->
+    </section>
+  </body>
+  <script type="text/javascript">
+    new Vue({
+      el: "#app",
+      data() {
+        return {};
+      },
+      mounted() {},
+      methods: {}
+    });
+  </script>
+</html>

page/handheld.html

@@ -0,0 +1,133 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>手持式扫拖机</title>
+    <script type="text/javascript" src="../js/vue.min.js"></script>
+    <link rel="stylesheet" href="../css/bootstrap.min.css" />
+    <link rel="stylesheet" href="../css/header.css" />
+    <link rel="stylesheet" href="../css/normalize.css" />
+    <link rel="stylesheet" href="../css/handheld.css" />
+  </head>
+  <body>
+    <section id="app">
+      <header>
+        <div>
+          <a class="left" href="/"><img src="../img/search.png" alt=""/></a>
+          <h2>手持式</h2>
+          <a class="right" href="./kind.html"><img src="../img/tools.png" alt=""></a>
+        </div>
+      </header>
+      <section class="hanheld">
+        <img src="../img/handheld.jpg" alt="" />
+      </section>
+      <section class="pw-list">
+        <ul>
+          <li
+            v-for="(val,key) in tableList"
+            :key="key"
+            v-bind:class="{ active: key%2==1 }"
+          >
+            <div><img :src="val.imgUrl" alt="" /></div>
+            <div class="content">
+              <div>
+                <section class="title">
+                  <span>0{{ key + 1 }}</span>
+                  <h5>{{ val.title }}</h5>
+                </section>
+                <section>
+                  <p>{{ val.content }}</p>
+                </section>
+              </div>
+            </div>
+          </li>
+        </ul>
+      </section>
+      <!-- <footer>
+        <section class="callme">
+          <div class="telphone">
+            <p>全国统一服务热线：</p>
+            <span>电话：400-812-0098</span>
+          </div>
+          <div class="online">
+            <img src="../img/call_03.jpg" alt="" />
+          </div>
+        </section>
+        <section class="copy">
+          <span>鄂ICP备19009716号 Copyright@2019 滴水科技版权所有</span>
+        </section>
+      </footer> -->
+    </section>
+  </body>
+  <script type="text/javascript">
+    new Vue({
+      el: "#app",
+      data() {
+        return {
+          tableList: [
+            {
+              id: 1,
+              title: "您还在为机器工作时噪音大打扰到休息而烦心吗？",
+              content:
+                "DIISEA帮助您，声音小于60分贝，再也不用担心家人的睡眠情况，为您和您的家人带来更恬静、舒服的生活环境。",
+              imgUrl: "../img/hand/hand_03.png"
+            },
+            {
+              id: 2,
+              title: "您还在为食物掉落在地上无法轻松处理干净而无奈吗？",
+              content:
+                "DIISEA帮助您，多种污渍一次性清理干净，超强洁力，替您快速解决数重麻烦，节省更多时间。",
+              imgUrl: "../img/hand/hand_09.png"
+            },
+            {
+              id: 3,
+              title: "您还在为细菌的滋生而无助吗?",
+              content:
+                "DIISEA帮助您，从清洁的第一步开始就高效除菌，做到干净的同时还强力抑菌，成为您家居生活的小卫士。",
+              imgUrl: "../img/hand/hand_11.png"
+            },
+            {
+              id: 4,
+              title: "您还在为留下水渍而重复工作吗？",
+              content:
+                "DIISEA帮助您，干湿垃圾同时处理，轻松的将固态和液态自动分离，让您的地面再也不出现难看水渍。",
+              imgUrl: "../img/hand/hand_14.png"
+            },
+            {
+              id: 5,
+              title: "您还在为清洁工具操作麻烦而头疼吗？",
+              content:
+                "DIISEA帮助您，告别复杂程序化，简简单单一键搞定，为您提高清洁智能生活幸福感。",
+              imgUrl: "../img/hand/hand_16.png"
+            },
+            {
+              id: 6,
+              title: "您还在被传统清洁工具的线“扯后腿”吗？",
+              content:
+                "DIISEA帮助您，无线操作，拒绝缠绕，随心洁净，做您生活中最称心的小助手。",
+              imgUrl: "../img/hand/hand_18.png"
+            },
+            {
+              id: 7,
+              title: "您还在为自家主子的掉毛而绝望吗？",
+              content:
+                "DIISEA帮助您，不论何时，高效清理，为您与爱宠打造更干净卫生的相处环境，让您成为最优秀的铲屎官。",
+              imgUrl: "../img/hand/hand_20.png"
+            },
+            {
+              id: 8,
+              title: "您还在为清洁工具外观不够美观而烦恼吗？",
+              content:
+                "DIISEA帮助您，造型别致，精美大气，陪您抢先一步开启清洁智能生态新生活。",
+              imgUrl: "../img/hand/hand_23.png"
+            }
+          ]
+        };
+      },
+      mounted() {},
+      methods: {}
+    });
+  </script>
+</html>

page/join.html

@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>加入我们</title>
+    <script type="text/javascript" src="../js/vue.min.js"></script>
+    <link rel="stylesheet" href="../css/bootstrap.min.css" />
+    <link rel="stylesheet" href="../css/header.css" />
+    <link rel="stylesheet" href="../css/normalize.css" />
+    <link rel="stylesheet" href="../css/join.css" />
+  </head>
+  <body>
+    <section id="app">
+      <header>
+        <div>
+          <a class="left" href="/"><img src="../img/left-point.png" alt=""/></a>
+          <h2>加入我们</h2>
+          <a class="right" href=""><img src="../img/tools.png" alt=""/></a>
+        </div>
+      </header>
+      <section class="join-us">
+        <div><img src="../img/join_us.png" alt=""></div>
+        <section><p>招聘邮箱:</p><span>hr@diisea.com</span></section>
+      </section>
+      <!-- <footer>
+        <section class="callme">
+          <div class="telphone">
+            <p>全国统一服务热线：</p>
+            <span>电话：400-812-0098</span>
+          </div>
+          <div class="online">
+            <img src="../img/call_03.jpg" alt="" />
+          </div>
+        </section>
+        <section class="copy">
+          <span>鄂ICP备19009716号 Copyright@2019 滴水科技版权所有</span>
+        </section>
+      </footer> -->
+    </section>
+  </body>
+  <script type="text/javascript">
+    new Vue({
+      el: "#app",
+      data() {
+        return {};
+      },
+      mounted() {},
+      methods: {}
+    });
+  </script>
+</html>

page/kind.html

@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>水滴科技有限公司</title>
+    <script type="text/javascript" src="../js/vue.min.js"></script>
+    <link rel="stylesheet" href="../css/bootstrap.min.css" />
+    <link rel="stylesheet" href="../css/header.css" />
+    <link rel="stylesheet" href="../css/normalize.css" />
+    <link rel="stylesheet" href="../css/kind.css">
+  </head>
+  <body>
+    <section id="app">
+      <header>
+        <div>
+          <a class="left" href="/"><img src="../img/left-point.png" alt=""/></a>
+          <a href="javascript:;"><img src="../img/title.png" alt=""/></a>
+          <a class="right" href="/"><img src="../img/tools.png" alt=""/></a>
+        </div>
+      </header>
+      <section class="list">
+        <ul>
+          <li>
+            <a href="/">首页</a>
+          </li>
+          <li>
+            <a href="./handheld.html">手持式</a>
+          </li>
+          <li>
+            <a href="./robot.html">机器人</a>
+          </li>
+          <li>
+            <a href="./server.html">服务</a>
+          </li>
+          <li>
+            <a href="./callme.html">合作</a>
+          </li>
+        </ul>
+      </section>
+      <!-- <footer>
+        <section class="callme">
+          <div class="telphone">
+            <p>全国统一服务热线：</p>
+            <span>电话：400-812-0098</span>
+          </div>
+          <div class="online">
+            <img src="../img/call_03.jpg" alt="" />
+          </div>
+        </section>
+        <section class="copy">
+          <span>鄂ICP备19009716号 Copyright@2019 滴水科技版权所有</span>
+        </section>
+      </footer> -->
+    </section>
+  </body>
+  <script type="text/javascript">
+    new Vue({
+      el: "#app",
+      data() {
+        return {};
+      },
+      mounted() {},
+      methods: {}
+    });
+  </script>
+</html>

page/robot.html

@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>机器人</title>
+    <script type="text/javascript" src="../js/vue.min.js"></script>
+    <link rel="stylesheet" href="../css/bootstrap.min.css" />
+    <link rel="stylesheet" href="../css/header.css" />
+    <link rel="stylesheet" href="../css/normalize.css" />
+    <link rel="stylesheet" href="../css/robot.css" />
+  </head>
+  <body>
+    <section id="app">
+      <header>
+        <div>
+          <a class="left" href="/"><img src="../img/search.png" alt=""/></a>
+          <h2>机器人</h2>
+          <a class="right" href=""><img src="../img/tools.png" alt=""/></a>
+        </div>
+      </header>
+      <section class="content">
+        <img src="../img/robot_1.png" alt="">
+        <div class="content-dis">
+          <h5>DIISEA&nbsp;&nbsp;系列</h5>
+          <h3>智能洗地机器人</h3>
+          <a href="">即将预售>></a>
+        </div>
+      </section>
+      <!-- <footer>
+        <section class="callme">
+          <div class="telphone">
+            <p>全国统一服务热线：</p>
+            <span>电话：400-812-0098</span>
+          </div>
+          <div class="online">
+            <img src="../img/call_03.jpg" alt="" />
+          </div>
+        </section>
+        <section class="copy">
+          <span>鄂ICP备19009716号 Copyright@2019 滴水科技版权所有</span>
+        </section>
+      </footer> -->
+    </section>
+  </body>
+  <script type="text/javascript">
+    new Vue({
+      el: "#app",
+      data() {
+        return {};
+      },
+      mounted() {},
+      methods: {}
+    });
+  </script>
+</html>

page/search.html

@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>水滴科技有限公司</title>
+    <script type="text/javascript" src="../js/vue.min.js"></script>
+    <link rel="stylesheet" href="../css/bootstrap.min.css" />
+    <link rel="stylesheet" href="../css/header.css" />
+    <link rel="stylesheet" href="../css/normalize.css" />
+    <link rel="stylesheet" href="../css/search.css">
+  </head>
+  <body>
+    <section id="app">
+      <header>
+        <div>
+          <a class="left" href="/"><img src="../img/left-point.png" alt=""/></a>
+          <a href="javascript:;"><img src="../img/title.png" alt=""/></a>
+          <a class="right" href="javascript:;"></a>
+        </div>
+      </header>
+      <section class="search-content">
+          <div class="search-box">
+            <input type="text" placeholder="请输入搜索内容">
+            <button>搜索</button>
+          </div>
+          <div><span>热搜</span></div>
+          <div>
+            <ul>
+              <li><span>DCF0011G</span></li>
+              <li><span>智能机器人</span></li>
+            </ul>
+          </div>
+      </section>
+      <!-- <footer>
+        <section class="callme">
+          <div class="telphone">
+            <p>全国统一服务热线：</p>
+            <span>电话：400-812-0098</span>
+          </div>
+          <div class="online">
+            <img src="../img/call_03.jpg" alt="" />
+          </div>
+        </section>
+        <section class="copy">
+          <span>鄂ICP备19009716号 Copyright@2019 滴水科技版权所有</span>
+        </section>
+      </footer> -->
+    </section>
+  </body>
+  <script type="text/javascript">
+    new Vue({
+      el: "#app",
+      data() {
+        return {};
+      },
+      mounted() {},
+      methods: {}
+    });
+  </script>
+</html>

page/server.html

@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>服务政策</title>
+    <script type="text/javascript" src="../js/vue.min.js"></script>
+    <link rel="stylesheet" href="../css/bootstrap.min.css" />
+    <link rel="stylesheet" href="../css/header.css" />
+    <link rel="stylesheet" href="../css/normalize.css" />
+    <link rel="stylesheet" href="../css/server.css" />
+  </head>
+  <body>
+    <section id="app">
+      <header>
+        <div>
+          <a class="left" href="/"><img src="../img/left-point.png" alt=""/></a>
+          <h2>服务政策</h2>
+          <a class="right" href=""><img src="../img/tools.png" alt=""/></a>
+        </div>
+      </header>
+      <section class="server">
+        <div class="content">
+          <h5>本商品严格依据《中华人民共和国消费者权益保护法》、《中华人民共和国产品质量法》实行售后服务，服务内容如下：  </h5>
+          <ul>
+            <li>
+              <h6> 一、服务承诺</h6>
+              <p>产品自售出之日起7日内，发生性能故障，消费者可以选择退货、换货或修理；产品自售出之日起15日内，发生性能故障，消费者可以选择换货或修理；产品自售出之日起1年内，正常使用情况下由于产品本身质量问题引起的故障，经滴水科技售后服务中心鉴定后将负责免费维修。</p>
+            </li>
+            <li>
+              <h6>二、报修期限</h6>
+              <p>以消费者购机发票的日期开始计算，扣除因修理占用和无零配件待修的时间（电商按照购买付款时间顺延10天</p>
+               <section>
+                 <table>
+                   <thead>
+                     <tr>
+                       <th>类型</th>
+                       <th>保修内容</th>
+                       <th>保修期限</th>
+                     </tr>
+                   </thead>
+                   <tbody>
+                     <tr>
+                       <td>主机</td>
+                       <td>除易耗品、附件的部件</td>
+                       <td>1年</td>
+                     </tr>
+                     <tr>
+                      <td>电池</td>
+                      <td>充电电池</td>
+                      <td>1年</td>
+                    </tr>
+                   </tbody>
+                 </table>
+                 <div>
+                   <span>注:</span>
+                   <section>
+                     <p>1、易耗品：滚筒、垃圾盒、清洁液、清洁片</p>
+                     <p>2、附件：清洁毛刷、垃圾盒、适配器</p>
+                   </section>
+                 </div>
+               </section>
+            </li>
+            <li>
+              <h6>三、非保修条款</h6>
+              <p>以下情况不属于保修范围，但消费者可付费维修:</p>
+              <p>1、消费者因使用、维护、保管不当等人为原因导致的产品故障或损坏的；</p>
+              <p>2、整机、部件已经超出免费保修期；</p>
+              <p>3、自行或非滴水科技特约维修部拆动造成损坏的；</p>
+              <p> 4、无三包凭证及有效发票或发票复印件或有效购买记录的；</p>
+              <p>5、三包凭证型号与维修产品型号不符或者涂改的；</p>
+              <p>6、因自然灾害、意外因素等不可抗拒力造成损坏的；</p>
+              <p>7、将本产品应用于商业用途；</p>
+            </li>
+            <li>
+              <h6>四、维修方式</h6>
+              <p>1.全国联保，可关注公众号DIISEA获取更多服务详情。</p>  
+              <p>2.邮寄至滴水科技指定维修点，保修期内消费者承担单程物流费，保修期外消费承担双程物流费及维修费。</p>
+            </li>
+          </ul>
+        </div>
+      </section>
+      <!-- <footer>
+        <section class="callme">
+          <div class="telphone">
+            <p>全国统一服务热线：</p>
+            <span>电话：400-812-0098</span>
+          </div>
+          <div class="online">
+            <img src="../img/call_03.jpg" alt="" />
+          </div>
+        </section>
+        <section class="copy">
+          <span>鄂ICP备19009716号 Copyright@2019 滴水科技版权所有</span>
+        </section>
+      </footer> -->
+    </section>
+  </body>
+  <script type="text/javascript">
+    new Vue({
+      el: "#app",
+      data() {
+        return {};
+      },
+      mounted() {},
+      methods: {}
+    });
+  </script>
+</html>

page/skillcreate.html

@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>技术创新</title>
+    <script type="text/javascript" src="../js/vue.min.js"></script>
+    <link rel="stylesheet" href="../css/bootstrap.min.css" />
+    <link rel="stylesheet" href="../css/header.css" />
+    <link rel="stylesheet" href="../css/normalize.css" />
+    <link rel="stylesheet" href="../css/skillcreate.css" />
+  </head>
+  <body>
+    <section id="app">
+      <header>
+        <div>
+          <a class="left" href="/"><img src="../img/left-point.png" alt=""/></a>
+          <h2>技术创新</h2>
+          <a class="right" href=""><img src="../img/tools.png" alt=""/></a>
+        </div>
+      </header>
+      <section class="banner">
+        <img src="../img/create_1.png" alt="" />
+      </section>
+      <section class="introduction">
+        <div class="author"><img src="../img/create_2.png" alt="" /></div>
+        <div>
+          <h2>杜伟爵</h2>
+          <h4>“伟爵清洁技术”发明人</h4>
+          <p>全球专利布局，形成专利壁垒。</p>
+          <p>现已申请国内发明专利13项，实用新型28项</p>
+          <p>计划PCT和中日欧美专利33项。</p>
+          <p>2019年计划国内外专利布局达到100项</p>
+        </div>
+      </section>
+      <section class="tablist">
+        <ul>
+          <li>
+            <div><img src="../img/skills/skill_13.png" alt="" /></div>
+            <span>国内</span>
+            <span>发明专利</span>
+          </li>
+          <li>
+            <div><img src="../img/skills/skill_28.png" alt="" /></div>
+            <span>实用性</span>
+            <span>专利</span>
+          </li>
+          <li>
+            <div><img src="../img/skills/skill_33.png" alt="" /></div>
+            <span>计划PCT</span>
+            <span>中日欧美专利</span>
+          </li>
+          <li>
+            <div><img src="../img/skills/skill_100.png" alt="" /></div>
+            <span>计划</span>
+            <span>布局专利</span>
+          </li>
+        </ul>
+      </section>
+      <section class="infor">
+        <div class="infor-bg">
+          <section>
+            <p>
+              杜老先生在楼下散步，碰到邻居遛狗，这只小狗进食的过程给了杜老先生灵感，小狗用舌头舔起食物来吃进去，地上立刻就干净了，
+              后来，通过不断对小狗进食的观察，带有汤
+              水的食物用舌头舔进去吃到肚子里，碗里就变得干净了，经过消化会变成两种形态排出，
+              技术的思路也豁然明朗，干湿垃圾同步处理，
+              经过机器内部处理以后垃圾会分成2种形态输出又可便于清洁，经过不断研究，过程中
+              他又发觉现有的所有清洁工具在接触垃圾的那一刻，工具已经脏了，脏工具做清洁永远无法到真正的洁净。只“扫”“拖”“洗”
+              必须在“同一个” 清洁模块上“同时”完成，
+              才可能做到真正的洁净。如今这个困扰业界上百年的难题被完美的解决了，为了致敬这位不断挑战自我的残疾老人，我们使用杜老
+              先生的名字来命名此技术，爵伟清洁技术由此而来。
+            </p>
+          </section>
+          <section>
+            <h6>爵</h6>
+            <h6>伟</h6>
+            <h6>技</h6>
+            <h6>术</h6>
+            <h6>由</h6>
+            <h6>来</h6>
+          </section>
+        </div>
+      </section>
+      <!-- <footer>
+        <section class="callme">
+          <div class="telphone">
+            <p>全国统一服务热线：</p>
+            <span>电话：400-812-0098</span>
+          </div>
+          <div class="online">
+            <img src="../img/call_03.jpg" alt="" />
+          </div>
+        </section>
+        <section class="copy">
+          <span>鄂ICP备19009716号 Copyright@2019 滴水科技版权所有</span>
+        </section>
+      </footer> -->
+    </section>
+  </body>
+  <script type="text/javascript">
+    new Vue({
+      el: "#app",
+      data() {
+        return {};
+      },
+      mounted() {},
+      methods: {}
+    });
+  </script>
+</html>