From f3d9e9f22e115c399af7adf9759f5846c8c33bd5 Mon Sep 17 00:00:00 2001
From: zuozhengqing <a13193816592@163.com>
Date: 星期一, 25 九月 2023 14:57:49 +0800
Subject: [PATCH] ”样式重置，布局修改“

---
 public/image/home/Group.png              |    0 
 public/image/home/wms.png                |    0 
 src/components/goodsCard/goodsCard.vue   |  288 +++++
 vue.config.js                            |    3 
 public/image/home/crm.png                |    0 
 src/components/bottomRail/bottomRail.vue |    2 
 src/main.js                              |    1 
 src/assets/styles/reset.css              |   43 
 src/views/recommend/recommendForYou.vue  |  246 ++++
 src/components/home/HomePage.vue         | 2401 +++++++++++++++++++++++++++--------------------
 public/image/home/bannerImg/banner2.png  |    0 
 11 files changed, 1,942 insertions(+), 1,042 deletions(-)

diff --git a/public/image/home/Group.png b/public/image/home/Group.png
new file mode 100644
index 0000000..0ea72e8
--- /dev/null
+++ b/public/image/home/Group.png
Binary files differ
diff --git a/public/image/home/bannerImg/banner2.png b/public/image/home/bannerImg/banner2.png
index df8e849..7d7964b 100644
--- a/public/image/home/bannerImg/banner2.png
+++ b/public/image/home/bannerImg/banner2.png
Binary files differ
diff --git a/public/image/home/crm.png b/public/image/home/crm.png
new file mode 100644
index 0000000..12f3c0a
--- /dev/null
+++ b/public/image/home/crm.png
Binary files differ
diff --git a/public/image/home/wms.png b/public/image/home/wms.png
new file mode 100644
index 0000000..162fa7f
--- /dev/null
+++ b/public/image/home/wms.png
Binary files differ
diff --git a/src/assets/styles/reset.css b/src/assets/styles/reset.css
new file mode 100644
index 0000000..27acba5
--- /dev/null
+++ b/src/assets/styles/reset.css
@@ -0,0 +1,43 @@
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
\ No newline at end of file
diff --git a/src/components/bottomRail/bottomRail.vue b/src/components/bottomRail/bottomRail.vue
index 237b398..35cb2f7 100644
--- a/src/components/bottomRail/bottomRail.vue
+++ b/src/components/bottomRail/bottomRail.vue
@@ -47,6 +47,7 @@
 
 <style scoped lang="scss">
   ul{
+    margin-top: 30px;
     width: 100%;
     display: flex;
     align-items: center;
@@ -70,6 +71,7 @@
     color: #CCCCCC;
     cursor: pointer;
     font-size: 14px;
+    margin: 10px 0;
   }
   p:last-child{
     padding: 0 0 30px 0;
diff --git a/src/components/goodsCard/goodsCard.vue b/src/components/goodsCard/goodsCard.vue
index 785c264..683b083 100644
--- a/src/components/goodsCard/goodsCard.vue
+++ b/src/components/goodsCard/goodsCard.vue
@@ -11,7 +11,10 @@
             alt=""
           />
         </div>
-        <div v-show="item.goodsRightShow === 1" class="goods_card_right">
+        <div
+          v-show="item.goodsRightShow === 1"
+          class="goods_card_right card_height"
+        >
           <h1>{{ item.goodsVersions }}</h1>
           <h2>
             {{ item.introduce }}
@@ -23,7 +26,7 @@
           <div class="project">
             <ul>
               <div>浜у搧鐗圭偣</div>
-              <div style="display: flex; flex-wrap: wrap; width: 600px">
+              <div >
                 <li v-for="(item1, index1) in item.trait" :key="index1">
                   {{ item1 }}
                 </li>
@@ -31,12 +34,11 @@
             </ul>
           </div>
         </div>
-        <div v-show="item.goodsRightShow === 2" class="goods_card_tab">
+        <!-- <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"
@@ -84,15 +86,107 @@
               </div>
             </el-carousel-item>
           </el-carousel>
+        </div> -->
+
+        <div
+          v-show="item.goodsRightShow === 2"
+          class="goods_card_tab card_height"
+        >
+          <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>
+            <div class="project">
+            <ul >
+              <div style="color: #FA640A;">浜у搧浼樺娍</div>
+              <li>寤虹珛璁惧鍙拌处銆佽祫浜ф。妗堬紝鎺屾彙璁惧鏁翠釜鍛ㄦ湡鐨勫姩鎬佷俊鎭�</li>
+              <li>
+                鏀堕泦璁惧浣跨敤杩囩▼涓殑鍚勭淇℃伅鏁版嵁锛岃嚜鍔ㄦ眹鎬昏繍绠楋紝鐢熸垚鍚勭被涓撲笟鐨勮澶囩鐞嗘姤琛�
+              </li>
+              <div style="margin-top: 37px;color: #FA640A;">閰嶇疆</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>
         </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>
+          <!-- <GoodsInfo :goodsAiInfo="goodsAiInfo"></GoodsInfo> -->
         </div>
         <!-- 绠＄悊涓績 -->
-        <div
+        <!-- <div
           v-show="item.goodsRightShow === 4"
           class="goods_card_right management"
         >
@@ -134,7 +228,7 @@
               <el-button>绔嬪嵆璐拱</el-button>
             </div>
           </el-card>
-        </div>
+        </div> -->
       </div>
     </template>
   </div>
@@ -150,8 +244,8 @@
       activeName: "first",
       goodsRightShow: false, //鏄惁灞曠ず鍙充晶淇℃伅鏍忥紝false:tab椤典笉鏄剧ず
       isBtnClass: false,
-      goodsAiInfo: this.cardData[3].cards, //瀛愮粍浠跺崱鐗囨暟鎹�
-      manageInfo: this.cardData[4].cards,
+      // goodsAiInfo: this.cardData[3].cards, //瀛愮粍浠跺崱鐗囨暟鎹�
+      // manageInfo: this.cardData[4].cards,
     };
   },
   computed: {},
@@ -285,17 +379,23 @@
   padding: 0;
   height: 400px;
 }
+
+::v-deep .goods_card_left:last-of-type() {
+  height: 800px !important;
+  min-height: 800px;
+  max-height: 900px;
+}
 .goods_card {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
-  // height: 400px;
+  height: 600px;
   margin-bottom: 70px;
   cursor: pointer;
   .goods_card_left {
     width: 20%;
-    min-height: 400px;
+    min-height: 600px;
     max-height: 700px;
     height: 100%;
     box-sizing: border-box;
@@ -310,6 +410,7 @@
       text-align: left;
     }
     p {
+      margin-top: 50px;
       font-size: 14px;
       color: #fff;
     }
@@ -518,7 +619,7 @@
         bottom: 0;
         left: 0;
         // display: none;
-        transition: height 0.3s ease-in-out; 
+        transition: height 0.3s ease-in-out;
         .el-button {
           display: block;
           width: 100%;
@@ -534,7 +635,7 @@
       .box_card_bottom {
         height: 100px;
         display: none;
-        .el-button{
+        .el-button {
           height: 100%;
         }
       }
@@ -573,6 +674,22 @@
     }
   }
 }
+.goods_card:nth-of-type(1){
+  .goods_card_right{
+    background-image: url(../../../public/image/home/crm.png);
+    background-size: 576px 327px;
+    background-repeat: no-repeat;
+    background-position: 90% 60%;
+  }
+}
+.goods_card:nth-of-type(2){
+  .goods_card_right {
+    background-image: url(../../../public/image/home/wms.png);
+    background-size: 576px 327px;
+    background-repeat: no-repeat;
+    background-position: 90% 60%;
+  }
+}
 .goods_card:nth-of-type(4) .goods_card_left {
   height: 600px;
 }
@@ -582,4 +699,149 @@
   box-sizing: border-box;
   padding: 0;
 }
