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
Split 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>
<count-to :end-val="item.money" />
<s>{{ item.money }}</s>
<s>{{ item.dismoney }}</s>
<em>{{ item.tip }}</em>
</p>
</template>

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

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

Write Preview
Loading…
Cancel
Save