From 21b92f6ddbd95c123583ae048ccdc75047c6a8ba Mon Sep 17 00:00:00 2001
From: Guarp <guarp2022@163.com>
Date: Tue, 4 Mar 2025 19:02:35 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B5=8B=E8=AF=95=E5=8D=9A=E5=AE=A2=E4=B8=8A?=
 =?UTF-8?q?=E4=BC=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/styles/fonts.css                   |  4 +-
 src/components/GeneralRenderer.vue            |  2 +-
 src/pages/About.vue                           |  1 +
 src/pages/Blog_home.vue                       |  1 +
 src/pages/Demos_home.vue                      |  1 +
 src/pages/Editor.vue                          | 53 +++++++++-
 src/pages/Home.vue                            | 99 ++++++++++++-------
 src/pages/Tools_home.vue                      |  1 +
 src/pages/accountPages/Account_draft.vue      | 10 +-
 .../accountPages/Account_worksmanage.vue      | 16 +--
 .../demoPages/messageBoard/Board_page.vue     |  5 +-
 src/pages/demoPages/podExercise/Quiz.vue      | 45 ++++++---
 src/pages/errorPages/notFound.vue             | 14 +++
 src/router/index.js                           | 43 ++++++--
 src/style.css                                 | 15 +++
 15 files changed, 228 insertions(+), 82 deletions(-)
 create mode 100644 src/pages/errorPages/notFound.vue

