front
/
conponent_web
4
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

新增留言板，主题色设置

master
FE_Daizhen 4 years ago
parent
cd8fed9b24
commit
118c07cf48
15 changed files with 286 additions and 67 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 40
      index.html
  2. 73
      plugins/css/conponent.css
  3. BIN
      plugins/img/icon-close.png
  4. BIN
      plugins/img/icon-msg_1.png
  5. 229
      plugins/js/conponents.js
  6. 5
      plugins/js/jquery-1.11.3.js
  7. 2
      plugins/layer/layer.js
  8. 2
      plugins/layer/mobile/layer.js
  9. 1
      plugins/layer/mobile/need/layer.css
  10. BIN
      plugins/layer/theme/default/icon-ext.png
  11. BIN
      plugins/layer/theme/default/icon.png
  12. 1
      plugins/layer/theme/default/layer.css
  13. BIN
      plugins/layer/theme/default/loading-0.gif
  14. BIN
      plugins/layer/theme/default/loading-1.gif
  15. BIN
      plugins/layer/theme/default/loading-2.gif

40
index.html
View File

@ -5,18 +5,14 @@
<title>组件库</title> <title>组件库</title>
<link rel="stylesheet" type="text/css" href="plugins/css/animate.min.css"/> <link rel="stylesheet" type="text/css" href="plugins/css/animate.min.css"/>
<style type="text/css"> <style type="text/css">
div.wow{ div.wow{margin: 10px auto;padding: 150px 0;width: 800px;color: #FFF;font-size: 40px;text-align: center;}
margin: 10px auto;
padding: 150px 0;
width: 800px;
color: #FFF;
font-size: 40px;
text-align: center;
}
</style> </style>
<script src="plugins/js/wow.min.js"></script>
<script src="plugins/js/conponents.js"></script>
</head> </head>
<body style="padding-top: 1000px;"> <body style="padding-top: 1000px;">
<!-- 生产环境--start --><div class="wow animate__backInLeft" style="background:#CCF">animate__backInLeft</div> <!-- 生产环境--start -->
<div class="wow animate__backInLeft" style="background:#CCF">animate__backInLeft</div>
<div class="wow animate__backInRight" style="background:#A70">animate__backInRight</div> <div class="wow animate__backInRight" style="background:#A70">animate__backInRight</div>
<div class="wow animate__bounceInLeft" style="background:#950">animate__bounceInLeft</div> <div class="wow animate__bounceInLeft" style="background:#950">animate__bounceInLeft</div>
<div class="wow animate__bounceInRight" style="background:#C9C">animate__bounceInRight</div> <div class="wow animate__bounceInRight" style="background:#C9C">animate__bounceInRight</div>
@ -29,20 +25,15 @@
<div class="wow animate__zoomIn" style="background:#029">animate__zoomIn</div> <div class="wow animate__zoomIn" style="background:#029">animate__zoomIn</div>
<div class="wow animate__slideInLeft" style="background:#4AF">animate__slideInLeft</div> <div class="wow animate__slideInLeft" style="background:#4AF">animate__slideInLeft</div>
<div class="wow animate__slideInRight" style="background:#26A">animate__slideInRight</div> <div class="wow animate__slideInRight" style="background:#26A">animate__slideInRight</div>
<script src="plugins/js/wow.min.js" type="text/javascript" charset="utf-8"></script>
<script src="plugins/js/conponents.js"></script>
<script type="text/javascript"> <script type="text/javascript">
/** /**
* 页面滚动动画 * 页面滚动动画
* class="wow animate__zoomIn" => wow必须，animate__zoomIn动画名称，可参考animate.css(https://animate.style/) * class="wow animate__zoomIn" => wow必须，animate__zoomIn动画名称，可参考animate.css(https://animate.style/)
*
**/ **/
new WOW({ new WOW({
animateClass: 'animate__animated' animateClass: 'animate__animated'
}).init(); }).init();
/** /**
* 悬浮组件 * 悬浮组件
* fixedStyle: 组件类型；可选值 'circle' * fixedStyle: 组件类型；可选值 'circle'
@ -50,26 +41,33 @@
**/ **/
var fixed = new Fixed(); var fixed = new Fixed();
fixed.init({ fixed.init({
fixedStyle: '', themeColor: '#4BE', // 主题色
fixedStyle: ['circle'], // 样式，形状：'circle' ；风格： ''
dataValue: { dataValue: {
feedback: '',
phone: '0551-6668388', phone: '0551-6668388',
vxQrcode: 'plugins/img/icon-vx_1.1.png' vxQrcode: 'plugins/img/icon-vx_1.1.png',
message: ''
},
// 留言提交
submitFn: function(opt) {
console.log(opt);
} }
}); });
</script> </script>
<!-- 生产环境--end --> <!-- 生产环境--end -->
<!-- 演示内容--start --> <!-- 演示内容--start -->
<input onclick="newFixed()" style="position: fixed;top:20px;background-color: #3AF;color:#FFF" type="button" value="默认" /> <input onclick="newFixed()" style="position: fixed;top:20px;background-color: #3AF;color:#FFF" type="button" value="默认" />
<input onclick="newFixed('circle')" style="position: fixed;top:50px;background-color: #3AF;color:#FFF" type="button" value="类型1" /> <input onclick="newFixed(['circle'])" style="position: fixed;top:50px;background-color: #3AF;color:#FFF" type="button" value="类型1" />
<script type="text/javascript"> <script type="text/javascript">
function newFixed(style) { function newFixed(style) {
fixed = null fixed = null
document.getElementsByClassName('conponent_fixed')[0].remove(); document.getElementsByClassName('conponent_fixed')[0].remove();
fixed = new Fixed(); fixed = new Fixed();
fixed.init({ fixed.init({
fixedStyle: style ? style : 'default' fixedStyle: style ? style : ['default']
}); });
} }
</script> </script>

73
plugins/css/conponent.css
View File

@ -151,6 +151,9 @@
background-image: url('../img/icon-vx_1.1.png'); background-image: url('../img/icon-vx_1.1.png');
/* background-image: url('../img/icon-qrcode_1.png'); */ /* background-image: url('../img/icon-qrcode_1.png'); */
} }
.conponent_fixed_item.message .icon{
background-image: url('../img/icon-msg_1.png');
}
.conponent_fixed_item.phone .icon{ .conponent_fixed_item.phone .icon{
background-image: url('../img/icon-phone_1.png'); background-image: url('../img/icon-phone_1.png');
} }
@ -198,3 +201,73 @@
margin-top: 8px; margin-top: 8px;
border-radius: 50%; border-radius: 50%;
} }
/* 留言板 */
.conponent_dialog{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(3, 3, 2, .8);
z-index: 99999;
}
.conponent_dialog_box{
position: relative;
margin: 30vh auto 0;
padding: 10px 30px;
width: 40%;
border-radius: 8px;
background-color: #FFF;
}
.conponent_dialog_box .title{
padding: 15px 0;
display: block;
text-align: left;
font-size: 20px;
color: #333;
}
.conponent_dialog_box .context{
padding-bottom: 20px;
text-align: left;
color: #333;
}
.conponent_dialog_box .input{
margin-bottom: 12px;
padding: 8px 12px;
display: block;
width: 100%;
border: 1px solid #E5E5E5;
border-radius: 4px;
box-sizing: border-box;
}
.conponent_dialog_box .textarea{
padding: 12px;
display: block;
resize: none;
width: 100%;
height: 100px;
border: 1px solid #E5E5E5;
border-radius: 4px;
box-sizing: border-box;
}
.conponent_dialog_box .btn{
display: inline-block;
margin-top: 15px;
padding: 10px 40px;
background: #3454BE;
color: #FFF;
border-radius: 6px;
font-size: 16px;
line-height: 1;
}
.conponent_dialog_box .close{
position: absolute;
top: 20px;
right: 20px;
width: 30px;
height: 30px;
background: url('../img/icon-close.png') no-repeat center center;
background-size: 80%;
}

BIN
plugins/img/icon-close.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
plugins/img/icon-msg_1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

229
plugins/js/conponents.js
View File

@ -1,7 +1,7 @@
/** /**
* 常用组件库 * 常用组件库
* *
**/ **/
var linkCss_1 = document.createElement('link') var linkCss_1 = document.createElement('link')
linkCss_1.setAttribute('rel', 'stylesheet') linkCss_1.setAttribute('rel', 'stylesheet')
@ -12,10 +12,20 @@ linkCss_2.setAttribute('rel', 'stylesheet')
linkCss_2.setAttribute('href', 'plugins/css/conponent.css') linkCss_2.setAttribute('href', 'plugins/css/conponent.css')
document.head.appendChild(linkCss_2) document.head.appendChild(linkCss_2)
var linkJS_1 = document.createElement('script')
linkJS_1.setAttribute('src', 'plugins/js/jquery-1.11.3.js')
linkJS_1.setAttribute('type', 'text/javascript')
linkJS_1.setAttribute('charset', 'text/utf-8')
document.head.appendChild(linkJS_1)
var linkJS_2 = document.createElement('script')
linkJS_2.setAttribute('src', 'plugins/layer/layer.js')
linkJS_2.setAttribute('type', 'text/javascript')
linkJS_2.setAttribute('charset', 'text/utf-8')
document.head.appendChild(linkJS_2)
/* 对象继承 */ /* 对象继承 */
function extend(defaultVal, newVal) { function extend(defaultVal, newVal) {
for(var e in newVal) { for (var e in newVal) {
defaultVal[e] = newVal[e] defaultVal[e] = newVal[e]
} }
} }
@ -25,65 +35,143 @@ function extend(defaultVal, newVal) {
function Fixed() { function Fixed() {
this.fixed = null this.fixed = null
this.setting = { this.setting = {
fixedStyle: 'default', hover: 'text', // 悬浮显示文字或者高亮图标
themeColor: '#3454BE', // 主题色
fixedStyle: ['default'], // 样式，形状：'circle' ；风格： ''
dataValue: { dataValue: {
phone: '0551-6668888', // 置顶默认显示，其他可选填，
vxQrcode: 'plugins/img/icon-qrcode_1.png' feedback: '', // 反馈
} phone: '0551-6668888', // 电话号码
vxQrcode: 'plugins/img/icon-qrcode_1.png', // 二维码
message: '' // 留言
},
submitFn: function() {}
} }
} }
// 初始化 // 初始化
Fixed.prototype.init = function(opt){ Fixed.prototype.init = function(opt) {
extend(this.setting, opt) extend(this.setting, opt)
this.create() this.create()
this.addEvent() this.addEvent()
} }
// 创建元素 // 创建元素
Fixed.prototype.create = function() { Fixed.prototype.create = function() {
var FixedArray = {
// 反馈
feedback: {
hoverText: `
<div class="conponent_fixed_item feedback">
<div class="item">
<span class="icon"></span>
<span class="text">意见<br />反馈</span>
</div>
</div>
`,
hoverIcon: ``
},
// 二维码 // <span class="icon_hover"></span>
vxQrcode: {
hoverText: `
<div class="conponent_fixed_item qrcode">
<div class="item">
<span class="icon"></span>
<span class="text word_2">公众号</span>
</div>
<div class="pop">
<div class="img">
<p>微信公众号</p>
<img src="${this.setting.dataValue.vxQrcode}" alt="">
</div>
</div>
</div>
`,
hoverIcon: ``
},
// 电话
phone: {
hoverText: `
<div class="conponent_fixed_item phone">
<div class="item">
<span class="icon"></span>
<span class="text">客服<br />电话</span>
</div>
<div class="pop">
<div class="msg"><span>${this.setting.dataValue.phone}</span></div>
</div>
</div>
`,
hoverIcon: ``
},
// 留言板
message: {
hoverText: `
<div class="conponent_fixed_item message">
<div class="item" id="showDialog">
<span class="icon"></span>
<span class="text word_2">留言</span>
</div>
<div id="conponentDialog" class="conponent_dialog" style="display:none;">
<div class="conponent_dialog_box">
<span id="dialogClose" class="close"></span>
<div class="title">留言板</div>
<div class="context">
<input class="input" id="msgName" placeholder="请输入姓名" />
<input class="input" id="msgTel" placeholder="请输入手机号码" />
<textarea class="textarea" id="msgText" row="4" placeholder="请输入留言内容"></textarea>
<button class="btn" id="ahbmzSubmit" style="background-color: ${this.setting.themeColor}">提交</button>
</div>
</div>
</div>
</div>
`,
hoverIcon: ``
},
// 置顶
totop: {
hoverText: `
<div class="conponent_fixed_item totop">
<div class="item">
<span class="icon"></span>
<span class="text word_2">置顶</span>
</div>
</div>
<style>
.conponent_fixed_item:hover {
color: #FFF;
background-color: ${this.setting.themeColor};
}
</style>
`,
hoverIcon: ``
}
}
var that = this
this.fixed = document.createElement('div') this.fixed = document.createElement('div')
this.fixed.className = 'conponent_fixed' this.fixed.className = 'conponent_fixed'
this.fixed.innerHTML = ` var htmlText = ''
<div class="conponent_fixed_item feedback"> for (let item in this.setting.dataValue) {
<div class="item"> if (this.setting.hover === 'text') {
<span class="icon"></span> htmlText += FixedArray[item].hoverText
<span class="text">意见<br />反馈</span> } else {
</div> htmlText += FixedArray[item].hoverIcon
</div> }
<div class="conponent_fixed_item qrcode"> }
<div class="item"> htmlText += this.setting.hover === 'text' ? FixedArray['totop'].hoverText : FixedArray['totop'].hoverIcon
<span class="icon"></span> this.fixed.innerHTML = htmlText
<span class="icon_hover"></span> var styleArr = this.setting.fixedStyle
</div> if (styleArr.length >= 1 || styleArr[0] !== 'default') {
<div class="pop"> styleArr.forEach(function(item) {
<div class="img"> that.fixed.classList.add(item)
<p>微信公众号</p> })
<img src="${this.setting.dataValue.vxQrcode}" alt="">
</div>
</div>
</div>
<div class="conponent_fixed_item phone">
<div class="item">
<span class="icon"></span>
<span class="text">客服<br />电话</span>
</div>
<div class="pop">
<div class="msg"><span>${this.setting.dataValue.phone}</span></div>
</div>
</div>
<div class="conponent_fixed_item totop">
<div class="item">
<span class="icon"></span>
<span class="text word_2">置顶</span>
</div>
</div>
`
if (this.setting.fixedStyle !== '') {
this.fixed.classList.add(this.setting.fixedStyle)
} }
document.body.appendChild(this.fixed) document.body.appendChild(this.fixed)
} }
// 事件绑定 // 事件绑定
Fixed.prototype.addEvent = function() { Fixed.prototype.addEvent = function() {
var that = this
var totop = document.getElementsByClassName('totop')[0]; var totop = document.getElementsByClassName('totop')[0];
var scrollTop = document.documentElement.scrollTop var scrollTop = document.documentElement.scrollTop
setToTop(); setToTop();
@ -98,12 +186,12 @@ Fixed.prototype.addEvent = function() {
} }
}, 8) }, 8)
} }
window.onscroll = function() { window.onscroll = function() {
scrollTop = document.documentElement.scrollTop; scrollTop = document.documentElement.scrollTop;
setToTop(); setToTop();
} }
/* 置顶*/
function setToTop() { function setToTop() {
if (scrollTop > 400) { if (scrollTop > 400) {
totop.classList.add('_show'); totop.classList.add('_show');
@ -113,4 +201,53 @@ Fixed.prototype.addEvent = function() {
totop.classList.remove('_show'); totop.classList.remove('_show');
} }
} }
var conponentDialog = document.getElementById('conponentDialog');
/* 显示留言板 */
var showDialog = document.getElementById('showDialog');
showDialog.onclick = function() {
conponentDialog.style.display = 'block'
}
/* 关闭留言板 */
var dialogClose = document.getElementById('dialogClose');
dialogClose.onclick = function() {
conponentDialog.style.display = 'none'
}
/* 字符串为空*/
function isEmpty(str, msg) {
if (str === '' || str === undefined) {
layer.msg(msg);
return false
} else {
return true
}
}
// 手机号正则
var reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/; //11位手机号码正则
/* 留言板提交 */
var ahbmzSubmit = document.getElementById('ahbmzSubmit');
ahbmzSubmit.onclick = function() {
var msgName = document.getElementById('msgName').value.trim();
if (!isEmpty(msgName, '请输入姓名')) {
return false
}
var msgTel = document.getElementById('msgTel').value.trim();
if (!isEmpty(msgTel, '请输入手机号码')) {
return false
}
if (!reg_tel.test(msgTel)) {
return layer.msg('请输入正确的手机格式');
}
var msgText = document.getElementById('msgText').value.trim();
if (!isEmpty(msgText, '请输入留言')) {
return false
}
var msgOpt = {
msgName: msgName,
msgTel: msgTel,
msgText: msgText
}
that.setting.submitFn(msgOpt)
conponentDialog.style.display = 'none'
}
} }

