frontend/src/components/DecisionAfter.vue

<template>
    <div id="decision-list-app">
      <!-- 左侧导航栏 -->
      <aside class="sidebar">
        <input type="text" placeholder="Search" class="search-bar" />
        <div class="status-filters">
          <div class="filter-item active">Decisions <span>15</span></div>
          <div class="filter-item">On-going <span>5</span></div>
          <div class="filter-item">Finished <span>8</span></div>
          <div class="filter-item">Suspend <span>2</span></div>
        </div>
        <div class="category">
          <h3>Category</h3>
          <div class="category-item">Untitled <span>5</span></div>
          <div class="category-item">Business <span>3</span></div>
          <div class="category-item">Study <span>6</span></div>
          <div class="category-item">Entertainment <span>1</span></div>
          <button class="add-category">+</button>
        </div>
        <div class="filter">
          <h3>Filter</h3>
          <div class="filter-item active">Starred</div>
        </div>
      </aside>
  
      <!-- 主体内容 -->
      <main class="main-content">
        <div class="decision-cards">
          <!-- 决策卡片示例 -->
          <div class="decision-card" v-for="(decision, index) in decisions" :key="index" @click="goToSurfacePro816">
            <div class="card-header">
              <h2>{{ decision.title }}</h2>
              <span v-if="decision.starred" class="star-icon">⭐</span>
            </div>
            <div class="key-notes">
              <h3>Key Notes</h3>
              <div v-for="(note, key) in decision.keyNotes" :key="key" class="key-note">
                <span>{{ key }}</span>
                <div class="progress-bar">
                  <div class="progress" :style="{ width: note + '%' }"></div>
                </div>
                <span class="value">{{ note }}%</span>
              </div>
            </div>
            <div class="analysis">
              <h3>Analysis</h3>
              <p>{{ decision.analysis }}</p>
            </div>
            <div class="card-footer">
              <span class="update-info">Update: {{ decision.updateTime }}</span>
              <span class="category-label" :style="{ backgroundColor: decision.categoryColor }">
                {{ decision.category }}
              </span>
            </div>
          </div>
        </div>
        <!-- 添加按钮 -->
        <button class="add-btn" @click="goToChatInterface">+</button>
      </main>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        // 决策数据
        decisions: [
          {
            title: "Intern Selection",
            keyNotes: { Tiktok: 91, Tencent: 84 },
            analysis:
              "Choose TikTok for creativity and global exposure; pick Tencent for diverse platforms and strong influence in China's tech ecosystem, ideal for networking and innovation opportunities.",
            category: "Business",
            categoryColor: "#4CAF50",
            starred: true,
          },
          {
            title: "School Selection",
            keyNotes: { Stanford: 81, Harvard: 68, MIT: 89 },
            analysis:
              "MIT leads with innovation and top facilities, Stanford excels in research, while Harvard scores lower likely due to metrics favoring STEM over humanities.",
            updateTime: "2024/11/18 22:21",
            category: "Study",
            categoryColor: "#8BC34A",
            starred: false,
          },
          {
            title: "Take GRE Test or Not?",
            keyNotes: { Yes: 71, No: 89 },
            analysis:
              "Skip the GRE if your target schools waive it, or value work experience more. It saves time, cost, and focuses on relevant strengths.",
            updateTime: "2024/11/18 22:21",
            category: "Untitled",
            categoryColor: "#9E9E9E",
            starred: true,
          },
          // 其他卡片数据...
        ],
      };
    },
    methods: {
      goToChatInterface() {
        this.$router.push('/chat-interface'); // 跳转到 chatinterface 页面
      },
      goToSurfacePro816() {
      // 使用路由跳转到 SurfacePro816 页面
      this.$router.push({ name: 'surface-pro-816' });
    },
    },
  };
  </script>
  
  <style scoped>
  /* 全局设置 */
  body {
    margin: 0;
    font-family: Arial, sans-serif;
    box-sizing: border-box;
  }
  
  /* 左侧导航栏 */
  .sidebar {
    width: 250px;
    height: 100vh;
    background: #f4f4f4;
    padding: 20px;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
  }
  
  .search-bar {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
  }
  
  .status-filters,
  .category,
  .filter {
    margin-bottom: 30px;
  }
  
  .filter-item,
  .category-item {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    margin-bottom: 5px;
    border-radius: 5px;
    cursor: pointer;
  }
  
  .filter-item.active,
  .category-item:hover {
    background: #e0f7fa;
  }
  
  .add-category {
    background: #4caf50;
    color: white;
    border: none;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
  }
  
  /* 主体内容 */
  /* 在右下角添加按钮 */
  .add-btn {
  position: fixed; /* 固定定位 */
  bottom: 60px;    /* 距离底部20px */
  right: 60px;     /* 距离右侧20px */
  background-color: #4CAF50; /* 按钮背景色 */
  color: white;    /* 按钮文字颜色 */
  border: none;    /* 无边框 */
  border-radius: 50%; /* 圆形按钮 */
  padding: 20px;    /* 按钮大小 */
  font-size: 24px;  /* 图标大小 */
  cursor: pointer; /* 鼠标悬浮时变为指针 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 给按钮加阴影 */
  width: 60px; /* 给按钮设置固定宽度 */
  height: 60px; /* 给按钮设置固定高度 */
  display: flex; /* 使用flex布局 */
  justify-content: center; /* 横向居中 */
  align-items: center; /* 纵向居中 */
}

/* 添加按钮的 hover 效果 */
.add-btn:hover {
  background-color: #45a049; /* 鼠标悬浮时的背景色 */
}

/* 确保加号图标是白色 */
.add-btn i {
  color: white;  /* 设置加号图标为白色 */
  font-size: 3rem; /* 如果需要，可以调整图标大小 */
}

  
  
  
  .main-content {
    flex-grow: 1; /* 占据剩余的宽度 */
    padding: 20px;
    overflow-y: auto;
  }
  
  /* 卡片布局 */
  .decision-cards {
    display: grid; /* 使用 grid 布局 */
    grid-template-columns: repeat(3, 1fr); /* 每行 3 个卡片 */
    gap: 20px; /* 卡片之间的间距 */
    position: absolute; /* 绝对定位 */
    margin-left: 300px; 
    top: 20px;  /* 距离顶部 20px */
    width: 100%;
    max-width: 900px; /* 容器最大宽度 */
  }
  .decision-card {
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 20px;
  }
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .key-notes .key-note {
    display: flex;
    align-items: center;
    margin: 10px 0;
  }
  
  .progress-bar {
    width: 60%;
    height: 8px;
    background: #ddd;
    border-radius: 5px;
    margin: 0 10px;
  }
  
  .progress {
    height: 100%;
    background: #4caf50;
    border-radius: 5px;
  }
  
  .card-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    font-size: 12px;
  }
  
  .category-label {
    padding: 5px 10px;
    border-radius: 5px;
    color: white;
    font-size: 12px;
  }
  
  .new-dialog-btn i {
    color: white;
    font-size: 24px;
  }
  </style>