feat: 增加 DCF 等估值工具
This commit is contained in:
R524809
+984
@@ -0,0 +1,984 @@
|
||||
/* Share the application palette; keep semantic valuation bands subdued. */
|
||||
.dcf-calculator {
|
||||
--df-bg:var(--surface);
|
||||
--df-paper:var(--surface);
|
||||
--df-ink:var(--ink);
|
||||
--df-muted:#75716c;
|
||||
--df-line:var(--line);
|
||||
--df-accent:var(--accent);
|
||||
--df-soft:var(--accent-soft);
|
||||
--df-field:#faf9f7;
|
||||
--df-accent-line:#d7c7b6;
|
||||
--df-chart-secondary:#cbbba9;
|
||||
--df-error:#a63f32;
|
||||
--df-error-bg:#fff1ee;
|
||||
--df-low:#e8ece5;
|
||||
--df-fair:#eee9df;
|
||||
--df-high:#eee5e1;
|
||||
--df-good:#64715e;
|
||||
--df-fair-ink:#786950;
|
||||
--df-high-ink:#866d65;
|
||||
--df-warning-bg:#f6f2eb;
|
||||
background:var(--df-bg);
|
||||
border:1px solid var(--df-line);
|
||||
color:var(--df-ink);
|
||||
border-radius:16px;
|
||||
grid-template-columns:minmax(0,1fr);
|
||||
gap:20px;
|
||||
padding:28px;
|
||||
font-size:13px;
|
||||
line-height:1.6;
|
||||
display:grid}
|
||||
.dcf-calculator * {
|
||||
box-sizing:border-box}
|
||||
.dcf-calculator>* {
|
||||
min-width:0}
|
||||
.dcf-calculator [hidden] {
|
||||
display:none!important}
|
||||
.dcf-calculator h2 {
|
||||
letter-spacing:-.8px;
|
||||
margin:4px 0 5px;
|
||||
font-size:27px;
|
||||
font-weight:600;
|
||||
line-height:1.5}
|
||||
.dcf-calculator h3 {
|
||||
margin:0;
|
||||
font-size:14px;
|
||||
font-weight:600}
|
||||
.dcf-calculator p {
|
||||
margin:0}
|
||||
.dcf-calculator .df-muted {
|
||||
color:var(--df-muted);
|
||||
font-size:11px;
|
||||
line-height:1.7}
|
||||
.dcf-calculator .df-eyebrow {
|
||||
letter-spacing:1.5px;
|
||||
color:var(--df-accent);
|
||||
font-size:10px;
|
||||
font-weight:600}
|
||||
.dcf-calculator .df-eyebrow span {
|
||||
color:var(--df-muted);
|
||||
letter-spacing:.5px;
|
||||
font-weight:400}
|
||||
.dcf-calculator .df-header {
|
||||
justify-content:space-between;
|
||||
align-items:center;
|
||||
gap:16px;
|
||||
display:flex}
|
||||
.dcf-calculator .df-subtitle {
|
||||
color:var(--df-muted);
|
||||
font-size:12px}
|
||||
.dcf-calculator .df-header-mark {
|
||||
color:var(--df-muted);
|
||||
white-space:nowrap;
|
||||
font-size:11px}
|
||||
.dcf-calculator .df-header-actions {
|
||||
display:flex;
|
||||
align-items:center;
|
||||
flex-shrink:0;
|
||||
gap:12px}
|
||||
.dcf-calculator .df-help-trigger {
|
||||
display:grid;
|
||||
place-items:center;
|
||||
width:34px;
|
||||
height:34px;
|
||||
padding:0;
|
||||
color:var(--df-muted);
|
||||
border-radius:50%}
|
||||
.dcf-calculator .df-help-trigger:hover {
|
||||
color:var(--df-accent)}
|
||||
.dcf-calculator .df-help-dialog {
|
||||
width:min(860px,calc(100% - 32px));
|
||||
max-width:none;
|
||||
max-height:calc(100vh - 32px);
|
||||
max-height:calc(100dvh - 32px);
|
||||
margin:auto;
|
||||
padding:0;
|
||||
border:1px solid var(--df-line);
|
||||
border-radius:12px;
|
||||
background:var(--df-paper);
|
||||
color:var(--df-ink);
|
||||
box-shadow:0 18px 60px rgb(51 51 51 / 15%);
|
||||
overflow:hidden}
|
||||
.dcf-calculator .df-help-dialog[open] {
|
||||
display:flex;
|
||||
flex-direction:column}
|
||||
.dcf-calculator .df-help-dialog::backdrop {
|
||||
background:rgb(51 51 51 / 35%)}
|
||||
.dcf-calculator .df-help-head {
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:space-between;
|
||||
gap:16px;
|
||||
padding:20px 24px 16px;
|
||||
border-bottom:1px solid var(--df-line)}
|
||||
.dcf-calculator .df-help-head h2 {
|
||||
margin:0 0 4px;
|
||||
font-size:20px;
|
||||
letter-spacing:0}
|
||||
.dcf-calculator .df-help-close {
|
||||
flex-shrink:0;
|
||||
width:32px;
|
||||
height:32px;
|
||||
padding:0;
|
||||
font-size:22px;
|
||||
line-height:1;
|
||||
color:var(--df-muted)}
|
||||
.dcf-calculator .df-help-nav {
|
||||
display:flex;
|
||||
flex-shrink:0;
|
||||
flex-wrap:wrap;
|
||||
gap:8px;
|
||||
padding:12px 24px;
|
||||
border-bottom:1px solid var(--df-line);
|
||||
background:var(--df-field)}
|
||||
.dcf-calculator .df-help-body {
|
||||
min-height:0;
|
||||
overflow-y:auto;
|
||||
overscroll-behavior:contain;
|
||||
padding:20px 24px 24px;
|
||||
font-size:13px;
|
||||
line-height:1.85}
|
||||
.dcf-calculator .df-help-lead {
|
||||
padding:14px 16px;
|
||||
background:var(--df-soft);
|
||||
border-radius:7px}
|
||||
.dcf-calculator .df-help-body section {
|
||||
padding-top:24px;
|
||||
outline-offset:-2px}
|
||||
.dcf-calculator .df-help-body h3 {
|
||||
margin-bottom:10px;
|
||||
color:var(--df-accent);
|
||||
font-size:15px}
|
||||
.dcf-calculator .df-help-body section p+p {
|
||||
margin-top:10px}
|
||||
.dcf-calculator .df-help-formula {
|
||||
margin:12px 0;
|
||||
padding:12px 14px;
|
||||
border-left:3px solid var(--df-accent-line);
|
||||
background:var(--df-field);
|
||||
font-variant-numeric:tabular-nums;
|
||||
overflow-wrap:anywhere}
|
||||
.dcf-calculator .df-help-table {
|
||||
margin:12px 0;
|
||||
overflow-x:auto}
|
||||
.dcf-calculator .df-help-table table {
|
||||
font-size:12px;
|
||||
white-space:normal}
|
||||
.dcf-calculator .df-help-table :is(th,td) {
|
||||
padding:10px;
|
||||
text-align:left}
|
||||
.dcf-calculator .df-help-source {
|
||||
margin-top:24px;
|
||||
padding-top:14px;
|
||||
border-top:1px solid var(--df-line);
|
||||
font-size:11px;
|
||||
color:var(--df-muted)}
|
||||
.dcf-calculator .df-help-source a {
|
||||
color:var(--df-accent);
|
||||
text-underline-offset:3px}
|
||||
@media (width<=680px) {
|
||||
.dcf-calculator .df-header-actions {gap:6px}
|
||||
.dcf-calculator .df-help-head {padding:16px}
|
||||
.dcf-calculator .df-help-nav {padding:12px 16px;gap:6px}
|
||||
.dcf-calculator .df-help-body {padding:16px}
|
||||
.dcf-calculator .df-help-table :is(th,td) {padding:8px 6px}
|
||||
}
|
||||
.dcf-calculator .df-live-dot {
|
||||
background:var(--df-accent);
|
||||
border-radius:50%;
|
||||
width:6px;
|
||||
height:6px;
|
||||
margin-right:7px;
|
||||
display:inline-block}
|
||||
.dcf-calculator button {
|
||||
font:inherit;
|
||||
border:1px solid var(--df-line);
|
||||
background:var(--df-paper);
|
||||
color:var(--df-accent);
|
||||
cursor:pointer;
|
||||
border-radius:7px;
|
||||
padding:7px 11px;
|
||||
font-size:11px;
|
||||
transition:background .15s,border-color .15s}
|
||||
.dcf-calculator button:hover {
|
||||
background:var(--df-soft);
|
||||
border-color:var(--df-accent-line)}
|
||||
.dcf-calculator button:disabled {
|
||||
opacity:.4;
|
||||
cursor:default}
|
||||
.dcf-calculator :is(input,select,button,summary):focus-visible {
|
||||
outline-offset:3px;
|
||||
outline:2px solid var(--df-accent)}
|
||||
.dcf-calculator [data-section] {
|
||||
scroll-margin-top:88px}
|
||||
.dcf-calculator [data-section]:focus {
|
||||
outline:none}
|
||||
.dcf-calculator label {
|
||||
color:var(--df-ink);
|
||||
align-content:start;
|
||||
gap:6px;
|
||||
min-width:0;
|
||||
font-size:11px;
|
||||
display:grid}
|
||||
.dcf-calculator input,.dcf-calculator select {
|
||||
border:1px solid var(--df-line);
|
||||
background:var(--df-field);
|
||||
width:100%;
|
||||
min-width:0;
|
||||
height:39px;
|
||||
color:var(--df-ink);
|
||||
font-variant-numeric:tabular-nums;
|
||||
border-radius:6px;
|
||||
padding:8px 10px;
|
||||
font-family:inherit;
|
||||
font-size:13px}
|
||||
.dcf-calculator input:focus,.dcf-calculator select:focus {
|
||||
border-color:var(--df-accent);
|
||||
background:var(--df-paper)}
|
||||
.dcf-calculator input::placeholder {
|
||||
color:var(--muted);
|
||||
font-size:11px}
|
||||
.dcf-calculator .df-profile-bar {
|
||||
flex-wrap:wrap;
|
||||
align-items:center;
|
||||
gap:8px;
|
||||
display:flex}
|
||||
.dcf-calculator .df-company-buttons {
|
||||
flex-wrap:wrap;
|
||||
gap:6px;
|
||||
min-width:0;
|
||||
display:flex}
|
||||
.dcf-calculator .df-company-buttons button {
|
||||
color:var(--df-muted);
|
||||
overflow-wrap:anywhere;
|
||||
max-width:100%;
|
||||
padding:7px 13px}
|
||||
.dcf-calculator .df-company-buttons button[aria-pressed=true] {
|
||||
background:var(--df-soft);
|
||||
border-color:var(--df-accent-line);
|
||||
color:var(--df-accent);
|
||||
font-weight:600}
|
||||
.dcf-calculator [data-new-company] {
|
||||
background:0 0;
|
||||
border-style:dashed}
|
||||
.dcf-calculator .df-save-status {
|
||||
color:var(--df-muted);
|
||||
margin-left:auto;
|
||||
font-size:10px}
|
||||
.dcf-calculator .df-new-company {
|
||||
flex-wrap:wrap;
|
||||
align-items:end;
|
||||
gap:10px;
|
||||
display:flex}
|
||||
.dcf-calculator .df-new-company label {
|
||||
flex:1;
|
||||
min-width:160px}
|
||||
.dcf-calculator .df-jumpnav {
|
||||
border-top:1px solid var(--df-line);
|
||||
flex-wrap:wrap;
|
||||
gap:24px;
|
||||
padding-top:12px;
|
||||
display:flex}
|
||||
.dcf-calculator .df-jumpnav button {
|
||||
color:var(--df-muted);
|
||||
background:0 0;
|
||||
border:0;
|
||||
padding:0;
|
||||
font-size:11px}
|
||||
.dcf-calculator .df-jumpnav button:first-child {
|
||||
color:var(--df-accent);
|
||||
font-weight:600}
|
||||
.dcf-calculator .df-jumpnav button:hover {
|
||||
color:var(--df-accent);
|
||||
text-decoration:underline}
|
||||
.dcf-calculator .df-overview {
|
||||
grid-template-columns:minmax(240px,1.05fr) minmax(0,2.2fr);
|
||||
align-items:stretch;
|
||||
gap:14px;
|
||||
display:grid}
|
||||
.dcf-calculator .df-output {
|
||||
min-width:0}
|
||||
.dcf-calculator .df-hero {
|
||||
color:var(--df-ink);
|
||||
background:var(--df-soft);
|
||||
border-radius:11px;
|
||||
height:100%;
|
||||
padding:22px 24px}
|
||||
.dcf-calculator .df-hero .df-muted {
|
||||
color:var(--df-muted)}
|
||||
.dcf-calculator .df-number {
|
||||
letter-spacing:-1.8px;
|
||||
font-variant-numeric:tabular-nums;
|
||||
overflow-wrap:anywhere;
|
||||
margin:8px 0 3px;
|
||||
font-size:45px;
|
||||
font-weight:500;
|
||||
line-height:1.25}
|
||||
.dcf-calculator .df-value-note {
|
||||
color:var(--df-muted);
|
||||
border-top:1px solid var(--df-accent-line);
|
||||
margin-top:16px;
|
||||
padding-top:12px;
|
||||
font-size:10px}
|
||||
.dcf-calculator .df-value-note b {
|
||||
color:var(--df-accent);
|
||||
letter-spacing:-.4px;
|
||||
margin-left:7px;
|
||||
font-size:19px;
|
||||
font-weight:500}
|
||||
.dcf-calculator [data-shares-note] {
|
||||
margin-top:4px}
|
||||
.dcf-calculator .df-top-comparison {
|
||||
border:1px solid var(--df-line);
|
||||
background:var(--df-paper);
|
||||
border-radius:11px;
|
||||
grid-template-columns:repeat(3,minmax(0,1fr));
|
||||
gap:0;
|
||||
padding:22px 0;
|
||||
display:grid}
|
||||
.dcf-calculator .df-top-comparison>div {
|
||||
min-width:0;
|
||||
padding:0 18px}
|
||||
.dcf-calculator .df-top-comparison>div+div {
|
||||
border-left:1px solid var(--df-line)}
|
||||
.dcf-calculator .df-top-comparison h3 {
|
||||
color:var(--df-muted);
|
||||
min-height:36px;
|
||||
font-size:11px;
|
||||
font-weight:500}
|
||||
.dcf-calculator .df-top-return-value,.dcf-calculator .df-market-price {
|
||||
letter-spacing:-.8px;
|
||||
font-variant-numeric:tabular-nums;
|
||||
overflow-wrap:anywhere;
|
||||
font-size:29px;
|
||||
font-weight:500;
|
||||
line-height:1.4}
|
||||
.dcf-calculator .df-top-return-value {
|
||||
color:var(--df-accent);
|
||||
margin:5px 0 8px}
|
||||
.dcf-calculator .df-price-readout {
|
||||
flex-wrap:wrap;
|
||||
align-items:baseline;
|
||||
gap:5px;
|
||||
margin:5px 0 8px;
|
||||
display:flex}
|
||||
.dcf-calculator .df-zone-badge {
|
||||
white-space:nowrap;
|
||||
border-radius:4px;
|
||||
padding:1px 5px;
|
||||
font-size:10px}
|
||||
.dcf-calculator .df-zone-badge[data-zone=低估] {
|
||||
background:var(--df-low);
|
||||
color:var(--df-good)}
|
||||
.dcf-calculator .df-zone-badge[data-zone=合理] {
|
||||
background:var(--df-fair);
|
||||
color:var(--df-fair-ink)}
|
||||
.dcf-calculator .df-zone-badge[data-zone=高估] {
|
||||
background:var(--df-high);
|
||||
color:var(--df-high-ink)}
|
||||
.dcf-calculator .df-decision {
|
||||
background:var(--df-soft);
|
||||
border:1px solid var(--df-accent-line);
|
||||
border-radius:9px;
|
||||
align-items:center;
|
||||
gap:20px;
|
||||
padding:13px 17px;
|
||||
display:flex}
|
||||
.dcf-calculator .df-decision>div {
|
||||
flex-wrap:wrap;
|
||||
align-items:baseline;
|
||||
gap:7px;
|
||||
min-width:220px;
|
||||
display:flex}
|
||||
.dcf-calculator .df-decision .df-eyebrow {
|
||||
letter-spacing:0;
|
||||
font-size:10px}
|
||||
.dcf-calculator .df-decision strong {
|
||||
font-variant-numeric:tabular-nums;
|
||||
font-size:23px;
|
||||
font-weight:500}
|
||||
.dcf-calculator .df-decision p {
|
||||
color:var(--df-muted);
|
||||
flex:1;
|
||||
font-size:11px}
|
||||
.dcf-calculator .df-decision button {
|
||||
white-space:nowrap;
|
||||
background:0 0;
|
||||
border:0}
|
||||
.dcf-calculator .df-decision[data-ok=false] {
|
||||
background:var(--df-warning-bg);
|
||||
border-color:var(--df-line)}
|
||||
.dcf-calculator .df-market {
|
||||
border:1px solid var(--df-line);
|
||||
background:var(--df-paper);
|
||||
border-radius:11px;
|
||||
padding:20px 22px}
|
||||
.dcf-calculator .df-market-head {
|
||||
justify-content:space-between;
|
||||
align-items:center;
|
||||
gap:18px;
|
||||
display:flex}
|
||||
.dcf-calculator .df-market h3 {
|
||||
margin:3px 0}
|
||||
.dcf-calculator .df-price-fields {
|
||||
grid-template-columns:150px 150px;
|
||||
gap:10px;
|
||||
display:grid}
|
||||
.dcf-calculator .df-price-chart {
|
||||
width:100%;
|
||||
min-width:0;
|
||||
height:180px;
|
||||
overflow:hidden}
|
||||
.dcf-calculator .df-zone-keys {
|
||||
grid-template-columns:repeat(3,minmax(0,1fr));
|
||||
gap:12px;
|
||||
display:grid}
|
||||
.dcf-calculator .df-zone-key {
|
||||
background:var(--df-field);
|
||||
border-radius:5px;
|
||||
justify-content:space-between;
|
||||
align-items:center;
|
||||
gap:8px;
|
||||
padding:8px 12px;
|
||||
font-size:10px;
|
||||
display:flex}
|
||||
.dcf-calculator .df-zone-key:nth-child(2) {
|
||||
background:var(--df-field)}
|
||||
.dcf-calculator .df-zone-key:nth-child(3) {
|
||||
background:var(--df-field)}
|
||||
.dcf-calculator .df-zone-key strong {
|
||||
font-variant-numeric:tabular-nums;
|
||||
font-size:11px;
|
||||
font-weight:500}
|
||||
.dcf-calculator .df-zone-dot {
|
||||
background:var(--df-good);
|
||||
border-radius:50%;
|
||||
width:5px;
|
||||
height:5px;
|
||||
margin-right:6px;
|
||||
display:inline-block}
|
||||
.dcf-calculator .df-zone-key:nth-child(2) .df-zone-dot {
|
||||
background:var(--df-fair-ink)}
|
||||
.dcf-calculator .df-zone-key:nth-child(3) .df-zone-dot {
|
||||
background:var(--df-high-ink)}
|
||||
.dcf-calculator .df-interval-rule {
|
||||
border-top:1px solid var(--df-line);
|
||||
justify-content:space-between;
|
||||
align-items:start;
|
||||
gap:16px;
|
||||
margin-top:14px;
|
||||
padding-top:12px;
|
||||
display:flex}
|
||||
.dcf-calculator .df-interval-rule>span {
|
||||
font-size:10px}
|
||||
.dcf-calculator .df-interval-rule details {
|
||||
border:0;
|
||||
min-width:90px;
|
||||
padding:0}
|
||||
.dcf-calculator .df-interval-fields {
|
||||
max-width:320px;
|
||||
margin-top:12px}
|
||||
.dcf-calculator .df-market-message {
|
||||
margin-top:12px}
|
||||
.dcf-calculator .df-layout {
|
||||
grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
|
||||
align-items:start;
|
||||
gap:20px;
|
||||
display:grid}
|
||||
.dcf-calculator .df-form,.dcf-calculator .df-analysis {
|
||||
border:1px solid var(--df-line);
|
||||
background:var(--df-paper);
|
||||
border-radius:11px;
|
||||
min-width:0;
|
||||
padding:20px}
|
||||
.dcf-calculator .df-form {
|
||||
gap:22px;
|
||||
display:grid}
|
||||
.dcf-calculator .df-form>section+section,.dcf-calculator .df-results {
|
||||
border-top:1px solid var(--df-line);
|
||||
padding-top:20px}
|
||||
.dcf-calculator .df-column-heading {
|
||||
align-items:center;
|
||||
gap:10px;
|
||||
display:flex}
|
||||
.dcf-calculator .df-column-heading>span {
|
||||
width:29px;
|
||||
height:29px;
|
||||
color:var(--df-accent);
|
||||
border:1px solid var(--df-accent-line);
|
||||
border-radius:50%;
|
||||
place-items:center;
|
||||
font-size:10px;
|
||||
display:grid}
|
||||
.dcf-calculator .df-column-heading p {
|
||||
color:var(--df-muted);
|
||||
margin-top:2px;
|
||||
font-size:10px}
|
||||
.dcf-calculator .df-column-heading>b {
|
||||
letter-spacing:1px;
|
||||
color:var(--df-muted);
|
||||
margin-left:auto;
|
||||
font-size:10px;
|
||||
font-weight:500}
|
||||
.dcf-calculator .df-section-head {
|
||||
justify-content:space-between;
|
||||
align-items:center;
|
||||
gap:10px;
|
||||
margin-bottom:12px;
|
||||
display:flex}
|
||||
.dcf-calculator .df-section-head h3 {
|
||||
font-size:12px}
|
||||
.dcf-calculator .df-fields {
|
||||
grid-template-columns:repeat(2,minmax(0,1fr));
|
||||
gap:12px;
|
||||
display:grid}
|
||||
.dcf-calculator .df-share-field small {
|
||||
font-size:10px}
|
||||
.dcf-calculator .df-stages {
|
||||
gap:8px;
|
||||
display:grid}
|
||||
.dcf-calculator .df-stage-row {
|
||||
background:var(--df-field);
|
||||
border:1px solid var(--df-line);
|
||||
border-radius:7px;
|
||||
grid-template-columns:minmax(55px,1fr) 65px minmax(70px,1fr) 22px;
|
||||
align-items:center;
|
||||
gap:8px;
|
||||
padding:10px;
|
||||
display:grid}
|
||||
.dcf-calculator .df-stage-row input {
|
||||
background:var(--df-paper);
|
||||
height:34px;
|
||||
padding:6px}
|
||||
.dcf-calculator .df-stage-row button {
|
||||
color:var(--df-muted);
|
||||
background:0 0;
|
||||
border:0;
|
||||
padding:2px;
|
||||
font-size:17px}
|
||||
.dcf-calculator .df-stage-name {
|
||||
font-size:11px}
|
||||
.dcf-calculator .df-stage-name small {
|
||||
color:var(--df-muted);
|
||||
font-size:9px;
|
||||
display:block}
|
||||
.dcf-calculator .df-stage-key {
|
||||
color:var(--df-muted);
|
||||
font-size:10px}
|
||||
.dcf-calculator .df-total {
|
||||
margin-top:8px;
|
||||
font-size:10px}
|
||||
.dcf-calculator .df-result-line {
|
||||
justify-content:space-between;
|
||||
align-items:baseline;
|
||||
gap:10px;
|
||||
padding:8px 0;
|
||||
font-size:11px;
|
||||
display:flex}
|
||||
.dcf-calculator .df-result-line span {
|
||||
min-width:0}
|
||||
.dcf-calculator .df-result-line b {
|
||||
font-variant-numeric:tabular-nums;
|
||||
white-space:nowrap;
|
||||
font-weight:500}
|
||||
.dcf-calculator .df-result-line.df-sum {
|
||||
border-top:1px solid var(--df-line);
|
||||
margin-top:4px;
|
||||
padding-top:10px}
|
||||
.dcf-calculator .df-composition {
|
||||
background:var(--df-line);
|
||||
border-radius:3px;
|
||||
gap:2px;
|
||||
height:6px;
|
||||
margin:15px 0 8px;
|
||||
display:flex;
|
||||
overflow:hidden}
|
||||
.dcf-calculator .df-segment-a {
|
||||
background:var(--df-accent)}
|
||||
.dcf-calculator .df-segment-b {
|
||||
background:var(--df-chart-secondary)}
|
||||
.dcf-calculator .df-legend {
|
||||
color:var(--df-muted);
|
||||
justify-content:space-between;
|
||||
margin-bottom:4px;
|
||||
font-size:10px;
|
||||
display:flex}
|
||||
.dcf-calculator .df-crosscheck {
|
||||
min-width:0}
|
||||
.dcf-calculator .df-cross-shared {
|
||||
background:var(--df-field);
|
||||
border-radius:5px;
|
||||
margin:16px 0;
|
||||
padding:8px 10px;
|
||||
font-size:10px}
|
||||
.dcf-calculator details {
|
||||
border:0;
|
||||
padding:0}
|
||||
.dcf-calculator summary {
|
||||
color:var(--df-accent);
|
||||
cursor:pointer;
|
||||
font-size:11px}
|
||||
.dcf-calculator .df-cross-inputs>summary {
|
||||
margin-bottom:13px}
|
||||
.dcf-calculator .df-cross-inputs>summary span {
|
||||
margin-left:6px;
|
||||
font-size:10px}
|
||||
.dcf-calculator .df-cross-grid {
|
||||
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
|
||||
align-items:start;
|
||||
gap:16px;
|
||||
display:grid}
|
||||
.dcf-calculator .df-cross-grid>* {
|
||||
min-width:0}
|
||||
.dcf-calculator .df-cross-bridge {
|
||||
background:var(--df-soft);
|
||||
border-radius:6px;
|
||||
gap:10px;
|
||||
margin-top:12px;
|
||||
padding:12px;
|
||||
display:grid}
|
||||
.dcf-calculator .df-cross-derived {
|
||||
gap:6px;
|
||||
font-size:11px;
|
||||
display:grid}
|
||||
.dcf-calculator .df-cross-derived b {
|
||||
font-size:18px;
|
||||
font-weight:500}
|
||||
.dcf-calculator .df-cross-profit,.dcf-calculator .df-cross-growth {
|
||||
margin-top:12px}
|
||||
.dcf-calculator .df-cross-source-note {
|
||||
margin-top:7px;
|
||||
font-size:10px}
|
||||
.dcf-calculator .df-cross-pe {
|
||||
grid-template-columns:repeat(3,minmax(0,1fr));
|
||||
gap:6px;
|
||||
margin-top:12px;
|
||||
display:grid}
|
||||
.dcf-calculator .df-cross-pe label {
|
||||
font-size:10px}
|
||||
.dcf-calculator .df-cross-pe input {
|
||||
padding:8px}
|
||||
.dcf-calculator .df-cross-pe label:nth-child(2) input {
|
||||
background:var(--df-field);
|
||||
border-color:var(--df-accent-line)}
|
||||
.dcf-calculator .df-cross-pe-note {
|
||||
margin-top:10px;
|
||||
font-size:10px}
|
||||
.dcf-calculator .df-cross-advanced {
|
||||
border-top:1px solid var(--df-line);
|
||||
margin-top:16px;
|
||||
padding-top:13px}
|
||||
.dcf-calculator .df-cross-advanced .df-fields {
|
||||
grid-template-columns:repeat(3,minmax(0,1fr));
|
||||
margin-top:12px}
|
||||
.dcf-calculator .df-cross-results {
|
||||
gap:22px;
|
||||
margin-top:22px;
|
||||
display:grid}
|
||||
.dcf-calculator .df-cross-results>* {
|
||||
min-width:0}
|
||||
.dcf-calculator .df-cross-joint {
|
||||
background:var(--df-soft);
|
||||
border:1px solid var(--df-accent-line);
|
||||
border-radius:8px;
|
||||
padding:16px}
|
||||
.dcf-calculator .df-cross-joint-grid {
|
||||
grid-template-columns:repeat(3,minmax(0,1fr));
|
||||
gap:10px;
|
||||
margin-bottom:10px;
|
||||
display:grid}
|
||||
.dcf-calculator .df-cross-joint-grid>div {
|
||||
gap:5px;
|
||||
font-size:10px;
|
||||
display:grid}
|
||||
.dcf-calculator .df-cross-joint-grid b {
|
||||
letter-spacing:-.5px;
|
||||
font-variant-numeric:tabular-nums;
|
||||
overflow-wrap:anywhere;
|
||||
font-size:21px;
|
||||
font-weight:500}
|
||||
.dcf-calculator .df-cross-joint-grid>div:last-child {
|
||||
color:var(--df-accent);
|
||||
border-left:1px solid var(--df-accent-line);
|
||||
padding-left:10px}
|
||||
.dcf-calculator .df-cross-joint .df-muted {
|
||||
font-size:10px}
|
||||
.dcf-calculator .df-scenario-grid {
|
||||
grid-template-columns:repeat(3,minmax(0,1fr));
|
||||
gap:8px;
|
||||
display:grid}
|
||||
.dcf-calculator .df-scenario-card {
|
||||
border:1px solid var(--df-line);
|
||||
background:var(--df-field);
|
||||
border-radius:7px;
|
||||
gap:8px;
|
||||
min-width:0;
|
||||
padding:12px 10px;
|
||||
display:grid}
|
||||
.dcf-calculator .df-scenario-card[data-base=true] {
|
||||
background:var(--df-soft);
|
||||
border-color:var(--df-accent-line)}
|
||||
.dcf-calculator .df-scenario-card>span:first-child {
|
||||
color:var(--df-muted);
|
||||
font-size:10px}
|
||||
.dcf-calculator .df-scenario-card strong {
|
||||
font-variant-numeric:tabular-nums;
|
||||
letter-spacing:-.8px;
|
||||
overflow-wrap:anywhere;
|
||||
font-size:24px;
|
||||
font-weight:500}
|
||||
.dcf-calculator .df-scenario-card small {
|
||||
color:var(--df-muted);
|
||||
font-size:10px}
|
||||
.dcf-calculator .df-scenario-status {
|
||||
color:var(--df-high-ink);
|
||||
font-size:10px}
|
||||
.dcf-calculator .df-scenario-card[data-ok=true] .df-scenario-status {
|
||||
color:var(--df-good)}
|
||||
.dcf-calculator .df-cross-sensitivity .df-section-head {
|
||||
margin-bottom:0}
|
||||
.dcf-calculator .df-cross-sensitivity th:nth-child(3),.dcf-calculator .df-cross-sensitivity td:nth-child(3) {
|
||||
background:var(--df-field)}
|
||||
.dcf-calculator .df-cross-prices {
|
||||
border-top:1px solid var(--df-line);
|
||||
padding-top:16px}
|
||||
.dcf-calculator .df-cross-prices>.df-section-head {
|
||||
margin-top:16px}
|
||||
.dcf-calculator .df-cross-checks {
|
||||
grid-template-columns:repeat(2,minmax(0,1fr));
|
||||
gap:10px;
|
||||
margin-top:16px;
|
||||
display:grid}
|
||||
.dcf-calculator .df-cross-checks>div {
|
||||
border:1px solid var(--df-line);
|
||||
border-radius:6px;
|
||||
padding:12px;
|
||||
font-size:11px}
|
||||
.dcf-calculator .df-cross-checks strong {
|
||||
margin-top:5px;
|
||||
font-size:11px;
|
||||
display:block}
|
||||
.dcf-calculator .df-cross-checks p {
|
||||
margin-top:5px}
|
||||
.dcf-calculator .df-cross-verdict {
|
||||
color:var(--df-fair-ink);
|
||||
background:var(--df-warning-bg);
|
||||
border-radius:6px;
|
||||
margin-top:12px;
|
||||
padding:12px;
|
||||
font-size:11px}
|
||||
.dcf-calculator .df-cross-table-note {
|
||||
margin-top:10px;
|
||||
font-size:10px}
|
||||
.dcf-calculator .df-cross-tag {
|
||||
color:var(--df-fair-ink);
|
||||
background:var(--df-fair);
|
||||
border-radius:4px;
|
||||
padding:2px 6px;
|
||||
font-size:10px;
|
||||
display:inline-block}
|
||||
.dcf-calculator .df-cross-tag[data-ok=true] {
|
||||
background:var(--df-low);
|
||||
color:var(--df-good)}
|
||||
.dcf-calculator .df-table-wrap {
|
||||
max-width:100%;
|
||||
margin-top:12px;
|
||||
overflow-x:auto}
|
||||
.dcf-calculator table {
|
||||
border-collapse:collapse;
|
||||
white-space:nowrap;
|
||||
font-variant-numeric:tabular-nums;
|
||||
width:100%;
|
||||
font-size:10px}
|
||||
.dcf-calculator th,.dcf-calculator td {
|
||||
text-align:right;
|
||||
border-bottom:1px solid var(--df-line);
|
||||
padding:10px 8px}
|
||||
.dcf-calculator th {
|
||||
color:var(--df-muted);
|
||||
background:var(--df-field);
|
||||
font-weight:400}
|
||||
.dcf-calculator th:first-child,.dcf-calculator td:first-child {
|
||||
text-align:left}
|
||||
.dcf-calculator .df-table-section {
|
||||
border:1px solid var(--df-line);
|
||||
background:var(--df-paper);
|
||||
border-radius:9px;
|
||||
padding:17px 20px}
|
||||
.dcf-calculator .df-foot {
|
||||
color:var(--df-muted);
|
||||
flex-wrap:wrap;
|
||||
justify-content:space-between;
|
||||
gap:8px;
|
||||
font-size:10px;
|
||||
display:flex}
|
||||
.dcf-calculator .df-note {
|
||||
border-top:1px solid var(--df-line);
|
||||
padding-top:14px;
|
||||
font-size:10px}
|
||||
.dcf-calculator .df-error {
|
||||
color:var(--df-error);
|
||||
background:var(--df-error-bg);
|
||||
border:1px solid var(--df-high);
|
||||
border-radius:7px;
|
||||
padding:12px 14px;
|
||||
font-size:12px}
|
||||
.dcf-calculator .df-warning {
|
||||
color:var(--df-fair-ink);
|
||||
background:var(--df-warning-bg);
|
||||
border-radius:7px;
|
||||
padding:12px 14px;
|
||||
font-size:12px}
|
||||
@media (width>=1500px) {
|
||||
.tools-layout .content:has(.dcf-calculator) {
|
||||
max-width:1280px}
|
||||
}
|
||||
@media (width<=1200px) {
|
||||
.dcf-calculator {
|
||||
padding:22px}
|
||||
.dcf-calculator .df-overview {
|
||||
grid-template-columns:1fr}
|
||||
.dcf-calculator .df-hero {
|
||||
grid-template-columns:1fr 1fr;
|
||||
column-gap:20px;
|
||||
display:grid}
|
||||
.dcf-calculator .df-hero>.df-muted:first-child {
|
||||
grid-column:1}
|
||||
.dcf-calculator .df-number {
|
||||
grid-area:2/1}
|
||||
.dcf-calculator .df-hero>.df-muted:nth-child(3) {
|
||||
grid-column:1}
|
||||
.dcf-calculator .df-value-note {
|
||||
border-top:0;
|
||||
border-left:1px solid var(--df-accent-line);
|
||||
grid-area:1/2/4;
|
||||
align-self:center;
|
||||
margin:0;
|
||||
padding:10px 0 10px 24px}
|
||||
.dcf-calculator .df-top-comparison h3 {
|
||||
min-height:0}
|
||||
.dcf-calculator .df-layout {
|
||||
grid-template-columns:1fr}
|
||||
.dcf-calculator .df-cross-grid {
|
||||
gap:24px}
|
||||
.dcf-calculator .df-top-comparison {
|
||||
padding:18px 0}
|
||||
}
|
||||
@media (width<=680px) {
|
||||
.dcf-calculator {
|
||||
border-radius:10px;
|
||||
gap:16px;
|
||||
padding:16px}
|
||||
.dcf-calculator .df-header-mark {
|
||||
display:none}
|
||||
.dcf-calculator h2 {
|
||||
font-size:24px}
|
||||
.dcf-calculator .df-save-status {
|
||||
width:100%;
|
||||
margin-left:0}
|
||||
.dcf-calculator .df-jumpnav {
|
||||
gap:15px}
|
||||
.dcf-calculator .df-jumpnav button {
|
||||
font-size:10px}
|
||||
.dcf-calculator .df-decision {
|
||||
flex-wrap:wrap;
|
||||
gap:8px}
|
||||
.dcf-calculator .df-decision>div {
|
||||
min-width:0}
|
||||
.dcf-calculator .df-decision p {
|
||||
flex:100%;
|
||||
order:3}
|
||||
.dcf-calculator .df-decision button {
|
||||
margin-left:auto}
|
||||
.dcf-calculator .df-market-head {
|
||||
flex-wrap:wrap}
|
||||
.dcf-calculator .df-price-fields {
|
||||
grid-template-columns:repeat(2,minmax(0,1fr));
|
||||
width:100%}
|
||||
.dcf-calculator .df-market {
|
||||
padding:16px}
|
||||
.dcf-calculator .df-zone-key {
|
||||
gap:3px;
|
||||
padding:8px;
|
||||
display:grid}
|
||||
.dcf-calculator .df-zone-key strong {
|
||||
font-size:10px}
|
||||
.dcf-calculator .df-interval-rule {
|
||||
flex-wrap:wrap}
|
||||
.dcf-calculator .df-form,.dcf-calculator .df-analysis {
|
||||
padding:16px}
|
||||
.dcf-calculator .df-top-comparison>div {
|
||||
padding:0 12px}
|
||||
.dcf-calculator .df-top-return-value,.dcf-calculator .df-market-price {
|
||||
font-size:26px}
|
||||
}
|
||||
@media (width<=460px) {
|
||||
.dcf-calculator .df-hero {
|
||||
padding:20px;
|
||||
display:block}
|
||||
.dcf-calculator .df-value-note {
|
||||
border-top:1px solid var(--df-accent-line);
|
||||
border-left:0;
|
||||
margin-top:16px;
|
||||
padding:12px 0 0}
|
||||
.dcf-calculator .df-top-comparison {
|
||||
grid-template-columns:repeat(2,minmax(0,1fr));
|
||||
gap:16px;
|
||||
padding:16px 0}
|
||||
.dcf-calculator .df-top-comparison>div:first-child {
|
||||
border-bottom:1px solid var(--df-line);
|
||||
grid-column:1/-1;
|
||||
padding-bottom:12px}
|
||||
.dcf-calculator .df-top-comparison>div:nth-child(2) {
|
||||
border-left:0}
|
||||
.dcf-calculator .df-cross-grid {
|
||||
grid-template-columns:1fr;
|
||||
gap:16px}
|
||||
.dcf-calculator .df-cross-pe {
|
||||
gap:10px}
|
||||
.dcf-calculator .df-cross-checks,.dcf-calculator .df-cross-advanced .df-fields {
|
||||
grid-template-columns:1fr}
|
||||
.dcf-calculator .df-stage-row {
|
||||
grid-template-columns:minmax(48px,1fr) 52px minmax(65px,1fr) 20px;
|
||||
gap:6px;
|
||||
padding:8px}
|
||||
.dcf-calculator input,.dcf-calculator select {
|
||||
font-size:16px}
|
||||
.dcf-calculator .df-scenario-grid {
|
||||
gap:6px}
|
||||
.dcf-calculator .df-scenario-card {
|
||||
padding:10px 8px}
|
||||
.dcf-calculator .df-scenario-card strong {
|
||||
font-size:21px}
|
||||
.dcf-calculator .df-cross-joint-grid {
|
||||
gap:8px}
|
||||
.dcf-calculator .df-cross-joint-grid b {
|
||||
font-size:19px}
|
||||
.dcf-calculator .df-cross-inputs>summary span {
|
||||
margin-left:14px;
|
||||
display:block}
|
||||
}
|
||||
@media (prefers-reduced-motion:reduce) {
|
||||
.dcf-calculator * {
|
||||
transition:none!important}
|
||||
}
|
||||
|
||||
|
||||
/* Annual cash-flow chart remains visible below the collapsible detail table. */
|
||||
.dcf-calculator .df-cashflow-section {padding:20px;background:var(--df-paper);border:1px solid var(--df-line);border-radius:11px;min-width:0;}
|
||||
.dcf-calculator .df-cashflow-section .df-section-head {align-items:start;flex-wrap:wrap;}
|
||||
.dcf-calculator .df-cashflow-section h3 {margin-bottom:4px;}
|
||||
.dcf-calculator .df-cashflow-chart {height:320px;width:100%;min-width:0;}
|
||||
@media(max-width:560px){.dcf-calculator .df-cashflow-section{padding:16px;}.dcf-calculator .df-cashflow-chart{height:280px;}}
|
||||
|
||||
/* Deletion appears only after dwelling on a company for three seconds. */
|
||||
.dcf-calculator .df-company-buttons {gap:10px;}
|
||||
.dcf-calculator .df-company-chip {position:relative;display:inline-flex;min-width:0;max-width:100%;}
|
||||
.dcf-calculator .df-company-buttons .df-company-delete {position:absolute;top:-7px;right:-7px;display:grid;place-items:center;width:20px;height:20px;padding:0;border:1px solid var(--df-accent-line);border-radius:50%;background:var(--df-paper);color:var(--df-muted);font-size:16px;line-height:1;z-index:1;opacity:0;visibility:hidden;transition:opacity .15s,visibility 0s;}
|
||||
.dcf-calculator .df-company-chip:is(:hover,:focus-within) .df-company-delete {opacity:1;visibility:visible;transition:opacity .15s 3s,visibility 0s 3s;}
|
||||
.dcf-calculator .df-company-buttons .df-company-delete:hover {color:var(--df-error);border-color:var(--df-error);background:var(--df-error-bg);}
|
||||
.dcf-calculator .df-company-empty {padding:28px 20px;border:1px dashed var(--df-line);border-radius:10px;color:var(--df-muted);text-align:center;}
|
||||
.dcf-calculator[data-empty="true"] :is(.df-jumpnav,.df-overview,.df-decision,.df-market,.df-layout,.df-table-section,.df-cashflow-section,.df-foot,.df-note,.df-error,.df-warning) {display:none!important;}
|
||||
@media(hover:none){.dcf-calculator .df-company-buttons .df-company-delete{opacity:1;visibility:visible;transition:none;}}
|
||||
@media(prefers-reduced-motion:reduce) and (hover:hover){.dcf-calculator .df-company-chip:is(:hover,:focus-within) .df-company-delete{transition:visibility 0s 3s!important;}}
|
||||
@@ -533,3 +533,53 @@ button {
|
||||
.chart { min-width: 560px; }
|
||||
.card { overflow-x: auto; }
|
||||
}
|
||||
|
||||
/* 估值工具沿用图表页的纸白与棕色主题。 */
|
||||
.tools-title { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
|
||||
.app-layout.tools-layout { grid-template-columns: 184px minmax(0, 1fr); }
|
||||
.tools-layout .content { max-width: 1120px; width: 100%; }
|
||||
.chart-sidebar[hidden] { display: none; }
|
||||
.return-calculator {
|
||||
display: grid;
|
||||
gap: 22px;
|
||||
min-width: 0;
|
||||
padding: 26px;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 10px;
|
||||
}
|
||||
.return-calculator [hidden] { display: none !important; }
|
||||
.return-calculator h2 { margin: 0 0 10px; font-size: 22px; font-weight: 600; }
|
||||
.return-calculator [data-company] { margin-bottom: 6px; font-size: 13px; color: var(--accent); }
|
||||
.return-calculator .text-small { font-size: 12px; line-height: 1.8; }
|
||||
.return-calculator .text-muted { color: #75716c; }
|
||||
.return-calculator .viz-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 16px; }
|
||||
.return-calculator .form-label { display: grid; align-content: start; gap: 8px; min-width: 0; font-size: 12px; line-height: 1.6; }
|
||||
.return-calculator .form-control,
|
||||
.return-calculator .form-select {
|
||||
width: 100%; min-width: 0; padding: 10px 12px; border: 1px solid var(--line);
|
||||
border-radius: 6px; background: #faf9f7; color: var(--ink); font: inherit;
|
||||
font-size: 15px; font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.return-calculator .form-control:focus,
|
||||
.return-calculator .form-select:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
|
||||
.return-calculator details { padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
|
||||
.return-calculator summary { cursor: pointer; font-size: 13px; color: var(--accent); }
|
||||
.return-calculator .calc-advanced { padding-top: 20px; }
|
||||
.return-calculator .calc-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
|
||||
.return-calculator .calc-message { margin: 0; }
|
||||
.return-calculator .text-destructive { padding: 12px; border-radius: 6px; color: #a63f32; background: #fff1ee; font-size: 13px; }
|
||||
.return-calculator .calc-section { display: grid; gap: 12px; min-width: 0; }
|
||||
.return-calculator .viz-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
|
||||
.return-calculator .viz-stat { padding: 18px 14px; border: 1px solid var(--line); box-shadow: none; background: #faf9f7; font-size: 12px; overflow-wrap: anywhere; }
|
||||
.return-calculator .viz-stat:first-child { background: var(--accent-soft); border-color: var(--accent-soft); }
|
||||
.return-calculator .viz-stat-value { margin-top: 12px; font-size: clamp(18px, 1.7vw, 26px); font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; }
|
||||
.return-calculator .calc-notes { padding-top: 8px; border-top: 1px solid var(--line); }
|
||||
.return-calculator .calc-notes p { margin: 8px 0 0; }
|
||||
@media (max-width: 680px) {
|
||||
.return-calculator { padding: 20px 16px; gap: 20px; }
|
||||
.return-calculator h2 { font-size: 20px; }
|
||||
.return-calculator .viz-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
|
||||
.return-calculator .viz-grid { grid-template-columns: 1fr; }
|
||||
.return-calculator .viz-stat-value { font-size: 24px; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user