frontend/src/components/SurfacePro816.vue

<template>

  <div id="app">

    <!-- 标题 -->

    <div class="header">

      <h1>Intern Selection</h1>

    </div>



    <!-- 关键指标 -->

    <section class="key-notes">

      <h2>Key Notes</h2>

      <div class="score-item" v-for="(item, index) in scores" :key="index">

        <div class="score-title">

          <span>{{ item.name }}</span>

          <span>{{ item.score }}</span>

        </div>

        <div class="score-bar">

          <div class="score-fill" :style="{ width: item.score + '%' }"></div>

        </div>

      </div>



      <!-- 单独的 result-text 部分 -->

      <p class="result-text"> 

        <strong>{{ result.main }}</strong> 

        {{ result.detail }} 

      </p>

    </section>



    <!-- 分析部分 -->

    <section class="analysis" v-if="decisions.length">

      <h2>Analysis</h2>

      <div v-for="(decision, index) in decisions" :key="index" class="decision-card">

        <span class="number">{{ index + 1 }}</span>

        <div class="decision-text">

          <strong>{{ decision.main }}</strong>

          {{ decision.detail }}

        </div>

      </div>

    </section>





    <!-- 按钮 -->

    <div class="footer">

      <button class="chat-button" @click="goChatting">

        Go Chatting!

      </button>

    </div>

    <div class="footer1">  

      <button class="chat-button" @click="returnList">

        Return

      </button>

    </div>

  </div>

</template>



<script>

import { defineComponent } from 'vue'



export default defineComponent({

  name: 'InternSelection',

  data() {

  return {

    scores: [

      { name: 'Tiktok', score: 91 },

      { name: 'Tencent', score: 84 },

    ],

    decisions: [

      {

        main: "Salary Comparison - 91 | 85  ",

        detail: "TikTok offers a higher salary package, including bonuses and stock options, making it more attractive financially. In contrast, Tencent's salary is competitive but slightly lower than TikTok’s, with fewer additional incentives.",

      },

      {

        main: "Location - 87 | 92  ",

        detail: "TikTok's headquarters in Singapore provides international exposure and networking opportunities, ideal for those looking to work in a global environment. Tencent’s Shenzhen office is a great option for those wanting to immerse themselves in China's tech ecosystem, though it's more localized.",

      },

      {

        main: "Company Culture - 90 |85  ",

        detail: "TikTok promotes a creative and flexible work culture, encouraging innovation and personal growth. Tencent, while still offering a solid work environment, has a more traditional, hierarchical structure that may feel restrictive for some.",

      },

      {

        main: "Work-Life Balance - 86 | 84  ",

        detail: "TikTok offers a better work-life balance with fewer demands on after-hours work, making it a more relaxed environment. Tencent is known for its high-pressure culture, with long hours and a stronger focus on performance.",

      },

      {

        main: "Career Development - 95 |80  ",

        detail: "TikTok offers faster career progression with more opportunities to move across departments and regions, giving employees more visibility. Tencent offers a solid career development path, but advancement can be slower and more dependent on internal networking.",

      }

    ],



    // 注意这里是一个对象，不是数组

    result: {

      main: 'TikTok is a better fit based on salary, location, culture, and career growth, according to your preferences and priorities. ',

      detail: 'TikTok is a better fit for those seeking a fast-paced, innovative environment with global exposure and a healthier work-life balance.'

    }

  }

},





  methods: {

    goChatting() {

      // 点击按钮返回到聊天页面

      this.$router.push('/chat-interface')

    },

    returnList() {

      // 点击按钮返回到决策列表页面

      this.$router.push({ name: 'decision-after' }); 

    },

  },

})

</script>



<style scoped>

/* 全局样式 */

body {

  font-family: Arial, sans-serif;

  margin: 0;

  padding: 0;

  box-sizing: border-box;

  background-color: #f9f9f9;

  color: #333;

}



#app {

  max-width: 900px;

  margin: 20px auto;

  padding: 20px;

  background-color: #fff;

  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

  border-radius: 10px;

}



/* 标题样式 */

.header h1 {

  font-size: 2rem;

  color: #52c8e8;

  margin-bottom: 10px;

}



/* 关键指标样式 */

.key-notes h2 {

  font-size: 1.5rem;

  margin-bottom: 15px;

}



.score-item {

  margin: 10px 0;

}



.score-title {

  display: flex;

  justify-content: space-between;

  font-size: 1rem;

  margin-bottom: 5px;

}



.score-bar {

  background-color: #ddd;

  border-radius: 10px;

  height: 10px;

  overflow: hidden;

}



.score-fill {

  background-color: #52c8e8;

  height: 100%;

}



/* 结果文字 */

.result-text {

  margin-top: 15px;

  font-size: 1rem;

}



/* 分析部分样式 */

.analysis h2 {

  margin-top: 40px;

  font-size: 1.5rem;

  margin-bottom: 15px;

}



.decision-card {

  display: flex;

  background-color: #f2f8fc;

  border-left: 4px solid #52c8e8;

  padding: 10px;

  border-radius: 5px;

  margin-bottom: 20px;

}



.decision-card .number {

  font-size: 1.5rem;

  font-weight: bold;

  margin-right: 10px;

}



.decision-text {

  font-size: 1rem;

}



.decision-card:last-child {

  margin-bottom: 100px;  /* Adjust this value for more or less space */

}

/* 按钮样式 */

.footer1 {

  position: absolute; /* 绝对定位 */

  top: 80px; /* 距离底部 20px */

  right: 0; /* 距离右侧 40px */

  text-align: center;

}



.footer1 .chat-button {

    border-radius: 30px;

    background-color: #fff;

    display: flex;

    gap: 7px;

    align-items: center;

    font-size: 20px;

    color: #42b0cf;

    font-weight: 700;

    padding: 10px 17px;

    border: 2px solid#42b0cf;

    cursor: pointer;

    margin-right: 80px;

}



.footer1 .chat-button:hover {

  background-color:#51d4e0; /* 悬停时背景色 */

}



.footer {

  position: absolute; /* 绝对定位 */

  top: 15px; /* 距离底部 20px */

  right: 0; /* 距离右侧 40px */

  text-align: center;

}



.footer .chat-button {

    border-radius: 30px;

    background-color: #fff;

    display: flex;

    gap: 7px;

    align-items: center;

    font-size: 20px;

    color: #42b0cf;

    font-weight: 700;

    padding: 10px 17px;

    border: 2px solid#42b0cf;

    cursor: pointer;

    margin-right: 80px;

}



.footer .chat-button:hover {

  background-color:#51d4e0; /* 悬停时背景色 */

}



</style>