new

v3-admin/package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.1",
+    "axios": "^1.6.8",
     "element-plus": "^2.6.1",
     "sass": "^1.71.1",
     "vue": "^3.4.21",

v3-admin/pnpm-lock.yaml

@@ -8,6 +8,9 @@ dependencies:
   '@element-plus/icons-vue':
     specifier: ^2.3.1
     version: 2.3.1(vue@3.4.21)
+  axios:
+    specifier: ^1.6.8
+    version: 1.6.8
   element-plus:
     specifier: ^2.6.1
     version: 2.6.1(vue@3.4.21)
@@ -594,6 +597,20 @@ packages:
     resolution: {integrity: sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==}
     dev: false
 
+  /asynckit@0.4.0:
+    resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
+    dev: false
+
+  /axios@1.6.8:
+    resolution: {integrity: sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==}
+    dependencies:
+      follow-redirects: 1.15.6
+      form-data: 4.0.0
+      proxy-from-env: 1.1.0
+    transitivePeerDependencies:
+      - debug
+    dev: false
+
   /balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
     dev: true
@@ -628,6 +645,13 @@ packages:
     optionalDependencies:
       fsevents: 2.3.3
 
+  /combined-stream@1.0.8:
+    resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
+    engines: {node: '>= 0.8'}
+    dependencies:
+      delayed-stream: 1.0.0
+    dev: false
+
   /computeds@0.0.1:
     resolution: {integrity: sha512-7CEBgcMjVmitjYo5q8JTJVra6X5mQ20uTThdK+0kR7UEaDrAWEQcRiBtWJzga4eRpP6afNwwLsX2SET2JhVB1Q==}
     dev: true
@@ -643,6 +667,11 @@ packages:
     resolution: {integrity: sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==}
     dev: true
 
+  /delayed-stream@1.0.0:
+    resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
+    engines: {node: '>=0.4.0'}
+    dev: false
+
   /element-plus@2.6.1(vue@3.4.21):
     resolution: {integrity: sha512-6VRpLjwtIVdtUuITJPPKtpOH1NM6nuAkRE3q5O4Lrx0N1bYMhTkiqb2Jy7zfQuDPbOIkkF2OABTzegpNnzgsnQ==}
     peerDependencies:
@@ -716,6 +745,25 @@ packages:
     dependencies:
       to-regex-range: 5.0.1
 
+  /follow-redirects@1.15.6:
+    resolution: {integrity: sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==}
+    engines: {node: '>=4.0'}
+    peerDependencies:
+      debug: '*'
+    peerDependenciesMeta:
+      debug:
+        optional: true
+    dev: false
+
+  /form-data@4.0.0:
+    resolution: {integrity: sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==}
+    engines: {node: '>= 6'}
+    dependencies:
+      asynckit: 0.4.0
+      combined-stream: 1.0.8
+      mime-types: 2.1.35
+    dev: false
+
   /fsevents@2.3.3:
     resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
@@ -794,6 +842,18 @@ packages:
     resolution: {integrity: sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==}
     dev: false
 
+  /mime-db@1.52.0:
+    resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
+    engines: {node: '>= 0.6'}
+    dev: false
+
+  /mime-types@2.1.35:
+    resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
+    engines: {node: '>= 0.6'}
+    dependencies:
+      mime-db: 1.52.0
+    dev: false
+
   /minimatch@9.0.3:
     resolution: {integrity: sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==}
     engines: {node: '>=16 || 14 >=14.17'}
@@ -837,6 +897,10 @@ packages:
       picocolors: 1.0.0
       source-map-js: 1.0.2
 
+  /proxy-from-env@1.1.0:
+    resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
+    dev: false
+
   /readdirp@3.6.0:
     resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
     engines: {node: '>=8.10.0'}

v3-admin/src/App.vue

@@ -12,10 +12,16 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
-
+import request from "@/utils/request";
+import { onMounted } from "vue";
 export default defineComponent({
   setup() {
-    return {};
+    onMounted(() => {
+      request.get('/hosp/hospital/1/10').then((res)=>{
+        console.log('App展示获取接口',res)
+      })
+    });
+    return { onMounted };
   },
 });
 </script>
