VinceJins
6 years ago
15 changed files with 138 additions and 428 deletions
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 44 KiB |
@ -1,32 +0,0 @@ |
|||||
<template> |
|
||||
<el-menu :default-active="1" class="el-menu-demo" mode="horizontal" > |
|
||||
<el-menu-item index="1"> |
|
||||
<RouterLink to="/design/test1">演示Demo</RouterLink> |
|
||||
</el-menu-item> |
|
||||
<el-submenu index="2"> |
|
||||
<template slot="title">我的工作台</template> |
|
||||
<el-menu-item index="2-1">选项1</el-menu-item> |
|
||||
<el-menu-item index="2-2">选项2</el-menu-item> |
|
||||
<el-menu-item index="2-3">选项3</el-menu-item> |
|
||||
<el-submenu index="2-4"> |
|
||||
<template slot="title">选项4</template> |
|
||||
<el-menu-item index="2-4-1">选项1</el-menu-item> |
|
||||
<el-menu-item index="2-4-2">选项2</el-menu-item> |
|
||||
<el-menu-item index="2-4-3">选项3</el-menu-item> |
|
||||
</el-submenu> |
|
||||
</el-submenu> |
|
||||
<el-menu-item index="3" disabled>消息中心</el-menu-item> |
|
||||
<el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item> |
|
||||
</el-menu> |
|
||||
</template> |
|
||||
|
|
||||
|
|
||||
<script> |
|
||||
export default { |
|
||||
name: 'DesignHeader' |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style scoped> |
|
||||
|
|
||||
</style> |
|
||||
@ -1,29 +0,0 @@ |
|||||
<template> |
|
||||
<el-container> |
|
||||
<el-header> |
|
||||
<design-header/> |
|
||||
</el-header> |
|
||||
<el-main> |
|
||||
<router-view/> |
|
||||
</el-main> |
|
||||
<el-footer>Footer</el-footer> |
|
||||
</el-container> |
|
||||
</template> |
|
||||
<script> |
|
||||
import DesignHeader from './design-header' |
|
||||
|
|
||||
export default { |
|
||||
name: 'DesignLayout', |
|
||||
data() { |
|
||||
return {} |
|
||||
}, |
|
||||
components: { |
|
||||
DesignHeader |
|
||||
}, |
|
||||
methods: {} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style scoped> |
|
||||
|
|
||||
</style> |
|
||||
@ -1,44 +0,0 @@ |
|||||
<template> |
|
||||
<div> |
|
||||
<div id="nav"> |
|
||||
<RouterLink to="/example/sprite">sprite精灵图</RouterLink> |
|
||||
<RouterLink to="/example/svgicon">svg icon</RouterLink> |
|
||||
<RouterLink to="/example/globalComponent">全局组件</RouterLink> |
|
||||
<RouterLink to="/example/axios">axios</RouterLink> |
|
||||
<RouterLink to="/example/cookie">cookie</RouterLink> |
|
||||
<RouterLink to="/example/meta">meta</RouterLink> |
|
||||
<RouterLink to="/example/vuex">vuex</RouterLink> |
|
||||
<RouterLink to="/example/component">组件</RouterLink> |
|
||||
<RouterLink :to="{name:'exampleParams',params:{test:'123'}}">路由params</RouterLink> |
|
||||
<RouterLink :to="{path:'/example/query',query:{test:'123'}}">路由query</RouterLink> |
|
||||
<RouterLink to="/example/reload">刷新当前页面</RouterLink> |
|
||||
<RouterLink to="/example/permission/router">router鉴权</RouterLink> |
|
||||
<RouterLink to="/example/permission/js">js鉴权</RouterLink> |
|
||||
<RouterLink to="/example/user">基本操作</RouterLink> |
|
||||
</div> |
|
||||
<RouterView /> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
#nav { |
|
||||
margin-bottom: 10px; |
|
||||
a { |
|
||||
text-decoration: none; |
|
||||
font-size: 14px; |
|
||||
&::after { |
|
||||
content: '|'; |
|
||||
margin: 0 10px; |
|
||||
font-weight: normal; |
|
||||
font-size: 14px; |
|
||||
} |
|
||||
&:last-child::after { |
|
||||
content: none; |
|
||||
} |
|
||||
&.router-link-active { |
|
||||
font-weight: bold; |
|
||||
font-size: 18px; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,22 +0,0 @@ |
|||||
import DesignLayout from '@/layout/design-layout' |
|
||||
|
|
||||
export default { |
|
||||
path: '/design', |
|
||||
meta: { |
|
||||
requireLogin: true |
|
||||
}, |
|
||||
redirect: '/design/test1', |
|
||||
component: DesignLayout, |
|
||||
children: [ |
|
||||
{ |
|
||||
path: 'test1', |
|
||||
component: () => |
|
||||
import(/* webpackChunkName: 'example' */ '@/views/design/test1.vue') |
|
||||
}, |
|
||||
{ |
|
||||
path: 'test2', |
|
||||
component: () => |
|
||||
import(/* webpackChunkName: 'example' */ '@/views/design/test2.vue') |
|
||||
} |
|
||||
] |
|
||||
} |
|
||||
@ -0,0 +1,107 @@ |
|||||
|
<template> |
||||
|
<div id="home"> |
||||
|
<div class="headerDiv"> |
||||
|
<el-row> |
||||
|
<el-col class="headerCol" :span="3"></el-col> |
||||
|
<el-col class="headerCol" :span="18"> |
||||
|
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect()" text-color="#767677" active-text-color="#1d499e"> |
||||
|
<div class="headerLogoDiv"> |
||||
|
<img src="favicon.ico" class="headerLogo"/> |
||||
|
<span class="headerLogoTitle">TDUCK CLOUD</span> |
||||
|
</div> |
||||
|
<el-menu-item index="enterprise" class="menuItem">企业部署</el-menu-item> |
||||
|
<el-menu-item index="source" class="menuItem">开源版本</el-menu-item> |
||||
|
<el-menu-item index="proposal" class="menuItem">提出建议</el-menu-item> |
||||
|
<el-button class="consoleBtn">控 制 台</el-button> |
||||
|
</el-menu> |
||||
|
</el-col> |
||||
|
<el-col class="headerCol" :span="3"></el-col> |
||||
|
</el-row> |
||||
|
</div> |
||||
|
<div class="headerBody"> |
||||
|
<div class="indexBody"> |
||||
|
<router-view></router-view> |
||||
|
</div> |
||||
|
<div class="footerDiv"> |
||||
|
关于我们 |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import store from '@/store/index.js' |
||||
|
export default { |
||||
|
computed: { |
||||
|
getStore() { |
||||
|
return store; |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
activeIndex: null |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
handleSelect(key, keyPath) { |
||||
|
console.log(key, keyPath); |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
console.info(this.getStore); |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
.headerCol { |
||||
|
border: solid thin white; |
||||
|
} |
||||
|
.headerDiv { |
||||
|
background-color: white; |
||||
|
position: fixed; |
||||
|
width: 100%; |
||||
|
top: 0px; |
||||
|
} |
||||
|
.headerLogo { |
||||
|
float: left; |
||||
|
} |
||||
|
.headerLogoTitle { |
||||
|
float: left; |
||||
|
color: #1d499e; |
||||
|
font-size: 25px; |
||||
|
line-height: 110px; |
||||
|
padding: 0px 15px 0px 15px; |
||||
|
} |
||||
|
.headerLogo { |
||||
|
height: 60px; |
||||
|
padding: 25px 0px 20px 0px; |
||||
|
} |
||||
|
.menuItem { |
||||
|
line-height: 110px; |
||||
|
height: 110px; |
||||
|
font-size: 18px; |
||||
|
} |
||||
|
.consoleBtn { |
||||
|
font-size: 16px; |
||||
|
width: 130px; |
||||
|
margin: 35px 0px 35px 0px; |
||||
|
float: right; |
||||
|
color: #767677; |
||||
|
} |
||||
|
.consoleBtn:focus, .consoleBtn:hover { |
||||
|
border-color: #1d499e; |
||||
|
} |
||||
|
.headerBody { |
||||
|
padding-top: 113px; |
||||
|
} |
||||
|
.footerDiv { |
||||
|
border: solid thin black; |
||||
|
font-size: 14px; |
||||
|
color: white; |
||||
|
text-align: center; |
||||
|
line-height: 110px; |
||||
|
} |
||||
|
.indexBody { |
||||
|
background-color: white; |
||||
|
margin: 50px 0px 0px 0px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,15 @@ |
|||||
|
<template> |
||||
|
<div id="login"> |
||||
|
|
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'login', |
||||
|
data() { |
||||
|
return { |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
@ -1,30 +0,0 @@ |
|||||
<template> |
|
||||
<el-container> |
|
||||
<el-header> |
|
||||
<design-header/> |
|
||||
</el-header> |
|
||||
<el-main> |
|
||||
<router-view></router-view> |
|
||||
</el-main> |
|
||||
<el-footer>Footer</el-footer> |
|
||||
</el-container> |
|
||||
<!-- <RouterLink to="/example">演示Demo</RouterLink>--> |
|
||||
</template> |
|
||||
<script> |
|
||||
import DesignHeader from '../../layout/design-header' |
|
||||
|
|
||||
export default { |
|
||||
name: 'index', |
|
||||
data() { |
|
||||
return {} |
|
||||
}, |
|
||||
components: { |
|
||||
DesignHeader |
|
||||
}, |
|
||||
methods: {} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style scoped> |
|
||||
|
|
||||
</style> |
|
||||
@ -1,216 +0,0 @@ |
|||||
<template> |
|
||||
<div> |
|
||||
<el-container> |
|
||||
<el-header style="height: 88px;" class="login-header"> |
|
||||
<el-row type="flex" align='middle' :gutter="24" style="height: 100%; line-height: 20px;"> |
|
||||
<el-col :span="2" :offset="2"> |
|
||||
<img class='logo' src="http://q2fgufcw6.bkt.clouddn.com/logo"/> |
|
||||
</el-col> |
|
||||
<el-col :span="3"> |
|
||||
<div style="display: flex; justify-content: center; align-items: center;"> |
|
||||
<p class="logo-text">TDUCK</p> |
|
||||
<p class="logo-text-sub">填鸭表单</p> |
|
||||
</div> |
|
||||
</el-col> |
|
||||
<el-col :span="1.5"> |
|
||||
<router-link class="fun-nav" to="/"> 企业部署</router-link> |
|
||||
</el-col> |
|
||||
<el-col :span="1.5"> |
|
||||
<router-link class="fun-nav" to="/2"> 开源版本</router-link> |
|
||||
</el-col> |
|
||||
<el-col :span="1.5"> |
|
||||
<router-link class="fun-nav" to="/2"> 提出建议</router-link> |
|
||||
</el-col> |
|
||||
<el-col :span="11"> |
|
||||
</el-col> |
|
||||
</el-row> |
|
||||
</el-header> |
|
||||
<el-main class="login-main"> |
|
||||
<div class="content"> |
|
||||
<div class="banner"> |
|
||||
<img |
|
||||
style="width: 489px; height: 477px" |
|
||||
src="http://q2fgufcw6.bkt.clouddn.com/login-banner"/> |
|
||||
</div> |
|
||||
<div class="login-form"> |
|
||||
<el-tabs style="width: 300px;" v-model="loginType" @tab-click="loginTypeHandleClick"> |
|
||||
<el-tab-pane label="微信扫码登录" name="wx"> |
|
||||
<div class="wx-login"> |
|
||||
<img class="qrcode" :src="wxLoginQrCode"/> |
|
||||
<el-link icon="el-icon-refresh-left" :underline="false">刷新二维码</el-link> |
|
||||
<el-divider></el-divider> |
|
||||
</div> |
|
||||
</el-tab-pane> |
|
||||
<el-tab-pane label="账号密码登录" name="account"> |
|
||||
<el-form ref="form" :model="account" label-width="80px"> |
|
||||
<el-form-item label="账号名称"> |
|
||||
<el-input v-model="account.username"></el-input> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="密码"> |
|
||||
<el-input show-password v-model="account.password"></el-input> |
|
||||
</el-form-item> |
|
||||
<el-form-item> |
|
||||
<el-button type="primary" >登录</el-button> |
|
||||
</el-form-item> |
|
||||
</el-form> |
|
||||
</el-tab-pane> |
|
||||
<div style="display: flex;flex-direction: row;"> |
|
||||
<el-link style="margin-left: 20px">忘记密码</el-link> |
|
||||
<el-link style="margin-left: 20px">立即注册</el-link> |
|
||||
<div class="other-login"> |
|
||||
<svg-icon class-name="other-login-icon" icon-class="loginQQ"/> |
|
||||
<svg-icon class-name="other-login-icon" icon-class="loginWx"/> |
|
||||
</div> |
|
||||
</div> |
|
||||
<el-divider style="width: 100px"></el-divider> |
|
||||
<p class="login-tip"> |
|
||||
关于TDuckCloud登录 |
|
||||
若微信扫码失败，请打开 微信授权页面 登录 |
|
||||
若QQ登录填鸭云异常，可查阅 帮助文档 |
|
||||
若因微信、QQ、公众号冻结或账号密码找回失败等无法登录，可 自助申请 登录账号 |
|
||||
</p> |
|
||||
</el-tabs> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="footer"> |
|
||||
<el-link icon="el-icon-user" style="color: #FFFFFF">关于我们</el-link> |
|
||||
</div> |
|
||||
</el-main> |
|
||||
</el-container> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
|
|
||||
export default { |
|
||||
name: 'designLogin', |
|
||||
data() { |
|
||||
return { |
|
||||
loginType: 'wx', |
|
||||
account: { |
|
||||
username: '', |
|
||||
password: '' |
|
||||
}, |
|
||||
wxLoginQrCode: 'http://q2fgufcw6.bkt.clouddn.com/20191213/9f217b754ad44f0caaa83040ce62fe93.png' |
|
||||
} |
|
||||
}, |
|
||||
methods: { |
|
||||
loginTypeHandleClick() { |
|
||||
}, |
|
||||
login() { |
|
||||
this.$store.dispatch('token/login').then(() => { |
|
||||
// 登录成功后路由跳回 |
|
||||
if (this.$route.query.redirect) { |
|
||||
this.$router.replace({ |
|
||||
path: this.$route.query.redirect |
|
||||
}) |
|
||||
} else { |
|
||||
if (window.history.length <= 1) { |
|
||||
this.$router.push({path: '/'}) |
|
||||
} else { |
|
||||
this.$router.go(-1) |
|
||||
} |
|
||||
} |
|
||||
}) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
<style lang="scss" scoped> |
|
||||
.logo { |
|
||||
left: 148px; |
|
||||
top: 20px; |
|
||||
width: 88px; |
|
||||
height: 88px; |
|
||||
border-radius: 100px; |
|
||||
} |
|
||||
|
|
||||
.logo-text { |
|
||||
color: rgba(96, 96, 96, 1); |
|
||||
font-size: 20px; |
|
||||
} |
|
||||
|
|
||||
.login-header { |
|
||||
line-height: 20px; |
|
||||
background-color: rgba(255, 255, 255, 1); |
|
||||
color: rgba(16, 16, 16, 1); |
|
||||
font-size: 14px; |
|
||||
text-align: center; |
|
||||
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.4); |
|
||||
border: 1px solid rgba(255, 255, 255, 0); |
|
||||
} |
|
||||
|
|
||||
.logo-text-sub { |
|
||||
margin-left: 5px; |
|
||||
color: rgba(96, 96, 96, 1); |
|
||||
font-size: 16px; |
|
||||
} |
|
||||
|
|
||||
.fun-nav { |
|
||||
color: rgba(96, 95, 95, 1); |
|
||||
font-size: 18px; |
|
||||
text-align: left; |
|
||||
text-decoration: none; |
|
||||
} |
|
||||
|
|
||||
.login-main { |
|
||||
height: 60%; |
|
||||
padding: 0px; |
|
||||
background: url("~@/assets/images/loginView.jpg"); |
|
||||
|
|
||||
.content { |
|
||||
margin-top: 40px; |
|
||||
width: 100%; |
|
||||
height: 730px; |
|
||||
background-color: #FFFFFF; |
|
||||
display: flex; |
|
||||
align-content: center; |
|
||||
align-items: center; |
|
||||
justify-content: center; |
|
||||
|
|
||||
.banner { |
|
||||
|
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.login-form { |
|
||||
margin-left: 100px; |
|
||||
height: 400px; |
|
||||
width: 520px; |
|
||||
|
|
||||
.wx-login { |
|
||||
display: flex; |
|
||||
align-content: center; |
|
||||
align-items: center; |
|
||||
justify-content: center; |
|
||||
flex-direction: column; |
|
||||
|
|
||||
.qrcode { |
|
||||
margin: 20px; |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
|
|
||||
.other-login { |
|
||||
margin-left: auto; |
|
||||
|
|
||||
.other-login-icon { |
|
||||
margin-left: 10px; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.login-tip { |
|
||||
color: rgba(16, 16, 16, 1); |
|
||||
font-size: 14px; |
|
||||
text-align: left; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.footer { |
|
||||
height: 60px; |
|
||||
display: flex; |
|
||||
justify-content: center; |
|
||||
align-items: center; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,15 +0,0 @@ |
|||||
<template> |
|
||||
<div> |
|
||||
test1 |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
export default { |
|
||||
name: 'test1' |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style scoped> |
|
||||
|
|
||||
</style> |
|
||||
@ -1,15 +0,0 @@ |
|||||
<template> |
|
||||
<div> |
|
||||
test2 |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
export default { |
|
||||
name: 'test2' |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style scoped> |
|
||||
|
|
||||
</style> |
|
||||
Loading…
Reference in new issue