elink-star
/
tduck-front
12
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

完成首页

old
wangqing 4 years ago
parent
89a4f81ba0
commit
2e9bbebd1e
4 changed files with 150 additions and 103 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/views/official/DataPay.vue
  2. 150
      src/views/official/PayService.vue
  3. 99
      src/views/official/header.vue
  4. 2
      src/views/official/index.vue

2
src/views/official/DataPay.vue
View File

@ -30,7 +30,7 @@
> >
<span>¥</span> <span>¥</span>
<count-to :end-val="item.money" /> <count-to :end-val="item.money" />
<s>{{ item.money }}</s> <s>{{ item.dismoney }}</s>
<em>{{ item.tip }}</em> <em>{{ item.tip }}</em>
</p> </p>
</template> </template>

150
src/views/official/PayService.vue
View File

@ -1,185 +1,133 @@
<template> <template>
<data-pay :option="option" /> <div>
<Header />
<data-pay :option="option" />
</div>
</template> </template>
<script> <script>
import DataPay from '@/views/official/DataPay' import DataPay from '@/views/official/DataPay'
import Header from '@/views/official/header'
import {MessageBox} from 'element-ui'
export default { export default {
name: 'PayService', name: 'PayService',
components: {DataPay}, components: {Header, DataPay},
data() { data() {
return { return {
option: { option: {
span: 8, span: 8,
data: [ data: [
{ {
title: '后台模版', title: '私有部署',
src: '/images/official/vip1.png', src: 'https://qiniu.smileyi.top/vip1.png',
money: '999999', money: 599,
dismoney: '999999', dismoney: 999,
tip: '/永久', tip: '/次',
color: '#808695', color: '#2054F0FF',
subtext: '购买', subtext: '购买',
click: function(item) { click: function() {
alert(JSON.stringify(item)) MessageBox.alert('暂无', '添加客服微信', {
dangerouslyUseHTMLString: true
})
}, },
list: [ list: [
{ {
title: '面向全屏幕尺寸的响应式适配能力', title: '官方部署，快速使用',
check: true, 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+等系列浏览器', title: '一次部署，开心使用',
check: true check: true
}, },
{ {
title: '全新的前端错误日志监控机制', title: '愉快解决，不再头疼',
check: true check: true
}, },
{ {
title: '基于最新的avue底层开发', title: '稳定部署，专业团队',
check: true check: true
}, },
{ {
title: '前端路由动态服务端加载', title: 'XXXX',
check: true check: true
}, },
{ {
title: '灵活的多款主题自由配置', title: 'XXXX',
check: true check: true
}, },
{ {
title: '模块的可拆卸化,达到开箱即用', title: 'XXX',
check: true check: true
}, },
{ {
title: '免费的私人git私服', title: 'XXXX',
check: true check: true
}, },
{ {
title: '专属会员群', title: 'XXXX',
check: true
}, {
title: '前端最新干货分享',
check: true
}, {
title: '赠送 Avue.js 脚手架文档（价值¥59.99）',
href: 'https://www.kancloud.cn/smallwei/avue',
check: true check: true
}, { }, {
title: '赠送 Avue 修仙系列视频教程', title: 'XXXX',
href: 'https://www.bilibili.com/video/av24644922',
check: true check: true
} }
] ]
}, { }, {
title: 'Avuex源码', title: '私有定制',
src: '/images/official/vip2.png', src: 'https://qiniu.smileyi.top/vip2.png',
color: '#ffa820', color: '#33C9FDFF',
money: '999999999', money: 888,
dismoney: '999999', dismoney: 1000,
tip: '/永久', tip: '/起',
subtext: '购买', subtext: '购买',
click: function(item) { click: function() {
alert(JSON.stringify(item)) MessageBox.alert('暂无', '添加客服微信', {
dangerouslyUseHTMLString: true
})
}, },
list: [ list: [
{ {
title: '一键集成表格的导出excel,打印,等功能', title: '私有定制，随心所欲',
check: true
},
{
title: '底层代码可重用轻松对接多个UI框架',
check: true check: true
}, },
{ {
title: '底层更加完善的开发错误调试机制', title: '强大团队，快速赋能你的业务',
check: true check: true
}, },
{ {
title: '一套代码多个终端自适应', title: '效果满意，价格美丽',
check: true check: true
}, },
{ {
title: '一键集成表格的导出excel，打印，等常用功能', title: 'XXXXX',
check: true check: true
}, },
{ {
title: '表格的批量操作,表单的级联操作更加便捷', title: 'xXXXXX',
check: true check: true
}, },
{ {
title: '新增大量常用组件（搜索，选项卡）', title: 'XXXXX',
check: true check: true
}, },
{ {
title: '新增大量全新可配置的骚属性', title: 'XXXX',
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 check: true
}, },
{ {
title: '后期更新和新产品将全部免费', title: 'XXXX',
check: true check: true
}, },
{ {
title: '拥有avue系列的全部特权和全部源码（包括avuex）', title: 'XXXX',
check: true check: true
}, },
{ {
title: '提供远程技术支持和问题解答', title: 'XXXXX',
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 check: true
} }
] ]
} }]
]
} }
} }
} }

99
src/views/official/header.vue
View File

@ -0,0 +1,99 @@
<template>
<div class="top-header">
<img class="logo" src="@/assets/images/official/TDUCK@2x.png">
<div>
<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" @click="$router.push({path:'/payService'})">付费服务</span>
<span class="menu-item add-contact-me">加入社群
<div>
<img src="@/assets/images/official/contact_me_qr.png">
</div>
</span>
</div>
<div>
<el-button v-if="isLogin" @click="$router.push({path:'/home'})">控 制 台</el-button>
<el-button v-if="!isLogin" @click="$router.push({path:'/login'})">
登 录
</el-button>
</div>
</div>
</template>
<script>
import store from '@/store'
export default {
name: 'Header',
computed: {
getStore() {
return store
},
isLogin() {
return this.getStore.getters['user/isLogin']
}
}
}
</script>
<style lang="scss" scoped>
.top-header {
width: 100%;
height: 72px;
line-height: 72px;
display: flex;
flex-direction: row;
justify-content: space-around;
align-content: center;
align-items: center;
background: linear-gradient(-67deg, rgb(32, 84, 240), rgba(51, 201, 253, 1), rgba(35, 86, 244, 1));
* {
z-index: 20;
}
.logo {
width: 182px;
height: 28px;
}
.menu-item {
font-size: 17px;
font-weight: 300;
cursor: pointer;
color: #fff;
margin-right: 73px;
line-height: 72px;
}
.add-contact-me {
position: relative;
div {
margin-top: 20px;
position: absolute;
right: 0%;
top: 100%;
visibility: hidden;
opacity: 0;
transform: translateY(100px);
transition: 0.3s;
}
img {
width: 100px;
height: 100px;
}
}
.add-contact-me:hover {
div {
visibility: visible;
opacity: 1;
transform: translateY(0);
}
}
.login-btn {
width: 95px;
height: 37px;
background: #fff;
border-radius: 11px;
}
}
</style>

2
src/views/official/index.vue
View File

@ -5,7 +5,7 @@
<img src="@/assets/images/official/background.svg"> <img src="@/assets/images/official/background.svg">
</div> </div>
<div id="headerNav" :class="{'is-fixed' : isFixed}" class="top-header"> <div id="headerNav" :class="{'is-fixed' : isFixed}" class="top-header">
<img class="logo" src="@/assets/images/official/TDUCK@2x.png"> <img class="logo" src="@/assets/images/official/TDUCK@2x.png" @click="$router.push({path:'/'})">
<div> <div>
<span class="menu-item" @click="$router.push({path:'/'})">首页</span> <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://gitee.com/TDuckApp/tduck-platform" target="_blank">开源项目</a>

Write Preview
Loading…
Cancel
Save