遇见
5 years ago
12 changed files with 190 additions and 5 deletions
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,66 @@
@@ -0,0 +1,66 @@
|
||||
<template> |
||||
<div class="container" @click="handleGalleryClick"> |
||||
<div class="wrapper"> |
||||
<swiper :options="swiperOptions"> |
||||
<swiper-slide v-for="(item, index) of imgs" :key="index"> |
||||
<img class="gallery-img" :src="item" /> |
||||
</swiper-slide> |
||||
<div class="swiper-pagination" slot="pagination"></div> |
||||
</swiper> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
name: "CommitGallery", |
||||
props: { |
||||
imgs: { |
||||
type: Array, |
||||
default: function() { |
||||
return []; |
||||
} |
||||
} |
||||
}, |
||||
data: function() { |
||||
return { |
||||
swiperOptions: { |
||||
pagination: ".swiper-pagination", |
||||
paginationType: "fraction", |
||||
observeParents: true, |
||||
observer: true |
||||
} |
||||
}; |
||||
}, |
||||
methods: { |
||||
handleGalleryClick: function() { |
||||
this.$emit("close"); |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="stylus" scoped> |
||||
.container >>> .swiper-container |
||||
overflow inherit |
||||
.container |
||||
display flex |
||||
flex-direction column |
||||
justify-content center |
||||
z-index 99 |
||||
position fixed |
||||
left 0 |
||||
right 0 |
||||
top 0 |
||||
bottom 0 |
||||
background #000000 |
||||
.wrapper |
||||
height 0 |
||||
width 100% |
||||
padding-bottom 100% |
||||
.gallery-img |
||||
width 100% |
||||
.swiper-pagination |
||||
color #ffffff |
||||
bottom -1rem |
||||
</style> |
||||
@ -0,0 +1,20 @@
@@ -0,0 +1,20 @@
|
||||
<template> |
||||
<div> |
||||
<detail-banner></detail-banner> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import DetailBanner from "./components/banner"; |
||||
|
||||
export default { |
||||
name: "Detail", |
||||
components: { |
||||
DetailBanner: DetailBanner |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="stylus" scoped> |
||||
|
||||
</style> |
||||
@ -0,0 +1,84 @@
@@ -0,0 +1,84 @@
|
||||
<template> |
||||
<div> |
||||
<div class="banner" @click="handleBannerClick"> |
||||
<img |
||||
class="banner-img" |
||||
src="https://img1.qunarzz.com/sight/p0/1602/a2/a2db6aea3707663a90.img.jpg_600x330_95322c03.jpg" |
||||
/> |
||||
<div class="banner-info"> |
||||
<div class="banner-title">梦幻百花洲</div> |
||||
<div class="banner-number"> |
||||
<span class="iconfont back-icon banner-icon"></span> |
||||
39 |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<commit-gallery |
||||
:imgs="imgs" |
||||
v-show="showGallery" |
||||
@close="handleGalleryClose" |
||||
></commit-gallery> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import CommitGallery from "commom/gallery/Gallery"; |
||||
|
||||
export default { |
||||
name: "DetailBanner", |
||||
data: function() { |
||||
return { |
||||
showGallery: false, |
||||
imgs: [ |
||||
"http://img1.qunarzz.com/sight/p0/1602/a2/a2db6aea3707663a90.img.jpg_r_800x800_f06fc71d.jpg", |
||||
"http://img1.qunarzz.com/sight/p0/1602/ec/ecf4f576181c285790.img.jpg_r_800x800_c2833cda.jpg" |
||||
] |
||||
} |
||||
}, |
||||
components: { |
||||
CommitGallery: CommitGallery |
||||
}, |
||||
methods: { |
||||
handleBannerClick: function() { |
||||
this.showGallery = true; |
||||
}, |
||||
handleGalleryClose: function() { |
||||
this.showGallery = false; |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="stylus" scoped> |
||||
.banner |
||||
position relative |
||||
overflow hidden |
||||
height 0 |
||||
padding 0 |
||||
padding-bottom 55% |
||||
.banner-img |
||||
width 100% |
||||
.banner-info |
||||
display flex |
||||
position absolute |
||||
left 0 |
||||
right 0 |
||||
bottom 0 |
||||
line-height .6rem |
||||
color #ffffff |
||||
background-image linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8)) |
||||
.banner-title |
||||
flex 1 |
||||
font-size .32rem |
||||
padding 0 .2rem |
||||
.banner-number |
||||
height .32rem |
||||
line-height .32rem |
||||
margin-top .14rem |
||||
padding 0 .4rem |
||||
border-radius .2rem |
||||
background rgb(0, 0, 0, 0) |
||||
font-size .24rem |
||||
.banner-icon |
||||
font-size .24rem |
||||
</style> |
||||
Reference in new issue