mirror of
https://github.com/kuaifan/dootask.git
synced 2025-12-12 11:19:56 +00:00
fix:首页重写
This commit is contained in:
mmppkka
parent
7c82769448
commit
c6ea524821
102
public/images/index/bg_bottom.svg
Normal file
102
public/images/index/bg_bottom.svg
Normal 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 |
BIN
public/images/index/pic1 _black.png
Normal file
BIN
public/images/index/pic1 _black.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
BIN
public/images/index/pic1.png
Normal file
BIN
public/images/index/pic1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
BIN
public/images/index/pic1_black.png
Normal file
BIN
public/images/index/pic1_black.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
BIN
public/images/index/pic2 _black.png
Normal file
BIN
public/images/index/pic2 _black.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
BIN
public/images/index/pic2.png
Normal file
BIN
public/images/index/pic2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
BIN
public/images/index/pic2_black.png
Normal file
BIN
public/images/index/pic2_black.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
BIN
public/images/index/pic3 _black.png
Normal file
BIN
public/images/index/pic3 _black.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
BIN
public/images/index/pic3.png
Normal file
BIN
public/images/index/pic3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 75 KiB |
BIN
public/images/index/pic3_black.png
Normal file
BIN
public/images/index/pic3_black.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
BIN
public/images/index/pic4 _black.png
Normal file
BIN
public/images/index/pic4 _black.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
BIN
public/images/index/pic4.png
Normal file
BIN
public/images/index/pic4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
BIN
public/images/index/pic4_black.png
Normal file
BIN
public/images/index/pic4_black.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
BIN
public/images/index/pic_black.png
Normal file
BIN
public/images/index/pic_black.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 123 KiB |
@ -93,7 +93,7 @@ export default {
|
||||
},
|
||||
|
||||
showDown() {
|
||||
return this.repoStatus && this.isDesktop && ['login', 'manage-dashboard'].includes(this.$route.name)
|
||||
return this.repoStatus && this.isDesktop && ['login','index', 'manage-dashboard'].includes(this.$route.name)
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
<div class="header-nav-box">
|
||||
<div class="logo no-dark-mode"></div>
|
||||
</div>
|
||||
<div class="header-nav-box">
|
||||
<div class="header-nav-box header-nav-boxs" v-if="windowWidth>780">
|
||||
<div class="header-right-one">
|
||||
<Dropdown trigger="click" @on-click="setLanguage">
|
||||
<Icon
|
||||
@ -15,7 +15,7 @@
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
class="header-right-one-dropdown"
|
||||
v-if="windowWidth>441">
|
||||
>
|
||||
{{ currentLanguage }}
|
||||
<Icon type="ios-arrow-down"></Icon>
|
||||
</a>
|
||||
@ -30,6 +30,20 @@
|
||||
</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>
|
||||
</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>
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
</div>
|
||||
<div class="header-right-two" @click="register">
|
||||
{{ $L("注册账号") }}
|
||||
</div>
|
||||
@ -37,6 +51,53 @@
|
||||
{{ $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>
|
||||
<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>
|
||||
</DropdownItem>
|
||||
<DropdownMenu slot="list">
|
||||
<Dropdown-item
|
||||
v-for="(item, key) in languageList"
|
||||
:key="key"
|
||||
:name="key"
|
||||
:selected="getLanguage() === key"
|
||||
>{{ item }}
|
||||
</Dropdown-item>
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
<Dropdown trigger="click" placement="right-end" @on-click="setTheme">
|
||||
<DropdownItem>
|
||||
<div class="login-setting-item">
|
||||
{{$L('主题皮肤')}}
|
||||
<Icon type="ios-arrow-forward"></Icon>
|
||||
</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>
|
||||
</DropdownMenu>
|
||||
|
||||
</Dropdown>
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="header-content">
|
||||
<div class="header-title header-title-one">Dootask</div>
|
||||
@ -52,111 +113,74 @@
|
||||
{{ $L("登录") }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="header-bg"></div>
|
||||
<div class="header-pic no-dark-mode"></div>
|
||||
</div>
|
||||
<div class="page-header-bottom">
|
||||
<div class="page-header-bottoms">
|
||||
<img :src="themeMode==='dark' ? 'images/index/pic_black.png':'images/index/pic.png'">
|
||||
</div>
|
||||
</div>
|
||||
<div class="page-main">
|
||||
<div class="main-box-one">
|
||||
<div class="box-one-square"></div>
|
||||
<div class="box-pic" v-if="windowWidth<1920">
|
||||
<img class="box-img" :src="$A.originUrl('images/index/box-pic1.png')"/>
|
||||
</div>
|
||||
<div class="box-one-pic1 no-dark-mode" v-else>
|
||||
<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'">
|
||||
</Col>
|
||||
<Col class="page-main-text" :xs="24" :sm="24" :xl="12" v-if="windowWidth>1200">
|
||||
<img 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>
|
||||
<p>{{$L('针对项目和任务建立群组，工作问题可及时沟通，促进团队快速协作，提高团队工作效率。')}}</p>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
</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="windowWidth>=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 no-dark-mode"></div>
|
||||
</div>
|
||||
<div class="main-box-two" v-else>
|
||||
<div class="box-two-tips">
|
||||
<div class="box-pic">
|
||||
<img class="box-img" :src="$A.originUrl('images/index/box-pic2.png')"/>
|
||||
</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-pic" v-if="windowWidth<1920">
|
||||
<img class="box-img" :src="$A.originUrl('images/index/box-pic3.png')"/>
|
||||
</div>
|
||||
<div class="box-one-pic3 no-dark-mode" v-else></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="windowWidth>=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 no-dark-mode"></div>
|
||||
</div>
|
||||
<div class="main-box-two" v-else>
|
||||
<div class="box-two-tips">
|
||||
<div class="box-pic no-dark-mode">
|
||||
<img class="box-img" :src="$A.originUrl('images/index/box-pic4.png')"/>
|
||||
</div>
|
||||
<div class="box-square"></div>
|
||||
<div class="box-title">
|
||||
{{ $L("清晰直观的任务日历") }}
|
||||
</div>
|
||||
<div class="box-tips">
|
||||
{{
|
||||
$L("通过灵活的任务日历，轻松安排每一天的日程，把任务拆解到每天，让工作目标更清晰，时间分配更合理。")
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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">
|
||||
<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>
|
||||
<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>
|
||||
<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'">
|
||||
</Col>
|
||||
<Col class="page-main-text" :xs="24" :sm="24" :xl="12" v-if="windowWidth>1200">
|
||||
<img 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>
|
||||
<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">
|
||||
<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>
|
||||
<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>
|
||||
<p>{{$L('通过灵活的任务日历，轻松安排每一天的日程，把任务拆解到每天，让工作目标更清晰，时间分配更合理。')}}</p>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
<div class="page-footer">
|
||||
<div class="footer-service no-dark-mode">
|
||||
@ -180,16 +204,18 @@
|
||||
|
||||
<script>
|
||||
import {mapState} from "vuex";
|
||||
|
||||
import RightBottom from "../components/RightBottom";
|
||||
export default {
|
||||
components:{RightBottom},
|
||||
data() {
|
||||
return {
|
||||
needStartHome: false,
|
||||
homeFooter: '',
|
||||
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(['userId', 'windowWidth']),
|
||||
...mapState(['userId', 'windowWidth','themeMode', 'themeList',]),
|
||||
|
||||
currentLanguage() {
|
||||
return this.languageList[this.languageType] || "Language";
|
||||
@ -200,6 +226,10 @@ export default {
|
||||
},
|
||||
|
||||
methods: {
|
||||
setTheme(mode) {
|
||||
this.$store.dispatch("setTheme", mode)
|
||||
},
|
||||
|
||||
login() {
|
||||
this.goForward(
|
||||
{
|
||||
|
||||
15
resources/assets/sass/dark.scss
vendored
15
resources/assets/sass/dark.scss
vendored
@ -308,6 +308,7 @@ body.dark-mode-reverse {
|
||||
}
|
||||
|
||||
.page-warp {
|
||||
background-color: #efefef;
|
||||
.page-header {
|
||||
.header-nav {
|
||||
.header-nav-box {
|
||||
@ -316,18 +317,28 @@ body.dark-mode-reverse {
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
|
||||
.header-right-two {
|
||||
color: #000000;
|
||||
}
|
||||
.header-right-four {
|
||||
.ivu-dropdown{
|
||||
.ivu-dropdown-rel{
|
||||
.header-right-one-dropdown {
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-content {
|
||||
.header-title, .header-tips {
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
}
|
||||
.page-header-bottom{
|
||||
background-color: #efefef;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
763
resources/assets/sass/pages/page-index.scss
vendored
763
resources/assets/sass/pages/page-index.scss
vendored
@ -6,147 +6,92 @@
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
@media (max-width: 1919px) {
|
||||
.page-warp {
|
||||
width: 100%;
|
||||
max-width: 1920px;
|
||||
margin: 0 auto;
|
||||
.page-header {
|
||||
width: 100%;
|
||||
height: 720px;
|
||||
background: #8bcf70;
|
||||
border-radius: 0px 0px 300px 300px;
|
||||
position: relative;
|
||||
padding-bottom: 40px;
|
||||
.header-nav {
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
height: 72px;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.header-nav-box {
|
||||
display: flex;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
padding-left: 20px;
|
||||
color: #ffffff;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
|
||||
font-weight: 400;
|
||||
position: relative;
|
||||
.logo {
|
||||
width: 65px;
|
||||
height: 36px;
|
||||
background: url("../images/index/indexlogo.png")
|
||||
no-repeat center center;
|
||||
background-size: contain;
|
||||
margin: 0 20px 0 20px;
|
||||
}
|
||||
.header-right-one {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: end;
|
||||
font-size: 12px;
|
||||
min-width: 75px;
|
||||
.header-right-one-language {
|
||||
margin-right: 4px;
|
||||
}
|
||||
.header-right-one-dropdown {
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
.header-right-two {
|
||||
font-size: 12px;
|
||||
margin: 0 20px 0 20px;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
@media(max-width:414px){
|
||||
|
||||
.header-right-three {
|
||||
max-width: 50px;
|
||||
font-size: 12px;
|
||||
height: 36px;
|
||||
background: #ffa25a;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
line-height: 36px;
|
||||
cursor: pointer;
|
||||
margin-right: 10px;
|
||||
padding: 0 5px 0 5px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
@media(min-width:414px){
|
||||
|
||||
.header-right-three {
|
||||
font-size: 12px;
|
||||
height: 36px;
|
||||
background: #ffa25a;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
line-height: 36px;
|
||||
cursor: pointer;
|
||||
margin-right: 10px;
|
||||
padding: 0 5px 0 5px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
@media(min-width:660px){
|
||||
.logo {
|
||||
width: 143px;
|
||||
height: 36px;
|
||||
background: url("../images/index/indexlogo.png")
|
||||
no-repeat center center;
|
||||
background-size: contain;
|
||||
margin: 0 20px 0 20px;
|
||||
}
|
||||
.header-right-one {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
min-width: 75px;
|
||||
.header-right-one-language {
|
||||
margin-right: 4px;
|
||||
margin-right: 8px;
|
||||
font-size: 26px;
|
||||
}
|
||||
.header-right-one-dropdown {
|
||||
color: #ffffff;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
.header-right-two {
|
||||
font-size: 16px;
|
||||
margin: 0 40px 0 40px;
|
||||
margin: 0 30px 0 30px;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.header-right-three {
|
||||
font-size: 16px;
|
||||
min-width: 100px;
|
||||
height: 36px;
|
||||
background: #ffa25a;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
line-height: 36px;
|
||||
cursor: pointer;
|
||||
margin-right: 10px;
|
||||
padding: 0 10px 0 10px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.header-right-four {
|
||||
font-size: 16px;
|
||||
margin-left: 30px;
|
||||
cursor: pointer;
|
||||
.ivu-dropdown{
|
||||
.ivu-dropdown-rel{
|
||||
.header-right-one-dropdown {
|
||||
color: #ffffff;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
.header-nav-boxs{
|
||||
justify-content: flex-end;
|
||||
padding-right: 20px;
|
||||
.header-nav-more{
|
||||
color: #fff;
|
||||
font-size: 36px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.header-content {
|
||||
width: 100%;
|
||||
height: 396px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
.header-title {
|
||||
font-size: 24px;
|
||||
font-size: 48px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
@ -157,15 +102,14 @@
|
||||
margin-top: 40px;
|
||||
}
|
||||
.header-tips {
|
||||
width: 80%;
|
||||
font-size: 12px;
|
||||
font-size: 24px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
line-height: 36px;
|
||||
text-align: center;
|
||||
padding: 0 30px;
|
||||
margin-top: 22px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.login-buttom {
|
||||
width: 150px;
|
||||
@ -184,86 +128,263 @@
|
||||
}
|
||||
}
|
||||
|
||||
// .header-bg {
|
||||
// width: 100%;
|
||||
// height: 400px;
|
||||
// background: url("../images/index/decoration.png") no-repeat center
|
||||
// center;
|
||||
// background-size: contain;
|
||||
// position: absolute;
|
||||
// bottom: 0;
|
||||
// }
|
||||
.header-pic {
|
||||
}
|
||||
.page-header-bottom{
|
||||
position: relative;
|
||||
background: url("../images/index/bg_bottom.svg") no-repeat;
|
||||
background-color: #FFFFFF;
|
||||
background-size: 100%;
|
||||
margin-bottom: 190px;
|
||||
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%;
|
||||
height: 340px;
|
||||
background: url("../images/index/pic.png") no-repeat center center;
|
||||
background-size: contain;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
.page-main {
|
||||
width: 62.5%;
|
||||
margin: 0 auto;
|
||||
margin-top: 200px;
|
||||
.box-img{
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
vertical-align: bottom;
|
||||
bottom: 0;
|
||||
-o-object-fit: fill;
|
||||
object-fit: fill;
|
||||
.page-main-imgs{
|
||||
img{
|
||||
display: block;
|
||||
width: 90%;
|
||||
margin: auto;
|
||||
}
|
||||
.box-pic {
|
||||
-webkit-box-shadow: 0px 0px 10px #a9a4a4;
|
||||
-moz-box-shadow: 0px 0px 10px #a9a4a4;
|
||||
box-shadow: 0px 0px 10px #a9a4a4;
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
}
|
||||
.box-square {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: url("../images/index/square.png") no-repeat
|
||||
center center;
|
||||
background-size: contain;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.box-title {
|
||||
font-size: 16px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
.page-main-text{
|
||||
padding-left: 60px;
|
||||
padding-top: 120px;
|
||||
h3{
|
||||
font-size: 32px;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
line-height: 45px;
|
||||
margin: 6px 0 18px 0;
|
||||
margin-bottom: 17px;
|
||||
}
|
||||
.box-tips {
|
||||
p{
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
color: #828282;
|
||||
line-height: 28px;
|
||||
padding-right: 70px;
|
||||
}
|
||||
}
|
||||
.page-main-texts{
|
||||
padding-top: 40px;
|
||||
h3{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 30px;
|
||||
img{
|
||||
margin-right:10px;
|
||||
}
|
||||
}
|
||||
p{
|
||||
font-size:16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.page-footer {
|
||||
.footer-service {
|
||||
width: 100%;
|
||||
height: 188px;
|
||||
background-color: #ffa25a;
|
||||
position: relative;
|
||||
.footer-bg-box {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 188px;
|
||||
|
||||
// background: url("../images/index/footer-bg.png") no-repeat
|
||||
// center center;
|
||||
// background-size: 100% 100%;
|
||||
// background-size: contain;
|
||||
.box-title {
|
||||
height: 45px;
|
||||
font-size: 16px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
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-family: PingFangSC-Medium, PingFang SC;
|
||||
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-family: PingFangSC-Medium, PingFang SC;
|
||||
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-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #828282;
|
||||
line-height: 60px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 468px) {
|
||||
.page-index {
|
||||
}
|
||||
.page-warp {
|
||||
.page-header {
|
||||
.header-content {
|
||||
.header-title {
|
||||
font-size: 24px;
|
||||
line-height: 34px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.header-title-one {
|
||||
margin-top: 40px;
|
||||
}
|
||||
.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-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
line-height: 48px;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
margin-top: 34px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.page-header-bottom{
|
||||
position: relative;
|
||||
background: url("../images/index/bg_bottom.svg") no-repeat;
|
||||
background-color: #FFFFFF;
|
||||
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;
|
||||
}
|
||||
.main-box-one {
|
||||
position: relative;
|
||||
margin-bottom: 70px;
|
||||
|
||||
.box-one-tips {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.page-main-texts{
|
||||
padding-top: 40px;
|
||||
h3{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 24px;
|
||||
img{
|
||||
width: 24px;
|
||||
margin-right:10px;
|
||||
}
|
||||
.main-box-two {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
margin-bottom: 70px;
|
||||
.box-two-square {
|
||||
}
|
||||
|
||||
.box-two-tips {
|
||||
width: 100%;
|
||||
p{
|
||||
font-size:14px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.page-footer {
|
||||
@ -338,338 +459,8 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1920px) {
|
||||
.page-warp {
|
||||
width: 1920px;
|
||||
margin: 0 auto;
|
||||
.page-header {
|
||||
width: 100%;
|
||||
height: 852px;
|
||||
background: #8bcf70;
|
||||
border-radius: 0px 0px 300px 300px;
|
||||
position: relative;
|
||||
.header-nav {
|
||||
width: 100%;
|
||||
height: 72px;
|
||||
display: flex;
|
||||
.header-nav-box {
|
||||
width: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #ffffff;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
|
||||
font-weight: 400;
|
||||
position: relative;
|
||||
.logo {
|
||||
width: 143px;
|
||||
height: 36px;
|
||||
background: url("../images/index/indexlogo.png")
|
||||
no-repeat center center;
|
||||
background-size: contain;
|
||||
}
|
||||
.header-right-one {
|
||||
display: flex;
|
||||
.header-right-one-language {
|
||||
margin-right: 8px;
|
||||
font-size: 26px;
|
||||
}
|
||||
.header-right-one-dropdown {
|
||||
color: #ffffff;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
.header-right-two {
|
||||
font-size: 16px;
|
||||
margin: 0 30px 0 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.header-right-three {
|
||||
font-size: 16px;
|
||||
min-width: 100px;
|
||||
height: 36px;
|
||||
background: #ffa25a;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
line-height: 36px;
|
||||
cursor: pointer;
|
||||
padding: 0 10px 0 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.header-content {
|
||||
width: 950px;
|
||||
margin: 0 auto;
|
||||
.header-title {
|
||||
font-size: 48px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
line-height: 67px;
|
||||
text-align: center;
|
||||
}
|
||||
.header-title-one {
|
||||
margin-top: 40px;
|
||||
}
|
||||
.header-tips {
|
||||
width: 950px;
|
||||
font-size: 24px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
line-height: 36px;
|
||||
text-align: center;
|
||||
|
||||
margin-top: 22px;
|
||||
}
|
||||
.login-buttom {
|
||||
width: 150px;
|
||||
height: 48px;
|
||||
background: #ffa25a;
|
||||
border-radius: 8px;
|
||||
font-size: 18px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
line-height: 48px;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
margin-top: 34px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.header-bg {
|
||||
width: 100%;
|
||||
height: 405px;
|
||||
background: url("../images/index/decoration.png") no-repeat
|
||||
center center;
|
||||
background-size: contain;
|
||||
position: absolute;
|
||||
bottom: -40px;
|
||||
}
|
||||
.header-pic {
|
||||
width: 920px;
|
||||
height: 528px;
|
||||
background: url("../images/index/pic.png") no-repeat center
|
||||
center;
|
||||
background-size: contain;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
margin-left: -471px;
|
||||
bottom: -236px;
|
||||
}
|
||||
}
|
||||
.page-main {
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
margin-top: 388px;
|
||||
.main-box-one {
|
||||
height: 388px;
|
||||
position: relative;
|
||||
margin-bottom: 180px;
|
||||
.box-one-square {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: #8bcf70;
|
||||
border-radius: 30px;
|
||||
opacity: 0.15;
|
||||
float: left;
|
||||
}
|
||||
.box-one-pic1 {
|
||||
width: 600px;
|
||||
height: 338px;
|
||||
background: url("../images/index/box-pic1.png") no-repeat
|
||||
center center;
|
||||
background-size: contain;
|
||||
position: absolute;
|
||||
margin: 50px 0 0 50px;
|
||||
-webkit-box-shadow: 0px 0px 10px #a9a4a4;
|
||||
-moz-box-shadow: 0px 0px 10px #a9a4a4;
|
||||
box-shadow: 0px 0px 10px #a9a4a4;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.box-one-pic3 {
|
||||
width: 600px;
|
||||
height: 338px;
|
||||
background: url("../images/index/box-pic3.png") no-repeat
|
||||
center center;
|
||||
background-size: contain;
|
||||
position: absolute;
|
||||
margin: 50px 0 0 50px;
|
||||
-webkit-box-shadow: 0px 0px 10px #a9a4a4;
|
||||
-moz-box-shadow: 0px 0px 10px #a9a4a4;
|
||||
box-shadow: 0px 0px 10px #a9a4a4;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.box-one-tips {
|
||||
width: 460px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
.box-square {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
background: url("../images/index/square.png") no-repeat
|
||||
center center;
|
||||
background-size: contain;
|
||||
margin-top: 119px;
|
||||
}
|
||||
.box-title {
|
||||
font-size: 32px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
line-height: 45px;
|
||||
margin: 6px 0 18px 0;
|
||||
}
|
||||
.box-tips {
|
||||
font-size: 18px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #828282;
|
||||
line-height: 28px;
|
||||
}
|
||||
}
|
||||
.main-box-two {
|
||||
height: 388px;
|
||||
position: relative;
|
||||
margin-bottom: 180px;
|
||||
.box-two-square {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: #8bcf70;
|
||||
border-radius: 30px;
|
||||
opacity: 0.15;
|
||||
float: right;
|
||||
}
|
||||
.box-two-pic2 {
|
||||
width: 600px;
|
||||
height: 338px;
|
||||
background: url("../images/index/box-pic2.png") no-repeat
|
||||
center center;
|
||||
background-size: contain;
|
||||
position: absolute;
|
||||
right: 50px;
|
||||
top: 50px;
|
||||
-webkit-box-shadow: 0px 0px 10px #a9a4a4;
|
||||
-moz-box-shadow: 0px 0px 10px #a9a4a4;
|
||||
box-shadow: 0px 0px 10px #a9a4a4;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.box-two-pic4 {
|
||||
width: 600px;
|
||||
height: 338px;
|
||||
background: url("../images/index/box-pic4.png") no-repeat
|
||||
center center;
|
||||
background-size: contain;
|
||||
position: absolute;
|
||||
right: 50px;
|
||||
top: 50px;
|
||||
-webkit-box-shadow: 0px 0px 10px #a9a4a4;
|
||||
-moz-box-shadow: 0px 0px 10px #a9a4a4;
|
||||
box-shadow: 0px 0px 10px #a9a4a4;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.box-two-tips {
|
||||
width: 460px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
.box-square {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
background: url("../images/index/square.png") no-repeat
|
||||
center center;
|
||||
background-size: contain;
|
||||
margin-top: 119px;
|
||||
}
|
||||
.box-title {
|
||||
font-size: 32px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
line-height: 45px;
|
||||
margin: 6px 0 18px 0;
|
||||
}
|
||||
.box-tips {
|
||||
font-size: 18px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #828282;
|
||||
line-height: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.page-footer {
|
||||
.footer-service {
|
||||
width: 100%;
|
||||
height: 188px;
|
||||
background-color: #ffa25a;
|
||||
position: relative;
|
||||
.footer-bg-box {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 188px;
|
||||
background: url("../images/index/footer-bg.png") no-repeat
|
||||
center center;
|
||||
background-size: contain;
|
||||
.box-title {
|
||||
height: 45px;
|
||||
font-size: 32px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
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: 18px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
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: 18px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
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: 14px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #828282;
|
||||
line-height: 60px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.client-downloads{
|
||||
position: fixed;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
}
|
||||
|
||||
102
resources/assets/statics/public/images/index/bg_bottom.svg
Normal file
102
resources/assets/statics/public/images/index/bg_bottom.svg
Normal 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: 281 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 284 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 348 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 624 KiB |
BIN
resources/assets/statics/public/images/index/pic1.png
Normal file
BIN
resources/assets/statics/public/images/index/pic1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
BIN
resources/assets/statics/public/images/index/pic1_black.png
Normal file
BIN
resources/assets/statics/public/images/index/pic1_black.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
BIN
resources/assets/statics/public/images/index/pic2.png
Normal file
BIN
resources/assets/statics/public/images/index/pic2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
BIN
resources/assets/statics/public/images/index/pic2_black.png
Normal file
BIN
resources/assets/statics/public/images/index/pic2_black.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
BIN
resources/assets/statics/public/images/index/pic3.png
Normal file
BIN
resources/assets/statics/public/images/index/pic3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 75 KiB |
BIN
resources/assets/statics/public/images/index/pic3_black.png
Normal file
BIN
resources/assets/statics/public/images/index/pic3_black.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
BIN
resources/assets/statics/public/images/index/pic4.png
Normal file
BIN
resources/assets/statics/public/images/index/pic4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
BIN
resources/assets/statics/public/images/index/pic4_black.png
Normal file
BIN
resources/assets/statics/public/images/index/pic4_black.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
BIN
resources/assets/statics/public/images/index/pic_black.png
Normal file
BIN
resources/assets/statics/public/images/index/pic_black.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 123 KiB |
Loading…
x
Reference in New Issue
Block a user