下面是我的代码 npm已经安装了jquery 可是我不太会用jquey 试了一下没有水波纹效果 这是为什么？
<template>
<div class="index">
<img style="width:700px;height:108px" src="http://yueda-file.oss-cn-shenzhen.aliyuncs.com/457faaf4308b3c9c361e6b1f04fadfb0.png">
<div class="content">
<input placeholder="请输入用户名" class="ipt1" type="text">
<input placeholder="请输入密码" class="ipt2" type="text">
<div class="remember">
<div>
<input id="food_c" type="checkbox" name="food">
<label for="food_c">记住密码</label>
</div>
<div style="border-bottom:1px solid white">
忘记密码?
</div>
</div>
<div class="login1">
</div>
<div class="login2">
</div>
</div>
</div>
</template>
<script>
import $ from 'jquery'
import ripples from '../../static/jquery.ripples.js'
export default {
name: 'Index',
data () {
return {
}
},
mounted(){
$(document).ready(function() {
try {
$('body').ripples({
resolution: 512,
dropRadius: 20,
perturbance: 0.04,
});
$('main').ripples({
resolution: 128,
dropRadius: 10, //px
perturbance: 0.04,
});
}
catch (e) {
$('.error').show().text(e);
}
$('.disable').show().on('click', function() {
$('body, main').ripples('destroy');
$(this).hide();
});
});
}
}
</script>
<style scoped>
.index{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-size: cover;
background-image: url(https://www.11-bian.com/tmpImg/7075a4390da44c2ab84a1a2dcbce3631.jpg);
height: 100vh;
width: 100%;
}
.content{
width: 736px;
height: 530px;
background-image: url(https://www.11-bian.com/tmpImg/df7c5aa79b9e5dd34a806843be40896a.png);
background-size: cover;
display: flex;
flex-direction: column;
align-items: center;
}
.ipt1{
margin-top: 150px;
width: 432px;
height: 32px;
border: 0;
outline: none;
padding-left: 4px;
box-sizing: border-box;
border-radius: 2px
}
.ipt1:focus {
outline:none;
border: 1px solid #3679DD;
}
.ipt2{
margin-top: 20px;
width: 432px;
height: 32px;
border: 0;
outline: none;
padding-left: 4px;
box-sizing: border-box;
border-radius: 2px
}
.ipt2:focus {
outline:none;
border: 1px solid #3679DD;
}
.remember{
display: flex;
justify-content: space-between;
width: 432px;
margin-top: 20px
}
</style>
下面是这个页面的原代码 源文件在这里 源文件 提取码u666
<!DOCTYPE html>
<html>
<head>
<title>水波纹</title>
<style>
* { margin: 0; padding: 0; }
html {
height: 100%;
}
body {
color: #fff;
font-size: 16px;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
background-image: url(img/bg2.jpg);
background-size: cover;
height: 100%;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
main {
display: inline-block;
vertical-align: middle;
width: 700px;
height: 480px;
background-color: rgba(0,0,0,0.8);
text-shadow: 0 1px 2px rgba(0,0,0,0.5);
box-shadow: 0 5px 15px rgba(0,0,0,0.5);
padding: 30px 30px;
box-sizing: border-box;
}
.content{
width: 736px;
height: 530px;
background-image: url(https://www.11-bian.com/tmpImg/df7c5aa79b9e5dd34a806843be40896a.png);
background-size: cover;
display: flex;
flex-direction: column;
align-items: center;
}
.ipt1{
margin-top: 150px;
width: 432px;
height: 32px;
border: 0;
outline: none;
padding-left: 4px;
box-sizing: border-box;
border-radius: 2px
}
.ipt1:focus {
outline:none;
border: 1px solid #3679DD;
}
.ipt2{
margin-top: 20px;
width: 432px;
height: 32px;
border: 0;
outline: none;
padding-left: 4px;
box-sizing: border-box;
border-radius: 2px
}
.ipt2:focus {
outline:none;
border: 1px solid #3679DD;
}
.remember{
display: flex;
justify-content: space-between;
width: 432px;
margin-top: 10px;
}
.login1{
margin-top: 40px;
width: 432px;
height: 46px;
background-color: #3679DD;
display: flex;
align-items: center;
justify-content: center;
background-image: url(https://www.11-bian.com/tmpImg/2b80e0ca010f38a38153ae65b634497f.png);
background-size: cover;
}
.login2{
margin-top: 20px;
width: 432px;
height: 46px;
display: flex;
background-image: url(https://www.11-bian.com/tmpImg/a296f8d340cd4e30d920994e25ed3102.png);
background-size: cover;
}
</style>
</head>
<body>
<img style="width:700px;height:108px" src="http://yueda-file.oss-cn-shenzhen.aliyuncs.com/457faaf4308b3c9c361e6b1f04fadfb0.png">
<div class="content">
<input placeholder="请输入用户名" class="ipt1" type="text">
<input placeholder="请输入密码" class="ipt2" type="text">
<div class="remember">
<div>
<input id="food_c" type="checkbox" name="food">
<label for="food_c">记住密码</label>
</div>
<div style="border-bottom:1px solid white">
忘记密码?
</div>
</div>
<div class="login1">
</div>
<div class="login2">
</div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.ripples.js"></script>
<script type="text/javascript">
$(document).ready(function() {
try {
$('body').ripples({
resolution: 512,
dropRadius: 20, //px
perturbance: 0.04,
});
$('main').ripples({
resolution: 128,
dropRadius: 10, //px
perturbance: 0.04,
});
}
catch (e) {
$('.error').show().text(e);
}
$('.disable').show().on('click', function() {
$('body, main').ripples('destroy');
$(this).hide();
});
});
</script>
</body>
</html>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
