关于BLK页面开发

 <template>
     <layout-body class="page-about">
-        <h1>About Us</h1>
-        <p class="paragraph"><i>BLK</i>是<i>YOHO!</i>旗下高端零售平台，<i>2017</i>年<i>9</i>月<i>BLK</i>以革新的购物概念出现于大众视野。BLK拥有便捷品质的网上商店，
-            以人物、音乐、艺术等角度结合品牌精髓述说隐于商品之内的特有文化；与其呼应实体店铺提供个人化的造型服务与精致的玩乐享受。</p>
-        <p class="paragraph">
-            伴随年轻一代对潮流/街头/时尚/奢侈概念的改变，<i>BLK</i>定义了一个新的概念——“新街头主义”风格，即是展现一种独立个性的风格与真实的生活态度。
-            以独特的视角在不同设计师品牌中寻找街头元素单品，以创意的方式在网上商店与实体店铺中呈现。</p>
-        <p class="paragraph"><i>BLK</i>买手团队引入众多国际设计师品牌同时携手国内设计新星，为年轻的消费者们提供进阶品味的且多元化的商品选择。</p>
-        <p class="paragraph"><i>BLK</i>致力呈现其对街头的独特见解，以“新街头主义”携手国内外设计师与年轻的时尚潮流爱好者们共同推动中国时尚潮流的发展与更优质的时尚潮流体验。</p>
-        <resource-single-image :value="channel.about.data.list[0]"></resource-single-image>
+        <header-box slot="header">
+                <span slot="title">
+                    ABOUT BLK
+                </span>
+        </header-box>
+        <div class="brief">
+            <p class="paragraph"><i>BLK</i>是<i>YOHO!</i>旗下高端零售平台，<i>2017</i>年<i>9</i>月<i>BLK</i>以革新的购物概念出现于大众视野。<i>BLK</i>拥有便捷品质的网上商店，
+                以人物、音乐、艺术等角度结合品牌精髓述说隐于商品之内的特有文化；与其呼应实体店铺提供个人化的造型服务与精致的玩乐享受。</p>
+            <p class="paragraph">
+                伴随年轻一代对潮流/街头/时尚/奢侈概念的改变，<i>BLK</i>定义了一个新的概念——“新街头主义”风格，即是展现一种独立个性的风格与真实的生活态度。
+                以独特的视角在不同设计师品牌中寻找街头元素单品，以创意的方式在网上商店与实体店铺中呈现。</p>
+            <p class="paragraph"><i>BLK</i>买手团队引入众多国际设计师品牌同时携手国内设计新星，为年轻的消费者们提供进阶品味的且多元化的商品选择。</p>
+            <p class="paragraph"><i>BLK</i>致力呈现其对街头的独特见解，以“新街头主义”携手国内外设计师与年轻的时尚潮流爱好者们共同推动中国时尚潮流的发展与更优质的时尚潮流体验。</p>
+        </div>
+        <component
+            :is="component.template_name"
+            v-for="(component, index) in channel.about.filter(c => ['newSingleImage'].some(k => k === c.template_name) )"
+            :value="component.data"
+            :key="index"></component>
     </layout-body>
 </template>
 
@@ -17,54 +27,44 @@ import {
     FETCH_ABOUT_REQUEST
 } from 'store/channel/types';
 import {mapState} from 'vuex';
+import {
+    ResourceSingleImage
+} from 'components/resources';
 import components from 'components/resources';
 
 export default {
     name: 'About',
     data() {
-        return {
-            value: {
-                template_name: "newSingleImage",
-                data: {
-                    imageWidth: "690",
-                    list: [
-                        {
-                            src: "http://img11.static.yhbimg.com/yhb-img01/2017/08/18/15/01e75fed294334568ad6dcfc0b8843aa95.jpg?imageView2/{mode}/w/{width}/h/{height}",
-                            alt: "",
-                            url: "http://m.yohoblk.com/editorial/34288.html?id=34288",
-                        }
-                    ],
-                    imageHeight: "560",
-                },
-                template_intro: "新一张图片",
-                isNewFloor: "1",
-                template_id: "14240",
-            }
-        };
+        return {};
     },
     computed: {
-        ...mapState(['channel'])
-
+        ...mapState(['channel']),
     },
     asyncData({store}) {
         return store.dispatch(FETCH_ABOUT_REQUEST);
     },
-    components: {...components}
+    components: {
+        newSingleImage: ResourceSingleImage
+    }
 };
 </script>
 
 <style lang="scss">
     .page-about {
-        h1 {
-            padding-left: 20px;
-            font-weight: bold;
+        .brief {
+            padding-top: 24px;
+            padding-bottom: 1px;
         }
         .paragraph {
+            font-size: 24px;
             padding: 0 20px;
-            margin-top: 20px;
-            text-indent: 2em;
+            margin-bottom: 36px;
+            text-indent: 1em;
+            line-height: 36px;
+            font-family: "HiraginoSansGB-W3";
 
             i {
+                font-family: "HelveticaNeue-Bold";
                 font-weight: bolder;
                 font-style: normal;
             }

@@ -55,7 +55,7 @@ export function createChannel() {
             },
             [FETCH_ABOUT_SUCCESS](state, {data}) {
                 state.fetchingAbout = false;
-                state.about = data[0];
+                state.about = data || [];
             },
             [FETCH_CHANNEL_REQUEST](state, gender) {
                 state.gender = gender;
@@ -106,18 +106,19 @@ export function createChannel() {
                 commit(FETCH_CHANNEL_REQUEST, gender);
 
                 try {
-                    const result = await this.$api.get('/api/resource/get', {
-                        content_code: gender === 'men' ? CHANNEL_MAN_CONTENT_CODE : CHANNEL_WOMEN_CONTENT_CODE
+                    let getSort = this.$api.get('/sort/list', {
+                        channel: gender
                     });
 
-                    const sort = await this.$api.get('/sort/list', {
-                        channel: gender
+                    let getResource = this.$api.get('/api/resource/get', {
+                        content_code: gender === 'men' ? CHANNEL_MAN_CONTENT_CODE : CHANNEL_WOMEN_CONTENT_CODE
                     });
 
-                    commit(FETCH_CHANNEL_SUCCESS, {data: result.data, sort: sort.data});
-                    return result;
+                    let [sort, resource] = await Promise.all([getSort, getResource]);
+
+                    commit(FETCH_CHANNEL_SUCCESS, {data: resource.data, sort: sort.data});
+                    return {sort, resource};
                 } catch (e) {
-                    console.error(e);
                     commit(FETCH_CHANNEL_FAILURE);
                 }
             },