feat: v1.1.0 release

LightXi · Mar 29, 2024 · 8a89d88 · 8a89d88
1 parent b9cc724
commit 8a89d88
Show file tree

Hide file tree

Showing 6 changed files with 116 additions and 25 deletions.
diff --git a/assets/css/index.css b/assets/css/index.css
@@ -27,6 +27,7 @@ body {
     overflow-y: auto;
     touch-action: pan-y;
     -webkit-overflow-scrolling: touch;
+    scrollbar-width: thin;
 }
 
 .background {
@@ -38,6 +39,9 @@ body {
 }
 
 .navbar {
+    position: fixed;
+    width: 100%;
+    z-index: 64;
     display: flex;
     flex-direction: row;
     background-color: #fff;
@@ -140,6 +144,7 @@ body {
     height: max-content;
     background: #f5f7fa;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
+    margin-top: 80px;
 }
 
 .landing-content {
@@ -277,7 +282,22 @@ body {
 }
 
 .product-container {
-    background: #ecf4fa;
+    background: #fff;
+    position: relative;
+}
+
+.product-container::before {
+    content: "";
+    position: absolute;
+    bottom: 36px;
+    right: 36px;
+    background-image: url("/assets/images/cloud-banner.png");
+    background-repeat: no-repeat;
+    background-size: auto 100%;
+    width: 160px;
+    height: 160px;
+    opacity: 0.4;
+    animation: flex 3s infinite alternate;
 }
 
 .product-container .lightxi-icon-background {
@@ -351,6 +371,9 @@ body {
 
 .lightxi-subtitle {
     position: relative;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
     font-size: 18px;
     font-weight: 600;
     user-select: none;
@@ -361,6 +384,15 @@ body {
     text-align: center;
 }
 
+.lightxi-subtitle svg {
+    width: 16px !important;
+    height: 16px !important;
+    margin-right: 6px;
+    color: #3b97ff;
+    transition: .25s;
+    transform: translateY(1px);
+}
+
 .lightxi-subtitle::after {
     content: "";
     display: inline-block;
@@ -379,6 +411,10 @@ body {
     width: 75px;
 }
 
+.lightxi-subtitle:hover svg {
+    color: #005fff;
+}
+
 .product-list {
     display: flex;
     flex-direction: row;
@@ -502,7 +538,6 @@ body {
     padding: 28px 32px;
     border-radius: 6px;
     transition: .2s ease-out;
-    user-select: none;
     text-decoration: none;
     background: #fff;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
@@ -511,13 +546,21 @@ body {
 }
 
 .feature-item-title {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
     font-size: 24px;
     font-weight: 700;
-    user-select: none;
     color: #333;
     transition: .25s;
 }
 
+.feature-item-title svg {
+    margin-right: 6px;
+    color: #0052d9;
+    transform: translateY(1px);
+}
+
 .feature-item:hover {
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
     transform: translateY(-5px);
@@ -528,7 +571,6 @@ body {
 }
 
 .feature-item-description {
-    user-select: none;
     color: #4b5b76;
 }
 
@@ -571,8 +613,14 @@ body {
 }
 
 .feature-container {
-    background: #fff;
+    background-color: #fff;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+
+    background-image: url("/assets/images/partical-background.png");
+    background-repeat: no-repeat;
+    background-size: auto 100%;
+    background-position: top;
+    filter: saturate(200%);
 }
 
 .creative-container {
@@ -582,6 +630,21 @@ body {
     box-shadow: 2px 2px 10px rgba(255, 255, 255, 0.2);
 }
 
+.creative-container::before {
+    --line: rgb(0 0 0 / 10%);
+    content: "";
+    height: 100%;
+    width: 100vw;
+    position: absolute;
+    background: linear-gradient(90deg, var(--line) 1px, transparent 1px 10vmin) 0 -5vmin / 10vmin 10vmin, linear-gradient(var(--line) 1px, transparent 1px 10vmin) 0 -5vmin / 10vmin 10vmin;
+    -webkit-mask: linear-gradient(-15deg, transparent 50%, white);
+    mask: linear-gradient(-15deg, transparent 50%, white);
+    top: 0;
+    z-index: 0;
+    transform: rotate(180deg);
+    pointer-events: none;
+}
+
 .software {
     border: 1px solid #252529;
     background: rgba(24, 23, 23, 0.95);
@@ -726,12 +789,12 @@ body {
 }
 
 .list-item {
-    color: #9193a8 !important;
+    color: #aeb0c0 !important;
     transition: .25s;
 }
 
 .list-item:hover {
-    color: #c3c5d0 !important;
+    color: #d3d3da !important;
 }
 
 .footer-list a {
@@ -991,6 +1054,12 @@ body {
     .credit {
         align-items: center;
     }
+
+    .product-item {
+        width: 90%;
+        height: max-content;
+        padding-bottom: 36px;
+    }
 }
 
 @media (max-width: 480px) {

diff --git a/assets/images/cloud-banner.png b/assets/images/cloud-banner.png
diff --git a/assets/images/deeptrain-background.png b/assets/images/deeptrain-background.png
diff --git a/assets/images/partical-background.png b/assets/images/partical-background.png
diff --git a/index.html b/index.html
@@ -12,7 +12,7 @@
   <link href="https://fonts.googlefonts.cn/css?family=Ubuntu" rel="stylesheet">
 </head>
 <body>
-<img src="./assets/images/background.png" class="background" loading="lazy" alt="">
+<img src="./assets/images/background.png" class="background" alt="">
 <nav class="navbar">
   <div class="navbar-brand">
     <a class="navbar-logo" href="/">
@@ -36,7 +36,7 @@
         <a class="landing-button" href="https://dash.lightxi.com/register">注册</a>
         <a class="landing-button primary" href="https://dash.lightxi.com/login">控制台</a>
       </div>
-      <div class="landing-slider">⚡ 累计帮助3,000名站长稳定上云</div>
+      <div class="landing-slider">⚡ 助力数字化转型，晞云为您提供高性能、高可用、高稳定的云计算服务</div>
     </div>
     <div class="landing-background">
       <img src="./assets/images/cloud.png" alt="">
@@ -47,7 +47,10 @@
     <div class="lightxi-wrapper">
       <svg xmlns="http://www.w3.org/2000/svg" class="lightxi-icon-background" viewBox="0 0 512 512"><path d="M400 240c-8.89-89.54-71-144-144-144-69 0-113.44 48.2-128 96-60 6-112 43.59-112 112 0 66 54 112 120 112h260c55 0 100-27.44 100-88 0-59.82-53-85.76-96-88z" fill="none" stroke-linejoin="round" stroke-width="32"/><path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M317 208L209.2 336 163 284.8"/></svg>
         <div class="lightxi-title">产品</div>
-        <div class="lightxi-subtitle">晞云提供多种云计算产品，满足您的各种需求</div>
+        <div class="lightxi-subtitle">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-server"><rect width="20" height="8" x="2" y="2" rx="2" ry="2"/><rect width="20" height="8" x="2" y="14" rx="2" ry="2"/><line x1="6" x2="6.01" y1="6" y2="6"/><line x1="6" x2="6.01" y1="18" y2="18"/></svg>
+          晞云提供多种云计算产品，满足您的各种需求
+        </div>
         <div class="product-list">
           <div class="product-item">
             <div class="product-dot" style="background: #ff9f43"></div>
@@ -135,10 +138,16 @@
   <div class="lightxi-wrapper">
     <svg xmlns="http://www.w3.org/2000/svg" class="lightxi-icon-background" viewBox="0 0 512 512"><path xmlns="http://www.w3.org/2000/svg" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M344 280l88-88M232 216l64 64M80 320l104-104"/><circle xmlns="http://www.w3.org/2000/svg" cx="456" cy="168" r="24" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/><circle xmlns="http://www.w3.org/2000/svg" cx="320" cy="304" r="24" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/><circle xmlns="http://www.w3.org/2000/svg" cx="208" cy="192" r="24" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/><circle xmlns="http://www.w3.org/2000/svg" cx="56" cy="344" r="24" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/></svg>
     <div class="lightxi-title">优势</div>
-    <div class="lightxi-subtitle">为什么选择晞云</div>
+    <div class="lightxi-subtitle">
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-dashed-mouse-pointer"><path d="M5 3a2 2 0 0 0-2 2"/><path d="M19 3a2 2 0 0 1 2 2"/><path d="m12 12 4 10 1.7-4.3L22 16Z"/><path d="M5 21a2 2 0 0 1-2-2"/><path d="M9 3h1"/><path d="M9 21h2"/><path d="M14 3h1"/><path d="M3 9v1"/><path d="M21 9v2"/><path d="M3 14v1"/></svg>
+      为什么选择晞云
+    </div>
     <div class="feature-list">
       <div class="feature-item">
-        <div class="feature-item-title">高性价比</div>
+        <div class="feature-item-title">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-percent"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="M9 9h.01"/><path d="M15 15h.01"/></svg>
+          高性价比
+        </div>
         <div class="feature-item-description">晞云提供高性价比的产品，与多家运营商合作，自建数据中心，保证产品的高性能、高可用、高稳定、线路优质，提供高性价比的服务</div>
         <div class="feature-item-icon">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
@@ -148,21 +157,30 @@
         </div>
       </div>
       <div class="feature-item">
-        <div class="feature-item-title">服务稳定</div>
+        <div class="feature-item-title">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-database-zap"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M3 5V19A9 3 0 0 0 15 21.84"/><path d="M21 5V8"/><path d="M21 12L18 17H22L19 22"/><path d="M3 12A9 3 0 0 0 14.59 14.87"/></svg>
+          服务稳定
+        </div>
         <div class="feature-item-description">晞云的SLA保证99.925%的可用性，为您的业务保驾护航，提供备份、容灾、监控等服务<br><br><br></div>
         <div class="feature-item-icon">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><circle cx="256" cy="256" r="208" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/><circle cx="256" cy="256" r="80" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M208 54l8 132M296 186l8-132M208 458l8-132M296 326l8 132M458 208l-132 8M326 296l132 8M54 208l132 8M186 296l-132 8"/></svg>
         </div>
       </div>
       <div class="feature-item">
-        <div class="feature-item-title">安全可靠</div>
+        <div class="feature-item-title">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shield-check"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/><path d="m9 12 2 2 4-4"/></svg>
+          安全可靠
+        </div>
         <div class="feature-item-description">晞云的数据中心为国家认证，提供安全可靠的云计算服务，数据安全保障<br><br><br></div>
         <div class="feature-item-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 32L32 144v224l224 112 224-112V144L256 32zm0 320l-96-48v-80l96 48v80zm0-128l-96-48v-80l96 48v80zm0-128l-96-48V96l96 48v80zm0 256l-96-48v-80l96 48v80z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/>
         </svg></div>
       </div>
       <div class="feature-item">
-          <div class="feature-item-title">售后服务</div>
-          <div class="feature-item-description">晞云提供工单售后服务，7*12小时在线，为您的操作提供技术支持<br><br><br></div>
+          <div class="feature-item-title">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" style="transform: translateY(2px)" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mail"><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>
+            售后服务
+          </div>
+          <div class="feature-item-description">晞云提供工单售后服务，7*16小时在线，为您的操作提供技术支持<br><br><br></div>
           <div class="feature-item-icon">
             <svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><path d="M441.6 171.61L266.87 85.37a24.57 24.57 0 00-21.74 0L70.4 171.61A40 40 0 0048 207.39V392c0 22.09 18.14 40 40.52 40h335c22.38 0 40.52-17.91 40.52-40V207.39a40 40 0 00-22.44-35.78z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/><path d="M397.33 368L268.07 267.46a24 24 0 00-29.47 0L109.33 368M309.33 295l136-103M61.33 192l139 105" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/></svg>
           </div>
@@ -174,10 +192,13 @@
   <div class="lightxi-wrapper">
     <svg xmlns="http://www.w3.org/2000/svg" class="lightxi-icon-background" viewBox="0 0 512 512"><path d="M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192z" fill="none" stroke-miterlimit="10" stroke-width="32"/><path d="M350.67 150.93l-117.2 46.88a64 64 0 00-35.66 35.66l-46.88 117.2a8 8 0 0010.4 10.4l117.2-46.88a64 64 0 0035.66-35.66l46.88-117.2a8 8 0 00-10.4-10.4zM256 280a24 24 0 1124-24 24 24 0 01-24 24z" fill="currentColor" /></svg>
     <div class="lightxi-title">不止于云</div>
-    <div class="lightxi-subtitle">晞云团队一直走在创新的前沿，持续推出自研创新产品，为您提供更多可能</div>
-    <a class="software" href="https://deeptrain.lightxi.com" target="_blank">
+    <div class="lightxi-subtitle">
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-code"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
+      晞云团队一直走在创新的前沿，持续推出自研创新产品，为您提供更多可能
+    </div>
+    <a class="software" href="https://www.deeptrain.net" target="_blank">
       <div class="software-image">
-        <img src="https://deeptrain.lightxi.com/favicon.ico" alt="" />
+        <img src="https://www.deeptrain.net/favicon.ico" alt="" />
       </div>
       <div class="software-title">Deeptrain</div>
       <div class="software-subtitle">深能科创</div>
@@ -186,8 +207,8 @@
       <div class="team">
         <div class="grow"></div>
         由&nbsp;
-        <img src="https://zmh-program.site/avatar/zmh-program.webp" alt="zmh-program" />
-        <img src="https://zmh-program.site/friend/sh1n3zz.webp" alt="sh1n3zz" />
+        <img src="https://zmh-program.site/avatar/zmh-program.webp" alt="zmh-program" loading="lazy" />
+        <img src="https://zmh-program.site/friend/sh1n3zz.webp" alt="sh1n3zz" loading="lazy" />
         &nbsp;联合创始
       </div>
     </a>
@@ -221,6 +242,7 @@
     </div>
     <div class="footer-list footer-link">
       <div class="list-title">友情链接</div>
+      <a class="list-item" href="https://akihitomi.com" target="_blank">Sh1n3zZ</a>
       <a class="list-item" href="https://zmh-program.site" target="_blank">zmh-program</a>
     </div>
   </div>
@@ -242,15 +264,15 @@
         </a>
       </div>
       <a href="https://beian.miit.gov.cn/" target="_blank">
-        <img src="./assets/images/gov.webp" alt="">
+        <img src="./assets/images/gov.webp" alt="" loading="lazy">
         粤ICP备2023066011号-1
       </a>
       <a href="https://www.beian.gov.cn/portal/registerSystemInfo?recordcode=44040302000432" target="_blank">
-        <img src="./assets/images/gongan.webp" alt="">
+        <img src="./assets/images/gongan.webp" alt="" loading="lazy">
         粤公网安备 44040302000432号
       </a>
       <a href="https://dxzhgl.miit.gov.cn/dxxzsp/xkz/xkzgl/resource/qiyesearch.jsp?num=B1-20234898&type=xuke" target="_blank">
-        <img src="./assets/images/cert.webp" alt="">
+        <img src="./assets/images/cert.webp" alt="" loading="lazy">
         增值电信业务经营许可证 B1-20234898
       </a>
     </div>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "lightxi.com",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "lightxi cloud website front-end",
   "main": "index.html",
   "scripts": {