<style lang="less" scoped>
@import "../assets/css/main.less";
@import "../assets/css/cssReset.css";
.nav{display: flex;.size(100%,126px);.min-width(1200px); .boxShadow(0px,0px,5px,rgba(0,0,0,.19));}
.nav-left{ flex-grow:1.5}
.nav-left img{.fl(); .size(50px;50px);.circle(25px); margin:35px 24px 41px 41px;}
.nav-left p.name{.fz(14px,18px); color: #444;margin: 42px 0 5px 0;}
.nav-left p.company{.fz(12px,18px); color: #444;}
.nav-middle{flex-grow:3; }
.nav-middle ul{display: flex; width: 690px; margin: 0 auto;}
.nav-middle ul li{.size(138px,126px);.fz(14px);.center(text-x);.box-hover2(); .hover-bg(#fafafa);cursor: pointer;}
.nav-middle ul li img{height: 40px; margin: 32px 0 14px;}
.nav-right{flex-grow:1}
.nav-right ul{display: flex; line-height: 126px; justify-content:flex-end}
.nav-right ul li{width: 60px; text-align: center;}
.nav-right ul li img{cursor: pointer;}
.shortcuts{.size(260px,592px);.circle(6px);background: rgba(255,255,255,.1); .boxShadow(2px,2px,0,rgba(0,0,0,.1));.fixed(); top: 156px;left: 30px; z-index: 50; overflow-y: auto;}
.shortcuts ul{display: flex; flex-wrap: wrap;}
.shortcuts ul li{width: 130px; .fz(14px); text-align: center; margin:20px 0 20px 0;}
.shortcuts ul li a img{margin-bottom: 12px;}
.content{.size(700px,300px);margin: 280px auto 0; }
.imgShow{.fl(); width:232px; height: 268px; position: relative; margin-right: 20px;}
.imgShow img{position: absolute; z-index: 100; left: 0; top:0;}
.msgShow{.fl();padding-top: 55px;}
.msgShow .top{overflow: hidden;margin-bottom: 24px;}
.calender{.fl(); margin-right: 16px; .size(98px,84px); text-align: center; background:url(../assets/img/calender2@2x.png) no-repeat center center;}
.calender .month{.fz(12px,34px);color: #fff;}
.calender .day{.fz(18px,38px);color: #333;}
.description{.fr()}
.description p{.fz(24px,35px,40px);color: #666; }
.description span{color: #E95252;}
.saleBtn{.size(200px,46px); .fz(16px);.bgc(#E95252);color: #fff;.circle(20px);border: none;}
</style>
<template>
<div class="welcomeCont">
<div class="shortcuts">
<ul>
<li @click="goUrl('groupManagement',1)"><img src="../assets/img/icon-bmcx@2x.png"><br/>报名111查询</li>
<li @click="goUrl('platformModule/Test',1)"><img src="../assets/img/icon-bmcx@2x.png"><br/>test</li>
<li><img src="../assets/img/icon-bmcx@2x.png"><br/>报名查询</li>
<li><img src="../assets/img/icon-bmcx@2x.png"><br/>报名查询</li>
<li><img src="../assets/img/icon-bmcx@2x.png"><br/>报名查询</li>
<li><img src="../assets/img/icon-bmcx@2x.png"><br/>报名查询</li>
<li><img src="../assets/img/icon-bmcx@2x.png"><br/>报名查询</li>
</ul>
</div>
<div class="content">
<div class="imgShow">
<img src="../assets/img/img-shuidi.png" />
<canvas id="c"></canvas>
</div>
<div class="msgShow">
<div class="top">
<div class="calender">
<p class="month">4月</p>
<p class="day">第12天</p>
</div>
<div class="description">
<p>销售排名第<span>123</span><img src="../assets/img/icons8-scroll-up-filled-50@2x.png"></p>
<p>你已经<span>3</span>天没有报名</p>
</div>
</div>
<div class="bottom">
<input class="saleBtn" type="button" value="立即启动销售模式" />
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'login-box',
data (){
return{
}
},
mounted(){
this.wave();
},
methods:{
wave(){
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
var range = document.getElementById('r');
//range控件信息
//var rangeValue = range.value;
var rangeValue = 50;
var nowRange = 0; //用于做一个临时的range
//画布属性
var mW = canvas.width = 200;
var mH = canvas.height = 250;
var lineWidth = 2;
//圆属性
var r = mH / 2; //圆心
var cR = r - 16 * lineWidth; //圆半径
//Sin 曲线属性
var sX = 0;
var sY = mH / 2;
var axisLength = mW; //轴长
var waveWidth = 0.025; //波浪宽度,数越小越宽
var waveHeight = 6; //波浪高度,数越大越高
var speed = 0.09; //波浪速度，数越大速度越快
var xOffset = 0; //波浪x偏移量
ctx.lineWidth = lineWidth;
//画圈函数
var IsdrawCircled = false;
var drawCircle = function() {
ctx.beginPath();
ctx.strokeStyle = '#33B87F';
//ctx.arc(r, r, cR + 5, 0, 2 * Math.PI);
ctx.stroke();
ctx.beginPath();
// ctx.arc(r, r, cR, 0, 2 * Math.PI);
//ctx.clip();
}
//画sin 曲线函数
var drawSin = function(xOffset) {
ctx.save();
var points = []; //用于存放绘制Sin曲线的点
ctx.beginPath();
//在整个轴长上取点
for(var x = sX; x < sX + axisLength; x += 20 / axisLength) {
//此处坐标(x,y)的取点，依靠公式 “振幅高*sin(x*振幅宽 + 振幅偏移量)”
var y = -Math.sin((sX + x) * waveWidth + xOffset);
var dY = mH * (1 - nowRange / 100);
points.push([x, dY + y * waveHeight]);
ctx.lineTo(x, dY + y * waveHeight);
}
//封闭路径
ctx.lineTo(axisLength, mH);
ctx.lineTo(sX, mH);
ctx.lineTo(points[0][0], points[0][1]);
ctx.fillStyle = '#37d5a8';
ctx.fill();
ctx.restore();
};
var drawSin1 = function(xOffset) {
var waveWidth = 0.015; //波浪宽度,数越小越宽
var waveHeight = 10; //波浪高度,数越大越高
ctx.save();
var points = []; //用于存放绘制Sin曲线的点
ctx.beginPath();
//在整个轴长上取点
for(var x = sX; x < sX + axisLength; x += 20 / axisLength) {
//此处坐标(x,y)的取点，依靠公式 “振幅高*sin(x*振幅宽 + 振幅偏移量)”
var y = -Math.sin((sX + x) * waveWidth + xOffset);
var dY = mH * (1 - nowRange / 100);
points.push([x, dY + y * waveHeight]);
ctx.lineTo(x, dY + y * waveHeight);
}
//封闭路径
ctx.lineTo(axisLength, mH);
ctx.lineTo(sX, mH);
ctx.lineTo(points[0][0], points[0][1]);
ctx.fillStyle = '#b9f0e1';
ctx.fill();
ctx.restore();
};
//写百分比文本函数
var drawText = function() {
ctx.save();
ctx.font = 24 + 'px Microsoft Yahei';
ctx.textAlign = 'center';
ctx.fillStyle = "rgba(06, 85, 128, 0.8)";
ctx.fillText(~~nowRange + '%', r, r + 50 / 2);
ctx.restore();
};
var render = function() {
ctx.clearRect(0, 0, mW, mH);
//rangeValue = range.value;
rangeValue = 50;
if(IsdrawCircled == false) {
drawCircle();
}
if(nowRange <= rangeValue) {
var tmp = 1;
nowRange += tmp;
}
if(nowRange > rangeValue) {
var tmp = 1;
nowRange -= tmp;
}
drawSin1(xOffset);
drawSin(xOffset);
drawText();
xOffset += speed;
requestAnimationFrame(render);
}
render();
},
goUrl (path,id) {
this.$router.push({ path: "Details",query:{path,id} })
}
}
}
</script>