用戶系統(tǒng)首頁顯示

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

1、公共處理

1.1、添加靜態(tài)資源

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

1.2、定義布局

1.2.1、修改默認(rèn)布局

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

在layouts目錄下修改默認(rèn)布局文件default.vue，將主內(nèi)容區(qū)域的內(nèi)容替換成

修改layouts/default.vue文件

<template><div class="app-container"><div id="main"><!-- 公共頭 --><myheader/><div class="main-container"><el-scrollbar class='page-component__scroll'><!-- 內(nèi)容區(qū)域 --><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、提取頭文件

創(chuàng)建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">尚醫(yī)通 預(yù)約掛號統(tǒng)一平臺</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="點擊輸入醫(yī)院名稱"@select="handleSelect"><span slot="suffix" class="search-btn v-link highlight clickable selected">搜索 </span></el-autocomplete></div></div><!-- 右側(cè) --><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、提取尾文件

創(chuàng)建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"> 聯(lián)系我們 </span><spanclass="v-link clickable"> 合作伙伴 </span><spanclass="v-link clickable"> 用戶協(xié)議 </span><spanclass="v-link clickable"> 隱私協(xié)議 </span></div></div></div> </template> <script> export default { } </script>

1.2.4、默認(rèn)布局引入頭尾文件

修改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、首頁內(nèi)容引入

2.1、引入首頁靜態(tài)頁面

修改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="點擊輸入醫(yī)院名稱"@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"> 醫(yī)院</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">三級醫(yī)院 </span><spanclass="item v-link clickable">二級醫(yī)院 </span><spanclass="item v-link clickable">一級醫(yī)院 </span></div></div><div class="filter-wrapper"><spanclass="label">地區(qū)：</span><div class="condition-wrapper"><spanclass="item v-link highlight clickable selected">全部 </span><spanclass="item v-link clickable">東城區(qū) </span><spanclass="item v-link clickable">西城區(qū) </span><spanclass="item v-link clickable">朝陽區(qū) </span><spanclass="item v-link clickable">豐臺區(qū) </span><spanclass="item v-link clickable">石景山區(qū) </span><spanclass="item v-link clickable">海淀區(qū) </span><spanclass="item v-link clickable">門頭溝區(qū) </span><spanclass="item v-link clickable">房山區(qū) </span><spanclass="item v-link clickable">通州區(qū) </span><spanclass="item v-link clickable">順義區(qū) </span><spanclass="item v-link clickable">昌平區(qū) </span><spanclass="item v-link clickable">大興區(qū) </span><spanclass="item v-link clickable">懷柔區(qū) </span><spanclass="item v-link clickable">平谷區(qū) </span><spanclass="item v-link clickable">密云區(qū) </span><spanclass="item v-link clickable">延慶區(qū) </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"> 北京協(xié)和醫(yī)院</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="北京協(xié)和醫(yī)院" 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"> 北京協(xié)和醫(yī)院</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="北京協(xié)和醫(yī)院" 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"> 北京協(xié)和醫(yī)院</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="北京協(xié)和醫(yī)院" 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">神經(jīng)內(nèi)科 </span><span class="item v-link clickable dark">消化內(nèi)科 </span><span class="item v-link clickable dark">呼吸內(nèi)科 </span><span class="item v-link clickable dark">內(nèi)科 </span><span class="item v-link clickable dark">神經(jīng)外科 </span><span class="item v-link clickable dark">婦科 </span><span class="item v-link clickable dark"> 產(chǎn)科 </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">關(guān)于延長北京大學(xué)國際醫(yī)院放假的通知 </span></div><div class="notice-wrapper"><div class="point"></div><span class="notice v-link clickable dark">北京中醫(yī)藥大學(xué)東方醫(yī)院部分科室醫(yī)生門診醫(yī) </span></div><div class="notice-wrapper"><div class="point"></div><span class="notice v-link clickable dark"> 武警總醫(yī)院號源暫停更新通知 </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"> 中國人民解放軍總醫(yī)院第六醫(yī)學(xué)中心(原海軍總醫(yī)院)呼吸內(nèi)科門診停診公告 </span></div><div class="notice-wrapper"><div class="point"></div><span class="notice v-link clickable dark"> 首都醫(yī)科大學(xué)附屬北京潞河醫(yī)院老年醫(yī)學(xué)科門診停診公告 </span></div><div class="notice-wrapper"><div class="point"></div><span class="notice v-link clickable dark">中日友好醫(yī)院中西醫(yī)結(jié)合心內(nèi)科門診停診公告 </span></div></div></div></div></div></div> </template> <script> export default { } </script>

啟動項目yygh-site-user:

npm run dev

首頁效果圖如下：

2.2、首頁數(shù)據(jù)分析

1，獲取醫(yī)院等級（根據(jù)數(shù)據(jù)字典編碼獲取）
2，獲取地區(qū)（根據(jù)數(shù)據(jù)字典編碼獲取）
3，醫(yī)院分頁列表
4，根據(jù)醫(yī)院名稱關(guān)鍵字搜索醫(yī)院列表

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。