这是一个网页样式设计参考

自然有机与未来科技融合的智能投顾交易平台

设计理念

本平台旨在将自然有机的设计元素与未来科技感相融合，为用户提供直观、易用且高效的智能投顾与量化交易体验。通过柔和的自然色彩和现代科技元素的结合，打造一个既温暖又充满未来感的投资环境。

色彩搭配

在色彩选择上，主色调采用森林绿、土壤棕和天空蓝，辅以米色和灰色作为背景色，点缀以橙色和荧光色用于互动按钮和重点提示，确保整体色彩丰富而协调。


:root {
    --forest-green: #228B22;
    --soil-brown: #8B4513;
    --sky-blue: #87CEEB;
    --accent-orange: #FFA500;
    --accent-fluorescent: #32CD32;
    --neutral-beige: #F5F5DC;
    --neutral-gray: #A9A9A9;
}

布局形式

采用12列网格系统进行模块化设计，结合自然元素的流动性，设计不规则但协调的布局，确保页面在不同设备上的响应性和良好表现。


.container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 20px;
    padding: 20px;
}

.module {
    background-color: rgba(255, 165, 0, 0.1);
    padding: 15px;
    border-radius: 8px;
}

@media (max-width: 768px) {
    .container {
        grid-template-columns: repeat(6, 1fr);
    }
}

@media (max-width: 480px) {
    .container {
        grid-template-columns: repeat(2, 1fr);
    }
}

交互动效

利用CSS3的过渡和动画效果，实现按钮悬停放大、滚动加载时元素缓缓出现的动感效果，提升用户的互动体验和页面的生动性。


.button {
    background: var(--metallic-gradient);
    border: none;
    padding: 15px 30px;
    color: white;
    font-size: var(--font-size-h3);
    border-radius: 25px;
    cursor: pointer;
    transition: transform 0.3s ease, background 0.3s ease;
}

.button:hover {
    transform: scale(1.05);
    background: var(--main-color-soil-brown);
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

数据可视化

通过动态图表和数据流动图展示市场动态与用户交易表现，运用CSS3的动画和Flexbox布局，增强图表的交互性和动态效果。


.charts {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
}

.chart {
    flex: 1 1 45%;
    background-color: white;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.6s forwards;
}

.chart:nth-child(odd) {
    animation-delay: 0.2s;
}

.chart:nth-child(even) {
    animation-delay: 0.4s;
}