diff --git a/Laravel/app/Http/Controllers/ViewController.php b/Laravel/app/Http/Controllers/ViewController.php index ca4dd18..37f9019 100644 --- a/Laravel/app/Http/Controllers/ViewController.php +++ b/Laravel/app/Http/Controllers/ViewController.php @@ -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, ]); } diff --git a/Laravel/public/assets/css/layout.css b/Laravel/public/assets/css/layout.css index 1192f22..24a0af0 100644 --- a/Laravel/public/assets/css/layout.css +++ b/Laravel/public/assets/css/layout.css @@ -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; +} diff --git a/Laravel/public/assets/images/ad1.png b/Laravel/public/assets/images/ad1.png new file mode 100644 index 0000000..9c69b20 Binary files /dev/null and b/Laravel/public/assets/images/ad1.png differ diff --git a/Laravel/public/assets/images/ad2.png b/Laravel/public/assets/images/ad2.png new file mode 100644 index 0000000..865f67e Binary files /dev/null and b/Laravel/public/assets/images/ad2.png differ diff --git a/Laravel/public/assets/images/ad3.png b/Laravel/public/assets/images/ad3.png new file mode 100644 index 0000000..ceaa921 Binary files /dev/null and b/Laravel/public/assets/images/ad3.png differ diff --git a/Laravel/public/assets/images/banner.png b/Laravel/public/assets/images/banner.png new file mode 100644 index 0000000..4f451c6 Binary files /dev/null and b/Laravel/public/assets/images/banner.png differ diff --git a/Laravel/resources/views/components/header.blade.php b/Laravel/resources/views/components/header.blade.php index b2e2855..130f277 100644 --- a/Laravel/resources/views/components/header.blade.php +++ b/Laravel/resources/views/components/header.blade.php @@ -1,3 +1,51 @@
- Header +
+
+ + 秦皇岛 +
+ 切换城市 + +
+
+
+ +
关注公众号
+
企业团检
+
客户案例
+
+
+
+
+ 体检平台 +
+
+
+ +
+ +
+
+
+
女性
+
男性
+
入职
+
父母
+
高端
+
+
+
+
+
4000-3333-2222
+
客服在线时间：07:30 - 22:00
+
+
+
公立医院授权
+
海量三甲医生在线咨询
+
+
+
diff --git a/Laravel/resources/views/home/home.blade.php b/Laravel/resources/views/home/home.blade.php index 3d1a64c..f56dcdc 100644 --- a/Laravel/resources/views/home/home.blade.php +++ b/Laravel/resources/views/home/home.blade.php @@ -1,5 +1,46 @@ @extends('layout.layout') @section('content') + +
+
+ +
+
+ +
+
+ +
+
精选套餐
@@ -25,4 +66,32 @@ @endforeach
+
+
+
体检机构
+
+
+ @foreach($hospitals as $hospital) + +
+ @if($hospital->logo != '') + + @else +
暂无封面图
+ @endif +
+
{{ $hospital->name }}
+
+ + {{ $hospital->address }} +
+
+ @foreach($hospital->tags_arr as $tag) +
{{ $tag }}
+ @endforeach +
+ + @endforeach +
+
@endsection diff --git a/Laravel/resources/views/home/home.css b/Laravel/resources/views/home/home.css index 55eb397..b1a661f 100644 --- a/Laravel/resources/views/home/home.css +++ b/Laravel/resources/views/home/home.css @@ -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; }