<template>
	<!--轮播图-->
	<el-row :gutter="20">
		<el-col :span="14">
			<div class="h-300px">
				<carousel></carousel>
			</div>
		</el-col>
		<el-col :span="10">

			<div class="container">
				<div class="header">
					<div class="header-title">医生入口</div>
					<div class="status" @click="router.push('/login')">点击登录</div>
				</div>
				<div class="alert">
					<p class="alert-message">放心就医在线提示</p>
					<p class="alert-description">
						放心就医在线是医学沟通平台，医生基于患者自述病情所发布的言论仅供参考，不能作为诊断和治疗的直接依据。
					</p>
				</div>
				<div class="doctor-count">
					<p>医生在线解答</p>
					<button class="consult-btn" @click="router.push('/list')">立即咨询</button>
				</div>
			</div>

<!--			<div class="h-250px hot" >-->
<!--				<el-space wrap>-->
<!--					<div v-for="item in state.commit" :key="i" style="margin-top: 10px;">-->
<!--						<el-button  text style="width: 290px" 	@click="to(item.id)">{{item.title}} </el-button>-->
<!--					</div>-->
<!--				</el-space>-->
<!--			</div>-->
		</el-col>

	</el-row>

<!--	<el-row>-->
<!--		<el-col :span="24">-->
<!--			<el-card shadow="hover">-->
<!--				<template #header>-->
<!--					<div class="card-header">-->
<!--						<span class="title_com2">医生介绍</span>-->
<!--					</div>-->
<!--				</template>-->
<!--				-->
<!--				<div style="wi">-->
<!--					-->
<!--				</div>-->
<!--				-->
<!--				-->
<!--			</el-card>-->

<!--		</el-col>-->
<!--	</el-row>-->
	<!--	推荐商品列表-->
	<item :get-list=state.getList></item>

</template>
<script setup lang="ts">
import Carousel from '~/components/front/carousel.vue'
import Item from '~/components/front/item.vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const  state = reactive({
	getList: [],
	commit: [],
})

// frontRequest.get("/api/user/userInfo").then(response =>{
// 	user.frontUserInfo = response.data
// })

onMounted(()=>{
	frontRequest.get("/api/doctors/page").then(res =>{
		state.getList = res.data.list
	})

	// frontRequest.get("/api/item/commit").then(res =>{
	// 	state.commit = res.data
	// })
})
/**
 * 跳转
 */
const to = (id:number) => {
	router.push(`/list/${id}`)
}

</script>
<style scoped>
.container {
	width: 100%;
	font-family: Arial, sans-serif;
}

.header {
	display: flex;
	justify-content: space-between;
	padding: 15px;
	background-color: #4d90fe;
	color: white;
}

.header-title {
	font-size: 20px;
}

.status {
	font-size: 14px;
	cursor: pointer;
}

.alert {
	margin-top: 20px;
	padding: 15px;
	background-color: #f2f2f2;
	border-radius: 5px;
}

.alert-message {
	font-weight: bold;
	color: #333;
}

.alert-description {
	color: #666;
	font-size: 14px;
}

.doctor-count {
	margin-top: 30px;
	text-align: center;
}

.doctor-count p {
	font-size: 16px;
	color: #333;
}

.consult-btn {
	padding: 10px 20px;
	background-color: #ff7f50;
	color: white;
	border: none;
	border-radius: 5px;
	cursor: pointer;
}

.consult-btn:hover {
	background-color: #e75b3b;
}


.hot {
	background-color: rgba(0, 0, 0, 0.2); /* 更浅的黑色 */
	border-radius: 10px; /* 四周圆弧，值可以根据需要调整 */
}
:deep(.el-button){
	color: #2e191e;
	font-weight: 700;
}
:deep(.el-button:hover) {
	background-color: black;
}
</style>
<route lang="json">
{
"meta": {
"layout": "front"
}
}
</route>
