将变量抽取出来

src/pages/SourceTraceManageHomePage/Test.vue

 <template>
-  <IndexVue chain_browser_url_prefix="chain_browser_url_prefix"></IndexVue>
+  <IndexVue
+    :proj-party-logo="loginlogo"
+    :bannerPhoneImage="bannerPhoneImage"
+    sectionTitle="33复杂美"
+    section-desc="核心技术CHAIN33区块链底层开源，构建数字一体化生态体系"
+    :advantagesCardList="advantagesCardList"
+    :featuresContent="featuresContent"
+    iconfont-link="//at.alicdn.com/t/font_1321935_cdom05madx.css"
+    :ourAdvantages="ourAdvantages"
+    :deploys="deploys"
+    :industrys="industrys"
+  ></IndexVue>
 </template>
 
 <script lang="ts" setup>
+import p1 from "@/assets/images/Home/advantage1_szhfwcz.png";
+import p2 from "@/assets/images/Home/advantage2_qzqsjjk.png";
+import p3 from "@/assets/images/Home/advantage3_djdsycz.png";
+import p4 from "@/assets/images/Home/advantage4_zdyslmb.png";
+import p5 from "@/assets/images/Home/advantage5_dcbgxlz.png";
+import p6 from "@/assets/images/Home/advantage6_ganfhtx.png";
+import loginlogo from "@/assets/images/Home/home_logo.png";
+import bannerPhoneImage from "@/assets/images/Home/banner-phone.png";
+import advantage1 from "@/assets/images/Home/advantage1.png";
+import advantage2 from "@/assets/images/Home/advantage2.png";
+import advantage3 from "@/assets/images/Home/advantage3.png";
+import home3_baner3 from "@/assets/images/Home/home3_baner3.png";
+import home3_baner1 from "@/assets/images/Home/home3_baner1.png";
+import home3_baner2 from "@/assets/images/Home/home3_baner2.png";
 import IndexVue from "./index.vue";
+const advantagesCardList = [
+  {
+    title: "领先级技术研发",
+    desc:
+      "已累计申请近 200项区块链发明专利，与阿里、腾讯同列全球专利数排名前10。",
+    icon: advantage1,
+  },
+  {
+    title: "专业化团队运营",
+    desc:
+      "作为专业的区块链解决方案服务商，引入不同国家的技术专家、电商创业者等行业精英。",
+    icon: advantage2,
+  },
+  {
+    title: "500强合作伙伴",
+    desc:
+      "已为海航海平线、美的金融、电力巨头等多家世界 500强企业正式上线区块链项目。",
+    icon: advantage3,
+  },
+];
+const featuresContent = [
+  { text: `产品资料隐私性` },
+  { text: `团队权限管理` },
+  { text: `定期维护更新` },
+  { text: `专业技术支持` },
+  { text: `全程自定义` },
+  { text: `全程协同合作` },
+];
+
+// 我们的优势
+const ourAdvantages = [
+  {
+    src: p1,
+    icon: `&#xe61e;`,
+    title: `数字化防伪存证`,
+    text: `区块链共识算法、非对称加密、分布式存储等技术特性，存证安全加密，溯源真实。`,
+  },
+  {
+    src: p2,
+    icon: `&#xe632;`,
+    title: `全周期数据监控`,
+    text: `上链数据无法作弊、不可篡改，从源头控制数据，实现存证全生命周期监控。`,
+  },
+  {
+    src: p3,
+    icon: `&#xe61b;`,
+    title: `多节点溯源见证`,
+    text: `高质量溯源系统稳定可靠，存证关键控制点提供警告、预防、管控提示，数据可控。`,
+  },
+  {
+    src: p4,
+    icon: `&#xe61c;`,
+    title: `自定义上链模板`,
+    text: `个性化模板自由定制，类目产品任意添加，数字化一体存证，操作更灵活。`,
+  },
+  {
+    src: p5,
+    icon: `&#xe617;`,
+    title: `低成本高效流转`,
+    text: `上链即生成专属二维码，有效提高协调效率，线上线下易流转，降低传播成本。`,
+  },
+  {
+    src: p6,
+    icon: `&#xe61a;`,
+    title: `高安全防护体系`,
+    text: `多维度、多层防护确保系统技术安全，保障产品及服务的无系统性风险运作。`,
+  },
+];
+
+// 企业独立部署
+const deploys = [
+  {
+    title: `增量更新`,
+    text: `信息上链后可持续录入，多次上链，上传更便捷。`,
+    image: home3_baner3,
+  },
+  {
+    title: `用户管理`,
+    text: `管理员统一设用户权限，专人专责，管理更规范。`,
+    image: home3_baner1,
+  },
+  {
+    title: `权限交接`,
+    text: `现有工作信息一键移交，尽在掌握，操作更简单。`,
+    image: home3_baner2,
+  },
+];
+
+// 使用行业
+const industrys = [
+  {
+    color: `#15CBBA`,
+    icon: `&#xe62f;`,
+    title: `商品上链`,
+    text: `对商品实现从源头的信息采集记录，原料来源追溯、⽣产过程、加⼯环节、仓储信息、检验批次、物流周转、到第三⽅质检、海关出⼊境、防伪鉴证的全程可追溯。`,
+  },
+  {
+    color: `#6587FD`,
+    icon: `&#xe62e;`,
+    title: `证书上链`,
+    text: `各种教育资质证书均可上链，将个人学习、培训记录和证书存放在区块链数据库中，使得证书验证更加安全、有效，保证学习记录和证书的真实性并永久保存。`,
+  },
+  {
+    color: `#FFA475`,
+    icon: `&#xe645;`,
+    title: `文章上链`,
+    text: `上链后文章将永久被记录在区块链上，不可篡改且不可删除，区块链文章为原创文章作者应有的版权保驾护航，让维权更简单。`,
+  },
+  {
+    color: `#FF7575`,
+    icon: `&#xe631;`,
+    title: `古董字画存证`,
+    text: `上链后赋予每一件艺术品独一无二的身份信息，即便在交易流转过程中也可进行信息追加，让赝品、仿品无可乘之机，有效保障艺术品交易双方利益。`,
+  },
+];
 </script>

