push.blade.php
4.67 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<style>
.box-card {
width: 400px;
border: 1px solid rgb(220, 223, 230);
border-radius: 40px;
margin-right: 24px;
padding: 37px 20px;
min-height: 679px;
}
.phone-content {
border: 1px solid rgb(220, 223, 230);
height: 625px;
overflow: hidden;
position: relative;
background: rgb(245, 245, 245);
}
.notification-app-name,
.notification-title,
.notification-detail{
position: absolute;
overflow: hidden;
color: #181919;
}
.notification-app-name{
width: 160px;
font-size: 13px;
top: 222px;
left: 92px;
}
.notification-title{
width: 210px;
font-size: 14px;
top: 242px;
left: 67px;
}
.notification-detail{
width: 230px;
font-size: 13px;
top: 265px;
left: 67px;
word-break: break-all;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>
<button type="button" class="btn btn-primary sync"><i class="feather icon-repeat"></i> 预览看效果</button>
<hr>
<div class="box-card">
<div class="phone-content">
<img src="{{asset('storage/images/ios1-2.png')}}" alt="" width="358" height="625" id="bg_img">
<div class="notification-app-name"> 一言-临境 </div>
<div class="notification-title"> Demo 标题 </div>
<div class="notification-detail"> 开发者249d42a097c1944e进行了广播推送，这是一条广播 </div>
</div>
</div>
<script>
Dcat.ready(function () {
var asset = "{{asset('/storage/')}}";
$(document).off('click', '.sync').on('click', '.sync', function () {
let terminal = parseInt($('.terminal:checked').val());
if (terminal === 1) {
$('#bg_img').attr('src', asset + '/images/android-2.png');
$('.notification-app-name').css('top','244px').css('left','80px');
$('.notification-title').css('top','264px').css('left','57px');
$('.notification-detail').css('top','287px').css('left','57px');
}else{
$('#bg_img').attr('src', asset + '/images/ios1-2.png');
$('.notification-app-name').css('top','222px').css('left','92px');
$('.notification-title').css('top','242px').css('left','67px');
$('.notification-detail').css('top','265px').css('left','67px');
}
if ($('.title').val()) {
$('.notification-title').html($('.title').val());
}
if ($('.push_content').val()) {
$('.notification-detail').html($('.push_content').val());
}
// let ori_top = 80;
// let top = parseInt($('.field_top').val()) + ori_top;
// let left = $('.field_left').val();
// let font = $('.field_font_size').val();
// let content_size = 12 + parseInt(font);
// let title_size = 14 + parseInt(font);
// let text_color = $('.text_color').val() || 'whitesmoke';
// let text_bg_color = $('.text_bg_color').val() || '#5c6bc6';
// let opacity = parseInt($('.opacity').val()) / 100;
//
// $('.poem-block').css('top', top + 'px').css('left', left + 'px')
// .css('background-color', text_bg_color).css('opacity', opacity);
// $('.poem-title').css('font-size', title_size + 'px').css('color', text_color);
// $('.poem-content').css('font-size', content_size + 'px').css('color', text_color);
//
//
// let bg_img_url = $('.bg_img_url').find("input[type='hidden'][name='bg_url']").val();
// if (bg_img_url !== '') {
// $('.bg_img').attr('src', asset + '/' + bg_img_url).css('display', 'block');
// }
//
// let bg_video_url = $('.bg_video_url').find("input[type='hidden'][name='bg_url']").val();
// if (bg_video_url !== ''){
// $('#bg_video').attr('src', asset + '/' + bg_video_url).css('display', 'block');
// let bg_video = document.getElementById('bg_video');
// bg_video.autoplay = true;
// bg_video.loop = true;
// }
//
// let bgm_url = $('.bgm_url').find("input[type='hidden'][name='bgm_url']").val();
// if (bgm_url !== ''){
// $('#bg_audio').attr('src', asset + '/' + bgm_url);
// let bg_audio = document.getElementById('bg_audio');
// bg_audio.autoplay = true;
// bg_audio.loop = true;
// }
})
})
</script>