Skip to content

P
provenance-website
Commit c1aadae3 authored by Zhang Xiaojie's avatar Zhang Xiaojie
Browse files
Options

首页布局

parent e8934c7a
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 379 additions and 126 deletions
package-lock.json
View file @ c1aadae3
This diff is collapsed.
package.json
View file @ c1aadae3
......@@ -10,12 +10,15 @@
"dependencies": {
"aos": "^2.3.4",
"core-js": "^3.6.5",
"lodash": "^4.17.21",
"svg-sprite-loader": "^6.0.11",
"vue": "^3.0.0",
"vue-router": "^4.0.0-0",
"vuex": "^4.0.0-0"
},
"devDependencies": {
"@types/aos": "^3.0.4",
"@types/lodash": "^4.14.178",
"@typescript-eslint/eslint-plugin": "^4.18.0",
"@typescript-eslint/parser": "^4.18.0",
"@vue/cli-plugin-babel": "~4.5.0",
......
src/App.vue
View file @ c1aadae3
<template>
<div id="nav" class="">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view/>
<layout>
<router-view />
</layout>
</template>
<style lang="scss">
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
<script setup lang="ts">
import layout from './Layouts/MainPage/index.vue';
#nav {
padding: 30px;
a {
font-weight: bold;
color: #2c3e50;
&.router-link-exact-active {
color: #42b983;
}
}
}
</style>
</script>
\ No newline at end of file
src/Layouts/MainPage/Footer.vue 0 → 100644
View file @ c1aadae3
<template>
<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="flex flex-col">
<span :class="styleClass.footerMainFontMobile">支持</span>
<span :class="styleClass.footerSecondFontMobile">企业内网部署</span>
<span :class="styleClass.footerSecondFontMobile">联盟链部署</span>
<span :class="styleClass.footerSecondFontMobile">私链部署</span>
</div>
<div class="flex flex-col">
<span :class="styleClass.footerMainFontMobile">帮助与支持</span>
<span :class="styleClass.footerSecondFontMobile">帮助中心</span>
<span :class="styleClass.footerSecondFontMobile">服务协议</span>
<span :class="styleClass.footerSecondFontMobile">隐私协议</span>
</div>
</div>
<div class=" w-6/12 pr-3">
<div class="flex flex-col">
<span :class="styleClass.footerMainFontMobile">联系我们</span>
<span :class="styleClass.footerSecondFontMobile">关于我们</span>
<span :class="styleClass.footerSecondFontMobile">问题反馈</span>
</div>
<div class=" flex flex-col">
<span :class="styleClass.footerSecondFontMobile">咨询电话</span>
<span :class="styleClass.footerMainFontMobile">0571-8167-1366</span>
<span :class="styleClass.footerSecondFontMobile">客服二维码</span>
<img src="@/assets/serviceQr.png" class="w-16" />
</div>
</div>
</div>
</div>
<div class="h-px bg-footerBorder"></div>
<div class="text-xs text-gray-400 text-center py-3">
Copyright © 2021 杭州库链科技有限公司
<br />浙ICP备17050749号-5
</div>
</div>
<div class="hidden md:block bg-footerBg w-full pt-12">
<div class="w-bodySet mx-auto pb-5">
<div class="w-8/12 flex flex-row mx-auto justify-between">
<div class="flex flex-col">
<span :class="styleClass.footerMainFont">支持</span>
<span :class="styleClass.footerSecondFont">企业内网部署</span>
<span :class="styleClass.footerSecondFont">联盟链部署</span>
<span :class="styleClass.footerSecondFont">私链部署</span>
</div>
<div class="flex flex-col">
<span :class="styleClass.footerMainFont">帮助与支持</span>
<span :class="styleClass.footerSecondFont">帮助中心</span>
<span :class="styleClass.footerSecondFont">服务协议</span>
<span :class="styleClass.footerSecondFont">隐私协议</span>
</div>
<div class="flex flex-col">
<span :class="styleClass.footerMainFont">联系我们</span>
<span :class="styleClass.footerSecondFont">关于我们</span>
<span :class="styleClass.footerSecondFont">问题反馈</span>
</div>
<div class="flex flex-col pl-16">
<span :class="styleClass.footerSecondFont">咨询电话</span>
<span :class="styleClass.footerMainFont">0571-8167-1366</span>
<span :class="styleClass.footerSecondFont">客服二维码</span>
<img src="@/assets/serviceQr.png" class="w-14" />
</div>
</div>
</div>
<div class="h-px bg-footerBorder"></div>
<div
class="text-xs text-gray-400 text-center py-3"
>Copyright © 2021 杭州库链科技有限公司 浙ICP备17050749号-5</div>
</div>
</div>
</template>
<script setup lang="ts">
import styleClass from '@/assets/style/style.module.css'
</script>
\ No newline at end of file
src/Layouts/MainPage/Header.vue 0 → 100644
View file @ c1aadae3
<template>
<div>
<div
class="md:hidden fixed w-full flex flex-row py-4 px-2"
:style="bgTransparent ? styleClasses.transHeaderBg : styleClasses.blurHeaderBg"
>
<svg-icon iconClass="menu" class="text-black absolute w-6 h-6" @clickSvg="handleClick" />
<img src="@/assets/logo.png" class="w-20 mx-auto" />
</div>
<!-- <div class="md:hidden h-screen w-1/2 bg-blue-50 absolute">11</div> -->
<div class="hidden md:block w-full fixed">
<div
class="w-bodySet mx-auto px-10 py-3 flex-row justify-between flex"
:style="bgTransparent ? styleClasses.transHeaderBg : styleClasses.blurHeaderBg"
>
<img src="@/assets/logo.png" class="w-20 h-6" />
<div class="text-sm text-gray-500 font-medium flex flex-row items-center">
<div class="pr-14 hover:text-mainBlue cursor-pointer" @click="handleClick">首页</div>
<div
class="flex items-center pr-12 hover:text-mainBlue cursor-pointer"
@mouseenter="handleHover($event)"
>
存证溯源
<svg-icon iconClass="arrowDown" class="w-3 h-3" />
</div>
<div
class="flex items-center pr-12 cursor-pointer hover:text-mainBlue"
@mouseenter="handleHover($event)"
>
解决方案
<svg-icon iconClass="arrowDown" class="w-3 h-3 hover:text-mainBlue" />
</div>
<div class="cursor-pointer pr-12 hover:text-mainBlue" @click="handleClick">帮助中心</div>
<MainButton text="登录平台" @handleClick="handleBtnClick($event)" />
</div>
</div>
</div>
<div
:class="hovering ? ' h-52 pt-12' : 'h-0 overflow-hidden'"
class="transition-all ease-in-out duration-1000"
@mouseleave="handleHover($event)"
>
<div class="w-bodySet mx-auto">
<div class="w-10/12 bg-gray-300 mx-auto">
<banner-card :data="state.list" />
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import styleClass from '@/assets/style/style.module.css'
import { ref, withDefaults, defineProps, reactive } from 'vue';
import MainButton from "@/components/mainButton.vue"
import BannerCard from '@/components/bannerCard.vue';
import { debounce } from "lodash";
const styleClasses = ref(styleClass)
const handleClick = () => {
console.log(1);
}
const handleBtnClick = (e: Event) => {
console.log(e.target);
}
let hovering = ref(false)
let state = reactive({} as { list: any })
const handleHover = (e: Event) => {
if (e.type === 'mouseenter') {
hovering.value = true
}
else if (e.type === 'mouseleave') {
console.log('out');
hovering.value = false
}
console.log(hovering.value);
}
const props = withDefaults(defineProps<
{ bgTransparent?: boolean }
>(), {
bgTransparent: true
})
</script>
src/Layouts/MainPage/index.vue 0 → 100644
View file @ c1aadae3
<template>
<div>
<div>
<MainHeader/>
</div>
<slot />
<MainFooter/>
</div>
</template>
<script setup lang="ts">
import MainHeader from './Header.vue';
import MainFooter from './Footer.vue';
</script>
\ No newline at end of file
src/assets/logo.png
View replaced file @ e8934c7a View file @ c1aadae3
src/assets/logo.png

