Hugging Face's logo

Spaces:
ashahs
/
acg-website
Running

App Files Community
ashahs commited on
Commit
79d088f
·
verified ·
1 Parent(s): dd74c1b

帮我开发一个这个整个网站的子界面 - Follow Up Deployment

Browse files
Files changed (1) hide show
  1. index.html +194 -1
index.html CHANGED
@@ -493,7 +493,7 @@
493
  </div>
494
 
495
  <div class="mt-8 flex flex-col sm:flex-row justify-center gap-4">
496
- <button class="bg-purple-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-purple-700 transition">
497
  开始我的定制项目 <i class="fas fa-arrow-right ml-2"></i>
498
  </button>
499
  <button class="border border-purple-600 text-purple-600 px-6 py-3 rounded-lg font-medium hover:bg-purple-50 transition">
@@ -660,6 +660,199 @@
660
  </div>
661
  </footer>
662
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
663
  <script>
664
  // 简单的标签切换功能
665
  document.querySelectorAll('.flex.border-b button').forEach(button => {
 
493
  </div>
494
 
495
  <div class="mt-8 flex flex-col sm:flex-row justify-center gap-4">
496
+ <button class="bg-purple-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-purple-700 transition" onclick="openCustomServiceModal()">
497
  开始我的定制项目 <i class="fas fa-arrow-right ml-2"></i>
498
  </button>
499
  <button class="border border-purple-600 text-purple-600 px-6 py-3 rounded-lg font-medium hover:bg-purple-50 transition">
 
660
  </div>
661
  </footer>
662
 
663
+ <!-- 定制服务模态框（子界面） -->
664
+ <div id="customServiceModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
665
+ <div class="bg-white rounded-xl w-full max-w-4xl h-[90vh] overflow-hidden flex flex-col">
666
+ <!-- 模态框头部 -->
667
+ <div class="gradient-bg text-white p-6 flex justify-between items-center">
668
+ <h2 class="text-2xl font-bold">一站式定制服务</h2>
669
+ <button onclick="closeCustomServiceModal()" class="text-white text-2xl">
670
+ <i class="fas fa-times"></i>
671
+ </button>
672
+ </div>
673
+
674
+ <!-- 模态框内容 -->
675
+ <div class="flex-grow overflow-y-auto p-6">
676
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
677
+ <!-- 服务介绍 -->
678
+ <div>
679
+ <h3 class="text-xl font-bold mb-4">服务流程</h3>
680
+ <div class="space-y-4">
681
+ <div class="flex items-start">
682
+ <div class="bg-purple-100 text-purple-600 rounded-full w-8 h-8 flex items-center justify-center mr-3 flex-shrink-0">1</div>
683
+ <div>
684
+ <h4 class="font-bold">需求沟通</h4>
685
+ <p class="text-gray-600 text-sm">与专业客服详细沟通您的定制需求和期望效果</p>
686
+ </div>
687
+ </div>
688
+ <div class="flex items-start">
689
+ <div class="bg-purple-100 text-purple-600 rounded-full w-8 h-8 flex items-center justify-center mr-3 flex-shrink-0">2</div>
690
+ <div>
691
+ <h4 class="font-bold">方案设计</h4>
692
+ <p class="text-gray-600 text-sm">专业设计师提供初步设计方案和报价</p>
693
+ </div>
694
+ </div>
695
+ <div class="flex items-start">
696
+ <div class="bg-purple-100 text-purple-600 rounded-full w-8 h-8 flex items-center justify-center mr-3 flex-shrink-0">3</div>
697
+ <div>
698
+ <h4 class="font-bold">确认方案</h4>
699
+ <p class="text-gray-600 text-sm">修改完善直至您完全满意</p>
700
+ </div>
701
+ </div>
702
+ <div class="flex items-start">
703
+ <div class="bg-purple-100 text-purple-600 rounded-full w-8 h-8 flex items-center justify-center mr-3 flex-shrink-0">4</div>
704
+ <div>
705
+ <h4 class="font-bold">制作执行</h4>
706
+ <p class="text-gray-600 text-sm">专业团队按方案进行制作</p>
707
+ </div>
708
+ </div>
709
+ <div class="flex items-start">
710
+ <div class="bg-purple-100 text-purple-600 rounded-full w-8 h-8 flex items-center justify-center mr-3 flex-shrink-0">5</div>
711
+ <div>
712
+ <h4 class="font-bold">交付验收</h4>
713
+ <p class="text-gray-600 text-sm">按时交付并提供售后服务</p>
714
+ </div>
715
+ </div>
716
+ </div>
717
+
718
+ <h3 class="text-xl font-bold mt-8 mb-4">服务优势</h3>
719
+ <ul class="space-y-2">
720
+ <li class="flex items-center">
721
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
722
+ <span>专业设计师团队</span>
723
+ </li>
724
+ <li class="flex items-center">
725
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
726
+ <span>全程跟踪服务</span>
727
+ </li>
728
+ <li class="flex items-center">
729
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
730
+ <span>质量保证</span>
731
+ </li>
732
+ <li class="flex items-center">
733
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
734
+ <span>售后无忧</span>
735
+ </li>
736
+ </ul>
737
+ </div>
738
+
739
+ <!-- 服务详情 -->
740
+ <div>
741
+ <h3 class="text-xl font-bold mb-4">可定制服务</h3>
742
+ <div class="space-y-4">
743
+ <div class="border rounded-lg p-4 hover:shadow-md transition">
744
+ <div class="flex items-center mb-2">
745
+ <i class="fas fa-palette text-purple-500 mr-2"></i>
746
+ <h4 class="font-bold">角色设计</h4>
747
+ </div>
748
+ <p class="text-gray-600 text-sm mb-3">原创角色设计、OC设计、二创角色设计等</p>
749
+ <div class="flex flex-wrap gap-2">
750
+ <span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded">2D设计</span>
751
+ <span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded">3D建模</span>
752
+ <span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded">设定文档</span>
753
+ </div>
754
+ </div>
755
+
756
+ <div class="border rounded-lg p-4 hover:shadow-md transition">
757
+ <div class="flex items-center mb-2">
758
+ <i class="fas fa-pen-fancy text-blue-500 mr-2"></i>
759
+ <h4 class="font-bold">插画创作</h4>
760
+ </div>
761
+ <p class="text-gray-600 text-sm mb-3">同人插画、原创插画、封面设计等</p>
762
+ <div class="flex flex-wrap gap-2">
763
+ <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">数字绘画</span>
764
+ <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">线稿</span>
765
+ <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">上色</span>
766
+ </div>
767
+ </div>
768
+
769
+ <div class="border rounded-lg p-4 hover:shadow-md transition">
770
+ <div class="flex items-center mb-2">
771
+ <i class="fas fa-cube text-orange-500 mr-2"></i>
772
+ <h4 class="font-bold">3D打印</h4>
773
+ </div>
774
+ <p class="text-gray-600 text-sm mb-3">手办、模型、道具等3D打印服务</p>
775
+ <div class="flex flex-wrap gap-2">
776
+ <span class="bg-orange-100 text-orange-800 text-xs px-2 py-1 rounded">树脂打印</span>
777
+ <span class="bg-orange-100 text-orange-800 text-xs px-2 py-1 rounded">光固化</span>
778
+ <span class="bg-orange-100 text-orange-800 text-xs px-2 py-1 rounded">SLA</span>
779
+ </div>
780
+ </div>
781
+
782
+ <div class="border rounded-lg p-4 hover:shadow-md transition">
783
+ <div class="flex items-center mb-2">
784
+ <i class="fas fa-paint-brush text-red-500 mr-2"></i>
785
+ <h4 class="font-bold">涂装上色</h4>
786
+ </div>
787
+ <p class="text-gray-600 text-sm mb-3">手办涂装、模型上色、特效制作等</p>
788
+ <div class="flex flex-wrap gap-2">
789
+ <span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded">手涂</span>
790
+ <span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded">喷漆</span>
791
+ <span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded">水贴</span>
792
+ </div>
793
+ </div>
794
+ </div>
795
+
796
+ <div class="mt-8 bg-gray-50 rounded-lg p-4">
797
+ <h4 class="font-bold mb-2">价格参考</h4>
798
+ <div class="text-sm text-gray-600">
799
+ <p class="mb-1">• 角色设计：￥300-1500/角色</p>
800
+ <p class="mb-1">• 插画创作：￥200-800/幅</p>
801
+ <p class="mb-1">• 3D建模：￥500-3000/模型</p>
802
+ <p class="mb-1">• 3D打印：￥100-1000/件</p>
803
+ <p>• 涂装上色：￥150-800/件</p>
804
+ </div>
805
+ <p class="text-xs text-gray-500 mt-2">* 具体价格根据复杂程度和数量确定</p>
806
+ </div>
807
+ </div>
808
+ </div>
809
+
810
+ <!-- 案例展示 -->
811
+ <div class="mt-8">
812
+ <h3 class="text-xl font-bold mb-4">精选案例</h3>
813
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
814
+ <div class="rounded-lg overflow-hidden shadow">
815
+ <div class="bg-gray-200 h-32"></div>
816
+ <div class="p-2">
817
+ <p class="text-sm font-medium">原创角色设计</p>
818
+ <p class="text-xs text-gray-500"> fantasy风格</p>
819
+ </div>
820
+ </div>
821
+ <div class="rounded-lg overflow-hidden shadow">
822
+ <div class="bg-gray-200 h-32"></div>
823
+ <div class="p-2">
824
+ <p class="text-sm font-medium">3D打印手办</p>
825
+ <p class="text-xs text-gray-500">1/8比例</p>
826
+ </div>
827
+ </div>
828
+ <div class="rounded-lg overflow-hidden shadow">
829
+ <div class="bg-gray-200 h-32"></div>
830
+ <div class="p-2">
831
+ <p class="text-sm font-medium">插画作品</p>
832
+ <p class="text-xs text-gray-500">同人创作</p>
833
+ </div>
834
+ </div>
835
+ <div class="rounded-lg overflow-hidden shadow">
836
+ <div class="bg-gray-200 h-32"></div>
837
+ <div class="p-2">
838
+ <p class="text-sm font-medium">涂装作品</p>
839
+ <p class="text-xs text-gray-500">精细涂装</p>
840
+ </div>
841
+ </div>
842
+ </div>
843
+ </div>
844
+ </div>
845
+
846
+ <!-- 模态框底部 -->
847
+ <div class="border-t p-6 flex flex-col sm:flex-row justify-between items-center gap-4">
848
+ <p class="text-gray-600 text-sm">需要定制服务？我们的专业团队随时为您服务</p>
849
+ <button class="bg-purple-600 text-white px-6 py-2 rounded-lg font-medium hover:bg-purple-700 transition">
850
+ 立即咨询 <i class="fas fa-comment ml-2"></i>
851
+ </button>
852
+ </div>
853
+ </div>
854
+ </div>
855
+
856
  <script>
857
  // 简单的标签切换功能
858
  document.querySelectorAll('.flex.border-b button').forEach(button => {