admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improved Landing page

Browse Source
This commit is contained in:
Patrick Fic
2021-06-29 13:12:53 -07:00
parent 00f71eba77
commit d9d3c899a1
51 changed files with 1161 additions and 488 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
client/src/landing/less/antMotionStyle.less Normal file
View File

@@ -0,0 +1,14 @@
@import './common.less';
@import './custom.less';
@import './content.less';
@import './nav0.less';
@import './banner0.less';
@import './content4.less';
@import './content0.less';
@import './content1.less';
@import './pricing2.less';
@import './pricing1.less';
@import './content3.less';
@import './content12.less';
@import './footer1.less';
@import './edit.less';

84
client/src/landing/less/banner0.less Normal file
View File

@@ -0,0 +1,84 @@
@banner0: banner0;
.@{banner0} {
// 如果在第一屏且导航位置为 relative, 一屏为 height: calc(~"100vh - 64px");
width: 100%;
height: 100vh;
position: relative;
text-align: center;
border-color: #666;
background-image: url("../../assets/banner3.jpeg");
background-size: cover;
background-attachment: fixed;
background-position: center;
& &-text-wrapper {
display: inline-block;
position: absolute;
top: 20%;
margin: auto;
left: 0;
right: 0;
font-size: 14px;
color: @template-text-color-light;
width: 550px;
> .queue-anim-leaving {
position: relative !important;
}
}
& &-title {
width: 350px;
//left: 30px;
min-height: 60px;
margin: auto;
display: inline-block;
font-size: 40px;
position: relative;
}
& &-content {
margin-bottom: 20px;
word-wrap: break-word;
min-height: 24px;
}
& &-button {
border: 1px solid #fff;
color: #fff;
background: transparent;
box-shadow: 0 0 0 transparent;
font-size: 16px;
height: 40px;
transition: background 0.45s @ease-out, box-shadow 0.45s @ease-out;
&:hover {
color: #fff;
border-color: #fff;
background: rgba(255, 255, 255, 0.1);
box-shadow: 0 0 10px rgba(50, 250, 255, 0.75);
}
&:focus {
color: #fff;
border-color: #fff;
}
&.queue-anim-leaving {
width: auto;
}
}
& &-icon {
bottom: 20px;
font-size: 24px;
position: absolute;
left: 50%;
margin-left: -12px;
color: @template-text-color-light;
}
}
@media screen and (max-width: 767px) {
.@{banner0} {
background-attachment: inherit;
& &-text-wrapper {
width: 90%;
}
& &-title {
width: 90%;
left: 0;
}
}
}

42
client/src/landing/less/common.less Normal file
View File

@@ -0,0 +1,42 @@
// @import "~antd/lib/style/v2-compatible-reset.less";
body {
word-wrap: break-word;
}
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
padding: 0;
}
/* .content-wrapper > .tween-one-leaving,
.queue-anim-leaving {
// position: absolute !important;
// width: 100%;
} */
.video {
max-width: 800px;
}
#react-content {
min-height: 100%;
}
.home-page-wrapper p {
padding: 0;
margin: 0;
}

44
client/src/landing/less/content.less Normal file
View File

@@ -0,0 +1,44 @@
@homepage: home-page;
.@{homepage}-wrapper {
width: 100%;
position: relative;
overflow: hidden;
.@{homepage} {
height: 100%;
max-width: 1200px;
position: relative;
margin: auto;
will-change: transform;
}
.title-wrapper > h1, > h1 {
font-size: 32px;
color: @text-color;
margin-bottom: 16px;
}
.title-wrapper {
margin: 0 auto 64px;
text-align: center;
}
}
.@{homepage} {
padding: 128px 24px;
}
@media screen and (max-width: 767px) {
.@{homepage}-wrapper {
.@{homepage} {
padding: 56px 24px;
>h1 {
font-size: 24px;
margin: 0 auto 32px;
&.title-h1 {
margin-bottom: 8px;
}
}
>p {
margin-bottom: 32px;
}
}
}
}

55
client/src/landing/less/content0.less Normal file
View File

