&#x4E13;&#x6CE8;&#x4E8E;&#x6570;&#x636E;&#x5E93;&#x8F6F;&#x4EF6;&#x4EA7;&#x54C1;&#x548C;&#x670D;&#x52A1;&#xFF0C;&#x81F4;&#x529B;&#x4E8E;&#x6210;&#x4E3A;&#x7528;&#x6237;&#x6700;&#x4FE1;&#x8D56;&#x7684;&#x6570;&#x636E;&#x5E93;&#x4EA7;&#x54C1;&#x4F9B;&#x5E94;&#x5546;

&#x5408;&#x4F5C;&#x53D1;&#x5C55;

&lt;!-- &#x5F15;&#x5165;&#x5916;&#x90E8;&#x8D44;&#x6E90;&#xFF08;&#x82E5;&#x9875;&#x9762;&#x5DF2;&#x5F15;&#x5165;&#x53EF;&#x5220;&#x9664;&#xFF09; --&gt;
&lt;script src=&quot;https://cdn.tailwindcss.com&quot;&gt;&lt;/script&gt;
&lt;link href=&quot;https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css&quot; rel=&quot;stylesheet&quot;&gt;

&lt;!-- Tailwind &#x914D;&#x7F6E;&#xFF08;&#x82E5;&#x9875;&#x9762;&#x5DF2;&#x6709;&#x914D;&#x7F6E;&#x53EF;&#x5408;&#x5E76;&#xFF09; --&gt;
&lt;script&gt;
  tailwind.config = {
  theme: {
    extend: {
      colors: {
        primary: &apos;#3b82f6&apos;,
        secondary: &apos;#64748b&apos;,
        accent: &apos;#f97316&apos;,
      },
      fontFamily: {
        inter: [&apos;Inter&apos;, &apos;system-ui&apos;, &apos;sans-serif&apos;],
      },
    },
  }
}
&lt;/script&gt;

