Skip to content

梁建民 / pcb

Go to a project
Commit 80017bf6 by 施宇
Options

首页

parent bff2b328
Expand all
Inline Side-by-side
Showing with 736 additions and 135 deletions
css/common/base.css
......@@ -134,6 +134,13 @@ img {
font-size: 0 !important;
*word-spacing: -1px !important;
}
.emptys {
margin-left: -1px;
width: 1px;
height: 100%;
font-size: 0;
vertical-align: middle;
}
label,
dd,
dd,
......@@ -152,3 +159,242 @@ html,
body {
width: 100%;
}
.common-header {
height: 90px;
}
.common-header.common-header-b {
background: #0081D2;
}
.common-header.common-header-b .title-logo {
background: url('../../images/home/title-logo-w.png') 100% 100% no-repeat;
}
.common-header.common-header-b .header-nav a {
color: #fff;
}
.common-header.common-header-b .header-nav a.active {
border-bottom: 3px solid #E89721;
font-weight: 600;
}
.common-header.common-header-b .car {
background: url('../../images/home/car-icon-w.png') 100% 100% no-repeat;
}
.common-header.common-header-w {
background: #fff;
}
.common-header.common-header-w .title-logo {
background: url('../../images/home/title-logo-b.png') 100% 100% no-repeat;
}
.common-header.common-header-w .header-nav a {
color: #575E66;
}
.common-header.common-header-w .header-nav a.active {
border-bottom: 3px solid #E89721;
font-weight: 600;
color: #0081D2;
}
.common-header.common-header-w .car {
background: url('../../images/home/car-icon-b.png') 100% 100% no-repeat;
}
.common-header .title-logo {
width: 129px;
height: 39px;
margin: 29px 38px 0 0;
}
.common-header .header-nav {
margin-top: 20px;
}
.common-header .header-nav a {
font-size: 15px;
padding: 14px 0;
margin-left: 43px;
cursor: pointer;
}
.common-header .fr {
position: relative;
}
.common-header .drop-down-menu {
position: absolute;
background: #fff;
width: 180px;
z-index: 99;
padding: 20px;
right: 0;
}
.common-header .drop-down-menu .arrow-top {
position: absolute;
height: 9px;
width: 16px;
background: url('../../images/home/arrow-top-icon.png') 100% 100% no-repeat;
z-index: 100;
top: -8px;
right: 40px;
}
.common-header .drop-down-menu .menu-title {
color: #2B2F33;
font-size: 13px;
}
.common-header .drop-down-menu .menu-btn {
display: block;
height: 32px;
color: #fff;
font-size: 13px ;
text-align: center;
line-height: 32px;
cursor: pointer;
}
.common-header .drop-down-menu .menu-btn.sign-in-btn {
background: #0081D2;
margin-top: 20px;
}
.common-header .drop-down-menu .menu-btn.join-free-btn {
background: #E89721;
margin-top: 10px;
}
.common-header .drop-down-menu ul {
padding-top: 12px;
}
.common-header .drop-down-menu ul li {
padding-top: 8px;
}
.common-header .drop-down-menu ul li a {
display: block;
color: #575E66;
font-size: 13px;
cursor: pointer;
}
.common-header .drop-down-menu ul li a.active {
color: #2B2F33;
font-weight: 600;
}
.common-header .drop-down-menu ul li a:hover {
color: #0081D2;
}
.common-header .car {
height: 24px;
width: 24px;
position: relative;
margin-top: 30px;
cursor: pointer;
}
.common-header .car .car-msg {
color: #fff;
background-color: #FF0D0D;
font-size: 12px;
position: absolute;
border-radius: 50% 50%;
height: 20px;
width: 20px;
right: 0;
top: 0;
line-height: 20px;
text-align: center;
padding: 0 2px;
transform: translate(50%, -50%);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.common-header .account-btn {
width: 120px;
height: 32px;
background-color: #E89721;
border-radius: 19px;
padding: 0 16px;
position: relative;
top: -10px;
margin-left: 39px;
cursor: pointer;
}
.common-header .account-btn:hover {
background-color: #FFB03D;
}
.common-header .account-btn .user-icon {
width: 18px;
height: 18px;
background: url('../../images/home/user-icon.png') 100% 100% no-repeat;
position: relative;
top: 7px;
}
.common-header .account-btn .account-text {
color: #fff;
font-size: 14px;
margin: 0 3px;
position: relative;
top: 4px;
}
.common-header .account-btn .arrow-down-icon {
height: 5px;
width: 7px;
background: url('../../images/home/arrow-down.png') 100% 100% no-repeat;
position: relative;
top: 2px;
}
.common-footer {
height: 342px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
.common-footer .footer-top {
height: 244px;
}
.common-footer .footer-top .footer-top-data.footer-top-data-other {
margin-left: 59px;
}
.common-footer .footer-top .footer-top-data h3 {
color: #2B2F33;
font-size: 16px;
font-weight: 600;
padding: 60px 0 7px;
}
.common-footer .footer-top .footer-top-data p {
color: #828E99;
font-size: 13px;
padding-top: 13px;
cursor: pointer;
}
.common-footer .footer-top .footer-top-right {
color: #E89721;
font-size: 16px;
padding-top: 60px;
text-align: right;
}
.common-footer .footer-top .footer-top-right span {
height: 30px;
width: 30px;
background-color: #E89721;
border-radius: 50%;
text-align: center;
}
.common-footer .footer-top .footer-top-right span i {
height: 20px;
width: 20px;
background: url('../../images/home/email-icon.png') 100% 100% no-repeat;
margin-top: 5px;
}
.common-footer .footer-top .footer-top-right p {
color: #828E99;
font-size: 13px;
padding-top: 80px;
}
.common-footer .footer-bottom {
height: 98px;
background-color: #2B2F33;
font-size: 13px;
color: #828E99;
}
.common-footer .footer-bottom .fl {
margin-top: 29px;
}
.common-footer .footer-bottom .fl img {
height: 38px;
width: 190px;
}
.common-footer .footer-bottom .fr {
margin-top: 37px;
}
.common-footer .footer-bottom .fr img {
height: 25px;
width: 418px;
}
css/common/base.less
......@@ -133,4 +133,265 @@ html, body {
body {
// overflow: hidden;
}
.common-header{
height: 90px;
&.common-header-b{
background: #0081D2;
.title-logo{
background: url('../../images/home/title-logo-w.png') 100% 100% no-repeat;
}
.header-nav{
a{
color: #fff;
&.active {
border-bottom: 3px solid #E89721;
font-weight: 600;
}
}
}
.car {
background: url('../../images/home/car-icon-w.png') 100% 100% no-repeat;
}
}
&.common-header-w{
background: #fff;
.title-logo{
background: url('../../images/home/title-logo-b.png') 100% 100% no-repeat;
}
.header-nav{
a{
color: #575E66;
&.active {
border-bottom: 3px solid #E89721;
font-weight: 600;
color:#0081D2;
}
}
}
.car {
background: url('../../images/home/car-icon-b.png') 100% 100% no-repeat;
}
}
.title-logo {
width: 129px;
height: 39px;
margin: 29px 38px 0 0;
}
.header-nav {
margin-top: 20px;
a {
font-size: 15px;
padding: 14px 0;
margin-left: 43px;
cursor: pointer;
}
}
.fr{
position: relative;
}
.drop-down-menu{
position: absolute;
background: #fff;
width: 180px;
z-index: 99;
padding:20px;
right:0;
.arrow-top{
position: absolute;
height:9px;
width:16px;
background: url('../../images/home/arrow-top-icon.png') 100% 100% no-repeat;
z-index:100;
top:-8px;
right:40px;
}
.menu-title{
color:#2B2F33;
font-size: 13px;
}
.menu-btn{
display: block;
height:32px;
color:#fff;
font-size:13px ;
text-align: center;
line-height: 32px;
cursor: pointer;
&.sign-in-btn {
background: #0081D2;
margin-top:20px;
}
&.join-free-btn{
background: #E89721;
margin-top:10px;
}
}
ul{
padding-top:12px;
li{
padding-top:8px;
a{
display: block;
color:#575E66;
font-size: 13px;
cursor: pointer;
&.active{
color:#2B2F33 ;
font-weight: 600;
}
&:hover{
color:#0081D2;
}
}
}
}
}
.car {
height: 24px;
width: 24px;
position: relative;
margin-top: 30px;
cursor: pointer;
.car-msg {
color: #fff;
background-color: #FF0D0D;
font-size: 12px;
position: absolute;
border-radius: 50% 50%;
height: 20px;
width: 20px;
right: 0;
top: 0;
line-height: 20px;
text-align: center;
padding: 0 2px;
transform: translate(50%, -50%);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
.account-btn {
width: 120px;
height: 32px;
background-color: #E89721;
border-radius: 19px;
padding: 0 16px;
position: relative;
top: -10px;
margin-left: 39px;
cursor: pointer;
&:hover{
background-color: #FFB03D;
}
.user-icon {
width: 18px;
height: 18px;
background: url('../../images/home/user-icon.png') 100% 100% no-repeat;
position: relative;
top: 7px;
}
.account-text {
color: #fff;
font-size: 14px;
margin: 0 3px;
position: relative;
top: 4px;
}
.arrow-down-icon {
height: 5px;
width: 7px;
background: url('../../images/home/arrow-down.png') 100% 100% no-repeat;
position: relative;
top: 2px;
}
}
}
.common-footer {
height: 342px;
position: absolute;
bottom: 0;
left:0;
right:0;
.footer-top {
height: 244px;
.footer-top-data {
&.footer-top-data-other {
margin-left: 59px;
}
h3 {
color: #2B2F33;
font-size: 16px;
font-weight: 600;
padding: 60px 0 7px;
}
p {
color: #828E99;
font-size: 13px;
padding-top: 13px;
cursor: pointer;
}
}
.footer-top-right {
color: #E89721;
font-size: 16px;
padding-top:60px;
text-align: right;
span {
height: 30px;
width: 30px;
background-color: #E89721;
border-radius: 50%;
text-align: center;
i{
height:20px;
width:20px;
background: url('../../images/home/email-icon.png') 100% 100% no-repeat;
margin-top:5px;
}
}
p{
color:#828E99;
font-size: 13px;
padding-top:80px;
}
}
}
.footer-bottom {
height: 98px;
background-color: #2B2F33;
font-size: 13px;
color:#828E99;
.fl{
margin-top:29px;
img{
height:38px;
width:190px;
}
}
.fr{
margin-top:37px;
img{
height:25px;
width:418px;
}
}
}
}
\ No newline at end of file
css/home/home.less
......@@ -4,6 +4,7 @@
width: 1180px;
margin: 0 auto;
}
.ellipsis {
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
......@@ -16,101 +17,50 @@
}
.home {
width: 100%;
.header {
height: 90px;
background: #0081D2;
.title-logo {
width: 121px;
height: 31px;
margin: 29px 38px 0 0;
// width: 100%;
min-width: 1180px;
position: relative;
padding-bottom: 342px;
.pre-div,
.next-div {
position: absolute;
width: 48px;
height: 48px;
background: rgba(0, 0, 0, 1);
opacity: 0.5;
z-index: 888;
border-radius: 50%;
top: 151px;
cursor: pointer;
div {
width: 14px;
height: 24px;
margin: 12px 0 0 16px;
}
.header-nav {
margin-top: 20px;
a {
color: #fff;
font-size: 15px;
padding: 14px 0;
margin-left: 43px;
cursor: pointer;
&.active {
border-bottom: 3px solid #E89721;
font-weight: 600;
}
}
}
&.pre-div {
left: 10px;
.car {
height: 24px;
width: 24px;
background: url('../../images/home/car-icon.png') 100% 100% no-repeat;
position: relative;
margin-top: 30px;
cursor: pointer;
div {
background: url('../../images/home/pre-icon.png') 100% 100% no-repeat;
.car-msg {
color: #fff;
background-color: #FF0D0D;
font-size: 12px;
position: absolute;
border-radius: 50% 50%;
height: 20px;
width: 20px;
right: 0;
top: 0;
line-height: 20px;
text-align: center;
padding: 0 2px;
transform: translate(50%, -50%);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
.account-btn {
width: 120px;
height: 32px;
background-color: #E89721;
border-radius: 19px;
padding: 0 16px;
position: relative;
top: -10px;
margin-left: 39px;
cursor: pointer;
.user-icon {
width: 18px;
height: 18px;
background: url('../../images/home/user-icon.png') 100% 100% no-repeat;
position: relative;
top: 7px;
}
&.next-div {
right: 10px;
.account-text {
color: #fff;
font-size: 14px;
margin: 0 3px;
position: relative;
top: 4px;
div {
background: url('../../images/home/next-icon.png') 100% 100% no-repeat;
}
.arrow-down-icon {
height: 5px;
width: 7px;
background: url('../../images/home/arrow-down.png') 100% 100% no-repeat;
position: relative;
top: 2px;
}
}
}
.home-header {
height: 600px;
background: #0081D2;
......@@ -149,8 +99,33 @@
}
.home-custom-desc {
// .chat-with-btn {
// position: absolute;
// right:-180px;
// bottom:0;
// width: 180px;
// height: 39px;
// background: rgba(232, 151, 33, 1);
// box-shadow: 0px -8px 10px 0px rgba(232, 151, 33, 0.2);
// border-radius: 8px 8px 0px 0px;
// font-size: 16px;
// color:#FFFFFF;
// text-align: center;
// padding-top: 11px;
// cursor: pointer;
// span{
// height:28px;
// width:28px;
// background: url('../../images/home/msg-icon.png') 100% 100% no-repeat;
// margin-right: 9px;
// }
// }
.width-1180 {
padding: 36px 0;
position: relative;
}
.section {
......@@ -204,6 +179,7 @@
font-size: 24px;
text-align: center;
padding-top: 60px;
font-weight: 600;
}
.goods-desc {
......@@ -261,6 +237,7 @@
font-size: 16px;
text-align: center;
padding: 20px 0 8px;
font-weight: 600;
}
.good-sigle-params {
......@@ -376,6 +353,7 @@
color: #2B2F33;
text-align: center;
padding-top: 60px;
font-weight: 600;
}
.map-section-desc {
......@@ -457,6 +435,7 @@
div {
color: #2B2F33;
font-size: 13px;
font-weight: 600;
&.table-header-1 {
padding-left: 20px;
......@@ -654,43 +633,12 @@
color: #2B2F33;
text-align: center;
padding: 60px 0 40px;
font-weight: 600;
}
.banner-1-datas-div {
overflow: hidden;
position: relative;
.pre-div,
.next-div {
position: absolute;
width: 48px;
height: 48px;
background: rgba(0, 0, 0, 1);
opacity: 0.8;
z-index: 888;
border-radius: 50%;
top:151px;
cursor: pointer;
div{
width:14px;
height:24px;
margin:12px 0 0 16px;
}
&.pre-div{
left:10px;
div{
background: url('../../images/home/pre-icon.png') 100% 100% no-repeat;
}
}
&.next-div{
right:10px;
div{
background: url('../../images/home/next-icon.png') 100% 100% no-repeat;
}
}
}
}
.banner-1-datas {
......@@ -782,29 +730,173 @@
}
}
}
}
}
}
.banner-2-section {
padding-bottom: 80px;
.banner-2-section-title {
color: #2B2F33;
font-size: 24px;
text-align: center;
padding-top: 60px;
font-weight: 600;
}
.banner-2-section-desc {
color: #575E66;
font-size: 16px;
text-align: center;
padding-top: 16px;
}
.banner-2-datas-div {
overflow: hidden;
position: relative;
padding: 40px 0 50px;
}
.banner-2-datas {
width: 999999px;
transform: translateX(-20px);
// .banner-1-data-text{
// position: absolute;
// bottom:0;
// left:0;
// right:0;
// height:100px;
// background:linear-gradient(180deg,rgba(0,129,210,0) 0%,rgba(0,129,210,1) 100%);
// overflow: hidden;
// padding:13px 20px;
// h3{
// color:#FFFFFF;
// font-size: 16px;
// }
// ul{
// font-size: 13px;
// color:#FFFFFF;
// li{
// margin-top:13px;
// }
// }
// }
.banner-2-data {
margin-left: 20px;
position: relative;
cursor: pointer;
width: 280px;
height: 348px;
border: 1px solid #F0F4F7;
background: #fff;
transition: all 0.5s;
&:hover {
transform: translatey(-3px);
box-shadow: 0px 6px 10px 0px rgba(194, 199, 204, 0.2);
}
.banner-2-data-img {
width: 280px;
height: 200px;
display: block;
}
.banner-2-data-desc {
color: #575E66;
font-size: 13px;
height: 51px;
margin: 20px 20px 29px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.banner-2-data-bottom {
padding: 0 20px;
.banner-2-data-bottom-left {
width: 130px;
img {
width: 20px;
height: 13px;
position: relative;
top: -1px;
}
span {
color: #2B2F33;
font-size: 13px;
margin-left: 8px;
width: 100px;
}
}
.banner-2-data-bottom-right {
span {
height: 16px;
width: 16px;
margin-left: 5px;
background: url('../../images/home/star-icon.png');
background-size: 16px 16px;
}
}
}
}
}
.place-orders {
display: block;
width: 260px;
height: 60px;
font-size: 16px;
text-align: center;
line-height: 60px;
color: #fff;
background: #189EF2;
margin: 0 auto;
}
}
.faq-section {
background: #F0F4F7;
padding-bottom: 60px;
h3 {
color: #2B2F33;
font-size: 24px;
padding: 60px 0 30px;
text-align: center;
font-weight: 600;
}
.faq-datas {
background-color: #fff;
padding: 0 40px 50px 40px;
overflow: hidden;
.faq-datas-div {
width: 1164px;
transform: translateX(-64px);
}
.faq-data {
width: 518px;
margin-left: 64px;
.title {
color: #2B2F33;
font-size: 16px;
padding-top: 30px;
font-weight: 600;
}
.desc {
color: #575E66;
font-size: 13px;
padding-top: 12px;
span {
color: #0081D2;
cursor: pointer;
}
}
}
.learn-more {
color: #2B2F33;
font-size: 16px;
text-align: right;
padding-top: 20px;
cursor: pointer;
font-weight: 600;
}
}
}
}
\ No newline at end of file
images/home/car-icon.png → images/home/car-icon-w.png
images/home/car-icon.png

596 Bytes | W: | H:

images/home/car-icon-w.png

596 Bytes | W: | H:

images/home/car-icon.png
images/home/car-icon-w.png
images/home/car-icon.png
images/home/car-icon-w.png
  • 2-up
  • Swipe
  • Onion skin
images/home/title-logo.png → images/home/title-logo-w.png
images/home/title-logo.png

2.12 KB | W: | H:

images/home/title-logo-w.png

2.12 KB | W: | H:

images/home/title-logo.png
images/home/title-logo-w.png
images/home/title-logo.png
images/home/title-logo-w.png
  • 2-up
  • Swipe
  • Onion skin
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment