From f3d9e9f22e115c399af7adf9759f5846c8c33bd5 Mon Sep 17 00:00:00 2001
From: zuozhengqing <a13193816592@163.com>
Date: 星期一, 25 九月 2023 14:57:49 +0800
Subject: [PATCH] ”样式重置，布局修改“
---
src/components/home/HomePage.vue | 2244 ++++++++++++++++++++++++++++++++--------------------------
1 files changed, 1,220 insertions(+), 1,024 deletions(-)
diff --git a/src/components/home/HomePage.vue b/src/components/home/HomePage.vue
index 3c7a5d8..1487009 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,127 +67,17 @@
</div>
</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>
@@ -199,7 +91,6 @@
</h2>
<div class="button">
<div class="go">绔嬪嵆璐拱</div>
- <!-- <div class="in">绔嬪嵆鍜ㄨ</div> -->
</div>
<div class="project">
<ul>
@@ -224,120 +115,7 @@
</div>
</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> -->
<div class="pic">
<div class="left">
<h1>SmartAI</h1>
@@ -345,34 +123,33 @@
<h2>涓�閿喘涔帮紝瀹炵幇浼佷笟鏅鸿兘鍖栨敼閫�</h2>
<img src="../../../public/image/home/绠ご.png" alt="" />
</div>
- <div class="right boot">
- <div class="top">
- <div>鏅烘収缁堢绯诲垪1</div>
- <div>鏅烘収缁堢绯诲垪1</div>
- </div>
+ <div class="right">
+ <h1>鏅烘収宸ュ巶绯荤粺V1.0</h1>
<h2>
- 閫氳繃鍦ㄦ瘡涓�涓伐搴忕殑璁惧鎴栨満鍙板悎閫備綅缃紝瀹夎瑙︽懜鏅鸿兘缁堢璁惧锛岀敤浜庡皢鎺掍骇浠诲姟涓嬪彂鑷虫瘡涓�涓櫤鑳界粓绔睆骞�
+ 鐢熶骇鎺掔▼绯荤粺鏄竴绉嶇敤浜庝紭鍖栫敓浜ф祦绋嬪拰璧勬簮鍒╃敤鐨勫伐鍏凤紝瀹冨彲浠ュ府鍔╁埗閫犱紒涓氭彁楂樼敓浜ф晥鐜囥�侀檷浣庢垚鏈紝骞舵弧瓒冲鎴烽渶姹傘�傞�氳繃灏嗘帓绋嬬粨鏋滀笅鍙戝埌璁惧涓婄殑鏅鸿兘瑙︽懜灞忕粓绔紝宸ュ巶鍙互瀹炴椂鐩戞帶鐢熶骇杩囩▼涓苟璋冩暣鐢熶骇璁″垝
</h2>
<div class="button">
<div class="go">绔嬪嵆璐拱</div>
<div class="in">绔嬪嵆鍜ㄨ</div>
</div>
- <ul style="bottom: 42px">
+ <ul>
<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>
+ <li>杩囩▼鐩戞帶</li>
+ <li>鏁版嵁鍙鍖�</li>
+ <li>鍘嗗彶婧簮</li>
+ <li>棰勬祴鎬у垎鏋�</li>
+ <li>浼樺寲鎻愬崌</li>
</ul>
</div>
</div>
+ <!-- 鍟嗗搧鍗＄墖 -->
+ <GoodsCard :cardData="cardData"></GoodsCard>
+ <!-- <el-button @mouseenter="show3 = !show3">Click Me</el-button> -->
</div>
</div>
- <!-- <div class="sis">
+ <!-- AI鐖嗘 -->
+
+ <div class="sis">
<div class="center">
<h1>AI鐖嗘</h1>
<h2>绮惧績鎸戦�夌殑鐑棬绠楁硶鍙婂簲鐢紝鎬绘湁涓�娆鹃�傚悎浣�</h2>
@@ -594,8 +371,14 @@
</li>
</ul>
</div>
+
+ <!-- 鑱旂郴鎴戜滑 -->
+ <ContactUs></ContactUs>
</div>
- <div class="eight">
+
+ <!-- footer -->
+ <BottomRail></BottomRail>
+ <!-- <div class="eight">
<div class="center">
<ul>
<li><a href="">鍏充簬鎴戜滑</a></li>
@@ -612,19 +395,273 @@
</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";
+import Recommends from "@/views/recommend/recommendForYou.vue";
export default {
name: "HomePage",
components: {
CarouselImg,
GoodsCard,
+ BottomRail,
+ ContactUs,
+ Recommends,
},
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: true, //鍜ㄨ銆佽喘涔�
+ 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",
+ // },
+ // ],
+ // },
+ ],
+ recommendsData: [
+ {
+ 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",
+ },
+ {
+ title: "璁惧鏁呴殰妫�娴�",
+ label: "搴旂敤",
+ intro: "鏀寔閫氳繃妫�娴嬭澶囨晠闅滃師鍥犲強鎻愪緵鏁呴殰棰勬祴鍜岀姸鎬佹娴嬬瓑",
+ duration: 1,
+ quantity: 1,
+ price: "540.00",
+ oldPrice: "900.00",
+ },
+ ],
};
},
computed: {},
@@ -643,489 +680,695 @@
}
.center {
width: 75%;
- height: 50px;
margin: auto;
}
-::v-deep .el-tabs__item{
+::v-deep .el-tabs__item {
width: 200px;
}
-.header {
- background: #fff;
- height: 94px;
- display: flex;
- align-items: center;
- .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);
- text-decoration: none;
- font-family: PingFangSC-Medium, sans-serif;
- }
- :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;
- 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;
- background: #f2f2f2;
- display: flex;
- align-items: center;
- .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 {
- height: 1467px;
- .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: 400px;
- 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;
-
- .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;
+ }
+ }
+ .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);
+ }
+ > 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;
@@ -1134,376 +1377,329 @@
background-position-y: top;
// list-style-image: url(../../../public/image/home/瀵瑰嬀.png);
}
- li:hover {
- color: #000 !important;
- cursor: pointer;
+ }
+ }
+ .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;
}
}
- .project_img {
+ > 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;
- justify-content: center;
- img {
- width: 300px;
- height: 180px;
- padding-right: 70px;
+ > 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;
}
}
}
- }
- .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;
- }
- }
- }
-}
-.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;
+ .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;
}
}
}
}
-}
-.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;
+ .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;
- 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;
+ 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;
- margin-left: 6px;
+ 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;
+ .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 {
+ .eight {
+ height: 202px;
+ .center {
+ height: 100%;
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;
+ 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;
+ span {
+ font-size: 14px;
+ line-height: 20px;
+ color: rgba(0, 0, 0, 0.4);
+ margin-top: 13px;
+ }
}
}
}
--
Gitblit v1.8.0