recommendFood.wxss 1.3 KB

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