Skip to content

P
provenance-website
Commit d3338842 authored by Cassini's avatar Cassini
Browse files
Options

feat:Home mobile page

parent c0e8edee
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 125 additions and 130 deletions
src/Layouts/MainPage/Footer.vue
View file @ d3338842
......@@ -2,8 +2,8 @@
<div>
<div class="md:hidden bg-footerBg w-full pt-12">
<div class="mx-auto pb-5">
<div class="justify-between flex flex-row w-8/12 mx-auto">
<div class="w-6/12">
<div class=" px-10">
<div class=" flex justify-between">
<div class="flex flex-col">
<span :class="footerMainFontClass">支持</span>
<span :class="footerSecondFontClass">企业内网部署</span>
......@@ -16,19 +16,23 @@
<span :class="footerSecondFontClass">服务协议</span>
<span :class="footerSecondFontClass">隐私协议</span>
</div>
</div>
<div class="w-6/12 pr-3">
<div class="flex flex-col">
<span :class="footerMainFontClass">联系我们</span>
<span :class="footerSecondFontClass">关于我们</span>
<span :class="footerSecondFontClass">问题反馈</span>
</div>
<div class="flex flex-col">
<span :class="footerSecondFontClass">咨询电话</span>
<span :class="footerMainFontClass">0571-8167-1366</span>
<span :class="footerSecondFontClass">客服二维码</span>
<img src="@/assets/serviceQr.png" class="w-16" />
</div>
<div class="pt-9">
<div class="flex flex-row justify-between items-center">
<div>
<p class="text-sm text-white cursor-pointer">咨询电话</p>
<p :class="footerMainFontClass">0571-8167-1366</p>
</div>
<div>
<img src="@/assets/serviceQr.png" class="w-16" />
<span :class="footerSecondFontClass">客服二维码</span>
</div>
</div>
</div>
</div>
......@@ -76,15 +80,13 @@
<span :class="footerMainFontClass">服务热线</span>
<span :class="footerMainFontClass">0571-8167-1366</span>
</div>
<div class="flex flex-col ">
<img src="@/assets/serviceQr.png" class="w-14 mx-auto mb-1" />
<span :class="footerSecondFontClass">客服二维码</span>
</div>
<div class="flex flex-col ">
<img src="@/assets/serviceQr.png" class="w-14 mx-auto mb-1" />
<span :class="footerSecondFontClass">客服二维码</span>
</div>
</div>
<div class="h-px bg-footerBorder"></div>
<div
class="text-xs text-footerSecondFont text-center py-3"
>Copyright © 2021 杭州库链科技有限公司 浙ICP备17050749号-5</div>
<div class="text-xs text-footerSecondFont text-center py-3">Copyright © 2021 杭州库链科技有限公司 浙ICP备17050749号-5</div>
</div>
</div>
</template>
......@@ -92,11 +94,11 @@
<script setup lang="ts">
import { computed } from '@vue/reactivity'
const footerMainFontClass = computed(()=>{
return 'text-base text-white pb-4 cursor-default'
const footerMainFontClass = computed(() => {
return 'text-sm md:text-base text-white pb-4 cursor-default'
})
const footerSecondFontClass = computed(()=>{
const footerSecondFontClass = computed(() => {
return 'text-sm text-footerSecondFont pb-3 cursor-pointer'
})
......
src/Layouts/MainPage/Header.vue
View file @ d3338842
<template>
<div>
<div class="md:hidden fixed w-full flex flex-row justify-between py-4 px-2 align-middle">
<div class="md:hidden fixed w-full flex flex-row justify-between py-4 align-middle px-6"
:class="[opacityBg ? '' : ' bg-white bg-opacity-90 border-b border-gray-200', isFixed ? 'fixed' : '']">
<svg-icon iconClass="logo1" width="97" height="29" class=" text-mainBlue" />
<div class=" flex">
<button type="button">登录/注册</button>
<button type="button" class=" mr-5">登录/注册</button>
<svg-icon :iconClass="switchIcon" class="w-6 h-6" width="20" height="18" @touchend="handleIconSwitch" />
</div>
</div>
......
src/Layouts/MainPage/SideBar.vue
View file @ d3338842
<template>
<div
class="fixed right-0 top-40 bg-white rounded-l-lg px-3 shadow-sideBarShadow cursor-default z-50"
class="hidden md:block fixed right-0 top-40 bg-white rounded-l-lg px-3 shadow-sideBarShadow cursor-default z-50"
>
<div class=" divide-y divide-gray-200">
<div
......
src/Layouts/MainPage/index.vue
View file @ d3338842
<template>
<div>
<div class="">
<div class="relative z-50">
<MainHeader :opacity-bg="opacityBg">
<template #logo>
......
src/components/mainButton.vue
View file @ d3338842
<template>
<button
:class="[props.size === 'medium' ? 'text-xs py-1 px-4 rounded-2xl' : 'text-sm px-7 py-3 rounded-3xl',
style]"
@click="handleClick"
:="$attrs"
>{{ props.text }}
</button>
<button :class="[props.size === 'medium' ?
' text-base py-4 px-9 rounded-middle md:text-xs md:py-1 md:px-4 md:rounded-2xl' :
' text-lg px-24 py-3 rounded-large md:text-sm md:px-7 md:py-3 md:rounded-3xl',
style]" @click="handleClick" :="$attrs">
<p :class=" props.size === 'medium'||'px-2 md:px-0'">
{{ props.text }}
</p>
</button>
</template>
<script setup lang="ts">
......@@ -13,7 +14,7 @@ import { withDefaults, defineProps, defineEmits, computed } from 'vue';
const props = withDefaults(defineProps<{
text: string,
theme?: 'main' | 'second' | 'dark'|'white',
theme?: 'main' | 'second' | 'dark' | 'white',
size?: 'large' | 'medium'
}>(), {
theme: 'main',
......
src/components/svgIcon.vue
View file @ d3338842
<template>
<svg aria-hidden="true" @click="$emit('clickSvg')" :width="props.width" :height="props.height" fill="currentColor" >
<svg aria-hidden="true" @click="$emit('clickSvg')" :width="props.width" :height="props.height" >
<use :xlink:href="symbolId" />
</svg>
</template>
......
src/components/systemCard.vue
View file @ d3338842
<template>
<div :class="props.data.id % 2 == 0 ? ' bg-systemCardBg' : ' bg-white'" class="pt-10 pb-24">
<div
class="wrappper flex w-bodySet px-48 mx-auto items-center justify-between"
:class="style"
ref="card"
data-aos="fade-up"
data-aos-duration="600"
data-aos-easing="ease-in-out-cubic"
>
<div :class="props.data.id % 2 == 0 ? 'bg-white md:bg-systemCardBg' : 'bg-white md:bg-white'"
class=" pt-0 md:pt-8 md:pb-24">
<div class="wrappper md:flex md:w-bodySet md:px-48 mx-auto items-center justify-between" :class="style" ref="card"
data-aos="fade-up" data-aos-duration="600" data-aos-easing="ease-in-out-cubic">
<div>
<svg-icon v-if="props.data.url" :iconClass="props.data.url" width="576px" height="464px" />
<svg-icon v-if="props.data.url" :iconClass="props.data.url" width="576px" height="464px"
class=" hidden md:block" />
<svg-icon v-if="props.data.url" :iconClass="props.data.url" width="330px" height="255px"
class=" block mx-auto md:hidden" />
<img v-else :src="getImgUrl(props.data.png!)" />
</div>
<div
class="w-96 px-12 py-16 flex flex-col self-center mt-10"
>
<svg-icon :iconClass="props.data.icon" class="w-12 h-12 mb-1" />
<div class="pt-2 text-headerMain text-2xl font-semibold">{{ props.data.title }}</div>
<div class="md:w-96 px-12 py-10 md:py-16 flex flex-col self-center md:mt-10">
<svg-icon :iconClass="props.data.icon" class="hidden md:block w-12 h-12 mb-1" />
<div class="pt-2 text-headerMain text-2xl font-semibold text-center md:text-left">{{ props.data.title }}</div>
<div class="text-sm text-contentMain pt-4 text-justify">{{ props.data.detail }}</div>
</div>
</div>
</div>
</div>
</template>
......@@ -51,7 +46,7 @@ const getImgUrl = computed(() => {
})
const style = computed(() => {
return props.data.id % 2 == 0 ? ' flex-row-reverse' : 'flex-row'
return props.data.id % 2 == 0 ? ' md:flex-row-reverse' : 'md:flex-row'
})
</script>
......@@ -72,11 +67,13 @@ const style = computed(() => {
transform: translateY(100%) translateZ(0);
animation: 0s cubic-bezier(0.43, 0.195, 0.02, 1) 0s forwards line_leave;
}
@keyframes line_enter {
0% {
opacity: 0;
transform: translateY(100%) rotate(4deg) translateZ(0);
}
100% {
opacity: 1;
transform: translateY(-15%) translateZ(0);
......
src/components/tabCard.vue
View file @ d3338842
<template>
<div class="flex flex-row py-12 justify-between items-center pr-4">
<svg-icon :iconClass="props.data.icon" width="348" height="360"/>
<!-- <img :src="getImgUrl(props.data.icon)"/> -->
<div class="flex flex-col justify-center w-3/5 -mt-8 -mr-2">
<div class="text-xl text-gray-800 font-medium mb-4">{{ props.data.title }}</div>
<div class="text-sm text-contentMain mb-7">{{ props.data.detail }}</div>
<div class="md:flex md:flex-row pt-11 pb-8 md:py-12 md:justify-between md:items-center md:pr-4">
<svg-icon :iconClass="props.data.icon" width="348" height="360" class="hidden md:block"/>
<svg-icon :iconClass="props.data.icon" width="268" height="277" class=" block mx-auto md:hidden"/>
<div class="flex flex-col justify-center md:w-3/5 -mt-8 md:-mr-2">
<div class="hidden md:block text-xl text-gray-800 font-medium mb-4">{{ props.data.title }}</div>
<div class="text-sm text-contentMain mx-10 mb-7 pt-14 md:pt-0 md:px-0">{{ props.data.detail }}</div>
<slot name="dataProve" />
<div class="flex flex-row">
<div class=" hidden md:flex flex-row justify-center md:justify-start w-96">
<MainButton
v-if="props.data.website"
text="立即体验"
......@@ -22,6 +22,22 @@
theme="dark"
/>
</div>
<div class=" flex md:hidden flex-row justify-between px-10">
<MainButton
v-if="props.data.website"
text="立即体验"
@click="handleClick(BTN_EVENT.BTN2, props.data.website!)"
:size="props.data.route? 'medium':'large'"
/>
<!-- <div v-if="props.data.website" class="pr-5"></div> -->
<MainButton
v-if="props.data.route"
text="查看更多"
@click="handleClick(BTN_EVENT.BTN1, props.data.route!)"
:size="props.data.website? 'medium':'large'"
theme="dark"
/>
</div>
</div>
</div>
</template>
......
src/icons/homeBannerMobile.svg 0 → 100644
View file @ d3338842
This source diff could not be displayed because it is too large. You can view the blob instead.
src/icons/shuju1.svg 0 → 100644
View file @ d3338842
This diff is collapsed.
src/views/Home.vue
View file @ d3338842
<template>
<div class="bg-white md:min-w-bodySet mx-auto home overflow-hidden">
<div class="banner bg-gradient-to-r from-white to-bannerBgEndColor pb-8">
<div class="w-bodySet mx-auto pt-14">
<div class="w-11/12 mx-auto relative">
<div class="bg-white md:min-w-bodySet mx-auto home">
<div class="banner bg-gradient-to-b md:bg-gradient-to-r from-bannerBgStartColorMobile md:from-white to-bannerBgEndColor pb-8">
<div class="md:w-bodySet mx-auto pt-14">
<div class="md:w-11/12 mx-auto md:relative">
<svg-icon iconClass="homeBannerMobile" width="326px" height="293px" class=" block mt-5 md:hidden mx-auto" />
<div class="absolute top-0 z-0">
<svg-icon iconClass="homeBanner" width="1371px" height="568px" />
<svg-icon iconClass="homeBanner" width="1371px" height="568px" class="hidden md:block" />
</div>
<div class="w-1/2 pl-36 py-36 relative z-10">
<div class="text-4xl font-semibold text-headerMain">上链查公共服务平台</div>
<div
class="text-base text-contentMain mt-5 leading-7"
>基于区块链技术的存证溯源服务系统，提供数据/文件上链、自定义溯源流程、任务协同、资产数字化的高级版存证溯源服务。</div>
<div class="flex flex-row mt-6">
<div class="md:w-1/2 md:pl-36 md:py-36 relative z-10 px-6">
<div class="text-3xl md:text-4xl font-semibold text-headerMain md:text-left text-center">上链查公共服务平台</div>
<div class="text-xs md:text-base md:text-left text-center text-contentMain mt-5 leading-7">
基于区块链技术的存证溯源服务系统，提供数据/文件上链、自定义溯源流程、任务协同、资产数字化的高级版存证溯源服务。
</div>
<div class="flex flex-row justify-center md:justify-start mt-6 mx-auto">
<!-- <MainButton size="large" text="立即体验" /> -->
<MainButton
size="large"
text="联系我们"
theme="second"
@click="dialogFormVisible = true"
/>
<MainButton size="large" text="联系我们" theme="second" @click="dialogFormVisible = true" />
</div>
</div>
</div>
</div>
</div>
<div ref="wrapper">
<div class="bar bg-mainBlue text-white text-sm py-3 relative z-20">
<div class="w-bodySet mx-auto">
<div class="hidden md:block bar bg-mainBlue text-white text-sm py-3 relative z-20">
<div class="md:w-bodySet mx-auto">
<div class="flex flex-row justify-center px-12">
<div class="flex flex-row items-center border-r border-borderGray w-1/3 justify-center">
<svg-icon iconClass="document" class="w-9 h-9 pr-3" />
......@@ -52,41 +48,24 @@
</div>
</div>
</div>
<div class="tab w-bodySet mx-auto px-60">
<div class="text-center mt-14" :class="mainHeaderObj">多样化溯源类型，全面满足企业需求</div>
<div
class="mx-auto flex flex-row mt-12 justify-center text-center rounded-lg text-systemCardText px-7"
>
<div
:class="[homeTabClass, currentNav == NAV_EVENT.NAV1 ? 'border-r border-mainBlue text-mainBlue' : '']"
class="rounded-l-lg border-l"
@mouseenter="handleTabSwitch(NAV_EVENT.NAV1)"
>数据存证</div>
<div
:class="[homeTabClass, currentNav == NAV_EVENT.NAV2 ? ' border-r border-mainBlue text-mainBlue' : '']"
class="border-l"
@mouseenter="handleTabSwitch(NAV_EVENT.NAV2)"
>协同溯源</div>
<div
:class="[homeTabClass, currentNav == NAV_EVENT.NAV3 ? 'border-r border-mainBlue text-mainBlue' : '']"
class="border-l"
@mouseenter="handleTabSwitch(NAV_EVENT.NAV3)"
>接口存证</div>
<div
:class="[homeTabClass, currentNav == NAV_EVENT.NAV4 ? 'border-r border-mainBlue text-mainBlue' : '']"
class="border-l"
@mouseenter="handleTabSwitch(NAV_EVENT.NAV4)"
>区块链商城</div>
<div
:class="[homeTabClass, currentNav == NAV_EVENT.NAV5 ? ' border-mainBlue text-mainBlue' : '']"
class="rounded-r-lg border-r border-l"
@mouseenter="handleTabSwitch(NAV_EVENT.NAV5)"
>区块链验真</div>
<div class="tab md:w-bodySet mx-auto md:px-60">
<div class="mt-9 md:mt-14 px-10 md:px-0" :class="mainHeaderObj">多样化溯源类型，全面满足企业需求</div>
<div class="mx-auto grid grid-cols-3 md:flex mt-5 md:mt-12 md:flex-nowrap md:justify-center md:text-center md:rounded-lg text-systemCardText px-5">
<div :class="[homeTabClass, currentNav == NAV_EVENT.NAV1 ? ' border-b md:border-r border-mainBlue text-mainBlue' : '']"
class="md:rounded-l-lg md:border-l" @mouseenter="handleTabSwitch(NAV_EVENT.NAV1)">数据存证</div>
<div :class="[homeTabClass, currentNav == NAV_EVENT.NAV2 ? 'border-b md:border-r border-mainBlue text-mainBlue' : '']"
class="md:border-l" @mouseenter="handleTabSwitch(NAV_EVENT.NAV2)">协同溯源</div>
<div :class="[homeTabClass, currentNav == NAV_EVENT.NAV3 ? 'border-b md:border-r border-mainBlue text-mainBlue' : '']"
class="md:border-l" @mouseenter="handleTabSwitch(NAV_EVENT.NAV3)">接口存证</div>
<div :class="[homeTabClass, currentNav == NAV_EVENT.NAV4 ? 'border-b md:border-r border-mainBlue text-mainBlue' : '']"
class="md:border-l" @mouseenter="handleTabSwitch(NAV_EVENT.NAV4)">区块链商城</div>
<div :class="[homeTabClass, currentNav == NAV_EVENT.NAV5 ? 'border-b border-mainBlue text-mainBlue' : '']"
class="md:rounded-r-lg md:border-r md:border-l" @mouseenter="handleTabSwitch(NAV_EVENT.NAV5)">区块链验真</div>
</div>
<div class="pannel mx-auto cursor-default">
<TabCard :data="nav[currentNav]">
<template #dataProve v-if="currentNav == 0">
<div class="flex flex-row w-1/2 mb-6">
<div class="flex flex-row px-10 md:px-0 md:w-1/2 mb-6">
<div class="w-2/3">
<div class="flex flex-row items-center">
<div class="w-2 h-2 rounded-full bg-indigo-400 mr-2"></div>
......@@ -112,8 +91,8 @@
</TabCard>
</div>
</div>
<div class="bg-gray-100 pt-10 pb-14">
<div class="w-bodySet mx-auto px-60">
<div class="hidden md:block bg-gray-100 pt-10 pb-14">
<div class="md:md:w-bodySet mx-auto px-60">
<div class="pb-4" :class="mainHeaderObj">专业专注 安全高效 全方位追求极致</div>
<div class="flex flex-wrap justify-between items-center">
<div v-for="item in characteristics" :key="item.id" class="w-1/3 p-4">
......@@ -122,26 +101,19 @@
</div>
</div>
</div>
<div class="system py-20 cursor-default">
<div :class="mainHeaderObj" class="font-medium">系统灵活易用，满足个性化管理需求</div>
<div class="system pt-16 pb-9 md:py-20 cursor-default">
<div class="font-medium text-3xl md:text-3xl md:font-semibold text-headerMain text-center px-7">系统灵活易用，满足个性化管理需求</div>
<div class="text-base text-gray-600 text-center pt-5 py-16">打造行业领先价值</div>
<div
v-for="(item,index) in systems"
:key="item.id"
class="w-full overflow-hidden"
:ref="setItemRef"
>
<div v-for="(item, index) in systems" :key="item.id" class="w-full overflow-hidden" :ref="setItemRef">
<systemCard :data="item" :isActive="isActive(index)" />
</div>
</div>
<div class="solution w-bodySet mx-auto text-center">
<div class="bg-mainBlue mx-52 py-8 mb-16">
<div class="solution md:w-bodySet mx-auto text-center">
<div class="bg-mainBlue md:mx-52 py-8 md:mb-16">
<div class="text-2xl font-medium text-white cursor-default">立即定制专业级解决方案</div>
<button
class="bg-white text-mainBlue mt-4 text-sm py-2 px-4 rounded-lg"
@click="dialogFormVisible = true"
>免费咨询</button>
<button class="bg-white text-mainBlue mt-4 md:text-sm py-2 px-7 md:px-4 rounded md:rounded-lg"
@click="dialogFormVisible = true">免费咨询</button>
</div>
</div>
</div>
......@@ -185,12 +157,12 @@ import { createAppeal } from "@/service/AppealService"
import _ from 'lodash'
const mainHeaderObj = computed(()=>{
return 'text-3xl font-semibold text-headerMain text-center'
const mainHeaderObj = computed(() => {
return 'text-lg md:text-3xl font-semibold text-headerMain text-center'
})
const homeTabClass = computed(()=>{
return 'text-sm py-3 w-1/5 border-t border-b cursor-pointer font-medium'
const homeTabClass = computed(() => {
return 'w-fit px-2 text-base md:text-sm py-3 md:w-1/5 md:border-t md:border-b cursor-pointer font-medium'
})
/* handle tab switch */
......@@ -405,9 +377,11 @@ window.addEventListener("scroll", handleScroll);
width: 80%;
margin: auto;
}
.el-form /deep/ .el-form-item {
display: block;
}
.el-form /deep/.el-form-item__label {
color: #1f292d;
font-size: 0.875rem;
......
tailwind.config.js
View file @ d3338842
......@@ -19,6 +19,7 @@ module.exports = {
footerBorder: '#313A7E',
bannerBgStartColor: '#F2F6FF',
bannerBgEndColor: '#E1E9FE',
bannerBgStartColorMobile:'#F6F8FF',
headerMain: '#273C6E',
contentMain: '#76869E',
secondaryBlue: '#F3F5FC',
......@@ -31,12 +32,15 @@ module.exports = {
px: '1px',
'480px':'30rem',
'7/10-screen':'70vh',
},
boxShadow:{
'sideBarShadow':'0 2px 20px 0 rgba(186,207,255,0.5)',
'homeCardShadow':'0 2px 30px 0 rgba(186,207,255,0.5)',
'navCardShadow':'0 2px 10px 0 #CFCFCF',
},
boxShadow:{
borderRadius:{
'large':'27.5px',
'middle':'26px'
}
},
},
......
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