@@ -0,0 +1,55 @@
@content0: content0;
.@{content0}-wrapper {
min-height: 446px;
overflow: hidden;
.@{content0} {
height: 100%;
padding: 64px 24px;
>.title-wrapper {
margin: 0 auto 48px;
}
&-block {
padding: 0 4%;
display: inline-block;
text-align: center;
min-height: 200px;
margin-bottom: 24px;
img {
width: 100%;
}
&-wrapper {
position: relative;
height: 100%;
top: 25%;
padding: 20px 0;
}
&.queue-anim-leaving {
position: relative !important;
}
&-icon {
width: 100px;
height: 100px;
margin: auto;
}
&-title {
line-height: 32px;
margin: 10px auto;
font-size: 24px;
}
}
}
}
@media screen and (max-width: 767px) {
.@{content0}-wrapper {
min-height: 880px;
}
}

76
client/src/landing/less/content1.less Normal file
View File

@@ -0,0 +1,76 @@
@content1: content1;
.@{content1}-wrapper {
height: 360px;
.@{content1} {
height: 100%;
padding: 0 24px;
&-img {
height: 100%;
transform-origin: top;
padding: 0 32px;
display: flex;
align-items: center;
justify-content: center;
span {
display: block;
width: 250px;
img {
display: block;
}
}
}
&-text {
padding: 0 32px;
height: 100%;
.@{content1}-content,
.@{content1}-title {
position: relative !important;
}
.@{content1}-title {
font-size: 32px;
font-weight: normal;
color: #404040;
margin-top: 120px;
}
.content {
margin-top: 20px;
}
}
}
}
@media screen and (max-width: 767px) {
.@{content1}-wrapper {
height: 600px;
.@{content1} {
&-img {
height: 200px;
padding: 0;
text-align: center;
margin-top: 64px;
span {
display: inline-block;
width: 180px;
height: 200px;
line-height: 200px;
margin: auto;
}
}
&-text {
height: auto;
margin-bottom: 20px;
text-align: center;
padding: 0;
.@{content1}-content,
.@{content1}-title {
width: 100%;
top: auto;
}
.@{content1}-title {
margin: 32px auto 16px;
font-size: 24px;
}
}
}
}
}

52
client/src/landing/less/content12.less Normal file
View File

@@ -0,0 +1,52 @@
@content12: content12;
.@{content12}-wrapper {
background-color: #fafafa;
min-height: 470px;
.@{content12} {
padding: 64px 24px;
>p {
text-align: center;
}
}
.img-wrapper {
margin: 0 auto;
left: 0;
right: 0;
.block {
margin-bottom: 40px;
.block-content {
display: flex;
border-radius: 4px;
text-align: center;
position: relative;
overflow: hidden;
border: none;
height: 64px;
align-items: center;
transition: box-shadow .3s @ease-out, transform .3s @ease-out;
& > span {
width: 100%;
display: block;
}
}
}
}
}
@media screen and (max-width: 767px) {
.@{content12}-wrapper {
overflow: hidden;
.@{content12} {
ul {
li {
display: block;
width: 100%;
padding: 2%;
span {
height: 168px;
}
}
}
}
}
}

52
client/src/landing/less/content3.less Normal file
View File

@@ -0,0 +1,52 @@
@content3: content3;
.@{content3}-wrapper {
min-height: 764px;
.@{content3} {
height: 100%;
overflow: hidden;
& .title-content {
text-align: center;
}
&-block-wrapper {
position: relative;
.@{content3}-block {
display: inline-block;
padding: 48px 24px;
vertical-align: top;
.@{content3}-icon {
display: inline-block;
width: 15%;
vertical-align: top;
}
.@{content3}-text {
width: 85%;
display: inline-block;
padding-left: 8%;
}
&.clear-both {
clear: both;
}
}
}
}
}
@media screen and (max-width: 767px) {
.@{content3}-wrapper {
min-height: 1080px;
.@{content3} {
&-block-wrapper {
margin: 20px auto;
height: auto;
.@{content3}-block {
.@{content3}-title {
font-size: 20px;
}
&.queue-anim-leaving {
position: relative !important;
}
}
}
}
}
}

37
client/src/landing/less/content4.less Normal file
View File

