init
This commit is contained in:
lijianyou
@@ -0,0 +1,4 @@
|
||||
<template>
|
||||
<router-view></router-view>
|
||||
</template>
|
||||
<script lang="ts" setup></script>
|
||||
@@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<div class="common-view">
|
||||
<div class="common-header">
|
||||
<div class="common-header-main">
|
||||
<div class="logo">
|
||||
<img class="img" src="@/assets/vite.svg" />
|
||||
</div>
|
||||
<div class="navigation">
|
||||
<div class="nav-item">
|
||||
<stepin-link to="/login"> 文档 </stepin-link>
|
||||
</div>
|
||||
<div class="nav-item">
|
||||
<stepin-link to="/login"> API </stepin-link>
|
||||
</div>
|
||||
<div class="nav-item">
|
||||
<stepin-link to="/login"> 关于 </stepin-link>
|
||||
</div>
|
||||
<div class="nav-item">
|
||||
<stepin-link to="/login"> 商业合作 </stepin-link>
|
||||
</div>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<a-button class="login-btn" type="primary">注册</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="common-content">
|
||||
<div class="main">
|
||||
<router-view />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup></script>
|
||||
<style scoped lang="less">
|
||||
.common-view {
|
||||
display: grid;
|
||||
min-height: 100vh;
|
||||
grid-template-rows: 64px 1fr;
|
||||
@apply bg-gray-800;
|
||||
.common-header {
|
||||
@apply bg-gray-800 flex items-center pt-lg;
|
||||
&-main {
|
||||
width: 1400px;
|
||||
margin: 0 auto;
|
||||
@apply flex items-center;
|
||||
.logo {
|
||||
flex: none;
|
||||
.img {
|
||||
height: 36px;
|
||||
}
|
||||
}
|
||||
.navigation {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.nav-item {
|
||||
font-size: 18px;
|
||||
margin-left: 64px;
|
||||
.stepin-link {
|
||||
color: theme('colors.text-inverse');
|
||||
&:hover {
|
||||
color: theme('colors.primary.500');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.actions {
|
||||
flex: none;
|
||||
.login-btn {
|
||||
height: 38px;
|
||||
width: 88px;
|
||||
font-size: 16px;
|
||||
@apply bg-gray-700 border-gray-600 rounded-md hover:bg-gray-600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.common-content {
|
||||
.main {
|
||||
width: 1400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,118 @@
|
||||
<script lang="ts" setup>
|
||||
import { LogoutOutlined } from '@ant-design/icons-vue';
|
||||
import { onMounted } from 'vue';
|
||||
import { ThemeProvider, alert } from 'stepin';
|
||||
|
||||
onMounted(() => {
|
||||
// alert.info(
|
||||
// `<div class="text-text">
|
||||
// Stepin is a fast, light framework to Vue3 – try it out today with the
|
||||
// <span class="underline">Stepin Template Beta</span>.
|
||||
// </div>`,
|
||||
// { renderRaw: true, duration: -1 }
|
||||
// );
|
||||
});
|
||||
|
||||
const navList = [
|
||||
{
|
||||
title: 'Products',
|
||||
children: [
|
||||
{
|
||||
title: 'Stepin Template',
|
||||
list: ['Stepin Pro', 'Stepin Style', 'Stepin Admin'],
|
||||
},
|
||||
{
|
||||
title: 'Stepin',
|
||||
list: ['Stepin Vue', 'Stepin React', 'Stepin Angular'],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Developers',
|
||||
children: [
|
||||
{
|
||||
title: 'Developers',
|
||||
list: ['Docs', 'Get Started', 'UI Library', 'Community', 'Open Source'],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Sponsors',
|
||||
},
|
||||
{
|
||||
title: 'Business',
|
||||
children: [{ title: 'Business', list: ['Contact Us', 'Cooperation', 'Support'] }],
|
||||
},
|
||||
{
|
||||
title: 'About Us',
|
||||
},
|
||||
];
|
||||
</script>
|
||||
<template>
|
||||
<ThemeProvider :color="{ middle: { 'bg-base': '#1896ff' }, primary: { DEFAULT: '#1896ff' } }" :autoAdapt="true">
|
||||
<div class="front-view flex flex-col">
|
||||
<div class="text-text flex-1">
|
||||
<div class="front-header flex items-baseline py-md px-xl">
|
||||
<div class="text-xxl text-text hover:text-text">
|
||||
<!-- <img src="@/assets/png.svg" /> -->
|
||||
dy.sync.net
|
||||
</div>
|
||||
<!-- <div style="width: calc(100% - 430px)" class="front-navigation mx-xl flex overflow-hidden items-center text-lg overflow-ellipsis whitespace-nowrap">
|
||||
<div :class="`front-nav-item flex items-center cursor-pointer mx-base ${nav.children ? 'with-list' : ''}`" v-for="nav in navList">
|
||||
<template v-if="!nav.children">
|
||||
{{ nav.title }}
|
||||
</template>
|
||||
<a-popover :mouseEnterDelay="0.1" v-else placement="bottom">
|
||||
<div class="front-nav-item-content">
|
||||
{{ nav.title }}
|
||||
</div>
|
||||
<template #content>
|
||||
<div class="flex">
|
||||
<div class="not-[:first-child]:ml-lg" v-for="group in nav.children">
|
||||
<h3>{{ group.title }}</h3>
|
||||
<div class="cursor-pointer hover:text-text text-subtext font-light py-xs text-lg" v-for="item in group.list">
|
||||
{{ item }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</a-popover>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<router-link to="/login" class="h-[46px] border-transparent hover:text-text hover:border-transparent text-lg text-text">
|
||||
<LogoutOutlined class="mr-xs" />
|
||||
Sign In
|
||||
</router-link>
|
||||
<a-button class="ml-md px-lg border-text hover:border-text hover:bg-text border-2 h-[46px] hover:text-bg-container" size="large">Get Started</a-button>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="front-content ">
|
||||
<router-view />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
</template>
|
||||
<style lang="less" scoped>
|
||||
.front-view {
|
||||
.front-header {
|
||||
.front-nav-item {
|
||||
&.with-list .front-nav-item-content {
|
||||
&:after {
|
||||
content: '';
|
||||
@apply ~"h-[8px]" ~"w-[8px]" transition-transform ml-2 inline-block border-text border-l-0 border-t-0 border-r-2 border-b-2 border-solid ~"rotate-[-135deg]" translate-y-1/4;
|
||||
}
|
||||
&:hover {
|
||||
&:after {
|
||||
@apply ~"rotate-[45deg]" translate-y-0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.front-content {
|
||||
height: 100vh;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,65 @@
|
||||
<script lang="ts" setup>
|
||||
import { LogoutOutlined } from '@ant-design/icons-vue';
|
||||
import { onMounted } from 'vue';
|
||||
import { ThemeProvider, alert } from 'stepin';
|
||||
import http from '@/store/http';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
const router = useRouter();
|
||||
// console.log(router.getRoutes());
|
||||
|
||||
onMounted(() => {
|
||||
// alert.info(
|
||||
// `<div class="text-text">
|
||||
// Stepin is a fast, light framework to Vue3 – try it out today with the
|
||||
// <span class="underline">Stepin Template Beta</span>.
|
||||
// </div>`,
|
||||
// { renderRaw: true, duration: -1 }
|
||||
// );
|
||||
// console.log(router.getRoutes());
|
||||
if (http.checkAuthorization()) {
|
||||
// console.log(22222);
|
||||
router.push('/dashboard');
|
||||
} else {
|
||||
router.push('/login');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<ThemeProvider :color="{ middle: { 'bg-base': '#fff','bg-container':'#fff','bg-container-light':'#fff' }, primary: { DEFAULT: '#1896ff' } }" :autoAdapt="true">
|
||||
<div class="front-view flex flex-col" style="background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%)">
|
||||
<div class="text-xxl text-text hover:text-text" style="margin-left:20px;">
|
||||
<img src="/logo1.png" />
|
||||
douyin.sync.net
|
||||
</div>
|
||||
<div class="front-content ">
|
||||
<router-view />
|
||||
</div>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
</template>
|
||||
<style lang="less" scoped>
|
||||
.front-view {
|
||||
.front-header {
|
||||
.front-nav-item {
|
||||
&.with-list .front-nav-item-content {
|
||||
&:after {
|
||||
content: '';
|
||||
@apply ~"h-[8px]" ~"w-[8px]" transition-transform ml-2 inline-block border-text border-l-0 border-t-0 border-r-2 border-b-2 border-solid ~"rotate-[-135deg]" translate-y-1/4;
|
||||
}
|
||||
&:hover {
|
||||
&:after {
|
||||
@apply ~"rotate-[45deg]" translate-y-0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.front-content {
|
||||
height: 100vh;
|
||||
}
|
||||
.front-view {
|
||||
height: 100vh;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,100 @@
|
||||
<script lang="ts" setup>
|
||||
import { reactive } from 'vue';
|
||||
import { StepinHeaderAction } from 'stepin';
|
||||
import Notice from '@/components/notice/Notice.vue';
|
||||
import DayNightSwitch from '@/components/switch/DayNightSwitch.vue';
|
||||
import { BellOutlined } from '@ant-design/icons-vue';
|
||||
import Fullscreen from '../fullscreen/Fullscreen.vue';
|
||||
|
||||
defineEmits<{
|
||||
(e: 'showSetting'): void;
|
||||
}>();
|
||||
|
||||
const noticeList = reactive([
|
||||
{
|
||||
title: '消息',
|
||||
list: [
|
||||
{
|
||||
title: '影佑',
|
||||
content: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
|
||||
img: 'src/assets/avatar/face-1.jpg',
|
||||
time: 0,
|
||||
},
|
||||
],
|
||||
},
|
||||
]);
|
||||
</script>
|
||||
<template>
|
||||
<!-- <StepinHeaderAction>
|
||||
<a-input placeholder="开始搜索...">
|
||||
<template #prefix>
|
||||
<search-outlined />
|
||||
</template>
|
||||
</a-input>
|
||||
</StepinHeaderAction> -->
|
||||
<StepinHeaderAction>
|
||||
<DayNightSwitch />
|
||||
</StepinHeaderAction>
|
||||
<StepinHeaderAction>
|
||||
<a-tooltip>
|
||||
<!-- placement="rightTop" -->
|
||||
<template #title><span style="color:yellow">Swagger Api</span></template>
|
||||
<a class="action-item" href="/swagger" target="_blank">
|
||||
<!-- <ApiOutlined /> -->
|
||||
<img class="gitee-logo" alt="swagger api" src="@/assets/swagger.png" />
|
||||
</a>
|
||||
</a-tooltip>
|
||||
|
||||
</StepinHeaderAction>
|
||||
<!-- <StepinHeaderAction>
|
||||
<a class="action-item" href="http://github.com/stepui/stepin-template" target="_blank">
|
||||
<GithubOutlined />
|
||||
</a>
|
||||
</StepinHeaderAction>
|
||||
<StepinHeaderAction>
|
||||
<a class="action-item" href="http://gitee.com/stepui/stepin-template" target="_blank">
|
||||
<img class="gitee-logo" src="@/assets/gitee.svg" />
|
||||
</a>
|
||||
</StepinHeaderAction> -->
|
||||
<!-- <StepinHeaderAction>
|
||||
<div class="action-item setting" @click="$emit('showSetting')">
|
||||
<SettingOutlined />
|
||||
</div>
|
||||
</StepinHeaderAction> -->
|
||||
|
||||
<!-- <a-popover placement="bottomRight">
|
||||
<StepinHeaderAction>
|
||||
<div class="action-item notice">
|
||||
<BellOutlined />
|
||||
</div>
|
||||
</StepinHeaderAction>
|
||||
<template #content>
|
||||
<Notice :data-source="noticeList" />
|
||||
</template>
|
||||
</a-popover> -->
|
||||
<!-- <StepinHeaderAction>
|
||||
<Fullscreen class="-mx-xs -my-sm h-[56px] px-xs py-sm flex items-center" target=".stepin-layout" />
|
||||
</StepinHeaderAction> -->
|
||||
</template>
|
||||
<style scoped lang="less">
|
||||
.gitee-logo {
|
||||
width: 20px;
|
||||
}
|
||||
.action-item {
|
||||
font-size: 20px;
|
||||
height: 100%;
|
||||
margin: 0 -8px;
|
||||
padding: 0 4px;
|
||||
line-height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&.setting {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
&.notice {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,3 @@
|
||||
<template>
|
||||
<div>link view</div>
|
||||
</template>
|
||||
@@ -0,0 +1,41 @@
|
||||
<script lang="ts" setup></script>
|
||||
<template>
|
||||
<div class="page-footer">
|
||||
<div class="links">
|
||||
<!-- <a class="link" href="https://github.com/stepui/stepin-template" target="_blank"> Stepin 首页 </a> -->
|
||||
<!-- <a class="link" href="https://github.com/stepui/stepin-template" target="_blank">
|
||||
<GithubOutlined />
|
||||
</a> -->
|
||||
<!-- <a class="link" href="https://www.antdv.com/docs/vue/introduce-cn/" target="_blank"> Ant Design </a> -->
|
||||
</div>
|
||||
<div class="copyright">
|
||||
Copyright
|
||||
<CopyrightOutlined class="icon-copyright" />
|
||||
2023 dy.net
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="less">
|
||||
.page-footer {
|
||||
text-align: center;
|
||||
@apply text-gray-400;
|
||||
|
||||
.links {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.link {
|
||||
@apply hover:text-gray-400 pl-4 pr-4;
|
||||
}
|
||||
}
|
||||
|
||||
.copyright {
|
||||
margin-top: 8px;
|
||||
|
||||
.icon-copyright {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,5 @@
|
||||
export { default as HeaderActions } from './HeaderActions.vue';
|
||||
export { default as PageFooter } from './PageFooter.vue';
|
||||
export { default as BlankView } from './BlankView.vue';
|
||||
// export { default as CommonView } from './CommonView.vue';
|
||||
export { default as FrontView } from './FrontView.vue';
|
||||
Reference in New Issue
Block a user