From e764e0ebe9023207c25039db684f822b6756a7ec Mon Sep 17 00:00:00 2001
From: haoming <435203093@qq.com>
Date: Thu, 18 Aug 2022 01:10:17 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=8A=8Acard=E6=8F=90=E5=8F=96?=
 =?UTF-8?q?=E4=B8=8A=E4=B8=80=E5=B1=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 page-transformer/src/App.vue                  |  36 +++--
 .../src/components/cards/normal.vue           |  97 ++++++------
 page-transformer/src/components/grid.vue      | 145 +++++++++---------
 3 files changed, 144 insertions(+), 134 deletions(-)

diff --git a/page-transformer/src/App.vue b/page-transformer/src/App.vue
index 4096d09..511bcd0 100644
--- a/page-transformer/src/App.vue
+++ b/page-transformer/src/App.vue
@@ -1,26 +1,30 @@
 <script>
-  import Layout from './components/layout.vue'
-  import Grid from './components/grid.vue'
-  import FlexGrid from './components/flex-grid.vue'
+import Layout from "./components/layout.vue";
+import Grid from "./components/grid.vue";
+import FlexGrid from "./components/flex-grid.vue";
+import Normal from "./components/cards/normal.vue";
 
-  export default {
-    props: {
-        page: Array
-    },
-    components: {
-      'grid': Grid,
-      'flex-grid': FlexGrid,
-      Layout
-    },
-  }
+export default {
+  props: {
+    page: Array,
+  },
+  components: {
+    grid: Grid,
+    "flex-grid": FlexGrid,
+    Layout,
+    Normal,
+  },
+};
 </script>
 
 <template>
   <Layout>
     <template #default>
-      <div v-for="floor in page">
-        <component :floor="floor" :is="floor.type"></component>
+      <div v-for="(floor, floorIdx) in page" :key="floorIdx">
+        <component :floor="floor" :is="floor.type" v-slot="{ dataItem }">
+          <component :data="dataItem" :is="floor.card"></component>
+        </component>
       </div>
     </template>
   </Layout>
-</template>
\ No newline at end of file
+</template>
diff --git a/page-transformer/src/components/cards/normal.vue b/page-transformer/src/components/cards/normal.vue
index b2821fa..5d1275a 100644
--- a/page-transformer/src/components/cards/normal.vue
+++ b/page-transformer/src/components/cards/normal.vue
@@ -10,8 +10,8 @@
   background-color: #f7f9fa;
   border: 1px solid #f7f9fa;
   -webkit-border-radius: 12px;
-     -moz-border-radius: 12px;
-          border-radius: 12px;
+  -moz-border-radius: 12px;
+  border-radius: 12px;
   cursor: pointer;
   -webkit-transition: all 0.5s;
   -o-transition: all 0.5s;
@@ -25,8 +25,8 @@
   background-color: #fff;
   border-color: #ff915e;
   -webkit-box-shadow: 0 8px 12px 0 rgba(255, 80, 0, 0.06);
