From 9b1e7a581891d869c8677366bcdc7f7f722fe27b Mon Sep 17 00:00:00 2001
From: zuozhengqing <a13193816592@163.com>
Date: 星期一, 25 九月 2023 19:15:37 +0800
Subject: [PATCH] "组件拆分"
---
src/views/goodsCard/index.vue | 278 ++++++++++++++-----------------------------------------
1 files changed, 73 insertions(+), 205 deletions(-)
diff --git a/src/components/goodsCard/goodsCard.vue b/src/views/goodsCard/index.vue
similarity index 64%
rename from src/components/goodsCard/goodsCard.vue
rename to src/views/goodsCard/index.vue
index 683b083..be84d62 100644
--- a/src/components/goodsCard/goodsCard.vue
+++ b/src/views/goodsCard/index.vue
@@ -25,8 +25,8 @@
</div>
<div class="project">
<ul>
- <div>浜у搧鐗圭偣</div>
- <div >
+ <div style="margin-top: 50px">浜у搧鐗圭偣</div>
+ <div>
<li v-for="(item1, index1) in item.trait" :key="index1">
{{ item1 }}
</li>
@@ -34,59 +34,6 @@
</ul>
</div>
</div>
- <!-- <div v-show="item.goodsRightShow === 2" class="goods_card_tab">
- <div class="pane_top">
- <el-button @click="tab1">鏅烘収缁堢绯诲垪1</el-button>
- <el-button @click="tab2">鏅烘収缁堢绯诲垪2</el-button>
- </div>
- <el-carousel trigger="click" arrow="never" ref="carousel">
- <el-carousel-item
- v-for="(pageItem, pageIndex) in item.series"
- :key="pageIndex"
- >
- <div class="pane_box_wrap">
- <div class="pane_left">
- <p>{{ pageItem.goodsVersions }}</p>
- <p class="tinge" style="color: #999">
- {{ pageItem.introduce }}
- </p>
- <br />
- <el-button>绔嬪嵆鍜ㄨ</el-button>
- <el-button>绔嬪嵆璐拱</el-button>
- <div></div>
- <h4>鐗圭偣</h4>
- <ul>
- <div style="display: flex; flex-wrap: wrap">
- <li
- v-for="(item2, index2) in pageItem.trait"
- :key="index2"
- >
- {{ item2 }}
- </li>
- </div>
- </ul>
- <h4>閰嶇疆</h4>
- <ul>
- <li
- v-for="(item3, index3) in pageItem.Configure"
- :key="index3"
- >
- {{ item3 }}
- </li>
- </ul>
- </div>
- <div class="pane_right">
- <img
- :src="
- require(`../../../public/image/home/projectImg/${pageItem.imgSrc}`)
- "
- alt=""
- />
- </div>
- </div>
- </el-carousel-item>
- </el-carousel>
- </div> -->
<div
v-show="item.goodsRightShow === 2"
@@ -94,148 +41,51 @@
>
<div class="right boot">
<div class="top">
- <div>鏅烘収缁堢绯诲垪1</div>
- <div>鏅烘収缁堢绯诲垪1</div>
+ <div @click="tab1">鏅烘収缁堢绯诲垪1</div>
+ <div @click="tab2">鏅烘収缁堢绯诲垪2</div>
</div>
+ <el-carousel
+ trigger="click"
+ ref="carouselpage"
+ arrow="never">
+ <el-carousel-item v-for="(itemPage,indexpage) in terminalData" :key="indexpage" >
<h2>
- 閫氳繃鍦ㄦ瘡涓�涓伐搴忕殑璁惧鎴栨満鍙板悎閫備綅缃紝瀹夎瑙︽懜鏅鸿兘缁堢璁惧锛岀敤浜庡皢鎺掍骇浠诲姟涓嬪彂鑷虫瘡涓�涓櫤鑳界粓绔睆骞�
+ {{itemPage.info}}
</h2>
<div class="button">
<div class="go">绔嬪嵆璐拱</div>
<div class="in">绔嬪嵆鍜ㄨ</div>
</div>
+ <div style="display:flex;align-items:center;justify-content:space-between">
<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>
-
-
+ <ul>
+ <div style="color: #fa640a" >浜у搧浼樺娍</div>
+ <li v-for="(advantage,advantages) in itemPage.advantage" :key="advantages">{{advantage}}</li>
+
+ <div style="margin-top: 37px; color: #fa640a">閰嶇疆</div>
+ <li v-for="disposition in itemPage.disposition " :key="disposition">{{disposition}}</li>
+ </ul>
+ </div>
+ <div style="width:500px;height:300px;margin-right:50px;">
+ <img :src="require(`../../../public/image/home/${itemPage.imgSrc}`)" alt="" style="width:500px">
+ </div>
</div>
+
+ </el-carousel-item>
+ </el-carousel>
</div>
</div>
-
- <!-- <div v-show="item.goodsRightShow === 2" class="goods_card_tab">
- <div class="pane_top">
- <el-button @click="tab1">鏅烘収缁堢绯诲垪1</el-button>
- <el-button @click="tab2">鏅烘収缁堢绯诲垪2</el-button>
- </div>
-
- <el-carousel trigger="click" arrow="never" ref="carousel">
- <el-carousel-item
- v-for="(pageItem, pageIndex) in item.series"
- :key="pageIndex"
- >
- <div class="pane_box_wrap">
- <div class="pane_left">
- <p>{{ pageItem.goodsVersions }}</p>
- <p class="tinge" style="color: #999">
- {{ pageItem.introduce }}
- </p>
- <br />
- <el-button>绔嬪嵆鍜ㄨ</el-button>
- <el-button>绔嬪嵆璐拱</el-button>
- <div></div>
- <h4>鐗圭偣</h4>
- <ul>
- <div style="display: flex; flex-wrap: wrap">
- <li
- v-for="(item2, index2) in pageItem.trait"
- :key="index2"
- >
- {{ item2 }}
- </li>
- </div>
- </ul>
- <h4>閰嶇疆</h4>
- <ul>
- <li
- v-for="(item3, index3) in pageItem.Configure"
- :key="index3"
- >
- {{ item3 }}
- </li>
- </ul>
- </div>
- <div class="pane_right">
- <img
- :src="
- require(`../../../public/image/home/projectImg/${pageItem.imgSrc}`)
- "
- alt=""
- />
- </div>
- </div>
- </el-carousel-item>
- </el-carousel>
-
-
- </div> -->
<div
v-show="item.goodsRightShow === 3"
class="goods_card_right goods_ai"
- >
- <!-- <GoodsInfo :goodsAiInfo="goodsAiInfo"></GoodsInfo> -->
- </div>
- <!-- 绠＄悊涓績 -->
- <!-- <div
- v-show="item.goodsRightShow === 4"
- class="goods_card_right management"
- >
- <el-card shadow="hover" v-for="(i, v) in manageInfo" :key="v">
- <div class="box_card_top">
- <h4>{{ i.classify }}</h4>
- <p>{{ i.classifyTitle }}</p>
- <ul>
- <div style="display: flex; flex-wrap: wrap">
- <div>鍔熻兘鎻忚堪</div>
- <li v-for="(q, qIndex) in i.features" :key="qIndex">
- {{ q }}
- </li>
- </div>
- </ul>
- </div>
- <div class="box_card_bottom">
- <p class="new_price_box">
- <span>{{ i.currency }}</span>
- <span>{{
- i.newPrice.substring(0, i.newPrice.indexOf("."))
- }}</span>
- <span
- >.{{
- i.newPrice.substring(i.newPrice.indexOf(".") + 1)
- }}</span
- >
- <span> /{{ i.dateType }}</span>
- <span> 璧�</span>
- </p>
- <p class="old_price_box">
- <del>
- <span>{{ i.currency }}</span>
- <span>{{ i.oldPrice }}</span>
- </del>
- </p>
- </div>
- <div class="box_card_bottom bottom_show">
- <el-button>绔嬪嵆璐拱</el-button>
- </div>
- </el-card>
- </div> -->
+ ></div>
</div>
</template>
</div>
</template>
<script>
-import GoodsInfo from "./goodsInfo/goodsInfo.vue";
export default {
// props: {},
props: ["cardData"],
@@ -244,8 +94,20 @@
activeName: "first",
goodsRightShow: false, //鏄惁灞曠ず鍙充晶淇℃伅鏍忥紝false:tab椤典笉鏄剧ず
isBtnClass: false,
- // goodsAiInfo: this.cardData[3].cards, //瀛愮粍浠跺崱鐗囨暟鎹�
- // manageInfo: this.cardData[4].cards,
+ terminalData:[
+ {
+ info:"閫氳繃鍦ㄦ瘡涓伐搴忕殑璁惧鎴栨満鍙板悎閫備綅缃紝瀹夎瑙︽懜鏅鸿兘缁堢璁惧锛岀敤浜庡皢鎺掍骇浠诲姟涓嬪彂鑷虫瘡涓�涓櫤鑳界粓绔睆骞曘��",
+ advantage:["寤衡酱璁惧鍙拌处銆佽祫浜ф。妗堬紝鎺屾彙璁惧鏁翠釜鍛ㄦ湡鐨勫姩鎬佷俊鎭�","鏀堕泦璁惧浣库饯杩囩▼涓殑鍚勭淇℃伅鏁版嵁锛屸緝鍔ㄦ眹鎬昏繍绠楋紝鐢熸垚鍚勭被涓撲笟鐨勮澶囩鐞嗘姤琛�"],
+ disposition:["鑻辩壒灏� 蹇楀己 Silver 4114 10鏍稿鐞嗗櫒 x 2","64GB 鍐呭瓨 (16GB x 4) + 480GB SSD 瀛樺偍 + 8TB HDD 瀛樺偍","鍗冨厗 LAN x 4"],
+ imgSrc:"Group.png"
+ },
+ {
+ info:" 鎼浇涓ら楂樻�ц兘蹇楀己澶勭悊鍣紝鍙彁渚涢珮杈�64T鐨勫嚩鐚涚畻鍔�",
+ advantage:[" Server绯诲垪锛屽叿澶囧崟鍙颁笌闆嗙兢鏈嶅姟","鏀寔绠楀姏铏氭嫙鍖栫鎺э紝楂樼ǔ瀹氭�у崟鏈虹儹澶�"],
+ disposition:["鑻辩壒灏� 蹇楀己 Silver 4114 10鏍稿鐞嗗櫒 x 2","64GB 鍐呭瓨 (16GB x 4) + 480GB SSD 瀛樺偍 + 8TB HDD 瀛樺偍","鍗冨厗 LAN x 4"],
+ imgSrc:"crm.png"
+ }
+ ]
};
},
computed: {},
@@ -254,16 +116,15 @@
watch: {},
methods: {
tab1() {
- console.log(this.$refs.carousel[2], "xxx");
- this.$refs.carousel[2].setActiveItem(0);
+ // console.log(this.$refs, "xxx");
+ this.$refs.carouselpage[3].setActiveItem(0);
+
},
tab2() {
- this.$refs.carousel[2].setActiveItem(1);
+ this.$refs.carouselpage[3].setActiveItem(1);
},
},
- components: {
- GoodsInfo,
- },
+ components: {},
};
</script>
@@ -301,13 +162,13 @@
}
}
::v-deep .el-carousel {
- border-right: 1px solid #e1e1e1;
- border-bottom: 1px solid #e1e1e1;
+ // border-right: 1px solid #e1e1e1;
+ // border-bottom: 1px solid #e1e1e1;
.el-carousel__indicators {
display: none;
}
.el-carousel__container {
- height: 360px;
+ height: 500px;
}
.pane_box_wrap {
display: flex;
@@ -433,11 +294,6 @@
position: relative;
left: 0;
top: 0;
- // background-image: url(../../../public/image/home/缂栫粍\ 10@3x.png);
- // background-size: 520px 280px;
- // background-repeat: no-repeat;
- // background-position-x: right;
- // background-position-y: bottom;
h1 {
font-size: 20px;
@@ -458,14 +314,20 @@
div {
width: 120px;
height: 44px;
- background: #ff680d;
font-size: 16px;
line-height: 44px;
- color: #fff;
text-align: center;
border: 2px solid #ff680d;
cursor: pointer;
+ background: #ff680d;
+ color: #fff;
+ // background: #fff;
+ // color: #ff680d;
}
+ // div:hover{
+ // background: #ff680d;
+ // color: #fff;
+ // }
.in {
background: #fff;
color: #ff680d;
@@ -504,7 +366,6 @@
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;
@@ -674,15 +535,23 @@
}
}
}
-.goods_card:nth-of-type(1){
- .goods_card_right{
+.goods_card:nth-of-type(1) {
+ .goods_card_right {
+ background-image: url(../../../public/image/home/缂栫粍\ 10@3x.png);
+ background-size: 718.2px 453.6px;
+ background-repeat: no-repeat;
+ background-position: 90% 60%;
+ }
+}
+.goods_card:nth-of-type(2) {
+ .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:nth-of-type(3) {
.goods_card_right {
background-image: url(../../../public/image/home/wms.png);
background-size: 576px 327px;
@@ -812,7 +681,6 @@
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;
@@ -832,12 +700,12 @@
}
}
}
-.boot {
- background-image: url(../../../public/image/home/Group.png);
- background-color: #f9f9f8;
- background-size: 533.1px 324px;
- background-position: 90% 55%;
-}
+// .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 {
--
Gitblit v1.8.0