fix:首页重写

public/images/index/bg_bottom.svg

@@ -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>

resources/assets/js/components/RightBottom.vue

@@ -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: {

resources/assets/js/pages/index.vue

@@ -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>
-                <div class="header-bg"></div>
+            <div class="page-header-bottom">
-                <div class="header-pic no-dark-mode"></div>
+                <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">
+                <Row :class="windowWidth>1200 ? 'page-main-row':'page-main-rows'">
-                    <div class="box-one-square"></div>
+                    <Col :class="windowWidth>1200 ? 'page-main-img':'page-main-imgs'"  :xs="24" :sm="24" :xl="12">
-                    <div class="box-pic" v-if="windowWidth<1920">
+                        <img :src="themeMode==='dark' ? 'images/index/pic1_black.png':'images/index/pic1.png'">
-                        <img class="box-img" :src="$A.originUrl('images/index/box-pic1.png')"/>
+                    </Col>
-                    </div>
+                    <Col class="page-main-text" :xs="24" :sm="24" :xl="12" v-if="windowWidth>1200">
-                    <div class="box-one-pic1 no-dark-mode" v-else>
+                        <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>
+                <Row :class="windowWidth>1200 ? 'page-main-row':'page-main-rows'">
-                    <div class="box-one-tips">
+                    <Col class="page-main-text" :xs="24" :sm="24" :xl="12" v-if="windowWidth>1200">
-                        <div class="box-square"></div>
+                        <img src="images/index/square.png">
-                        <div class="box-title">
+                        <h3>{{$L('强大易用的协同创作云文档')}}</h3>
-                            {{ $L("高效便捷的团队沟通工具") }}
+                        <p>{{$L('汇集文档、电子表格、思维笔记等多种在线工具，汇聚企业知识资源于一处，支持多人实时协同编辑，让团队协作更便捷。')}}</p>
-                        </div>
+                    </Col>
-                        <div class="box-tips">
+
-                            {{
+                    <Col :class="windowWidth>1200 ? 'page-main-img':'page-main-imgs'"  :xs="24" :sm="24" :xl="12">
-                                $L("针对项目和任务建立群组，工作问题可及时沟通，促进团队快速协作，提高团队工作效率。")
+                        <img  :src="themeMode==='dark' ? 'images/index/pic2_black.png':'images/index/pic2.png'">
-                            }}
+                    </Col>
-                        </div>
+                    <Col class="page-main-text page-main-texts" :xs="24" :sm="24" :xl="12" v-if="windowWidth<=1200">
-                    </div>
+                        <h3><img src="images/index/square.png">{{$L('强大易用的协同创作云文档')}}</h3>
-                </div>
+                        <p>{{$L('汇集文档、电子表格、思维笔记等多种在线工具，汇聚企业知识资源于一处，支持多人实时协同编辑，让团队协作更便捷。')}}</p>
-                <div class="main-box-two" v-if="windowWidth>=1920">
+                    </Col>
-                    <div class="box-two-tips">
+                </Row>
-                        <div class="box-square"></div>
+
-                        <div class="box-title">
+                <Row :class="windowWidth>1200 ? 'page-main-row':'page-main-rows'">
-                            {{ $L("强大易用的协同创作云文档") }}
+                    <Col :class="windowWidth>1200 ? 'page-main-img':'page-main-imgs'"  :xs="24" :sm="24" :xl="12">
-                        </div>
+                        <img  :src="themeMode==='dark' ? 'images/index/pic3_black.png':'images/index/pic3.png'">
-                        <div class="box-tips">
+                    </Col>
-                            {{
+                    <Col class="page-main-text" :xs="24" :sm="24" :xl="12" v-if="windowWidth>1200">
-                                $L("汇集文档、电子表格、思维笔记等多种在线工具，汇聚企业知识资源于一处，支持多人实时协同编辑，让团队协作更便捷。")
+                        <img src="images/index/square.png">
-                            }}
+                        <h3>{{$L('便捷易用的项目管理模板')}}</h3>
-                        </div>
+                        <p>{{$L('模版满足多种团队协作场景，同时支持自定义模版，满足团队个性化场景管理需求，可直观的查看项目的进展情况，团队协作更方便。')}}</p>
-                    </div>
+                    </Col>
-                    <div class="box-two-square"></div>
+                    <Col class="page-main-text page-main-texts" :xs="24" :sm="24" :xl="12" v-else>
-                    <div class="box-two-pic2 no-dark-mode"></div>
+                        <h3><img src="images/index/square.png">{{$L('便捷易用的项目管理模板')}}</h3>
-                </div>
+                        <p>{{$L('模版满足多种团队协作场景，同时支持自定义模版，满足团队个性化场景管理需求，可直观的查看项目的进展情况，团队协作更方便。')}}</p>
-                <div class="main-box-two" v-else>
+                    </Col>
-                    <div class="box-two-tips">
+                </Row>
-                        <div class="box-pic">
+
-                            <img class="box-img" :src="$A.originUrl('images/index/box-pic2.png')"/>
+                <Row :class="windowWidth>1200 ? 'page-main-row':'page-main-rows'">
-                        </div>
+                    <Col class="page-main-text" :xs="24" :sm="24" :xl="12" v-if="windowWidth>1200">
-                        <div class="box-square"></div>
+                        <img src="images/index/square.png">
-                        <div class="box-title">
+                        <h3>{{$L('清晰直观的任务日历')}}</h3>
-                            {{ $L("强大易用的协同创作云文档") }}
+                        <p>{{$L('通过灵活的任务日历，轻松安排每一天的日程，把任务拆解到每天，让工作目标更清晰，时间分配更合理。')}}</p>
-                        </div>
+                    </Col>
-                        <div class="box-tips">
+
-                            {{
+                    <Col :class="windowWidth>1200 ? 'page-main-img':'page-main-imgs'"  :xs="24" :sm="24" :xl="12">
-                                $L("汇集文档、电子表格、思维笔记等多种在线工具，汇聚企业知识资源于一处，支持多人实时协同编辑，让团队协作更便捷。")
+                        <img  :src="themeMode==='dark' ? 'images/index/pic4_black.png':'images/index/pic4.png'">
-                            }}
+                    </Col>
-                        </div>
+                    <Col class="page-main-text page-main-texts" :xs="24" :sm="24" :xl="12" v-if="windowWidth<=1200">
-                    </div>
+                        <h3><img src="images/index/square.png">{{$L('清晰直观的任务日历')}}</h3>
-                </div>
+                        <p>{{$L('通过灵活的任务日历，轻松安排每一天的日程，把任务拆解到每天，让工作目标更清晰，时间分配更合理。')}}</p>
-                <div class="main-box-one">
+                    </Col>
-                    <div class="box-one-square"></div>
+                </Row>
-                    <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>
             </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(
                 {

resources/assets/sass/dark.scss

@@ -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;
+        }
     }
 }

