add product-introduction 1920

src/router/index.js

@@ -149,6 +149,7 @@ const routes = [
       {
         path: "/product-introduction",
         name: "product-introduction",
+        meta: { bg: 'null' },
         component: () => import("@/views/product-introduction/index.vue"),
       },
     ],

src/views/financialinformation/annualreports/size1920/index.vue

@@ -658,7 +658,7 @@ onUnmounted(() => {
 .pagination-container {
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  justify-content: flex-end;
   margin-bottom: 30px;
   gap: 21px;
 }
@@ -675,7 +675,7 @@ onUnmounted(() => {
 .pagination-controls {
   display: flex;
   align-items: center;
-  gap: 21px;
+  gap: 8px;
 }
 
 .pagination-buttons {
@@ -787,6 +787,7 @@ onUnmounted(() => {
   font-size: 14px;
   line-height: 1.428em;
   color: #455363;
+  margin-right: 16px;
 }
 
 .goto-input {

src/views/financialinformation/quarterlyreports/size1920/index.vue

@@ -1,7 +1,5 @@
 <template>
-  <header></header>
+  <div class="page-container">
-  <main class="page-container">
-    <div class="financials-container">
     <!-- 标题区域 -->
     <div class="title-section">
       <div class="title-decoration"></div>
@@ -28,11 +26,7 @@
     <!-- 报告列表 -->
     <div class="reports-table">
       <div class="reports-list">
-          <div
+        <div v-for="(item, index) in pagedList" :key="index" class="table-row">
-            v-for="(item, index) in pagedList"
-            :key="index"
-            class="table-row"
-          >
           <div class="content">
             <div class="file-content">
               <div class="file-info">
@@ -143,8 +137,6 @@
       </div>
     </div>
   </div>
-  </main>
-  <footer></footer>
 </template>
 <script setup>
 import { ref, watch, onMounted, onUnmounted, computed, reactive } from "vue";
@@ -348,12 +340,6 @@ const handleClickOutside = (event) => {
 </script>
 <style scoped lang="scss">
 .page-container {
-  background-size: 100% 100%;
-  background-position: center;
-  background-repeat: no-repeat;
-}
-
-.financials-container {
   max-width: 932px;
   margin: 0 auto;
 }
@@ -553,7 +539,7 @@ const handleClickOutside = (event) => {
 .pagination-container {
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  justify-content: flex-end;
   margin-bottom: 30px;
   gap: 21px;
 }
@@ -570,7 +556,7 @@ const handleClickOutside = (event) => {
 .pagination-controls {
   display: flex;
   align-items: center;
-  gap: 21px;
+  gap: 8px;
 }
 
 .pagination-buttons {
@@ -682,6 +668,7 @@ const handleClickOutside = (event) => {
   font-size: 14px;
   line-height: 1.428em;
   color: #455363;
+  margin-right: 16px;
 }
 
 .goto-input {

src/views/historic-stock/size1920/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="historic-data-container" style="margin-bottom: 40px">
+  <div class="historic-data-container">
     <div class="echarts-container">
       <customEcharts></customEcharts>
     </div>
@@ -715,8 +715,9 @@ const getPageData = async () => {
 .pagination-container {
   display: flex;
   align-items: center;
-  justify-content: space-between;
   margin-top: 20px;
+  justify-content: flex-end;
+  margin-bottom: 30px;
   gap: 21px;
 }
 
@@ -732,7 +733,7 @@ const getPageData = async () => {
 .pagination-controls {
   display: flex;
   align-items: center;
-  gap: 21px;
+  gap: 8px;
 }
 
 .pagination-buttons {
@@ -740,7 +741,6 @@ const getPageData = async () => {
   align-items: center;
   gap: 8px;
 }
-
 .page-btn {
   display: flex;
   align-items: center;
@@ -844,6 +844,7 @@ const getPageData = async () => {
   font-size: 14px;
   line-height: 1.428em;
   color: #455363;
+  margin-right: 16px;
 }
 
 .goto-input {

src/views/product-introduction/size1920/index.vue

@@ -1,233 +1,546 @@
-<script setup>
+<script setup></script>
-import { useStockQuote } from "@/store/stock-quote/index.js";
-const { getStockQuate, stockQuote, formatted } = useStockQuote();
-console.log(stockQuote);
-getStockQuate();
-</script>
 
 <template>
-  <main ref="main" class="stock-quote-hero">
+  <div class="page-container">
+    <section class="hero-section relative">
       <div class="hero-content">
-      <!-- 标题区域 -->
+        <div class="hero-title">
-      <div class="title-section">
+          More than just a tool——<br />
-        <div class="title-decoration"></div>
+          Comprehensive growth solutions, <br />
-        <div class="stock-title">Stock Quote</div>
+          providing a one-stop solution for content creation,<br />
+          publishing, analysis, and monetization
         </div>
-      <section class="quote-layout">
-        <article class="price-card">
-          <div class="price-value">${{ stockQuote.price }}</div>
-          <div class="price-market">NASDAQ: FIEE</div>
-          <div class="price-time">{{ formatted }}</div>
-        </article>
-        <div class="stats-table">
-          <div class="stats-cell">
-            <span class="stat-title">Open</span>
-            <span class="stat-value">{{ stockQuote.open }}</span>
       </div>
-          <div class="stats-cell">
+      <div class="core-value-card">
-            <span class="stat-title">% Change</span>
+        <div class="card-content">
-            <span
+          <div class="card-title">Core Value</div>
-              class="stat-value"
+          <div class="card-text">
-              :class="
+            The FIEE-SAAS platform is a one-stop content operation solution
-                stockQuote.change
+            tailored for creators in the digital era. The platform utilizes
-                  ? String(stockQuote.change).includes('-')
+            intelligent distribution technology, A1 empowerment tools, and
-                    ? 'negative-change'
+            full-chain services,Assist you in efficiently reaching audiences on
-                    : String(stockQuote.change).includes('+')
+            global mainstream platforms such as TikTok, YouTube, and Instagram,
-                    ? 'positive-change'
+            creating a KOL brand effect, unlocking content value, and achieving
-                    : 'neutral-change'
+            sustainable growth.
-                  : 'neutral-change'
+          </div>
-              "
+        </div>
+      </div>
+      <img
+        src="@/assets/image/product-introduction-img2.png"
+        alt="background"
+        class="hero-bg-img"
+      />
+    </section>
+
+    <section class="features-section">
+      <div class="section-header">
+        <div class="decorator-bar"></div>
+        <div class="section-title">Product Features</div>
+      </div>
+      <div class="features-list">
+        <div class="feature-item">
+          <div class="feature-title">
+            <div class="vertical-line"></div>
+            One-click Synchronous Publishing
+          </div>
+          <div class="feature-description">
+            Synchronize graphic and video content to TikTok, YouTube, and
+            Instagram platforms at once, saving time on repetitive operations.
+          </div>
+        </div>
+        <div class="feature-item">
+          <div class="feature-title">
+            <div class="vertical-line"></div>
+            Intelligent Scheduled Publishing
+          </div>
+          <div class="feature-description">
+            Plan the content release time in advance, support batch scheduling,
+            and accurately grasp the optimal release time of each platform.
+          </div>
+        </div>
+        <div class="feature-item">
+          <div class="feature-title">
+            <div class="vertical-line"></div>
+            Unified Management of Multiple Accounts
+          </div>
+          <div class="feature-description">
+            Easily manage multiple accounts on one platform without the need for
+            repeated login and switching, improving team collaboration
+            efficiency.
+          </div>
+        </div>
+        <div class="feature-item">
+          <div class="feature-title">
+            <div class="vertical-line"></div>
+            Cloud Content Library
+          </div>
+          <div class="feature-description">
+            Safely store and manage all creative materials, access and use them
+            anytime, anywhere, and support quick retrieval and reuse.
+          </div>
+        </div>
+        <div class="feature-item">
+          <div class="feature-title">
+            <div class="vertical-line"></div>
+            Basic Data Tracking
+          </div>
+          <div class="feature-description">
+            Visually view the content performance of various platforms,
+            understand core data indicators, and provide a basis for optimizing
+            strategies.
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="solutions-section">
+      <div class="section-header">
+        <div class="decorator-bar"></div>
+        <div class="section-title">Value Added Solutions</div>
+      </div>
+      <div class="solutions-content">
+        <div class="solutions-list">
+          <div class="solution-item">
+            <img
+              src="@/assets/image/product-introduction-icon1.png"
+              alt="KOL Brand Promotion"
+              class="solution-icon"
+            />
+            <div class="solution-title">
+              <div class="vertical-line"></div>
+              KOL Brand Promotion Services
+            </div>
+            <div class="solution-description">
+              Efficiently connect high-quality business cooperation
+              opportunities and complete the entire process management from
+              order acceptance to publication within the platform.
+            </div>
+          </div>
+          <div class="solution-item">
+            <img
+              src="@/assets/image/product-introduction-icon2.png"
+              alt="Content Creation Support"
+              class="solution-icon"
+            />
+            <div class="solution-title">
+              <div class="vertical-line"></div>
+              Professional Content Creation Support
+            </div>
+            <div class="solution-description">
+              Connect professional shooting and post production teams for you,
+              create high-quality "art+story" content, and strengthen IP
+              influence.
+            </div>
+          </div>
+          <div class="solution-item">
+            <img
+              src="@/assets/image/product-introduction-icon3.png"
+              alt="Account Operation"
+              class="solution-icon"
+            />
+            <div class="solution-title">
+              <div class="vertical-line"></div>
+              Account Operation and Hosting Services
+            </div>
+            <div class="solution-description">
+              From 0 to 1 account positioning, follower growth strategy to
+              monetization cycle, operation experts provide full cycle running
+              and hosting services.
+            </div>
+          </div>
+        </div>
+        <div class="solution-image-container">
+          <img
+            src="@/assets/image/product-introduction-img1.png"
+            alt="Value Added Solutions"
+            class="solution-image"
+          />
+        </div>
+      </div>
+    </section>
+
+    <section class="advantages-section">
+      <div class="advantages-content">
+        <div class="advantages-header">
+          <div class="decorator-bar"></div>
+          <div class="section-title text-white">Our Advantages</div>
+        </div>
+        <div class="advantages-list">
+          <div class="advantage-item">
+            <div class="advantage-title">
+              <div class="vertical-line"></div>
+              Time Saving
+            </div>
+            <div class="advantage-description">
+              Multi platform publishing efficiency improvement, allowing you to
+              focus on content creation.
+            </div>
+          </div>
+          <div class="advantage-item">
+            <div class="advantage-title">
+              <div class="vertical-line"></div>
+              Safe and Reliable
+            </div>
+            <div class="advantage-description">
+              Enterprise level data encryption and permission control ensure
+              account and content security.
+            </div>
+          </div>
+          <div class="advantage-item">
+            <div class="advantage-title">
+              <div class="vertical-line"></div>
+              Maintain Consistency
+            </div>
+            <div class="advantage-description">
+              Ensure that brand information is presented uniformly on all
+              platforms.
+            </div>
+          </div>
+          <div class="advantage-item">
+            <div class="advantage-title">
+              <div class="vertical-line"></div>
+              Data Driven
+            </div>
+            <div class="advantage-description">
+              Optimizing Content Strategies Based on Actual Performance.
+            </div>
+          </div>
+          <div class="advantage-item">
+            <div class="advantage-title">
+              <div class="vertical-line"></div>
+              Easy to Use
+            </div>
+            <div class="advantage-description">
+              Intuitive interface design, no need for professional technical
+              background.
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="cta-section">
+      <img
+        src="@/assets/image/product-introduction-img5.png"
+        alt="background"
+        class="cta-bg-img"
+      />
+      <div class="cta-content">
+        <div class="cta-text">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="60"
+            height="32"
+            viewBox="0 0 60 32"
+            fill="none"
           >
-              {{ stockQuote.change }}
+            <path
-            </span>
+              d="M42.4968 0.636391C43.3437 -0.21213 44.7165 -0.21213 45.5635 0.636391L59.3648 14.4638C60.2117 15.3123 60.2117 16.6877 59.3648 17.5362L45.5635 31.3636C44.7165 32.2121 43.3437 32.2121 42.4968 31.3636C41.6499 30.5151 41.6499 29.1397 42.4968 28.2912L52.5962 18.1728H2.16868C0.970951 18.1728 0 17.2 0 16C0 14.8 0.970951 13.8272 2.16868 13.8272H52.5962L42.4968 3.70883C41.6499 2.86031 41.6499 1.48491 42.4968 0.636391Z"
+              fill="#FF7BAC"
+            />
+          </svg>
+          <div class="cta-title">
+            Get customized <br />
+            solutions for free
           </div>
-          <div class="stats-cell">
-            <span class="stat-title">Day's Range</span>
-            <span class="stat-value">{{ stockQuote.daysRange }}</span>
         </div>
-          <div class="stats-cell">
+        <div class="cta-qr-code">
-            <span class="stat-title">52-Week Range</span>
+          <img
-            <span class="stat-value">{{ stockQuote.week52Range }}</span>
+            src="@/assets/image/product-introduction-img6.png"
-          </div>
+            alt="QR Code"
-          <div class="stats-cell">
+          />
-            <span class="stat-title">Volume</span>
-            <span class="stat-value">{{ stockQuote.volume }}</span>
-          </div>
-          <div class="stats-cell">
-            <span class="stat-title">Market Cap</span>
-            <span class="stat-value">{{ stockQuote.marketCap }}</span>
         </div>
       </div>
     </section>
   </div>
-  </main>
 </template>
 
 <style scoped>
-.stock-quote-hero {
+.page-container {
+  background-color: #fff;
+  font-family: "PingFang SC", sans-serif;
+  /* max-width: 932px; */
+  margin: 0 auto;
+}
+
+.hero-section {
+  text-align: center;
   position: relative;
+  background-image: url("@/assets/image/product-introduction-img3.png");
+  background-repeat: no-repeat;
+  background-size: 100% auto;
+  background-position: top;
 }
 
 .hero-content {
-  max-width: 1200px;
+  position: relative;
-  margin: 0 auto;
+  z-index: 2;
-  padding: 0 16px;
-}
-
-.hero-header {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 12px;
-}
-.title-section {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  margin-bottom: 32px;
-  padding: 0 16px;
-}
-.title-decoration {
-  width: 58px;
-  height: 7px;
-  background: #ff7bac;
-  margin: auto 0;
-  margin-top: 43px;
-}
-
-.stock-title {
-  font-family: "PingFang SC", sans-serif;
-  font-weight: 500;
-  font-size: 40px;
-  line-height: 1.4em;
-  letter-spacing: 3%;
-  color: #000000;
-}
-
-.gradient-badge {
-  width: 48px;
-  height: 4px;
-  border-radius: 4px;
-  background: #e62968;
 }
 
 .hero-title {
-  font-size: 32px;
+  font-size: 40px;
-  font-weight: 600;
+  font-weight: 500;
-  letter-spacing: 0.02em;
+  line-height: 56px;
-  color: #0d1b2a;
+  letter-spacing: 1.2px;
+  padding: 153px 0;
+  color: #000;
+  z-index: 2;
+}
+.hero-bg-img {
+  position: absolute;
+  bottom: -84px;
+  left: 0;
+  width: 100%;
+  /* height: 100%; */
+  z-index: 1;
+}
+.core-value-card {
+  width: 932px;
+  padding: 40px 32px;
+  margin: 0 auto;
+  background-color: #fff;
+  border-radius: 16px;
+  box-shadow: 0px 3px 14px 0px rgba(0, 0, 0, 0.16);
+  text-align: left;
+  z-index: 2;
+  position: relative;
 }
 
-.quote-layout {
+.card-content {
-  display: grid;
-  grid-template-columns: 420px 1fr;
-  align-items: start;
-  margin-top: 56px;
-}
-
-.price-card {
-  width: 420px;
-  min-height: 420px;
-  border-radius: 32px;
-  background: #ffffff;
-  border: 1px solid #f0f3f8;
-  box-shadow: 0 12px 32px rgba(16, 46, 86, 0.08);
   display: flex;
   flex-direction: column;
-  justify-content: center;
+  gap: 24px;
+}
+
+.card-title {
+  font-size: 40px;
+  font-weight: 500;
+  line-height: 56px;
+  letter-spacing: 1.2px;
+}
+
+.card-text {
+  font-size: 16px;
+  line-height: 22px;
+  color: #455363;
+  letter-spacing: 0.48px;
+}
+
+.section-header {
+  margin-bottom: 32px;
+  padding: 0 16px;
+}
+
+.decorator-bar {
+  width: 58px;
+  height: 7px;
+  background-color: #ff7bac;
+  margin-bottom: 16px;
+}
+
+.section-title {
+  font-size: 40px;
+  font-weight: 500;
+  line-height: 56px;
+  letter-spacing: 1.2px;
+  color: #000;
+}
+.features-section {
+  padding-top: 200px;
+  max-width: 932px;
+  margin: 0 auto;
+}
+.features-list {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.feature-item {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.feature-title {
+  font-size: 24px;
+  font-weight: 500;
+  line-height: 32px;
+  letter-spacing: 1.2px;
+  display: flex;
   align-items: center;
-  padding: 16px;
+  gap: 16px;
-  text-align: center;
+}
+.feature-description {
+  font-size: 16px;
+  line-height: 22px;
+  color: #455363;
+  letter-spacing: 0.48px;
+  padding: 0 16px;
 }
 
-.price-value {
+.solutions-section {
-  font-size: 110px;
+  padding-top: 80px;
-  font-weight: 700;
+  max-width: 932px;
-  letter-spacing: -0.03em;
+  margin: 0 auto;
-  background: linear-gradient(90deg, #ff7bac 0%, #0ff 100%);
+}
-  -webkit-background-clip: text;
+.solutions-content {
-  -webkit-text-fill-color: transparent;
+  display: flex;
-  text-transform: uppercase;
+  gap: 16px;
+}
+.solutions-list {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  width: 466px;
+}
+.solution-item {
+  text-align: left;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.solution-icon {
+  width: 92px;
+  height: 76px;
+  padding-left: 16px;
+}
+.solution-title {
+  font-size: 20px;
+  line-height: 28px;
+  font-weight: 500;
+  display: flex;
+  gap: 16px;
+  align-items: center;
+}
+.solution-description {
+  font-size: 16px;
+  line-height: 22px;
+  color: #455363;
+  letter-spacing: 0.48px;
+  padding: 0 16px;
+}
+.solution-image-container {
+  width: 434px;
+  height: 628px;
+  border-radius: 16px;
+}
+.solution-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 16px;
 }
 
-.price-market {
+.advantages-section {
-  font-size: 22px;
+  margin-top: 80px;
-  font-weight: 600;
+  padding: 80px 0;
-  letter-spacing: 0.04em;
+  background-image: url("@/assets/image/product-introduction-img4.png");
-  color: #0d1b2a;
+  background-size: cover;
-  margin-bottom: 12px;
+  background-position: center;
+  color: #fff;
+  position: relative;
 }
 
-.price-time {
+.advantages-content {
-  font-size: 18px;
+  max-width: 932px;
-  letter-spacing: 0.02em;
+  margin: 0 auto;
-  color: #5a6775;
+  display: flex;
+  gap: 16px;
+  position: relative;
+  z-index: 1;
 }
 
-.stats-table {
+.advantages-header {
-  display: grid;
+  width: 466px;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  padding: 0 16px;
-  grid-auto-rows: minmax(0, 1fr);
+}
-  border-radius: 24px;
+.advantages-list {
+  width: 466px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+.advantage-item {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.advantage-title {
+  font-size: 24px;
+  font-weight: 500;
+  line-height: 32px;
+  letter-spacing: 1.2px;
+  display: flex;
+  gap: 16px;
+  align-items: center;
+}
+.advantage-description {
+  font-size: 16px;
+  line-height: 22px;
+  letter-spacing: 0.48px;
+  opacity: 0.7;
+}
+.text-white {
+  color: #fff;
+}
+
+.cta-section {
+  padding: 80px 0;
+  position: relative;
+  max-width: 932px;
+  margin: 0 auto;
   overflow: hidden;
 }
-
+.cta-content {
-.stats-cell {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 16px;
+  position: relative;
+  z-index: 1;
+}
+.cta-text {
   display: flex;
   flex-direction: column;
-  justify-content: center;
+  justify-content: space-between;
-  gap: 8px;
+  height: 188px;
-  padding: 24px 32px;
-  border-bottom: 1px solid rgba(232, 237, 245, 0.85);
-  border-right: 1px solid rgba(232, 237, 245, 0.85);
 }
-
+.cta-arrow {
-.stats-cell:nth-child(2n) {
+  width: 60px;
-  border-right: none;
+  height: 32px;
 }
-
+.cta-title {
-.stats-cell:nth-last-child(-n + 2) {
+  font-size: 40px;
-  border-bottom: none;
-}
-
-.stat-title {
-  font-size: 14px;
   font-weight: 500;
-  letter-spacing: 0.08em;
+  line-height: 56px;
-  text-transform: uppercase;
+  letter-spacing: 1.2px;
-  color: #73849a;
 }
-
+.cta-qr-code {
-.stat-value {
+  width: 188px;
-  font-size: 22px;
+  height: 188px;
-  font-weight: 600;
+  background-color: #90ffff;
-  letter-spacing: 0.02em;
+  border-radius: 16px;
-  color: #10243b;
+  padding: 14px;
 }
-
+.cta-qr-code img {
-.stat-title {
+  width: 100%;
-  font-size: 18px;
+  height: 100%;
-  font-weight: 500;
+  object-fit: contain;
-  letter-spacing: 0.03em;
-  color: #455363;
 }
-
+.cta-bg-img {
-.stat-value {
+  position: absolute;
-  font-size: 30px;
+  top: 80px;
-  font-weight: 600;
+  left: 201px;
-  letter-spacing: 0.04em;
+  width: 530px;
-  color: #0d1b2a;
+  height: 268px;
+  opacity: 0.8;
+  z-index: 0;
 }
-
+.vertical-line {
-.positive-change {
+  width: 1px;
-  color: #00c48c;
+  height: 20px;
-}
+  background: #ff7bac;
-
+  flex-shrink: 0;
-.negative-change {
-  color: #cf3050;
-}
-
-.neutral-change {
-  color: #0d1b2a;
 }
 </style>