src/pages/SourceTraceManageHomePage/components/ApplicableIndustries.vue

@@ -10,7 +10,7 @@
       style="height: 400px;"
     >
       <i
-        class="block text-center cursor-pointer text-3xl"
+        class="iconfont block text-center cursor-pointer !text-3xl"
         style="width: 54px; height: 37px; line-height: 37px;"
         :style="industryLeft.style"
         @click="nextIndustry(`right`)"
@@ -32,7 +32,7 @@
           :key="index"
         >
           <i
-            class="content-in-icon text-3xl block mt-10 mx-auto text-white text-center rounded-full"
+            class="iconfont content-in-icon text-3xl block mt-10 mx-auto text-white text-center rounded-full"
             style="
               width: 82px;
               height: 82px;
@@ -47,7 +47,7 @@
         </div>
       </div>
       <i
-        class="block text-center cursor-pointer text-3xl"
+        class="iconfont block text-center cursor-pointer !text-3xl"
         style="width: 54px; height: 37px; line-height: 37px;"
         :style="industryRight.style"
         @click="nextIndustry(`left`)"

src/pages/SourceTraceManageHomePage/components/EntIndependentDeployment.vue

 <template>
   <section
     class="home-3 w-full bg-no-repeat"
-    style="
-      height: 640px;
-      background-image: url('@/assets/images/Home/home3.png');
-      background-position: right center;
-    "
+    style="height: 640px; background-position: right center;"
+    :style="{
+      backgroundImage: `url(${i})`,
+    }"
   >
     <span
       class="block w-full text-center text-3xl font-PingFangSC font-light text-mGray4"
@@ -55,25 +54,13 @@
       <img
         class="ml-5"
         style="width: 680px; height: 380px;"
-        v-show="currentDeploy === 0"
-        src="../../../assets/images/Home/home3_baner3.png"
-      />
-      <img
-        class="ml-5"
-        style="width: 680px; height: 380px;"
-        v-show="currentDeploy === 1"
-        src="../../../assets/images/Home/home3_baner1.png"
-      />
-      <img
-        class="ml-5"
-        style="width: 680px; height: 380px;"
-        v-show="currentDeploy === 2"
-        src="../../../assets/images/Home/home3_baner2.png"
+        :src="deploys[currentDeploy].image"
       />
     </div>
   </section>
 </template>
 <script lang="ts" setup>
