<template>
<view class="page-content">
<!-- js生成原生canvas -->
<view class="loading" v-if="is_loading">
<view class="spinner">
<view class="rect1"></view>
<view class="rect2"></view>
<view class="rect3"></view>
<view class="rect4"></view>
<view class="rect5"></view>
</view>
</view>
<view class="page-info" :style="'background: url('+dataInfo[0].cover+');'" v-else>
<div id="message"></div>
<view class="censtop">
<image :src="dataInfo[1].cover" mode="widthFix" class="title-img"></image>
<view class="content-meet">
<image @click="toUrl(dataInfo[2].link)" :src="dataInfo[2].cover+'?x-oss-process=image/format,webp'"
mode="widthFix" class="content-img">
</image>
<image @click="toUrl(dataInfo[3].link)" :src="dataInfo[3].cover+'?x-oss-process=image/format,webp'"
mode="widthFix" class="content-img">
</image>
<image @click="toUrl(dataInfo[4].link)" :src="dataInfo[4].cover+'?x-oss-process=image/format,webp'"
mode="widthFix" class="content-img">
</image>
<image @click="toUrl(dataInfo[5].link)" :src="dataInfo[5].cover+'?x-oss-process=image/format,webp'"
mode="widthFix" class="content-img">
</image>
<image @click="toUrl(dataInfo[6].link)" :src="dataInfo[6].cover+'?x-oss-process=image/format,webp'"
mode="widthFix" class="content-img">
</image>
<image @click="toUrl(dataInfo[7].link)" :src="dataInfo[7].cover+'?x-oss-process=image/format,webp'"
mode="widthFix" class="content-img">
</image>
</view>
<view class="footer">
<image @click="toUrl(dataInfo[8].link)" :src="dataInfo[8].cover+'?x-oss-process=image/format,webp'"
mode="widthFix" class="footer-img">
</image>
</view>
<view class="footer" style="padding-bottom: 100rpx;">
<image :src="dataInfo[9].cover+'?x-oss-process=image/format,webp'" mode="widthFix"
class="footer-img">
</image>
</view>
</view>
</view>
<view class="to-top" v-if="showToTop" @click="toTop">
<view class="iconfont">

