xw_admin/src/views/maintenance/index.vue

<template>
	<div class="mainServeBody">
		<commonPage title="个人中心"></commonPage>
		<el-main class="serveMain">
			<el-scrollbar class="mainScroll">
				<div class="pageBody">
					<div class="rowView">
						<div class="rowList">
							<div class="colItem" v-for="(item,index) in list" :key="index">
								<el-icon size="60" v-if="item.icon"><component :is="item.icon"/></el-icon>
								<div class="name">
									{{item.name}}
									<el-icon size="30"><sc-icon-ArrowRightServe/></el-icon>
								</div>
							</div>
						</div>
					</div>
					<div class="recommend">
						<div class="title">智能推荐</div>
						<div class="mainView">
							<div class="viewItem" v-for="(item,index) in recommendList" :key="index" :style="{'background':item.color,'left':item.left,'top':item.top,'zIndex':index+1}">{{item.name}}</div>
						</div>
					</div>
					<div class="history">
						<div class="title">搜索历史</div>
						<div class="mainView">
							<div class="viewItem" v-for="(item,index) in historyList" :key="index">{{item.name}}</div>
						</div>
					</div>
				</div>
				<footerPage></footerPage>
			</el-scrollbar>

			<!--客服-->
			<div class="customerBox">
				<el-image class="img" src="/img/CustomerService.svg"></el-image>
			</div>
		</el-main>
	</div>
</template>

<script>
import commonPage from "@/views/serveView/components/commonPage";
import footerPage from "@/views/serveView/components/footerPage";
export default {
	name: "index",
	components:{
		commonPage,
		footerPage
	},
	data(){
		return{
			list:[
				{name:"技术支持与服务",icon:"sc-icon-TechnicalSupport",url:''},
				{name:"常见问题",icon:"sc-icon-Problem",url:''},
				{name:"咨询与联系方式",icon:"sc-icon-SeekAdviceFrom",url:''},
				{name:"其他",icon:"sc-icon-OtherServe",url:''},
			],
			recommendList:[
				{name:'维保期限查询',color:'#436FFF',left:'2%',top:'2%'},
				{name:'主控部件查询',color:'#FF8543',left:'15%',top:'10%'},
				{name:'智能客服',color:'#22D3F6',left:'28%',top:'5%'},
				{name:'我的产品',color:'#0FCA44',left:'40%',top:'8%'},
				{name:'订单号查询',color:'#FBCA0A',left:'70%',top:'2%'},
				{name:'主控部件查询',color:'#FF8543',left:'57%',top:'12%'},
				{name:'我的产品',color:'#FF8543',left:'77%',top:'62%'},
				{name:'主控部件查询',color:'#FF8543',left:'57%',top:'12%'},
				{name:'问题单',color:'#FF4B51',left:'6%',top:'32%'},
				{name:'主控部件查询',color:'#FF8543',left:'17%',top:'47%'},
				{name:'我的产品',color:'#0FCA44',left:'32%',top:'42%'},
				{name:'问题单',color:'#FF4B51',left:'46%',top:'32%'},
				{name:'维保期限查询',color:'#436FFF',left:'72%',top:'32%'},
				{name:'订单号查询',color:'#FBCA0A',left:'52%',top:'58%'},
			],
			historyList:[
				{name:'搜索历史文案占位……'},
				{name:'搜索历史文案占位……'},
				{name:'搜索历史文案占位……'},
				{name:'维保工单'},
				{name:'维保工单'},
				{name:'维保工单'},
				{name:'维保工单'},
				{name:'维保工单'},
				{name:'维保工单'},
				{name:'维保工单'},
			]
		}
	}
}
</script>

<style scoped lang="scss">
.mainServeBody{
	height: 100%;
	display: flex;
	flex-direction: column;
	background: #fff;
	.serveMain{
		flex: 1;
		overflow: hidden;
		padding: 0;
		border-radius: 0;
		.pageBody{
			height: 100%;
			display: flex;
			flex-direction: column;
			.rowView{
				width: 100%;
				height: 320px;
				padding: 2%;
			}
			.rowList{
				height: 100%;
				display: flex;
				border: 1px solid #aaa;
				.colItem{
					flex: 1;
					border-right: 1px solid #aaa;
					padding: 20px;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.name{
						display: flex;
						align-items: center;
						justify-content: space-between;
						font-size: 18px;
					}
				}
				.colItem:last-child{
					border-right: 0;
				}
			}
			.recommend{
				.title{
					padding:0 2%;
					height: 80px;
					display: flex;
					align-items: center;
					font-size: 22px;
				}
				.mainView{
					padding: 20px 2%;
					background: #F8F8F8;
					display: flex;
					justify-content: flex-start;
					flex-wrap: wrap;
					position: relative;
					height: 300px;
					.viewItem{
						padding: 20px 60px;
						border-radius: 50px;
						color: #fff;
						margin: 20px;
						font-size: 16px;
						position: absolute;
					}
				}
			}
			.history{
				.title{
					padding:0 2%;
					height: 80px;
					display: flex;
					align-items: center;
					border-bottom: 1px solid #f0f0f0;
					font-size: 22px;
				}
				.mainView{
					padding: 20px 2% 80px 2%;
					display: flex;
					flex-wrap: wrap;
					.viewItem{
						width: 33%;
						padding: 10px 0;
						font-size: 16px;
					}
				}
			}
		}
	}
}

.customerBox{
	position: fixed;
	right: 40px;
	bottom: 80px;
	z-index: 10;
	.img{
		width: 80px;
		height: 80px;
	}
}
</style>