-     -moz-box-shadow: 0 8px 12px 0 rgba(255, 80, 0, 0.06);
-          box-shadow: 0 8px 12px 0 rgba(255, 80, 0, 0.06);
+  -moz-box-shadow: 0 8px 12px 0 rgba(255, 80, 0, 0.06);
+  box-shadow: 0 8px 12px 0 rgba(255, 80, 0, 0.06);
 }
 .card-item .item-link {
   display: inline-block;
@@ -41,16 +41,16 @@
   overflow: hidden;
   background-color: rgba(27, 23, 67, 0.03);
   -webkit-border-radius: 10px;
-     -moz-border-radius: 10px;
-          border-radius: 10px;
+  -moz-border-radius: 10px;
+  border-radius: 10px;
 }
 .card-item .img-wrapper img {
   display: block;
   width: 100%;
   height: 100%;
   -webkit-border-radius: 10px;
-     -moz-border-radius: 10px;
-          border-radius: 10px;
+  -moz-border-radius: 10px;
+  border-radius: 10px;
 }
 .card-item .info-wrapper {
   height: 116px;
@@ -90,8 +90,8 @@
   vertical-align: top;
   border: 1px solid #ff5000;
   -webkit-border-radius: 3px;
-     -moz-border-radius: 3px;
-          border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
 }
 .card-item .info-wrapper .tag-list .tag-item.graphic-tag {
   padding: 0;
@@ -104,13 +104,13 @@
 }
 .card-item .info-wrapper .tag-list .tag-item.graphic-tag .left {
   -webkit-border-radius: 3px 0 0 3px;
-     -moz-border-radius: 3px 0 0 3px;
-          border-radius: 3px 0 0 3px;
+  -moz-border-radius: 3px 0 0 3px;
+  border-radius: 3px 0 0 3px;
 }
 .card-item .info-wrapper .tag-list .tag-item.graphic-tag .right {
   -webkit-border-radius: 0 3px 3px 0;
-     -moz-border-radius: 0 3px 3px 0;
-          border-radius: 0 3px 3px 0;
+  -moz-border-radius: 0 3px 3px 0;
+  border-radius: 0 3px 3px 0;
 }
 .card-item .info-wrapper .tag-list img {
   height: 20px;
@@ -170,40 +170,45 @@
 </style>
 
 <script>
-
-
 export default {
-    props: {
-        data: Object
+  props: {
+    data: Object,
+  },
+  computed: {
+    url: function () {
+      return `//item.taobao.com/item.htm?id=${this.data.nid}`;
     },
-    computed: {
-        url: function () {
-            return `//item.taobao.com/item.htm?id=${this.data.nid}`
-        }
-    }
-}
+  },
+};
 </script>
 
 <template>
-    <div class="card-item" role="listitem">
-        <a :href="url"
-            target="_blank" class="item-link">
-            <div class="img-wrapper">
-                <img v-src="data.pict_url"
-                    aria-labelledby="rc-item-tl-0">
-            </div>
-            <div class="info-wrapper">
-                <div class="title">
-                    {{data.title}}</div>
-                <div class="tag-list" v-if="data.icons">
-                    <div v-for="item in data.icons" class="tag-item" :style="{color: item.font_color, borderColor: item.border_color, background: item.bg_color}">
-                        {{ item.text }}
-                    </div>
-                </div>
-            </div>
-            <div class="price-wrapper">
-                <span class="price-value"><em>¥</em>125</span>
-            </div>
-        </a>
-    </div>
-</template>
\ No newline at end of file
+  <div class="card-item" role="listitem">
+    <a :href="url" target="_blank" class="item-link">
+      <div class="img-wrapper">
+        <img v-src="data.pict_url" aria-labelledby="rc-item-tl-0" />
+      </div>
+      <div class="info-wrapper">
+        <div class="title">
+          {{ data.title }}
+        </div>
+        <div class="tag-list" v-if="data.icons">
+          <div
+            v-for="item in data.icons"
+            class="tag-item"
+            :style="{
+              color: item.font_color,
+              borderColor: item.border_color,
+              background: item.bg_color,
+            }"
+          >
+            {{ item.text }}
+          </div>
+        </div>
+      </div>
+      <div class="price-wrapper">
+        <span class="price-value"><em>¥</em>125</span>
+      </div>
+    </a>
+  </div>
+</template>
diff --git a/page-transformer/src/components/grid.vue b/page-transformer/src/components/grid.vue
index 77cfe22..05426af 100644
--- a/page-transformer/src/components/grid.vue
+++ b/page-transformer/src/components/grid.vue
@@ -1,129 +1,130 @@
 <style>
 .card-container {
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box;
-    margin: 0 auto;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  margin: 0 auto;
 }
 
 .card-container.col2 {
-    width: 990px;
-    padding: 0 22px;
+  width: 990px;
+  padding: 0 22px;
 }
 
 .card-container.col2 .card-content {
-    margin-left: -16px;
+  margin-left: -16px;
 }
 
 .card-container.col2 .card-item,
 .card-container.col2 .skeleton-i {
-    width: 465px;
-    margin-left: 16px;
+  width: 465px;
+  margin-left: 16px;
 }
 
 .card-container.col3 {
-    width: 1190px;
-    padding: 0 19px;
+  width: 1190px;
+  padding: 0 19px;
 }
 
 .card-container.col3 .card-content {
-    margin-left: -18px;
+  margin-left: -18px;
 }
 
 .card-container.col3 .card-item,
 .card-container.col3 .skeleton-i {
-    width: 372px;
-    margin-left: 18px;
+  width: 372px;
+  margin-left: 18px;
 }
 
 .card-container * {
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 .card-container-header {
-    height: 24px;
-    margin-bottom: 20px;
-    margin-left: 6px;
+  height: 24px;
+  margin-bottom: 20px;
+  margin-left: 6px;
 }
 
 .card-container-header .rh-title {
-    float: left;
-    color: #111;
-    font-weight: bold;
-    font-size: 24px;
-    line-height: 24px;
+  float: left;
+  color: #111;
+  font-weight: bold;
+  font-size: 24px;
+  line-height: 24px;
 }
 
 .card-container-header .rh-logo {
-    height: 20px;
-    margin: 4px 0 0 6px;
+  height: 20px;
+  margin: 4px 0 0 6px;
 }
 
 .clearfix {
-    *zoom: 1;
+  *zoom: 1;
 }
 
 .clearfix::after,
 .clearfix::before {
-    display: table;
-    content: ' ';
+  display: table;
+  content: " ";
 }
 
 .clearfix::after {
-    clear: both;
-    height: 0;
-    line-height: 0;
-    visibility: hidden;
+  clear: both;
+  height: 0;
+  line-height: 0;
+  visibility: hidden;
 }
 </style>
 
 <script>
-import Normal from './cards/normal.vue'
 // import jsonp from '../utils/jsonp'
 
 export default {
-    props: {
-        floor: Object
+  props: {
+    floor: Object,
+  },
+  data(vm) {
+    const data = vm.$props.floor.data;
+    return {
+      hasData: !!data,
+      data: data ? data : [],
+    };
+  },
+  computed: {
+    classObject() {
+      return {
+        "card-container": true,
+        col2: this.floor.col === 2,
+        col3: this.floor.col === 3,
+      };
     },
-    data(vm) {
-        const data = vm.$props.floor.data
-        return {
-            hasData: !!data,
-            data: data ? data : []
-        }
-    },
-    components: {
-        normal: Normal
-    },
-    computed: {
-        classObject() {
-            return {
-                'card-container': true,
-                'col2': this.floor.col === 2,
-                'col3': this.floor.col === 3
-            }
-        }
-    },
-    mounted() {
-        if (!this.hasData) {
-            import('../utils/data')
-                .then(module => {
-                    this.data.push(...module.default.data.result)
-                })
-        }
+  },
+  mounted() {
+    if (!this.hasData) {
+      import("../utils/data").then((module) => {
+        this.data.push(...module.default.data.result);
+      });
     }
-}
+  },
+};
 </script>
 
 <template>
-    <div :class="classObject">
-        <h3 class="card-container-header">
-            <span class="rh-title">{{floor.title}}</span>
-        </h3>
-        <div class="card-content clearfix">
-            <component :data="item" v-for="item in data" :is="floor.card"></component>
-        </div>
+  <div :class="classObject">
+    <h3 class="card-container-header">
+      <span class="rh-title">{{ floor.title }}</span>
+    </h3>
+    <div class="card-content clearfix">
+      <div
+        class="col"
+        v-for="(dataItem, dataItemIdx) in data"
+        :key="dataItemIdx"
+      >
+        <slot :dataItem="dataItem" />
+      </div>
     </div>
-</template>
\ No newline at end of file
+  </div>
+</template>