</view>
</view>
</view>
</template>
<script>
var _hmt = _hmt || [];
(function() {
// var video1 = document.createElement("script");
// video1.src = "https://yunxc.test.yun-live.com/js/liszi1.js";
// var s1 = document.getElementsByTagName("script")[0];
// s1.parentNode.insertBefore(video1, s1);
})();
var liveCountTimes = setInterval(() => {
(function() {
var str = '<canvas id="canvas"></canvas>';
document.getElementById("message").insertAdjacentHTML('beforeend', str);
var canvas = document.getElementById('canvas');
if (!canvas || !canvas.getContext) {
return false;
}
/********************
Random Number
********************/
function rand(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
/********************
Var
********************/
// canvas
var ctx = canvas.getContext('2d');
var X = canvas.width = window.innerWidth;
var Y = canvas.height = window.innerHeight;
var mouseX = X / 2;
var mouseY = Y / 2;
/********************
Animation
********************/
window.requestAnimationFrame =
window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(cb) {
setTimeout(cb, 17);
};
/********************
Moon
********************/
var moonNum = 1;
var moons = [];
var radius = X / 2;
if (X < 768) {
radius = X / 2;
}
function Moon(ctx, x, y) {
this.ctx = ctx;
this.init(x, y);
}
Moon.prototype.init = function(x, y) {
this.x = x;
this.y = y;
this.c = '255, 255, 255';
this.r = radius;
};
Moon.prototype.resize = function() {
this.x = X / 2;
this.y = Y / 2;
this.r = radius;
};
Moon.prototype.render = function() {
this.draw();
};
Moon.prototype.draw = function() {
ctx.save();
ctx.beginPath();
ctx.globalAlpha = 0.8;
var col = this.c;
var g = ctx.createRadialGradient(this.x, this.y, this.r, X / 2 - this.r, Y / 2, 0);
g.addColorStop(0, "rgba(" + col + ", " + (1 * 1) + ")");
g.addColorStop(0.5, "rgba(" + col + ", " + (1 * 0.2) + ")");
g.addColorStop(1, "rgba(" + col + ", " + (1 * 0) + ")");
ctx.fillStyle = g;
// ctx.arc(this.x, this.y, this.r, Math.PI * 2, false);
ctx.fill();
ctx.restore();
};
for (var i = 0; i < moonNum; i++) {
var moon = new Moon(ctx, 0, 0);
moons.push(moon);
}
/********************
Particle
********************/
var particleNum = 6; //数量
var particles = [];
var maxParticles = 1;
var colors = ['rgb(241, 251, 240)', 'rgb(244, 250, 241)', 'rgb(238, 250, 242)',
'rgb(243, 249, 250)'
];
if (X < 768) {
particleNum = 6;
}
function Particle(ctx, x, y, r) {
this.ctx = ctx;
this.init(x, y, r);
}
Particle.prototype.init = function(x, y, r) {
this.x = x;
this.y = y;
this.r = r;
this.s = 0.1;
this.ga = rand(0, 1) + 0.1;
this.v = {
x: 0,
y: 0
};
/*
this.c = {
r: rand(0, 255),
g: rand(0, 255),
b: rand(0, 255)
};
*/
this.c = colors[rand(0, colors.length - 1)];
};
Particle.prototype.closest = function(i) {
var x = this.x - mouseX;
var y = this.y - mouseY;
var d = x * x + y * y;
var newDist = Math.sqrt(d);
this.v.x = x / newDist * (1 + this.s);
this.v.y = y / newDist * (1 + this.s);
this.r += 0.05;
this.x += this.v.x;
this.y += this.v.y;
if (Math.abs(this.x - mouseX) < 10 && Math.abs(this.y - mouseY) < 10) {
this.x = rand(0, X);
this.y = rand(0, Y);
this.s = 0.1;
this.r = 1;
}
if (this.x < 0 || this.x > X) {
this.x = rand(0, X);
this.s = 0.1;
this.r = 1;
}
if (this.y < 0 || this.y > Y) {
this.y = rand(0, Y);
this.s = 0.1;
this.r = 1;
}
};
Particle.prototype.updateParams = function() {
this.s += 0.05;
};
Particle.prototype.resize = function() {
this.x = rand(0, X);
this.y = rand(0, Y);
};
Particle.prototype.draw = function() {
var ctx = this.ctx;
ctx.save();
ctx.beginPath();
ctx.globalAlpha = this.ga;
ctx.fillStyle = this.c;
ctx.globalCompositeOperation = 'lighter';
//ctx.fillStyle = 'rgb(' + this.c.r + ', ' + this.c.g + ', ' + this.c.b + ')';
ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);
ctx.fill();
ctx.restore();
};
Particle.prototype.render = function(i) {
this.closest(i);
this.updateParams();
this.draw();
};
for (var i = 0; i < particleNum; i++) {
var particle = new Particle(ctx, rand(0, X), rand(0, Y), 1);
particles.push(particle);
}
/********************
Text
********************/
var text = 'Please holding down the mouse.';
function drawText() {
ctx.save();
ctx.fillStyle = 'rgb(0, 137, 190)';
ctx.font = '16px "sans-serif"';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
// ctx.fillText(text, X / 2, Y / 2);
}
/********************
Render
********************/
function render() {
ctx.clearRect(0, 0, X, Y);
moons[0].render();
drawText();
for (var i = 0; i < particles.length; i++) {
particles[i].render(i);
}
requestAnimationFrame(render);
}
render();
/********************
Event
********************/
function onResize() {
X = canvas.width = window.innerWidth;
Y = canvas.height = window.innerHeight;
moons[0].render();
for (var i = 0; i < particles.length; i++) {
particles[i].resize();
}
}
window.addEventListener('resize', function() {
onResize();
});
var clearId;
// 点击事件
// window.addEventListener('mousedown', function() {
// clearId = setInterval(function() {
// for (var i = 0; i < particles.length; i++) {
// particles[i].s += 1;
// particles[i].r += 2;
// }
// text = 'Warp';
// moons[0].r += 0.5;
// }, 20);
// });
// window.addEventListener('mouseup', function() {
// clearInterval(clearId);
// text = 'Please holding down the mouse.';
// });
// window.addEventListener('mousemove', function(e) {
// mouseX = e.clientX;
// mouseY = e.clientY;
// });
// window.addEventListener('touchstart', function(e) {
// var touch = event.targetTouches[0];
// mouseX = touch.pageX;
// mouseY = touch.pageY;
// clearId = setInterval(function() {
// for (var i = 0; i < particles.length; i++) {
// particles[i].s += 1;
// particles[i].r += 3;
// }
// text = 'Warp';
// moons[0].r += 0.5;
// }, 20);
// }, false);
// window.addEventListener('touchend', function(e) {
// clearInterval(clearId);
// text = '';
// });
})();
clearInterval(liveCountTimes)
}, 800)
import store from '@/store';
export default {
data() {
return {
meeting_id: '3080',
dataInfo: [],
uid: '',
is_loading: false,
showToTop: false,
windowH: 0,
objBase: {}
}
},
onLoad() {
this.is_loading = true
this.uid = uni.getStorageSync('uid')
this.getInfo()
},
onPageScroll(e) {
if (e.scrollTop >= this.windowH) {
this.showToTop = true;
} else {
this.showToTop = false;
}
},
methods: {
// 获取数据
getInfo() {
const that = this;
uni.request({
url: 'https://www.yun-live.com/api/getExperienceWeek?uid=' + this.uid + '&meeting_id=' + this
.meeting_id,
success: (res) => {
uni.setNavigationBarTitle({
title: res.data.data.title
})
this.objBase = res.data.data.base
// #ifdef H5
var vlink = window.location.href; //分享链接
var vstatus = 1; //标识为分享
var vtitle = this.objBase.title ? this.objBase.title : '云现场_会议融媒体中心'; //标题
var vdesc = this.objBase.wechat_info ? this.objBase.wechat_info :
'云现场提供一站式会议活动宣传解决方案,集云速记、图文直播、照片直播、视频直播于一身,拥有全国一线的媒体资源和宣发渠道,媒体+工具双重属性,打造会议新场景,现已覆盖全国100+个城市'; //简介
var vimgUrl = this.objBase.wechat_cover ? this.objBase.wechat_cover :
'https://www.yun-live.com/images/live_default_cover.png'; //分享图片
store.wxcall(vstatus, vtitle, vdesc, vimgUrl, vlink); //微信分享 //
// #endif
this.is_loading = false
this.dataInfo = res.data.data.videoupright
console.log(this.dataInfo)
uni.getSystemInfo({
success: function(res) {
that.windowH = res.windowHeight
}
});
}
})
},
toUrl(url) {
if (url) {
window.location.href = url
} else {
uni.showToast({
title: '敬请期待!',
duration: 2000,
icon: 'none'
});
}
},
toTop() {
uni.pageScrollTo({
scrollTop: 0
})
},
}
}
</script>
<style lang="scss">
a {
color: #FFF;
text-decoration: none;
}
h1 {
font-size: 1.6rem;
}
p {
padding: 0.8rem 0;
font-size: 0.8rem;
}
header#header {
position: absolute;
top: 0;
left: 0;
padding: 1.6rem;
}
/********************
Contents
********************/
canvas#canvas {
background: #000;
}
body {
background-color: #2057A2;
}
.censtop {
position: absolute;
top: 0px;
// width: 100%;
z-index: 99;
max-width: 750px;
}
.to-top {
position: fixed;
bottom: 178rpx;
right: 24rpx;
width: 88rpx;
height: 88rpx;
line-height: 88rpx;
background: #FFFFFF;
border: 3rpx solid rgba(152, 159, 179, 0.5);
border-radius: 50%;
overflow: hidden;
text-align: center;
z-index: 9999;
color: #10347E;
.iconfont {
font-size: 50rpx !important;
}
}
.page-info {
width: 100%;
max-width: 750px;
min-height: 110vh;
background-color: #10347E;
margin: 0 auto;
// background-image: url(https://s.yun-live.com/images/20211220/a2c12f5e36d3b38e54b8bf7926d8eaf2.png);
background-position: center;
background-size: 100% 100%;
.header-img {
width: 100%;
// margin: 86rpx 40rpx 60rpx;
}
.title-img {
width: 661rpx;
display: block;
margin: 0 auto;
}
.content-meet {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
padding: 0 40rpx;
.content-img {
width: 215rpx;
margin-top: 10rpx;
}
}
.footer {
text-align: center;
padding: 0 40rpx;
margin-top: 30rpx;
.footer-img {
width: 100%;
margin-top: 15rpx;
}
}
}
@media screen and (min-width:750px) {
.page-info {
.header-img {
width: 661px;
margin: 86px 40px 60px;
}
.page-info {
max-width: 750px;
min-height: 156vh;
}
.title-img {
width: 661px;
display: block;
margin: 0 auto;
}
.content-meet {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
padding: 0 30px;
.content-img {
width: 220px;
margin-top: 20px;
}
}
.footer {
text-align: center;
padding: 0 30px;
background-image: url(https://s.yun-live.com/images/20220323/7cbd60a81d7157544256a3b996fffd31.png);
background-position: center;
background-size: 100% 100%;
margin-top: 0rpx;
.footer-img {
width: 100%;
margin-top: 20px;
}
}
}
}
</style>
uniapp--动态背景特效1
最新推荐文章于 2024-05-19 00:00:22 发布