12.20

src/views/index.vue

@@ -1,20 +1,33 @@
 <template>
   <div class="app-container home">
+	   <h2>校园二手交易后台管理框架 {{ version }}</h2>
     <el-row :gutter="20">
       <el-col :sm="24" :lg="24">
+        <el-row :gutter="20">
+          <el-col :sm="24" :lg="12">
+            <div id="ring - chart - container" style="width: 100%; height: 400px;"></div>
+          </el-col>
+          <el-col :sm="24" :lg="12">
+            <el-calendar v-model="value" />
+          </el-col>
+        </el-row>
       </el-col>
     </el-row>
     <el-row :gutter="20">
       <el-col :sm="24" :lg="12" style="padding - left:20px">
-        <h2>校园二手交易后台管理框架 {{ version }}</h2> <!-- 绑定version变量 -->
+       
       </el-col>
     </el-row>
   </div>
 </template>
 
-<script setup name="Index">
+<script setup lang="ts">
 import { ref } from 'vue';
+import * as echarts from 'echarts';
+// 定义版本号变量
 const version = ref('3.8.8');
+// 定义日历控件绑定的value变量
+
 function goTarget(url) {
   window.open(url, '__blank');
 }
@@ -81,6 +94,9 @@ function goTarget(url) {
       padding-inline-start: 40px;
     }
   }
+  /* 可根据实际需求添加针对日历控件所在列的样式微调 */
+.el-col:last-child {
+    padding: 10px;
+  }
 }
 </style>
-

src/views/login.vue

@@ -180,7 +180,7 @@ getCookie();
 
 .login-form {
   border-radius: 6px;
-  background: #497aff;
+  background: #479bb9;
   width: 400px;
   padding: 25px 25px 5px 25px;
   .el-input {
@@ -196,9 +196,9 @@ getCookie();
   }
 }
 .login-tip {
-  font-size: 13px;
+  font-size: 20px;
   text-align: center;
-  color: #bfbfbf;
+  color: #9e9e9e;
 }
 .login-code {
   width: 33%;