MTrun 3 роки тому
батько
коміт
9659027502

+ 3 - 0
src/views/chart/ContentLayers/components/ListItem/index.ts

@@ -0,0 +1,3 @@
+import ListItem from './index.vue'
+
+export { ListItem }

+ 17 - 0
src/views/chart/ContentLayers/components/ListItem/index.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="go-content-layers-list-item">
+    <n-space>
+      <div>图片</div>
+      <b-text>
+        文字
+      </b-text>
+    </n-space>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="scss" scoped>
+@include go(content-layers-list-items) {
+}
+</style>

+ 9 - 1
src/views/chart/ContentLayers/index.vue

@@ -11,7 +11,9 @@
         <component :is="LayersIcon" />
       </n-icon>
     </template>
+
     <!-- 图层内容 -->
+    <ListItem v-for="item in chartEditStore.getComponentList" :key="item.id"/>
   </ContentBox>
 </template>
 
@@ -19,19 +21,25 @@
 import { ContentBox } from '../ContentBox/index'
 import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
 import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
+import { useChartEditStoreStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { ListItem } from './components/ListItem/index'
 import { icon } from '@/plugins'
+
 const { LayersIcon } = icon.ionicons5
 const chartLayoutStore = useChartLayoutStore()
 
+const chartEditStore = useChartEditStoreStore()
+
 const backHandle = () => {
   chartLayoutStore.setItem(ChartLayoutStoreEnum.LAYERS, false)
 }
 </script>
 
 <style lang="scss" scoped>
-$wight: 200px;
+$wight: 150px;
 @include go(content-layers) {
   width: $wight;
+  flex-shrink: 0;
   overflow: hidden;
   @extend .go-transition;
   &.scoped {