Skip to content

严立 / mini-shimao

Go to a project
Commit d3b84334 by 严立
Options

LL - 地图详情畅玩

parent 6ce1a54b
Inline Side-by-side
Showing with 220 additions and 107 deletions
app.json
...@@ -25,6 +25,7 @@ ...@@ -25,6 +25,7 @@
"pages/notice/notice", "pages/notice/notice",
"pages/notice-detail/notice-detail", "pages/notice-detail/notice-detail",
"pages/shop-detail/shop-detail", "pages/shop-detail/shop-detail",
"pages/shop-point-detail/shop-point-detail",
"pages/strategy/strategy", "pages/strategy/strategy",
"pages/index/index" "pages/index/index"
...@@ -53,7 +54,7 @@ ...@@ -53,7 +54,7 @@
}, },
"window": { "window": {
"navigationStyle": "custom", "navigationStyle": "custom",
"navigationBarTextStyle": "white", "navigationBarTextStyle": "black",
"backgroundColor": "#F2F2F2", "backgroundColor": "#F2F2F2",
"backgroundTextStyle": "dark", "backgroundTextStyle": "dark",
"enablePullDownRefresh": false "enablePullDownRefresh": false
......
pages/guide/guide.js
import iPoint from './js/point.js' import iPoint from './js/point.js'
let App = getApp()
let logicData = { let logicData = {
option: {} option: {}
} }
...@@ -11,6 +13,8 @@ Page({ ...@@ -11,6 +13,8 @@ Page({
winPointDetail: false, winPointDetail: false,
pointInfo: iPoint, pointInfo: iPoint,
selectionPoint: 0, selectionPoint: 0,
isSave: false,
}, },
onLoad: function (options) { onLoad: function (options) {
...@@ -28,7 +32,7 @@ Page({ ...@@ -28,7 +32,7 @@ Page({
// 数值以设计图上的像素为准 // 数值以设计图上的像素为准
let funcMapStyle = { let funcMapStyle = {
'width': 3329, 'width': 3329,
'height': 1218 'height': 1255
} }
let funcWindowHeight = wx.getSystemInfoSync().windowHeight let funcWindowHeight = wx.getSystemInfoSync().windowHeight
...@@ -194,7 +198,9 @@ Page({ ...@@ -194,7 +198,9 @@ Page({
}, },
onCancel: function () { onCancel: function () {
console.log('onCancel') // 当从景点详情进入屏蔽该功能
if (logicData.option.id) return
let funcPointInfo = this.data.pointInfo let funcPointInfo = this.data.pointInfo
for (let i = 0, l = funcPointInfo.length; i < l; i++) { for (let i = 0, l = funcPointInfo.length; i < l; i++) {
funcPointInfo[i].isActive = false funcPointInfo[i].isActive = false
...@@ -204,4 +210,46 @@ Page({ ...@@ -204,4 +210,46 @@ Page({
winPointDetail: false, winPointDetail: false,
}) })
}, },
onSaveMap: function () {
if (this.data.isSave) {
wx.lin.showToast({
icon: 'success',
title: '地图已保存至相册',
show: true,
})
return
}
wx.lin.showToast({
icon: 'loading',
title: '正在下载...',
show: true,
duration: 20000,
})
wx.downloadFile({
url: App.globalData.appResourcesBase + 'guide/save-guide.png',
success: (result) => {
console.log(result)
wx.saveImageToPhotosAlbum({
filePath: result.tempFilePath,
success: (result) => {
wx.lin.hideToast()
this.setData({
isSave: true
})
},
fail: (error) => {
console.log(error)
wx.lin.hideToast()
}
})
},
fail: (error) => {
console.log(error)
wx.lin.hideToast()
}
})
},
}) })
\ No newline at end of file
pages/guide/guide.wxml
<l-toast></l-toast>
<!-- 畅玩 - 活动列表 --> <!-- 畅玩 - 活动列表 -->
<navigation class="navigation" titleText="智慧导览" backIcon="/image/back.png"></navigation> <navigation class="navigation" titleText="智慧导览" backIcon="/image/back.png"></navigation>
...@@ -25,6 +27,11 @@ ...@@ -25,6 +27,11 @@
</block> </block>
</view> </view>
</scroll-view> </scroll-view>
<view class="point-detail" hidden="{{!winPointDetail}}" catch:tap="onPointDetail"> <view class="point-detail" hidden="{{!winPointDetail}}" catch:tap="onPointDetail">
<image src="{{pointDetail}}"></image> <image src="{{pointDetail}}"></image>
</view>
<view class="save-map row con-c align-c" bindtap="onSaveMap">
<text>保存完整地图</text>
</view> </view>
\ No newline at end of file
pages/guide/guide.wxss
...@@ -72,6 +72,7 @@ ...@@ -72,6 +72,7 @@
/* 景点详情卡片 */ /* 景点详情卡片 */
.point-detail { .point-detail {
z-index: 1900;
position: fixed; position: fixed;
bottom: 40rpx; bottom: 40rpx;
} }
...@@ -79,4 +80,18 @@ ...@@ -79,4 +80,18 @@
.point-detail image { .point-detail image {
width: 750rpx; width: 750rpx;
height: 230rpx; height: 230rpx;
}
/* 保存完整地图 */
.save-map {
position: fixed;
bottom: 90rpx;
left: 214rpx;
width: 324rpx;
height: 96rpx;
background: rgba(0, 0, 0, 0.4);
border-radius: 4rpx;
border:1px solid rgba(21, 25, 31, 1);
color: #FFFFFF;
} }
\ No newline at end of file
pages/guide/js/point.js
let output = [ let output = [
{ {
x: 174, x: 160,
y: 220, y: 228,
id: '', id: '',
name: '温泉洋房（建设中）', name: '温泉洋房（建设中）',
icon: './image/icon/01.png', icon: './image/icon/01.png',
...@@ -9,7 +9,7 @@ let output = [ ...@@ -9,7 +9,7 @@ let output = [
detail: '/pages/shop-point-detail/shop-point-detail?id=105', detail: '/pages/shop-point-detail/shop-point-detail?id=105',
isActive: false, isActive: false,
}, { }, {
x: 830, x: 810,
y: 220, y: 220,
id: '', id: '',
name: '海错图2号馆', name: '海错图2号馆',
...@@ -36,8 +36,8 @@ let output = [ ...@@ -36,8 +36,8 @@ let output = [
detail: '/pages/shop-detail/shop-detail?id=4', detail: '/pages/shop-detail/shop-detail?id=4',
isActive: false, isActive: false,
}, { }, {
x: 680, x: 666,
y: 276, y: 280,
id: 6, id: 6,
name: '星空影院', name: '星空影院',
icon: './image/icon/05.png', icon: './image/icon/05.png',
...@@ -54,8 +54,8 @@ let output = [ ...@@ -54,8 +54,8 @@ let output = [
detail: '/pages/shop-detail/shop-detail?id=3', detail: '/pages/shop-detail/shop-detail?id=3',
isActive: false, isActive: false,
}, { }, {
x: 1384, x: 1370,
y: 276, y: 284,
id: 5, id: 5,
name: '原野MOJITO', name: '原野MOJITO',
icon: './image/icon/07.png', icon: './image/icon/07.png',
...@@ -63,8 +63,8 @@ let output = [ ...@@ -63,8 +63,8 @@ let output = [
detail: '/pages/shop-detail/shop-detail?id=5', detail: '/pages/shop-detail/shop-detail?id=5',
isActive: false, isActive: false,
}, { }, {
x: 1704, x: 1708,
y: 294, y: 306,
id: 2, id: 2,
name: '拾光花坊', name: '拾光花坊',
icon: './image/icon/08.png', icon: './image/icon/08.png',
...@@ -108,8 +108,8 @@ let output = [ ...@@ -108,8 +108,8 @@ let output = [
detail: '/pages/shop-point-detail/shop-point-detail?id=104', detail: '/pages/shop-point-detail/shop-point-detail?id=104',
isActive: false, isActive: false,
}, { }, {
x: 2836, x: 2794,
y: 592, y: 600,
id: '', id: '',
name: '儿童营地', name: '儿童营地',
icon: './image/icon/13.png', icon: './image/icon/13.png',
......
pages/home/home.js
...@@ -10,6 +10,7 @@ let logicData = { ...@@ -10,6 +10,7 @@ let logicData = {
Page({ Page({
data: { data: {
// 导航栏相关属性 // 导航栏相关属性
navigationScroll: 0,
navigationLogoTop: 0, navigationLogoTop: 0,
navigationAnimationShow: 0, navigationAnimationShow: 0,
isNavigationLogoWhite: true, isNavigationLogoWhite: true,
...@@ -226,6 +227,10 @@ Page({ ...@@ -226,6 +227,10 @@ Page({
if (logicData.pageScrollLock) return if (logicData.pageScrollLock) return
logicData.pageScrollLock = true logicData.pageScrollLock = true
this.setData({
navigationScroll: funcEvent.scrollTop
})
if (funcEvent.scrollTop >= this.data.bannerHeight) { if (funcEvent.scrollTop >= this.data.bannerHeight) {
if (this.data.isNavigationLogoWhite) { if (this.data.isNavigationLogoWhite) {
this.setData({ this.setData({
......
pages/home/home.wxml
<navigation class="navigation" background="{{'rgba(255, 255, 255, ' + navigationAnimationShow + ')'}}"></navigation> <navigation class="navigation" background="{{'rgba(255, 255, 255, ' + navigationAnimationShow + ')'}}" scrollHeight="{{navigationScroll}}"></navigation>
<view class="container"> <view class="container">
<image class="logo" src="/image/logo-w.png" hidden="{{!isNavigationLogoWhite}}" style="{{'top: ' + navigationLogoTop + 'px'}}"></image> <image class="logo" src="/image/logo-w.png" hidden="{{!isNavigationLogoWhite}}" style="{{'top: ' + navigationLogoTop + 'px'}}"></image>
......
pages/shop-detail/shop-detail.wxss
...@@ -50,6 +50,7 @@ ...@@ -50,6 +50,7 @@
} }
.banner-wave image { .banner-wave image {
display: block;
width: 750rpx; width: 750rpx;
height: 60rpx; height: 60rpx;
} }
......
pages/shop-point-detail/shop-point-detail.js
...@@ -4,6 +4,7 @@ Page({ ...@@ -4,6 +4,7 @@ Page({
data: { data: {
// banner 列表数据 // banner 列表数据
banner: [], banner: [],
bannerWave: '',
bannerIndex: 0, bannerIndex: 0,
bannerHeight: 0, bannerHeight: 0,
...@@ -28,95 +29,123 @@ Page({ ...@@ -28,95 +29,123 @@ Page({
let funcDetail = [ let funcDetail = [
{ {
id: 101, id: 101,
name: '星光广场',
contact: '13316748039',
banner: [ banner: [
App.globalData.appResourcesBase + 'guide/banner/banner-1-1.png', App.globalData.appResourcesBase + 'guide/banner/banner-1-1.png',
App.globalData.appResourcesBase + 'guide/banner/banner-1-2.png', App.globalData.appResourcesBase + 'guide/banner/banner-1-2.png',
App.globalData.appResourcesBase + 'guide/banner/banner-1-3.png', App.globalData.appResourcesBase + 'guide/banner/banner-1-3.png',
], ],
name: '星光广场', ornament: './image/ornament-1.png',
title: '星光广场', describe: [
date: '周一至周日 10:00 - 20:00', App.globalData.appResourcesBase + 'guide/detail/detail-1-1.png',
describe: '星光点点的灯、洁白无瑕的水晶白、汉白玉铺地配以建筑华美端庄的立面，配以200余盏小米灯，整个星光广场熠熠生辉，闪耀着奇幻秘境的精致、优雅与纯洁无瑕。', App.globalData.appResourcesBase + 'guide/detail/detail-1-2.png',
contact: '13316748039', App.globalData.appResourcesBase + 'guide/detail/detail-1-3.png',
background: 'background: linear-gradient(0, #2959B0 30%, rgba(0, 0, 0, 0));', App.globalData.appResourcesBase + 'guide/detail/detail-1-4.png',
],
background: 'background: #314f88;',
}, { }, {
id: 102, id: 102,
name: '云之亭',
contact: '13316748039',
banner: [ banner: [
App.globalData.appResourcesBase + 'guide/banner/banner-2-1.png', App.globalData.appResourcesBase + 'guide/banner/banner-2-1.png',
App.globalData.appResourcesBase + 'guide/banner/banner-2-2.png', App.globalData.appResourcesBase + 'guide/banner/banner-2-2.png',
App.globalData.appResourcesBase + 'guide/banner/banner-2-3.png', App.globalData.appResourcesBase + 'guide/banner/banner-2-3.png',
], ],
name: '云之亭', ornament: './image/ornament-2.png',
title: '云之亭', describe: [
date: '周一至周日 10:00 - 20:00', App.globalData.appResourcesBase + 'guide/detail/detail-2-1.png',
describe: '云白雕花顶，配白色纱幔，在日光下与湖中倒影相映成趣，于平静的湖面中散发这精灵般的光彩，置身其中偶见白鹭成行，聆听风之呢喃。', App.globalData.appResourcesBase + 'guide/detail/detail-2-2.png',
contact: '13316748039', App.globalData.appResourcesBase + 'guide/detail/detail-2-3.png',
background: 'background: linear-gradient(0, #9D9EE0, rgba(0, 0, 0, 0));', App.globalData.appResourcesBase + 'guide/detail/detail-2-4.png',
],
background: 'background: #9d9ee0;',
}, { }, {
id: 103, id: 103,
name: '湿地公园',
contact: '13316748039',
banner: [ banner: [
App.globalData.appResourcesBase + 'guide/banner/banner-3-1.png', App.globalData.appResourcesBase + 'guide/banner/banner-3-1.png',
App.globalData.appResourcesBase + 'guide/banner/banner-3-2.png', App.globalData.appResourcesBase + 'guide/banner/banner-3-2.png',
App.globalData.appResourcesBase + 'guide/banner/banner-3-3.png', App.globalData.appResourcesBase + 'guide/banner/banner-3-3.png',
], ],
name: '湿地公园', ornament: './image/ornament-3.png',
title: '湿地公园', describe: [
date: '周一至周日 10:00 - 22:00', App.globalData.appResourcesBase + 'guide/detail/detail-3-1.png',
describe: '碧海银湖具备先天的自然资源优势，面朝黄茅海，坐拥1500亩的红树林湿地公园，底栖动物、擦肩而过的迁徙鸟、充满负氧离子的空气……一年四季，你都可以在这里找到属于它的主色调。', App.globalData.appResourcesBase + 'guide/detail/detail-3-2.png',
contact: '13316748039', App.globalData.appResourcesBase + 'guide/detail/detail-3-3.png',
background: 'background: linear-gradient(0, #75AE5C, rgba(0, 0, 0, 0));', App.globalData.appResourcesBase + 'guide/detail/detail-3-4.png',
],
background: 'background: #8bac7d;',
}, { }, {
id: 104, id: 104,
name: '新月码头',
contact: '13316748039',
banner: [ banner: [
App.globalData.appResourcesBase + 'guide/banner/banner-4-1.png', App.globalData.appResourcesBase + 'guide/banner/banner-4-1.png',
App.globalData.appResourcesBase + 'guide/banner/banner-4-2.png', App.globalData.appResourcesBase + 'guide/banner/banner-4-2.png',
App.globalData.appResourcesBase + 'guide/banner/banner-4-3.png', App.globalData.appResourcesBase + 'guide/banner/banner-4-3.png',
], ],
name: '新月码头', ornament: './image/ornament-4.png',
title: '新月码头', describe: [
date: '周一至周日 10:00 - 21:30', App.globalData.appResourcesBase + 'guide/detail/detail-4-1.png',
describe: '采用3D打印的拱门雕塑，以浪花与繁星之点缀，流线活跃、体态优美、纹理精细，雄伟地矗立在新月湖畔，与如黛远山交相辉映，静静地守护着可同时容纳8只小船停靠的新月码头。', App.globalData.appResourcesBase + 'guide/detail/detail-4-2.png',
contact: '13316748039', App.globalData.appResourcesBase + 'guide/detail/detail-4-3.png',
background: 'background: linear-gradient(0, #2A94B0, rgba(0, 0, 0, 0));', App.globalData.appResourcesBase + 'guide/detail/detail-4-4.png',
],
background: 'background: #6fc0d0;',
}, { }, {
id: 105, id: 105,
name: '温泉洋房',
contact: '13316748039',
banner: [ banner: [
App.globalData.appResourcesBase + 'guide/banner/banner-5-1.png', App.globalData.appResourcesBase + 'guide/banner/banner-5-1.png',
App.globalData.appResourcesBase + 'guide/banner/banner-5-2.png', App.globalData.appResourcesBase + 'guide/banner/banner-5-2.png',
App.globalData.appResourcesBase + 'guide/banner/banner-5-3.png', App.globalData.appResourcesBase + 'guide/banner/banner-5-3.png',
], ],
name: '温泉洋房', ornament: './image/ornament-5.png',
title: '温泉洋房', describe: [
date: '周一至周日 10:00 - 凌晨02:00', App.globalData.appResourcesBase + 'guide/detail/detail-5-1.png',
describe: '49间温泉洋房，每一户独立温泉入户、无敌景观大阳台，一览山海湖泉林风光；引入国内最专业的托管服务专家斯维登，打造助理房东一对一贴心服务，解决住宿期间房主及住宿者所有需求。洋房一楼还设有音乐广场、景观泳池。', App.globalData.appResourcesBase + 'guide/detail/detail-5-2.png',
contact: '13316748039', App.globalData.appResourcesBase + 'guide/detail/detail-5-3.png',
background: 'background: linear-gradient(0, #5CA2E2, rgba(0, 0, 0, 0));', App.globalData.appResourcesBase + 'guide/detail/detail-5-4.png',
],
background: 'background: #5ca2e2;',
}, { }, {
id: 106, id: 106,
name: '星耀银湖',
contact: '13316748039',
banner: [ banner: [
App.globalData.appResourcesBase + 'guide/banner/banner-6-1.png', App.globalData.appResourcesBase + 'guide/banner/banner-6-1.png',
App.globalData.appResourcesBase + 'guide/banner/banner-6-2.png', App.globalData.appResourcesBase + 'guide/banner/banner-6-2.png',
App.globalData.appResourcesBase + 'guide/banner/banner-6-3.png', App.globalData.appResourcesBase + 'guide/banner/banner-6-3.png',
], ],
name: '星耀银湖', ornament: './image/ornament-6.png',
title: '星耀银湖', describe: '高8米、重4.5吨的鲸鱼胖茂，采用多切面锆石与镜面不锈钢打造，配合10米高水幕背景、裸眼3d效果，环绕立体声场营造，将大鲸鱼、小鱼群都生动地展现在我们眼前，感受星空与大海的交相辉映。', describe: [
date: '周一至周日 10:00 - 20:30', App.globalData.appResourcesBase + 'guide/detail/detail-6-1.png',
describe: '高8米、重4.5吨的鲸鱼胖茂，采用多切面锆石与镜面不锈钢打造，配合10米高水幕背景、裸眼3d效果，环绕立体声场营造，将大鲸鱼、小鱼群都生动地展现在我们眼前，感受星空与大海的交相辉映。', App.globalData.appResourcesBase + 'guide/detail/detail-6-2.png',
contact: '13316748039', App.globalData.appResourcesBase + 'guide/detail/detail-6-3.png',
background: 'background: linear-gradient(0, #D69E60, rgba(0, 0, 0, 0));', App.globalData.appResourcesBase + 'guide/detail/detail-6-4.png',
],
background: 'background: #82524c;',
}, { }, {
id: 107, id: 107,
name: '奇幻森林',
contact: '13316748039',
banner: [ banner: [
App.globalData.appResourcesBase + 'guide/banner/banner-7-1.png', App.globalData.appResourcesBase + 'guide/banner/banner-7-1.png',
App.globalData.appResourcesBase + 'guide/banner/banner-7-2.png', App.globalData.appResourcesBase + 'guide/banner/banner-7-2.png',
App.globalData.appResourcesBase + 'guide/banner/banner-7-3.png', App.globalData.appResourcesBase + 'guide/banner/banner-7-3.png',
], ],
name: '奇幻森林', ornament: './image/ornament-7.png',
title: '奇幻森林', describe: [
date: '周一至周日 10:00 - 20:30', App.globalData.appResourcesBase + 'guide/detail/detail-7-1.png',
describe: '云朵廊架下，混合花径中藏有上百种奇花异草，炫彩科技的蜻蜓、蝴蝶等发光雕塑与林间小鹿一起，共探奇幻曼妙之森。', App.globalData.appResourcesBase + 'guide/detail/detail-7-2.png',
contact: '13316748039', App.globalData.appResourcesBase + 'guide/detail/detail-7-3.png',
background: 'background: linear-gradient(0, #458048, rgba(0, 0, 0, 0));', App.globalData.appResourcesBase + 'guide/detail/detail-7-4.png',
],
background: 'background: #659b82;',
} }
] ]
...@@ -129,6 +158,7 @@ Page({ ...@@ -129,6 +158,7 @@ Page({
this.setData({ this.setData({
banner: funcDetail[funcIndex].banner, banner: funcDetail[funcIndex].banner,
bannerWave: funcDetail[funcIndex].ornament,
info: { info: {
id: funcDetail[funcIndex].id, id: funcDetail[funcIndex].id,
name: funcDetail[funcIndex].name, name: funcDetail[funcIndex].name,
......
pages/shop-point-detail/shop-point-detail.wxml
<!-- 畅玩 - 商店详情 --> <!-- 畅玩 - 商店详情 -->
<navigation class="navigation" titleText="{{info.name}}" color="#ffffff" backIcon="/image/back-w.png"></navigation> <navigation class="navigation" titleText="{{info.name}}" color="#ffffff" backIcon="/image/back-w.png"></navigation>
<view class="container" style="{{'height: ' + bannerHeight + 'px;'}}"> <view class="container">
<view id="banner" class="banner" style="{{'height: ' + bannerHeight + 'px;'}}"> <view id="banner" class="banner">
<swiper autoplay circular class="banner-swiper" style="{{'height: ' + bannerHeight + 'px;'}}" indicator-dots="{{false}}" interval="2000" duration="500" bindchange="eventSwiperChange"> <swiper autoplay circular class="banner-swiper" indicator-dots="{{false}}" interval="2000" duration="500" bindchange="eventSwiperChange">
<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 class="banner-swiper-item" style="{{'height: ' + bannerHeight + 'px;'}}"> <swiper-item class="banner-swiper-item">
<image class="banner-swiper-image" src="{{item}}" style="{{'height: ' + bannerHeight + 'px;'}}" mode="aspectFill"></image> <image class="banner-swiper-image" src="{{item}}" mode="aspectFill"></image>
</swiper-item> </swiper-item>
</block> </block>
</swiper> </swiper>
<view class="banner-swiper-point"> <view class="banner-swiper-point">
<swiper-point bannerStyle="{{0}}" bannerActiveIndex="{{bannerIndex}}"></swiper-point> <swiper-point bannerStyle="{{1}}" bannerActiveIndex="{{bannerIndex}}"></swiper-point>
</view>
<view class="banner-wave">
<image src="{{bannerWave}}" mode="widthFix"></image>
</view> </view>
</view> </view>
<view class="detail" style="{{info.background}}"> <view class="describe" style="{{info.background}}">
<view class="detail-title"> <block wx:for="{{info.describe}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<text>{{info.title}}</text> <image src="{{item}}" mode="aspectFit"></image>
</view> </block>
<view class="detail-other">
<text>{{info.describe}}</text>
</view>
</view> </view>
</view> </view>
\ No newline at end of file
pages/shop-point-detail/shop-point-detail.wxss
...@@ -10,66 +10,67 @@ page { ...@@ -10,66 +10,67 @@ page {
width: 750rpx; width: 750rpx;
} }
.navigation-bar-image {
z-index: 1100;
position: fixed;
top: 60rpx;
left: 50rpx;
width: 200rpx;
height: 60rpx;
}
.banner { .banner {
z-index: 9; z-index: 9;
position: relative; position: relative;
width: 750rpx; width: 750rpx;
height: 100%; height: 880rpx;
background: #ffffff;
} }
.banner-swiper, .banner-swiper,
.banner-swiper-item, .banner-swiper-item,
.banner-swiper-image { .banner-swiper-image {
position: absolute;
top: 0 !important;
left: 0 !important;
width: 750rpx; width: 750rpx;
height: 100%; height: 880rpx;
} }
.banner-swiper-point { .banner-swiper-point {
z-index: 9; z-index: 1900;
position: relative; position: relative;
top: 66%; bottom: 110rpx;
left: 0; left: 0;
} }
.banner-wave {
z-index: 1100;
position: relative;
bottom: 60rpx;
left: 0;
width: 750rpx;
height: 60rpx;
}
.banner-wave image {
display: block;
width: 750rpx;
height: 60rpx;
}
/* 详情样式 */ /* 详情样式 */
.detail { .describe {
z-index: 9;
position: fixed;
bottom: 0;
width: 750rpx; width: 750rpx;
height: 46%;
padding-top: 40%;
} }
.detail-title { .describe image:nth-child(1) {
width: 670rpx;
height: 52rpx;
margin: 50rpx 0 0 40rpx;
}
.describe image:nth-child(2) {
width: 670rpx;
height: 50rpx;
margin: 8rpx 0 0 40rpx;
}
.describe image:nth-child(3) {
width: 670rpx; width: 670rpx;
min-height: 76rpx; height: 90rpx;
margin: 0 40rpx 0 40rpx; margin: 24rpx 0 0 40rpx;
font-size: 54rpx;
font-weight: bold;
color: #FFFFFF;
line-height: 76rpx;
} }
.detail-other { .describe image:nth-child(4) {
width: 670rpx; width: 670rpx;
min-height: 250rpx; height: 230rpx;
margin: 30rpx 40rpx; margin: 56rpx 0 40rpx 40rpx;
font-size: 30rpx;
color: #FFFFFF;
line-height: 50rpx;
} }
\ No newline at end of file
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