UNIAPP图片页面样式兼容方案
前言
最近公司有一些活动宣传页需要处理。基本上都是宣传的内容，只有少部分需要对接后端，填写数据等。所以有了这个图片页面方案。
页面布局简介
- 当前页面的最外层标签设置相对定位，最小高度为100vh，设置一个页面背景色。
- 图片要求尺寸750*1624，图片底部颜色与背景色一致(遇到兼容性问题不出现白边)。
- 页面上需要添加功能，文案，按钮等根据自身在图片所在位置的实际设置绝对定位。
页面组件
<template>
<view class="lee-image-page">
<image class="lee-image-page__bg" mode="widthFix" :src="bg"></image>
<view class="lee-image-page__total">
<view class="lee-image-page__total--box">
<view class="lee-image-page__total--money">{{ remark }}</view>
</view>
</view>
<view class="lee-image-page__invite" @click="">
<button class="lee-image-page__invite--button" :open-type="isShare? 'share' : ''">
<view class="lee-image-page__invite--image">
<image :src="btn"></image>
</view>
</button>
</view>
</view>
</template>
<script setup>
const props = defineProps({
bg: {
type: String,
default: '/static/images/components/lee-image-page/bg.png'
},
btn: {
type: String,
default: '/static/images/components/lee-image-page/btn.png'
},
isShare: {
type: Boolean,
default: false
},
remark: {
type: String,
default: '这是一个功能区'
}
})
</script>
<style lang="scss" scoped>
.lee-image-page {
position: relative;
min-height: 100vh;
width: 750rpx;
background: #fef1ec;
&__bg {
width: 750rpx;
height: 1624rpx;
image {
width: 100%;
height: 100%;
}
}
&__total {
position: absolute;
box-sizing: border-box;
top: 834rpx;
width: 100%;
padding: 0 36rpx;
&--box {
display: flex;
align-items: baseline;
justify-content: center;
}
&--money {
font-size: 80rpx;
color: #dd100b;
}
}
&__invite {
position: absolute;
top: 1280rpx;
width: 100%;
&--button {
box-sizing: content-box;
width: 305rpx;
height: 74rpx;
margin: 0 auto;
background: transparent;
}
&--button::after {
border: none;
}
&--image {
width: 305rpx;
height: 74rpx;
image {
width: 100%;
height: 100%;
}
}
}
}
</style>
运行效果