+.right {
+  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: 620px 340px;
+  background-repeat: no-repeat;
+  background-position-x: right;
+  background-position-y: bottom;
+
+  .top {
+    margin-top: -20px;
+    width: 364px;
+    height: 46px;
+    margin-bottom: 14px;
+    display: flex;
+    div {
+      width: 50%;
+      height: 100%;
+      background: #fff;
+      font-size: 16px;
+      line-height: 46px;
+      font-weight: 600;
+      box-sizing: border-box;
+      text-align: center;
+      cursor: pointer;
+    }
+    :first-child {
+      border-top: 3px solid #ff680d;
+    }
+    :last-child {
+      font-weight: 500;
+    }
+  }
+  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;
+    }
+  }
+  ul {
+    list-style: none;
+    width: 400px;
+    li {
+      list-style: none;
+      word-wrap: break-word;
+    }
+  }
+  .project {
+    width: 300px !important;
+    display: block;
+    ul {
+      padding: 0;
+      // position: absolute;
+      bottom: 48px;
+      display: flex;
+      flex-wrap: wrap;
+      margin-bottom: -20px;
+      margin-top: 20px;
+      // width: 100%;
+      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;
+      }
+    }
+  }
+}
+.boot {
+  background-image: url(../../../public/image/home/Group.png);
+  background-color: #f9f9f8;
+  background-size: 533.1px 324px;
+  background-position: 90% 55%;
+}
+.card_height {
+  height: 600px !important;
+  .right {
+    height: 600px;
+  }
+}
 </style>
diff --git a/src/components/home/HomePage.vue b/src/components/home/HomePage.vue
index 4545f5a..1487009 100644
--- a/src/components/home/HomePage.vue
+++ b/src/components/home/HomePage.vue
@@ -68,128 +68,16 @@
       </div>
     </div>
     <!-- 涓烘偍鎺ㄨ崘 -->
-    <div class="forth">
-      <div class="center">
-        <h1>涓烘偍鎺ㄨ崘</h1>
-        <h2>鍒掔嚎浠锋牸涓轰骇鍝佸巻鍙查攢鍞爣浠疯�岄潪鍘熶环</h2>
-        <div class="bottom">
-          <div class="change">
-            <div class="left">
-              <img
-                src="../../../public/image/home/缂栫粍 13澶囦唤@3x.png"
-                alt=""
-                style="width: 40px; height: 40px"
-              />
-            </div>
-            <div class="right">
-              <img
-                src="../../../public/image/home/缂栫粍 13@3x.png"
-                alt=""
-                style="width: 40px; height: 40px"
-              />
-            </div>
-          </div>
-          <div class="chil">
-            <h1>璁惧鏁呴殰妫�娴�</h1>
-            <b>绠楁硶</b>
-            <h2>鏀寔閫氳繃妫�娴嬭澶囨晠闅滃師鍥犲強鎻愪緵鏁呴殰棰勬祴鍜岀姸鎬佹娴嬬瓑</h2>
-            <hr />
-            <h2>璐拱鏃堕暱</h2>
-            <h3>1骞�</h3>
-            <hr />
-            <h2>璐拱鏁伴噺</h2>
-            <h3>1</h3>
-            <hr />
-            <h4>锟� 540.00<span>/骞�</span></h4>
-            <h5>锟�900.00</h5>
-            <div class="down">
-              <div class="go" style="background-color: #ff680d; color: #fff">
-                绔嬪嵆璐拱
-              </div>
-              <div class="in">鍔犲叆璐墿杞�</div>
-            </div>
-          </div>
-          <div class="chil">
-            <h1>璁惧鏁呴殰妫�娴�</h1>
-            <b>绠楁硶</b>
-            <h2>鏀寔閫氳繃妫�娴嬭澶囨晠闅滃師鍥犲強鎻愪緵鏁呴殰棰勬祴鍜岀姸鎬佹娴嬬瓑</h2>
-            <hr />
-            <h2>璐拱鏃堕暱</h2>
-            <h3>1骞�</h3>
-            <hr />
-            <h2>璐拱鏁伴噺</h2>
-            <h3>1</h3>
-            <hr />
-            <h4>锟� 540.00<span>/骞�</span></h4>
-            <h5>锟�900.00</h5>
-            <div class="down">
-              <div class="go">绔嬪嵆璐拱</div>
-              <div class="in">鍔犲叆璐墿杞�</div>
-            </div>
-          </div>
-          <div class="chil">
-            <h1>璁惧鏁呴殰妫�娴�</h1>
-            <b>绠楁硶</b>
-            <h2>鏀寔閫氳繃妫�娴嬭澶囨晠闅滃師鍥犲強鎻愪緵鏁呴殰棰勬祴鍜岀姸鎬佹娴嬬瓑</h2>
-            <hr />
-            <h2>璐拱鏃堕暱</h2>
-            <h3>1骞�</h3>
-            <hr />
-            <h2>璐拱鏁伴噺</h2>
-            <h3>1</h3>
-            <hr />
-            <h4>锟� 540.00<span>/骞�</span></h4>
-            <h5>锟�900.00</h5>
-            <div class="down">
-              <div class="go">绔嬪嵆璐拱</div>
-              <div class="in">鍔犲叆璐墿杞�</div>
-            </div>
-          </div>
-          <div class="chil">
-            <h1>璁惧鏁呴殰妫�娴�</h1>
-            <b style="color: #2564fb; border-color: #2564fb">搴旂敤</b>
-            <h2>鏀寔閫氳繃妫�娴嬭澶囨晠闅滃師鍥犲強鎻愪緵鏁呴殰棰勬祴鍜岀姸鎬佹娴嬬瓑</h2>
-            <hr />
-            <h2>璐拱鏃堕暱</h2>
-            <h3>1骞�</h3>
-            <hr />
-            <h2>璐拱鏁伴噺</h2>
-            <h3>1</h3>
-            <hr />
-            <h4>锟� 540.00<span>/骞�</span></h4>
-            <h5>锟�900.00</h5>
-            <div class="down">
-              <div class="go">绔嬪嵆璐拱</div>
-              <div class="in">鍔犲叆璐墿杞�</div>
-            </div>
-          </div>
-          <div class="chil">
-            <h1>璁惧鏁呴殰妫�娴�</h1>
-            <b style="color: #2564fb; border-color: #2564fb">搴旂敤</b>
-            <h2>鏀寔閫氳繃妫�娴嬭澶囨晠闅滃師鍥犲強鎻愪緵鏁呴殰棰勬祴鍜岀姸鎬佹娴嬬瓑</h2>
-            <hr />
-            <h2>璐拱鏃堕暱</h2>
-            <h3>1骞�</h3>
-            <hr />
-            <h2>璐拱鏁伴噺</h2>
-            <h3>1</h3>
-            <hr />
-            <h4>锟� 540.00<span>/骞�</span></h4>
-            <h5>锟�900.00</h5>
-            <div class="down">
-              <div class="go">绔嬪嵆璐拱</div>
-              <div class="in">鍔犲叆璐墿杞�</div>
-            </div>
-          </div>
-        </div>
-      </div>
+    <div>
+      <Recommends :recommendsData="recommendsData"></Recommends>
     </div>
     <!-- 鐑棬浜у搧 -->
     <div class="fif">
       <div class="center">
         <h1>鐑棬浜у搧</h1>
         <h2>鍒掔嚎浠锋牸涓轰骇鍝佸巻鍙查攢鍞爣浠疯�岄潪鍘熶环</h2>
-        <div class="pic">
+
+        <!-- <div class="pic">
           <div class="left">
             <h1>SmartAI</h1>
             <h1>鏅烘収宸ュ巶绯荤粺</h1>
@@ -203,7 +91,6 @@
             </h2>
             <div class="button">
               <div class="go">绔嬪嵆璐拱</div>
-              <!-- <div class="in">绔嬪嵆鍜ㄨ</div> -->
             </div>
             <div class="project">
               <ul>
@@ -228,16 +115,282 @@
               </div>
             </div>
           </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">
+            <h1>鏅烘収宸ュ巶绯荤粺V1.0</h1>
+            <h2>
+              鐢熶骇鎺掔▼绯荤粺鏄竴绉嶇敤浜庝紭鍖栫敓浜ф祦绋嬪拰璧勬簮鍒╃敤鐨勫伐鍏凤紝瀹冨彲浠ュ府鍔╁埗閫犱紒涓氭彁楂樼敓浜ф晥鐜囥�侀檷浣庢垚鏈紝骞舵弧瓒冲鎴烽渶姹傘�傞�氳繃灏嗘帓绋嬬粨鏋滀笅鍙戝埌璁惧涓婄殑鏅鸿兘瑙︽懜灞忕粓绔紝宸ュ巶鍙互瀹炴椂鐩戞帶鐢熶骇杩囩▼涓苟璋冩暣鐢熶骇璁″垝
+            </h2>
+            <div class="button">
+              <div class="go">绔嬪嵆璐拱</div>
+              <div class="in">绔嬪嵆鍜ㄨ</div>
+            </div>
+            <ul>
+              <div>浜у搧浼樺娍</div>
+              <li>杩囩▼鐩戞帶</li>
+              <li>鏁版嵁鍙鍖�</li>
+              <li>鍘嗗彶婧簮</li>
+              <li>棰勬祴鎬у垎鏋�</li>
+              <li>浼樺寲鎻愬崌</li>
+            </ul>
+          </div>
         </div>
         <!-- 鍟嗗搧鍗＄墖 -->
         <GoodsCard :cardData="cardData"></GoodsCard>
