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

代码语言：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; }

        .home-header { padding: 35px 20px; text-align: center; background: linear-gradient(135deg, #ffb2a9, #ff8a80); color: white; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; }
        .home-header .week-info { font-size: 2.6em; font-weight: 700; }
        .home-header .days-left { font-size: 1.2em; opacity: 0.9; margin-top: 5px;}
        .baby-size-card { text-align: center; margin-top: -25px; position: relative; z-index: 1; }
        .baby-size-card .inner { background: white; display: inline-block; padding: 20px 35px; border-radius: 20px; box-shadow: 0 8px 20px rgba(0,0,0,0.08); }
        .baby-size-card .size-text { font-size: 1.4em; font-weight: 600; color: var(--primary-color); }
        
        .content-card, .tool-card {
            background: white; 
            border-radius: 16px; 
            padding: 20px; 
            margin-top: 20px;
            border: 1px solid var(--border-color);
            transition: all 0.3s ease;
        }
        .content-card:hover, .tool-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,0.07); }
        .content-card h3 { color: var(--primary-color); border-left: 4px solid var(--primary-color); padding-left: 12px; margin-top: 0; margin-bottom: 15px; font-size: 1.3em; }
        .content-card p { line-height: 1.7; color: var(--text-color); }
        .content-card img { width: 100%; border-radius: 10px; margin-bottom: 20px; }

        .tools-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
        .tool-card { padding: 25px; text-align: center; cursor: pointer; }
        .tool-card svg { width: 48px; height: 48px; color: var(--primary-color); margin-bottom: 12px; }
        .tool-card span { font-size: 1.1em; font-weight: 600; color: var(--text-color); }

        .tool-page { display: flex; flex-direction: column; align-items: center; gap: 20px; }
        .counter-display { font-size: 5em; font-weight: bold; color: var(--primary-color); }
        .big-tap-button { width: 200px; height: 200px; border-radius: 50%; background: var(--primary-color); color: white; disp.........完整代码请登录后点击上方下载按钮下载查看