header.wxss 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  1. /* components/header/header.wxss */
  2. .header {
  3. height: 330rpx;
  4. position: relative;
  5. }
  6. .header .header-bg {
  7. z-index: 1;
  8. position: absolute;
  9. top: 0;
  10. left: 0;
  11. width: 100vw;
  12. height: 295rpx;
  13. background: #CFEAE5;
  14. }
  15. .header .logo {
  16. width: 150rpx;
  17. height: 150rpx;
  18. z-index: 99;
  19. }
  20. .header .logo.logo-at-left {
  21. position: absolute;
  22. top: 96rpx;
  23. left: 36rpx;
  24. }
  25. .header .logo.logo-at-left .back{
  26. width: 25rpx;
  27. height: 40rpx;
  28. margin-top: 10rpx;
  29. }
  30. .header .logo-image {
  31. width: 100%;
  32. height: 100%;
  33. }
  34. .header .mark-icon{
  35. width: 100%;
  36. height: 295rpx;
  37. position: absolute;
  38. top:0;
  39. right:0;
  40. z-index: 2;
  41. }
  42. .header .mark-icon .mark-image{
  43. width: 100%;
  44. position: absolute;
  45. right: 0;
  46. bottom: 0;
  47. }
  48. .header .search-icon {
  49. position: absolute;
  50. z-index: 99;
  51. top: 260rpx;
  52. left: 30rpx;
  53. height: 65rpx;
  54. width: 530rpx;
  55. }
  56. .header .cart-icon {
  57. position: absolute;
  58. z-index: 99;
  59. top: 260rpx;
  60. right: 30rpx;
  61. height: 65rpx;
  62. width: 146rpx;
  63. }
  64. .header .my-logo{
  65. width: 305rpx;
  66. height: 114rpx;
  67. }