no message
This commit is contained in:
parent
d1e78f3d2b
commit
e677ae85ab
@ -3,16 +3,18 @@
|
||||
props.windowType === 1 ? 'tab-box-two' : props.windowType === 2 ? 'tab-box-one' : '',
|
||||
props.windowType === 1 ? ((props.tabI + 1) % 2) ? 'mg-r-25' : '' :
|
||||
props.windowType === 2 ? '' : ((props.tabI + 1) % 3) ? 'mg-r-25' : '']">
|
||||
<img src="" class="img" alt="">
|
||||
<img :src="item.icon" class="img" alt="">
|
||||
<div class="info-box">
|
||||
<div class="title">
|
||||
123
|
||||
{{ item.name }}
|
||||
</div>
|
||||
<div class="tag-box">
|
||||
<el-tag class="tag-mg" type="danger" v-for="(item, i) in 5" :key="i">Tag {{ item }}</el-tag>
|
||||
<el-tag class="tag-mg" type="danger">{{ item.app }}</el-tag>
|
||||
<el-tag class="tag-mg" type="danger">V {{ item.version }}</el-tag>
|
||||
<el-tag class="tag-mg" type="info"> {{ item.author }}</el-tag>
|
||||
</div>
|
||||
<div class="info-text">
|
||||
111111111111111111111111111111111111111
|
||||
{{ item.description }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -53,6 +55,7 @@ let props = defineProps({
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
margin-right: 16px;
|
||||
opacity: 0.9;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
|
||||
@ -1,46 +1,71 @@
|
||||
<template>
|
||||
<div class="dis-f warp pd-15 pos-r" ref="tabBox">
|
||||
<div class="pop-box" v-show="popShow">
|
||||
<pop-info :showPop="installPlugin"></pop-info>
|
||||
<pop-info :showPop="closePlugin" :item="info"></pop-info>
|
||||
</div>
|
||||
<plugin-box :installPlugin="installPlugin" :windowType="windowType" :tabI="i" :item="{}" v-for="(item, i) in list" :key="i"></plugin-box>
|
||||
<plugin-box @click="installPlugin(item)" :windowType="windowType" :tabI="i" :item="item" v-for="(item, i) in list" :key="i"></plugin-box>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
|
||||
<script>
|
||||
import popInfo from './popInfo.vue'
|
||||
import PluginBox from './pluginBox.vue';
|
||||
let windowType = ref(0)
|
||||
let list = ref([1, 2, 3, 4, 5, 6, 7, 8, 9,1,2,4,5,6,8])
|
||||
let tabBox = ref(null)
|
||||
let popShow = ref(false)
|
||||
let resize
|
||||
//设置窗口宽度监听
|
||||
let setWindowType = () => {
|
||||
resize = new ResizeObserver((e) => {
|
||||
|
||||
export default {
|
||||
name: 'YourComponentName',
|
||||
components: { popInfo, PluginBox },
|
||||
props: {
|
||||
title: { type: String, required: true, default: "" },
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
windowType: 0,
|
||||
list: [],
|
||||
tabBox: null,
|
||||
popShow: false,
|
||||
resize: null,
|
||||
info: {},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// Your computed properties
|
||||
},
|
||||
methods: {
|
||||
setWindowType() {
|
||||
this.resize = new ResizeObserver((e) => {
|
||||
let width = e[0].contentRect.width
|
||||
windowType.value = width <= 800 && width > 500 ? 1 : width <= 500 ? 2 : 0
|
||||
})
|
||||
tabBox.value&&resize.observe(tabBox.value)
|
||||
this.windowType = width <= 800 && width > 500 ? 1 : width <= 500 ? 2 : 0
|
||||
})
|
||||
this.tabBox && this.resize.observe(this.tabBox)
|
||||
},
|
||||
installPlugin(o) {
|
||||
this.info = o;
|
||||
this.popShow = true;
|
||||
},
|
||||
closePlugin(){
|
||||
this.info = {};
|
||||
this.popShow = false;
|
||||
},
|
||||
unObserve() {
|
||||
this.resize.unobserve(this.tabBox)
|
||||
},
|
||||
loaddata(){
|
||||
this.$http.get('admin/application/lists').then((res) => {
|
||||
if (res.code == 200) {
|
||||
this.list = res.data;
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.tabBox = this.$refs.tabBox;
|
||||
this.$nextTick(() => this.setWindowType())
|
||||
this.loaddata();
|
||||
},
|
||||
beforeUnmount() {
|
||||
this.unObserve()
|
||||
}
|
||||
}
|
||||
|
||||
//安装插件
|
||||
let installPlugin=()=>{
|
||||
popShow.value=!popShow.value
|
||||
}
|
||||
//卸载监听
|
||||
let unObserve=()=>{
|
||||
resize.unobserve(tabBox.value)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
nextTick(() => setWindowType())
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
unObserve()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<div class="dis-f jus-x pop-bg">
|
||||
<div class="info-box dis-f jus-x al-item text-f pos-r">
|
||||
<div class="title">
|
||||
{{ 123456 }}
|
||||
{{ item.name }}
|
||||
<div class="close" @click="closePop">
|
||||
<el-icon><el-icon-close-bold /></el-icon>
|
||||
</div>
|
||||
@ -10,10 +10,10 @@
|
||||
<div class="info-data-box">
|
||||
<div class="dis-f al-item jus-bet">
|
||||
<div class="dis-f al-item" style="flex:0.75;">
|
||||
<img src="" class="img" alt="">
|
||||
<img :src="item.icon" class="img" alt="">
|
||||
<div style="flex:1;">
|
||||
<div class="data-title">123</div>
|
||||
<div class="data-info-text">123456</div>
|
||||
<div class="data-title">{{ item.name }}</div>
|
||||
<div class="data-info-text">{{ item.description }}</div>
|
||||
<span class="data-info-type data-info-type-m jus-x">
|
||||
免费
|
||||
</span>
|
||||
@ -29,7 +29,7 @@
|
||||
<div class="plugin-box">
|
||||
</div>
|
||||
<div class="plugin-introduce">
|
||||
1234567894513
|
||||
{{ item.description }}
|
||||
</div>
|
||||
<div class="plugin-tag-title">
|
||||
相关详情
|
||||
@ -40,22 +40,21 @@
|
||||
版本
|
||||
</div>
|
||||
<div class="text">
|
||||
v1.10.1 <span class="history-text">版本历史</span>
|
||||
{{ item.version }} <span class="history-text">版本历史</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<div class="box">
|
||||
<div style="margin-bottom:8px;">开发者</div>
|
||||
<div class="text">
|
||||
123456456456456
|
||||
{{ item.author }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<div class="box">
|
||||
<div style="margin-bottom:8px;">业务场景</div>
|
||||
<div style="margin-bottom:8px;">数据表</div>
|
||||
<div class="dis-f" style="flex-wrap: wrap;">
|
||||
<div class="business-type">123456</div>
|
||||
<div class="business-type">2</div>
|
||||
<div class="business-type">{{ item.tables }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
@ -80,6 +79,7 @@
|
||||
import { defineProps } from 'vue'
|
||||
let props = defineProps({
|
||||
showPop: Function,
|
||||
item: Object,
|
||||
})
|
||||
|
||||
//关闭弹窗
|
||||
@ -226,6 +226,7 @@ img {
|
||||
font-size: 14px;
|
||||
word-wrap: break-word;
|
||||
max-width: 100%;
|
||||
height: calc(100% - 320px);
|
||||
}
|
||||
|
||||
.info-video {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user