update
This commit is contained in:
@@ -1,74 +1,144 @@
|
||||
<template>
|
||||
<div class="content-section">
|
||||
<div class="content-section-title">Apps in your plan</div>
|
||||
<div class="apps-card">
|
||||
<div class="app-card">
|
||||
<span>
|
||||
<svg viewBox="0 0 512 512" style="border: 1px solid #a059a9">
|
||||
<path xmlns="http://www.w3.org/2000/svg" d="M480 0H32C14.368 0 0 14.368 0 32v448c0 17.664 14.368 32 32 32h448c17.664 0 32-14.336 32-32V32c0-17.632-14.336-32-32-32z" fill="#210027" data-original="#7b1fa2"></path>
|
||||
<g xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M192 64h-80c-8.832 0-16 7.168-16 16v352c0 8.832 7.168 16 16 16s16-7.168 16-16V256h64c52.928 0 96-43.072 96-96s-43.072-96-96-96zm0 160h-64V96h64c35.296 0 64 28.704 64 64s-28.704 64-64 64zM400 256h-32c-18.08 0-34.592 6.24-48 16.384V272c0-8.864-7.168-16-16-16s-16 7.136-16 16v160c0 8.832 7.168 16 16 16s16-7.168 16-16v-96c0-26.464 21.536-48 48-48h32c8.832 0 16-7.168 16-16s-7.168-16-16-16z" fill="#f6e7fa" data-original="#e1bee7"></path>
|
||||
</g>
|
||||
</svg>
|
||||
Premiere Pro
|
||||
</span>
|
||||
<div class="app-card__subtext">Edit, master and create fully proffesional videos</div>
|
||||
<div class="app-card-buttons">
|
||||
<button class="content-button status-button">Update</button>
|
||||
<div class="menu"></div>
|
||||
</div>
|
||||
<div class="app-card" @click="goToNavDetail">
|
||||
<div style="display: flex;flex-direction: row;align-items: center">
|
||||
<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.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>
|
||||
<div class="app-card">
|
||||
<span>
|
||||
<svg viewBox="0 0 52 52" style="border: 1px solid #c1316d">
|
||||
<g xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M40.824 52H11.176C5.003 52 0 46.997 0 40.824V11.176C0 5.003 5.003 0 11.176 0h29.649C46.997 0 52 5.003 52 11.176v29.649C52 46.997 46.997 52 40.824 52z" fill="#2f0015" data-original="#6f2b41"></path>
|
||||
<path d="M18.08 39H15.2V13.72l-2.64-.08V11h5.52v28zM27.68 19.4c1.173-.507 2.593-.761 4.26-.761s3.073.374 4.22 1.12V11h2.88v28c-2.293.32-4.414.48-6.36.48-1.947 0-3.707-.4-5.28-1.2-2.08-1.066-3.12-2.92-3.12-5.561v-7.56c0-2.799 1.133-4.719 3.4-5.759zm8.48 3.12c-1.387-.746-2.907-1.119-4.56-1.119-1.574 0-2.714.406-3.42 1.22-.707.813-1.06 1.847-1.06 3.1v7.12c0 1.227.44 2.188 1.32 2.88.96.719 2.146 1.079 3.56 1.079 1.413 0 2.8-.106 4.16-.319V22.52z" fill="#e1c1cf" data-original="#ff70bd"></path>
|
||||
</g>
|
||||
</svg>
|
||||
InDesign
|
||||
</span>
|
||||
<div class="app-card__subtext">Design and publish great projects & mockups</div>
|
||||
<div class="app-card-buttons">
|
||||
<button class="content-button status-button">Update</button>
|
||||
<div class="menu"></div>
|
||||
<el-tooltip class="item" effect="dark" content="详情" placement="right">
|
||||
<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>
|
||||
</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">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="app-card">
|
||||
<span>
|
||||
<svg viewBox="0 0 52 52" style="border: 1px solid #C75DEB">
|
||||
<g xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M40.824 52H11.176C5.003 52 0 46.997 0 40.824V11.176C0 5.003 5.003 0 11.176 0h29.649C46.997 0 52 5.003 52 11.176v29.649C52 46.997 46.997 52 40.824 52z" fill="#3a3375" data-original="#3a3375"></path>
|
||||
<path d="M27.44 39H24.2l-2.76-9.04h-8.32L10.48 39H7.36l8.24-28h3.32l8.52 28zm-6.72-12l-3.48-11.36L13.88 27h6.84zM31.48 33.48c0 2.267 1.333 3.399 4 3.399 1.653 0 3.466-.546 5.44-1.64L42 37.6c-2.054 1.254-4.2 1.881-6.44 1.881-4.64 0-6.96-1.946-6.96-5.841v-8.2c0-2.16.673-3.841 2.02-5.04 1.346-1.2 3.126-1.801 5.34-1.801s3.94.594 5.18 1.78c1.24 1.187 1.86 2.834 1.86 4.94V30.8l-11.52.6v2.08zm8.6-5.24v-3.08c0-1.413-.44-2.42-1.32-3.021-.88-.6-1.907-.899-3.08-.899-1.174 0-2.167.359-2.98 1.08-.814.72-1.22 1.773-1.22 3.16v3.199l8.6-.439z" fill="#e4d1eb" data-original="#e7adfb"></path>
|
||||
</g>
|
||||
</svg>
|
||||
After Effects
|
||||
</span>
|
||||
<div class="app-card__subtext">Industry Standart motion graphics & visual effects</div>
|
||||
<div class="app-card-buttons">
|
||||
<button class="content-button status-button">Update</button>
|
||||
<div class="menu"></div>
|
||||
</div>
|
||||
</div>
|
||||
<i class="qr el-icon-s-grid"></i>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
import axios from "axios";
|
||||
import Vue from "vue";
|
||||
|
||||
export default {
|
||||
name: "NavList",
|
||||
props: {
|
||||
nav: Object
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
return {
|
||||
imageCode:'',
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
this.getQR(1,'https://imgbed.landaiqing.space/img/1/2023/12/23/1_6586a9f967d58_1703324152309_20231223.webp');
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
computed: {},
|
||||
methods: {}
|
||||
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) {
|
||||
console.log(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){
|
||||
this.$router.push({
|
||||
path:'/nav',
|
||||
query: {
|
||||
id: this.nav.urlId,
|
||||
refresh: true
|
||||
}})
|
||||
}else{
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.dividing-line {
|
||||
margin-top: 10px;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.content-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.content-title {
|
||||
margin-left: 5px;
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
width: 110px;
|
||||
height: 20px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
overflow-x: scroll;
|
||||
color: var(--theme-color);
|
||||
/*background-color: var(--theme-bg-color);*/
|
||||
}
|
||||
|
||||
.content-desc {
|
||||
font-size: 13px;
|
||||
margin-left: 5px;
|
||||
width: 110px;
|
||||
color: #999ba5;
|
||||
height: 20px;
|
||||
margin-top: 5px;
|
||||
white-space: nowrap;
|
||||
overflow-x: scroll;
|
||||
/*background-color: var(--theme-bg-color);*/
|
||||
}
|
||||
.card-icon{
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: var(--theme-color);
|
||||
}
|
||||
.card-icon:hover{
|
||||
color: #5ddcff;
|
||||
}
|
||||
.qr:hover{
|
||||
color: #5ddcff;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user