fe / yohoblk-wap · Commits

Go to a project

Authored by 陈峰
Commit 9c0e4ce4a0cc08b65a5785784f92bf2547598bf2 1 parent 59ad41c8

two image single image

Inline Side-by-side
Showing 10 changed files with 137 additions and 18 deletions
@@ -27,7 +27,6 @@ @@ -27,7 +27,6 @@
27 "axios": "^0.16.2", 27 "axios": "^0.16.2",
28 "babel-plugin-transform-class-properties": "^6.24.1", 28 "babel-plugin-transform-class-properties": "^6.24.1",
29 "babel-polyfill": "^6.23.0", 29 "babel-polyfill": "^6.23.0",
30 - "babel-runtime": "^6.11.6",  
31 "bluebird": "^3.4.2", 30 "bluebird": "^3.4.2",
32 "body-parser": "^1.15.2", 31 "body-parser": "^1.15.2",
33 "connect-memcached": "^0.2.0", 32 "connect-memcached": "^0.2.0",
@@ -68,9 +67,10 @@ @@ -68,9 +67,10 @@
68 "babel-plugin-transform-runtime": "^6.23.0", 67 "babel-plugin-transform-runtime": "^6.23.0",
69 "babel-plugin-transform-vue-jsx": "^3.5.0", 68 "babel-plugin-transform-vue-jsx": "^3.5.0",
70 "babel-preset-env": "^1.4.0", 69 "babel-preset-env": "^1.4.0",
71 - "babel-preset-es2015": "^6.14.0", 70 + "babel-preset-es2015": "^6.24.1",
72 "babel-preset-es2015-node6": "^0.4.0", 71 "babel-preset-es2015-node6": "^0.4.0",
73 "babel-preset-stage-2": "^6.24.1", 72 "babel-preset-stage-2": "^6.24.1",
  73 + "babel-runtime": "^6.26.0",
74 "chokidar": "^1.7.0", 74 "chokidar": "^1.7.0",
75 "copy-webpack-plugin": "^4.0.1", 75 "copy-webpack-plugin": "^4.0.1",
76 "css-loader": "^0.28.1", 76 "css-loader": "^0.28.1",
1 <template> 1 <template>
2 - <div>  
3 - <img v-if="lazy" v-lazy="currentSrc" alt="" :width="width" :height="height">  
4 - <img v-else :src="currentSrc" alt="" :width="width" :height="height">  
5 - </div> 2 + <img v-if="lazy" v-lazy="currentSrc" alt="" :width="width" :height="height">
  3 + <img v-else :src="currentSrc" alt="" :width="width" :height="height">
