Staff.wxss 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
  1. /* 页面和视图容器样式 */
  2. page,
  3. view {
  4. display: flex;
  5. }
  6. page {
  7. background-color: #f8f8f8;
  8. }
  9. .center {
  10. flex-direction: column;
  11. }
  12. /* Logo容器样式 */
  13. .logo {
  14. width: 750rpx;
  15. height: 240rpx;
  16. padding: 20rpx;
  17. box-sizing: border-box;
  18. background-color: #a9c6b6;
  19. flex-direction: row;
  20. align-items: center;
  21. }
  22. .logo-hover {
  23. opacity: 0.8;
  24. }
  25. .logo-img {
  26. width: 150rpx; /* 设置图片的大小 */
  27. height: 150rpx; /* 设置图片的大小 */
  28. border-radius: 150rpx; /* 圆形边框 */
  29. }
  30. /* Logo标题样式 */
  31. .logo-title {
  32. height: 150rpx;
  33. flex: 1;
  34. align-items: center;
  35. justify-content: space-between;
  36. flex-direction: row;
  37. margin-left: 20rpx;
  38. }
  39. /* 用户名样式 */
  40. .uer-name {
  41. height: 60rpx;
  42. line-height: 10rpx;
  43. font-size: 38rpx;
  44. color: #FFFFFF;
  45. }
  46. .go-login {
  47. height: 40rpx; /* 设置箭头图片的高度 */
  48. width: 40rpx; /* 设置箭头图片的宽度 */
  49. line-height: 90rpx; /* 图片垂直居中 */
  50. margin-left: 10rpx; /* 设置箭头和文本之间的间距 */
  51. object-fit: contain; /* 保证图片不被拉伸 */
  52. }
  53. .login-title {
  54. height: 150rpx;
  55. align-items: self-start;
  56. justify-content: center;
  57. flex-direction: column;
  58. margin-left: 20rpx;
  59. }
  60. /* 中心列表样式 */
  61. .center-list {
  62. background-color: #FFFFFF;
  63. margin-top: 20rpx;
  64. width: 750rpx;
  65. flex-direction: column;
  66. }
  67. /* 列表项样式 */
  68. .center-list-item {
  69. height: 90rpx;
  70. width: 750rpx;
  71. box-sizing: border-box;
  72. flex-direction: row;
  73. padding: 0 20rpx;
  74. display: flex;
  75. justify-content: center; /* 图片和文本水平居中 */
  76. align-items: center; /* 图片和文本垂直居中 */
  77. }
  78. /* 边框样式 */
  79. .border-bottom {
  80. border-bottom-width: 1rpx;
  81. border-color: #c8c7cc;
  82. border-bottom-style: solid;
  83. }
  84. /* 图片图标样式 */
  85. .list-icon {
  86. width: 40rpx; /* 设置图片宽度 */
  87. height: 40rpx; /* 设置图片高度 */
  88. margin-right: 10rpx; /* 图标和文本之间的间距 */
  89. object-fit: contain; /* 保证图片不被拉伸 */
  90. }
  91. /* 列表文字样式 */
  92. .list-text {
  93. height: 90rpx;
  94. line-height: 90rpx;
  95. font-size: 34rpx;
  96. color: #555;
  97. flex: 1;
  98. text-align: left; /* 使文字水平居中 */
  99. }
  100. /* 导航箭头样式 */
  101. .navigat-arrow {
  102. width: 40rpx; /* 设置箭头图片的宽度 */
  103. height: 40rpx; /* 设置箭头图片的高度 */
  104. margin-left: 10rpx; /* 设置箭头和文本之间的间距 */
  105. object-fit: contain; /* 保证图片不被拉伸 */
  106. }