Myth
5 years ago
27 changed files with 805 additions and 231 deletions
@ -1,32 +1,83 @@ |
|||||
.swiper { |
/* pages/pbService/museum/info/index.wxss */ |
||||
width: 100%; |
.bg { |
||||
height: 400rpx; |
background: url(https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/infobg.png); |
||||
|
background-size: 100% 100%; |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
} |
||||
|
.title { |
||||
|
display: flex; |
||||
|
align-items: flex-end; |
||||
|
height: 190rpx; |
||||
|
color: #0B898E; |
||||
|
font-size: 48rpx; |
||||
|
font-weight: bold; |
||||
|
margin-left: 40rpx; |
||||
|
margin-bottom: 20rpx; |
||||
} |
} |
||||
.swiper image { |
.infoline1 { |
||||
height: 400rpx; |
|
||||
display: block; |
display: block; |
||||
|
width: 720rpx; |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
top: 190rpx; |
||||
|
} |
||||
|
.page { |
||||
width: 100%; |
width: 100%; |
||||
|
height: 100%; |
||||
} |
} |
||||
page { |
.address { |
||||
background: #fff; |
display: flex; |
||||
|
align-items: center; |
||||
|
font-size: 28rpx; |
||||
|
color: #333333; |
||||
|
padding: 18rpx 0; |
||||
} |
} |
||||
.top-box { |
.address image { |
||||
padding: 20rpx 39rpx; |
display: block; |
||||
background: white; |
flex-shrink: 0; |
||||
border-radius: 20rpx 20rpx 0px 0px; |
margin-left: 38rpx; |
||||
margin-bottom: 25rpx; |
width: 30rpx; |
||||
|
height: 30rpx; |
||||
|
margin-right: 16rpx; |
||||
} |
} |
||||
.title { |
.infoline3,.infoline2,.infoarrow { |
||||
font-size: 32rpx; |
position: absolute; |
||||
color: #000; |
width: 250rpx; |
||||
font-weight:500; |
bottom: 47rpx; |
||||
|
display: block; |
||||
} |
} |
||||
.info-address { |
.infoline3 { |
||||
color: #666; |
right: 0; |
||||
font-size: 27rpx; |
|
||||
} |
} |
||||
.content { |
.infoline2 { |
||||
|
left: 0; |
||||
|
} |
||||
|
.infoarrow { |
||||
|
width: 60rpx; |
||||
|
bottom: 26rpx; |
||||
|
left: 50%; |
||||
|
margin-left: -30rpx; |
||||
|
|
||||
|
} |
||||
|
.infoarrow.ani { |
||||
|
-webkit-animation: bounce-down 1.6s linear infinite;animation: bounce-down 1.6s linear infinite; |
||||
|
} |
||||
|
.detail { |
||||
|
display: block; |
||||
|
margin: 20rpx 30rpx; |
||||
font-size: 30rpx; |
font-size: 30rpx; |
||||
padding: 40rpx; |
} |
||||
background: white; |
@keyframes bounce-down { |
||||
|
25% {transform: translateY(-10rpx);opacity:0.3;} |
||||
|
50%{transform: translateY(0);opacity:1;} |
||||
|
75% {transform: translateY(10rpx);opacity:1;} |
||||
|
100% {transform: translateY(0);opacity:1;} |
||||
|
} |
||||
|
.title2 { |
||||
|
font-size: 36rpx; |
||||
|
height: 126rpx; |
||||
|
margin-bottom: 0; |
||||
} |
} |
||||
@ -1,11 +1,26 @@ |
|||||
<!--pages/pbService/feiyi/info/index.wxml--> |
<!--pages/pbService/museum/info/index.wxml--> |
||||
<wxs src="../../../../utils/filter.wxs" module="filter" /> |
<wxs src="../../../../utils/filter.wxs" module="tool" /> |
||||
<title title="详情"></title> |
<title title="非遗详情"></title> |
||||
<view wx:if="{{info}}"> |
<view wx:if="{{info}}" class="bg" style="top:{{top}}px"> |
||||
<common-image src="{{info.default_pic_url}}" mode="widthFix" width="100%"></common-image> |
<swiper class="page" vertical bindchange="changeSlide"> |
||||
<view class="info"> |
<swiper-item> |
||||
<view class="title">{{info.title}}</view> |
<view class="title">{{info.title}}</view> |
||||
<view class="title">{{info.protect_office}}</view> |
<view class="address"> |
||||
<rich-text nodes="{{filter.formateRichText(info.content)}}"></rich-text> |
<image src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/infolocation.png"></image> |
||||
</view> |
<view>地址：{{info.protect_office}}</view> |
||||
|
</view> |
||||
|
<image style="width:690rpx;height:560rpx;display:block;margin:0 auto;margin-top:30rpx" src="{{info.default_pic_url}}" mode="aspectFill"></image> |
||||
|
<image mode="widthFix" class="infoline1" src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/infoline1.png"></image> |
||||
|
<image mode="widthFix" class="infoline2" src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/infoline2.png"></image> |
||||
|
<image mode="widthFix" class="infoline3" src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/infoline3.png"></image> |
||||
|
</swiper-item> |
||||
|
<swiper-item wx:for="{{htmls}}"> |
||||
|
<view class="title title2">{{info.title}}</view> |
||||
|
<image mode="widthFix" class="infoline1" style="position:static" src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/infoline1.png"></image> |
||||
|
<rich-text class="detail" nodes="{{tool.formateRichText(item)}}"></rich-text> |
||||
|
<image mode="widthFix" class="infoline2" src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/infoline2.png"></image> |
||||
|
<image mode="widthFix" class="infoline3" src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/infoline3.png"></image> |
||||
|
</swiper-item> |
||||
|
</swiper> |
||||
|
<image mode="widthFix" class="infoarrow{{currentIndex<htmls.length?' ani':''}}" src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/{{currentIndex<htmls.length?'infoarrow':'infoover'}}.png"></image> |
||||
</view> |
</view> |
||||
@ -1,11 +1,83 @@ |
|||||
/* pages/pbService/feiyi/info/index.wxss */ |
/* pages/pbService/museum/info/index.wxss */ |
||||
.info { |
.bg { |
||||
margin: 30rpx; |
background: url(https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/infobg.png); |
||||
color: #333; |
background-size: 100% 100%; |
||||
font-size: 26rpx; |
position: absolute; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
} |
} |
||||
.title { |
.title { |
||||
font-size: 30rpx; |
display: flex; |
||||
margin-bottom: 22rpx; |
align-items: flex-end; |
||||
|
height: 190rpx; |
||||
|
color: #0B898E; |
||||
|
font-size: 48rpx; |
||||
font-weight: bold; |
font-weight: bold; |
||||
|
margin-left: 40rpx; |
||||
|
margin-bottom: 20rpx; |
||||
|
} |
||||
|
.infoline1 { |
||||
|
display: block; |
||||
|
width: 720rpx; |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
top: 190rpx; |
||||
|
} |
||||
|
.page { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
.address { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
font-size: 28rpx; |
||||
|
color: #333333; |
||||
|
padding: 18rpx 0; |
||||
|
} |
||||
|
.address image { |
||||
|
display: block; |
||||
|
flex-shrink: 0; |
||||
|
margin-left: 38rpx; |
||||
|
width: 30rpx; |
||||
|
height: 30rpx; |
||||
|
margin-right: 16rpx; |
||||
|
} |
||||
|
.infoline3,.infoline2,.infoarrow { |
||||
|
position: absolute; |
||||
|
width: 250rpx; |
||||
|
bottom: 47rpx; |
||||
|
display: block; |
||||
|
} |
||||
|
.infoline3 { |
||||
|
right: 0; |
||||
|
} |
||||
|
.infoline2 { |
||||
|
left: 0; |
||||
|
} |
||||
|
.infoarrow { |
||||
|
width: 60rpx; |
||||
|
bottom: 26rpx; |
||||
|
left: 50%; |
||||
|
margin-left: -30rpx; |
||||
|
|
||||
|
} |
||||
|
.infoarrow.ani { |
||||
|
-webkit-animation: bounce-down 1.6s linear infinite;animation: bounce-down 1.6s linear infinite; |
||||
|
} |
||||
|
.detail { |
||||
|
display: block; |
||||
|
margin: 20rpx 30rpx; |
||||
|
font-size: 30rpx; |
||||
|
} |
||||
|
@keyframes bounce-down { |
||||
|
25% {transform: translateY(-10rpx);opacity:0.3;} |
||||
|
50%{transform: translateY(0);opacity:1;} |
||||
|
75% {transform: translateY(10rpx);opacity:1;} |
||||
|
100% {transform: translateY(0);opacity:1;} |
||||
|
} |
||||
|
.title2.title{ |
||||
|
font-size: 36rpx; |
||||
|
height: 126rpx; |
||||
|
margin-bottom: 0; |
||||
} |
} |
||||
@ -1,17 +1,41 @@ |
|||||
<!--pages/pbService/gym/info/index.wxml--> |
<!--pages/pbService/museum/info/index.wxml--> |
||||
<wxs src="../../../../utils/filter.wxs" module="tool" /> |
<wxs src="../../../../utils/filter.wxs" module="tool" /> |
||||
<title title="场馆详情"></title> |
<title title="体育馆详情"></title> |
||||
<swiper class="swiper" indicator-dots="{{true}}" wx:if="{{info}}" |
<view wx:if="{{info}}" class="bg" style="top:{{top}}px"> |
||||
autoplay="{{true}}" interval="{{2000}}" duration="{{300}}"> |
<swiper class="page" vertical bindchange="changeSlide"> |
||||
<block wx:for="{{picList}}" wx:key="*this"> |
|
||||
<swiper-item> |
<swiper-item> |
||||
<image src="{{item.pic_address}}" mode="aspectFill"></image> |
<view class="title">{{info.name}}</view> |
||||
|
<view class="address"> |
||||
|
<image src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/infolocation.png"></image> |
||||
|
<view>地址：{{info.address}}</view> |
||||
|
</view> |
||||
|
<view class="address"> |
||||
|
<image src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/infotel.png"></image> |
||||
|
<view>电话：<text style="color:#0B898E">{{info.telephone}}</text></view> |
||||
|
</view> |
||||
|
<swiper style="width:690rpx;height:560rpx;margin:0 auto;margin-top:30rpx"> |
||||
|
<swiper-item wx:for="{{picList}}"> |
||||
|
<image style="width:690rpx;height:560rpx;display:block;" src="{{item.pic_address}}" mode="aspectFill"></image> |
||||
|
</swiper-item> |
||||
|
</swiper> |
||||
|
<image mode="widthFix" class="infoline1" src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/infoline1.png"></image> |
||||
|
<image mode="widthFix" class="infoline2" src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/infoline2.png"></image> |
||||
|
<image mode="widthFix" class="infoline3" src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/infoline3.png"></image> |
||||
</swiper-item> |
</swiper-item> |
||||
</block> |
<swiper-item wx:for="{{htmls}}"> |
||||
</swiper> |
<view class="title title2">{{info.name}}</view> |
||||
<view class="info" wx:if="{{info}}"> |
<image mode="widthFix" class="infoline1" style="position:static" src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/infoline1.png"></image> |
||||
<view class="title">{{info.name}}</view> |
<rich-text class="detail" nodes="{{tool.formateRichText(item)}}"></rich-text> |
||||
<view class="info-tip"><text>开放时间：</text>{{info.open_time}}</view> |
<image mode="widthFix" class="infoline2" src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/infoline2.png"></image> |
||||
<view class="info-tip"><text>联系方式：</text>{{info.telephone}}</view> |
<image mode="widthFix" class="infoline3" src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/infoline3.png"></image> |
||||
<view class="info-tip"><text>地址：</text>{{info.address}}</view> |
</swiper-item> |
||||
|
<swiper-item> |
||||
|
<view class="title title2" style="height:125rpx">开放时间</view> |
||||
|
<image mode="widthFix" class="infoline1" style="position:static" src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/infoline1.png"></image> |
||||
|
<rich-text class="detail" nodes="{{tool.formateRichText(info.open_time)}}"></rich-text> |
||||
|
<image mode="widthFix" class="infoline2" src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/infoline2.png"></image> |
||||
|
<image mode="widthFix" class="infoline3" src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/infoline3.png"></image> |
||||
|
</swiper-item> |
||||
|
</swiper> |
||||
|
<image mode="widthFix" class="infoarrow{{currentIndex<htmls.length+1?' ani':''}}" src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/{{currentIndex<htmls.length+1?'infoarrow':'infoover'}}.png"></image> |
||||
</view> |
</view> |
||||
@ -1,24 +1,83 @@ |
|||||
/* pages/pbService/gym/info/index.wxss */ |
/* pages/pbService/museum/info/index.wxss */ |
||||
.swiper,.swiper image { |
.bg { |
||||
|
background: url(https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/infobg.png); |
||||
|
background-size: 100% 100%; |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
} |
||||
|
.title { |
||||
|
display: flex; |
||||
|
align-items: flex-end; |
||||
|
height: 190rpx; |
||||
|
color: #0B898E; |
||||
|
font-size: 48rpx; |
||||
|
font-weight: bold; |
||||
|
margin-left: 40rpx; |
||||
|
margin-bottom: 20rpx; |
||||
|
} |
||||
|
.infoline1 { |
||||
|
display: block; |
||||
|
width: 720rpx; |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
top: 190rpx; |
||||
|
} |
||||
|
.page { |
||||
width: 100%; |
width: 100%; |
||||
height: 360rpx; |
height: 100%; |
||||
|
} |
||||
|
.address { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
font-size: 28rpx; |
||||
|
color: #333333; |
||||
|
padding: 18rpx 0; |
||||
|
} |
||||
|
.address image { |
||||
display: block; |
display: block; |
||||
|
flex-shrink: 0; |
||||
|
margin-left: 38rpx; |
||||
|
width: 30rpx; |
||||
|
height: 30rpx; |
||||
|
margin-right: 16rpx; |
||||
} |
} |
||||
.info { |
.infoline3,.infoline2,.infoarrow { |
||||
font-size: 26rpx; |
position: absolute; |
||||
padding: 20rpx 30rpx; |
width: 250rpx; |
||||
color: #333; |
bottom: 47rpx; |
||||
|
display: block; |
||||
|
} |
||||
|
.infoline3 { |
||||
|
right: 0; |
||||
|
} |
||||
|
.infoline2 { |
||||
|
left: 0; |
||||
|
} |
||||
|
.infoarrow { |
||||
|
width: 60rpx; |
||||
|
bottom: 26rpx; |
||||
|
left: 50%; |
||||
|
margin-left: -30rpx; |
||||
|
|
||||
} |
} |
||||
.info .title { |
.infoarrow.ani { |
||||
|
-webkit-animation: bounce-down 1.6s linear infinite;animation: bounce-down 1.6s linear infinite; |
||||
|
} |
||||
|
.detail { |
||||
|
display: block; |
||||
|
margin: 20rpx 30rpx; |
||||
font-size: 30rpx; |
font-size: 30rpx; |
||||
} |
} |
||||
.info-tip { |
@keyframes bounce-down { |
||||
display: flex; |
25% {transform: translateY(-10rpx);opacity:0.3;} |
||||
color: #888; |
50%{transform: translateY(0);opacity:1;} |
||||
margin-top: 20rpx; |
75% {transform: translateY(10rpx);opacity:1;} |
||||
|
100% {transform: translateY(0);opacity:1;} |
||||
} |
} |
||||
.info-tip text { |
.title2.title{ |
||||
width: 130rpx; |
font-size: 36rpx; |
||||
color: #333; |
height: 126rpx; |
||||
flex-shrink: 0; |
margin-bottom: 0; |
||||
} |
} |
||||
@ -1,27 +1,46 @@ |
|||||
<!--pages/pbService/museum/info/index.wxml--> |
<!--pages/pbService/museum/info/index.wxml--> |
||||
<wxs src="../../../../utils/filter.wxs" module="tool" /> |
<wxs src="../../../../utils/filter.wxs" module="tool" /> |
||||
<title title="详情"></title> |
<title title="详情"></title> |
||||
<view class="content" wx:if="{{info}}"> |
<view wx:if="{{info}}" class="bg" style="top:{{top}}px"> |
||||
<swiper class="swiper"> |
<swiper class="page" vertical bindchange="changeSlide"> |
||||
<block wx:for="{{info.listimg}}" wx:key="*this"> |
<swiper-item> |
||||
<swiper-item> |
<view class="title">{{info.name}}</view> |
||||
<image src="{{item || '/images/place1.png'}}" mode="aspectFill" class="mainimg"></image> |
<view class="address"> |
||||
</swiper-item> |
<image src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/infolocation.png"></image> |
||||
</block> |
<view>地址：{{info.address}}</view> |
||||
|
</view> |
||||
|
<view class="address"> |
||||
|
<image src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/infotel.png"></image> |
||||
|
<view>电话：<text style="color:#0B898E">{{info.phone}}</text></view> |
||||
|
</view> |
||||
|
<swiper wx:if="{{info.listimg.length>0}}" style="width:690rpx;height:560rpx;margin:0 auto;margin-top:30rpx"> |
||||
|
<swiper-item wx:for="{{info.listimg}}"> |
||||
|
<image style="width:690rpx;height:560rpx;display:block;" src="{{item}}" mode="aspectFill"></image> |
||||
|
</swiper-item> |
||||
|
</swiper> |
||||
|
<image wx:else mode="aspectFill" style="width:690rpx;height:560rpx;display:block;margin:0 auto;margin-top:30rpx" src="{{info.headimg}}"></image> |
||||
|
<image mode="widthFix" class="infoline1" src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/infoline1.png"></image> |
||||
|
<image mode="widthFix" class="infoline2" src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/infoline2.png"></image> |
||||
|
<image mode="widthFix" class="infoline3" src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/infoline3.png"></image> |
||||
|
</swiper-item> |
||||
|
<swiper-item wx:for="{{htmls}}"> |
||||
|
<view class="title title2">{{info.name}}</view> |
||||
|
<image mode="widthFix" class="infoline1" style="position:static" src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/infoline1.png"></image> |
||||
|
<rich-text class="detail" nodes="{{tool.formateRichText(item)}}"></rich-text> |
||||
|
|
||||
|
<image mode="widthFix" class="infoline2" src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/infoline2.png"></image> |
||||
|
<image mode="widthFix" class="infoline3" src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/infoline3.png"></image> |
||||
|
</swiper-item> |
||||
|
<swiper-item> |
||||
|
<view class="title title2" style="height:125rpx">接待时间</view> |
||||
|
<image mode="widthFix" class="infoline1" style="position:static" src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/infoline1.png"></image> |
||||
|
<rich-text class="detail" nodes="{{tool.formateRichText(info.open_time)}}"></rich-text> |
||||
|
<view class="title title2" style="height:125rpx">交通线路</view> |
||||
|
<image mode="widthFix" class="infoline1" style="position:static" src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/infoline1.png"></image> |
||||
|
<rich-text class="detail" nodes="{{tool.formateRichText(info.route)}}"></rich-text> |
||||
|
<image mode="widthFix" class="infoline2" src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/infoline2.png"></image> |
||||
|
<image mode="widthFix" class="infoline3" src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/infoline3.png"></image> |
||||
|
</swiper-item> |
||||
</swiper> |
</swiper> |
||||
<view class="title">{{info.name}}</view> |
<image mode="widthFix" class="infoarrow{{currentIndex<htmls.length+1?' ani':''}}" src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/{{currentIndex<htmls.length+1?'infoarrow':'infoover'}}.png"></image> |
||||
<view class="tips"> |
|
||||
<view class="iconfont icon-dianhua"></view> |
|
||||
<view class="textOver">{{info.phone}}</view> |
|
||||
</view> |
|
||||
<view class="tips"> |
|
||||
<view class="iconfont icon-location"></view> |
|
||||
<view class="textOver">{{info.address}}</view> |
|
||||
</view> |
|
||||
<view class="subtitle">场馆详情</view> |
|
||||
<rich-text nodes="{{tool.formateRichText(info.detail)}}"></rich-text> |
|
||||
<view class="subtitle">接待时间</view> |
|
||||
<rich-text nodes="{{tool.formateRichText(info.open_time)}}"></rich-text> |
|
||||
<view class="subtitle">交通路线</view> |
|
||||
<rich-text nodes="{{tool.formateRichText(info.route)}}"></rich-text> |
|
||||
</view> |
</view> |
||||
@ -1,45 +1,83 @@ |
|||||
/* pages/pbService/museum/info/index.wxss */ |
/* pages/pbService/museum/info/index.wxss */ |
||||
.mainimg { |
.bg { |
||||
|
background: url(https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/infobg.png); |
||||
|
background-size: 100% 100%; |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
} |
||||
|
.title { |
||||
|
display: flex; |
||||
|
align-items: flex-end; |
||||
|
height: 190rpx; |
||||
|
color: #0B898E; |
||||
|
font-size: 48rpx; |
||||
|
font-weight: bold; |
||||
|
margin-left: 40rpx; |
||||
|
margin-bottom: 20rpx; |
||||
|
} |
||||
|
.infoline1 { |
||||
display: block; |
display: block; |
||||
width: 100%; |
width: 720rpx; |
||||
height: 300rpx; |
position: absolute; |
||||
|
left: 0; |
||||
|
top: 190rpx; |
||||
} |
} |
||||
.swiper { |
.page { |
||||
width: 100%; |
width: 100%; |
||||
height: 300rpx; |
height: 100%; |
||||
margin-bottom: 30rpx; |
|
||||
} |
} |
||||
.content { |
.address { |
||||
padding: 20rpx; |
display: flex; |
||||
color: #666666; |
align-items: center; |
||||
font-size: 28rpx; |
font-size: 28rpx; |
||||
|
color: #333333; |
||||
|
padding: 18rpx 0; |
||||
} |
} |
||||
page { |
.address image { |
||||
background: white; |
display: block; |
||||
|
flex-shrink: 0; |
||||
|
margin-left: 38rpx; |
||||
|
width: 30rpx; |
||||
|
height: 30rpx; |
||||
|
margin-right: 16rpx; |
||||
} |
} |
||||
.title { |
.infoline3,.infoline2,.infoarrow { |
||||
font-size: 36rpx; |
position: absolute; |
||||
font-weight: bold; |
width: 250rpx; |
||||
color: #333; |
bottom: 47rpx; |
||||
margin-bottom: 10rpx; |
display: block; |
||||
} |
} |
||||
.tips { |
.infoline3 { |
||||
display: flex; |
right: 0; |
||||
align-items: center; |
|
||||
height: 50rpx; |
|
||||
} |
} |
||||
.tips .iconfont { |
.infoline2 { |
||||
flex-shrink: 0; |
left: 0; |
||||
margin-right: 10rpx; |
} |
||||
color: #999; |
.infoarrow { |
||||
} |
width: 60rpx; |
||||
.subtitle { |
bottom: 26rpx; |
||||
padding-left: 20rpx; |
left: 50%; |
||||
border-left: 6rpx solid #0F9095; |
margin-left: -30rpx; |
||||
line-height: 30rpx; |
|
||||
color: #333; |
} |
||||
|
.infoarrow.ani { |
||||
|
-webkit-animation: bounce-down 1.6s linear infinite;animation: bounce-down 1.6s linear infinite; |
||||
|
} |
||||
|
.detail { |
||||
|
display: block; |
||||
|
margin: 20rpx 30rpx; |
||||
font-size: 30rpx; |
font-size: 30rpx; |
||||
font-weight: bold; |
} |
||||
margin-top: 40rpx; |
@keyframes bounce-down { |
||||
margin-bottom: 20rpx; |
25% {transform: translateY(-10rpx);opacity:0.3;} |
||||
|
50%{transform: translateY(0);opacity:1;} |
||||
|
75% {transform: translateY(10rpx);opacity:1;} |
||||
|
100% {transform: translateY(0);opacity:1;} |
||||
|
} |
||||
|
.title2 { |
||||
|
font-size: 36rpx; |
||||
|
height: 126rpx; |
||||
|
margin-bottom: 0; |
||||
} |
} |
||||
@ -1,13 +1,30 @@ |
|||||
<!--pages/pbService/wbdw/info/index.wxml--> |
<!--pages/pbService/museum/info/index.wxml--> |
||||
|
<wxs src="../../../../utils/filter.wxs" module="tool" /> |
||||
<title title="文物详情"></title> |
<title title="文物详情"></title> |
||||
<image class="main-img" src="{{info.logo}}" mode="widthFix"></image> |
<view wx:if="{{info}}" class="bg" style="top:{{top}}px"> |
||||
<view class="content" wx:if="{{info}}"> |
<swiper class="page" vertical bindchange="changeSlide"> |
||||
<view class="title">{{info.name}}</view> |
<swiper-item> |
||||
<view class="subtitle" wx:if="{{info.collection_name}}"><text>藏于：</text>{{info.collection_name}}</view> |
<view class="title">{{info.name}}</view> |
||||
<view class="subtitle" wx:if="{{info.level_name}}"><text>等级：</text>{{info.level_name}}</view> |
<view class="address"> |
||||
<view class="subtitle" wx:if="{{info.age}}"><text>历史年代：</text>{{info.age}}</view> |
<image src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/infoage.png"></image> |
||||
<view class="detail"> |
<view>历史年代：{{info.age}}</view> |
||||
<view style="margin-bottom:10rpx">文物介绍</view> |
</view> |
||||
<view>{{info.introduction}}</view> |
<view class="address"> |
||||
</view> |
<image src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/infolocation.png"></image> |
||||
|
<view>地址：{{info.address}}</view> |
||||
|
</view> |
||||
|
<image style="width:690rpx;height:560rpx;display:block;margin:0 auto;margin-top:30rpx" src="{{info.logo}}" mode="aspectFill"></image> |
||||
|
<image mode="widthFix" class="infoline1" src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/infoline1.png"></image> |
||||
|
<image mode="widthFix" class="infoline2" src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/infoline2.png"></image> |
||||
|
<image mode="widthFix" class="infoline3" src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/infoline3.png"></image> |
||||
|
</swiper-item> |
||||
|
<swiper-item wx:for="{{htmls}}"> |
||||
|
<view class="title title2">{{info.name}}</view> |
||||
|
<image mode="widthFix" class="infoline1" style="position:static" src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/infoline1.png"></image> |
||||
|
<rich-text class="detail" nodes="{{tool.formateRichText(item)}}"></rich-text> |
||||
|
<image mode="widthFix" class="infoline2" src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/infoline2.png"></image> |
||||
|
<image mode="widthFix" class="infoline3" src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/infoline3.png"></image> |
||||
|
</swiper-item> |
||||
|
</swiper> |
||||
|
<image mode="widthFix" class="infoarrow{{currentIndex<htmls.length?' ani':''}}" src="https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/{{currentIndex<htmls.length?'infoarrow':'infoover'}}.png"></image> |
||||
</view> |
</view> |
||||
@ -1,23 +1,83 @@ |
|||||
/* pages/pbService/wbdw/info/index.wxss */ |
/* pages/pbService/museum/info/index.wxss */ |
||||
.main-img { |
.bg { |
||||
display: block; |
background: url(https://sz-qd.oss-cn-hangzhou.aliyuncs.com/xcxImages/info/infobg.png); |
||||
width: 100%; |
background-size: 100% 100%; |
||||
|
position: absolute; |
||||
} |
left: 0; |
||||
.content { |
right: 0; |
||||
margin: 30rpx; |
bottom: 0; |
||||
color: #333; |
|
||||
} |
} |
||||
.title { |
.title { |
||||
font-size: 30rpx; |
display: flex; |
||||
|
align-items: flex-end; |
||||
|
height: 190rpx; |
||||
|
color: #0B898E; |
||||
|
font-size: 48rpx; |
||||
font-weight: bold; |
font-weight: bold; |
||||
|
margin-left: 40rpx; |
||||
margin-bottom: 20rpx; |
margin-bottom: 20rpx; |
||||
} |
} |
||||
.subtitle { |
.infoline1 { |
||||
margin-bottom: 10rpx; |
display: block; |
||||
font-size: 26rpx; |
width: 720rpx; |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
top: 190rpx; |
||||
|
} |
||||
|
.page { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
.address { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
font-size: 28rpx; |
||||
|
color: #333333; |
||||
|
padding: 18rpx 0; |
||||
|
} |
||||
|
.address image { |
||||
|
display: block; |
||||
|
flex-shrink: 0; |
||||
|
margin-left: 38rpx; |
||||
|
width: 30rpx; |
||||
|
height: 30rpx; |
||||
|
margin-right: 16rpx; |
||||
|
} |
||||
|
.infoline3,.infoline2,.infoarrow { |
||||
|
position: absolute; |
||||
|
width: 250rpx; |
||||
|
bottom: 47rpx; |
||||
|
display: block; |
||||
|
} |
||||
|
.infoline3 { |
||||
|
right: 0; |
||||
|
} |
||||
|
.infoline2 { |
||||
|
left: 0; |
||||
|
} |
||||
|
.infoarrow { |
||||
|
width: 60rpx; |
||||
|
bottom: 26rpx; |
||||
|
left: 50%; |
||||
|
margin-left: -30rpx; |
||||
|
|
||||
|
} |
||||
|
.infoarrow.ani { |
||||
|
-webkit-animation: bounce-down 1.6s linear infinite;animation: bounce-down 1.6s linear infinite; |
||||
} |
} |
||||
.detail { |
.detail { |
||||
margin-top: 40rpx; |
display: block; |
||||
font-size: 26rpx; |
margin: 20rpx 30rpx; |
||||
|
font-size: 30rpx; |
||||
|
} |
||||
|
@keyframes bounce-down { |
||||
|
25% {transform: translateY(-10rpx);opacity:0.3;} |
||||
|
50%{transform: translateY(0);opacity:1;} |
||||
|
75% {transform: translateY(10rpx);opacity:1;} |
||||
|
100% {transform: translateY(0);opacity:1;} |
||||
|
} |
||||
|
.title2.title{ |
||||
|
font-size: 36rpx; |
||||
|
height: 126rpx; |
||||
|
margin-bottom: 0; |
||||
} |
} |
||||
Loading…
Reference in new issue