resources/assets/sass/pages/page-index.scss

@@ -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;
+                    .header-right-four {
-                            text-overflow: ellipsis;
+                        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%;
+                max-width: 1200px;
-                height: 396px;
                 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: 24px;
-                    font-size: 12px;
                     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%;
+        .page-header-bottom{
-            //     height: 400px;
+            position: relative;
-            //     background: url("../images/index/decoration.png") no-repeat center
+            background: url("../images/index/bg_bottom.svg") no-repeat;
-            //         center;
+            background-color: #FFFFFF;
-            //     background-size: contain;
+            background-size: 100%;
-            //     position: absolute;
+            margin-bottom: 190px;
-            //     bottom: 0;
+            margin-top: -2px;
-            // }
+            .page-header-bottoms{
-            .header-pic {
+                max-width: 1200px;
-                width: 100%;
+                margin: auto;
-                height: 340px;
+                top: 0;
-                background: url("../images/index/pic.png") no-repeat center center;
+                left: 0;
-                background-size: contain;
+                right: 0;
-                margin-top: 10px;
+                img{
+                    display: block;
+                    margin: auto;
+                    width: 80%;
+                }
             }
         }
         .page-main{
-            width: 62.5%;
+            max-width: 1200px;
-            margin: 0 auto;
+            margin: auto;
-            margin-top: 200px;
+            .page-main-row{
-            .box-img{
+                margin-bottom: 150px;
-                height: auto;
-                max-width: 100%;
-                max-height: 100%;
-                vertical-align: bottom;
-                bottom: 0;
-                -o-object-fit: fill;
-                object-fit: fill;
             }
-            .box-pic {
+            .page-main-rows{
-                -webkit-box-shadow: 0px 0px 10px #a9a4a4;
+                margin-bottom: 140px;
-                -moz-box-shadow: 0px 0px 10px #a9a4a4;
-                box-shadow: 0px 0px 10px #a9a4a4;
-                border-radius: 10px;
-                padding: 10px;
             }
-            .box-square {
+            .page-main-img{
-                width: 24px;
+                img{
-                height: 24px;
+                    width: 100%;
-                background: url("../images/index/square.png") no-repeat
-                    center center;
-                background-size: contain;
-                margin-top: 20px;
                 }
-            .box-title {
+            }
-                font-size: 16px;
+            .page-main-imgs{
-                font-family: PingFangSC-Medium, PingFang SC;
+                img{
+                    display: block;
+                    width: 90%;
+                    margin: auto;
+                }
+            }
+            .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 {
                 }
-
+                p{
-                .box-two-tips {
+                    font-size:14px;
-                    width: 100%;
                 }
-
             }
         }
         .page-footer {
@@ -338,338 +459,8 @@
         }
     }
 }
-
+.client-downloads{
-@media (min-width: 1920px) {
+    position: fixed;
-    .page-warp {
+    right: 20px;
-        width: 1920px;
+    bottom: 20px;
-        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;
-            }
-        }
-    }
 }

resources/assets/statics/public/images/index/bg_bottom.svg

@@ -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>