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 135 additions and 16 deletions
... ... @@ -27,7 +27,6 @@
"axios": "^0.16.2",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-polyfill": "^6.23.0",
"babel-runtime": "^6.11.6",
"bluebird": "^3.4.2",
"body-parser": "^1.15.2",
"connect-memcached": "^0.2.0",
... ... @@ -68,9 +67,10 @@
"babel-plugin-transform-runtime": "^6.23.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.4.0",
"babel-preset-es2015": "^6.14.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-es2015-node6": "^0.4.0",
"babel-preset-stage-2": "^6.24.1",
"babel-runtime": "^6.26.0",
"chokidar": "^1.7.0",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.1",
... ...
<template>
<div>
<img v-if="lazy" v-lazy="currentSrc" alt="" :width="width" :height="height">
<img v-else :src="currentSrc" alt="" :width="width" :height="height">
</div>
</template>
<script>
... ...
... ... @@ -15,7 +15,7 @@
<slot name="right"></slot>
</div>
</div>
<div class="blk-header-gap"></div>
<div class="blk-header-gap" v-if="placeholder"></div>
</div>
</template>
<script>
... ... @@ -24,6 +24,10 @@ export default {
name: 'HeaderBox',
props: {
className: [String, Object, Array],
placeholder: {
type: Boolean,
default: true
},
autoHide: [Boolean]
},
computed: {
... ... @@ -132,9 +136,9 @@ export default {
.blk-header-left {
width: 100px;
text-align: center;
font-size: 64px;
font-size: 40px;
.icon {
font-size: 64px;
font-size: 40px;
}
}
... ... @@ -142,8 +146,9 @@ export default {
.blk-header-right {
width: 100px;
text-align: center;
font-size: 40px;
.icon {
font-size: 42px;
font-size: 40px;
}
.right-btn {
... ... @@ -187,10 +192,6 @@ export default {
visibility: hidden;
}
}
.blk-header-gap {
display: none;
}
}
</style>
... ...
import ResourceTwoImage from './resource-two-image';
import ResourceSingleImage from './resource-single-image';
export default {
ResourceTwoImage,
ResourceSingleImage
};
... ...
<template>
<resource class="single-image">
<img-format :src="value.src" :w="250" :h="250"></img-format>
</resource>
</template>
<script>
import Resource from './resource';
export default {
name: 'ResourceSingleImage',
props: {
value: Object
},
components: {Resource}
};
</script>
<style lang="scss">
.single-image {
img {
width: 100%;
display: block;
}
}
</style>
... ...
<template>
<resource class="ti-image">
<div class="ti-image-item">
<img-format :src="value[0].src" :w="250" :h="250"></img-format>
</div>
<div class="split"></div>
<div class="ti-image-item">
<img-format :src="value[1].src" :w="250" :h="250"></img-format>
</div>
</resource>
</template>
<script>
import Resource from './resource';
export default {
name: 'ResourceTwoImage',
props: {
value: Array
},
components: {Resource}
};
</script>
<style lang="scss">
.ti-image {
display: flex;
.split {
width: 20px;
}
.ti-image-item {
width: 50%;
img {
width: 100%;
display: block;
}
}
}
</style>
... ...
<template>
<div class="resources-item">
<slot></slot>
</div>
</template>
<script>
export default {
name: 'Resource'
};
</script>
<style lang="scss">
.resources-item {
padding-left: 20px;
padding-right: 20px;
padding-top: 20px;
}
</style>
... ...
<template>
<layout-body class="page-detail">
<header-box slot="header">
<span slot="left"></span>
<span slot="left">
<i class="icon icon-nav"></i>
</span>
<span slot="title">
</span>
... ... @@ -9,12 +11,38 @@
<i class="icon icon-search"></i>
</span>
</header-box>
<div class="resources">
<resource-two-image v-if="twoImages" :value="twoImages"></resource-two-image>
<resource-single-image v-if="singleImages" :value="singleImages"></resource-single-image>
<resource-single-image v-if="singleImages" :value="singleImages"></resource-single-image>
<resource-single-image v-if="singleImages" :value="singleImages"></resource-single-image>
<resource-single-image v-if="singleImages" :value="singleImages"></resource-single-image>
<resource-single-image v-if="singleImages" :value="singleImages"></resource-single-image>
<resource-single-image v-if="singleImages" :value="singleImages"></resource-single-image>
<resource-single-image v-if="singleImages" :value="singleImages"></resource-single-image>
<resource-single-image v-if="singleImages" :value="singleImages"></resource-single-image>
</div>
</layout-body>
</template>
<script>
import components from 'components/resources';
export default {
name: 'Channel',
data() {
return {
twoImages: [{
src: '//img10.static.yhbimg.com/yhb-img01/2017/07/05/09/01dfd379daa71513f228fe7586aca829e4.jpg?imageView2/2/w/375/h/375/interlace/1'
}, {
src: '//img10.static.yhbimg.com/yhb-img01/2017/07/05/09/01dfd379daa71513f228fe7586aca829e4.jpg?imageView2/2/w/375/h/375/interlace/1'
}],
singleImages: {
src: '//img11.static.yhbimg.com/yhb-img01/2017/07/26/09/01496efd7e853c2aaa1e38035d788eaa8e.jpg?imageView2/2/w/750/h/364/interlace/1'
}
}
},
components: {...components}
};
</script>
... ...
<template>
<layout-body :auto-hide-header="true" class="page-detail">
<header-box slot="header" :auto-hide="true"></header-box>
<header-box slot="header" :auto-hide="true" :placeholder="false"></header-box>
<product-swipe :goods="detail.goods_list" ref="imageSwiper"></product-swipe>
<div class="detail-box border-bottom">
<shop-fav :entity="detail" class="border-bottom"></shop-fav>
... ...
... ... @@ -887,7 +887,7 @@ babel-preset-es2015-node6@^0.4.0:
babel-plugin-transform-es2015-modules-commonjs "^6.7.4"
babel-plugin-transform-es2015-parameters "^6.8.0"
babel-preset-es2015@^6.14.0:
babel-preset-es2015@^6.24.1:
version "6.24.1"
resolved "http://npm.yoho.cn/babel-preset-es2015/-/babel-preset-es2015-6.24.1.tgz#d44050d6bc2c9feea702aaf38d727a0210538939"
dependencies:
... ... @@ -947,7 +947,7 @@ babel-register@^6.26.0:
mkdirp "^0.5.1"
source-map-support "^0.4.15"
babel-runtime@^6.11.6, babel-runtime@^6.18.0, babel-runtime@^6.22.0, babel-runtime@^6.26.0:
babel-runtime@^6.18.0, babel-runtime@^6.22.0, babel-runtime@^6.26.0:
version "6.26.0"
resolved "http://npm.yoho.cn/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
dependencies:
... ...