vue3实现移动端怀孕类指导辅助app的ui代码-html代码-BFW代码库

vue3实现移动端怀孕类指导辅助app的ui代码

代码语言：html

代码描述：vue3实现移动端怀孕类指导辅助app的ui代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>孕期守护</title>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue3.2.22.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/echarts.js"></script>
    <style>
        :root {
            --primary-color: #ff8a80;
            --primary-dark-color: #e57c73;
            --secondary-color: #80deea;
            --bg-color: #fdf7f6;
            --card-bg-color: #ffffff;
            --text-color: #4a3c35;
            --text-light-color: #9e8a84;
            --border-color: #f0e9e8;
            --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
        }

        * {
            box-sizing: border-box;
        }

        html, body, #app { height: 100%; margin: 0; padding: 0; }
        body { font-family: var(--font-family); background-color: var(--bg-color); color: var(--text-color); font-size: 16px; -webkit-font-smoothing: antialiased; }
        #app { display: flex; flex-direction: column; max-width: 600px; margin: 0 auto; background-color: var(--card-bg-color); box-shadow: 0 4px 25px rgba(0,0,0,0.06); }

        main { flex-grow: 1; overflow-y: auto; padding: 0 0 90px 0; background-color: var(--bg-color); }
        .page-container { padding: 20px; }
        .page-title { 
            font-size: 2em; 
            font-weight: 700; 
            color: var(--primary-color); 
            margin-bottom: 25px; 
            text-align: center; 
            letter-spacing: 1px;
        }
        
        .btn { display: inline-block; padding: 12px 28px; font-size: 1.1em; font-weight: 600; color: white; background-color: var(--primary-color); border: none; border-radius: 30px; cursor: pointer; text-align: center; transition: all 0.3s ease; text-decoration: none; box-shadow: 0 4px 12px rgba(255, 138, 128, 0.3); }
        .btn:hover { background-color: var(--primary-dark-color); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(255, 138, 128, 0.4); }
        .btn-block { display: block; width: 100%; }
        .btn-secondary { background-color: #f1f1f1; color: var(--text-color); box-shadow: none; }
        .btn-secondary:hover { background-color: #e7e7e7; }
        
        .welcome-container { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; padding: 30px; text-align: center; background: var(--bg-color); }
        .welcome-container h1 { font-size: 2.5em; color: var(--primary-color); }
        .welcome-container input[type="date"] { width: 100%; padding: 15px; font-size: 1.2em; border: 2px solid var(--border-color); border-radius: 12px; margin: 30px 0; background: white; }
        .welcome-container input[type="date"]:focus { border-color: var(--primary-color); outline: none; }

     .........完整代码请登录后点击上方下载按钮下载查看