mirror of
https://gitee.com/kekingcn/file-online-preview.git
synced 2026-09-13 16:34:53 +00:00
feat: polish demo portal pages
This commit is contained in:
chenkailing
@@ -120,7 +120,7 @@ a:focus {
|
||||
}
|
||||
|
||||
.page-shell {
|
||||
padding: 118px 0 64px;
|
||||
padding: 72px 0 64px;
|
||||
}
|
||||
|
||||
.section-heading {
|
||||
@@ -221,7 +221,7 @@ a:focus {
|
||||
|
||||
.hero-title {
|
||||
margin: 20px 0 16px;
|
||||
font-size: clamp(26px, 2.8vw, 40px);
|
||||
font-size: clamp(24px, 2.4vw, 36px);
|
||||
line-height: 1.08;
|
||||
letter-spacing: -0.045em;
|
||||
}
|
||||
@@ -234,6 +234,12 @@ a:focus {
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.hero-subtitle-inline {
|
||||
max-width: none;
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.hero-stats,
|
||||
.hero-actions,
|
||||
.feature-grid,
|
||||
@@ -269,7 +275,11 @@ a:focus {
|
||||
}
|
||||
|
||||
.hero-actions {
|
||||
grid-template-columns: repeat(2, minmax(0, max-content));
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
gap: 12px;
|
||||
overflow-x: auto;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.hero-link {
|
||||
@@ -303,6 +313,147 @@ a:focus {
|
||||
padding: 28px;
|
||||
}
|
||||
|
||||
.home-hero-layout {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.18fr) minmax(320px, 0.82fr);
|
||||
gap: 28px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.home-hero-copy .hero-subtitle {
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.home-hero-side {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
|
||||
.doc-stack {
|
||||
position: relative;
|
||||
height: 246px;
|
||||
width: 100%;
|
||||
max-width: 304px;
|
||||
}
|
||||
|
||||
.doc-sheet {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
width: 136px;
|
||||
height: 174px;
|
||||
padding: 14px 14px 12px;
|
||||
border-radius: 24px;
|
||||
border: 1px solid rgba(17, 19, 21, 0.1);
|
||||
background: rgba(255, 255, 255, 0.94);
|
||||
box-shadow: 0 22px 40px rgba(17, 19, 21, 0.12);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.doc-sheet img {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
}
|
||||
|
||||
.doc-sheet::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 2px;
|
||||
right: 2px;
|
||||
top: 64px;
|
||||
bottom: 46px;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cpath d='M2 18 C20 8 40 28 60 18 S100 28 118 18' stroke='%23e6ebf2' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3Cpath d='M2 42 C20 32 40 52 60 42 S100 52 118 42' stroke='%23e6ebf2' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3Cpath d='M2 66 C20 56 40 76 60 66 S100 76 118 66' stroke='%23e6ebf2' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3Cpath d='M2 90 C20 80 40 100 60 90 S100 100 118 90' stroke='%23e6ebf2' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: 118% 100%;
|
||||
opacity: 0.9;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.doc-sheet img,
|
||||
.doc-sheet span {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.doc-sheet span {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 8px 12px;
|
||||
border-radius: 999px;
|
||||
background: rgba(17, 19, 21, 0.06);
|
||||
color: var(--text);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
.sheet-word {
|
||||
top: 16px;
|
||||
left: 12px;
|
||||
transform: rotate(-10deg);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.sheet-excel {
|
||||
top: 68px;
|
||||
left: 88px;
|
||||
transform: rotate(-2deg);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.sheet-powerpoint {
|
||||
top: 8px;
|
||||
right: 10px;
|
||||
transform: rotate(9deg);
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.sheet-pdf {
|
||||
top: 94px;
|
||||
right: 48px;
|
||||
transform: rotate(4deg);
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
.contact-hero-layout {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.28fr) minmax(260px, 0.72fr);
|
||||
gap: 44px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.contact-hero-copy .hero-title,
|
||||
.contact-hero-copy .hero-subtitle {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.contact-hero-side {
|
||||
justify-self: end;
|
||||
width: 100%;
|
||||
max-width: 360px;
|
||||
padding-top: 26px;
|
||||
}
|
||||
|
||||
.support-summary {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.support-summary-item {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.support-summary-item p {
|
||||
margin: 12px 0 0;
|
||||
color: var(--text-muted);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.hero-card h3,
|
||||
.workspace-card h3,
|
||||
.doc-card h3,
|
||||
@@ -380,16 +531,39 @@ a:focus {
|
||||
}
|
||||
|
||||
.preview-url {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.preview-url .form-control {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.preview-url .preview-submit {
|
||||
flex: 0 0 168px;
|
||||
}
|
||||
|
||||
.preview-options {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 14px;
|
||||
overflow-x: auto;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.preview-grid {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
gap: 12px;
|
||||
margin-bottom: 14px;
|
||||
overflow-x: auto;
|
||||
padding-bottom: 4px;
|
||||
margin-bottom: 0;
|
||||
overflow: visible;
|
||||
padding-bottom: 0;
|
||||
flex: 1 1 auto;
|
||||
min-width: 620px;
|
||||
}
|
||||
|
||||
.preview-grid .form-control {
|
||||
@@ -399,9 +573,12 @@ a:focus {
|
||||
|
||||
.preview-switches {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-wrap: nowrap;
|
||||
gap: 10px;
|
||||
margin-bottom: 14px;
|
||||
margin-bottom: 0;
|
||||
overflow: visible;
|
||||
padding-bottom: 0;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.preview-switches label {
|
||||
@@ -414,6 +591,7 @@ a:focus {
|
||||
background: rgba(255, 255, 255, 0.76);
|
||||
border: 1px solid rgba(17, 19, 21, 0.08);
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.preview-switches input {
|
||||
@@ -441,8 +619,8 @@ a:focus {
|
||||
}
|
||||
|
||||
.preview-submit {
|
||||
width: 100%;
|
||||
min-height: 52px;
|
||||
width: 168px;
|
||||
min-height: 48px;
|
||||
}
|
||||
|
||||
.feature-section,
|
||||
@@ -452,6 +630,16 @@ a:focus {
|
||||
margin-top: 34px;
|
||||
}
|
||||
|
||||
.workspace-section .section-heading h2 {
|
||||
font-size: 24px;
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
.feature-section .section-heading h2 {
|
||||
font-size: 24px;
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
.feature-grid {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
@@ -1031,10 +1219,13 @@ a:focus {
|
||||
|
||||
@media (max-width: 1080px) {
|
||||
.hero-grid,
|
||||
.home-hero-layout,
|
||||
.contact-hero-layout,
|
||||
.docs-layout,
|
||||
.toolbar-grid,
|
||||
.release-columns,
|
||||
.source-grid {
|
||||
.source-grid,
|
||||
.preview-options {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
@@ -1042,6 +1233,31 @@ a:focus {
|
||||
position: static;
|
||||
}
|
||||
|
||||
.contact-hero-side {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.home-hero-side {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.doc-stack {
|
||||
height: auto;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.doc-sheet {
|
||||
position: relative;
|
||||
top: auto;
|
||||
right: auto;
|
||||
left: auto;
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.hero-stats,
|
||||
.feature-grid,
|
||||
.summary-grid,
|
||||
@@ -1073,7 +1289,11 @@ a:focus {
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 24px;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.hero-subtitle-inline {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.hero-stats,
|
||||
@@ -1086,10 +1306,36 @@ a:focus {
|
||||
|
||||
.preview-grid {
|
||||
flex-wrap: wrap;
|
||||
min-width: 0;
|
||||
overflow-x: visible;
|
||||
}
|
||||
|
||||
.preview-options {
|
||||
display: block;
|
||||
overflow-x: visible;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.preview-url {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.preview-url .preview-submit {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.preview-switches {
|
||||
flex-wrap: wrap;
|
||||
overflow-x: visible;
|
||||
padding-bottom: 0;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.hero-actions {
|
||||
grid-template-columns: 1fr;
|
||||
flex-wrap: wrap;
|
||||
overflow-x: visible;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.workspace-header,
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Microsoft Excel</title><path d="M23 1.5q.41 0 .7.3.3.29.3.7v19q0 .41-.3.7-.29.3-.7.3H7q-.41 0-.7-.3-.3-.29-.3-.7V18H1q-.41 0-.7-.3-.3-.29-.3-.7V7q0-.41.3-.7Q.58 6 1 6h5V2.5q0-.41.3-.7.29-.3.7-.3zM6 13.28l1.42 2.66h2.14l-2.38-3.87 2.34-3.8H7.46l-1.3 2.4-.05.08-.04.09-.64-1.28-.66-1.29H2.59l2.27 3.82-2.48 3.85h2.16zM14.25 21v-3H7.5v3zm0-4.5v-3.75H12v3.75zm0-5.25V7.5H12v3.75zm0-5.25V3H7.5v3zm8.25 15v-3h-6.75v3zm0-4.5v-3.75h-6.75v3.75zm0-5.25V7.5h-6.75v3.75zm0-5.25V3h-6.75v3Z"/></svg>
|
||||
|
After Width: | Height: | Size: 563 B |
@@ -0,0 +1 @@
|
||||
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Adobe Acrobat Reader</title><path d="M23.63 15.3c-.71-.745-2.166-1.17-4.224-1.17-1.1 0-2.377.106-3.761.354a19.443 19.443 0 0 1-2.307-2.661c-.532-.71-.994-1.49-1.42-2.236.817-2.484 1.207-4.507 1.207-5.962 0-1.632-.603-3.336-2.342-3.336-.532 0-1.065.32-1.349.781-.78 1.384-.425 4.4.923 7.381a60.277 60.277 0 0 1-1.703 4.507c-.568 1.349-1.207 2.733-1.917 4.01C2.834 18.53.314 20.34.03 21.758c-.106.533.071 1.03.462 1.42.142.107.639.533 1.49.533 2.59 0 5.323-4.188 6.707-6.707 1.065-.355 2.13-.71 3.194-.994a34.963 34.963 0 0 1 3.407-.745c2.732 2.448 5.145 2.839 6.352 2.839 1.49 0 2.023-.604 2.2-1.1.32-.64.106-1.349-.213-1.704zm-1.42 1.03c-.107.532-.64.887-1.384.887-.213 0-.39-.036-.604-.071-1.348-.32-2.626-.994-3.903-2.059a17.717 17.717 0 0 1 2.98-.248c.746 0 1.385.035 1.81.142.497.106 1.278.426 1.1 1.348zm-7.524-1.668a38.01 38.01 0 0 0-2.945.674 39.68 39.68 0 0 0-2.52.745 40.05 40.05 0 0 0 1.207-2.555c.426-.994.78-2.023 1.136-2.981.354.603.745 1.207 1.135 1.739a50.127 50.127 0 0 0 1.987 2.378zM10.038 1.46a.768.768 0 0 1 .674-.425c.745 0 .887.851.887 1.526 0 1.135-.355 2.874-.958 4.861-1.03-2.768-1.1-5.074-.603-5.962zM6.134 17.997c-1.81 2.981-3.549 4.826-4.613 4.826a.872.872 0 0 1-.532-.177c-.213-.213-.32-.461-.249-.745.213-1.065 2.271-2.555 5.394-3.904Z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
@@ -0,0 +1 @@
|
||||
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Microsoft PowerPoint</title><path d="M13.5 1.5q1.453 0 2.795.375 1.342.375 2.508 1.06 1.166.686 2.12 1.641.956.955 1.641 2.121.686 1.166 1.061 2.508Q24 10.547 24 12q0 1.453-.375 2.795-.375 1.342-1.06 2.508-.686 1.166-1.641 2.12-.955.956-2.121 1.641-1.166.686-2.508 1.061-1.342.375-2.795.375-1.29 0-2.52-.305-1.23-.304-2.337-.884-1.108-.58-2.063-1.418-.955-.838-1.693-1.893H.997q-.411 0-.704-.293T0 17.004V6.996q0-.41.293-.703T.996 6h3.89q.739-1.055 1.694-1.893.955-.837 2.063-1.418 1.107-.58 2.337-.884Q12.21 1.5 13.5 1.5zm.75 1.535v8.215h8.215q-.14-1.64-.826-3.076-.686-1.436-1.782-2.531-1.095-1.096-2.537-1.782-1.441-.685-3.07-.826zm-5.262 7.57q0-.68-.228-1.166-.229-.486-.627-.79-.399-.305-.938-.446-.539-.14-1.172-.14H2.848v7.863h1.84v-2.742H5.93q.574 0 1.119-.17t.978-.493q.434-.322.698-.802.263-.48.263-1.114zM13.5 21q1.172 0 2.262-.287t2.056-.82q.967-.534 1.776-1.278.808-.744 1.418-1.664.61-.92.984-1.986.375-1.067.469-2.227h-9.703V3.035q-1.735.14-3.27.908T6.797 6h4.207q.41 0 .703.293t.293.703v10.008q0 .41-.293.703t-.703.293H6.797q.644.715 1.412 1.271.768.557 1.623.944.855.387 1.781.586Q12.54 21 13.5 21zM5.812 9.598q.575 0 .915.228.34.229.34.838 0 .27-.124.44-.123.17-.31.275-.188.105-.422.146-.234.041-.445.041H4.687V9.598Z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
@@ -0,0 +1 @@
|
||||
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Microsoft Word</title><path d="M23.004 1.5q.41 0 .703.293t.293.703v19.008q0 .41-.293.703t-.703.293H6.996q-.41 0-.703-.293T6 21.504V18H.996q-.41 0-.703-.293T0 17.004V6.996q0-.41.293-.703T.996 6H6V2.496q0-.41.293-.703t.703-.293zM6.035 11.203l1.442 4.735h1.64l1.57-7.876H9.036l-.937 4.653-1.325-4.5H5.38l-1.406 4.523-.938-4.675H1.312l1.57 7.874h1.641zM22.5 21v-3h-15v3zm0-4.5v-3.75H12v3.75zm0-5.25V7.5H12v3.75zm0-5.25V3h-15v3Z"/></svg>
|
||||
|
After Width: | Height: | Size: 510 B |
Reference in New Issue
Block a user