-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
257 lines (255 loc) · 14.9 KB
/
index.html
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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>vue-phone-preview</title>
</head>
<body>
<div id="app">
<div style="margin-left: 50px;">
<h1>测试 vuePhonePreview 组件</h1>
<p>点击IOS使用的是 <span style="color: red">:url= "https://mp.haoxinqing.cn"</span> </p>
<p>点击Android使用的是 <span style="color: red">:content= "简书复制的（侵删）"</span> </p>
</div>
<div class="content">
<div
class="close-open"
v-bind:style="{background:bgcolor}"
@click="isShow=!isShow"
>{{isShow?'关闭预览':'打开预览'}}</div>
<div :class="phoneClass" v-show="isShow">
<iframe
v-show="url"
:src="url"
width="314"
height="556"
scrolling="auto"
allowtransparency="no"
frameborder="0"
style="background: #fff;"
></iframe>
<div v-if="content" v-html="content" class="phone-con"></div>
<div class="content"></div>
<div class="statusbar"></div>
<div class="theme-switch">
<a
:class="{active:index == num}"
v-for="(item,index) in dataInfo"
:key="index"
@click="change(item,index)"
>
<div class="theme-icon">
<div class="logo-apple">
<img :src="item.url" alt />
</div>
<span>{{item.text}}</span>
</div>
</a>
</div>
</div>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
phoneClass: 'phone',
num: 0,
isShow: true,
dataInfo: [
{
url: ('./src/assets/logo-apple.png'),
text: 'IOS'
},
{
url: ('./src/assets/logo-android.png'),
text: 'Android'
}
],
bgcolor: '',
url: '',
content: ''
},
mounted () {
this.url = 'https://mp.haoxinqing.cn'
},
methods: {
change (item, index) {
this.num = index
if (index === 0) {
this.phoneClass = 'phone'
this.url = 'https://mp.haoxinqing.cn'
this.content = ''
} else {
this.phoneClass = 'phone android'
this.url = ''
this.content = `<section data-role="outer" label="Powered by 135editor.com" style="font-size:16px;"><h1 class="_1RuRku" style="box-sizing: border-box; margin-top: 0px; margin-bottom: 0.5em; color: rgb(64, 64, 64); font-weight: bold; text-rendering: optimizelegibility; font-size: 30px; word-break: break-word; font-family: -apple-system, system-ui, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 1.6;">
百度员工月薪32K，有人给20K想挖他走，网友：发流水羞辱他</h1><p><span class="_3tCVn5" style=";box-sizing: border-box; display: inline-flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; color: #EC7259; margin-right: 8px;;box-sizing: border-box;"><em aria-label="ic-diamond" class="anticon" style="box-sizing: border-box; display: inline-block; color: inherit; line-height: 0; text-align: center; vertical-align: -0.125em; text-rendering: optimizelegibility; -webkit-font-smoothing: antialiased; margin-right: 0.5em;"><svg width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="" xml:space="default"><use xlink:href="#ic-diamond">
<svg id="ic-diamond" viewBox="0 0 1026 1024" xml:space="default">
<path d="M751.144277 307.2l-123.016533-238.933333h159.778133a81.92 81.92 0 0 1 59.1872 25.258666l160.256 167.492267A27.306667 27.306667 0 0 1 987.620011 307.2h-236.475734z m270.506667 111.547733L640.927744 946.039467a27.306667 27.306667 0 0 1-48.128-24.234667L766.504277 375.466667h-56.388266l-170.5984 590.165333a27.306667 27.306667 0 0 1-52.462934 0.034133L315.500544 375.466667H259.112277l174.523734 545.5872a27.306667 27.306667 0 0 1-48.128 24.302933L5.160277 418.747733A27.306667 27.306667 0 0 1 27.346944 375.466667H999.464277a27.306667 27.306667 0 0 1 22.152534 43.281066zM18.301611 261.0176L178.557611 93.525333A81.92 81.92 0 0 1 237.744811 68.266667h159.744L274.506411 307.2H38.030677a27.306667 27.306667 0 0 1-19.729066-46.1824zM453.877077 68.266667h117.896534l122.9824 238.933333H330.894677l122.9824-238.933333z"></path></svg></use></svg></em>42</span><time datetime="2019-08-26T23:02:35.000Z" style="box-sizing: border-box; margin-right: 8px;">2019.08.27 07:02:35</time><span style="box-sizing: border-box; margin-right: 8px;">字数 624</span><span style="box-sizing: border-box;">阅读 18759</span></p><p style="color:red;">内容来自简书，图片来自好心情（侵删）</p><img data-original-src="//upload-images.jianshu.io/upload_images/65300-40773c36464b5e6e.png" data-original-width="640" data-original-height="407" data-original-format="image/png" data-original-filesize="99176" class="" data-image-index="0" src="http://file.haoxinqing.cn/group1/M00/11/61/Chw4wFwAlz2AX_iqAABOSgaernE854.jpg" style="box-sizing: border-box; vertical-align: middle; border: 0px; max-width: 100%; width: auto; height: auto; transition: all 0.15s linear 0s; z-index: 95; opacity: 1; cursor: zoom-in;" data-ratio="1"><article class="_2rhmJa" style="box-sizing: border-box; display: block; line-height: 1.8; margin-bottom: 20px; color: rgb(64, 64, 64); font-size: 16px; font-family: -apple-system, system-ui, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;"><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 20px; word-break: break-word;">对于猎头来说只有帮人介绍成功了工作，才可以拿到提成的。不过这帮人介绍工作也得懂得工资差距的，这要是把人介绍工资更低的工作，别人也是不会愿意的。只不过最近就真发生了这样的事情。</p><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 20px; word-break: break-word;">就有一位百度员工表示今天有HR挖他去小公司当CTO，自己可是五年的工作经验了，月薪是32K，然而过去当CTO月薪才是20K。</p><p></p><p>图片发自简书App</p><p><img data-original-src="//upload-images.jianshu.io/upload_images/65300-546e20e37645ef02.png" data-original-width="634" data-original-height="480" data-original-format="image/png" data-original-filesize="103044" class="" data-image-index="1" src="https://upload-images.jianshu.io/upload_images/65300-546e20e37645ef02.png?imageMogr2/auto-orient/strip|imageView2/2/w/634/format/webp" style="box-sizing: border-box; vertical-align: middle; border: 0px; max-width: 100%; width: auto; height: auto; transition: all 0.15s linear 0s; z-index: 95; opacity: 1; cursor: zoom-in;" data-ratio="1"></p><p>图片发自简书App</p><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 20px; word-break: break-word;">看到这个情况相信不少人都会觉得这HR是不靠谱的，可能这位HR就是一名猎头，这业务能力实在太差了，也不看看挖的员工是什么级别，拿多少工资就随便乱来的，这可就是闹出笑话了。</p><p><img data-original-src="//upload-images.jianshu.io/upload_images/65300-e0f98c76a043926a.png" data-original-width="400" data-original-height="250" data-original-format="image/png" data-original-filesize="114974" class="" data-image-index="2" src="https://upload-images.jianshu.io/upload_images/65300-e0f98c76a043926a.png?imageMogr2/auto-orient/strip|imageView2/2/w/400/format/webp" style="box-sizing: border-box; vertical-align: middle; border: 0px; max-width: 100%; width: auto; height: auto; transition: all 0.15s linear 0s; z-index: 95; opacity: 1; cursor: zoom-in;" data-ratio="1"></p><p>图片发自简书App</p><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 20px; word-break: break-word;">就有网友表示发流水羞辱他，虽然这没必要，但是这么做的确是解恨，直接就是发流水给他不要说太多的话，就可以完美打击到他。如果这HR还说CTO更有前途，不要在意工资问题的话，只能够说这HR实在太厚脸皮了。</p><p><img data-original-src="//upload-images.jianshu.io/upload_images/65300-05047201957ee55b.png" data-original-width="400" data-original-height="300" data-original-format="image/png" data-original-filesize="158237" class="" data-image-index="3" src="https://upload-images.jianshu.io/upload_images/65300-05047201957ee55b.png?imageMogr2/auto-orient/strip|imageView2/2/w/400/format/webp" style="box-sizing: border-box; vertical-align: middle; border: 0px; max-width: 100%; width: auto; height: auto; transition: all 0.15s linear 0s; z-index: 95; opacity: 1; cursor: zoom-in;" data-ratio="1"></p><p>图片发自简书App</p><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 20px; word-break: break-word;">说实话现在很多小公司都喜欢招一些应届生来当HR，而这些HR专业性还是欠缺，阅历还是太少了。他们的工资也就是四五千左右，会觉得月薪2万就是非常高的收入了，自然就敢跑去挖一些大公司的员工了。</p><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 20px; word-break: break-word;">在他们看来月薪两万，而且还是一个CTO的岗位，这可是属于高层了，肯定会有大把人愿意来干的。只不过这些新手HR却不知道大公司员工的待遇，还是没有见过太多的世面，真不知道普通员工就月薪三四万的。</p><p><img data-original-src="//upload-images.jianshu.io/upload_images/65300-dbcc1304ea477b7c.png" data-original-width="485" data-original-height="321" data-original-format="image/png" data-original-filesize="204416" class="" data-image-index="4" src="https://upload-images.jianshu.io/upload_images/65300-dbcc1304ea477b7c.png?imageMogr2/auto-orient/strip|imageView2/2/w/485/format/webp" style="box-sizing: border-box; vertical-align: middle; border: 0px; max-width: 100%; width: auto; height: auto; transition: all 0.15s linear 0s; z-index: 95; opacity: 1; cursor: zoom-in;" data-ratio="1"></p><p>图片发自简书App</p><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 20px; word-break: break-word;">所以如果这位HR只是一个小姑娘或者是刚毕业的大学生，也别怪他们，因为她们没见过太多的世面，自然对于各职业的薪资水平还不太了解的。</p><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 20px; word-break: break-word;">只不过这也提醒着这位HR,是需要多去充电学习一下专业知识了，不然下一次还会闹出笑话的。而充电的话，这些职场书籍都是需要了解的。</p></article><p><br></p></section>`
}
}
}
})
</script>
<style>
content {
height: 100%;
overflow-y: scroll;
}
.close-open {
position: fixed;
right: calc(5% + 370px);
top: 40%;
background: #000;
color: #fff;
font-size: 12px;
padding: 5px 10px;
border-radius: 5px 0px 0px 5px;
cursor: pointer;
z-index: 9999;
}
.active {
opacity: 1 !important;
}
.phone {
position: fixed;
background: #111;
border-radius: 55px;
box-shadow: 0px 0px 0px 2px #aaa;
top: 8%;
right: 5%;
width: 320px;
padding: 80px 25px;
text-align: justify;
z-index: 9999;
}
.phone-con {
overflow: hidden;
height: 568px;
background: #fff;
word-wrap: break-word;
word-break: break-all;
overflow-y: scroll;
padding: 25px 15px;
}
.phone > .phone-con > img {
display: block;
height: 100%;
width: calc(320px - 40px);
margin: 6px;
}
.phone > iframe {
padding-top: 20px;
}
.phone > .statusbar {
position: absolute;
width: 320px;
height: 20px;
background-image: url('./src/assets/status-bar.png');
left: 50%;
margin-left: -160px;
top: 80px;
-webkit-background-size: 100% auto;
background-size: 100% auto;
}
.theme-switch {
position: absolute;
right: 100%;
margin-right: 2px;
top: 70px;
white-space: nowrap;
}
.theme-switch > a {
text-align: center;
text-decoration: none;
color: #fff;
padding: 5px 10px;
border-radius: 5px 0 0 5px;
display: block;
font-size: 12px;
transition: 200ms;
opacity: 0.5;
background: rgba(0, 0, 0, 1);
position: relative;
margin-bottom: 20px;
}
.theme-icon {
transition: 100ms;
}
.logo-apple {
width: 30px;
height: 30px;
margin: 5px auto;
}
.theme-icon > .logo-apple > img {
width: 100%;
height: 100%;
}
.theme-icon > span {
display: block;
}
header .phone:before {
content: '';
width: 60px;
height: 10px;
border-radius: 10px;
position: absolute;
left: 50%;
margin-left: -30px;
background: #333;
top: 50px;
}
.phone:after {
content: '';
position: absolute;
width: 60px;
height: 60px;
left: 50%;
margin-left: -30px;
bottom: 10px;
border-radius: 100%;
box-sizing: border-box;
border: 5px solid #333;
}
/* // android */
.android {
border-radius: 20px;
width: 330px;
padding: 60px 20px;
height: 600px;
margin-top: 9px;
}
.android > iframe {
padding-top: 27px;
}
.android > .phone-con {
height: 520px;
}
.android > .phone-con > img {
width: calc(320px - 30px) !important;
}
.android > .statusbar {
background-image: url('./src/assets/status-bar-android.png');
width: 330px;
height: 25px;
margin-left: -165px;
top: 60px;
}
.android:after {
content: '';
width: 8px;
height: 8px;
border-radius: 50%;
position: absolute;
left: 50px;
background: #444;
top: 30px;
margin-left: 0;
}
</style>
</html>