CSS (SCSS)

Clear default styles

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header,
menu, nav, output, ruby, section, summary,
time, mark, audio, video, input {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
  box-sizing: border-box;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, menu, nav, section {
  display: block;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
/* custom */
 
a {
  -webkit-backface-visibility: hidden;
  text-decoration: none;
  outline: none;
  -webkit-tap-highlight-color: rgba(255, 0, 0, 0);
}
a:hover {
  text-decoration: none;
}
li {
  list-style: none;
}
body {
  -webkit-text-size-adjust: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
a, button, input { //清除点击效果
  -webkit-tap-highlight-color: #fff;
}
input { //清除聚焦时边框
  outline: none;
}
img {
  -webkit-touch-callout: none;
  width: 100%;
  height: 100%;
}
Copy the code

Reuse SCSS

// ellipses @mixin text-overflow($line:1) {@if $line==1 {overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @else { display: -webkit-box; -webkit-line-clamp: $line; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }} // flex center @mixin flex-center {display: flex; justify-content: center; align-items: center; } @mixin flex($justify:flex-start, $align:flex-start) { display: flex; justify-content: $justify; align-items: $align; } // absolute center @mixin absolute-center {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } // absolute bottom @mixin absolute-bottom {position: absolute; bottom: 0; left: 0; } // @mixin mask($color: $color-black-85, $index: 101) {position: fixed; left: 0; right: 0; top: 0; bottom: 0; background: $color; z-index: $index; } @mixin bgImage($url, $position: center, $size: 100%) {background-image: url($url); background-repeat: no-repeat; background-position: $position; background-size: $size; } // @mixin circle($size) {width: $size; height: $size; border-radius: 50%; overflow: hidden; } // @mixin text-center($height) {text-align: center; height: $height; line-height: $height; } // close button @mixin close_btn {position: absolute; right: 30px; top: 30px; width: 40px; height: 40px; z-index: 101; &::after { content: ''; position: absolute; left: 0; top: 10px; width: 40px; height: 5px; border-radius: 10px; background: #999; transform: rotate(45deg); -ms-transform: rotate(45deg); /* IE 9 */ -moz-transform: rotate(45deg); /* Firefox */ -webkit-transform: rotate(45deg); /* Safari and Chrome */ -o-transform: rotate(45deg); /* Opera */ z-index: 99; transform-origin: center center; } &::before { content: ''; position: absolute; left: 0; top: 10px; width: 40px; height: 5px; border-radius: 10px; background: #999; transform: rotate(135deg); -ms-transform: rotate(135deg); /* IE 9 */ -moz-transform: rotate(135deg); /* Firefox */ -webkit-transform: rotate(135deg); /* Safari and Chrome */ -o-transform: rotate(135deg); /* Opera */ z-index: 99; transform-origin: center center; }}Copy the code

Js article

About the cache

Let Storage = {/ / = = = = = = = = = = = = = = = = = = sessionsTorage Settings cache = = = = = = = = = = = = = = = = / / set the cache sessionSet (name, data) { sessionStorage.removeItem(name); sessionStorage.setItem(name, JSON.stringify(data)); SessionGet (name) {return json.parse (sessionstorage.getitem (name)); }, / / clear the cache sessionRemove (name) {sessionStorage. RemoveItem (name); }, / / = = = = = = = = = = = = = = = = = = localStorage Settings cache = = = = = = = = = = = = = = = = = = / / set the cache localSet (name, data) { localStorage.removeItem(name); localStorage.setItem(name, JSON.stringify(data)); Parse (localstorage.getitem (name));}, // Get cache localGet(name) {return JSON. Parse (localstorage.getitem (name)); }, // Remove cache localRemove(name) {localstorage.removeitem (name); }}; export default Storage;Copy the code

Throttling function

Let util = {/* Throttling function that controls multiple execution of the method in a short time by controlling the time interval between each event execution fn: method to execute wait: delay time for each event execution (milliseconds) immediate: whether to execute immediately */ throttle: (fn, wait, immediate) => util.debounceOrThrottle(fn, wait, immediate, true), debounceOrThrottle( fn, wait = 300, immediate = false, executeOncePerWait = false ) { if (typeof fn ! == "function") {console.error(" passed arguments must be functions "); return; } let tId = null; let context = null; let args = null; let lastTriggerTime = null; let result = null; let lastExecutedTime = null; const later = function() { const last = Date.now() - (executeOncePerWait ? lastExecutedTime : lastTriggerTime); if (last < wait && last > 0) { setTimeout(later, wait - last); } else { if (! immediate) { executeOncePerWait && (lastExecutedTime = Date.now()); result = fn.apply(context, args); context = args = null; } tId = null; }}; return function() { context = this; args = arguments; ! executeOncePerWait && (lastTriggerTime = Date.now()); const callNow = immediate && ! tId; if (! tId) { executeOncePerWait && (lastExecutedTime = Date.now()); tId = setTimeout(later, wait); } if (callNow) { executeOncePerWait && (lastExecutedTime = Date.now()); result = fn.apply(context, args); context = args = null; } return result; }; }, // copy the content onCopy(content) {let oInput = document.createElement("input"); oInput.value = content; document.body.appendChild(oInput); oInput.select(); // Select the object; console.log(oInput.value); document.execCommand("Copy"); // Execute the browser copy command oinput.remove (); }}; module.exports = util;Copy the code