@@ -30,7 +36,6 @@ export default defineComponent({
     width: 1200px;
     // background: red;
     min-height: 700px;
-    
   }
 }
 </style>

v3-admin/src/main.ts

@@ -10,6 +10,9 @@ import HospitalBottom from '@/components/hospital_bottom/index.vue'
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 
+//国际化文件
+//@ts-ignore
+import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
 import App from './App.vue'
 
 
@@ -18,7 +21,10 @@ createApp(App).mount('#app')
 const app = createApp(App)
 app.component('HospitalTop',HospitalTop)
 app.component('HospitalBottom',HospitalBottom)
-app.use(ElementPlus)
+
+app.use(ElementPlus, {
+  locale: zhCn,
+})
 //安装vue-router
 app.use(router)
 //挂载

v3-admin/src/pages/home/card/index.vue

@@ -0,0 +1,102 @@
+<template>
+  <el-card  class="box-card" shadow="hover">
+    <div class="content">
+      <div class="left">
+        <div class="hospital_name">北京人民医院</div>
+        <div class="tip">
+          <div class="level">
+            <svg
+              t="1711173450868"
+              class="icon"
+              viewBox="0 0 1024 1024"
+              version="1.1"
+              xmlns="http://www.w3.org/2000/svg"
+              p-id="5383"
+              width="16"
+              height="16"
+            >
+              <path
+                d="M621.674667 408.021333c16.618667-74.24 28.224-127.936 34.837333-161.194666C673.152 163.093333 629.941333 85.333333 544.298667 85.333333c-77.226667 0-116.010667 38.378667-138.88 115.093334l-0.586667 2.24c-13.728 62.058667-34.72 110.165333-62.506667 144.586666a158.261333 158.261333 0 0 1-119.733333 58.965334l-21.909333 0.469333C148.437333 407.808 106.666667 450.816 106.666667 503.498667V821.333333c0 64.8 52.106667 117.333333 116.394666 117.333334h412.522667c84.736 0 160.373333-53.568 189.12-133.92l85.696-239.584c21.802667-60.96-9.536-128.202667-70.005333-150.186667a115.552 115.552 0 0 0-39.488-6.954667H621.674667zM544.256 149.333333c39.253333 0 59.498667 36.48 49.888 84.928-7.573333 38.144-21.984 104.426667-43.221333 198.666667-4.512 20.021333 10.56 39.093333 30.912 39.093333h218.666666c6.101333 0 12.16 1.066667 17.909334 3.168 27.445333 9.984 41.674667 40.554667 31.776 68.266667l-85.568 239.573333C744.981333 838.026667 693.301333 874.666667 635.402667 874.666667H223.498667C194.314667 874.666667 170.666667 850.784 170.666667 821.333333V503.498667c0-17.866667 14.144-32.448 31.829333-32.821334l21.866667-0.469333a221.12 221.12 0 0 0 167.381333-82.56c34.346667-42.602667 59.146667-99.306667 74.869333-169.877333C482.101333 166.336 499.552 149.333333 544.266667 149.333333z"
+                fill="#000000"
+                p-id="5384"
+              ></path>
+            </svg>
+            <span>三级甲等</span>
+          </div>
+          <div class="time">
+            <svg
+              t="1711173568094"
+              class="icon"
+              viewBox="0 0 1024 1024"
+              version="1.1"
+              xmlns="http://www.w3.org/2000/svg"
+              p-id="6504"
+              width="16"
+              height="16"
+            >
+              <path
+                d="M931.2 518.4c0-233.6-188.8-419.2-419.2-419.2-233.6 0-419.2 188.8-419.2 419.2 0 137.6 67.2 259.2 169.6 336l-57.6 51.2c-9.6 9.6-12.8 25.6-3.2 35.2 9.6 9.6 25.6 12.8 35.2 3.2l70.4-57.6c60.8 35.2 131.2 54.4 208 54.4 80 0 153.6-22.4 214.4-60.8 0 0 0 0 3.2 3.2l73.6 60.8c9.6 9.6 25.6 6.4 35.2-3.2 9.6-9.6 6.4-25.6-3.2-35.2l-64-54.4C867.2 774.4 931.2 652.8 931.2 518.4zM512 889.6c-204.8 0-371.2-166.4-371.2-371.2s166.4-371.2 371.2-371.2 371.2 166.4 371.2 371.2S716.8 889.6 512 889.6z"
+                p-id="6505"
+              ></path>
+              <path
+                d="M208 96c-9.6-9.6-25.6-9.6-35.2 0l-118.4 118.4c-9.6 9.6-9.6 25.6 0 35.2 9.6 9.6 25.6 9.6 35.2 0l118.4-118.4C217.6 121.6 217.6 105.6 208 96z"
+                p-id="6506"
+              ></path>
+              <path
+                d="M969.6 211.2l-118.4-115.2c-9.6-9.6-25.6-9.6-35.2 0-9.6 9.6-9.6 25.6 0 35.2l118.4 115.2c9.6 9.6 25.6 9.6 35.2 0C979.2 236.8 979.2 220.8 969.6 211.2z"
+                p-id="6507"
+              ></path>
+              <path
+                d="M707.2 300.8l-144 128c0 0 0 3.2-3.2 3.2-12.8-3.2-22.4-6.4-35.2-6.4-12.8 0-22.4 3.2-32 6.4 0-3.2-3.2-3.2-3.2-6.4l-92.8-83.2c-9.6-9.6-25.6-9.6-35.2 3.2-9.6 9.6-9.6 25.6 3.2 35.2l89.6 80c-16 19.2-28.8 41.6-28.8 70.4 0 54.4 44.8 102.4 102.4 102.4 54.4 0 102.4-44.8 102.4-102.4 0-25.6-9.6-48-25.6-67.2l140.8-124.8c9.6-9.6 9.6-25.6 3.2-35.2C732.8 294.4 716.8 294.4 707.2 300.8zM524.8 582.4c-28.8 0-51.2-22.4-51.2-51.2 0-28.8 22.4-51.2 51.2-51.2 28.8 0 51.2 22.4 51.2 51.2C576 556.8 553.6 582.4 524.8 582.4z"
+                p-id="6508"
+              ></path>
+            </svg>
+            <span>每天7点放号</span>
+          </div>
+        </div>
+      </div>
+      <div class="right">
+        <img src="../../../assets/images/logo.png" alt="" />
+      </div>
+    </div>
+  </el-card>
+</template>
+
+<script setup lang="ts">
+</script>
+
+<style scoped lang="scss">
+.content {
+  display: flex;
+  justify-content: space-between;
+  .right {
+    img {
+      width: 50px;
+      height: 50px;
+    }
+  }
+  .left {
+    width: 60%;
+    .tip {
+      color: #7f7f7f;
+      display: flex;
+      margin-top: 20px;
+      justify-content: space-between;
+      .level {
+        display: flex;
+        align-items: center;
+        span {
+          margin-left: 5px;
+        }
+      }
+      .time {
+        display: flex;
+        align-items: center;
+        span {
+          margin-left: 5px;
+        }
+      }
+    }
+  }
+}
+</style>

