移动端首页头图自适应布局

前言：有时候，我们在移动端制作登陆首页的时候，上半部分是一部分图片，中间为登陆框，底部为logo，需求会要求上半部分的图片，在不同的移动设备上，图片不被压缩。

解决方法：就是把整个背景图片切成两部分，高度用百分比的形式来显示。

相关图片如下所示：

一、html部分

<div id="app">
    <template>
        <div class="page" style="height:100%;box-sizing:border-box;max-width:640px;margin:0 auto;" v-title data-title="所属公司">
            <div class="zh-box"></div>
            <div class="contentBox">
                <div class="content" style="width:100%;border-radius:25px;background-color:rgb(255,255,255);">
                    <div class="emailcon" style="padding:0px 10px;">
                        <div>
                            <h2 style="text-align:center;">欢迎投保专属重疾产品</h2>
                            <div style="height:50px;border:2px solid #356ae6;border-radius:30px;padding-left:22px;background:#f5f5f5;">
                                <div class="textBox" v-if="!showCompany" @click="companyPicker()">
                                    <input type="text" placeholder="请选择您所在的机构"
                style="font-size: 16px;background-color: #F5F5F5;padding-left: 46px;height: 20px;  padding-top: 15px;padding-bottom: 15px;"
             onkeyup="value=value.replace(/^(\s|\u00A0)+/,'').replace(/(\s|\u00A0)+$/,'')"
                disabled/>
              <i class="g-yzm vertical-center" style="border:none;height: 40px;width: 40px;line-height: 40px;left: 10px;background-color: #F5F5F5;text-align: left;">
                <img style="width: 38px;margin-top: 3px;height: 38px;" src="../../assets/images/emailIcon2.png"/>
              </i>
                                </div>
                            </div>
                        </div>
                        <div class="smrz-button" @click="userLogin()" style="height:50px;line-height:50px;border-radius:30px;" :style="(this.company && this.company2)?{background:'#356ae6'}:{background:'#ccd0d3'}">
                            查看产品详情
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </template>
</div>

二、css样式

       背景图片分为两部分引用，并且给上面盒子的高度为padding-bottom:54%，给出上面部分背景图片高度空间。

