kevin/ops
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

通知横幅ok

Browse Source 
Signed-off-by: kevin <kevin@lmve.net>
This commit is contained in:
kevin
2025-06-08 01:57:29 +08:00
parent 2c8fc07ebb
commit 6723da6a60
4 changed files with 157 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
vue3/App.vue
+2
View File
@@ -24,5 +24,7 @@
/*每个页面公共css */ /*每个页面公共css */
@import url("/static/dist/css/tabler.min.css"); @import url("/static/dist/css/tabler.min.css");
@import url("/mycss.css"); @import url("/mycss.css");
</style> </style>
vue3/components/tabler-footer/tabler-footer.vue
+136 -51
View File
@@ -1,64 +1,149 @@
<template> <template>
<footer class="footer footer-transparent d-print-none my_footer"> <footer class="footer footer-transparent d-print-none my_footer">
<div class="container-xl"> <div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse"> <div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto"> <div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0"> <ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item"><a href="https://git.lmve.net/kevin/gin_saas/-/blob/main/readme.md?ref_type=heads" target="_blank" <li class="list-inline-item"><a
class="link-secondary" rel="noopener">文档</a></li> href="https://git.lmve.net/kevin/gin_saas/-/blob/main/readme.md?ref_type=heads"
<li class="list-inline-item"><a href="https://git.lmve.net/kevin/gin_saas/-/blob/main/LICENSE?ref_type=heads" target="_blank" class="link-secondary">开源协议</a> target="_blank" class="link-secondary" rel="noopener">文档</a></li>
</li> <li class="list-inline-item"><a
<li class="list-inline-item"><a href="https://git.lmve.net/kevin/gin_saas" target="_blank" href="https://git.lmve.net/kevin/gin_saas/-/blob/main/LICENSE?ref_type=heads"
class="link-secondary" rel="noopener"> target="_blank" class="link-secondary">开源协议</a>
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-orange" width="24" height="24" </li>
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" <li class="list-inline-item"><a href="https://git.lmve.net/kevin/gin_saas" target="_blank"
stroke-linejoin="round"> class="link-secondary" rel="noopener">
<path stroke="none" d="M0 0h24v24H0z" fill="none" /> <svg xmlns="http://www.w3.org/2000/svg" class="icon text-orange" width="24" height="24"
<path d="M21 14l-9 7l-9 -7l3 -11l3 7h6l3 -7z" /> viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
</svg> stroke-linecap="round" stroke-linejoin="round">
源码</a></li> <path stroke="none" d="M0 0h24v24H0z" fill="none" />
<li class="list-inline-item"> <path d="M21 14l-9 7l-9 -7l3 -11l3 7h6l3 -7z" />
<a href="https://wnfed.com" target="_blank" class="link-secondary" rel="noopener"> </svg>
<!-- Download SVG icon from http://tabler-icons.io/i/heart --> 源码</a></li>
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink icon-filled icon-inline" width="24" <li class="list-inline-item">
height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" <a href="https://wnfed.com" target="_blank" class="link-secondary" rel="noopener">
stroke-linecap="round" stroke-linejoin="round"> <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
<path stroke="none" d="M0 0h24v24H0z" fill="none" /> <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink icon-filled icon-inline"
<path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /> width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
</svg> fill="none" stroke-linecap="round" stroke-linejoin="round">
博客 <path stroke="none" d="M0 0h24v24H0z" fill="none" />
</a> <path
</li> d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" />
</ul> </svg>
</div> 博客
<div class="col-12 col-lg-auto mt-3 mt-lg-0"> </a>
<ul class="list-inline list-inline-dots mb-0"> </li>
<li class="list-inline-item"> </ul>
Copyright &copy; 2025 </div>
<a href="https://lmve.net" target="_blank" class="link-secondary">Lmve.NET</a>. <div class="col-12 col-lg-auto mt-3 mt-lg-0">
All rights reserved. <ul class="list-inline list-inline-dots mb-0">
</li> <li class="list-inline-item">
<li class="list-inline-item"> Copyright &copy; 2025
<a href="https://git.lmve.net/kevin/gin_saas/-/commits/main" target="_blank" class="link-secondary" rel="noopener"> <a href="https://lmve.net" target="_blank" class="link-secondary">Lmve.NET</a>.
v0.0.1 All rights reserved.
</a> </li>
</li> <li class="list-inline-item">
</ul> <a href="https://git.lmve.net/kevin/gin_saas/-/commits/main" target="_blank"
</div> class="link-secondary" rel="noopener">
</div> v0.0.1
</div> </a>
</footer> </li>
</ul>
</div>
</div>
</div>
</footer>
<div class="offcanvas my_offcanvas_top alert alert-important alert-dismissible" :class="{
'alert-success': alertType === 'success',
'alert-warning': alertType === 'warning',
'alert-danger': alertType === 'danger',
'alert-info': alertType === 'info'
}" role="alert" tabindex="-1" ref="offcanvas">
<div class="d-flex">
<div>
<!-- Download SVG icon from http://tabler-icons.io/i/check -->
<svg v-if="alertType === 'success'" xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24"
viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M5 12l5 5l10 -10"></path>
</svg>
<svg v-if="alertType === 'warning'" xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24"
viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path
d="M10.24 3.957l-8.422 14.06a1.989 1.989 0 0 0 1.7 2.983h16.845a1.989 1.989 0 0 0 1.7 -2.983l-8.423 -14.06a1.989 1.989 0 0 0 -3.4 0z">
</path>
<path d="M12 9v4"></path>
<path d="M12 17h.01"></path>
</svg>
<svg v-if="alertType === 'danger'" xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24"
viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"></path>
<path d="M12 8v4"></path>
<path d="M12 16h.01"></path>
</svg>
<svg v-if="alertType === 'info'" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="icon icon-tabler icons-tabler-outline icon-tabler-brand-hipchat">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path
d="M17.802 17.292s.077 -.055 .2 -.149c1.843 -1.425 3 -3.49 3 -5.789c0 -4.286 -4.03 -7.764 -9 -7.764c-4.97 0 -9 3.478 -9 7.764c0 4.288 4.03 7.646 9 7.646c.424 0 1.12 -.028 2.088 -.084c1.262 .82 3.104 1.493 4.716 1.493c.499 0 .734 -.41 .414 -.828c-.486 -.596 -1.156 -1.551 -1.416 -2.29z" />
<path d="M7.5 13.5c2.5 2.5 6.5 2.5 9 0" />
</svg>
</div>
<div>
{{alertText}}
</div>
</div>
<a class="btn-close" data-bs-dismiss="offcanvas" aria-label="close"></a>
</div>
</template> </template>
<script> <script>
import {
Offcanvas
} from 'bootstrap'
export default { export default {
name:"tabler-footer", name: "tabler-footer",
data() { data() {
return { return {
alertType: 'success',
alertText: "juest do!",
}; };
},
methods: {
alert(type,text) {
this.alertType=type
this.alertText=text
if (!this.offcanvasInstance) {
const el = this.$refs.offcanvas
this.offcanvasInstance = new Offcanvas(el, {
backdrop: false,
})
}
this.offcanvasInstance.show()
setTimeout(() => {
this.offcanvasInstance?.hide()
}, 5000);
},
close() {
this.offcanvasInstance?.hide()
},
},
mounted() {
} }
} }
</script> </script>
vue3/mycss.css
+11
View File
@@ -23,4 +23,15 @@
.my_footer{ .my_footer{
margin-top: auto; margin-top: auto;
}
.my_offcanvas_top{
top: 0;
right: 0;
left: 0;
height: 100rpx;
margin-left: 20rpx;
margin-right: 20rpx;
margin-top: 20rpx;
} }
vue3/pages/signin.vue
+8 -10
View File
@@ -58,7 +58,7 @@
<a href="./forgot-password.html">忘记密码？</a> <a href="./forgot-password.html">忘记密码？</a>
</span> </span>
</div> </div>
</div> </div>
</div> </div>
<div class="col-lg d-none d-lg-block"> <div class="col-lg d-none d-lg-block">
@@ -69,9 +69,10 @@
</div> </div>
</div> </div>
<tabler-footer></tabler-footer> <tabler-footer ref="footer"></tabler-footer>
</view> </view>
</template> </template>
@@ -79,9 +80,6 @@
import { import {
my_network_func my_network_func
} from '../my_network_func' } from '../my_network_func'
import {
Offcanvas
} from 'bootstrap'
export default { export default {
@@ -99,6 +97,7 @@
} }
}, },
methods: { methods: {
chack_box_change(val) { chack_box_change(val) {
//console.log(val.detail.value[0]) //console.log(val.detail.value[0])
@@ -111,6 +110,8 @@
submit_data() { submit_data() {
//提交登录数据， //提交登录数据，
//先验证数据合法性 //先验证数据合法性
this.$refs.footer.alert('success',"123")
if (this.post_data.username == "") { if (this.post_data.username == "") {
this.is_username_err = true this.is_username_err = true
this.ph_username = "用户名不能为空" this.ph_username = "用户名不能为空"
@@ -155,10 +156,7 @@
font-size: 24px; font-size: 24px;
} }
</style> </style>