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