响应式布局

This commit is contained in:
fan 2020-08-31 15:31:15 +08:00
parent 71e4a8862b
commit 972d5a33bb
2 changed files with 69 additions and 6 deletions

View File

@ -11,7 +11,7 @@
<img class="logo" :src="logoImg" :style="{width: logoWidth}">
<span>{{ loginTitle==='空串'?'':loginTitle }}</span>
</div>
<div v-if="project === 'drts' && !gameOver" style="position: absolute; top: 10%;font-size: 50px;color:#F00;text-align: center;">
<div v-if="project === 'drts' && !gameOver" class="drts_title">
<div style="display: inline-block;">距离2020年新誉杯全国城市轨道交通行业职业技能竞赛还剩</div>
<div class="countdown_box">{{ days[0] }}</div>
<div class="countdown_box">{{ days[1] }}</div>
@ -111,9 +111,9 @@
</div>
<float-part v-if="isProject && !versionBaseNoShow.includes(project)" />
<div v-if="!mainBodyNoShow.includes(project)" style="position: absolute; bottom: 10px;right: 20px; font-size: 14px;"><span>主体北京玖琏科技有限公司 备案号京ICP备18028522号</span></div>
<div v-if="project === 'drts'" style="position: absolute; bottom: 200px;text-align: center; font-size: 32px;color:#F00;">
<div v-if="project === 'drts'" class="drts_explain">
<div>郑重承诺满足用户的一切技术需求新地图上线三周新需求两周完成新BUG两天修复</div>
<div style="width: 300px;font-size: 28px;justify-content:space-between;display: flex;margin:0 auto;margin-top: 30px;">
<div style="width: 300px;justify-content:space-between;display: flex;margin:0 auto;margin-top: 30px;">
<div style="display: inline-block;">备战国赛</div>
<div style="display: inline-block;">免费使用</div>
</div>
@ -592,7 +592,68 @@ export default {
<style rel="stylesheet/scss" lang="scss">
$bg:#fff;
$light_gray:#eee;
.drts_title{
position: absolute;
top: 10%;
color:#F00;
text-align: center;
}
.drts_explain {
position: absolute;
text-align: center;
font-size: 32px;
color:#F00;
}
@media screen and (max-width:960px){
.drts_title{
font-size: 30px;
}
.drts_explain{
font-size: 18px;
}
}
@media screen and (min-width:960px) and (max-width:1260px){
.drts_title{
font-size: 36px;
}
.drts_explain{
font-size: 20px;
}
}
@media screen and (min-width:1260px) and (max-width:1440px){
.drts_title{
font-size: 42px;
}
.drts_explain{
font-size: 24px;
}
}
@media screen and (min-width:1440px) and (max-width:1600px){
.drts_title{
font-size: 46px;
}
.drts_explain{
font-size: 28px;
}
}
@media screen and (min-width:1600px){
.drts_title{
font-size: 50px;
}
.drts_explain{
font-size: 32px;
}
}
@media screen and (max-height:900px){
.drts_explain{
bottom: 140px;
}
}
@media screen and (min-height:900px){
.drts_explain{
bottom: 200px;
}
}
.login-container {
background: #E4EAEA;
.el-form-item{
@ -793,7 +854,6 @@ export default {
margin: 5px 0;
display: block;
}
.sub-title {
font-size: 16px;
text-align: center;

View File

@ -158,7 +158,10 @@ export default {
device = this.getDeviceByEm(em);
}
if (device) {
this.selected = device = this.getSelectedByLineCode(device);
device = this.getSelectedByLineCode(device);
// console.log((new Date()).valueOf(), '4', device);
this.selected = device;
// console.log((new Date()).valueOf(), '5');
if (device) {
if (!this.buttonOperation) {
this.$store.dispatch('menuOperation/setSelected', {device: device, subType: em.subType});