接到任务做bjfindata手机版适配,一开始一脑子懵,查阅百度后有一些灵感。现在比较常用的方式是用flexible .js对网页进行等比例缩放,但由于电脑版是横版网页,手机版需要为竖版,所以此办法行不通。
后来想出第二种解决方案,登录电脑版时进行判断,判断登录设备,如果为手机切换为手机版网页。
判断是否为手机登录方法:
mounted() {
if (this.isMobile()) {
// console.log("手机端");
location.replace('/index-phone');
} else {
// console.log("pc端");
}
},
methods: {
isMobile() {
const flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
return flag;
}
}
- 如果判断为手机登录的页面,在网址后面加入 /index-phone
下面的便捷填报入口分为两个版本,一个版本为tab区域分组。一种为竖式排列(和电脑版相同)。竖式排列点击后出现弹窗,弹窗中保留二维码和网站入口。tab区域折叠只保留跳转。
竖式排列
<div class="fuzq_box" >
<div style="height: 40px; font-size: 16px; padding-left: 8px; line-height: 40px; font-weight: bold;">银企对接<van-icon name="arrow-down" /></div>
<!-- <a href="https://yq.bjfindata.cn/xqtb.html">-->
<div
class="nav1 zk_js"
>
<span @click="yqLoadMorePopup1">企业融资需求填报</span>
<van-popup
v-model="YqMorePopup1" closeable
>
<div style="width: 15rem; height: 17rem; background-color: rgb(255, 255, 255);">
<div>
<img
style="vertical-align: middle;margin:50px auto 30px 60px;margin-left: 60px;width: 120px"
src="images/qrcode-rzxqtb.png"
/>
<a href="https://yq.bjfindata.cn/xqtb.html">
<div style="display: flex">
<div style="margin-left: 45px;">企业融资需求填报</div>
<van-image src="../images/arrow.png" fit="fill" style="width: 40px;height: 40px;margin-top: -8px"></van-image>
</div>
</a>
</div>
</div>
</van-popup>
</div>
</div>
data() {
return {
YqMorePopup1:false,
}
},
methods: {
yqLoadMorePopup1() {
this.YqMorePopup1 = true
// Dialog({ message: '这部分将弹窗显示' });
},
}
- 此处为保证代码整洁只保留一个弹窗,其他代码实现方法一致。
- span中加入click事件,点击后YqMorePopup1属性由false变为true,此处弹窗显示。
- van-popup v-model=“YqMorePopup1” closeable 中closeable为关闭叉选项,不添加这个属性则不显示关闭。
tab分组折叠
<div id="tab">
<div id="tab-header">
<div
id="yinqi0"
:class="{
'tabs__item': true,
'is-active': CurrenIndex === 0,
}"
@click="TabChange(0)"
>银企对接<van-icon name="arrow-down" /></div>
<div
id="foreignExchange"
:class="{
'tabs__item': true,
'is-active': CurrenIndex === 1,
}"
@click="TabChange(1)"
>外汇衍生品<van-icon name="arrow-down" /></div>
</div>
<!-- <div style="padding: 16px">-->
<div class="el-tab-pane"
:style="{display: CurrenIndex === 0 ? 'block' : 'none'}">
<a href="https://yq.bjfindata.cn/xqtb.html">
<div class="dom" style="float:left;">
企业融资 <br>
需求填报
</div>
</a>
</div>
<div class="el-tab-pane"
:style="{display: CurrenIndex === 1 ? 'block' : 'none'}">
<a href="https://yq.bjfindata.cn/feddcp/#/HomePage">
<div class="dom" style="float:left;width: 40%">
北京外汇自律机制 <br>
服务平台
</div>
</a>
</div>
TabChange(index){
this.CurrenIndex = index
},
- 点击时触发该事件对应的div区域
dom.css
.dom{
width: 33%;
height: 5rem;
font-size: 14px;
display: flex;
/*实现垂直居中*/
align-items: center;
background-image: url(../images/yinqiBackground.png);
background-repeat:no-repeat;
background-position:right;
background-position-x: 70px;
color: #000000;
}
- no-repeat实现背景图片不重复
- 调整背景图片显示位置
- 此功能根据下面数据中心中的折叠区更改
服务入口css
#imgbox{
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
transform-style: preserve-3d;
width: 90%;
overflow: hidden;
margin-left: 6%;
text-align: center;
}
- 此处服务入口三个图片需要水平居中和垂直居中,解决办法为使用flex布局,然后进行居中操作。
- 网页在设置大小时尽量使用百分比或者rem,在放大或者缩小时不会打乱排版。减小使用px
- 其他实现部分大部分为调整css实现,此处不多做赘述。多试几次就达到效果了