+import i from "@/assets/images/Home/home3.png";
 defineProps<{
   currentDeploy: number;
   setCurrentDeploy: (c: number) => void;

src/pages/SourceTraceManageHomePage/components/FooterInfo.vue

 <template>
   <footer
     class="footer w-full h-28 text-center"
-    style="margin-top: -130px; background: rgba(59, 53, 98, 1);"
+    style="margin-top: -130px; background: rgba(59, 53, 98, 1)"
   >
     <div class="inline-block w-pcWidth text-center">
       <div class="footer-block">
         <div
           class="inline-block leading-4 align-bottom box-content"
-          style="height: 56px;"
+          style="height: 56px"
         >
           <div class="inline-block text-white opacity-50 text-xs">公司电话</div>
           <div
             class="w-5 mt-1"
-            style="margin-bottom: 18px; height: 1px; background-color: #c5cfe8;"
+            style="margin-bottom: 18px; height: 1px; background-color: #c5cfe8"
           ></div>
           <div
             class="inline-block relative visible text-sm content-text h-4 leading-4"
           >
-            0571-81671360
+            {{ phone }}
           </div>
         </div>
       </div>
       <div class="footer-block">
         <div
           class="inline-block leading-4 align-bottom box-content"
-          style="height: 56px;"
+          style="height: 56px"
         >
           <div class="inline-block text-white opacity-50 text-xs">联系邮箱</div>
           <div
             class="w-5 mt-1"
-            style="margin-bottom: 18px; height: 1px; background-color: #c5cfe8;"
+            style="margin-bottom: 18px; height: 1px; background-color: #c5cfe8"
           ></div>
           <div
             class="inline-block relative visible text-sm content-text h-4 leading-4"
           >
-            support@33.cn
+            {{ email }}
           </div>
         </div>
       </div>
       <div class="footer-block pr-10 box-content">
         <div
           class="inline-block leading-4 align-bottom box-content"
-          style="height: 56px;"
+          style="height: 56px"
         >
           <div class="inline-block text-white opacity-50 text-xs">联系地址</div>
           <div
             class="w-5 mt-1"
-            style="margin-bottom: 18px; height: 1px; background-color: #c5cfe8;"
+            style="margin-bottom: 18px; height: 1px; background-color: #c5cfe8"
           ></div>
           <div
             class="inline-block relative visible text-sm content-text h-4 leading-4"
           >
-            杭州市西湖区东部软件园6号楼702
+            {{ address }}
           </div>
         </div>
       </div>
       <div class="footer-block footer-qs !w-50">
         <div
           class="inline-block leading-4 align-bottom box-content"
-          style="height: 56px;"
+          style="height: 56px"
         >
           <div class="inline-block text-white opacity-50 text-xs">商业合作</div>
           <div
             class="w-5 mt-1"
-            style="margin-bottom: 18px; height: 1px; background-color: #c5cfe8;"
+            style="margin-bottom: 18px; height: 1px; background-color: #c5cfe8"
           ></div>
           <div
             class="inline-block relative visible text-sm content-text h-4 leading-4"
           >
             <img
               class="absolute inline-block max-w-none"
-              style="top: -60px; left: 104px; width: 92px; height: 92px;"
-              src="../../../assets/images/Home/qr.png"
+              style="top: -60px; left: 104px; width: 92px; height: 92px"
+              :src="qrcode"
               alt="二维码"
             />
             客服二维码
@@ -81,6 +81,14 @@
     </div>
   </footer>
 </template>
+<script lang="ts" setup>
+defineProps<{
+  phone: string;
+  email: string;
+  address: string;
+  qrcode: string;
+}>();
+</script>
 <style lang="scss">
 .footer {
   .footer-block {

src/pages/SourceTraceManageHomePage/components/HeadSection.vue

@@ -40,12 +40,12 @@
           <span
             class="block text-white pt-20 text-3xl h-10 box-content"
             style="line-height: normal;"
-            >33复杂美</span
+            >{{ sectionTitle }}</span
           >
           <span
             class="block text-white opacity-30"
             style="margin-top: 15px; font-size: 32px; line-height: normal;"
-            >核心技术CHAIN33区块链底层开源，构建数字一体化生态体系</span
+            >{{ sectionDesc }}</span
           >
           <div
             class="bg-search h-10 bg-white box-content rounded-20 flex items-center"
@@ -83,61 +83,24 @@
     <!-- 优势 -->
     <section class="w-pcWidth h-125 mx-auto flex justify-between items-center">
       <div
-        class="text-center shrink-0 hover:transform hover:scale-110 transition-all duration-200 ease-linear"
+        v-for="(card, i) in advantagesCardList"
+        :key="i"
+        class="shrink-0 text-center hover:transform hover:scale-110 transition-all duration-200 ease-linear cursor-pointer"
         style="width: 350px; height: 350px; background-size: 100% 100%;"
         :style="{
-          backgroundImage: `url(${advantage1})`,
+          backgroundImage: `url(${card.icon})`,
         }"
       >
         <span
           class="inline-block mt-40 text-xl font-PingFangSC font-medium text-black leading-7"
-          >领先级技术研发</span
+          >{{ card.title }}</span
         >
         <br />
         <span
           class="block mx-auto my-2.5 text-sm opacity-60 font-PingFangSC text-mGray2"
           style="width: 66%; line-height: 30px;"
         >
-          已累计申请近 200项区块链发明专利，与阿里、腾讯同列全球专利数排名前
-          10。
-        </span>
-      </div>
-      <div
-        class="shrink-0 text-center hover:transform hover:scale-110 transition-all duration-200 ease-linear"
-        style="width: 350px; height: 350px; background-size: 100% 100%;"
-        :style="{
-          backgroundImage: `url(${advantage2})`,
-        }"
-      >
-        <span
-          class="inline-block mt-40 text-xl font-PingFangSC font-medium text-black leading-7"
-          >专业化团队运营</span
-        >
-        <br />
-        <span
-          class="block mx-auto my-2.5 text-sm opacity-60 font-PingFangSC text-mGray2"
-          style="width: 66%; line-height: 30px;"
-          >作为专业的区块链解决方案服务商，引入不同国家的技术专家、电商创业者等行业精英。</span
-        >
-      </div>
-      <div
-        class="shrink-0 text-center hover:transform hover:scale-110 transition-all duration-200 ease-linear"
-        style="width: 350px; height: 350px; background-size: 100% 100%;"
-        :style="{
-          backgroundImage: `url(${advantage3})`,
-        }"
-      >
-        <span
-          class="inline-block mt-40 text-xl font-PingFangSC font-medium text-black leading-7"
-          >500强合作伙伴</span
-        >
-        <br />
-        <span
-          class="block mx-auto my-2.5 text-sm opacity-60 font-PingFangSC text-mGray2"
-          style="width: 66%; line-height: 30px;"
-        >
-          已为海航海平线、美的金融、电力巨头等多家世界 500
-          强企业正式上线区块链项目。
+          {{ card.desc }}
         </span>
       </div>
     </section>
