Skip to content

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

feat:mobile pages

parent f1226322
Hide whitespace changes
Inline Side-by-side
Showing with 275 additions and 204 deletions
src/App.vue
View file @ f82d264b
......@@ -2,14 +2,32 @@
<component :is="Layout">
<router-view />
</component>
<el-drawer v-model="store.state.openDrawer" :with-header="false" direction="rtl" size="100vw" :z-index="49" lock-scroll>
<el-menu>
<div v-for="i in header">
<el-menu-item v-if="!i.children" :index="i.id" @touchend="handleTouchend(i.nav)">{{ i.title }}
</el-menu-item>
<el-sub-menu v-else :index="i.id">
<template #title>
<span class=" text-lg">{{ i.title }}</span>
</template>
<el-menu-item v-for="sub in i.children" :index="sub.id" @touchend="handleTouchend(NAV_EVENT.NAV7, sub.route)">
{{ sub.product }}</el-menu-item>
</el-sub-menu>
</div>
</el-menu>
</el-drawer>
</template>
<script setup lang="ts">
import { computed } from 'vue';
import { computed,ref } from 'vue';
import layout1 from './Layouts/MainPage/index.vue';
import layout2 from './Layouts/HelpCenter/index.vue'
import layout3 from './Layouts/Solutions/index.vue'
import { useRoute } from 'vue-router';
import { useRoute, useRouter } from 'vue-router';
import { header } from './context/header';
import { NAV_EVENT } from './context/header';
import { store } from './store';
const route = useRoute()
const Layout = computed(() => {
......@@ -28,5 +46,61 @@ const Layout = computed(() => {
}
return currentLayout
})
/* drawer control */
let currentNav = ref(NAV_EVENT.NAV0 as (NAV_EVENT | undefined))
const router = useRouter()
const handleTouchend = (item: NAV_EVENT, path?: string) => {
currentNav.value = item
if (currentNav.value == NAV_EVENT.NAV0 || currentNav.value == NAV_EVENT.NAV2 || currentNav.value == NAV_EVENT.NAV3) {
router.push({ name: item })
}
else if (item == NAV_EVENT.NAV4) {
window.open('https://slc.8n.cn/login')
}
else if (item == NAV_EVENT.NAV6) {
window.open('https://slc.8n.cn/yanzhen')
}
else if (item == NAV_EVENT.NAV7) {
router.push(path as string)
}
store.setOpenDrawern(false)
}
// document.ontouchstart = (e) => {
// e.preventDefault()
// }
document.addEventListener('touchstart',()=>{},{passive:false})
</script>
<style scoped>
:deep(.el-menu-item) {
font-size: 1.125rem;
width:fit-content;
}
:deep(.el-menu-item.is-active) {
color: #303133;
}
</style>
<style>
.el-menu {
border-right: none !important;
}
.el-drawer__body{
padding-top: 3.8rem !important;
padding-left: 0;
padding-right: 0;
}
.el-drawer{
overflow-y: scroll !important;
}
</style>
src/Layouts/HelpCenter/index.vue
View file @ f82d264b
<template>
<div class="h-screen flex flex-col">
<div class="md:h-screen flex flex-col">
<div class=" relative z-50 overflow-hidden">
<Header :fullWidth="true">
<Header :fullWidth="true" @toggle-icon="handleToggleIcon">
<template #logo>
<svg-icon iconClass="logo2" width="84" height="24" class=" -mt-2"/>
<svg-icon iconClass="logo2" width="84" height="24" class=" -mt-2" />
</template>
</Header>
</div>
<div class=" mt-10 border-b-2 border-gray-100 pt-2.5"></div>
<div class="h-full min-w-bodySet">
<div class="hidden md:block mt-10 border-b-2 border-gray-100 pt-2.5"></div>
<div class="md:h-full md:min-w-bodySet">
<slot />
</div>
</div>
......@@ -16,5 +16,10 @@
<script setup lang="ts">
import Header from '../MainPage/Header.vue';
import Footer from '../MainPage/Footer.vue';
import { store } from '@/store';
const handleToggleIcon = () => {
if (store.state.showTree && store.state.openDrawer) store.setOpenDrawern(false)
else if (store.state.showTree) store.setOpenDrawern(true)
else if (!store.state.showTree) store.setTreeOpen(true)
}
</script>
\ No newline at end of file
src/Layouts/MainPage/Footer.vue
View file @ f82d264b
......@@ -44,8 +44,9 @@
</div>
</div>
<div class=" bg-footerBg w-full pt-12">
<div class="md:w-bodySet mx-auto pb-5 grid grid-cols-3 justify-items-center px-8 md:px-72">
<div class=" bg-footerBg w-full pt-7 md:pt-12">
<div
class="md:w-bodySet mx-auto pb-5 flex justify-between items-center md:grid md:grid-cols-3 md:justify-items-center px-8 md:px-72">
<!-- <div class="w-8/12 flex flex-row mx-auto justify-between">
<div class="flex flex-col">
<span :class="footerMainFontClass">支持</span>
......@@ -71,22 +72,35 @@
<img src="@/assets/serviceQr.png" class="w-14" />
</div>
</div>-->
<div class="flex flex-col">
<div class=" flex-col hidden md:flex">
<span :class="footerMainFontClass">联系我们</span>
<span :class="footerSecondFontClass">企业邮箱: support@33.cn</span>
<span :class="footerSecondFontClass">总部地址：杭州市西湖区东部软件园6幢702</span>
</div>
<div class="flex flex-col ">
<span :class="footerMainFontClass" class=" text-center md:text-left">服务热线</span>
<span :class="footerMainFontClass" class=" text-center md:text-left">0571-8167-1366</span>
<div class=" flex-col hidden md:flex">
<span :class="footerMainFontClass">服务热线</span>
<span :class="footerMainFontClass">0571-8167-1366</span>
</div>
<div class="flex flex-col w-fit">
<img src="@/assets/serviceQr.png" class="w-14 mx-auto mb-1" />
<span :class="footerSecondFontClass" class=" text-center">客服二维码</span>
<div class=" md:hidden">
<div class="flex-col flex">
<span :class="footerSecondFontClass">服务热线</span>
<span class=" text-2xl font-semibold text-white">0571-8167-1366</span>
</div>
<div class="flex-col flex pt-5 w-52">
<span :class="footerMainFontClass">联系我们</span>
<span :class="footerSecondFontClass">企业邮箱: support@33.cn</span>
<span :class="footerSecondFontClass">总部地址：杭州市西湖区东部软件园6幢702</span>
</div>
</div>
<div class="flex flex-col">
<img src="@/assets/serviceQr.png" class=" w-20 md:w-14 mx-auto mb-1" />
<span :class="footerSecondFontClass" class="text-center">客服二维码</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 hidden md:block">Copyright © 2021 杭州库链科技有限公司 浙ICP备17050749号-5</div>
<div class="text-xs text-footerSecondFont text-center py-3 md:hidden">Copyright © 2021 杭州库链科技有限公司<br> 浙ICP备17050749号-5</div>
</div>
</div>
</template>
......
src/Layouts/MainPage/Header.vue
View file @ f82d264b
......@@ -9,21 +9,6 @@
<svg-icon :iconClass="switchIcon" width="15" height="26" @touchend="handleIconSwitch" />
</div>
</div>
<el-drawer v-model="isOpen" :with-header="false" direction="rtl" size="100vw" :z-index="1" lock-scroll>
<el-menu class="el-menu-vertical-demo">
<div v-for="i in header">
<el-menu-item v-if="!i.children" :index="i.id" @touchend="handleTouchend(i.nav)">{{ i.title }}
</el-menu-item>
<el-sub-menu v-else :index="i.id">
<template #title>
<span class=" text-lg">{{ i.title }}</span>
</template>
<el-menu-item v-for="sub in i.children" :index="sub.id"
@touchend="handleTouchend(NAV_EVENT.NAV7, sub.route)">{{ sub.product }}</el-menu-item>
</el-sub-menu>
</div>
</el-menu>
</el-drawer>
</div>
<div class="hidden md:block w-full"
......@@ -107,6 +92,7 @@ import NavCard from './navCard.vue';
import { header, NAV_EVENT } from '@/context/header';
import { useRoute, useRouter } from 'vue-router';
import { ElMenuItem, ElSubMenu } from 'element-plus';
import { store } from '@/store';
const props = withDefaults(defineProps<
{
......@@ -126,7 +112,6 @@ const props = withDefaults(defineProps<
watch(() => props.isHovering, (newV) => {
console.log(newV);
if (!newV) {
hovering.value = false
}
......@@ -149,18 +134,16 @@ const activeRoute = computed(() => {
const list = computed(() => {
let currentItem = undefined
if (currentNav.value == NAV_EVENT.NAV1 || currentNav.value == NAV_EVENT.NAV2 || currentNav.value == NAV_EVENT.NAV5) {
currentItem = header.filter((item) => {
const current = header.find((item) => {
if (item.nav == currentNav.value)
return item.children
}
)
currentItem = current?.children?.filter(i => {
return (i.hideInPc != true)
})
}
// if(currentItem){
// return currentItem[0].children?.filter(i=>{
// return !i.hideInPc
// })
// }
return currentItem ? currentItem[0].children : undefined
return currentItem ? currentItem : undefined
})
const router = useRouter()
......@@ -197,59 +180,19 @@ const handleHover = (e: Event, type?: NAV_EVENT) => {
/* drawer control */
const isOpen = ref(false)
const isOpen = computed(() => {
return !store.state.showTree && !store.state.openDrawer ? true : store.state.openDrawer
})
const emits = defineEmits(['toggleIcon'])
const handleIconSwitch = () => {
isOpen.value = !isOpen.value
emits('toggleIcon')
}
const switchIcon = computed(() => {
return isOpen.value ? 'closeNav' : 'openNav'
})
const handleTouchend = (item: NAV_EVENT, path?: string) => {
currentNav.value = item
if (currentNav.value == NAV_EVENT.NAV0 || currentNav.value == NAV_EVENT.NAV2 || currentNav.value == NAV_EVENT.NAV3) {
router.push({ name: item })
}
else if (item == NAV_EVENT.NAV4) {
window.open('https://slc.8n.cn/login')
}
else if (item == NAV_EVENT.NAV6) {
window.open('https://slc.8n.cn/yanzhen')
}
else if (item == NAV_EVENT.NAV7) {
router.push(path as string)
}
isOpen.value = false
}
/* fix in safari, touchend event didn't triggle while scrolling */
document.addEventListener('touchstart',()=>{},{passive:false})
</script>
<style scoped>
:deep(.el-drawer__body) {
padding-top: 3.8rem;
padding-left: 0;
padding-right: 0;
}
:deep(.el-overlay) {
background-color: transparent;
}
:deep(.el-menu-item) {
font-size: 1.125rem;
}
:deep(.el-menu-item.is-active) {
color: #303133;
}
</style>
<style>
/* body{
height: 100%;
overflow: hidden;
} */
</style>
src/Layouts/MainPage/index.vue
View file @ f82d264b
<template>
<div class="">
<div class="relative z-50">
<MainHeader :opacity-bg="opacityBg">
<MainHeader :opacity-bg="opacityBg" @toggle-icon="handleToggleIcon">
<template #logo>
<svg-icon iconClass="logo1" width="80" height="24" class=" -mt-2 text-mainBlue"/>
</template>
......@@ -18,6 +18,7 @@ import MainHeader from './Header.vue';
import MainFooter from './Footer.vue';
import SideBar from './SideBar.vue';
import { computed, ref } from "vue"
import { store } from '@/store';
let offSetTop = ref(0)
const handleScroll = (e: Event): void => {
......@@ -30,4 +31,8 @@ window.addEventListener("scroll", handleScroll);
const opacityBg = computed(()=>{
return offSetTop.value == 0? true:false
})
const handleToggleIcon = ()=>{
store.setOpenDrawern(!store.state.openDrawer)
}
</script>
\ No newline at end of file
src/Layouts/Solutions/HoverNav.vue
View file @ f82d264b
......@@ -8,7 +8,7 @@
:class="currentNav == nav.id ? ' border-blue-400' : ''"
@click="handleNavClick($event, nav.id)"
>
<svg-icon :iconClass="nav.icon" class="w-6 h-6 text-left mr-3" />
<svg-icon :iconClass="nav.icon" class="w-6 h-6 text-left mr-3 text-blue-500" />
<div class="text-gray-800 text-sm font-medium">{{ nav.title }}</div>
</div>
</div>
......
src/Layouts/Solutions/index.vue
View file @ f82d264b
<template>
<div class="hidden md:block">
<MainHeader theme="white" :opacity-bg="true" :is-fixed="show" :is-hovering="hovering" >
<template #logo>
<svg-icon iconClass="logo3" width="84" height="24" class=" text-white"/>
</template>
</MainHeader>
<div>
<div class="hidden md:block">
<MainHeader theme="white" :opacity-bg="true" :is-fixed="show" :is-hovering="hovering" >
<template #logo>
<svg-icon iconClass="logo3" width="84" height="24" class=" text-white" />
</template>
</MainHeader>
</div>
<div class="md:hidden ">
<MainHeader @toggle-icon="handleToggleIcon">
<template #logo>
<svg-icon iconClass="logo1" width="80" height="24" class=" -mt-2" />
</template>
</MainHeader>
</div>
<div class="banner bg-blue-600">
<div class="w-bodySet mx-auto pt-16 flex pl-60 pr-44 justify-between items-center">
<div class="text-2xl font-semibold text-white leading-10">
<div class="banner bg-blue-600 pb-3 md:pb-0">
<div class=" md:w-bodySet mx-auto pt-16 md:flex md:pl-60 md:pr-44 justify-between items-center">
<div class=" w-fit mx-auto pt-10 md:pt-0 md:w-auto text-lg md:text-2xl font-semibold text-white leading-10">
构建“区块链+”全领域防伪溯源平台
<br>
打造区块链前沿落地应用。
</div>
<svg-icon iconClass="solutionBanner" width="478" height="233"/>
<svg-icon iconClass="solutionBanner" width="478" height="233" class="hidden md:block"/>
<svg-icon iconClass="solutionBanner" width="340px" height="166px" class="mx-auto md:hidden" />
</div>
</div>
<div ref="nav" :class="!show ? ' fixed top-0' : ''" class="w-full">
<div ref="nav" :class="!show ? ' fixed top-0' : ''" class="w-full hidden md:block">
<HoverNav />
</div>
<slot>
......@@ -24,24 +34,14 @@
</slot>
<MainFooter />
</div>
<div class="md:hidden">
<div class="relative z-50">
<MainHeader>
<template #logo>
<svg-icon iconClass="logo1" width="80" height="24" class=" -mt-2 text-mainBlue"/>
</template>
</MainHeader>
</div>
</div>
</template>
<script setup lang="ts">
import MainHeader from '../MainPage/Header.vue';
import MainFooter from '../MainPage/Footer.vue';
import HoverNav from './HoverNav.vue';
import { computed, ref } from 'vue';
import { computed, onUnmounted, ref } from 'vue';
import {store} from '@/store'
/* 控制hover nav样式 */
let offSetTop = ref(0)
const nav = ref()
......@@ -62,5 +62,11 @@ const handleScroll = (e: Event): void => {
}
window.addEventListener("scroll", handleScroll);
const handleToggleIcon = ()=>{
store.setOpenDrawern(!store.state.openDrawer)
}
onUnmounted(()=>{
window.removeEventListener("scroll",handleScroll)
})
</script>
src/components/charCard.vue
View file @ f82d264b
<template>
<div class="bg-white cursor-default shadow-sm text-center h-56 p-8 hover:shadow-homeCardShadow transition-shadow">
<svg-icon :iconClass="props.data.icon" class="w-14 h-14 mx-auto" />
<svg-icon :iconClass="props.data.icon" class="w-14 h-14 mx-auto text-transparent" />
<div class="pt-4 text-xl font-semibold text-headerMain text-center">{{ props.data.title }}</div>
<div class="text-sm text-contentMain pt-4 text-center leading-6">{{ props.data.detail }}</div>
</div>
......
src/components/solutions.vue
View file @ f82d264b
<template>
<div class="bg-secondaryBlue">
<div class="w-bodySet mx-auto px-28">
<div class="disadvantages py-16">
<div class="md:w-bodySet mx-auto md:px-28">
<div class="disadvantages pt-5 pb-8 md:py-16 px-7 md:px-0 ">
<div :class="mainHeaderObj">场景痛点</div>
<div class="flex flex-row justify-between pt-12">
<div v-for="dis in props.disadvantages" :key="dis.id" class="px-12" :class="getWidth(disadvantages.length)">
<svg-icon :iconClass="dis.icon" class="h-12 w-12 mx-auto" />
<div class="text-lg font-semibold text-headerMain pt-4 py-3 text-center">{{ dis.title }}</div>
<div class="grid grid-cols-2 md:flex md:justify-between md:gap-x-0 gap-x-5 md:gap-y-0 gap-y-8 pt-12" >
<div v-for="dis in props.disadvantages" :key="dis.id" class="disadvantagesWrapper md:px-12" :class="getWidth(disadvantages.length)">
<svg-icon :iconClass="dis.icon" class="h-12 w-12 mx-auto text-svgBlue" />
<div class=" md:text-lg font-semibold text-headerMain pt-4 py-3 text-center">{{ dis.title }}</div>
<div class="text-sm text-contentMain text-justify leading-6">{{ dis.detail }}</div>
</div>
</div>
</div>
<div class="framework">
<div :class="mainHeaderObj" class=" pb-8">方案架构</div>
<svg-icon :iconClass="props.url" width="1124" height="589" class=" mx-auto" />
<svg-icon :iconClass="props.url" width="1124" height="589" class=" mx-auto hidden md:block text-white" />
<svg-icon :iconClass="props.url" width="354.02px" height="194px" class=" mx-auto md:hidden text-white" />
</div>
<div class="advantages bg-secondaryBlue pb-20 pt-11">
<div class="advantages bg-secondaryBlue pb-9 md:pb-20 pt-11">
<div :class="mainHeaderObj">方案价值</div>
<div class="grid grid-cols-2 grid-rows-2 gap-y-6 gap-x-5 pt-10">
<div class=" px-6 md:px-0 grid grid-cols-1 md:grid-cols-2 md:grid-rows-2 gap-y-4 md:gap-y-6 md:gap-x-5 pt-5 md:pt-10">
<div class v-for="i in plans" :key="i.id">
<div class="bg-white border-l-4 border-blue-600 px-12 h-44 hover:shadow-homeCardShadow">
<div class="pt-12 text-headerMain text-lg font-semibold">{{ i.title }}</div>
<div class="bg-white border-l-4 border-blue-600 pl-8 pr-4 md:px-12 md:h-44 pb-8 md:pb-0 hover:shadow-homeCardShadow">
<div class=" pt-6 md:pt-12 text-headerMain text-lg font-semibold">{{ i.title }}</div>
<div class="text-sm text-contentMain text-justify pt-2">{{ i.detail }}</div>
</div>
</div>
......@@ -52,12 +53,22 @@ const props = defineProps({
const getWidth = computed(() => {
return (w: number) => {
return 'w-1/' + w
return `w-1/${w}`
}
})
const mainHeaderObj = computed(()=>{
return 'text-3xl font-semibold text-headerMain text-center'
return 'text-2xl md:text-3xl font-semibold text-headerMain text-center'
})
</script>
\ No newline at end of file
</script>
<style scoped>
@media (max-width: 768px) {
.disadvantagesWrapper{
width: auto;
}
}
</style>
src/components/tabCard.vue
View file @ f82d264b
<template>
<div class="md:flex md:flex-row pt-11 md: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"/>
<svg-icon :iconClass="props.data.icon" width="348" height="360" class="hidden md:block text-svgBlue"/>
<svg-icon :iconClass="props.data.icon" width="268" height="277" class=" block mx-auto md:hidden text-svgBlue"/>
<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:mx-0">{{ props.data.detail }}</div>
......@@ -22,14 +22,13 @@
theme="dark"
/>
</div>
<div class=" flex md:hidden flex-row justify-between px-10">
<div class=" flex md:hidden flex-row gap-x-6 justify-between mx-auto w-fit">
<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="查看更多"
......
src/store/index.ts 0 → 100644
View file @ f82d264b
import { reactive } from "vue"
export const store = {
state: reactive({
openDrawer: false,
showTree:true
}),
setOpenDrawern(newValue:boolean) {
this.state.openDrawer = newValue
},
setTreeOpen(newValue:boolean) {
this.state.showTree = newValue
}
}
\ No newline at end of file
src/views/HelpCenter.vue
View file @ f82d264b
<template>
<div class="helpcenter">
<div class="h-full fixed pb-12 z-0 w-72">
<el-tree
node-key="id"
:load="loadNode"
lazy
view-class="wrapper"
:icon="ArrowDownBold"
:data="state.docTree"
:props="defaultProps"
highlight-current
@node-click="handleNodeClick"
ref="tree"
>
<div class="helpcenter relative">
<div class="h-screen md:fixed md:pb-12 z-0 md:w-72 w-full absolute" :class="treeClass">
<el-tree node-key="id" :load="loadNode" lazy view-class="wrapper" :icon="ArrowDownBold" :data="state.docTree"
:props="defaultProps" highlight-current @node-click="handleNodeClick" ref="tree">
<template #default="{ node }">
<div class="pl-10">
<el-tooltip
:content="node.label"
placement="top-start"
:open-delay="500"
v-if="node.label.length > 8"
>
<div
class="w-32"
:class="[node.isLeaf && node.level != 1 ? ' text-sm' : ' text-base font-medium',
node.isCurrent ? ' text-blue-500' : ' ',
node.label.length > 8 ? 'truncate' : ''
]"
>{{ node.label }}</div>
</el-tooltip>
<div
v-else
class=" w-32"
:class="[node.isLeaf && node.level != 1 ? ' text-sm' : ' text-base font-medium',
<el-tooltip :content="node.label" placement="top-start" :open-delay="500" v-if="node.label.length > 8">
<div class="w-32" :class="[node.isLeaf && node.level != 1 ? 'text-lg md:text-sm' : ' text-lg md:text-base font-medium',
node.isCurrent ? ' text-blue-500' : ' ',
node.label.length > 8 ? 'truncate' : ''
]"
>{{ node.label }}</div>
]">{{ node.label }}</div>
</el-tooltip>
<div v-else class=" w-32" :class="[node.isLeaf && node.level != 1 ? ' text-lg md:text-sm' : ' text-lg md:text-base font-medium',
node.isCurrent ? ' text-blue-500' : ' ',
node.label.length > 8 ? 'truncate' : ''
]">{{ node.label }}</div>
</div>
</template>
</el-tree>
</div>
<div class="px-24 pt-16 overflow-y-auto pl-96 overflow-x-hidden w-full pb-20">
<div :class="docsClass"
class=" h-screen md:h-auto px-6 md:px-24 pt-24 md:pt-16 overflow-y-auto md:pl-96 overflow-x-hidden w-full pb-16 md:pb-20">
<div class="text-2xl font-medium text-gray-800">{{ state.firstArticle.title }}</div>
<div class="pt-2 text-gray-500">{{ state.firstArticle.introduction }}</div>
<div class="pt-8 border-b border-gray-300"></div>
<div class="pt-2 text-gray-500 text-sm md:text-base text-justify">{{ state.firstArticle.introduction }}</div>
<div class=" pt-5 md:pt-8 border-b border-gray-300"></div>
<div class="pt-7 text-sm text-gray-600 leading-6" v-html="state.firstArticle.content"></div>
</div>
</div>
......@@ -58,6 +37,7 @@ import { queryDocTree, treeNode, queryDocList, info, queryDoc } from '@/service/
import { computed, onMounted, reactive, ref, watch, nextTick } from 'vue';
import { useRoute, useRouter } from "vue-router"
import { ArrowDownBold } from '@element-plus/icons-vue'
import { store } from '@/store';
let state = reactive({
docTree: [] as Array<treeNode>,
......@@ -66,7 +46,6 @@ let state = reactive({
firstArticle: {} as info
})
const defaultProps = {
children: 'children',
label: 'name',
......@@ -77,7 +56,6 @@ const defaultProps = {
const route = useRoute()
onMounted(() => {
queryDocTree().then(ret => {
if (ret.code == 200) {
/* 获取分类树 */
......@@ -211,6 +189,7 @@ const handleNodeClick = (data: any, node: any) => {
getParentNodes(node.parent)
const item = JSON.stringify(state.defaultOpeneds)
sessionStorage.setItem('parents', item)
store.setTreeOpen(false)
}
}
......@@ -218,45 +197,64 @@ const handleNodeClick = (data: any, node: any) => {
const getParentNodes = (node: any) => {
if (node.parent) {
state.defaultOpeneds.push(node.data.id)
getParentNodes(node.parent)
}
}
/* control display */
const treeClass = computed(() => {
return store.state.showTree ? ' md:visible ' : 'md:visible invisible'
})
const docsClass = computed(() => {
return !store.state.showTree ? ' md:visible ' : 'md:visible invisible'
})
</script>
<style scoped>
.el-tree {
:deep(.el-tree) {
background: #fafafa;
height: 100%;
overflow-y: auto;
}
.el-tree /deep/ .el-tree-node__content {
@media (max-width: 768px) {
:deep(.el-tree) {
padding-top: 3.8rem;
background-color: #FFFFFF;
color: #303133
}
:deep(.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content) {
background-color: #FFFFFF;
}
}
:deep(.el-tree-node__content) {
padding-top: 2rem;
padding-bottom: 1rem;
padding-right: 2rem;
flex-direction: row-reverse;
justify-content: space-between;
}
.el-tree /deep/ .el-tree-node__content:hover {
:deep(.el-tree-node__content:hover) {
background-color: #f2f3f5;
}
.helpcenter
/deep/
.el-tree--highlight-current
.el-tree-node.is-current
> .el-tree-node__content {
background-color: #f2f3f5;
color: #3f79fe;
@media (min-width: 768px) {
:deep(.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content) {
background-color: #f2f3f5;
color: #3f79fe;
}
}
.el-tree /deep/.el-tree-node__expand-icon.expanded {
:deep(.el-tree-node__expand-icon.expanded) {
transform: rotate(180deg);
}
.el-scrollbar /deep/.el-scrollbar__view {
:deep(.el-scrollbar__view) {
height: 100%;
}
</style>
src/views/Home.vue
View file @ f82d264b
......@@ -4,9 +4,9 @@
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" />
<svg-icon iconClass="homeBannerMobile" width="326px" height="293px" class=" block mt-5 md:hidden mx-auto text-svgPurple" />
<div class="absolute top-0 z-0">
<svg-icon iconClass="homeBanner" width="1371px" height="568px" class="hidden md:block" />
<svg-icon iconClass="homeBanner" width="1371px" height="568px" class="hidden md:block text-svgPurple" />
</div>
<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>
......@@ -172,9 +172,6 @@ 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'
})
const elDiaWidth = computed(() => {
})
/* handle tab switch */
enum NAV_EVENT {
......@@ -283,7 +280,7 @@ const state = reactive({
userName: '',
phone: '',
appeal: ''
}
} as any
})
/* 校验及提交 */
......@@ -293,7 +290,8 @@ const isValid = ref(false)
/* 校验 */
watch(() => _.cloneDeep(state.form), (newForm, oldForm) => {
let hasEmptyAttr = false
Object.keys(newForm).forEach(key => {
Object.keys(newForm).forEach(key=> {
// const k = keyOf (state.form)
if (!newForm[key]) {
hasEmptyAttr = true
isValid.value = false
......
src/views/Mall.vue
View file @ f82d264b
......@@ -21,11 +21,11 @@
</div>
<div class="md:hidden">
<div class=" flex justify-between pt-9">
<div class=" rounded bg-gray-700 flex text-white text-xs items-center px-5 py-3"
<div class=" rounded bg-gray-700 flex text-white text-sm items-center px-5 py-3"
@touchend="handleTouchend(BTN_EVENT.BTN3)">
<svg-icon iconClass="apple" class="w-4 h-4 mr-2" />iPhone版下载
</div>
<div class=" rounded bg-gray-700 flex text-white text-xs items-center px-5 py-3"
<div class=" rounded bg-gray-700 flex text-white text-sm items-center px-5 py-3"
@touchend="handleTouchend(BTN_EVENT.BTN4)">
<svg-icon iconClass="andriod" class="w-4 h-4 mr-2" />Android版下载
</div>
......@@ -58,7 +58,7 @@
</div>
</div>
</div>
<div class="intro md:w-bodySet md:pl-60 md:flex justify-between md:pt-14 md:pb-10">
<div class="intro md:w-bodySet mx-auto md:pl-60 md:flex justify-between md:pt-14 md:pb-10">
<img :src="getImgUrl('slgIntro')" style="width:275px;height:556px" class=" hidden md:block">
<img :src="getImgUrl('slgIntro')" style="width:155px;height:311px" class=" mx-auto md:hidden mt-16">
......
src/views/Solutions/foodSafety.vue
View file @ f82d264b
<template>
<div>
<solutions :disadvantages="disadvantages" :plans="plans" url="fs" />
<div class="case bg-secondaryBlue pb-16">
<div class="case bg-secondaryBlue md:pb-16">
<div :class="mainHeaderObj">成功案例</div>
<div class=" w-bodySet mx-auto px-28">
<div class="bg-white flex flex-row px-10 py-6 items-center mt-8">
<img :src="getImgUrl('alcohol')" class="w-2/12" />
<div class="pl-8">
<div class="text-gray-800 text-lg font-semibold">数字酒防伪溯源NFT一体化平台</div>
<div class=" md:w-bodySet mx-auto md:px-28">
<div class="bg-white md:flex flex-row md:px-10 py-6 items-center mt-5 md:mt-8">
<img :src="getImgUrl('alcohol')" class=" w-80 h-80 mx-auto md:w-2/12 md:h-auto" />
<div class="md:pl-8 px-11 md:pr-0">
<div class="text-gray-800 text-center md:text-left text-xl md:text-lg font-semibold pt-5 md:pt-0">数字酒防伪溯源NFT一体化平台</div>
<div
class="text-contentMain text-sm pt-4"
class="text-contentMain text-sm pt-4 text-justify leading-6 "
>在区块链数字酒项目中为酒企建立了防伪、防篡改可追溯的系统平台，并创新性地采用NFT的方式，每一批白酒拥有相应的NFT，NFT数字酒可质押融资、可转让交易，为消费者打造了向下为实物高端酒兜底及仓储保值，向上有数字资产增值预期的投资收藏体验场景。</div>
</div>
</div>
......@@ -30,7 +30,7 @@ const getImgUrl = computed(() => {
})
const mainHeaderObj = computed(()=>{
return 'text-3xl font-semibold text-headerMain text-center'
return 'text-2xl md:text-3xl font-semibold text-headerMain text-center'
})
</script>
tailwind.config.js
View file @ f82d264b
......@@ -29,7 +29,9 @@ module.exports = {
sideBarBg:'#952DFF',
mallSpecialTitle:'#E1E5FF',
mallSpecialText:'#8A92CF',
mallSpecialBg:'#11163C'
mallSpecialBg:'#11163C',
svgPurple:'rgb(122, 139, 227)',
svgBlue:'rgb(204, 227, 255)'
},
spacing: {
'bodySet': '1440px',
......
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