vue-cli-plugin-weex
Version:
weex plugin for vue-cli
104 lines (100 loc) • 2.7 kB
CSS
html,body {width:100%;height:100%;margin:0;padding:0;}
body { display: flex; flex-direction: column; }
.center { display: flex; align-items: center; justify-content: center; }
#preview { width: 750px; height: 1250px; transform: scale(0.4); transform-origin: top left; }
.mock-phone { position: relative; width: 320px; min-width: 320px; height: 625px; border: 2px solid #0088fb; border-radius: 30px; }
.mock-phone .inner { position: absolute; top: 50px; z-index: 26; left: 10px; width: 300px; height: 500px; border: 1px solid #0088fb; overflow: hidden; }
.mock-phone .inner iframe { width: 100%; height: 100%; margin: 0; }
.mock-phone .camera { position: absolute; width: 10px; height: 10px; border-radius: 10px; background: #afddff; border: 1px solid #0088fb; top: 20px; left: 96px; }
.mock-phone .earpiece { position: absolute; width: 70px; height: 8px; border-radius: 8px; background: #afddff; border: 1px solid #0088fb; top: 20px; left: 120px; }
.mock-phone .home-btn { position: absolute; width: 50px; height: 50px; border-radius: 50px; background: #afddff; border: 1px solid #0088fb; bottom: 10px; left: 50%; margin-left: -25px; }
.header {
height: 100px;
flex-grow: 0;
}
.content {
display: flex;
flex-grow: 1;
flex-direction: row;
}
.main {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 55%;
min-width: 750px;
max-width: 800px;
}
.main .qrcode-box {
width: 400px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: stretch;
}
.qrcode > img {
display: block;
width: 250px;
height: 250px;
margin: 0 auto;
}
.qrcode-tips {
text-align: center;
margin-top: 20px;
}
.qrcode-tips a, .qrcode-tips a:link {
color: #00B4FF;
text-decoration: none;
}
.qrcode-tips a:hover, .qrcode-tips a:active {
color: #238FFF;
}
.web-page-link {
opacity: 0;
cursor: pointer;
z-index: 999;
display: block;
right: 10px;
top: 10px;
width: 30px;
height: 30px;
font-size: 14px;
border-radius: 50%;
background: #f5f5f5;
border: 1px solid #ddd;
transition: all .2s ease;
position: absolute;
}
.web-page-link svg {
margin: 5px;
opacity: .5;
}
.inner:hover .web-page-link{
opacity: 1;
transition: all .2s ease;
}
.pages-box {
max-height: 330px;
overflow-y: auto;
}
.pages-box .page-item{
display: inline-block;
padding: 5px 8px;
text-decoration: none;
font-size: 14px;
border-radius: 5px;
margin: 10px 5px;
color:#717171;
border:1px solid #ddd;
transition: all .2s ease;
}
.pages-box .page-item:hover{
border-color:#0088fb;
background: #0088fb;
color:#fff;
}
.pages-box .page-item.active {
border-color:#0088fb;
background: #0088fb;
color:#fff;
}