首页样式调整

docs/.vuepress/components/CustomHero.vue

@@ -1,22 +1,19 @@
 <template>
   <div class="hero-section">
-    <img src="/hero_bg.png" alt="Background image" class="background-image" />
     <div class="hero-content">
-      <h1 class="hero-title">环信 IM 开发文档</h1>
-      <p class="hero-description">
-        12小时快速集成单聊、群聊、聊天室、推送系统通知等完备 IM 功能，全平台覆盖
-      </p>
-      <div class="hero-actions" @click="openAi">
-        <div class="documentation-button">
-          <img
-            src="/aibot.png"
-            alt="Documentation icon"
-            class="documentation-icon"
-          />
-          <span>有集成问题？问环信文档AI助手</span>
+      <div class="hero-info">
+        <div class="hero-title">环信 IM 开发文档</div>
+        <div class="hero-desc">
+          基于即时通讯 (Instant Messaging, IM)
+          的高可靠性、低延时、强扩展性及高并发特性，可轻松切入即时通讯领域，为产品带来卓越沟通体验，快速增强用户粘性和市场竞争力。即时通讯
+          IM
+          解决方案支持丰富的消息类型、群组功能和跨平台体验，轻松构建满足不同场景需求的高效沟通平台，助力用户享受流畅便捷的交流方式。
+        </div>
+        <div class="hero-desc">
+          探索下面的综合文档，立即释放 IM 即时通讯的力量。
         </div>
-        <button class="go-button">Go</button>
       </div>
+      <img src="/hero_chat.png" alt="Documentation icon" class="hero-img" />
     </div>
   </div>
 </template>
@@ -43,114 +40,50 @@ export default defineComponent({
   min-height: 220px;
   align-items: center;
   justify-content: center;
-}
 
-.background-image {
-  position: absolute;
-  inset: 0;
-  height: 100%;
-  width: 100%;
-  object-fit: cover;
-  object-position: center;
+  background-image: linear-gradient(
+      to bottom,
+      transparent 0%,
+      white 50%,
+      white 100%
+    ),
+    linear-gradient(to right, #dfcaff 0%, #cae5ff 100%);
 }
 
 .hero-content {
-  position: relative;
   display: flex;
-  width: 640px;
-  max-width: 100%;
-  flex-direction: column;
+  justify-content: space-between;
   align-items: center;
+  max-width: 1200px;
+  padding: 70px 24px 20px 24px;
 }
 
-.hero-title {
-  margin: 0;
-  text-align: center;
-  background: linear-gradient(
-    98deg,
-    #73cdff -27.44%,
-    #0082fa 40.66%,
-    #1548ff 98.44%
-  );
-  background-clip: text;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  font: 600 32px PingFang SC, sans-serif;
-}
-
-.hero-description {
-  color: #666;
-  text-align: center;
-  align-self: stretch;
-  margin: 23px;
-  font: 400 16px PingFang SC, sans-serif;
-}
-
-@media (max-width: 991px) {
-  .hero-description {
-    max-width: 100%;
-  }
-}
-
-.hero-actions {
+.hero-info {
   display: flex;
-  justify-content: center;
-  width: 388px;
-  max-width: 100%;
-  gap: 0;
-  white-space: nowrap;
-  cursor: pointer;
-}
-
-@media (max-width: 991px) {
-  .hero-actions {
-    white-space: initial;
-  }
-}
-
-.documentation-button {
-  border-radius: 24px 0 0 24px;
-  background-color: #fff;
-  display: flex;
-  gap: 4px;
-  font-size: 16px;
-  color: #919ba1;
-  font-weight: 400;
-  line-height: 150%;
-  padding: 12px 16px;
-  border: none;
+  flex-direction: column;
 }
 
-@media (max-width: 991px) {
-  .documentation-button {
-    white-space: initial;
-  }
+.hero-title {
+  margin: 16px 0;
+  color: #000;
+  font: 500 52px PingFang SC, sans-serif;
 }
 
-.documentation-icon {
-  aspect-ratio: 1;
-  object-fit: auto;
-  object-position: center;
-  width: 24px;
+.hero-desc {
+  margin-top: 16px;
+  color: #505e72;
+  font: 400 16px PingFang SC, sans-serif;
 }
 
-.go-button {
-  justify-content: center;
-  align-items: start;
-  border-radius: 0 24px 24px 0;
-  background: linear-gradient(180deg, #009eff 0%, #6678ff 100%);
-  color: #f9fafa;
-  text-align: center;
-  padding: 12px 34px;
-  font: 500 18px/133% Roboto, sans-serif;
-  border: none;
-  cursor: pointer;
+.hero-img {
+  width: 400px;
+  height: 300px;
+  margin-left: 100px;
 }
 
 @media (max-width: 991px) {
-  .go-button {
-    padding-left: 20px;
-    white-space: initial;
+  .hero-img {
+    display: none;
   }
 }
 </style>