From 4ef3d1053d37de62ed7c097fb4b74434f6e67f23 Mon Sep 17 00:00:00 2001
From: zuozhengqing <a13193816592@163.com>
Date: 星期六, 23 九月 2023 15:46:17 +0800
Subject: [PATCH] “样式优化,组件拆分”
---
src/components/goodsCard/goodsCard.vue | 583 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 564 insertions(+), 19 deletions(-)
diff --git a/src/components/goodsCard/goodsCard.vue b/src/components/goodsCard/goodsCard.vue
index b951948..785c264 100644
--- a/src/components/goodsCard/goodsCard.vue
+++ b/src/components/goodsCard/goodsCard.vue
@@ -1,40 +1,585 @@
+<!-- 鍟嗗搧鍗＄墖-goodsCard -->
<template>
<div>
- goods card--
+ <template>
+ <div v-for="(item, index) in cardData" :key="index" class="goods_card">
+ <div class="goods_card_left">
+ <h1>{{ item.title }}</h1>
+ <p>{{ item.brief }}</p>
+ <img
+ :src="require(`../../../public/image/home/${item.imgSrc}`)"
+ alt=""
+ />
+ </div>
+ <div v-show="item.goodsRightShow === 1" class="goods_card_right">
+ <h1>{{ item.goodsVersions }}</h1>
+ <h2>
+ {{ item.introduce }}
+ </h2>
+ <div class="button" v-show="item.haveMindTo">
+ <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 v-for="(item1, index1) in item.trait" :key="index1">
+ {{ item1 }}
+ </li>
+ </div>
+ </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 === 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>
+ </template>
</div>
</template>
<script>
+import GoodsInfo from "./goodsInfo/goodsInfo.vue";
export default {
- props: {
-
- },
+ // props: {},
+ props: ["cardData"],
data() {
return {
-
+ activeName: "first",
+ goodsRightShow: false, //鏄惁灞曠ず鍙充晶淇℃伅鏍忥紝false:tab椤典笉鏄剧ず
+ isBtnClass: false,
+ goodsAiInfo: this.cardData[3].cards, //瀛愮粍浠跺崱鐗囨暟鎹�
+ manageInfo: this.cardData[4].cards,
};
},
- computed: {
-
- },
- created() {
-
- },
- mounted() {
-
- },
- watch: {
-
- },
+ computed: {},
+ created() {},
+ mounted() {},
+ watch: {},
methods: {
-
+ tab1() {
+ console.log(this.$refs.carousel[2], "xxx");
+ this.$refs.carousel[2].setActiveItem(0);
+ },
+ tab2() {
+ this.$refs.carousel[2].setActiveItem(1);
+ },
},
components: {
-
+ GoodsInfo,
},
};
</script>
<style scoped lang="scss">
+::v-deep .el-tabs__header {
+ height: 40px;
+ margin: 0;
+ text-align: center;
+ .el-tabs__item.is-active {
+ color: #ff680d;
+ }
+ .el-tabs__item:hover {
+ color: #ff680d;
+ }
+ .el-tabs__item {
+ color: #222;
+ }
+}
+::v-deep .el-tabs__content {
+ height: 360px;
+ .el-tab-pane {
+ height: 100%;
+ box-sizing: border-box;
+ border-right: 1px solid #e4e7ed;
+ border-bottom: 1px solid #e4e7ed;
+ .pane_left {
+ h4 {
+ margin: 5px 0;
+ }
+ p {
+ margin: 0;
+ }
+ }
+ }
+}
+::v-deep .el-carousel {
+ border-right: 1px solid #e1e1e1;
+ border-bottom: 1px solid #e1e1e1;
+ .el-carousel__indicators {
+ display: none;
+ }
+ .el-carousel__container {
+ height: 360px;
+ }
+ .pane_box_wrap {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ .pane_left {
+ width: 60%;
+ box-sizing: border-box;
+ padding: 0px 20px 0px 20px;
+ font-size: 14px;
+ ul {
+ padding: 0;
+ margin: 0;
+ div {
+ margin: 0;
+ padding: 0;
+ }
+ li {
+ color: #999999 !important;
+ font-size: 13px;
+ line-height: 21px;
+ color: rgba(0, 0, 0, 0.9);
+ padding-left: 29px;
+ list-style: none;
+ background-image: url(../../../public/image/home/瀵瑰嬀.png);
+ background-size: 18px 18px;
+ background-repeat: no-repeat;
+ background-position-x: left;
+ background-position-y: top;
+ }
+ li:hover {
+ color: #000 !important;
+ cursor: pointer;
+ }
+ }
+ 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;
+ padding: 0;
+ margin: 0;
+ }
+ h4 {
+ color: #333;
+ margin: 5px 0;
+ }
+ }
+ .pane_right {
+ width: 40%;
+ text-align: center;
+ img {
+ width: 300px;
+ // height: 200px;
+ }
+ }
+ }
+}
+::v-deep .el-card__body {
+ padding: 0;
+ height: 400px;
+}
+.goods_card {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ // height: 400px;
+ margin-bottom: 70px;
+ cursor: pointer;
+ .goods_card_left {
+ width: 20%;
+ min-height: 400px;
+ max-height: 700px;
+ height: 100%;
+ box-sizing: border-box;
+ padding: 43px 23px;
+ background: #fa640a;
+ position: relative;
+ left: 0;
+ top: 0;
+ h1 {
+ font-size: 26px;
+ color: #fff;
+ text-align: left;
+ }
+ p {
+ font-size: 14px;
+ color: #fff;
+ }
+ img {
+ width: 69px;
+ height: 12.38px;
+ position: absolute;
+ left: 23px;
+ bottom: 98px;
+ }
+ }
+ .goods_card_right {
+ height: 400px;
+ box-sizing: border-box;
+ 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: 520px 280px;
+ // background-repeat: no-repeat;
+ // background-position-x: right;
+ // background-position-y: bottom;
+
+ 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: left;
+ overflow: hidden;
+ ul {
+ display: flex;
+ flex-wrap: wrap;
+ // margin-top: 55px;
+ padding: 0px;
+ max-width: 500px;
+ 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;
+ }
+ }
+ }
+ }
+ .management {
+ width: 100%;
+ box-sizing: border-box;
+ display: flex;
+ padding: 0;
+ border: none;
+ height: 400px;
+ .el-card {
+ width: 33.3%;
+ border-radius: 0;
+ height: 400px;
+ position: relative;
+ .box_card_top {
+ width: 100%;
+ padding: 20px;
+ height: 75%;
+ box-sizing: border-box;
+ h4 {
+ margin: 0;
+ font-weight: normal;
+ font-size: 16px;
+ }
+ p {
+ font-size: 14px;
+ color: #828282;
+ padding: 0;
+ margin: 0;
+ }
+ p:nth-of-type(1) {
+ font-size: 14px;
+ color: #828282;
+ padding: 5px 0;
+ }
+ ul {
+ display: flex;
+ flex-wrap: wrap;
+ margin-top: 15px;
+ padding: 0px;
+ max-width: 500px;
+ div {
+ font-size: 14px;
+ line-height: 28px;
+ color: #999999;
+ width: 100%;
+ }
+ li {
+ color: #999999 !important;
+ font-size: 14px;
+ 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: 18px 18px;
+ 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;
+ }
+ }
+ }
+
+ .box_card_bottom {
+ padding: 20px;
+ height: 25%;
+ box-sizing: border-box;
+ p {
+ margin: 0;
+ }
+ .new_price_box {
+ span:nth-of-type(2) {
+ font-size: 24px;
+ }
+ span:nth-of-type(-n + 3) {
+ color: #ff6a00;
+ }
+ }
+ .old_price_box {
+ color: #d6d6d6;
+ }
+ }
+ .bottom_show {
+ padding: 0;
+ width: 100%;
+ height: 0;
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ // display: none;
+ transition: height 0.3s ease-in-out;
+ .el-button {
+ display: block;
+ width: 100%;
+ height: 100px;
+ height: 0;
+ background: #fa640a;
+ font-size: 18px;
+ color: #fff;
+ }
+ }
+ }
+ .el-card:hover {
+ .box_card_bottom {
+ height: 100px;
+ display: none;
+ .el-button{
+ height: 100%;
+ }
+ }
+ .bottom_show {
+ display: block;
+ }
+ }
+ }
+ .goods_card_tab {
+ height: 100%;
+ box-sizing: border-box;
+ flex: 1;
+ padding: 0;
+ .pane_top {
+ width: 100%;
+ box-sizing: border-box;
+ // border-right: 1px solid #E4E7ED ;
+ border-bottom: 1px solid #e4e7ed;
+ .el-button {
+ border-bottom: none;
+ border-radius: 0;
+ }
+ .el-button:hover {
+ color: #fa640a;
+ }
+ }
+ .el-tabs__content {
+ height: 200px !important;
+ .pane_box {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ // height: 100%;
+ overflow: hidden;
+ }
+ }
+ }
+}
+.goods_card:nth-of-type(4) .goods_card_left {
+ height: 600px;
+}
+.goods_card:nth-of-type(4) .goods_card_right {
+ height: 600px;
+ border: none;
+ box-sizing: border-box;
+ padding: 0;
+}
</style>
--
Gitblit v1.8.0