用戶系統首頁顯示

• 1、公共處理
• • 1.1、添加靜態資源
  • 1.2、定義布局
  • • 1.2.1、修改默認布局
    • 1.2.2、提取頭文件
    • 1.2.3、提取尾文件
    • 1.2.4、默認布局引入頭尾文件
• 2、首頁內容引入
• • 2.1、引入首頁靜態頁面
  • 2.2、首頁數據分析

1、公共處理

1.1、添加靜態資源

將靜態資源下面的css、images文件夾添加到assets目錄，如圖：

1.2、定義布局

1.2.1、修改默認布局

參考靜態資源文件首頁，我們可以把頁頭和頁尾提取出來，形成布局頁。

在layouts目錄下修改默認布局文件default.vue，將主內容區域的內容替換成

修改layouts/default.vue文件

<template><div class="app-container"><div id="main"><!-- 公共頭 --><myheader/><div class="main-container"><el-scrollbar class='page-component__scroll'><!-- 內容區域 --><nuxt/></el-scrollbar></div><!-- 公共底 --><myfooter/></div></div> </template> <script> import '~/assets/css/app.css' import '~/assets/css/chunk.css' import '~/assets/css/iconfont.css' import '~/assets/css/main.css' export default {} </script>

1.2.2、提取頭文件

創建layouts/myheader.vue文件

<template><div class="header-container"><div class="wrapper"><!-- logo --><div class="left-wrapper v-link selected"><img style="width: 50px" width="50" height="50" src="~assets/images/logo.png"><span class="text">尚醫通 預約掛號統一平臺</span></div><!-- 搜索框 --><div class="search-wrapper"><div class="hospital-search animation-show"><el-autocompleteclass="search-input small"prefix-icon="el-icon-search"v-model="state":fetch-suggestions="querySearchAsync"placeholder="點擊輸入醫院名稱"@select="handleSelect"><span slot="suffix" class="search-btn v-link highlight clickable selected">搜索 </span></el-autocomplete></div></div><!-- 右側 --><div class="right-wrapper"><span class="v-link clickable">幫助中心</span><!-- <el-dropdown >--><!-- <span class="el-dropdown-link">--><!-- 晴天<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>--><!-- </span>--><!-- <el-dropdown-menu class="user-name-wrapper" slot="dropdown">--><!-- <el-dropdown-item>掛號訂單</el-dropdown-item>--><!-- <el-dropdown-item>就診人管理</el-dropdown-item>--><!-- <el-dropdown-item divided>退出登錄</el-dropdown-item>--><!-- </el-dropdown-menu>--><!-- </el-dropdown>--><span class="v-link clickable" @click="dialogUserFormVisible = true">登錄/注冊</span></div></div></div> </template> <script> export default { } </script>

1.2.3、提取尾文件

創建layouts/myfooter.vue文件

<template><div class="footer-container"><div class="wrapper"><div><span class="record">京ICP備13018369號</span><spanclass="phone">電話掛號010-56253825</span></div><div class="right"><spanclass="v-link clickable"> 聯系我們 </span><spanclass="v-link clickable"> 合作伙伴 </span><spanclass="v-link clickable"> 用戶協議 </span><spanclass="v-link clickable"> 隱私協議 </span></div></div></div> </template> <script> export default { } </script>

1.2.4、默認布局引入頭尾文件

修改layouts/default.vue文件

<script> import '~/assets/css/app.css' import '~/assets/css/chunk.css' import '~/assets/css/iconfont.css' import '~/assets/css/main.css'import myheader from './myheader' import myfooter from './myfooter' export default {components: {myheader,myfooter}} </script>

啟動項目：npm run dev
訪問項目：http://localhost:3000/

2、首頁內容引入

2.1、引入首頁靜態頁面

修改pages/inde.vue文件

