Browse Source

refactor: 移动项目描述图片位置,不放入npm包文件夹中

wu.jian2 1 year ago
parent
commit
afaaf60620

+ 0 - 0
data-room-ui/packages/assets/images/doc/images/design01.png → data-room-ui/example/assets/doc/images/design01.png


+ 0 - 0
data-room-ui/packages/assets/images/doc/images/home.png → data-room-ui/example/assets/doc/images/home.png


+ 0 - 0
data-room-ui/packages/assets/images/doc/images/qq.png → data-room-ui/example/assets/doc/images/qq.png


+ 0 - 0
data-room-ui/packages/assets/images/doc/logo.png → data-room-ui/example/assets/doc/logo.png


+ 33 - 10
data-room-ui/packages/BigScreenDesign/LeftPanel.vue

@@ -95,10 +95,9 @@
                     <div
                     <div
                       v-for="element in menu.components"
                       v-for="element in menu.components"
                       :key="element.type + element.name"
                       :key="element.type + element.name"
-                      :class="
-                        element.component
-                          ? 'item menu-component drag-node'
-                          : 'item drag-node'
+                      :class="element.component
+                        ? 'item menu-component drag-node'
+                        : 'item drag-node'
                       "
                       "
                       draggable="true"
                       draggable="true"
                       :data-type="element.type"
                       :data-type="element.type"
@@ -111,11 +110,18 @@
                         class="img_dispaly chooseDragNode"
                         class="img_dispaly chooseDragNode"
                         @click.stop="addComponent(element)"
                         @click.stop="addComponent(element)"
                       >
                       >
-                        <icon-svg
+                        <svg
+                          v-if="element.icon"
+                          class="icon-svg"
+                          aria-hidden="true"
+                        >
+                          <use :xlink:href="`#icon-a-${element.icon}`" />
+                        </svg>
+                        <!-- <icon-svg
                           v-if="element.icon"
                           v-if="element.icon"
                           :name="element.icon"
                           :name="element.icon"
                           class="page-opt-list-icon"
                           class="page-opt-list-icon"
-                        />
+                        /> -->
                         <img
                         <img
                           v-else-if="element.img"
                           v-else-if="element.img"
                           :src="element.img"
                           :src="element.img"
@@ -140,6 +146,8 @@
   </transition>
   </transition>
 </template>
 </template>
 <script>
 <script>
+
+import './data-room-ui-icon/iconfont.js'
 import _ from 'lodash'
 import _ from 'lodash'
 import basicComponents from 'data-room-ui/js/config/basicComponentsConfig'
 import basicComponents from 'data-room-ui/js/config/basicComponentsConfig'
 import g2PlotComponents, { getCustomPlots } from '../G2Plots/plotList'
 import g2PlotComponents, { getCustomPlots } from '../G2Plots/plotList'
@@ -284,14 +292,14 @@ export default {
       // this.$emit('onStart', e)
       // this.$emit('onStart', e)
     },
     },
     // 拖拽组件时触发
     // 拖拽组件时触发
-    onEnd (e) {},
+    onEnd (e) { },
     // 点击左侧组件时触发
     // 点击左侧组件时触发
     addComponent (element) {
     addComponent (element) {
       this.$store.commit('bigScreen/changeActiveItem', element)
       this.$store.commit('bigScreen/changeActiveItem', element)
       this.$emit('addComponent', element)
       this.$emit('addComponent', element)
     },
     },
     // 初始化
     // 初始化
-    initList () {},
+    initList () { },
     // 点击tab标签
     // 点击tab标签
     tabClick (tab) {
     tabClick (tab) {
       this.nodeDrag()
       this.nodeDrag()
@@ -327,6 +335,7 @@ export default {
 
 
 <style lang="scss" scoped>
 <style lang="scss" scoped>
 @import '../BigScreenDesign/fonts/iconfont.css';
 @import '../BigScreenDesign/fonts/iconfont.css';
+
 .bs-left-panel {
 .bs-left-panel {
   display: flex;
   display: flex;
   background-color: var(--bs-background-1);
   background-color: var(--bs-background-1);
@@ -354,7 +363,7 @@ export default {
   .page-left {
   .page-left {
     box-sizing: border-box;
     box-sizing: border-box;
 
 
-    > * {
+    >* {
       color: #fff;
       color: #fff;
     }
     }
 
 
@@ -378,6 +387,7 @@ export default {
         .iconfont-bigscreen {
         .iconfont-bigscreen {
           color: var(--bs-el-color-primary);
           color: var(--bs-el-color-primary);
         }
         }
+
         .menu-title-span {
         .menu-title-span {
           color: var(--bs-el-color-primary);
           color: var(--bs-el-color-primary);
         }
         }
@@ -406,6 +416,7 @@ export default {
             /*border-left: 4px solid #007aff;*/
             /*border-left: 4px solid #007aff;*/
             position: relative;
             position: relative;
             padding-left: 12px;
             padding-left: 12px;
+
             &:after {
             &:after {
               position: absolute;
               position: absolute;
               left: 0;
               left: 0;
@@ -418,9 +429,11 @@ export default {
             }
             }
           }
           }
         }
         }
+
         .el-scrollbar__view {
         .el-scrollbar__view {
           height: calc(100vh - 55px);
           height: calc(100vh - 55px);
         }
         }
+
         .page-left-content-components {
         .page-left-content-components {
           width: 100%;
           width: 100%;
           text-align: center;
           text-align: center;
@@ -448,6 +461,7 @@ export default {
                 padding: 4px 8px;
                 padding: 4px 8px;
                 text-align: left;
                 text-align: left;
               }
               }
+
               .sampleImg {
               .sampleImg {
                 margin: 0 auto;
                 margin: 0 auto;
                 width: 102px;
                 width: 102px;
@@ -464,6 +478,9 @@ export default {
                 .icon-svg {
                 .icon-svg {
                   width: 60px !important;
                   width: 60px !important;
                   height: 60px !important;
                   height: 60px !important;
+                  vertical-align: -0.15em;
+                  fill: currentColor;
+                  overflow: hidden;
                 }
                 }
 
 
                 img {
                 img {
@@ -479,6 +496,7 @@ export default {
                 height: 75px;
                 height: 75px;
                 margin: 0 auto;
                 margin: 0 auto;
               }
               }
+
               .img_dispaly {
               .img_dispaly {
                 height: 80px;
                 height: 80px;
               }
               }
@@ -526,9 +544,11 @@ export default {
       border: none;
       border: none;
     }
     }
   }
   }
+
   .left-tabs-box {
   .left-tabs-box {
     ::v-deep.el-tabs__item {
     ::v-deep.el-tabs__item {
       height: 70px !important;
       height: 70px !important;
+
       .menu-slot {
       .menu-slot {
         height: 100%;
         height: 100%;
         display: flex;
         display: flex;
@@ -536,9 +556,11 @@ export default {
         align-items: center;
         align-items: center;
         flex-wrap: wrap;
         flex-wrap: wrap;
         color: #bcc9d4;
         color: #bcc9d4;
+
         .menu-icon {
         .menu-icon {
           height: 20px;
           height: 20px;
         }
         }
+
         .menu-title-span {
         .menu-title-span {
           display: block;
           display: block;
           width: 100%;
           width: 100%;
@@ -560,7 +582,8 @@ export default {
 .slide-fade-enter,
 .slide-fade-enter,
 .slide-fade-leave-to
 .slide-fade-leave-to
 
 
-/* .slide-fade-leave-active for below version 2.1.8 */ {
+/* .slide-fade-leave-active for below version 2.1.8 */
+  {
   transform: translateX(10px);
   transform: translateX(10px);
   opacity: 0;
   opacity: 0;
 }
 }