收藏
回答

iphone8和其他iphone显示不一样

问题模块
API和组件


iphone8和其他iphone显示不一样,其他iphone正常,上面的是iphone8的,下面的是iphone7的



<view class='fate' wx:for="{{c}}" wx:for-index="j" wx:for-item="f">

<view class='fate-tt' data-i='{{i}}' data-j='{{j}}' bindtap='showBody'>

<view>


<view class='tt-l'>{{f.fatename}}</view>

<view class='tt-r'></view>

<view class='clear'></view>

</view>

<image class='triangle {{triangle}}'></image>

</view>

<view class='fate-body {{f.blur}}' style='display:{{f.display}};'>

<view style='position:relative;'>

<text>{{f.content}}</text>

<view class='shadow'>

<view class='seduce-content'>

<view class='seduce'>

支付即可查看2018年运势变化,助你在狗年预知财运、事业、爱情、健康等运势走向,及时调整方向,逢凶化吉,走向成功

</view>

<view class='pay' data-i='{{i}}' data-j='{{j}}' bindtap='payFor'>马上解锁</view>

</view>

</view>

</view>

<view class='clear'></view>

<view class='rela-app' data-i='{{i}}' data-j='{{j}}' bindtap='turnApp'>

<image src='{{imageurl}}{{f.appimg}}'></image>

<view>

{{f.appname}}

</view>

<view class='clear'></view>

</view>

<view class='clear'></view>


</view>

</view>







.fate-tt {

margin: 10rpx;

box-sizing: border-box;

/* background-image: ; */

padding-bottom: 10rpx;

position: relative;

background-image: url(http://oxhrn40jj.bkt.clouddn.com/1.png);

background-size: 100% 100%;

}


.fate-tt>view {

width: 100%;

height: 100%;

box-sizing: border-box;

color: #633;

font-size: 32rpx;

line-height: 80rpx;

clear: both;

padding: 0 10rpx;

padding-left: 60rpx;

}


.fate-tt .triangle {

width: 50rpx;

height: 50rpx;

margin: 0;

padding: 0;

border: none;

position: absolute;

display: block;

top: 15rpx;

right: 10rpx;

background-image: url(http://oxhrn40jj.bkt.clouddn.com/tran2.png);

background-size: contain;

}


.fate-tt .tt-l {

float: left;

width: 85%;

font-weight: 600;

}


.fate-tt .tt-r {

float: right;

width: 14%;

}


.triangle-down {

transform: rotate(90deg);

}


.triangle-right {

}


.fate-body {

position: relative;

box-sizing: border-box;

width: 730rpx;

margin: 0 10rpx;

/* background-color: #ededd9; */

padding: 10rpx 15rpx;

margin-top: -10rpx;

display: none;

background-color: #fff;

}


.blur {

display: block;

}


.blur text {

-webkit-filter: blur(10px); /* Chrome, Opera */

-moz-filter: blur(10px);

-ms-filter: blur(10px);

filter: blur(10px);

}


.shadow {

box-sizing: border-box;

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

display: none;

padding: 15rpx;

}


.shadow .seduce-content {

width: 100%;

height: 100%;

box-sizing: border-box;

border: 2rpx solid #c96;

padding-top: 80rpx;

}


.shadow .seduce-content .seduce {

width: 500rpx;

margin: 0 auto;

font-size: 30rpx;

}


.shadow .seduce-content .pay {

width: 300rpx;

height: 60rpx;

border-radius: 30rpx;

box-sizing: border-box;

border: 2rpx solid #c96;

text-align: center;

line-height: 54rpx;

font-size: 30rpx;

color: #c96;

background-color: #fff;

margin: 0 auto;

margin-top: 50rpx;  

}


.blur .shadow {

display: block;

}


.fate-body text {

box-sizing: border-box;

font-size: 28rpx;

line-height: 36rpx;

}


.rela-app {

background-image: url(http://oxhrn40jj.bkt.clouddn.com/3.png);

background-size: 100% 100%;

background-repeat: no-repeat;

}


.rela-app image {

width: 120rpx;

height: 80rpx;

float: left;

margin-top: 13rpx;

margin-left: 10rpx;

}


.rela-app view {

width: 560rpx;

height: 100rpx;

line-height: 100rpx;

text-align: center;

float: right;

}


最后一次编辑于  2017-10-25  (未经腾讯允许,不得转载)
回答关注问题邀请回答
收藏