shadow.wxml 1.6 KB

12345678910111213141516171819202122232425262728293031323334
  1. <custom style="height:{{CustomBar}}px;">
  2. <bar class="fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
  3. <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
  4. <text class='icon-back'></text> 边框阴影
  5. </navigator>
  6. </bar>
  7. </custom>
  8. <bar class="solid-bottom">
  9. <view class='action'>
  10. <text class='icon-title text-blue'></text>边框
  11. </view>
  12. <view class='action'>
  13. <switch class='sm' bindchange='SetSize'></switch>
  14. </view>
  15. </bar>
  16. <view class='padding bg-white text-center'>
  17. <view class='padding solid{{size?"s":""}}'>四周</view>
  18. <view class='padding solid{{size?"s":""}}-top margin-top'>上</view>
  19. <view class='padding solid{{size?"s":""}}-right margin-top'>右</view>
  20. <view class='padding solid{{size?"s":""}}-bottom margin-top'>下</view>
  21. <view class='padding solid{{size?"s":""}}-left margin-top'>左</view>
  22. </view>
  23. <bar class="margin-top">
  24. <view class='action'>
  25. <text class='icon-title text-blue'></text>阴影
  26. </view>
  27. </bar>
  28. <view class="padding text-center">
  29. <view class="padding-xl radius shadow bg-white"> 默认阴影</view>
  30. <view class="padding-xl radius shadow-lg bg-white margin-top">长阴影</view>
  31. <view class="padding-xl radius shadow-warp bg-white margin-top">翘边阴影</view>
  32. <view class="padding-xl radius shadow-blur bg-red margin-top">根据背景颜色而改变的阴影</view>
  33. <view class="padding-xl radius shadow-blur bg-red margin-top bg-img" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"><view>根据背景颜色而改变的阴影</view></view>
  34. </view>