| | |
| | | <!-- 商品卡片-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> |