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

fix views\official index

old
wangqing 4 years ago
parent
49ffd58275
commit
7b363bacd0
2 changed files with 140 additions and 106 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. 38
      src/App.vue
  2. 200
      src/views/official/index.vue

38
src/App.vue
View File

@ -39,40 +39,4 @@ export default {
} }
} }
</script> </script>
<style lang="scss">
.github-btn {
a {
font-weight: bold;
color: #303133;
padding: 4px 12px;
border: solid 1px #DCDFE6;
margin-left: 8px;
position: relative;
border-radius: 4px;
}
a:hover{
color: #2C67E3;
}
a:last-child:before {
position: absolute;
display: inline-block;
border-width: 7px;
border-style: solid;
border-color: transparent rgba(255, 255, 255, 0.4) transparent transparent;
left: -15px;
top: 25%;
content: '';
}
/* 小角的背景填充*/
a:last-child:after {
position: absolute;
display: inline-block;
border-width: 6px;/*与before的三角形重叠差1px，和元素边框是边框宽度一致*/
border-style: solid;
border-color: transparent #eee transparent transparent;/*边框颜色（小角的填充色）要与整体元素背景一致*/
left: -12px;
top: 25%;
content: '';
}
}
</style>

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

@ -13,7 +13,7 @@
@click="$router.push({path:'/'})" @click="$router.push({path:'/'})"
> >
<img <img
src="https://demo.tduckapp.com/img/TDUCK@2x.8b6c71be.png" src="@/assets/images/official/TDUCK@2x.png"
alt="img" alt="img"
> >
</div> </div>
@ -75,7 +75,7 @@
</el-col> </el-col>
</el-row> </el-row>
<div data-aos="zoom-in" data-aos-duration="1000" class="content-wrapper-image"> <div data-aos="zoom-in" data-aos-duration="1000" class="content-wrapper-image">
<img src="/img/desc1.b1b39e1f.png"> <img src="@/assets/images/official/desc1.png">
</div> </div>
<div class="content-wrapper-solutions"> <div class="content-wrapper-solutions">
<p class="title">我们的解决方案</p> <p class="title">我们的解决方案</p>
@ -170,6 +170,7 @@
<script> <script>
import store from '@/store' import store from '@/store'
export default { export default {
name: 'AppIndex', name: 'AppIndex',
data() { data() {
@ -304,6 +305,7 @@ export default {
title: '关注下 Star 数', title: '关注下 Star 数',
duration: 0, duration: 0,
position: 'bottom-left', position: 'bottom-left',
customClass: 'notify-success',
dangerouslyUseHTMLString: true, dangerouslyUseHTMLString: true,
message: '<div style="line-height: 30px">我们需要您的支持，请点击按钮帮助我们增加 gitee star。<span class="github-btn"><a href="https://gitee.com/TDuckApp/tduck-platform" target="_blank">Start</a></span></div>' message: '<div style="line-height: 30px">我们需要您的支持，请点击按钮帮助我们增加 gitee star。<span class="github-btn"><a href="https://gitee.com/TDuckApp/tduck-platform" target="_blank">Start</a></span></div>'
}) })
@ -313,41 +315,7 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.github-btn {
a {
font-weight: bold;
color: #303133;
padding: 4px 12px;
border: solid 1px #DCDFE6;
margin-left: 8px;
position: relative;
border-radius: 4px;
}
a:hover{
color: #2C67E3;
}
a:last-child:before {
position: absolute;
display: inline-block;
border-width: 7px;
border-style: solid;
border-color: transparent rgba(255, 255, 255, 0.4) transparent transparent;
left: -15px;
top: 25%;
content: '';
}
/* 小角的背景填充*/
a:last-child:after {
position: absolute;
display: inline-block;
border-width: 6px;/*与before的三角形重叠差1px，和元素边框是边框宽度一致*/
border-style: solid;
border-color: transparent #eee transparent transparent;/*边框颜色（小角的填充色）要与整体元素背景一致*/
left: -12px;
top: 25%;
content: '';
}
}
.header-page { .header-page {
max-width: 1280px; max-width: 1280px;
// box-shadow: rgb(0 0 0 / 5%) 0px 4px 6px; // box-shadow: rgb(0 0 0 / 5%) 0px 4px 6px;
@ -356,21 +324,25 @@ export default {
padding: 0 24px; padding: 0 24px;
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
.header-logo { .header-logo {
display: inline-block; display: inline-block;
position: relative; position: relative;
width: 150px; width: 150px;
min-width: 150px; min-width: 150px;
line-height: 64px; line-height: 64px;
img { img {
width: 100%; width: 100%;
vertical-align: middle; vertical-align: middle;
display: inline-block; display: inline-block;
} }
} }
.header-btn { .header-btn {
position: relative; position: relative;
text-align: right; text-align: right;
button { button {
font-size: 12px; font-size: 12px;
font-weight: 400; font-weight: 400;
@ -387,28 +359,35 @@ export default {
em:nth-child(1) { em:nth-child(1) {
transform: translateY(6px) rotate(45deg); transform: translateY(6px) rotate(45deg);
} }
em:nth-child(2) { em:nth-child(2) {
opacity: 0; opacity: 0;
} }
em:nth-child(3) { em:nth-child(3) {
transform: translateY(-6px) rotate(-45deg); transform: translateY(-6px) rotate(-45deg);
} }
} }
} }
.header-menu { .header-menu {
a { a {
font-weight: 400; font-weight: 400;
color: #fff; color: #fff;
padding: 0 20px; padding: 0 20px;
} }
a:first-child{
a:first-child {
padding-left: 0; padding-left: 0;
} }
a:last-child{
a:last-child {
padding-right: 0; padding-right: 0;
} }
.add-contact-me { .add-contact-me {
position: relative; position: relative;
div { div {
margin-top: 20px; margin-top: 20px;
position: absolute; position: absolute;
@ -419,24 +398,28 @@ export default {
transform: translateY(100px); transform: translateY(100px);
transition: 0.3s; transition: 0.3s;
} }
img { img {
width: 100px; width: 100px;
height: 100px; height: 100px;
} }
} }
:hover { :hover {
div { div {
visibility: visible; visibility: visible;
opacity: 1; opacity: 1;
transform: translateY(0); transform: translateY(0);
}
} }
}
} }
.header-menu-open { .header-menu-open {
height: calc(48px * 5); height: calc(48px * 5);
} }
} }
.back-box { .back-box {
color: #fff; color: #fff;
position: absolute; position: absolute;
@ -447,9 +430,10 @@ export default {
height: 150vh; height: 150vh;
border-radius: 0 280px; border-radius: 0 280px;
transform: rotate(-22deg); transform: rotate(-22deg);
background: linear-gradient(60deg,#1E53F4,#1E53F4,#30cffd,#30cffd,#30cffd); background: linear-gradient(60deg, #1E53F4, #1E53F4, #30cffd, #30cffd, #30cffd);
z-index: -1; z-index: -1;
} }
.content-page { .content-page {
height: calc(100vh - 64px); height: calc(100vh - 64px);
color: #fff; color: #fff;
@ -462,6 +446,7 @@ export default {
// align-items:center; // align-items:center;
// text-align: center; // text-align: center;
position: relative; position: relative;
.content-explain { .content-explain {
position: absolute; position: absolute;
top: 20%; top: 20%;
@ -471,11 +456,13 @@ export default {
h1:first-child { h1:first-child {
font-size: 50px; font-size: 50px;
} }
> div{
> div {
width: 100% !important; width: 100% !important;
margin-top: 40px; margin-top: 40px;
text-align: center; text-align: center;
.banner-button{
.banner-button {
&-start { &-start {
min-width: 140px; min-width: 140px;
color: #2667f5; color: #2667f5;
@ -487,13 +474,15 @@ export default {
line-height: 40px; line-height: 40px;
height: 40px; height: 40px;
transition: transform .3s, box-shadow .3s; transition: transform .3s, box-shadow .3s;
&:hover { &:hover {
transform: translateY(-5px); transform: translateY(-5px);
box-shadow: 0 13px 24px fade(#ffffff, 45); box-shadow: 0 13px 24px fade(#ffffff, 45);
// background-image: linear-gradient(to right bottom, #82b5ff 0%, #3c89f6 0%); // background-image: linear-gradient(to right bottom, #82b5ff 0%, #3c89f6 0%);
} }
} }
&-preview{
&-preview {
box-shadow: 0 8px 24px fade(#ffffff, 35); box-shadow: 0 8px 24px fade(#ffffff, 35);
border-radius: 20px; border-radius: 20px;
padding: 0 42px; padding: 0 42px;
@ -503,6 +492,7 @@ export default {
height: 40px; height: 40px;
background-color: rgba($color: #000000, $alpha: 0); background-color: rgba($color: #000000, $alpha: 0);
transition: transform .3s, box-shadow .3s; transition: transform .3s, box-shadow .3s;
&:hover { &:hover {
color: #2667f5; color: #2667f5;
background-color: #FFF; background-color: #FFF;
@ -515,17 +505,20 @@ export default {
} }
} }
} }
.image { .image {
z-index: -1; z-index: -1;
position: absolute; position: absolute;
top: 20%; top: 20%;
right: 0; right: 0;
width: 50%; width: 50%;
img { img {
width: 100%; width: 100%;
} }
} }
} }
.content-wrapper { .content-wrapper {
.title { .title {
text-align: center; text-align: center;
@ -534,20 +527,22 @@ export default {
color: #232323; color: #232323;
line-height: 76px; line-height: 76px;
} }
max-width: 1280px; max-width: 1280px;
margin: auto; margin: auto;
margin-top: 200px; margin-top: 200px;
text-align: center; text-align: center;
.en-title { .en-title {
width: 100%; width: 100%;
white-space: nowrap; white-space: nowrap;
margin: auto; margin: auto;
margin: 100px 0; margin: 100px 0;
background: linear-gradient( background: linear-gradient(
-32deg, -32deg,
rgba(32, 84, 241, 0.51) 0%, rgba(32, 84, 241, 0.51) 0%,
rgba(34, 78, 243, 0.51) 0%, rgba(34, 78, 243, 0.51) 0%,
rgba(56, 234, 255, 0.51) 100% rgba(56, 234, 255, 0.51) 100%
); );
line-height: 7vw; line-height: 7vw;
font-size: 6vw; font-size: 6vw;
@ -556,6 +551,7 @@ export default {
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
} }
&-features { &-features {
> div { > div {
p:first-child { p:first-child {
@ -564,6 +560,7 @@ export default {
color: #222; color: #222;
line-height: 68px; line-height: 68px;
} }
p:last-child { p:last-child {
font-size: 10px; font-size: 10px;
font-weight: 300; font-weight: 300;
@ -572,12 +569,15 @@ export default {
} }
} }
} }
&-image { &-image {
width: 100%; width: 100%;
img { img {
width: 100%; width: 100%;
} }
} }
&-solutions { &-solutions {
p { p {
text-align: center; text-align: center;
@ -592,35 +592,40 @@ export default {
width: 250px; width: 250px;
height: 390px; height: 390px;
background: linear-gradient( background: linear-gradient(
-12deg, -12deg,
rgba(32, 84, 241, 0.08), rgba(32, 84, 241, 0.08),
rgba(34, 78, 243, 0.08), rgba(34, 78, 243, 0.08),
rgba(56, 234, 255, 0.08) rgba(56, 234, 255, 0.08)
); );
border-radius: 15px; border-radius: 15px;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
transition: transform .3s, box-shadow .3s; transition: transform .3s, box-shadow .3s;
&:hover { &:hover {
transform: translateY(-5px); transform: translateY(-5px);
box-shadow: 0 2px 49px 0 rgba(105, 119, 168, 0.54); box-shadow: 0 2px 49px 0 rgba(105, 119, 168, 0.54);
} }
img { img {
width: 197px; width: 197px;
height: 147px; height: 147px;
} }
.title { .title {
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
color: #276ef6; color: #276ef6;
line-height: 69px; line-height: 69px;
} }
.desc { .desc {
font-size: 9px; font-size: 9px;
font-weight: 300; font-weight: 300;
color: #222; color: #222;
line-height: 15px; line-height: 15px;
} }
:last-child { :last-child {
font-size: 10px; font-size: 10px;
font-weight: 300; font-weight: 300;
@ -629,6 +634,7 @@ export default {
} }
} }
} }
&-company { &-company {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -636,34 +642,42 @@ export default {
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
margin-top: 200px; margin-top: 200px;
img { img {
width: 100%; width: 100%;
} }
} }
} }
.footer-page{
.footer-page {
max-width: 1280px; max-width: 1280px;
margin: auto; margin: auto;
.footer-content{
.footer-content {
padding: 64px 24px 32px 24px; padding: 64px 24px 32px 24px;
color: #FFF; color: #FFF;
h1{
h1 {
font-size: 20px; font-size: 20px;
margin-bottom: 24px; margin-bottom: 24px;
} }
a,span, p {
a, span, p {
display: block; display: block;
margin-bottom: 12px; margin-bottom: 12px;
font-size: 12px; font-size: 12px;
font-weight: 400; font-weight: 400;
} }
.qrcode { .qrcode {
width: 100%; width: 100%;
display: flex; display: flex;
align-content: center; align-content: center;
div { div {
margin: 10px; margin: 10px;
} }
img { img {
width: 50%; width: 50%;
margin-top: 30px; margin-top: 30px;
@ -672,17 +686,20 @@ export default {
} }
} }
} }
.footer-copyright{
.footer-copyright {
padding-bottom: 12px; padding-bottom: 12px;
text-align: center; text-align: center;
color: #FFF; color: #FFF;
font-weight: 300; font-weight: 300;
p{
p {
margin-top: 0; margin-top: 0;
margin-bottom: 8px; margin-bottom: 8px;
} }
} }
} }
// @media screen and (max-width: 576px) { // @media screen and (max-width: 576px) {
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
#back-box { #back-box {
@ -701,12 +718,15 @@ export default {
} }
#content-page { #content-page {
padding: 24px 0; padding: 24px 0;
h1:first-child { h1:first-child {
font-size: 30px; font-size: 30px;
} }
h1:last-child { h1:last-child {
font-size: 24px; font-size: 24px;
} }
#image { #image {
top: 53% !important; top: 53% !important;
right: 0 !important; right: 0 !important;
@ -714,8 +734,9 @@ export default {
} }
} }
} }
@media screen and (max-width: 767px) { @media screen and (max-width: 767px) {
.el-header{ .el-header {
overflow: hidden; overflow: hidden;
} }
.header-menu { .header-menu {
@ -723,6 +744,7 @@ export default {
width: 100%; width: 100%;
height: 0; height: 0;
order: 5; order: 5;
a { a {
padding: 0 20px !important; padding: 0 20px !important;
display: block; display: block;
@ -734,6 +756,7 @@ export default {
button { button {
margin-right: 48px; margin-right: 48px;
} }
.header-mobile-menu { .header-mobile-menu {
width: 16px; width: 16px;
height: 14px; height: 14px;
@ -743,6 +766,7 @@ export default {
cursor: pointer; cursor: pointer;
float: right; float: right;
z-index: 100; z-index: 100;
em { em {
display: block; display: block;
width: 100%; width: 100%;
@ -751,6 +775,7 @@ export default {
margin-top: 4px; margin-top: 4px;
transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), opacity; transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), opacity;
} }
:first-child { :first-child {
margin-top: 0; margin-top: 0;
} }
@ -758,6 +783,7 @@ export default {
} }
#content-page { #content-page {
text-align: center; text-align: center;
> div:first-child { > div:first-child {
width: 100%; width: 100%;
position: unset !important; position: unset !important;
@ -766,6 +792,7 @@ export default {
padding: 0; padding: 0;
// top: 10% !important; // top: 10% !important;
} }
#image { #image {
top: 40%; top: 40%;
right: 10%; right: 10%;
@ -775,18 +802,21 @@ export default {
.content-wrapper-company { .content-wrapper-company {
margin-top: 80px !important; margin-top: 80px !important;
} }
.footer-page{ .footer-page {
text-align: center; text-align: center;
.project-url{
.project-url {
margin-left: 0; margin-left: 0;
} }
} }
} }
@media screen and (min-width: 950px) { @media screen and (min-width: 950px) {
.header-btn { .header-btn {
width: 150px; width: 150px;
} }
} }
@media screen and (max-width: 1000px) { @media screen and (max-width: 1000px) {
#content-page { #content-page {
div:last-child { div:last-child {
@ -797,3 +827,43 @@ export default {
} }
} }
</style> </style>
<style lang="scss">
.github-btn {
a {
font-weight: bold;
color: #303133;
padding: 4px 12px;
border: solid 1px #DCDFE6;
margin-left: 8px;
position: relative;
border-radius: 4px;
}
a:hover {
color: #2C67E3;
}
a:last-child:before {
position: absolute;
display: inline-block;
border-width: 7px;
border-style: solid;
border-color: transparent rgba(255, 255, 255, 0.4) transparent transparent;
left: -15px;
top: 25%;
content: '';
}
/* 小角的背景填充*/
a:last-child:after {
position: absolute;
display: inline-block;
border-width: 6px; /*与before的三角形重叠差1px，和元素边框是边框宽度一致*/
border-style: solid;
border-color: transparent #eee transparent transparent; /*边框颜色（小角的填充色）要与整体元素背景一致*/
left: -12px;
top: 25%;
content: '';
}
}
</style>

Write Preview
Loading…
Cancel
Save