11.6

吴光慧学习笔记/hello_vue3/src/App.vue

@@ -1,10 +1,9 @@
 <template>
-  <Count/>
-  <br>
-  <LoveTalk/>
+  <GuPiao/>
 </template>
 
 <script setup lang="ts" name="App">
   import Count from './components/Count.vue'
   import LoveTalk from './components/LoveTalk.vue'
+  import GuPiao from './components/GuPiao.vue';
 </script>

吴光慧学习笔记/hello_vue3/src/components/GuPiao.vue

@@ -0,0 +1,434 @@
+<template>
+  <div class="exam-system">
+    <!-- 头部标题 -->
+    <header class="header">
+      <div class="logo">
+        <span class="icon">📋</span>
+        <span class="title">股票知识评测系统</span>
+      </div>
+      <div class="subtitle">全方面评估您股票知识水平，还能个性化学习建议</div>
+    </header>
+
+    <div class="main-content">
+      <!-- 左侧题目区域 -->
+      <div class="left-panel">
+        <!-- 题目显示区 -->
+        <div class="question-area">
+          <div class="question-header">
+            <input type="text" v-model="searchText" placeholder="搜索题目..." class="search-input" />
+          </div>
+          
+          <div class="question-content">
+            <h3 class="question-title">{{ currentQuestion.title }}</h3>
+            
+            <div class="options">
+              <div 
+                v-for="option in currentQuestion.options" 
+                :key="option.key"
+                class="option-item"
+                :class="{ 'selected': selectedAnswer === option.key }"
+                @click="selectAnswer(option.key)"
+              >
+                <span class="radio-btn" :class="{ 'checked': selectedAnswer === option.key }"></span>
+                <span class="option-label">{{ option.key }}. {{ option.text }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 答题卡预览区 -->
+        <div class="answer-preview">
+          <div class="preview-content">
+            <!-- 可以显示答题进度或其他信息 -->
+          </div>
+        </div>
+
+        <!-- 底部按钮 -->
+        <div class="bottom-actions">
+          <button class="btn btn-secondary" @click="submitExam">提交</button>
+          <button class="btn btn-primary" @click="previousQuestion">← 上一题</button>
+          <button class="btn btn-primary" @click="nextQuestion">下一题 →</button>
+        </div>
+      </div>
+
+      <!-- 右侧答题卡 -->
+      <div class="right-panel">
+        <div class="answer-card">
+          <div class="card-header">
+            <span class="folder-icon">📁</span>
+            <span class="card-title">试题导航</span>
+          </div>
+          
+          <div class="card-grid">
+            <div 
+              v-for="(item, index) in totalQuestions" 
+              :key="index"
+              class="grid-item"
+              :class="getQuestionStatus(index)"
+              @click="jumpToQuestion(index)"
+            >
+              {{ index + 1 }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+// 搜索文本
+const searchText = ref('')
+
+// 当前题目索引
+const currentQuestionIndex = ref(0)
+
+// 用户答案记录
+const userAnswers = ref({})
+
+// 选中的答案
+const selectedAnswer = ref('')
+
+// 总题目数
+const totalQuestions = ref(25)
+
+// 题目数据（示例）
+const questions = ref([
+  {
+    id: 1,
+    title: '以下哪个不属于股票的基本特征？',
+    options: [
+      { key: 'A', text: '收益性' },
+      { key: 'B', text: '风险性' },
+      { key: 'C', text: '流动性' },
+      { key: 'D', text: '确定性' }
+    ]
+  },
+  {
+    id: 2,
+    title: '股票市场的主要功能是什么？',
+    options: [
+      { key: 'A', text: '资金融通' },
+      { key: 'B', text: '价格发现' },
+      { key: 'C', text: '资源配置' },
+      { key: 'D', text: '以上都是' }
+    ]
+  }
+  // 可以添加更多题目...
+])
+
+// 当前题目
+const currentQuestion = computed(() => {
+  return questions.value[currentQuestionIndex.value] || questions.value[0]
+})
+
+// 选择答案
+const selectAnswer = (answer) => {
+  selectedAnswer.value = answer
+  userAnswers.value[currentQuestionIndex.value] = answer
+}
+
+// 上一题
+const previousQuestion = () => {
+  if (currentQuestionIndex.value > 0) {
+    currentQuestionIndex.value--
+    selectedAnswer.value = userAnswers.value[currentQuestionIndex.value] || ''
+  }
+}
+
+// 下一题
+const nextQuestion = () => {
+  if (currentQuestionIndex.value < questions.value.length - 1) {
+    currentQuestionIndex.value++
+    selectedAnswer.value = userAnswers.value[currentQuestionIndex.value] || ''
+  }
+}
+
+// 跳转到指定题目
+const jumpToQuestion = (index) => {
+  currentQuestionIndex.value = index
+  selectedAnswer.value = userAnswers.value[index] || ''
+}
+
+// 获取题目状态
+const getQuestionStatus = (index) => {
+  if (index === currentQuestionIndex.value) {
+    return 'current'
+  }
+  if (userAnswers.value[index]) {
+    return 'answered'
+  }
+  return ''
+}
+
+// 提交考试
+const submitExam = () => {
+  const answeredCount = Object.keys(userAnswers.value).length
+  if (answeredCount < questions.value.length) {
+    if (confirm(`您还有 ${questions.value.length - answeredCount} 道题未作答，确定要提交吗？`)) {
+      // 提交逻辑
+      console.log('提交答案：', userAnswers.value)
+    }
+  } else {
+    // 提交逻辑
+    console.log('提交答案：', userAnswers.value)
+  }
+}
+</script>
+
+<style scoped>
+.exam-system {
+  min-height: 100vh;
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+  color: #fff;
+  font-family: 'Microsoft YaHei', Arial, sans-serif;
+}
+
+.header {
+  padding: 20px 40px;
+  background: rgba(0, 0, 0, 0.2);
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 24px;
+  font-weight: bold;
+  margin-bottom: 8px;
+}
+
+.icon {
+  font-size: 28px;
+}
+
+.subtitle {
+  color: rgba(255, 255, 255, 0.8);
+  font-size: 14px;
+  margin-left: 38px;
+}
+
+.main-content {
+  display: flex;
+  gap: 20px;
+  padding: 20px 40px;
+  max-width: 1400px;
+  margin: 0 auto;
+}
+
+.left-panel {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.question-area {
+  background: rgba(20, 40, 80, 0.6);
+  border: 1px solid rgba(100, 150, 200, 0.3);
+  border-radius: 8px;
+  padding: 20px;
+}
+
+.question-header {
+  margin-bottom: 20px;
+}
+
+.search-input {
+  width: 100%;
+  padding: 10px 15px;
+  background: rgba(0, 0, 0, 0.3);
+  border: 1px solid rgba(100, 150, 200, 0.3);
+  border-radius: 4px;
+  color: #fff;
+  font-size: 14px;
+}
+
+.search-input::placeholder {
+  color: rgba(255, 255, 255, 0.4);
+}
+
+.question-content {
+  padding: 20px 0;
+}
+
+.question-title {
+  color: rgba(255, 255, 255, 0.6);
+  font-size: 14px;
+  margin-bottom: 20px;
+  font-weight: normal;
+}
+
+.options {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.option-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 15px;
+  background: rgba(0, 0, 0, 0.2);
+  border: 1px solid rgba(100, 150, 200, 0.3);
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.option-item:hover {
+  background: rgba(100, 150, 200, 0.2);
+  border-color: rgba(100, 150, 200, 0.5);
+}
+
+.option-item.selected {
+  background: rgba(220, 80, 80, 0.3);
+  border-color: rgba(220, 80, 80, 0.6);
+}
+
+.radio-btn {
+  width: 18px;
+  height: 18px;
+  border: 2px solid rgba(255, 255, 255, 0.5);
+  border-radius: 50%;
+  display: inline-block;
+  position: relative;
+  flex-shrink: 0;
+}
+
+.radio-btn.checked {
+  border-color: #e74c3c;
+  background: #e74c3c;
+}
+
+.radio-btn.checked::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 8px;
+  height: 8px;
+  background: #fff;
+  border-radius: 50%;
+}
+
+.option-label {
+  font-size: 15px;
+}
+
+.answer-preview {
+  background: rgba(20, 40, 80, 0.6);
+  border: 1px solid rgba(100, 150, 200, 0.3);
+  border-radius: 8px;
+  padding: 20px;
+  min-height: 150px;
+}
+
+.bottom-actions {
+  display: flex;
+  gap: 15px;
+  justify-content: flex-start;
+}
+
+.btn {
+  padding: 12px 30px;
+  border: none;
+  border-radius: 4px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.3s;
+  font-weight: 500;
+}
+
+.btn-primary {
+  background: rgba(60, 120, 180, 0.8);
+  color: #fff;
+}
+
+.btn-primary:hover {
+  background: rgba(60, 120, 180, 1);
+}
+
+.btn-secondary {
+  background: rgba(60, 120, 180, 0.8);
+  color: #fff;
+}
+
+.btn-secondary:hover {
+  background: rgba(70, 130, 190, 1);
+}
+
+.right-panel {
+  width: 280px;
+  flex-shrink: 0;
+}
+
+.answer-card {
+  background: rgba(20, 40, 80, 0.6);
+  border: 1px solid rgba(100, 150, 200, 0.3);
+  border-radius: 8px;
+  padding: 20px;
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 20px;
+  padding-bottom: 15px;
+  border-bottom: 1px solid rgba(100, 150, 200, 0.2);
+}
+
+.folder-icon {
+  font-size: 20px;
+}
+
+.card-title {
+  color: #6db3f2;
+  font-size: 16px;
+}
+
+.card-grid {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 10px;
+}
+
+.grid-item {
+  aspect-ratio: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(60, 120, 180, 0.6);
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.3s;
+  font-size: 14px;
+}
+
+.grid-item:hover {
+  background: rgba(60, 120, 180, 0.8);
+  transform: scale(1.05);
+}
+
+.grid-item.current {
+  background: #3498db;
+  box-shadow: 0 0 10px rgba(52, 152, 219, 0.5);
+}
+
+.grid-item.answered {
+  background: rgba(60, 120, 180, 0.8);
+}
+
+.grid-item:nth-child(1) {
+  background: #e74c3c;
+}
+
+.grid-item:nth-child(2) {
+  background: #27ae60;
+}
+</style>