Vue 深色背景数据大屏 - 展示账户盈亏、策略计划

<template>
  <div class='dashboard'>
    <div class='left-panel'>
      <h2>今日账户盈亏</h2>
      <ul>
        <li v-for='account in todayProfit' :key='account.id'>
          {{ account.name }}: {{ account.profit }}
        </li>
      </ul>
    </div>
    <div class='middle-panel'>
      <div class='top-section'>
        <h2>今日盈亏金额</h2>
        <p>{{ todayProfitAmount }}</p>
      </div>
      <div class='bottom-section'>
        <h2>执行中策略计划</h2>
        <ul>
          <li v-for='strategy in executingStrategies' :key='strategy.id'>
            {{ strategy.name }}
          </li>
        </ul>
      </div>
    </div>
    <div class='right-panel'>
      <h2>本月账户盈亏</h2>
      <ul>
        <li v-for='account in monthProfit' :key='account.id'>
          {{ account.name }}: {{ account.profit }}
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      todayProfit: [
        { id: 1, name: 'Account 1', profit: 100 },
        { id: 2, name: 'Account 2', profit: 200 },
        // Top 15 accounts with highest profit
        // Add more data here
      ],
      todayProfitAmount: 5000,
      executingStrategies: [
        { id: 1, name: 'Strategy 1' },
        { id: 2, name: 'Strategy 2' },
        // Add more data here
      ],
      monthProfit: [
        { id: 1, name: 'Account 1', profit: 1000 },
        { id: 2, name: 'Account 2', profit: 2000 },
        // Top 15 accounts with highest profit
        // Add more data here
      ],
    };
  },
};
</script>
<style scoped>
.dashboard {
  display: flex;
  background-color: #333;
  color: #fff;
}

.left-panel,
.middle-panel,
.right-panel {
  flex: 1;
  padding: 20px;
}

.left-panel {
  border-right: 1px solid #fff;
}

.middle-panel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid #fff;
}

.top-section,
.bottom-section {
  margin-bottom: 20px;
}

.right-panel {
  overflow-y: scroll;
}
</style>
<p>在这个示例代码中，我们使用了一个 'dashboard' 类来包裹整个数据大屏。左边的面板用于展示今日账户盈亏，中间的面板分为上下两个部分，上部展示今日盈亏金额，下部展示执行中的策略计划，右边的面板用于展示本月账户盈亏。</p>
<p>数据部分我们使用了静态数据，你可以根据实际需求替换成动态数据。每个面板采用不同的样式来区分，左边和右边面板使用了 'border-right' 来分割，中间面板使用了 'flex-direction: column' 来垂直排列上下两个部分。</p>
<p>请根据实际需求进行样式调整和数据替换。</p>