mirror of
https://github.com/kuaifan/dootask.git
synced 2025-12-12 11:19:56 +00:00
mod:修改首页内容部分图片自适应
This commit is contained in:
623585344@qq.com
parent
f33be18be3
commit
c8f11578d6
@ -36,7 +36,7 @@
|
|||||||
{{ $L("注册账号") }}
|
{{ $L("注册账号") }}
|
||||||
</div>
|
</div>
|
||||||
<div class="header-right-three" @click="login">
|
<div class="header-right-three" @click="login">
|
||||||
{{ $L("立即登录") }}
|
{{ $L("登录") }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -61,7 +61,12 @@
|
|||||||
<div class="page-main">
|
<div class="page-main">
|
||||||
<div class="main-box-one">
|
<div class="main-box-one">
|
||||||
<div class="box-one-square"></div>
|
<div class="box-one-square"></div>
|
||||||
<div class="box-one-pic1"></div>
|
<div class="box-pic" v-if="screenWidth<1920">
|
||||||
|
<img class="box-img" :src="$store.state.method.apiUrl('../images/index/box-pic1.png')" />
|
||||||
|
</div>
|
||||||
|
<div class="box-one-pic1" v-else>
|
||||||
|
|
||||||
|
</div>
|
||||||
<div class="box-one-tips">
|
<div class="box-one-tips">
|
||||||
<div class="box-square"></div>
|
<div class="box-square"></div>
|
||||||
<div class="box-title">
|
<div class="box-title">
|
||||||
@ -91,7 +96,9 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="main-box-two" v-else>
|
<div class="main-box-two" v-else>
|
||||||
<div class="box-two-tips">
|
<div class="box-two-tips">
|
||||||
<div class="box-two-pic2"></div>
|
<div class="box-pic">
|
||||||
|
<img class="box-img" :src="$store.state.method.apiUrl('../images/index/box-pic2.png')" />
|
||||||
|
</div>
|
||||||
<div class="box-square"></div>
|
<div class="box-square"></div>
|
||||||
<div class="box-title">
|
<div class="box-title">
|
||||||
{{ $L("强大易用的协同创作云文档") }}
|
{{ $L("强大易用的协同创作云文档") }}
|
||||||
@ -108,7 +115,12 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="main-box-one">
|
<div class="main-box-one">
|
||||||
<div class="box-one-square"></div>
|
<div class="box-one-square"></div>
|
||||||
<div class="box-one-pic3"></div>
|
<div class="box-pic" v-if="screenWidth<1920" >
|
||||||
|
<img class="box-img" :src="$store.state.method.apiUrl('../images/index/box-pic3.png')" />
|
||||||
|
</div>
|
||||||
|
<div class="box-one-pic3" v-else >
|
||||||
|
|
||||||
|
</div>
|
||||||
<div class="box-one-tips">
|
<div class="box-one-tips">
|
||||||
<div class="box-square"></div>
|
<div class="box-square"></div>
|
||||||
<div class="box-title">
|
<div class="box-title">
|
||||||
@ -138,7 +150,9 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="main-box-two" v-else>
|
<div class="main-box-two" v-else>
|
||||||
<div class="box-two-tips">
|
<div class="box-two-tips">
|
||||||
<div class="box-two-pic4"></div>
|
<div class="box-pic">
|
||||||
|
<img class="box-img" :src="$store.state.method.apiUrl('../images/index/box-pic4.png')" />
|
||||||
|
</div>
|
||||||
<div class="box-square"></div>
|
<div class="box-square"></div>
|
||||||
<div class="box-title">
|
<div class="box-title">
|
||||||
{{ $L("清晰直观的任务日历") }}
|
{{ $L("清晰直观的任务日历") }}
|
||||||
@ -182,11 +196,12 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
screenWidth: document.body.clientWidth,
|
screenWidth: document.body.clientWidth,
|
||||||
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
screenWidth(nVal) {
|
screenWidth(nVal) {
|
||||||
console.log(nVal);
|
// console.log(nVal)
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
@ -205,7 +220,7 @@ export default {
|
|||||||
window.screenWidth=document.body.clientWidth
|
window.screenWidth=document.body.clientWidth
|
||||||
that.screenWidth=window.screenWidth
|
that.screenWidth=window.screenWidth
|
||||||
}
|
}
|
||||||
console.log(this.screenWidth)
|
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
|
|||||||
90
resources/assets/sass/pages/page-index.scss
vendored
90
resources/assets/sass/pages/page-index.scss
vendored
@ -197,34 +197,21 @@
|
|||||||
width: 62.5%;
|
width: 62.5%;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
margin-top: 200px;
|
margin-top: 200px;
|
||||||
.main-box-one {
|
.box-img{
|
||||||
position: relative;
|
height: auto;
|
||||||
margin-bottom: 70px;
|
max-width: 100%;
|
||||||
.box-one-pic1 {
|
max-height: 100%;
|
||||||
width: 100%;
|
vertical-align: bottom;
|
||||||
height: 188px;
|
bottom: 0;
|
||||||
background: url("../images/index/box-pic1.png") no-repeat
|
-o-object-fit: fill;
|
||||||
center center;
|
object-fit: fill;
|
||||||
background-size: contain;
|
}
|
||||||
|
.box-pic {
|
||||||
-webkit-box-shadow: 0px 0px 10px #a9a4a4;
|
-webkit-box-shadow: 0px 0px 10px #a9a4a4;
|
||||||
-moz-box-shadow: 0px 0px 10px #a9a4a4;
|
-moz-box-shadow: 0px 0px 10px #a9a4a4;
|
||||||
box-shadow: 0px 0px 10px #a9a4a4;
|
box-shadow: 0px 0px 10px #a9a4a4;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
}
|
padding: 10px;
|
||||||
.box-one-pic3 {
|
|
||||||
width: 100%;
|
|
||||||
height: 188px;
|
|
||||||
background: url("../images/index/box-pic3.png") no-repeat
|
|
||||||
center center;
|
|
||||||
background-size: contain;
|
|
||||||
-webkit-box-shadow: 0px 0px 10px #a9a4a4;
|
|
||||||
-moz-box-shadow: 0px 0px 10px #a9a4a4;
|
|
||||||
box-shadow: 0px 0px 10px #a9a4a4;
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
|
||||||
.box-one-tips {
|
|
||||||
width: 100%;
|
|
||||||
}
|
}
|
||||||
.box-square {
|
.box-square {
|
||||||
width: 24px;
|
width: 24px;
|
||||||
@ -249,6 +236,14 @@
|
|||||||
color: #828282;
|
color: #828282;
|
||||||
line-height: 28px;
|
line-height: 28px;
|
||||||
}
|
}
|
||||||
|
.main-box-one {
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 70px;
|
||||||
|
|
||||||
|
.box-one-tips {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
.main-box-two {
|
.main-box-two {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -256,54 +251,11 @@
|
|||||||
margin-bottom: 70px;
|
margin-bottom: 70px;
|
||||||
.box-two-square {
|
.box-two-square {
|
||||||
}
|
}
|
||||||
.box-two-pic2 {
|
|
||||||
width: 100%;
|
|
||||||
height: 188px;
|
|
||||||
background: url("../images/index/box-pic2.png") no-repeat
|
|
||||||
center center;
|
|
||||||
background-size: contain;
|
|
||||||
-webkit-box-shadow: 0px 0px 10px #a9a4a4;
|
|
||||||
-moz-box-shadow: 0px 0px 10px #a9a4a4;
|
|
||||||
box-shadow: 0px 0px 10px #a9a4a4;
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
|
||||||
.box-two-pic4 {
|
|
||||||
width: 100%;
|
|
||||||
height: 188px;
|
|
||||||
background: url("../images/index/box-pic4.png") no-repeat
|
|
||||||
center center;
|
|
||||||
background-size: contain;
|
|
||||||
-webkit-box-shadow: 0px 0px 10px #a9a4a4;
|
|
||||||
-moz-box-shadow: 0px 0px 10px #a9a4a4;
|
|
||||||
box-shadow: 0px 0px 10px #a9a4a4;
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
|
||||||
.box-two-tips {
|
.box-two-tips {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
.box-square {
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
background: url("../images/index/square.png") no-repeat
|
|
||||||
center center;
|
|
||||||
background-size: contain;
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
.box-title {
|
|
||||||
font-size: 16px;
|
|
||||||
font-family: PingFangSC-Medium, PingFang SC;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #333333;
|
|
||||||
line-height: 45px;
|
|
||||||
margin: 6px 0 18px 0;
|
|
||||||
}
|
|
||||||
.box-tips {
|
|
||||||
font-size: 12px;
|
|
||||||
font-family: PingFangSC-Regular, PingFang SC;
|
|
||||||
font-weight: 400;
|
|
||||||
color: #828282;
|
|
||||||
line-height: 28px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.page-footer {
|
.page-footer {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user