From 4ef3d1053d37de62ed7c097fb4b74434f6e67f23 Mon Sep 17 00:00:00 2001
From: zuozhengqing <a13193816592@163.com>
Date: 星期六, 23 九月 2023 15:46:17 +0800
Subject: [PATCH] “样式优化,组件拆分”

---
 src/components/goodsCard/goodsCard.vue           |  583 ++++++++++++++++++++
 src/components/bottomRail/bottomRail.vue         |   78 ++
 src/components/goodsCard/goodsInfo/goodsInfo.vue |  156 +++++
 src/components/contactUs/contactUs.vue           |  137 +++++
 src/components/carouselImg/carouselImg.vue       |    2 
 src/components/home/HomePage.vue                 |  647 +++++++++--------------
 6 files changed, 1,181 insertions(+), 422 deletions(-)

diff --git a/src/components/bottomRail/bottomRail.vue b/src/components/bottomRail/bottomRail.vue
new file mode 100644
index 0000000..237b398
--- /dev/null
+++ b/src/components/bottomRail/bottomRail.vue
@@ -0,0 +1,78 @@
+<!-- 搴曟爮 -->
+<template>
+  <div class="box">
+    <ul>
+      <li >鍏充簬鎴戜滑</li>
+      <li >娉曞緥澹版槑</li>
+      <li >闅愮鏀跨瓥</li>
+      <li >寤夋斂涓炬姤</li>
+      <li >鑱旂郴鎴戜滑</li>
+      <li >鍔犲叆鎴戜滑</li>
+    </ul>
+    <p>漏 2009-2019 smartai.com 鐗堟潈鎵�鏈� ICP璇侊細45456566</p>
+    <p>鍏綉瀹夊 436435455鍙�</p>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+
+  },
+  data() {
+    return {
+
+    };
+  },
+  computed: {
+
+  },
+  created() {
+
+  },
+  mounted() {
+
+  },
+  watch: {
+
+  },
+  methods: {
+
+  },
+  components: {
+
+  },
+};
+</script>
+
+<style scoped lang="scss">
+  ul{
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    li{
+      list-style: none;
+      padding: 0 20px;
+      color: #999999;
+      font-size: 14px;
+    }
+    li:hover{
+      cursor: pointer;
+      color: #FA640A;
+    }
+  }
+  p{
+    padding: 0;
+    margin: 0;
+    text-align: center;
+    color: #CCCCCC;
+    cursor: pointer;
+    font-size: 14px;
+  }
+  p:last-child{
+    padding: 0 0 30px 0;
+  }
+
+</style>
diff --git a/src/components/carouselImg/carouselImg.vue b/src/components/carouselImg/carouselImg.vue
index 8f505e0..15ca809 100644
--- a/src/components/carouselImg/carouselImg.vue
+++ b/src/components/carouselImg/carouselImg.vue
@@ -1,4 +1,4 @@
-<!-- 杞挱 -->
+<!-- 杞挱鍥� -->
 <template>
   <div>
     <div class="banner">
diff --git a/src/components/contactUs/contactUs.vue b/src/components/contactUs/contactUs.vue
new file mode 100644
index 0000000..31ad15d
--- /dev/null
+++ b/src/components/contactUs/contactUs.vue
@@ -0,0 +1,137 @@
+<!-- 鑱旂郴鎴戜滑 -->
+<template id="top" >
+  <div class="call_me_wrap" v-show="isShow">
+    <el-popover placement="left">
+      <div class="contact_information">
+        <div
+          class="contact_top"
+          style="display: flex; align-items: center; justify-content: left"
+        >
+          <div class="telephone_left">
+            <i class="el-icon-phone-outline" style="font-size:26px;padding-right:20px"></i>
+          </div>
+          <div class="telephone_right" style="cursor: pointer;">
+            <h4>鍞墠鍜ㄨ鐢佃瘽</h4>
+            <p style="color: #fa640a">010-84155885</p>
+          </div>
+        </div>
+        <div
+          class="contact_top"
+          style="display: flex; align-items: center; justify-content: left;padding-bottom:30px;margin-top:30px"
+        >
+          <div class="telephone_left">
+            <i class="el-icon-edit-outline" style="font-size:26px;padding-right:20px"></i>
+          </div>
+          <div class="telephone_right"  style="cursor: pointer;">
+            <h4>鑱嗗惉 路 寤鸿鍙嶉</h4>
+            <p >璐濇�濈涓嶆槸瀹岀編鐨勶紝鎴戜滑娓存湜鎮ㄧ殑寤鸿</p>
+          </div>
+        </div>
+      </div>
+      <el-button slot="reference" @click="visible = !visible" :aria-hidden="true">
+        <i class="el-icon-chat-square"></i>
+        <p>鑱�</p>
+        <p>绯�</p>
+        <p>鎴�</p>
+        <p>浠�</p>
+      </el-button>
+    </el-popover>
+    <a href="#top">
+      <div class="go_top">
+        <i class="el-icon-arrow-up"></i>
+      </div>
+    </a>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {},
+  data() {
+    return {
+      visible: false,
+      isShow: false,
+    };
+  },
+  computed: {},
+  created() {},
+  mounted() {
+    window.addEventListener("scroll", () => {
+      if (window.scrollY >= window.innerHeight) {
+        this.isShow = true;
+      } else {
+        this.isShow = false;
+      }
+    });
+  },
+  watch: {},
+  methods: {
+    goTop() {
+      window.scrollTo({
+        top: 0,
+        behavior: "smooth",
+      });
+    },
+  },
+  components: {},
+};
+</script>
+
+<style scoped lang="scss">
+* {
+  margin: 0;
+  padding: 0;
+}
+::v-deep .el-button {
+  flex: 1;
+  display: block;
+  height: 140px;
+  width: 40px;
+  padding: 0;
+  white-space: normal;
+  box-sizing: border-box;
+  font-size: 16px;
+  color: #fa640a ;
+  margin: 0 auto;
+  background: #FFFFFF;
+  i {
+    font-size: 20px;
+  }
+  p {
+    padding: 5px;
+  }
+
+  // span{
+  //   display: block;
+  //   text-align: center;
+  //   width: 30px;
+  // }
+}
+::v-deep .el-button:hover{
+  background: #FA640A;
+  color: #fff;
+}
+.call_me_wrap {
+  position: fixed;
+  right: 20px; /* 璁剧疆鍏冪礌璺濈椤堕儴鐨勮窛绂� */
+  bottom: 180px; /* 璁剧疆鍏冪礌璺濈宸︿晶鐨勮窛绂� */
+  width: 40px;
+  height: 200px;
+  .go_top {
+    width: 40px;
+    height: 40px;
+    margin-top: 20px;
+    text-align: center;
+    line-height: 40px;
+    border: 0.5px solid #ccc;
+    border-radius: 5px;
+    box-sizing: border-box;
+    cursor: pointer;
+    i {
+      font-size: 20px;
+      color: #fa640a;
+      font-weight: bold;
+    }
+  }
+}
+</style>
diff --git a/src/components/goodsCard/goodsCard.vue b/src/components/goodsCard/goodsCard.vue
index b951948..785c264 100644
--- a/src/components/goodsCard/goodsCard.vue
+++ b/src/components/goodsCard/goodsCard.vue
@@ -1,40 +1,585 @@
+<!-- 鍟嗗搧鍗＄墖-goodsCard -->
 <template>
   <div>