@@ -0,0 +1,37 @@
@content4: content4;
.@{content4}-wrapper {
min-height: 720px;
background: #fafafa;
.@{content4} {
height: 100%;
overflow: hidden;
&-video {
border-radius: 4px;
overflow: hidden;
max-width: 800px;
margin: auto;
background: #fff;
box-shadow: 0 4px 8px rgba(0, 0, 0, .15);
video {
display: block;
margin: auto;
}
}
}
}
@media screen and (max-width: 767px) {
.@{content4}-wrapper {
min-height: 350px;
.@{content4} {
overflow: hidden;
width: 90%;
margin: auto;
&-video {
top: 15%;
background: url("https://zos.alipayobjects.com/rmsportal/HZgzhugQZkqUwBVeNyfz.jpg") no-repeat center;
background-size: cover;
}
}
}
}

35
client/src/landing/less/custom.less Normal file
View File

@@ -0,0 +1,35 @@
@import "~antd/lib/style/themes/default.less";
@line-color: #e9e9e9;
@shadow-color: rgba(0, 0, 0, 0.15);
@bottom-bar-bg-color: #262626;
@bottom-bar-line-color: #000;
@template-bg-color: #001529;
@template-bg-color-light: #ececec;
@template-nav-bg-color: #001529;
@template-text-color: #ccc;
@template-text-title-color: #bcbcbc;
@template-text-color-light: #fff;
@template-footer-text-color: #999;
@animate-duration: .45s;
/* 详细页图片或框框的样式;
*/
.page-shadow() {
box-shadow: 0 5px 8px @shadow-color;
}
.page-pro() {
border-radius: 6px;
border: 1px solid @line-color;
transform: translateY(0);
transition: transform .3s @ease-out, box-shadow .3s @ease-out;
&:hover {
.page-shadow();
transform: translateY(-5px);
}
}

0
client/src/landing/less/edit.less Normal file
View File

98
client/src/landing/less/footer1.less Normal file
View File

@@ -0,0 +1,98 @@
.footer1-wrapper {
background: @template-bg-color;
overflow: hidden;
position: relative;
min-height: 360px;
color: @template-footer-text-color;
.footer1 {
.home-page {
padding: 64px 24px 80px;
}
}
.block {
padding: 0 32px;
.logo {
max-width: 180px;
}
.slogan {
font-size: 12px;
margin-top: -20px;
}
>h2 {
margin-bottom: 24px;
color: @template-text-color;
}
a {
color: @template-footer-text-color;
margin-bottom: 12px;
float: left;
clear: both;
&:hover {
color: @primary-color;
}
}
}
.copyright-wrapper {
width: 100%;
border-top: 1px solid fade(@line-color, 10);
.home-page {
padding: 0 24px;
overflow: hidden;
}
.copyright {
height: 80px;
text-align: center;
line-height: 80px;
}
}
}
@media screen and (max-width: 767px) {
.footer1 {
min-height: 550px;
&-wrapper {
.footer1 {
.home-page {
padding: 64px 24px 32px;
}
}
}
.logo {
margin: 0 auto 24px;
}
.block {
text-align: center;
margin-bottom: 32px;
padding: 0;
}
>ul {
width: 90%;
margin: 20px auto 0;
padding: 10px 0;
>li {
width: 100%;
h2 {
margin-bottom: 10px;
}
li {
display: inline-block;
margin-right: 10px;
}
}
}
.copyright {
&-wrapper {
.home-page {
padding: 0;
.copyright {
font-size: 12px;
}
}
}
span {
width: 90%;
}
}
}
}

187
client/src/landing/less/nav0.less Normal file
View File