v3-admin/src/pages/home/index.vue

@@ -4,14 +4,49 @@
     <Carousel></Carousel>
     <!-- 首页搜索 -->
     <Search></Search>
+    <el-row :gutter="20">
+      <el-col :span="20">
+        <!-- 首页医院 -->
+        <Level></Level>
+        <!-- 首页地区 -->
+        <Region></Region>
+        <!-- 展示医院的信息 -->
+        <div class="hospital">
+          <Card class="item" v-for="item in 10" :key="item"></Card>
+        </div>
+        <!-- 展示分页器 -->
+
+        <el-pagination
+          v-model:current-page="pageNo"
+          v-model:page-size="pageSize"
+          :page-sizes="[10, 20, 30, 40]"
+          layout="prev, pager, next, jumper,->, sizes,total"
+          background="true"
+          :total="20"
+        />
+      </el-col>
+      <el-col :span="4"></el-col>
+    </el-row>
   </div>
 </template>
 
 <script setup lang="ts">
-import Carousel from "./carousel/index.vue"
-import Search from "./search/index.vue"
+import Carousel from "./carousel/index.vue";
+import Search from "./search/index.vue";
+import Level from "./level/index.vue";
+import Region from "./region/index.vue";
+import Card from "./card/index.vue";
 </script>
 
