Home Explore Help
Sign In
yangmc
/
challengeFamily
Watch 2
Star 0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Branch: master
Branches Tags
challengeFam...
/
pages
/
growthCard
/
index.wxss

index.wxss 4.5 KB
Permalink History Raw

1234567891011121314151617181920212223242526272829303132333435 
  1. .swiper{height:398rpx;border-bottom: 20rpx solid #F1F1F1;}
    2. 

  2. .slide-item{position: relative; height: 318rpx; width:570rpx; padding: 30rpx 0; margin: 0 auto;}
    3. 

  3. .slide-image{vertical-align: middle; border: 0 none; box-shadow: 0 0 20rpx rgba(0, 0, 0, .3);border-radius: 20rpx; width: 100%; height: 100%;}
    4. 

  4. .slide-time, .slide-give{position: absolute;}
    5. 

  5. .slide-time{bottom: 50rpx;left: 20rpx;font-size: 22rpx;color: #fff; line-height: 26rpx;}
    6. 

  6. .slide-give{top: 50rpx;right: 20rpx;overflow: hidden;}
    7. 

  7. .slide-give .button{display: inline-block;width: 130rpx;height: 48rpx;line-height: 48rpx;border-radius: 24rpx;font-size: 22rpx;}
    8. 

  8. .slide-give button[disabled]{background-color: #585453;color: #fff;}
    9. 

  9. .icon.icon-question{margin-left: 10rpx;vertical-align: top; }
    10. 

  10. .icon.icon-question::before{color: #EE3A43;vertical-align: top;}
    11. 

  11. 

  12. .button.button-white{color: #ee3a43;}
    13. 

  13. 

  14. .vouche{width: 710rpx;height: 132rpx;padding: 14rpx 0;border-radius: 10rpx;display: flex;position: relative;box-shadow: 0 0 10rpx rgba(204, 204, 204, .5);margin-top: 20rpx;}
    15. 

  15. .vouche-pink{background: #FFF0F2}
    16. 

  16. .vouche-info{width: 505rpx;text-align: center}
    17. 

  17. .vouche-pink > .vouche-button{border-left: 2rpx dashed #B5888F;}
    18. 

  18. .vouche-button{width: 205rpx;box-sizing: border-box;border-left: 2rpx dashed #cec0c3;}
    19. 

  19. .vouche::before,.vouche::after{content:""; width: 24rpx; height: 24rpx; position: absolute; background: #fff;}
    20. 

  20. .vouche::before{top:-10rpx;right:193rpx;box-shadow: inset 0 -3rpx 3rpx rgba(204, 204, 204, .5); border-radius:100%;}
    21. 

  21. .vouche::after{bottom:-10rpx;right:193rpx;box-shadow: inset 0 3rpx 3rpx rgba(204, 204, 204, .5); border-radius:100%;}
    22. 

  22. .vouche-button button{height: 50rpx;font-size: 28rpx;line-height: 50rpx;color: white;padding: 0;border-radius: 25rpx;margin: 41rpx 20rpx;}
    23. 

  23. .activity{padding: 20rpx; margin-bottom: 20rpx; background-color: #F1F1F1;border-radius: 10rpx;display: flex; justify-content: space-between;}
    24. 

  24. .activity > image{width: 190rpx;height: 100rpx; flex-shrink: 0;}
    25. 

  25. .activity-info{margin:0 20rpx; flex-shrink: 1; width: 100%; position: relative;}
    26. 

  26. .activity-info::after{content:''; position: absolute; top: 50%; right: -20rpx; width:20rpx;height:20rpx;border-right:2rpx solid #C7C7C7;border-bottom:2rpx solid #C7C7C7;transform:translateY(-50%) rotate(-45deg);}
    27. 

  27. .activity-info-title{font-size: 24rpx;height: 60rpx;line-height: 30rpx;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;}
    28. 

  28. .activity-info-time{font-size: 24rpx;line-height: 40rpx;}
    29. 

  29. .activity-info-time text{margin-left: 20rpx;}
    30. 

  30. 

  31. .title{font-size: 32rpx; font-weight: bold; color: #ee3a43; text-align: center;}
    32. 

  32. .title::before, .title::after{content: ''; display: inline-block; width: 120rpx; vertical-align: middle; height:10rpx; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHAAAAAKCAYAAABsWdrsAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NjBEMkUxNTNCNzVDMTFFOThEOTZFMjNBRkNGNjQxN0YiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NjBEMkUxNTRCNzVDMTFFOThEOTZFMjNBRkNGNjQxN0YiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2MEQyRTE1MUI3NUMxMUU5OEQ5NkUyM0FGQ0Y2NDE3RiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo2MEQyRTE1MkI3NUMxMUU5OEQ5NkUyM0FGQ0Y2NDE3RiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PmA+CqoAAADuSURBVHjaYvn//z8DIyMjwygYvOCdlTMogqYB8UehY3srkOWYRoNnyEReBhCXA/kdoxE4NCMPBlAicTQCh1bkYUQiI6gOZCish1SC//8zMgCrRCADREP4KGygHESMAawOIcaA0IfMRlOPog8uzwA3F8z8z4jhDoQYA1ZzsbsDi59Q3MaA5g6Eerg+JD+j2s2AQx9ULRF+QtEHkWM8t2sHEZGHDLpZkDiMUIzOZySCT6wYufpIEaO1W2ipj1Twj3G0FToki1AQ6AS1SEfrwEEKgJEDKmizgHgGrsgbbcQMzUjsRO4LjhahQ7wjDxBgAMwcsylmrgrrAAAAAElFTkSuQmCC) no-repeat; background-size: contain; padding: 0 5rpx;}
    33. 

  33. .title::after{transform: rotate(180deg);}
    34. 

  34. .subtitle{font-size: 28rpx;font-weight: bold;line-height: 48rpx;margin-top: 40rpx;}
    35. 

  35. .subtitle::before{content: ''; width: 10rpx; height: 10rpx; display: inline-block; background: #ee3a43; transform: rotate(45deg);margin-right: 20rpx; vertical-align: middle;}
    36.