@@ -0,0 +1,187 @@
@header0: header0;
.@{header0} {
background: @template-nav-bg-color;
width: 100%;
z-index: 1;
box-shadow: 0 5px 8px fade(#000, 15);
position: relative;
top: 0;
.home-page {
padding: 0 24px;
}
&-logo {
display: inline-block;
position: relative;
width: 150px;
line-height: 64px;
& img {
vertical-align: middle;
display: inline-block;
}
& a {
display: block;
}
}
&-menu {
float: right;
.ant-menu {
line-height: 62px;
height: 64px;
a {
display: block;
}
}
}
&-item {
&-block {
padding: 0 8px;
>* {
display: inline-block;
}
}
}
&-item,
&-item-child,
&-menu {
.ant-menu-sub .ant-menu-item,
.ant-menu-inline .ant-menu-item {
height: auto;
line-height: 1.5;
}
.item {
&-sub-item {
display: block;
padding: 8px 24px;
}
&-image {
float: left;
margin-right: 16px;
margin-top: 4px;
position: relative;
z-index: 1;
}
&-title {
font-size: 14px;
color: #fff;
margin-left: 46px;
}
&-content {
font-size: 12px;
color: fade(#fff, 75);
margin-left: 46px;
}
}
}
}
@media screen and (max-width: 767px) {
.@{header0} {
&-logo {
z-index: 101;
}
&.home-page-wrapper .home-page {
padding: 0 24px;
}
&-menu {
height: auto;
float: inherit;
position: relative;
left: -24px;
width: ~"calc(100% + 48px)";
opacity: 0;
transition: opacity .3s @ease-in-out;
& li {
padding: 0 24px;
&.ant-menu-submenu {
padding: 0;
}
}
.item {
&-sub-item {
padding: 8px 0;
}
}
}
&-mobile-menu {
width: 16px;
height: 14px;
cursor: pointer;
position: absolute;
top: 24px;
right: 24px;
z-index: 100;
em {
display: block;
width: 100%;
height: 2px;
background: #fff;
margin-top: 4px;
transition: transform .3s @ease-in-out, opacity .3s @ease-in-out;
}
:first-child {
margin-top: 0;
}
}
.ant-menu {
height: auto;
overflow: hidden;
.ant-menu-item-selected {
border: none;
}
}
& .open {
height: auto;
.@{header0}-mobile-menu {
em {
&:nth-child(1) {
transform: translateY(6px) rotate(45deg);
}
&:nth-child(2) {
opacity: 0;
}
&:nth-child(3) {
transform: translateY(-6px) rotate(-45deg);
}
}
}
>.@{header0}-menu {
opacity: 1;
pointer-events: auto;
}
}
&-item-block {
height: 40px;
line-height: 40px;
}
}
}

85
client/src/landing/less/pricing1.less Normal file
View File

@@ -0,0 +1,85 @@
@pricing1: pricing1;
.@{pricing1}-wrapper {
min-height: 760px;
.@{pricing1} {
>p {
text-align: center;
}
&-content-wrapper {
min-height: 400px;
}
&-block-box {
width: 260px;
border-radius: 4px;
background: #eef0f3;
text-align: center;
color: #666;
min-height: 400px;
margin: auto;
border: 1px solid transparent;
.page-pro();
&.active {
border-color: @primary-color;
background: #fff;
.@{pricing1} {
&-top-wrapper {
background: @primary-color;
}
&-name,
&-money,
&-button {
color: #fff;
}
&-button {
background: @primary-color;
}
}
}
}
&-block {
margin-bottom: 24px;
}
&-top-wrapper {
width: 100%;
padding: 16px 24px;
}
&-name {
font-size: 14px;
}
&-money {
font-family: 'Helvetica Neue', sans-serif;
font-size: 32px;
color: #666;
}
&-content {
font-size: 12px;
line-height: 2;
font-weight: 300;
margin: 32px 24px 48px;
}
&-line {
display: block;
height: 1px;
background: #d9d9d9;
margin: 0 24px;
}
&-button-wrapper {
margin: 18px 24px;
}
&-button {
padding: 0 24px;
}
}
&.home-page-wrapper {
.@{pricing1}-title-wrapper {
margin-bottom: 64px;
text-align: center;
}
}
}
@media screen and (max-width: 767px) {
.@{pricing1}-wrapper {
padding-bottom: 0;
}
}

59
client/src/landing/less/pricing2.less Normal file
View File

@@ -0,0 +1,59 @@
@pricing2: pricing2;
.@{pricing2}-wrapper {
min-height: 760px;
.@{pricing2} {
>p {
text-align: center;
}
&-content-wrapper {
min-height: 400px;
}
&-table-name-block {
text-align: center;
color: #666;
width: 100%;
}
&-table-name {
font-size: 24px;
}
&-table-money {
font-size: 16px;
margin: 8px 0 16px;
}
&-table-content {
text-align: center;
color: #666;
&-name {
color: #666;
text-align: center;
}
}
}
&.home-page-wrapper {
.@{pricing2}-title-wrapper {
margin-bottom: 64px;
text-align: center;
}
}
}
@media screen and (max-width: 767px) {
.@{pricing2} {
&-wrapper {
padding-bottom: 0;
}
&-table {
margin-bottom: 24px;
}
}
}