kuaifan 5 سال پیش
والد
کامیت
d6a6864f23

+ 1 - 1
package.json

@@ -1,6 +1,6 @@
 {
     "name": "wookteam",
-    "version": "1.5.8",
+    "version": "1.5.9",
     "description": "WookTeam是一款轻量级的开源在线团队协作工具,提供各类文档工具、在线思维导图、在线流程图、项目管理、任务分发、即时IM,知识库管理等工具。",
     "scripts": {
         "ide-helper": "php artisan ide-helper:generate",

+ 1 - 1
resources/assets/js/main/pages/index.vue

@@ -450,7 +450,7 @@
                 });
             },
             enterpriseOpen() {
-                this.goForward({path: '/contrast'});
+                this.goForward({path: '/plans'});
             },
             loginChack() {
                 if ($A.getToken() !== false) {

+ 219 - 219
resources/assets/js/main/pages/contrast.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="page-contrast">
+    <div class="page-plans">
         <v-title>{{$L('选择合适你的 WookTeam')}}</v-title>
 
         <div class="top-bg"></div>
@@ -45,236 +45,236 @@
                 {{$L('WookTeam 是新一代企业协作平台,您可以根据您企业的业务需求,选择合适的产品功能。')}} <br>
                 {{$L('从现在开始,WookTeam 为世界各地的团队提供支持,探索适合您的选项。')}}
             </div>
-            <div class="price-table">
-                <div class="price-table-bd price-table-info">
-                    <div class="price-table-item first">
-                        <div class="price-table-info-th"></div>
-                        <div class="price-table-info-price"><em>{{$L('价格')}}</em></div>
-                        <div class="price-table-info-desc"><em>{{$L('概述')}}</em></div>
-                        <div class="price-table-info-desc"><em>{{$L('人数')}}</em></div>
-                        <div class="price-table-info-btn"></div>
+            <div class="plans-table">
+                <div class="plans-table-bd plans-table-info">
+                    <div class="plans-table-item first">
+                        <div class="plans-table-info-th"></div>
+                        <div class="plans-table-info-price"><em>{{$L('价格')}}</em></div>
+                        <div class="plans-table-info-desc"><em>{{$L('概述')}}</em></div>
+                        <div class="plans-table-info-desc"><em>{{$L('人数')}}</em></div>
+                        <div class="plans-table-info-btn"></div>
                     </div>
-                    <div @mouseenter="active=1" class="price-table-item" :class="{active:active==1}">
-                        <div class="price-table-info-th">{{$L('社区版')}}</div>
-                        <div class="price-table-info-price">
-                            <img class="price-version" src="../../../statics/images/contrast/free.png">
+                    <div @mouseenter="active=1" class="plans-table-item" :class="{active:active==1}">
+                        <div class="plans-table-info-th">{{$L('社区版')}}</div>
+                        <div class="plans-table-info-price">
+                            <img class="plans-version" src="../../../statics/images/plans/free.png">
                             <div class="currency"><em>0</em></div>
                         </div>
-                        <div class="price-table-info-desc">{{$L('适用于轻团队的任务协作')}}</div>
-                        <div class="price-table-info-desc">{{$L('无限制')}}</div>
-                        <div class="price-table-info-btn">
+                        <div class="plans-table-info-desc">{{$L('适用于轻团队的任务协作')}}</div>
+                        <div class="plans-table-info-desc">{{$L('无限制')}}</div>
+                        <div class="plans-table-info-btn">
                             <Tooltip :content="$L('账号:%、密码:%', 'admin', '123456')" transfer>
                                 <a href="https://demo.wookteam.com" class="btn" target="_blank">{{$L('体验DEMO')}}</a>
                             </Tooltip>
                         </div>
                     </div>
-                    <div @mouseenter="active=2" class="price-table-item" :class="{active:active==2}">
-                        <div class="price-table-info-th">{{$L('企业版')}} <span>{{$L('推荐')}}</span></div>
-                        <div class="price-table-info-price">
-                            <img class="price-version" src="../../../statics/images/contrast/pro.png">
+                    <div @mouseenter="active=2" class="plans-table-item" :class="{active:active==2}">
+                        <div class="plans-table-info-th">{{$L('企业版')}} <span>{{$L('推荐')}}</span></div>
+                        <div class="plans-table-info-price">
+                            <img class="plans-version" src="../../../statics/images/plans/pro.png">
                             <div class="currency"><em>18800</em></div>
                         </div>
-                        <div class="price-table-info-desc">{{$L('适用于群组共享和高级权限')}}</div>
-                        <div class="price-table-info-desc">{{$L('无限制')}}</div>
-                        <div class="price-table-info-btn">
+                        <div class="plans-table-info-desc">{{$L('适用于群组共享和高级权限')}}</div>
+                        <div class="plans-table-info-desc">{{$L('无限制')}}</div>
+                        <div class="plans-table-info-btn">
                             <Tooltip :content="$L('账号:%、密码:%', 'admin', '123456')" transfer>
                                 <a href="https://pro.wookteam.com" class="btn" target="_blank">{{$L('体验DEMO')}}</a>
                             </Tooltip>
                         </div>
                     </div>
-                    <div @mouseenter="active=3" class="price-table-item" :class="{active:active==3}">
-                        <div class="price-table-info-th">{{$L('定制版')}}</div>
-                        <div class="price-table-info-price">
-                            <img class="price-version" src="../../../statics/images/contrast/Ultimate.png">
+                    <div @mouseenter="active=3" class="plans-table-item" :class="{active:active==3}">
+                        <div class="plans-table-info-th">{{$L('定制版')}}</div>
+                        <div class="plans-table-info-price">
+                            <img class="plans-version" src="../../../statics/images/plans/Ultimate.png">
                             <div class="currency"><em class="custom">{{$L('自定义')}}</em></div>
                         </div>
-                        <div class="price-table-info-desc">{{$L('根据您的需求量身定制')}}</div>
-                        <div class="price-table-info-desc">{{$L('无限制')}}</div>
-                        <div class="price-table-info-btn">
+                        <div class="plans-table-info-desc">{{$L('根据您的需求量身定制')}}</div>
+                        <div class="plans-table-info-desc">{{$L('无限制')}}</div>
+                        <div class="plans-table-info-btn">
                             <a href="javascript:void(0)" class="btn btn-contact" @click="contactShow=true">{{$L('联系我们')}}</a>
                         </div>
                     </div>
                 </div>
-                <div class="price-accordion-head" :class="{'price-accordion-close':!body1}" @click="body1=!body1">
+                <div class="plans-accordion-head" :class="{'plans-accordion-close':!body1}" @click="body1=!body1">
                     <div class="first"><span>{{$L('应用支持')}}</span></div>
-                    <div @mouseenter="active=1" class="price-table-item" :class="{active:active==1}"></div>
-                    <div @mouseenter="active=2" class="price-table-item" :class="{active:active==2}"></div>
-                    <div @mouseenter="active=3" class="price-table-item" :class="{active:active==3}"></div>
+                    <div @mouseenter="active=1" class="plans-table-item" :class="{active:active==1}"></div>
+                    <div @mouseenter="active=2" class="plans-table-item" :class="{active:active==2}"></div>
+                    <div @mouseenter="active=3" class="plans-table-item" :class="{active:active==3}"></div>
                     <span><Icon type="ios-arrow-down" /></span>
                 </div>
-                <div v-if="body1" class="price-accordion-body">
-                    <div class="price-table-bd price-table-app">
-                        <div class="price-table-item first">
-                            <div class="price-table-td">{{$L('项目管理')}}</div>
-                            <div class="price-table-td">{{$L('文档/知识库')}}</div>
-                            <div class="price-table-td">{{$L('团队管理')}}</div>
-                            <div class="price-table-td">IM{{$L('聊天')}}</div>
-                            <div class="price-table-td">{{$L('子任务')}}</div>
-                            <div class="price-table-td">{{$L('国际化')}}</div>
-                            <div class="price-table-td">{{$L('甘特图')}}</div>
-                            <div class="price-table-td">{{$L('任务动态')}}</div>
-                            <div class="price-table-td">{{$L('日程')}}</div>
-                            <div class="price-table-td">{{$L('周报/日报')}}</div>
+                <div v-if="body1" class="plans-accordion-body">
+                    <div class="plans-table-bd plans-table-app">
+                        <div class="plans-table-item first">
+                            <div class="plans-table-td">{{$L('项目管理')}}</div>
+                            <div class="plans-table-td">{{$L('文档/知识库')}}</div>
+                            <div class="plans-table-td">{{$L('团队管理')}}</div>
+                            <div class="plans-table-td">IM{{$L('聊天')}}</div>
+                            <div class="plans-table-td">{{$L('子任务')}}</div>
+                            <div class="plans-table-td">{{$L('国际化')}}</div>
+                            <div class="plans-table-td">{{$L('甘特图')}}</div>
+                            <div class="plans-table-td">{{$L('任务动态')}}</div>
+                            <div class="plans-table-td">{{$L('日程')}}</div>
+                            <div class="plans-table-td">{{$L('周报/日报')}}</div>
 
-                            <div class="price-table-td">{{$L('IM群聊')}}</div>
-                            <div class="price-table-td">{{$L('项目群聊')}}</div>
-                            <div class="price-table-td">{{$L('项目权限')}}</div>
-                            <div class="price-table-td">{{$L('项目搜索')}}</div>
-                            <div class="price-table-td">{{$L('任务类型')}}</div>
-                            <div class="price-table-td">{{$L('知识库搜索')}}</div>
-                            <div class="price-table-td">{{$L('团队分组')}}</div>
-                            <div class="price-table-td">{{$L('分组权限')}}</div>
-                            <div class="price-table-td">{{$L('成员统计')}}</div>
-                            <div class="price-table-td">{{$L('签到功能')}}</div>
+                            <div class="plans-table-td">{{$L('IM群聊')}}</div>
+                            <div class="plans-table-td">{{$L('项目群聊')}}</div>
+                            <div class="plans-table-td">{{$L('项目权限')}}</div>
+                            <div class="plans-table-td">{{$L('项目搜索')}}</div>
+                            <div class="plans-table-td">{{$L('任务类型')}}</div>
+                            <div class="plans-table-td">{{$L('知识库搜索')}}</div>
+                            <div class="plans-table-td">{{$L('团队分组')}}</div>
+                            <div class="plans-table-td">{{$L('分组权限')}}</div>
+                            <div class="plans-table-td">{{$L('成员统计')}}</div>
+                            <div class="plans-table-td">{{$L('签到功能')}}</div>
                         </div>
-                        <div @mouseenter="active=1" class="price-table-item" :class="{active:active==1}">
-                            <div class="price-table-td"><Icon type="md-checkmark" /></div>
-                            <div class="price-table-td"><Icon type="md-checkmark" /></div>
-                            <div class="price-table-td"><Icon type="md-checkmark" /></div>
-                            <div class="price-table-td"><Icon type="md-checkmark" /></div>
-                            <div class="price-table-td"><Icon type="md-checkmark" /></div>
-                            <div class="price-table-td"><Icon type="md-checkmark" /></div>
-                            <div class="price-table-td"><Icon type="md-checkmark" /></div>
-                            <div class="price-table-td"><Icon type="md-checkmark" /></div>
-                            <div class="price-table-td"><Icon type="md-checkmark" /></div>
-                            <div class="price-table-td"><Icon type="md-checkmark" /></div>
-                            <div class="price-table-td"> - </div>
-                            <div class="price-table-td"> - </div>
-                            <div class="price-table-td"> - </div>
-                            <div class="price-table-td"> - </div>
-                            <div class="price-table-td"> - </div>
-                            <div class="price-table-td"> - </div>
-                            <div class="price-table-td"> - </div>
-                            <div class="price-table-td"> - </div>
-                            <div class="price-table-td"> - </div>
-                            <div class="price-table-td"> - </div>
+                        <div @mouseenter="active=1" class="plans-table-item" :class="{active:active==1}">
+                            <div class="plans-table-td"><Icon type="md-checkmark" /></div>
+                            <div class="plans-table-td"><Icon type="md-checkmark" /></div>
+                            <div class="plans-table-td"><Icon type="md-checkmark" /></div>
+                            <div class="plans-table-td"><Icon type="md-checkmark" /></div>
+                            <div class="plans-table-td"><Icon type="md-checkmark" /></div>
+                            <div class="plans-table-td"><Icon type="md-checkmark" /></div>
+                            <div class="plans-table-td"><Icon type="md-checkmark" /></div>
+                            <div class="plans-table-td"><Icon type="md-checkmark" /></div>
+                            <div class="plans-table-td"><Icon type="md-checkmark" /></div>
+                            <div class="plans-table-td"><Icon type="md-checkmark" /></div>
+                            <div class="plans-table-td"> - </div>
+                            <div class="plans-table-td"> - </div>
+                            <div class="plans-table-td"> - </div>
+                            <div class="plans-table-td"> - </div>
+                            <div class="plans-table-td"> - </div>
+                            <div class="plans-table-td"> - </div>
+                            <div class="plans-table-td"> - </div>
+                            <div class="plans-table-td"> - </div>
+                            <div class="plans-table-td"> - </div>
+                            <div class="plans-table-td"> - </div>
                         </div>
-                        <div @mouseenter="active=2" class="price-table-item" :class="{active:active==2}">
-                            <div class="price-table-td"><Icon type="md-checkmark" /></div>
-                            <div class="price-table-td"><Icon type="md-checkmark" /></div>
-                            <div class="price-table-td"><Icon type="md-checkmark" /></div>
-                            <div class="price-table-td"><Icon type="md-checkmark" /></div>
-                            <div class="price-table-td"><Icon type="md-checkmark" /></div>
-                            <div class="price-table-td"><Icon type="md-checkmark" /></div>
-                            <div class="price-table-td"><Icon type="md-checkmark" /></div>
-                            <div class="price-table-td"><Icon type="md-checkmark" /></div>
-                            <div class="price-table-td"><Icon type="md-checkmark" /></div>
-                            <div class="price-table-td"><Icon type="md-checkmark" /></div>
-                            <div class="price-table-td"><Icon type="md-checkmark" /></div>
-                            <div class="price-table-td"><Icon type="md-checkmark" /></div>
-                            <div class="price-table-td"><Icon type="md-checkmark" /></div>
-                            <div class="price-table-td"><Icon type="md-checkmark" /></div>
-                            <div class="price-table-td"><Icon type="md-checkmark" /></div>
-                            <div class="price-table-td"><Icon type="md-checkmark" /></div>
-                            <div class="price-table-td"><Icon type="md-checkmark" /></div>
-                            <div class="price-table-td"><Icon type="md-checkmark" /></div>
-                            <div class="price-table-td"><Icon type="md-checkmark" /></div>
-                            <div class="price-table-td"><Icon type="md-checkmark" /></div>
+                        <div @mouseenter="active=2" class="plans-table-item" :class="{active:active==2}">
+                            <div class="plans-table-td"><Icon type="md-checkmark" /></div>
+                            <div class="plans-table-td"><Icon type="md-checkmark" /></div>
+                            <div class="plans-table-td"><Icon type="md-checkmark" /></div>
+                            <div class="plans-table-td"><Icon type="md-checkmark" /></div>
+                            <div class="plans-table-td"><Icon type="md-checkmark" /></div>
+                            <div class="plans-table-td"><Icon type="md-checkmark" /></div>
+                            <div class="plans-table-td"><Icon type="md-checkmark" /></div>
+                            <div class="plans-table-td"><Icon type="md-checkmark" /></div>
+                            <div class="plans-table-td"><Icon type="md-checkmark" /></div>
+                            <div class="plans-table-td"><Icon type="md-checkmark" /></div>
+                            <div class="plans-table-td"><Icon type="md-checkmark" /></div>
+                            <div class="plans-table-td"><Icon type="md-checkmark" /></div>
+                            <div class="plans-table-td"><Icon type="md-checkmark" /></div>
+                            <div class="plans-table-td"><Icon type="md-checkmark" /></div>
+                            <div class="plans-table-td"><Icon type="md-checkmark" /></div>
+                            <div class="plans-table-td"><Icon type="md-checkmark" /></div>
+                            <div class="plans-table-td"><Icon type="md-checkmark" /></div>
+                            <div class="plans-table-td"><Icon type="md-checkmark" /></div>
+                            <div class="plans-table-td"><Icon type="md-checkmark" /></div>
+                            <div class="plans-table-td"><Icon type="md-checkmark" /></div>
                         </div>
-                        <div @mouseenter="active=3" class="price-table-item" :class="{active:active==3}">
-                            <div class="price-table-td"><Icon type="md-checkmark" /></div>
-                            <div class="price-table-td"><Icon type="md-checkmark" /></div>
-                            <div class="price-table-td"><Icon type="md-checkmark" /></div>
-                            <div class="price-table-td"><Icon type="md-checkmark" /></div>
-                            <div class="price-table-td"><Icon type="md-checkmark" /></div>
-                            <div class="price-table-td"><Icon type="md-checkmark" /></div>
-                            <div class="price-table-td"><Icon type="md-checkmark" /></div>
-                            <div class="price-table-td"><Icon type="md-checkmark" /></div>
-                            <div class="price-table-td"><Icon type="md-checkmark" /></div>
-                            <div class="price-table-td"><Icon type="md-checkmark" /></div>
-                            <div class="price-table-td"><Icon type="md-checkmark" /></div>
-                            <div class="price-table-td"><Icon type="md-checkmark" /></div>
-                            <div class="price-table-td"><Icon type="md-checkmark" /></div>
-                            <div class="price-table-td"><Icon type="md-checkmark" /></div>
-                            <div class="price-table-td"><Icon type="md-checkmark" /></div>
-                            <div class="price-table-td"><Icon type="md-checkmark" /></div>
-                            <div class="price-table-td"><Icon type="md-checkmark" /></div>
-                            <div class="price-table-td"><Icon type="md-checkmark" /></div>
-                            <div class="price-table-td"><Icon type="md-checkmark" /></div>
-                            <div class="price-table-td"><Icon type="md-checkmark" /></div>
+                        <div @mouseenter="active=3" class="plans-table-item" :class="{active:active==3}">
+                            <div class="plans-table-td"><Icon type="md-checkmark" /></div>
+                            <div class="plans-table-td"><Icon type="md-checkmark" /></div>
+                            <div class="plans-table-td"><Icon type="md-checkmark" /></div>
+                            <div class="plans-table-td"><Icon type="md-checkmark" /></div>
+                            <div class="plans-table-td"><Icon type="md-checkmark" /></div>
+                            <div class="plans-table-td"><Icon type="md-checkmark" /></div>
+                            <div class="plans-table-td"><Icon type="md-checkmark" /></div>
+                            <div class="plans-table-td"><Icon type="md-checkmark" /></div>
+                            <div class="plans-table-td"><Icon type="md-checkmark" /></div>
+                            <div class="plans-table-td"><Icon type="md-checkmark" /></div>
+                            <div class="plans-table-td"><Icon type="md-checkmark" /></div>
+                            <div class="plans-table-td"><Icon type="md-checkmark" /></div>
+                            <div class="plans-table-td"><Icon type="md-checkmark" /></div>
+                            <div class="plans-table-td"><Icon type="md-checkmark" /></div>
+                            <div class="plans-table-td"><Icon type="md-checkmark" /></div>
+                            <div class="plans-table-td"><Icon type="md-checkmark" /></div>
+                            <div class="plans-table-td"><Icon type="md-checkmark" /></div>
+                            <div class="plans-table-td"><Icon type="md-checkmark" /></div>
+                            <div class="plans-table-td"><Icon type="md-checkmark" /></div>
+                            <div class="plans-table-td"><Icon type="md-checkmark" /></div>
                         </div>
                     </div>
                 </div>
-                <div class="price-accordion-head" :class="{'price-accordion-close':!body2}" @click="body2=!body2">
+                <div class="plans-accordion-head" :class="{'plans-accordion-close':!body2}" @click="body2=!body2">
                     <div class="first"><span>{{$L('服务支持')}}</span></div>
-                    <div @mouseenter="active=1" class="price-table-item" :class="{active:active==1}"></div>
-                    <div @mouseenter="active=2" class="price-table-item" :class="{active:active==2}"></div>
-                    <div @mouseenter="active=3" class="price-table-item" :class="{active:active==3}"></div>
+                    <div @mouseenter="active=1" class="plans-table-item" :class="{active:active==1}"></div>
+                    <div @mouseenter="active=2" class="plans-table-item" :class="{active:active==2}"></div>
+                    <div @mouseenter="active=3" class="plans-table-item" :class="{active:active==3}"></div>
                     <span><Icon type="ios-arrow-down" /></span>
                 </div>
-                <div v-if="body2" class="price-accordion-body">
-                    <div class="price-table-bd price-table-app price-table-service">
-                        <div class="price-table-item first">
-                            <div class="price-table-td">{{$L('自助支持')}} <span>{{$L('(Issues/文档/社群)')}}</span></div>
-                            <div class="price-table-td">{{$L('支持私有化部署')}}</div>
-                            <div class="price-table-td">{{$L('绑定自有域名')}}</div>
-                            <div class="price-table-td">{{$L('二次开发')}}</div>
-                            <div class="price-table-td">{{$L('在线咨询支持')}}</div>
-                            <div class="price-table-td">{{$L('电话咨询支持')}}</div>
-                            <div class="price-table-td">{{$L('中英文邮件支持')}}</div>
-                            <div class="price-table-td">{{$L('一对一客户顾问')}}</div>
-                            <div class="price-table-td">{{$L('产品培训')}}</div>
-                            <div class="price-table-td">{{$L('上门支持')}}</div>
-                            <div class="price-table-td">{{$L('专属客户成功经理')}}</div>
-                            <div class="price-table-td">{{$L('免费提供一次企业内训')}}</div>
-                            <div class="price-table-td">{{$L('明星客户案例')}}</div>
-                            <div class="price-table-info-btn"></div>
+                <div v-if="body2" class="plans-accordion-body">
+                    <div class="plans-table-bd plans-table-app plans-table-service">
+                        <div class="plans-table-item first">
+                            <div class="plans-table-td">{{$L('自助支持')}} <span>{{$L('(Issues/文档/社群)')}}</span></div>
+                            <div class="plans-table-td">{{$L('支持私有化部署')}}</div>
+                            <div class="plans-table-td">{{$L('绑定自有域名')}}</div>
+                            <div class="plans-table-td">{{$L('二次开发')}}</div>
+                            <div class="plans-table-td">{{$L('在线咨询支持')}}</div>
+                            <div class="plans-table-td">{{$L('电话咨询支持')}}</div>
+                            <div class="plans-table-td">{{$L('中英文邮件支持')}}</div>
+                            <div class="plans-table-td">{{$L('一对一客户顾问')}}</div>
+                            <div class="plans-table-td">{{$L('产品培训')}}</div>
+                            <div class="plans-table-td">{{$L('上门支持')}}</div>
+                            <div class="plans-table-td">{{$L('专属客户成功经理')}}</div>
+                            <div class="plans-table-td">{{$L('免费提供一次企业内训')}}</div>
+                            <div class="plans-table-td">{{$L('明星客户案例')}}</div>
+                            <div class="plans-table-info-btn"></div>
                         </div>
-                        <div @mouseenter="active=1" class="price-table-item" :class="{active:active==1}">
-                            <div class="price-table-td"><Icon type="md-checkmark" /></div>
-                            <div class="price-table-td"><Icon type="md-checkmark" /></div>
-                            <div class="price-table-td"><Icon type="md-checkmark" /></div>
-                            <div class="price-table-td"><Icon type="md-checkmark" /></div>
-                            <div class="price-table-td"><span> - </span></div>
-                            <div class="price-table-td"><span> - </span></div>
-                            <div class="price-table-td"><span> - </span></div>
-                            <div class="price-table-td"><span> - </span></div>
-                            <div class="price-table-td"><span> - </span></div>
-                            <div class="price-table-td"><span> - </span></div>
-                            <div class="price-table-td"><span> - </span></div>
-                            <div class="price-table-td"><span> - </span></div>
-                            <div class="price-table-td"><span> - </span></div>
-                            <div class="price-table-info-btn">
+                        <div @mouseenter="active=1" class="plans-table-item" :class="{active:active==1}">
+                            <div class="plans-table-td"><Icon type="md-checkmark" /></div>
+                            <div class="plans-table-td"><Icon type="md-checkmark" /></div>
+                            <div class="plans-table-td"><Icon type="md-checkmark" /></div>
+                            <div class="plans-table-td"><Icon type="md-checkmark" /></div>
+                            <div class="plans-table-td"><span> - </span></div>
+                            <div class="plans-table-td"><span> - </span></div>
+                            <div class="plans-table-td"><span> - </span></div>
+                            <div class="plans-table-td"><span> - </span></div>
+                            <div class="plans-table-td"><span> - </span></div>
+                            <div class="plans-table-td"><span> - </span></div>
+                            <div class="plans-table-td"><span> - </span></div>
+                            <div class="plans-table-td"><span> - </span></div>
+                            <div class="plans-table-td"><span> - </span></div>
+                            <div class="plans-table-info-btn">
                                 <Tooltip :content="$L('账号:%、密码:%', 'admin', '123456')" transfer>
                                     <a href="https://demo.wookteam.com" class="btn" target="_blank">{{$L('体验DEMO')}}</a>
                                 </Tooltip>
                             </div>
                         </div>
-                        <div @mouseenter="active=2" class="price-table-item" :class="{active:active==2}">
-                            <div class="price-table-td"><Icon type="md-checkmark" /></div>
-                            <div class="price-table-td"><Icon type="md-checkmark" /></div>
-                            <div class="price-table-td"><Icon type="md-checkmark" /></div>
-                            <div class="price-table-td"><Icon type="md-checkmark" /></div>
-                            <div class="price-table-td"><Icon type="md-checkmark" /></div>
-                            <div class="price-table-td"><Icon type="md-checkmark" /></div>
-                            <div class="price-table-td"><Icon type="md-checkmark" /></div>
-                            <div class="price-table-td"><Icon type="md-checkmark" /></div>
-                            <div class="price-table-td"><Icon type="md-checkmark" /></div>
-                            <div class="price-table-td"><span> - </span></div>
-                            <div class="price-table-td"><span> - </span></div>
-                            <div class="price-table-td"><span> - </span></div>
-                            <div class="price-table-td"><span> - </span></div>
-                            <div class="price-table-info-btn">
+                        <div @mouseenter="active=2" class="plans-table-item" :class="{active:active==2}">
+                            <div class="plans-table-td"><Icon type="md-checkmark" /></div>
+                            <div class="plans-table-td"><Icon type="md-checkmark" /></div>
+                            <div class="plans-table-td"><Icon type="md-checkmark" /></div>
+                            <div class="plans-table-td"><Icon type="md-checkmark" /></div>
+                            <div class="plans-table-td"><Icon type="md-checkmark" /></div>
+                            <div class="plans-table-td"><Icon type="md-checkmark" /></div>
+                            <div class="plans-table-td"><Icon type="md-checkmark" /></div>
+                            <div class="plans-table-td"><Icon type="md-checkmark" /></div>
+                            <div class="plans-table-td"><Icon type="md-checkmark" /></div>
+                            <div class="plans-table-td"><span> - </span></div>
+                            <div class="plans-table-td"><span> - </span></div>
+                            <div class="plans-table-td"><span> - </span></div>
+                            <div class="plans-table-td"><span> - </span></div>
+                            <div class="plans-table-info-btn">
                                 <Tooltip :content="$L('账号:%、密码:%', 'admin', '123456')" transfer>
                                     <a href="https://pro.wookteam.com" class="btn" target="_blank">{{$L('体验DEMO')}}</a>
                                 </Tooltip>
                             </div>
                         </div>
-                        <div @mouseenter="active=3" class="price-table-item" :class="{active:active==3}">
-                            <div class="price-table-td"><Icon type="md-checkmark" /></div>
-                            <div class="price-table-td"><Icon type="md-checkmark" /></div>
-                            <div class="price-table-td"><Icon type="md-checkmark" /></div>
-                            <div class="price-table-td"><Icon type="md-checkmark" /></div>
-                            <div class="price-table-td"><Icon type="md-checkmark" /></div>
-                            <div class="price-table-td"><Icon type="md-checkmark" /></div>
-                            <div class="price-table-td"><Icon type="md-checkmark" /></div>
-                            <div class="price-table-td"><Icon type="md-checkmark" /></div>
-                            <div class="price-table-td"><Icon type="md-checkmark" /></div>
-                            <div class="price-table-td"><Icon type="md-checkmark" /></div>
-                            <div class="price-table-td"><Icon type="md-checkmark" /></div>
-                            <div class="price-table-td"><Icon type="md-checkmark" /></div>
-                            <div class="price-table-td"><Icon type="md-checkmark" /></div>
-                            <div class="price-table-info-btn">
+                        <div @mouseenter="active=3" class="plans-table-item" :class="{active:active==3}">
+                            <div class="plans-table-td"><Icon type="md-checkmark" /></div>
+                            <div class="plans-table-td"><Icon type="md-checkmark" /></div>
+                            <div class="plans-table-td"><Icon type="md-checkmark" /></div>
+                            <div class="plans-table-td"><Icon type="md-checkmark" /></div>
+                            <div class="plans-table-td"><Icon type="md-checkmark" /></div>
+                            <div class="plans-table-td"><Icon type="md-checkmark" /></div>
+                            <div class="plans-table-td"><Icon type="md-checkmark" /></div>
+                            <div class="plans-table-td"><Icon type="md-checkmark" /></div>
+                            <div class="plans-table-td"><Icon type="md-checkmark" /></div>
+                            <div class="plans-table-td"><Icon type="md-checkmark" /></div>
+                            <div class="plans-table-td"><Icon type="md-checkmark" /></div>
+                            <div class="plans-table-td"><Icon type="md-checkmark" /></div>
+                            <div class="plans-table-td"><Icon type="md-checkmark" /></div>
+                            <div class="plans-table-info-btn">
                                 <a href="javascript:void(0)" class="btn btn-contact" @click="contactShow=true">{{$L('联系我们')}}</a>
                             </div>
                         </div>
@@ -292,7 +292,7 @@
                     <div class="info-function">
                         <div class="func-item">
                             <div class="image">
-                                <img src="../../../statics/images/contrast/1.svg">
+                                <img src="../../../statics/images/plans/1.svg">
                             </div>
                             <div class="func-desc">
                                 <div class="desc-title">
@@ -305,7 +305,7 @@
                         </div>
                         <div class="func-item">
                             <div class="image">
-                                <img src="../../../statics/images/contrast/2.svg">
+                                <img src="../../../statics/images/plans/2.svg">
                             </div>
                             <div class="func-desc">
                                 <div class="desc-title">
@@ -318,7 +318,7 @@
                         </div>
                         <div class="func-item">
                             <div class="image image-80">
-                                <img src="../../../statics/images/contrast/3.svg">
+                                <img src="../../../statics/images/plans/3.svg">
                             </div>
                             <div class="func-desc">
                                 <div class="desc-title">
@@ -340,7 +340,7 @@
                     <div class="info-function">
                         <div class="func-item">
                             <div class="image">
-                                <img src="../../../statics/images/contrast/4.svg">
+                                <img src="../../../statics/images/plans/4.svg">
                             </div>
                             <div class="func-desc">
                                 <div class="desc-title">
@@ -353,7 +353,7 @@
                         </div>
                         <div class="func-item">
                             <div class="image image-80">
-                                <img src="../../../statics/images/contrast/5.svg">
+                                <img src="../../../statics/images/plans/5.svg">
                             </div>
                             <div class="func-desc">
                                 <div class="desc-title">
@@ -366,7 +366,7 @@
                         </div>
                         <div class="func-item">
                             <div class="image">
-                                <img src="../../../statics/images/contrast/6.svg">
+                                <img src="../../../statics/images/plans/6.svg">
                             </div>
                             <div class="func-desc">
                                 <div class="desc-title">
@@ -388,7 +388,7 @@
                     <div class="info-function">
                         <div class="func-item">
                             <div class="image">
-                                <img src="../../../statics/images/contrast/7.svg">
+                                <img src="../../../statics/images/plans/7.svg">
                             </div>
                             <div class="func-desc">
                                 <div class="desc-title">
@@ -401,7 +401,7 @@
                         </div>
                         <div class="func-item">
                             <div class="image image-80">
-                                <img src="../../../statics/images/contrast/8.svg">
+                                <img src="../../../statics/images/plans/8.svg">
                             </div>
                             <div class="func-desc">
                                 <div class="desc-title">
@@ -414,7 +414,7 @@
                         </div>
                         <div class="func-item">
                             <div class="image image-50">
-                                <img src="../../../statics/images/contrast/9.svg">
+                                <img src="../../../statics/images/plans/9.svg">
                             </div>
                             <div class="func-desc">
                                 <div class="desc-title">
@@ -440,7 +440,7 @@
             footer-hide>
             <div class="contact-modal">
                 <p>{{$L('如有任何问题,欢迎使用微信与我们联系。')}}</p>
-                <p><img src="../../../statics/images/contrast/wechat.png"></p>
+                <p><img src="../../../statics/images/plans/wechat.png"></p>
             </div>
         </Modal>
     </div>
@@ -461,7 +461,7 @@
 }
 </style>
 <style lang="scss" scoped>
-.page-contrast {
+.page-plans {
     .top-bg {
         position: absolute;
         top: 0;
@@ -470,7 +470,7 @@
         height: 640px;
         padding-top: 192px;
         z-index: 0;
-        background: url(../../../statics/images/contrast/banner-bg.png) center top no-repeat;
+        background: url(../../../statics/images/plans/banner-bg.png) center top no-repeat;
         background-size: 100% 100%;
     }
 
@@ -562,7 +562,7 @@
             line-height: 30px;
         }
 
-        .price-table {
+        .plans-table {
             max-width: 1120px;
             margin: 110px auto 100px;
             box-shadow: 0 10px 30px rgba(172, 184, 207, 0.3);
@@ -571,10 +571,10 @@
                 font-size: 14px;
                 color: #666666;
             }
-            .price-table-bd {
+            .plans-table-bd {
                 background-color: #fff;
                 display: flex;
-                .price-table-item {
+                .plans-table-item {
                     flex: 1;
                     border-left: 1px solid #eee;
                     position: relative;
@@ -619,14 +619,14 @@
                             transform: scaleY(1.05);
                             box-shadow: 0 10px 30px rgba(172, 184, 207, 0.3);
                         }
-                        & + .price-table-item {
+                        & + .plans-table-item {
                             border-left-color: transparent;
                         }
                     }
                 }
             }
-            .price-table-app {
-                .price-table-td {
+            .plans-table-app {
+                .plans-table-td {
                     height: 60px;
                     display: flex;
                     justify-content: center;
@@ -638,8 +638,8 @@
                         font-family:-apple-system, Arial, sans-serif;
                     }
                 }
-                .price-table-item {
-                    .price-table-td {
+                .plans-table-item {
+                    .plans-table-td {
                         position: relative;
                         i {
                             color: #22d7bb;
@@ -654,7 +654,7 @@
                             transform: translate(30%, -50%);
                         }
                     }
-                    .price-table-info-btn {
+                    .plans-table-info-btn {
                         display: flex;
                         flex-direction: column;
                         justify-content: center;
@@ -662,7 +662,7 @@
                         height: 100px;
                     }
                     &.first {
-                        .price-table-td {
+                        .plans-table-td {
                             font-size: 14px;
                             color: #666;
                             i {
@@ -711,7 +711,7 @@
                                     color: #ff5b57;
                                 }
                             }
-                            &.price-table-app-okr {
+                            &.plans-table-app-okr {
                                 position: relative;
                                 &::after {
                                     content: "(OKR)";
@@ -725,14 +725,14 @@
                     }
                 }
             }
-            .price-table-info-flex {
+            .plans-table-info-flex {
                 display: flex;
                 flex-direction: column;
                 justify-content: center;
                 align-items: center;
             }
-            .price-table-info {
-                .price-table-info-th {
+            .plans-table-info {
+                .plans-table-info-th {
                     height: 70px;
                     background-color: #eef2f8;
                     font-size: 16px;
@@ -755,13 +755,13 @@
                         margin-left: 7px;
                     }
                 }
-                .price-table-info-price {
+                .plans-table-info-price {
                     display: flex;
                     flex-direction: column;
                     justify-content: center;
                     align-items: center;
                     height: 265px;
-                    .price-version {
+                    .plans-version {
                         margin-bottom: 30px;
                     }
                     .currency {
@@ -791,7 +791,7 @@
                         }
                     }
                 }
-                .price-table-info-desc {
+                .plans-table-info-desc {
                     display: flex;
                     flex-direction: column;
                     justify-content: center;
@@ -801,7 +801,7 @@
                     color: #aaaaaa;
                 }
             }
-            .price-table-info-btn {
+            .plans-table-info-btn {
                 display: flex;
                 flex-direction: column;
                 justify-content: center;
@@ -823,7 +823,7 @@
                     }
                 }
             }
-            .price-accordion-head {
+            .plans-accordion-head {
                 height: 60px;
                 line-height: 60px;
                 background-color: #eef2f8;
@@ -857,7 +857,7 @@
                         color: #aaa;
                     }
                 }
-                &.price-accordion-close {
+                &.plans-accordion-close {
                     & > span {
                         transform: rotate(90deg);
                     }
@@ -874,7 +874,7 @@
                 border-bottom: 1px solid #dddddd;
             }
             &.fluid-info-3 {
-                background: url(../../../statics/images/contrast/bg_04.jpg);
+                background: url(../../../statics/images/plans/bg_04.jpg);
                 background-size: 100% 100%;
             }
             .fluid-info-item {

+ 3 - 3
resources/assets/js/main/routes.js

@@ -39,9 +39,9 @@ export default [
         meta: { slide: false, tabActive: 'team' },
         component: resolve => require(['./pages/team.vue'], resolve)
     }, {
-        path: '/contrast',
-        name: 'contrast',
-        component: resolve => require(['./pages/contrast.vue'], resolve)
+        path: '/plans',
+        name: 'plans',
+        component: resolve => require(['./pages/plans.vue'], resolve)
     }, {
         path: '*',
         name: '404',

resources/assets/statics/images/contrast/1.svg → resources/assets/statics/images/plans/1.svg


resources/assets/statics/images/contrast/2.svg → resources/assets/statics/images/plans/2.svg


resources/assets/statics/images/contrast/3.svg → resources/assets/statics/images/plans/3.svg


resources/assets/statics/images/contrast/4.svg → resources/assets/statics/images/plans/4.svg


resources/assets/statics/images/contrast/5.svg → resources/assets/statics/images/plans/5.svg


resources/assets/statics/images/contrast/6.svg → resources/assets/statics/images/plans/6.svg


resources/assets/statics/images/contrast/7.svg → resources/assets/statics/images/plans/7.svg


resources/assets/statics/images/contrast/8.svg → resources/assets/statics/images/plans/8.svg


resources/assets/statics/images/contrast/9.svg → resources/assets/statics/images/plans/9.svg


resources/assets/statics/images/contrast/Ultimate.png → resources/assets/statics/images/plans/Ultimate.png


resources/assets/statics/images/contrast/banner-bg.png → resources/assets/statics/images/plans/banner-bg.png


resources/assets/statics/images/contrast/bg_04.jpg → resources/assets/statics/images/plans/bg_04.jpg


resources/assets/statics/images/contrast/free.png → resources/assets/statics/images/plans/free.png


resources/assets/statics/images/contrast/pro.png → resources/assets/statics/images/plans/pro.png


resources/assets/statics/images/contrast/wechat.png → resources/assets/statics/images/plans/wechat.png