diff --git a/src/assets/styles/fonts.css b/src/assets/styles/fonts.css
index 4148d75..dc337b1 100644
--- a/src/assets/styles/fonts.css
+++ b/src/assets/styles/fonts.css
@@ -1,13 +1,13 @@
 @font-face {
     font-family: 'Netron';
-    src: url('/public/fonts/Netron.ttf') format('truetype');
+    src: url('/fonts/Netron.ttf') format('truetype');
     font-weight: normal;
     font-style: normal;
     font-display: swap;
 }
 @font-face {
     font-family: 'huangkaihua';
-    src: url('/public/fonts/huangkaihuaLawyerfont-2.ttf') format('truetype');
+    src: url('/fonts/huangkaihuaLawyerfont-2.ttf') format('truetype');
     font-weight: normal;
     font-style: normal;
     font-display: swap;
diff --git a/src/components/GeneralRenderer.vue b/src/components/GeneralRenderer.vue
index 74e688d..87eb65c 100644
--- a/src/components/GeneralRenderer.vue
+++ b/src/components/GeneralRenderer.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script setup>
-import { ref, watch, onMounted, nextTick, defineProps } from 'vue';
+import { ref, watch, onMounted, nextTick } from 'vue';
 import { marked } from "marked";
 
 // 定义外部传入的 prop `contentInput`
diff --git a/src/pages/About.vue b/src/pages/About.vue
index 8c5fd75..2b7b110 100644
--- a/src/pages/About.vue
+++ b/src/pages/About.vue
@@ -61,6 +61,7 @@ onMounted(async () => {
   display: flex;
   flex-direction: column;
   align-items: center;
+  justify-content: flex-start;
   width: 100%;
   height: calc(100vh - 60px);
   overflow-y: auto;
diff --git a/src/pages/Blog_home.vue b/src/pages/Blog_home.vue
index 40dad2d..77385f6 100644
--- a/src/pages/Blog_home.vue
+++ b/src/pages/Blog_home.vue
@@ -154,6 +154,7 @@ const filterBlogs = () => {
   overflow-x: hidden;
   display: flex;
   flex-direction: column;
+  justify-content: flex-start;
   align-items: center;
   padding: 20px;
   //margin-top: 70px;
diff --git a/src/pages/Demos_home.vue b/src/pages/Demos_home.vue
index 5609772..dfbd1be 100644
--- a/src/pages/Demos_home.vue
+++ b/src/pages/Demos_home.vue
@@ -95,6 +95,7 @@ const filterDemos = () => {
   overflow-y: auto;
   overflow-x: hidden;
   display: flex;
+  justify-content: flex-start;
   flex-direction: column;
   align-items: center;
   padding: 20px 0;
diff --git a/src/pages/Editor.vue b/src/pages/Editor.vue
index fa56d19..5be95be 100644
--- a/src/pages/Editor.vue
+++ b/src/pages/Editor.vue
@@ -5,6 +5,8 @@ import {onMounted, onUnmounted, ref, watch} from "vue";
 import store from "../store/index.js";
 import swal from "../utils/sweetalert.js";
 import getCurrentTime from "../utils/getCurrentTime.js";
+import Swal from "sweetalert2";
+import api from "../utils/axios.js";
 
 const contentInput = ref(store.state.editStore.blog || '');
 const titleInput = ref(store.state.editStore.blogTitle || '')
@@ -73,6 +75,55 @@ const handleKeydown = (event) => {
   }
 };
 
+const submitDocument = async () => {
+  if (!titleInput.value) {
+    swal.tip('info', '标题为必填项');
+    return;
+  }
+  if (!contentInput.value) {
+    swal.tip('info', '内容为必填项');
+    return;
+  }
+  store.commit('saveEdit', {
+    blog: contentInput.value,
+    blogTitle: titleInput.value,
+    blogSaveTime: getCurrentTime()
+  });
+  const result = await Swal.fire({
+    title: '是否允许评论',
+    html:
+        '<label class="swal2-switch checkbox-label">' +
+        '<input type="checkbox" id="swal-switch" class="swal2-switch-input">' ,
+    showCancelButton: true,
+    confirmButtonText: '提交',
+    cancelButtonText: '取消',
+  })
+  if (result.isConfirmed) {
+    const isChecked = document.getElementById('swal-switch').checked;
+    const formData = new FormData();
+    formData.append('title', titleInput.value);
+    formData.append('content', contentInput.value);
+    formData.append('allowComments', isChecked);
+    store.commit('startLoading');
+    api.post('/blogs', formData, {
+      headers: {
+        'Content-Type': 'multipart/form-data', // 确保设置正确的 Content-Type
+      },
+    }).then(result => {
+      if (result.code === 1) {
+        swal.tip('success', `提交成功！id${ ('为'+ result.blogId) || '读取失败...' }`);
+        store.commit('stopLoading');
+        return;
+      }
+      swal.tip('error', `错误（其他状态码 ${result.code}`)
+      store.commit('stopLoading');
+    }).catch(result => {
+      swal.tip('error', `错误 请求失败 ${result.code}`)
+      store.commit('stopLoading');
+    })
+  }
+}
+
 watch(portMode, async () => {
   setTimeout(() => {
     contentInput.value = contentInput.value + ' ';
@@ -148,7 +199,7 @@ onUnmounted(() => {
       </div>
       <div class="doc-btn">
         <button @click="saveDocument">保存</button>
-        <button>提交</button>
+        <button @click="submitDocument">提交</button>
       </div>
     </div>
     <div class="middle">
diff --git a/src/pages/Home.vue b/src/pages/Home.vue
index 042ead9..0860118 100644
--- a/src/pages/Home.vue
+++ b/src/pages/Home.vue
@@ -3,50 +3,79 @@
 </script>
 
 <template>
-  <div class="container-pig">
-    <img alt="猪图" src="https://q6.itc.cn/images01/20241006/86f4aab7fded4c2283842e79f7e6eda3.jpeg"/>
-    <h1>6A级金牌养猪基地 2010测试</h1>
+  <div class="container">
+    <div class="container-home">
+      <header class="header">Header</header>
+      <aside class="sidebar">Sidebar</aside>
+      <main class="main-content">Main Content</main>
+    </div>
   </div>
+
 </template>
 
-<style>
-.container-pig {
+<style scoped>
+.container {
   display: flex;
-  align-items: center;
+  width: 100%;
+  height: 100%;
   flex-direction: column;
-  margin: 0;
-  width: 100%;
-  height: 100%;
+  justify-content: center;
+  justify-items: center;
 }
-.container-pig img {
-  position:absolute ;
-  bottom: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-.container-pig h1 {
-  z-index: 19;
-  font-family: 'huangkaihua', Tahoma, Geneva, Verdana, sans-serif;
-  font-size: 80px;
-  //font-weight: bold;
-  animation: flashColors 0.5s infinite;
+/* 设置grid布局 */
+.container-home {
+  display: grid;
+  grid-template-columns: 1fr 3fr; /* 默认2列，侧边栏占1份，内容区占3份 */
+  grid-template-rows: auto 1fr; /* 头部行高度自适应，内容行占满剩余空间 */
+  grid-template-areas:
+    "header header"
+    "sidebar main-content";
+  gap: 20px; /* 设置行列间距 */
+  align-content: center;
+  width: 50rem;
+  height: 65vh; /* 使容器高度为视口高度 */
+  margin-bottom: 80px;
 }
 
-@keyframes flashColors {
-  0% {
-    color: red;
+/* 设置头部 */
+.header {
+  grid-area: header;
+  background-color: #4CAF50;
+  color: white;
+  padding: 20px;
+  text-align: center;
+}
+
+/* 设置侧边栏 */
+.sidebar {
+  grid-area: sidebar;
+  background-color: #f4f4f4;
+  padding: 20px;
+  border-right: 2px solid #ccc;
+}
+
+/* 设置内容区域 */
+.main-content {
+  grid-area: main-content;
+  background-color: #ffffff;
+  padding: 20px;
+  border-left: 2px solid #ccc;
+}
+
+/* 响应式设计：小屏幕时，侧边栏会变为顶部 */
+@media (max-width: 768px) {
+  .container {
+    grid-template-columns: 1fr; /* 变成单列布局 */
+    grid-template-areas:
+      "header"
+      "sidebar"
+      "main-content"; /* 侧边栏在头部下面 */
   }
-  49.9% {
-    color: red;
-  }
-  50% {
-    color: yellow;
-  }99.9% {
-     color: yellow;
-   }
-  100% {
-    color: red;
+
+  .sidebar {
+    border-right: none; /* 去掉侧边栏的右边框 */
+    border-bottom: 2px solid #ccc; /* 小屏幕时侧边栏的底部有个边框 */
   }
 }
+
 </style>
\ No newline at end of file
diff --git a/src/pages/Tools_home.vue b/src/pages/Tools_home.vue
index f420f51..0f0e614 100644
--- a/src/pages/Tools_home.vue
+++ b/src/pages/Tools_home.vue
@@ -69,6 +69,7 @@ const filterTools = () => {
   overflow-y: auto;
   overflow-x: hidden;
   display: flex;
+  justify-content: flex-start;
   flex-direction: column;
   align-items: center;
   padding: 20px 0;
diff --git a/src/pages/accountPages/Account_draft.vue b/src/pages/accountPages/Account_draft.vue
index f6712f1..65489fb 100644
--- a/src/pages/accountPages/Account_draft.vue
+++ b/src/pages/accountPages/Account_draft.vue
@@ -1,20 +1,14 @@
 <script setup>
 import { ref } from 'vue'
 import AccountWorkPiece from "../../components/AccountWorkPiece.vue";
+import router from "../../router/index.js";
 
 // 示例：草稿数据
 const drafts = ref([
-  {
-    cover: 'https://img1.baidu.com/it/u=427213910,646438716&fm=253',
-    title: '打破传统界限：家猪饲养与繁殖的创新模式',
-    createdTime: '2077-01-01 11:45',
-    lastModifiedTime: '2077-01-02 09:19'
-  }
 ])
 
 function createNewDraft() {
-  console.log('新建博客草稿')
-  // 在此处执行新建草稿逻辑
+  router.push('/editor')
 }
 </script>
 
diff --git a/src/pages/accountPages/Account_worksmanage.vue b/src/pages/accountPages/Account_worksmanage.vue
index 9a46070..674c02f 100644
--- a/src/pages/accountPages/Account_worksmanage.vue
+++ b/src/pages/accountPages/Account_worksmanage.vue
@@ -1,24 +1,14 @@
 <script setup>
 import { ref } from 'vue'
 import AccountWorkPiece from "../../components/AccountWorkPiece.vue";
+import router from "../../router/index.js";
 
 const works = ref([
-  {
-    cover: 'https://img1.baidu.com/it/u=427213910,646438716&fm=253',
-    title: '现代化家猪饲养技术：从饲料到环境的全方位提升',
-    createdTime: '2077-01-01 11:45',
-    lastModifiedTime: '2077-01-02 09:19'
-  },
-  {
-    cover: 'https://img1.baidu.com/it/u=427213910,646438716&fm=253',
-    title: '家猪繁殖管理的艺术：提高生育率与健康水平',
-    createdTime: '2077-01-01 11:45',
-    lastModifiedTime: '2077-01-02 09:19'
-  }
+
 ])
 
 function createNewBlog() {
-  console.log('新建博客')
+  router.push('/editor')
 }
 </script>
 
diff --git a/src/pages/demoPages/messageBoard/Board_page.vue b/src/pages/demoPages/messageBoard/Board_page.vue
index 4bc7f8c..9d8eaaa 100644
--- a/src/pages/demoPages/messageBoard/Board_page.vue
+++ b/src/pages/demoPages/messageBoard/Board_page.vue
@@ -186,10 +186,11 @@ onBeforeUnmount(() => {
   display: flex;
   flex-direction: column;
   gap: 20px;
-  width: calc(80%);
+  width: calc(100% - 60px);
+  max-width: 1000px;
+  margin: 0 auto 120px;
   height: auto;
   padding: 20px;
-  margin: 0 auto 150px;
   border-radius: 15px;
   background: rgba(128, 128, 128, 0.06);
   border: cyan solid 1px;
diff --git a/src/pages/demoPages/podExercise/Quiz.vue b/src/pages/demoPages/podExercise/Quiz.vue
index bb9f540..a8b6085 100644
--- a/src/pages/demoPages/podExercise/Quiz.vue
+++ b/src/pages/demoPages/podExercise/Quiz.vue
@@ -1,15 +1,16 @@
 <template>
-  <div class="quiz-container">
+  <div class="quiz-container" ref="containerRef">
     <!-- 加载中提示 -->
     <div v-if="isLoading" class="loading">加载中...</div>
 
     <!-- 当前题目 -->
     <div v-else-if="currentQuestion" class="question-container">
       <h2>题目 {{ questionCount }}</h2>
-      <QuestionText :text="currentQuestion.text" :medias="data.medias" />
+      <QuestionText :text="currentQuestion.text" :medias="data.medias"/>
       <div class="options">
         <div v-for="(answer, idx) in currentQuestion.answers.slice(1)" :key="idx" class="option">
-          <label :class="{ 'correct': submitted && idx === correctIndex, 'incorrect': submitted && userAnswer === idx && idx !== correctIndex }">
+          <label
+              :class="{ 'correct': submitted && idx === correctIndex, 'incorrect': submitted && userAnswer === idx && idx !== correctIndex }">
             <input
                 type="radio"
                 :value="idx"
@@ -30,7 +31,9 @@
       <div v-if="submitted" class="result">
         <p v-if="isCorrect" class="correct-text">答对了！</p>
         <p v-else class="incorrect-text">答错了。</p>
-        <p>正确答案是：<general-renderer :content-input="processMedia(correctAnswerText, data.medias)"></general-renderer></p>
+        <p>正确答案是：
+          <general-renderer :content-input="processMedia(correctAnswerText, data.medias)"></general-renderer>
+        </p>
         <div v-if="currentQuestion.explanation" class="explanation">
           <h3>解题思路</h3>
           <general-renderer :content-input="processMedia(currentQuestion.explanation, data.medias)"></general-renderer>
@@ -41,8 +44,10 @@
           <h3>对比其他类似题目</h3>
           <div v-for="(similar, index) in similarQuestions" :key="index" class="similar-question">
             <h4>题目 {{ index + 1 }}</h4>
-            <QuestionText :text="similar.text" :medias="data.medias" />
-            <p>正确答案：<general-renderer :content-input="processMedia(similar.correctAnswer, data.medias)"></general-renderer></p>
+            <QuestionText :text="similar.text" :medias="data.medias"/>
+            <p>正确答案：
+              <general-renderer :content-input="processMedia(similar.correctAnswer, data.medias)"></general-renderer>
+            </p>
           </div>
         </div>
       </div>
@@ -51,8 +56,8 @@
     <!-- 进度条 -->
     <div v-if="!isLoading" class="progress-bar">
       <div v-if="progressPercentage"
-          class="progress"
-          :style="{
+           class="progress"
+           :style="{
           width: `${progressPercentage}%`,
           background: getColor(progressPercentage)
         }"
@@ -68,8 +73,9 @@ import {reactive, ref, onMounted, computed, onUpdated} from 'vue';
 import axios from 'axios';
 import QuestionText from './QuestionText.vue';
 import GeneralRenderer from "../../../components/GeneralRenderer.vue";
-import { useRoute } from 'vue-router'
+import {useRoute} from 'vue-router'
 import swal from "../../../utils/sweetalert.js";
+import router from "../../../router/index.js";
 
 const route = useRoute()
 
@@ -85,6 +91,7 @@ const data = reactive({
 });
 
 // 当前题目、用户答案、状态变量
+const containerRef = ref(null);
 const currentQuestion = ref(null);
 const userAnswer = ref(null);
 const submitted = ref(false);
@@ -107,7 +114,7 @@ const progressPercentage = computed(() => {
   return (correctCount / Math.min(recentResults.value.length, totalQuestions.value)) * 100;
 });
 
-const initial = async  () => {
+const initial = async () => {
   const file = route.query.id || 'phy250226';
   try {
     const response = await axios.get(`https://mva-cyber.club/data/file/${file}.json`);
@@ -117,6 +124,7 @@ const initial = async  () => {
   } catch (error) {
     console.error('加载数据失败:', error);
     swal.tip('error', '数据加载失败，请稍后重试。')
+    await router.push('/demos/pod');
   } finally {
     isLoading.value = false;
   }
@@ -136,6 +144,7 @@ function getColor(progressPercentage) {
   // 返回rgb颜色格式
   return `rgb(${r}, ${g}, ${b})`;
 }
+
 // 随机选择一道题
 function selectRandomQuestion() {
   if (data.texts.length <= 1) return;
@@ -167,6 +176,7 @@ function processMedia(text, medias) {
     return '';
   });
 }
+
 function calculateStringSimilarity(str1, str2) {
   // 处理空字符串或非字符串输入
   if (typeof str1 !== 'string' || typeof str2 !== 'string') {
@@ -220,12 +230,13 @@ function calculateStringSimilarity(str1, str2) {
   // 返回保留两位小数的百分比
   return Number(similarity.toFixed(2));
 }
+
 // 生成新试卷
 function generateNewExam() {
   if (data.texts.length <= 1) return;
 
   // 创建所有题目的索引数组并打乱顺序
-  const indices = Array.from({ length: data.texts.length - 1 }, (_, i) => i + 1);
+  const indices = Array.from({length: data.texts.length - 1}, (_, i) => i + 1);
   for (let i = indices.length - 1; i > 0; i--) {
     const j = Math.floor(Math.random() * (i + 1));
     [indices[i], indices[j]] = [indices[j], indices[i]];
@@ -245,6 +256,7 @@ function generateNewExam() {
   recentResults.value = [];
   selectCurrentQuestion();
 }
+
 // 查找类似题目
 function findSimilarQuestions() {
   const currentText = currentQuestion.value.text;
@@ -264,6 +276,7 @@ function findSimilarQuestions() {
   }
   similarQuestions.value = similar;
 }
+
 function selectCurrentQuestion() {
   if (questionCount.value <= totalQuestions.value) {
     currentQuestion.value = examQuestions.value[questionCount.value - 1];
@@ -272,6 +285,7 @@ function selectCurrentQuestion() {
     similarQuestions.value = [];
   }
 }
+
 // 提交答案
 function submitAnswer() {
   if (userAnswer.value === null) {
@@ -280,6 +294,11 @@ function submitAnswer() {
   }
   correctIndex.value = currentQuestion.value.answerkeys.findIndex((key, idx) => idx > 0 && key === 1) - 1;
   isCorrect.value = userAnswer.value === correctIndex.value;
+  containerRef.value.style.border = `
+    ${isCorrect.value ? '#00c800' : '#c80000'} solid 5px`;
+  setTimeout(() => {
+    containerRef.value.style.border = 'rgba(126, 126, 126, 0) solid 5px';
+  }, 1000)
   correctAnswerText.value = currentQuestion.value.answers[correctIndex.value + 1];
   submitted.value = true;
 
@@ -311,10 +330,10 @@ function nextQuestion() {
   flex-direction: column;
   align-items: center;
   justify-content: flex-start;
-  width: calc(100% - 40px);
+  width: calc(100% - 49px);
   //max-width: 800px;
   margin: auto;
-  height: calc(100vh - 120px);
+  height: calc(100vh - 109px);
   overflow-y: auto;
   padding: 20px;
   font-family: Arial, sans-serif;
diff --git a/src/pages/errorPages/notFound.vue b/src/pages/errorPages/notFound.vue
new file mode 100644
index 0000000..8148262
--- /dev/null
+++ b/src/pages/errorPages/notFound.vue
@@ -0,0 +1,14 @@
+<script setup>
+
+</script>
+
+<template>
+<h1>404 Not Found</h1>
+  <h4>你来到了未知领域</h4>
+</template>
+
+<style scoped>
+h1,h2 {
+  text-align: center;
+}
+</style>
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index cc51b22..efeeb45 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -21,33 +21,48 @@ import Tools_home from "../pages/Tools_home.vue";
 import GpaCalculator_page from "../pages/toolPages/gpaCalculator/gpaCalculator_page.vue";
 import About from "../pages/About.vue";
 import Editor from "../pages/Editor.vue";
+import NotFound from "../pages/errorPages/notFound.vue";
 
 const routes = [
-    {
+    {path: '/404',
+        name: '404',
+        component: NotFound,
+        meta: {title: '404'}
+    }, {
         path: '/',
         name: 'Home',
         component: Home,
+        meta: {title: '首页'}
     }, {
         path: '/login',
         name: 'Login',
-        component: Login
+        component: Login,
+        meta: {title: '登录'}
     }, {
         path: '/blog',
         name: 'Blog',
-        component: Blog_home
+        component: Blog_home,
+        meta: {title: '博客'}
     }, {
         path: '/projects',
         name: 'Projects',
-        component: Projects
+        component: Projects,
+        meta: {title: '项目'}
     }, {
         path: '/demos',
         name: 'Demos',
         component: Demos_home,
+        meta: {title: '实例'},
         children: [
-            {path: "board", component: Board_page},
+            {
+                path: "board",
+                component: Board_page,
+                meta: {title: '留言板'},
+            },
             {
                 path: "pod",
                 component: Pod_page,
+                meta: {title: '做题'},
                 children: [
                     {path: "quiz", component: Pod_quiz}
                 ]
@@ -57,6 +72,7 @@ const routes = [
         path: '/tools',
         name: 'Tools',
         component: Tools_home,
+        meta: {title: '小工具'},
         children: [
             {path: "1", component: GpaCalculator_page},
             {path: "gpa", component: GpaCalculator_page},
@@ -64,10 +80,12 @@ const routes = [
     }, {
         path: '/about',
         name: 'About',
-        component: About
+        component: About,
+        meta: {title: '关于'},
     }, {
         path: '/account',
         component: Account,
+        meta: {title: '账户'},
         children: [
             {path: 'self-page', component: Account_selfpage},
             {path: 'works-manage', component: Account_worksmanage},
@@ -80,7 +98,8 @@ const routes = [
     }, {
         path: '/editor',
         name: 'Editor',
-        component: Editor
+        component: Editor,
+        meta: {title: '编辑器'},
     },
 ];
 
@@ -105,6 +124,16 @@ router.beforeEach((to, from, next) => {
     if (to.path === '/account/user-management' && !store.getters.isAdmin) {
         next('/account');
     }
+
+    if (to.matched.length === 0) {
+        next('/404');
+    }
+
+    const title = to.meta?.title;
+    if (title) {
+        document.title = title + ' CYBER'; // 设置页面标题
+    }
+
     next();
 });
 
diff --git a/src/style.css b/src/style.css
index 82852cd..c01c63f 100644
--- a/src/style.css
+++ b/src/style.css
@@ -74,6 +74,21 @@ code {
   }
 }
 
+.checkbox-label input {
+  width: 20px;
+  height: 20px;
+  accent-color: #007bff;
+  transition: transform 0.2s ease;
+}
+
+.checkbox-label input:checked {
+  transform: scale(1.2);
+}
+.theme-light .checkbox-label input {
+  accent-color: #ffb74d;
+  border: 2px solid #ddd;
+}
+
 /*::-webkit-scrollbar {*/
 /*  display: none;*/
 /*}*/