zhangyan
/
TiJianQiYeZhan
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1. 首页 套餐详情

Browse Source
main
鹿和sa0ChunLuyu 1 year ago
parent 4bc49f48dc
commit f8a887dabc
9 changed files with 390 additions and 4 deletions
Show Stats Download Patch File Download Diff File

10
Laravel/app/Http/Controllers/ViewController.php
Unescape Escape View File

@ -33,8 +33,16 @@ class ViewController extends Controller
foreach ($combos as $combo) {
$combo->tags_arr = json_decode($combo->tags, true);
}
$hospital_list = DB::table('hospital')
->whereIn('id', $hospital_ids)
->limit(8)
->get();
foreach ($hospital_list as $hospital) {
$hospital->tags_arr = json_decode($hospital->tags, true);
}
return view('home.home', [
'combos' => $combos
'combos' => $combos,
'hospitals' => $hospital_list,
]);
}

156
Laravel/public/assets/css/layout.css
Unescape Escape View File

@ -3,3 +3,159 @@
--style-color-2: #d35050;
--style-color-3: #aee3ab;
}
.header_info_wrapper {
display: flex;
align-items: center;
margin-left: 50px;
}
.header_info_chat_wrapper {
margin-left: 50px;
}
.header_info_tel_number_wrapper,
.header_info_chat_number_wrapper {
font-size: 26px;
}
.header_info_tel_tip_wrapper,
.header_info_chat_tip_wrapper {
font-size: 16px;
color: #8c939d;
margin-top: 5px;
}
.header_search_input_input_wrapper {
width: 700px;
height: 100%;
line-height: 50px;
padding: 0 20px;
}
.header_search_input_icon_wrapper {
width: 100px;
height: 100%;
background: var(--style-color-1);
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.header_search_tags_wrapper {
display: flex;
align-items: center;
flex-wrap: wrap;
margin-top: 10px;
}
.header_search_tag_wrapper {
padding: 5px 10px;
color: #737373;
background: #f7f7f7;
border-radius: 6px;
margin-right: 10px;
cursor: pointer;
}
.header_search_wrapper {
margin-left: 30px;
}
.header_search_input_wrapper {
display: flex;
align-items: center;
border: 1px solid var(--style-color-1);
height: 50px;
width: 800px;
}
.header_top_wrapper {
display: none;
height: 40px;
/*display: flex;*/
justify-content: space-between;
align-items: center;
padding: 0 20px;
font-size: 14px;
color: #888888;
background: #f5f5f5;
}
.header_space_wrapper {
display: flex;
align-items: center;
}
.header_top_nav_wrapper {
margin: 0 5px;
cursor: pointer;
}
.header_user_wrapper {
display: flex;
align-items: center;
cursor: pointer;
}
.header_login_wrapper:hover {
font-weight: bold;
color: #333333;
}
.header_box_wrapper {
display: flex;
align-items: center;
justify-content: center;
width: calc(100% - 40px);
margin: 20px auto 0;
}
.header_logo_wrapper {
width: 200px;
height: 100px;
text-align: center;
line-height: 100px;
font-size: 30px;
}
.header_top_nav_wrapper:hover {
font-weight: bold;
color: #333333;
}
.header_login_text_wrapper {
margin-left: 5px;
margin-right: 20px;
}
.header_login_wrapper {
display: flex;
align-items: center;
}
.header_space_icon_wrapper {
color: var(--style-color-1);
}
.header_space_text_wrapper {
margin-left: 5px;
}
.header_change_space_wrapper {
display: flex;
align-items: center;
margin-left: 20px;
cursor: pointer;
}
.header_change_space_wrapper:hover {
font-weight: bold;
color: #333333;
}
.header_change_space_icon_wrapper {
margin-left: 5px;
}

BIN
Laravel/public/assets/images/ad1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 67 KiB

BIN
Laravel/public/assets/images/ad2.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 63 KiB

BIN
Laravel/public/assets/images/ad3.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 56 KiB

BIN
Laravel/public/assets/images/banner.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 317 KiB

50
Laravel/resources/views/components/header.blade.php
Unescape Escape View File

@ -1,3 +1,51 @@
<div class="header_wrapper">
Header
<div class="header_top_wrapper">
<div class="header_space_wrapper">
<i class="header_space_icon_wrapper czs-location"></i>
<span class="header_space_text_wrapper">秦皇岛</span>
<div class="header_change_space_wrapper">
<span>切换城市</span>
<i class="header_change_space_icon_wrapper czs-angle-down-l"></i>
</div>
</div>
<div class="header_user_wrapper">
<div class="header_login_wrapper">
<i class="czs-user"></i>
<span class="header_login_text_wrapper">登录/免费注册</span>
</div>
<div class="header_top_nav_wrapper">关注公众号</div>
<div class="header_top_nav_wrapper">企业团检</div>
<div class="header_top_nav_wrapper">客户案例</div>
</div>
</div>
<div class="header_box_wrapper">
<div class="header_logo_wrapper">
体检平台
</div>
<div class="header_search_wrapper">
<div class="header_search_input_wrapper">
<input class="header_search_input_input_wrapper" type="text">
<div class="header_search_input_icon_wrapper">
<i class="czs-search-l"></i>
</div>
</div>
<div class="header_search_tags_wrapper">
<div class="header_search_tag_wrapper">女性</div>
<div class="header_search_tag_wrapper">男性</div>
<div class="header_search_tag_wrapper">入职</div>
<div class="header_search_tag_wrapper">父母</div>
<div class="header_search_tag_wrapper">高端</div>
</div>
</div>
<div class="header_info_wrapper">
<div class="header_info_tel_wrapper">
<div class="header_info_tel_number_wrapper">4000-3333-2222</div>
<div class="header_info_tel_tip_wrapper">客服在线时间：07:30 - 22:00</div>
</div>
<div class="header_info_chat_wrapper">
<div class="header_info_chat_number_wrapper">公立医院授权</div>
<div class="header_info_chat_tip_wrapper">海量三甲医生在线咨询</div>
</div>
</div>
</div>
</div>

69
Laravel/resources/views/home/home.blade.php
Unescape Escape View File

@ -1,5 +1,46 @@
@extends('layout.layout')
@section('content')
<div class="banner_wrapper">
<div class="banner_nav_wrapper">
<div class="banner_nav_button_wrapper">快捷菜单</div>
<div class="banner_nav_group_wrapper">
<div class="banner_nav_group_item_wrapper">权威医院</div>
<div class="banner_nav_group_item_wrapper">精选套餐</div>
<div class="banner_nav_group_item_wrapper">健康科普</div>
<div class="banner_nav_group_item_wrapper">体检采购平台</div>
</div>
</div>
<div class="banner_menu_wrapper">
<div class="banner_menu_list_wrapper">
<div class="banner_menu_item_wrapper">
<div class="banner_menu_item_title_wrapper">体检套餐</div>
<div class="banner_menu_item_subtitle_wrapper">适应人群 高发疾病</div>
</div>
<div class="banner_menu_item_wrapper">
<div class="banner_menu_item_title_wrapper">体检机构</div>
<div class="banner_menu_item_subtitle_wrapper">公立医院 体检机构</div>
</div>
<div class="banner_menu_item_wrapper">
<div class="banner_menu_item_title_wrapper">体检采购平台</div>
<div class="banner_menu_item_subtitle_wrapper">企业采购体检 安全可靠</div>
</div>
</div>
<div class="banner_menu_cover_wrapper">
<img src="./assets/images/banner.png" alt="">
</div>
</div>
</div>
<div class="ad_wrapper">
<div class="ad_item_wrapper">
<img src="./assets/images/ad1.png" alt="">
</div>
<div class="ad_item_wrapper">
<img src="./assets/images/ad2.png" alt="">
</div>
<div class="ad_item_wrapper">
<img src="./assets/images/ad3.png" alt="">
</div>
</div>
<div class="combo_wrapper">
<div class="combo_top_wrapper">
<div class="combo_title_wrapper">精选套餐</div>
@ -25,4 +66,32 @@
@endforeach
</div>
</div>
<div class="combo_wrapper">
<div class="combo_top_wrapper">
<div class="combo_title_wrapper">体检机构</div>
</div>
<div class="combo_list_wrapper">
@foreach($hospitals as $hospital)
<a class="combo_item_wrapper">
<div class="combo_cover_wrapper">
@if($hospital->logo != '')
<img src="{{ $hospital->logo }}" alt="">
@else
<div>暂无封面图</div>
@endif
</div>
<div class="combo_name_wrapper">{{ $hospital->name }}</div>
<div class="hospital_address_wrapper">
<i class="hospital_address_icon_wrapper czs-location"></i>
<span class="hospital_address_text_wrapper">{{ $hospital->address }}</span>
</div>
<div class="combo_tags_wrapper">
@foreach($hospital->tags_arr as $tag)
<div class="combo_tag_wrapper">{{ $tag }}</div>
@endforeach
</div>
</a>
@endforeach
</div>
</div>
@endsection

109
Laravel/resources/views/home/home.css
Unescape Escape View File

@ -4,7 +4,112 @@
font-weight: bold;
}
.combo_price_wrapper{
.hospital_address_text_wrapper {
margin-left: 5px;
width: calc(100% - 50px);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.hospital_address_icon_wrapper {
color: var(--style-color-1);
}
.hospital_address_wrapper {
display: flex;
align-items: center;
line-height: 40px;
}
.ad_item_wrapper {
width: 380px;
height: 150px;
margin: 5px;
}
.ad_item_wrapper img {
width: 380px;
height: 150px;
}
.ad_wrapper {
display: flex;
align-items: center;
justify-content: space-around;
width: 1200px;
margin: 20px auto 0;
}
.banner_menu_list_wrapper {
height: 450px;
width: 200px;
}
.banner_menu_cover_wrapper {
height: 450px;
width: 1000px;
}
.banner_menu_cover_wrapper img {
height: 450px;
width: 1000px;
object-fit: cover;
}
.banner_menu_wrapper {
background: #747b80;
color: #ffffff;
display: flex;
}
.banner_menu_item_title_wrapper {
font-size: 18px;
font-weight: bold;
}
.banner_menu_item_subtitle_wrapper {
font-size: 14px;
margin-top: 10px;
}
.banner_menu_item_wrapper {
padding-left: 30px;
margin-top: 20px;
display: none;
}
.banner_wrapper {
width: 1200px;
margin: 20px auto 0;
}
.banner_nav_group_item_wrapper {
width: 200px;
text-align: center;
height: 50px;
line-height: 50px;
}
.banner_nav_group_wrapper {
display: flex;
align-items: center;
}
.banner_nav_button_wrapper {
background: var(--style-color-1);
color: #ffffff;
height: 50px;
line-height: 50px;
width: 200px;
padding-left: 30px;
}
.banner_nav_wrapper {
display: flex;
}
.combo_price_wrapper {
font-size: 24px;
color: var(--style-color-2);
font-weight: bold;
@ -63,5 +168,5 @@
.combo_wrapper {
width: 1200px;
margin: 0 auto;
margin: 20px auto 0;
}

Write Preview
Loading…
Cancel
Save