错题解析

src/router/index.js

@@ -52,6 +52,14 @@ const router = createRouter({
       },
       component: () => import('../views/parents/errorLists/index.vue'),
     },
+    {
+      path: '/parents/analyze',
+      name: 'analyze',
+      meta: {
+        title: '错题解析',
+      },
+      component: () => import('../views/parents/analyze/index.vue'),
+    },
   ],
 })
 

src/styles/index.scss

@@ -5,7 +5,7 @@ body {
 }
 
 * {
-  box-sizing: border-box;
+  box-sizing: content-box;
 }
 
 .hr {

src/views/parents/analyze/index.vue

+<template>
+    <div class="main">
+        <div class="items">
+            <div class="item">
+                <div class="q">（选择题）问题问题问题问题问题问题问题问题问题问题问题问题（ ） </div>
+                <div class="res">
+                    <div class="line">
+                        <div class="icon i1">A</div>答案一
+                    </div>
+                    <div class="line">
+                        <div class="icon i2">B</div>答案一
+                    </div>
+                    <div class="line">
+                        <div class="icon">C</div>答案一
+                    </div>
+                    <div class="line">
+                        <div class="icon">D</div>答案一
+                    </div>
+                </div>
+            </div>
+            <div class="item">
+                <div class="tip">解析</div>
+                <div class="text">解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容
+
+                    解析内容解析内容解析内容解析内容
+
+                    解析内容解析内容解析内容解析内容解析内容
+                </div>
+                <div class="tip">考点</div>
+                <div class="text">解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容解析内容
+
+                    解析内容解析内容解析内容解析内容
+
+                    解析内容解析内容解析内容解析内容解析内容
+                </div>
+                <div class="tip">难度 <span class="level1">难</span></div>
+            </div>
+        </div>
+    </div>
+</template>
+<script setup lang="ts"></script>
+<style lang="scss" scoped>
+.main {
+    padding: 20px 10px;
+
+    .items {
+        .item {
+            background: #fff;
+            border-radius: 10px;
+            margin-bottom: 10px;
+            padding: 20px 10px;
+            box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
+
+            .q {
+                font-size: 15px;
+                line-height: 1.4;
+                margin-bottom: 10px;
+            }
+
+            .res {
+                .line {
+                    font-size: 16px;
+                    margin-bottom: 10px;
+                    line-height: 25px;
+
+                    .icon {
+                        display: inline-block;
+                        text-align: center;
+                        width: 35px;
+                        line-height: 35px;
+                        border: 1px solid #BBBBBB;
+                        border-radius: 50%;
+                        font-size: 16px;
+                        margin-right: 10px;
+
+                        &.i1 {
+                            background: #8ede9f;
+                            color: #fff;
+                            border-color: #8ede9f;
+                        }
+
+                        &.i2 {
+                            background: #FF0909;
+                            color: #fff;
+                            border-color: #FF0909;
+                        }
+                    }
+                }
+            }
+
+            .tip {
+                position: relative;
+                padding-left: 15px;
+                font-size: 16px;
+                line-height: 25px;
+
+                .level1 {
+                    display: inline-block;
+                    line-height: 20px;
+                    border-radius: 4px;
+                    background-color: rgba(251, 227, 233, 1);
+                    color: rgba(194, 39, 83, 1);
+                    font-size: 12px;
+                    padding: 0 15px;
+                    vertical-align: middle;
+                    margin-left: 10px;
+                }
+
+                &::before {
+                    content: '';
+                    position: absolute;
+                    left: 0;
+                    top: 5px;
+                    width: 6px;
+                    height: 15px;
+                    background: #4FBBB2;
+                    border-radius: 4px;
+                }
+            }
+
+            .text {
+                font-size: 14px;
+                line-height: 1.6;
+                margin-bottom: 10px;
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file