This commit is contained in:
Kiko62
2021-03-09 16:49:47 +08:00
8 changed files with 311 additions and 276 deletions
+1 -1
View File
File diff suppressed because one or more lines are too long
+127 -64
View File
@@ -2,18 +2,15 @@
--theme-color: hsl(204,90%,45%)
}
@font-face {
/* @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: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
} */
*/
* {
font-family: Montserrat;
font-family: Microsoft YaHei,sans-serif;
}
a {
@@ -29,6 +26,11 @@ 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 {
@@ -103,34 +105,6 @@ img {
min-height: 400px;
}
#mb_header {
position: fixed;
top: 50%;
transform: translateY(-50%);
box-shadow: -5px 1px 20px 0px #e7e5e5;
z-index: 999;
border-radius: 10px;
right: 0;
}
#mb_header .el-menu {
border-right: none;
border-radius: 10px;
}
#mb_header .el-submenu__title,.el-menu-item {
padding: 0px 10px !important;
text-align: center;
}
#mb_header .el-menu-item div {
padding: 0px 10px !important;
}
#mb_header .el-menu-item li {
height: 30px;
}
#pc_header {
position: fixed;
@@ -401,20 +375,20 @@ div.card-img-overlay:hover {
.search {
position: fixed;
z-index: 105;
top: 80px;
left: 80px;
padding: 0 20px
z-index: 151;
top: 5px;
right: 10px;
padding: 0 20px;
}
.search input {
border-radius: 40px;
border: 0;
outline: 0;
background: #eee;
background: #e0e0e0;
width: 125px;
height: 38px;
padding: 0 0 0 20px
padding: 0 0 0 20px;
}
.search .search-btn {
@@ -422,8 +396,9 @@ div.card-img-overlay:hover {
top: 10px;
right: 40px;
border-radius: 100px;
width: 30px;
height: 30px
width: 20px;
height: 20px;
color: #007bff
}
.search i {
@@ -456,7 +431,7 @@ div.card-img-overlay:hover {
@media screen and (max-width:768px) {
.dropdown {
display: block
display: block;
}
#pc_anchor {
@@ -464,8 +439,96 @@ div.card-img-overlay:hover {
}
#mb_header {
display: block;
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;
@@ -541,20 +604,21 @@ div.card-img-overlay:hover {
.search {
position: fixed;
top: 15px !important;
left: 50% !important;
right: auto !important;
transform: translateX(-50%);
top: 5px !important;
right: 0 !important;
left: auto;
display: block;
z-index: 9999;
}
.video_size {
width: 100%
width: 100%;
}
}
@media screen and (max-width:768px) {
.pic {
width: 50%
width: 50%;
}
}
@@ -890,14 +954,14 @@ mark {
}
.markdown-section h1 {
font-family: Montserrat;
font-family: Microsoft YaHei,sans-serif;
font-weight: 1000;
font-size: 48px;
display: inline;
}
.markdown-section h2 {
font-family: Montserrat;
font-family: Microsoft YaHei,sans-serif;
font-weight: 600;
font-size: 25px;
padding: 0px;
@@ -906,7 +970,7 @@ mark {
}
.markdown-section p {
font-family: Montserrat;
font-family: Microsoft YaHei,sans-serif;
}
@@ -935,7 +999,7 @@ table {
table td, table th {
padding: 5px 10px;
font-size: 13px;
font-family: Montserrat;
font-family: Microsoft YaHei,sans-serif;
color: #597da1 !important;
border-color: hsl(212, 42%, 88%);
min-width: 50px;
@@ -1014,28 +1078,27 @@ table tr:nth-child(odd) {
#search_cover {
z-index: 100;
position: fixed;
top: 0;
top: 0px;
right: 0;
bottom: 0;
left: 0;
background-color: #00000087;
overflow: scroll;
background-color: #00000080;
}
#search_contant_box {
margin: 150px 15% 10% 15%;
padding: 50px 100px 50px 100px;
background-color:#ffffffd6;
background-color:#ffffffed;
overflow: scroll;
height: 80vh;
}
#close_search {
position: fixed;
right: 20%;
font-size: 30px;
z-index: 2000;
position:absolute;
top: 50px;
right:20%;
font-size:30px;
z-index:2000
}
@media screen and (max-width:768px) {
+64 -103
View File
@@ -302,33 +302,21 @@ var header = new Vue({
},
{
title: "FAQ",
contents: {
type:"container"
},
link: "/#/en/faq"
}
],
LanguageIcon: iconUrlBase+'icon/EN.png'
},
MobileNavStatus:false,
CurrentLanguage: '',
CurrentPanel: '',
MobileCurrentPanel: '',
DropdownStatus: false,
homepage: '',
faq_link:'',
case_link: '',
i2c_table: '',
comparison_table: '',
homepage_title: '',
faq_title: '',
product_list_title: '',
language_list_title: '',
platform_list_title: '',
isCollapse: true,
platform:{},
activeIndex: '1',
pdf_notify: '',
anchorList: [],
related_products: '',
purchase_link: 'https://m5stack.com/'
},
methods: {
@@ -366,14 +354,14 @@ var header = new Vue({
localStorage.clear();
set_search_keyword();
window.header.done();
window.search_cover.contant_result = [
window.search.contant_result = [
{
name:'',
url:'',
contant:search_cover.search_note
contant:search.search_note
}
];
$('#product_result')[0].textContent = search_cover.search_note;
$('#product_result')[0].textContent = search.search_note;
window.location.href = current_url;
},
panelShow(event) {
@@ -389,6 +377,16 @@ var header = new Vue({
panelHide(event) {
this.DropdownStatus = false;
this.CurrentPanel = '';
},
mobileNavToggle(event) {
this.MobileNavStatus = !this.MobileNavStatus;
},
mobilePanelToggle(id) {
if (this.MobileCurrentPanel == id){
this.MobileCurrentPanel= '';
}else{
this.MobileCurrentPanel = id;
}
}
},
created() {
@@ -403,6 +401,11 @@ var header = new Vue({
this.CurrentLanguage = this.zh_CN;
}
},
computed:{
mobileNavClass: function () {
return this.MobileNavStatus?'mobile-nav-icon mobile-nav-active':'mobile-nav-icon';
}
},
mounted(){
this.loading('Loading')
}
@@ -504,9 +507,11 @@ var zoom_image = new Vue({
}
})
var search_cover = new Vue({
el: '#search_cover',
var search = new Vue({
el: '#search',
data: {
SearchKW: '',
InputShowStatus: false,
activeName: 'first',
current_page_title:'Current Page',
related_page_title:'Related Page',
@@ -519,18 +524,41 @@ var search_cover = new Vue({
}
],
},
watch: {
SearchKW: function () {
var kw = this.SearchKW.toLowerCase();
var link = window.location.href;
if(((link.slice(-4) == "/en/")||(link.slice(-7)== "/zh_CN/"))||((link.indexOf(/en/) == -1) && (link.indexOf(/zh_CN/) == -1))){
product_search(kw);
}else if(link.slice(-4) == "/faq"){
faq_search(kw);
}else if(link.slice(-9) == "home_page"){
api_search(kw);
}else {
detail_search(kw);
}
}
},
computed: {
SearchInputClass: function () {
if(this.InputShowStatus){
this.SearchShowResult = true;
return "transition: all ease .25s;width:330px;opacity:1;"
}else{
this.SearchShowResult = false;
return "transition: all ease .25s;width:0;opacity:0;"
}
}
},
methods: {
start_search(){
$('#search_cover').show(200);
window.zoom_image.stopScroll();
},
close_search(){
$('#search_cover').hide(200);
window.zoom_image.canScroll();
InputTaggle() {
this.InputShowStatus = !this.InputShowStatus;
}
}
})
function easyloader_video() {
if($("#example_video").length >0)
setTimeout(function(){
@@ -682,26 +710,27 @@ function search_notice(Enter,resultCount) {
if(Enter.length > 0){
get_search_keyword(Enter);
}else{
window.search_cover.contant_result = [
window.search.contant_result = [
{
name:'',
url:'',
contant:search_cover.search_note
contant:search.search_note
}
];
$('#product_result')[0].textContent = search_cover.search_note;
$('#product_result')[0].textContent = search.search_note;
}
if(resultCount == 0) {
$('#product_result')[0].textContent = search_cover.search_note;
$('#product_result')[0].textContent = search.search_note;
}
}
function product_search(onEnter_content){
function product_search(kw){
$(".product_page .item").parent().css("display","inline-block");
$('#product_result')[0].textContent = "";
var p = $(".product_page .item .item-title");
var sku_list = $(".product_page .item .mask_sku");
var textEnter = onEnter_content.toLocaleLowerCase();
var textEnter = kw;
console.log(kw)
var resultCount = 0;
for (var i=0; i<p.length; i++ ) {
if((p[i].textContent.toLocaleLowerCase().indexOf(textEnter) != -1)||(sku_list[i].textContent.toLocaleLowerCase().indexOf(textEnter) != -1)||(p[i].dataset.kw.toLocaleLowerCase().indexOf(textEnter) != -1)){
@@ -787,7 +816,7 @@ function detail_search(onEnter_content){
var kw_part1 = result.substring(0,start);
var kw_part2 = result.substring(end,);
result = kw_part1 + `<mark style="box-shadow: 0px 0px 9px 7px #9ed1f68a;">${onEnter_content}</mark>` + kw_part2;
clone_obj.attr('id','').html(`<div onclick="page_move('p${i}');window.search_cover.close_search()" style="cursor: pointer">`+result+'</div>')
clone_obj.attr('id','').html(`<div onclick="page_move('p${i}');window.search.CloseSearch()" style="cursor: pointer">`+result+'</div>')
$('#product_result').append(clone_obj);
resultCount++;
}
@@ -795,74 +824,6 @@ function detail_search(onEnter_content){
search_notice(textEnter,resultCount);
}
function onEnter(event){
timer = setTimeout(function () {
var onEnter_content = event.target.value.toLowerCase();
select_search_page(onEnter_content);
clearTimeout(timer);
timer = null;
}, 250);
}
function select_search_page(onEnter_content){
link = window.location.href;
if(((link.slice(-4) == "/en/")||(link.slice(-7)== "/zh_CN/"))||((link.indexOf(/en/) == -1) && (link.indexOf(/zh_CN/) == -1))){
product_search(onEnter_content);
}else if(link.slice(-4) == "/faq"){
faq_search(onEnter_content);
}else if(link.slice(-9) == "home_page"){
api_search(onEnter_content);
console.log(12)
}else {
detail_search(onEnter_content);
}
}
var Input = $('form input');
Input.focusin(function (){
window.search_cover.start_search();
Input.animate({width:350});
var count = 0;
for(let key in window.localStorage){
var current_url = window.location.href;
if(((current_url.indexOf("/en/") != -1)&&(key.indexOf("/en/") != -1))){
count++;
if(count > 5){
break;
}
}else if(((current_url.indexOf("/zh_CN/") != -1)&&(key.indexOf("/zh_CN/") != -1))){
count++;
if(count > 5){
break;
}
}else{
localStorage.clear();
set_search_keyword();
break;
}
}
});
Input.focusout(function (){
Input.animate({width:125});
$(".item").css("z-index","30");
setTimeout(function(){
},160);
});
function select(event){
var s = event.textContent.toLowerCase();
$("#thetarget").removeClass("show");
$(".btn-group-vertical button").addClass("btn-light");
$(event).removeClass("btn-light");
$(event).addClass("btn-primary");
page_move(s);
}
$(document).ready(function() {
});
function use_jpg() {
pics = $("img");
@@ -1031,7 +992,7 @@ function set_search_keyword() {
}
function get_search_keyword(str){
window.search_cover.contant_result = [];
window.search.contant_result = [];
for(let key in window.localStorage){
try{
if(window.localStorage.getItem(key).toUpperCase().indexOf(str.toUpperCase()) != -1){
@@ -1051,7 +1012,7 @@ function get_search_keyword(str){
var kw_part1 = result.substring(0,kw_start);
var kw_part2 = result.substring(kw_end,);
result = kw_part1 + `<mark style="box-shadow: 0px 0px 9px 7px #9ed1f68a;">${str}</mark>` + kw_part2;
window.search_cover.contant_result.push({
window.search.contant_result.push({
name:contant_name.toUpperCase(),
url:'#'+key,
contant:'------>'+result+'......'
+13 -15
View File
File diff suppressed because one or more lines are too long
+20
View File
@@ -147,6 +147,26 @@ The power input interface is DC/9-24V, the motor drive current can reach 1.5A, a
- [Arduino Example Code](https://github.com/m5stack/M5Stack/tree/master/examples/Modules/GRBL13.2)
```clike
GrblControl.h-API
//Initialize
void Init();
//Initialize, and set the three-axis step length and acceleration.
void Init(uint32_t x_step, uint32_t y_step,uint32_t z_step,uint32_t acc);
//Gocde
void Gcode(char *c);
//Control x, y, z offset and motor speed
void SetMotor(int x=0, int y=0, int z=0, int speed=300);
```
- [Configuration reference document](https://github.com/grbl/grbl/wiki/Configuring-Grbl-v0.7)
<script>
var purchase_link ='https://m5stack.com/products/grbl-module-13-2-stepmotor-driver-drv8825';
+1 -1
View File
File diff suppressed because one or more lines are too long
+65 -92
View File
File diff suppressed because one or more lines are too long
+20
View File
@@ -144,6 +144,26 @@
- [Arduino Example Code](https://github.com/m5stack/M5Stack/tree/master/examples/Modules/GRBL13.2)
```clike
GrblControl.h-API
//Initialize
void Init();
//Initialize, and set the three-axis step length and acceleration.
void Init(uint32_t x_step, uint32_t y_step,uint32_t z_step,uint32_t acc);
//Gocde
void Gcode(char *c);
//Control x, y, z offset and motor speed
void SetMotor(int x=0, int y=0, int z=0, int speed=300);
```
- [配置参考文档](https://github.com/grbl/grbl/wiki/Configuring-Grbl-v0.7)
<script>
var purchase_link = 'https://m5stack.com/products/grbl-module-13-2-stepmotor-driver-drv8825';