FE_Daizhen
4 years ago
commit
b7e0fb9d87
6 changed files with 549 additions and 0 deletions
@ -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); |
|||
} |
|||
|
|||
@ -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; |
|||
} |
|||
} |
|||
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 635 B |
@ -0,0 +1,38 @@ |
|||
<!DOCTYPE html> |
|||
<html> |
|||
<head> |
|||
<meta charset="utf-8" /> |
|||
<title>组件库</title> |
|||
<link rel="stylesheet" href="css/common.css"> |
|||
<link rel="stylesheet" href="css/conponent.css"> |
|||
</head> |
|||
<body> |
|||
<div class="conponent_fixed"> |
|||
<!-- 客服 --> |
|||
<div class="conponent_fixed_item phone"> |
|||
<div class="item"> |
|||
<span class="icon"></span> |
|||
<span class="text">客服电话</span> |
|||
<!-- <span class="text word_2">客服</span> --> |
|||
</div> |
|||
<div class="pop"> |
|||
<div class="msg"><span>0551-6668888</span></div> |
|||
<!-- <div class="img"><img src="img/icon-phone_1.png" alt=""></div> --> |
|||
</div> |
|||
</div> |
|||
<!-- 置顶 --> |
|||
<div class="conponent_fixed_item totop"> |
|||
<div class="item"> |
|||
<span class="icon"></span> |
|||
<span class="text">返回顶部</span> |
|||
<!-- <span class="text word_2">置顶</span> --> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<script src="js/conponents.js"></script> |
|||
<script> |
|||
// var fixed = new Fixed(); |
|||
// fixed.init(); |
|||
</script> |
|||
</body> |
|||
</html> |
|||
@ -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 = '<p>123</p>' |
|||
|
|||
document.body.appendChild(this.fixed) |
|||
} |
|||
|
|||
function extend(defaultVal, newVal) { |
|||
for(var e in newVal) { |
|||
defaultVal[e] = newVal[e] |
|||
} |
|||
} |
|||
Loading…
Reference in new issue