优化首页

This commit is contained in:
kuaifan 2022-03-17 17:51:40 +08:00
parent 1c2a7a219a
commit 64c0ae2734
14 changed files with 291 additions and 436 deletions

View File

Before

Width:  |  Height:  |  Size: 9.5 KiB

After

Width:  |  Height:  |  Size: 9.5 KiB

View File

Before

Width:  |  Height:  |  Size: 2.7 KiB

After

Width:  |  Height:  |  Size: 2.7 KiB

View File

@ -28,6 +28,7 @@ import TagInput from './components/TagInput.vue'
import TableAction from './components/TableAction.vue'
import QuickEdit from './components/QuickEdit.vue'
import UserAvatar from './components/UserAvatar.vue'
import ImgView from './components/ImgView.vue'
Vue.component('PageTitle', PageTitle);
Vue.component('Loading', Loading);
@ -36,6 +37,7 @@ Vue.component('TagInput', TagInput)
Vue.component('TableAction', TableAction);
Vue.component('QuickEdit', QuickEdit);
Vue.component('UserAvatar', UserAvatar);
Vue.component('ImgView', ImgView);
import {
Avatar,

View File

@ -0,0 +1,30 @@
<template>
<img :src="srcValue" :alt="alt">
</template>
<script>
export default {
name: 'ImgView',
props: {
src: {
default: ""
},
alt: {
default: ""
},
},
computed: {
srcValue() {
const {src} = this;
if (src.substring(0, 2) === "//" ||
src.substring(0, 7) === "http://" ||
src.substring(0, 8) === "https://" ||
src.substring(0, 6) === "ftp://" ||
src.substring(0, 1) === "/") {
return src;
}
return $A.apiUrl(`../${src}`)
}
}
}
</script>

View File

@ -6,78 +6,59 @@
<div class="header-nav-box">
<div class="logo no-dark-mode"></div>
</div>
<div class="header-nav-box header-nav-boxs" v-if="windowWidth>780">
<div class="header-nav-box header-nav-boxs" v-if="windowWidth > 780">
<div class="header-right-one">
<Dropdown trigger="click" @on-click="setLanguage">
<a
href="javascript:void(0)"
class="header-right-one-dropdown"Dootask
>
<a href="javascript:void(0)" class="header-right-one-dropdown">
{{ currentLanguage }}
<Icon type="ios-arrow-down"></Icon>
</a>
<DropdownMenu slot="list">
<Dropdown-item
<DropdownItem
v-for="(item, key) in languageList"
:key="key"
:name="key"
:selected="getLanguage() === key"
>{{ item }}
</Dropdown-item>
:selected="getLanguage() === key">{{ item }}</DropdownItem>
</DropdownMenu>
</Dropdown>
</div>
<div class="header-right-four">
<Dropdown trigger="click" @on-click="setTheme">
<a
href="javascript:void(0)"
class="header-right-one-dropdown"
>
{{$L('主题皮肤')}}
<Icon type="ios-arrow-down"></Icon>
<Dropdown trigger="click" @on-click="setTheme">
<a href="javascript:void(0)" class="header-right-one-dropdown">
{{$L('主题皮肤')}}
<Icon type="ios-arrow-down"></Icon>
</a>
<DropdownMenu slot="list">
<Dropdown-item v-for="(item, key) in themeList" :key="key" :name="item.value" :selected="themeMode === item.value">{{$L(item.name)}}</Dropdown-item>
<DropdownItem
v-for="(item, key) in themeList"
:key="key"
:name="item.value"
:selected="themeMode === item.value">{{$L(item.name)}}</DropdownItem>
</DropdownMenu>
</Dropdown>
</div>
<div class="header-right-two" @click="register">
{{ $L("注册账号") }}
</div>
<div class="header-right-three no-dark-mode" @click="login">
{{ $L("登录") }}
</div>
<div class="header-right-two" @click="register">{{ $L("注册账号") }}</div>
<div class="header-right-three no-dark-mode" @click="login">{{ $L("登录") }}</div>
</div>
<div class="header-nav-box header-nav-boxs" v-else>
<Dropdown trigger="click">
<a href="javascript:void(0)">
<Icon type="md-menu" class="header-nav-more"/>
</a>
<DropdownMenu slot="list">
<DropdownItem @click.native="login"> {{ $L("登录") }}</DropdownItem>
<DropdownItem @click.native="register"> {{ $L("注册账号") }}</DropdownItem>
<DropdownItem @click.native="login">{{ $L("登录") }}</DropdownItem>
<DropdownItem @click.native="register">{{ $L("注册账号") }}</DropdownItem>
<Dropdown placement="right-start" @on-click="setLanguage">
<DropdownItem>
<Icon
class="header-right-one-language no-dark-mode"
type="md-globe"/>
<a
href="javascript:void(0)"
class="header-right-one-dropdown"
>
{{ currentLanguage }}
</a>
<Icon class="header-right-one-language no-dark-mode" type="md-globe"/>
<a href="javascript:void(0)" class="header-right-one-dropdown">{{ currentLanguage }}</a>
</DropdownItem>
<DropdownMenu slot="list">
<Dropdown-item
<DropdownItem
v-for="(item, key) in languageList"
:key="key"
:name="key"
:selected="getLanguage() === key"
>{{ item }}
</Dropdown-item>
:selected="getLanguage() === key">{{ item }}</DropdownItem>
</DropdownMenu>
</Dropdown>
<Dropdown trigger="click" placement="right-end" @on-click="setTheme">
@ -88,24 +69,24 @@
</div>
</DropdownItem>
<DropdownMenu slot="list">
<Dropdown-item v-for="(item, key) in themeList" :key="key" :name="item.value" :selected="themeMode === item.value">{{$L(item.name)}}</Dropdown-item>
<DropdownItem
v-for="(item, key) in themeList"
:key="key"
:name="item.value"
:selected="themeMode === item.value">{{$L(item.name)}}</DropdownItem>
</DropdownMenu>
</Dropdown>
</DropdownMenu>
</Dropdown>
</div>
</div>
<div class="header-content">
<div class="header-title header-title-one">DooTask</div>
<div class="header-title header-title-one">{{appTitle}}</div>
<div class="header-title">
{{ $L("轻量级任务管理工具") }}
</div>
<div class="header-tips">
{{
$L("DooTask是一款轻量级的开源在线项目任务管理工具提供各类文档协作工具、在线思维导图、在线流程图、项目管理、任务分发、即时IM文件管理等工具。")
}}
{{ $L(`${appTitle}是一款轻量级的开源在线项目任务管理工具提供各类文档协作工具、在线思维导图、在线流程图、项目管理、任务分发、即时IM文件管理等工具。`) }}
</div>
<div class="login-buttom no-dark-mode" @click="login">
{{ $L("登录") }}
@ -114,68 +95,68 @@
</div>
<div class="page-header-bottom">
<div class="page-header-bottoms">
<img :src="themeMode==='dark' ? 'images/index/pic_black.png':'images/index/pic.png'">
<ImgView :src="themeIsDark ? 'images/index/pic_black.png':'images/index/pic.png'"/>
</div>
</div>
<div class="page-main">
<Row :class="windowWidth>1200 ? 'page-main-row':'page-main-rows'">
<Col :class="windowWidth>1200 ? 'page-main-img':'page-main-imgs'" :xs="24" :sm="24" :xl="12">
<img :src="themeMode==='dark' ? 'images/index/pic1_black.png':'images/index/pic1.png'">
<Row :class="windowWidth > 1200 ? 'page-main-row':'page-main-rows'">
<Col :class="windowWidth > 1200 ? 'page-main-img':'page-main-imgs'" :xs="24" :sm="24" :xl="12">
<ImgView :src="themeIsDark ? 'images/index/pic1_black.png':'images/index/pic1.png'"/>
</Col>
<Col class="page-main-text" :xs="24" :sm="24" :xl="12" v-if="windowWidth>1200">
<img src="images/index/square.png">
<Col class="page-main-text" :xs="24" :sm="24" :xl="12" v-if="windowWidth > 1200">
<ImgView src="images/index/square.png"/>
<h3>{{$L('高效便捷的团队沟通工具')}}</h3>
<p>{{$L('针对项目和任务建立群组,工作问题可及时沟通,促进团队快速协作,提高团队工作效率。')}}</p>
</Col>
<Col class="page-main-text page-main-texts" :xs="24" :sm="24" :xl="12" v-else>
<h3><img src="images/index/square.png">{{$L('高效便捷的团队沟通工具')}}</h3>
<h3><ImgView src="images/index/square.png"/>{{$L('高效便捷的团队沟通工具')}}</h3>
<p>{{$L('针对项目和任务建立群组,工作问题可及时沟通,促进团队快速协作,提高团队工作效率。')}}</p>
</Col>
</Row>
<Row :class="windowWidth>1200 ? 'page-main-row':'page-main-rows'">
<Col class="page-main-text" :xs="24" :sm="24" :xl="12" v-if="windowWidth>1200">
<img src="images/index/square.png">
<Row :class="windowWidth > 1200 ? 'page-main-row':'page-main-rows'">
<Col class="page-main-text" :xs="24" :sm="24" :xl="12" v-if="windowWidth > 1200">
<ImgView src="images/index/square.png"/>
<h3>{{$L('强大易用的协同创作云文档')}}</h3>
<p>{{$L('汇集文档、电子表格、思维笔记等多种在线工具,汇聚企业知识资源于一处,支持多人实时协同编辑,让团队协作更便捷。')}}</p>
</Col>
<Col :class="windowWidth>1200 ? 'page-main-img':'page-main-imgs'" :xs="24" :sm="24" :xl="12">
<img :src="themeMode==='dark' ? 'images/index/pic2_black.png':'images/index/pic2.png'">
<Col :class="windowWidth > 1200 ? 'page-main-img':'page-main-imgs'" :xs="24" :sm="24" :xl="12">
<ImgView :src="themeIsDark ? 'images/index/pic2_black.png':'images/index/pic2.png'"/>
</Col>
<Col class="page-main-text page-main-texts" :xs="24" :sm="24" :xl="12" v-if="windowWidth<=1200">
<h3><img src="images/index/square.png">{{$L('强大易用的协同创作云文档')}}</h3>
<h3><ImgView src="images/index/square.png"/>{{$L('强大易用的协同创作云文档')}}</h3>
<p>{{$L('汇集文档、电子表格、思维笔记等多种在线工具,汇聚企业知识资源于一处,支持多人实时协同编辑,让团队协作更便捷。')}}</p>
</Col>
</Row>
<Row :class="windowWidth>1200 ? 'page-main-row':'page-main-rows'">
<Col :class="windowWidth>1200 ? 'page-main-img':'page-main-imgs'" :xs="24" :sm="24" :xl="12">
<img :src="themeMode==='dark' ? 'images/index/pic3_black.png':'images/index/pic3.png'">
<Row :class="windowWidth > 1200 ? 'page-main-row':'page-main-rows'">
<Col :class="windowWidth > 1200 ? 'page-main-img':'page-main-imgs'" :xs="24" :sm="24" :xl="12">
<ImgView :src="themeIsDark ? 'images/index/pic3_black.png':'images/index/pic3.png'"/>
</Col>
<Col class="page-main-text" :xs="24" :sm="24" :xl="12" v-if="windowWidth>1200">
<img src="images/index/square.png">
<Col class="page-main-text" :xs="24" :sm="24" :xl="12" v-if="windowWidth > 1200">
<ImgView src="images/index/square.png"/>
<h3>{{$L('便捷易用的项目管理模板')}}</h3>
<p>{{$L('模版满足多种团队协作场景,同时支持自定义模版,满足团队个性化场景管理需求,可直观的查看项目的进展情况,团队协作更方便。')}}</p>
</Col>
<Col class="page-main-text page-main-texts" :xs="24" :sm="24" :xl="12" v-else>
<h3><img src="images/index/square.png">{{$L('便捷易用的项目管理模板')}}</h3>
<h3><ImgView src="images/index/square.png"/>{{$L('便捷易用的项目管理模板')}}</h3>
<p>{{$L('模版满足多种团队协作场景,同时支持自定义模版,满足团队个性化场景管理需求,可直观的查看项目的进展情况,团队协作更方便。')}}</p>
</Col>
</Row>
<Row :class="windowWidth>1200 ? 'page-main-row':'page-main-rows'">
<Col class="page-main-text" :xs="24" :sm="24" :xl="12" v-if="windowWidth>1200">
<img src="images/index/square.png">
<Row :class="windowWidth > 1200 ? 'page-main-row':'page-main-rows'">
<Col class="page-main-text" :xs="24" :sm="24" :xl="12" v-if="windowWidth > 1200">
<ImgView src="images/index/square.png"/>
<h3>{{$L('清晰直观的任务日历')}}</h3>
<p>{{$L('通过灵活的任务日历,轻松安排每一天的日程,把任务拆解到每天,让工作目标更清晰,时间分配更合理。')}}</p>
</Col>
<Col :class="windowWidth>1200 ? 'page-main-img':'page-main-imgs'" :xs="24" :sm="24" :xl="12">
<img :src="themeMode==='dark' ? 'images/index/pic4_black.png':'images/index/pic4.png'">
<Col :class="windowWidth > 1200 ? 'page-main-img':'page-main-imgs'" :xs="24" :sm="24" :xl="12">
<ImgView :src="themeIsDark ? 'images/index/pic4_black.png':'images/index/pic4.png'"/>
</Col>
<Col class="page-main-text page-main-texts" :xs="24" :sm="24" :xl="12" v-if="windowWidth<=1200">
<h3><img src="images/index/square.png">{{$L('清晰直观的任务日历')}}</h3>
<Col class="page-main-text page-main-texts" :xs="24" :sm="24" :xl="12" v-if="windowWidth <= 1200">
<h3><ImgView src="images/index/square.png"/>{{$L('清晰直观的任务日历')}}</h3>
<p>{{$L('通过灵活的任务日历,轻松安排每一天的日程,把任务拆解到每天,让工作目标更清晰,时间分配更合理。')}}</p>
</Col>
</Row>
@ -183,18 +164,14 @@
<div class="page-footer">
<div class="footer-service no-dark-mode">
<div class="footer-bg-box">
<div class="box-title">
{{ $L("开启您的 Dootask 团队协作") }}
</div>
<div class="box-title">{{ $L(`开启您的 ${appTitle} 团队协作`) }}</div>
<div class="buttom-box">
<div class="login-btn" @click="login">
{{ $L("立即登录") }}
</div>
<div class="contact-btn">{{ $L("联系我们") }}</div>
<div class="login-btn" @click="login">{{ $L("立即登录") }}</div>
<div class="reg-btn" @click="register">{{ $L("注册") }}</div>
</div>
</div>
</div>
<div class="footer-opyright" v-if="this.homeFooter" v-html="this.homeFooter"></div>
<div class="footer-copyright" v-if="this.homeFooter" v-html="this.homeFooter"></div>
</div>
</div>
</div>
@ -202,6 +179,7 @@
<script>
import {mapState} from "vuex";
export default {
data() {
return {
@ -210,11 +188,15 @@ export default {
};
},
computed: {
...mapState(['userId', 'windowWidth','themeMode', 'themeList',]),
...mapState(['userId', 'windowWidth', 'themeMode', 'themeIsDark', 'themeList',]),
currentLanguage() {
return this.languageList[this.languageType] || "Language";
},
appTitle() {
return window.systemInfo.title || "DooTask";
},
},
mounted() {
this.getNeedStartHome();
@ -226,11 +208,11 @@ export default {
},
login() {
this.goForward({path: `/login`}, false);
this.goForward({name: 'login'});
},
register() {
this.goForward({path: `/login`, query: {type: "reg"}}, false);
this.goForward({name: 'login', query: {type: "reg"}});
},
getNeedStartHome() {

View File

@ -2,7 +2,7 @@
<div class="page-login">
<PageTitle :title="$L('登录')"/>
<div class="login-body">
<div class="login-logo no-dark-mode"></div>
<div class="login-logo no-dark-mode" :class="{'can-click':needStartHome}" @click="goHome"></div>
<div class="login-box">
<div class="login-title">{{welcomeTitle}}</div>
@ -45,7 +45,11 @@
</div>
</DropdownItem>
<DropdownMenu slot="list">
<Dropdown-item v-for="(item, key) in themeList" :key="key" :name="item.value" :selected="themeMode === item.value">{{$L(item.name)}}</Dropdown-item>
<DropdownItem
v-for="(item, key) in themeList"
:key="key"
:name="item.value"
:selected="themeMode === item.value">{{$L(item.name)}}</DropdownItem>
</DropdownMenu>
</Dropdown>
<Dropdown placement="right-end" @on-click="setLanguage">
@ -56,7 +60,11 @@
</div>
</DropdownItem>
<DropdownMenu slot="list">
<Dropdown-item v-for="(item, key) in languageList" :key="key" :name="key" :selected="getLanguage() === key">{{item}}</Dropdown-item>
<DropdownItem
v-for="(item, key) in languageList"
:key="key"
:name="key"
:selected="getLanguage() === key">{{item}}</DropdownItem>
</DropdownMenu>
</Dropdown>
</DropdownMenu>
@ -88,7 +96,7 @@ export default {
code: '',
invite: '',
demoAccount: {},
needStartHome: false,
needInvite: false,
@ -97,6 +105,7 @@ export default {
},
mounted() {
this.getDemoAccount();
this.getNeedStartHome();
//
if (this.$Electron) {
this.chackServerUrl().catch(() => {});
@ -168,6 +177,12 @@ export default {
}
},
methods: {
goHome() {
if (this.needStartHome) {
this.goForward({name: 'index'});
}
},
setTheme(mode) {
this.$store.dispatch("setTheme", mode)
},
@ -179,13 +194,22 @@ export default {
this.$store.dispatch("call", {
url: 'system/demo',
}).then(({data}) => {
this.demoAccount = data;
if (data.account) {
this.email = data.account;
this.password = data.password;
}
}).catch(() => {
this.demoAccount = {};
//
});
},
getNeedStartHome() {
this.$store.dispatch("call", {
url: "system/get/starthome",
}).then(({data}) => {
this.needStartHome = !!data.need_start;
}).catch(() => {
this.needStartHome = false;
});
},

View File

@ -48,6 +48,8 @@
}
}
.flow {
display: flex;
align-items: center;
margin-right: 10px;
> span {
font-size: 14px;
@ -60,6 +62,9 @@
display: inline-block;
text-align: center;
cursor: pointer;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
&.start,
&.archived {
background-color: rgba(38, 38, 38, 0.05);

View File

@ -5,6 +5,7 @@
width: 100%;
height: 100%;
overflow: auto;
.page-warp {
max-width: 1920px;
margin: 0 auto;
@ -33,7 +34,7 @@
.logo {
width: 143px;
height: 36px;
background: url("../images/index/logo.svg") no-repeat center center;
background: url("../images/logo-index.svg") no-repeat center center;
background-size: contain;
}
@ -82,7 +83,6 @@
}
}
}
}
}
@ -102,7 +102,7 @@
margin: 0 auto;
.header-title {
font-size: 48px;
font-size: 44px;
font-weight: 500;
color: #ffffff;
line-height: 67px;
@ -110,17 +110,19 @@
}
.header-title-one {
font-size: 48px;
margin-top: 40px;
}
.header-tips {
font-size: 24px;
font-size: 22px;
font-weight: 400;
color: #ffffff;
line-height: 36px;
text-align: center;
padding: 0 30px;
margin-top: 22px;
margin: 22px auto 0;
max-width: 88%;
}
.login-buttom {
@ -137,12 +139,11 @@
cursor: pointer;
}
}
}
.page-header-bottom {
position: relative;
background: #FFFFFF url("../images/index/bg_bottom.svg") no-repeat;
background: #FFFFFF url("../images/index/bg-bottom.svg") no-repeat;
background-size: 100%;
margin-bottom: 190px;
margin-top: -2px;
@ -268,7 +269,7 @@
cursor: pointer;
}
.contact-btn {
.reg-btn {
width: 150px;
height: 48px;
border-radius: 8px;
@ -284,7 +285,7 @@
}
}
.footer-opyright {
.footer-copyright {
width: 100%;
height: 60px;
background: #ffffff;
@ -304,119 +305,41 @@
.page-header {
.header-content {
.header-title {
font-size: 44px;
font-size: 34px;
line-height: 60px;
font-weight: 600;
}
.header-title-one {
margin-top: 40px;
font-size: 40px;
}
.header-tips {
font-size: 22px;
font-size: 20px;
padding: 0 20px;
font-weight: 400;
line-height: 36px;
}
.login-buttom {
width: 150px;
height: 48px;
background: #ffa25a;
border-radius: 8px;
font-size: 18px;
font-weight: 500;
color: #ffffff;
line-height: 48px;
text-align: center;
margin: 34px auto 0;
cursor: pointer;
}
}
}
.page-header-bottom {
position: relative;
background: #FFFFFF url("../images/index/bg_bottom.svg") no-repeat;
background-size: 100%;
margin-bottom: 100px;
margin-top: -2px;
.page-header-bottoms {
max-width: 1200px;
margin: auto;
top: 0;
left: 0;
right: 0;
img {
display: block;
margin: auto;
width: 80%;
}
}
}
.page-main {
max-width: 1200px;
margin: auto;
.page-main-row {
margin-bottom: 150px;
}
.page-main-rows {
margin-bottom: 140px;
}
.page-main-img {
img {
width: 100%;
}
}
.page-main-imgs {
img {
display: block;
width: 90%;
margin: auto;
}
}
.page-main-text {
padding-left: 20px;
padding-top: 80px;
h3 {
font-size: 32px;
font-weight: 500;
color: #333333;
line-height: 45px;
margin-bottom: 17px;
}
p {
font-size: 18px;
font-weight: 400;
color: #828282;
line-height: 28px;
padding-right: 20px;
}
}
.page-main-texts {
padding-top: 40px;
h3 {
display: flex;
align-items: center;
font-size: 24px;
img {
width: 24px;
margin-right: 10px;
}
}
@ -425,74 +348,6 @@
}
}
}
.page-footer {
.footer-service {
width: 100%;
height: 188px;
background-color: #ffa25a;
position: relative;
.footer-bg-box {
overflow: hidden;
width: 100%;
height: 188px;
.box-title {
height: 45px;
font-size: 16px;
font-weight: 500;
color: #ffffff;
line-height: 45px;
text-align: center;
margin: 33px 0 22px 0;
}
.buttom-box {
display: flex;
justify-content: center;
.login-btn {
width: 150px;
height: 48px;
background: #ffffff;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
color: #ffa25a;
line-height: 48px;
text-align: center;
margin-right: 20px;
cursor: pointer;
}
.contact-btn {
width: 150px;
height: 48px;
border-radius: 8px;
border: 1px solid #ffffff;
font-size: 14px;
font-weight: 500;
color: #ffffff;
line-height: 48px;
text-align: center;
cursor: pointer;
}
}
}
}
.footer-opyright {
width: 100%;
height: 60px;
background: #ffffff;
text-align: center;
font-size: 12px;
font-weight: 400;
color: #828282;
line-height: 60px;
}
}
}
}
}
@ -504,200 +359,19 @@
.header-content {
.header-title {
font-size: 24px;
line-height: 34px;
font-weight: 600;
line-height: 38px;
}
.header-title-one {
margin-top: 40px;
font-size: 28px;
}
.header-tips {
font-size: 16px;
padding: 0 20px;
font-weight: 400;
line-height: 26px;
}
.login-buttom {
width: 150px;
height: 48px;
background: #ffa25a;
border-radius: 8px;
font-size: 18px;
font-weight: 500;
color: #ffffff;
line-height: 48px;
text-align: center;
margin: 34px auto 0;
cursor: pointer;
}
}
}
.page-header-bottom {
position: relative;
background: #FFFFFF url("../images/index/bg_bottom.svg") no-repeat;
background-size: 100%;
margin-bottom: 100px;
margin-top: -2px;
.page-header-bottoms {
max-width: 1200px;
margin: auto;
top: 0;
left: 0;
right: 0;
img {
display: block;
margin: auto;
width: 80%;
}
}
}
.page-main {
max-width: 1200px;
margin: auto;
.page-main-row {
margin-bottom: 150px;
}
.page-main-rows {
margin-bottom: 140px;
}
.page-main-img {
img {
width: 100%;
}
}
.page-main-imgs {
img {
display: block;
width: 90%;
margin: auto;
}
}
.page-main-text {
padding-left: 20px;
padding-top: 80px;
h3 {
font-size: 32px;
font-weight: 500;
color: #333333;
line-height: 45px;
margin-bottom: 17px;
}
p {
font-size: 18px;
font-weight: 400;
color: #828282;
line-height: 28px;
padding-right: 20px;
}
}
.page-main-texts {
padding-top: 40px;
h3 {
display: flex;
align-items: center;
font-size: 24px;
img {
width: 24px;
margin-right: 10px;
}
}
p {
font-size: 14px;
}
}
}
.page-footer {
.footer-service {
width: 100%;
height: 188px;
background-color: #ffa25a;
position: relative;
.footer-bg-box {
overflow: hidden;
width: 100%;
height: 188px;
.box-title {
height: 45px;
font-size: 16px;
font-weight: 500;
color: #ffffff;
line-height: 45px;
text-align: center;
margin: 33px 0 22px 0;
}
.buttom-box {
display: flex;
justify-content: center;
.login-btn {
width: 150px;
height: 48px;
background: #ffffff;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
color: #ffa25a;
line-height: 48px;
text-align: center;
margin-right: 20px;
cursor: pointer;
}
.contact-btn {
width: 150px;
height: 48px;
border-radius: 8px;
border: 1px solid #ffffff;
font-size: 14px;
font-weight: 500;
color: #ffffff;
line-height: 48px;
text-align: center;
cursor: pointer;
}
}
}
}
.footer-opyright {
width: 100%;
height: 60px;
background: #ffffff;
text-align: center;
font-size: 12px;
font-weight: 400;
color: #828282;
line-height: 60px;
}
}
}
}
}
.client-downloads {
position: fixed;
right: 20px;
bottom: 20px;
}