6.69 KB | W: | H:

src/assets/logo.png

5.13 KB | W: | H:

src/assets/logo.png
src/assets/logo.png
src/assets/logo.png
src/assets/logo.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/style/style.module.css 0 → 100644
View file @ c1aadae3
/* @type */
.blurHeaderBg{
@apply bg-opacity-90 bg-white
}
.transHeaderBg{
@apply bg-transparent
}
.mainBtn{
@apply border border-mainBlue text-white hover:bg-white hover:border-gray-400 hover:text-gray-600 transition duration-500 bg-mainBlue
}
.largeBtn{
@apply text-lg px-6 py-2 rounded-3xl
}
.meduimBtn{
@apply text-sm py-1 px-4 rounded-2xl
}
.footerMainFont{
@apply text-base text-white pb-4 cursor-default
}
.footerSecondFont{
@apply text-sm text-gray-400 pb-3 cursor-pointer
}
.footerMainFontMobile{
@apply text-sm text-white pb-3 cursor-default
}
.footerSecondFontMobile{
@apply text-xs text-gray-400 pb-2 cursor-pointer pr-5
}
\ No newline at end of file
src/assets/style/style.module.css.d.ts 0 → 100644
View file @ c1aadae3
declare const styles: {
readonly "blurHeaderBg": string;
readonly "transHeaderBg": string;
readonly "mainBtn": string;
readonly "largeBtn": string;
readonly "meduimBtn": string;
readonly "footerMainFont": string;
readonly "footerSecondFont": string;
readonly "footerMainFontMobile": string;
readonly "footerSecondFontMobile": string;
};
export = styles;
src/components/HelloWorld.vue deleted 100644 → 0
View file @ e8934c7a
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br>
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript" target="_blank" rel="noopener">typescript</a></li>
</ul>
<h3>Essential Links</h3>
<ul>
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
</ul>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
name: 'HelloWorld',
props: {
msg: String,
},
});
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
src/views/Index.vue → src/components/bannerCard.vue
View file @ c1aadae3
<template>
<div class=" bg-purple-50 w-40 h-80 border border-gray-400 mx-auto md:bg-purple-400 hover:shadow-2xl ease-in duration-300"></div>
<div>{{ props.data }}</div>
</template>
<script setup lang="ts">
import { withDefaults, defineProps } from 'vue';
const props = withDefaults(defineProps<{
data: any
}>(), {
})
</script>
\ No newline at end of file
src/components/mainButton.vue 0 → 100644
View file @ c1aadae3
<template>
<div>
<button
:class="[props.size === 'medium' ? styleClass.meduimBtn : styleClass.largeBtn, styleClass.mainBtn]"
@click="handleClick"
>{{ props.text }}</button>
</div>
</template>
<script setup lang="ts">
import { withDefaults, defineProps, defineEmits } from 'vue';
import styleClass from '@/assets/style/style.module.css'
const props = withDefaults(defineProps<{
text: string,
size?: 'large' | 'medium'
}>(), {
size: 'medium'
})
const emits = defineEmits(['handleClick'])
const handleClick = (e: Event) => {
emits('handleClick', e)
}
</script>
\ No newline at end of file
src/components/svgIcon.vue 0 → 100644
View file @ c1aadae3
<template>
<svg :class="svgClass" class=" fill-current overflow-hidden" aria-hidden="true" :="$attrs" @click="$emit('clickSvg')">
<use :xlink:href="iconName" />
</svg>
</template>
<script lang="ts" setup>
import { withDefaults, defineProps, computed,defineEmits } from 'vue';
const props = withDefaults(defineProps<{
iconClass: string,
className?: string
}>(), { className: '' })
const iconName = computed(() => {
return `#icon-${props.iconClass}`
})
const svgClass = computed(() => {
if (props.className) {
return 'svg-icon ' + props.className
} else {
return 'svg-icon'
}
})
const emits = defineEmits(['clickSvg'])
</script>
\ No newline at end of file
src/icons/index.ts 0 → 100644
View file @ c1aadae3
import SvgIcon from "@/components/svgIcon.vue";
const componentPlugin: any = {
install: function(vue: any, options: any) {
if (
options &&
options.imports &&
Array.isArray(options.imports) &&
options.imports.length > 0
) {
// 按需引入图标
const { imports } = options;
imports.forEach((name: any) => {
require(`@/icons/svg/${name}.svg`);
});
} else {
// 全量引入图标
const ctx = require.context("@/icons/svg", false, /\.svg$/);
ctx.keys().forEach(path => {
const temp = path.match(/\.\/([A-Za-z0-9\-_]+)\.svg$/);
if (!temp) return;
const name = temp[1];
require(`@/icons/svg/${name}.svg`);
});
}
vue.component('SvgIcon', SvgIcon);
}
};
export default componentPlugin;
\ No newline at end of file
src/icons/svg/arrowDown.svg 0 → 100644
View file @ c1aadae3
<svg t="1640229982602" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3462" width="200" height="200"><path d="M512 704c8.288 0 15.776-3.232 21.456-8.4l0.064 0.08 352-320-0.08-0.08c6.448-5.856 10.56-14.208 10.56-23.6a32 32 0 0 0-32-32c-8.288 0-15.76 3.232-21.456 8.4l-0.08-0.08L512 628.752 181.536 328.32l-0.08 0.08A31.776 31.776 0 0 0 160 320a32 32 0 0 0-32 32c0 9.376 4.112 17.744 10.544 23.6l-0.08 0.08 352 320 0.08-0.08c5.68 5.168 13.168 8.4 21.456 8.4z" p-id="3463"></path></svg>
\ No newline at end of file
src/icons/svg/like.svg 0 → 100644
View file @ c1aadae3
<svg t="1640052412862" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1863" width="200" height="200"><path d="M150.058667 254.378667l-1.493334 1.493333a196.266667 196.266667 0 0 0 0 277.568L522.666667 907.562667l374.101333-374.122667a196.266667 196.266667 0 0 0 3.968-273.493333l-5.461333-5.568-4.096-3.968a196.266667 196.266667 0 0 0-273.493334 3.968L522.666667 349.397333l-95.018667-95.018666a196.266667 196.266667 0 0 0-277.546667 0z m43.754666 46.762666l1.493334-1.493333a132.266667 132.266667 0 0 1 187.072 0l140.266666 140.245333 140.309334-140.266666a132.266667 132.266667 0 0 1 187.050666 0l4.885334 5.013333a132.266667 132.266667 0 0 1-3.370667 183.552L522.645333 817.024 193.813333 488.192a132.266667 132.266667 0 0 1 0-187.050667z" p-id="1864"></path></svg>
\ No newline at end of file
src/icons/svg/menu.svg 0 → 100644
View file @ c1aadae3
<svg t="1640227668169" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2017" width="200" height="200"><path d="M170.666667 213.333333h682.666666v85.333334H170.666667V213.333333z m0 512h682.666666v85.333334H170.666667v-85.333334z m0-256h682.666666v85.333334H170.666667v-85.333334z" p-id="2018"></path></svg>
\ No newline at end of file
src/main.ts
View file @ c1aadae3
......@@ -5,6 +5,9 @@ import store from './store'
import 'aos/dist/aos.css'
import Aos from 'aos'
import "tailwindcss/tailwind.css"
import plugin from "@/icons/index"
Aos.init()
createApp(App).use(store).use(router).mount('#app')
createApp(App).use(store).use(router).use(plugin, {
imports: []
}).mount('#app')
src/router/index.ts
View file @ c1aadae3
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import Home from '../views/Home.vue'
const routes: Array<RouteRecordRaw> = [
{
path: '/',
name: 'Home',
component: Home
component: () => import('@/views/Home.vue')
},
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
},
{
path: '/test',
name: 'Test',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/Index.vue')
}
]
const router = createRouter({
......
src/views/About.vue deleted 100644 → 0
View file @ e8934c7a
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>
src/views/Home.vue
View file @ c1aadae3
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
<div class=" bg-blue-50 h-screen pt-20 md:min-w-bodySet mx-auto">
home
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
<script setup lang="ts">
export default defineComponent({
name: 'Home',
components: {
HelloWorld,
},
});
</script>
tailwind.config.js
View file @ c1aadae3
......@@ -15,6 +15,9 @@ module.exports = {
colors: {
transparent: 'transparent',
current: 'currentColor',
mainBlue: '#2E2DFF',
footerBg: '#1E2454',
footerBorder: '#313A7E',
black: colors.black,
white: colors.white,
......@@ -28,6 +31,7 @@ module.exports = {
pink: colors.pink,
},
spacing: {
'bodySet': '1370px',
px: '1px',
0: '0px',
0.5: '0.125rem',
......@@ -544,6 +548,7 @@ module.exports = {
minWidth: {
0: '0px',
full: '100%',
bodySet:'1370px',
min: 'min-content',
max: 'max-content',
},
......@@ -728,6 +733,7 @@ module.exports = {
transitionProperty: {
none: 'none',
all: 'all',
display: 'display',
DEFAULT:
'background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter',
colors: 'background-color, border-color, color, fill, stroke',
......
vue.config.js 0 → 100644
View file @ c1aadae3
module.exports = {
chainWebpack: config => {
const svgRule = config.module.rule("svg");
svgRule.uses.clear();
svgRule
.use("svg-sprite-loader")
.loader("svg-sprite-loader")
.options({
symbolId: "icon-[name]"
})
.end();
}
}
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