-        <BottomRail></BottomRail>
         <!-- <el-button @mouseenter="show3 = !show3">Click Me</el-button> -->
-        
       </div>
     </div>
-    <!-- 鑱旂郴鎴戜滑 -->
-    <ContactUs></ContactUs>
+    <!-- AI鐖嗘 -->
+
+    <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>
+
+      <!-- 鑱旂郴鎴戜滑 -->
+      <ContactUs></ContactUs>
+    </div>
+
+    <!-- footer -->
+    <BottomRail></BottomRail>
+    <!-- <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> -->
   </div>
 </template>
 
@@ -245,21 +398,24 @@
 import GoodsCard from "../goodsCard/goodsCard.vue";
 import CarouselImg from "../carouselImg/carouselImg.vue";
 import BottomRail from "../bottomRail/bottomRail.vue";
-import ContactUs from "../contactUs/contactUs.vue"
+import ContactUs from "../contactUs/contactUs.vue";
+import Recommends from "@/views/recommend/recommendForYou.vue";
 export default {
   name: "HomePage",
   components: {
     CarouselImg,
     GoodsCard,
     BottomRail,
-    ContactUs
+    ContactUs,
+    Recommends,
   },
   props: {},
   data() {
     return {
       activeName: "first",
       parentMessage: "Hello from parent component",
-      show3:true,
+      show3: true,
+      // 鐑棬浜у搧
       cardData: [
         // {
         //   goodsRightShow: 1,
@@ -274,7 +430,7 @@
         // },
         {
           goodsRightShow: 1,
-          haveMindTo: false, //鍜ㄨ銆佽喘涔�
+          haveMindTo: true, //鍜ㄨ銆佽喘涔�
           title: "CRM瀹㈡埛绠＄悊绯荤粺",
           brief: "璧嬭兘鍚勮涓氬疄鐜颁竴浣撳寲鏁板瓧鍖栬浆鍨�",
           imgSrc: "绠ご.png",
@@ -341,122 +497,169 @@
             "鏅鸿兘缁堢閫氳繃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",
+        //     },
+        //   ],
+        // },
+      ],
+      recommendsData: [
         {
-          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",
-            },
-          ],
+          title: "璁惧鏁呴殰妫�娴�",
+          label: "绠楁硶",
+          intro: "鏀寔閫氳繃妫�娴嬭澶囨晠闅滃師鍥犲強鎻愪緵鏁呴殰棰勬祴鍜岀姸鎬佹娴嬬瓑",
+          duration: 1,
+          quantity: 1,
+          price: "540.00",
+          oldPrice: "900.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",
-            },
-          ],
+          title: "璁惧鏁呴殰妫�娴�",
+          label: "绠楁硶",
+          intro: "鏀寔閫氳繃妫�娴嬭澶囨晠闅滃師鍥犲強鎻愪緵鏁呴殰棰勬祴鍜岀姸鎬佹娴嬬瓑",
+          duration: 1,
+          quantity: 1,
+          price: "540.00",
+          oldPrice: "900.00",
+        },
+        {
+          title: "璁惧鏁呴殰妫�娴�",
+          label: "绠楁硶",
+          intro: "鏀寔閫氳繃妫�娴嬭澶囨晠闅滃師鍥犲強鎻愪緵鏁呴殰棰勬祴鍜岀姸鎬佹娴嬬瓑",
+          duration: 1,
+          quantity: 1,
+          price: "540.00",
+          oldPrice: "900.00",
+        },
+        {
+          title: "璁惧鏁呴殰妫�娴�",
+          label: "搴旂敤",
+          intro: "鏀寔閫氳繃妫�娴嬭澶囨晠闅滃師鍥犲強鎻愪緵鏁呴殰棰勬祴鍜岀姸鎬佹娴嬬瓑",
+          duration: 1,
+          quantity: 1,
+          price: "540.00",
+          oldPrice: "900.00",
+        },
+        {
+          title: "璁惧鏁呴殰妫�娴�",
+          label: "搴旂敤",
+          intro: "鏀寔閫氳繃妫�娴嬭澶囨晠闅滃師鍥犲強鎻愪緵鏁呴殰棰勬祴鍜岀姸鎬佹娴嬬瓑",
+          duration: 1,
+          quantity: 1,
+          price: "540.00",
+          oldPrice: "900.00",
         },
       ],
     };
@@ -483,494 +686,689 @@
   width: 200px;
 }
 
