自定义官网前端组件
官网前端组件
页面骨架
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<meta name="application-name" content="">
<title>标题title>
<script src="resources/js/jquery-2.2.3.min.js">script>
<script src="resources/bootstrap/dist/js/bootstrap.min.js">script>
<script src="resources/js/wow.min.js">script>
<script src="resources/js/v12.js">script>
<link rel="stylesheet" href="resources/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="resources/css/style.css" />
<link rel="stylesheet" href="resources/css/animate.css" />
<link rel="stylesheet" href="resources/css/buttons.css" />
<link rel="stylesheet" href="resources/css/quill.snow.css" />
<script>
$(function () {
$("#header").load("header.html")
});
script>
<script>
$(function () {
$("#footer").load("footer.html")
});
script>
head>
<body>
<div id="header">div>
<div id="footer">div>
body>
<script>
new WOW().init();
script>
html>
联系我们
-
联系我们
<script src="resources/js/vue.min.js">script> <script src="resources/js/axios.min.js">script> <script src="resources/js/element/index.js">script> <link rel="stylesheet" href="resources/css/element/index.css"> <div class="jumbotron jumbotron-fluid bg-ff" id="contact_index"> <div class="container"> <div class="align-center"> <span class="span_title">联系我们span> div> <div class="align-center"> <span class="span_line">CONTACT USspan> div> div> <div class="container"> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="您的姓名" prop="name"> <el-input v-model="ruleForm.name" placeholder="请输入姓名">el-input> el-form-item> <el-form-item label="联系信息" prop="message"> <el-input type="textarea" v-model="ruleForm.message" placeholder="请输入您的联系信息,如 QQ,邮箱,手机号码,电话"> el-input> el-form-item> <el-form-item > <el-button type="primary" @click="submitForm('ruleForm')">提交el-button> el-form-item> el-form> div> div> <script> new Vue({ el: '#contact_index', data: { ruleForm: { name: '', message: '' }, rules: { name: [{ required: true, message: '请输入姓名', trigger: 'change' }, { min: 1, max: 50, message: '长度在 3 到 5 个字符', trigger: 'change' } ], message: [{ required: true, message: '请输入您的联系信息,如 QQ,邮箱,手机号码,电话', trigger: 'change' }, { min: 1, max: 1000, message: '长度在 3 到 5 个字符', trigger: 'change' } ] } }, methods: { submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { var obj = this; axios.post('/company/service/board/insert', obj.ruleForm) .then(function (res) { console.log(res) if (res.data.code === 20000) { alert('提交成功!'); obj.resetForm(formName) } else { alert('提交未成功!'); obj.resetForm(formName) } }) .catch(function (error) { console.log(error); }); } else { console.log('error submit!!'); return false; } }); }, resetForm(formName) { this.$refs[formName].resetFields(); } }, }) script>
产品
-
产品(图片底部半透明描述)
<div class="jumbotron jumbotron-fluid bg-ff" id="product_index" style="background-image: url(/resources/images/bg/1.jpg);background: no-repeat;"> <div class="container"> <div class="align-center"> <span class="span_title">产品服务span> div> <div class="align-center"> <span class="span_line">FOCUS ON THE BRAIN TO READ EFFICIENTLYspan> div> div> <div class="container"> <div class="row row-cols-2 row-cols-md-4 align-center"> <div class="col mb-1 wow animated zoomIn"> <a href="deproduct.html"> <div class="card h-100 "> <div class="img_hidden"> <img src="/resources/images/bg/2.jpg" class="card-img-top" alt="..."> <span class="img_title">金属回收span> div> div> a> div> <div class="col mb-1 wow animated zoomIn"> <a href="deproduct.html"> <div class="card h-100 "> <div class="img_hidden"> <img src="/resources/images/bg/3.jpg" class="card-img-top" alt="..."> <span class="img_title">塑料回收span> div> div> a> div> <div class="col mb-1 wow animated zoomIn"> <a href="deproduct.html"> <div class="card h-100 "> <div class="img_hidden"> <img src="/resources/images/bg/4.jpg" class="card-img-top" alt="..."> <span class="img_title">电子回收span> div> div> a> div> <div class="col mb-1 wow animated zoomIn"> <a href="deproduct.html"> <div class="card h-100 "> <div class="img_hidden"> <img src="/resources/images/bg/5.jpg" class="card-img-top" alt="..."> <span class="img_title">衣服回收span> div> div> a> div> div> div> div> <style> /**产品*/ #product_index .card { border: none !important; padding: 1rem; cursor: pointer; transition: all 0.6s; } #product_index .img_title { position: absolute; text-align: center; width: 100%; bottom: 0; -webkit-transition: all .3s; -o-transition: all .3s; -moz-transition: all .3s; transition: all .3s; font-size: 15px; color: #fff; height: 44px; line-height: 44px; background: rgba(0, 0, 0, .7); z-index: 2; left: 0; } #product_index a { color: black; text-decoration: none; } #product_index img { cursor: pointer; transition: all 0.6s; } .img_hidden { position: relative; overflow: hidden; } .img_hover { transform: scale(1.1); } style>
新闻
- 无图横向
<div class="col-6 mb-1 wow animated fadeIn">
<a href="denews.html">
<div class="card h-100">
<div class="card-body">
<h6 class="card-title">鲜花，稍纵即逝的美！她美，而且能留住美！h6>
<p class="card-text"><small class="text-muted">鲜花，稍纵即逝的美！
花老板爱花惜花，愿在花研向大家推荐惜花，愿在花研向大家推荐另一种花。
她美，而且能留住美！惜花，愿在花研向大家推荐另一种花。
她美，而且能留住美！惜花，愿在花研向大家推荐另一种花。
她美，而且能留住美！另一种花。
她美，而且能留住美！
鲜花，稍纵即逝的美！她美，而且能留住美！small>
p>
<p class="card-text"><small class="text-muted">2019-12-16 16:07small>
p>
div>
div>
a>
div>
-
有图横向
<div class="col"> <a href="/denews.html"> <div class="card shadow-sm"> <div class="row row-cols-2 no-gutters"> <div class="col-md-4"> <div class="img_hidden"> <img src="/resources/images/news/1.jpg" class="card-img w-100" alt="..."> div> div> <div class="col-md-8"> <div class="card-body"> <h5 class="card-title">Card titleh5> <p class="card-text">This is a wider card with supporting text below as a naturalwith supporting text below as a naturalwith supporting text below as a natural lead-in to additional content. This content is a little bit longer.p> <p class="card-text"><small class="text-muted">Last updated 3 mins agosmall> p> div> div> div> div> a> <hr> div> -
有图竖向
<div class="card shadow-sm"> <div class="img_hidden"> <img src="/resources/images/news/2.jpg" class="card-img-top" alt="..."> div> <div class="card-body"> <h6 class="card-title">Card titleh6> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. Thtional content. Thtional content. Thtional content. Thtional content. This content is a little bit longer.p> <p class="card-text"><small class="text-muted">Last updated 3 mins agosmall> p> div> div>
回到顶部
-
方
<span class="d-inline-block" tabindex="0" data-toggle="tooltip" data-placement="left" title="回到顶部"> <a id="top" role="button" style="position:fixed;right:15px;bottom:15px" class="vhidden color248"> <svg xmlns="http://www.w3.org/2000/svg" width="3em" height="3em" viewBox="0 0 48 48"> <rect width="48" height="48" rx="4" ry="4" fill="rgb(51, 51, 51)">rect> <path d="M33.57,27.35l-8.52-8.9a1.45,1.45,0,0,0-2.1,0l-8.52,8.9a1.63,1.63,0,0,0,0,2.2,1.45,1.45,0,0,0,2.1,0L24,21.74l7.47,7.81a1.45,1.45,0,0,0,2.1,0A1.63,1.63,0,0,0,33.57,27.35Z" fill="#fff" fill-rule="evenodd">path> svg> a> span> -
圆
<span class="d-inline-block" tabindex="0" data-toggle="tooltip" data-placement="left" title="回到顶部"> <a id="top" role="button" style="position:fixed;right:15px;bottom:15px" class="vhidden color248"> <svg xmlns="http://www.w3.org/2000/svg" width="3em" height="3em" viewBox="0 0 48 48"> <rect width="48" height="48" rx="24" ry="24" fill="rgb(10, 187, 185)">rect> <path d="M33.57,27.35l-8.52-8.9a1.45,1.45,0,0,0-2.1,0l-8.52,8.9a1.63,1.63,0,0,0,0,2.2,1.45,1.45,0,0,0,2.1,0L24,21.74l7.47,7.81a1.45,1.45,0,0,0,2.1,0A1.63,1.63,0,0,0,33.57,27.35Z" fill="#fff" fill-rule="evenodd">path> svg> a> span>
按钮
/**按钮*/
.button {
position: relative;
width: auto;
min-width: 120px;
padding: 10px;
text-align: center;
color: rgba(10, 187, 185, 1)!important;
background: rgb(255, 255, 255) !important;
cursor: pointer;
border: 1px solid rgb(10, 187, 185)!important;
}
.button:after,
.button:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 0;
height: 100%;
background: rgb(255, 255, 255);
color: rgb(238, 238, 238);
z-index: -2;
}
.button:hover {
transition: 0.5s;
z-index: 1;
/* background: transparent; */
color: #fff!important;
background: rgb(10, 187, 185) !important;
}
/* .button:before {
transition: 0.5s;
background: rgb(10, 187, 185) !important;
z-index: -1;
} */
/*按钮移入动画*/
/* .button:hover:after,
.button:hover:before {
width: 100%;
transition: 0.5s;
} */
全屏页面(fullpage)
<link rel="stylesheet" type="text/css" href="fullpage.css" />
<script src="vendors/easings.min.js">script>
<script type="text/javascript" src="vendors/scrolloverflow.min.js">script>
<script type="text/javascript" src="fullpage.js">script>
<div id="fullpage">
<div class="section">Some sectiondiv>
<div class="section">Some sectiondiv>
<div class="section">Some sectiondiv>
<div class="section">Some sectiondiv>
div>
<div class="section">
<div class="slide"> slide 1 div>
<div class="slide"> slide 2 div>
<div class="slide"> slide 3 div>
<div class="slide"> slide 4 div>
div>
var myFullpage = new fullpage('#fullpage', {
//导航
menu: '#menu',
lockAnchors: false,
anchors:['firstPage', 'secondPage'],
navigation: false,
navigationPosition: 'right',
navigationTooltips: ['firstSlide', 'secondSlide'],
showActiveTooltip: false,
slidesNavigation: false,
slidesNavPosition: 'bottom',
//滚动
css3: true,
scrollingSpeed: 700,
autoScrolling: true,
fitToSection: true,
fitToSectionDelay: 1000,
scrollBar: false,
easing: 'easeInOutCubic',
easingcss3: 'ease',
loopBottom: false,
loopTop: false,
loopHorizontal: true,
continuousVertical: false,
continuousHorizontal: false,
scrollHorizontally: false,
interlockedSlides: false,
dragAndMove: false,
offsetSections: false,
resetSliders: false,
fadingEffect: false,
normalScrollElements: '#element1, .element2',
scrollOverflow: false,
scrollOverflowReset: false,
scrollOverflowOptions: null,
touchSensitivity: 15,
bigSectionsDestination: null,
//可访问
keyboardScrolling: true,
animateAnchor: true,
recordHistory: true,
//布局
controlArrows: true,
verticalCentered: true,
sectionsColor : ['#ccc', '#fff'],
paddingTop: '3em',
paddingBottom: '10px',
fixedElements: '#header, .footer',
responsiveWidth: 0,
responsiveHeight: 0,
responsiveSlides: false,
parallax: false,
parallaxOptions: {type: 'reveal', percentage: 62, property: 'translate'},
cards: false,
cardsOptions: {perspective: 100, fadeContent: true, fadeBackground: true},
//自定义选择器
sectionSelector: '.section',
slideSelector: '.slide',
lazyLoading: true,
//事件
onLeave: function(origin, destination, direction){},
afterLoad: function(origin, destination, direction){},
afterRender: function(){},
afterResize: function(width, height){},
afterReBuild: function(){},
afterResponsive: function(isResponsive){},
afterSlideLoad: function(section, origin, destination, direction){},
onSlideLeave: function(section, origin, destination, direction){}
});
轮播图
- 左右
- 下标