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

首页

old
wangqing 5 years ago
parent
0dd6837c3f
commit
9092223e52
1 changed files with 204 additions and 63 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. 267
      src/views/welcome.vue

267
src/views/welcome.vue
View File

@ -1,59 +1,182 @@
<template> <template>
<div id="home"> <div id="welcome">
<div class="headerDiv"> <div class="header-container">
<el-row> <el-row type="flex" align="middle">
<el-col class="headerCol" :span="3" /> <el-col class="header-col" :span="3" :offset="2">
<el-col class="headerCol" :span="18"> <div>
<el-menu :default-active="menuIndex" mode="horizontal" :router="true" text-color="#205BB5" active-text-color="#205BB5"> <img src="../assets/images/indexLogo.png" class="header-logo"
<div class="headerLogoDiv"> @click="$router.push({path:'/home'})"
<img src="../assets/images/indexLogo.png" class="headerLogo" @click="$router.push({path:'/home'})"> >
</div> </div>
<el-button v-if="isLogin" class="headerBtn" @click="$router.push({path:'/home'})">控 制 台</el-button> </el-col>
<el-button v-if="!isLogin" class="headerBtn" @click="$router.push({path:'/login'})">登 录</el-button> <el-col class="header-col" :span="10" :offset="3">
<el-menu-item v-for="(item, index) in menuRouters" :key="index" :index="item.routerPath" :route="item.routerPath" class="menuItem">{{ item.title }}</el-menu-item> <el-menu :default-active="menuIndex" mode="horizontal" :router="true" text-color="#205BB5"
active-text-color="#205BB5"
>
<el-menu-item v-for="(item, index) in menuRouters" :key="index" :index="item.routerPath"
:route="item.routerPath" class="menu-item"
>
{{ item.title }}
</el-menu-item>
</el-menu> </el-menu>
</el-col> </el-col>
<el-col class="headerCol" :span="3" /> <el-col class="header-col" :span="3">
<el-button v-if="isLogin" class="header-btn" @click="$router.push({path:'/home'})">控 制 台</el-button>
<el-button v-if="!isLogin" class="header-btn" @click="$router.push({path:'/login'})">登 录</el-button>
</el-col>
</el-row> </el-row>
</div> </div>
<div class="headerBody"> <div class="welcome-body">
<div class="indexBody" :style="menuIndex!=='/'?'border:solid thin #205BB5;border-left:none;border-right:none;':'border:none;'"> <div class="view_container"
:style="menuIndex!=='/'?'border:solid thin #205BB5;border-left:none;border-right:none;':'border:none;'"
>
<el-row> <el-row>
<el-col class="bodyCol" :span="3" /> <el-col class="body-col" :span="3" />
<el-col class="bodyCol" :span="18"> <el-col class="body-col" :span="18">
<div v-if="menuIndex==='/'"> <div v-if="menuIndex==='/'">
<el-row> <el-row>
<el-col :span="14"> <el-col :span="14">
<div class="bodyLeft"> <div class="view_container_content">
<p class="bodyTitle">TDuck - 填鸭表单</p> <p class="body-title">TDuck - 填鸭表单</p>
<p class="bodySlogan">有你所想，有你所得。</p> <p class="body-slogan">有你所想，有你所得。</p>
<p class="bodySloganEn">TDuck - Have what you want, get you income.</p> <p class="body-sloganEn">TDuck - Have what you want, get you income.</p>
<p class="bodyDetail">TDuck填鸭，是一款在线制作表单的应用工具，通过填鸭表单可以收集任何你想得到的信息。</p> <p class="body-detail">TDuck填鸭，是一款在线制作表单的应用工具，通过填鸭表单可以收集任何你想得到的信息。</p>
<p class="bodyDetail">简单易用，灵活的反馈数据筛选；统计图表一目了然</p> <p class="body-detail">简单易用，灵活的反馈数据筛选；统计图表一目了然</p>
<div class="bodyBtnDiv"> <div>
<el-button class="bodyBtn primary" type="primary" @click="$router.push({path:'/console'})">免费使用</el-button> <el-button class="body-btn primary" type="primary"
<el-button class="bodyBtn">在线体验</el-button> @click="$router.push({path:'/console'})"
>
免费使用
</el-button>
<el-button class="body-btn">在线体验</el-button>
</div> </div>
</div> </div>
</el-col> </el-col>
<el-col :span="10"> <el-col :span="10">
<div class="bodyRight" /> <div class="bodyRight">
<img class="body-right-img"
src="https://freebrio.oss-cn-shanghai.aliyuncs.com/t/v2_q2woer.png"
>
</div>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
<router-view />
</el-col> </el-col>
<el-col class="bodyCol" :span="3" /> <el-col class="body-col" :span="3" />
</el-row> </el-row>
</div> </div>
<div class="footerDiv"> <el-divider />
关于我们 <div class="view_container"
:style="menuIndex!=='/'?'border:solid thin #205BB5;border-left:none;border-right:none;':'border:none;'"
>
<el-row>
<el-col class="body-col" :span="24">
<div v-if="menuIndex==='/'">
<el-row>
<el-col :span="5" :offset="1">
<div class="bodyRight">
<img class="body-right-img"
src="https://freebrio.oss-cn-shanghai.aliyuncs.com/t/v2_q2wstp.png"
>
</div>
</el-col>
<el-col :offset="5" :span="13">
<div class="view_container_content">
<p style="font-size: 28px;">杂乱的工作界面也会影响心情鸭！</p>
<p class="body-title">TDuck，化繁为简，给你最好的体验。</p>
<p class="body-sloganEn">TDuck -So Easy。</p>
<p class="body-detail">·超多表单组件供您选择</p>
<p class="body-detail">·逻辑设置，让您的表单更灵活</p>
<p class="body-detail"> ·Element UI，饿了么同款UI组建，表单也要美美哒</p>
<p class="body-detail"> ·多样化数据统计；懂你，胜过另一半</p>
<div style="width: 42px;" class="title-divider-line" />
</div>
</el-col>
</el-row>
</div>
<el-divider />
</el-col>
<el-col class="body-col" :span="3" />
</el-row>
</div> </div>
<div class="view_container">
<div class="view_container_content" style="padding: 100px 0;">
<el-row type="flex" align="middle">
<el-col :span="10" offset="5">
<p style="font-size: 28px;">TDuck - 填鸭表单</p>
<p class="body-title">社区版 / 开源版 / 企业部署 </p>
<p class="body-detail">Technology changes the world ——用技术改变世界</p>
</el-col>
<el-col :span="8">
<p class="body-detail"> ·人人都是我们的用户 </p>
<p class="body-detail">·基于Apache开源协议，开发者的福音</p>
<p class="body-detail">·成熟的技术支持，企业表单问卷系统解决方案</p>
<p class="body-detail">·更新速度快，总为您奉上不一样的惊喜</p>
<div style="width: 112px;" class="title-divider-line" />
<p style="font-size: 20px; font-weight: 550;">联系我们</p>
</el-col>
</el-row>
<el-row>
<el-col :span="10" :offset="5">
<img style="height: 478px;"
src="https://freebrio.oss-cn-shanghai.aliyuncs.com/t/v2_q2wxu6.gif"
>
</el-col>
</el-row>
</div>
</div>
<div class="welcome-footer">
<el-row>
<el-col :span="3" :offset="2">
<p class="title">关于我们</p>
<p class="subtitle" style="width: 182px;">
TDuck — 是一款能够帮助
你进行信息收集、市场开拓、
客户挖掘并展开持续营销活
动的管理平台。
</p>
</el-col>
<el-col :span="3">
<p class="title"> 项目地址</p>
<p class="subtitle">
码云
</p>
<p class="subtitle">
Gitee
</p>
</el-col>
<el-col :span="3">
<p class="title"> 联系方式</p>
<p class="subtitle">
TDuckServer@tduckcloud.com
</p>
<p class="subtitle">
+86 15080929435
</p>
</el-col>
<el-col :span="3">
<p class="title"> 友情地址</p>
<p class="subtitle">
Element UI
</p>
</el-col>
<el-col span="3" :offset="3">
<img style="width: 130px; height: 130px;" src="https://freebrio.oss-cn-shanghai.aliyuncs.com/t/v2_q2x0aj.png">
<p class="title">微信公众号/关注我们</p>
</el-col>
</el-row>
<el-divider />
<p class="subtitle" style="text-align: center;">
Copyright © 2020 TDuckCloud. All Rights Reserved. 湘ICP备19005498号-1 湖南省众达数蔚信息技术有限公司 版权所有
</p>
</div>
<router-view />
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import store from '@/store/index.js' import store from '@/store/index.js'
export default { export default {
data() { data() {
return { return {
@ -97,45 +220,45 @@ export default {
} }
</script> </script>
<style scoped> <style scoped>
.headerCol, .header-col,
.bodyCol { .body-col {
border: solid thin white; border: solid thin white;
} }
.headerDiv { .header-container {
background-color: white; background-color: white;
position: fixed; position: fixed;
width: 100%; width: 100%;
top: 0; top: 0;
z-index: 100; z-index: 100;
} }
.headerDiv .headerCol .el-menu--horizontal { .header-container .header-col .el-menu--horizontal {
border: none; border: none;
} }
.headerLogo { .header-logo {
float: left; float: left;
cursor: pointer; cursor: pointer;
height: 60px; height: 60px;
padding: 25px 0 20px 0; padding: 25px 0 20px 0;
} }
.menuItem { .menu-item {
line-height: 110px; line-height: 110px;
height: 110px; height: 110px;
font-size: 18px; font-size: 18px;
font-weight: 900; font-weight: 900;
float: right; float: right;
} }
.headerBtn { .header-btn {
margin: 35px 0 35px 20px; margin: 35px 0 35px 20px;
float: right; float: right;
} }
.bodyBtn { .body-btn {
margin: 30px 20px 0 0; margin: 30px 20px 0 0;
font-size: 20px; font-size: 20px;
padding-left: 20px; padding-left: 20px;
padding-right: 20px; padding-right: 20px;
} }
.headerBtn, .header-btn,
.bodyBtn { .body-btn {
color: #205bb5; color: #205bb5;
border-color: #205bb5; border-color: #205bb5;
} }
@ -143,10 +266,10 @@ export default {
color: #fff; color: #fff;
background-color: #205bb5; background-color: #205bb5;
} }
.headerBtn:focus, .header-btn:focus,
.headerBtn:hover, .header-btn:hover,
.bodyBtn:focus, .body-btn:focus,
.bodyBtn:hover { .body-btn:hover {
border-color: #205bb5; border-color: #205bb5;
color: #205bb5; color: #205bb5;
} }
@ -155,51 +278,69 @@ export default {
border-color: #205bb5; border-color: #205bb5;
color: #fff; color: #fff;
} }
.headerBody { .welcome-body {
padding-top: 112px; padding-top: 112px;
} }
.footerDiv { .view_container {
font-size: 14px;
color: #205bb5;
text-align: center;
line-height: 110px;
}
.indexBody {
margin: 0; margin: 0;
} }
.bodyLeft { .view_container_content {
padding: 200px 110px; padding: 200px 110px;
} }
.bodyLeft p { .view_container_content p {
color: #205bb5; color: #205bb5;
} }
.bodyTitle { .body-title {
font-size: 35px; font-size: 35px;
font-weight: 900; font-weight: 900;
line-height: 25px; line-height: 25px;
margin: 0 0 30px 0; margin: 0 0 30px 0;
} }
.bodySlogan { .body-slogan {
font-size: 45px; font-size: 45px;
font-weight: 900; font-weight: 900;
line-height: 45px; line-height: 45px;
margin: 0 0 5px 0; margin: 0 0 5px 0;
} }
.bodySloganEn { .body-sloganEn {
line-height: 15px; line-height: 15px;
margin: 0 0 25px 0; margin: 0 0 25px 0;
} }
.bodyDetail { .body-detail {
line-height: 15px; line-height: 15px;
margin: 0 0 10px 0; margin: 0 0 10px 0;
} }
.bodySloganEn, .body-sloganEn,
.bodyDetail { .body-detail {
font-size: 15px; font-size: 15px;
} }
.bodyRightImg { .body-right-img {
height: 665px; height: 665px;
margin: 0 auto;
display: block; display: block;
} }
.title-divider-line {
height: 3px;
line-height: 20px;
background-color: rgba(32, 91, 181, 100);
text-align: center;
border: 1px solid rgba(255, 255, 255, 100);
}
.welcome-footer {
height: 300px;
line-height: 20px;
background-color: rgba(32, 91, 181, 100);
text-align: center;
border: 1px solid rgba(187, 187, 187, 100);
padding: 69px 0 0 0;
}
.welcome-footer .title {
color: rgba(255, 255, 255, 100);
font-size: 20px;
text-align: left;
}
.welcome-footer .subtitle {
color: rgba(255, 255, 255, 100);
font-size: 14px;
text-align: left;
}
</style> </style>

Write Preview
Loading…
Cancel
Save