mirror of
https://github.com/kuaifan/dootask.git
synced 2025-12-11 18:42:54 +00:00
mod:修改首页内容部分图片自适应
This commit is contained in:
623585344@qq.com
parent
f33be18be3
commit
c8f11578d6
@ -36,7 +36,7 @@
|
||||
{{ $L("注册账号") }}
|
||||
</div>
|
||||
<div class="header-right-three" @click="login">
|
||||
{{ $L("立即登录") }}
|
||||
{{ $L("登录") }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -61,7 +61,12 @@
|
||||
<div class="page-main">
|
||||
<div class="main-box-one">
|
||||
<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-square"></div>
|
||||
<div class="box-title">
|
||||
@ -91,7 +96,9 @@
|
||||
</div>
|
||||
<div class="main-box-two" v-else>
|
||||
<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-title">
|
||||
{{ $L("强大易用的协同创作云文档") }}
|
||||
@ -108,7 +115,12 @@
|
||||
</div>
|
||||
<div class="main-box-one">
|
||||
<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-square"></div>
|
||||
<div class="box-title">
|
||||
@ -138,7 +150,9 @@
|
||||
</div>
|
||||
<div class="main-box-two" v-else>
|
||||
<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-title">
|
||||
{{ $L("清晰直观的任务日历") }}
|
||||
@ -182,11 +196,12 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
screenWidth: document.body.clientWidth,
|
||||
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
screenWidth(nVal) {
|
||||
console.log(nVal);
|
||||
// console.log(nVal)
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
@ -205,7 +220,7 @@ export default {
|
||||
window.screenWidth=document.body.clientWidth
|
||||
that.screenWidth=window.screenWidth
|
||||
}
|
||||
console.log(this.screenWidth)
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
134
resources/assets/sass/pages/page-index.scss
vendored
134
resources/assets/sass/pages/page-index.scss
vendored
@ -197,58 +197,53 @@
|
||||
width: 62.5%;
|
||||
margin: 0 auto;
|
||||
margin-top: 200px;
|
||||
.box-img{
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
vertical-align: bottom;
|
||||
bottom: 0;
|
||||
-o-object-fit: fill;
|
||||
object-fit: fill;
|
||||
}
|
||||
.box-pic {
|
||||
-webkit-box-shadow: 0px 0px 10px #a9a4a4;
|
||||
-moz-box-shadow: 0px 0px 10px #a9a4a4;
|
||||
box-shadow: 0px 0px 10px #a9a4a4;
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.main-box-one {
|
||||
position: relative;
|
||||
margin-bottom: 70px;
|
||||
.box-one-pic1 {
|
||||
width: 100%;
|
||||
height: 188px;
|
||||
background: url("../images/index/box-pic1.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-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 {
|
||||
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;
|
||||
}
|
||||
|
||||
}
|
||||
.main-box-two {
|
||||
width: 100%;
|
||||
@ -256,54 +251,11 @@
|
||||
margin-bottom: 70px;
|
||||
.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 {
|
||||
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 {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user