女前端程序员入职第三天----uniapp页面

今天，是周一，令我无比悲伤的星期一。每一天我都在思考，人为什么要上班？好吧，看来今天也没思考明白。今天老板给留了俩个uniapp小程序页面的编写，看了看效果图，果断翻了翻有没有类似的，果然，copy和paste对码农来讲，永远有用。

我不知道贴出工作内容算不算泄密（哈哈哈哈）以后就不贴图了，我害怕-55555

今天浅浅的贴一张

做出来的东西很简单  类似电话号码簿 底层是遮罩

代码如下：

html:

<view class="page-view">
		<!-- 导航 -->
		<flNav title='相关部门公开服务热线' bgc="transparent" color="#fff" coloricon="#fff"></flNav>
		<!-- 背景图 -->
		<view style="width: 100%;">
			<image :src="newUrl+'/homeE1/jygbbacks.png'" style="width: 100%;" mode="widthFix"></image>
		</view>
		<!-- 遮罩 -->
		<view class="mask" v-if="isMusk"></view>
		<!-- 内容 -->
		<view class="main">
			<view class="top">
				<view class="pull button" @click="showAll()">
					<span class="font-one">服务热线</span><span>电话</span><span>电话咨询</span>
				</view>
			</view>
			<view class="content">
				<view v-for="(item,index) in publicList" :key="index">
					<view class="cell" v-if="item.span % 2 ==1">
						<view class="title">{{item.publicName}}</view>
						<view class="type">{{item.publicTab}}</view>
						<view class="btn" @click="takePhone(item.publicTab)">
							<image class="icon" :src="newUrl+'/homeE1/dianhua.png'"></image>
							<view>一键呼叫</view>
						</view>
					</view>
					<view class="cell" style="background-color: #F5F6F7;" v-if="item.span % 2 ==0">
						<view class="title">{{item.publicName}}</view>
							<view class="type">{{item.publicTab}}</view>
							<view class="btn" @click="takePhone(item.publicTab)">
								<image class="icon" :src="newUrl+'/homeE1/dianhua.png'"></image>
								<view>一键呼叫</view>
							</view>
						</view>
					</view>
				</view>
				
			</view>
		</view>
	</view>

js:js很简单 不贴了

css:

<style lang="scss" scoped>
	.main {
		position: absolute;
		top: 10%;
		width: 100%;
		height: 100%;
		// background-color: #DC143C;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}

	.top {
		width: 100%;
		height: 60px;
		margin-top: 20px;
		padding: 10px;
	}

	.pull {
		background-color: #F5F6F7;
		border-radius: 20px;
		padding: 0px 12px;
		width: 129pt;
		height: 30.5pt;

		/deep/.u-input__input {
			color: #000 !important;
		}
	}

	// content cell:nth-child(odd){
	// 	background-color:white;
	// }
	// content cell:nth-child(even){
	// 	background-color:#F5F6F7;
	// 	}

	.button {
		width: 100%;
		height: 50px;
		background-image: linear-gradient(to right, #dbb370, #ecd097);
		color: #fff;
		padding: 15px 10px;
		// margin: 8px 20px;
		border-radius: 23pt;
	}

	span {
		// margin: 30px;
		font-weight: bold;
	}

	span:nth-child(1) {
		margin-left: 30px;
	}

	span:nth-child(2) {
		margin-left: 70px;
	}

	span:nth-child(3) {
		margin-left: 80px;
	}

	.content {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		// margin-top: 10px;
		padding: 0px 10px 10px 10px;
		overflow: auto;
		// background-color: #999;
	}

	.uni-list {
		height: 100%;
	}

	.page-view {
		width: 100vw;
		height: 100vh;
		// overflow-y: scroll;
	}

	.mask {
		width: 100%;
		height: 100%;
		position: fixed;
		left: 0;
		top: 0;
		background-color: #999;
		z-index: 9999;
		top: 0;
		left: 0;
		opacity: 0.5;
	}

	.cell {
		display: flex;
		//align-items: flex-start;
		align-items: center;
		justify-content: space-between;
		padding: 10px 5px;
		border: gainsboro;
		border-radius: 25pt;

		// background-color: #F5F6F7 ;
		.title {
			margin-left: 20px;
			width: 30%;
		}

		.btn {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-image: linear-gradient(to right, #5ECD90, #66DDA0);
			padding: 6px 15px;
			border-radius: 20px;
			width: 100px;
			color: #fff;
			font-size: 12px;
			margin-right: 20px;

			.icon {
				width: 18px;
				height: 18px
			}
		}
	}

累了 收工！