View File

@ -22,6 +22,9 @@
height: 68px;
background: url("../images/logo.svg") no-repeat center center;
background-size: contain;
&.can-click {
cursor: pointer;
}
}
.login-box {
margin-top: 32px;

View File

@ -197,17 +197,17 @@
height: 38px;
line-height: 38px;
}
.num {
font-size: 12px;
padding-left: 16px;
}
.icon-top {
padding-left: 8px;
width: 14px;
height: 14px;
background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IuWbvuWxgl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiCiAgICAgeT0iMHB4IgogICAgIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjQgMjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojOEJDRjcwO30KPC9zdHlsZT4wCiAgICA8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMjAuNyw4LjFjLTEuNS0xLjUtNC40LTQuNC00LjQtNC40Yy0xLjItMS4yLTIuNS0xLjQtMy40LTAuN2MtMC41LDAuNC0wLjcsMC45LTAuOCwxLjRjLTAuMSwwLjUtMC40LDEtMC44LDEuMwoJbC0wLjEsMC4xYy0yLDEuNS00LjMsMi44LTYuOCwzLjJDMy45LDkuMiwzLjMsOS41LDMsMTBjLTAuNiwwLjktMC40LDIuMSwwLjMsMi45bDMuNCwzLjRjMCwwLDAsMCwwLDBsLTMuMSwzLjEKCWMtMC4zLDAuMy0wLjMsMC44LDAsMS4xYzAuMSwwLjEsMC4zLDAuMiwwLjUsMC4yYzAuMiwwLDAuNC0wLjEsMC41LTAuMmwzLjEtMy4xYzAsMCwwLDAsMCwwbDIuOSwyLjljMS4zLDEuMywyLjUsMS41LDMuNCwwLjkKCWMwLjQtMC4zLDAuNy0wLjcsMC45LTEuMmMwLjYtMi4zLDEuNC00LjYsMi44LTYuNWwwLjUtMC43YzAuMy0wLjQsMC44LTAuOCwxLjMtMC44YzAuNS0wLjEsMS4xLTAuMywxLjQtMC44CglDMjEuNywxMC4yLDIxLjUsOC45LDIwLjcsOC4xeiIvPgo8L3N2Zz4K") no-repeat center center;
background-size: contain;
}
.num {
padding-left: 8px;
font-size: 12px;
}
}
.project-h2 {
display: none;

View File

@ -0,0 +1,102 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="1920px" height="370px" viewBox="0 0 1920 370" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>bg</title>
<defs>
<rect id="path-1" x="0" y="0" width="1920" height="370"></rect>
<rect id="path-3" x="0" y="4.54747351e-13" width="300" height="223"></rect>
</defs>
<g id="Dootask官网" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(0.000000, -481.000000)" id="pic">
<g transform="translate(0.000000, 71.000000)">
<g id="bg" transform="translate(0.000000, 410.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="蒙版" fill="#8BCF70" opacity="0" xlink:href="#path-1"></use>
<path d="M0,-410 L1920,-410 L1920,70 C1920,235.685425 1785.68542,370 1620,370 L300,370 C134.314575,370 2.02906125e-14,235.685425 0,70 L0,-410 L0,-410 Z" id="矩形" fill="#8BCF70" mask="url(#mask-2)"></path>
<g id="decoration" mask="url(#mask-2)" opacity="0.2">
<g transform="translate(259.000000, 159.000000)" id="圆">
<circle id="椭圆形备份-63" fill="#FFFFFF" cx="50" cy="50" r="50"></circle>
</g>
</g>
<g id="椭圆形" mask="url(#mask-2)">
<g transform="translate(1209.000000, 147.000000)">
<mask id="mask-4" fill="white">
<use xlink:href="#path-3"></use>
</mask>
<use id="蒙版" stroke="none" fill="#D8D8D8" fill-rule="evenodd" opacity="0" xlink:href="#path-3"></use>
<circle id="椭圆形" stroke="none" fill="#FFFFFF" fill-rule="evenodd" opacity="0.2" mask="url(#mask-4)" cx="150" cy="150" r="150"></circle>
</g>
</g>
<g id="decoration" opacity="0.5" mask="url(#mask-2)" fill="#FFFFFF">
<g transform="translate(525.000000, -0.000000)">
<circle id="椭圆形" cx="3.24324324" cy="3.24324324" r="3.24324324"></circle>
<circle id="椭圆形备份-6" cx="3.24324324" cy="25.9459459" r="3.24324324"></circle>
<circle id="椭圆形备份-12" cx="3.24324324" cy="48.6486486" r="3.24324324"></circle>
<circle id="椭圆形备份-18" cx="3.24324324" cy="71.3513514" r="3.24324324"></circle>
<circle id="椭圆形备份-36" cx="3.24324324" cy="94.3513514" r="3.24324324"></circle>
<circle id="椭圆形备份-45" cx="3.24324324" cy="117.351351" r="3.24324324"></circle>
<circle id="椭圆形备份-54" cx="3.24324324" cy="140.351351" r="3.24324324"></circle>
<circle id="椭圆形备份-2" cx="48.6486486" cy="3.24324324" r="3.24324324"></circle>
<circle id="椭圆形备份-7" cx="48.6486486" cy="25.9459459" r="3.24324324"></circle>
<circle id="椭圆形备份-13" cx="48.6486486" cy="48.6486486" r="3.24324324"></circle>
<circle id="椭圆形备份-19" cx="48.6486486" cy="71.3513514" r="3.24324324"></circle>
<circle id="椭圆形备份-37" cx="48.6486486" cy="94.3513514" r="3.24324324"></circle>
<circle id="椭圆形备份-46" cx="48.6486486" cy="117.351351" r="3.24324324"></circle>
<circle id="椭圆形备份-55" cx="48.6486486" cy="140.351351" r="3.24324324"></circle>
<circle id="椭圆形备份-4" cx="94.0540541" cy="3.24324324" r="3.24324324"></circle>
<circle id="椭圆形备份-8" cx="94.0540541" cy="25.9459459" r="3.24324324"></circle>
<circle id="椭圆形备份-14" cx="94.0540541" cy="48.6486486" r="3.24324324"></circle>
<circle id="椭圆形备份-20" cx="94.0540541" cy="71.3513514" r="3.24324324"></circle>
<circle id="椭圆形备份-38" cx="94.0540541" cy="94.3513514" r="3.24324324"></circle>
<circle id="椭圆形备份-47" cx="94.0540541" cy="117.351351" r="3.24324324"></circle>
<circle id="椭圆形备份-56" cx="94.0540541" cy="140.351351" r="3.24324324"></circle>
<circle id="椭圆形备份" cx="25.9459459" cy="3.24324324" r="3.24324324"></circle>
<circle id="椭圆形备份-9" cx="25.9459459" cy="25.9459459" r="3.24324324"></circle>
<circle id="椭圆形备份-15" cx="25.9459459" cy="48.6486486" r="3.24324324"></circle>
<circle id="椭圆形备份-21" cx="25.9459459" cy="71.3513514" r="3.24324324"></circle>
<circle id="椭圆形备份-39" cx="25.9459459" cy="94.3513514" r="3.24324324"></circle>
<circle id="椭圆形备份-48" cx="25.9459459" cy="117.351351" r="3.24324324"></circle>
<circle id="椭圆形备份-57" cx="25.9459459" cy="140.351351" r="3.24324324"></circle>
<circle id="椭圆形备份-3" cx="71.3513514" cy="3.24324324" r="3.24324324"></circle>
<circle id="椭圆形备份-10" cx="71.3513514" cy="25.9459459" r="3.24324324"></circle>
<circle id="椭圆形备份-16" cx="71.3513514" cy="48.6486486" r="3.24324324"></circle>
<circle id="椭圆形备份-22" cx="71.3513514" cy="71.3513514" r="3.24324324"></circle>
<circle id="椭圆形备份-40" cx="71.3513514" cy="94.3513514" r="3.24324324"></circle>
<circle id="椭圆形备份-49" cx="71.3513514" cy="117.351351" r="3.24324324"></circle>
<circle id="椭圆形备份-58" cx="71.3513514" cy="140.351351" r="3.24324324"></circle>
<circle id="椭圆形备份-5" cx="116.756757" cy="3.24324324" r="3.24324324"></circle>
<circle id="椭圆形备份-24" cx="139.756757" cy="3.24324324" r="3.24324324"></circle>
<circle id="椭圆形备份-28" cx="162.756757" cy="3.24324324" r="3.24324324"></circle>
<circle id="椭圆形备份-32" cx="185.756757" cy="3.24324324" r="3.24324324"></circle>
<circle id="椭圆形备份-11" cx="116.756757" cy="25.9459459" r="3.24324324"></circle>
<circle id="椭圆形备份-25" cx="139.756757" cy="25.9459459" r="3.24324324"></circle>
<circle id="椭圆形备份-29" cx="162.756757" cy="25.9459459" r="3.24324324"></circle>
<circle id="椭圆形备份-33" cx="185.756757" cy="25.9459459" r="3.24324324"></circle>
<circle id="椭圆形备份-17" cx="116.756757" cy="48.6486486" r="3.24324324"></circle>
<circle id="椭圆形备份-26" cx="139.756757" cy="48.6486486" r="3.24324324"></circle>
<circle id="椭圆形备份-30" cx="162.756757" cy="48.6486486" r="3.24324324"></circle>
<circle id="椭圆形备份-34" cx="185.756757" cy="48.6486486" r="3.24324324"></circle>
<circle id="椭圆形备份-23" cx="116.756757" cy="71.3513514" r="3.24324324"></circle>
<circle id="椭圆形备份-41" cx="116.756757" cy="94.3513514" r="3.24324324"></circle>
<circle id="椭圆形备份-50" cx="116.756757" cy="117.351351" r="3.24324324"></circle>
<circle id="椭圆形备份-59" cx="116.756757" cy="140.351351" r="3.24324324"></circle>
<circle id="椭圆形备份-27" cx="139.756757" cy="71.3513514" r="3.24324324"></circle>
<circle id="椭圆形备份-42" cx="139.756757" cy="94.3513514" r="3.24324324"></circle>
<circle id="椭圆形备份-51" cx="139.756757" cy="117.351351" r="3.24324324"></circle>
<circle id="椭圆形备份-60" cx="139.756757" cy="140.351351" r="3.24324324"></circle>
<circle id="椭圆形备份-31" cx="162.756757" cy="71.3513514" r="3.24324324"></circle>
<circle id="椭圆形备份-43" cx="162.756757" cy="94.3513514" r="3.24324324"></circle>
<circle id="椭圆形备份-52" cx="162.756757" cy="117.351351" r="3.24324324"></circle>
<circle id="椭圆形备份-61" cx="162.756757" cy="140.351351" r="3.24324324"></circle>
<circle id="椭圆形备份-35" cx="185.756757" cy="71.3513514" r="3.24324324"></circle>
<circle id="椭圆形备份-44" cx="185.756757" cy="94.3513514" r="3.24324324"></circle>
<circle id="椭圆形备份-53" cx="185.756757" cy="117.351351" r="3.24324324"></circle>
<circle id="椭圆形备份-62" cx="185.756757" cy="140.351351" r="3.24324324"></circle>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 9.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 592 B

View File

@ -0,0 +1,33 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="149px" height="36px" viewBox="0 0 149 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>logo</title>
<defs>
<polygon id="path-1" points="0 0 39.9999579 0 39.9999579 36 0 36"></polygon>
<polygon id="path-3" points="0 3.00936101e-15 26.7979088 3.00936101e-15 26.7979088 26.9534011 0 26.9534011"></polygon>
</defs>
<g id="Dootask官网" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-380.000000, -18.000000)" id="导航栏">
<g id="logo" transform="translate(380.000000, 18.000000)">
<g id="编组">
<g transform="translate(0.000042, 0.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<g id="Clip-2"></g>
<path d="M34.7431762,5.28777093 C32.5537013,3.08329775 29.7854894,1.49654294 26.7263299,0.61411837 C25.4092765,0.23421204 23.5263282,0 22.1052748,0 L0,0 L0,9.05295183 L6.24421381,15.3317827 L6.3157928,15.4037828 L6.3157928,6.35294865 L22.1052748,6.35294865 C23.7179072,6.35294865 25.2840133,6.68753728 26.7263299,7.32706744 C28.0292779,7.90518577 29.2313838,8.72895145 30.2755949,9.77930562 C32.4737013,11.9901318 33.6842283,14.9082528 33.6842283,18.0000212 C33.6842283,21.0917895 32.4737013,24.0120282 30.2755949,26.2207367 C28.0800148,28.4315629 25.1768554,29.6470937 22.1052748,29.6470937 L15.2505343,29.6470937 L8.93474154,36.0000424 L22.1052748,36.0000424 C31.9473852,36.0000424 40.0000211,27.9000328 40.0000211,18.0000212 C40.0000211,13.0489565 37.9873884,8.55106888 34.7431762,5.28777093" id="Fill-1" fill="#FFFFFF" mask="url(#mask-2)"></path>
</g>
<g transform="translate(0.000000, 9.046599)">
<mask id="mask-4" fill="white">
<use xlink:href="#path-3"></use>
</mask>
<g id="Clip-4"></g>
<polygon id="Fill-3" fill="#FFDD33" mask="url(#mask-4)" points="26.7979088 3.00936101e-15 26.7979088 8.98518704 15.2505343 20.6004948 8.93474154 26.9534435 0 17.9661388 0 8.98730469 0.00210526427 8.98518704 6.3157928 15.3339004 8.93474154 17.9682564"></polygon>
</g>
</g>
<text id="DooTask" font-family="PingFangSC-Semibold, PingFang SC" font-size="22" font-weight="500" fill="#FFFFFF">
<tspan x="56" y="26">DooTask</tspan>
</text>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.7 KiB