okFancy · September 7, 2024 17:34
diff --git a/coderun.json b/coderun.json
 {"config":{"codeTheme":"OneDarkPro","pageThemeSyncCodeTheme":true,"openAlmightyConsole":false,"autoRun":true,"layout":"default","keepPreviousLogs":true,"codeFontSize":16},"title":"测试首页页面","code":{"HTML":{"language":"html","content":"<!DOCTYPE html>\n<html lang=\"zh\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>性生活记录应用</title>\n    <link rel=\"stylesheet\" href=\"styles.css\"> <!-- 引入CSS文件 -->\n</head>\n<body>\n    <div class=\"entry-container\">\n        <div class=\"entry-card\" onclick=\"navigate('伴侣')\">\n            <img src=\"https://img.icons8.com/ios-filled/50/000000/partner.png\" alt=\"伴侣图标\" class=\"entry-icon\">\n            <div class=\"entry-text\">\n                <h2>伴侣</h2>\n                <p>记录你们的甜蜜时刻</p>\n            </div>\n        </div>\n        <div class=\"entry-card\" onclick=\"navigate('性爱史')\">\n            <img src=\"https://img.icons8.com/ios-filled/50/000000/history.png\" alt=\"性爱史图标\" class=\"entry-icon\">\n            <div class=\"entry-text\">\n                <h2>性爱史</h2>\n                <p>回顾你的亲密经历</p>\n            </div>\n        </div>\n        <div class=\"entry-card\" onclick=\"navigate('爱记')\">\n            <img src=\"https://img.icons8.com/ios-filled/50/000000/love-notes.png\" alt=\"爱记图标\" class=\"entry-icon\">\n            <div class=\"entry-text\">\n                <h2>爱记</h2>\n                <p>记录你的爱情点滴</p>\n            </div>\n        </div>\n    </div>\n</body>\n</html>\n"},"CSS":{"language":"css","content":"body {\n    background-color: #FFFFFF; /* 设置页面背景色为白色 */\n    margin: 0; /* 去掉默认的边距 */\n    display: flex;\n    flex-direction: column;\n    justify-content: center; /* 将内容居中 */\n    height: 100vh; /* 使body占满整个视口高度 */\n}\n\n.entry-container {\n    display: flex;\n    flex-direction: column; /* 垂直排列卡片 */\n    justify-content: space-between; /* 均匀分布卡片 */\n    height: 100%; /* 使容器高度占满整个屏幕 */\n    padding: 20px;\n}\n\n.entry-card {\n    flex: 1; /* 使每个卡片占据相同的高度 */\n    margin: 10px 0; /* 卡片之间的垂直间距 */\n    border-radius: 10px;\n    display: flex;\n    align-items: center;\n    box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n    transition: all 0.3s ease;\n}\n\n.entry-card:hover {\n    transform: translateY(-5px);\n    box-shadow: 0 5px 15px rgba(0,0,0,0.2);\n}\n\n.entry-icon {\n    width: 50px;\n    height: 50px;\n    margin-right: 20px;\n}\n\n.entry-text {\n    display: flex;\n    flex-direction: column; /* 使标题和副标题上下排列 */\n}\n\n.entry-card h2 {\n    margin: 0;\n    color: #FFFFFF;\n    font-size: 18px; /* 调整标题字体大小 */\n}\n\n.entry-card p {\n    margin: 5px 0 0;\n    color: #FFFFFF;\n    font-size: 14px; /* 调整描述字体大小 */\n}\n\n/* 设置不同颜色 */\n.entry-card:nth-child(1) {\n    background-color: #C2185B; /* 伴侣卡片的颜色（深红色） */\n}\n\n.entry-card:nth-child(2) {\n    background-color: #9C27B0; /* 性爱史卡片的颜色（紫红色） */\n}\n\n.entry-card:nth-child(3) {\n    background-color: #FFD54F; /* 爱记卡片的颜色（金色） */\n}\n","resources":[]},"JS":{"language":"javascript","content":"","resources":[]},"VUE":{"language":"vue2","content":"","resources":[]}}}