5
plugins/js/jquery-1.11.3.js
View File

File diff suppressed because one or more lines are too long

2
plugins/layer/layer.js
View File

File diff suppressed because one or more lines are too long

2
plugins/layer/mobile/layer.js
View File

@ -0,0 +1,2 @@
/*! layer mobile-v2.0.0 Web 通用弹出层组件 MIT License */
;!function(e){"use strict";var t=document,n="querySelectorAll",i="getElementsByClassName",a=function(e){return t[n](e)},s={type:0,shade:!0,shadeClose:!0,fixed:!0,anim:"scale"},l={extend:function(e){var t=JSON.parse(JSON.stringify(s));for(var n in e)t[n]=e[n];return t},timer:{},end:{}};l.touch=function(e,t){e.addEventListener("click",function(e){t.call(this,e)},!1)};var r=0,o=["layui-m-layer"],c=function(e){var t=this;t.config=l.extend(e),t.view()};c.prototype.view=function(){var e=this,n=e.config,s=t.createElement("div");e.id=s.id=o[0]+r,s.setAttribute("class",o[0]+" "+o[0]+(n.type||0)),s.setAttribute("index",r);var l=function(){var e="object"==typeof n.title;return n.title?'<h3 style="'+(e?n.title[1]:"")+'">'+(e?n.title[0]:n.title)+"</h3>":""}(),c=function(){"string"==typeof n.btn&&(n.btn=[n.btn]);var e,t=(n.btn||[]).length;return 0!==t&&n.btn?(e='<span yes type="1">'+n.btn[0]+"</span>",2===t&&(e='<span no type="0">'+n.btn[1]+"</span>"+e),'<div class="layui-m-layerbtn">'+e+"</div>"):""}();if(n.fixed||(n.top=n.hasOwnProperty("top")?n.top:100,n.style=n.style||"",n.style+=" top:"+(t.body.scrollTop+n.top)+"px"),2===n.type&&(n.content='<i></i><i class="layui-m-layerload"></i><i></i><p>'+(n.content||"")+"</p>"),n.skin&&(n.anim="up"),"msg"===n.skin&&(n.shade=!1),s.innerHTML=(n.shade?"<div "+("string"==typeof n.shade?'style="'+n.shade+'"':"")+' class="layui-m-layershade"></div>':"")+'<div class="layui-m-layermain" '+(n.fixed?"":'style="position:static;"')+'><div class="layui-m-layersection"><div class="layui-m-layerchild '+(n.skin?"layui-m-layer-"+n.skin+" ":"")+(n.className?n.className:"")+" "+(n.anim?"layui-m-anim-"+n.anim:"")+'" '+(n.style?'style="'+n.style+'"':"")+">"+l+'<div class="layui-m-layercont">'+n.content+"</div>"+c+"</div></div></div>",!n.type||2===n.type){var d=t[i](o[0]+n.type),y=d.length;y>=1&&layer.close(d[0].getAttribute("index"))}document.body.appendChild(s);var u=e.elem=a("#"+e.id)[0];n.success&&n.success(u),e.index=r++,e.action(n,u)},c.prototype.action=function(e,t){var n=this;e.time&&(l.timer[n.index]=setTimeout(function(){layer.close(n.index)},1e3*e.time));var a=function(){var t=this.getAttribute("type");0==t?(e.no&&e.no(),layer.close(n.index)):e.yes?e.yes(n.index):layer.close(n.index)};if(e.btn)for(var s=t[i]("layui-m-layerbtn")[0].children,r=s.length,o=0;o<r;o++)l.touch(s[o],a);if(e.shade&&e.shadeClose){var c=t[i]("layui-m-layershade")[0];l.touch(c,function(){layer.close(n.index,e.end)})}e.end&&(l.end[n.index]=e.end)},e.layer={v:"2.0",index:r,open:function(e){var t=new c(e||{});return t.index},close:function(e){var n=a("#"+o[0]+e)[0];n&&(n.innerHTML="",t.body.removeChild(n),clearTimeout(l.timer[e]),delete l.timer[e],"function"==typeof l.end[e]&&l.end[e](),delete l.end[e])},closeAll:function(){for(var e=t[i](o[0]),n=0,a=e.length;n<a;n++)layer.close(0|e[0].getAttribute("index"))}},"function"==typeof define?define(function(){return layer}):function(){var e=document.scripts,n=e[e.length-1],i=n.src,a=i.substring(0,i.lastIndexOf("/")+1);n.getAttribute("merge")||document.head.appendChild(function(){var e=t.createElement("link");return e.href=a+"need/layer.css?2.0",e.type="text/css",e.rel="styleSheet",e.id="layermcss",e}())}()}(window);

1
plugins/layer/mobile/need/layer.css
View File

File diff suppressed because one or more lines are too long

BIN
plugins/layer/theme/default/icon-ext.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.8 KiB

BIN
plugins/layer/theme/default/icon.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

1
plugins/layer/theme/default/layer.css
View File

File diff suppressed because one or more lines are too long

BIN
plugins/layer/theme/default/loading-0.gif
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.7 KiB

BIN
plugins/layer/theme/default/loading-1.gif
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 701 B

BIN
plugins/layer/theme/default/loading-2.gif
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

Write Preview
Loading…
Cancel
Save