Skip to content

P
provenance-website
Commit a68e2f55 authored by wenglk's avatar wenglk
Browse files
Options

update

parent c0355559
Show whitespace changes
Inline Side-by-side
Showing with 108 additions and 29 deletions
src/views/CompanyProvenance.vue
View file @ a68e2f55
<template>
<div class="bg-white md:min-w-bodySet mx-auto">
<div class="banner bg-gradient-to-r from-bannerBgStartColor to-bannerBgEndColor">
<div
class="banner bg-gradient-to-r from-bannerBgStartColor to-bannerBgEndColor"
>
<div class="md:w-bodySet mx-auto">
<div
class="md:pl-48 md:pr-32 mx-auto pt-14 md:h-480px box-content overflow-hidden md:flex flex-row-reverse justify-between items-center"
>
<div class="pt-14">
<svg-icon iconClass="companyBanner" width="510px" height="367px" class=" hidden md:block" />
<svg-icon iconClass="companyBanner" width="289px" height="208px" class=" mx-auto md:hidden" />
<svg-icon
iconClass="companyBanner"
width="510px"
height="367px"
class="hidden md:block"
/>
<svg-icon
iconClass="companyBanner"
width="289px"
height="208px"
class="mx-auto md:hidden"
/>
</div>
<div class="md:pr-24">
<div class="text-3xl md:text-4xl font-semibold text-headerMain pt-5 md:pt-12 text-center md:text-left">企业高级版</div>
<div
class=" text-sm md:text-base text-contentMain mt-5 px-6 md:pr-3 md:pl-0 text-center md:text-left"
>基于区块链技术的存证溯源服务系统，在公共开发版的基础上增加任务协同、资产数字化等高级存证溯源功能。</div>
<div class="flex flex-row justify-center md:justify-start pb-24 md:pb-0 mt-4 md:mt-7">
<MainButton size="large" text="立即体验" @click="handleClick('https://slc.8n.cn/')" />
class="text-3xl md:text-4xl font-semibold text-headerMain pt-5 md:pt-12 text-center md:text-left"
>
企业高级版
</div>
<div
class="text-sm md:text-base text-contentMain mt-5 px-6 md:pr-3 md:pl-0 text-center md:text-left"
>
基于区块链技术的存证溯源服务系统，在公共开发版的基础上增加任务协同、资产数字化等高级存证溯源功能。
</div>
<div
class="flex flex-row justify-center md:justify-start pb-24 md:pb-0 mt-4 md:mt-7"
>
<MainButton
size="large"
text="立即体验"
@click="handleClick('https://fw.8n.cn/')"
/>
</div>
</div>
</div>
</div>
</div>
<div class="product md:w-bodySet mx-auto">
<div class=" text-2xl md:text-3xl text-headerMain pt-5 md:pt-14 font-semibold text-center pb-9 md:pb-20">产品优势</div>
<div class="grid grid-cols-2 md:grid-cols-3 md:grid-rows-2 px-10 md:px-44 mx-auto pb-5 md:pb-24 gap-x-7 md:gap-x-40 gap-y-11">
<div
class="text-2xl md:text-3xl text-headerMain pt-5 md:pt-14 font-semibold text-center pb-9 md:pb-20"
>
产品优势
</div>
<div
class="grid grid-cols-2 md:grid-cols-3 md:grid-rows-2 px-10 md:px-44 mx-auto pb-5 md:pb-24 gap-x-7 md:gap-x-40 gap-y-11"
>
<div v-for="item in productsList" :key="item.id">
<svg-icon :iconClass="item.icon" class="w-14 h-14 mx-auto" />
<div class="pt-2 text-headerMain text-base md:text-xl font-semibold text-center">{{ item.title }}</div>
<div class="text-sm text-contentMain text-justify pt-3 md:h-20">{{ item.detail }}</div>
<svg-icon
:iconClass="item.icon"
class="w-14 h-14 mx-auto"
/>
<div
class="pt-2 text-headerMain text-base md:text-xl font-semibold text-center"
>
{{ item.title }}
</div>
<div
class="text-sm text-contentMain text-justify pt-3 md:h-20"
>
{{ item.detail }}
</div>
</div>
</div>
</div>
<div class="functions">
<div class=" text-2xl md:text-3xl text-headerMain pt-7 md:pt-16 font-semibold text-center pb-6 md:pb-8">产品功能</div>
<div
class="text-2xl md:text-3xl text-headerMain pt-7 md:pt-16 font-semibold text-center pb-6 md:pb-8"
>
产品功能
</div>
<div
v-for="item in functionList"
:key="item.id"
......@@ -44,16 +89,50 @@
data-aos="fade-up"
data-aos-duration="600"
data-aos-easing="ease-in-out-cubic"
:class="item.id % 2 == 0 ? ' flex-row-reverse' : ' flex-row'"
:class="
item.id % 2 == 0 ? ' flex-row-reverse' : ' flex-row'
"
>
<div
:class="
item.id % 2 == 0
? 'md:pr-5 md:pl-14'
: 'md:pl-5 md:pr-14'
"
>
<div :class="item.id % 2 == 0 ? 'md:pr-5 md:pl-14' : 'md:pl-5 md:pr-14'">
<svg-icon v-if="item.icon" :iconClass="item.icon" width="606" height="485" class=" hidden md:block text-svgLightGray"/>
<svg-icon v-if="item.icon" :iconClass="item.icon" width="316px" height="278px" class=" mx-auto md:hidden text-svgLightGray"/>
<svg-icon
v-if="item.icon"
:iconClass="item.icon"
width="606"
height="485"
class="hidden md:block text-svgLightGray"
/>
<svg-icon
v-if="item.icon"
:iconClass="item.icon"
width="316px"
height="278px"
class="mx-auto md:hidden text-svgLightGray"
/>
<!-- <img v-else :src="getImgUrl(item.url!)" alt=""> -->
</div>
<div :class="item.id % 2 == 0 ? ' px-10 md:pl-20 md:pr-0' : 'px-10 md:pr-20 md:pl-0'">
<div class="pt-2 text-headerMain text-2xl font-semibold">{{ item.title }}</div>
<div class=" text-base md:text-sm text-contentMain pt-4 text-justify">{{ item.detail }}</div>
<div
:class="
item.id % 2 == 0
? ' px-10 md:pl-20 md:pr-0'
: 'px-10 md:pr-20 md:pl-0'
"
>
<div
class="pt-2 text-headerMain text-2xl font-semibold"
>
{{ item.title }}
</div>
<div
class="text-base md:text-sm text-contentMain pt-4 text-justify"
>
{{ item.detail }}
</div>
</div>
</div>
</div>
......@@ -61,19 +140,19 @@
</div>
</template>
<script setup lang="ts">
import MainButton from '@/components/mainButton.vue';
import { computed } from 'vue';
import { productsList, functionList } from '@/context/company'
import MainButton from "@/components/mainButton.vue";
import { computed } from "vue";
import { productsList, functionList } from "@/context/company";
const getImgUrl = computed(() => {
return (url: string) => {
return new URL(`../assets/${url}.png`, import.meta.url).href
}
})
return new URL(`../assets/${url}.png`, import.meta.url).href;
};
});
const handleClick = (url: string) => {
window.open(url)
}
window.open(url);
};
</script>
<style scoped>
......
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