一、搭建
1.1.1 新建文件
在components下新建HospitalTop和HospitalBottom,然后分别在其下面创建index.vue
HospitalTop/index.vue
<template>
<div class="top">
<div class="content">
<!-- 左侧 -->
<div class="left">
<img src="../../assets/images/logo.png" alt="" class="logo">
<div class="top_name">尚医通 预约挂号统一平台</div>
</div>
<!-- 右侧 -->
<div class="right">
<p class="help">帮助中心</p>
<p class="login">登录/注册</p>
</div>
</div>
</div>
</template>
<script setup lang='ts'>
</script>
<style scoped lang="scss">
.top{
position: fixed;
z-index: 999;
width: 100%;
height: 70px;
background-color: #fff;
display: flex;
justify-content: center;
.content{
width: 1200px;
height: 70px;
display: flex;
justify-content: space-between;
.left{
display: flex;
align-items: center;
.logo{
width: 70px;
height: 70px;
display: block;
}
.top_name{
color:#55a6fe;
font-size: 22px;
margin-left: 10px;
}
}
.right{
width: 166px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
color: #666;
.help{
margin-right: 40px;
}
}
}
}
</style>
HospitalBottom/index.vue
<template>
<div class="bottom">
<div class="content">
<div class="left">
<span class="beihao">京ICP备13018369号</span>
<span class="phone">电话挂号010-56253825</span>
</div>
<div class="right">
<ul>
<li><a href="">联系我们</a></li>
<li><a href="">合作伙伴</a></li>
<li><a href="">用户协议</a></li>
<li><a href="">隐私协议</a></li>
</ul>
</div>
</div>
</div>
</template>
<script setup lang="ts"></script>
<style scoped lang="scss">
.bottom {
width: 100%;
height: 50px;
display: flex;
justify-content: center;
background-color: #f0f2f5;
.content {
width: 1200px;
height: 100%;
display: flex;
font-size: 12px;
justify-content: space-between;
.left {
width: 340px;
height: 50px;
line-height: 50px;
.beihao{
color:#bbb;
}
.phone{
margin-left: 42px;
color: #666666;
}
}
.right {
ul {
width: 340px;
height: 50px;
display: flex;
justify-content: space-between;
align-items: center;
color: #666666;
a{
text-decoration: none; /* 去掉下划线 */
color: #666666; /* 设置链接颜色 */
&:hover{
color:#55a6fe;
}
}
}
}
}
}
</style>
1.1.2 引入
在App.vue里引入以上两个文件
// vue3框架提供的方法createApp方法,可以用来创建应用实例方法
import { createApp } from 'vue'
//引入清除默认样式
import '@/style/reset.scss'
//引入根组件App
import App from './App.vue'
//引入全局组件--顶部、底部都是全局组件
import HospitalTop from '@/components/HospitalTop/index.vue'
import HospitalBottom from '@/components/HospitalBottom/index.vue'
//利用creatApp方法创建应用实例,且将应用实例挂载到挂载点上
const app = createApp(App);
app.component('HospitalTop',HospitalTop)
app.component('HospitalBottom',HospitalBottom)
//挂载
app.mount('#app')