recommendFood.wxss 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. /* pages/recommendFood/recommendFood.wxss */
  2. .recommendNo{
  3. font-size: 32rpx;
  4. color: gray;
  5. padding: 20rpx;
  6. }
  7. /* 美食推荐外部容器 */
  8. .foodWrap{
  9. display: flex;
  10. flex-direction: row;
  11. flex-wrap: wrap;
  12. margin: 20rpx 20rpx 0 0;
  13. justify-content: space-between;
  14. }
  15. /* 美食推荐列表 */
  16. .foodDetail{
  17. position: relative;
  18. flex-shrink: 0;
  19. width: 45%;
  20. height: 600rpx;
  21. margin: 20rpx 0 20rpx 20rpx;
  22. border: 1rpx solid gray;
  23. border-radius: 20rpx;
  24. }
  25. /* 美食图片 */
  26. .foodImg{
  27. height: 400rpx;
  28. width: 100%;
  29. border-top-left-radius: 20rpx;
  30. border-top-right-radius: 20rpx;
  31. }
  32. /* 图片下方文字 */
  33. .foodIntro{
  34. display: flex;
  35. flex-direction: column;
  36. padding-left: 10rpx;
  37. position: absolute;
  38. bottom: 6rpx;
  39. }
  40. /* 店名 */
  41. .foodName{
  42. margin: 20rpx 0;
  43. font-weight: bold;
  44. color: green;
  45. }
  46. /* 电话 */
  47. .phone{
  48. height: 30rpx;
  49. line-height: 30rpx;
  50. margin-bottom: 10rpx;
  51. }
  52. /* 电话图标 */
  53. .phoneIcon{
  54. width: 30rpx;
  55. }
  56. /* 电话号码 */
  57. .phoneNum{
  58. font-size: 28rpx;
  59. padding-left: 20rpx;
  60. }
  61. /* 地址区 */
  62. .foodLocate{
  63. display: flex;
  64. }
  65. /* 地址图标 */
  66. .locateIcon{
  67. width: 25%;
  68. }
  69. /* 地址 */
  70. .address{
  71. font-size: 28rpx;
  72. padding: 0 20rpx;
  73. overflow: hidden;
  74. display: -webkit-box;
  75. /*设置对齐模式*/
  76. -webkit-box-orient: vertical;
  77. /*设置多行的行数*/
  78. -webkit-line-clamp: 2;
  79. }