&lt;!-- &#x81EA;&#x5B9A;&#x4E49;&#x6837;&#x5F0F; --&gt;
&lt;style&gt;
  /* Tailwind &#x5DE5;&#x5177;&#x7C7B; */
  .tab-active {
    color: #3b82f6;
    border-color: #3b82f6;
    font-weight: 500;
  }

  .content-active {
    opacity: 1;
    z-index: 10;
  }

  .bg-blur {
    backdrop-filter: blur(12px);
    background-color: rgba(0, 0, 0, 0.3);
  }

  /* &#x5E73;&#x6ED1;&#x8FC7;&#x6E21;&#x52A8;&#x753B; */
  .tab-content {
    transition: opacity 0.5s ease, transform 0.5s ease;
  }

  .tab-pane {
    transition: background-image 0.8s ease-in-out;
  }

  /* &#x9632;&#x6B62;&#x80CC;&#x666F;&#x56FE;&#x7247;&#x95EA;&#x70C1; */
  .tab-pane {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
&lt;/style&gt;

&lt;!-- Tab&#x7EC4;&#x4EF6;&#x6838;&#x5FC3;&#x7ED3;&#x6784; --&gt;
&lt;div class=&quot;w-full max-w-5xl rounded-2xl overflow-hidden shadow-2xl relative font-inter&quot;&gt;
  &lt;!-- Tab&#x9875;&#x7B7E;&#x5BB9;&#x5668; --&gt;
  &lt;div class=&quot;absolute top-0 left-0 right-0 z-20 flex flex-wrap justify-center md:justify-start p-4 bg-blur&quot;&gt;
    &lt;button class=&quot;tab-btn tab-active px-5 py-3 mx-2 mb-2 md:mb-0 rounded-lg border-b-2 border-transparent transition-all duration-300&quot; data-tab=&quot;tab1&quot;&gt;
      &lt;i class=&quot;fa fa-mountain mr-2&quot;&gt;&lt;/i&gt;&#x81EA;&#x7136;&#x98CE;&#x5149;
    &lt;/button&gt;
    &lt;button class=&quot;tab-btn px-5 py-3 mx-2 mb-2 md:mb-0 rounded-lg border-b-2 border-transparent transition-all duration-300&quot; data-tab=&quot;tab2&quot;&gt;
      &lt;i class=&quot;fa fa-building mr-2&quot;&gt;&lt;/i&gt;&#x57CE;&#x5E02;&#x5EFA;&#x7B51;
    &lt;/button&gt;
    &lt;button class=&quot;tab-btn px-5 py-3 mx-2 mb-2 md:mb-0 rounded-lg border-b-2 border-transparent transition-all duration-300&quot; data-tab=&quot;tab3&quot;&gt;
      &lt;i class=&quot;fa fa-cutlery mr-2&quot;&gt;&lt;/i&gt;&#x7F8E;&#x98DF;&#x6587;&#x5316;
    &lt;/button&gt;
    &lt;button class=&quot;tab-btn px-5 py-3 mx-2 mb-2 md:mb-0 rounded-lg border-b-2 border-transparent transition-all duration-300&quot; data-tab=&quot;tab4&quot;&gt;
      &lt;i class=&quot;fa fa-users mr-2&quot;&gt;&lt;/i&gt;&#x4EBA;&#x6587;&#x5386;&#x53F2;
    &lt;/button&gt;
  &lt;/div&gt;

  &lt;!-- &#x5185;&#x5BB9;&#x533A;&#x57DF; --&gt;
  &lt;div class=&quot;tab-content h-[600px] relative&quot;&gt;
    &lt;!-- Tab 1 &#x5185;&#x5BB9; --&gt;
    &lt;div id=&quot;tab1&quot; class=&quot;tab-pane content-active absolute inset-0 flex items-end&quot;
      style=&quot;background-image: url(&apos;https://picsum.photos/id/1015/1600/900&apos;);&quot;&gt;
      &lt;div class=&quot;bg-gradient-to-t from-black/80 to-transparent w-full p-6 md:p-10&quot;&gt;
        &lt;h2 class=&quot;text-2xl md:text-4xl font-bold text-white mb-3&quot;&gt;&#x58EE;&#x4E3D;&#x81EA;&#x7136;&#x98CE;&#x5149;&lt;/h2&gt;
        &lt;p class=&quot;text-gray-100 text-base md:text-lg max-w-2xl&quot;&gt;
          &#x63A2;&#x7D22;&#x4E16;&#x754C;&#x4E0A;&#x6700;&#x4EE4;&#x4EBA;&#x60CA;&#x53F9;&#x7684;&#x81EA;&#x7136;&#x666F;&#x89C2;&#xFF0C;&#x4ECE;&#x5DCD;&#x5CE8;&#x7684;&#x96EA;&#x5C71;&#x5230;&#x6E5B;&#x84DD;&#x7684;&#x6E56;&#x6CCA;&#xFF0C;&#x4ECE;&#x8302;&#x5BC6;&#x7684;&#x68EE;&#x6797;&#x5230;&#x5E7F;&#x9614;&#x7684;&#x8349;&#x539F;&#x3002;&#x6BCF;&#x4E00;&#x5904;&#x98CE;&#x666F;&#x90FD;&#x5C55;&#x73B0;&#x7740;&#x5927;&#x81EA;&#x7136;&#x7684;&#x9B3C;&#x65A7;&#x795E;&#x5DE5;&#xFF0C;&#x8BA9;&#x4EBA;&#x5FC3;&#x65F7;&#x795E;&#x6021;&#xFF0C;&#x6D41;&#x8FDE;&#x5FD8;&#x8FD4;&#x3002;
        &lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;

    &lt;!-- Tab 2 &#x5185;&#x5BB9; --&gt;
    &lt;div id=&quot;tab2&quot; class=&quot;tab-pane opacity-0 absolute inset-0 flex items-end&quot;
      style=&quot;background-image: url(&apos;https://picsum.photos/id/1031/1600/900&apos;);&quot;&gt;
      &lt;div class=&quot;bg-gradient-to-t from-black/80 to-transparent w-full p-6 md:p-10&quot;&gt;
        &lt;h2 class=&quot;text-2xl md:text-4xl font-bold text-white mb-3&quot;&gt;&#x73B0;&#x4EE3;&#x57CE;&#x5E02;&#x5EFA;&#x7B51;&lt;/h2&gt;
        &lt;p class=&quot;text-gray-100 text-base md:text-lg max-w-2xl&quot;&gt;
          &#x611F;&#x53D7;&#x90FD;&#x5E02;&#x8109;&#x640F;&#xFF0C;&#x6B23;&#x8D4F;&#x5168;&#x7403;&#x6807;&#x5FD7;&#x6027;&#x5EFA;&#x7B51;&#x3002;&#x4ECE;&#x6469;&#x5929;&#x5927;&#x697C;&#x5230;&#x521B;&#x610F;&#x8BBE;&#x8BA1;&#x5EFA;&#x7B51;&#xFF0C;&#x6BCF;&#x4E00;&#x5EA7;&#x5EFA;&#x7B51;&#x90FD;&#x4EE3;&#x8868;&#x7740;&#x57CE;&#x5E02;&#x7684;&#x72EC;&#x7279;&#x9B45;&#x529B;&#x548C;&#x6587;&#x5316;&#x5E95;&#x8574;&#xFF0C;&#x5C55;&#x73B0;&#x4E86;&#x4EBA;&#x7C7B;&#x667A;&#x6167;&#x4E0E;&#x521B;&#x9020;&#x529B;&#x7684;&#x5B8C;&#x7F8E;&#x7ED3;&#x5408;&#x3002;
        &lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;

    &lt;!-- Tab 3 &#x5185;&#x5BB9; --&gt;
    &lt;div id=&quot;tab3&quot; class=&quot;tab-pane opacity-0 absolute inset-0 flex items-end&quot;
      style=&quot;background-image: url(&apos;https://picsum.photos/id/292/1600/900&apos;);&quot;&gt;
      &lt;div class=&quot;bg-gradient-to-t from-black/80 to-transparent w-full p-6 md:p-10&quot;&gt;
        &lt;h2 class=&quot;text-2xl md:text-4xl font-bold text-white mb-3&quot;&gt;&#x7279;&#x8272;&#x7F8E;&#x98DF;&#x6587;&#x5316;&lt;/h2&gt;
        &lt;p class=&quot;text-gray-100 text-base md:text-lg max-w-2xl&quot;&gt;
          &#x5473;&#x857E;&#x7684;&#x73AF;&#x7403;&#x65C5;&#x884C;&#xFF0C;&#x63A2;&#x7D22;&#x4E16;&#x754C;&#x5404;&#x5730;&#x7684;&#x7279;&#x8272;&#x7F8E;&#x98DF;&#x3002;&#x4ECE;&#x4F20;&#x7EDF;&#x4F73;&#x80B4;&#x5230;&#x521B;&#x65B0;&#x6599;&#x7406;&#xFF0C;&#x6BCF;&#x4E00;&#x79CD;&#x7F8E;&#x98DF;&#x90FD;&#x627F;&#x8F7D;&#x7740;&#x5F53;&#x5730;&#x7684;&#x5386;&#x53F2;&#x4E0E;&#x6587;&#x5316;&#xFF0C;&#x8BA9;&#x60A8;&#x5728;&#x54C1;&#x5C1D;&#x7F8E;&#x5473;&#x7684;&#x540C;&#x65F6;&#xFF0C;&#x611F;&#x53D7;&#x4E0D;&#x540C;&#x5730;&#x57DF;&#x7684;&#x72EC;&#x7279;&#x98CE;&#x60C5;&#x3002;
        &lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;

    &lt;!-- Tab 4 &#x5185;&#x5BB9; --&gt;
    &lt;div id=&quot;tab4&quot; class=&quot;tab-pane opacity-0 absolute inset-0 flex items-end&quot;
      style=&quot;background-image: url(&apos;https://picsum.photos/id/1059/1600/900&apos;);&quot;&gt;
      &lt;div class=&quot;bg-gradient-to-t from-black/80 to-transparent w-full p-6 md:p-10&quot;&gt;
        &lt;h2 class=&quot;text-2xl md:text-4xl font-bold text-white mb-3&quot;&gt;&#x6DF1;&#x539A;&#x4EBA;&#x6587;&#x5386;&#x53F2;&lt;/h2&gt;
        &lt;p class=&quot;text-gray-100 text-base md:text-lg max-w-2xl&quot;&gt;
          &#x7A7F;&#x8D8A;&#x65F6;&#x7A7A;&#x96A7;&#x9053;&#xFF0C;&#x63A2;&#x5BFB;&#x4EBA;&#x7C7B;&#x6587;&#x660E;&#x7684;&#x7470;&#x5B9D;&#x3002;&#x4ECE;&#x53E4;&#x8001;&#x7684;&#x9057;&#x8FF9;&#x5230;&#x4F20;&#x7EDF;&#x7684;&#x6C11;&#x4FD7;&#xFF0C;&#x6BCF;&#x4E00;&#x6BB5;&#x5386;&#x53F2;&#x90FD;&#x8BC9;&#x8BF4;&#x7740;&#x524D;&#x4EBA;&#x7684;&#x6545;&#x4E8B;&#xFF0C;&#x8BA9;&#x6211;&#x4EEC;&#x5728;&#x8FFD;&#x6EAF;&#x8FC7;&#x5F80;&#x4E2D;&#xFF0C;&#x66F4;&#x597D;&#x5730;&#x7406;&#x89E3;&#x5F53;&#x4E0B;&#xFF0C;&#x5C55;&#x671B;&#x672A;&#x6765;&#x3002;
        &lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;!-- &#x4EA4;&#x4E92;&#x903B;&#x8F91; --&gt;
&lt;script&gt;
  // &#x83B7;&#x53D6;&#x6240;&#x6709;tab&#x6309;&#x94AE;&#x548C;&#x5185;&#x5BB9;
const tabButtons = document.querySelectorAll(&apos;.tab-btn&apos;);
const tabContents = document.querySelectorAll(&apos;.tab-pane&apos;);

// &#x7ED1;&#x5B9A;&#x70B9;&#x51FB;&#x4E8B;&#x4EF6;
tabButtons.forEach(button =&gt; {
  button.addEventListener(&apos;click&apos;, () =&gt; {
    // &#x79FB;&#x9664;&#x6240;&#x6709;active&#x7C7B;
    tabButtons.forEach(btn =&gt; btn.classList.remove(&apos;tab-active&apos;));
    tabContents.forEach(content =&gt; content.classList.remove(&apos;content-active&apos;));
    
    // &#x7ED9;&#x5F53;&#x524D;&#x70B9;&#x51FB;&#x7684;&#x6309;&#x94AE;&#x6DFB;&#x52A0;active&#x7C7B;
    button.classList.add(&apos;tab-active&apos;);
    
    // &#x663E;&#x793A;&#x5BF9;&#x5E94;&#x7684;&#x5185;&#x5BB9;
    const tabId = button.getAttribute(&apos;data-tab&apos;);
    const activeContent = document.getElementById(tabId);
    activeContent.classList.add(&apos;content-active&apos;);
    
    // &#x6DFB;&#x52A0;&#x7B80;&#x5355;&#x7684;&#x52A8;&#x753B;&#x6548;&#x679C;
    activeContent.style.transform = &apos;translateY(20px)&apos;;
    setTimeout(() =&gt; {
      activeContent.style.transform = &apos;translateY(0)&apos;;
    }, 50);
  });
});

// &#x7A97;&#x53E3;&#x5927;&#x5C0F;&#x53D8;&#x5316;&#x65F6;&#x8C03;&#x6574;&#x5E03;&#x5C40;
window.addEventListener(&apos;resize&apos;, () =&gt; {
  // &#x786E;&#x4FDD;&#x80CC;&#x666F;&#x56FE;&#x59CB;&#x7EC8;&#x8986;&#x76D6;&#x6574;&#x4E2A;&#x5BB9;&#x5668;
  tabContents.forEach(content =&gt; {
    content.style.backgroundSize = &apos;cover&apos;;
  });
});
&lt;/script&gt;

&#x5317;&#x4EAC;&#x516C;&#x53F8;

&#x6C5F;&#x82CF;&#x534E;&#x5E93;&#x6570;&#x636E;&#x6280;&#x672F;&#x6709;&#x9650;&#x516C;&#x53F8;

&#x534E;&#x5357;&#x5206;&#x516C;&#x53F8;

&#x534E;&#x897F;&#x5206;&#x516C;&#x53F8;

&#x534E;&#x4E1C;&#x5206;&#x516C;&#x53F8;

&#x534E;&#x5317;&#x533A;&#x57DF;

&#x5929;&#x6D25;&#x603B;&#x90E8;

&lt;!-- &#x53EF;&#x76F4;&#x63A5;&#x5D4C;&#x5165;&#x7684; GBase 8s &#x5168;&#x5C4F;&#x80CC;&#x666F;&#x6A21;&#x5757; --&gt;
&lt;style&gt;
  /* &#x5168;&#x5C4F;&#x80CC;&#x666F;&#x6838;&#x5FC3;&#x6837;&#x5F0F; */
  .gbase-banner {
    width: 100vw;
    height: 100vh;
    background: url(&apos;https://cdn.gbase.cn/upload-files/f385d753-c382-430b-93ec-714330d0eba5/banner.jpg&apos;) no-repeat center center;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #333;
    font-family: &quot;Microsoft Yahei&quot;, sans-serif;
    position: relative;
    padding: 0 50px;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  .gbase-header {
    text-align: center;
    max-width: 600px;
    margin-bottom: 60px;
    padding: 0 20px;
  }

  .gbase-header h1 {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: #222;
  }

  .gbase-header p {
    font-size: 1rem;
    line-height: 1.6;
    color: #666;
  }

  .gbase-features {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    max-width: 1200px;
    padding: 0 20px;
  }

  .feature-card {
    background: rgba(255, 255, 255, 0.9);
    padding: 30px;
    border-radius: 8px;
    width: 220px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    text-align: left;
  }

  .feature-card h3 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: #222;
  }

  .feature-card p {
    font-size: 0.9rem;
    line-height: 1.5;
    color: #666;
  }

  /* &#x54CD;&#x5E94;&#x5F0F;&#x9002;&#x914D; - &#x5C0F;&#x5C4F;&#x81EA;&#x52A8;&#x8C03;&#x6574; */
  @media (max-width: 768px) {
    .gbase-banner {
      height: auto;
      padding: 80px 0;
    }

    .gbase-features {
      flex-direction: column;
      align-items: center;
    }

    .feature-card {
      width: 100%;
      max-width: 300px;
    }
  }
&lt;/style&gt;

&lt;section class=&quot;gbase-banner&quot;&gt;
  &lt;div class=&quot;gbase-header&quot;&gt;
    &lt;h1&gt;&#x57FA;&#x4E8E;&#x5171;&#x4EAB;&#x5B58;&#x50A8;&#x7684;&#x6570;&#x636E;&#x5E93;&#x96C6;&#x7FA4; GBase 8s&lt;/h1&gt;
    &lt;p&gt;&#x6DF1;&#x8015;20&#x4F59;&#x5E74;&#x6253;&#x9020;&#x7684;&#x4E00;&#x6B3E;&#x96C6;&#x4E2D;&#x5F0F;&#x4E8B;&#x52A1;&#x578B;&#x6570;&#x636E;&#x5E93;&#x4EA7;&#x54C1;&#xFF0C;&#x767E;TB&#x7EA7;&#x522B;&#x6570;&#x636E;&#x652F;&#x6491;&#x80FD;&#x529B;&#xFF0C;&#x5177;&#x5907;&#x5171;&#x4EAB;&#x5B58;&#x50A8;&#x96C6;&#x7FA4;&#x3001;&#x4E24;&#x5730;&#x4E09;&#x4E2D;&#x5FC3;&#x90E8;&#x7F72;&#x3001;&#x4E0A;&#x5343;&#x516C;&#x91CC;&#x5BB9;&#x707E;&#x7B49;&#x5B8C;&#x5584;&#x7684;&#x9AD8;&#x53EF;&#x7528;&#x65B9;&#x6848;&#xFF0C;&#x662F;&#x4F01;&#x4E1A;&#x6838;&#x5FC3;&#x4E1A;&#x52A1;&#x6570;&#x5B57;&#x5316;&#x8F6C;&#x578B;&#x7684;&#x575A;&#x5B9E;&#x5E95;&#x5EA7;&#x3002;&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class=&quot;gbase-features&quot;&gt;
    &lt;div class=&quot;feature-card&quot;&gt;
      &lt;h3&gt;&#x8D85;&#x7A33;&#x5B9A;&lt;/h3&gt;
      &lt;p&gt;&#x5728;&#x591A;&#x4E2A;&#x91D1;&#x878D;&#x7EA7;&#x4E1A;&#x52A1;&#x7CFB;&#x7EDF;&#x4E2D;&#x96F6;&#x6545;&#x969C;&#x8FD0;&#x884C;&#x4E0A;&#x5343;&#x5929;&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class=&quot;feature-card&quot;&gt;
      &lt;h3&gt;&#x9AD8;&#x53EF;&#x7528;&lt;/h3&gt;
      &lt;p&gt;&#x4E30;&#x5BCC;&#x7684;&#x9AD8;&#x53EF;&#x7528;&#x89E3;&#x51B3;&#x65B9;&#x6848;&#xFF0C;&#x6570;&#x636E;&#x96F6;&#x4E22;&#x5931;&#xFF0C;&#x6545;&#x969C;&#x79D2;&#x5207;&#x6362;&#xFF0C;&#x9AD8;&#x53EF;&#x7528;&#x7EA7;&#x522B;&#x5230;&#x8FBE;99.999%&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class=&quot;feature-card&quot;&gt;
      &lt;h3&gt;&#x6613;&#x8FC1;&#x79FB;&lt;/h3&gt;
      &lt;p&gt;&#x5E7F;&#x6CDB;&#x7684;SQL&#x8BED;&#x6CD5;&#x517C;&#x5BB9;&#x6027;&#xFF0C;&#x4E30;&#x5BCC;&#x7684;API&#x63A5;&#x53E3;&#x652F;&#x6301;&#xFF0C;&#x56FE;&#x5F62;&#x5316;&#x5DE5;&#x5177;&#x4E00;&#x7AD9;&#x5F0F;&#x8FC1;&#x79FB;&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class=&quot;feature-card&quot;&gt;
      &lt;h3&gt;&#x9AD8;&#x5B89;&#x5168;&lt;/h3&gt;
      &lt;p&gt;&#x5B8C;&#x5584;&#x7684;&#x5B89;&#x5168;&#x8D44;&#x8D28;&#xFF0C;&#x62E5;&#x6709;&#x6570;&#x636E;&#x5E93;&#x9AD8;&#x5B89;&#x5168;&#x8BA4;&#x8BC1;EAL4+&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class=&quot;feature-card&quot;&gt;
      &lt;h3&gt;&#x9AD8;&#x6027;&#x80FD;&lt;/h3&gt;
      &lt;p&gt;&#x53CC;&#x8DEF;&#x56FD;&#x4EA7;&#x670D;&#x52A1;&#x5668;&#x4E00;&#x4E3B;&#x591A;&#x5907;&#x573A;&#x666F;&#x4E0B;&#xFF0C;TPCC&#x8D85;160&#x4E07;&#xFF0C;&#x652F;&#x6301;&#x4E0A;&#x5343;QPS&#x7684;&#x4E1A;&#x52A1;&#x7CFB;&#x7EDF;&#x7EA7;&#x54CD;&#x5E94;&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/section&gt;

&lt;h3&gt;&#x5168;&#x4FE1;&#x521B;&#x751F;&#x6001;&lt;/h3&gt;&lt;p&gt;GBase 8c&#x81EA;&#x7814;&#x7387;&#x5B8C;&#x5168;&#x7B26;&#x5408;&#x56FD;&#x5BB6;&#x653F;&#x7B56;&#x8981;&#x6C42;,&#x652F;&#x6301;&#x591A;&#x79CD;&#x4FE1;&#x521B;CPU&#x53CA;&#x57FA;&#x4E8E;&#x4FE1;&#x521B;CPU&#x7684;&#x670D;&#x52A1;&#x5668;,&#x652F;&#x6301;&#x591A;&#x79CD;&#x4FE1;&#x521B;&#x64CD;&#x4F5C;&#x7CFB;&#x7EDF;&#x548C;&#x4FE1;&#x521B;&#x4E2D;&#x95F4;&#x4EF6;&#x3002;&lt;/p&gt;

&lt;h3&gt;&#x6EE1;&#x8DB3;&#x964D;&#x6210;&#x672C;&#x9700;&#x6C42;&lt;/h3&gt;&lt;p&gt;GBase 8c&#x591A;&#x79CD;&#x90E8;&#x7F72;&#x65B9;&#x5F0F;,&#x6EE1;&#x8DB3;&#x7528;&#x6237;&#x5404;&#x79CD;&#x6210;&#x672C;&#x9700;&#x6C42;;&#x91C7;&#x7528;&#x901A;&#x7528;&#x670D;&#x52A1;&#x5668;,&#x964D;&#x4F4E;&#x786C;&#x4EF6;&#x6210;&#x672C;;Licence&#x8D39;&#x7528;&#x53CB;&#x597D;,&#x964D;&#x4F4E;&#x8F6F;&#x4EF6;&#x6210;&#x672C;;&#x6309;&#x9700;&#x914D;&#x7F6E;,&#x964D;&#x4F4E;&#x603B;&#x4F53;&#x62E5;&#x6709;&#x6210;&#x672C;;&#x4E91;&#x4E0A;&#x90E8;&#x7F72;,&#x667A;&#x80FD;&#x8FD0;&#x7EF4;,&#x964D;&#x4F4E;&#x7EF4;&#x62A4;&#x6210;&#x672C;&#x3002;&#x6EE1;&#x8DB3;&#x5BA2;&#x6237;&#x5BF9;&#x964D;&#x6210;&#x672C;&#x7684;&#x5404;&#x9879;&#x8981;&#x6C42;&#x3002;&lt;/p&gt;

&lt;h3&gt;&#x6C34;&#x5E73;&#x6269;&#x5C55;&#x80FD;&#x529B;&lt;/h3&gt;&lt;p&gt;GBase 8c&#x7684;&#x6C34;&#x5E73;&#x6269;&#x5C55;&#x80FD;&#x529B;&#x53EF;&#x4EE5;&#x5E2E;&#x52A9;&#x5BA2;&#x6237;&#x7075;&#x6D3B;&#x5E94;&#x5BF9;&#x7CFB;&#x7EDF;&#x6269;&#x5BB9;&#x7684;&#x9700;&#x6C42;,&#x4EE5;&#x5E94;&#x5BF9;&#x4E1A;&#x52A1;&#x6570;&#x636E;&#x89C4;&#x6A21;&#x7684;&#x6B63;&#x5E38;&#x9700;&#x6C42;&#x3002;&lt;/p&gt;

&#x5546;&#x4E1A;&#x4EF7;&#x503C;

test2

专注于数据库软件产品和服务，致力于成为用户最信赖的数据库产品供应商

合作发展

<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">


<script>
  tailwind.config = {
  theme: {
    extend: {
      colors: {
        primary: '#3b82f6',
        secondary: '#64748b',
        accent: '#f97316',
      },
      fontFamily: {
        inter: ['Inter', 'system-ui', 'sans-serif'],
      },
    },
  }
}
</script>


<style>
  /* Tailwind 工具类 */
  .tab-active {
    color: #3b82f6;
    border-color: #3b82f6;
    font-weight: 500;
  }

  .content-active {
    opacity: 1;
    z-index: 10;
  }

  .bg-blur {
    backdrop-filter: blur(12px);
    background-color: rgba(0, 0, 0, 0.3);
  }

  /* 平滑过渡动画 */
  .tab-content {
    transition: opacity 0.5s ease, transform 0.5s ease;
  }

  .tab-pane {
    transition: background-image 0.8s ease-in-out;
  }

  /* 防止背景图片闪烁 */
  .tab-pane {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
</style>


<div class="w-full max-w-5xl rounded-2xl overflow-hidden shadow-2xl relative font-inter">
  
  <div class="absolute top-0 left-0 right-0 z-20 flex flex-wrap justify-center md:justify-start p-4 bg-blur">
    <button class="tab-btn tab-active px-5 py-3 mx-2 mb-2 md:mb-0 rounded-lg border-b-2 border-transparent transition-all duration-300" data-tab="tab1">
      <i class="fa fa-mountain mr-2"></i>自然风光
    </button>
    <button class="tab-btn px-5 py-3 mx-2 mb-2 md:mb-0 rounded-lg border-b-2 border-transparent transition-all duration-300" data-tab="tab2">
      <i class="fa fa-building mr-2"></i>城市建筑
    </button>
    <button class="tab-btn px-5 py-3 mx-2 mb-2 md:mb-0 rounded-lg border-b-2 border-transparent transition-all duration-300" data-tab="tab3">
      <i class="fa fa-cutlery mr-2"></i>美食文化
    </button>
    <button class="tab-btn px-5 py-3 mx-2 mb-2 md:mb-0 rounded-lg border-b-2 border-transparent transition-all duration-300" data-tab="tab4">
      <i class="fa fa-users mr-2"></i>人文历史
    </button>
  </div>

  
  <div class="tab-content h-[600px] relative">
    
    <div id="tab1" class="tab-pane content-active absolute inset-0 flex items-end"
      style="background-image: url('https://picsum.photos/id/1015/1600/900');">
      <div class="bg-gradient-to-t from-black/80 to-transparent w-full p-6 md:p-10">
        <h2 class="text-2xl md:text-4xl font-bold text-white mb-3">壮丽自然风光</h2>
        <p class="text-gray-100 text-base md:text-lg max-w-2xl">
          探索世界上最令人惊叹的自然景观，从巍峨的雪山到湛蓝的湖泊，从茂密的森林到广阔的草原。每一处风景都展现着大自然的鬼斧神工，让人心旷神怡，流连忘返。
        </p>
      </div>
    </div>

    
    <div id="tab2" class="tab-pane opacity-0 absolute inset-0 flex items-end"
      style="background-image: url('https://picsum.photos/id/1031/1600/900');">
      <div class="bg-gradient-to-t from-black/80 to-transparent w-full p-6 md:p-10">
        <h2 class="text-2xl md:text-4xl font-bold text-white mb-3">现代城市建筑</h2>
        <p class="text-gray-100 text-base md:text-lg max-w-2xl">
          感受都市脉搏，欣赏全球标志性建筑。从摩天大楼到创意设计建筑，每一座建筑都代表着城市的独特魅力和文化底蕴，展现了人类智慧与创造力的完美结合。
        </p>
      </div>
    </div>

    
    <div id="tab3" class="tab-pane opacity-0 absolute inset-0 flex items-end"
      style="background-image: url('https://picsum.photos/id/292/1600/900');">
      <div class="bg-gradient-to-t from-black/80 to-transparent w-full p-6 md:p-10">
        <h2 class="text-2xl md:text-4xl font-bold text-white mb-3">特色美食文化</h2>
        <p class="text-gray-100 text-base md:text-lg max-w-2xl">
          味蕾的环球旅行，探索世界各地的特色美食。从传统佳肴到创新料理，每一种美食都承载着当地的历史与文化，让您在品尝美味的同时，感受不同地域的独特风情。
        </p>
      </div>
    </div>

    
    <div id="tab4" class="tab-pane opacity-0 absolute inset-0 flex items-end"
      style="background-image: url('https://picsum.photos/id/1059/1600/900');">
      <div class="bg-gradient-to-t from-black/80 to-transparent w-full p-6 md:p-10">
        <h2 class="text-2xl md:text-4xl font-bold text-white mb-3">深厚人文历史</h2>
        <p class="text-gray-100 text-base md:text-lg max-w-2xl">
          穿越时空隧道，探寻人类文明的瑰宝。从古老的遗迹到传统的民俗，每一段历史都诉说着前人的故事，让我们在追溯过往中，更好地理解当下，展望未来。
        </p>
      </div>
    </div>
  </div>
</div>


<script>
  // 获取所有tab按钮和内容
const tabButtons = document.querySelectorAll('.tab-btn');
const tabContents = document.querySelectorAll('.tab-pane');

// 绑定点击事件
tabButtons.forEach(button => {
  button.addEventListener('click', () => {
    // 移除所有active类
    tabButtons.forEach(btn => btn.classList.remove('tab-active'));
    tabContents.forEach(content => content.classList.remove('content-active'));
    
    // 给当前点击的按钮添加active类
    button.classList.add('tab-active');
    
    // 显示对应的内容
    const tabId = button.getAttribute('data-tab');
    const activeContent = document.getElementById(tabId);
    activeContent.classList.add('content-active');
    
    // 添加简单的动画效果
    activeContent.style.transform = 'translateY(20px)';
    setTimeout(() => {
      activeContent.style.transform = 'translateY(0)';
    }, 50);
  });
});

// 窗口大小变化时调整布局
window.addEventListener('resize', () => {
  // 确保背景图始终覆盖整个容器
  tabContents.forEach(content => {
    content.style.backgroundSize = 'cover';
  });
});
</script>

地址：	北京市朝阳区安定路五号院 13号北投投资大厦A座606-608
电话：	010-88866866
传真：	010-88864556

地址：	1、江苏省南京市雨花台区丁墙路9号瀚瑞中心1幢1701室 2、南京市雨花台区软件大道118号B1栋6层西
电话：	025-87775809
传真：	025-87775809

地址：	1、广东省广州市黄埔区联和街道科丰路270号703房 2、南宁市良庆区飞云路8号北投大厦2号楼9层909房
电话：	13388012808

地址：	成都市高新区蜀锦路88号1栋1单元28楼7号
电话：	13662049956

地址：	上海市浦东新区张江高科技园区晨晖路1000号(浦东软件园祖冲之园)1号楼W1座208
电话：	15221599633

合作发展

壮丽自然风光

现代城市建筑

特色美食文化

深厚人文历史

北京公司

江苏华库数据技术有限公司

华南分公司

华西分公司

华东分公司

华北区域

天津总部

天津市高新区华苑产业园区工华道2号天百中心3层

www.gbase.cn

022-58815678转0

022-58815678-8803

info@gbase.cn