mirror of
https://github.com/kuaifan/dootask.git
synced 2025-12-12 11:07:06 +00:00
238 lines
9.7 KiB
Vue
238 lines
9.7 KiB
Vue
<template>
|
||
<div>
|
||
<div class="page-warp">
|
||
<div class="page-header">
|
||
<div class="header-nav">
|
||
<div class="header-nav-box">
|
||
<div class="logo"></div>
|
||
</div>
|
||
<div class="header-nav-box">
|
||
<div class="header-right-one">
|
||
<Dropdown trigger="click" @on-click="setLanguage">
|
||
<Icon
|
||
class="header-right-one-language"
|
||
type="md-globe"
|
||
/>
|
||
<a
|
||
href="javascript:void(0)"
|
||
class="header-right-one-dropdown"
|
||
v-if="screenWidth>441"
|
||
>
|
||
{{ currentLanguage }}
|
||
<Icon type="ios-arrow-down"></Icon>
|
||
</a>
|
||
<DropdownMenu slot="list">
|
||
<Dropdown-item
|
||
v-for="(item, key) in languageList"
|
||
:key="key"
|
||
:name="key"
|
||
:selected="getLanguage() === key"
|
||
>{{ item }}
|
||
</Dropdown-item>
|
||
</DropdownMenu>
|
||
</Dropdown>
|
||
</div>
|
||
<div class="header-right-two" @click="register">
|
||
{{ $L("注册账号") }}
|
||
</div>
|
||
<div class="header-right-three" @click="login">
|
||
{{ $L("立即登录") }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="header-content">
|
||
<div class="header-title header-title-one">Dootask</div>
|
||
<div class="header-title">
|
||
{{ $L("轻量级任务管理工具") }}
|
||
</div>
|
||
<div class="header-tips">
|
||
{{
|
||
$L("DooTask是一款轻量级的开源在线项目任务管理工具，提供各类文档协作工具、在线思维导图、在线流程图、项目管理、任务分发、即时IM，文件管理等工具。")
|
||
}}
|
||
</div>
|
||
<div class="login-buttom" @click="login">
|
||
{{ $L("登录") }}
|
||
</div>
|
||
</div>
|
||
|
||
<div class="header-bg"></div>
|
||
<div class="header-pic"></div>
|
||
</div>
|
||
<div class="page-main">
|
||
<div class="main-box-one">
|
||
<div class="box-one-square"></div>
|
||
<div class="box-one-pic1"></div>
|
||
<div class="box-one-tips">
|
||
<div class="box-square"></div>
|
||
<div class="box-title">
|
||
{{ $L("高效便捷的团队沟通工具") }}
|
||
</div>
|
||
<div class="box-tips">
|
||
{{
|
||
$L("针对项目和任务建立群组，工作问题可及时沟通，促进团队快速协作，提高团队工作效率。")
|
||
}}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="main-box-two" v-if="screenWidth>=1920">
|
||
<div class="box-two-tips">
|
||
<div class="box-square"></div>
|
||
<div class="box-title">
|
||
{{ $L("强大易用的协同创作云文档") }}
|
||
</div>
|
||
<div class="box-tips">
|
||
{{
|
||
$L("汇集文档、电子表格、思维笔记等多种在线工具，汇聚企业知识资源于一处，支持多人实时协同编辑，让团队协作更便捷。")
|
||
}}
|
||
</div>
|
||
</div>
|
||
<div class="box-two-square"></div>
|
||
<div class="box-two-pic2"></div>
|
||
</div>
|
||
<div class="main-box-two" v-else>
|
||
<div class="box-two-tips">
|
||
<div class="box-two-pic2"></div>
|
||
<div class="box-square"></div>
|
||
<div class="box-title">
|
||
{{ $L("强大易用的协同创作云文档") }}
|
||
</div>
|
||
<div class="box-tips">
|
||
{{
|
||
$L("汇集文档、电子表格、思维笔记等多种在线工具，汇聚企业知识资源于一处，支持多人实时协同编辑，让团队协作更便捷。")
|
||
}}
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
<div class="main-box-one">
|
||
<div class="box-one-square"></div>
|
||
<div class="box-one-pic3"></div>
|
||
<div class="box-one-tips">
|
||
<div class="box-square"></div>
|
||
<div class="box-title">
|
||
{{ $L("便捷易用的项目管理模板") }}
|
||
</div>
|
||
<div class="box-tips">
|
||
{{
|
||
$L("模版满足多种团队协作场景，同时支持自定义模版，满足团队个性化场景管理需求，可直观的查看项目的进展情况，团队协作更方便。")
|
||
}}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="main-box-two" v-if="screenWidth>=1920">
|
||
<div class="box-two-tips">
|
||
<div class="box-square"></div>
|
||
<div class="box-title">
|
||
{{ $L("清晰直观的任务日历") }}
|
||
</div>
|
||
<div class="box-tips">
|
||
{{
|
||
$L("通过灵活的任务日历，轻松安排每一天的日程，把任务拆解到每天，让工作目标更清晰，时间分配更合理。")
|
||
}}
|
||
</div>
|
||
</div>
|
||
<div class="box-two-square"></div>
|
||
<div class="box-two-pic4"></div>
|
||
</div>
|
||
<div class="main-box-two" v-else>
|
||
<div class="box-two-tips">
|
||
<div class="box-two-pic4"></div>
|
||
<div class="box-square"></div>
|
||
<div class="box-title">
|
||
{{ $L("清晰直观的任务日历") }}
|
||
</div>
|
||
<div class="box-tips">
|
||
{{
|
||
$L("通过灵活的任务日历，轻松安排每一天的日程，把任务拆解到每天，让工作目标更清晰，时间分配更合理。")
|
||
}}
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
<div class="page-footer">
|
||
<div class="footer-service">
|
||
<div class="footer-bg-box">
|
||
<div class="box-title">
|
||
{{ $L("开启您的 Dootask 团队协作") }}
|
||
</div>
|
||
<div class="buttom-box">
|
||
<div class="login-btn" @click="login">
|
||
{{ $L("立即登录") }}
|
||
</div>
|
||
<div class="contact-btn">{{ $L("联系我们") }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="footer-opyright">
|
||
{{ $L("桂公网安备 31011002000058号 桂ICP备12020087号-3") }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
screenWidth: document.body.clientWidth,
|
||
};
|
||
},
|
||
watch: {
|
||
screenWidth(nVal) {
|
||
console.log(nVal);
|
||
},
|
||
},
|
||
computed: {
|
||
currentLanguage() {
|
||
return this.languageList[this.languageType] || "Language";
|
||
},
|
||
},
|
||
mounted() {
|
||
// if (this.$store.state.userId > 0) {
|
||
// this.goForward({path: '/manage/dashboard'}, true);
|
||
// } else {
|
||
// this.goForward({path: '/login'}, true);
|
||
// }
|
||
const that = this;
|
||
window.onresize=()=>{
|
||
window.screenWidth=document.body.clientWidth
|
||
that.screenWidth=window.screenWidth
|
||
}
|
||
console.log(this.screenWidth)
|
||
},
|
||
|
||
methods: {
|
||
login() {
|
||
this.goForward(
|
||
{
|
||
path: `/login`,
|
||
},
|
||
false
|
||
);
|
||
},
|
||
|
||
register() {
|
||
this.goForward(
|
||
{
|
||
path: `/login`,
|
||
query: {
|
||
type: "reg",
|
||
},
|
||
},
|
||
false
|
||
);
|
||
},
|
||
},
|
||
deactivated() {
|
||
// this.$destroy()
|
||
},
|
||
};
|
||
</script>
|