<style scoped>
.page {
    min-height: 100vh;
    padding-bottom: 10px;
    background-image: url('~@/assets/images/banner1.png'),url('~@/assets/images/banner2.png');
    background-repeat: no-repeat;
    background-size: 100% auto,100% 100%;
    background-position: top center,center bottom;
}
.zh-box {
  padding-bottom: 54%;
}
.contentBox{
   padding: 0 13px;
}
.content {
  padding-bottom: 20px;
  background: url('~@/assets/images/content-bg.png') no-repeat;
}
.textBox{
  background: url('~@/assets/images/icon-right2.png') no-repeat;
  background-position: center right;
  background-size: 26px;
}
.emailcon {
      margin-bottom: 15px;
}
h2 {
     padding-top: 22px;
     margin: 0;
     margin-bottom: 30px;
}
.textLine1{
    padding-left: 46px;
    font-size: 14px;
    color: #2D323D;
}
.textLine2{
    padding-left: 46px;
    font-size: 16px;
    color: #010204;
    font-weight:bold;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.smrz-button {
  margin: 30px auto 110px;
  text-align: center;
  color: #ffffff;
  height: 40px;
  line-height: 40px;
  border-radius: 25px;
  font-size: 16px;
  background: -webkit-linear-gradient(
    left,
    #6091f9,
    #2058c2
  ); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(
    right,
    #6091f9,
    #2058c2
  ); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(
    right,
    #6091f9,
    #2058c2
  ); /* Firefox 3.6 - 15 */
  background: linear-gradient(
    to right,
    #6091f9,
    #2058c2
  ); /* 标准的语法（必须放在最后） */
  box-shadow: 0px 0px 8px 0px #b5b5b5;
}
.scroll {
  height: 100%;
  padding: 0 2%;
}
input::placeholder {
  color: #ccd0d3;
}
.weui-cell {
  position: relative;
}

.g-yzm {
  height: 32px;
  line-height: 32px;
  padding: 0 5px;
  font-size: 14px;
  color: #2058c2;
  border: 1px solid #265dc7;
  border-radius: 5px;
  right: 0;
  background-color: #ffffff;
  text-align: center;
}
.vertical-center {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
}
input[type='text'] {
  display: block;
  padding-top: 2px;
  padding-left: 0;
  height: 34px;
  color: #111;
  vertical-align: middle;
  font-size: 14px;
  line-height: 16px;
}
</style>

三、补充自定义的二级组件

       二级组件如下图所示：

       在页面引入自定义组件：

<!--自定义组件-->
<PickerTwo v-if="showPopup" :popType="popType" :title="title" :Data="columns" :defaultData="defaultData" @theEvToParent="theEvToParent"></PickerTwo>

四、自定义组件部分

<template>
<div>
  <mt-popup class="popPanel" position="bottom" v-model="currentVal" :closeOnClickModal="false" :close-on-click-overlay="false">
    <div class="pickerThree-title" style="overflow: hidden;">
      <span :class="{'active1' : isFalse1}" @click="SureOne">{{titleNav[0]}}</span>
      <span :class="{'active1' : isFalse2}" @click="SureTwo">{{titleNav[1]}}</span>
      <span class="" @click="PopParent(1)" style="color: rgb(202, 91, 107);">确认</span>
    </div>
    <div class="pickerThree-content">
      <div v-if="isFalse1">
        <!-- 第一级 -->
        <div v-for="(item,index) in list" :key="index">
        <span class="cm-pos-rel cm-flex cm-col-c cm-bd-b cm-lh-45 padd-left" @click="list1Btn(index)" :class="{'active' : item.isFalse}">{{item.name}}</span>
        </div>
      </div>
      <div v-if="isFalse2">
        <!-- 第二级 -->
        <div v-for="(item,index) in list2" :key="index">
        <span class="cm-pos-rel cm-flex cm-col-c cm-bd-b cm-lh-45 padd-left" @click="list2Btn(index)" :class="{'active' : item.isFalse}">{{item.name}}</span>
        </div>
      </div>
    </div>
  </mt-popup>
</div>
</template>

<script>
/* eslint-disable */
	export default {
		name: "picker",
		data() {
			return {
				currentVal: true,
				isFalse1: true,
				isFalse2: false,
				isFalse3: false,
				list: [

				],
				list2: [

				],
				titleNav: [],
				result: [
        		{isFalse:'',name:'',value:''},
        		{isFalse:'',name:'',value:''},
				],//选中的结果
			};
		},
		props: {
			popType: Number,
			Data: Array,
			defaultData: Array,
			title: Array,
		},
		created() {
			this.list = this.CONFIG.companysForList.map(item => {
				return item
			})
			if (this.defaultData[0].name) {//判断是不是已经选择了第一级
				// 第一级已经选择了
				this.result[0].name = this.defaultData[0].name;
				this.isFalse1 = false;
				this.isFalse2 = true;
				for (var i = 0; i < this.list.length; i++) {
					var item = this.list[i];
					if (item.name == this.defaultData[0].name) {
							item.isFalse = true;
							this.list2 = item.children
					}
				}
				this.titleNav[0] = this.title[0];
			} else {
				// 第一级没有选择了
				this.titleNav[0] = this.title[0];
			}
			if (this.defaultData[1].name) {///判断是不是已经选择了第二级
				// 第二级已经选择了
				this.result[1].name = this.defaultData[1].name;
				for (var i = 0; i < this.list2.length; i++) {
					var item = this.list2[i];
					if (item.name == this.defaultData[1].name) {
						item.isFalse = true;
					}
				}
				this.titleNav[1] = this.title[1];
			} else {
				// 第二级没有选择了
				this.titleNav[1] = this.title[1];
			}
		},
		/* watch: {
			'titleNav': {
				handler: function (newValue, oldValue) {
					console.log(newValue)
					console.log(oldValue)
					this.$nextTick(function () {
						this.list3Btn()
					})
				},
				deep: true
			}
		}, */
		methods: {
			SureOne() {//点击第一级的导航
				this.isFalse1 = true;
				this.isFalse2 = false;
				this.isFalse3 = false;
			},
			SureTwo() {//点击第二级的导航
				if (this.result[0].name) {
					this.isFalse1 = false;
					this.isFalse2 = true;
					this.isFalse3 = false;
				}
			},
			list1Btn(index) {//点击第一级的菜单
				for (var i = 0; i < this.list.length; i++) {
					this.list[i].isFalse = false;
				}
				this.list2 = this.list[index].children
				this.list[index].isFalse = true;
				this.isFalse1 = false;
				this.isFalse2 = true;
				this.result = [];
				this.result[0] = this.list[index];
				for (var i = 0; i < this.list2.length; i++) {
					this.list2[i].isFalse = false;
				}
			},
			list2Btn(index) {//点击第二级的菜单
				for (var i = 0; i < this.list2.length; i++) {
					this.list2[i].isFalse = false;
				}
				this.list2[index].isFalse = true;
				this.CONFIG.companysForToken = this.list2[index].token;//633获取对应token
				const obj = this.list2[index]
				this.result[1] = this.list2[index];
				this.$set(this.list2,index,obj);
			},
			PopParent(status) {
				var data = {
					flag: false,
					value: this.result
				};
				this.$emit("theEvToParent", data);
			}
		}
	};
</script>

<style scoped>
	.pickerThree-title {
		height: 45px;
		line-height: 45px;
		width: 100%;
		display: flex;
	}

	.pickerThree-title span {
		flex: 1;
		text-align: center;
		width: 33.33%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.popPanel {
		width: 100%;
		max-width: 940px;
	}

	.pickerThree-content {
		height: 300px;
		overflow-y: scroll;
	}

	.active {
		color: rgb(202, 91, 107);
	}
	.active1 {
		border-bottom: 2px solid #ca5b6b;
	}
	.padd-left {
		padding-left: 10px;
	}
	.cm-pos-rel {
    position: relative;
  }
	.cm-flex {
    display: flex;
  }
	.cm-col-c {
    align-items: center;
  }
	.cm-bd-b {
    border-bottom: 1px solid #EBEBEB;;
  }
	.cm-lh-45 {
    line-height: 45px;
  }
</style>

五、js部分

<script>
/* eslint-disable */
import PickerTwo from "@/components/tool/PickerTwo";
import { MessageBox } from 'mint-ui';
export default {
  name : 'name',
  components:{
    PickerTwo: PickerTwo,
  },
  created() {},
  methods: {
    companyPicker() {
      this.showPopup = true;
    },
    theEvToParent(v) {
      if(!v.value[0].name){
          MessageBox.alert('请先选择您所在机构！','温馨提示');
          return;
      }
      if(v.value.length === 1){
          MessageBox.alert('请先选择您所属子公司！','温馨提示');
          return;
      }
      if(v.value.length === 2){
          this.company1 = v.value[0].name;
          this.company2 = v.value[1].name;
          this.defaultData[0].name = v.value[0].name;
          this.defaultData[1].name = v.value[1].name;
      }
      if(this.company1 && this.company2){
          this.showCompany = true;
          this.showPopup = false;
      }
     
    },
  
  },
  data() {
    return {
      showPopup: false, // 弹框
      columns: [{
        name: '太平养老保险股份有限公司',
        child: [{
          child: [
            { name: '广东分公司', value: '2' },
            { name: '佛山支公司', value: '3' },
            { name: '惠州支公司', value: '4' },
            { name: '四川分公司', value: '5' },
            { name: '河北分公司', value: '6' },
            { name: '沧州支公司', value: '7' }],
        }],
      }],
      popType: 0,
      title: ['太平集团子公司', '分公司'],
      company1:'',
      company2:'',
      token:'',
      showCompany: false,
      selectFlag : false,
      defaultData: [
         { name: ''},
         { name: ''},
      ],
    }
  }
}
</script>

 六、引用组件报错

        在引用组件的时候，出现了以下报错：

      后来，查阅资料发现是未声明组件的name属性，声明以下即可。

<script>
import PickerTwo from "@/components/tool/PickerTwo";
export default{
    name:'name',
    components:{
        PickerTwo:  PickerTwo,
    }
}
</script>