103 lines
2.7 KiB
Vue
103 lines
2.7 KiB
Vue
<template>
|
|
<view v-if="form.button_img.length > 0" class="pa" :style="style">
|
|
<view class="flex-row align-c jc-c" @click="url_open">
|
|
<view class="spread flex-row align-c jc-c">
|
|
<block v-if="new_style.float_style == 'diffuse'">
|
|
<view class="ring" :style="color"></view>
|
|
<view class="ring" :style="color"></view>
|
|
</block>
|
|
<image :src="form.button_img[0].url" class="img" :style="color" fit="cover"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
const app = getApp();
|
|
import { is_obj_empty } from '../../common/js/common/common';
|
|
export default {
|
|
props: {
|
|
value: {
|
|
type: Object,
|
|
default: () => {
|
|
return {};
|
|
},
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
form: {},
|
|
new_style: {},
|
|
style: '',
|
|
color: ''
|
|
};
|
|
},
|
|
created() {
|
|
this.form = this.value.content;
|
|
this.new_style = this.value.style;
|
|
const { float_style, float_style_color, display_location, offset_number } = this.value.style;
|
|
this.color = float_style == 'shadow' ? `box-shadow: 0 10rpx 40rpx ${ float_style_color }` : `background-color: ${ float_style_color }`;
|
|
let location = `right: 20rpx;`;
|
|
if (display_location == 'left') {
|
|
location = `left: 20rpx;`;
|
|
}
|
|
const { windowHeight } = uni.getSystemInfoSync();
|
|
this.style = `bottom: ${((offset_number / windowHeight) * 100).toFixed(4) + '%'};` + location;
|
|
|
|
},
|
|
methods: {
|
|
url_open() {
|
|
const { button_jump, button_link} = this.form;
|
|
if (button_jump == 'link' && !is_obj_empty(button_link)) {
|
|
app.globalData.url_open(button_link.page)
|
|
} else {
|
|
console.log('客服');
|
|
}
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.img {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
border-radius: 50%;
|
|
}
|
|
/**
|
|
* 呼吸灯
|
|
*/
|
|
.spread {
|
|
position: relative;
|
|
z-index: 1;
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
border-radius: 50%;
|
|
}
|
|
.spread .ring {
|
|
/* 速度为1.5 * 层数 = 实际运行速度，速度修改则 animation-delay 属性也修改相同速度 */
|
|
animation: pulsing 1.5s ease-out infinite;
|
|
border-radius: 100%;
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
position: absolute;
|
|
}
|
|
/* 速度为1*层数 */
|
|
.spread .ring:nth-of-type(1) {
|
|
-webkit-animation-delay: -1.5s;
|
|
animation-delay: -1.5s;
|
|
}
|
|
|
|
/* 速度为1*层数 */
|
|
.spread .ring:nth-of-type(2) {
|
|
-webkit-animation-delay: -2s;
|
|
animation-delay: -2s;
|
|
}
|
|
@keyframes pulsing {
|
|
100% {
|
|
transform: scale(1.35);
|
|
opacity: 0
|
|
}
|
|
}
|
|
</style>
|