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