Skip to content

严立 / mini-shimao

Go to a project
Commit 686afe38 by wjw
Options

ww-畅玩首页修改

parent 6e42362b
Inline Side-by-side
Showing with 341 additions and 19 deletions
pages/play/home/home.js
...@@ -7,12 +7,14 @@ let logicData = { ...@@ -7,12 +7,14 @@ let logicData = {
Page({ Page({
data: { data: {
bannerImg: App.globalData.appResourcesBase + 'play/home/type.png',
navigationLogoTop: 0, navigationLogoTop: 0,
navigationLogoMarginTop: 0, navigationLogoMarginTop: 0,
tabMarginTop: 0, tabMarginTop: 0,
banner: [], // banner: [],
bannerIndex: 0, // bannerIndex: 0,
tab: [ tab: [
{ {
...@@ -45,6 +47,49 @@ Page({ ...@@ -45,6 +47,49 @@ Page({
navigationFixed: false, navigationFixed: false,
navigationFixedBoundary: 212, navigationFixedBoundary: 212,
navigationCapsuleTop: wx.getMenuButtonBoundingClientRect().top, navigationCapsuleTop: wx.getMenuButtonBoundingClientRect().top,
recentList: [
{
id: 0,
img: ''
},
{
id: 1,
img: ''
},
{
id: 2,
img: ''
}
],
swiperRecentCurrent: 0,
movieList: [
{
id: 0,
img: '',
name: '阿丽塔：战斗天使',
dimensional: '3D',
type: '动作 / 科幻 / 冒险',
director: '罗伯特·罗德里格兹'
},
{
id: 1,
img: '',
name: '阿丽塔：战斗天使',
dimensional: '3D',
type: '动作 / 科幻 / 冒险',
director: '罗伯特·罗德里格兹'
},
{
id: 2,
img: '',
name: '阿丽塔：战斗天使',
dimensional: '3D',
type: '动作 / 科幻 / 冒险',
director: '罗伯特·罗德里格兹'
},
],
swiperMovieCurrent: 0
}, },
/** /**
...@@ -264,5 +309,41 @@ Page({ ...@@ -264,5 +309,41 @@ Page({
} }
} }
}) })
},
//跳转到艺文
onToArt: function () {
console.log('art')
},
//跳转到健康
onToHealth: function () {
console.log('Health')
},
//跳转到美食
onToFood: function () {
console.log('Food')
},
//跳转到休闲
onToLeisure: function () {
console.log('Leisure')
},
//跳转到住宿
onToHotel: function () {
console.log('Hotel')
},
// 近期活动swiper
swiperRecentChange: function (e) {
let swiperRecentCurrent = e.detail.current
this.setData({
swiperRecentCurrent
})
},
// 热门电影swiper
swiperMovieChange: function (e) {
let swiperMovieCurrent = e.detail.current
this.setData({
swiperMovieCurrent
})
} }
}) })
\ No newline at end of file
pages/play/home/home.wxml
...@@ -7,6 +7,71 @@ ...@@ -7,6 +7,71 @@
</view> </view>
<view class="banner"> <view class="banner">
<image src="{{bannerImg}}"></image>
<button class="art-button" bindtap="onToArt"></button>
<button class="health-button" bindtap="onToHealth"></button>
<button class="food-button" bindtap="onToFood"></button>
<button class="leisure-button" bindtap="onToLeisure"></button>
<button class="hotel-button" bindtap="onToHotel"></button>
</view>
<view class="title-wrapper row con-b align-c">
<image class="title">近期活动</image>
<image class="all" bindtap="onAllRecent">查看全部</image>
</view>
<swiper class="recent-swiper" next-margin="38rpx" bindchange="swiperRecentChange">
<block wx:for="{{recentList}}" wx:key="id">
<swiper-item class="recent-item">
<image class="{{swiperRecentCurrent === index ? 'recent-item-left' : '' }} {{swiperRecentCurrent === recentList.length - 1 ? 'recent-item-center' : ''}}" src="{{item.img}}"></image>
</swiper-item>
</block>
</swiper>
<view class="title-wrapper row con-b align-c">
<image class="title">近期活动</image>
<image class="all" bindtap="onAllRecent">查看全部</image>
</view>
<swiper class="movie-swiper" next-margin="38rpx" bindchange="swiperMovieChange">
<block wx:for="{{movieList}}" wx:key="id">
<swiper-item class="movie-item col con-e">
<view class="movie-wrapper {{swiperMovieCurrent === index ? 'movie-item-left' : '' }} {{swiperMovieCurrent === movieList.length - 1 ? 'movie-item-center' : ''}}">
<view class="movie-cover">
<image src="{{item.img}}"></image>
</view>
<view class="movie-info-wrapper">
<view class="movie-name row">
<text>{{item.name}}</text>
<view class="movie-dimensional">
<text>{{item.dimensional}}</text>
</view>
</view>
<view class="movie-info row">
<view class="movie-info-left">
<text>类型</text>
</view>
<view class="movie-info-right">
<text>{{item.type}}</text>
</view>
</view>
<view class="movie-info row">
<view class="movie-info-left">
<text>导演</text>
</view>
<view class="movie-info-right">
<text>{{item.director}}</text>
</view>
</view>
<view class="movie-btn">
<text>报名观影</text>
</view>
</view>
</view>
</swiper-item>
</block>
</swiper>
<!-- <view class="banner">
<swiper autoplay circular interval="2000" next-margin="64rpx" bindchange="eventBannerChange"> <swiper autoplay circular interval="2000" next-margin="64rpx" bindchange="eventBannerChange">
<block wx:for="{{banner}}" wx:for-index="index" wx:for-item="item" wx:key="index"> <block wx:for="{{banner}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<swiper-item> <swiper-item>
...@@ -14,20 +79,20 @@ ...@@ -14,20 +79,20 @@
</swiper-item> </swiper-item>
</block> </block>
</swiper> </swiper>
</view> </view> -->
<!-- 更多活动 --> <!-- 更多活动 -->
<view class="activity row con-e align-c" bindtap="onActivity"> <!-- <view class="activity row con-e align-c" bindtap="onActivity">
<text>查看全部活动</text> <text>查看全部活动</text>
<image src="/image/more.png"></image> <image src="/image/more.png"></image>
</view> </view> -->
<view class="ornament-wave"> <!-- <view class="ornament-wave">
<image src="/image/ornament-1.png"></image> <image src="/image/ornament-1.png"></image>
</view> </view> -->
<!-- 板块标签 --> <!-- 板块标签 -->
<view class="tab row con-b align-c {{navigationFixed ? 'tab-fixed' : ''}}" style="{{navigationFixed ? 'top: ' + (tabMarginTop - 4) + 'px' : ''}}"> <!-- <view class="tab row con-b align-c {{navigationFixed ? 'tab-fixed' : ''}}" style="{{navigationFixed ? 'top: ' + (tabMarginTop - 4) + 'px' : ''}}">
<block wx:for="{{tab}}" wx:for-index="index" wx:for-item="item" wx:key="index"> <block wx:for="{{tab}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<view class="tab-item col con-c" data-index="{{index}}" bindtap="onTabSelection"> <view class="tab-item col con-c" data-index="{{index}}" bindtap="onTabSelection">
<view class="row con-c align-c {{tabIndex === index ? 'tab-item-active' : 'tab-item-inactive'}}"> <view class="row con-c align-c {{tabIndex === index ? 'tab-item-active' : 'tab-item-inactive'}}">
...@@ -39,20 +104,20 @@ ...@@ -39,20 +104,20 @@
</view> </view>
</block> </block>
</view> </view>
<view class="tab-blank" hidden="{{!navigationFixed}}"></view> <view class="tab-blank" hidden="{{!navigationFixed}}"></view> -->
<view class="detail"> <!-- <view class="detail">
<block wx:for="{{tabDetail[tabIndex].describe}}" wx:for-index="index" wx:for-item="item" wx:key="index"> <block wx:for="{{tabDetail[tabIndex].describe}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<image mode="widthFix" src="{{item}}"></image> <image mode="widthFix" src="{{item}}"></image>
</block> </block>
</view> </view> -->
<view class="shop"> <!-- <view class="shop">
<block wx:for="{{tabDetail[tabIndex].shop}}" wx:for-index="index" wx:for-item="item" wx:key="index"> <block wx:for="{{tabDetail[tabIndex].shop}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<view class="shop-item"> <view class="shop-item">
<image src="{{item.cover}}"></image> <image src="{{item.cover}}"></image>
<button class="button row con-c align-c" style="{{'bottom: ' + item.y + 'rpx;left: ' + item.x + 'rpx;'}}" data-id="{{item.id}}" bindtap="onShopDetail">立即预定</button> <button class="button row con-c align-c" style="{{'bottom: ' + item.y + 'rpx;left: ' + item.x + 'rpx;'}}" data-id="{{item.id}}" bindtap="onShopDetail">立即预定</button>
</view> </view>
</block> </block>
</view> </view> -->
</view> </view>
\ No newline at end of file
pages/play/home/home.wxss
page { /* page {
background: linear-gradient(182deg,#FFFFFF 0%,#EBEDF7 100%); background: linear-gradient(182deg,#FFFFFF 0%,#EBEDF7 100%);
} } */
.navigation { .navigation {
z-index: 1900; z-index: 1900;
...@@ -29,21 +29,189 @@ page { ...@@ -29,21 +29,189 @@ page {
width: 130rpx; width: 130rpx;
height: 20rpx; height: 20rpx;
} }
.banner {
position: relative;
margin-top: 200rpx;
width: 750rpx;
height: 1200rpx;
}
.art-button {
position: absolute;
top: 40rpx;
left: 40rpx;
width: 454rpx;
height: 260rpx;
background: transparent;
}
.health-button {
position: absolute;
top: 320rpx;
left: 40rpx;
width: 296rpx;
height: 376rpx;
background: transparent;
}
.food-button {
position: absolute;
top: 350rpx;
right: 40rpx;
width: 276rpx;
height: 376rpx;
background: transparent;
}
.leisure-button {
position: absolute;
top: 788rpx;
left: 40rpx;
width: 304rpx;
height: 308rpx;
background: transparent;
}
.hotel-button {
position: absolute;
top: 820rpx;
right: 40rpx;
width: 296rpx;
height: 328rpx;
background: transparent;
.banner, }
.title-wrapper {
width: 670rpx;
margin-top: 30rpx;
}
.title {
width: 184rpx;
height: 64rpx;
background-color: #ccc;
}
.all {
width: 104rpx;
height: 36rpx;
background-color: #ccc;
}
.recent-swiper {
width: 750rpx;
height: 721rpx;
margin-top: 80rpx;
padding-bottom: 50rpx;
}
.recent-item {
width: 712rpx;
}
.recent-item image {
width: 648rpx;
background-color: #ccc;
}
.recent-item-left {
margin-left: 40rpx;
}
.recent-item-center {
margin-left: 51rpx;
}
.movie-swiper {
width: 750rpx;
height: 366rpx;
margin-top: 48rpx;
padding-bottom: 50rpx;
}
.movie-item {
width: 712rpx;
}
.movie-wrapper {
position: relative;
width: 648rpx;
height: 326rpx;
padding: 40rpx 40rpx 40rpx 260rpx;
background-color: #F5F6F8;
border-radius: 4rpx;
}
.movie-cover {
position: absolute;
left: 40rpx;
bottom: 40rpx;
width: 220rpx;
height: 326rpx;
background-color: #ccc;
border-radius: 4rpx;
}
.movie-item-left {
margin-left: 40rpx;
}
.movie-item-center {
margin-left: 51rpx;
}
.movie-info-wrapper {
margin-left: 40rpx;
}
.movie-name text {
display: -webkit-box;
color: #15191F;
font-size: 30rpx;
max-width: 240rpx;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
}
.movie-dimensional {
width: 52rpx;
height: 32rpx;
margin-top: 6rpx;
margin-left: 12rpx;
color: #fff;
font-size: 20rpx;
text-align: center;
line-height: 32rpx;
background: #15191F;
opacity: 0.5;
border-radius: 4rpx;
}
.movie-info {
margin-top: 16rpx;
font-size: 26rpx;
}
.movie-info-left {
color: #959DA9;
}
.movie-info-right {
display: -webkit-box;
margin-left: 8rpx;
color: #656E7B;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
}
.movie-btn {
width: 152rpx;
height: 56rpx;
margin-top: 42rpx;
color: #fff;
font-size: 26rpx;
text-align: center;
line-height: 56rpx;
background: #86C5E1;
border-radius: 4rpx;
}
/* .banner,
swiper { swiper {
position: relative; position: relative;
width: 100%; width: 100%;
min-height: 480rpx; min-height: 480rpx;
margin-top: 100rpx; margin-top: 100rpx;
} } */
/*
swiper-item { swiper-item {
position: relative; position: relative;
left: 56rpx; left: 56rpx;
width: 638rpx !important; width: 638rpx !important;
height: 480rpx !important; height: 480rpx !important;
} } */
.banner-content { .banner-content {
width: 638rpx; width: 638rpx;
...@@ -185,4 +353,9 @@ swiper-item { ...@@ -185,4 +353,9 @@ swiper-item {
font-weight: 500; font-weight: 500;
color: #ffffff; color: #ffffff;
line-height: 42rpx; line-height: 42rpx;
}
image {
width: 100%;
height: 100%;
} }
\ No newline at end of file
pages/play/movie-detail/movie-detail.wxml
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
<view class="movie-cover"> <view class="movie-cover">
<image src="{{item.cover}}"></image> <image src="{{item.cover}}"></image>
</view> </view>
<view class="movie-info-wrapper"> <view class="movie-info-wrapper">
<view class="movie-name row"> <view class="movie-name row">
<text>{{movieInfo.name}}</text> <text>{{movieInfo.name}}</text>
<view class="movie-dimensional"> <view class="movie-dimensional">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment