From 14184ede557eb7860f5bd2a1759f6b027dd060e3 Mon Sep 17 00:00:00 2001
From: zuozhengqing <a13193816592@163.com>
Date: 星期四, 21 九月 2023 21:15:40 +0800
Subject: [PATCH] add轮播图,样式修改
---
src/components/home/HomePage.vue | 328 ++++++++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 278 insertions(+), 50 deletions(-)
diff --git a/src/components/home/HomePage.vue b/src/components/home/HomePage.vue
index 8a87afc..3c7a5d8 100644
--- a/src/components/home/HomePage.vue
+++ b/src/components/home/HomePage.vue
@@ -1,5 +1,5 @@
/<template>
- <div>
+ <div id="app">
<div class="header">
<div class="center">
<div class="topleft">
@@ -17,7 +17,10 @@
</div>
</div>
</div>
- <div class="banner">
+ <div>
+ <CarouselImg></CarouselImg>
+ </div>
+ <!-- <div class="banner">
<div class="center">
<h2>SmartAI鏅烘収宸ュ巶绯荤粺</h2>
<h3>
@@ -33,7 +36,7 @@
<li></li>
</ul>
</div>
- </div>
+ </div> -->
<div class="third">
<div class="center">
<div>
@@ -68,8 +71,20 @@
<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 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>
@@ -175,7 +190,7 @@
<h1>SmartAI</h1>
<h1>鏅烘収宸ュ巶绯荤粺</h1>
<h2>涓�閿喘涔帮紝瀹炵幇浼佷笟鏅鸿兘鍖栨敼閫�</h2>
- <img src="../../../public/image/home/绠ご.png" alt=""/>
+ <img src="../../../public/image/home/绠ご.png" alt="" />
</div>
<div class="right">
<h1>鏅烘収宸ュ巶绯荤粺V1.0</h1>
@@ -184,16 +199,143 @@
</h2>
<div class="button">
<div class="go">绔嬪嵆璐拱</div>
- <div class="in">绔嬪嵆鍜ㄨ</div>
+ <!-- <div class="in">绔嬪嵆鍜ㄨ</div> -->
</div>
- <ul>
- <div>浜у搧浼樺娍</div>
- <li>杩囩▼鐩戞帶</li>
- <li>鏁版嵁鍙鍖�</li>
- <li>鍘嗗彶婧簮</li>
- <li>棰勬祴鎬у垎鏋�</li>
- <li>浼樺寲鎻愬崌</li>
- </ul>
+ <div class="project">
+ <ul>
+ <div>浜у搧鐗圭偣</div>
+ <div style="display: flex; flex-wrap: wrap; width: 300px">
+ <li>杩囩▼鐩戞帶</li>
+ <li>鏁版嵁鍙鍖�</li>
+ <li>鍘嗗彶婧簮</li>
+ <li>棰勬祴鎬у垎鏋�</li>
+ <li>浼樺寲鎻愬崌</li>
+ </div>
+ </ul>
+ <div class="project_img">
+ <img
+ src="../../../public/image/home/projectImg/projectImg1.png"
+ alt=""
+ />
+ <img
+ src="../../../public/image/home/projectImg/projectImg2.png"
+ alt=""
+ />
+ </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 class="pic">
@@ -201,9 +343,9 @@
<h1>SmartAI</h1>
<h1>鏅烘収宸ュ巶绯荤粺</h1>
<h2>涓�閿喘涔帮紝瀹炵幇浼佷笟鏅鸿兘鍖栨敼閫�</h2>
- <img src="../../../public/image/home/绠ご.png" alt=""/>
+ <img src="../../../public/image/home/绠ご.png" alt="" />
</div>
- <div class="right boot" >
+ <div class="right boot">
<div class="top">
<div>鏅烘収缁堢绯诲垪1</div>
<div>鏅烘収缁堢绯诲垪1</div>
@@ -230,7 +372,7 @@
</div>
</div>
</div>
- <div class="sis">
+ <!-- <div class="sis">
<div class="center">
<h1>AI鐖嗘</h1>
<h2>绮惧績鎸戦�夌殑鐑棬绠楁硶鍙婂簲鐢紝鎬绘湁涓�娆鹃�傚悎浣�</h2>
@@ -465,11 +607,32 @@
</ul>
<span> 漏 2009-2019 smartai.com 鐗堟潈鎵�鏈� ICP璇侊細45456566</span>
</div>
- </div>
+ </div> -->
</div>
</template>
<script>
+import GoodsCard from "../goodsCard/goodsCard.vue"
+import CarouselImg from "../carouselImg/carouselImg.vue";
+export default {
+ name: "HomePage",
+ components: {
+ CarouselImg,
+ GoodsCard,
+ },
+ props: {},
+ data() {
+ return {
+
+ activeName: 'first'
+ };
+ },
+ computed: {},
+ created() {},
+ mounted() {},
+ watch: {},
+ methods: {},
+};
</script>
<style lang="scss" scoped>
@@ -482,6 +645,9 @@
width: 75%;
height: 50px;
margin: auto;
+}
+::v-deep .el-tabs__item{
+ width: 200px;
}
.header {
@@ -798,13 +964,12 @@
position: absolute;
top: 21px;
right: 0;
- > div{
+ > div {
width: 40px;
height: 40px;
cursor: pointer;
}
:first-child {
-
margin-right: 18px;
}
}
@@ -830,7 +995,7 @@
}
.pic {
width: 100%;
- height: 600px;
+ height: 400px;
margin-bottom: 68px;
display: flex;
.left {
@@ -871,7 +1036,7 @@
position: relative;
left: 0;
top: 0;
- background-image: url(../../../public/image/home/缂栫粍\ 10@3x.png);
+ // background-image: url(../../../public/image/home/缂栫粍\ 10@3x.png);
background-size: 620px 340px;
background-repeat: no-repeat;
background-position-x: right;
@@ -911,7 +1076,7 @@
font-size: 14px;
line-height: 20px;
width: 93%;
- color: rgba(0, 0, 0, 0.9);
+ color: #999;
font-weight: 500;
margin-bottom: 24px;
}
@@ -934,37 +1099,100 @@
margin-left: 16px;
}
}
- ul {
- padding: 0;
- position: absolute;
- left: 59px;
- bottom: 48px;
- div {
- font-size: 20px;
- line-height: 28px;
- color: #ff680d;
- margin-bottom: 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;
+ }
}
- li {
- font-size: 15px;
- line-height: 21px;
- color: rgba(0, 0, 0, 0.9);
- margin-bottom: 19px;
- padding-left: 29px;
- 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);
-
+ .project_img {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ img {
+ width: 300px;
+ height: 180px;
+ padding-right: 70px;
+ cursor: pointer;
+ }
}
}
}
- .boot{
+ .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-color: #f9f9f8;
background-size: 354px 497px;
}
}
--
Gitblit v1.8.0