6 </template> 4 </template>
7 5
8 <script> 6 <script>
@@ -15,7 +15,7 @@ @@ -15,7 +15,7 @@
15 <slot name="right"></slot> 15 <slot name="right"></slot>
16 </div> 16 </div>
17 </div> 17 </div>
18 - <div class="blk-header-gap"></div> 18 + <div class="blk-header-gap" v-if="placeholder"></div>
19 </div> 19 </div>
20 </template> 20 </template>
21 <script> 21 <script>
@@ -24,6 +24,10 @@ export default { @@ -24,6 +24,10 @@ export default {
24 name: 'HeaderBox', 24 name: 'HeaderBox',
25 props: { 25 props: {
26 className: [String, Object, Array], 26 className: [String, Object, Array],
  27 + placeholder: {
  28 + type: Boolean,
  29 + default: true
  30 + },
27 autoHide: [Boolean] 31 autoHide: [Boolean]
28 }, 32 },
29 computed: { 33 computed: {
@@ -132,9 +136,9 @@ export default { @@ -132,9 +136,9 @@ export default {
132 .blk-header-left { 136 .blk-header-left {
133 width: 100px; 137 width: 100px;
134 text-align: center; 138 text-align: center;
135 - font-size: 64px; 139 + font-size: 40px;
136 .icon { 140 .icon {
137 - font-size: 64px; 141 + font-size: 40px;
138 } 142 }
139 } 143 }
140 144
@@ -142,8 +146,9 @@ export default { @@ -142,8 +146,9 @@ export default {
142 .blk-header-right { 146 .blk-header-right {
143 width: 100px; 147 width: 100px;
144 text-align: center; 148 text-align: center;
  149 + font-size: 40px;
145 .icon { 150 .icon {
146 - font-size: 42px; 151 + font-size: 40px;
147 } 152 }
148 153
149 .right-btn { 154 .right-btn {
@@ -187,10 +192,6 @@ export default { @@ -187,10 +192,6 @@ export default {
187 visibility: hidden; 192 visibility: hidden;
188 } 193 }
189 } 194 }
190 -  
191 - .blk-header-gap {  
192 - display: none;  
193 - }  
194 } 195 }
195 196
196 </style> 197 </style>
  1 +import ResourceTwoImage from './resource-two-image';
  2 +import ResourceSingleImage from './resource-single-image';
  3 +
  4 +export default {
  5 + ResourceTwoImage,
  6 + ResourceSingleImage
  7 +};
  1 +<template>
  2 + <resource class="single-image">
  3 + <img-format :src="value.src" :w="250" :h="250"></img-format>
  4 + </resource>
  5 +</template>
  6 +
  7 +<script>
  8 +import Resource from './resource';
  9 +
  10 +export default {
  11 + name: 'ResourceSingleImage',
  12 + props: {
  13 + value: Object
  14 + },
  15 + components: {Resource}
  16 +};
  17 +</script>
  18 +
  19 +<style lang="scss">
  20 +.single-image {
  21 + img {
  22 + width: 100%;
  23 + display: block;
  24 + }
  25 +}
  26 +</style>
  1 +<template>
  2 + <resource class="ti-image">
  3 + <div class="ti-image-item">
  4 + <img-format :src="value[0].src" :w="250" :h="250"></img-format>
  5 + </div>
  6 + <div class="split"></div>
  7 + <div class="ti-image-item">
  8 + <img-format :src="value[1].src" :w="250" :h="250"></img-format>
  9 + </div>
  10 + </resource>
  11 +</template>
  12 +
  13 +<script>
  14 +import Resource from './resource';
  15 +
  16 +export default {
  17 + name: 'ResourceTwoImage',
  18 + props: {
  19 + value: Array
  20 + },
  21 + components: {Resource}
  22 +};
  23 +</script>
  24 +
  25 +<style lang="scss">
  26 +.ti-image {
  27 + display: flex;
  28 + .split {
  29 + width: 20px;
  30 + }
  31 + .ti-image-item {
  32 + width: 50%;
  33 +
  34 + img {
  35 + width: 100%;
  36 + display: block;
  37 + }
  38 + }
  39 +}
  40 +</style>
  1 +<template>
  2 + <div class="resources-item">
  3 + <slot></slot>
  4 + </div>
  5 +</template>
  6 +
  7 +<script>
  8 +export default {
  9 + name: 'Resource'
  10 +};
  11 +</script>
  12 +
  13 +<style lang="scss">
  14 +.resources-item {
  15 + padding-left: 20px;
  16 + padding-right: 20px;
  17 + padding-top: 20px;
  18 +}
  19 +</style>
1 <template> 1 <template>
2 <layout-body class="page-detail"> 2 <layout-body class="page-detail">
3 <header-box slot="header"> 3 <header-box slot="header">
4 - <span slot="left"></span> 4 + <span slot="left">
  5 + <i class="icon icon-nav"></i>
  6 + </span>
5 <span slot="title"> 7 <span slot="title">
6 8
7 </span> 9 </span>
@@ -9,12 +11,38 @@ @@ -9,12 +11,38 @@
9 <i class="icon icon-search"></i> 11 <i class="icon icon-search"></i>
10 </span> 12 </span>
11 </header-box> 13 </header-box>
  14 + <div class="resources">
  15 + <resource-two-image v-if="twoImages" :value="twoImages"></resource-two-image>
  16 + <resource-single-image v-if="singleImages" :value="singleImages"></resource-single-image>
  17 + <resource-single-image v-if="singleImages" :value="singleImages"></resource-single-image>
  18 + <resource-single-image v-if="singleImages" :value="singleImages"></resource-single-image>
  19 + <resource-single-image v-if="singleImages" :value="singleImages"></resource-single-image>
  20 + <resource-single-image v-if="singleImages" :value="singleImages"></resource-single-image>
  21 + <resource-single-image v-if="singleImages" :value="singleImages"></resource-single-image>
  22 + <resource-single-image v-if="singleImages" :value="singleImages"></resource-single-image>
  23 + <resource-single-image v-if="singleImages" :value="singleImages"></resource-single-image>
  24 + </div>
12 </layout-body> 25 </layout-body>
13 </template> 26 </template>
14 27
15 <script> 28 <script>
  29 +import components from 'components/resources';
  30 +
16 export default { 31 export default {
17 name: 'Channel', 32 name: 'Channel',
  33 + data() {
  34 + return {
  35 + twoImages: [{
  36 + src: '//img10.static.yhbimg.com/yhb-img01/2017/07/05/09/01dfd379daa71513f228fe7586aca829e4.jpg?imageView2/2/w/375/h/375/interlace/1'
  37 + }, {
  38 + src: '//img10.static.yhbimg.com/yhb-img01/2017/07/05/09/01dfd379daa71513f228fe7586aca829e4.jpg?imageView2/2/w/375/h/375/interlace/1'
  39 + }],
  40 + singleImages: {
  41 + src: '//img11.static.yhbimg.com/yhb-img01/2017/07/26/09/01496efd7e853c2aaa1e38035d788eaa8e.jpg?imageView2/2/w/750/h/364/interlace/1'
  42 + }
  43 + }
  44 + },
  45 + components: {...components}
18 }; 46 };
19 </script> 47 </script>
20 48
1 <template> 1 <template>
2 <layout-body :auto-hide-header="true" class="page-detail"> 2 <layout-body :auto-hide-header="true" class="page-detail">
3 - <header-box slot="header" :auto-hide="true"></header-box> 3 + <header-box slot="header" :auto-hide="true" :placeholder="false"></header-box>
4 <product-swipe :goods="detail.goods_list" ref="imageSwiper"></product-swipe> 4 <product-swipe :goods="detail.goods_list" ref="imageSwiper"></product-swipe>
5 <div class="detail-box border-bottom"> 5 <div class="detail-box border-bottom">
6 <shop-fav :entity="detail" class="border-bottom"></shop-fav> 6 <shop-fav :entity="detail" class="border-bottom"></shop-fav>
@@ -887,7 +887,7 @@ babel-preset-es2015-node6@^0.4.0: @@ -887,7 +887,7 @@ babel-preset-es2015-node6@^0.4.0:
887 babel-plugin-transform-es2015-modules-commonjs "^6.7.4" 887 babel-plugin-transform-es2015-modules-commonjs "^6.7.4"
888 babel-plugin-transform-es2015-parameters "^6.8.0" 888 babel-plugin-transform-es2015-parameters "^6.8.0"
889 889
890 -babel-preset-es2015@^6.14.0: 890 +babel-preset-es2015@^6.24.1:
891 version "6.24.1" 891 version "6.24.1"
892 resolved "http://npm.yoho.cn/babel-preset-es2015/-/babel-preset-es2015-6.24.1.tgz#d44050d6bc2c9feea702aaf38d727a0210538939" 892 resolved "http://npm.yoho.cn/babel-preset-es2015/-/babel-preset-es2015-6.24.1.tgz#d44050d6bc2c9feea702aaf38d727a0210538939"
893 dependencies: 893 dependencies:
@@ -947,7 +947,7 @@ babel-register@^6.26.0: @@ -947,7 +947,7 @@ babel-register@^6.26.0:
947 mkdirp "^0.5.1" 947 mkdirp "^0.5.1"
948 source-map-support "^0.4.15" 948 source-map-support "^0.4.15"
949 949
950 -babel-runtime@^6.11.6, babel-runtime@^6.18.0, babel-runtime@^6.22.0, babel-runtime@^6.26.0: 950 +babel-runtime@^6.18.0, babel-runtime@^6.22.0, babel-runtime@^6.26.0:
951 version "6.26.0" 951 version "6.26.0"
952 resolved "http://npm.yoho.cn/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe" 952 resolved "http://npm.yoho.cn/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
953 dependencies: 953 dependencies: