修改主页

public/blog/src/css/main.css

@@ -0,0 +1,58 @@
+/* css页面蓝图 */
+
+/* 外部背景 */
+html, body {
+    height: 100%;
+    width: 100%;
+    margin: 0;   /*外边框*/
+    padding: 0;  /*内边框*/
+    overflow: hidden;  /* 防止滚动条 */
+    background-color: #333;  /* 背景颜色 */
+}
+
+/* 内部容器 */
+#app-canvas {
+    width: 1280px; 
+    height: 800px;
+
+    background-color: rgba(147, 185, 255, 0.644);
+    border: 5px solid #0056b3;  /* 定义边框 5px 实线 蓝色 */
+    /* transform-origin: 0 0;   /* 定义缩放起点 左上角 */
+
+    position:fixed; /* 固定页面，不滚动 */
+    left: 50%;       /* 调整左边缘位置到中央 */
+    top: 50%;        /* 调整上边缘位置到中央 */
+
+    padding: 30px;   /* 内部间距 30px */
+
+
+}
+
+header {
+    margin-bottom: 30px;   /* 外部间距 30px */
+    text-align: center;    /* 文字居中 */
+}
+
+h1 {
+    font-size: 48px; 
+    color: #fff;
+    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
+}
+
+#content-area {
+    display: flex;
+    justify-content: space-around;
+    gap: 40px;
+}
+
+/* 自带 */
+.box {
+    width: 500px; 
+    height: 600px;
+    background-color: #ffffffcc;
+    border: 1px solid #ccc;
+    padding: 20px;
+    font-size: 20px;
+    text-align: left;
+    overflow: auto;
+}

public/blog/src/js/main.js

@@ -0,0 +1,29 @@
+// js目前不会，先靠ai
+
+function resizeCanvas() {
+    // 定义设计基准尺寸
+    const designWidth = 1280;
+    const designHeight = 800;
+            
+    // 获取当前浏览器视口尺寸
+    const currentWidth = window.innerWidth;
+    const currentHeight = window.innerHeight;
+
+    const canvas = document.getElementById('app-canvas');
+
+    // 计算缩放比例
+    const scaleX = currentWidth / designWidth;
+    const scaleY = currentHeight / designHeight;
+    const scaleFactor = Math.min(scaleX, scaleY);
+
+    // 确保元素中心与 left: 50%; top: 50%; 对齐
+    canvas.style.transform = `translate(-50%, -50%) scale(${scaleFactor})`;
+}
+
+// 首次加载时执行
+document.addEventListener('DOMContentLoaded', resizeCanvas); 
+// 监听窗口大小变化时执行，保持动态缩放
+window.addEventListener('resize', resizeCanvas);
+        
+// 确保在某些情况下也能正确初始化
+resizeCanvas();