LoveNav/love-nav-vue
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
landaiqing
2023-12-24 18:17:00 +08:00
parent f63aac52cb
commit 42c4b0ddc8
21 changed files with 2075 additions and 905 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
src/components/home/NavList.vue
View File

@@ -4,32 +4,34 @@
<el-image v-if="nav.icon" :src="nav.icon" style="width: 40px;height: 40px"></el-image>
<div class="content-card">
<el-tooltip v-if="nav.name" class="item" effect="dark" :content="nav.name" placement="top">
<span v-if="nav.name" class="content-title">{{ nav.name}}</span>
</el-tooltip>
<el-tooltip v-if="nav.name" class="item" effect="dark" :content="nav.name" placement="top">
<span v-if="nav.name" class="content-title">{{ nav.name }}</span>
</el-tooltip>
<el-tooltip v-if="nav.desc" class="item" effect="dark" :content="nav.desc" placement="bottom">
<span v-if="nav.desc" class="content-desc">{{ nav.desc.substr(0, 8) + '...' }}</span>
</el-tooltip>
</div>
<el-tooltip class="item" effect="dark" content="详情" placement="right" @click="goToNavDetail()">
<i style="margin-left: 3px" class="card-icon el-icon-d-arrow-right"></i>
<i style="margin-left: 3px" class="card-icon el-icon-d-arrow-right"></i>
</el-tooltip>
</div>
<!-- <div class="app-card__subtext">{{nav.desc}}</div>-->
<div class="dividing-line"></div>
<div class="app-card-buttons">
<el-tooltip class="item" effect="dark" content="访问需要代理" placement="bottom">
<i v-show="nav.isNeedAgent===1" style="color: red" class="qr el-icon-info"></i>
<i v-show="nav.isNeedAgent===1" style="color: red" class="qr el-icon-info"></i>
</el-tooltip>
<!-- <button class="content-button status-button"><i class="el-icon-d-arrow-right"></i>详情</button>-->
<el-tooltip placement="bottom" width="150"
trigger="hover"
effect="dark" close-delay="2000">
<el-tooltip placement="bottom" width="150"
trigger="hover"
effect="dark" close-delay="2000">
<div class="MyPopover" slot="content">
<span style="font-size:12px !important;">【{{nav.name}}】手机二维码</span><br/><br/>
<div style="width:100% ;text-align: center"><img style="width:150px" :src="'data:image/jpg;base64,'+getQR(nav.urlId,nav.icon)" /></div>
<span style="font-size:12px !important;">【{{ nav.name }}】手机二维码</span><br/><br/>
<div style="width:100% ;text-align: center"><img style="width:150px"
:src="getQR(nav.urlId,nav.icon)"/>
</div>
</div>
<i class="qr el-icon-s-grid"></i>
<i class="qr el-icon-s-grid"></i>
</el-tooltip>
</div>
</div>
@@ -46,50 +48,51 @@ export default {
},
data() {
return {
imageCode:'',
imageCode: '',
}
},
mounted() {
this.getQR(1,'https://imgbed.landaiqing.space/img/1/2023/12/23/1_6586a9f967d58_1703324152309_20231223.webp');
},
created() {
},
computed: {},
methods: {
// getQR(url_id,icon_url) {
// let _this=this;
// axios({
// method: 'post',
// url: '/api/qrcode/qrc_return',
// params:{
// url_id:url_id,
// icon_url:icon_url
// }
// }).then(function (res) {
// if(res.data){
// _this.navList=res.data;
// }
// }).catch((error)=>{
// Vue.prototype.$notify.error({
// title: '错误',
// message: error===null?'':error,
// offset: 0
// });
// })
//
// },
goToNavDetail(){
if(this.nav.urlId){
getQR(url_id, icon_url) {
let _this = this;
axios({
method: 'post',
url: '/api/qrcode/qrc_return',
data: {
url_id: url_id,
icon_url: icon_url
}
}).then(function (res) {
if (res.data) {
_this.imageCode = "data:image/jpg;base64," + res.data;
}
return false;
}).catch((error) => {
Vue.prototype.$notify.error({
title: '错误',
message: error === null ? '' : error,
offset: 0
});
})
return this.imageCode
},
goToNavDetail() {
if (this.nav.urlId) {
let pathInfo = this.$router.resolve({
path: '/nav',
query:{
uid:this.nav.urlId,
refresh:true,
query: {
uid: this.nav.urlId,
refresh: true,
}
})
window.open(pathInfo.href, '_self');
}else{
} else {
return false;
}
}
@@ -117,7 +120,7 @@ export default {
white-space: nowrap;
overflow-x: scroll;
color: var(--theme-color);
/*background-color: var(--theme-bg-color);*/
/*background-color: var(--theme-bg-color);*/
}
.content-desc {
@@ -129,17 +132,20 @@ export default {
margin-top: 5px;
white-space: nowrap;
overflow-x: scroll;
/*background-color: var(--theme-bg-color);*/
/*background-color: var(--theme-bg-color);*/
}
.card-icon{
.card-icon {
font-size: 20px;
font-weight: bold;
color: var(--theme-color);
}
.card-icon:hover{
.card-icon:hover {
color: #5ddcff;
}
.qr:hover{
.qr:hover {
color: #5ddcff;
}
</style>