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