no message

src/views/system/application/pluginBox.vue

@@ -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;
 }
 

src/views/system/application/pluginMarket.vue

@@ -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>
+<script>
-import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
 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])
+export default {
-let tabBox = ref(null)
+  name: 'YourComponentName',
-let popShow = ref(false)
+  components: { popInfo, PluginBox },
-let resize
+  props: {
-//设置窗口宽度监听
+    title: { type: String, required: true, default: "" },
-let setWindowType = () => {
+  },
-    resize = new ResizeObserver((e) => {
+  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
+        this.windowType = width <= 800 && width > 500 ? 1 : width <= 500 ? 2 : 0
-    })
+      })
-    tabBox.value&&resize.observe(tabBox.value)
+      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>

src/views/system/application/popInfo.vue

@@ -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-title">{{ item.name }}</div>
-                            <div class="data-info-text">123456</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">{{ item.tables }}</div>
-                            <div class="business-type">2</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 {