diff --git a/wwwroot/cms_styles.css b/wwwroot/cms_styles.css index de2f2fc..54e1891 100644 --- a/wwwroot/cms_styles.css +++ b/wwwroot/cms_styles.css @@ -91,6 +91,406 @@ a { color: inherit; text-decoration: none; } box-shadow: 0 4px 20px rgba(108, 92, 231, 0.4); } +/* === Bricks Widget Overrides for Portal === */ + +/* Root container */ +.site-root { + font-family: var(--font-family); + background: var(--bg-dark); + color: var(--text-primary); + overflow-x: hidden; +} + +/* Nav buttons — reset bricks button defaults */ +.nav-bar .bricks-button { + background: none; + border: none; + color: inherit; + font-family: var(--font-family); + cursor: pointer; + padding: 0; + margin: 0; + font-size: inherit; + outline: none; + box-shadow: none; + border-radius: 0; + line-height: 1; +} + +.nav-link { + font-size: 14px !important; + color: var(--text-secondary) !important; + transition: var(--transition); +} + +.nav-link:hover { + color: var(--text-primary) !important; +} + +.nav-cta { + display: inline-flex !important; + align-items: center; + padding: 8px 20px !important; + background: var(--brand-primary) !important; + color: white !important; + border-radius: 8px !important; + font-size: 14px !important; + font-weight: 500; + transition: var(--transition); +} + +.nav-cta:hover { + transform: translateY(-2px); + box-shadow: 0 4px 20px rgba(108, 92, 231, 0.4); +} + +.nav-login { + font-size: 14px !important; + color: var(--text-secondary) !important; + background: rgba(255,255,255,0.08) !important; + padding: 6px 16px !important; + border-radius: 6px !important; + transition: var(--transition); +} + +.nav-login:hover { + color: var(--text-primary) !important; + background: rgba(255,255,255,0.15) !important; +} + +.nav-register { + font-size: 14px !important; + color: white !important; + background: var(--brand-primary) !important; + padding: 6px 16px !important; + border-radius: 6px !important; + font-weight: 500; + transition: var(--transition); +} + +.nav-register:hover { + transform: translateY(-1px); + box-shadow: 0 4px 16px rgba(108, 92, 231, 0.4); +} + +.nav-right { + display: flex; + align-items: center; + gap: 12px; +} + +.nav-right-btns { + display: flex; + gap: 8px; +} + +.nav-user { + display: flex; + align-items: center; + gap: 6px; + padding: 4px 12px; + border-radius: 20px; + background: rgba(255,255,255,0.08); + cursor: pointer; + transition: var(--transition); +} + +.nav-user:hover { + background: rgba(255,255,255,0.15); +} + +.nav-avatar { + font-size: 16px; +} + +.nav-username { + font-size: 14px; + color: var(--text-primary); + max-width: 100px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +/* Hero section bricks overrides */ +.hero-section.bricks-vbox { + min-height: 100vh; + display: flex; + align-items: center; + justify-content: center; + padding: 120px 48px 80px; + position: relative; + overflow: hidden; +} + +.hero-subtitle.bricks-text { + font-size: 18px; + color: var(--text-secondary); + font-weight: 300; + max-width: 600px; + margin-bottom: 40px; + line-height: 1.6; +} + +.hero-buttons.bricks-hbox { + display: flex; + gap: 16px; +} + +.hero-buttons .bricks-button { + display: inline-flex; + align-items: center; + padding: 12px 28px; + border-radius: 10px; + font-size: 16px; + font-weight: 500; + font-family: var(--font-family); + cursor: pointer; + transition: var(--transition); + border: none; + outline: none; + box-shadow: none; + line-height: 1; +} + +.btn-primary { + background: var(--brand-primary) !important; + color: white !important; +} + +.btn-primary:hover { + transform: translateY(-2px); + box-shadow: 0 6px 24px rgba(108, 92, 231, 0.4); +} + +.btn-outline { + background: transparent !important; + color: var(--text-primary) !important; + border: 1px solid rgba(255,255,255,0.2) !important; +} + +.btn-outline:hover { + border-color: var(--brand-primary) !important; + transform: translateY(-2px); +} + +/* Section VBox bricks overrides */ +.section.bricks-vbox { + padding: 80px 48px; + max-width: var(--max-width); + margin: 0 auto; +} + +.section-title.bricks-title2 { + font-size: 36px; + font-weight: 700; + margin-bottom: 12px; + color: var(--text-primary); +} + +.section-desc.bricks-text { + font-size: 16px; + color: var(--text-secondary); + margin-bottom: 48px; + font-weight: 300; +} + +/* Products grid — override bricks HBox to CSS grid */ +.products-grid.bricks-hbox { + display: grid !important; + grid-template-columns: repeat(3, 1fr); + gap: 20px; + flex-direction: unset; +} + +.product-card.bricks-vbox { + background: var(--bg-card); + border: 1px solid var(--border-dark); + border-radius: 12px; + padding: 32px 24px; + cursor: pointer; + transition: var(--transition); + position: relative; + overflow: hidden; +} + +.product-card:hover { + transform: translateX(4px); + border-color: var(--brand-primary); +} + +.product-card .card-title { + font-size: 20px; + font-weight: 600; + margin-bottom: 8px; + color: var(--text-primary); +} + +.product-card .card-desc { + font-size: 14px; + color: var(--text-secondary); + line-height: 1.6; +} + +.product-card .product-detail { + display: none; + margin-top: 16px; + padding-top: 16px; + border-top: 1px solid var(--border-dark); + font-size: 14px; + color: var(--text-secondary); + line-height: 1.8; +} + +.product-card:hover .product-detail, +.product-card.active .product-detail { + display: block; +} + +/* Cases grid */ +.cases-grid.bricks-hbox { + display: grid !important; + grid-template-columns: repeat(3, 1fr); + gap: 20px; + margin-bottom: 40px; + flex-direction: unset; +} + +.case-card.bricks-vbox { + background: var(--bg-card); + border: 1px solid var(--border-dark); + border-radius: 12px; + padding: 24px; + transition: var(--transition); + cursor: pointer; +} + +.case-card:hover { + transform: translateY(-4px); + border-color: var(--brand-primary); +} + +.case-tag { + font-size: 11px !important; + color: var(--brand-light) !important; + text-transform: uppercase; + letter-spacing: 1px; + margin-bottom: 12px; + font-weight: 500; +} + +.case-title { + font-size: 17px !important; + font-weight: 600; + margin-bottom: 8px; + color: var(--text-primary); +} + +.case-desc { + font-size: 13px !important; + color: var(--text-secondary) !important; + line-height: 1.6; +} + +/* Section header */ +.section-header.bricks-hbox { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 32px; +} + +.section-header .section-desc { + margin-bottom: 0; + margin-top: 8px; +} + +/* CTA Banner */ +.cta-banner.bricks-hbox { + background: linear-gradient(135deg, rgba(108, 92, 231, 0.15), rgba(116, 185, 255, 0.1)); + border: 1px solid rgba(108, 92, 231, 0.2); + border-radius: 16px; + padding: 40px; + display: flex; + align-items: center; + justify-content: space-between; + margin-top: 40px; +} + +.cta-text { + font-size: 20px !important; + font-weight: 600; + color: var(--text-primary); +} + +/* News section */ +.news-header.bricks-hbox { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 32px; +} + +.news-view-all { + font-size: 14px !important; + color: var(--brand-light) !important; + background: none !important; + border: none !important; + cursor: pointer; + transition: var(--transition); +} + +.news-view-all:hover { + color: var(--brand-primary) !important; +} + +.news-list.bricks-vbox { + display: flex; + flex-direction: column; + gap: 20px; +} + +.news-item.bricks-hbox { + display: flex; + align-items: flex-start; + gap: 20px; + padding: 20px; + background: var(--bg-card); + border: 1px solid var(--border-dark); + border-radius: 12px; + transition: var(--transition); + cursor: pointer; +} + +.news-item:hover { + border-color: var(--brand-primary); +} + +.news-date { + font-size: 12px !important; + color: var(--text-muted) !important; + white-space: nowrap; + min-width: 80px; +} + +.news-title { + font-size: 14px !important; + font-weight: 500; + color: var(--text-primary); +} + +/* Footer */ +.site-footer.bricks-vbox { + border-top: 1px solid rgba(255,255,255,0.06); + padding: 40px 48px; + text-align: center; + font-size: 13px; + color: var(--text-muted); +} + +/* Clickable utility */ +.clickable { cursor: pointer; } + /* === Hero Section === */ .hero-section { min-height: 100vh; @@ -639,46 +1039,5 @@ a { color: inherit; text-decoration: none; } transform: translateY(0); } -/* Portal User Info Widgets */ -.portal-user-info { - display: flex; - align-items: center; - gap: 8px; -} - -.portal-username { - font-size: 14px; - color: var(--text-secondary); - max-width: 100px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.portal-login-btn, -.portal-register-btn { - font-size: 13px !important; - padding: 6px 16px !important; - border-radius: 6px !important; - border: none !important; - cursor: pointer !important; - transition: var(--transition); -} - -.portal-login-btn { - background: rgba(255,255,255,0.1) !important; - color: var(--text-primary) !important; -} - -.portal-login-btn:hover { - background: rgba(255,255,255,0.2) !important; -} - -.portal-register-btn { - background: var(--brand-gradient) !important; - color: white !important; -} - -.portal-register-btn:hover { - opacity: 0.9; -} +/* Clickable utility */ +.clickable { cursor: pointer; } diff --git a/wwwroot/index.ui b/wwwroot/index.ui index 4cd2c52..75c47fc 100644 --- a/wwwroot/index.ui +++ b/wwwroot/index.ui @@ -3,35 +3,245 @@ {% set cases = get_published_content('case', 6) %} {% set news = get_latest_news(2) %} { - "widgettype": "VBox", - "options": {"width": "100%", "css": "site-root"}, - "subwidgets": [ - { - "widgettype": "HBox", - "options": {"width": "100%", "css": "nav-bar"}, - "subwidgets": [ - { - "widgettype": "Html", - "id": "nav_html", - "options": { - "html": "
开元云科技<\/div>