skin-disease-app/src/components/NavBar.vue

82 lines
2.3 KiB
Vue

<template>
<div class="collapse bg-dark" id="navbarHeader">
<div class="container">
<div class="row">
<div class="col-sm-8 col-md-7 py-4">
<h4 class="text-white">About</h4>
<p class="text-muted">
We are building a platform for detecting common skin disease easily,
and provide information for you.
</p>
</div>
<div class="col-sm-4 offset-md-1 py-4">
<h4 class="text-white">Contact</h4>
<ul class="list-unstyled">
<li>
<a href="https://github.com/" class="text-white">Source Code</a>
</li>
<li><a href="#" class="text-white">Like on Facebook</a></li>
<li>
<a href="mailto:dhao2001@outlook.com" class="text-white"
>Email me</a
>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="navbar navbar-dark bg-dark shadow-sm">
<div class="container">
<a href="#" class="navbar-brand d-flex align-items-center">
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
aria-hidden="true"
class="me-2"
viewBox="0 0 24 24"
>
<path
d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"
/>
<circle cx="12" cy="13" r="4" />
</svg>
<strong>自求多肤</strong>
</a>
<div>
<button
type="button"
class="btn btn-outline-light mx-3"
data-bs-toggle="modal"
data-bs-target="#loginModal"
>
登录
</button>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarHeader"
aria-controls="navbarHeader"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
</div>
</template>
<script>
export default {};
</script>
<style></style>