@@ -185,15 +148,16 @@
   </section>
 </template>
 <script lang="ts" setup>
-import bannerImage from "@/assets/images/Home/banner.png";
-import loginlogo from "@/assets/images/Home/home_logo.png";
-import advantage1 from "@/assets/images/Home/advantage1.png";
-import advantage2 from "@/assets/images/Home/advantage2.png";
-import advantage3 from "@/assets/images/Home/advantage3.png";
 import features from "@/assets/images/Home/features.png";
+
 import { iFeaturesContent } from "../types";
 
 defineProps<{
+  sectionTitle: string;
+  sectionDesc: string;
+  bannerImage: string;
+  advantagesCardList: { icon: string; title: string; desc: string }[];
+  loginlogo: string;
   toLoginPanel: () => void;
   hashText: string;
   setHashText: (str: string) => void;

src/pages/SourceTraceManageHomePage/index.vue

 <script setup lang="ts">
-import {
-  onMounted,
-  ref,
-  computed,
-  useSlots,
-  renderSlot,
-  defineComponent,
-} from "vue";
-import p1 from "@/assets/images/Home/advantage1_szhfwcz.png";
-import p2 from "@/assets/images/Home/advantage2_qzqsjjk.png";
-import p3 from "@/assets/images/Home/advantage3_djdsycz.png";
-import p4 from "@/assets/images/Home/advantage4_zdyslmb.png";
-import p5 from "@/assets/images/Home/advantage5_dcbgxlz.png";
-import p6 from "@/assets/images/Home/advantage6_ganfhtx.png";
-
-import bannerPhoneImage from "@/assets/images/Home/banner-phone.png";
+import { onMounted, ref, computed, onBeforeMount } from "vue";
+
+import bannerImage from "@/assets/images/Home/banner.png";
+import qrCode from "@/assets/images/Home/qr.png";
+
 import HeadSection from "./components/HeadSection.vue";
-import RenderVNode from "./components/RenderVNode.vue";
 import OurAdvantage from "./components/OurAdvantage.vue";
 import EntIndependentDeployment from "./components/EntIndependentDeployment.vue";
 import ApplicableIndustries from "./components/ApplicableIndustries.vue";
 import FreeTrialLinkCheck from "./components/FreeTrialLinkCheck.vue";
 import Footer from "./components/FooterInfo.vue";
+import { iFeaturesContent } from "./types";
+
+onBeforeMount(() => {
+  const mustNeedLinks = ["//at.alicdn.com/t/font_1321935_cdom05madx.css"];
+  if (!mustNeedLinks.every((i) => i !== props.iconfontLink)) {
+    mustNeedLinks.push(props.iconfontLink);
+  }
+  mustNeedLinks.forEach((link) => {
+    const linkEl = document.createElement("link");
+    linkEl.rel = "stylesheet";
+    linkEl.href = link;
+    document.head.appendChild(linkEl);
+  });
+});
+
+const emit = defineEmits<{
+  (e: "searchHash", hash: string): void;
+  (e: "navigate", path: string): void;
+}>();
 
 interface Props {
-  chain_browser_url_prefix: string;
+  iconfontLink: string;
+  deploys: {
+    title: string;
+    text: string;
+    image: string;
+  }[];
+  industrys: {
+    color: string;
+    icon: string;
+    title: string;
+    text: string;
+  }[];
+  projPartyLogo: string;
+  sectionTitle: string;
+  featuresContent: iFeaturesContent[];
+  sectionDesc: string;
+  ourAdvantages: { src: string; icon: string; title: string; text: string }[];
+  bannerPhoneImage: string;
+  advantagesCardList: { icon: string; title: string; desc: string }[];
+  phone?: string;
+  email?: string;
+  address?: string;
+  qrcode?: string;
 }
-const props = defineProps<Props>();
-const featuresContent = [
-  { text: `产品资料隐私性` },
-  { text: `团队权限管理` },
-  { text: `定期维护更新` },
-  { text: `专业技术支持` },
-  { text: `全程自定义` },
-  { text: `全程协同合作` },
-];
+
+const props = withDefaults(defineProps<Props>(), {
+  phone: "0571-81671360",
+  email: "support@33.cn",
+  address: "杭州市西湖区东部软件园6号楼702",
+  qrcode: qrCode,
+});
+
 const hashText = ref("");
 const setHashText = (hash: string) => {
   hashText.value = hash;
 };
-// 我们的优势
-const ourAdvantages = [
-  {
-    src: p1,
-    icon: `&#xe61e;`,
-    title: `数字化防伪存证`,
-    text: `区块链共识算法、非对称加密、分布式存储等技术特性，存证安全加密，溯源真实。`,
-  },
-  {
-    src: p2,
-    icon: `&#xe632;`,
-    title: `全周期数据监控`,
-    text: `上链数据无法作弊、不可篡改，从源头控制数据，实现存证全生命周期监控。`,
-  },
-  {
-    src: p3,
-    icon: `&#xe61b;`,
-    title: `多节点溯源见证`,
-    text: `高质量溯源系统稳定可靠，存证关键控制点提供警告、预防、管控提示，数据可控。`,
-  },
-  {
-    src: p4,
-    icon: `&#xe61c;`,
-    title: `自定义上链模板`,
-    text: `个性化模板自由定制，类目产品任意添加，数字化一体存证，操作更灵活。`,
-  },
-  {
-    src: p5,
-    icon: `&#xe617;`,
-    title: `低成本高效流转`,
-    text: `上链即生成专属二维码，有效提高协调效率，线上线下易流转，降低传播成本。`,
-  },
-  {
-    src: p6,
-    icon: `&#xe61a;`,
-    title: `高安全防护体系`,
-    text: `多维度、多层防护确保系统技术安全，保障产品及服务的无系统性风险运作。`,
-  },
-];
-// 企业独立部署
-const deploys = [
-  {
-    title: `增量更新`,
-    text: `信息上链后可持续录入，多次上链，上传更便捷。`,
-  },
-  {
-    title: `用户管理`,
-    text: `管理员统一设用户权限，专人专责，管理更规范。`,
-  },
-  {
-    title: `权限交接`,
-    text: `现有工作信息一键移交，尽在掌握，操作更简单。`,
-  },
-];
 
 const currentDeploy = ref(0); // 当前选中的企业部署
 
@@ -105,34 +79,6 @@ const industryStyle = ref({
   box: 3, // 一次显示几个盒子
 });
 
-// 使用行业
-const industrys = [
-  {
-    color: `#15CBBA`,
-    icon: `&#xe62f;`,
-    title: `商品上链`,
-    text: `对商品实现从源头的信息采集记录，原料来源追溯、⽣产过程、加⼯环节、仓储信息、检验批次、物流周转、到第三⽅质检、海关出⼊境、防伪鉴证的全程可追溯。`,
-  },
-  {
-    color: `#6587FD`,
-    icon: `&#xe62e;`,
-    title: `证书上链`,
-    text: `各种教育资质证书均可上链，将个人学习、培训记录和证书存放在区块链数据库中，使得证书验证更加安全、有效，保证学习记录和证书的真实性并永久保存。`,
-  },
-  {
-    color: `#FFA475`,
-    icon: `&#xe645;`,
-    title: `文章上链`,
-    text: `上链后文章将永久被记录在区块链上，不可篡改且不可删除，区块链文章为原创文章作者应有的版权保驾护航，让维权更简单。`,
-  },
-  {
-    color: `#FF7575`,
-    icon: `&#xe631;`,
-    title: `古董字画存证`,
-    text: `上链后赋予每一件艺术品独一无二的身份信息，即便在交易流转过程中也可进行信息追加，让赝品、仿品无可乘之机，有效保障艺术品交易双方利益。`,
-  },
-];
-
 onMounted(() => {
   industryStyle.value.currentIndex = 1;
 });
@@ -141,7 +87,7 @@ onMounted(() => {
 const industryLeft = computed(() => {
   const isFlag =
     industryStyle.value.currentIndex >=
-    industrys.length - industryStyle.value.box + 1;
+    props.industrys.length - industryStyle.value.box + 1;
   return {
     icon: !isFlag ? `&#xe61f;` : `&#xe622;`,
     style: { color: !isFlag ? `#EFEFEF` : `#9DA0D6` },
@@ -179,23 +125,17 @@ const nextIndustry = (type: string) => {
 };
 
 const navigate = (path: string) => {
-  //
+  emit("navigate", path);
 };
 
 const toLoginPanel = (isRegister = false) => {
+  // eslint-disable-next-line no-console
+  console.log(isRegister);
   navigate(`/signIn`);
 };
 
 const searchHash = () => {
-  console.log(hashText.value);
-  // return;
-  if (hashText.value === "") {
-    window.open(props.chain_browser_url_prefix);
-  } else {
-    window.open(
-      props.chain_browser_url_prefix + "product?hash=" + hashText.value
-    );
-  }
+  emit("searchHash", hashText.value);
 };
 </script>
 
@@ -203,6 +143,11 @@ const searchHash = () => {
   <div class="home">
     <!-- 主页第一个分块 -->
     <HeadSection
+      :sectionTitle="sectionTitle"
+      :sectionDesc="sectionDesc"
+      :loginlogo="projPartyLogo"
+      :bannerImage="bannerImage"
+      :advantagesCardList="advantagesCardList"
       :banner-phone-image="bannerPhoneImage"
       :features-content="featuresContent"
       :hash-text="hashText"
@@ -229,7 +174,12 @@ const searchHash = () => {
     <!-- 免费试用上链查 -->
     <FreeTrialLinkCheck :navigate="navigate"></FreeTrialLinkCheck>
     <!-- 底部 -->
-    <Footer></Footer>
+    <Footer
+      :phone="phone"
+      :email="email"
+      :address="address"
+      :qrcode="qrcode"
+    ></Footer>
   </div>
 </template>
 <style>