Merge pull request #13 from wen-haoming/main

feat: 把card提取上一层
FE-star · Aug 23, 2022 · 01a18af · 01a18af
2 parents 6cd1b67 + e764e0e
commit 01a18af
Show file tree

Hide file tree

Showing 3 changed files with 144 additions and 134 deletions.
diff --git 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>
+</template>
diff --git 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>
+  <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>