mirror of
https://github.com/m5stack/m5-docs.git
synced 2026-05-20 10:23:01 -07:00
Sean
1428 lines
22 KiB
CSS
Executable File
1428 lines
22 KiB
CSS
Executable File
:root {
|
|
--theme-color: hsl(204,90%,45%)
|
|
}
|
|
|
|
/* @font-face {
|
|
font-family: Montserrat;
|
|
font-style: normal;
|
|
src: url("https://static-cdn.m5stack.com/image/product_jpg/assets/font/montserrat_n5.e72d00d31ae5399d260a80ec70322c62c1819762.woff2") format("woff2")
|
|
}
|
|
*/
|
|
|
|
* {
|
|
font-family: Microsoft YaHei,sans-serif;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none !important;
|
|
color: #007bff;
|
|
}
|
|
|
|
img {
|
|
z-index: 51;
|
|
}
|
|
|
|
.product_pic img {
|
|
width: 30%;
|
|
}
|
|
|
|
.logo, .mobile, .mobile-nav-btn, .mobile .mobile-nav-icon, .mobile .mobile-return-icon {
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
|
|
@media screen and (max-width:768px) {
|
|
.product_pic img {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
|
|
#pc_anchor {
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50px;
|
|
transform: translateY(-50%);
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
box-shadow: 0px 1px 20px 1px #e6e6e6;
|
|
z-index: 99;
|
|
}
|
|
|
|
#pc_anchor .el-submenu .el-menu-item {
|
|
min-width: 195px;
|
|
padding: 0 10px 0px 45px;
|
|
}
|
|
|
|
#pc_anchor .el-menu {
|
|
border: none;
|
|
}
|
|
|
|
#pc_anchor .el-menu .el-menu-item-group__title {
|
|
background-color: #ececee;
|
|
display: none;
|
|
}
|
|
|
|
#pc_anchor .el-menu .el-menu-item span,.el-submenu__title span {
|
|
display: inline-block;
|
|
padding-left: 10px;
|
|
width: 70%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#pc_anchor img {
|
|
height: 30px;
|
|
}
|
|
|
|
@media screen and (max-width:1460px) {
|
|
#pc_anchor {
|
|
left: 20px;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width:1300px) {
|
|
#pc_anchor {
|
|
left: 5px;
|
|
}
|
|
#pc_anchor .el-menu-vertical-demo{
|
|
width: 210px;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width:970px) {
|
|
#pc_anchor {
|
|
left: -45px
|
|
}
|
|
}
|
|
|
|
#mb_header {
|
|
display: none;
|
|
}
|
|
|
|
|
|
.el-menu-vertical-demo:not(.el-menu--collapse) {
|
|
width: 210px;
|
|
min-height: 400px;
|
|
}
|
|
|
|
|
|
#pc_header {
|
|
position: fixed;
|
|
z-index: 150;
|
|
left: 0px;
|
|
top: 0px;
|
|
right: 0px;
|
|
background-color: white;
|
|
box-shadow: 0px 0px 10px #ddd;
|
|
padding: 0px 20px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
|
|
#pc_header .el-menu {
|
|
display: inline-block;
|
|
padding: 10px 0px 0px 0px;
|
|
border-bottom: 0px;
|
|
}
|
|
|
|
|
|
.markdown-section {
|
|
max-width: 70%;
|
|
margin-top: 50px;
|
|
}
|
|
|
|
.markdown-section a {
|
|
color: hsl(211, 100%, 50%);
|
|
}
|
|
|
|
|
|
body[data-page="index.md"] .markdown-section {
|
|
margin-top: 0px;
|
|
max-width: 75%;
|
|
}
|
|
|
|
body[data-page="zh_CN/README.md"] .markdown-section {
|
|
margin-top: 0px;
|
|
max-width: 75%;
|
|
}
|
|
|
|
|
|
body[data-page="en/quick_start/m5stickc/m5stickc_quick_start.md"] article.markdown-section {
|
|
max-width: 100%;
|
|
}
|
|
|
|
body[data-page="zh_CN/quick_start/m5stickc/m5stickc_quick_start.md"] article.markdown-section {
|
|
max-width: 100%;
|
|
}
|
|
|
|
body[data-page="en/quick_start/m5stickv/m5stickv_quick_start.md"] article.markdown-section {
|
|
max-width: 100%;
|
|
}
|
|
|
|
body[data-page="zh_CN/quick_start/m5stickv/m5stickv_quick_start.md"] article.markdown-section {
|
|
max-width: 100%;
|
|
}
|
|
|
|
|
|
.pic {
|
|
width: 30%
|
|
}
|
|
|
|
.video_size {
|
|
width: 50%
|
|
}
|
|
|
|
.uiflow_banner {
|
|
position: relative;
|
|
}
|
|
|
|
.row a {
|
|
color: white;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.row a:hover {
|
|
color: white;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.uiflow_p {
|
|
height: 100px;
|
|
}
|
|
|
|
.item {
|
|
width: 150px;
|
|
margin-right: 10px;
|
|
margin-top: 10px;
|
|
margin-bottom: 10px;
|
|
display: inline-block;
|
|
position: relative;
|
|
cursor: pointer;
|
|
transition: box-shadow .3s;
|
|
text-decoration: none;
|
|
background-color: white ;
|
|
box-shadow: 1px 1px 20px 0px #f7f7f7a1;
|
|
}
|
|
|
|
.related_links {
|
|
position: fixed;
|
|
top: 35%;
|
|
right: 0;
|
|
z-index: 900;
|
|
width: 50px
|
|
}
|
|
|
|
.related_links a {
|
|
display: block;
|
|
width: 50px;
|
|
height: 50px;
|
|
text-decoration: none;
|
|
transition: all .25s ease;
|
|
float: right
|
|
}
|
|
|
|
.related_links a:first-child {
|
|
border-top-left-radius: 3px;
|
|
background-color: #76c5f0
|
|
}
|
|
|
|
.related_links a:nth-child(2) {
|
|
background-color: #007cc2
|
|
}
|
|
|
|
.related_links a:nth-child(3) {
|
|
background-color: #dc214c
|
|
}
|
|
|
|
.related_links a:nth-child(4) {
|
|
background-color: #1f1a17
|
|
}
|
|
|
|
.related_links a:nth-child(5) {
|
|
border-bottom-left-radius: 3px;
|
|
}
|
|
|
|
.related_links a:hover {
|
|
width: 90px
|
|
}
|
|
|
|
.related_links a img {
|
|
position: relative;
|
|
top: 5px;
|
|
left: 5px;
|
|
width: 40px
|
|
}
|
|
|
|
.related_links a:nth-child(4) img {
|
|
top: 3.5px;
|
|
left: 3.5px;
|
|
width: 43px
|
|
}
|
|
|
|
.related_links div img {
|
|
position: relative;
|
|
top: 10px;
|
|
left: 0;
|
|
width: 50px;
|
|
transition: all .25s ease
|
|
}
|
|
|
|
.related_links div img:hover {
|
|
transform: scale(1.05)
|
|
}
|
|
|
|
@media screen and (max-width:768px) {
|
|
.related_links {
|
|
display: none
|
|
}
|
|
.markdown-section {
|
|
max-width: 100% !important;
|
|
}
|
|
}
|
|
|
|
.item-title {
|
|
white-space: nowrap;
|
|
text-align: center;
|
|
margin-top: 0px !important;
|
|
margin-bottom: 28px !important;
|
|
}
|
|
|
|
.item a {
|
|
color: black;
|
|
text-decoration: none
|
|
}
|
|
|
|
.mask {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 150px;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0.28);
|
|
color: #fff;
|
|
opacity: 0
|
|
}
|
|
|
|
.mask h3 {
|
|
text-align: center
|
|
}
|
|
|
|
.product_page .item:hover{
|
|
transform: scale(1.3);
|
|
transition: all .2s ease;
|
|
z-index: 31 !important;
|
|
box-shadow: 0 0 10px #6ab2ff
|
|
}
|
|
|
|
.product_page .item:hover .quickstart_btn{
|
|
display: block;
|
|
}
|
|
|
|
.mask-btn1 {
|
|
border: none;
|
|
width: 90px;
|
|
background-color: #007bffc7;
|
|
color: white;
|
|
border-radius: 10px;
|
|
height: 19px;
|
|
}
|
|
|
|
.product_list div.btn-group-vertical {
|
|
display: none
|
|
}
|
|
|
|
.product_list:hover div.btn-group-vertical {
|
|
position: fixed;
|
|
display: block;
|
|
margin: 0;
|
|
z-index: 9999
|
|
}
|
|
|
|
|
|
|
|
.item .mask_sku {
|
|
position: absolute;
|
|
bottom: 0px;
|
|
width: 100%;
|
|
text-align: center;
|
|
font-size: 19px;
|
|
}
|
|
|
|
main>.content {
|
|
margin: 0
|
|
}
|
|
|
|
div.card-img-overlay {
|
|
background-color: rgba(0,0,0,0.6)
|
|
}
|
|
|
|
div.card-img-overlay:hover {
|
|
background-color: rgba(0,0,0,0.25);
|
|
color: blue !important
|
|
}
|
|
|
|
.banner {
|
|
width: 100%;
|
|
height: 300px;
|
|
background-color: #fffbff
|
|
}
|
|
|
|
.product_page {
|
|
margin-left: 60px;
|
|
margin-top: 100px;
|
|
}
|
|
|
|
.search {
|
|
position: fixed;
|
|
z-index: 151;
|
|
top: 5px;
|
|
right: 10px;
|
|
padding: 0 20px;
|
|
}
|
|
|
|
.search input {
|
|
border-radius: 40px;
|
|
border: 0;
|
|
outline: 0;
|
|
background: #e0e0e0;
|
|
width: 125px;
|
|
height: 38px;
|
|
padding: 0 0 0 20px;
|
|
}
|
|
|
|
.search .search-btn {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 40px;
|
|
border-radius: 100px;
|
|
width: 20px;
|
|
height: 20px;
|
|
color: #007bff
|
|
}
|
|
|
|
.search i {
|
|
position: absolute;
|
|
top: 6px;
|
|
right: 7px;
|
|
font-size: 18px
|
|
}
|
|
|
|
.search .search_point {
|
|
background-color: #f7f7f7;
|
|
margin: 2px 22px;
|
|
display: none;
|
|
overflow-y: auto;
|
|
max-height: 300px;
|
|
box-shadow: 0 2px 0 0 #007bff;
|
|
max-width: 260px;
|
|
z-index: 2000;
|
|
}
|
|
|
|
.search .search_point a {
|
|
padding: 4px 20px;
|
|
display: block;
|
|
}
|
|
|
|
.search .search_point a:hover {
|
|
color: #007bff;
|
|
}
|
|
|
|
|
|
@media screen and (max-width:768px) {
|
|
.dropdown {
|
|
display: block;
|
|
}
|
|
|
|
#pc_anchor {
|
|
display: none !important;
|
|
}
|
|
|
|
#mb_header {
|
|
position: fixed;
|
|
background-color: white;
|
|
z-index: 999;
|
|
height: 47px;
|
|
right: 0;
|
|
left: 0;
|
|
text-align: center;
|
|
box-shadow: 0 0 0.21333rem 0 rgb(131 131 131 / 15%);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
#mb_header .mblogo {
|
|
width: 40px;
|
|
}
|
|
|
|
#mb_header li {
|
|
list-style-type: none;
|
|
}
|
|
|
|
.mobile-nav-icon {
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
width: 23px;
|
|
height: 23px;
|
|
left: 15px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
background-image: url(https://static-cdn.m5stack.com/resource/public/assets/menu.png);
|
|
transition: all 0.28s ease;
|
|
}
|
|
|
|
.mobile-nav-icon.mobile-nav-active {
|
|
transform: translateY(-50%) rotate(90deg);
|
|
}
|
|
|
|
.mobile-nav-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: absolute;
|
|
top: 47px;
|
|
left: 0;
|
|
width: 200px;
|
|
background-color: #fff;
|
|
box-shadow: 7px 9px 11px 0px rgb(128 128 128 / 15%);
|
|
}
|
|
|
|
.mobile-nav-item {
|
|
position: relative;
|
|
color: #434343;
|
|
padding-left: 24px;
|
|
text-align: left;
|
|
font-size: 15px;
|
|
height: auto;
|
|
line-height: 47px;
|
|
}
|
|
|
|
.mobile-nav-btn {
|
|
position: absolute;
|
|
width: 12.5px;
|
|
height: 12.5px;
|
|
top: 16px;
|
|
right: 14px;
|
|
background-image: url(https://static-cdn.m5stack.com/resource/public/assets/arrow3.png);
|
|
transition: all 0.28s ease;
|
|
}
|
|
|
|
.mobile-nav-btn.mobile-nav-active {
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
.mobile-nav-list button {
|
|
display: flex;
|
|
flex-direction: column;
|
|
color: #838383;
|
|
font-size: 12px;
|
|
margin: 10px 24px;
|
|
text-align: left;
|
|
}
|
|
|
|
|
|
|
|
.mobile-nav-contents a{
|
|
color: #838383;
|
|
font-size: 12px;
|
|
line-height: 30px;
|
|
}
|
|
|
|
|
|
#pc_header {
|
|
display: none;
|
|
}
|
|
|
|
.markdown-section {
|
|
max-width: 100%;
|
|
margin-top: 0px;
|
|
padding-left: 45px;
|
|
padding-right: 45px
|
|
}
|
|
|
|
.banner div.card-img-overlay h4 {
|
|
font-size: 1.3em;
|
|
color: #fff;
|
|
text-align: center
|
|
}
|
|
|
|
.banner {
|
|
margin-left: 8px;
|
|
margin-right: 0;
|
|
width: 130px
|
|
}
|
|
|
|
.item {
|
|
width: 130px;
|
|
margin-left: 5px;
|
|
margin-right: 5px;
|
|
margin-top: 10px;
|
|
margin-bottom: 10px;
|
|
display: inline-block;
|
|
position: relative;
|
|
cursor: pointer;
|
|
transition: box-shadow .3s;
|
|
text-decoration: none
|
|
}
|
|
|
|
.uiflow_p {
|
|
height: auto
|
|
}
|
|
|
|
.pc-navigation {
|
|
display: none
|
|
}
|
|
|
|
.product_page {
|
|
margin-left: 0;
|
|
margin-top: 0
|
|
}
|
|
|
|
.mb-navigation {
|
|
z-index: 9999;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 50px;
|
|
height: 50px;
|
|
color: #343a40;
|
|
border-radius: 0;
|
|
background: white;
|
|
line-height: inherit;
|
|
display: block;
|
|
box-shadow: -12px -1px 10px #888
|
|
}
|
|
|
|
.nav-content {
|
|
position: fixed;
|
|
top: 50px;
|
|
left: 0;color: white;
|
|
right: 0;
|
|
z-index: 999
|
|
}
|
|
|
|
.search {
|
|
position: fixed;
|
|
top: 5px !important;
|
|
right: 0 !important;
|
|
left: auto;
|
|
display: block;
|
|
z-index: 9999;
|
|
}
|
|
|
|
.video_size {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width:768px) {
|
|
.pic {
|
|
width: 50%;
|
|
}
|
|
}
|
|
|
|
mark {
|
|
background-color: #ffa105e0;
|
|
color: white;
|
|
border-radius: 1px;
|
|
}
|
|
|
|
.faq-class {
|
|
border: 1px solid #d9d9d9;
|
|
margin-bottom: 1.5%;
|
|
background-color: #d9d9d9;
|
|
padding: 20px;
|
|
border-radius: 10px;
|
|
height: auto
|
|
}
|
|
|
|
.faq-class h5 {
|
|
color: #666 !important;
|
|
font-size: 16px !important;
|
|
position: relative;
|
|
margin: 0 !important
|
|
}
|
|
|
|
.search-tips {
|
|
border: 1px solid #d9d9d9;
|
|
margin-bottom: 1.5%;
|
|
background-color: #d9d9d9;
|
|
padding: 20px;
|
|
border-radius: 10px;
|
|
height: auto
|
|
}
|
|
|
|
.search-tips h5 {
|
|
color: #666 !important;
|
|
font-size: 16px !important;
|
|
position: relative;
|
|
margin: 0 !important
|
|
}
|
|
|
|
.faq-item {
|
|
border: 1px solid #d9d9d9;
|
|
margin-bottom: 1.5%;
|
|
background-color: #fff;
|
|
padding: 20px;
|
|
border-radius: 10px;
|
|
height: auto
|
|
}
|
|
|
|
.faq-title {
|
|
color: #666 !important;
|
|
font-size: 16px !important;
|
|
position: relative;
|
|
margin: 0 !important;
|
|
padding-right: 30px !important
|
|
}
|
|
|
|
.faq-title.open{
|
|
max-height: 600px;
|
|
}
|
|
|
|
.faq-title::before {
|
|
background-color: #007bff;
|
|
content: "";
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 20px;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
margin: auto
|
|
}
|
|
|
|
.faq-button {
|
|
height: 0;
|
|
margin: 0 !important
|
|
}
|
|
|
|
.faq-button::after {
|
|
background-color: white;
|
|
content: "";
|
|
width: 12px;
|
|
height: 2px;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 4px;
|
|
bottom: 0;
|
|
margin: auto;
|
|
z-index: 10
|
|
}
|
|
|
|
.faq-button::before {
|
|
background-color: white;
|
|
content: "";
|
|
width: 12px;
|
|
height: 2px;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 4px;
|
|
bottom: 0;
|
|
margin: auto;
|
|
transform: rotate(90deg);
|
|
z-index: 10
|
|
}
|
|
|
|
.faq-answer {
|
|
border: 0;
|
|
outline: 0;
|
|
font-weight: 400;
|
|
max-height: 0;
|
|
overflow: auto;
|
|
transition: max-height .35s ease
|
|
}
|
|
|
|
.faq-answer div {
|
|
padding-top: 30px;
|
|
color: #666 !important
|
|
}
|
|
|
|
.faq-answer div span {
|
|
display: block
|
|
}
|
|
|
|
.faq-item .faq-title.open+.faq-answer {
|
|
max-height: 600px
|
|
}
|
|
|
|
.faq-img {
|
|
margin-top: 20px;
|
|
margin-bottom: 20px;
|
|
width: 40%;
|
|
display: inline-block
|
|
}
|
|
|
|
.cases-item {
|
|
border: 1px solid #d9d9d9;
|
|
margin-bottom: 1.5%;
|
|
background-color: #fff;
|
|
padding: 20px;
|
|
border-radius: 10px;
|
|
height: auto
|
|
}
|
|
|
|
.cases-title {
|
|
color: #666 !important;
|
|
font-size: 16px !important;
|
|
position: relative;
|
|
margin: 0 !important;
|
|
padding-right: 30px !important
|
|
}
|
|
|
|
|
|
@media screen and (max-width:1180px) {
|
|
#pc_header > a{
|
|
display: none;
|
|
}
|
|
.search {
|
|
right: 30px;
|
|
left: auto;
|
|
}
|
|
}
|
|
|
|
|
|
.easyloader-box {
|
|
display: flex;
|
|
flex-direction: row;
|
|
width: 80%
|
|
}
|
|
|
|
.easyloader-box>div {
|
|
position: relative;
|
|
width: 50%;
|
|
overflow: hidden
|
|
}
|
|
|
|
.easyloader-box img,video {
|
|
width: 100%
|
|
}
|
|
|
|
.easyloader-box p {
|
|
margin: 10px 25px;
|
|
color: white;
|
|
|
|
}
|
|
|
|
.easyloader-box p:last-child {
|
|
overflow-y: scroll;
|
|
height: 20%;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.easyloader-mask {
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 6px;
|
|
height: 100%;
|
|
width: 100%;
|
|
background-color: black;
|
|
opacity: .7;
|
|
transition: all .3s;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center
|
|
}
|
|
|
|
|
|
.easyloader-mask a{
|
|
margin-top:50px;
|
|
text-align: center;
|
|
}
|
|
|
|
.video_play {
|
|
bottom: -100%;
|
|
|
|
}
|
|
|
|
.easyloader-btn {
|
|
position: absolute;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-around;
|
|
bottom: 7%;
|
|
width: 100%;
|
|
padding: 0px 20px;
|
|
}
|
|
|
|
.easyloader-btn a {
|
|
width: 90px;
|
|
text-align: center;
|
|
padding: 2px 10px;
|
|
background-color: #007bff;
|
|
color: white !important;
|
|
border-radius: 10px
|
|
}
|
|
|
|
.easyloader-btn a:hover {
|
|
background-color: #45a9ff
|
|
}
|
|
|
|
@media screen and (max-width:768px) {
|
|
.easyloader-box {
|
|
flex-direction: column;
|
|
width: 100%
|
|
}
|
|
|
|
.easyloader-box>div {
|
|
width: 100%
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.platform-box {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
|
|
.platform-item {
|
|
position: relative;
|
|
overflow: hidden;
|
|
margin: 20px;
|
|
box-shadow: 0px 0px 5px 0px #dbdbdb;
|
|
border-radius: 15px;
|
|
width: 200px;
|
|
}
|
|
|
|
.platform-box > div:nth-of-type(1)::after{
|
|
content: "";
|
|
position: absolute;
|
|
width: 2px;
|
|
height: 300px;
|
|
background-color: #d9d9d9;
|
|
right: -22px;
|
|
top: 43px;
|
|
}
|
|
|
|
.platform-item h3 {
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 100%;
|
|
text-align: center;
|
|
font-size: 20px;
|
|
font-weight: normal;
|
|
color: #fff;
|
|
z-index: 11;
|
|
}
|
|
|
|
.platform-tag{
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 150px;
|
|
height: 150px;
|
|
background: #333;
|
|
opacity: .8;
|
|
border-radius: 50%;
|
|
z-index: 10;
|
|
-webkit-transform: scale(1, 1);
|
|
-moz-transform: scale(1, 1);
|
|
transform: scale(1, 1);
|
|
-webkit-transition: all .3s;
|
|
-moz-transition: all .3s;
|
|
transition: all .5s cubic-bezier(0.23, 0.53, 0.22, 0.93);
|
|
transform: translate(-50%,-50%);
|
|
}
|
|
|
|
.platform-item a:hover .platform-tag{
|
|
transform: translate(-50%,-50%) scale(4.3, 4.3);
|
|
}
|
|
|
|
|
|
@media screen and (max-width:768px) {
|
|
.platform-box {
|
|
margin-top: 30px;
|
|
}
|
|
|
|
.platform-box > div:nth-of-type(1)::after{
|
|
content: "";
|
|
position: absolute;
|
|
width: 300px;
|
|
height: 2px;
|
|
background-color: #d9d9d9;
|
|
left: 50%;
|
|
top: 105%;
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|
|
|
|
.markdown-section h1 {
|
|
font-family: Microsoft YaHei,sans-serif;
|
|
font-weight: 1000;
|
|
font-size: 48px;
|
|
display: inline;
|
|
}
|
|
|
|
.markdown-section h2 {
|
|
font-family: Microsoft YaHei,sans-serif;
|
|
font-weight: 600;
|
|
font-size: 25px;
|
|
padding: 0px;
|
|
padding-top:110px;
|
|
margin-top:-70px;
|
|
}
|
|
|
|
.markdown-section p {
|
|
font-family: Microsoft YaHei,sans-serif;
|
|
}
|
|
|
|
|
|
.product_sku_tag {
|
|
margin-left: 5px;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
table thead, table tr {
|
|
border-top-width: 1px;
|
|
border-top-style: solid;
|
|
border-top-color: #aabfdc;
|
|
}
|
|
|
|
table {
|
|
border-bottom-width: 1px;
|
|
border-bottom-style: solid;
|
|
border-bottom-color: #aabfdc;
|
|
border-top-width: 1px;
|
|
border-top-style: solid;
|
|
border-top-color: #aabfdc;
|
|
overflow: auto;
|
|
display: table !important;
|
|
}
|
|
|
|
table td, table th {
|
|
padding: 5px 10px;
|
|
font-size: 13px;
|
|
font-family: Microsoft YaHei,sans-serif;
|
|
color: #597da1 !important;
|
|
border-color: hsl(212, 42%, 88%);
|
|
min-width: 50px;
|
|
}
|
|
|
|
table tr:nth-child(even) {
|
|
background: #d3dfed !important;
|
|
}
|
|
table tr:nth-child(odd) {
|
|
background: #FFF !important;
|
|
}
|
|
|
|
@media screen and (max-width:768px) {
|
|
table {
|
|
display: block !important;
|
|
overflow: scroll;
|
|
}
|
|
}
|
|
|
|
|
|
.files_download {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-evenly;
|
|
flex-wrap: wrap;
|
|
margin: 45px;
|
|
}
|
|
|
|
.files_download .item{
|
|
display: flex;
|
|
justify-content: center;
|
|
width: 200px;
|
|
box-shadow: 4px 4px 7px 0px #cecece;
|
|
transition:all .25s ease;
|
|
}
|
|
|
|
.files_download .item:hover{
|
|
transform:scale(1.2);
|
|
}
|
|
|
|
|
|
#tag_title {
|
|
position: absolute;
|
|
color: #ffffff;
|
|
width: 160px;
|
|
font-size: 14px;
|
|
padding: 4px;
|
|
background: #007bffc7;
|
|
border: solid 1px #e9f7f6;
|
|
border-radius:5px;
|
|
text-align: center;
|
|
z-index: 40;
|
|
}
|
|
|
|
#tag_title::after {
|
|
content: " ";
|
|
position: absolute;
|
|
top: 50%;
|
|
left: -18px;
|
|
width: 0;
|
|
height: 0;
|
|
border-width: 8px;
|
|
border-style: solid;
|
|
border-color: transparent #007bffc7 transparent transparent;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.el-icon-loading{
|
|
font-size:88px
|
|
}
|
|
|
|
[v-cloak] {
|
|
display: none;
|
|
}
|
|
|
|
#search_cover {
|
|
z-index: 100;
|
|
position: fixed;
|
|
top: 0px;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
background-color: #00000080;
|
|
}
|
|
|
|
#search_contant_box {
|
|
margin: 150px 15% 10% 15%;
|
|
padding: 50px 100px 50px 100px;
|
|
background-color:#ffffffed;
|
|
overflow: scroll;
|
|
height: 80vh;
|
|
}
|
|
|
|
#close_search {
|
|
position:absolute;
|
|
top: 50px;
|
|
right:20%;
|
|
font-size:30px;
|
|
z-index:2000
|
|
}
|
|
|
|
@media screen and (max-width:768px) {
|
|
#search_contant_box {
|
|
margin:0px;
|
|
padding: 60px 20px 60px 20px;
|
|
height: 100%;
|
|
}
|
|
|
|
#search_contant_box .el-tabs__header{
|
|
margin-left: 55px;
|
|
}
|
|
#close_search {
|
|
right: 15px;
|
|
}
|
|
}
|
|
|
|
#product_result img {
|
|
width: 100%;
|
|
}
|
|
|
|
.quickstart_btn {
|
|
position: absolute;
|
|
border: none;
|
|
color: white;
|
|
left: 30px;
|
|
bottom: 38px;
|
|
transform: scale(1);
|
|
font-size: 9px;
|
|
display: none;
|
|
bottom: 6px;
|
|
}
|
|
|
|
.box-card .el-tag {
|
|
margin-top: 5px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
|
|
|
|
.nav-dropdown .dropdown-title {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.logo {
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
header li {
|
|
list-style-type: none;
|
|
}
|
|
|
|
.container img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
button {
|
|
border: none;
|
|
background-color: transparent;
|
|
outline: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
|
|
|
|
header {
|
|
width: 100%;
|
|
height: 50px;
|
|
padding: 0 360px;
|
|
z-index: 1000;
|
|
}
|
|
|
|
|
|
@media screen and (max-width:1600px) {
|
|
header {
|
|
width: 100%;
|
|
height: 50px;
|
|
padding: 0 260px;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width:1400px) {
|
|
header {
|
|
width: 100%;
|
|
height: 50px;
|
|
padding: 0 220px;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.container {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
margin: 0 auto;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.logo {
|
|
position: absolute;
|
|
left: 0;
|
|
width: 48px;
|
|
height: 41px;
|
|
/* background-image: url("/assets/LOGO.jpg"); */
|
|
}
|
|
|
|
.shop-btn,
|
|
.user-btn {
|
|
width: 24px;
|
|
height: 24px;
|
|
margin-right: 32px;
|
|
}
|
|
|
|
.language-btn {
|
|
width: 60px;
|
|
height: 20px;
|
|
}
|
|
|
|
.header-nav {
|
|
width: auto;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-end;
|
|
font-size: 14px;
|
|
color: #434343;
|
|
margin-right: 32px;
|
|
height: 100%;
|
|
}
|
|
|
|
.header-nav li {
|
|
cursor: pointer;
|
|
margin: 0px 0px 0px 32px;
|
|
line-height: 50px;
|
|
}
|
|
|
|
.nav-dropdown {
|
|
position: fixed;
|
|
top: 50px;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 180px;
|
|
border-top: 1px solid #f1f1f1;
|
|
background-color: #fff;
|
|
z-index: 9999;
|
|
overflow: hidden;
|
|
animation: dropdown 0.1s ease;
|
|
box-shadow: 1px 2px 9px 0px #f9f9f9;
|
|
}
|
|
|
|
.nav-dropdown .dropdown-container {
|
|
width: 62%;
|
|
height: 100%;
|
|
display: flex;
|
|
margin: 0 auto;
|
|
padding: 25px 0;
|
|
}
|
|
|
|
|
|
@media screen and (max-width:1400px) {
|
|
.nav-dropdown .dropdown-container {
|
|
width: 80%;
|
|
height: 100%;
|
|
display: flex;
|
|
margin: 0 auto;
|
|
padding: 25px 0;
|
|
}
|
|
}
|
|
|
|
|
|
.nav-dropdown .dropdown-title {
|
|
width: 282px;
|
|
height: 100%;
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
color: #959595;
|
|
}
|
|
.nav-dropdown .dropdown-content {
|
|
flex: 1;
|
|
height: 100%;
|
|
border-left: 1px solid #E5E5E5;
|
|
}
|
|
|
|
@keyframes dropdown {
|
|
0% {
|
|
height: 0;
|
|
}
|
|
100% {
|
|
height: "*";
|
|
}
|
|
}
|
|
|
|
|
|
.dropdown-content-box {
|
|
width: 905px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
padding: 10px 10px 10px 50px;
|
|
}
|
|
|
|
|
|
.header-nav a {
|
|
color: #434343;
|
|
}
|
|
|
|
.dropdown-item {
|
|
display: flex;
|
|
flex-direction: row;
|
|
margin: 10px 20px;
|
|
width: 100px;
|
|
align-items: center;
|
|
}
|
|
|
|
.dropdown-item div {
|
|
width: 30px;
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-right: 15px;
|
|
}
|
|
|
|
.dropdown-item img{
|
|
height: 30px;
|
|
width: auto;
|
|
}
|
|
|
|
.dropdown-item p {
|
|
color: #959595;
|
|
white-space:nowrap;
|
|
font-size: 1px;
|
|
flex: 1;
|
|
}
|
|
|
|
.dropdown-category a {
|
|
font-size: 1;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.dropdown-category {
|
|
line-height: 25px !important;
|
|
padding-left: 52px;
|
|
margin: 0 !important;
|
|
}
|
|
|
|
.dropdown-item2 {
|
|
display: flex;
|
|
flex-direction: row;
|
|
width: 160px;
|
|
align-items: center;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.dropdown-item2 p {
|
|
color: #0064c2;
|
|
}
|
|
|
|
.dropdown-category p {
|
|
color: #959595;
|
|
}
|
|
|
|
.dropdown-item2 img {
|
|
height: 30px;
|
|
width: auto;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
|
|
.lang-clike {
|
|
background-color: #282c34 !important;
|
|
color: #40e498 !important;
|
|
}
|
|
|
|
.lang-clike .function {
|
|
color: #d5d687;
|
|
}
|
|
|
|
.lang-clike .punctuation {
|
|
color:#deb28d;
|
|
}
|
|
|
|
.lang-clike .number,.lang-clike .boolean {
|
|
color: #2eacd2;
|
|
}
|
|
|
|
::-moz-selection {
|
|
background: #2eacd2 !important;
|
|
color: #ffffff;
|
|
font-weight: 900;
|
|
font-size: 32px;
|
|
}
|
|
::selection {
|
|
background: #2eacd2 !important;
|
|
color: #ffffff;
|
|
font-weight: 900;
|
|
font-size: 32px;
|
|
}
|
|
|
|
.markdown-section blockquote {
|
|
background-color: #eff6fb;
|
|
}
|
|
|
|
blockquote strong {
|
|
color: black;
|
|
}
|
|
|
|
.box-card-item {
|
|
margin: 0px 10px 10px 0px;
|
|
display:inline-block;
|
|
}
|