diff --git a/f/web-kboss/package.json b/f/web-kboss/package.json index d874234..8aa16f7 100644 --- a/f/web-kboss/package.json +++ b/f/web-kboss/package.json @@ -91,7 +91,7 @@ "eslint-plugin-vue": "6.2.2", "html-webpack-plugin": "3.2.0", "husky": "1.3.1", - "less": "^3.9.0", + "less": "^3.13.1", "less-loader": "^4.1.0", "lint-staged": "8.1.5", "mockjs": "1.0.1-beta3", diff --git a/f/web-kboss/src/assets/image/news.jpg b/f/web-kboss/src/assets/image/news.jpg new file mode 100644 index 0000000..f220047 Binary files /dev/null and b/f/web-kboss/src/assets/image/news.jpg differ diff --git a/f/web-kboss/src/assets/less/news/news.less b/f/web-kboss/src/assets/less/news/news.less new file mode 100644 index 0000000..a70e549 --- /dev/null +++ b/f/web-kboss/src/assets/less/news/news.less @@ -0,0 +1,517 @@ +.news-view-page { + position: relative; + min-height: 100vh; + overflow-x: hidden; + color: #1f2937; + background: + radial-gradient(circle at 78% 18%, rgba(236, 72, 153, 0.07) 0%, rgba(236, 72, 153, 0) 32%), + radial-gradient(circle at 18% 16%, rgba(59, 130, 246, 0.12) 0%, rgba(59, 130, 246, 0) 36%), + linear-gradient(180deg, #f2f8ff 0%, #f6fbff 36%, #fbfdff 62%, #f5f8ff 100%); + } + + .news-shell { + position: relative; + z-index: 1; + max-width: 1280px; + margin: 0 auto; + padding: 0 24px; + } + + .orb { + position: fixed; + z-index: 0; + border-radius: 50%; + filter: blur(110px); + opacity: 0.18; + pointer-events: none; + } + + .orb-1 { + top: -100px; + left: -100px; + width: 400px; + height: 400px; + background: #3b82f6; + animation: float1 20s ease-in-out infinite; + } + + .orb-2 { + right: -150px; + bottom: -150px; + width: 500px; + height: 500px; + background: #3b82f6; + animation: float2 25s ease-in-out infinite; + } + + .orb-3 { + top: 50%; + left: 50%; + width: 300px; + height: 300px; + background: #ec4899; + opacity: 0.12; + animation: float3 18s ease-in-out infinite; + } + + .news-hero { + position: relative; + padding: 140px 0 72px; + overflow: hidden; + } + + .news-hero::before { + position: absolute; + inset: 0; + z-index: 0; + content: ''; + // background: + // linear-gradient(135deg, rgba(99,102,241,0.055) 0%, rgba(168,85,247,0.04) 50%, rgba(236,72,153,0.025) 100%), + // linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.62) 100%); + } + + .news-hero-glow { + position: absolute; + z-index: 0; + border-radius: 50%; + } + + .news-hero-glow-1 { + top: -60px; + right: -100px; + width: 500px; + height: 500px; + background: radial-gradient(circle, rgba(139,92,246,0.09) 0%, transparent 72%); + } + + .news-hero-glow-2 { + bottom: -80px; + left: -120px; + width: 600px; + height: 600px; + background: radial-gradient(circle, rgba(59,130,246,0.08) 0%, transparent 72%); + } + + .hero-content { + animation: fadeInUp 0.8s ease-out forwards; + } + + .hero-badge { + display: inline-block; + padding: 6px 16px; + margin-bottom: 24px; + color: #6366f1; + font-size: 13px; + font-weight: 600; + background: rgba(99, 102, 241, 0.1); + border-radius: 50px; + } + + .hero-title-row { + display: flex; + gap: 20px; + + align-items: baseline; + margin-bottom: 14px; + } + + .hero-title-row h1 { + margin: 0; + color: #1a1a1a; + font-size: 56px; + font-weight: 700; + line-height: 1.2; + } + + .about-link { + padding: 0; + color: #6b7280; + font-size: 16px; + white-space: nowrap; + cursor: pointer; + background: transparent; + border: 0; + transition: color 0.2s; + } + + .about-link:hover { + color: #2563eb; + } + + .hero-content p { + max-width: 600px; + margin: 0; + color: #6b7280; + font-size: 18px; + line-height: 1.8; + } + + .filter-section { + padding: 8px 0 34px; + } + + .filter-tabs { + display: inline-flex; + flex-wrap: wrap; + gap: 10px; + align-items: center; + padding: 8px; + background: rgba(255, 255, 255, 0.78); + border: 1px solid rgba(226, 232, 240, 0.82); + border-radius: 999px; + box-shadow: 0 12px 34px rgba(31, 45, 61, 0.06); + backdrop-filter: blur(14px); + } + + .filter-tab { + min-width: 86px; + min-height: 40px; + padding: 10px 24px; + color: #6b7280; + font-size: 15px; + font-weight: 600; + cursor: pointer; + background: transparent; + border: 1px solid transparent; + border-radius: 50px; + transition: all 0.3s ease; + } + + .filter-tab:hover { + color: #1a1a1a; + background: #f3f4f6; + } + + .filter-tab.active { + color: #fff; + background: #1a1a1a; + border-color: #1a1a1a; + box-shadow: 0 8px 18px rgba(17, 24, 39, 0.16); + } + + .featured-section { + padding-bottom: 52px; + } + + .news-featured, + .news-item { + position: relative; + overflow: hidden; + cursor: pointer; + background: #fff; + border: 1px solid rgba(0, 0, 0, 0.04); + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); + } + + .news-featured { + border-radius: 24px; + } + +.hover-detail { + position: absolute; + top: 18px; + right: 18px; + z-index: 5; + display: inline-flex; + gap: 4px; + align-items: center; + height: 32px; + padding: 0 14px; + color: #fff; + font-size: 13px; + font-weight: 600; + line-height: 32px; + pointer-events: none; + background: rgba(17, 24, 39, 0.72); + border: 1px solid rgba(255, 255, 255, 0.22); + border-radius: 999px; + opacity: 0; + transform: translateY(-6px); + transition: all 0.24s ease; + backdrop-filter: blur(10px); +} + +.news-featured:hover .hover-detail, +.news-item:hover .hover-detail { + opacity: 1; + transform: translateY(0); +} + + .news-featured:hover, + .news-item:hover { + border-color: rgba(99, 102, 241, 0.15); + box-shadow: 0 20px 60px rgba(99, 102, 241, 0.12), 0 8px 24px rgba(0, 0, 0, 0.06); + } + + .news-featured:hover { + transform: translateY(-4px); + } + + .news-item:hover { + transform: translateY(-6px); + } + + .news-featured-inner { + display: grid; + grid-template-columns: 1fr 2fr; + min-height: 180px; + } + + .news-featured-img, + .news-item-img { + position: relative; + overflow: hidden; + } + + .news-featured-img img, + .news-item-img img { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); + } + + .news-featured:hover img, + .news-item:hover img { + transform: scale(1.04); + } + + .news-featured-body { + display: flex; + flex-direction: column; + justify-content: center; + padding: 24px 40px; + } + + .news-featured-date { + margin-bottom: 16px; + color: #9ca3af; + font-size: 14px; + } + + .category-pill { + display: inline-block; + padding: 4px 12px; + margin-right: 8px; + color: #fff; + font-size: 12px; + font-weight: 600; + border-radius: 20px; + } + + .news-featured h2 { + margin: 0 0 16px; + color: #1a1a1a; + font-size: 22px; + font-weight: 700; + line-height: 1.4; + transition: color 0.3s; + } + + .news-featured p { + margin: 0 0 24px; + color: #6b7280; + font-size: 15px; + line-height: 1.8; + } + + .news-featured:hover h2, + .news-item:hover h3 { + color: #4f46e5; + } + + .news-list-section { + padding-bottom: 60px; + } + + .news-grid { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 32px; + } + + .news-item { + border-radius: 20px; + animation: fadeInUp 0.8s ease-out forwards; + } + + .news-item-img { + width: 100%; + height: 220px; + } + + .news-item-img-overlay { + position: absolute; + right: 0; + bottom: 0; + left: 0; + z-index: 1; + height: 60%; + background: linear-gradient(to top, rgba(0, 0, 0, 0.4), transparent); + } + + .news-item-tag { + position: absolute; + top: 16px; + left: 16px; + z-index: 2; + padding: 4px 12px; + color: #fff; + font-size: 12px; + font-weight: 600; + border-radius: 20px; + backdrop-filter: blur(8px); + } + + .news-item-body { + padding: 24px; + } + + .news-item-date { + margin-bottom: 10px; + color: #9ca3af; + font-size: 13px; + } + + .news-item h3 { + display: -webkit-box; + margin: 0 0 10px; + overflow: hidden; + color: #1a1a1a; + font-size: 18px; + font-weight: 700; + line-height: 1.5; + line-clamp: 2; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + transition: color 0.3s; + } + + .news-item p { + display: -webkit-box; + margin: 0; + overflow: hidden; + color: #6b7280; + font-size: 14px; + line-height: 1.7; + line-clamp: 3; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + } + + .news-item-glow { + position: absolute; + top: 0; + left: 0; + z-index: 0; + width: 100%; + height: 100%; + pointer-events: none; + background: radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.1) 0%, rgba(59, 130, 246, 0.06) 30%, transparent 70%); + opacity: 0; + transition: opacity 0.5s ease; + } + + .news-item:hover .news-item-glow, + .news-featured:hover .news-item-glow { + opacity: 1; + } + + .pagination { + display: flex; + gap: 8px; + align-items: center; + justify-content: center; + margin-top: 48px; + } + + .pagination-btn { + display: flex; + align-items: center; + justify-content: center; + width: 40px; + height: 40px; + color: #6b7280; + font-size: 14px; + font-weight: 500; + cursor: pointer; + background: #fff; + border: 1px solid #e5e7eb; + border-radius: 10px; + transition: all 0.2s ease; + } + + .pagination-btn:hover { + color: #6366f1; + border-color: #6366f1; + } + + .pagination-btn.active { + color: #fff; + background: #1a1a1a; + border-color: #1a1a1a; + } + + @keyframes float1 { + 0%, 100% { transform: translate(0, 0) scale(1); } + 33% { transform: translate(50px, -50px) scale(1.1); } + 66% { transform: translate(-30px, 30px) scale(0.9); } + } + + @keyframes float2 { + 0%, 100% { transform: translate(0, 0) scale(1); } + 33% { transform: translate(-60px, 40px) scale(1.15); } + 66% { transform: translate(40px, -60px) scale(0.85); } + } + + @keyframes float3 { + 0%, 100% { transform: translate(-50%, -50%) scale(1); } + 50% { transform: translate(-30%, -70%) scale(1.2); } + } + + @keyframes fadeInUp { + from { opacity: 0; transform: translateY(30px); } + to { opacity: 1; transform: translateY(0); } + } + + @media (max-width: 1024px) { + .news-grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + } + + @media (max-width: 768px) { + .news-hero { + padding: 120px 0 56px; + } + + .hero-title-row { + flex-direction: column; + gap: 10px; + align-items: flex-start; + } + + .filter-tabs { + display: flex; + border-radius: 20px; + } + + .filter-tab { + min-width: auto; + padding: 8px 16px; + font-size: 14px; + } + + .news-featured-inner, + .news-grid { + grid-template-columns: 1fr; + } + + .news-featured-img { + height: 220px; + } + + .news-featured-body { + padding: 24px; + } + } \ No newline at end of file diff --git a/f/web-kboss/src/components/MessageCenter/MessageCenter.vue b/f/web-kboss/src/components/MessageCenter/MessageCenter.vue index b465570..03f9902 100644 --- a/f/web-kboss/src/components/MessageCenter/MessageCenter.vue +++ b/f/web-kboss/src/components/MessageCenter/MessageCenter.vue @@ -631,7 +631,7 @@ export default { diff --git a/f/web-kboss/src/views/operation/consultingMangement/index.vue b/f/web-kboss/src/views/operation/consultingMangement/index.vue index ee71d18..0326af1 100644 --- a/f/web-kboss/src/views/operation/consultingMangement/index.vue +++ b/f/web-kboss/src/views/operation/consultingMangement/index.vue @@ -32,9 +32,9 @@ - + @@ -238,7 +238,7 @@ @close="saveRemarkOnClose" >
- +