-<style scoped>
-
+<style scoped lang="scss">
+.hospital {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  margin-top: 10px;
+  .item {
+    width: 48%;
+    margin: 10px 0;
+  }
+}
 </style>

v3-admin/src/pages/home/level/index.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="level">
+    <h1>医院</h1>
+    <div class="content">
+      <div class="left">等级:</div>
+      <ul class="hospital">
+        <li class="active">全部</li>
+        <li>三级甲等</li>
+        <li>三级甲等</li>
+        <li>三级甲等</li>
+        <li>三级甲等</li>
+        <li>三级甲等</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+</script>
+
+<style scoped lang="scss">
+.level {
+  color: #7f7f7f;
+  margin-top: 20px;
+  h1 {
+    font-weight: 980;
+    margin: 10px 0;
+  }
+  .content {
+    display: flex;
+    .left {
+      margin-right: 10px;
+    }
+    .hospital {
+      display: flex;
+      li {
+        margin-right: 10px;
+        &.active{
+          color:#55a6fe
+        }
+      }
+      li:hover{
+        color:#55a6fe;
+        //把指针变为手指状
+        cursor: pointer;
+      }
+    }
+  }
+}
+</style>

v3-admin/src/pages/home/region/index.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="region">
+    <div class="content">
+      <div class="left">地区:</div>
+      <ul>
+        <li class="active">朝阳区</li>
+        <li>朝阳区</li>
+        <li>朝阳区</li>
+        <li>朝阳区</li>
+        <li>朝阳区</li>
+        <li>朝阳区</li>
+        <li>朝阳区</li>
+        <li>朝阳区</li>
+        <li>朝阳区</li>
+        <li>朝阳区</li>
+        <li>朝阳区</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+</script>
+
+<style scoped lang="scss">
+.region {
+  color: #7f7f7f;
+  margin-top: 20px;
+  .content {
+    display: flex;
+    .left {
+      margin-right: 10px;
+    }
+    ul {
+      display: flex;
+      li {
+        margin-right: 10px;
+        &.active {
+          color: #55a6fe;
+        }
+      }
+      li:hover {
+        color: #55a6fe;
+        cursor: pointer;
+      }
+    }
+  }
+}
+</style>

v3-admin/src/utils/request.ts

@@ -0,0 +1,22 @@
+//对于axios进行二次封装
+//目的1： 利用axios请求，拦截功能
+//目的2：请求拦截器，一般可以在公共的部分携带token
+import axios from "axios";
+
+//利用axios。crate方法创建一个axios实例
+const request = axios.create({
+  baseURL: '/api', //请求的基本路径的设置
+  timeout: 5000 //超时时间的设置，超出五秒请求就是失败的
+})
+
+//请求拦截器
+request.interceptors.request.use((config) => {
+  return config
+})
+//响应拦截器
+request.interceptors.response.use((response)=>{
+  return response
+})
+
+//对外暴露
+export default request;

v3-admin/vite.config.ts

@@ -9,5 +9,14 @@ export default defineConfig({
     alias: {
       "@": path.resolve(__dirname,'src')
     }
+  },
+  server:{
+    proxy:{
+      // 使用 proxy 实例
+      '/api': {
+        target: 'http://syt.atguigu.cn',
+        changeOrigin: true
+      },
+    }
   }
 })