-    goods card--
+    <template>
+      <div v-for="(item, index) in cardData" :key="index" class="goods_card">
+        <div class="goods_card_left">
+          <h1>{{ item.title }}</h1>
+          <p>{{ item.brief }}</p>
+          <img
+            :src="require(`../../../public/image/home/${item.imgSrc}`)"
+            alt=""
+          />
+        </div>
+        <div v-show="item.goodsRightShow === 1" class="goods_card_right">
+          <h1>{{ item.goodsVersions }}</h1>
+          <h2>
+            {{ item.introduce }}
+          </h2>
+          <div class="button" v-show="item.haveMindTo">
+            <div class="go">绔嬪嵆璐拱</div>
+            <div class="in">绔嬪嵆鍜ㄨ</div>
+          </div>
+          <div class="project">
+            <ul>
+              <div>浜у搧鐗圭偣</div>
+              <div style="display: flex; flex-wrap: wrap; width: 600px">
+                <li v-for="(item1, index1) in item.trait" :key="index1">
+                  {{ item1 }}
+                </li>
+              </div>
+            </ul>
+          </div>
+        </div>
+        <div v-show="item.goodsRightShow === 2" class="goods_card_tab">
+          <div class="pane_top">
+            <el-button @click="tab1">鏅烘収缁堢绯诲垪1</el-button>
+            <el-button @click="tab2">鏅烘収缁堢绯诲垪2</el-button>
+          </div>
+          <!-- 璧伴┈鐏� -->
+          <el-carousel trigger="click" arrow="never" ref="carousel">
+            <el-carousel-item
+              v-for="(pageItem, pageIndex) in item.series"
+              :key="pageIndex"
+            >
+              <div class="pane_box_wrap">
+                <div class="pane_left">
+                  <p>{{ pageItem.goodsVersions }}</p>
+                  <p class="tinge" style="color: #999">
+                    {{ pageItem.introduce }}
+                  </p>
+                  <br />
+                  <el-button>绔嬪嵆鍜ㄨ</el-button>
+                  <el-button>绔嬪嵆璐拱</el-button>
+                  <div></div>
+                  <h4>鐗圭偣</h4>
+                  <ul>
+                    <div style="display: flex; flex-wrap: wrap">
+                      <li
+                        v-for="(item2, index2) in pageItem.trait"
+                        :key="index2"
+                      >
+                        {{ item2 }}
+                      </li>
+                    </div>
+                  </ul>
+                  <h4>閰嶇疆</h4>
+                  <ul>
+                    <li
+                      v-for="(item3, index3) in pageItem.Configure"
+                      :key="index3"
+                    >
+                      {{ item3 }}
+                    </li>
+                  </ul>
+                </div>
+                <div class="pane_right">
+                  <img
+                    :src="
+                      require(`../../../public/image/home/projectImg/${pageItem.imgSrc}`)
+                    "
+                    alt=""
+                  />
+                </div>
+              </div>
+            </el-carousel-item>
+          </el-carousel>
+        </div>
+        <div
+          v-show="item.goodsRightShow === 3"
+          class="goods_card_right goods_ai"
+        >
+          <GoodsInfo :goodsAiInfo="goodsAiInfo"></GoodsInfo>
+        </div>
+        <!-- 绠＄悊涓績 -->
+        <div
+          v-show="item.goodsRightShow === 4"
+          class="goods_card_right management"
+        >
+          <el-card shadow="hover" v-for="(i, v) in manageInfo" :key="v">
+            <div class="box_card_top">
+              <h4>{{ i.classify }}</h4>
+              <p>{{ i.classifyTitle }}</p>
+              <ul>
+                <div style="display: flex; flex-wrap: wrap">
+                  <div>鍔熻兘鎻忚堪</div>
+                  <li v-for="(q, qIndex) in i.features" :key="qIndex">
+                    {{ q }}
+                  </li>
+                </div>
+              </ul>
+            </div>
+            <div class="box_card_bottom">
+              <p class="new_price_box">
+                <span>{{ i.currency }}</span>
+                <span>{{
+                  i.newPrice.substring(0, i.newPrice.indexOf("."))
+                }}</span>
+                <span
+                  >.{{
+                    i.newPrice.substring(i.newPrice.indexOf(".") + 1)
+                  }}</span
+                >
+                <span> /{{ i.dateType }}</span>
+                <span> 璧�</span>
+              </p>
+              <p class="old_price_box">
+                <del>
+                  <span>{{ i.currency }}</span>
+                  <span>{{ i.oldPrice }}</span>
+                </del>
+              </p>
+            </div>
+            <div class="box_card_bottom bottom_show">
+              <el-button>绔嬪嵆璐拱</el-button>
+            </div>
+          </el-card>
+        </div>
+      </div>
+    </template>
   </div>
 </template>
 
 <script>
+import GoodsInfo from "./goodsInfo/goodsInfo.vue";
 export default {
-  props: {
-
-  },
+  // props: {},
+  props: ["cardData"],
   data() {
     return {
-
+      activeName: "first",
+      goodsRightShow: false, //鏄惁灞曠ず鍙充晶淇℃伅鏍忥紝false:tab椤典笉鏄剧ず
+      isBtnClass: false,
+      goodsAiInfo: this.cardData[3].cards, //瀛愮粍浠跺崱鐗囨暟鎹�
+      manageInfo: this.cardData[4].cards,
     };
   },
-  computed: {
-
-  },
-  created() {
-
-  },
-  mounted() {
-
-  },
-  watch: {
-
-  },
+  computed: {},
+  created() {},
+  mounted() {},
+  watch: {},
   methods: {
-
+    tab1() {
+      console.log(this.$refs.carousel[2], "xxx");
+      this.$refs.carousel[2].setActiveItem(0);
+    },
+    tab2() {
+      this.$refs.carousel[2].setActiveItem(1);
+    },
   },
   components: {
-
+    GoodsInfo,
   },
 };
 </script>
 
 <style scoped lang="scss">
