feat: There is no way the, phoneHome 自适应

This commit is contained in:
super_liu
2022-06-16 12:14:58 +08:00
parent cb20a18194
commit bd891ae59f
8 changed files with 144 additions and 40 deletions
+3
View File
@@ -237,6 +237,7 @@ export default {
box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
.standTitle{
.title{
font-size: 3.4vw;
color: #333333;
font-weight: 600;
height: auto;
@@ -247,6 +248,7 @@ export default {
}
}
.standContent{
font-size: 3.4vw;
color: #555555;
font-weight: 450;
margin-top: 5px;
@@ -256,6 +258,7 @@ export default {
line-height: 35px;
}
.standSubTime{
font-size: 3.4vw;
padding-left: 10px;
height: 35px;
line-height: 35px;
+24 -7
View File
@@ -1,6 +1,6 @@
<!--国内标准法规详情页-->
<template>
<div class="other-standard-details v-class" :class="{'hidden': !isMoreAwayBtn}">
<div class="other-standard-details v-class" :style="'width:' + (500) + 'px;'+'height:' + (screenHeight) + 'px'" :class="{'hidden': !isMoreAwayBtn}">
<!--title 标题-->
<div class="details-header">
<span v-if="sarStandardsInfoEO.standYear === null">{{ sarStandardsInfoEO.standSortShow || '' }} {{
@@ -61,7 +61,7 @@
<div style="position: relative;margin-left: 214px; line-height: 32px">
<div v-for="(file, fileIndex) in child1Func(child.value)" style="display: flex;">
<span v-if="child.value && child.value.length > 0 && child.value.length === 1" style="display: flex; align-items: center;">
<a style="font-size: 16px;color: #409EFF;cursor: pointer;display: inline-block"
<a style="font-size:0.2rem;color: #409EFF;cursor: pointer;display: inline-block"
@click="openFileInPdf(file.id, file.oldFileName)" target="_blank"
:title="file.oldFileName">{{ file.oldFileName | ellipsis50}}</a>
<!-- <span class="time-text">上传时间{{ dateFormat(file.modifyTime) }}</span>-->
@@ -172,7 +172,7 @@
}}</span>
</p>
<p class="half">
<label style=" margin-right: 84px;">是否纳入认证清单</label><span>{{
<label style=" margin-right: 34vw;">是否纳入认证清单</label><span>{{
sarStandardsInfoEO.isRelateAccess ? (sarStandardsInfoEO.isRelateAccess === '1' ? '是' : '否') : '-'
}}</span>
</p>
@@ -1516,6 +1516,8 @@ export default {
},
data() {
return {
screenWidth: document.body.offsetWidth - 141,
screenHeight: document.documentElement.clientHeight,
externalStatus:'',
handleList: [],
CycxOptions: [],
@@ -3439,6 +3441,18 @@ export default {
})
},*/
async mounted() {
const that = this
window.onresize = () => {
return (() => {
window.screenWidth = document.body.offsetWidth
that.$store.commit('width', window.screenWidth)
that.screenWidth = window.screenWidth - 141
window.screenHeight = document.documentElement.clientHeight
that.$store.commit('height', window.screenHeight)
that.screenHeight = window.screenHeight
that.objs.bodyWidth = window.screenWidth
})()
}
let external = localStorage.getItem("external");
if(external !== undefined && external !== null){
this.externalStatus = external
@@ -3740,6 +3754,7 @@ export default {
overflow: auto;
height: 100%;
background: #FFFFFF;
overflow: auto;
.itemsTextBox {
min-height: 300px;
@@ -3846,7 +3861,7 @@ export default {
.details-header {
padding: 34px 0;
font-size: 20px;
font-size: 0.3rem;
font-weight: bold;
color: #555555;
text-align: center;
@@ -3869,7 +3884,7 @@ export default {
border-bottom: 1px solid #E5E5E5;
.modular-header-title {
font-size: 18px;
font-size: 0.25rem;
font-weight: bold;
color: #3B424C;
@@ -3946,7 +3961,7 @@ export default {
.basic-information-content {
color: #333333;
font-size: 16px;
font-size: 0.2rem;
/*font-weight: 400;*/
.standard-text {
@@ -3998,7 +4013,7 @@ export default {
width: 213px;
height: 43px;
line-height: 43px;
font-size: 16px;
font-size: 0.2rem;
color: #333333;
vertical-align: top;
overflow: hidden;
@@ -4010,6 +4025,7 @@ export default {
line-height: 32px;
display: inline-block;
width: calc(~'100% - 225px');
font-size: 0.2rem;
//min-height: 50px;
//line-height: 50px;
//font-size: 16px;
@@ -4021,6 +4037,7 @@ export default {
}
.modular-content-p-flies {
font-size: 0.2rem;
line-height: 32px;
//position: relative;
display: inline-block;
+3 -1
View File
@@ -525,7 +525,6 @@ export default {
#domestic-stand{
width: 100%;
height: 100%;
overflow: auto;
margin: 0;
padding: 0;
background: #F6F6F6;
@@ -574,6 +573,7 @@ export default {
box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
.standTitle{
.title{
font-size: 3.4vw;
color: #333333;
font-weight: 600;
height: auto;
@@ -584,6 +584,7 @@ export default {
}
}
.standContent{
font-size: 3.4vw;
color: #333333;
font-weight: 500;
margin-top: 5px;
@@ -599,6 +600,7 @@ export default {
}
}
.content-time{
font-size: 3.4vw;
width: 100%;
height: 35px;
margin-top: 5px;
+63 -26
View File
@@ -1,5 +1,6 @@
<template>
<div id="phone-home">
<div id="phone-home" :style="'height:' + (screenHeight) + 'px'">
<!-- 内容 -->
<div class="search-top">
<div class="top-title">
</div>
@@ -7,10 +8,10 @@
</div>
<div class="search-head">
<van-search
v-model="searchKey"
show-action
placeholder="请输入搜索关键词"
@search="onSearch"
v-model="searchKey"
show-action
placeholder="请输入搜索关键词"
@search="onSearch"
>
<template #action>
<div @click="onSearch">搜索</div>
@@ -39,11 +40,23 @@
</template>
<script>
import vueCustomScrollbar from 'vue-custom-scrollbar'
export default {
name: "phoneHome",
components: {
vueCustomScrollbar
},
data() {
return {
settings: {
suppressScrollY: false,
suppressScrollX: false,
wheelPropagation: false
},
searchKey: "",
screenWidth: document.body.offsetWidth - 141,
screenHeight: document.documentElement.clientHeight,
};
},
methods: {
@@ -70,37 +83,60 @@ export default {
})
}
},
}
},
mounted() {
const that = this
window.onresize = () => {
return (() => {
window.screenWidth = document.body.offsetWidth
that.$store.commit('width', window.screenWidth)
that.screenWidth = window.screenWidth - 141
window.screenHeight = document.documentElement.clientHeight
that.$store.commit('height', window.screenHeight)
that.screenHeight = window.screenHeight
that.objs.bodyWidth = window.screenWidth
})()
}
},
};
</script>
<style lang="less" scoped>
/deep/ .scroll-area {
position: relative;
margin: auto;
width: 100%;
height: 100%;
}
#phone-home {
width: 100%;
height: 100%;
background: #F6F6F6;
overflow: auto;
.van-search .van-cell {
padding: 10px;
}
.search-top{
height: 200px;
width: 100%;
background: url("../../assets/images/phone/homeTop.png");
background-size:100% 100%;
height: 4rem;
width: 100vw;
background: url("../../assets/images/phone/homeTop.png") no-repeat center;
background-size:100vw 40vh;
position: relative;
.top-title{
position: absolute;
top: 15px;
left: 15px;
width: 30%;
height: 5%;
width: 23vw;
height: 0.8rem;
background: url("../../assets/images/phone/phoneTitle.png") no-repeat;
background-size: 100% 100%;
}
.home-title{
color: #FFFFFF;
position: absolute;
top: 12%;
left: 25%
top: 1.5rem;
left: 17.3vw;
}
}
.search-head{
@@ -112,6 +148,7 @@ export default {
flex-wrap: wrap;
background: #F6F6F6;
.content-top {
position: relative;
width: 47%;
height: 150px;
line-height: 230px;
@@ -123,34 +160,34 @@ export default {
}
.content-box{
display: inline-block;
width: 50px;
height: 50px;
width: 1rem;
height: 1rem;
position: absolute;
background-size: 100% 100%;
}
.content-box{
top: 39%;
left: 20%;
.content-box1{
top: 0.7rem;
left: 16.3vw;
background: url("../../assets/images/phone/domesticStand.png");
}
.content-box2{
top: 39%;
left: 65%;
top: 0.7rem;
left: 16.3vw;
background: url("../../assets/images/phone/overseasStand.png");
}
.content-box3{
top: 58%;
left: 20%;
top: 0.7rem;
left: 16.3vw;
background: url("../../assets/images/phone/policyStand.png");
}
.content-box4{
top: 58%;
left: 65%;
top: 0.7rem;
left: 16.3vw;
background: url("../../assets/images/phone/dynamicsStand.png");
}
.content-span{
color: #000000;
font-size: 16px;
font-size: 0.3rem;
font-weight: 500;
}
}
+3
View File
@@ -268,6 +268,7 @@ export default {
.standTitle {
.title {
font-size: 3.4vw;
color: #333333;
font-weight: 600;
height: auto;
@@ -279,6 +280,7 @@ export default {
}
.standContent {
font-size: 3.4vw;
color: #555555;
font-weight: 450;
margin-top: 5px;
@@ -290,6 +292,7 @@ export default {
}
.standSubTime {
font-size: 3.4vw;
padding-left: 10px;
height: 35px;
line-height: 35px;