Skip to content

C
components
Commit da021e12 authored by chenqikuai's avatar chenqikuai
Browse files
Options

将变量抽取出来

parent ba76660c
Show whitespace changes
Inline Side-by-side
Showing with 257 additions and 208 deletions
src/pages/SourceTraceManageHomePage/Test.vue
View file @ da021e12
<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
View file @ da021e12
......@@ -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
View file @ da021e12
<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
View file @ da021e12
<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
View file @ da021e12
......@@ -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
View file @ da021e12
<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>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment