113 lines
3.5 KiB
Vue
113 lines
3.5 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>
|
|
<imageEmpty :propImageSrc="form.button_img[0]" class="img" :propTypeStyle="color" propImgFit="aspectFill" propErrorStyle="width: 60rpx;height: 60rpx;"></imageEmpty>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
const app = getApp();
|
|
import { isEmpty } from '@/common/js/common/common.js';
|
|
import imageEmpty from '@/components/diy/modules/image-empty.vue';
|
|
export default {
|
|
components: {
|
|
imageEmpty,
|
|
},
|
|
props: {
|
|
propValue: {
|
|
type: Object,
|
|
default: () => {
|
|
return {};
|
|
},
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
form: {},
|
|
new_style: {},
|
|
style: '',
|
|
color: '',
|
|
};
|
|
},
|
|
created() {
|
|
this.setData({
|
|
form: this.propValue.content,
|
|
new_style: this.propValue.style,
|
|
});
|
|
this.init();
|
|
},
|
|
methods: {
|
|
init() {
|
|
const { float_style, float_style_color, display_location, offset_number } = this.propValue.style;
|
|
let location = `right: 20rpx;`;
|
|
if (display_location == 'left') {
|
|
location = `left: 20rpx;`;
|
|
}
|
|
const { windowHeight } = uni.getSystemInfoSync();
|
|
this.setData({
|
|
color: float_style == 'shadow' ? `box-shadow: 0 10rpx 40rpx ${float_style_color};border-radius: 50%;` : `background-color: ${float_style_color};border-radius: 50%;`,
|
|
style: `bottom: ${((offset_number / windowHeight) * 100).toFixed(4) + '%'};` + location,
|
|
});
|
|
},
|
|
url_open() {
|
|
const { button_jump, button_link } = this.form;
|
|
if (button_jump == 'link' && !isEmpty(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>
|