2023.04.07之home页总结

home页

1. 问题

• 只翻转背景图片，不影响文字内容
  利用伪元素 + 定位层级在内容之下 + transform:rotateY(180deg)

• img动态绑定图片路径
  v-for + v-bind:src="item.imgSrc"

• 动态绑定样式之背景颜色(数组形式，通用 + 特殊)
  v-for + v-bind:class="['content_box,'background + item.back]"

• absolute造成的外边距塌陷(解决浮动引起的方法不起效果)

暂未解决捏

• 移动端二倍图(多倍图)
  确定盒子大小，如100rpx 100rpx，使用二倍大小的图片，200rpx 200rpx，放入；使得1像素放下2个物理像素，即提高了物理像素比。

• 修改placeholder样式

  1. 使用特定的选择器
  2. uniapp的input组件的placeholder-style属性可以设置placeholder的样式

/* 方法1 */
	::-webkit-input-placeholder {
		/* WebKit browsers，webkit内核浏览器 */
		color: #ccc;
		font-size: 16px;
	}

	:-moz-placeholder {
		/* Mozilla Firefox 4 to 18 */
		color: #ccc;
		font-size: 16px;
	}

	::-moz-placeholder {
		/* Mozilla Firefox 19+ */
		color: #ccc;
		font-size: 16px;
	}

	:-ms-input-placeholder {
		/* Internet Explorer 10+ */
		color: #ccc;
		font-size: 16px;
	}

/* 方法2 */
<input class="search-input" type="text" name="" id="" placeholder="搜索词" placeholder-style="color:#fff">

• 不影响文字内容的毛玻璃
  伪元素 + backdrop-filter: blur(20rpx);

2. 示例代码

<view class="box">
	<view class="top">
		<view :class="checkedLeft ? 'top_left_checked' : 'top_left'">
			<text @tap="hanlderBtnChange('daily')"> daily</text>
		</view>
		<view :class="!checkedLeft ? 'top_right_checked' : 'top_right'">
			<text @tap="hanlderBtnChange('emergency')">emergency</text>
		</view>
	</view>
	<view class="body">
		<view v-if="checkedLeft && item" v-for="(item,index) in dataList1" :key="index"
			:class="['content_box','background' + item.back]">
			<view class="content_icon">
				<image :src="item.imgUrl" mode=""></image>
			</view>
			<view class="content_text">
				{{item.text}}
			</view>
		</view>
		<view v-if="!checkedLeft && item" v-for="(item,index) in dataList2" :key="index"
			:class="['content_box','background' + item.back]">
			<view class="content_icon">
				<image :src="item.imgUrl" mode=""></image>
			</view>
			<view class="content_text">
				{{item.text}}
			</view>
		</view>
	</view>
</view>

data() {
	return {
		checkedLeft: true,
		dataList1: [],
		dataList2: [],
		formList: [{
			back: '1',
			text: '11',
			imgUrl: '../../static/image/home/c.png',
		}, {
			back: '2',
			text: '22',
			imgUrl: '../../static/image/home/i.png',
		}, {
			back: '3',
			text: '33',
			imgUrl: '../../static/image/home/b.png',
		}]
	};
},
onLoad() {
	this.init();
},
methods:{
	init() {
		this.dataList1.push(
			this.formList[0],
			this.formList[1],
			this.formList[2],
		)
	}
}

/* ...省略... */
.box {
	position: absolute;
	top: 670rpx;
	margin-top: 20rpx;
	width: 694rpx;

	.top {
		display: flex;
		align-items: end;
		width: 694rpx;
		font-size: 36rpx;
		font-weight: 500;

		.top_left_checked {
			position: absolute;
			top: 2rpx;
			left: 0;
			z-index: 1;
			width: 60%;
			height: 90rpx;
			line-height: 90rpx;
			color: rgba(48, 117, 255, 1);
			font-weight: 600;
			text-align: center;
			background: url(../../static/image/home/left2.png) no-repeat;
			background-size: 100% 100%;
		}

		.top_left {
			position: absolute;
			top: 12rpx;
			left: 0;
			z-index: 1;
			width: 50%;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
		}

		.top_left::before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
			width: 100%;
			height: 80rpx;
			background: url(../../static/image/home/right2.png) no-repeat;
			background-size: 100% 100%;
			transform: rotateY(180deg);
		}

		.top_right {
			position: absolute;
			top: 12rpx;
			right: 0;
			z-index: 0;
			width: 50%;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			background: url(../../static/image/home/right2.png) no-repeat;
			background-size: 100% 100%;
		}

		.top_right_checked {
			position: absolute;
			top: 2rpx;
			right: 0;
			z-index: 2;
			width: 60%;
			height: 90rpx;
			line-height: 90rpx;
			color: rgba(48, 117, 255, 1);
			font-weight: 600;
			text-align: center;
		}

		.top_right_checked::before {
			content: "";
			position: absolute;
			top: 0;
			right: 0;
			z-index: -1;
			width: 100%;
			height: 90rpx;
			background: url(../../static/image/home/left2.png) no-repeat;
			background-size: 100% 100%;
			transform: rotateY(180deg);
		}
	}

	.body {
		/* absolute 造成的外边距塌陷！！！ */
		position: absolute;
		top: 88rpx;
		z-index: -3;
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		/* 无效 */
		margin-bottom: 20rpx;
		padding-top: 20rpx;
		background-image: url(../../static/image/home/box2.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;

		.content_box {
			display: flex;
			align-items: center;
			width: 314rpx;
			height: 150rpx;
			margin: 0 0 24rpx 24rpx;
			border-radius: 24rpx;

			.content_icon {
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 0 24rpx;
				width: 96rpx;
				height: 96rpx;
				border-radius: 48rpx;
				background-color: #fff;

				image {
					width: 60rpx;
					height: 60rpx;
				}
			}

			.content_text {
				font-size: 32rpx;
			}

		}

		.background1 {
			background-image: linear-gradient(135deg, #defcff 0%, rgba(232, 243, 255, 0.3) 100%);
		}

		.background2 {
			background-image: linear-gradient(135deg, #fff4de 0%, rgba(255, 247, 232, 0.3) 100%);
		}

		.background3 {
			background-image: linear-gradient(135deg, #eae6ff 0%, rgba(234, 230, 255, 0.3) 99.95%);
		}
	}
}