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/goodsInfo/goodsInfo.vue | 156 ++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 156 insertions(+), 0 deletions(-)
diff --git a/src/components/goodsCard/goodsInfo/goodsInfo.vue b/src/components/goodsCard/goodsInfo/goodsInfo.vue
new file mode 100644
index 0000000..1998b09
--- /dev/null
+++ b/src/components/goodsCard/goodsInfo/goodsInfo.vue
@@ -0,0 +1,156 @@
+<template>
+ <div>
+ <div class="box_card_wrap">
+ <div class="box_card" v-for="(item, index) in goodsAiInfo" :key="index">
+ <div class="box_card_top">
+ <h4>{{ item.classify }}</h4>
+ <h3>{{ item.classifyTitle }}</h3>
+ <p>
+ {{ item.brief }}
+ </p>
+ </div>
+
+ <div class="box_card_bottom">
+ <p class="new_price_box">
+ <span>{{ item.currency }}</span>
+ <span>{{
+ item.newPrice.substring(0, item.newPrice.indexOf("."))
+ }}</span>
+ <span
+ >.{{
+ item.newPrice.substring(item.newPrice.indexOf(".") + 1)
+ }}</span
+ >
+ <span> /3</span>
+ <span>骞�</span>
+ </p>
+ <p class="old_price_box">
+ <del><span>锟�</span><span>1198.00</span></del>
+ </p>
+ </div>
+ <div class="box_card_bottom btnShow">
+ <el-button>绔嬪嵆璐拱</el-button>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+ props: ["goodsAiInfo"],
+ data() {
+ return {};
+ },
+ computed: {},
+ created() {},
+ mounted() {},
+ watch: {},
+ methods: {},
+ components: {},
+};
+</script>
+
+<style scoped lang="scss">
+* {
+ margin: 0;
+ padding: 0;
+}
+.box_card_wrap {
+ height: 600px;
+ display: flex;
+ flex-wrap: wrap;
+ .box_card {
+ width: 33.3%;
+ height: 50%;
+ box-sizing: border-box;
+ border: 0.5px solid #e4e7ed;
+ margin: 0;
+ padding: 0;
+ border-radius: 0;
+ position: relative;
+ overflow: hidden;
+ .box_card_top {
+ width: 100%;
+ padding: 20px;
+ height: 75%;
+ box-sizing: border-box;
+ h4 {
+ width: 75px;
+ height: 25px;
+ line-height: 25px;
+ background: #f9f9f9;
+ text-align: center;
+ border-radius: 5px;
+ font-size: 14px;
+ font-weight: normal;
+ color: #999999;
+ }
+ h4:hover {
+ background: #f2f2f2;
+ }
+ h3 {
+ color: #333333;
+ font-weight: normal;
+ font-size: 16px;
+ padding: 20px 0;
+ }
+ p {
+ font-size: 14px;
+ color: #999999;
+ }
+ }
+ .box_card_bottom {
+ padding: 0 20px;
+ height: 25%;
+ box-sizing: border-box;
+ .new_price_box {
+ span:nth-of-type(2) {
+ font-size: 24px;
+ }
+ span:nth-of-type(-n + 3) {
+ color: #ff6a00;
+ }
+ }
+ .old_price_box {
+ color: #d6d6d6;
+ }
+ }
+ .btnShow {
+ 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 !important;
+
+ height: 0;
+ background: #fa640a;
+ font-size: 18px;
+ color: #fff;
+ }
+ }
+ }
+ .box_card:hover {
+ .box_card_bottom {
+ height: 100px;
+ display: none;
+ }
+ .btnShow {
+ display: block !important;
+ .el-button{
+ height: 100%;
+ }
+ }
+ }
+ .box_card:nth-of-type(n + 4) {
+ border-top: none;
+ }
+}
+</style>
--
Gitblit v1.8.0