From b7e0fb9d879250f9a57a72d9706bb0d9baecb809 Mon Sep 17 00:00:00 2001 From: FE_Daizhen <934621328@qq.com> Date: Thu, 12 May 2022 20:48:31 +0800 Subject: [PATCH] first commit --- css/common.css | 361 +++++++++++++++++++++++++++++++++++++++++++++++++++ css/conponent.css | 116 +++++++++++++++++ img/icon-phone_1.png | Bin 0 -> 1862 bytes img/icon-top_1.png | Bin 0 -> 635 bytes index.html | 38 ++++++ js/conponents.js | 34 +++++ 6 files changed, 549 insertions(+) create mode 100644 css/common.css create mode 100644 css/conponent.css create mode 100644 img/icon-phone_1.png create mode 100644 img/icon-top_1.png create mode 100644 index.html create mode 100644 js/conponents.js diff --git a/css/common.css b/css/common.css new file mode 100644 index 0000000..4eb5b86 --- /dev/null +++ b/css/common.css @@ -0,0 +1,361 @@ +@charset "utf-8"; + +/** + * stylesheet file + * 公共样式文件 + * @author: Dai Zhen + * @scene: + * @copyright: null + */ + + + +/* ================================================================================= */ +/* common style */ +/* ================================================================================= */ + +html { + font-family: PingFangSC, "Helvetica Neue", Helvetica, STHeiTi, 'Microsoft Yahei', Arial, sans-serif; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; +} + + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +nav, +app-business, +summary { + display: block; +} + +audio, +canvas, +progress, +video { + display: inline-block; + vertical-align: baseline; +} + +audio:not([controls]) { + display: none; + height: 0; +} + +[hidden], +template { + display: none; +} + +svg:not(:root) { + overflow: hidden; +} + +a { + background: none; + text-decoration: none; + -webkit-touch-callout: none; + /*禁用长按页面时的弹出菜单(iOS下有效)*/ + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + /*去掉iOS点击链接时默认的灰色半透明覆盖层*/ + color: inherit; +} + +a:active { + outline: 0; +} + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +img { + border: 0 none; + vertical-align: middle; +} + +hr { + -moz-box-sizing: content-box; + box-sizing: content-box; + height: 0; +} + +pre { + overflow: auto; + white-space: pre; + white-space: pre-wrap; + word-wrap: break-word; +} + +code, +kbd, +pre, +samp { + font-family: monospace; + font-size: 1em; +} + +button, +input, +optgroup, +select, +textarea { + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-appearance: none; + color: inherit; + font: inherit; + margin: 0; + border: 0 none; + background: transparent; + outline: none; +} + +button, +select { + text-transform: none; +} + +button, +input[type="button"], +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; + cursor: pointer; +} + +button[disabled], +input[disabled] { + cursor: default; +} + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +input { + line-height: normal; +} + +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; + padding: 0; +} + +input[type="number"]::-webkit-inner-spin-button, +input[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +input[type="search"] { + -webkit-appearance: textfield; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +legend { + border: 0; + padding: 0; +} + +textarea { + overflow: auto; + resize: vertical; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +button, +input, +select, +textarea { + font-family: "Helvetica Neue", Helvetica, STHeiTi, 'Microsoft Yahei', Arial, sans-serif; +} + +ul, +ol { + list-style: none; +} + +li { + display: list-item; + text-align: -webkit-match-parent; +} + +input:focus { + outline: none; +} + +input::-moz-placeholder, +textarea::-moz-placeholder { + color: #aaa; +} + +input:-ms-input-placeholder, +textarea:-ms-input-placeholder { + color: #aaa; +} + +input::-webkit-input-placeholder, +textarea::-webkit-input-placeholder { + color: #aaa; +} + +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, +hgroup, +menu, +nav, +output, +ruby, +app-business, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; +} + +/*浮动*/ + +.fl { + float: left; +} + +.fr { + float: right; +} + +.clearfix { + *zoom: 1; +} + +.clearfix:after { + content: ""; + display: table; + line-height: 0; + font-size: 0; + clear: both; +} + +.hide, +.dn { + display: none; +} + +.tal { + text-align: left !important; +} +.tar { + text-align: right !important; +} + +body { + min-height: 100vh; + margin: 0; + font-size: 14px; + -webkit-overflow-scrolling: touch; + color: #333; + background-color: rgba(222, 233, 244, .9); +} + diff --git a/css/conponent.css b/css/conponent.css new file mode 100644 index 0000000..1945dac --- /dev/null +++ b/css/conponent.css @@ -0,0 +1,116 @@ +@charset "utf-8"; + +/** + * stylesheet file + * 组件库样式文件 + * @author: Dai Zhen + * @scene: + * @copyright: null + */ + + + +/* ================================================================================= */ +/* 右下角悬浮组件 */ +/* ================================================================================= */ +.conponent_fixed{ + position: fixed; + right: 30px; + bottom: 50px; + width: 50px; +} + +.conponent_fixed_item{ + position: relative; + margin-top: 5px; + padding: 5px; + width: 40px; + height: 40px; + text-align: center; + background: #FFF; + cursor: pointer; + color: #AAA; + border-radius: 4px; + box-shadow: 0px 0px 2px rgba(33, 33, 33, .1); +} + +.conponent_fixed_item .item { + position: inherit; + width: 100%; + height: 100%; + z-index: 99; +} +/* 图标 */ +.conponent_fixed_item .icon{ + display: block; + width: 100%; + height: 100%; + background: url('../img/icon-top_1.png') no-repeat center center; + background-size: 75% 75%; + transition: all 0.3s; +} +.conponent_fixed_item:hover .icon{ + opacity: 0; +} + +/* 文字 */ +.conponent_fixed_item .text { + position: absolute; + top: 0; + left: 0; + padding: 4px 0; + width: inherit; + height: inherit; + line-height: 18px; + opacity: 0; + transition: all 0.3s; + box-sizing: border-box; +} +.conponent_fixed_item .text.word_2{ + line-height: 36px; +} +.conponent_fixed_item:hover .text{ + opacity: 1; +} + +/* 浮窗: 文字或者图片 */ +.conponent_fixed_item .pop{ + display: none; + padding-right: 6px; + position: absolute; + top: 0; + right: 50px; + z-index: 9; +} +.conponent_fixed_item .pop .msg{ + padding: 5px 15px; + color: #444; + font-size: 18px; + line-height: 40px; + white-space: nowrap; + border-radius: 4px; + background: #FFF; + box-shadow: 0px 0px 2px rgba(33, 33, 33, .1); +} +.conponent_fixed_item:hover .pop{ + display: block; + animation: fadeIn 0.5s; +} + +.conponent_fixed_item.phone .icon{ + background-image: url('../img/icon-phone_1.png'); +} +.conponent_fixed_item.totop .icon{ + background-image: url('../img/icon-top_1.png'); +} + +@keyframes fadeIn { + 0% { + opacity: 0; + right: -110px; + } + 100% { + opacity: 1; + right: 50px; + } +} \ No newline at end of file diff --git a/img/icon-phone_1.png b/img/icon-phone_1.png new file mode 100644 index 0000000000000000000000000000000000000000..5fd1758e494b7a8bd00daeb9dd8dacee45b9a83b GIT binary patch literal 1862 zcmV-M2f6r(P)Px+07*naRA@u(S$m8fWfec?o7=~xK?n`B0&OHnBoKjMqP2DR&Y9b#RBd@A5Q-39 z3W*hpgrGDe;vYVdM*)ct%0pTLZFttyljY!z-1_Z2+JiNUxm$ zuv0{S6$HU(Cu4T)+I8gk`1o=FSS}*VV}J?yHURiB5xF8@3V~=e8lR1#=pg|3TuRAC z5xF}Ef)|P?R@!E>`N;zZ4qWYd-Zw<#n1nxyqVLygwOjJa%MHR>dle$ymk35g3jja! zegD^am35*^z!+n`m!f%^h|bF+I~NFMUIPGkrU0zk^*W!`Jqb z(Gx_yUSDO5c`OlRj9FH#R-f-BxZm%iqoYUf-@pH#DIiw|L2!RJd0jy?o6S?hFjRx* zwW0vx^}g@l(XWAd`ReuhvBsFcrRXmtq9;1>cLl-Bj{?BO%3SoazrHbgvAMBb}ZDqkEL8v0$k+)NPG+KUizqY{hAnji@7D#M_DWYp{RA!AGe ztrHQw)DyF2&6>A(@#1$9by*-@6p=F!@t3~uUpkF;6%y^7`=*HeJnNWe9jCnjaFo8# z#+X+tmC8$lgM)u4q_ITek&%&khv3c!#vMBW@u>W@4e{C_|D9d zL(VlsbPsAl5{99MQLTY>{X#?@2!h~6&0?b{S|cJ?#NQkdQ4ZmUMBUZeLL6?v^(uPO$cdeJ{?C%Wu~%d{qJF&s!C?oPW+Z6I<-P)r_wJmmYM$o0G|SYZA5g|G=f+wB0q>9 z)+M!CZC8ho{~c{Uw?L#rXD4qs=gt?AO|jr)qZ(JPD=$59}AsFYbX8QAP81>0`8o9BQ-63cw%DWr^Ca; zJwtpad8K(`Y;5ck`}XbocdY0cBGQ)Ql*P=Nx@ZccYcmmDkjKj(*u{3vJ*US=qmY)4 zh`71!P8_A(ikL<}{e+0V`=J6+uh&m7#_Y*y)N4d^d`{Y~WThRaL`!@(G-c2Wp1I2I zn3N7et&ZmjdiLkH9jE`!m@(t^B}0)+jEP)Px%HAzH4RA@u(nCnr)Fc5^#9nb-E03C!&1#|!t z$)lK4Bw4Z{8F|J(633Rl+r5X=(1{<-iSM7z3qV9}iAesrD$LAlyT=0sD!??-`4yOE z{j#f^R}zD?l;*0+WZ8si^zhAp3O=x%)C%?<6taE+PV307Jy=#FH{_}Sq%W+p)y_C>Xd7z zT!6l9I%{YOVACSvy=O87JY)BP9ee-=LVNERWT#{W%;wQyZIjyD##m=(qZk0VGWYlG zgpS?4ti&ji1fX=-Pa;|~^J9OpV*n21o9P+XLpyd7KuQ&f0r1%=rDI0{ID?t3-H1G* zzGdcbP3i=I3nD@XhZlnOc{+-5BX+i zEAIg41L$|lDBI-ZK%flcvN`|;0YV-uX(3NFvoA+U0O*kLB9bWDHYFA4SrH$Rd%xbR zgH + + + + 组件库 + + + + +
+ +
+
+ + 客服电话 + +
+
+
0551-6668888
+ +
+
+ +
+
+ + 返回顶部 + +
+
+
+ + + + diff --git a/js/conponents.js b/js/conponents.js new file mode 100644 index 0000000..7257e7e --- /dev/null +++ b/js/conponents.js @@ -0,0 +1,34 @@ +/** + * 常用组件库 + * +**/ + +/* 网站右下角悬浮常用组件 */ + +function Fixed() { + this.fixed = null + this.setting = { + type: '1', + colorStyle: 'blue' + } +} + +// 初始化 +Fixed.prototype.init = function(opt){ + extend(this.setting, opt) + this.create() +} +// 创建元素 +Fixed.prototype.create =function(){ + this.fixed = document.createElement('div') + this.fixed.className = 'conponent_fixed' + this.fixed.innerHTML = '

123

' + + document.body.appendChild(this.fixed) +} + +function extend(defaultVal, newVal) { + for(var e in newVal) { + defaultVal[e] = newVal[e] + } +} \ No newline at end of file