index.wxss 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386
  1. /* 水平间距 */
  2. /* 水平间距 */
  3. .index-container.data-v-1cf27b2a {
  4. min-height: 100vh;
  5. background-color: #f5f6f8;
  6. padding-bottom: 120rpx;
  7. }
  8. /* 用户信息卡片 */
  9. .page-top.data-v-1cf27b2a {
  10. width: 750rpx;
  11. background: linear-gradient(180deg, #abc7ff 44%, #f4f5f9 100%);
  12. margin-bottom: 20rpx;
  13. padding: 20px;
  14. }
  15. .page-top .user-card.data-v-1cf27b2a {
  16. background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 51%, rgba(255, 255, 255, 0.8) 100%), rgba(255, 255, 255, 0.2);
  17. border: 4rpx solid #fcf6ec;
  18. border-radius: 28rpx;
  19. padding: 20px;
  20. position: relative;
  21. }
  22. .page-top .user-card .user-info.data-v-1cf27b2a {
  23. display: flex;
  24. align-items: flex-start;
  25. }
  26. .page-top .user-card .user-info .avatar-wrapper.data-v-1cf27b2a {
  27. flex-shrink: 0;
  28. margin-right: 24rpx;
  29. }
  30. .page-top .user-card .user-info .avatar-wrapper .avatar.data-v-1cf27b2a {
  31. width: 120rpx;
  32. height: 120rpx;
  33. border-radius: 50%;
  34. border: 4rpx solid rgba(255, 255, 255, 0.3);
  35. }
  36. .page-top .user-card .user-info .user-details.data-v-1cf27b2a {
  37. flex: 1;
  38. }
  39. .page-top .user-card .user-info .user-details .name-row.data-v-1cf27b2a {
  40. display: flex;
  41. align-items: center;
  42. margin-bottom: 12rpx;
  43. }
  44. .page-top .user-card .user-info .user-details .name-row .user-name.data-v-1cf27b2a {
  45. font-size: 40rpx;
  46. font-weight: 600;
  47. text-align: LEFT;
  48. color: #202020;
  49. line-height: 50rpx;
  50. letter-spacing: 0.02rpx;
  51. }
  52. .page-top .user-card .user-info .user-details .name-row .user-role.data-v-1cf27b2a {
  53. margin-left: 10px;
  54. width: 108rpx;
  55. height: 40rpx;
  56. line-height: 40rpx;
  57. text-align: center;
  58. background: rgba(255, 255, 255, 0.9);
  59. border-radius: 8rpx;
  60. font-size: 22rpx;
  61. font-weight: 500;
  62. color: #456eff;
  63. }
  64. .page-top .user-card .user-info .user-details .company-name.data-v-1cf27b2a {
  65. font-size: 26rpx;
  66. color: rgba(255, 255, 255, 0.9);
  67. display: block;
  68. margin-bottom: 16rpx;
  69. }
  70. .page-top .user-card .user-info .user-details .contact-row.data-v-1cf27b2a,
  71. .page-top .user-card .user-info .user-details .email-row.data-v-1cf27b2a,
  72. .page-top .user-card .user-info .user-details .address-row.data-v-1cf27b2a {
  73. display: flex;
  74. align-items: center;
  75. margin-bottom: 8rpx;
  76. }
  77. .page-top .user-card .user-info .user-details .contact-row .contact-icon.data-v-1cf27b2a,
  78. .page-top .user-card .user-info .user-details .email-row .contact-icon.data-v-1cf27b2a,
  79. .page-top .user-card .user-info .user-details .address-row .contact-icon.data-v-1cf27b2a {
  80. font-size: 24rpx;
  81. margin-right: 8rpx;
  82. }
  83. .page-top .user-card .user-info .user-details .contact-row .contact-text.data-v-1cf27b2a,
  84. .page-top .user-card .user-info .user-details .email-row .contact-text.data-v-1cf27b2a,
  85. .page-top .user-card .user-info .user-details .address-row .contact-text.data-v-1cf27b2a {
  86. font-size: 22rpx;
  87. color: rgba(255, 255, 255, 0.85);
  88. }
  89. .page-top .user-card .user-address.data-v-1cf27b2a {
  90. display: grid;
  91. gap: 10rpx;
  92. }
  93. .page-top .user-card .user-address .row.data-v-1cf27b2a {
  94. display: grid;
  95. grid-template-columns: 24px 1fr;
  96. gap: 6rpx;
  97. align-items: center;
  98. font-size: 24rpx;
  99. }
  100. .page-top .user-card .user-address .row .contact-text.data-v-1cf27b2a {
  101. font-weight: 500;
  102. color: #666666;
  103. }
  104. .page-top .user-card .share-btn.data-v-1cf27b2a {
  105. display: flex;
  106. align-items: center;
  107. justify-content: center;
  108. background: rgba(255, 255, 255, 0.2);
  109. align-self: flex-start;
  110. width: 204rpx;
  111. height: 66rpx;
  112. background: linear-gradient(90deg, #446dff, rgba(68, 109, 255, 0.3) 100%);
  113. border-radius: 8rpx 28rpx 8rpx 28rpx;
  114. box-sizing: border-box;
  115. position: absolute;
  116. top: -2rpx;
  117. right: -2rpx;
  118. }
  119. .page-top .user-card .share-btn .share-icon.data-v-1cf27b2a {
  120. font-size: 28rpx;
  121. margin-right: 8rpx;
  122. }
  123. .page-top .user-card .share-btn .share-text.data-v-1cf27b2a {
  124. font-size: 26rpx;
  125. color: #ffffff;
  126. }
  127. /* 最近访客模块 */
  128. .recent-visitors.data-v-1cf27b2a {
  129. background: #ffffff;
  130. margin: 20rpx;
  131. padding: 32rpx;
  132. border-radius: 24rpx;
  133. box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
  134. }
  135. .recent-visitors .section-header.data-v-1cf27b2a {
  136. display: flex;
  137. align-items: center;
  138. justify-content: space-between;
  139. margin-bottom: 24rpx;
  140. }
  141. .recent-visitors .section-header .section-title.data-v-1cf27b2a {
  142. font-size: 32rpx;
  143. font-weight: 600;
  144. color: #333333;
  145. }
  146. .recent-visitors .section-header .visitor-count.data-v-1cf27b2a {
  147. display: flex;
  148. align-items: center;
  149. }
  150. .recent-visitors .section-header .visitor-count .visitor-icon.data-v-1cf27b2a {
  151. width: 32rpx;
  152. height: 32rpx;
  153. margin-right: 8rpx;
  154. }
  155. .recent-visitors .section-header .visitor-count .visitor-number.data-v-1cf27b2a {
  156. font-size: 24rpx;
  157. color: #999999;
  158. }
  159. .recent-visitors .section-header .view-more.data-v-1cf27b2a {
  160. font-size: 24rpx;
  161. color: #667eea;
  162. }
  163. .recent-visitors .visitor-list .visitor-item.data-v-1cf27b2a {
  164. display: flex;
  165. align-items: flex-start;
  166. }
  167. .recent-visitors .visitor-list .visitor-item .visitor-avatar.data-v-1cf27b2a {
  168. width: 80rpx;
  169. height: 80rpx;
  170. border-radius: 50%;
  171. margin-right: 20rpx;
  172. flex-shrink: 0;
  173. }
  174. .recent-visitors .visitor-list .visitor-item .visitor-avatar image.data-v-1cf27b2a {
  175. width: 100%;
  176. height: 100%;
  177. border-radius: 50%;
  178. }
  179. .recent-visitors .visitor-list .visitor-item .visitor-info.data-v-1cf27b2a {
  180. flex: 1;
  181. }
  182. .recent-visitors .visitor-list .visitor-item .visitor-info .visitor-name-row.data-v-1cf27b2a {
  183. display: flex;
  184. align-items: center;
  185. margin-bottom: 8rpx;
  186. }
  187. .recent-visitors .visitor-list .visitor-item .visitor-info .visitor-name-row .visitor-name.data-v-1cf27b2a {
  188. font-size: 28rpx;
  189. color: #333333;
  190. font-weight: 500;
  191. }
  192. .recent-visitors .visitor-list .visitor-item .visitor-info .visitor-name-row .visitor-tag.data-v-1cf27b2a {
  193. font-size: 20rpx;
  194. color: #ff6b6b;
  195. background: rgba(255, 107, 107, 0.1);
  196. padding: 4rpx 12rpx;
  197. border-radius: 16rpx;
  198. margin-left: 12rpx;
  199. }
  200. .recent-visitors .visitor-list .visitor-item .visitor-info .visitor-source.data-v-1cf27b2a {
  201. font-size: 22rpx;
  202. color: #999999;
  203. display: block;
  204. margin-bottom: 8rpx;
  205. }
  206. .recent-visitors .visitor-list .visitor-item .visitor-info .visitor-action.data-v-1cf27b2a {
  207. font-size: 22rpx;
  208. color: #666666;
  209. }
  210. /* 功能菜单网格 */
  211. .function-grid.data-v-1cf27b2a {
  212. display: grid;
  213. grid-template-columns: repeat(4, 1fr);
  214. gap: 24rpx;
  215. background: #ffffff;
  216. margin: 20rpx;
  217. padding: 32rpx 24rpx;
  218. border-radius: 24rpx;
  219. box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
  220. }
  221. .function-grid .grid-item.data-v-1cf27b2a {
  222. display: flex;
  223. flex-direction: column;
  224. align-items: center;
  225. }
  226. .function-grid .grid-item .grid-icon.data-v-1cf27b2a {
  227. width: 96rpx;
  228. height: 96rpx;
  229. border-radius: 28rpx;
  230. display: flex;
  231. align-items: center;
  232. justify-content: center;
  233. margin-bottom: 12rpx;
  234. }
  235. .function-grid .grid-item .grid-icon .icon-text.data-v-1cf27b2a {
  236. font-size: 48rpx;
  237. }
  238. .function-grid .grid-item .clue-icon.data-v-1cf27b2a {
  239. background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  240. }
  241. .function-grid .grid-item .customer-icon.data-v-1cf27b2a {
  242. background: linear-gradient(135deg, #30cfd0 0%, #330867 100%);
  243. }
  244. .function-grid .grid-item .contact-icon.data-v-1cf27b2a {
  245. background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
  246. }
  247. .function-grid .grid-item .pool-icon.data-v-1cf27b2a {
  248. background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  249. }
  250. .function-grid .grid-item .opportunity-icon.data-v-1cf27b2a {
  251. background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  252. }
  253. .function-grid .grid-item .payment-icon.data-v-1cf27b2a {
  254. background: linear-gradient(135deg, #ffd89b 0%, #19547b 100%);
  255. }
  256. .function-grid .grid-item .product-icon.data-v-1cf27b2a {
  257. background: linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%);
  258. }
  259. .function-grid .grid-item .all-icon.data-v-1cf27b2a {
  260. background: linear-gradient(135deg, #cd9cf2 0%, #f6f3ff 100%);
  261. }
  262. .function-grid .grid-item .grid-label.data-v-1cf27b2a {
  263. font-size: 24rpx;
  264. color: #333333;
  265. }
  266. /* 业务日历模块 */
  267. .business-calendar.data-v-1cf27b2a {
  268. background: #ffffff;
  269. margin: 20rpx;
  270. padding: 32rpx;
  271. border-radius: 24rpx;
  272. box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
  273. }
  274. .business-calendar .section-header.data-v-1cf27b2a {
  275. display: flex;
  276. align-items: center;
  277. justify-content: space-between;
  278. margin-bottom: 24rpx;
  279. }
  280. .business-calendar .section-header .section-title.data-v-1cf27b2a {
  281. font-size: 32rpx;
  282. font-weight: 600;
  283. color: #333333;
  284. }
  285. .business-calendar .section-header .view-more.data-v-1cf27b2a {
  286. font-size: 24rpx;
  287. color: #667eea;
  288. }
  289. .business-calendar .calendar-header.data-v-1cf27b2a {
  290. text-align: center;
  291. margin-bottom: 20rpx;
  292. }
  293. .business-calendar .calendar-header .calendar-month.data-v-1cf27b2a {
  294. font-size: 30rpx;
  295. font-weight: 600;
  296. color: #333333;
  297. }
  298. .business-calendar .calendar-weekdays.data-v-1cf27b2a {
  299. display: grid;
  300. grid-template-columns: repeat(7, 1fr);
  301. text-align: center;
  302. margin-bottom: 16rpx;
  303. }
  304. .business-calendar .calendar-weekdays .weekday.data-v-1cf27b2a {
  305. font-size: 24rpx;
  306. color: #999999;
  307. padding: 12rpx 0;
  308. }
  309. .business-calendar .calendar-dates.data-v-1cf27b2a {
  310. display: grid;
  311. grid-template-columns: repeat(7, 1fr);
  312. gap: 8rpx;
  313. margin-bottom: 32rpx;
  314. }
  315. .business-calendar .calendar-dates .date-cell.data-v-1cf27b2a {
  316. aspect-ratio: 1;
  317. display: flex;
  318. flex-direction: column;
  319. align-items: center;
  320. justify-content: center;
  321. border-radius: 50%;
  322. position: relative;
  323. }
  324. .business-calendar .calendar-dates .date-cell .date-num.data-v-1cf27b2a {
  325. font-size: 26rpx;
  326. color: #333333;
  327. }
  328. .business-calendar .calendar-dates .date-cell.today.data-v-1cf27b2a {
  329. background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  330. }
  331. .business-calendar .calendar-dates .date-cell.today .date-num.data-v-1cf27b2a {
  332. color: #ffffff;
  333. font-weight: 600;
  334. }
  335. .business-calendar .calendar-dates .date-cell.has-event .event-dot.data-v-1cf27b2a {
  336. width: 12rpx;
  337. height: 12rpx;
  338. background: #ff6b6b;
  339. border-radius: 50%;
  340. position: absolute;
  341. bottom: 8rpx;
  342. }
  343. .business-calendar .today-schedule .schedule-item.data-v-1cf27b2a {
  344. display: flex;
  345. align-items: flex-start;
  346. padding: 24rpx;
  347. background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  348. border-radius: 16rpx;
  349. margin-bottom: 16rpx;
  350. border-left: 6rpx solid #667eea;
  351. }
  352. .business-calendar .today-schedule .schedule-item.tomorrow.data-v-1cf27b2a {
  353. border-left-color: #30cfd0;
  354. }
  355. .business-calendar .today-schedule .schedule-item .schedule-time.data-v-1cf27b2a {
  356. display: flex;
  357. flex-direction: column;
  358. align-items: center;
  359. margin-right: 20rpx;
  360. min-width: 100rpx;
  361. }
  362. .business-calendar .today-schedule .schedule-item .schedule-time .time-period.data-v-1cf27b2a {
  363. font-size: 22rpx;
  364. color: #999999;
  365. margin-bottom: 4rpx;
  366. }
  367. .business-calendar .today-schedule .schedule-item .schedule-time .time-value.data-v-1cf27b2a {
  368. font-size: 28rpx;
  369. font-weight: 600;
  370. color: #333333;
  371. }
  372. .business-calendar .today-schedule .schedule-item .schedule-content.data-v-1cf27b2a {
  373. flex: 1;
  374. }
  375. .business-calendar .today-schedule .schedule-item .schedule-content .schedule-title.data-v-1cf27b2a {
  376. font-size: 28rpx;
  377. color: #333333;
  378. line-height: 1.5;
  379. }
  380. .bottom-spacer.data-v-1cf27b2a {
  381. height: 40rpx;
  382. }