完成首页

src/router/modules/root.js

@@ -14,37 +14,20 @@ export default [
         meta: {requireLogin: false},
         component: () => import(/* webpackChunkName: 'root' */ '@/views/account/validate')
     },
+    {
+        path: '/forget/password',
+        meta: {requireLogin: false},
+        component: () => import(/* webpackChunkName: 'root' */ '@/views/account/ForgetPwd')
+    },
     {
         path: '/',
         meta: {requireLogin: false},
-        component: () => import(/* webpackChunkName: 'root' */ '@/views/official/index.vue'),
+        component: () => import(/* webpackChunkName: 'root' */ '@/views/official/index.vue')
-        children: [
+    },
-            {
+    {
-                path: '',
+        path: '/payService',
-                meta: {requireLogin: false},
+        meta: {requireLogin: false},
-                component: () => import(/* webpackChunkName: 'root' */ '@/views/official/introduction.vue')
+        component: () => import(/* webpackChunkName: 'root' */ '@/views/official/PayService')
-            },
-            {
-                path: 'forget/password',
-                meta: {requireLogin: false},
-                component: () => import(/* webpackChunkName: 'root' */ '@/views/account/ForgetPwd')
-            },
-            {
-                path: '/enterprise',
-                meta: {requireLogin: false},
-                component: () => import(/* webpackChunkName: 'root' */ '@/views/official/enterprise')
-            },
-            {
-                path: '/sources',
-                meta: {requireLogin: false},
-                component: () => import(/* webpackChunkName: 'root' */ '@/views/official/sources')
-            },
-            {
-                path: '/proposal',
-                meta: {requireLogin: false},
-                component: () => import(/* webpackChunkName: 'root' */ '@/views/official/proposal')
-            }
-        ]
     },
     {
         path: '/login',

src/views/official/DataPay.vue

@@ -0,0 +1,196 @@
+<template>
+    <div class="data-pay">
+        <el-row :span="24">
+            <el-col v-for="(item,index) in data"
+                    :key="index"
+                    :md="span"
+                    :sm="12"
+                    :xs="24"
+            >
+                <div class="item">
+                    <div :style="{backgroundColor:item.color}"
+                         class="top"
+                    />
+                    <div class="header">
+                        <p class="title">{{ item.title }}</p>
+                        <img :src="item.src"
+                             alt=""
+                             class="img"
+                        >
+                        <template v-if="item.subtitle">
+                            <p :style="{color:item.color}"
+                               class="subtitle"
+                            >
+                                {{ item.subtitle }}
+                            </p>
+                        </template>
+                        <template v-if="item.money || item.dismoney">
+                            <p :style="{color:item.color}"
+                               class="money"
+                            >
+                                <span>¥</span>
+                                <count-to :end-val="item.money" />
+                                <s>{{ item.money }}</s>
+                                <em>{{ item.tip }}</em>
+                            </p>
+                        </template>
+                        <div class="line" />
+                        <a :href="item.href?item.href:'javascript:void(0);'"
+                           :style="{backgroundColor:item.color}"
+                           class="btn"
+                           @click="item.click?item.click(item):''"
+                        >{{ item.subtext }}</a>
+                    </div>
+                    <div class="list">
+                        <div v-for="(citem,cindex) in item.list"
+                             :key="cindex"
+                             class="list-item"
+                        >
+                            <i v-if="citem.check"
+                               :style="{color:item.color}"
+                               class="list-item-icon list-item--check"
+                            >√</i>
+                            <i v-else
+                               class="list-item-icon list-item--no"
+                            >x</i>
+                            <a :href="citem.href?citem.href:'javascript:void(0);'">
+                                <el-tooltip :disabled="!citem.tip"
+                                            effect="dark"
+                                            placement="top"
+                                >
+                                    <div slot="content"
+                                         v-html="citem.tip"
+                                    />
+                                    <span :class="{'list-item--link':citem.href}">{{ citem.title }}</span>
+                                </el-tooltip>
+
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </el-col>
+        </el-row>
+    </div>
+</template>
+
+<script>
+import CountTo from '@/components/CountTo'
+export default {
+    name: 'DataPay',
+    components: {CountTo},
+    props: {
+        option: {
+            type: Object,
+            default: () => {
+            }
+        }
+    },
+    computed: {
+        animation() {
+            return this.option.animation
+        },
+        decimals() {
+            return this.option.decimals || 0
+        },
+        span() {
+            return this.option.span || 6
+        },
+        data() {
+            return this.option.data || []
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.data-pay .item {
+    margin: 0 auto;
+    padding-bottom: 16px;
+    width: 80%;
+    position: relative;
+    border-radius: 4px;
+    background-color: #fff;
+    min-height: 670px;
+    -webkit-box-shadow: 1px 2px 10px #eee;
+    box-shadow: 1px 2px 10px #eee;
+}
+.data-pay .top {
+    width: 100%;
+    height: 6px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    border-radius: 4px 4px 0 0;
+}
+.data-pay .header {
+    margin-bottom: 40px;
+    text-align: center;
+}
+.data-pay .title {
+    text-align: center;
+    padding: 20px 0 10px;
+    font-size: 20px;
+    font-weight: 200;
+}
+.data-pay .money span {
+    margin-right: 5px;
+    font-size: 14px;
+}
+.data-pay .money .b {
+    margin-right: 2px;
+    font-size: 20px;
+    font-weight: 700;
+}
+.data-pay .money s {
+    margin-right: 3px;
+    font-size: 12px;
+}
+.data-pay .money em {
+    font-size: 14px;
+    font-style: normal;
+}
+.data-pay .img {
+    width: 50px;
+}
+.data-pay .line {
+    width: 60%;
+    height: 1px;
+    background: rgba(150, 150, 150, 0.1);
+    margin: 20px auto;
+}
+.data-pay .btn {
+    display: block;
+    width: 120px;
+    height: 32px;
+    line-height: 32px;
+    margin: 0 auto;
+    text-align: center;
+    border-radius: 32px;
+    color: #fff;
+    cursor: pointer;
+    -webkit-transition: opacity 0.2s ease-in-out;
+    transition: opacity 0.2s ease-in-out;
+}
+.data-pay .list-item {
+    list-style: none;
+    padding-left: 20px;
+    margin-bottom: 12px;
+    color: #666;
+    font-size: 14px;
+}
+.data-pay .list-item a {
+    color: #666;
+}
+.data-pay .list-item-icon {
+    color: #515a6e;
+    margin-right: 8px;
+}
+.data-pay .list-item--link {
+    font-size: 12px;
+    color: #2d8cf0;
+}
+.data-pay .list-item--no,
+.data-pay .list-item--no + span {
+    color: #c5c8ce;
+}
+</style>

src/views/official/PayService.vue

@@ -0,0 +1,188 @@
+<template>
+    <data-pay :option="option" />
+</template>
+
+<script>
+import DataPay from '@/views/official/DataPay'
+
+export default {
+    name: 'PayService',
+    components: {DataPay},
+    data() {
+        return {
+            option: {
+                span: 8,
+                data: [
+                    {
+                        title: '后台模版',
+                        src: '/images/official/vip1.png',
+                        money: '999999',
+                        dismoney: '999999',
+                        tip: '/永久',
+                        color: '#808695',
+                        subtext: '购买',
+                        click: function(item) {
+                            alert(JSON.stringify(item))
+                        },
+                        list: [
+                            {
+                                title: '面向全屏幕尺寸的响应式适配能力',
+                                check: true,
+                                tip: `<h2 > 后台管理模版 - <small>点击红色字体即可预览</small></h2> <br />
+                1.用户名登录/验证码登录/第三方登陆(QQ, 微信)/人脸识别/多种登录方式。 <br /> <br />
+                2.全新的前端错误日志监控机制 <br /> <br />
+                3.灵活的10 + 多款主题自由配置<br /><br />
+                4.路由权限、菜单权限、登录权限 <br /> <br />
+                5.前端路由动态服务端加载和无限极动态路由加载。 <br /> <br />
+                6.模块的可拆卸化, 达到开箱即用 <br /> <br />`
+                            },
+                            {
+                                title: '支持IE9+等系列浏览器',
+                                check: true
+                            },
+                            {
+                                title: '全新的前端错误日志监控机制',
+                                check: true
+                            },
+                            {
+                                title: '基于最新的avue底层开发',
+                                check: true
+                            },
+                            {
+                                title: '前端路由动态服务端加载',
+                                check: true
+                            },
+                            {
+                                title: '灵活的多款主题自由配置',
+                                check: true
+                            },
+                            {
+                                title: '模块的可拆卸化,达到开箱即用',
+                                check: true
+                            },
+                            {
+                                title: '免费的私人git私服',
+                                check: true
+                            },
+                            {
+                                title: '专属会员群',
+                                check: true
+                            }, {
+                                title: '前端最新干货分享',
+                                check: true
+                            }, {
+                                title: '赠送 Avue.js 脚手架文档（价值¥59.99）',
+                                href: 'https://www.kancloud.cn/smallwei/avue',
+                                check: true
+                            }, {
+                                title: '赠送 Avue 修仙系列视频教程',
+                                href: 'https://www.bilibili.com/video/av24644922',
+                                check: true
+                            }
+                        ]
+                    }, {
+                        title: 'Avuex源码',
+                        src: '/images/official/vip2.png',
+                        color: '#ffa820',
+                        money: '999999999',
+                        dismoney: '999999',
+                        tip: '/永久',
+                        subtext: '购买',
+                        click: function(item) {
+                            alert(JSON.stringify(item))
+                        },
+                        list: [
+                            {
+                                title: '一键集成表格的导出excel,打印,等功能',
+                                check: true
+                            },
+                            {
+                                title: '底层代码可重用轻松对接多个UI框架',
+                                check: true
+                            },
+                            {
+                                title: '底层更加完善的开发错误调试机制',
+                                check: true
+                            },
+                            {
+                                title: '一套代码多个终端自适应',
+                                check: true
+                            },
+                            {
+                                title: '一键集成表格的导出excel，打印，等常用功能',
+                                check: true
+                            },
+                            {
+                                title: '表格的批量操作,表单的级联操作更加便捷',
+                                check: true
+                            },
+                            {
+                                title: '新增大量常用组件（搜索，选项卡）',
+                                check: true
+                            },
+                            {
+                                title: '新增大量全新可配置的骚属性',
+                                check: true
+                            },
+                            {
+                                title: '丰富的数据展示模版组件包',
+                                check: true
+                            },
+                            {
+                                title: '专属的开发者文档，助你快速掌握',
+                                check: true
+                            }, {
+                                title: '赠送 Avue.js 脚手架文档（价值¥59.99）',
+                                href: 'https://www.kancloud.cn/smallwei/avue',
+                                check: true
+                            }, {
+                                title: '赠送 Avue 修仙系列视频教程',
+                                href: 'https://www.bilibili.com/video/av24644922',
+                                check: true
+                            }
+                        ]
+                    }, {
+                        title: '全家桶',
+                        src: '/images/official/vip3.png',
+                        color: '#ef4868',
+                        money: '999999',
+                        dismoney: '999999',
+                        tip: '/永久',
+                        subtext: '购买',
+                        click: function(item) {
+                            alert(JSON.stringify(item))
+                        },
+                        list: [
+                            {
+                                title: '授权商业化开发,永久更新授权使用',
+                                check: true
+                            },
+                            {
+                                title: '后期更新和新产品将全部免费',
+                                check: true
+                            },
+                            {
+                                title: '拥有avue系列的全部特权和全部源码（包括avuex）',
+                                check: true
+                            },
+                            {
+                                title: '提供远程技术支持和问题解答',
+                                check: true
+                            }, {
+                                title: '赠送 Avue.js 脚手架文档（价值¥59.99）',
+                                href: 'https://www.kancloud.cn/smallwei/avue',
+                                check: true
+                            }, {
+                                title: '赠送 Avue 修仙系列视频教程',
+                                href: 'https://www.bilibili.com/video/av24644922',
+                                check: true
+                            }
+                        ]
+                    }
+                ]
+            }
+        }
+    }
+}
+</script>
+

src/views/official/index.vue

@@ -10,7 +10,7 @@
                     <span class="menu-item" @click="$router.push({path:'/'})">首页</span>
                     <a class="menu-item" href="https://gitee.com/TDuckApp/tduck-platform" target="_blank">开源项目</a>
                     <a class="menu-item" href="https://doc.tduckapp.com/" target="_blank">开发文档</a>
-                    <span class="menu-item">付费服务</span>
+                    <span class="menu-item" @click="$router.push({path:'/payService'})">付费服务</span>
                     <span class="menu-item add-contact-me">加入社群
                         <div>
                             <img src="@/assets/images/official/contact_me_qr.png">
@@ -224,7 +224,7 @@ body {
     position: relative;
     .background {
         position: absolute;
-        z-index: -1;
+        z-index: 1;
         img {
             width: 100%;
         }
@@ -238,6 +238,9 @@ body {
         justify-content: space-around;
         align-content: center;
         align-items: center;
+        * {
+            z-index: 20;
+        }
         .logo {
             width: 182px;
             height: 28px;
@@ -287,6 +290,9 @@ body {
         justify-content: space-evenly;
         align-content: center;
         align-items: center;
+        * {
+            z-index: 20;
+        }
         .slogan {
             font-size: 59px;
             font-weight: bold;
@@ -461,7 +467,7 @@ body {
     }
 }
 .top-header {
-    animation: stickyMenu1 0.5s ease-in-out;
+    animation: stickyMenu1 0.4s ease-in-out;
 }
 .is-fixed {
     position: fixed;