<template><div class="home page-component"><el-carousel indicator-position="outside"><el-carousel-item v-for="item in 2" :key="item"><img src="~assets/images/web-banner1.png" alt=""></el-carousel-item></el-carousel><!-- 搜索 --><div class="search-container"><div class="search-wrapper"><div class="hospital-search"><el-autocompleteclass="search-input"prefix-icon="el-icon-search"v-model="state":fetch-suggestions="querySearchAsync"placeholder="點擊輸入醫院名稱"@select="handleSelect"><span slot="suffix" class="search-btn v-link highlight clickable selected">搜索 </span></el-autocomplete></div></div></div><!-- bottom --><div class="bottom"><div class="left"><div class="home-filter-wrapper"><div class="title"> 醫院</div><div><div class="filter-wrapper"><spanclass="label">等級：</span><div class="condition-wrapper"><spanclass="item v-link highlight clickable selected">全部 </span><spanclass="item v-link clickable">三級醫院 </span><spanclass="item v-link clickable">二級醫院 </span><spanclass="item v-link clickable">一級醫院 </span></div></div><div class="filter-wrapper"><spanclass="label">地區：</span><div class="condition-wrapper"><spanclass="item v-link highlight clickable selected">全部 </span><spanclass="item v-link clickable">東城區 </span><spanclass="item v-link clickable">西城區 </span><spanclass="item v-link clickable">朝陽區 </span><spanclass="item v-link clickable">豐臺區 </span><spanclass="item v-link clickable">石景山區 </span><spanclass="item v-link clickable">海淀區 </span><spanclass="item v-link clickable">門頭溝區 </span><spanclass="item v-link clickable">房山區 </span><spanclass="item v-link clickable">通州區 </span><spanclass="item v-link clickable">順義區 </span><spanclass="item v-link clickable">昌平區 </span><spanclass="item v-link clickable">大興區 </span><spanclass="item v-link clickable">懷柔區 </span><spanclass="item v-link clickable">平谷區 </span><spanclass="item v-link clickable">密云區 </span><spanclass="item v-link clickable">延慶區 </span></div></div></div></div><div class="v-scroll-list hospital-list"><div class="v-card clickable list-item"><div class=""><divclass="hospital-list-item hos-item" index="0"><div class="wrapper"><div class="hospital-title"> 北京協和醫院</div><div class="bottom-container"><divclass="icon-wrapper"><spanclass="iconfont"></span>三級甲等</div><divclass="icon-wrapper"><spanclass="iconfont"></span>每天8:30放號</div></div></div><imgsrc="images/23176337663806575.png"alt="北京協和醫院" class="hospital-img"></div></div></div><div class="v-card clickable list-item space"><div class=""><divclass="hospital-list-item hos-item" index="0"><div class="wrapper"><div class="hospital-title"> 北京協和醫院</div><div class="bottom-container"><divclass="icon-wrapper"><spanclass="iconfont"></span>三級甲等</div><divclass="icon-wrapper"><spanclass="iconfont"></span>每天8:30放號</div></div></div><imgsrc="images/23176337663806575.png"alt="北京協和醫院" class="hospital-img"></div></div></div><div class="v-card clickable list-item"><div class=""><div class="hospital-list-item hos-item" index="0"><div class="wrapper"><div class="hospital-title"> 北京協和醫院</div><div class="bottom-container"><divclass="icon-wrapper"><spanclass="iconfont"></span>三級甲等</div><divclass="icon-wrapper"><spanclass="iconfont"></span>每天8:30放號</div></div></div><imgsrc="images/23176337663806575.png"alt="北京協和醫院" class="hospital-img"></div></div></div></div></div><div class="right"><div class="common-dept"><div class="header-wrapper"><div class="title"> 常見科室</div><div class="all-wrapper"><span>全部</span><span class="iconfont icon"></span></div></div><div class="content-wrapper"><span class="item v-link clickable dark">神經內科 </span><span class="item v-link clickable dark">消化內科 </span><span class="item v-link clickable dark">呼吸內科 </span><span class="item v-link clickable dark">內科 </span><span class="item v-link clickable dark">神經外科 </span><span class="item v-link clickable dark">婦科 </span><span class="item v-link clickable dark"> 產科 </span><span class="item v-link clickable dark">兒科 </span></div></div><div class="space"><div class="header-wrapper"><div class="title-wrapper"><div class="icon-wrapper"><spanclass="iconfont title-icon"></span></div><span class="title">平臺公告</span></div><div class="all-wrapper"><span>全部</span><span class="iconfont icon"></span></div></div><div class="content-wrapper"><div class="notice-wrapper"><div class="point"></div><span class="notice v-link clickable dark">關于延長北京大學國際醫院放假的通知 </span></div><div class="notice-wrapper"><div class="point"></div><span class="notice v-link clickable dark">北京中醫藥大學東方醫院部分科室醫生門診醫 </span></div><div class="notice-wrapper"><div class="point"></div><span class="notice v-link clickable dark"> 武警總醫院號源暫停更新通知 </span></div></div></div><div class="suspend-notice-list space"><div class="header-wrapper"><div class="title-wrapper"><div class="icon-wrapper"><span class="iconfont title-icon"></span></div><span class="title">停診公告</span></div><div class="all-wrapper"><span>全部</span><span class="iconfont icon"></span></div></div><div class="content-wrapper"><div class="notice-wrapper"><div class="point"></div><span class="notice v-link clickable dark"> 中國人民解放軍總醫院第六醫學中心(原海軍總醫院)呼吸內科門診停診公告 </span></div><div class="notice-wrapper"><div class="point"></div><span class="notice v-link clickable dark"> 首都醫科大學附屬北京潞河醫院老年醫學科門診停診公告 </span></div><div class="notice-wrapper"><div class="point"></div><span class="notice v-link clickable dark">中日友好醫院中西醫結合心內科門診停診公告 </span></div></div></div></div></div></div> </template> <script> export default { } </script>

啟動項目yygh-site-user:

npm run dev

首頁效果圖如下：

2.2、首頁數據分析

1，獲取醫院等級（根據數據字典編碼獲取）
2，獲取地區（根據數據字典編碼獲取）
3，醫院分頁列表
4，根據醫院名稱關鍵字搜索醫院列表

總結

以上是生活随笔為你收集整理的用户系统首页显示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。