-.header {
-  width: 1920px;
-  height: 94px;
-  display: flex;
-  background: #181F30;
-  box-shadow: 0px 2px 18px 0px rgba(0,0,0,0.12);
-  .center {
-    height: 44px;
+#app {
+  margin: 0 auto;
+  .header {
+    width: 1920px;
+    height: 94px;
     display: flex;
-    justify-content: space-between;
-    align-items: center;
-    .topleft {
-      width: 675px;
-      display: flex;
-      align-items: center;
-      img {
-        width: 106.63px;
-        height: 22px;
-        margin-right: 40px;
-      }
-      input {
-        width: 413px;
-        height: 44px;
-        box-sizing: border-box;
-        padding-left: 20px;
-        border: 1.5px solid #ff680d;
-        outline: none;
-        box-shadow: none;
-        font-size: 14px;
-        line-height: 20px;
-        color: rgba(0, 0, 0, 0.9);
-        margin-right: 10px;
-      }
-      input::-webkit-input-placeholder {
-        color: rgba(0, 0, 0, 0.4);
-      }
-      span {
-        text-align: center;
-        width: 104px;
-        height: 44px;
-        background: #ff680d;
-        border-color: #ff680d;
-        box-shadow: none;
-        font-size: 16px;
-        line-height: 44px;
-        color: #fff;
-        cursor: pointer;
-        font-family: PingFangSC-Medium, sans-serif;
-      }
-    }
-    .topright {
-      width: 453px;
+    background: #181f30;
+    box-shadow: 0px 2px 18px 0px rgba(0, 0, 0, 0.12);
+    .center {
       height: 44px;
-      line-height: 44px;
-      a {
-        margin-left: 40px;
-        font-size: 14px;
-        // color: rgba(0, 0, 0, 0.9);
-        color: #ffffff !important;
-        text-decoration: none;
-        font-family: PingFangSC-Medium, sans-serif;
-      }
-      a:hover{
-        color: #FF680D !important;
-      }
-      :first-child {
-        margin-left: 0;
-      }
-      a:hover,
-      a:visited,
-      a:link,
-      a:active {
-        color: rgba(0, 0, 0, 0.9);
-      }
-    }
-  }
-}
-.banner {
-  height: 650px;
-  background-image: url(../../../public/image/home/VCG211377759802@3x.png);
-  background-repeat: no-repeat;
-  // background: #ccc;
-  background-size: cover;
-  display: flex;
-  align-items: center;
-  .center {
-    height: 334px;
-    h2 {
-      font-size: 40px;
-      line-height: 56px;
-      color: rgba(0, 0, 0, 0.9);
-      margin-bottom: 4px;
-      font-family: PingFangSC-Medium, sans-serif;
-      font-weight: 500;
-    }
-    h3 {
-      width: 630px;
-      font-size: 14px;
-      line-height: 23px;
-      color: rgba(0, 0, 0, 0.9);
-      font-weight: 500;
-      overflow: hidden;
-    }
-    .button {
-      margin-top: 53px;
-      span {
-        display: inline-block;
-        width: 120px;
-        height: 44px;
-        line-height: 44px;
-        background-color: #ff680d;
-        border: 2px solid #ff680d;
-        font-size: 16px;
-        color: #fff;
-        text-align: center;
-        cursor: pointer;
-        font-family: PingFangSC-Medium, sans-serif;
-      }
-      .cry {
-        color: #ff680d;
-        background: #fff;
-        margin-left: 16px;
-      }
-    }
-    ul {
-      display: flex;
-      margin-top: 126px;
-      padding: 0;
-      li {
-        list-style: none;
-        width: 30px;
-        height: 4px;
-        background: #dbdde7;
-        margin-right: 10px;
-        cursor: pointer;
-      }
-      :first-child {
-        background: #ff680d;
-      }
-    }
-  }
-}
-.third {
-  height: 295px;
-  width: 100%;
-  background: #fff;
-  .center {
-    height: 100%;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    hr {
-      width: 1px;
-      height: 159px;
-      background: #d9d9d9;
-      border: none;
-    }
-    div {
-      width: 278px;
-      height: 227px;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      img {
-        width: 88px;
-        height: 88px;
-      }
-      h1 {
-        font-size: 22px;
-        line-height: 30px;
-        color: rgba(0, 0, 0, 0.9);
-        margin-top: 30px;
-        font-family: PingFangSC-Medium, sans-serif;
-        font-weight: 600;
-      }
-      h2 {
-        font-size: 14px;
-        line-height: 24px;
-        color: rgba(0, 0, 0, 0.6);
-        font-weight: 500;
-        text-align: center;
-      }
-    }
-  }
-}
-.forth {
-  // height: 600px;
-  // width: 100%;
-  // background: #f2f2f2;
-  display: flex;
-  align-items: center;
-
-  width: 1920px;
-height: 600px;
-background: #F2F2F2;
-  .center {
-    height: 484px;
-    position: relative;
-    top: 0;
-    left: 0;
-    > h1 {
-      font-size: 30px;
-      line-height: 42px;
-      color: rgba(0, 0, 0, 0.9);
-      margin-bottom: 6px;
-      font-weight: 600;
-      font-family: PingFangSC-Medium, sans-serif;
-    }
-    > h2 {
-      font-size: 14px;
-      line-height: 23px;
-      font-weight: 500;
-      color: rgba(0, 0, 0, 0.9);
-    }
-    .bottom {
       display: flex;
       justify-content: space-between;
-      margin-top: 23px;
-      .chil {
-        width: 270px;
-        height: 390px;
-        background: #fff;
-        padding: 30px 16px;
-        box-sizing: border-box;
-        position: relative;
-        top: 0;
-        left: 0;
-        > h1:first-child {
-          font-size: 18px;
-          line-height: 25px;
-          color: rgba(0, 0, 0, 0.9);
+      align-items: center;
+      .topleft {
+        width: 675px;
+        display: flex;
+        align-items: center;
+        img {
+          width: 106.63px;
+          height: 22px;
+          margin-right: 40px;
         }
-        > b {
-          position: absolute;
-          top: 32px;
-          right: 16px;
-          font-size: 12px;
-          line-height: 21px;
-          color: #ff680d;
-          width: 40px;
-          height: 21px;
-          border: 1px solid #ff680d;
-          text-align: center;
-          font-weight: 500;
-          font-family: PingFangSC-Medium, sans-serif;
-        }
-        hr {
-          width: 100%;
-          height: 1px;
-          border: none;
-          background: rgba(0, 0, 0, 0.1);
-          margin: 10px 0 5px 0;
-        }
-        > h2 {
-          font-size: 12px;
-          line-height: 17px;
-          color: rgba(0, 0, 0, 0.5);
-          font-weight: 500;
-        }
-        > h2:nth-child(3) {
-          line-height: 20px;
-          width: 180px;
-        }
-        > h3 {
-          font-size: 16px;
-          line-height: 22px;
-          color: rgba(0, 0, 0, 0.9);
-          margin-top: 2px;
-        }
-        h4 {
-          font-size: 20px;
-          line-height: 28px;
-          color: #ff680d;
-          margin-top: 5px;
-          font-weight: 600;
-          span {
-            color: rgba(0, 0, 0, 0.6);
-            font-size: 18px;
-            padding-left: 7px;
-          }
-        }
-        > h5 {
-          text-decoration: line-through;
+        input {
+          width: 413px;
+          height: 44px;
+          box-sizing: border-box;
+          padding-left: 20px;
+          border: 1.5px solid #ff680d;
+          outline: none;
+          box-shadow: none;
           font-size: 14px;
           line-height: 20px;
-          color: rgba(0, 0, 0, 0.2);
-          font-weight: 600;
+          color: rgba(0, 0, 0, 0.9);
+          margin-right: 10px;
         }
-        > .down {
-          position: absolute;
-          left: 0;
-          bottom: 0;
-          width: 100%;
-          height: 62px;
-          background: #f9f9f9;
-          padding: 0 14px;
-          box-sizing: border-box;
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          > div {
-            width: 100px;
-            height: 38px;
-            font-size: 16px;
-            line-height: 38px;
-            // background: #FF680D;
-            text-align: center;
-            cursor: pointer;
-            color: #ff680d;
-            border: 1px solid #ff680d;
-            font-family: PingFangSC-Medium, sans-serif;
-            // font-weight: 550;
-          }
-          .in {
-            background: #f9f9f9;
-            color: rgba(0, 0, 0, 0.9);
-            border: none;
-          }
+        input::-webkit-input-placeholder {
+          color: rgba(0, 0, 0, 0.4);
+        }
+        span {
+          text-align: center;
+          width: 104px;
+          height: 44px;
+          background: #ff680d;
+          border-color: #ff680d;
+          box-shadow: none;
+          font-size: 16px;
+          line-height: 44px;
+          color: #fff;
+          cursor: pointer;
+          font-family: PingFangSC-Medium, sans-serif;
         }
       }
-      .change {
+      .topright {
+        width: 453px;
+        height: 44px;
+        line-height: 44px;
+        a {
+          margin-left: 40px;
+          font-size: 14px;
+          // color: rgba(0, 0, 0, 0.9);
+          color: #ffffff !important;
+          text-decoration: none;
+          font-family: PingFangSC-Medium, sans-serif;
+        }
+        a:hover {
+          color: #ff680d !important;
+        }
+        :first-child {
+          margin-left: 0;
+        }
+        a:hover,
+        a:visited,
+        a:link,
+        a:active {
+          color: rgba(0, 0, 0, 0.9);
+        }
+      }
+    }
+  }
+  .banner {
+    height: 650px;
+    background-image: url(../../../public/image/home/VCG211377759802@3x.png);
+    background-repeat: no-repeat;
+    // background: #ccc;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    .center {
+      height: 334px;
+      h2 {
+        font-size: 40px;
+        line-height: 56px;
+        color: rgba(0, 0, 0, 0.9);
+        margin-bottom: 4px;
+        font-family: PingFangSC-Medium, sans-serif;
+        font-weight: 500;
+      }
+      h3 {
+        width: 630px;
+        font-size: 14px;
+        line-height: 23px;
+        color: rgba(0, 0, 0, 0.9);
+        font-weight: 500;
+        overflow: hidden;
+      }
+      .button {
+        margin-top: 53px;
+        span {
+          display: inline-block;
+          width: 120px;
+          height: 44px;
+          line-height: 44px;
+          background-color: #ff680d;
+          border: 2px solid #ff680d;
+          font-size: 16px;
+          color: #fff;
+          text-align: center;
+          cursor: pointer;
+          font-family: PingFangSC-Medium, sans-serif;
+        }
+        .cry {
+          color: #ff680d;
+          background: #fff;
+          margin-left: 16px;
+        }
+      }
+      ul {
         display: flex;
-        position: absolute;
-        top: 21px;
-        right: 0;
-        > div {
-          width: 40px;
-          height: 40px;
+        margin-top: 126px;
+        padding: 0;
+        li {
+          list-style: none;
+          width: 30px;
+          height: 4px;
+          background: #dbdde7;
+          margin-right: 10px;
           cursor: pointer;
         }
         :first-child {
-          margin-right: 18px;
+          background: #ff680d;
         }
       }
     }
   }
-}
-.fif {
-  width: 100%;
-  background: #FFFFFF;
-  .center {
-    margin-top: 80px;
-    > h1 {
-      font-size: 30px;
-      line-height: 42px;
-      color: rgba(0, 0, 0, 0.9);
-    }
-    > h2 {
-      margin-top: 6px;
-      margin-bottom: 48px;
-      font-size: 14px;
-      line-height: 23px;
-      color: rgba(0, 0, 0, 0.9);
-      font-weight: 500;
-    }
-    .pic {
-      width: 100%;
-      height: 600px;
-      margin-bottom: 68px;
+  .third {
+    height: 295px;
+    width: 100%;
+    background: #fff;
+    .center {
+      height: 100%;
       display: flex;
-      .left {
-        width: 20%;
-        height: 100%;
-        box-sizing: border-box;
-        padding: 53px 23px;
-        background: #fa640a;
-        position: relative;
-        left: 0;
-        top: 0;
+      justify-content: space-between;
+      align-items: center;
+      hr {
+        width: 1px;
+        height: 159px;
+        background: #d9d9d9;
+        border: none;
+      }
+      div {
+        width: 278px;
+        height: 227px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        img {
+          width: 88px;
+          height: 88px;
+        }
         h1 {
-          font-size: 30px;
-          line-height: 42px;
-          color: #fff;
+          font-size: 22px;
+          line-height: 30px;
+          color: rgba(0, 0, 0, 0.9);
+          margin-top: 30px;
+          font-family: PingFangSC-Medium, sans-serif;
+          font-weight: 600;
         }
         h2 {
           font-size: 14px;
-          line-height: 20px;
-          color: #fff;
-          margin-top: 30px;
+          line-height: 24px;
+          color: rgba(0, 0, 0, 0.6);
           font-weight: 500;
-        }
-        img {
-          width: 69px;
-          height: 12.38px;
-          position: absolute;
-          left: 23px;
-          bottom: 98px;
+          text-align: center;
         }
       }
-      .right {
-        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: 620px 340px;
-        background-repeat: no-repeat;
-        background-position-x: right;
-        background-position-y: bottom;
+    }
+  }
+  .forth {
+    // height: 600px;
+    // width: 100%;
+    // background: #f2f2f2;
+    display: flex;
+    align-items: center;
 
-        .top {
-          margin-top: -20px;
-          width: 364px;
-          height: 46px;
-          margin-bottom: 14px;
-          display: flex;
-          div {
-            width: 50%;
-            height: 100%;
-            background: #fff;
-            font-size: 16px;
-            line-height: 46px;
-            font-weight: 600;
-            box-sizing: border-box;
+    width: 1920px;
+    height: 600px;
+    background: #f2f2f2;
+    .center {
+      height: 484px;
+      position: relative;
+      top: 0;
+      left: 0;
+      > h1 {
+        font-size: 30px;
+        line-height: 42px;
+        color: rgba(0, 0, 0, 0.9);
+        margin-bottom: 6px;
+        font-weight: 600;
+        font-family: PingFangSC-Medium, sans-serif;
+      }
+      > h2 {
+        font-size: 14px;
+        line-height: 23px;
+        font-weight: 500;
+        color: rgba(0, 0, 0, 0.9);
+      }
+      .bottom {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 23px;
+        .chil {
+          width: 270px;
+          height: 390px;
+          background: #fff;
+          padding: 30px 16px;
+          box-sizing: border-box;
+          position: relative;
+          top: 0;
+          left: 0;
+          > h1:first-child {
+            font-size: 18px;
+            line-height: 25px;
+            color: rgba(0, 0, 0, 0.9);
+          }
+          > b {
+            position: absolute;
+            top: 32px;
+            right: 16px;
+            font-size: 12px;
+            line-height: 21px;
+            color: #ff680d;
+            width: 40px;
+            height: 21px;
+            border: 1px solid #ff680d;
             text-align: center;
+            font-weight: 500;
+            font-family: PingFangSC-Medium, sans-serif;
+          }
+          hr {
+            width: 100%;
+            height: 1px;
+            border: none;
+            background: rgba(0, 0, 0, 0.1);
+            margin: 10px 0 5px 0;
+          }
+          > h2 {
+            font-size: 12px;
+            line-height: 17px;
+            color: rgba(0, 0, 0, 0.5);
+            font-weight: 500;
+          }
+          > h2:nth-child(3) {
+            line-height: 20px;
+            width: 180px;
+          }
+          > h3 {
+            font-size: 16px;
+            line-height: 22px;
+            color: rgba(0, 0, 0, 0.9);
+            margin-top: 2px;
+          }
+          h4 {
+            font-size: 20px;
+            line-height: 28px;
+            color: #ff680d;
+            margin-top: 5px;
+            font-weight: 600;
+            span {
+              color: rgba(0, 0, 0, 0.6);
+              font-size: 18px;
+              padding-left: 7px;
+            }
+          }
+          > h5 {
+            text-decoration: line-through;
+            font-size: 14px;
+            line-height: 20px;
+            color: rgba(0, 0, 0, 0.2);
+            font-weight: 600;
+          }
+          > .down {
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            width: 100%;
+            height: 62px;
+            background: #f9f9f9;
+            padding: 0 14px;
+            box-sizing: border-box;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            > div {
+              width: 100px;
+              height: 38px;
+              font-size: 16px;
+              line-height: 38px;
+              // background: #FF680D;
+              text-align: center;
+              cursor: pointer;
+              color: #ff680d;
+              border: 1px solid #ff680d;
+              font-family: PingFangSC-Medium, sans-serif;
+              // font-weight: 550;
+            }
+            .in {
+              background: #f9f9f9;
+              color: rgba(0, 0, 0, 0.9);
+              border: none;
+            }
+          }
+        }
+        .change {
+          display: flex;
+          position: absolute;
+          top: 21px;
+          right: 0;
+          > div {
+            width: 40px;
+            height: 40px;
             cursor: pointer;
           }
           :first-child {
-            border-top: 3px solid #ff680d;
+            margin-right: 18px;
           }
-          :last-child {
+        }
+      }
+    }
+  }
+  .fif {
+    width: 100%;
+    background: #ffffff;
+    .center {
+      margin-top: 80px;
+      > h1 {
+        font-size: 30px;
+        line-height: 42px;
+        color: rgba(0, 0, 0, 0.9);
+      }
+      > h2 {
+        margin-top: 6px;
+        margin-bottom: 48px;
+        font-size: 14px;
+        line-height: 23px;
+        color: rgba(0, 0, 0, 0.9);
+        font-weight: 500;
+      }
+      // .pic {
+      //   width: 100%;
+      //   height: 600px;
+      //   margin-bottom: 68px;
+      //   display: flex;
+      //   .left {
+      //     width: 20%;
+      //     height: 100%;
+      //     box-sizing: border-box;
+      //     padding: 53px 23px;
+      //     background: #fa640a;
+      //     position: relative;
+      //     left: 0;
+      //     top: 0;
+      //     h1 {
+      //       font-size: 30px;
+      //       line-height: 42px;
+      //       color: #fff;
+      //     }
+      //     h2 {
+      //       font-size: 14px;
+      //       line-height: 20px;
+      //       color: #fff;
+      //       margin-top: 30px;
+      //       font-weight: 500;
+      //     }
+      //     img {
+      //       width: 69px;
+      //       height: 12.38px;
+      //       position: absolute;
+      //       left: 23px;
+      //       bottom: 98px;
+      //     }
+      //   }
+      //   .right {
+      //     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: 620px 340px;
+      //     background-repeat: no-repeat;
+      //     background-position-x: right;
+      //     background-position-y: bottom;
+
+      //     .top {
+      //       margin-top: -20px;
+      //       width: 364px;
+      //       height: 46px;
+      //       margin-bottom: 14px;
+      //       display: flex;
+      //       div {
+      //         width: 50%;
+      //         height: 100%;
+      //         background: #fff;
+      //         font-size: 16px;
+      //         line-height: 46px;
+      //         font-weight: 600;
+      //         box-sizing: border-box;
+      //         text-align: center;
+      //         cursor: pointer;
+      //       }
+      //       :first-child {
+      //         border-top: 3px solid #ff680d;
+      //       }
+      //       :last-child {
+      //         font-weight: 500;
+      //       }
+      //     }
+      //     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: right;
+      //       align-items: center;
+      //       ul {
+      //         position: absolute;
+      //         left: 59px;
+      //         bottom: 48px;
+      //         display: flex;
+      //         flex-wrap: wrap;
+      //         margin-bottom: -20px;
+      //         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;
+      //         }
+      //       }
+      //     }
+      //   }
+      //   .pane_box {
+      //     display: flex;
+      //     align-items: center;
+      //     justify-content: center;
+
+      //     .pane_left {
+      //       width: 50%;
+      //       box-sizing: border-box;
+      //       padding: 20px;
+      //       font-size: 14px;
+      //       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;
+      //       }
+      //       h4 {
+      //         color: #333;
+      //       }
+      //     }
+      //     .pane_right {
+      //       width: 50%;
+      //       text-align: center;
+      //       img {
+      //         width: 350px;
+      //         height: 200px;
+      //       }
+      //     }
+      //   }
+      //   .boot {
+      //     background-image: url(../../../public/image/home/浣嶅浘@3x\(4\).png);
+      //     background-color: #f9f9f8;
+      //     background-size: 354px 497px;
+      //   }
+      // }
+      .pic {
+        width: 100%;
+        height: 600px;
+        margin-bottom: 68px;
+        display: flex;
+        .left {
+          width: 20%;
+          height: 100%;
+          box-sizing: border-box;
+          padding: 53px 23px;
+          background: #fa640a;
+          position: relative;
+          left: 0;
+          top: 0;
+          h1 {
+            font-size: 30px;
+            line-height: 42px;
+            color: #fff;
+          }
+          h2 {
+            font-size: 14px;
+            line-height: 20px;
+            color: #fff;
+            margin-top: 30px;
             font-weight: 500;
           }
-        }
-        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;
+          img {
+            width: 69px;
+            height: 12.38px;
+            position: absolute;
+            left: 23px;
+            bottom: 98px;
           }
         }
-        .project {
-          width: 100%;
-          display: flex;
-          justify-content: right;
-          align-items: center;
+        .right {
+          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: 620px 340px;
+          background-repeat: no-repeat;
+          background-position-x: right;
+          background-position-y: bottom;
+
+          .top {
+            margin-top: -20px;
+            width: 364px;
+            height: 46px;
+            margin-bottom: 14px;
+            display: flex;
+            div {
+              width: 50%;
+              height: 100%;
+              background: #fff;
+              font-size: 16px;
+              line-height: 46px;
+              font-weight: 600;
+              box-sizing: border-box;
+              text-align: center;
+              cursor: pointer;
+            }
+            :first-child {
+              border-top: 3px solid #ff680d;
+            }
+            :last-child {
+              font-weight: 500;
+            }
+          }
+          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: rgba(0, 0, 0, 0.9);
+            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;
+            }
+          }
           ul {
+            padding: 0;
             position: absolute;
             left: 59px;
             bottom: 48px;
-            display: flex;
-            flex-wrap: wrap;
-            margin-bottom: -20px;
             div {
               font-size: 20px;
               line-height: 28px;
-              color: #999999;
+              color: #ff680d;
               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;
@@ -979,382 +1377,329 @@
               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;
-            }
           }
         }
+        .boot {
+          background-image: url(../../../public/image/home/浣嶅浘@3x\(4\).png);
+          background-color: #f9f9f8;
+          background-size: 354px 497px;
+        }
       }
-      .pane_box {
+    }
+  }
+  // .fif:after {
+  //   content: "";
+  //   height: 0;
+  //   clear: both;
+  //   display: block;
+  // }
+  .sis {
+    // height: 1021px;
+    background: #fff;
+    .center {
+      > h1 {
+        font-size: 30px;
+        line-height: 42px;
+        color: rgba(0, 0, 0, 0.9);
+        margin-bottom: 6px;
+      }
+      > h2 {
+        font-size: 14px;
+        line-height: 23px;
+        color: rgba(0, 0, 0, 0.9);
+        font-weight: normal;
+      }
+      ul {
         display: flex;
-        align-items: center;
-        justify-content: center;
-
-        .pane_left {
-          width: 50%;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        margin-top: 48px;
+        li {
+          list-style: none;
           box-sizing: border-box;
-          padding: 20px;
-          font-size: 14px;
-          div {
-            border-bottom: 0.5px solid #ccc;
-            padding: 10px 0;
+          border: 1px solid #e7e7e7;
+          border-top: 7px solid #ff680d;
+          width: 30%;
+          height: 396px;
+          margin-bottom: 30px;
+          background: #fff;
+          padding: 30px 16px;
+          box-sizing: border-box;
+          box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
+          position: relative;
+          top: 0;
+          left: 0;
+          > h1:first-child {
+            font-size: 18px;
+            line-height: 25px;
+            color: rgba(0, 0, 0, 0.9);
           }
-          .el-button {
-            border-radius: 0px;
-            width: 120px;
-            height: 44px;
-            background: #ff680d;
-            color: #fff;
+          > b {
+            position: absolute;
+            top: 32px;
+            right: 16px;
+            font-size: 12px;
+            line-height: 21px;
+            color: #ff680d;
+            width: 40px;
+            height: 21px;
+            border: 1px solid #ff680d;
+            text-align: center;
+            font-weight: 500;
+          }
+          hr {
+            width: 100%;
+            height: 1px;
+            border: none;
+            background: rgba(0, 0, 0, 0.1);
+            margin: 10px 0 5px 0;
+          }
+          > h2 {
+            font-size: 12px;
+            line-height: 17px;
+            color: rgba(0, 0, 0, 0.5);
+            font-weight: 500;
+          }
+          > h2:nth-child(3) {
+            line-height: 20px;
+            width: 95%;
+          }
+          > h3 {
             font-size: 16px;
-          }
-          .tinge {
-            color: #999;
+            line-height: 22px;
+            color: rgba(0, 0, 0, 0.9);
+            margin-top: 2px;
           }
           h4 {
-            color: #333;
-          }
-        }
-        .pane_right {
-          width: 50%;
-          text-align: center;
-          img {
-            width: 350px;
-            height: 200px;
-          }
-        }
-      }
-      .boot {
-        background-image: url(../../../public/image/home/浣嶅浘@3x\(4\).png);
-        background-color: #f9f9f8;
-        background-size: 354px 497px;
-      }
-    }
-  }
-}
-// .fif:after {
-//   content: "";
-//   height: 0;
-//   clear: both;
-//   display: block;
-// }
-.sis {
-  height: 1021px;
-  background: #fff;
-  .center {
-    > h1 {
-      font-size: 30px;
-      line-height: 42px;
-      color: rgba(0, 0, 0, 0.9);
-      margin-bottom: 6px;
-    }
-    > h2 {
-      font-size: 14px;
-      line-height: 23px;
-      color: rgba(0, 0, 0, 0.9);
-      font-weight: normal;
-    }
-    ul {
-      display: flex;
-      justify-content: space-between;
-      flex-wrap: wrap;
-      margin-top: 48px;
-      li {
-        list-style: none;
-        box-sizing: border-box;
-        border: 1px solid #e7e7e7;
-        border-top: 7px solid #ff680d;
-        width: 30%;
-        height: 396px;
-        margin-bottom: 30px;
-        background: #fff;
-        padding: 30px 16px;
-        box-sizing: border-box;
-        box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
-        position: relative;
-        top: 0;
-        left: 0;
-        > h1:first-child {
-          font-size: 18px;
-          line-height: 25px;
-          color: rgba(0, 0, 0, 0.9);
-        }
-        > b {
-          position: absolute;
-          top: 32px;
-          right: 16px;
-          font-size: 12px;
-          line-height: 21px;
-          color: #ff680d;
-          width: 40px;
-          height: 21px;
-          border: 1px solid #ff680d;
-          text-align: center;
-          font-weight: 500;
-        }
-        hr {
-          width: 100%;
-          height: 1px;
-          border: none;
-          background: rgba(0, 0, 0, 0.1);
-          margin: 10px 0 5px 0;
-        }
-        > h2 {
-          font-size: 12px;
-          line-height: 17px;
-          color: rgba(0, 0, 0, 0.5);
-          font-weight: 500;
-        }
-        > h2:nth-child(3) {
-          line-height: 20px;
-          width: 95%;
-        }
-        > h3 {
-          font-size: 16px;
-          line-height: 22px;
-          color: rgba(0, 0, 0, 0.9);
-          margin-top: 2px;
-        }
-        h4 {
-          font-size: 20px;
-          line-height: 28px;
-          color: #ff680d;
-          margin-top: 5px;
-          font-weight: 600;
-          span {
-            color: rgba(0, 0, 0, 0.6);
-            font-size: 18px;
-            padding-left: 7px;
-          }
-        }
-        > h5 {
-          text-decoration: line-through;
-          font-size: 14px;
-          line-height: 20px;
-          color: rgba(0, 0, 0, 0.2);
-          font-weight: 600;
-        }
-        > .down {
-          position: absolute;
-          left: 0;
-          bottom: 0;
-          width: 100%;
-          height: 62px;
-          background: #f9f9f9;
-          padding: 0 14px;
-          box-sizing: border-box;
-          display: flex;
-          // justify-content: space-between;
-          align-items: center;
-          > div {
-            width: 100px;
-            height: 38px;
-            font-size: 16px;
-            line-height: 38px;
-            // background: #FF680D;
-            text-align: center;
-            cursor: pointer;
+            font-size: 20px;
+            line-height: 28px;
             color: #ff680d;
-            border: 1px solid #ff680d;
+            margin-top: 5px;
+            font-weight: 600;
+            span {
+              color: rgba(0, 0, 0, 0.6);
+              font-size: 18px;
+              padding-left: 7px;
+            }
           }
-          .in {
+          > h5 {
+            text-decoration: line-through;
+            font-size: 14px;
+            line-height: 20px;
+            color: rgba(0, 0, 0, 0.2);
+            font-weight: 600;
+          }
+          > .down {
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            width: 100%;
+            height: 62px;
             background: #f9f9f9;
-            color: rgba(0, 0, 0, 0.9);
-            border: none;
-            margin-left: 6px;
+            padding: 0 14px;
+            box-sizing: border-box;
+            display: flex;
+            // justify-content: space-between;
+            align-items: center;
+            > div {
+              width: 100px;
+              height: 38px;
+              font-size: 16px;
+              line-height: 38px;
+              // background: #FF680D;
+              text-align: center;
+              cursor: pointer;
+              color: #ff680d;
+              border: 1px solid #ff680d;
+            }
+            .in {
+              background: #f9f9f9;
+              color: rgba(0, 0, 0, 0.9);
+              border: none;
+              margin-left: 6px;
+            }
           }
         }
-      }
-      .change {
-        display: flex;
-        position: absolute;
-        top: 21px;
-        right: 0;
-        :first-child {
-          margin-right: 18px;
-        }
-      }
-    }
-  }
-}
-.seven {
-  height: 636px;
-  background: #f2f2f2;
-  .center {
-    padding-top: 48px;
-    > h1 {
-      font-size: 30px;
-      line-height: 42px;
-      color: rgba(0, 0, 0, 0.9);
-      margin-bottom: 6px;
-    }
-    > h2 {
-      font-size: 14px;
-      line-height: 23px;
-      color: rgba(0, 0, 0, 0.9);
-      font-weight: normal;
-    }
-    ul {
-      display: flex;
-      justify-content: space-between;
-      flex-wrap: wrap;
-      margin-top: 48px;
-      li {
-        list-style: none;
-        box-sizing: border-box;
-        border: 1px solid #e7e7e7;
-        border-top: 7px solid #ff680d;
-        width: 30%;
-        height: 396px;
-        margin-bottom: 30px;
-        background: #fff;
-        padding: 30px 16px;
-        box-sizing: border-box;
-        box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
-        position: relative;
-        top: 0;
-        left: 0;
-        > h1:first-child {
-          font-size: 18px;
-          line-height: 25px;
-          color: rgba(0, 0, 0, 0.9);
-        }
-        > b {
-          position: absolute;
-          top: 32px;
-          right: 16px;
-          font-size: 12px;
-          line-height: 21px;
-          color: #ff680d;
-          width: 40px;
-          height: 21px;
-          border: 1px solid #ff680d;
-          text-align: center;
-          font-weight: 500;
-        }
-        hr {
-          width: 100%;
-          height: 1px;
-          border: none;
-          background: rgba(0, 0, 0, 0.1);
-          margin: 10px 0 5px 0;
-        }
-        > h2 {
-          font-size: 12px;
-          line-height: 17px;
-          color: rgba(0, 0, 0, 0.5);
-          font-weight: 500;
-        }
-        > h2:nth-child(3) {
-          line-height: 20px;
-          width: 95%;
-        }
-        > h3 {
-          font-size: 16px;
-          line-height: 22px;
-          color: rgba(0, 0, 0, 0.9);
-          margin-top: 2px;
-        }
-        h4 {
-          font-size: 20px;
-          line-height: 28px;
-          color: #ff680d;
-          margin-top: 5px;
-          font-weight: 600;
-          span {
-            color: rgba(0, 0, 0, 0.6);
-            font-size: 18px;
-            padding-left: 7px;
-          }
-        }
-        > h5 {
-          text-decoration: line-through;
-          font-size: 14px;
-          line-height: 20px;
-          color: rgba(0, 0, 0, 0.2);
-          font-weight: 600;
-        }
-        > .down {
-          position: absolute;
-          left: 0;
-          bottom: 0;
-          width: 100%;
-          height: 62px;
-          background: #f9f9f9;
-          padding: 0 14px;
-          box-sizing: border-box;
+        .change {
           display: flex;
-          // justify-content: space-between;
-          align-items: center;
-          > div {
-            width: 100px;
-            height: 38px;
-            font-size: 16px;
-            line-height: 38px;
-            // background: #FF680D;
-            text-align: center;
-            cursor: pointer;
-            color: #ff680d;
-            border: 1px solid #ff680d;
+          position: absolute;
+          top: 21px;
+          right: 0;
+          :first-child {
+            margin-right: 18px;
           }
-          .in {
-            background: #f9f9f9;
-            color: rgba(0, 0, 0, 0.9);
-            border: none;
-            margin-left: 6px;
-          }
-        }
-      }
-      .change {
-        display: flex;
-        position: absolute;
-        top: 21px;
-        right: 0;
-        :first-child {
-          margin-right: 18px;
         }
       }
     }
   }
-}
-.eight {
-  height: 202px;
-  .center {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    ul {
-      display: flex;
-      width: 434px;
-      justify-content: space-between;
-      li {
-        list-style: none;
-        a {
-          font-size: 14px;
-          line-height: 20px;
-          color: rgba(0, 0, 0, 0.9);
-          text-decoration: none;
+  .seven {
+    // height: 636px;
+    background: #f2f2f2;
+    .center {
+      padding-top: 48px;
+      > h1 {
+        font-size: 30px;
+        line-height: 42px;
+        color: rgba(0, 0, 0, 0.9);
+        margin-bottom: 6px;
+      }
+      > h2 {
+        font-size: 14px;
+        line-height: 23px;
+        color: rgba(0, 0, 0, 0.9);
+        font-weight: normal;
+      }
+      ul {
+        display: flex;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        margin-top: 48px;
+        li {
+          list-style: none;
+          box-sizing: border-box;
+          border: 1px solid #e7e7e7;
+          border-top: 7px solid #ff680d;
+          width: 30%;
+          height: 396px;
+          margin-bottom: 30px;
+          background: #fff;
+          padding: 30px 16px;
+          box-sizing: border-box;
+          box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
+          position: relative;
+          top: 0;
+          left: 0;
+          > h1:first-child {
+            font-size: 18px;
+            line-height: 25px;
+            color: rgba(0, 0, 0, 0.9);
+          }
+          > b {
+            position: absolute;
+            top: 32px;
+            right: 16px;
+            font-size: 12px;
+            line-height: 21px;
+            color: #ff680d;
+            width: 40px;
+            height: 21px;
+            border: 1px solid #ff680d;
+            text-align: center;
+            font-weight: 500;
+          }
+          hr {
+            width: 100%;
+            height: 1px;
+            border: none;
+            background: rgba(0, 0, 0, 0.1);
+            margin: 10px 0 5px 0;
+          }
+          > h2 {
+            font-size: 12px;
+            line-height: 17px;
+            color: rgba(0, 0, 0, 0.5);
+            font-weight: 500;
+          }
+          > h2:nth-child(3) {
+            line-height: 20px;
+            width: 95%;
+          }
+          > h3 {
+            font-size: 16px;
+            line-height: 22px;
+            color: rgba(0, 0, 0, 0.9);
+            margin-top: 2px;
+          }
+          h4 {
+            font-size: 20px;
+            line-height: 28px;
+            color: #ff680d;
+            margin-top: 5px;
+            font-weight: 600;
+            span {
+              color: rgba(0, 0, 0, 0.6);
+              font-size: 18px;
+              padding-left: 7px;
+            }
+          }
+          > h5 {
+            text-decoration: line-through;
+            font-size: 14px;
+            line-height: 20px;
+            color: rgba(0, 0, 0, 0.2);
+            font-weight: 600;
+          }
+          > .down {
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            width: 100%;
+            height: 62px;
+            background: #f9f9f9;
+            padding: 0 14px;
+            box-sizing: border-box;
+            display: flex;
+            // justify-content: space-between;
+            align-items: center;
+            > div {
+              width: 100px;
+              height: 38px;
+              font-size: 16px;
+              line-height: 38px;
+              // background: #FF680D;
+              text-align: center;
+              cursor: pointer;
+              color: #ff680d;
+              border: 1px solid #ff680d;
+            }
+            .in {
+              background: #f9f9f9;
+              color: rgba(0, 0, 0, 0.9);
+              border: none;
+              margin-left: 6px;
+            }
+          }
+        }
+        .change {
+          display: flex;
+          position: absolute;
+          top: 21px;
+          right: 0;
+          :first-child {
+            margin-right: 18px;
+          }
         }
       }
     }
-    span {
-      font-size: 14px;
-      line-height: 20px;
-      color: rgba(0, 0, 0, 0.4);
-      margin-top: 13px;
+  }
+  .eight {
+    height: 202px;
+    .center {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      ul {
+        display: flex;
+        width: 434px;
+        justify-content: space-between;
+        li {
+          list-style: none;
+          a {
+            font-size: 14px;
+            line-height: 20px;
+            color: rgba(0, 0, 0, 0.9);
+            text-decoration: none;
+          }
+        }
+      }
+      span {
+        font-size: 14px;
+        line-height: 20px;
+        color: rgba(0, 0, 0, 0.4);
+        margin-top: 13px;
+      }
     }
   }
 }
diff --git a/src/main.js b/src/main.js
index f22e18f..91c991c 100644
--- a/src/main.js
+++ b/src/main.js
@@ -2,6 +2,7 @@
 import App from './App.vue'
 import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
+import '@/assets/styles/reset.css'
 
 Vue.config.productionTip = false
 Vue.use(ElementUI);
diff --git a/src/views/recommend/recommendForYou.vue b/src/views/recommend/recommendForYou.vue
new file mode 100644
index 0000000..fa25b5e
--- /dev/null
+++ b/src/views/recommend/recommendForYou.vue
@@ -0,0 +1,246 @@
+<template>
+  <div>
+    <div class="forth">
+      <div class="center">
+        <h1>涓烘偍鎺ㄨ崘</h1>
+        <h2>鍒掔嚎浠锋牸涓轰骇鍝佸巻鍙查攢鍞爣浠疯�岄潪鍘熶环</h2>
+        <div class="bottom">
+          <div class="change">
+            <div class="left">
+              <img
+                src="../../../public/image/home/缂栫粍 13澶囦唤@3x.png"
+                alt=""
+                style="width: 40px; height: 40px"
+              />
+            </div>
+            <div class="right">
+              <img
+                src="../../../public/image/home/缂栫粍 13@3x.png"
+                alt=""
+                style="width: 40px; height: 40px"
+              />
+            </div>
+          </div>
+          <el-card
+            shadow="hover"
+            class="chil"
+            v-for="(item, index) in recommendsData"
+            :key="index"
+          >
+            <h1>{{ item.title }}</h1>
+            <b>{{ item.label }}</b>
+            <h2>{{ item.intro }}</h2>
+            <hr />
+            <h2>璐拱鏃堕暱</h2>
+            <h3>{{ item.duration }}骞�</h3>
+            <hr />
+            <h2>璐拱鏁伴噺</h2>
+            <h3>{{ item.quantity }}</h3>
+            <hr />
+            <h4>锟{ item.price }}<span>/骞�</span></h4>
+            <h5>锟{ item.oldPrice }}</h5>
+            <div class="down">
+              <div class="go">绔嬪嵆璐拱</div>
+              <div class="in">鍔犲叆璐墿杞�</div>
+            </div>
+          </el-card>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    recommendsData: {
+      type: Array,
+    },
+  },
+  data() {
+    return {};
+  },
+  computed: {},
+  created() {},
+  mounted() {},
+  watch: {},
+  methods: {},
+  components: {},
+};
+</script>
+
+<style scoped lang="scss">
+.forth {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1920px;
+  height: 600px;
+  background: #f2f2f2;
+  .center {
+    width: 1440px;
+    height: 484px;
+    position: relative;
+    top: 0;
+    left: 0;
+    h1 {
+      font-size: 30px;
+      line-height: 42px;
+      color: rgba(0, 0, 0, 0.9);
+      margin-bottom: 6px;
+      font-weight: 600;
+      font-family: PingFangSC-Medium, sans-serif;
+      margin: 0;
+    }
+    h2 {
+      font-size: 14px;
+      line-height: 23px;
+      font-weight: 500;
+      margin: 0;
+      color: rgba(0, 0, 0, 0.9);
+    }
+    h4 {
+      margin: 0;
+    }
+    h5 {
+      margin: 0;
+    }
+    .bottom {
+      display: flex;
+      justify-content: space-between;
+      margin-top: 23px;
+      .chil {
+        width: 270px;
+        height: 390px;
+        background: #fff;
+        padding: 30px 16px;
+        box-sizing: border-box;
+        position: relative;
+        top: 0;
+        left: 0;
+        h1:first-child {
+          font-size: 18px;
+          line-height: 25px;
+          color: rgba(0, 0, 0, 0.9);
+        }
+        b {
+          position: absolute;
+          top: 32px;
+          right: 16px;
+          font-size: 12px;
+          line-height: 21px;
+          color: #ff680d;
+          width: 40px;
+          height: 21px;
+          border: 1px solid #ff680d;
+          text-align: center;
+          font-weight: 500;
+          font-family: PingFangSC-Medium, sans-serif;
+        }
+        hr {
+          width: 100%;
+          height: 1px;
+          border: none;
+          background: rgba(0, 0, 0, 0.1);
+          margin: 10px 0 5px 0;
+        }
+        h2 {
+          font-size: 12px;
+          line-height: 17px;
+          color: rgba(0, 0, 0, 0.5);
+          font-weight: 500;
+        }
+        h2:nth-child(3) {
+          line-height: 20px;
+          width: 180px;
+        }
+        h3 {
+          font-size: 16px;
+          line-height: 22px;
+          color: rgba(0, 0, 0, 0.9);
+          margin-top: 2px;
+        }
+        h4 {
+          font-size: 20px;
+          line-height: 28px;
+          color: #ff680d;
+          margin-top: 5px;
+          font-weight: 600;
+          span {
+            color: rgba(0, 0, 0, 0.6);
+            font-size: 18px;
+            padding-left: 7px;
+          }
+        }
+        h5 {
+          text-decoration: line-through;
+          font-size: 14px;
+          line-height: 20px;
+          color: rgba(0, 0, 0, 0.2);
+          font-weight: 600;
+        }
+        .down {
+          position: absolute;
+          left: 0;
+          bottom: 0;
+          width: 100%;
+          height: 62px;
+          background: #f9f9f9;
+          padding: 0 14px;
+          box-sizing: border-box;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          div {
+            width: 100px;
+            height: 38px;
+            font-size: 16px;
+            line-height: 38px;
+            // background: #FF680D;
+            text-align: center;
+            cursor: pointer;
+            color: #ff680d;
+            border: 1px solid #ff680d;
+            font-family: PingFangSC-Medium, sans-serif;
+            // font-weight: 550;
+          }
+          .in {
+            background: #f9f9f9;
+            color: rgba(0, 0, 0, 0.9);
+            border: none;
+          }
+          .go {
+            background: #fff;
+            color: #ff680d;
+            border: 1px solid #ff680d;
+          }
+          .go:hover {
+            background-color: #ff680d;
+            color: #fff;
+          }
+        }
+      }
+      .chil:nth-of-type(n + 5) {
+        b {
+          color: #2564fb;
+          border: 1px solid #2564fb;
+        }
+      }
+      .change {
+        display: flex;
+        position: absolute;
+        top: 21px;
+        right: 0;
+        div {
+          width: 40px;
+          height: 40px;
+          cursor: pointer;
+        }
+        :first-child {
+          margin-right: 18px;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/vue.config.js b/vue.config.js
index 910e297..5339a6b 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,4 +1,5 @@
 const { defineConfig } = require('@vue/cli-service')
 module.exports = defineConfig({
-  transpileDependencies: true
+  transpileDependencies: true,
+  lintOnSave:false,
 })

--
Gitblit v1.8.0