fixbug
This commit is contained in:
scout
parent
773562f74e
commit
b994d66948
|
Before Width: | Height: | Size: 396 KiB After Width: | Height: | Size: 396 KiB |
|
Before Width: | Height: | Size: 835 KiB After Width: | Height: | Size: 835 KiB |
|
Before Width: | Height: | Size: 866 KiB After Width: | Height: | Size: 866 KiB |
|
Before Width: | Height: | Size: 886 KiB After Width: | Height: | Size: 886 KiB |
BIN
src/assets/image/banner/en/1.png
Normal file
BIN
src/assets/image/banner/en/1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 459 KiB |
BIN
src/assets/image/banner/en/2.png
Normal file
BIN
src/assets/image/banner/en/2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 434 KiB |
BIN
src/assets/image/banner/en/3.png
Normal file
BIN
src/assets/image/banner/en/3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 503 KiB |
BIN
src/assets/image/banner/en/4.png
Normal file
BIN
src/assets/image/banner/en/4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 491 KiB |
BIN
src/assets/image/banner/jp/1.png
Normal file
BIN
src/assets/image/banner/jp/1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 454 KiB |
BIN
src/assets/image/banner/jp/2.png
Normal file
BIN
src/assets/image/banner/jp/2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 442 KiB |
BIN
src/assets/image/banner/jp/3.png
Normal file
BIN
src/assets/image/banner/jp/3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 465 KiB |
BIN
src/assets/image/banner/jp/4.png
Normal file
BIN
src/assets/image/banner/jp/4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 496 KiB |
BIN
src/assets/image/banner/tw/1.png
Normal file
BIN
src/assets/image/banner/tw/1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 403 KiB |
BIN
src/assets/image/banner/tw/2.png
Normal file
BIN
src/assets/image/banner/tw/2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 390 KiB |
BIN
src/assets/image/banner/tw/3.png
Normal file
BIN
src/assets/image/banner/tw/3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 410 KiB |
BIN
src/assets/image/banner/tw/4.png
Normal file
BIN
src/assets/image/banner/tw/4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 414 KiB |
@ -1,153 +1,333 @@
|
||||
export default {
|
||||
common: {
|
||||
submit: '送信',
|
||||
cancel: 'キャンセル',
|
||||
confirm: '確認'
|
||||
"common": {
|
||||
"submit": "提出",
|
||||
"cancel": "キャンセル",
|
||||
"confirm": "確認"
|
||||
},
|
||||
home: {
|
||||
title: '児童美術コレクション',
|
||||
vote: '投票',
|
||||
signup: '登録',
|
||||
nav: {
|
||||
home: 'ホーム',
|
||||
company: '会社概要',
|
||||
businessintroduction: '事業紹介'
|
||||
"home": {
|
||||
"nav": {
|
||||
"home": "ホーム",
|
||||
"company": "会社概要",
|
||||
"businessintroduction": "業務紹介"
|
||||
},
|
||||
scroll: {
|
||||
tip: 'スクロールダウン'
|
||||
"scroll": {
|
||||
"tip": "下にスクロール"
|
||||
},
|
||||
section2: {
|
||||
title1: 'FiEEとアートクリエイター',
|
||||
title2: 'グローバルな影響力への新たな旅'
|
||||
"section2": {
|
||||
"title1": "FiEEが文芸クリエイターと手を組み",
|
||||
"title2": "新たなグローバルインパクトへの旅立ち"
|
||||
},
|
||||
section3: {
|
||||
label: '会社プロフィール',
|
||||
title: 'FiEE',
|
||||
desc: '最先端技術に深く根ざしたイノベーションのパイオニアとして、FiEEはAIとビッグデータのアート創作への応用を継続的に研究しています。芸術的コンセプトの深い分析と創造的実践への深い洞察を通じて、私たちはアートの発展動向を正確に把握しています。情熱を持って、様々な技術とリソースを統合し、インスピレーションからプロモーションまで、アートクリエイターに包括的な支援を提供しています。'
|
||||
"section3": {
|
||||
"label": "会社概要",
|
||||
"title": "FiEE",
|
||||
"desc": "先進技術分野に深く根ざしたイノベーションリーダーとして、FiEEはAIやビッグデータの文芸創作への応用を継続的に研究しています。文芸理論の深い分析と創作実践への洞察を通じて、私たちは文芸の発展の流れを正確に把握しています。熱意を持って、さまざまな技術とリソースを統合し、文芸クリエイターにインスピレーションから作品のプロモーションまで全方位のサポートを提供します。",
|
||||
"features": {
|
||||
"data": {
|
||||
"title": "ビッグデータで創作の方向性を決定",
|
||||
"desc": "自社開発のビッグデータモデルを活用し、世界の文芸市場を深く分析し、クリエイターに明確な方向性を提供します。"
|
||||
},
|
||||
"ai": {
|
||||
"title": "AIアルゴリズムで伝播の壁を打破",
|
||||
"desc": "最先端のAIアルゴリズムを活用し、パーソナライズされた推薦システムを構築し、正確にオーディエンスをマッチングさせ、文芸の伝播の壁を打破します。"
|
||||
},
|
||||
"cloud": {
|
||||
"title": "クラウドコンピューティングで文芸の価値を発掘",
|
||||
"desc": "卓越したクラウドコンピューティング能力を活用し、大量のデータを効率的に処理し、クリエイターの探求と拡大をサポートします。"
|
||||
},
|
||||
"cooperation": {
|
||||
"title": "専門家との協力で業界の基準を確立",
|
||||
"desc": "専門の文芸機関や学術プラットフォームと協力し、クリエイターの作品が評価され、専門的な文芸の基準を確立します。"
|
||||
},
|
||||
"promotion": {
|
||||
"title": "多様なプロモーションでグローバルブランドを構築",
|
||||
"desc": "多様な伝播と革新的なマーケティングを活用し、ブランド構築とプロモーションを組み合わせ、クリエイターがグローバルな文芸ブランドとなることを支援します。"
|
||||
}
|
||||
}
|
||||
},
|
||||
vote: {
|
||||
title: '児童美術コレクションイベント',
|
||||
voteBtn: '投票する'
|
||||
"section4": {
|
||||
"label": "業務紹介",
|
||||
"title": "多様な業務が連携し、文芸の影響力を飛躍させる",
|
||||
"desc": "FiEEは文芸クリエイターにグローバルなプロモーションと専門的な運営サービスを提供することに専念しています。正確なターゲティングとマルチプラットフォーム連携により、地理的な制限を打破し、作品を国際舞台に押し上げます。強力なリソースネットワークを活用し、ビジネスチャンスを提供し、AIとビッグデータを活用した正確なマーケティングにより、オーディエンスに効率的にリーチし、クリエイターが芸術的および商業的価値を両立することを支援します。",
|
||||
"cards1": {
|
||||
"title": "グローバルな花卉産業、国際芸術交流センターに適しています",
|
||||
"desc": "FiEEは「文芸に国境はない」という理念を持ち、マルチプラットフォーム連携を活用し、地理的な制限を打破し、作品を世界市場に押し上げ、潜在的な消費者を引き付け、文芸クリエイターが国際舞台で輝くことを支援します。"
|
||||
},
|
||||
entry: {
|
||||
title: '登録',
|
||||
form: {
|
||||
name: '名前',
|
||||
phone: '電話番号',
|
||||
submit: '登録を送信'
|
||||
"cards2": {
|
||||
"title": "専門的な運営チーム、正確なターゲティング",
|
||||
"desc": "FiEEの運営チームは多分野の経験豊富な人材を集め、豊富な経験と市場への洞察力を活かし、データ分析を通じて正確なプロモーション戦略を策定し、作品がターゲットオーディエンスに正確にリーチし、深い共感を生むことを支援します。"
|
||||
},
|
||||
"cards3": {
|
||||
"title": "強力なリソースネットワーク、無限のビジネスチャンスを拡大",
|
||||
"desc": "FiEEは世界の有名な文芸機関や主要メディアと深く協力し、広大なリソースネットワークを構築し、文芸クリエイターにハイエンドなリソースを提供し、芸術作品のライセンスや派生品開発などのビジネスチャンスを拡大します。"
|
||||
},
|
||||
"cards4": {
|
||||
"title": "技術駆動型マーケティング、効率的にファン層にリーチ",
|
||||
"desc": "FiEEはAIアルゴリズムとビッグデータ分析を活用し、ターゲット層を正確にプロファイリングし、パーソナライズされたプロモーションを実現し、迅速にファン層にリーチし、忠実なファンコミュニティを構築し、インテリジェントツールを活用してプロモーション戦略を最適化し、文芸クリエイターの芸術活動を支援します。"
|
||||
}
|
||||
}
|
||||
},
|
||||
businessintroduction: {
|
||||
hero: {
|
||||
title1: 'AI × ショートビデオ',
|
||||
title2: '文化創造の新しいビジョンを先導',
|
||||
desc: '最先端のAI技術とショートビデオプラットフォームの独自の利点を深く融合し、探索の旅を先駆的に開始し、文化創造分野を前例のない新しい地平へと導きます'
|
||||
"companyprofil": {
|
||||
"slogan": {
|
||||
"title1": "文芸の全周期をリード",
|
||||
"title2": "価値創造の新たな頂点へ",
|
||||
"desc": "FiEEは文芸創作の全周期の舵取り役となることを目指し、インスピレーションの誕生から作品の完成、市場プロモーション、文化の広範な伝播までの各重要なポイントに深く関与します。"
|
||||
},
|
||||
industry: {
|
||||
label: '業界の現状',
|
||||
title: '文化創造の障壁を突破、ショートビデオが成長の新コードを解き放つ',
|
||||
desc: '文化創造分野がコンテンツの同質化と創造的疲弊の課題に直面する中、ショートビデオは独自の没入型体験と強力なソーシャル伝播性を活かし、制約を打破し、春雨のように業界に新たな活力を注入し、成長を牽引する強力なエンジンとなっています。',
|
||||
challenges: {
|
||||
title: 'アート市場のジレンマ',
|
||||
items: [
|
||||
"intro": {
|
||||
"label": "会社紹介",
|
||||
"title1": "独自の存在",
|
||||
"title2": "全周期価値提供のリーダー",
|
||||
"desc": "FiEEは従来の単一サービス機関の限界を打破し、業界の変革者として、最先端技術と多様なリソースを深く融合させ、文芸創作の萌芽から開花までの全プロセスをカバーする「全周期」価値提供システムを構築しました。文芸の世界に足を踏み入れたばかりの新人クリエイターから、創作の壁を打破し、より高い文芸の頂点を目指す成熟した文芸工作者まで、FiEEはあなたの最も堅実なパートナーとなり、あなたの文芸の旅をサポートし、前進の道を照らします。"
|
||||
},
|
||||
"team": {
|
||||
"label": "チーム紹介",
|
||||
"title1": "エリートを集結",
|
||||
"title2": "文芸変革のエンジンを点火",
|
||||
"desc": "FiEEチームは運営の専門家、技術のエリート、国際アドバイザーで構成され、コンテンツ企画からグローバルプロモーションまでの全方位のサポートを提供します。異分野との協力とリソース統合を通じて、FiEEは伝統的な境界を打破し、文芸の新たな表現を探求します。最先端技術と正確なマーケティングを活用し、作品の商業的価値と社会的影響力を両立させ、文芸の繁栄に持続的な力を注入します。",
|
||||
"features": {
|
||||
"global": {
|
||||
"title": "グローバルに展開、多様なリーダーシップ",
|
||||
"desc": "海外での正確なマーケティング、多様なチャネルの構築、国際ブランドの確立。多言語プラットフォームのインテリジェント管理、ローカライズされたサービスを提供。"
|
||||
},
|
||||
"fans": {
|
||||
"title": "ファン層を深耕、エコシステムを構築",
|
||||
"desc": "コミュニティの細かい運営、多様な付加価値サービスを提供。コミュニティ管理ツールのアップグレード、ユーザーに正確にリーチ。革新的なインセンティブメカニズム、特徴的な派生品を開発。"
|
||||
},
|
||||
"talent": {
|
||||
"title": "才能を広く集め、チームを進化",
|
||||
"desc": "技術、マーケティングのエリートを広く集め、革新の活力を注入。内部トレーニングを強化、組織構造を最適化。先進的な理念を導入、管理とサービスの効率を向上。"
|
||||
}
|
||||
}
|
||||
},
|
||||
"achievement": {
|
||||
"label": "卓越した成果",
|
||||
"title": "開拓の姿勢で、文芸の頂点へ",
|
||||
"desc": "長年にわたり文芸分野に深く関わり、FiEEはビジネスの領域を継続的に拡大し、豊富な業界リソースを蓄積し、広範な協力ネットワークを構築しました。現在、複数の世界的な人気のあるメディアプラットフォームと深く協力し、多角的に文芸クリエイターが国際舞台で輝き、独自の芸術的光芒を放つことを支援しています。",
|
||||
"certification": {
|
||||
"title1": "権威ある認証",
|
||||
"title2": "文芸事業の堅固な基盤を築く",
|
||||
"desc": "FiEEは専門的かつ権威ある認証サービスを提供し、文芸クリエイターが業界で広く認められる資格を取得することを支援します。これにより、クリエイターの作品の価値が大幅に向上し、競争の激しい芸術市場で頭角を現し、市場競争力を大幅に強化し、文芸クリエイターの事業の堅固な基盤を築きます。"
|
||||
},
|
||||
"platform": {
|
||||
"title1": "グローバルプラットフォームマトリックス",
|
||||
"title2": "文芸伝播の境界を拡大",
|
||||
"desc": "FiEEは豊富な業界リソースと広範な協力ネットワークを活用し、30以上の世界的な人気のあるメディアプラットフォームと深い戦略的パートナーシップを結んでいます。国際的に有名なソーシャルプラットフォームから、文芸分野に特化した専門メディアまで、私たちは文芸クリエイターのために専用アカウントを精心に作成し、先進的な最適化戦略を活用し、文芸クリエイターのアカウントが多くのクリエイターの中から際立つことを支援します。"
|
||||
}
|
||||
},
|
||||
"news": {
|
||||
"label": "FiEEの最新動向に焦点を当てる",
|
||||
"title": "トレンドを洞察し、文芸の前進の灯台を照らす",
|
||||
"desc": "FiEEは常に文芸分野に根ざし、世界の芸術のトレンドを追い続けています。ケーススタディの深い分析と異分野との議論を通じて、文芸と技術、ビジネスの深い融合を探求し、文芸事業の未来の発展に向けた先見性のある洞察とインスピレーションを提供します。",
|
||||
"carousel": {
|
||||
"item1": {
|
||||
"title": "技術的ブレークスルーを実現、文芸創作技術の革新をリード",
|
||||
"desc": "デジタル化の波が文芸分野を席巻する中、文芸創作は大きな変革を経験しています。FiEEはチームの不断の努力と革新精神により、文芸創作技術分野で画期的なブレークスルーを達成しました。数え切れないほどの日夜の努力を経て、FiEEが独自に開発した新世代のインテリジェント創作支援システムが正式にリリースされ、文芸創作に新たな発展の道を開き、業界全体に前例のない変革と機会をもたらしました。"
|
||||
},
|
||||
"item2": {
|
||||
"title": "グローバル戦略のアップグレード、FiEEが30以上の国際プラットフォームと戦略的提携を結び、文芸伝播の新たなマトリックスを構築",
|
||||
"desc": "世界の文化融合が急速に進む中、文芸分野は文化交流と革新の最前線となっています。文芸業界のリーダーとして、FiEEは鋭い戦略的視野と果断な行動力で、この世界的な文化交流の波に積極的に参加しています。最近、FiEEはTikTok、Instagramなどの30以上の国際的なメディアプラットフォームと深い戦略的提携を結び、同時に「文芸無界計画」を正式に開始し、地域間の文化的障壁を打破することを目指しています。"
|
||||
},
|
||||
"item3": {
|
||||
"title": "文芸クリエイターを支援、FiEEが「AI × ショートビデオ」全リンクソリューションを発表",
|
||||
"desc": "文芸クリエイターにとって、創作の壁と効率の低下は前進の道に立ちはだかる大きな障害です。魅力的なショートビデオの脚本を考えるには、多くの時間と労力が必要で、クリエイターは独自のアイデアを考えるだけでなく、オーディエンスの好みや市場のトレンドにも気を配らなければなりません。作品が完成した後の伝播とプロモーションも、越えるのが難しい大きな壁です。"
|
||||
},
|
||||
"item4": {
|
||||
"title": "FiEEが18ヶ月の芸術KOL育成プログラムを開始、文芸分野の未来のスターを育成",
|
||||
"desc": "文芸産業が急速に発展する中、質の高いコンテンツクリエイターの重要性がますます高まっています。業界のパイオニア企業として、FiEEは常に文芸分野の人材育成と発展に注目しています。今日、FiEEは18ヶ月間の芸術KOL育成プログラムを正式に開始し、文芸分野に強力な影響力を持つ未来のスターを育成し、業界全体の革新発展を推進することを目指しています。"
|
||||
},
|
||||
"item5": {
|
||||
"title": "多様な人材が集結、FiEEが文芸革新発展の基盤を築く",
|
||||
"desc": "現在、文芸業界が急速に発展し、百花繚乱の時代において、革新は業界の持続的な進歩と伝統的な枠組みの打破をリードする重要な要素となっています。そして、その根源をたどれば、人材が革新の核心的な原動力であり、その重要性は言うまでもありません。FiEEはこのことを深く理解し、広大な度量と先見性のある戦略的視野で、積極的に才能を広く集め、運営の専門家、技術のエリート、国際アドバイザーを精心に集結させ、文芸分野の革新の旅の堅固な発展基盤を築きました。"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"companyprofildetail": {
|
||||
"article1": {
|
||||
"title": "技術的ブレークスルーを実現、文芸創作技術の革新をリード",
|
||||
"date": "2025年02月07日 12時00分",
|
||||
"content": [
|
||||
"デジタル化の波が文芸分野を席巻する中、文芸創作は大きな変革を経験しています。FiEEはチームの不断の努力と革新精神により、文芸創作技術分野で画期的なブレークスルーを達成しました。",
|
||||
"数え切れないほどの日夜の努力を経て、FiEEが独自に開発した新世代のインテリジェント創作支援システムが正式にリリースされ、文芸創作に新たな発展の道を開き、業界全体に前例のない変革と機会をもたらしました。",
|
||||
"開発プロセスでは、技術チームは多くの困難な課題に直面しました。大量の文芸作品データの収集段階では、異なる時代、異なるスタイル、異なるタイプの文芸作品からデータを取得する必要があり、古今東西の文学名作、映画傑作、音楽の古典などをカバーし、これらのデータは広範で形式も多様であり、収集は非常に困難でした。データの整理と分析では、データの正確性と完全性を確保するだけでなく、異なるタイプのデータを分類して統合し、後の深い分析に備える必要がありました。",
|
||||
"人工知能アルゴリズムの最適化も容易ではなく、チームはアルゴリズムのパラメータを不断に調整し、大量のデータから価値のある情報を正確に抽出できるようにしなければなりませんでした。ビッグデータモデルの構築はさらに複雑で、モデルの安定性、拡張性、および他の技術との互換性を考慮する必要がありました。",
|
||||
"チームメンバーは国内外の大量の資料を調査し、最先端の学術論文から業界の実践例まで、あらゆる可能なインスピレーション源を見逃さず、無数の実験とシミュレーションを行い、毎回の実験が失敗する可能性があるにもかかわらず、彼らは決して諦めず、不断に計画を最適化しました。",
|
||||
"例えば、異なるタイプの文芸作品データの互換性を処理する際、チームは多次元データ分類アルゴリズムを革新的に採用しました。このアルゴリズムは、データの時間次元、スタイル次元、テーマ次元などの複数の角度から分析を行い、一見無秩序に見えるデータを効果的に分類し、データの正確な分析と利用を確保し、後のインテリジェント創作支援の堅固な基盤を築きました。このインテリジェント創作支援システムは、人工知能、ビッグデータなどの最先端技術を統合し、クリエイターに全方位でインテリジェントな創作支援を提供します。大量の文芸作品データの深い分析を通じて、システムは現在の文芸創作のトレンドとホットスポットを正確に把握できます。",
|
||||
"創作効率の向上において、システムの人工知能技術は強大な力を発揮します。伝統的な創作方法では、数ヶ月かけてフレームワークを考える必要があるかもしれませんが、このシステムを使用すれば、わずか数日で初期フレームワークを生成でき、クリエイターはその上で詳細を完成させるだけでよく、創作サイクルを大幅に短縮します。",
|
||||
"会社の技術開発チームの責任者は発表会で興奮を隠せずに語りました：「この技術的ブレークスルーは私たちのチームが長年にわたって努力してきた結晶であり、FiEEが文芸創作技術の革新に大胆に挑戦した結果です。私たちは、技術が急速に進化する今日、不断に革新を続けることで、文芸クリエイターにより強力な創作ツールを提供し、文芸創作が高品質で高効率な方向に進むことを推進できると確信しています。」",
|
||||
"業界の専門家は次のように評価しています：「FiEEのこの技術的ブレークスルーは、間違いなく文芸創作分野に新たな活力を注入しました。それは創作効率を向上させただけでなく、クリエイターに新たな創作のアイデアをもたらし、業界全体のデジタル化転換に貴重な経験と参考を提供しました。」",
|
||||
"この技術的ブレークスルーにより、FiEEは文芸技術分野での競争力を大幅に向上させ、業界の技術リーダーとなりました。今後、FiEEは技術開発への投資をさらに拡大し、才能を広く集め、不断に革新を探求し、文芸産業のデジタル化転換により多くの高品質な技術支援を提供し、文芸創作が新たな高みに到達することを推進します。"
|
||||
]
|
||||
},
|
||||
"article2": {
|
||||
"title": "グローバル戦略のアップグレード、FiEEが30以上の国際プラットフォームと戦略的提携を結び、文芸伝播の新たなマトリックスを構築",
|
||||
"date": "2025年02月10日 10時30分",
|
||||
"content": [
|
||||
"世界の文化融合が急速に進む中、文芸分野は文化交流と革新の最前線となっています。文芸業界のリーダーとして、FiEEは鋭い戦略的視野と果断な行動力で、この世界的な文化交流の波に積極的に参加しています。",
|
||||
"最近、FiEEはTikTok、Instagramなどの30以上の国際的なメディアプラットフォームと深い戦略的提携を結び、同時に「文芸無界計画」を正式に開始し、地域間の文化的障壁を打破することを目指しています。今回のFiEEと世界30以上のトッププラットフォームとの深い協力は、全方位で深いリソース統合と協調革新の祭典と言えます。",
|
||||
"ソーシャルメディア分野では、TikTokとの協力が大きなハイライトです。TikTokはその独特なショートビデオエコシステムと強力なアルゴリズム推薦システムにより、世界中で数十億のユーザーを惹きつけています。このプラットフォームを活用し、FiEEは文芸クリエイターの素晴らしい作品を非常に魅力的なショートビデオ形式で、迅速かつ正確に世界中の文芸に興味を持つユーザーに届け、地理的な制限を簡単に打破し、世界的な範囲での熱烈なインタラクションと注目を集めることができます。",
|
||||
"Instagramはその美しいビジュアルプレゼンテーションと活発なソーシャル雰囲気により、さまざまな文芸作品のための素晴らしい展示ウィンドウを提供します。ここでは、クリエイターの作品が高水準で展示され、大量のファンの注目と「いいね」を集め、作品の露出と影響力を大幅に向上させ、芸術の美しさを世界的に広く伝えることができます。垂直コミュニティでは、ArtStationなどの専門プラットフォームとの協力により、異なる文芸分野のクリエイターのための専門的で純粋な交流と展示の空間を提供します。",
|
||||
"「文芸無界計画」が効率的かつ秩序正しく実施されることを確保するため、FiEEは一連の詳細で実践的な戦略と措置を策定しました。コンテンツ創作の段階では、FiEEは国際的に有名な文芸専門家やクリエイターを招待し、オンラインとオフラインを組み合わせた専門的なトレーニングと指導コースを開催し、クリエイターが国際市場の美的嗜好、文化的ニーズ、流行のトレンドを深く理解し、作品の国際的な伝播力を向上させることを支援します。",
|
||||
"プロモーションと運営の面では、FiEEは各方面の優位性を統合し、クリエイターに全方位で立体的なプロモーションプランをカスタマイズします。一方では、オンライン創作コンテストなどのイベントを積極的に開催し、世界中のユーザーの注目を集め、クリエイターの知名度と影響力を迅速に向上させます。他方では、ソーシャルメディアプラットフォームの広告配信、トピックマーケティング、インフルエンサーとの協力などの手段を活用し、クリエイターの作品を正確にプッシュし、作品の伝播範囲をさらに拡大し、より多くの人々が優れた文芸作品を鑑賞できるようにします。",
|
||||
"予測されるように、広範な文芸クリエイターにとって、この協力は間違いなく千載一遇のチャンスです。彼らは国際的なトップアーティストやクリエイターと深く交流し、協力する機会を得て、世界の最先端の創作理念と技術に触れることができ、自分の創作視野を広げ、創作レベルを向上させることができます。同時に、多様なプラットフォームマトリックスを通じて、彼らの作品は前例のない露出と認可を得ることができ、商業的価値を最大化し、自分の芸術キャリアにより広い発展空間を切り開くことができます。",
|
||||
"将来を見据えて、FiEEは国際プラットフォームとの協力を不断に深化させ、「文芸無界計画」を最適化し、改善し続け、文芸クリエイターにより質の高い、全面的で効率的なサービスを提供し、彼らが国際舞台でより輝かしい光を放つことを支援し、世界の文化交流、融合、繁栄にさらに多くの知恵と力を貢献します。"
|
||||
]
|
||||
},
|
||||
"article3": {
|
||||
"title": "文芸クリエイターを支援、FiEEが「AI × ショートビデオ」全リンクソリューションを発表",
|
||||
"date": "2025年02月14日 12時30分",
|
||||
"content": [
|
||||
"文芸クリエイターにとって、創作の壁と効率の低下は前進の道に立ちはだかる大きな障害です。魅力的なショートビデオの脚本を考えるには、多くの時間と労力が必要で、クリエイターは独自のアイデアを考えるだけでなく、オーディエンスの好みや市場のトレンドにも気を配らなければなりません。",
|
||||
"作品が完成した後の伝播とプロモーションも、越えるのが難しい大きな壁です。情報爆発の時代において、自分の作品が大量のコンテンツの中から際立つようにし、ターゲットオーディエンスに正確にリーチする方法は、クリエイターが日々考えている課題です。",
|
||||
"伝統的な伝播方法は網を広げて魚を捕るようなもので、正確性が非常に低く、大量の質の高い文芸コンテンツが伝播プロセスで埋もれてしまい、本当に興味を持つオーディエンスに見つけてもらうことが難しくなります。また、ユーザーのインタラクティブ性の欠如も、クリエイターがユーザーのニーズを深く掘り下げることを困難にし、オーディエンスと緊密な感情的つながりを築くことができず、作品が本当に「生き生き」とせず、伝播の波の中で孤立無援となってしまいます。",
|
||||
"技術が急速に進化する中、人工知能とショートビデオ業界は前例のない速度で文芸創作と伝播の構造を変えています。",
|
||||
"文芸分野の革新のパイオニアとして、FiEEは時代の流れに遅れず、技術と文芸の深い融合を積極的に探求し、今日「AI × ショートビデオ」全リンクソリューションを正式に発表し、文芸業界に革命的な変革をもたらしました。",
|
||||
"このソリューションは、複数の最先端のAI技術を統合し、多面的な顕著な優位性を持っています。コンテンツ創作の段階では、AIインテリジェント脚本生成ツールがクリエイターが入力したテーマ、スタイル、オーディエンスなどのキー情報に基づいて、迅速に独創的な脚本を生成できます。大量の優れたショートビデオ脚本と文芸作品を学習することにより、AIは新しいストーリーフレームワークを提供するだけでなく、テーマに合ったプロットと台詞を正確にマッチングさせ、創作サイクルを大幅に短縮します。",
|
||||
"コンテンツ伝播と運営の面では、AIビッグデータ分析技術により、ショートビデオのプロモーションがより正確で効果的になります。ユーザーの閲覧履歴、いいねやコメントの行動、フォローリストなどの多次元データを深く分析することにより、システムはユーザーの興味とニーズを正確に把握し、文芸クリエイターの作品を本当に興味を持つオーディエンス層にプッシュすることができます。このソリューションの応用シーンは広範で、専門の文芸クリエイターから文芸の夢を抱くアマチュア愛好者まで、誰もがその恩恵を受けることができます。",
|
||||
"専門クリエイターはAI技術を活用して創作の壁を打破し、創作効率を向上させ、より革新的で影響力のある作品を創作できます。アマチュア愛好者はこのソリューションを通じて創作のハードルを下げ、自分の創作アイデアを簡単に実現し、創作の楽しさを味わうことができます。FiEEの関係者は次のように述べています：「私たちは常に文芸クリエイターのニーズと課題に注目し、『AI × ショートビデオ』全リンクソリューションを通じて、彼らに全方位のサポートと支援を提供したいと考えています。これは技術の革新応用であるだけでなく、私たちが文芸業界の発展を支援する重要な実践でもあります。AI技術の力を借りて、文芸クリエイターがより多くの優れた作品を創作し、文芸の光がより広い世界を照らすことを信じています。」",
|
||||
"将来を見据えて、FiEEは研究開発力を継続的に投入し、「AI × ショートビデオ」全リンクソリューションを不断に最適化し、改善し、AI技術の文芸分野での応用シーンをさらに探求し、業界のパートナーとの協力を強化し、文芸創作と伝播の革新発展を共同で推進し、文芸クリエイターにより質の高い、効率的な創作環境を提供し、文芸業界が新たな高みに到達することを支援します。"
|
||||
]
|
||||
},
|
||||
"article4": {
|
||||
"title": "FiEEが18ヶ月の芸術KOL育成プログラムを開始、文芸分野の未来のスターを育成",
|
||||
"date": "2025年02月19日 12時00分",
|
||||
"content": [
|
||||
"文芸産業が急速に発展する中、質の高いコンテンツクリエイターの重要性がますます高まっています。業界のパイオニア企業として、FiEEは常に文芸分野の人材育成と発展に注目しています。",
|
||||
"今日、FiEEは18ヶ月間の芸術KOL育成プログラムを正式に開始し、文芸分野に強力な影響力を持つ未来のスターを育成し、業界全体の革新発展を推進することを目指しています。ソーシャルメディアの台頭とコンテンツ伝播方法の変革に伴い、KOLは文芸分野の伝播とプロモーションにおいて重要な役割を果たしています。彼らは質の高いコンテンツのクリエイターであるだけでなく、文芸作品と広範なオーディエンスをつなぐ架け橋でもあります。",
|
||||
"しかし、成熟し、広範な影響力を持つ芸術KOLを育成することは一晩でできることではなく、系統的な計画、専門的な指導、十分な実践機会が必要です。FiEEはこの市場ニーズを鋭く洞察し、多くのリソースを投入し、この18ヶ月間の育成プログラムを精心に計画しました。この育成プログラムの目標は明確で、文芸分野に潜在能力を持つクリエイターを発掘し、育成し、国内外で高い知名度と影響力を持つ芸術KOLに成長させることを目指しています。",
|
||||
"このプログラムを通じて、これらのクリエイターに広大な発展空間を提供するだけでなく、文芸市場に新鮮な血液を注入し、文芸作品の多様な伝播を推進します。実施内容では、プログラムは複数の次元をカバーし、全方位でクリエイターの成長を支援します。専門トレーニングの段階では、会社は異なる芸術分野の有名な専門家や学者を招待し、クリエイターに系統的で深いコーストレーニングを提供します。",
|
||||
"これらのコースの内容は豊富で、芸術創作技術の向上（絵画における色彩の使用、音楽創作におけるメロディーの編曲など）から、ソーシャルメディアマーケティング戦略、ファンインタラクション技術などのニューメディア運営知識、およびクリエイターが文芸市場の運営ルールを理解し、作品の商業的価値を実現するのを支援するビジネス管理コースまで含まれます。同時に、各クリエイターが個別化された指導を受けられるようにするため、会社は彼らに1対1のメンターを配置し、メンターはクリエイターの特徴とニーズに基づいて、具体的なアドバイスと支援を提供します。",
|
||||
"リソースのマッチングも育成プログラムの重要な部分です。FiEEは業界で長年にわたって蓄積した豊富なリソースと広範なパートナーシップを活用し、クリエイターにブランド、メディア、プラットフォームなどとのマッチングの橋を架けます。クリエイターは有名ブランドと協力し、芸術的価値のある宣伝コンテンツを創作する機会を得ることができます。メディアと協力し、文芸特集記事や番組制作に参加することができます。主要な文芸プラットフォームと協力し、自分の作品を発表し、作品の伝播範囲を拡大することができます。",
|
||||
"FiEE芸術KOL育成プロジェクトの責任者は開始式で次のように述べています：「私たちは、育成プログラムに参加する各クリエイターが無限の可能性を持っていると確信しています。この18ヶ月間は、彼らが成長するための重要な時期です。FiEEは彼らに全力でサポートと支援を提供し、彼らが芸術創作の道でより遠くまで進み、文芸分野の中核となることを支援します。」",
|
||||
"将来を見据えて、この18ヶ月間の芸術KOL育成プログラムの実施により、文芸分野に独自のスタイルと広範な影響力を持つKOLが育成されることが期待されます。",
|
||||
"彼らは自分の作品と影響力を通じて、より多くの人々が文芸に注目するようにし、文芸作品の伝播と革新を推進し、文芸産業の繁栄に重要な力を貢献します。FiEEもクリエイターの成長に引き続き注目し、育成プログラムを不断に最適化し、文芸分野の人材育成のためのより効果的なモデルを探求します。"
|
||||
]
|
||||
},
|
||||
"article5": {
|
||||
"title": "多様な人材が集結、FiEEが文芸革新発展の基盤を築く",
|
||||
"date": "2025年02月20日 12時00分",
|
||||
"content": [
|
||||
"現在、文芸業界が急速に発展し、百花繚乱の時代において、革新は業界の持続的な進歩と伝統的な枠組みの打破をリードする重要な要素となっています。そして、その根源をたどれば、人材が革新の核心的な原動力であり、その重要性は言うまでもありません。",
|
||||
"FiEEはこのことを深く理解し、広大な度量と先見性のある戦略的視野で、積極的に才能を広く集め、運営の専門家、技術のエリート、国際アドバイザーを精心に集結させ、文芸分野の革新の旅の堅固な発展基盤を築きました。",
|
||||
"運営の専門家チームは、FiEEが文芸分野で着実に前進するための導きの灯です。彼らは文芸業界の広大な世界で長年にわたり深く関わり、豊富な実践経験と市場への深い理解により、市場の動向を鋭く捉える能力を身につけ、オーディエンスの嗜好を正確に把握しています。",
|
||||
"彼らはビッグデータ分析と実地市場調査を活用し、異なる年齢層、異なる地域のオーディエンスの文化的背景と興味を深く研究し、ターゲットオーディエンスを正確に特定し、文芸クリエイターに非常に的を絞った創作方向を提供します。彼らは現在の社会のホットスポットと観客の精神的ニーズを深く分析し、時代の要素を巧みに取り入れ、作品に深みと魅力を持たせます。独特のクリエイティブ企画を通じて、プロジェクトの開始段階から観客の注目を集め、後の成功のための堅固な基盤を築きます。",
|
||||
"技術と文芸の融合のトレンドがますます顕著になる中、技術のエリートはFiEEの革新発展の強力なエンジンとなっています。",
|
||||
"会社は人工知能、ビッグデータ、仮想現実などの最先端技術を掌握する専門人材を積極的に招き、文芸創作に技術の活力を注入します。コンテンツ創作プロセスでは、これらの技術エリートが人工知能支援創作ツールの優位性を十分に発揮し、文芸クリエイターに絶え間ないインスピレーションを提供します。仮想現実（VR）と拡張現実（AR）技術を活用し、作品と観客の深いインタラクションを実現し、文芸作品の表現形式と伝播範囲を大幅に拡大します。",
|
||||
"グローバル化の時代の波の中で、国際アドバイザーチームはFiEEに広大なグローバル視野と多様な文化的視点をもたらしました。彼らは世界各地から来ており、異なる国や地域の文芸市場のルール、美的嗜好、文化的差異について深く理解しています。FiEEが地元の優れた文芸作品を世界に広めるプロセスで、国際アドバイザーチームは重要な役割を果たしています。これは地元の文芸クリエイターに新しい創作のアイデアとインスピレーションをもたらすだけでなく、FiEEの国際文芸分野での影響力も向上させます。",
|
||||
"運営の専門家、技術のエリート、国際アドバイザーなどの多様な人材が集結したことで、FiEEは異分野との協力とリソース統合を通じて、伝統的な文芸の境界を打破し、文芸の新たな表現を探求することができました。FiEEは技術企業、ファッションブランド、教育機関などと広範に協力し、文芸と技術、ファッション、教育などの分野を深く融合させ、一連の新しい文芸製品とサービスを創造しました。最先端技術と正確なマーケティングを活用し、FiEEは多くの文芸作品の商業的価値と社会的影響力を両立させ、文芸の繁栄に持続的な力を注入しました。",
|
||||
"将来を見据えて、FiEEは開放性と包容性のある人材理念を堅持し、人材戦略を不断に改善し、より多くの優秀な人材を引き付けます。私たちは、多様な人材の共同努力により、FiEEが文芸革新発展の道を不断に前進し、世界の文芸事業の繁栄にさらに大きな貢献をすると確信しています。"
|
||||
]
|
||||
}
|
||||
},
|
||||
"businessintroduction": {
|
||||
"hero": {
|
||||
"title1": "AI × ショートビデオ",
|
||||
"title2": "文芸革新の新たな視界をリード",
|
||||
"desc": "最先端のAI技術とショートビデオプラットフォームの独特な優位性を深く融合させ、先駆けて探求の旅を開始し、潮流に立ち、文芸分野が前例のない新たな視界に入ることをリードします"
|
||||
},
|
||||
"industry": {
|
||||
"label": "業界の現状",
|
||||
"title": "文芸が行き詰まり、ショートビデオが業界成長の新たな鍵を解く",
|
||||
"desc": "文芸分野がコンテンツの画一化とインスピレーションの枯渇に陥っている中、ショートビデオはその独特な没入型体験と強力なソーシャル拡散属性により、制約を打破し、業界に新たな生命力を注入し、成長の強力なエンジンとなっています。",
|
||||
"challenges": {
|
||||
"title": "文芸市場の課題",
|
||||
"items": [
|
||||
{
|
||||
title: 'アート価値の埋没',
|
||||
desc: 'ブランド構築と市場運営の不足により、芸術的価値が見えにくくなり、大衆の理解と認知を得ることが困難になっています。'
|
||||
"title": "文芸の価値が埋もれる",
|
||||
"desc": "ブランド構築と市場運営の不足により、文芸の価値が暗闇に隠れ、大衆に認識されにくくなっています。"
|
||||
},
|
||||
{
|
||||
title: 'プロモーション経路の停滞',
|
||||
desc: '個人のソーシャルプラットフォームと従来の展示形式が時代遅れとなり、広範かつ質の高い露出を達成できず、普及を大きく制限しています。'
|
||||
"title": "プロモーションの行き詰まり",
|
||||
"desc": "個人のソーシャルプラットフォームと伝統的な展示形式は古く、広範で質の高い露出を達成できず、伝播を大きく制限しています。"
|
||||
},
|
||||
{
|
||||
title: '宣伝チャネルの単一性',
|
||||
desc: 'オフラインギャラリーと個別展示会への過度の依存により、宣伝範囲が狭く、収入構造が単一で不安定になっています。'
|
||||
"title": "宣伝の単一性による貧困",
|
||||
"desc": "オフライン展示場と個別の展示会に過度に依存し、宣伝面が狭く、収益構造が単一で不安定です。"
|
||||
},
|
||||
{
|
||||
title: '従来型マーケティングの制約',
|
||||
desc: '従来の広告チャネルは高額で、アートクリエイターの財力では対応が困難であり、プロモーション範囲を大きく制限しています。'
|
||||
"title": "伝統的なマーケティングの制約",
|
||||
"desc": "伝統的な広告チャネルは費用が高く、文芸クリエイターの財政力では賄いきれず、プロモーションと宣伝の範囲が大きく制限されています。"
|
||||
}
|
||||
]
|
||||
},
|
||||
opportunity: {
|
||||
title: 'ショートビデオ自媒体：躍進する新勢力、無限のビジネスチャンスを秘める',
|
||||
desc: '現在、ショートビデオ市場は爆発的な成長を遂げ、広告規模が急速に拡大しています。インターネットコンテンツ分野の活力として、ユーザー規模と利用時間が急上昇し、広告配信とマネタイズの可能性を広げ、ユーザーの利用時間比率が継続的に上昇し、ユーザーの粘着性が日々増加しており、無限の潜在力と機会を秘めています。'
|
||||
"opportunity": {
|
||||
"title": "ショートビデオメディア：新たな勢い、無限のビジネスチャンス",
|
||||
"desc": "現在、ショートビデオ市場は爆発的に成長し、広告規模が急速に拡大しています。ショートビデオはインターネットコンテンツ分野の活力の担い手として、ユーザー規模と使用時間が急速に増加し、広告配信と収益化のための広大な天地を開拓し、ユーザーの時間占有率が着実に上昇し、ユーザーの粘着性が日々高まっています。"
|
||||
}
|
||||
},
|
||||
solution: {
|
||||
label: '業界の現状',
|
||||
title: '文化創造の障壁を突破、ショートビデオが成長の新コードを解き放つ',
|
||||
features: {
|
||||
precision: {
|
||||
title: '精密配信でファン成長エンジンを始動',
|
||||
desc: 'ビッグデータ分析とAIアルゴリズムを活用し、ユーザーの閲覧習慣、検索嗜好などの行動データを深く分析し、精密なユーザープロファイルを構築して、アートクリエイターの作品を潜在的な視聴者に正確に配信し、無目的な需要を忠実なファンに転換し、クリエイターの影響力拡大の基盤を築きます。'
|
||||
"solution": {
|
||||
"label": "業界の現状",
|
||||
"title": "文芸が行き詰まり、ショートビデオが業界成長の新たな鍵を解く",
|
||||
"features": {
|
||||
"precision": {
|
||||
"title": "正確な配信、ファン成長のエンジンを起動",
|
||||
"desc": "ビッグデータ分析とAIアルゴリズムを活用し、ユーザーの閲覧習慣、検索嗜好などの行動データを深く分析し、正確なユーザープロファイルを構築し、文芸クリエイターの作品を潜在的なオーディエンスに正確にプッシュし、無目的な需要者を忠実なファンに変え、クリエイターの影響力伝播の基盤を築きます。"
|
||||
},
|
||||
monetization: {
|
||||
title: '多様な収益化で商業価値チェーンを活性化',
|
||||
desc: 'アート創作の商業価値を掘り起こすため、ファンエコノミー運営システムを構築します。便利な投げ銭メカニズムを通じて、ファンがクリエイターへの愛着を即座に表現できるようにし、実物とデジタル作品の販売チャネルを提供してファンのコレクションニーズを満たし、サブスクリプションサービスを導入して独占コンテンツとイベント優先参加権を提供し、ファンの粘着性を高めます。これらのチャネルを通じて、ファンを消費者に転換し、クリエイターとプラットフォームの収入増加を実現します。'
|
||||
"monetization": {
|
||||
"title": "多様な収益化、商業価値のチェーンを活性化",
|
||||
"desc": "文芸創作の商業価値を掘り起こすため、ファン経済運営システムを構築します。便利なチップ機能を通じて、ファンがクリエイターへの愛を即座に表現できるようにします。実体とデジタル作品の販売チャネルを提供し、ファンのコレクション需要を満たします。サブスクリプションサービスを提供し、独占コンテンツとイベント優先参加権を提供し、ファンの粘着性を高めます。これらの方法により、ファンが消費者に変わり、クリエイターとプラットフォームの収益成長を実現します。"
|
||||
},
|
||||
interaction: {
|
||||
title: 'インタラクティブな共有でアートエコシステムを構築',
|
||||
desc: 'インテリジェントなソーシャル推薦技術を活用し、ファン間の深い交流を促進し、洞察と創作のインスピレーションを共有し、相互の潜在的ニーズを掘り起こし、ファングループの自然な拡大を実現します。同時に、データ分析を通じて消費者グループの特徴とニーズを洞察し、消費サークルを精密に拡大し、新たなビジネスチャンスを発掘します。このインタラクティブな共有メカニズムにより、持続可能なアート創作エコシステムを構築し、クリエイターの影響力を継続的に高め、企業も安定した発展と収益増加を実現し、Win-Winの成果を達成します。'
|
||||
"interaction": {
|
||||
"title": "インタラクティブな共有、芸術エコシステムの閉ループを構築",
|
||||
"desc": "インテリジェントなソーシャル推薦技術を活用し、ファン間の深いインタラクションと交流を促進し、見解と創作のインスピレーションを共有し、お互いの潜在的なニーズを掘り起こし、ファングループの自然な拡散を実現します。同時に、データ分析を通じて消費層の特徴とニーズを洞察し、正確に消費層を拡大し、新たなビジネスチャンスを掘り起こします。このインタラクティブな共有メカニズムは、持続可能な文芸創作エコシステムを構築し、クリエイターの影響力が持続的に向上し、会社も安定した発展と収益成長を実現し、ウィンウィンの関係を達成します。"
|
||||
}
|
||||
}
|
||||
},
|
||||
vision: {
|
||||
label: '市場ビジョン',
|
||||
title: 'アート市場の新しい青写真を描く',
|
||||
desc: '変化し続けるアートの波の中で、FiEEはイノベーションを筆に、精密な洞察を墨に、革新的思考とグローバルな視野でアート産業の未来を再定義します。アートの潜在力を深く掘り起こし、多様な文化要素を融合し、従来の障壁を打破し、オンラインのトラフィックコミュニティを構築し、アートエコシステムを再構築し、市場の活力を刺激し、アート価値の新しい方向性を先導し、アート市場の新時代を切り開きます。',
|
||||
community: {
|
||||
title: '10億ユーザーのトラフィックコミュニティを構築し、グローバルアート交流の高地を確立',
|
||||
desc: '最先端のビッグデータとAI技術を活用し、10億規模のトラフィックコミュニティを構築し、世界中のアート愛好家を集めます。インテリジェントアルゴリズムを活用して精密なコンテンツ配信と興味マッチングを実現し、交流とインタラクションを促進し、アートクリエイターとファンの間に効率的なコミュニケーションブリッジを構築し、アートエコシステムのトラフィック基盤を構築します。'
|
||||
"vision": {
|
||||
"label": "市場のビジョン",
|
||||
"title": "文芸市場の新たな青写真を描く",
|
||||
"desc": "変幻自在の芸術の波の中で、FiEEは革新を筆とし、正確な洞察を墨とし、革新の思考とグローバルな視野で文芸産業の未来を再定義します。文芸の潜在力を深く掘り下げ、多様な文化要素を融合させ、伝統的な壁を打破し、オンラインのトラフィックコミュニティを構築し、文芸エコシステムを再構築し、市場の活力を刺激し、文芸の価値の新たな流れをリードし、文芸市場の全く新しい時代を開きます。",
|
||||
"community": {
|
||||
"title": "10億のトラフィックコミュニティを構築、グローバルな文芸交流のハブを築く",
|
||||
"desc": "最先端のビッグデータとAI技術を活用し、10億のトラフィックコミュニティを構築し、世界中の文芸愛好者を集めます。インテリジェントなアルゴリズムを通じて正確なコンテンツ配信と興味のマッチングを実現し、交流とインタラクションを促進し、文芸クリエイターとファンのための効率的なコミュニケーションブリッジを構築し、文芸エコシステムのトラフィック基盤を築きます。"
|
||||
}
|
||||
},
|
||||
cooperation: {
|
||||
title: 'グローバル協力の拡大、多元的融合の地図を描く',
|
||||
timeline: {
|
||||
year2025: {
|
||||
title: '2025年',
|
||||
desc: '1500以上のアート機関、テクノロジー企業との深い協力を達成し、リソースを統合し、アートとテクノロジーの融合プロジェクトを共同で探求し、芸術創作とコミュニケーションモデルのイノベーションを推進します。'
|
||||
"cooperation": {
|
||||
"title": "グローバルな協力拡大、多様な融合の版図を描く",
|
||||
"timeline": {
|
||||
"year2025": {
|
||||
"title": "2025年",
|
||||
"desc": "1500以上の文芸機関、技術企業と深く協力し、リソースを統合し、文芸と技術の融合プロジェクトを共同で探求し、芸術創作と伝播モデルの革新を推進します。"
|
||||
},
|
||||
year2026: {
|
||||
title: '2026年',
|
||||
desc: 'グローバルパートナーが5000以上に達し、広範な協力ネットワークを確立し、事業カバレッジ領域を拡大し、世界主要アート市場でプロジェクトを展開し、ブランドの国際的認知度を向上させます。'
|
||||
"year2026": {
|
||||
"title": "2026年",
|
||||
"desc": "グローバルパートナーが5000を突破し、広範な協力ネットワークを構築し、ビジネスカバレッジエリアを拡大し、世界の主要な芸術市場でプロジェクトを実施し、ブランドの国際的な知名度を向上させます。"
|
||||
},
|
||||
year2027: {
|
||||
title: '2027年',
|
||||
desc: '戦略的パートナーが10000以上に達し、強固なグローバル戦略同盟を形成し、アート産業チェーンを完全に接続し、リソース共有と互恵的利益を実現します。'
|
||||
"year2027": {
|
||||
"title": "2027年",
|
||||
"desc": "戦略的パートナーが10000を超え、堅固なグローバル戦略的同盟を形成し、文芸産業チェーンを全面的に開通し、リソースの共有と相互利益を実現します。"
|
||||
}
|
||||
}
|
||||
},
|
||||
incubation: {
|
||||
title: '18ヶ月のゼロベースアートKOL育成',
|
||||
subtitle: 'アートビジネスの潜在力を解き放つ',
|
||||
desc: '18ヶ月は、アートの潜在力を深く掘り起こし、ビジネス変革の旅です。絵画技法から美的構築まで、コンテンツ制作からトラフィック運営まで、包括的な支援を提供します。FiEEはゼロベースの個人にカスタマイズされた成長パスを提供し、アートとビジネスの架け橋となり、トレンドを先導するアートKOLとなり、無限の可能性を秘めたアートの旅を始めます。',
|
||||
features: {
|
||||
fans: {
|
||||
title: 'ファン成長',
|
||||
desc: '2027年までに、精密なマーケティング戦略を通じて、各アーティストのファン数を10万人以上に、コミュニティメンバーを10億人に到達させ、アートクリエイターのファン基盤を強化し、作品の影響力を高めます。'
|
||||
"incubation": {
|
||||
"title": "18ヶ月でゼロから芸術KOLを育成",
|
||||
"subtitle": "文芸の商業的潜在力を解放",
|
||||
"desc": "18ヶ月は、芸術の潜在力を深く掘り下げる旅であり、文芸の商業的変革の旅です。絵画技術から美的構築、コンテンツ創作からトラフィック運営まで、全方位で力を与えます。FiEEはゼロからの成長パスをカスタマイズし、文芸と商業の橋を渡り、潮流をリードする文芸KOLとなり、無限の可能性を秘めた文芸の新たな旅を始めることを支援します。",
|
||||
"features": {
|
||||
"fans": {
|
||||
"title": "ファン成長",
|
||||
"desc": "2027年までに、正確なマーケティング戦略により、各アーティストのファン数が10万を超え、ファンコミュニティの人数が10億に達し、文芸クリエイターのファン層を強化し、作品の影響力を高めます。"
|
||||
},
|
||||
kol: {
|
||||
title: 'KOL育成',
|
||||
desc: '10億ユーザーのトラフィックコミュニティに依拠し、精密なデータ分析を活用して、18ヶ月以内に一般のアートクリエイターや商業ブランドを国際的に著名なKOLに変革し、芸術的価値と商業的価値の効率的な転換を実現します。'
|
||||
"kol": {
|
||||
"title": "KOL育成",
|
||||
"desc": "10億のトラフィックコミュニティを活用し、正確なデータ分析を通じて、18ヶ月以内に普通の文芸クリエイターや商業ブランドを国際的に有名なKOLに育て、芸術的価値と商業的価値を効率的に変換します。"
|
||||
}
|
||||
}
|
||||
},
|
||||
exposure: {
|
||||
title: '市場ビジョン',
|
||||
desc: '最先端のコミュニケーション戦略で、グローバルな視聴者のマインドシェアを精密にターゲティングします。トップメディアリソースを深く統合し、露出の指数級の突破を達成し、グローバルブランドの影響力を包括的に形成し、アートトレンドを世界の舞台の中心へと導きます。',
|
||||
timeline: {
|
||||
year2025: {
|
||||
title: '2025年',
|
||||
desc: '自媒体プラットフォームの露出が5億以上を突破し、マルチプラットフォーム連携とクリエイティブコンテンツマーケティングを通じて、ブランドとクリエイターの露出を向上させます。'
|
||||
"exposure": {
|
||||
"title": "市場のビジョン",
|
||||
"desc": "最先端の伝播戦略により、世界中のオーディエンスの心を正確に狙い撃ちします。トップメディアリソースを深く統合し、露出量を指数関数的に突破し、全方位でグローバルブランドの影響力を形成し、文芸の潮流を世界の舞台の中央に導きます。",
|
||||
"timeline": {
|
||||
"year2025": {
|
||||
"title": "2025年",
|
||||
"desc": "メディアプラットフォームの露出量が5億を突破し、マルチプラットフォーム連携、クリエイティブコンテンツマーケティングを通じて、ブランドとクリエイターの露出度を向上させます。"
|
||||
},
|
||||
year2026: {
|
||||
title: '2026年',
|
||||
desc: '露出が10億以上に達し、ブランドコミュニケーションを深化させ、より多くの潜在的ユーザーとパートナーを引き付けます。'
|
||||
"year2026": {
|
||||
"title": "2026年",
|
||||
"desc": "露出量が10億に達し、ブランド伝播を深化させ、より多くの潜在ユーザーとパートナーを引き付けます。"
|
||||
},
|
||||
year2027: {
|
||||
title: '2027年',
|
||||
desc: '50億以上のクロスディメンショナルな突破を実現し、業界と文化の境界を打破し、ブランドの国際的影響力を包括的に向上させ、文化・芸術とテクノロジーの深い融合を推進し、業界発展の新しいトレンドを形成します。'
|
||||
"year2027": {
|
||||
"title": "2027年",
|
||||
"desc": "50億以上のクロス次元突破を実現し、業界と文化の境界を打破し、全方位でブランドの国際的影響力を向上させ、文化芸術と技術の深い融合を推進し、業界の発展の新たな潮流を形成します。"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,153 +1,333 @@
|
||||
export default {
|
||||
common: {
|
||||
submit: '提交',
|
||||
cancel: '取消',
|
||||
confirm: '確認'
|
||||
"common": {
|
||||
"submit": "提交",
|
||||
"cancel": "取消",
|
||||
"confirm": "確認"
|
||||
},
|
||||
home: {
|
||||
title: '兒童美術徵集',
|
||||
vote: '投票',
|
||||
signup: '報名',
|
||||
nav: {
|
||||
home: '首頁',
|
||||
company: '公司概況',
|
||||
businessintroduction: '業務介紹'
|
||||
"home": {
|
||||
"nav": {
|
||||
"home": "首頁",
|
||||
"company": "公司概況",
|
||||
"businessintroduction": "業務介紹"
|
||||
},
|
||||
scroll: {
|
||||
tip: '向下滑動'
|
||||
"scroll": {
|
||||
"tip": "向下滑動"
|
||||
},
|
||||
section2: {
|
||||
title1: 'FiEE攜手文藝創作者',
|
||||
title2: '啟航全球影響力新征程'
|
||||
"section2": {
|
||||
"title1": "FiEE攜手文藝創作者",
|
||||
"title2": "啟航全球影響力新征程"
|
||||
},
|
||||
section3: {
|
||||
label: '公司簡介',
|
||||
title: 'FiEE',
|
||||
desc: '作為一家深度紮根前沿科技領域的創新領航者，FiEE持續鑽研AI、大數據在文藝創作中的應用。憑藉對文藝理念的深度剖析，以及對創作實踐的深刻洞察，我們精準把握文藝發展脈絡。懷著滿腔熱忱，整合各類技術與資源，為文藝創作者提供從靈感啟發到作品推廣的全方位賦能。'
|
||||
"section3": {
|
||||
"label": "公司簡介",
|
||||
"title": "FiEE",
|
||||
"desc": "作為一家深度紮根前沿科技領域的創新領航者，FiEE持續鑽研AI、大數據在文藝創作中的應用。憑藉對文藝理念的深度剖析，以及對創作實踐的深刻洞察，我們精準把握文藝發展脈絡。懷著滿腔熱忱，整合各類技術與資源，為文藝創作者提供從靈感啟發到作品推廣的全方位賦能。",
|
||||
"features": {
|
||||
"data": {
|
||||
"title": "大數據錨定創作方向",
|
||||
"desc": "借助自研大數據模型，深析全球文藝市場，提供前瞻研判，助創作者明確方向。"
|
||||
},
|
||||
"ai": {
|
||||
"title": "AI 算法打破傳播圈層",
|
||||
"desc": "運用前沿 AI算法，搭建個性化推薦體系，精準匹配受眾，突破文藝傳播圈限制。"
|
||||
},
|
||||
"cloud": {
|
||||
"title": "雲計算挖掘文藝價值",
|
||||
"desc": "憑藉卓越雲計算能力，高效處理海量數據，為創作者探索與拓展提供支撐。"
|
||||
},
|
||||
"cooperation": {
|
||||
"title": "專業合作樹立標杆地位",
|
||||
"desc": "與專業文藝機構、學術平台合作，助力創作者作品獲贊，樹立專業文藝標杆。"
|
||||
},
|
||||
"promotion": {
|
||||
"title": "多元推廣塑造全球品牌",
|
||||
"desc": "借助多元傳播與創新營銷，結合品牌塑造與推廣，助創作者成全球文藝品牌。"
|
||||
}
|
||||
}
|
||||
},
|
||||
vote: {
|
||||
title: '兒童美術徵集活動',
|
||||
voteBtn: '立即投票'
|
||||
"section4": {
|
||||
"label": "業務介紹",
|
||||
"title": "多元業務協同，推動文藝影響力騰飛",
|
||||
"desc": "FiEE 專注為文藝創作者提供全球化推廣與專業運營服務。通過精準定位、多平台聯動，打破地域限制，讓作品登上國際舞台。依托強大資源網絡對接商業機遇，運用 AI與大數據精準營銷，高效觸達受眾，助力創作者實現藝術與商業價值雙突破。",
|
||||
"cards1": {
|
||||
"title": "全球花卉產業，適合國際藝術交流中心",
|
||||
"desc": "FiEE秉持 \"文藝無國界\"理念，依托多平台聯動，打破地域限制，將作品推向全球市場，吸引潛在消費者，讓文藝創作者在國際舞台綻放光彩。"
|
||||
},
|
||||
entry: {
|
||||
title: '報名',
|
||||
form: {
|
||||
name: '姓名',
|
||||
phone: '手機號',
|
||||
submit: '提交報名'
|
||||
"cards2": {
|
||||
"title": "專業運營團隊，精準定位受眾",
|
||||
"desc": "FiEE運營團隊匯聚多領域資深人才，憑藉豐富經驗和對市場的洞察，通過數據分析制定精準推廣策略，讓作品精準觸達目標受眾，實現深度共鳴。"
|
||||
},
|
||||
"cards3": {
|
||||
"title": "強大資源網絡，拓展無限商業機遇",
|
||||
"desc": "FiEE與全球知名文藝機構、主流媒體建立深度合作，構建龐大資源網絡，幫文藝創作者對接高端資源，拓展藝術作品授權、衍生品開發等商業合作機會。"
|
||||
},
|
||||
"cards4": {
|
||||
"title": "技術驅動營銷，高效觸達粉絲群體",
|
||||
"desc": "FiEE利用 AI 算法和大數據分析，精準畫像目標人群，實現個性化推廣，快速觸達粉絲群體，積累忠實粉絲社群，運用智能工具優化推廣策略，為文藝創作者的藝術事業發展助力。"
|
||||
}
|
||||
}
|
||||
},
|
||||
businessintroduction: {
|
||||
hero: {
|
||||
title1: 'AI × 短視頻',
|
||||
title2: '領航文創新視界',
|
||||
desc: '深度融合前沿 AI 技術與短視頻平台的獨特優勢，率先開啟探索之旅，勇立潮頭，領航文創領域踏入前所未有的嶄新視界'
|
||||
"companyprofil": {
|
||||
"slogan": {
|
||||
"title1": "領航文藝全周期",
|
||||
"title2": "創變價值新巔峰",
|
||||
"desc": "FiEE立志成為文藝創作全周期的掌舵人，深度參與從靈感初綻、作品打磨完成，到市場推廣宣傳、文化廣泛傳播的每一處關鍵節點"
|
||||
},
|
||||
industry: {
|
||||
label: '行業現狀',
|
||||
title: '文創遇阻，短視頻解鎖行業增長新密碼',
|
||||
desc: '在文創領域深陷內容趨同、靈感枯竭的困局時，短視頻憑藉其獨特的沉浸式體驗、強大的社交裂變屬性，打破桎梏，如春風化雨般為行業注入新的生命力，成為驅動增長的強勁引擎。',
|
||||
challenges: {
|
||||
title: '文藝市場困局',
|
||||
items: [
|
||||
"intro": {
|
||||
"label": "公司介紹",
|
||||
"title1": "獨樹一幟",
|
||||
"title2": "全周期價值賦能領航者",
|
||||
"desc": "FiEE徹底打破傳統單一服務機構的局限，以行業變革者的姿態，深度融合前沿技術與豐富多元的資源，精心構建起一套貫穿文藝創作從萌芽構思到輝煌綻放全流程的\"全周期\"價值賦能體系。無論你是剛剛踏入文藝殿堂、懷揣夢想的創作新人，還是在文藝道路上摸爬滾打、渴望突破創作瓶頸、攀登更高文藝巔峰的成熟文藝工作者，FiEE都將成為你最堅實的夥伴，一路貼心陪伴，為你的文藝征途遮風擋雨，指引前行的方向。"
|
||||
},
|
||||
"team": {
|
||||
"label": "團隊介紹",
|
||||
"title1": "匯聚精英",
|
||||
"title2": "燃文藝創變引擎",
|
||||
"desc": "FiEE團隊由運營專家、技術精英及國際顧問組成，提供從內容策劃到全球推廣的全方位支持。通過跨界合作與資源整合，FiEE突破傳統邊界，探索文藝新表達。依托前沿技術與精準營銷，助力作品實現商業價值與社會影響力的雙重提升，為文藝繁榮注入持久動力。",
|
||||
"features": {
|
||||
"global": {
|
||||
"title": "縱橫全球 多元領航",
|
||||
"desc": "海外精準營銷，鋪設多元渠道，塑造國際品牌。智能管理多語言平台，提供本地化服務。"
|
||||
},
|
||||
"fans": {
|
||||
"title": "深耕粉絲 構築生態",
|
||||
"desc": "社區精細運營，提供多元增值服務。升級社群管理工具，精準觸達用戶。創新激勵機制，開發特色衍生周邊。"
|
||||
},
|
||||
"talent": {
|
||||
"title": "廣納賢才 團隊進階",
|
||||
"desc": "廣納技術、營銷精英，注入創新活力。強化內部培訓，優化組織架構。引入先進理念，提升管理與服務效能。"
|
||||
}
|
||||
}
|
||||
},
|
||||
"achievement": {
|
||||
"label": "卓越建樹",
|
||||
"title": "以開拓之姿，登文藝之巔",
|
||||
"desc": "長期深耕文藝領域，FiEE持續拓展業務版圖，積累了深厚的行業資源，搭建起廣泛的合作網絡。目前已與多個全球熱門自媒體平台深度攜手，從多維度助力文藝創作者閃耀國際舞台，綻放獨有的藝術光芒。",
|
||||
"certification": {
|
||||
"title1": "權威資質認證",
|
||||
"title2": "鑄就文藝事業堅實根基",
|
||||
"desc": "FiEE提供專業且權威的資質認證服務，助力文藝創作者獲取行業廣泛認可的資質。這不僅能讓文藝創作者的作品價值得到顯著提升，更能使文藝創作者在競爭白熱化的藝術市場中嶄露頭角，大幅增強文藝工作者的市場競爭力，為文藝創作者的事業鋪就穩固基石。"
|
||||
},
|
||||
"platform": {
|
||||
"title1": "全球平台矩陣",
|
||||
"title2": "拓展文藝傳播邊界",
|
||||
"desc": "FiEE憑藉深厚的行業資源和廣泛的合作網絡，與超過 30 個全球熱門自媒體平台達成深度戰略合作夥伴關係。從國際知名的社交平台，到專注文藝領域的專業媒體，我們為文藝創作者精心打造專屬賬號，並運用先進的優化策略，讓文藝創作者的賬號在眾多創作者中脫穎而出。"
|
||||
}
|
||||
},
|
||||
"news": {
|
||||
"label": "聚焦FIEE前沿動態",
|
||||
"title": "洞察趨勢，點亮文藝前行燈塔",
|
||||
"desc": "FiEE始終紮根文藝領域，時刻緊跟全球藝術發展趨勢。通過深度剖析案例、開展跨界研討，探索文藝與科技、商業的深度融合，為文藝事業未來發展提供前瞻性洞察與靈感啟迪。",
|
||||
"carousel": {
|
||||
"item1": {
|
||||
"title": "實現技術突破，引領文藝創作技術革新",
|
||||
"desc": "在數字化浪潮以前所未有的態勢席捲文藝領域的當下，文藝創作正經歷著深刻變革。FiEE憑藉著團隊持之以恆的努力與創新精神，在文藝創作技術領域取得了具有里程碑意義的重大突破。 歷經無數個日夜的艱苦攻堅，FiEE自主研發的新一代智能創作輔助系統正式上線，宛如一顆冉冉升起的璀璨新星，為文藝創作開闢了全新的發展路徑，給整個行業帶來了前所未有的變革與機遇。"
|
||||
},
|
||||
"item2": {
|
||||
"title": "全球化戰略升級，FiEE與30+國際平台達成戰略合作，構建文藝傳播新矩陣",
|
||||
"desc": "在全球文化交融以前所未有的迅猛之勢加速推進的時代大背景下，文藝領域已然成為文化交流與創新的前沿陣地。作為文藝行業的領航者，FiEE 以敏銳的戰略眼光和果敢的行動力，積極投身於這場全球文化交流的浪潮之中。 近日，FiEE 振奮人心地宣布與 TikTok、Instagram等 30 餘家國際頭部自媒體平台達成深度戰略合作，同時正式啟動具有深遠意義的\"文藝無界計劃\"，矢志破除地域之間的文化藩籬。"
|
||||
},
|
||||
"item3": {
|
||||
"title": "助力文藝創作者，FiEE 發布\"AI × 短視頻\"全鏈路解決方案",
|
||||
"desc": "對於文藝創作者而言，創作瓶頸與效率低下是橫亙在前行道路上的兩座大山。構思一個吸引人的短視頻腳本，常常需要耗費大量時間和精力，創作者們不僅要絞盡腦汁思考獨特的創意，還要兼顧受眾喜好和市場趨勢。 作品完成後的傳播與推廣，同樣是一道難以跨越的鴻溝。"
|
||||
},
|
||||
"item4": {
|
||||
"title": "FiEE啟動 18 個月藝術 KOL 孵化，培育文藝領域明日之星",
|
||||
"desc": "在文藝產業蓬勃發展的當下，優質內容創作者的重要性愈發凸顯。作為行業內的先鋒企業，FiEE始終關注著文藝領域的人才培養與發展動態。 今日，FiEE正式宣布啟動一項精心籌備長達 18 個月的藝術 KOL 孵化計劃，旨在為文藝領域培育一批具有強大影響力的明日之星，推動整個行業的創新發展。"
|
||||
},
|
||||
"item5": {
|
||||
"title": "多元人才匯聚，FiEE 構築文藝創新發展基石",
|
||||
"desc": "在當下文藝行業蓬勃發展、百花齊放的黃金時代，創新儼然成為引領行業持續進步、突破傳統格局的關鍵要素。而追根溯源，人才作為創新的核心驅動力，其重要性不言而喻。 FiEE 深明此理，以海納百川的胸懷和高瞻遠矚的戰略眼光，積極廣納賢才，精心匯聚運營專家、技術精英以及國際顧問。"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"companyprofildetail": {
|
||||
"article1": {
|
||||
"title": "實現技術突破，引領文藝創作技術革新",
|
||||
"date": "2025年02月07日 12時00分",
|
||||
"content": [
|
||||
"在數字化浪潮以前所未有的態勢席捲文藝領域的當下，文藝創作正經歷著深刻變革。FiEE憑藉著團隊持之以恆的努力與創新精神，在文藝創作技術領域取得了具有里程碑意義的重大突破。",
|
||||
"歷經無數個日夜的艱苦攻堅，FiEE自主研發的新一代智能創作輔助系統正式上線，宛如一顆冉冉升起的璀璨新星，為文藝創作開闢了全新的發展路徑，給整個行業帶來了前所未有的變革與機遇。",
|
||||
"研發過程中，技術團隊遭遇了諸多棘手難題。在海量文藝作品數據的收集環節，需從不同年代、不同風格、不同類型的文藝作品中獲取數據，涵蓋古今中外的文學名著、影視佳作、音樂經典等，這些數據來源廣泛且格式多樣，收集難度極大。整理與分析時，既要確保數據的準確性和完整性，又要對不同類型的數據進行分類整合，以便後續的深度挖掘。",
|
||||
"人工智能算法的優化也絕非易事，團隊需要不斷調整算法參數，使其能夠精準地從海量數據中提取有價值的信息。大數據模型的搭建更是複雜，要考慮到模型的穩定性、可擴展性以及與其他技術的兼容性。",
|
||||
"團隊成員們查閱了海量的國內外資料，從前沿學術論文到行業實踐案例，不放過任何一個可能的靈感來源。進行了無數次的實驗和模擬，每一次實驗都可能面臨失敗，但他們從未放棄，不斷優化方案。",
|
||||
"比如在處理不同類型文藝作品數據的兼容性時，團隊創新性地採用了多維度數據分類算法。這種算法通過對數據的時間維度、風格維度、題材維度等多個角度進行分析，將看似雜亂無章的數據進行有效分類，確保了數據的精準分析和利用，為後續的智能創作支持奠定了堅實基礎。該智能創作輔助系統整合了人工智能、大數據等前沿技術，為創作者提供了全方位、智能化的創作支持。通過對海量文藝作品數據的深度挖掘與分析，系統能夠精準洞察當下文藝創作的趨勢與熱點。",
|
||||
"在提高創作效率方面，系統的人工智能技術展現出強大實力。傳統創作方式可能需要花費數月時間構思框架，而使用該系統，僅需幾天時間就能生成初步框架，創作者只需在此基礎上進行細節完善，大大縮短了創作週期。",
|
||||
"公司技術研發團隊負責人在發布會上難掩激動之情：\"這次技術突破是我們團隊長期以來辛勤付出的結晶，也是FiEE對文藝創作技術革新的一次大膽嘗試。我們深知，在科技飛速發展的今天，只有不斷創新，才能為文藝創作者提供更強大的創作工具，推動文藝創作朝著高質量、高效率的方向發展。\"",
|
||||
"業內專家評價道：\"FiEE的這一技術突破，無疑為文藝創作領域注入了新的活力。它不僅提升了創作效率，更為創作者帶來了全新的創作思路，為整個行業的數字化轉型提供了寶貴的經驗和借鑒。\"",
|
||||
"此次技術突破，使FiEE在文藝科技領域的競爭力大幅提升，成為行業內的技術引領者。未來，FiEE將繼續加大技術研發投入，廣納人才，不斷探索創新，致力於為文藝產業的數字化轉型提供更多、更優質的技術支持，推動文藝創作邁向新的高峰。"
|
||||
]
|
||||
},
|
||||
"article2": {
|
||||
"title": "全球化戰略升級，FiEE與30+國際平台達成戰略合作，構建文藝傳播新矩陣",
|
||||
"date": "2025年02月10日 10時30分",
|
||||
"content": [
|
||||
"在全球文化交融以前所未有的迅猛之勢加速推進的時代大背景下，文藝領域已然成為文化交流與創新的前沿陣地。作為文藝行業的領航者，FiEE以敏銳的戰略眼光和果敢的行動力，積極投身於這場全球文化交流的浪潮之中。",
|
||||
"近日，FiEE振奮人心地宣布與TikTok、Instagram等30餘家國際頭部自媒體平台達成深度戰略合作，同時正式啟動具有深遠意義的\"文藝無界計劃\"，矢志破除地域之間的文化藩籬，全力以赴助力文藝創作者登上廣闊無垠的世界舞台。此次FiEE與全球30餘家頂尖平台的深度攜手，堪稱一場全方位、深層次的資源整合與協同創新的盛會。",
|
||||
"在社交媒體領域，與TikTok的合作堪稱一大亮點。TikTok以其獨特的短視頻生態和強大的算法推薦系統，在全球範圍內吸引了數十億用戶。借助這一平台，FiEE能夠將文藝創作者的精彩作品以極具感染力的短視頻形式，迅速精準地推送給全球各地對文藝感興趣的用戶，輕鬆打破地域限制，引發全球範圍內的熱烈互動與關注。",
|
||||
"Instagram則憑藉其精美的視覺呈現和活躍的社交氛圍，為各類文藝作品搭建了一個絕佳的展示櫥窗。在這裡，創作者們的作品能夠得到高水準的展示，收穫海量粉絲的關注與點贊，極大地提升作品的曝光量與影響力，讓藝術之美在全球範圍內廣泛傳播。在垂直社區方面，與ArtStation等專業平台的合作，為不同文藝領域的創作者們營造了一個專業、純粹的交流與展示空間。",
|
||||
"為確保\"文藝無界計劃\"能夠高效、有序地實施，FiEE制定了一系列詳盡且切實可行的策略與措施。在內容創作環節，FiEE將邀請國際知名的文藝專家、創作者開展線上線下相結合的專業培訓與指導課程，幫助創作者深入了解國際市場的審美偏好、文化需求以及流行趨勢，從而提升作品的國際傳播力。",
|
||||
"在推廣運營方面，FiEE將整合各方優勢資源，為創作者量身定制全方位、立體化的推廣方案。一方面，積極舉辦線上創作比賽等活動，吸引全球用戶的目光，迅速提升創作者的知名度與影響力；另一方面，充分利用社交媒體平台的廣告投放、話題營銷、達人合作等手段，精準推送創作者的作品，進一步擴大作品的傳播範圍，讓更多人能夠欣賞到優秀的文藝創作。",
|
||||
"可以預見，對於廣大文藝創作者而言，此次合作無疑是一次千載難逢的發展機遇。他們將有機會與國際頂尖的藝術家、創作者進行深度交流與合作，接觸到全球最前沿的創作理念與技術，從而拓寬自己的創作視野，提升創作水平。同時，通過多元化的平台矩陣，他們的作品能夠獲得前所未有的曝光量與認可度，實現商業價值的最大化，為自己的藝術生涯開闢更為廣闊的發展空間。",
|
||||
"展望未來，FiEE將堅定不移地繼續深化與國際平台的合作，不斷優化和完善\"文藝無界計劃\"，持續為文藝創作者提供更加優質、全面、高效的服務，助力他們在國際舞台上綻放出更加耀眼奪目的光芒，為推動全球文化的交流、融合與繁榮貢獻更多的智慧與力量。"
|
||||
]
|
||||
},
|
||||
"article3": {
|
||||
"title": "助力文藝創作者，FiEE 發布 \"AI × 短視頻\" 全鏈路解決方案",
|
||||
"date": "2025年02月14日 12時30分",
|
||||
"content": [
|
||||
"對於文藝創作者而言，創作瓶頸與效率低下是橫亙在前行道路上的兩座大山。構思一個吸引人的短視頻腳本，常常需要耗費大量時間和精力，創作者們不僅要絞盡腦汁思考獨特的創意，還要兼顧受眾喜好和市場趨勢。",
|
||||
"作品完成後的傳播與推廣，同樣是一道難以跨越的鴻溝。在信息爆炸的時代，如何讓自己的作品在海量內容中脫穎而出，精準觸達目標受眾，成為創作者們日思夜想的難題。",
|
||||
"傳統的傳播方式猶如撒網捕魚，精準度嚴重不足，大量優質的文藝內容在傳播過程中石沉大海，難以被真正感興趣的受眾發現。而且，用戶互動性的欠缺也使得創作者無法深入挖掘用戶需求，難以與受眾建立起緊密的情感連接，作品難以真正\"活\"起來，在傳播的浪潮中顯得孤立無援。",
|
||||
"在科技飛速發展的當下，人工智能與短視頻行業正以前所未有的速度改變著文藝創作與傳播的格局。",
|
||||
"作為文藝領域的創新先鋒，FiEE緊跟時代步伐，積極探索技術與文藝的深度融合，今日正式發布\"AI × 短視頻\"全鏈路解決方案，為文藝行業帶來了一場革命性的變革。",
|
||||
"該解決方案集成了多項前沿AI技術，具有多方面的顯著優勢。在內容創作環節，AI智能腳本生成工具能夠根據創作者輸入的主題、風格、受眾等關鍵信息，快速生成創意十足的腳本。通過對海量優秀短視頻腳本和文藝作品的學習，AI不僅能提供新穎的故事框架，還能精準匹配符合主題的情節與台詞，大大縮短了創作週期。",
|
||||
"在內容傳播與運營方面，AI大數據分析技術讓短視頻的推廣更加精準有效。通過對用戶的瀏覽歷史、點贊評論行為、關注列表等多維度數據進行深度分析，系統能夠精準洞察用戶的興趣偏好和需求，將文藝創作者的作品推送給真正感興趣的受眾群體。該解決方案的應用場景廣泛，無論是專業的文藝創作者，還是懷揣文藝夢想的業餘愛好者，都能從中受益。",
|
||||
"專業創作者可以借助AI技術突破創作瓶頸，提升創作效率，創作出更具創新性和影響力的作品；業餘愛好者則可以通過該方案降低創作門檻，輕鬆實現自己的創作想法，享受創作的樂趣。FiEE相關負責人表示：\"我們一直關注著文藝創作者的需求和痛點，希望通過\"AI × 短視頻\"全鏈路解決方案，為他們提供全方位的支持和幫助。這不僅是一次技術的創新應用，更是我們助力文藝行業發展的一次重要實踐。我們相信，在AI技術的加持下，文藝創作者們能夠創作出更多優秀的作品，讓文藝之光照亮更廣闊的天地。\"",
|
||||
"展望未來，FiEE將持續投入研發力量，不斷優化和完善\"AI × 短視頻\"全鏈路解決方案，探索更多AI技術在文藝領域的應用場景，加強與行業夥伴的合作，共同推動文藝創作與傳播的創新發展，為文藝創作者打造更加優質、高效的創作環境，助力文藝行業邁向新的高峰。"
|
||||
]
|
||||
},
|
||||
"article4": {
|
||||
"title": "FiEE啟動 18 個月藝術 KOL 孵化，培育文藝領域明日之星",
|
||||
"date": "2025年02月19日 12時00分",
|
||||
"content": [
|
||||
"在文藝產業蓬勃發展的當下，優質內容創作者的重要性愈發凸顯。作為行業內的先鋒企業，FiEE始終關注著文藝領域的人才培養與發展動態。",
|
||||
"今日，FiEE正式宣布啟動一項精心籌備長達18個月的藝術KOL孵化計劃，旨在為文藝領域培育一批具有強大影響力的明日之星，推動整個行業的創新發展。隨著社交媒體的興起和內容傳播方式的變革，KOL在文藝領域的傳播與推廣中扮演著關鍵角色。他們不僅是優質內容的創作者，更是連接文藝作品與廣大受眾的橋樑。",
|
||||
"然而，培養一位成熟且具有廣泛影響力的藝術KOL並非一蹴而就，需要系統的規劃、專業的指導以及充足的實踐機會。FiEE敏銳地洞察到這一市場需求，投入大量資源，精心策劃了此次為期18個月的孵化計劃。此次孵化計劃目標明確，旨在挖掘並培養一批在文藝領域具有潛力的創作者，幫助他們成長為在國內外具有較高知名度和影響力的藝術KOL。",
|
||||
"通過這一計劃，不僅能夠為這些創作者提供廣闊的發展空間，還能為文藝市場注入新鮮血液，推動文藝作品的多元化傳播。在實施內容上，計劃涵蓋多個維度，全方位助力創作者成長。在專業培訓環節，公司邀請了來自不同藝術領域的知名專家和學者，為創作者們提供系統且深入的課程培訓。",
|
||||
"這些課程內容豐富，既包括藝術創作技巧的提升，如繪畫中的色彩運用、音樂創作中的旋律編排等，也涵蓋新媒體運營知識，如社交媒體營銷策略、粉絲互動技巧等，以及商業管理方面的課程，幫助創作者了解文藝市場的運作規律，實現作品的商業價值轉化。同時，為確保每位創作者都能得到個性化的指導，公司還為他們配備了一對一的導師，導師將根據創作者的特點和需求，提供針對性的建議和幫助。",
|
||||
"資源對接也是孵化計劃的重要組成部分。FiEE憑藉多年在行業內積累的深厚資源和廣泛的合作夥伴關係，為創作者搭建了與品牌、媒體、平台等對接的橋樑。創作者們有機會與知名品牌合作，為其創作具有藝術價值的宣傳內容；與媒體合作，參與文藝專題報導和節目製作；與各大文藝平台合作，發布自己的作品，擴大作品的傳播範圍。",
|
||||
"FiEE藝術KOL孵化項目負責人在啟動儀式上表示：\"我們堅信，每一位參與孵化計劃的創作者都具有無限的潛力。這18個月的時間，將是他們成長的關鍵時期。FiEE將全力為他們提供支持和幫助，讓他們在藝術創作的道路上越走越遠，成為文藝領域的中流砥柱。\"",
|
||||
"展望未來，此次18個月藝術KOL孵化計劃的實施，有望為文藝領域培養出一批具有獨特風格和廣泛影響力的KOL。",
|
||||
"他們將通過自己的作品和影響力，吸引更多人關注文藝，推動文藝作品的傳播與創新，為文藝產業的繁榮發展貢獻重要力量。FiEE也將持續關注創作者的成長，不斷優化孵化計劃，為文藝領域的人才培養探索更多有效的模式。"
|
||||
]
|
||||
},
|
||||
"article5": {
|
||||
"title": "多元人才匯聚，FiEE 構築文藝創新發展基石",
|
||||
"date": "2025年02月20日 12時00分",
|
||||
"content": [
|
||||
"在當下文藝行業蓬勃發展、百花齊放的黃金時代，創新儼然成為引領行業持續進步、突破傳統格局的關鍵要素。而追根溯源，人才作為創新的核心驅動力，其重要性不言而喻。",
|
||||
"FiEE深明此理，以海納百川的胸懷和高瞻遠矚的戰略眼光，積極廣納賢才，精心匯聚運營專家、技術精英以及國際顧問，成功打造出一支專業素養過硬、知識結構多元的卓越團隊，為公司在文藝領域的創新征程築牢了堅不可摧的發展根基。",
|
||||
"運營專家團隊堪稱FiEE在文藝領域穩健前行的領航燈塔。他們在文藝行業這片廣闊天地中深耕多年，憑藉豐富的實戰經驗和對市場的深度理解，練就了敏銳捕捉市場動態的能力，對受眾喜好的把握更是精準入微。",
|
||||
"他們借助大數據分析和實地市場調研，深入研究不同年齡段、不同地域受眾的文化背景和興趣偏好，精準定位目標受眾，為文藝創作者提供極具針對性的創作方向。他們會深入剖析當下的社會熱點和觀眾的精神需求，巧妙融入時代元素，讓作品既有深度又具吸引力。通過獨特的創意策劃，從項目起步階段就成功吸引觀眾的目光，為後續的成功奠定堅實基礎。",
|
||||
"隨著科技與文藝的融合趨勢愈發顯著，技術精英成為FiEE創新發展的強勁引擎。",
|
||||
"公司積極招徠掌握人工智能、大數據、虛擬現實等前沿技術的專業人才，為文藝創作注入科技活力。在內容創作過程中，這些技術精英充分發揮人工智能輔助創作工具的優勢，為文藝創作者提供源源不斷的靈感啟發。利用虛擬現實（VR）和增強現實（AR）技術，讓作品與觀眾進行深度互動，極大地拓展了文藝作品的表現形式和傳播範圍。",
|
||||
"在全球化的時代浪潮下，國際顧問團隊為FiEE帶來了廣闊的全球視野和多元的文化視角。他們來自世界各地，對不同國家和地區的文藝市場規則、審美偏好以及文化差異有著深入的了解。在FiEE將本土優秀文藝作品推向世界的過程中，國際顧問團隊發揮著關鍵作用。這不僅為本土文藝創作者帶來了新的創作思路和啟發，也提升了FiEE在國際文藝領域的影響力。",
|
||||
"正是因為有了運營專家、技術精英和國際顧問等多元人才的匯聚，FiEE得以通過跨界合作與資源整合，突破傳統文藝的邊界，探索文藝新表達。FiEE與科技企業、時尚品牌、教育機構等展開廣泛合作，將文藝與科技、時尚、教育等領域深度融合，創造出一系列新穎的文藝產品和服務。依托前沿技術與精準營銷，FiEE助力眾多文藝作品實現了商業價值與社會影響力的雙重提升，為文藝的繁榮發展注入了持久動力。",
|
||||
"展望未來，FiEE將繼續秉持開放、包容的人才理念，不斷完善人才戰略，吸引更多優秀人才加入。我們堅信，在多元人才的共同努力下，FiEE將在文藝創新發展的道路上不斷前行，為推動全球文藝事業的繁榮做出更大的貢獻。"
|
||||
]
|
||||
}
|
||||
},
|
||||
"businessintroduction": {
|
||||
"hero": {
|
||||
"title1": "AI × 短視頻",
|
||||
"title2": "領航文創新視界",
|
||||
"desc": "深度融合前沿 AI 技術與短視頻平台的獨特優勢，率先開啟探索之旅，勇立潮頭，領航文創領域踏入前所未有的嶄新視界"
|
||||
},
|
||||
"industry": {
|
||||
"label": "行業現狀",
|
||||
"title": "文創遇阻，短視頻解鎖行業增長新密碼",
|
||||
"desc": "在文創領域深陷內容趨同、靈感枯竭的困局時，短視頻憑藉其獨特的沉浸式體驗、強大的社交裂變屬性，打破桎梏，如春風化雨般為行業注入新的生命力，成為驅動增長的強勁引擎。",
|
||||
"challenges": {
|
||||
"title": "文藝市場困局",
|
||||
"items": [
|
||||
{
|
||||
title: '文藝價值蒙塵',
|
||||
desc: '品牌塑造與市場運營匱乏，致使文藝價值隱於暗處，難以被大眾洞悉與認可。'
|
||||
"title": "文藝價值蒙塵",
|
||||
"desc": "品牌塑造與市場運營匱乏，致使文藝價值隱於暗處，難以被大眾洞悉與認可。"
|
||||
},
|
||||
{
|
||||
title: '推廣途徑困局',
|
||||
desc: '個人社交平台和傳統展覽形式陳舊，無法達成廣泛且優質的曝光，嚴重束縛傳播。'
|
||||
"title": "推廣途徑困局",
|
||||
"desc": "個人社交平台和傳統展覽形式陳舊，無法達成廣泛且優質的曝光，嚴重束縛傳播。"
|
||||
},
|
||||
{
|
||||
title: '宣傳單一致貧',
|
||||
desc: '過度倚重線下展廳與個別展會，宣傳面狹隘，致使收入結構單一且不穩定。'
|
||||
"title": "宣傳單一致貧",
|
||||
"desc": "過度倚重線下展廳與個別展會，宣傳面狹隘，致使收入結構單一且不穩定。"
|
||||
},
|
||||
{
|
||||
title: '傳統營銷掣肘',
|
||||
desc: '傳統廣告渠道收費高昂，文藝創作者財力難支，極大限制了推廣宣傳的範圍。'
|
||||
"title": "傳統營銷掣肘",
|
||||
"desc": "傳統廣告渠道收費高昂，文藝創作者財力難支，極大限制了推廣宣傳的範圍。"
|
||||
}
|
||||
]
|
||||
},
|
||||
opportunity: {
|
||||
title: '短視頻自媒體：澎湃新勢，蘊蓄無垠商機',
|
||||
desc: '當下，短視頻市場呈爆發式增長，廣告規模迅猛擴張。短視頻作為互聯網內容領域的活力擔當，用戶規模和使用時長一路飆升，為廣告投放與變現開闢廣闊天地，用戶時長佔比節節攀升，用戶粘性與日俱增，蘊藏無限潛力與機遇。'
|
||||
"opportunity": {
|
||||
"title": "短視頻自媒體：澎湃新勢，蘊蓄無垠商機",
|
||||
"desc": "當下，短視頻市場呈爆發式增長，廣告規模迅猛擴張 。短視頻作為互聯網內容領域的活力擔當，用戶規模和使用時長一路飆升，為廣告投放與變現開闢廣闊天地，用戶時長佔比節節攀升，用戶粘性與日俱增，蘊藏無限潛力與機遇。"
|
||||
}
|
||||
},
|
||||
solution: {
|
||||
label: '行業現狀',
|
||||
title: '文創遇阻，短視頻解鎖行業增長新密碼',
|
||||
features: {
|
||||
precision: {
|
||||
title: '精準分發 開啟粉絲增長引擎',
|
||||
desc: '運用大數據分析與 AI 算法，深度剖析用戶瀏覽習慣、搜索偏好等行為數據，構建精準用戶畫像，把文藝創作者的作品精準推送給潛在受眾，將無目的需求方轉化為忠實粉絲，為創作者影響力傳播奠定基礎。'
|
||||
"solution": {
|
||||
"label": "行業現狀",
|
||||
"title": "文創遇阻，短視頻解鎖行業增長新密碼",
|
||||
"features": {
|
||||
"precision": {
|
||||
"title": "精準分發 開啟粉絲增長引擎",
|
||||
"desc": "運用大數據分析與 AI 算法，深度剖析用戶瀏覽習慣、搜索偏好等行為數據，構建精準用戶畫像，把文藝創作者的作品精準推送給潛在受眾，將無目的需求方轉化為忠實粉絲，為創作者影響力傳播奠定基礎。"
|
||||
},
|
||||
monetization: {
|
||||
title: '多元變現 激活商業價值鏈條',
|
||||
desc: '為挖掘文藝創作商業價值，搭建粉絲經濟運營體系。通過便捷打賞機制，讓粉絲即時表達對創作者的喜愛；提供實體和數字作品售賣渠道，滿足粉絲收藏需求；推出訂閱服務，提供獨家內容與活動優先參與權益，增強粉絲粘性。這些途徑推動粉絲轉變為消費者，實現創作者和平台的收入增長。'
|
||||
"monetization": {
|
||||
"title": "多元變現 激活商業價值鏈條",
|
||||
"desc": "為挖掘文藝創作商業價值，搭建粉絲經濟運營體系。通過便捷打賞機制，讓粉絲即時表達對創作者的喜愛；提供實體和數字作品售賣渠道，滿足粉絲收藏需求；推出訂閱服務，提供獨家內容與活動優先參與權益，增強粉絲粘性。這些途徑推動粉絲轉變為消費者，實現創作者和平台的收入增長。"
|
||||
},
|
||||
interaction: {
|
||||
title: '互動共享 構建藝術生態閉環',
|
||||
desc: '借助智能社交推薦技術，推動粉絲間深度互動交流，分享見解與創作靈感，挖掘彼此潛在需求，實現粉絲群體自然裂變。同時，通過數據分析洞察消費群體特徵和需求，精準拓展消費圈層，挖掘新商機。這一互動共享機制構建起可持續發展的文藝創作生態，創作者影響力持續提升，公司也實現穩健發展與收益增長，達成雙贏。'
|
||||
"interaction": {
|
||||
"title": "互動共享 構建藝術生態閉環",
|
||||
"desc": "借助智能社交推薦技術，推動粉絲間深度互動交流，分享見解與創作靈感，挖掘彼此潛在需求，實現粉絲群體自然裂變。同時，通過數據分析洞察消費群體特徵和需求，精準拓展消費圈層，挖掘新商機。這一互動共享機制構建起可持續發展的文藝創作生態，創作者影響力持續提升，公司也實現穩健發展與收益增長，達成雙贏。"
|
||||
}
|
||||
}
|
||||
},
|
||||
vision: {
|
||||
label: '市場願景',
|
||||
title: '擘畫文藝市場新藍圖',
|
||||
desc: '在變幻莫測的藝術浪潮中，FIEE以創新為筆，精準洞察為墨，以創新思維與全球化視野重新定義文藝產業的未來。深度挖掘文藝潛力，融合多元文化元素，打破傳統壁壘，搭建線上流量社群，重塑文藝生態，激發市場活力，引領文藝價值的新流向，開啟文藝市場的全新時代。',
|
||||
community: {
|
||||
title: '構建十億流量社群，搭建全球文藝交流高地',
|
||||
desc: '運用前沿大數據與 AI 技術，打造十億級流量社群，匯聚全球文藝愛好者。借助智能算法實現精準內容推送與興趣匹配，促進交流互動，為文藝創作者與粉絲搭建高效溝通橋樑，構建文藝生態流量基石。'
|
||||
"vision": {
|
||||
"label": "市場願景",
|
||||
"title": "擘畫文藝市場新藍圖",
|
||||
"desc": "在變幻莫測的藝術浪潮中，FIEE以創新為筆，精準洞察為墨，以創新思維與全球化視野重新定義文藝產業的未來。深度挖掘文藝潛力，融合多元文化元素，打破傳統壁壘，搭建線上流量社群，重塑文藝生態，激發市場活力，引領文藝價值的新流向，開啟文藝市場的全新時代。",
|
||||
"community": {
|
||||
"title": "構建十億流量社群，搭建全球文藝交流高地",
|
||||
"desc": "運用前沿大數據與 AI 技術，打造十億級流量社群，匯聚全球文藝愛好者。借助智能算法實現精準內容推送與興趣匹配，促進交流互動，為文藝創作者與粉絲搭建高效溝通橋樑，構建文藝生態流量基石。"
|
||||
}
|
||||
},
|
||||
cooperation: {
|
||||
title: '全球合作拓展,繪製多元融合版圖',
|
||||
timeline: {
|
||||
year2025: {
|
||||
title: '2025年',
|
||||
desc: '與 1500 + 文藝機構、科技企業達成深度合作，整合資源，共同探索文藝科技融合項目，推動藝術創作與傳播模式創新。'
|
||||
"cooperation": {
|
||||
"title": "全球合作拓展,繪製多元融合版圖",
|
||||
"timeline": {
|
||||
"year2025": {
|
||||
"title": "2025年",
|
||||
"desc": "與 1500 + 文藝機構、科技企業達成深度合作，整合資源，共同探索文藝科技融合項目，推動藝術創作與傳播模式創新。"
|
||||
},
|
||||
year2026: {
|
||||
title: '2026年',
|
||||
desc: '全球合作夥伴突破 5000+，建立廣泛合作網絡，拓展業務覆蓋區域，在全球主要藝術市場落地項目，提升品牌國際知名度。'
|
||||
"year2026": {
|
||||
"title": "2026年",
|
||||
"desc": "全球合作夥伴突破 5000+，建立廣泛合作網絡，拓展業務覆蓋區域，在全球主要藝術市場落地項目，提升品牌國際知名度。"
|
||||
},
|
||||
year2027: {
|
||||
title: '2027年',
|
||||
desc: '戰略合作夥伴超 10000+，形成穩固全球戰略聯盟，全面打通文藝產業鏈，實現資源共享、互利共贏。'
|
||||
"year2027": {
|
||||
"title": "2027年",
|
||||
"desc": "戰略合作夥伴超 10000+，形成穩固全球戰略聯盟，全面打通文藝產業鏈，實現資源共享、互利共贏。"
|
||||
}
|
||||
}
|
||||
},
|
||||
incubation: {
|
||||
title: '18個月孵化0基礎藝術KOL',
|
||||
subtitle: '釋放文藝商業潛能',
|
||||
desc: '18 個月，是一場藝術潛能的深度挖掘，更是一次文藝商業的破繭之旅。從繪畫技巧到審美構建，從內容創作到流量運營，全方位賦能。FiEE為 0 基礎者量身定制成長路徑，助你跨越文藝與商業的橋樑，成為引領潮流的文藝 KOL ，開啟無限可能的文藝新征程。',
|
||||
features: {
|
||||
fans: {
|
||||
title: '粉絲增長',
|
||||
desc: '至 2027 年，憑藉精準營銷策略，助力每位藝術家粉絲數超 10 萬，粉絲社區人數達 10 億，壯大文藝創作者粉絲群體，增強作品影響力。'
|
||||
"incubation": {
|
||||
"title": "18個月孵化0基礎藝術KOL",
|
||||
"subtitle": "釋放文藝商業潛能",
|
||||
"desc": "18 個月，是一場藝術潛能的深度挖掘，更是一次文藝商業的破繭之旅。從繪畫技巧到審美構建，從內容創作到流量運營，全方位賦能。FiEE為 0 基礎者量身定制成長路徑，助你跨越文藝與商業的橋樑，成為引領潮流的文藝 KOL ，開啟無限可能的文藝新征程。",
|
||||
"features": {
|
||||
"fans": {
|
||||
"title": "粉絲增長",
|
||||
"desc": "至 2027 年，憑藉精準營銷策略，助力每位藝術家粉絲數超 10 萬，粉絲社區人數達 10 億，壯大文藝創作者粉絲群體，增強作品影響力。"
|
||||
},
|
||||
kol: {
|
||||
title: 'KOL孵化',
|
||||
desc: '依託十億流量社群，運用精準數據分析，18 個月內將普通文藝創作者或商業品牌打造成國際知名 KOL，實現藝術價值與商業價值的高效轉化。'
|
||||
"kol": {
|
||||
"title": "KOL孵化",
|
||||
"desc": "依托十億流量社群，運用精準數據分析，18 個月內將普通文藝創作者或商業品牌打造成國際知名 KOL，實現藝術價值與商業價值的高效轉化。"
|
||||
}
|
||||
}
|
||||
},
|
||||
exposure: {
|
||||
title: '市場願景',
|
||||
desc: '憑藉前沿的傳播策略，精準狙擊全球受眾心智。深度整合頂級媒體資源，讓曝光量呈指數級突破，全方位塑造全球品牌影響力，引領文藝潮流走向世界舞台中央。',
|
||||
timeline: {
|
||||
year2025: {
|
||||
title: '2025年',
|
||||
desc: '自媒體平台曝光量突破 5 億+，通過多平台聯動、創意內容營銷，提升品牌與創作者曝光度。'
|
||||
"exposure": {
|
||||
"title": "市場願景",
|
||||
"desc": "憑藉前沿的傳播策略，精準狙擊全球受眾心智。深度整合頂級媒體資源，讓曝光量呈指數級突破，全方位塑造全球品牌影響力，引領文藝潮流走向世界舞台中央 。",
|
||||
"timeline": {
|
||||
"year2025": {
|
||||
"title": "2025年",
|
||||
"desc": "自媒體平台曝光量突破 5 億+，通過多平台聯動、創意內容營銷，提升品牌與創作者曝光度。"
|
||||
},
|
||||
year2026: {
|
||||
title: '2026年',
|
||||
desc: '曝光量達 10 億 +，深化品牌傳播，吸引更多潛在用戶與合作夥伴。'
|
||||
"year2026": {
|
||||
"title": "2026年",
|
||||
"desc": "曝光量達 10 億 +，深化品牌傳播，吸引更多潛在用戶與合作夥伴。"
|
||||
},
|
||||
year2027: {
|
||||
title: '2027年',
|
||||
desc: '實現 50 億 + 跨次元突破，打破行業與文化界限，全方位提升品牌國際影響力，推動文化藝術與科技深度交融，塑造行業發展新潮流。'
|
||||
"year2027": {
|
||||
"title": "2027年",
|
||||
"desc": "實現 50 億 + 跨次元突破，打破行業與文化界限，全方位提升品牌國際影響力，推動文化藝術與科技深度交融 ，塑造行業發展新潮流。"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,9 +1,656 @@
|
||||
<script setup>
|
||||
import { useAuth } from "@/store/auth/index.js";
|
||||
const { clickSendCode, telNum, code, showTextCode, clickLogin } = useAuth();
|
||||
</script>
|
||||
<template>
|
||||
<div class="box-border relative w-screen min-h-screen" style=""></div>
|
||||
</template>
|
||||
import {
|
||||
onUnmounted,
|
||||
ref,
|
||||
watch,
|
||||
reactive,
|
||||
onMounted
|
||||
} from "vue";
|
||||
import gsap from "gsap";
|
||||
import ScrollTrigger from "gsap/ScrollTrigger";
|
||||
import { useHome } from "@/store/home/index.js";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useTransitionComposable } from "@/composables/transition-composable";
|
||||
import { useRouter } from "vue-router";
|
||||
import { NDivider } from "naive-ui";
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
// 注册 ScrollTrigger 插件
|
||||
gsap.registerPlugin(ScrollTrigger);
|
||||
const { currentTab } = useHome();
|
||||
const router = useRouter();
|
||||
const { transitionState } =
|
||||
useTransitionComposable();
|
||||
const main = ref();
|
||||
let ctx;
|
||||
const { t } = useI18n();
|
||||
const handleTabClick = (tab) => {
|
||||
currentTab.value = tab;
|
||||
router.push("/" + tab);
|
||||
};
|
||||
watch(
|
||||
[
|
||||
() =>
|
||||
transitionState.transitionComplete,
|
||||
main,
|
||||
],
|
||||
(newValue) => {
|
||||
if (newValue && main.value) {
|
||||
ctx = gsap.context((self) => {
|
||||
// Text animations from left
|
||||
gsap.utils
|
||||
.toArray(".text-animate")
|
||||
.forEach((text) => {
|
||||
gsap.from(text, {
|
||||
x: -100,
|
||||
opacity: 0,
|
||||
duration: 0.8,
|
||||
ease: "back.out(1.2)",
|
||||
scrollTrigger: {
|
||||
trigger: text,
|
||||
start: "top 85%",
|
||||
toggleActions: "play none none reverse",
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
// Image animations from right
|
||||
gsap.utils
|
||||
.toArray(".image-animate")
|
||||
.forEach((image) => {
|
||||
gsap.from(image, {
|
||||
x: 100,
|
||||
opacity: 0,
|
||||
duration: 0.8,
|
||||
ease: "back.out(1.2)",
|
||||
scrollTrigger: {
|
||||
trigger: image,
|
||||
start: "top 85%",
|
||||
toggleActions: "play none none reverse",
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
// Float up animations for content sections
|
||||
gsap.utils.toArray('.float-up').forEach((element) => {
|
||||
gsap.from(element, {
|
||||
y: 100,
|
||||
opacity: 0,
|
||||
duration: 0.8,
|
||||
ease: "back.out(1.2)",
|
||||
scrollTrigger: {
|
||||
trigger: element,
|
||||
start: 'top 85%',
|
||||
toggleActions: "play none none reverse",
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 轮播卡片上升动画
|
||||
gsap.from('.carousel-item', {
|
||||
y: 100,
|
||||
opacity: 0,
|
||||
duration: 0.8,
|
||||
stagger: 0.2,
|
||||
ease: "back.out(1.2)",
|
||||
scrollTrigger: {
|
||||
trigger: '.carousel-container',
|
||||
start: 'top 85%',
|
||||
toggleActions: "play none none reverse",
|
||||
}
|
||||
});
|
||||
|
||||
}, main.value);
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
}
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
window.scrollTo(0, 0);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
ctx?.revert(); // <- Easy Cleanup!
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header className="header">
|
||||
<div class="logo">
|
||||
<img src="@/assets/image/logo.png" alt="logo" />
|
||||
</div>
|
||||
<div class="tabs">
|
||||
<div class="tab-item" :class="{
|
||||
active: currentTab === 'home',
|
||||
}" @click="handleTabClick('home')">
|
||||
{{ t("home.nav.home") }}
|
||||
</div>
|
||||
<div class="tab-item" :class="{
|
||||
active:
|
||||
currentTab ===
|
||||
'companyprofil',
|
||||
}" @click="
|
||||
handleTabClick(
|
||||
'companyprofil'
|
||||
)
|
||||
">
|
||||
{{ t("home.nav.company") }}
|
||||
</div>
|
||||
<div class="tab-item" :class="{
|
||||
active:
|
||||
currentTab === 'businessintroduction',
|
||||
}" @click="
|
||||
handleTabClick('businessintroduction')
|
||||
">
|
||||
{{ t("home.nav.businessintroduction") }}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main ref="main" class="height-full">
|
||||
<div class="head relative">
|
||||
<img src="@/assets/image/ywjs.png" alt="head" />
|
||||
|
||||
<div class="absolute top-240px left-510px text-[#10253E] text-[54px] font-bold text-animate">
|
||||
{{ t('businessintroduction.hero.title1') }}
|
||||
</div>
|
||||
<div class="absolute top-320px left-510px text-[#10253E] text-[54px] font-bold text-animate">
|
||||
{{ t('businessintroduction.hero.title2') }}
|
||||
</div>
|
||||
<div class="absolute top-420px left-510px text-[#8B59F7] text-[20px] w-[535px] text-animate">
|
||||
{{ t('businessintroduction.hero.desc') }}
|
||||
</div>
|
||||
</div>
|
||||
<n-divider class="divider1" vertical />
|
||||
<div class="divider2" style=""></div>
|
||||
<div class="divider3" style=""></div>
|
||||
<div class="divider4" style=""></div>
|
||||
<n-divider class="divider5" vertical />
|
||||
<div class="bg-[#F8F9FF]">
|
||||
<div class="content1 relative flex justify-center z-3 pb-[100px] flex-col pr-[10px] float-up">
|
||||
|
||||
<div class="pl-[505px] pr-[480px] flex flex-col">
|
||||
<div class="text-[#8B59F7] text-[16px] text-animate">{{ t('businessintroduction.industry.label') }}</div>
|
||||
<div class="text-[#10253E] text-[40px] mt-[17px] text-animate">{{ t('businessintroduction.industry.title') }}</div>
|
||||
<div class="text-[#455363] text-[16px] mt-[27px] max-w-[748px] text-animate">
|
||||
{{ t('businessintroduction.industry.desc') }}
|
||||
</div>
|
||||
<div class="text-[#8B59F7] text-[22px] mt-[64px] text-animate">{{ t('businessintroduction.industry.challenges.title') }}</div>
|
||||
<div class="flex flex-col mt-[30px]">
|
||||
<div class="flex justify-between">
|
||||
<div class="flex max-w-[405px] float-up">
|
||||
<img class="w-[16px] h-[16px] mt-[5px] mr-[10px] " src="@/assets/image/pball.png" alt="cl" />
|
||||
<div class="text-[#455363] text-[16px] float-up">
|
||||
<div>
|
||||
{{ t('businessintroduction.industry.challenges.items[0].title') }}
|
||||
</div>
|
||||
<div>
|
||||
{{ t('businessintroduction.industry.challenges.items[0].desc') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex max-w-[405px] float-up">
|
||||
<img class="w-[16px] h-[16px] mt-[5px] mr-[10px] " src="@/assets/image/pball.png" alt="cl" />
|
||||
<div class="text-[#455363] text-[16px] float-up">
|
||||
<div>
|
||||
{{ t('businessintroduction.industry.challenges.items[1].title') }}
|
||||
</div>
|
||||
<div>
|
||||
{{ t('businessintroduction.industry.challenges.items[1].desc') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between mt-[30px]">
|
||||
<div class="flex max-w-[405px] float-up">
|
||||
<img class="w-[16px] h-[16px] mt-[5px] mr-[10px] " src="@/assets/image/pball.png" alt="cl" />
|
||||
<div class="text-[#455363] text-[16px] float-up">
|
||||
<div>
|
||||
{{ t('businessintroduction.industry.challenges.items[2].title') }}
|
||||
</div>
|
||||
<div>
|
||||
{{ t('businessintroduction.industry.challenges.items[2].desc') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex max-w-[405px] float-up">
|
||||
<img class="w-[16px] h-[16px] mt-[5px] mr-[10px] " src="@/assets/image/pball.png" alt="cl" />
|
||||
<div class="text-[#455363] text-[16px] float-up">
|
||||
<div>
|
||||
{{ t('businessintroduction.industry.challenges.items[3].title') }}
|
||||
</div>
|
||||
<div>
|
||||
{{ t('businessintroduction.industry.challenges.items[3].desc') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-[#8B59F7] text-[22px] mt-[64px] text-animate">{{ t('businessintroduction.industry.opportunity.title') }}</div>
|
||||
<div class="text-[#455363] text-[16px] mt-[27px] max-w-[748px] text-animate">
|
||||
{{ t('businessintroduction.industry.opportunity.desc') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content2 relative flex items-center pb-[120px] pt-[168px] bg-[#fff] float-up">
|
||||
|
||||
<div class="pl-[505px] pr-[490px] flex z-3">
|
||||
<div class="">
|
||||
<div class="text-[#8B59F7] text-[16px] text-animate">{{ t('businessintroduction.solution.label') }}</div>
|
||||
<div class="text-[#10253E] text-[40px] mt-[17px] text-animate">{{ t('businessintroduction.solution.title') }}</div>
|
||||
<div class="flex justify-between items-center mt-[97px]">
|
||||
<div class="max-w-[412px] float-up">
|
||||
<img class="w-[64px] h-[48px]" src="@/assets/image/jxgb.png" alt="cl" />
|
||||
<div class="text-[#10253E] text-[18px] mt-[20px] font-bold relative">
|
||||
<n-divider class="absolute left-[-23px] top-[6px]" style="
|
||||
background-color: #8b59f7;
|
||||
" vertical />{{ t('businessintroduction.solution.features.precision.title') }}
|
||||
</div>
|
||||
<div class="text-[#455363] text-[16px] mt-[15px] text-animate">
|
||||
{{ t('businessintroduction.solution.features.precision.desc') }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="image-animate">
|
||||
<img class="w-[495px] h-[212px] ml-[20px]" src="@/assets/image/xb.png" alt="cl" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex mt-[112px]">
|
||||
<div class="max-w-[412px] float-up">
|
||||
<img class="w-[58px] h-[50px]" src="@/assets/image/gz.png" alt="cl" />
|
||||
<div class="text-[#10253E] text-[18px] mt-[20px] font-bold relative">
|
||||
<n-divider class="absolute left-[-23px] top-[6px]" style="
|
||||
background-color: #8b59f7;
|
||||
" vertical />{{ t('businessintroduction.solution.features.monetization.title') }}
|
||||
</div>
|
||||
<div class="text-[#455363] text-[16px] mt-[15px] text-animate">
|
||||
{{ t('businessintroduction.solution.features.monetization.desc') }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="max-w-[412px] ml-[55px] float-up">
|
||||
<img class="w-[46px] h-[46px]" src="@/assets/image/3dy.png" alt="cl" />
|
||||
<div class="text-[#10253E] text-[18px] mt-[20px] font-bold relative">
|
||||
<n-divider class="absolute left-[-28px] top-[6px]" style="
|
||||
background-color: #8b59f7;
|
||||
" vertical />{{ t('businessintroduction.solution.features.interaction.title') }}
|
||||
</div>
|
||||
<div class="text-[#455363] text-[16px] mt-[15px] text-animate">
|
||||
{{ t('businessintroduction.solution.features.interaction.desc') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content3 relative overflow-hidden float-up">
|
||||
<n-divider class="divider1" vertical />
|
||||
<div class="divider2" style=""></div>
|
||||
<div class="divider3" style=""></div>
|
||||
<div class="divider4" style=""></div>
|
||||
<n-divider class="divider5" vertical />
|
||||
|
||||
<div class="relative bg-[#F8F9FF] flex flex-col mt-[119px]">
|
||||
<div class=" pl-[505px] pr-[490px] ">
|
||||
<div class="text-[#8B59F7] text-[16px] text-animate">
|
||||
{{ t('businessintroduction.vision.label') }}
|
||||
</div>
|
||||
<div class="text-[#10253E] text-[40px] text-animate">
|
||||
{{ t('businessintroduction.vision.title') }}
|
||||
</div>
|
||||
<div class="text-[#455363] max-w-[748px] text-[16px] mt-[30px] text-animate">
|
||||
{{ t('businessintroduction.vision.desc') }}
|
||||
</div>
|
||||
<div class="text-[#8B59F7] text-[22px] mt-[64px] text-animate">
|
||||
{{ t('businessintroduction.vision.community.title') }}
|
||||
</div>
|
||||
<div class="text-[#455363] max-w-[748px] text-[16px] mt-[30px] text-animate">
|
||||
{{ t('businessintroduction.vision.community.desc') }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="pl-[493px] pr-[490px]">
|
||||
<img class="w-[930px] h-[379px] mt-[30px] relative z-24" src="@/assets/image/qq.png" alt="cl" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="content4 relative bg-[#fff] pb-[146px] overflow-hidden float-up">
|
||||
<n-divider class="divider1" vertical />
|
||||
<div class="divider2" style=""></div>
|
||||
<div class="divider3" style=""></div>
|
||||
<div class="divider4" style=""></div>
|
||||
<n-divider class="divider5" vertical />
|
||||
<img src="@/assets/image/dq.png" alt="cl" />
|
||||
<div class="absolute top-[86px] pl-[505px] pr-[490px] flex z-4 flex-col">
|
||||
<div class="text-[#FFFFFF] text-[22px] text-animate">
|
||||
{{ t('businessintroduction.cooperation.title') }}
|
||||
</div>
|
||||
<div class="text-[#FFFFFF] text-[22px] mt-[100px] text-animate">
|
||||
{{ t('businessintroduction.cooperation.timeline.year2025.title') }}
|
||||
</div>
|
||||
<div class="text-[#D1D1D1] text-[14px] mt-[10px] max-w-[397px] text-animate">
|
||||
{{ t('businessintroduction.cooperation.timeline.year2025.desc') }}
|
||||
</div>
|
||||
<div class="text-[#FFFFFF] text-[22px] mt-[30px] text-animate">
|
||||
{{ t('businessintroduction.cooperation.timeline.year2026.title') }}
|
||||
</div>
|
||||
<div class="text-[#D1D1D1] text-[14px] mt-[10px] max-w-[397px] text-animate">
|
||||
{{ t('businessintroduction.cooperation.timeline.year2026.desc') }}
|
||||
</div>
|
||||
<div class="text-[#FFFFFF] text-[22px] mt-[30px] text-animate">
|
||||
{{ t('businessintroduction.cooperation.timeline.year2027.title') }}
|
||||
</div>
|
||||
<div class="text-[#D1D1D1] text-[14px] mt-[10px] max-w-[397px] text-animate">
|
||||
{{ t('businessintroduction.cooperation.timeline.year2027.desc') }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex pl-[505px] pr-[490px] flex z-4">
|
||||
<div class="mr-[60px]">
|
||||
<div class="text-[#8B59F7] text-[22px] text-animate">
|
||||
{{ t('businessintroduction.incubation.title') }}
|
||||
</div>
|
||||
<div class="text-[#8B59F7] text-[22px] text-animate">
|
||||
{{ t('businessintroduction.incubation.subtitle') }}
|
||||
</div>
|
||||
<div class="text-[#455363] text-[16px] max-w-[402px] mt-[50px] text-animate">
|
||||
{{ t('businessintroduction.incubation.desc') }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="max-w-[202px]">
|
||||
<img class="w-[58px] h-[50px]" src="@/assets/image/gpz.png" alt="cl" />
|
||||
<div class="text-[#10253E] text-[18px] mt-[20px] font-bold relative">
|
||||
<n-divider class="absolute left-[-23px] top-[6px]" style="
|
||||
background-color: #8b59f7;
|
||||
" vertical />{{ t('businessintroduction.incubation.features.fans.title') }}
|
||||
</div>
|
||||
<div class="text-[#455363] text-[16px] mt-[15px] text-animate">
|
||||
{{ t('businessintroduction.incubation.features.fans.desc') }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="max-w-[202px] ml-[30px]">
|
||||
<img class="w-[58px] h-[50px]" src="@/assets/image/sm.png" alt="cl" />
|
||||
<div class="text-[#10253E] text-[18px] mt-[20px] font-bold relative">
|
||||
<n-divider class="absolute left-[-23px] top-[6px]" style="
|
||||
background-color: #8b59f7;
|
||||
" vertical />{{ t('businessintroduction.incubation.features.kol.title') }}
|
||||
</div>
|
||||
<div class="text-[#455363] text-[16px] mt-[15px] text-animate">
|
||||
{{ t('businessintroduction.incubation.features.kol.desc') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="content5 relative bg-[#F8F9FF] overflow-hidden float-up">
|
||||
<n-divider class="divider1" vertical />
|
||||
<div class="divider2" style=""></div>
|
||||
<div class="divider3" style=""></div>
|
||||
<div class="divider4" style=""></div>
|
||||
<n-divider class="divider5" vertical />
|
||||
<div class="mt-[93px] pb-[103px] carousel-container pl-[505px] pr-[490px]">
|
||||
<div class="text-[#8B59F7] text-[22px] text-animate">
|
||||
{{ t('businessintroduction.exposure.title') }}
|
||||
</div>
|
||||
|
||||
<div class="text-[#455363] max-w-[748px] text-[16px] mt-[30px] text-animate">
|
||||
{{ t('businessintroduction.exposure.desc') }}
|
||||
</div>
|
||||
|
||||
<div class="flex">
|
||||
<div class="carousel-item cursor-pointer">
|
||||
<img class="carousel-image" src="@/assets/image/fp1.png" />
|
||||
<div class="carousel-content">
|
||||
<div class="carousel-title">
|
||||
<div>{{ t('businessintroduction.exposure.timeline.year2025.title') }}</div>
|
||||
</div>
|
||||
<div class="carousel-subtitle">
|
||||
<div>{{ t('businessintroduction.exposure.timeline.year2025.desc') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item cursor-pointer">
|
||||
<img class="carousel-image" src="@/assets/image/fp2.png" />
|
||||
<div class="carousel-content">
|
||||
<div class="carousel-title">
|
||||
<div>{{ t('businessintroduction.exposure.timeline.year2026.title') }}</div>
|
||||
</div>
|
||||
<div class="carousel-subtitle">
|
||||
<div>{{ t('businessintroduction.exposure.timeline.year2026.desc') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item cursor-pointer">
|
||||
<img class="carousel-image" src="@/assets/image/fp3.png" />
|
||||
<div class="carousel-content">
|
||||
<div class="carousel-title">
|
||||
<div>{{ t('businessintroduction.exposure.timeline.year2027.title') }}</div>
|
||||
</div>
|
||||
<div class="carousel-subtitle">
|
||||
<div>{{ t('businessintroduction.exposure.timeline.year2027.desc') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>
|
||||
<div class="footer-content">
|
||||
<img class="copyright" src="@/assets/image/cp.png" alt="logo" />
|
||||
</div>
|
||||
</footer>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
.header {
|
||||
width: 100%;
|
||||
height: 55px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
position: fixed;
|
||||
z-index: 10;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 0 10rem;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.logo {
|
||||
img {
|
||||
width: 108px;
|
||||
height: 33px;
|
||||
}
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
gap: 32px;
|
||||
margin-right: 32px;
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
font-size: 16px;
|
||||
color: #000000;
|
||||
cursor: pointer;
|
||||
transition: color 0.3s ease;
|
||||
padding: 4px 8px;
|
||||
|
||||
&.active {
|
||||
color: #8b59fa;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #8b59fa;
|
||||
}
|
||||
}
|
||||
|
||||
.head {
|
||||
width: 100%;
|
||||
background-color: #f8f9ff;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
image-rendering: -webkit-optimize-contrast;
|
||||
image-rendering: crisp-edges;
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
transform: translateZ(0);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
}
|
||||
|
||||
.divider1 {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
left: 482px;
|
||||
width: 1px;
|
||||
height: 100vw;
|
||||
background-color: rgba(230, 234, 238, 0.5) !important;
|
||||
}
|
||||
|
||||
.divider2 {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
left: 720px;
|
||||
width: 1px;
|
||||
height: 100vw;
|
||||
background-image: linear-gradient(to bottom,
|
||||
rgba(230, 234, 238, 0.5),
|
||||
transparent 50%);
|
||||
background-size: 1px 12px; // 第一个值是宽度，第二个值是虚线的总长度（实线+空白）
|
||||
background-repeat: repeat-y;
|
||||
}
|
||||
|
||||
.divider3 {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
left: 952px;
|
||||
width: 1px;
|
||||
height: 100vw;
|
||||
background-image: linear-gradient(to bottom,
|
||||
rgba(230, 234, 238, 0.5),
|
||||
transparent 50%);
|
||||
background-size: 1px 12px; // 第一个值是宽度，第二个值是虚线的总长度（实线+空白）
|
||||
background-repeat: repeat-y;
|
||||
}
|
||||
|
||||
.divider4 {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
left: 1182px;
|
||||
width: 1px;
|
||||
height: 100vw;
|
||||
background-image: linear-gradient(to bottom,
|
||||
rgba(230, 234, 238, 0.5),
|
||||
transparent 50%);
|
||||
background-size: 1px 15px; // 第一个值是宽度，第二个值是虚线的总长度（实线+空白）
|
||||
background-repeat: repeat-y;
|
||||
}
|
||||
|
||||
.divider5 {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
left: 1406px;
|
||||
width: 1px;
|
||||
height: 100vw;
|
||||
background-color: rgba(230, 234, 238, 0.5) !important;
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
height: 90px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.copyright {
|
||||
width: 232px;
|
||||
height: 22pxpx;
|
||||
}
|
||||
}
|
||||
|
||||
.carousel-container {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.arrow-btn {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.carousel-track {
|
||||
display: flex;
|
||||
transition: transform 0.5s ease-in-out;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.carousel-item {
|
||||
width: 287px;
|
||||
background-color: #fff;
|
||||
margin-right: 18px;
|
||||
flex: 0 0 auto;
|
||||
display: block;
|
||||
padding: 8px 8px 18px 8px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 3px 14px 1px rgba(0, 0, 0, 0.16);
|
||||
will-change: transform, opacity; // 优化动画性能
|
||||
}
|
||||
|
||||
.carousel-image {
|
||||
width: 428px;
|
||||
height: 259px;
|
||||
border-radius: 6px;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.carousel-content {
|
||||
padding: 0 ;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.carousel-title {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
line-height: 1.5;
|
||||
max-height: calc(1.5em * 5);
|
||||
}
|
||||
|
||||
.carousel-subtitle {
|
||||
color: #455363;
|
||||
margin-top: 5px;
|
||||
font-size: 16px;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 5;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
line-height: 1.5;
|
||||
|
||||
}
|
||||
|
||||
// 添加一个通用的溢出控制类
|
||||
.overflow-hidden {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// 为所有可能需要动画的容器添加溢出隐藏
|
||||
[ref*="moveRef"] {
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,9 +1,787 @@
|
||||
<script setup>
|
||||
import { useAuth } from "@/store/auth/index.js";
|
||||
const { clickSendCode, telNum, code, showTextCode, clickLogin } = useAuth();
|
||||
</script>
|
||||
<template>
|
||||
<div class="box-border relative w-screen min-h-screen" style=""></div>
|
||||
</template>
|
||||
import {
|
||||
onUnmounted,
|
||||
ref,
|
||||
watch,
|
||||
reactive,
|
||||
onMounted
|
||||
} from "vue";
|
||||
import gsap from "gsap";
|
||||
import ScrollTrigger from "gsap/ScrollTrigger";
|
||||
import { useHome } from "@/store/home/index.js";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useTransitionComposable } from "@/composables/transition-composable";
|
||||
import { useRouter } from "vue-router";
|
||||
import { NDivider } from "naive-ui";
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
// 注册 ScrollTrigger 插件
|
||||
gsap.registerPlugin(ScrollTrigger);
|
||||
const { currentTab } = useHome();
|
||||
const router = useRouter();
|
||||
const { transitionState } = useTransitionComposable();
|
||||
const main = ref();
|
||||
let ctx;
|
||||
const { t } = useI18n();
|
||||
const handleTabClick = (tab) => {
|
||||
currentTab.value = tab;
|
||||
router.push("/" + tab);
|
||||
};
|
||||
watch(
|
||||
[() => transitionState.transitionComplete, main],
|
||||
(newValue) => {
|
||||
if (newValue && main.value) {
|
||||
ctx = gsap.context((self) => {
|
||||
// Text animations from left
|
||||
gsap.utils.toArray(".text-animate").forEach((text) => {
|
||||
gsap.from(text, {
|
||||
x: -100,
|
||||
opacity: 0,
|
||||
duration: 1,
|
||||
scrollTrigger: {
|
||||
trigger: text,
|
||||
start: "top 80%",
|
||||
end: "top 50%",
|
||||
toggleActions: "play none none reverse",
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
// Image animations from right
|
||||
gsap.utils.toArray(".image-animate").forEach((image) => {
|
||||
gsap.from(image, {
|
||||
x: 100,
|
||||
opacity: 0,
|
||||
duration: 1,
|
||||
scrollTrigger: {
|
||||
trigger: image,
|
||||
start: "top 80%",
|
||||
end: "top 50%",
|
||||
toggleActions: "play none none reverse",
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
// 轮播卡片上升动画
|
||||
gsap.from(".carousel-item", {
|
||||
y: 100,
|
||||
opacity: 0,
|
||||
duration: 1.5,
|
||||
stagger: 0.4,
|
||||
scrollTrigger: {
|
||||
trigger: ".carousel-container",
|
||||
start: "top 70%",
|
||||
end: "top 30%",
|
||||
scrub: 2,
|
||||
toggleActions: "restart pause reverse pause",
|
||||
},
|
||||
});
|
||||
}, main.value);
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
}
|
||||
);
|
||||
// 向前滑动
|
||||
const handlePrev = () => {
|
||||
if (!carouselTrack.value) return;
|
||||
|
||||
carouselTrack.value.style.transition = "transform 0.5s ease-in-out";
|
||||
currentIndex.value--;
|
||||
|
||||
if (currentIndex.value < 0) {
|
||||
currentIndex.value = state.marqueeArr.length - 1;
|
||||
}
|
||||
};
|
||||
|
||||
// 向后滑动
|
||||
const handleNext = () => {
|
||||
if (!carouselTrack.value) return;
|
||||
|
||||
carouselTrack.value.style.transition = "transform 0.5s ease-in-out";
|
||||
currentIndex.value++;
|
||||
|
||||
if (currentIndex.value >= state.marqueeArr.length) {
|
||||
currentIndex.value = 0;
|
||||
}
|
||||
};
|
||||
|
||||
// 添加滑动相关的状态
|
||||
const isDragging = ref(false);
|
||||
const startX = ref(0);
|
||||
const scrollLeft = ref(0);
|
||||
|
||||
// 处理鼠标/触摸按下事件
|
||||
const handleDragStart = (e) => {
|
||||
isDragging.value = true;
|
||||
startX.value = e.type === "mousedown" ? e.pageX : e.touches[0].pageX;
|
||||
scrollLeft.value = getSlideOffset();
|
||||
|
||||
// 禁用过渡效果，实现平滑拖动
|
||||
if (carouselTrack.value) {
|
||||
carouselTrack.value.style.transition = "none";
|
||||
}
|
||||
};
|
||||
|
||||
// 处理鼠标/触摸移动事件
|
||||
const handleDragMove = (e) => {
|
||||
if (!isDragging.value) return;
|
||||
e.preventDefault();
|
||||
|
||||
const x = e.type === "mousemove" ? e.pageX : e.touches[0].pageX;
|
||||
const walk = startX.value - x;
|
||||
|
||||
if (carouselTrack.value) {
|
||||
carouselTrack.value.style.transform = `translateX(-${
|
||||
scrollLeft.value + walk
|
||||
}px)`;
|
||||
}
|
||||
};
|
||||
|
||||
// 处理鼠标/触摸释放事件
|
||||
const handleDragEnd = (e) => {
|
||||
if (!isDragging.value) return;
|
||||
isDragging.value = false;
|
||||
|
||||
if (carouselTrack.value) {
|
||||
// 恢复过渡效果
|
||||
carouselTrack.value.style.transition = "transform 0.5s ease-in-out";
|
||||
|
||||
const x = e.type === "mouseup" ? e.pageX : e.changedTouches[0].pageX;
|
||||
const walk = startX.value - x;
|
||||
|
||||
// 获取单个项目的宽度
|
||||
const firstItem = carouselTrack.value.querySelector(".carousel-item");
|
||||
if (!firstItem) return;
|
||||
|
||||
const itemWidth = firstItem.offsetWidth;
|
||||
const itemMargin = parseInt(window.getComputedStyle(firstItem).marginRight);
|
||||
const totalWidth = itemWidth + itemMargin;
|
||||
|
||||
// 根据滑动距离决定是否切换到下一个/上一个
|
||||
if (Math.abs(walk) > totalWidth / 3) {
|
||||
if (walk > 0) {
|
||||
handleNext();
|
||||
} else {
|
||||
handlePrev();
|
||||
}
|
||||
} else {
|
||||
// 如果滑动距离不够，回到当前位置
|
||||
carouselTrack.value.style.transform = `translateX(-${getSlideOffset()}px)`;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 导入图片
|
||||
import carouselShow1 from "@/assets/image/companyprofil/768/carouselShow-1.png";
|
||||
import carouselShow2 from "@/assets/image/companyprofil/768/carouselShow-2.png";
|
||||
import carouselShow3 from "@/assets/image/companyprofil/768/carouselShow-3.png";
|
||||
import carouselShow4 from "@/assets/image/companyprofil/768/carouselShow-4.png";
|
||||
import carouselShow5 from "@/assets/image/companyprofil/768/carouselShow-5.png";
|
||||
|
||||
const state = reactive({
|
||||
marqueeArr: [
|
||||
{
|
||||
title: t("companyprofil.news.carousel.item1.title"),
|
||||
subTitle: t("companyprofil.news.carousel.item1.desc"),
|
||||
imgUrl: carouselShow1,
|
||||
},
|
||||
{
|
||||
title: t("companyprofil.news.carousel.item2.title"),
|
||||
subTitle: t("companyprofil.news.carousel.item2.desc"),
|
||||
imgUrl: carouselShow2,
|
||||
},
|
||||
{
|
||||
title: t("companyprofil.news.carousel.item3.title"),
|
||||
subTitle: t("companyprofil.news.carousel.item3.desc"),
|
||||
imgUrl: carouselShow3,
|
||||
},
|
||||
{
|
||||
title: t("companyprofil.news.carousel.item4.title"),
|
||||
subTitle: t("companyprofil.news.carousel.item4.desc"),
|
||||
imgUrl: carouselShow4,
|
||||
},
|
||||
{
|
||||
title: t("companyprofil.news.carousel.item5.title"),
|
||||
subTitle: t("companyprofil.news.carousel.item5.desc"),
|
||||
imgUrl: carouselShow5,
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
const carouselTrack = ref(null);
|
||||
const currentIndex = ref(0);
|
||||
|
||||
const getVisibleItems = () => {
|
||||
return state.marqueeArr;
|
||||
};
|
||||
|
||||
// 计算实际滑动距离
|
||||
const getSlideOffset = () => {
|
||||
if (!carouselTrack.value) return 0;
|
||||
|
||||
const firstItem = carouselTrack.value.querySelector(".carousel-item");
|
||||
if (!firstItem) return 0;
|
||||
|
||||
const itemWidth = firstItem.offsetWidth;
|
||||
const itemMargin = parseInt(window.getComputedStyle(firstItem).marginRight);
|
||||
const totalWidth = itemWidth + itemMargin;
|
||||
|
||||
return currentIndex.value * totalWidth;
|
||||
};
|
||||
|
||||
// 定义 resize 处理函数
|
||||
const handleResize = () => {
|
||||
if (carouselTrack.value) {
|
||||
carouselTrack.value.style.transform = `translateX(-${getSlideOffset()}px)`;
|
||||
}
|
||||
};
|
||||
const handleCarouselClick = (item, event) => {
|
||||
// 检查事件类型是否为点击
|
||||
if (event.type === "click") {
|
||||
event.stopPropagation(); // 阻止事件传播
|
||||
event.preventDefault(); // 阻止默认行为
|
||||
console.log(item);
|
||||
router.push({
|
||||
path: "/companyprofildetail",
|
||||
query: {
|
||||
title: item.title,
|
||||
},
|
||||
});
|
||||
}
|
||||
};
|
||||
onMounted(() => {
|
||||
window.scrollTo(0, 0);
|
||||
});
|
||||
onUnmounted(() => {
|
||||
ctx?.revert(); // <- Easy Cleanup!
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header className="header">
|
||||
<div class="logo">
|
||||
<img src="@/assets/image/logo.png" alt="logo" />
|
||||
</div>
|
||||
<div class="tabs">
|
||||
<div
|
||||
class="tab-item"
|
||||
:class="{
|
||||
active: currentTab === 'home',
|
||||
}"
|
||||
@click="handleTabClick('home')"
|
||||
>
|
||||
{{ t("home.nav.home") }}
|
||||
</div>
|
||||
<div
|
||||
class="tab-item"
|
||||
:class="{
|
||||
active: currentTab === 'companyprofil',
|
||||
}"
|
||||
@click="handleTabClick('companyprofil')"
|
||||
>
|
||||
{{ t("home.nav.company") }}
|
||||
</div>
|
||||
<div class="tab-item" :class="{
|
||||
active:
|
||||
currentTab === 'businessintroduction',
|
||||
}" @click="
|
||||
handleTabClick('businessintroduction')
|
||||
">
|
||||
{{ t("home.nav.businessintroduction") }}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main ref="main" class="height-full">
|
||||
<div class="head relative">
|
||||
<img src="@/assets/image/gk.png" alt="head" />
|
||||
|
||||
<div
|
||||
class="absolute top-240px left-510px text-[#10253E] text-[54px] font-bold text-animate"
|
||||
>
|
||||
{{ t("companyprofil.slogan.title1") }}
|
||||
</div>
|
||||
<div
|
||||
class="absolute top-320px left-510px text-[#10253E] text-[54px] font-bold text-animate"
|
||||
>
|
||||
{{ t("companyprofil.slogan.title2") }}
|
||||
</div>
|
||||
<div
|
||||
class="absolute top-420px left-510px text-[#8B59F7] text-[20px] w-[535px] text-animate"
|
||||
>
|
||||
{{ t("companyprofil.slogan.desc") }}
|
||||
</div>
|
||||
</div>
|
||||
<n-divider class="divider1" vertical />
|
||||
<div class="divider2" style=""></div>
|
||||
<div class="divider3" style=""></div>
|
||||
<div class="divider4" style=""></div>
|
||||
<n-divider class="divider5" vertical />
|
||||
<div class="bg-[#F8F9FF]">
|
||||
<div
|
||||
class="content1 relative flex items-center justify-center z-3 pb-[100px] flex-col"
|
||||
>
|
||||
<div
|
||||
class="text-[#8B59F7] text-[16px] absolute top-[-30px] left-[505px] text-animate"
|
||||
>
|
||||
{{ t("companyprofil.intro.label") }}
|
||||
</div>
|
||||
<div class="pl-[505px] pr-[480px] flex">
|
||||
<div class="w-[411px] mr-[38px] text-animate">
|
||||
<div class="text-[#10253E] text-[40px]">
|
||||
{{ t("companyprofil.intro.title1") }}
|
||||
</div>
|
||||
<div class="text-[#10253E] text-[40px]">
|
||||
{{ t("companyprofil.intro.title2") }}
|
||||
</div>
|
||||
<div class="text-[#455363] text-[16px] mt-[56px]">
|
||||
{{ t("companyprofil.intro.desc") }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-[#10253E] text-[20px] image-animate">
|
||||
<img
|
||||
class="w-[465px] h-[415px]"
|
||||
src="@/assets/image/ship.png"
|
||||
alt="company"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="content2 relative flex items-center justify-center pt-[168px] bg-[#fff]"
|
||||
>
|
||||
<div
|
||||
class="text-[#8B59F7] text-[16px] absolute top-[129px] left-[505px] text-animate"
|
||||
>
|
||||
{{ t("companyprofil.team.label") }}
|
||||
</div>
|
||||
<div class="pl-[505px] pr-[490px] flex z-3">
|
||||
<div class="w-[412px] mr-[40px] text-animate">
|
||||
<div class="text-[#10253E] text-[40px]">
|
||||
{{ t("companyprofil.team.title1") }}
|
||||
</div>
|
||||
<div class="text-[#10253E] text-[40px]">
|
||||
{{ t("companyprofil.team.title2") }}
|
||||
</div>
|
||||
<div class="mt-[93px]">
|
||||
<img
|
||||
class="w-[58px] h-[58px]"
|
||||
src="@/assets/image/cl.png"
|
||||
alt="cl"
|
||||
/>
|
||||
<div
|
||||
class="text-[#10253E] text-[18px] mt-[20px] font-bold relative"
|
||||
>
|
||||
<n-divider
|
||||
class="absolute left-[-23px] top-[6px]"
|
||||
style="background-color: #8b59f7"
|
||||
vertical
|
||||
/>{{ t("companyprofil.team.features.global.title") }}
|
||||
</div>
|
||||
<div class="text-[#455363] text-[16px]">
|
||||
{{ t("companyprofil.team.features.global.desc") }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-[68px]">
|
||||
<img
|
||||
class="w-[58px] h-[50px]"
|
||||
src="@/assets/image/heart.png"
|
||||
alt="cl"
|
||||
/>
|
||||
<div
|
||||
class="text-[#10253E] text-[18px] mt-[20px] font-bold relative"
|
||||
>
|
||||
<n-divider
|
||||
class="absolute left-[-23px] top-[6px]"
|
||||
style="background-color: #8b59f7"
|
||||
vertical
|
||||
/>{{ t("companyprofil.team.features.fans.title") }}
|
||||
</div>
|
||||
<div class="text-[#455363] text-[16px]">
|
||||
{{ t("companyprofil.team.features.fans.desc") }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-[65px]">
|
||||
<img
|
||||
class="w-[54px] h-[52px]"
|
||||
src="@/assets/image/3p.png"
|
||||
alt="cl"
|
||||
/>
|
||||
<div
|
||||
class="text-[#10253E] text-[18px] mt-[20px] font-bold relative"
|
||||
>
|
||||
<n-divider
|
||||
class="absolute left-[-23px] top-[6px]"
|
||||
style="background-color: #8b59f7"
|
||||
vertical
|
||||
/>{{ t("companyprofil.team.features.talent.title") }}
|
||||
</div>
|
||||
<div class="text-[#455363] text-[16px]">
|
||||
{{ t("companyprofil.team.features.talent.desc") }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-[#455363] text-[16px] flex-1 image-animate">
|
||||
<div>
|
||||
{{ t("companyprofil.team.desc") }}
|
||||
</div>
|
||||
<img
|
||||
class="w-[465px] h-[625px] mt-[80px]"
|
||||
src="@/assets/image/randg.png"
|
||||
alt="cl"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="content3 relative bg-[#fff] pt-[185px] pb-[158px] overflow-hidden"
|
||||
>
|
||||
<n-divider class="divider1" vertical />
|
||||
<div class="divider2" style=""></div>
|
||||
<div class="divider3" style=""></div>
|
||||
<div class="divider4" style=""></div>
|
||||
<n-divider class="divider5" vertical />
|
||||
<img
|
||||
class="absolute top-[95px] z-3 w-[800px] h-[163px] right-[0px] image-animate"
|
||||
src="@/assets/image/xlv.png"
|
||||
alt="cl"
|
||||
/>
|
||||
<img class="absolute" src="@/assets/image/xbg.png" alt="cl" />
|
||||
<div
|
||||
class="relative pl-[505px] pr-[490px] flex z-3 mt-[300px] z-4 flex-col text-animate"
|
||||
>
|
||||
<div class="text-[#8B59F7] text-[16px]">
|
||||
{{ t("companyprofil.achievement.label") }}
|
||||
</div>
|
||||
<div class="text-[#10253E] text-[40px]">
|
||||
{{ t("companyprofil.achievement.title") }}
|
||||
</div>
|
||||
<div class="text-[#455363] w-[748px] text-[16px] mt-[30px]">
|
||||
{{ t("companyprofil.achievement.desc") }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative pl-[505px] pr-[490px] flex z-4 mt-[100px]">
|
||||
<div
|
||||
class="w-[419px] mr-[30px] flex flex-col justify-center text-animate"
|
||||
>
|
||||
<div class="text-[#10253E] text-[22px]">
|
||||
{{ t("companyprofil.achievement.certification.title1") }}
|
||||
</div>
|
||||
<div class="text-[#10253E] text-[22px]">
|
||||
{{ t("companyprofil.achievement.certification.title2") }}
|
||||
</div>
|
||||
<div class="text-[#455363] text-[16px] mt-[30px]">
|
||||
{{ t("companyprofil.achievement.certification.desc") }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex image-animate">
|
||||
<img
|
||||
class="w-[465px] h-[493px]"
|
||||
src="@/assets/image/btable.png"
|
||||
alt="cl"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative pl-[505px] pr-[490px] flex z-4 mt-[85px]">
|
||||
<div
|
||||
class="w-[419px] mr-[30px] flex flex-col justify-center text-animate"
|
||||
>
|
||||
<div class="text-[#10253E] text-[22px]">
|
||||
{{ t("companyprofil.achievement.platform.title1") }}
|
||||
</div>
|
||||
<div class="text-[#10253E] text-[22px]">
|
||||
{{ t("companyprofil.achievement.platform.title2") }}
|
||||
</div>
|
||||
<div class="text-[#455363] text-[16px] mt-[30px]">
|
||||
{{ t("companyprofil.achievement.platform.desc") }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex image-animate">
|
||||
<img
|
||||
class="w-[465px] h-[369px]"
|
||||
src="@/assets/image/huang.png"
|
||||
alt="cl"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content4 relative bg-[#fff] overflow-hidden">
|
||||
<n-divider class="divider1" vertical />
|
||||
<div class="divider2" style=""></div>
|
||||
<div class="divider3" style=""></div>
|
||||
<div class="divider4" style=""></div>
|
||||
<n-divider class="divider5" vertical />
|
||||
<div
|
||||
class="relative pl-[505px] pr-[490px] flex z-3 mt-[130px] z-4 flex-col text-animate"
|
||||
>
|
||||
<div class="text-[#8B59F7] text-[16px]">
|
||||
{{ t("companyprofil.news.label") }}
|
||||
</div>
|
||||
<div class="text-[#10253E] text-[40px]">
|
||||
{{ t("companyprofil.news.title") }}
|
||||
</div>
|
||||
<div class="text-[#455363] w-[748px] text-[16px] mt-[30px]">
|
||||
{{ t("companyprofil.news.desc") }}
|
||||
</div>
|
||||
<div class="w-full mt-[56px] flex flex-wrap justify-end">
|
||||
<div class="flex flex-wrap mr-[20px]">
|
||||
<div class="arrow-btn" @click="handlePrev">
|
||||
<img
|
||||
class="w-[38px] h-[38px]"
|
||||
src="@/assets/image/companyprofil/768/icon-left.png"
|
||||
/>
|
||||
</div>
|
||||
<div class="arrow-btn ml-[25px]" @click="handleNext">
|
||||
<img
|
||||
class="w-[38px] h-[38px]"
|
||||
src="@/assets/image/companyprofil/768/icon-right.png"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pt-[73px] pb-[103px] carousel-container px-[495px] z-14">
|
||||
<div
|
||||
ref="carouselTrack"
|
||||
class="carousel-track"
|
||||
:style="{
|
||||
transform: `translateX(-${getSlideOffset()}px)`,
|
||||
}"
|
||||
@mousedown="handleDragStart"
|
||||
@mousemove="handleDragMove"
|
||||
@mouseup="handleDragEnd"
|
||||
@mouseleave="handleDragEnd"
|
||||
@touchstart="handleDragStart"
|
||||
@touchmove="handleDragMove"
|
||||
@touchend="handleDragEnd"
|
||||
>
|
||||
<div
|
||||
v-for="(item, idx) in getVisibleItems()"
|
||||
:key="idx"
|
||||
class="carousel-item cursor-pointer"
|
||||
@click="handleCarouselClick(item, $event)"
|
||||
>
|
||||
<img class="carousel-image" :src="item.imgUrl" />
|
||||
<div class="carousel-content">
|
||||
<div class="carousel-title">
|
||||
<div>{{ item.title }}</div>
|
||||
</div>
|
||||
<div class="carousel-subtitle">
|
||||
<div>{{ item.subTitle }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>
|
||||
<div class="footer-content">
|
||||
<img class="copyright" src="@/assets/image/cp.png" alt="logo" />
|
||||
</div>
|
||||
</footer>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
.header {
|
||||
width: 100%;
|
||||
height: 55px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
position: fixed;
|
||||
z-index: 10;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 0 10rem;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.logo {
|
||||
img {
|
||||
width: 108px;
|
||||
height: 33px;
|
||||
}
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
gap: 32px;
|
||||
margin-right: 32px;
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
font-size: 16px;
|
||||
color: #000000;
|
||||
cursor: pointer;
|
||||
transition: color 0.3s ease;
|
||||
padding: 4px 8px;
|
||||
|
||||
&.active {
|
||||
color: #8b59fa;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #8b59fa;
|
||||
}
|
||||
}
|
||||
|
||||
.head {
|
||||
width: 100%;
|
||||
background-color: #f8f9ff;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
image-rendering: -webkit-optimize-contrast;
|
||||
image-rendering: crisp-edges;
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
transform: translateZ(0);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
}
|
||||
|
||||
.divider1 {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
left: 482px;
|
||||
width: 1px;
|
||||
height: 100vw;
|
||||
}
|
||||
|
||||
.divider2 {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
left: 720px;
|
||||
width: 1px;
|
||||
height: 100vw;
|
||||
background-image: linear-gradient(to bottom, #e6eaee 50%, transparent 50%);
|
||||
background-size: 1px 12px; // 第一个值是宽度，第二个值是虚线的总长度（实线+空白）
|
||||
background-repeat: repeat-y;
|
||||
}
|
||||
|
||||
.divider3 {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
left: 952px;
|
||||
width: 1px;
|
||||
height: 100vw;
|
||||
background-image: linear-gradient(to bottom, #e6eaee 50%, transparent 50%);
|
||||
background-size: 1px 12px; // 第一个值是宽度，第二个值是虚线的总长度（实线+空白）
|
||||
background-repeat: repeat-y;
|
||||
}
|
||||
|
||||
.divider4 {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
left: 1182px;
|
||||
width: 1px;
|
||||
height: 100vw;
|
||||
background-image: linear-gradient(to bottom, #e6eaee 50%, transparent 50%);
|
||||
background-size: 1px 15px; // 第一个值是宽度，第二个值是虚线的总长度（实线+空白）
|
||||
background-repeat: repeat-y;
|
||||
}
|
||||
|
||||
.divider5 {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
left: 1406px;
|
||||
width: 1px;
|
||||
height: 100vw;
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
height: 90px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.copyright {
|
||||
width: 232px;
|
||||
height: 22pxpx;
|
||||
}
|
||||
}
|
||||
|
||||
.carousel-container {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.arrow-btn {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.carousel-track {
|
||||
display: flex;
|
||||
transition: transform 0.5s ease-in-out;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.carousel-item {
|
||||
width: 445px;
|
||||
height: 444px;
|
||||
background-color: #fff;
|
||||
margin-right: 28px;
|
||||
flex: 0 0 auto;
|
||||
display: block;
|
||||
padding: 8px 8px 18px 8px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 3px 14px 1px rgba(0, 0, 0, 0.16);
|
||||
will-change: transform, opacity; // 优化动画性能
|
||||
}
|
||||
|
||||
.carousel-image {
|
||||
width: 428px;
|
||||
height: 259px;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.carousel-content {
|
||||
padding: 0 23px 0 23px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.carousel-title {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
line-height: 1.5;
|
||||
max-height: calc(1.5em * 5);
|
||||
}
|
||||
|
||||
.carousel-subtitle {
|
||||
color: #455363;
|
||||
margin-top: 5px;
|
||||
font-size: 16px;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 5;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
line-height: 1.5;
|
||||
max-height: calc(1.5em * 5);
|
||||
}
|
||||
|
||||
// 添加一个通用的溢出控制类
|
||||
.overflow-hidden {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// 为所有可能需要动画的容器添加溢出隐藏
|
||||
[ref*="moveRef"] {
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,9 +1,421 @@
|
||||
<script setup>
|
||||
import { useAuth } from "@/store/auth/index.js";
|
||||
const { clickSendCode, telNum, code, showTextCode, clickLogin } = useAuth();
|
||||
</script>
|
||||
<template>
|
||||
<div class="box-border relative w-screen min-h-screen" style=""></div>
|
||||
<div class="page-container">
|
||||
<n-divider class="divider1" vertical />
|
||||
<div class="divider2" style=""></div>
|
||||
<div class="divider3" style=""></div>
|
||||
<div class="divider4" style=""></div>
|
||||
<n-divider class="divider5" vertical />
|
||||
<header className="header">
|
||||
<div class="logo">
|
||||
<img src="@/assets/image/logo.png" alt="logo" />
|
||||
</div>
|
||||
<div class="tabs">
|
||||
<div class="tab-item" :class="{
|
||||
active: currentTab === 'home',
|
||||
}" @click="handleTabClick('home')">
|
||||
{{ t("home.nav.home") }}
|
||||
</div>
|
||||
<div class="tab-item" :class="{
|
||||
active:
|
||||
currentTab ===
|
||||
'companyprofil',
|
||||
}" @click="
|
||||
handleTabClick(
|
||||
'companyprofil'
|
||||
)
|
||||
">
|
||||
{{ t("home.nav.company") }}
|
||||
</div>
|
||||
<div class="tab-item" :class="{
|
||||
active:
|
||||
currentTab === 'businessintroduction',
|
||||
}" @click="
|
||||
handleTabClick('businessintroduction')
|
||||
">
|
||||
{{ t("home.nav.businessintroduction") }}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main class="px-[490px] ">
|
||||
<section
|
||||
className="section-first "
|
||||
v-if="state.pageTitle === t('companyprofildetail.article1.title')"
|
||||
style="background: #fff"
|
||||
>
|
||||
|
||||
<div class="flex flex-wrap justify-center relative z-10 relative z-10">
|
||||
<div
|
||||
class="w-full title mt-[158px] text-center"
|
||||
>
|
||||
{{ t('companyprofildetail.article1.title') }}
|
||||
</div>
|
||||
<div
|
||||
class="w-full text-center mt-[9px] text-[#455363] text-[16px]"
|
||||
>
|
||||
{{ t('companyprofildetail.article1.date') }}
|
||||
</div>
|
||||
<div class="mt-[63px] ">
|
||||
<img
|
||||
class="w-[930px] h-[574px]"
|
||||
src="@/assets/image/companyprofil/768/carouselShow-1.png"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="w-full px-[20px] text-[#455363] text-[16px] div-indent mt-[47px] mb-[275px]"
|
||||
>
|
||||
<div v-if="state.pageTitle === t('companyprofildetail.article1.title')">
|
||||
<p>{{ t('companyprofildetail.article1.content[0]') }}</p>
|
||||
<p>{{ t('companyprofildetail.article1.content[1]') }}</p>
|
||||
<p>{{ t('companyprofildetail.article1.content[2]') }}</p>
|
||||
<p>{{ t('companyprofildetail.article1.content[3]') }}</p>
|
||||
<p>{{ t('companyprofildetail.article1.content[4]') }}</p>
|
||||
<p>{{ t('companyprofildetail.article1.content[5]') }}</p>
|
||||
<p>{{ t('companyprofildetail.article1.content[6]') }}</p>
|
||||
<p>{{ t('companyprofildetail.article1.content[7]') }}</p>
|
||||
<p>{{ t('companyprofildetail.article1.content[8]') }}</p>
|
||||
<p>{{ t('companyprofildetail.article1.content[9]') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section
|
||||
className="section-sec"
|
||||
v-if="state.pageTitle === t('companyprofildetail.article2.title')"
|
||||
style="background: #fff"
|
||||
>
|
||||
<div class="flex flex-wrap justify-center relative z-10 relative z-10">
|
||||
<div
|
||||
class="w-full title mt-[158px] text-center"
|
||||
>
|
||||
{{ t('companyprofildetail.article2.title') }}
|
||||
</div>
|
||||
<div
|
||||
class="w-full text-center mt-[28px] text-[#455363] text-[16px]"
|
||||
>
|
||||
{{ t('companyprofildetail.article2.date') }}
|
||||
</div>
|
||||
<div class="mt-[63px] overflow-hidden">
|
||||
<img
|
||||
class="w-[930px] h-[574px]"
|
||||
src="@/assets/image/companyprofil/768/carouselShow-2.png"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="w-full px-[20px] text-[#455363] text-[16px] div-indent mt-[47px] mb-[275px]"
|
||||
>
|
||||
<div v-if="state.pageTitle === t('companyprofildetail.article2.title')">
|
||||
<p>{{ t('companyprofildetail.article2.content[0]') }}</p>
|
||||
<p>{{ t('companyprofildetail.article2.content[1]') }}</p>
|
||||
<p>{{ t('companyprofildetail.article2.content[2]') }}</p>
|
||||
<p>{{ t('companyprofildetail.article2.content[3]') }}</p>
|
||||
<p>{{ t('companyprofildetail.article2.content[4]') }}</p>
|
||||
<p>{{ t('companyprofildetail.article2.content[5]') }}</p>
|
||||
<p>{{ t('companyprofildetail.article2.content[6]') }}</p>
|
||||
<p>{{ t('companyprofildetail.article2.content[7]') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section
|
||||
className="section-third"
|
||||
v-if="state.pageTitle === t('companyprofildetail.article3.title')"
|
||||
style="background: #fff"
|
||||
>
|
||||
<div class="flex flex-wrap justify-center relative z-10 relative z-10">
|
||||
<div
|
||||
class="w-full title mt-[158px] text-center"
|
||||
>
|
||||
{{ t('companyprofildetail.article3.title') }}
|
||||
</div>
|
||||
<div
|
||||
class="w-full text-center mt-[28px] text-[#455363] text-[16px]"
|
||||
>
|
||||
{{ t('companyprofildetail.article3.date') }}
|
||||
</div>
|
||||
<div class="mt-[63px] overflow-hidden">
|
||||
<img
|
||||
class="w-[930px] h-[574px]"
|
||||
src="@/assets/image/companyprofil/768/carouselShow-3.png"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="w-full px-[20px] text-[#455363] text-[16px] div-indent mt-[47px] mb-[275px]"
|
||||
>
|
||||
<div v-if="state.pageTitle === t('companyprofildetail.article3.title')">
|
||||
<p>{{ t('companyprofildetail.article3.content[0]') }}</p>
|
||||
<p>{{ t('companyprofildetail.article3.content[1]') }}</p>
|
||||
<p>{{ t('companyprofildetail.article3.content[2]') }}</p>
|
||||
<p>{{ t('companyprofildetail.article3.content[3]') }}</p>
|
||||
<p>{{ t('companyprofildetail.article3.content[4]') }}</p>
|
||||
<p>{{ t('companyprofildetail.article3.content[5]') }}</p>
|
||||
<p>{{ t('companyprofildetail.article3.content[6]') }}</p>
|
||||
<p>{{ t('companyprofildetail.article3.content[7]') }}</p>
|
||||
<p>{{ t('companyprofildetail.article3.content[8]') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section
|
||||
className="section-four"
|
||||
v-if="state.pageTitle === t('companyprofildetail.article4.title')"
|
||||
style="background: #fff"
|
||||
>
|
||||
<div class="flex flex-wrap justify-center relative z-10 relative z-10">
|
||||
<div
|
||||
class="w-full title mt-[158px] text-center"
|
||||
>
|
||||
{{ t('companyprofildetail.article4.title') }}
|
||||
</div>
|
||||
<div
|
||||
class="w-full text-center mt-[28px] text-[#455363] text-[16px]"
|
||||
>
|
||||
{{ t('companyprofildetail.article4.date') }}
|
||||
</div>
|
||||
<div class="mt-[63px] overflow-hidden">
|
||||
<img
|
||||
class="w-[930px] h-[574px]"
|
||||
src="@/assets/image/companyprofil/768/carouselShow-4.png"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="w-full px-[20px] text-[#455363] text-[16px] div-indent mt-[47px] mb-[275px]"
|
||||
>
|
||||
<div v-if="state.pageTitle === t('companyprofildetail.article4.title')">
|
||||
<p>{{ t('companyprofildetail.article4.content[0]') }}</p>
|
||||
<p>{{ t('companyprofildetail.article4.content[1]') }}</p>
|
||||
<p>{{ t('companyprofildetail.article4.content[2]') }}</p>
|
||||
<p>{{ t('companyprofildetail.article4.content[3]') }}</p>
|
||||
<p>{{ t('companyprofildetail.article4.content[4]') }}</p>
|
||||
<p>{{ t('companyprofildetail.article4.content[5]') }}</p>
|
||||
<p>{{ t('companyprofildetail.article4.content[6]') }}</p>
|
||||
<p>{{ t('companyprofildetail.article4.content[7]') }}</p>
|
||||
<p>{{ t('companyprofildetail.article4.content[8]') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section
|
||||
className="section-five"
|
||||
v-if="state.pageTitle === t('companyprofildetail.article5.title')"
|
||||
style="background: #fff"
|
||||
>
|
||||
<div class="flex flex-wrap justify-center relative z-10 relative z-10">
|
||||
<div
|
||||
class="w-full title mt-[158px] text-center"
|
||||
>
|
||||
{{ t('companyprofildetail.article5.title') }}
|
||||
</div>
|
||||
<div
|
||||
class="w-full text-center mt-[28px] text-[#455363] text-[16px]"
|
||||
>
|
||||
{{ t('companyprofildetail.article5.date') }}
|
||||
</div>
|
||||
<div class="mt-[63px] overflow-hidden">
|
||||
<img
|
||||
class="w-[930px] h-[574px]"
|
||||
src="@/assets/image/companyprofil/768/carouselShow-5.png"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="w-full px-[20px] text-[#455363] text-[16px] div-indent mt-[47px] mb-[275px]"
|
||||
>
|
||||
<div v-if="state.pageTitle === t('companyprofildetail.article5.title')">
|
||||
<p>{{ t('companyprofildetail.article5.content[0]') }}</p>
|
||||
<p>{{ t('companyprofildetail.article5.content[1]') }}</p>
|
||||
<p>{{ t('companyprofildetail.article5.content[2]') }}</p>
|
||||
<p>{{ t('companyprofildetail.article5.content[3]') }}</p>
|
||||
<p>{{ t('companyprofildetail.article5.content[4]') }}</p>
|
||||
<p>{{ t('companyprofildetail.article5.content[5]') }}</p>
|
||||
<p>{{ t('companyprofildetail.article5.content[6]') }}</p>
|
||||
<p>{{ t('companyprofildetail.article5.content[7]') }}</p>
|
||||
<p>{{ t('companyprofildetail.article5.content[8]') }}</p>
|
||||
<p>{{ t('companyprofildetail.article5.content[9]') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section
|
||||
style="background: #fff"
|
||||
className="flex flex-wrap justify-center"
|
||||
>
|
||||
<img
|
||||
class="w-[232px] h-[22px] my-[85px]"
|
||||
src="@/assets/image/image-footer.png"
|
||||
alt="logo"
|
||||
/>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
<script setup>
|
||||
import {
|
||||
onUnmounted,
|
||||
ref,
|
||||
onMounted,
|
||||
reactive,
|
||||
nextTick,
|
||||
onBeforeMount,
|
||||
computed,
|
||||
} from "vue";
|
||||
import { NDivider } from 'naive-ui'
|
||||
import { useHome } from "@/store/home/index.js";
|
||||
import { useRoute } from "vue-router";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useRouter } from "vue-router";
|
||||
const router = useRouter();
|
||||
const { t } = useI18n();
|
||||
const state = reactive({
|
||||
pageTitle: "",
|
||||
});
|
||||
|
||||
const currentArticleContent = computed(() => {
|
||||
const messages = t('companyprofildetail', {}, { resolveComponent: false });
|
||||
if (state.pageTitle === messages.article1.title) {
|
||||
return messages.article1.content;
|
||||
} else if (state.pageTitle === messages.article2.title) {
|
||||
return messages.article2.content;
|
||||
} else if (state.pageTitle === messages.article3.title) {
|
||||
return messages.article3.content;
|
||||
} else if (state.pageTitle === messages.article4.title) {
|
||||
return messages.article4.content;
|
||||
} else if (state.pageTitle === messages.article5.title) {
|
||||
return messages.article5.content;
|
||||
}
|
||||
return [];
|
||||
});
|
||||
|
||||
const handleTabClick = (tab) => {
|
||||
currentTab.value = tab;
|
||||
router.push('/' + tab);
|
||||
}
|
||||
const { currentTab } = useHome();
|
||||
const route = useRoute();
|
||||
onBeforeMount(() => {
|
||||
state.pageTitle = route.query.title;
|
||||
});
|
||||
onMounted(() => {
|
||||
window.scrollTo(0, 0);
|
||||
});
|
||||
onUnmounted(() => {});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.divider1 {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
left: 477px;
|
||||
width: 1px;
|
||||
height: 100vw;
|
||||
|
||||
}
|
||||
|
||||
.divider2 {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
left: 715px;
|
||||
width: 1px;
|
||||
height: 100vw;
|
||||
background-image: linear-gradient(to bottom, #E6EAEE 50%, transparent 50%);
|
||||
background-size: 1px 15px; // 第一个值是宽度，第二个值是虚线的总长度（实线+空白）
|
||||
background-repeat: repeat-y;
|
||||
}
|
||||
|
||||
.divider3 {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
left: 950px;
|
||||
width: 1px;
|
||||
height: 100vw;
|
||||
background-image: linear-gradient(to bottom, #E6EAEE 50%, transparent 50%);
|
||||
background-size: 1px 15px; // 第一个值是宽度，第二个值是虚线的总长度（实线+空白）
|
||||
background-repeat: repeat-y;
|
||||
}
|
||||
|
||||
.divider4 {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
left: 1186px;
|
||||
width: 1px;
|
||||
height: 100vw;
|
||||
background-image: linear-gradient(to bottom, #E6EAEE 50%, transparent 50%);
|
||||
background-size: 1px 15px; // 第一个值是宽度，第二个值是虚线的总长度（实线+空白）
|
||||
background-repeat: repeat-y;
|
||||
}
|
||||
|
||||
.divider5 {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
left: 1410px;
|
||||
width: 1px;
|
||||
height: 100vw;
|
||||
}
|
||||
.page-container {
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.header {
|
||||
width: 100%;
|
||||
height: 55px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
position: fixed;
|
||||
z-index: 10;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 0 10rem;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.logo {
|
||||
img {
|
||||
width: 108px;
|
||||
height: 33px;
|
||||
}
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
gap: 32px;
|
||||
margin-right: 32px;
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
font-size: 16px;
|
||||
color: #000000;
|
||||
cursor: pointer;
|
||||
transition: color 0.3s ease;
|
||||
padding: 4px 8px;
|
||||
|
||||
&.active {
|
||||
color: #8b59fa;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #8b59fa;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 40px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.div-indent {
|
||||
text-indent: 2em; // Adjust the value as needed for the desired indent
|
||||
|
||||
}
|
||||
.title {
|
||||
// line-height: 110px;
|
||||
color: #10253e;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<script setup>
|
||||
import { NCarousel, NDivider, NMarquee, NImage } from "naive-ui";
|
||||
import { onUnmounted, ref, watch, onMounted } from "vue";
|
||||
import { onUnmounted, ref, watch, onMounted, computed } from "vue";
|
||||
import gsap from "gsap";
|
||||
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
||||
import { useHome } from "@/store/home/index.js";
|
||||
@ -19,7 +19,50 @@ let isScrolling = false; // 添加滚动状态标记
|
||||
const scrollThreshold = 50; // 添加滚动阈值
|
||||
let lastScrollTime = 0; // 添加最后滚动时间记录
|
||||
const scrollDownVisible = ref(true);
|
||||
const { t } = useI18n();
|
||||
const { t, locale } = useI18n();
|
||||
|
||||
const currentLang = computed(() => {
|
||||
switch(locale.value) {
|
||||
case 'zh-TW':
|
||||
return 'tw';
|
||||
case 'ja':
|
||||
return 'jp';
|
||||
case 'en':
|
||||
return 'en';
|
||||
default:
|
||||
return 'cn';
|
||||
}
|
||||
});
|
||||
|
||||
// Add new imports for banner images
|
||||
const bannerImages = {
|
||||
cn: [
|
||||
new URL('@/assets/image/banner/cn/1.png', import.meta.url).href,
|
||||
new URL('@/assets/image/banner/cn/2.png', import.meta.url).href,
|
||||
new URL('@/assets/image/banner/cn/3.png', import.meta.url).href,
|
||||
new URL('@/assets/image/banner/cn/4.png', import.meta.url).href,
|
||||
],
|
||||
en: [
|
||||
new URL('@/assets/image/banner/en/1.png', import.meta.url).href,
|
||||
new URL('@/assets/image/banner/en/2.png', import.meta.url).href,
|
||||
new URL('@/assets/image/banner/en/3.png', import.meta.url).href,
|
||||
new URL('@/assets/image/banner/en/4.png', import.meta.url).href,
|
||||
],
|
||||
jp: [
|
||||
new URL('@/assets/image/banner/jp/1.png', import.meta.url).href,
|
||||
new URL('@/assets/image/banner/jp/2.png', import.meta.url).href,
|
||||
new URL('@/assets/image/banner/jp/3.png', import.meta.url).href,
|
||||
new URL('@/assets/image/banner/jp/4.png', import.meta.url).href,
|
||||
],
|
||||
tw: [
|
||||
new URL('@/assets/image/banner/tw/1.png', import.meta.url).href,
|
||||
new URL('@/assets/image/banner/tw/2.png', import.meta.url).href,
|
||||
new URL('@/assets/image/banner/tw/3.png', import.meta.url).href,
|
||||
new URL('@/assets/image/banner/tw/4.png', import.meta.url).href,
|
||||
],
|
||||
};
|
||||
|
||||
const currentBannerImages = computed(() => bannerImages[currentLang.value] || bannerImages.cn);
|
||||
|
||||
const handleTabClick = (tab) => {
|
||||
currentTab.value = tab;
|
||||
@ -94,7 +137,7 @@ const handleWheel = (e) => {
|
||||
// 监听滚轮事件
|
||||
onMounted(() => {
|
||||
window.scrollTo(0, 0);
|
||||
window.addEventListener('wheel', handleWheel, { passive: false });
|
||||
window.addEventListener("wheel", handleWheel, { passive: false });
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
@ -645,28 +688,29 @@ watch(
|
||||
<div class="tabs">
|
||||
<div
|
||||
class="tab-item"
|
||||
:class="{ active: currentTab === 'home' }"
|
||||
:class="{
|
||||
active: currentTab === 'home',
|
||||
}"
|
||||
@click="handleTabClick('home')"
|
||||
>
|
||||
{{ t("home.nav.home") }}
|
||||
</div>
|
||||
<div class="tabs">
|
||||
<div class="tab-item" :class="{ active: currentTab === 'home' }" @click="handleTabClick('home')">
|
||||
{{ t('home.nav.home') }}
|
||||
</div>
|
||||
<div class="tab-item" :class="{ active: currentTab === 'companyprofil' }" @click="handleTabClick('companyprofil')">
|
||||
{{ t('home.nav.company') }}
|
||||
</div>
|
||||
<div class="tab-item" :class="{ active: currentTab === 'businessintroduction' }" @click="handleTabClick('businessintroduction')">
|
||||
{{ t('home.nav.businessintroduction') }}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="tab-item"
|
||||
:class="{ active: currentTab === 'businessintroduction' }"
|
||||
@click="handleTabClick('businessintroduction')"
|
||||
:class="{
|
||||
active: currentTab === 'companyprofil',
|
||||
}"
|
||||
@click="handleTabClick('companyprofil')"
|
||||
>
|
||||
{{ t("home.nav.business") }}
|
||||
{{ t("home.nav.company") }}
|
||||
</div>
|
||||
<div class="tab-item" :class="{
|
||||
active:
|
||||
currentTab === 'businessintroduction',
|
||||
}" @click="
|
||||
handleTabClick('businessintroduction')
|
||||
">
|
||||
{{ t("home.nav.businessintroduction") }}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
@ -676,9 +720,10 @@ watch(
|
||||
</div>
|
||||
<section className="panel first-panel">
|
||||
<n-carousel autoplay :interval="5000" class="no-hover">
|
||||
<img class="carousel-img" src="@/assets/image/banner/cn/b1.jpg" />
|
||||
<img class="carousel-img" src="@/assets/image/banner/cn/b2.jpg" />
|
||||
<img class="carousel-img" src="@/assets/image/banner/cn/b3.jpg" />
|
||||
<img class="carousel-item" :src="currentBannerImages[0]" />
|
||||
<img class="carousel-img" :src="currentBannerImages[1]" />
|
||||
<img class="carousel-img" :src="currentBannerImages[2]" />
|
||||
<img class="carousel-img" :src="currentBannerImages[3]" />
|
||||
</n-carousel>
|
||||
</section>
|
||||
|
||||
@ -808,11 +853,11 @@ watch(
|
||||
</section>
|
||||
|
||||
<section className="panel" style="background-color: #f8f9ff">
|
||||
<n-divider class="divider1" vertical />
|
||||
<div class="divider2" style=""></div>
|
||||
<div class="divider3" style=""></div>
|
||||
<div class="divider4" style=""></div>
|
||||
<n-divider class="divider5" vertical />
|
||||
<n-divider class="divider1" vertical style="height: 100%" />
|
||||
<div class="divider2" style="height: 100%"></div>
|
||||
<div class="divider3" style="height: 100%"></div>
|
||||
<div class="divider4" style="height: 100%"></div>
|
||||
<n-divider class="divider5" vertical style="height: 100%" />
|
||||
<div class="parallax-bg"></div>
|
||||
<div class="content4 mt-[103px]">
|
||||
<div class="text-[#8B59F7] text-[16px]">
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<script setup>
|
||||
import { NCarousel, NDivider, NMarquee, NImage } from "naive-ui";
|
||||
import { onUnmounted, ref, watch, onMounted } from "vue";
|
||||
import { onUnmounted, ref, watch, onMounted, computed } from "vue";
|
||||
import gsap from "gsap";
|
||||
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
||||
import { useHome } from "@/store/home/index.js";
|
||||
@ -19,7 +19,50 @@ let isScrolling = false; // 添加滚动状态标记
|
||||
const scrollThreshold = 50; // 添加滚动阈值
|
||||
let lastScrollTime = 0; // 添加最后滚动时间记录
|
||||
const scrollDownVisible = ref(true);
|
||||
const { t } = useI18n();
|
||||
const { t, locale } = useI18n();
|
||||
|
||||
const currentLang = computed(() => {
|
||||
switch(locale.value) {
|
||||
case 'zh-TW':
|
||||
return 'tw';
|
||||
case 'ja':
|
||||
return 'jp';
|
||||
case 'en':
|
||||
return 'en';
|
||||
default:
|
||||
return 'cn';
|
||||
}
|
||||
});
|
||||
|
||||
// Add new imports for banner images
|
||||
const bannerImages = {
|
||||
cn: [
|
||||
new URL('@/assets/image/banner/cn/1.png', import.meta.url).href,
|
||||
new URL('@/assets/image/banner/cn/2.png', import.meta.url).href,
|
||||
new URL('@/assets/image/banner/cn/3.png', import.meta.url).href,
|
||||
new URL('@/assets/image/banner/cn/4.png', import.meta.url).href,
|
||||
],
|
||||
en: [
|
||||
new URL('@/assets/image/banner/en/1.png', import.meta.url).href,
|
||||
new URL('@/assets/image/banner/en/2.png', import.meta.url).href,
|
||||
new URL('@/assets/image/banner/en/3.png', import.meta.url).href,
|
||||
new URL('@/assets/image/banner/en/4.png', import.meta.url).href,
|
||||
],
|
||||
jp: [
|
||||
new URL('@/assets/image/banner/jp/1.png', import.meta.url).href,
|
||||
new URL('@/assets/image/banner/jp/2.png', import.meta.url).href,
|
||||
new URL('@/assets/image/banner/jp/3.png', import.meta.url).href,
|
||||
new URL('@/assets/image/banner/jp/4.png', import.meta.url).href,
|
||||
],
|
||||
tw: [
|
||||
new URL('@/assets/image/banner/tw/1.png', import.meta.url).href,
|
||||
new URL('@/assets/image/banner/tw/2.png', import.meta.url).href,
|
||||
new URL('@/assets/image/banner/tw/3.png', import.meta.url).href,
|
||||
new URL('@/assets/image/banner/tw/4.png', import.meta.url).href,
|
||||
],
|
||||
};
|
||||
|
||||
const currentBannerImages = computed(() => bannerImages[currentLang.value] || bannerImages.cn);
|
||||
|
||||
const handleTabClick = (tab) => {
|
||||
currentTab.value = tab;
|
||||
@ -677,10 +720,10 @@ watch(
|
||||
</div>
|
||||
<section className="panel first-panel">
|
||||
<n-carousel autoplay :interval="5000" class="no-hover">
|
||||
<img class="carousel-item" src="@/assets/image/banner/cn/b0.png" />
|
||||
<img class="carousel-img" src="@/assets/image/banner/cn/b1.jpg" />
|
||||
<img class="carousel-img" src="@/assets/image/banner/cn/b2.jpg" />
|
||||
<img class="carousel-img" src="@/assets/image/banner/cn/b3.jpg" />
|
||||
<img class="carousel-item" :src="currentBannerImages[0]" />
|
||||
<img class="carousel-img" :src="currentBannerImages[1]" />
|
||||
<img class="carousel-img" :src="currentBannerImages[2]" />
|
||||
<img class="carousel-img" :src="currentBannerImages[3]" />
|
||||
</n-carousel>
|
||||
</section>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user