当前位置：首页 > news >正文

dcsdsds

news 来源：原创 2025/6/8 15:52:55

我将为您在页面顶部添加欢迎内容，同时保持整体风格的一致性。以下是修改后的代码，主要修改了模板部分和对应的样式：

vue

复制

<template>
  <div class="main-wrapper">
    <!-- 新增欢迎部分 -->
    <div class="welcome-section">
      <h1 class="welcome-title">欢迎使用云析智雾</h1>
      <div class="welcome-content">
        <p>这是一款简单易上手的股市分析系统，它包括了一般的股市网站会拥有的简单的股市分析的内容</p>
        <p>同时提供了前沿技术来帮助用户对股市趋势进行分析</p>
      </div>
    </div>
    
    <!-- 头部 -->
    <div class="main-top">
      <span class="main-top-worldnum">全球指数：</span>

      <!-- 加载状态 -->
      <span v-if="indicesData.length === 0">加载中...</span>

      <template v-else>
        <template v-for="(item, i) in indicesData" :key="i">
          <!-- 分隔线 -->
          <span v-if="i > 0" class="separator" />

          <!-- 指数名称 -->
          <span class="index-name">{{ item.data.name[0] }}：</span>

          <!-- 最新价格 -->
          <span class="main-top-index-amount1">
            {{ Number(item.data.amount[0]).toFixed(2) }}
          </span>

          <!-- 涨跌幅 -->
          <span
            class="main-top-index-amount"
            :class="item.data.changePercent >= 0 ? 'positive' : 'negative'"
          >
            {{ (item.data.changePercent).toFixed(2) }}%
          </span>
        </template>
      </template>
    </div>

    <!-- 其余部分保持不变 -->
    ...
  </div>
</template>

<style scoped>
/* 新增欢迎部分样式 */
.welcome-section {
  padding: 24px;
  margin-bottom: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.welcome-title {
  font-size: 24px;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 12px;
}

.welcome-content {
  font-size: 15px;
  line-height: 1.6;
  color: #4b5563;
}

.welcome-content p {
  margin-bottom: 8px;
}

.welcome-content p:last-child {
  margin-bottom: 0;
}

/* 原有样式保持不变 */
.positive {
  color: #ef4444;
}
...
</style>

主要修改点：