+::v-deep .el-tabs__header {
+  height: 40px;
+  margin: 0;
+  text-align: center;
 
+  .el-tabs__item.is-active {
+    color: #ff680d;
+  }
+  .el-tabs__item:hover {
+    color: #ff680d;
+  }
+  .el-tabs__item {
+    color: #222;
+  }
+}
+::v-deep .el-tabs__content {
+  height: 360px;
+  .el-tab-pane {
+    height: 100%;
+    box-sizing: border-box;
+    border-right: 1px solid #e4e7ed;
+    border-bottom: 1px solid #e4e7ed;
+    .pane_left {
+      h4 {
+        margin: 5px 0;
+      }
+      p {
+        margin: 0;
+      }
+    }
+  }
+}
+::v-deep .el-carousel {
+  border-right: 1px solid #e1e1e1;
+  border-bottom: 1px solid #e1e1e1;
+  .el-carousel__indicators {
+    display: none;
+  }
+  .el-carousel__container {
+    height: 360px;
+  }
+  .pane_box_wrap {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .pane_left {
+      width: 60%;
+      box-sizing: border-box;
+      padding: 0px 20px 0px 20px;
+      font-size: 14px;
+      ul {
+        padding: 0;
+        margin: 0;
+        div {
+          margin: 0;
+          padding: 0;
+        }
+        li {
+          color: #999999 !important;
+          font-size: 13px;
+          line-height: 21px;
+          color: rgba(0, 0, 0, 0.9);
+          padding-left: 29px;
+          list-style: none;
+          background-image: url(../../../public/image/home/瀵瑰嬀.png);
+          background-size: 18px 18px;
+          background-repeat: no-repeat;
+          background-position-x: left;
+          background-position-y: top;
+        }
+        li:hover {
+          color: #000 !important;
+          cursor: pointer;
+        }
+      }
+      div {
+        border-bottom: 0.5px solid #ccc;
+        padding: 10px 0;
+      }
+      .el-button {
+        border-radius: 0px;
+        width: 120px;
+        height: 44px;
+        background: #ff680d;
+        color: #fff;
+        font-size: 16px;
+      }
+      .tinge {
+        color: #999;
+        padding: 0;
+        margin: 0;
+      }
+      h4 {
+        color: #333;
+        margin: 5px 0;
+      }
+    }
+    .pane_right {
+      width: 40%;
+      text-align: center;
+      img {
+        width: 300px;
+        // height: 200px;
+      }
+    }
+  }
+}
+::v-deep .el-card__body {
+  padding: 0;
+  height: 400px;
+}
+.goods_card {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  // height: 400px;
+  margin-bottom: 70px;
+  cursor: pointer;
+  .goods_card_left {
+    width: 20%;
+    min-height: 400px;
+    max-height: 700px;
+    height: 100%;
+    box-sizing: border-box;
+    padding: 43px 23px;
+    background: #fa640a;
+    position: relative;
+    left: 0;
+    top: 0;
+    h1 {
+      font-size: 26px;
+      color: #fff;
+      text-align: left;
+    }
+    p {
+      font-size: 14px;
+      color: #fff;
+    }
+    img {
+      width: 69px;
+      height: 12.38px;
+      position: absolute;
+      left: 23px;
+      bottom: 98px;
+    }
+  }
+  .goods_card_right {
+    height: 400px;
+    box-sizing: border-box;
+    flex: 1;
+    box-sizing: border-box;
+    padding-left: 59px;
+    padding-top: 50px;
+    border: 1px solid #e1e1e1;
+    position: relative;
+    left: 0;
+    top: 0;
+    // background-image: url(../../../public/image/home/缂栫粍\ 10@3x.png);
+    // background-size: 520px 280px;
+    // background-repeat: no-repeat;
+    // background-position-x: right;
+    // background-position-y: bottom;
+
+    h1 {
+      font-size: 20px;
+      line-height: 28x;
+      color: rgba(0, 0, 0, 0.9);
+      margin-bottom: 12px;
+    }
+    h2 {
+      font-size: 14px;
+      line-height: 20px;
+      width: 93%;
+      color: #999;
+      font-weight: 500;
+      margin-bottom: 24px;
+    }
+    .button {
+      display: flex;
+      div {
+        width: 120px;
+        height: 44px;
+        background: #ff680d;
+        font-size: 16px;
+        line-height: 44px;
+        color: #fff;
+        text-align: center;
+        border: 2px solid #ff680d;
+        cursor: pointer;
+      }
+      .in {
+        background: #fff;
+        color: #ff680d;
+        margin-left: 16px;
+      }
+    }
+    .project {
+      width: 100%;
+      display: flex;
+      justify-content: left;
+      overflow: hidden;
+      ul {
+        display: flex;
+        flex-wrap: wrap;
+        // margin-top: 55px;
+        padding: 0px;
+        max-width: 500px;
+        div {
+          font-size: 20px;
+          line-height: 28px;
+          color: #999999;
+          margin-bottom: 16px;
+          width: 100%;
+        }
+        li {
+          color: #999999 !important;
+          font-size: 15px;
+          line-height: 21px;
+          color: rgba(0, 0, 0, 0.9);
+          margin-bottom: 19px;
+          padding-left: 29px;
+          padding-right: 5px;
+          list-style: none;
+          background-image: url(../../../public/image/home/瀵瑰嬀.png);
+          background-size: 22px 22px;
+          background-repeat: no-repeat;
+          background-position-x: left;
+          background-position-y: top;
+          // list-style-image: url(../../../public/image/home/瀵瑰嬀.png);
+        }
+        li:hover {
+          color: #000 !important;
+          cursor: pointer;
+        }
+      }
+      .project_img {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        img {
+          width: 300px;
+          height: 180px;
+          padding-right: 70px;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+  .management {
+    width: 100%;
+    box-sizing: border-box;
+    display: flex;
+    padding: 0;
+    border: none;
+    height: 400px;
+    .el-card {
+      width: 33.3%;
+      border-radius: 0;
+      height: 400px;
+      position: relative;
+      .box_card_top {
+        width: 100%;
+        padding: 20px;
+        height: 75%;
+        box-sizing: border-box;
+        h4 {
+          margin: 0;
+          font-weight: normal;
+          font-size: 16px;
+        }
+        p {
+          font-size: 14px;
+          color: #828282;
+          padding: 0;
+          margin: 0;
+        }
+        p:nth-of-type(1) {
+          font-size: 14px;
+          color: #828282;
+          padding: 5px 0;
+        }
+        ul {
+          display: flex;
+          flex-wrap: wrap;
+          margin-top: 15px;
+          padding: 0px;
+          max-width: 500px;
+          div {
+            font-size: 14px;
+            line-height: 28px;
+            color: #999999;
+            width: 100%;
+          }
+          li {
+            color: #999999 !important;
+            font-size: 14px;
+            line-height: 21px;
+            color: rgba(0, 0, 0, 0.9);
+            margin-bottom: 19px;
+            padding-left: 29px;
+            padding-right: 5px;
+            list-style: none;
+            background-image: url(../../../public/image/home/瀵瑰嬀.png);
+            background-size: 18px 18px;
+            background-repeat: no-repeat;
+            background-position-x: left;
+            background-position-y: top;
+            // list-style-image: url(../../../public/image/home/瀵瑰嬀.png);
+          }
+          li:hover {
+            color: #000 !important;
+            cursor: pointer;
+          }
+        }
+      }
+
+      .box_card_bottom {
+        padding: 20px;
+        height: 25%;
+        box-sizing: border-box;
+        p {
+          margin: 0;
+        }
+        .new_price_box {
+          span:nth-of-type(2) {
+            font-size: 24px;
+          }
+          span:nth-of-type(-n + 3) {
+            color: #ff6a00;
+          }
+        }
+        .old_price_box {
+          color: #d6d6d6;
+        }
+      }
+      .bottom_show {
+        padding: 0;
+        width: 100%;
+        height: 0;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        // display: none;
+        transition: height 0.3s ease-in-out; 
+        .el-button {
+          display: block;
+          width: 100%;
+          height: 100px;
+          height: 0;
+          background: #fa640a;
+          font-size: 18px;
+          color: #fff;
+        }
+      }
+    }
+    .el-card:hover {
+      .box_card_bottom {
+        height: 100px;
+        display: none;
+        .el-button{
+          height: 100%;
+        }
+      }
+      .bottom_show {
+        display: block;
+      }
+    }
+  }
+  .goods_card_tab {
+    height: 100%;
+    box-sizing: border-box;
+    flex: 1;
+    padding: 0;
+    .pane_top {
+      width: 100%;
+      box-sizing: border-box;
+      // border-right: 1px solid #E4E7ED ;
+      border-bottom: 1px solid #e4e7ed;
+      .el-button {
+        border-bottom: none;
+        border-radius: 0;
+      }
+      .el-button:hover {
+        color: #fa640a;
+      }
+    }
+    .el-tabs__content {
+      height: 200px !important;
+      .pane_box {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        // height: 100%;
+        overflow: hidden;
+      }
+    }
+  }
+}
+.goods_card:nth-of-type(4) .goods_card_left {
+  height: 600px;
+}
+.goods_card:nth-of-type(4) .goods_card_right {
+  height: 600px;
+  border: none;
+  box-sizing: border-box;
+  padding: 0;
+}
 </style>
diff --git a/src/components/goodsCard/goodsInfo/goodsInfo.vue b/src/components/goodsCard/goodsInfo/goodsInfo.vue
new file mode 100644
index 0000000..1998b09
--- /dev/null
+++ b/src/components/goodsCard/goodsInfo/goodsInfo.vue
@@ -0,0 +1,156 @@
+<template>
+  <div>
+    <div class="box_card_wrap">
+      <div class="box_card" v-for="(item, index) in goodsAiInfo" :key="index">
+        <div class="box_card_top">
+          <h4>{{ item.classify }}</h4>
+          <h3>{{ item.classifyTitle }}</h3>
+          <p>
+            {{ item.brief }}
+          </p>
+        </div>
+
+        <div class="box_card_bottom">
+          <p class="new_price_box">
+            <span>{{ item.currency }}</span>
+            <span>{{
+              item.newPrice.substring(0, item.newPrice.indexOf("."))
+            }}</span>
+            <span
+              >.{{
+                item.newPrice.substring(item.newPrice.indexOf(".") + 1)
+              }}</span
+            >
+            <span> /3</span>
+            <span>骞�</span>
+          </p>
+          <p class="old_price_box">
+            <del><span>锟�</span><span>1198.00</span></del>
+          </p>
+        </div>
+        <div class="box_card_bottom btnShow">
+          <el-button>绔嬪嵆璐拱</el-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["goodsAiInfo"],
+  data() {
+    return {};
+  },
+  computed: {},
+  created() {},
+  mounted() {},
+  watch: {},
+  methods: {},
+  components: {},
+};
+</script>
+
+<style scoped lang="scss">
+* {
+  margin: 0;
+  padding: 0;
+}
+.box_card_wrap {
+  height: 600px;
+  display: flex;
+  flex-wrap: wrap;
+  .box_card {
+    width: 33.3%;
+    height: 50%;
+    box-sizing: border-box;
+    border: 0.5px solid #e4e7ed;
+    margin: 0;
+    padding: 0;
+    border-radius: 0;
+    position: relative;
+    overflow: hidden;
+    .box_card_top {
+      width: 100%;
+      padding: 20px;
+      height: 75%;
+      box-sizing: border-box;
+      h4 {
+        width: 75px;
+        height: 25px;
+        line-height: 25px;
+        background: #f9f9f9;
+        text-align: center;
+        border-radius: 5px;
+        font-size: 14px;
+        font-weight: normal;
+        color: #999999;
+      }
+      h4:hover {
+        background: #f2f2f2;
+      }
+      h3 {
+        color: #333333;
+        font-weight: normal;
+        font-size: 16px;
+        padding: 20px 0;
+      }
+      p {
+        font-size: 14px;
+        color: #999999;
+      }
+    }
+    .box_card_bottom {
+      padding: 0 20px;
+      height: 25%;
+      box-sizing: border-box;
+      .new_price_box {
+        span:nth-of-type(2) {
+          font-size: 24px;
+        }
+        span:nth-of-type(-n + 3) {
+          color: #ff6a00;
+        }
+      }
+      .old_price_box {
+        color: #d6d6d6;
+      }
+    }
+    .btnShow {
+      padding: 0;
+      width: 100%;
+      height: 0;
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      // display: none;
+      transition: height 0.3s ease-in-out;
+      .el-button {
+        display: block;
+        width: 100%;
+        // height: 100px !important;
+
+        height: 0;
+        background: #fa640a;
+        font-size: 18px;
+        color: #fff;
+      }
+    }
+  }
+  .box_card:hover {
+      .box_card_bottom {
+        height: 100px;
+        display: none;
+      }
+      .btnShow {
+        display: block !important;
+        .el-button{
+          height: 100%;
+        }
+      }
+    }
+  .box_card:nth-of-type(n + 4) {
+    border-top: none;
+  }
+}
+</style>
diff --git a/src/components/home/HomePage.vue b/src/components/home/HomePage.vue
index 3c7a5d8..072b68d 100644
--- a/src/components/home/HomePage.vue
+++ b/src/components/home/HomePage.vue
@@ -17,7 +17,8 @@
         </div>
       </div>
     </div>
-    <div>
+    <!-- 杞挱 -->
+    <div style="clear: both">
       <CarouselImg></CarouselImg>
     </div>
     <!-- <div class="banner">
@@ -37,6 +38,7 @@
         </ul>
       </div>
     </div> -->
+    <!-- 鍞墠鍜ㄨ -->
     <div class="third">
       <div class="center">
         <div>
@@ -65,6 +67,7 @@
         </div>
       </div>
     </div>
+    <!-- 涓烘偍鎺ㄨ崘 -->
     <div class="forth">
       <div class="center">
         <h1>涓烘偍鎺ㄨ崘</h1>
@@ -181,6 +184,7 @@
         </div>
       </div>
     </div>
+    <!-- 鐑棬浜у搧 -->
     <div class="fif">
       <div class="center">
         <h1>鐑棬浜у搧</h1>
@@ -225,406 +229,236 @@
             </div>
           </div>
         </div>
-          <GoodsCard></GoodsCard>
-        <div class="pic">
-          <div class="left">
-            <!-- <h1>SmartAI</h1> -->
-            <h1>CRM瀹㈡埛绠＄悊绯荤粺</h1>
-            <h2>璧嬭兘鍚勮涓氬疄鐜颁竴浣撳寲鏁板瓧鍖栬浆鍨�</h2>
-            <img src="../../../public/image/home/绠ご.png" alt="" />
-          </div>
-          <div class="right">
-            <h1>CRM瀹㈡埛绠＄悊绯荤粺V1.0</h1>
-            <h2>
-              绯荤粺浠ユ暟瀛楀唴瀹逛负鍩虹锛屼互鏁版嵁椹卞姩涓烘牳蹇冿紝閫氳繃瀹炵幇鍏ㄥ満鏅拰鏁版嵁浜掗�氾紝涓虹嚎涓婄粡钀ョ鐞嗐�佸鎴锋湇鍔￠渶姹傛彁渚涗竴绔欏紡鎶�鏈湇鍔°�傚姪鍔涗紒涓氬畬鎴愭暟瀛楀寲绠＄悊鍗囩骇锛岃鑼冨寲绠＄悊娴佺▼銆傛牴鎹郴缁熷瀹㈡埛淇℃伅鐨勬暣鐞嗙粺绛逛笌鍒嗛厤锛屼粠鑰屾彁楂橀攢鍞晥鐜囧噺灏戜汉鍔涗笂鐨勬秷鑰楋紝闃叉鍛樺伐绂昏亴瀵艰嚧瀹㈡埛娴佸け锛屼績杩涘洟闃熷悎浣滐紝杈惧埌浼佷笟闄嶆湰澧炴晥鐨勭洰鐨勩��
-            </h2>
-            <div class="button">
-              <!-- <div class="go">绔嬪嵆璐拱</div> -->
-              <!-- <div class="in">绔嬪嵆鍜ㄨ</div> -->
-            </div>
-            <div class="project">
-              <ul>
-                <div>浜у搧鐗圭偣</div>
-                <div style="display: flex; flex-wrap: wrap; width: 600px">
-                  <li>甯傚満钀ラ攢鑷姩鍖�</li>
-                  <li>閿�鍞繃绋嬭嚜鍔ㄥ寲</li>
-                  <li>瀹㈡埛鏈嶅姟鑷姩鍖�</li>
-                </div>
-              </ul>
-            </div>
-          </div>
-        </div>
-        <div class="pic">
-          <div class="left">
-            <!-- <h1>SmartAI</h1> -->
-            <h1>WMS鏅鸿兘浠撳偍绠＄悊绯荤粺</h1>
-            <h2>婊¤冻涓嶅悓琛屼笟涓嶅悓缁忚惀妯″紡鐨勬櫤鑳戒粨鍌ㄧ鐞嗙郴缁�</h2>
-            <img src="../../../public/image/home/绠ご.png" alt="" />
-          </div>
-          <div class="right">
-            <h1>WMS绯荤粺V1.0</h1>
-            <h2>
-              閫氳繃wms浠撳簱绠＄悊绯荤粺锛屽彲浠ユ湁鏁堝鐞嗙幇浠ｇ墿娴佷俊鎭紝鍦ㄥ緢澶х▼搴︿笂涓虹鐞嗗眰鍐崇瓥鎻愪緵浜嗘湁鏁堟敮鎸侊紝鍏跺姛鑳界壒鐐瑰簲娑电洊鏀寔澶氫粨搴撱�佸璐т富锛屽涓氬姟妯″紡锛屽彲閰嶇疆鐨勭伒娲荤瓥鐣ュ拰娴佺▼澧炲�兼湇鍔★紝绯荤粺浠ヤ骇鍝佷俊鎭拰璁㈠崟涓氬姟浣滀负鏁版嵁娴佸姩鐨勫熀纭�锛屽苟涓旇瀵逛粨搴撹繘琛屾櫤鑳藉垎鏋愪笌鐩戞帶銆佺畝娲併�佺洿绠°�佸彲瑙嗗寲锛屽苟璺冲嚭浼犵粺浠撳簱娴佺▼妗嗘灦锛屾寔缁彂鍔涜惤瀹炴暟瀛楀寲杞瀷锛屾槸浼佷笟瀵逛粨搴撴櫤鑳藉寲鍙橀潻鐨勬牳蹇冮噸鐐广��
-            </h2>
-            <div class="button">
-              <!-- <div class="go">绔嬪嵆璐拱</div> -->
-              <!-- <div class="in">绔嬪嵆鍜ㄨ</div> -->
-            </div>
-            <div class="project">
-              <ul>
-                <div>浜у搧鐗圭偣</div>
-                <div style="display: flex; flex-wrap: wrap; width: 400px">
-                  <li>澶氬眰娆＄鐞�</li>
-                  <li>涓氬姟闃插憜鏈哄埗</li>
-                  <li>璐у搧缁嗗寲绠＄悊</li>
-                  <li>鍑哄叆搴撶幆鑺傛帶鍒� </li>
-                  <li>鍒嗘壒绠＄悊璋冨害涓氬姟</li>
-                </div>
-              </ul>
-            </div>
-          </div>
-        </div>
-        <div class="pic">
-          <div class="left">
-            <!-- <h1>SmartAI</h1> -->
-            <h1>VisionLink锛堟櫤鑳界粓绔級</h1>
-            <h2>鏅鸿兘缁堢閫氳繃AI瑙嗛妫�娴嬮噰闆嗘暟鎹強PLC閲囬泦鐢熶骇鏁版嵁銆傛櫤鑳界粓绔噰闆嗙殑瀹炴椂鐢熶骇鏁版嵁浼犻�掔粰绠楁硶锛岀畻娉曠粨鍚堟暟鎹笉鏂皟鏁翠紭鍖栫敓浜т换鍔″強鍒嗛厤绛栫暐銆�</h2>
-            <img src="../../../public/image/home/绠ご.png" alt="" />
-          </div>
-          <div class="right" style="padding: 0; border: none;" >
-            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
-            <el-tab-pane label="鏅烘収缁堢绯诲垪1" name="first" class="pane_box">
-              <div class="pane_left">
-                <p>VisionLink鏅鸿兘缁堢</p>
-                <p class="tinge" style="color: #999;">閫氳繃鍦ㄦ瘡涓伐搴忕殑璁惧鎴栨満鍙板悎閫備綅缃紝瀹夎瑙︽懜鏅鸿兘缁堢璁惧锛岀敤浜庡皢鎺掍骇浠诲姟涓嬪彂鑷虫瘡涓�涓櫤鑳界粓绔睆骞曘��</p>
-                <br>
-                <el-button>绔嬪嵆鍜ㄨ</el-button>
-                <el-button>绔嬪嵆璐拱</el-button>
-                <div></div>
-                <h4>鐗圭偣</h4>
-                <p class="tinge">寤衡酱璁惧鍙拌处銆佽祫浜ф。妗堬紝鎺屾彙璁惧鏁翠釜鍛ㄦ湡鐨勫姩鎬佷俊鎭�</p>
-                <p class="tinge">鏀堕泦璁惧浣库饯杩囩▼涓殑鍚勭淇℃伅鏁版嵁锛屸緝鍔ㄦ眹鎬昏繍绠楋紝鐢熸垚鍚勭被涓撲笟鐨勮澶囩鐞嗘姤琛�</p>
-                <h4>閰嶇疆</h4>
-                <p class="tinge">鑻辩壒灏� 蹇楀己 Silver 4114 10鏍稿鐞嗗櫒 x 2</p>
-                <p class="tinge">64GB 鍐呭瓨 (16GB x 4) + 480GB SSD 瀛樺偍 + 8TB HDD 瀛樺偍</p>
-                <p class="tinge">鍗冨厗 LAN x 4</p>
-              </div>
-              <div class="pane_right">
-                <img src="../../../public/image/home/projectImg/projectImg3.png"  alt="">
-              </div>
-            
-            </el-tab-pane>
-            <el-tab-pane label="鏅烘収缁堢绯诲垪1" name="second" class="pane_box">
-              <div class="pane_left">
-                <p>LE-V-S003 楂樻�ц兘杈圭紭璁＄畻涓绘満</p>
-                <p class="tinge" style="color: #999;">涓撲负楂樻�ц兘瑙嗛搴旂敤鎵撻�狅紝寮烘倣鐨勫弻蹇楀己澶勭悊鍣紝杞绘澗搴斿楂樼畻鍔涘簲鐢ㄥ満鏅殑闇�姹傘��</p>
-                <br>
-                <el-button>绔嬪嵆鍜ㄨ</el-button>
-                <el-button>绔嬪嵆璐拱</el-button>
-                <div></div>
-                <h4>鐗圭偣</h4>
-                <p class="tinge"> 鎼浇涓ら楂樻�ц兘蹇楀己澶勭悊鍣紝鍙彁渚涢珮杈�64T鐨勫嚩鐚涚畻鍔�</p>
-                <p class="tinge">Server绯诲垪锛屽叿澶囧崟鍙颁笌闆嗙兢鏈嶅姟</p>
-                <p class="tinge">鏀寔绠楀姏铏氭嫙鍖栫鎺э紝楂樼ǔ瀹氭�у崟鏈虹儹澶�</p>
-                <h4>閰嶇疆</h4>
-                <p class="tinge">鑻辩壒灏� 蹇楀己 Silver 4114 10鏍稿鐞嗗櫒 x 2</p>
-                <p class="tinge">64GB 鍐呭瓨 (16GB x 4) + 480GB SSD 瀛樺偍 + 8TB HDD 瀛樺偍</p>
-                <p class="tinge">鍗冨厗 LAN x 4</p>
-              </div>
-              <div class="pane_right">
-                <img src="../../../public/image/home/projectImg/projectImg4.png"  alt="">
-              </div>
-            </el-tab-pane>
-          </el-tabs>
-          </div>
-        </div>
-        <div class="pic">
-          <div class="left">
-            <h1>SmartAI</h1>
-            <h1>鏅烘収宸ュ巶绯荤粺</h1>
-            <h2>涓�閿喘涔帮紝瀹炵幇浼佷笟鏅鸿兘鍖栨敼閫�</h2>
-            <img src="../../../public/image/home/绠ご.png" alt="" />
-          </div>
-          <div class="right boot">
-            <div class="top">
-              <div>鏅烘収缁堢绯诲垪1</div>
-              <div>鏅烘収缁堢绯诲垪1</div>
-            </div>
-            <h2>
-              閫氳繃鍦ㄦ瘡涓�涓伐搴忕殑璁惧鎴栨満鍙板悎閫備綅缃紝瀹夎瑙︽懜鏅鸿兘缁堢璁惧锛岀敤浜庡皢鎺掍骇浠诲姟涓嬪彂鑷虫瘡涓�涓櫤鑳界粓绔睆骞�
-            </h2>
-            <div class="button">
-              <div class="go">绔嬪嵆璐拱</div>
-              <div class="in">绔嬪嵆鍜ㄨ</div>
-            </div>
-            <ul style="bottom: 42px">
-              <div>浜у搧浼樺娍</div>
-              <li>寤虹珛璁惧鍙拌处銆佽祫浜ф。妗堬紝鎺屾彙璁惧鏁翠釜鍛ㄦ湡鐨勫姩鎬佷俊鎭�</li>
-              <li>
-                鏀堕泦璁惧浣跨敤杩囩▼涓殑鍚勭淇℃伅鏁版嵁锛岃嚜鍔ㄦ眹鎬昏繍绠楋紝鐢熸垚鍚勭被涓撲笟鐨勮澶囩鐞嗘姤琛�
-              </li>
-              <div style="margin-top: 37px">閰嶇疆</div>
-              <li>鑻辩壒灏� 蹇楀己 Silver 4114 10鏍稿鐞嗗櫒 x 2</li>
-              <li>64GB 鍐呭瓨 (16GB x 4) + 480GB SSD 瀛樺偍 + 8TB HDD 瀛樺偍</li>
-              <li>鍗冨厗 LAN x 4</li>
-            </ul>
-          </div>
-        </div>
+        <!-- 鍟嗗搧鍗＄墖 -->
+        <GoodsCard :cardData="cardData"></GoodsCard>
+        <BottomRail></BottomRail>
+        <!-- <el-button @mouseenter="show3 = !show3">Click Me</el-button> -->
+        
       </div>
     </div>
-    <!-- <div class="sis">
-      <div class="center">
-        <h1>AI鐖嗘</h1>
-        <h2>绮惧績鎸戦�夌殑鐑棬绠楁硶鍙婂簲鐢紝鎬绘湁涓�娆鹃�傚悎浣�</h2>
-        <ul>
-          <li class="chil">
-            <h1>璁惧鏁呴殰妫�娴�</h1>
-            <b>绠楁硶</b>
-            <h2>
-              鍙疄鐜颁骇鍝佽川閲忕鐞嗐�佹暟鎹鐞嗐�佽川閲忔帶鍒跺拰璇樊鍒嗘瀽绛夊姛鑳斤紝鍖呮嫭婧簮鍜�
-              缁熻銆佹暟鎹寲鎺樼瓑鍔熻兘
-            </h2>
-            <hr />
-            <h2>璐拱鏃堕暱</h2>
-            <h3>1骞�</h3>
-            <hr />
-            <h2>璐拱鏁伴噺</h2>
-            <h3>1</h3>
-            <hr />
-            <h4>锟� 977<span>/3骞�</span></h4>
-            <h5>锟�1200.00</h5>
-            <div class="down">
-              <div class="go" style="background-color: #ff680d; color: #fff">
-                绔嬪嵆璐拱
-              </div>
-              <div class="in">鍔犲叆璐墿杞�</div>
-            </div>
-          </li>
-          <li class="chil">
-            <h1>璁惧鏁呴殰妫�娴�</h1>
-            <b>绠楁硶</b>
-            <h2>
-              鍙疄鐜颁骇鍝佽川閲忕鐞嗐�佹暟鎹鐞嗐�佽川閲忔帶鍒跺拰璇樊鍒嗘瀽绛夊姛鑳斤紝鍖呮嫭婧簮鍜�
-              缁熻銆佹暟鎹寲鎺樼瓑鍔熻兘
-            </h2>
-            <hr />
-            <h2>璐拱鏃堕暱</h2>
-            <h3>1骞�</h3>
-            <hr />
-            <h2>璐拱鏁伴噺</h2>
-            <h3>1</h3>
-            <hr />
-            <h4>锟� 977<span>/3骞�</span></h4>
-            <h5>锟�1200.00</h5>
-            <div class="down">
-              <div class="go" style="background-color: #ff680d; color: #fff">
-                绔嬪嵆璐拱
-              </div>
-              <div class="in">鍔犲叆璐墿杞�</div>
-            </div>
-          </li>
-          <li class="chil">
-            <h1>璁惧鏁呴殰妫�娴�</h1>
-            <b>绠楁硶</b>
-            <h2>
-              鍙疄鐜颁骇鍝佽川閲忕鐞嗐�佹暟鎹鐞嗐�佽川閲忔帶鍒跺拰璇樊鍒嗘瀽绛夊姛鑳斤紝鍖呮嫭婧簮鍜�
-              缁熻銆佹暟鎹寲鎺樼瓑鍔熻兘
-            </h2>
-            <hr />
-            <h2>璐拱鏃堕暱</h2>
-            <h3>1骞�</h3>
-            <hr />
-            <h2>璐拱鏁伴噺</h2>
-            <h3>1</h3>
-            <hr />
-            <h4>锟� 977<span>/3骞�</span></h4>
-            <h5>锟�1200.00</h5>
-            <div class="down">
-              <div class="go" style="background-color: #ff680d; color: #fff">
-                绔嬪嵆璐拱
-              </div>
-              <div class="in">鍔犲叆璐墿杞�</div>
-            </div>
-          </li>
-          <li class="chil">
-            <h1>璁惧鏁呴殰妫�娴�</h1>
-            <b>绠楁硶</b>
-            <h2>
-              鍙疄鐜颁骇鍝佽川閲忕鐞嗐�佹暟鎹鐞嗐�佽川閲忔帶鍒跺拰璇樊鍒嗘瀽绛夊姛鑳斤紝鍖呮嫭婧簮鍜�
-              缁熻銆佹暟鎹寲鎺樼瓑鍔熻兘
-            </h2>
-            <hr />
-            <h2>璐拱鏃堕暱</h2>
-            <h3>1骞�</h3>
-            <hr />
-            <h2>璐拱鏁伴噺</h2>
-            <h3>1</h3>
-            <hr />
-            <h4>锟� 977<span>/3骞�</span></h4>
-            <h5>锟�1200.00</h5>
-            <div class="down">
-              <div class="go" style="background-color: #ff680d; color: #fff">
-                绔嬪嵆璐拱
-              </div>
-              <div class="in">鍔犲叆璐墿杞�</div>
-            </div>
-          </li>
-          <li class="chil">
-            <h1>璁惧鏁呴殰妫�娴�</h1>
-            <b>绠楁硶</b>
-            <h2>
-              鍙疄鐜颁骇鍝佽川閲忕鐞嗐�佹暟鎹鐞嗐�佽川閲忔帶鍒跺拰璇樊鍒嗘瀽绛夊姛鑳斤紝鍖呮嫭婧簮鍜�
-              缁熻銆佹暟鎹寲鎺樼瓑鍔熻兘
-            </h2>
-            <hr />
-            <h2>璐拱鏃堕暱</h2>
-            <h3>1骞�</h3>
-            <hr />
-            <h2>璐拱鏁伴噺</h2>
-            <h3>1</h3>
-            <hr />
-            <h4>锟� 977<span>/3骞�</span></h4>
-            <h5>锟�1200.00</h5>
-            <div class="down">
-              <div class="go" style="background-color: #ff680d; color: #fff">
-                绔嬪嵆璐拱
-              </div>
-              <div class="in">鍔犲叆璐墿杞�</div>
-            </div>
-          </li>
-          <li class="chil">
-            <h1>璁惧鏁呴殰妫�娴�</h1>
-            <b>绠楁硶</b>
-            <h2>
-              鍙疄鐜颁骇鍝佽川閲忕鐞嗐�佹暟鎹鐞嗐�佽川閲忔帶鍒跺拰璇樊鍒嗘瀽绛夊姛鑳斤紝鍖呮嫭婧簮鍜�
-              缁熻銆佹暟鎹寲鎺樼瓑鍔熻兘
-            </h2>
-            <hr />
-            <h2>璐拱鏃堕暱</h2>
-            <h3>1骞�</h3>
-            <hr />
-            <h2>璐拱鏁伴噺</h2>
-            <h3>1</h3>
-            <hr />
-            <h4>锟� 977<span>/3骞�</span></h4>
-            <h5>锟�1200.00</h5>
-            <div class="down">
-              <div class="go" style="background-color: #ff680d; color: #fff">
-                绔嬪嵆璐拱
-              </div>
-              <div class="in">鍔犲叆璐墿杞�</div>
-            </div>
-          </li>
-        </ul>
-      </div>
-    </div>
-    <div class="seven">
-      <div class="center">
-        <h1>绠＄悊涓績</h1>
-        <h2>鎬т环姣旇秴楂樼殑绠＄悊涓績锛屽垰闇�浜у搧涓�閿喘榻愶紝涓嶄粎鐪侀挶杩樼渷蹇�</h2>
-        <ul>
-          <li class="chil">
-            <h1>璁惧鏁呴殰妫�娴�</h1>
-            <b>绠楁硶</b>
-            <h2>
-              鍙疄鐜颁骇鍝佽川閲忕鐞嗐�佹暟鎹鐞嗐�佽川閲忔帶鍒跺拰璇樊鍒嗘瀽绛夊姛鑳斤紝鍖呮嫭婧簮鍜�
-              缁熻銆佹暟鎹寲鎺樼瓑鍔熻兘
-            </h2>
-            <hr />
-            <h2>璐拱鏃堕暱</h2>
-            <h3>1骞�</h3>
-            <hr />
-            <h2>璐拱鏁伴噺</h2>
-            <h3>1</h3>
-            <hr />
-            <h4>锟� 977<span>/3骞�</span></h4>
-            <h5>锟�1200.00</h5>
-            <div class="down">
-              <div class="go" style="background-color: #ff680d; color: #fff">
-                绔嬪嵆璐拱
-              </div>
-              <div class="in">鍔犲叆璐墿杞�</div>
-            </div>
-          </li>
-          <li class="chil">
-            <h1>璁惧鏁呴殰妫�娴�</h1>
-            <b>绠楁硶</b>
-            <h2>
-              鍙疄鐜颁骇鍝佽川閲忕鐞嗐�佹暟鎹鐞嗐�佽川閲忔帶鍒跺拰璇樊鍒嗘瀽绛夊姛鑳斤紝鍖呮嫭婧簮鍜�
-              缁熻銆佹暟鎹寲鎺樼瓑鍔熻兘
-            </h2>
-            <hr />
-            <h2>璐拱鏃堕暱</h2>
-            <h3>1骞�</h3>
-            <hr />
-            <h2>璐拱鏁伴噺</h2>
-            <h3>1</h3>
-            <hr />
-            <h4>锟� 977<span>/3骞�</span></h4>
-            <h5>锟�1200.00</h5>
-            <div class="down">
-              <div class="go" style="background-color: #ff680d; color: #fff">
-                绔嬪嵆璐拱
-              </div>
-              <div class="in">鍔犲叆璐墿杞�</div>
-            </div>
-          </li>
-          <li class="chil">
-            <h1>璁惧鏁呴殰妫�娴�</h1>
-            <b>绠楁硶</b>
-            <h2>
-              鍙疄鐜颁骇鍝佽川閲忕鐞嗐�佹暟鎹鐞嗐�佽川閲忔帶鍒跺拰璇樊鍒嗘瀽绛夊姛鑳斤紝鍖呮嫭婧簮鍜�
-              缁熻銆佹暟鎹寲鎺樼瓑鍔熻兘
-            </h2>
-            <hr />
-            <h2>璐拱鏃堕暱</h2>
-            <h3>1骞�</h3>
-            <hr />
-            <h2>璐拱鏁伴噺</h2>
-            <h3>1</h3>
-            <hr />
-            <h4>锟� 977<span>/3骞�</span></h4>
-            <h5>锟�1200.00</h5>
-            <div class="down">
-              <div class="go" style="background-color: #ff680d; color: #fff">
-                绔嬪嵆璐拱
-              </div>
-              <div class="in">鍔犲叆璐墿杞�</div>
-            </div>
-          </li>
-        </ul>
-      </div>
-    </div>
-    <div class="eight">
-      <div class="center">
-        <ul>
-          <li><a href="">鍏充簬鎴戜滑</a></li>
-          <li><a href="">娉曞緥澹版槑</a></li>
-          <li><a href="">闅愮鏀跨瓥</a></li>
-          <li><a href="">寤夋斂涓炬姤</a></li>
-          <li><a href="">鑱旂郴鎴戜滑</a></li>
-          <li><a href="">鍔犲叆鎴戜滑</a></li>
-        </ul>
-        <span> 漏 2009-2019 smartai.com 鐗堟潈鎵�鏈� ICP璇侊細45456566</span>
-      </div>
-    </div> -->
+    <!-- 鑱旂郴鎴戜滑 -->
+    <ContactUs></ContactUs>
   </div>
 </template>
 
 <script>
-import GoodsCard from "../goodsCard/goodsCard.vue"
+import GoodsCard from "../goodsCard/goodsCard.vue";
 import CarouselImg from "../carouselImg/carouselImg.vue";
+import BottomRail from "../bottomRail/bottomRail.vue";
+import ContactUs from "../contactUs/contactUs.vue"
 export default {
   name: "HomePage",
   components: {
     CarouselImg,
     GoodsCard,
+    BottomRail,
+    ContactUs
   },
   props: {},
   data() {
     return {
-      
-      activeName: 'first'
+      activeName: "first",
+      parentMessage: "Hello from parent component",
+      show3:true,
+      cardData: [
+        // {
+        //   goodsRightShow: 1,
+        //   haveMindTo: true, //鍜ㄨ銆佽喘涔�
+        //   title: "SmartAI鏅烘収宸ュ巶绯荤粺",
+        //   brief: "涓�閿喘涔帮紝瀹炵幇浼佷笟鏅鸿兘鍖栨敼閫�",
+        //   imgSrc: "绠ご.png",
+        //   goodsVersions: "鏅烘収宸ュ巶绯荤粺V1.0",
+        //   introduce:
+        //     "鐢熶骇鎺掔▼绯荤粺鏄竴绉嶇敤浜庝紭鍖栫敓浜ф祦绋嬪拰璧勬簮鍒╃敤鐨勫伐鍏凤紝瀹冨彲浠ュ府鍔╁埗閫犱紒涓氭彁楂樼敓浜ф晥鐜囥�侀檷浣庢垚鏈紝骞舵弧瓒冲鎴烽渶姹傘�傞�氳繃灏嗘帓绋嬬粨鏋滀笅鍙戝埌璁惧涓婄殑鏅鸿兘瑙︽懜灞忕粓绔紝宸ュ巶鍙互瀹炴椂鐩戞帶鐢熶骇杩囩▼涓苟璋冩暣鐢熶骇璁″垝",
+        //   trait: ["杩囩▼鐩戞帶", "鏁版嵁鍙鍖�", "鍘嗗彶鏈旀簮","棰勬祴鎬у垎鏋�","浼樺寲鎻愬崌"],
+        // },
+        {
+          goodsRightShow: 1,
+          haveMindTo: false, //鍜ㄨ銆佽喘涔�
+          title: "CRM瀹㈡埛绠＄悊绯荤粺",
+          brief: "璧嬭兘鍚勮涓氬疄鐜颁竴浣撳寲鏁板瓧鍖栬浆鍨�",
+          imgSrc: "绠ご.png",
+          goodsVersions: "CRM瀹㈡埛绠＄悊绯荤粺V1.0",
+          introduce:
+            "绯荤粺浠ユ暟瀛楀唴瀹逛负鍩虹锛屼互鏁版嵁椹卞姩涓烘牳蹇冿紝閫氳繃瀹炵幇鍏ㄥ満鏅拰鏁版嵁浜掗�氾紝涓虹嚎涓婄粡钀ョ鐞嗐�佸鎴锋湇鍔￠渶姹傛彁渚涗竴绔欏紡鎶�鏈湇鍔°�傚姪鍔涗紒涓氬畬鎴愭暟瀛楀寲绠＄悊鍗囩骇锛岃鑼冨寲绠＄悊娴佺▼銆傛牴鎹郴缁熷瀹㈡埛淇℃伅鐨勬暣鐞嗙粺绛逛笌鍒嗛厤锛屼粠鑰屾彁楂橀攢鍞晥鐜囧噺灏戜汉鍔涗笂鐨勬秷鑰楋紝闃叉鍛樺伐绂昏亴瀵艰嚧瀹㈡埛娴佸け锛屼績杩涘洟闃熷悎浣滐紝杈惧埌浼佷笟闄嶆湰澧炴晥鐨勭洰鐨勩��",
+          trait: ["甯傚満钀ラ攢鑷姩鍖�", "閿�鍞繃绋嬭嚜鍔ㄥ寲", "瀹㈡埛鏈嶅姟鑷姩鍖�"],
+        },
+        {
+          goodsRightShow: 1,
+          haveMindTo: true, //鍜ㄨ銆佽喘涔�
+          title: "WMS鏅鸿兘浠撳偍绠＄悊绯荤粺",
+          brief: "婊¤冻涓嶅悓琛屼笟涓嶅悓缁忚惀妯″紡鐨勬櫤鑳戒粨鍌ㄧ鐞嗙郴缁�",
+          imgSrc: "绠ご.png",
+          goodsVersions: "WMS绯荤粺V1.0",
+          introduce:
+            "閫氳繃wms浠撳簱绠＄悊绯荤粺锛屽彲浠ユ湁鏁堝鐞嗙幇浠ｇ墿娴佷俊鎭紝鍦ㄥ緢澶х▼搴︿笂涓虹鐞嗗眰鍐崇瓥鎻愪緵浜嗘湁鏁堟敮鎸侊紝鍏跺姛鑳界壒鐐瑰簲娑电洊鏀寔澶氫粨搴撱�佸璐т富锛屽涓氬姟妯″紡锛屽彲閰嶇疆鐨勭伒娲荤瓥鐣ュ拰娴佺▼澧炲�兼湇鍔★紝绯荤粺浠ヤ骇鍝佷俊鎭拰璁㈠崟涓氬姟浣滀负鏁版嵁娴佸姩鐨勫熀纭�锛屽苟涓旇瀵逛粨搴撹繘琛屾櫤鑳藉垎鏋愪笌鐩戞帶銆佺畝娲併�佺洿绠°�佸彲瑙嗗寲锛屽苟璺冲嚭浼犵粺浠撳簱娴佺▼妗嗘灦锛屾寔缁彂鍔涜惤瀹炴暟瀛楀寲杞瀷锛屾槸浼佷笟瀵逛粨搴撴櫤鑳藉寲鍙橀潻鐨勬牳蹇冮噸鐐广��",
+          trait: [
+            "澶氬眰娆＄鐞�",
+            "涓氬姟闃插憜鏈哄埗",
+            "璐у搧缁嗗寲绠＄悊",
+            "鍑哄叆搴撶幆鑺傛帶鍒�",
+            "鍒嗘壒绠＄悊璋冨害涓氬姟",
+          ],
+        },
+        {
+          series: [
+            {
+              goodsVersions: "VisionLink鏅鸿兘缁堢",
+              introduce:
+                "閫氳繃鍦ㄦ瘡涓伐搴忕殑璁惧鎴栨満鍙板悎閫備綅缃紝瀹夎瑙︽懜鏅鸿兘缁堢璁惧锛岀敤浜庡皢鎺掍骇浠诲姟涓嬪彂鑷虫瘡涓�涓櫤鑳界粓绔睆骞曘��",
+              trait: [
+                "寤衡酱璁惧鍙拌处銆佽祫浜ф。妗堬紝鎺屾彙璁惧鏁翠釜鍛ㄦ湡鐨勫姩鎬佷俊鎭�",
+                "鏀堕泦璁惧浣库饯杩囩▼涓殑鍚勭淇℃伅鏁版嵁锛屸緝鍔ㄦ眹鎬昏繍绠楋紝鐢熸垚鍚勭被涓撲笟鐨勮澶囩鐞嗘姤琛�",
+              ],
+              Configure: [
+                " 鑻辩壒灏� 蹇楀己 Silver 4114 10鏍稿鐞嗗櫒 x 2",
+                "64GB 鍐呭瓨 (16GB x 4) + 480GB SSD 瀛樺偍 + 8TB HDD 瀛樺偍",
+                "鍗冨厗 LAN x 4",
+              ],
+              imgSrc: "projectImg3.png",
+            },
+            {
+              goodsVersions: "LE-V-S003 楂樻�ц兘杈圭紭璁＄畻涓绘満",
+              introduce:
+                "涓撲负楂樻�ц兘瑙嗛搴旂敤鎵撻�狅紝寮烘倣鐨勫弻蹇楀己澶勭悊鍣紝杞绘澗搴斿楂樼畻鍔涘簲鐢ㄥ満鏅殑闇�姹傘��",
+              trait: [
+                "鎼浇涓ら楂樻�ц兘蹇楀己澶勭悊鍣紝鍙彁渚涢珮杈�64T鐨勫嚩鐚涚畻鍔�",
+                "Server绯诲垪锛屽叿澶囧崟鍙颁笌闆嗙兢鏈嶅姟",
+                "鏀寔绠楀姏铏氭嫙鍖栫鎺э紝楂樼ǔ瀹氭�у崟鏈虹儹澶�",
+              ],
+              Configure: [
+                "鑻辩壒灏� 蹇楀己 Silver 4114 10鏍稿鐞嗗櫒 x 2",
+                "64GB 鍐呭瓨 (16GB x 4) + 480GB SSD 瀛樺偍 + 8TB HDD 瀛樺偍",
+                "鍗冨厗 LAN x 4",
+              ],
+              imgSrc: "projectImg4.png",
+            },
+          ],
+          goodsRightShow: 2,
+          haveMindTo: true, //鍜ㄨ銆佽喘涔�
+          title: "VisionLink锛堟櫤鑳界粓绔級",
+          brief:
+            "鏅鸿兘缁堢閫氳繃AI瑙嗛妫�娴嬮噰闆嗘暟鎹強PLC閲囬泦鐢熶骇鏁版嵁銆傛櫤鑳界粓绔噰闆嗙殑瀹炴椂鐢熶骇鏁版嵁浼犻�掔粰绠楁硶锛岀畻娉曠粨鍚堟暟鎹笉鏂皟鏁翠紭鍖栫敓浜т换鍔″強鍒嗛厤绛栫暐銆�",
+          imgSrc: "绠ご.png",
+        },
+        {
+          goodsRightShow: 3,
+          haveMindTo: false, //鍜ㄨ銆佽喘涔�
+          title: "AI鐖嗘",
+          brief: "绮惧績鎸戦�夌殑鐑棬绠楁硶鍙婂簲鐢紝鎬绘湁涓�娆鹃�傚悎浣�",
+          imgSrc: "绠ご.png",
+          cards: [
+            {
+              classify: "绠楁硶",
+              classifyTitle: "璐ㄩ噺妫�娴嬬畻娉�",
+              brief:
+                "鍙疄鐜颁骇鍝佽川閲忕鐞嗐�佹暟鎹鐞嗐�佽川閲忔帶鍒跺拰璇樊鍒嗘瀽绛夊姛鑳斤紝鍖呮嫭婧簮鍜岀粺璁°�佹暟鎹寲鎺樼瓑鍔熻兘",
+              currency: "锟�",
+              newPrice: "597.00",
+              serviceDate: "3",
+              dateType: "骞�",
+              oldPrice: "1194.00",
+            },
+            {
+              classify: "绠楁硶",
+              classifyTitle: "璐ㄩ噺妫�娴嬬畻娉�",
+              brief:
+                "鍙疄鐜颁骇鍝佽川閲忕鐞嗐�佹暟鎹鐞嗐�佽川閲忔帶鍒跺拰璇樊鍒嗘瀽绛夊姛鑳斤紝鍖呮嫭婧簮鍜岀粺璁°�佹暟鎹寲鎺樼瓑鍔熻兘",
+              currency: "锟�",
+              newPrice: "597.00",
+              serviceDate: "3",
+              dateType: "骞�",
+              oldPrice: "1194.00",
+            },
+            {
+              classify: "绠楁硶",
+              classifyTitle: "璐ㄩ噺妫�娴嬬畻娉�",
+              brief:
+                "鍙疄鐜颁骇鍝佽川閲忕鐞嗐�佹暟鎹鐞嗐�佽川閲忔帶鍒跺拰璇樊鍒嗘瀽绛夊姛鑳斤紝鍖呮嫭婧簮鍜岀粺璁°�佹暟鎹寲鎺樼瓑鍔熻兘",
+              currency: "锟�",
+              newPrice: "597.00",
+              serviceDate: "3",
+              dateType: "骞�",
+              oldPrice: "1194.00",
+            },
+            {
+              classify: "绠楁硶",
+              classifyTitle: "璐ㄩ噺妫�娴嬬畻娉�",
+              brief:
+                "鍙疄鐜颁骇鍝佽川閲忕鐞嗐�佹暟鎹鐞嗐�佽川閲忔帶鍒跺拰璇樊鍒嗘瀽绛夊姛鑳斤紝鍖呮嫭婧簮鍜岀粺璁°�佹暟鎹寲鎺樼瓑鍔熻兘",
+              currency: "锟�",
+              newPrice: "597.00",
+              serviceDate: "3",
+              dateType: "骞�",
+              oldPrice: "1194.00",
+            },
+            {
+              classify: "绠楁硶",
+              classifyTitle: "璐ㄩ噺妫�娴嬬畻娉�",
+              brief:
+                "鍙疄鐜颁骇鍝佽川閲忕鐞嗐�佹暟鎹鐞嗐�佽川閲忔帶鍒跺拰璇樊鍒嗘瀽绛夊姛鑳斤紝鍖呮嫭婧簮鍜岀粺璁°�佹暟鎹寲鎺樼瓑鍔熻兘",
+              currency: "锟�",
+              newPrice: "597.00",
+              serviceDate: "3",
+              dateType: "骞�",
+              oldPrice: "1194.00",
+            },
+            {
+              classify: "绠楁硶",
+              classifyTitle: "璐ㄩ噺妫�娴嬬畻娉�",
+              brief:
+                "鍙疄鐜颁骇鍝佽川閲忕鐞嗐�佹暟鎹鐞嗐�佽川閲忔帶鍒跺拰璇樊鍒嗘瀽绛夊姛鑳斤紝鍖呮嫭婧簮鍜岀粺璁°�佹暟鎹寲鎺樼瓑鍔熻兘",
+              currency: "锟�",
+              newPrice: "597.00",
+              serviceDate: "3",
+              dateType: "骞�",
+              oldPrice: "1194.00",
+            },
+          ],
+        },
+        {
+          goodsRightShow: 4,
+          haveMindTo: false, //鍜ㄨ銆佽喘涔�
+          title: "绠＄悊涓績",
+          brief: "鎬т环姣旇秴楂樼殑绠＄悊涓績锛屽垰闇�浜у搧涓�閿喘榻愶紝涓嶄粎鐪侀挶杩樼渷蹇�",
+          imgSrc: "绠ご.png",
+          cards: [
+            {
+              classify: "璁惧绠＄悊",
+              classifyTitle: "瀵规墍鏈夎仈缃戠殑璁惧杩涜鍏ㄦ柟浣嶇鐞�",
+              features:["鏀寔璁惧鐨勫熀鏈俊鎭�佺‖浠朵俊鎭�佽祫婧愭儏鍐点�佸畨瑁呯殑绠楁硶/搴旂敤绛夊姛鑳界洃绠�","鏀寔瀵硅澶囪繘琛岄噸鍚�佺郴缁熸竻鐞嗙瓑鎿嶄綔"],
+              brief:"",
+              currency: "锟�",
+              newPrice: "1424.94",
+              // serviceDate: "3",
+              dateType: "骞�",
+              oldPrice: "1676.40",
+            },
+            {
+              classify: "绠楀姏绠＄悊",
+              classifyTitle: "瀵规墍鏈夎仈缃戠殑璁惧杩涜鍏ㄦ柟浣嶇鐞�",
+              features:["鏀寔璁惧鐨勫熀鏈俊鎭�佺‖浠朵俊鎭�佽祫婧愭儏鍐点�佸畨瑁呯殑绠楁硶/搴旂敤绛夊姛鑳界洃绠�","鏀寔瀵硅澶囪繘琛岄噸鍚�佺郴缁熸竻鐞嗙瓑鎿嶄綔"],
+              brief:"",
+              currency: "锟�",
+              newPrice: "1424.94",
+              // serviceDate: "3",
+              dateType: "骞�",
+              oldPrice: "1676.40",
+            },
+            {
+              classify: "缁熻鏌ヨ",
+              classifyTitle: "瀵规墍鏈夎仈缃戠殑璁惧杩涜鍏ㄦ柟浣嶇鐞�",
+              features:["鏀寔璁惧鐨勫熀鏈俊鎭�佺‖浠朵俊鎭�佽祫婧愭儏鍐点�佸畨瑁呯殑绠楁硶/搴旂敤绛夊姛鑳界洃绠�","鏀寔瀵硅澶囪繘琛岄噸鍚�佺郴缁熸竻鐞嗙瓑鎿嶄綔"],
+              brief:"",
+              currency: "锟�",
+              newPrice: "1424.94",
+              // serviceDate: "3",
+              dateType: "骞�",
+              oldPrice: "1676.40",
+            },
+          ],
+        },
+      ],
     };
   },
   computed: {},
@@ -643,10 +477,9 @@
 }
 .center {
   width: 75%;
-  height: 50px;
   margin: auto;
 }
-::v-deep .el-tabs__item{
+::v-deep .el-tabs__item {
   width: 200px;
 }
 
@@ -789,6 +622,7 @@
 }
 .third {
   height: 295px;
+  width: 100%;
   background: #fff;
   .center {
     height: 100%;
@@ -830,7 +664,8 @@
   }
 }
 .forth {
-  height: 600px;
+  // height: 600px;
+  width: 100%;
   background: #f2f2f2;
   display: flex;
   align-items: center;
@@ -977,7 +812,9 @@
   }
 }
 .fif {
-  height: 1467px;
+  // height: 1467px;
+  width: 100%;
+  
   .center {
     margin-top: 80px;
     > h1 {
@@ -1041,7 +878,7 @@
         background-repeat: no-repeat;
         background-position-x: right;
         background-position-y: bottom;
-        
+
         .top {
           margin-top: -20px;
           width: 364px;
@@ -1152,39 +989,39 @@
           }
         }
       }
-      .pane_box{
+      .pane_box {
         display: flex;
         align-items: center;
         justify-content: center;
-        
-        .pane_left{
+
+        .pane_left {
           width: 50%;
           box-sizing: border-box;
           padding: 20px;
           font-size: 14px;
-          div{
-            border-bottom: 0.5px solid #ccc; 
+          div {
+            border-bottom: 0.5px solid #ccc;
             padding: 10px 0;
           }
-          .el-button{
+          .el-button {
             border-radius: 0px;
             width: 120px;
             height: 44px;
-            background: #FF680D;
+            background: #ff680d;
             color: #fff;
             font-size: 16px;
           }
-          .tinge{
-            color:#999
+          .tinge {
+            color: #999;
           }
-          h4{
+          h4 {
             color: #333;
           }
         }
-        .pane_right{
+        .pane_right {
           width: 50%;
           text-align: center;
-          img{
+          img {
             width: 350px;
             height: 200px;
           }
@@ -1198,6 +1035,12 @@
     }
   }
 }
+// .fif:after {
+//   content: "";
+//   height: 0;
+//   clear: both;
+//   display: block;
+// }
 .sis {
   height: 1021px;
   background: #fff;

--
Gitblit v1.8.0