page-crm-home.scss 9.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499
  1. /* page-crm-home.scss */
  2. @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&family=Noto+Serif+SC:wght@400;600;700&display=swap');
  3. /* 主色调定义 */
  4. :root {
  5. --primary-blue: #2F7DAD; /* 天青瓷 */
  6. --primary-green: #5B8C5A; /* 香樟绿 */
  7. --primary-gold: #D4B16A; /* 庐金 */
  8. --secondary-gray: #6D6D6D; /* 婺源黛瓦灰 */
  9. --secondary-red: #C53D43; /* 井冈山鹃红 */
  10. --secondary-white: #F0F0F0; /* 鄱阳湖银白 */
  11. }
  12. .crm-home {
  13. /* 全局样式 */
  14. * {
  15. margin: 0;
  16. padding: 0;
  17. box-sizing: border-box;
  18. font-family: "Noto Sans SC", "阿里巴巴普惠体", sans-serif;
  19. }
  20. /* 智能Banner区域 */
  21. .banner {
  22. height: 500px;
  23. position: relative;
  24. overflow: hidden;
  25. background: linear-gradient(to bottom, #f8f4e8, #e8e0d0);
  26. &-content {
  27. position: absolute;
  28. top: 50%;
  29. left: 10%;
  30. transform: translateY(-50%);
  31. z-index: 3;
  32. max-width: 40%;
  33. }
  34. &-title {
  35. font-family: "Noto Serif SC", serif;
  36. font-size: 3rem;
  37. color: #2F7DAD;
  38. margin-bottom: 1rem;
  39. margin-left: -110px;
  40. text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
  41. }
  42. &-subtitle {
  43. font-size: 1.2rem;
  44. color: #6D6D6D;
  45. margin-bottom: 2rem;
  46. margin-left: -110px;
  47. margin-right: 150px;
  48. line-height: 1.8;
  49. }
  50. &-btn {
  51. display: inline-block;
  52. padding: 0.8rem 2rem;
  53. background-color: #D4B16A/*var(--primary-gold)*/;
  54. color: white;
  55. text-decoration: none;
  56. border-radius: 30px;
  57. font-weight: bold;
  58. transition: all 0.3s ease;
  59. box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  60. &:hover {
  61. background-color: #c9a055;
  62. transform: translateY(-3px);
  63. box-shadow: 0 6px 12px rgba(0,0,0,0.15);
  64. }
  65. }
  66. &-bg {
  67. position: absolute;
  68. top: 0;
  69. right: 0;
  70. height: 100%;
  71. width: 60%;
  72. background: url('/assets/images/jiangxi-landscape.webp') center right no-repeat;
  73. background-size: contain;
  74. opacity: 0.9;
  75. &::after {
  76. content: "";
  77. position: absolute;
  78. top: 0;
  79. left: 0;
  80. right: 0;
  81. bottom: 0;
  82. background: radial-gradient(circle at 70% 50%, transparent 30%, rgba(248,244,232,0.8));
  83. }
  84. }
  85. }
  86. /* 数智动态区 */
  87. .dynamic-section {
  88. padding: 4rem 10%;
  89. background-color: white;
  90. position: relative;
  91. }
  92. .section-title {
  93. font-family: "Noto Serif SC", serif;
  94. font-size: 2.2rem;
  95. color: #2F7DAD;
  96. text-align: center;
  97. margin-bottom: 3rem;
  98. position: relative;
  99. &::after {
  100. content: "";
  101. display: block;
  102. width: 80px;
  103. height: 3px;
  104. background: linear-gradient(to right, #2F7DAD, #5B8C5A);
  105. margin: 1rem auto 0;
  106. }
  107. }
  108. .dynamic-grid {
  109. display: grid;
  110. grid-template-columns: repeat(3, 1fr);
  111. gap: 2rem;
  112. }
  113. .dynamic-card {
  114. background-color: white;
  115. border-radius: 8px;
  116. overflow: hidden;
  117. box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  118. transition: all 0.3s ease;
  119. position: relative;
  120. &:hover {
  121. transform: translateY(-10px);
  122. box-shadow: 0 12px 24px rgba(0,0,0,0.12);
  123. }
  124. }
  125. .card-img {
  126. height: 200px;
  127. background-size: cover;
  128. background-position: center;
  129. position: relative;
  130. &::after {
  131. content: "";
  132. position: absolute;
  133. top: 0;
  134. left: 0;
  135. right: 0;
  136. bottom: 0;
  137. background: linear-gradient(to bottom, transparent 60%, rgba(0,0,0,0.6));
  138. }
  139. }
  140. .card-content {
  141. padding: 1.5rem;
  142. }
  143. .card-title {
  144. font-size: 1.3rem;
  145. color: #2F7DAD;
  146. margin-bottom: 0.8rem;
  147. }
  148. .card-desc {
  149. color: #6D6D6D;
  150. margin-bottom: 1.5rem;
  151. font-size: 0.95rem;
  152. }
  153. .card-link {
  154. display: inline-block;
  155. color: #D4B16A;
  156. text-decoration: none;
  157. font-weight: bold;
  158. position: relative;
  159. &::after {
  160. content: "";
  161. position: absolute;
  162. bottom: -2px;
  163. left: 0;
  164. width: 100%;
  165. height: 1px;
  166. background-color: #D4B16A;
  167. transition: transform 0.3s ease;
  168. transform-origin: right;
  169. transform: scaleX(0);
  170. }
  171. &:hover::after {
  172. transform-origin: left;
  173. transform: scaleX(1);
  174. }
  175. }
  176. /* 共创展示区 */
  177. .co-creation-section {
  178. padding: 4rem 10%;
  179. background-color: #f5f9f5;
  180. position: relative;
  181. }
  182. .co-creation-slider {
  183. display: flex;
  184. gap: 2rem;
  185. overflow-x: auto;
  186. padding: 1rem 0;
  187. scroll-snap-type: x mandatory;
  188. -webkit-overflow-scrolling: touch;
  189. &::-webkit-scrollbar {
  190. height: 6px;
  191. }
  192. &::-webkit-scrollbar-track {
  193. background: #f1f1f1;
  194. }
  195. &::-webkit-scrollbar-thumb {
  196. background: #D4B16A;
  197. border-radius: 3px;
  198. }
  199. }
  200. .co-creation-item {
  201. min-width: 300px;
  202. scroll-snap-align: start;
  203. background-color: white;
  204. border-radius: 8px;
  205. overflow: hidden;
  206. box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  207. transition: transform 0.3s ease;
  208. &:hover {
  209. transform: translateY(-5px);
  210. }
  211. }
  212. .cc-img {
  213. height: 180px;
  214. background-size: cover;
  215. background-position: center;
  216. }
  217. .cc-content {
  218. padding: 1.5rem;
  219. p {
  220. color: #6D6D6D;
  221. font-size: 0.95rem;
  222. line-height: 1.6;
  223. }
  224. }
  225. .cc-title {
  226. font-size: 1.2rem;
  227. color: #5B8C5A;
  228. margin-bottom: 0.5rem;
  229. }
  230. .cc-author {
  231. color: #6D6D6D;
  232. font-size: 0.9rem;
  233. margin-bottom: 1rem;
  234. }
  235. /* 协会智能体 - 优化后的样式 */
  236. .ai-section {
  237. padding: 5rem 10%;
  238. // background: linear-gradient(135deg, #2F7DAD, #1a5c87); /* 直接使用颜色值代替darken函数 */
  239. background: linear-gradient(to right, #2F7DAD, #5B8C5A);
  240. color: white;
  241. text-align: center;
  242. position: relative;
  243. overflow: hidden;
  244. &::before {
  245. content: "";
  246. position: absolute;
  247. top: 0;
  248. left: 0;
  249. width: 100%;
  250. height: 100%;
  251. background: url('/assets/images/water-ink-pattern.webp') center/cover no-repeat;
  252. opacity: 0.05;
  253. z-index: 0;
  254. }
  255. .ai-container {
  256. position: relative;
  257. z-index: 1;
  258. max-width: 900px;
  259. margin: 0 auto;
  260. }
  261. .ai-title {
  262. font-family: "Noto Serif SC", serif;
  263. font-size: 2.5rem;
  264. margin-bottom: 1.5rem;
  265. color: #D4B16A;
  266. text-shadow: 1px 1px 3px rgba(0,0,0,0.2);
  267. }
  268. .ai-desc {
  269. margin: 0 auto 3rem;
  270. font-size: 1.1rem;
  271. line-height: 1.8;
  272. max-width: 700px;
  273. color: rgba(255,255,255,0.9);
  274. }
  275. .banner-btn {
  276. margin-bottom: 3rem;
  277. background-color: #D4B16A;
  278. border: none;
  279. font-size: 1rem;
  280. padding: 0.8rem 2.5rem;
  281. transition: all 0.3s ease;
  282. &:hover {
  283. background-color: #c9a055; /* 直接使用darken后的颜色值 */
  284. transform: translateY(-3px);
  285. box-shadow: 0 5px 15px rgba(0,0,0,0.2);
  286. }
  287. }
  288. .ai-features {
  289. display: grid;
  290. grid-template-columns: repeat(3, 1fr);
  291. gap: 2rem;
  292. margin-top: 2rem;
  293. @media (max-width: 768px) {
  294. grid-template-columns: 1fr;
  295. }
  296. }
  297. .ai-feature {
  298. background-color: rgba(255,255,255,0.1);
  299. padding: 2rem 1.5rem;
  300. border-radius: 12px;
  301. backdrop-filter: blur(8px);
  302. border: 1px solid rgba(255,255,255,0.1);
  303. transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  304. position: relative;
  305. overflow: hidden;
  306. &::after {
  307. content: "";
  308. position: absolute;
  309. bottom: 0;
  310. left: 0;
  311. width: 100%;
  312. height: 3px;
  313. background: linear-gradient(to right, #D4B16A, #5B8C5A); /* 直接使用颜色值 */
  314. transform: scaleX(0);
  315. transform-origin: left;
  316. transition: transform 0.3s ease;
  317. }
  318. &:hover {
  319. background-color: rgba(255,255,255,0.15);
  320. transform: translateY(-8px);
  321. box-shadow: 0 10px 25px rgba(0,0,0,0.15);
  322. &::after {
  323. transform: scaleX(1);
  324. }
  325. }
  326. }
  327. .ai-icon {
  328. font-size: 2.8rem;
  329. margin-bottom: 1.2rem;
  330. color: #D4B16A;
  331. display: inline-block;
  332. transition: transform 0.3s ease;
  333. }
  334. .ai-feature:hover .ai-icon {
  335. transform: scale(1.1);
  336. }
  337. .ai-feature-title {
  338. font-size: 1.3rem;
  339. margin-bottom: 1rem;
  340. font-weight: 600;
  341. color: white;
  342. }
  343. .ai-feature p {
  344. color: rgba(255,255,255,0.8);
  345. font-size: 0.95rem;
  346. line-height: 1.7;
  347. }
  348. }
  349. /* 页脚样式 */
  350. .footer {
  351. background-color: #2a2a2a;
  352. color: #fff;
  353. padding: 3rem 10% 1rem;
  354. &-grid {
  355. display: grid;
  356. grid-template-columns: repeat(4, 1fr);
  357. gap: 2rem;
  358. margin-bottom: 2rem;
  359. }
  360. &-col {
  361. h3 {
  362. font-family: "Noto Serif SC", serif;
  363. font-size: 1.2rem;
  364. margin-bottom: 1.5rem;
  365. color: #D4B16A;
  366. }
  367. }
  368. &-links {
  369. list-style: none;
  370. li {
  371. margin-bottom: 0.8rem;
  372. a {
  373. color: #ddd;
  374. text-decoration: none;
  375. transition: color 0.3s ease;
  376. &:hover {
  377. color: #D4B16A;
  378. }
  379. }
  380. }
  381. }
  382. &-bottom {
  383. border-top: 1px solid rgba(255,255,255,0.1);
  384. padding-top: 1.5rem;
  385. text-align: center;
  386. font-size: 0.9rem;
  387. color: #aaa;
  388. }
  389. }
  390. /* 响应式设计 */
  391. @media (max-width: 1024px) {
  392. .dynamic-grid {
  393. grid-template-columns: repeat(2, 1fr);
  394. }
  395. .ai-features {
  396. grid-template-columns: repeat(2, 1fr);
  397. }
  398. .footer-grid {
  399. grid-template-columns: repeat(2, 1fr);
  400. }
  401. }
  402. @media (max-width: 768px) {
  403. .banner {
  404. height: auto;
  405. padding: 3rem 1rem;
  406. &-content {
  407. position: static;
  408. transform: none;
  409. max-width: 100%;
  410. text-align: center;
  411. }
  412. &-bg {
  413. position: relative;
  414. width: 100%;
  415. height: 300px;
  416. margin-top: 2rem;
  417. }
  418. }
  419. .dynamic-grid {
  420. grid-template-columns: 1fr;
  421. }
  422. .ai-features {
  423. grid-template-columns: 1fr;
  424. }
  425. .footer-grid {
  426. grid-template-columns: 1fr;
  427. }
  428. }
  429. }