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/goodsCard/goodsCard.vue | 288 +++++++++++++++++++++++++++++++++++++++++++++++++++++++--
1 files changed, 275 insertions(+), 13 deletions(-)
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>
--
Gitblit v1.8.0