/*:root{*/ /* !*背景颜色*!*/ /* --color-background:#ead7c8;*/ /* !*边框颜色*!*/ /* --color-border: var(--color-background);*/ /* !*正文字体颜色*!*/ /* --color-font-content: #937036;*/ /* !*标签字体颜色*!*/ /* --color-tag-font:#ff6400;*/ /* !*标签背景颜色*!*/ /* --color-tag-background: #ffefe5;*/ /* !*圆角大小*!*/ /* --yuanjiao-usual:10px;*/ /* --yuanjiao-mini:5px;*/ /* !*标题字体大小*!*/ /* --size-font-title:24px;*/ /*}*/ :root{ /*背景颜色*/ --color-background: #fff; /*边框颜色*/ --color-border: #000000; /*正文字体颜色*/ --color-font-content: #000; /*标签字体颜色*/ --color-tag-font: #ffd90c; /*标签背景颜色*/ --color-tag-background: #000000; /*圆角大小*/ --yuanjiao-usual:10px; --yuanjiao-mini:5px; /*标题字体大小*/ --size-font-title:24px; } /*标签样式统一设置*/ body { height: 100%; width: 100%; margin: 0; padding: 0; color:var(--color-font-content) } p{ margin: 0; } a{ color: var(--color-font-content); text-decoration: none; } /*框架/盒子*/ .container{ width: 100%; height: 100%; /*padding: 2em;*/ box-sizing: border-box; } .a4-paper { margin: auto; /*padding: 1mm;*/ box-sizing: border-box; width: 210mm; height: 297mm; box-shadow: 0 2px 5px 2px rgba(0,0,0,0.1); display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ } .box-limit{ width: 95%; height: 95%; margin: 1em auto; padding: 1em; box-sizing: border-box; border: 5px solid var(--color-border); border-radius: var(--yuanjiao-usual); } .header,.footer{ justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ flex-flow: row; } .main{ justify-content: left; /* 水平居中 */ padding: 1em; box-sizing: border-box; flex-flow: column; } .header,.main,.footer{ margin: 0 0 1em 0; display: flex; background: var(--color-background); border-radius: var(--yuanjiao-usual); } /*通用样式*/ .line{ width: 100%; height: 2px; /*color: var(--color-font-content);*/ background: var(--color-font-content); border: none; } .title{ font-size: var(--size-font-title); font-weight: bold; } .name{ margin: 0.5em auto; } .tag{ border-radius: var(--yuanjiao-mini); color: var(--color-tag-font); background: var(--color-tag-background); padding: 1px 5px; box-sizing: border-box; } .round{ border-radius: var(--yuanjiao-mini); } .shadow{ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } .header .profile-box{ width: 150px; height: 150px; padding: 0; margin:1em; box-sizing: border-box; } .header .profile-box .profile{ width: 150px; height: 150px; /*border: 3px solid var(--color-border);*/ border-radius: var(--yuanjiao-usual); } .header .user-info{ width: calc(100% - 150px); height: 155px; margin: 0 0.5em; padding: 0 0.5em; box-sizing: border-box; } .flex-column,.school { display: flex; flex-flow: column; } .flex-row{ display: flex; flex-flow: row; margin: 0.5em; } .school .school-info{ display: flex; flex-flow: row; margin: 0.5em; } .school .school-info .logo{ width: 50px; height: 50px; } .school .school-info .logo img{ width: 50px; height: 50px; border-radius: 50px; } .school .school-info .shool-name{ } .rongyu .jiangxiang{ margin: 0.5em; } .project-item{ margin: 0.5em; } /*提示框*/ .overlay { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; justify-content: center; align-items: center; /*background-color: rgba(0, 0, 0, 0.5); !* 可选的半透明背景 *!*/ z-index: 1000; /* 确保此div位于其他所有元素之上 */ } .content { width: 90%; min-width: 350px; max-width: 500px; background-color: white; padding: 20px; border-radius: 5px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); transform: translateY(-50%); } .msg-btn{ width: 20%; max-width: 150px; min-width: 50px; height: 2em; margin: 1em auto; color:var(--color-font-content); background: var(--color-background); outline: none; border: none; }