From d4e0ff0fc20d73977ca3b03bab434bf4e459ab3b Mon Sep 17 00:00:00 2001
From: xiangxy <shione_xxy@163.com>
Date: Fri, 11 Apr 2025 14:55:10 +0800
Subject: [PATCH] ===

---
 src/views/system/scheduling/pointscreen.vue | 487 ++++++++++++--------
 1 file changed, 303 insertions(+), 184 deletions(-)

diff --git a/src/views/system/scheduling/pointscreen.vue b/src/views/system/scheduling/pointscreen.vue
index f8b6fd7..2c95d04 100644
--- a/src/views/system/scheduling/pointscreen.vue
+++ b/src/views/system/scheduling/pointscreen.vue
@@ -9,19 +9,19 @@
         <div class="resolution-inputs">
           <div class="input-group">
             <label>宽度(px):</label>
-            <el-input 
-              v-model.number="canvasWidth" 
-              type="number" 
-              :min="100" 
+            <el-input
+              v-model.number="canvasWidth"
+              type="number"
+              :min="100"
               @change="handleResolutionChange"
             />
           </div>
           <div class="input-group">
             <label>高度(px):</label>
-            <el-input 
-              v-model.number="canvasHeight" 
-              type="number" 
-              :min="100" 
+            <el-input
+              v-model.number="canvasHeight"
+              type="number"
+              :min="100"
               @change="handleResolutionChange"
             />
           </div>
@@ -40,8 +40,8 @@
       </div>
       <!-- 厂区选择下拉框 -->
       <div class="factory-selector">
-        <el-select 
-          v-model="selectedFactory" 
+        <el-select
+          v-model="selectedFactory"
           placeholder="请选择厂区"
           @change="handleFactoryChange"
         >
@@ -67,63 +67,77 @@
     </div>
 
     <!-- 中间编辑框 -->
-    <div class="editor-container" @scroll="handleScroll">
-      <!-- 标尺部分 -->
-      <div class="ruler-horizontal" :style="horizontalRulerStyle">
-        <div
-          v-for="i in horizontalRulerTicks"
-          :key="i"
-          class="ruler-tick"
-          :style="{ left: `${i * rulerUnit}px` }"
-        >
-          {{ i * rulerUnit }}
-        </div>
-      </div>
-
-      <div class="ruler-vertical"  :style="verticalRulerStyle">
-        <div
-          v-for="i in verticalRulerTicks"
-          :key="i"
-          class="ruler-tick"
-          :style="{ top: `${i * rulerUnit}px` }"
-        >
-          {{ i * rulerUnit }}
-        </div>
-      </div>
-
-      <!-- 编辑画布 -->
-      <div 
-        class="editor-canvas"
-        :style="{ 
-          width: canvasWidth + 'px', 
-          height: canvasHeight + 'px',
-          backgroundImage: 'url(' + bgUrl + ')'
-        }"
-        @drop="onDrop" 
-        @dragover.prevent
-        ref="editorCanvas"
-      >
-        <div
-          v-for="(component, index) in canvasComponents"
-          :key="index"
-          :style="getComponentStyle(component)"
-          class="canvas-component"
-          ref="targetDiv"
-          :class="{ 'highlight-border': isActive && currentIndex == index}"
-          @mousedown="startDrag(component, $event)"
-          @click="selectComponent(component, index)"
-        >
-          <!-- <div class="pbox" :style="{background: '#fc0 url('+ component.imageUrl +') no-repeat center;'}"> -->
-          <div class="pbox" :style="{backgroundImage: 'url(' + component.imageUrl + ')'}">
-            <div style="line-height: 100%; font-size:12px; color: #000;">{{ component.name}}</div>
+    <div class="center-box">
+      <div class="editor-container" @scroll="handleScroll">
+        <!-- 标尺部分 -->
+        <div class="ruler-horizontal" :style="horizontalRulerStyle">
+          <div
+            v-for="i in horizontalRulerTicks"
+            :key="i"
+            class="ruler-tick"
+            :style="{ left: `${i * rulerUnit}px` }"
+          >
+            {{ i * rulerUnit }}
+          </div>
+        </div>
+
+        <div class="ruler-vertical" :style="verticalRulerStyle">
+          <div
+            v-for="i in verticalRulerTicks"
+            :key="i"
+            class="ruler-tick"
+            :style="{ top: `${i * rulerUnit}px` }"
+          >
+            {{ i * rulerUnit }}
+          </div>
+        </div>
+
+        <!-- 编辑画布 -->
+        <div
+          ref="editorCanvas"
+          class="editor-canvas"
+          :style="{
+            width: canvasWidth + 'px',
+            height: canvasHeight + 'px',
+            backgroundImage: 'url(' + bgUrl + ')'
+          }"
+          @drop="onDrop"
+          @dragover.prevent
+        >
+          <div
+            v-for="(component, index) in canvasComponents"
+            :key="index"
+            ref="targetDiv"
+            :style="getComponentStyle(component)"
+            class="canvas-component"
+            :class="{ 'highlight-border': isActive && currentIndex == index}"
+            @mousedown="startDrag(component, $event)"
+            @click="selectComponent(component, index)"
+          >
+            <!-- <div class="pbox" :style="{background: '#fc0 url('+ component.imageUrl +') no-repeat center;'}"> -->
+            <!-- <div class="pbox" :style="{backgroundImage: 'url(' + component.imageUrl + ')'}">
+              <div style="line-height: 100%; font-size:12px; color: #000;">{{ component.name}}</div>
+            </div> -->
+            {{ component.name }}
+            <!-- <div style="width: 100%; height: 100%; font-size: 14px; line-height: 100%;">{{ component.name }}</div> -->
+            <!-- <img
+              v-if="component.imageUrl"
+              :src="component.imageUrl"
+              alt="组件图片"
+              style="width: 100%; max-height: 80%;"
+            />
+            <div style="width: 100%; height: 40%; font-size: 14px;"><span class="circle" :style="'background-color:' + component.status + ';'"></span>{{ component.name }}</div> -->
+          </div>
+        </div>
+      </div>
+      <div class="sbox">
+        <!-- <div class="sbox-t">点位状态配置</div> -->
+        <h3>点位状态配置</h3>
+        <div class="s-container">
+          <div v-for="(e, i) in statusList" :key="i" class="sbox-l">
+            <span class="s-txt">{{ e.name }}</span>
+            <span class="s-btn"><el-button type="primary" @click="toDialog(e)">编辑</el-button></span>
           </div>
-          <!-- <img
-            v-if="component.imageUrl"
-            :src="component.imageUrl"
-            alt="组件图片"
-            style="width: 100%; max-height: 80%;"
-          />
-          <div style="width: 100%; height: 40%; font-size: 14px;"><span class="circle" :style="'background-color:' + component.status + ';'"></span>{{ component.name }}</div> -->
         </div>
       </div>
     </div>
@@ -133,7 +147,7 @@
       <h3>属性编辑</h3>
       <div v-if="selectedComponent">
         <label>名称:</label>
-        <el-input v-model="selectedComponent.name" type="value" :disabled="true"/>
+        <el-input v-model="selectedComponent.name" type="value" :disabled="true" />
         <label>X 坐标:</label>
         <el-input v-model.number="selectedComponent.x" type="number" />
         <label>Y 坐标:</label>
@@ -145,9 +159,9 @@
         <!-- <label>状态:</label>
         <el-input v-model="selectedComponent.status" type="value" /> -->
         <label>图标:</label>
-          <div class="factory-selector">
-          <el-select 
-            v-model="selectedPointImg" 
+        <div class="factory-selector">
+          <el-select
+            v-model="selectedPointImg"
             placeholder="请选择点位图标"
             @change="handlePointImgChange"
           >
@@ -167,24 +181,56 @@
         >
           <el-button type="primary">点击上传</el-button>
         </el-upload> -->
-        <label></label>
+        <label />
       </div>
       <div v-else>
         请选择一个点位
       </div>
     </div>
+    <!-- 图标配置 -->
+    <el-dialog
+      title="图标"
+      :visible.sync="dialogVisible"
+      width="50%"
+    >
+      <!-- <span>这是一段信息</span> -->
+      <div class="icon-container">
+        <div v-for="(e, i) in iconList" :key="i" class="iconbox" :class="{ 'highlight-border': e.id === pkId}" @click="toSelectIcon(e)">
+          <img :src="e.iconUrl">
+        </div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="toSureBind()">确 定</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import draggable from 'vuedraggable';
+import draggable from 'vuedraggable'
 
 export default {
   components: {
-    draggable,
+    draggable
   },
   data() {
     return {
+      pkId: '',
+      pkIconObj: '',
+      selStatusObj: '',
+      statusList: [
+        { id: 1, code: 'c001', name: '状态1' },
+        { id: 2, code: 'c002', name: '状态2' },
+        { id: 3, code: 'c003', name: '状态3' },
+        { id: 4, code: 'c004', name: '状态4' }
+      ],
+      iconList: [
+        { id: 1, iconUrl: 'https://img2.baidu.com/it/u=2914671817,628443499&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=889' },
+        { id: 2, iconUrl: 'https://img0.baidu.com/it/u=3613398591,98570664&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500' },
+        { id: 3, iconUrl: 'https://img0.baidu.com/it/u=1796365119,3995265789&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667' }
+      ],
+      dialogVisible: false,
       // 新增分辨率设置
       canvasWidth: 1920,
       canvasHeight: 1080,
@@ -199,7 +245,7 @@ export default {
       components: [ // 左侧可拖拽点位
         { id: 1, name: '点位1', type: 'component1' },
         { id: 2, name: '点位2', type: 'component2' },
-        { id: 3, name: '点位3', type: 'component3' },
+        { id: 3, name: '点位3', type: 'component3' }
       ],
       pointSetOptions: [
         { id: 1, name: '点位1', code: '029-01', pointImg: 'https://img2.baidu.com/it/u=2914671817,628443499&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=889' },
@@ -221,56 +267,28 @@ export default {
       rulerUnit: 50,
       horizontalRulerTicks: [],
       verticalRulerTicks: [],
-      saveList:[],
+      saveList: [],
       scrollLeft: 0,
       scrollTop: 0,
       currentIndex: '',
-      currentObject: {},
-    };
-  },
-  watch: {
-    // 监听分辨率变化
-    canvasWidth(newVal) {
-      this.updateRulerTicks();
-      this.adjustComponentsPosition();
-    },
-    canvasHeight(newVal) {
-      this.updateRulerTicks();
-      this.adjustComponentsPosition();
+      currentObject: {}
     }
   },
-  mounted() {
-    // 添加全局点击监听
-    document.addEventListener('click', this.handleDocumentClick);
-    this.updateRulerTicks();
-    // const box = document.querySelector('.ruler-horizontal')
-    // const vox = document.querySelector('.ruler-vertical')
-    // window.addEventListener('scroll', () => {
-    //   const scrollX = window.scrollX; // 获取水平滚动值
-    //   box.style.left = `${30 + scrollX}px`; // 更新left值
-    //   const scrollY = window.scrollY; // 获取垂直滚动值
-    //   vox.style.top = `${20 + scrollY}px`; // 更新top值
-    // })
-  },
-  beforeDestroy() {
-    // 移除监听，防止内存泄漏
-    document.removeEventListener('click', this.handleDocumentClick);
-  },
   computed: {
     // 顶部标尺样式
     horizontalRulerStyle() {
       return {
         top: this.scrollTop + 'px',
-        width: this.canvasWidth + 'px',
+        width: this.canvasWidth + 'px'
       }
     },
     // 左侧标尺样式
     verticalRulerStyle() {
       return {
         left: this.scrollLeft + 'px',
-        height: this.canvasHeight + 'px',
+        height: this.canvasHeight + 'px'
       }
-    },
+    }
     // // 左侧标尺样式
     // verticalRulerStyle() {
     //   return {
@@ -287,26 +305,78 @@ export default {
     //   }
     // }
   },
+  watch: {
+    // 监听分辨率变化
+    canvasWidth(newVal) {
+      this.updateRulerTicks()
+      this.adjustComponentsPosition()
+    },
+    canvasHeight(newVal) {
+      this.updateRulerTicks()
+      this.adjustComponentsPosition()
+    }
+  },
+  mounted() {
+    // 添加全局点击监听
+    document.addEventListener('click', this.handleDocumentClick)
+    this.updateRulerTicks()
+    // const box = document.querySelector('.ruler-horizontal')
+    // const vox = document.querySelector('.ruler-vertical')
+    // window.addEventListener('scroll', () => {
+    //   const scrollX = window.scrollX; // 获取水平滚动值
+    //   box.style.left = `${30 + scrollX}px`; // 更新left值
+    //   const scrollY = window.scrollY; // 获取垂直滚动值
+    //   vox.style.top = `${20 + scrollY}px`; // 更新top值
+    // })
+  },
+  beforeDestroy() {
+    // 移除监听，防止内存泄漏
+    document.removeEventListener('click', this.handleDocumentClick)
+  },
   methods: {
+    toSureBind() {
+      this.statusList.map(item => {
+        if (item === this.selStatusObj) {
+          item.bindIcon = this.pkIconObj.iconUrl
+        }
+      })
+      console.log(this.statusList, '2222222')
+      this.dialogVisible = false
+    },
+    toDialog(e) {
+      this.pkId = ''
+      this.iconList.map(item => {
+        if (item.iconUrl === e.bindIcon) {
+          this.pkId = item.id
+        }
+      })
+      // this.pkId = this.pkId === e.id ? '' : e.id
+      this.dialogVisible = !this.dialogVisible
+      this.selStatusObj = e
+    },
+    toSelectIcon(e) {
+      this.pkId = this.pkId === e.id ? '' : e.id
+      this.pkIconObj = e
+    },
     handleDocumentClick(event) {
       // 判断点击是否发生在目标 div 外部
       if (this.$refs.targetDiv && !this.$refs.targetDiv[this.currentIndex].contains(event.target)) {
-        this.isActive = false;
+        this.isActive = false
       }
     },
     handleFileChange(file) {
       // 验证文件类型
       if (!file.raw.type.startsWith('image/')) {
-        this.$message.error('只能上传图片文件！');
-        return;
+        this.$message.error('只能上传图片文件！')
+        return
       }
-      
+
       // 读取文件生成预览
-      const reader = new FileReader();
+      const reader = new FileReader()
       reader.onload = (e) => {
-        this.bgUrl = e.target.result;
-      };
-      reader.readAsDataURL(file.raw);
+        this.bgUrl = e.target.result
+      }
+      reader.readAsDataURL(file.raw)
       console.log(this.bgUrl, 'bgimg')
       // 切换背景图片，重置
       // this.canvasComponents = [];
@@ -314,10 +384,10 @@ export default {
     },
     // 分辨率变更处理
     handleResolutionChange() {
-      if (this.canvasWidth < 100) this.canvasWidth = 100;
-      if (this.canvasHeight < 100) this.canvasHeight = 100;
-      this.updateRulerTicks();
-      this.adjustComponentsPosition();
+      if (this.canvasWidth < 100) this.canvasWidth = 100
+      if (this.canvasHeight < 100) this.canvasHeight = 100
+      this.updateRulerTicks()
+      this.adjustComponentsPosition()
     },
 
     // 更新标尺刻度
@@ -325,62 +395,62 @@ export default {
       this.horizontalRulerTicks = Array.from(
         { length: Math.ceil(this.canvasWidth / this.rulerUnit) },
         (_, i) => i
-      );
+      )
       this.verticalRulerTicks = Array.from(
         { length: Math.ceil(this.canvasHeight / this.rulerUnit) },
         (_, i) => i
-      );
+      )
     },
 
     // 调整组件位置
     adjustComponentsPosition() {
       this.canvasComponents.forEach(component => {
         // 限制X坐标
-        const maxX = this.canvasWidth - component.width;
+        const maxX = this.canvasWidth - component.width
         if (component.x > maxX) {
-          component.x = Math.max(0, maxX);
+          component.x = Math.max(0, maxX)
         }
-        
+
         // 限制Y坐标
-        const maxY = this.canvasHeight - component.height;
+        const maxY = this.canvasHeight - component.height
         if (component.y > maxY) {
-          component.y = Math.max(0, maxY);
+          component.y = Math.max(0, maxY)
         }
-      });
+      })
     },
     // 新增厂区变更处理方法
     handleFactoryChange(factoryId) {
-      console.log(`切换到厂区: ${factoryId}`);
+      console.log(`切换到厂区: ${factoryId}`)
       console.log('selectedFactory', this.selectedFactory)
       this.factoryOptions.map(el => {
-        if (el.id == factoryId) {
-          this.selFacName = el.name;
+        if (el.id === factoryId) {
+          this.selFacName = el.name
         }
       })
       // 这里可以添加加载厂区配置的逻辑
       // 例如：清空当前画布或加载对应厂区配置
-      this.canvasComponents = [];
-      this.selectedComponent = null;
+      this.canvasComponents = []
+      this.selectedComponent = null
     },
     handlePointImgChange(PointSetId) {
       // console.log(`切换到点位图片: ${PointSetId}`);
       this.pointSetOptions.map(el => {
-        if (el.id == PointSetId) {
-          this.selectedComponent.imageUrl = el.pointImg;
+        if (el.id === PointSetId) {
+          this.selectedComponent.imageUrl = el.pointImg
         }
       })
     },
-    toSave () {
+    toSave() {
       console.log(this.bgUrl)
       // console.log(this.selectedComponent)
       console.log(JSON.stringify(this.canvasComponents))
     },
     onDragStart(event) {
       // console.log('eeee', event)
-      event.item.dataset.type = this.components[event.oldIndex].type;
-      event.item.dataset.id = this.components[event.oldIndex].id; // 新加
+      event.item.dataset.type = this.components[event.oldIndex].type
+      event.item.dataset.id = this.components[event.oldIndex].id // 新加
       this.currentObject = this.components[event.oldIndex]
-      if(this.canvasComponents.some(item => {
+      if (this.canvasComponents.some(item => {
         return item.id === this.currentObject.id
       })) {
         console.log('已存在')
@@ -393,8 +463,8 @@ export default {
       // console.log('11222', event.dataTransfer.getData('id'))
       // console.log('22333', event.dataTransfer.getData('type'))
       // const type = event.dataTransfer.getData('type');
-      const type = this.currentObject.type;
-      const id = this.currentObject.id;
+      const type = this.currentObject.type
+      const id = this.currentObject.id
       const newComponent = {
         id,
         type,
@@ -403,14 +473,14 @@ export default {
         y: event.offsetY - this.dragOffset.y,
         width: 100,
         height: 50,
-        imageUrl: '',
-      };
-      if(this.canvasComponents.some(item => {
+        imageUrl: ''
+      }
+      if (this.canvasComponents.some(item => {
         return item.id === this.currentObject.id
       })) {
         console.log('已存在')
-      }else {
-      this.canvasComponents.push(newComponent);
+      } else {
+        this.canvasComponents.push(newComponent)
       }
     },
     getComponentStyle(component) {
@@ -421,68 +491,68 @@ export default {
         width: `${component.width}px`,
         height: `${component.height}px`,
         border: '1px solid #ccc',
-        cursor: this.isDragging ? 'grabbing' : 'move',
-      };
+        cursor: this.isDragging ? 'grabbing' : 'move'
+      }
     },
     // 开始拖拽
     startDrag(component, event) {
-      this.selectedComponent = component;
-      this.isDragging = true;
-      
+      this.selectedComponent = component
+      this.isDragging = true
+
       // 计算鼠标在组件内部的偏移量
-      const rect = event.target.getBoundingClientRect();
+      const rect = event.target.getBoundingClientRect()
       this.dragOffset = {
         x: event.clientX - rect.left,
-        y: event.clientY - rect.top,
-      };
+        y: event.clientY - rect.top
+      }
 
       // 绑定全局事件
-      document.addEventListener('mousemove', this.onDrag);
-      document.addEventListener('mouseup', this.stopDrag);
+      document.addEventListener('mousemove', this.onDrag)
+      document.addEventListener('mouseup', this.stopDrag)
     },
     // 拖拽中
     onDrag(event) {
-      if (!this.isDragging || !this.selectedComponent) return;
+      if (!this.isDragging || !this.selectedComponent) return
 
       // 计算组件的新位置（相对于画布）
-      const canvasRect = this.$refs.editorCanvas.getBoundingClientRect();
-      const newX = event.clientX - canvasRect.left - this.dragOffset.x;
-      const newY = event.clientY - canvasRect.top - this.dragOffset.y;
+      const canvasRect = this.$refs.editorCanvas.getBoundingClientRect()
+      const newX = event.clientX - canvasRect.left - this.dragOffset.x
+      const newY = event.clientY - canvasRect.top - this.dragOffset.y
 
       // 更新组件位置
-      this.selectedComponent.x = Math.max(0, newX);
-      this.selectedComponent.y = Math.max(0, newY);
+      this.selectedComponent.x = Math.max(0, newX)
+      this.selectedComponent.y = Math.max(0, newY)
     },
     // 停止拖拽
     stopDrag() {
-      this.isDragging = false;
-      document.removeEventListener('mousemove', this.onDrag);
-      document.removeEventListener('mouseup', this.stopDrag);
+      this.isDragging = false
+      document.removeEventListener('mousemove', this.onDrag)
+      document.removeEventListener('mouseup', this.stopDrag)
     },
     selectComponent(component, index) {
-      this.selectedComponent = component;
-      this.isActive = true;
-      this.selectedPointImg = '';
-      this.currentIndex = index;
+      this.selectedComponent = component
+      this.isActive = true
+      this.selectedPointImg = ''
+      this.currentIndex = index
     },
     handleUploadSuccess(response, file) {
       if (this.selectedComponent) {
-        this.selectedComponent.imageUrl = URL.createObjectURL(file.raw);
+        this.selectedComponent.imageUrl = URL.createObjectURL(file.raw)
       }
     },
     beforeUpload(file) {
-      const isImage = file.type.startsWith('image/');
+      const isImage = file.type.startsWith('image/')
       if (!isImage) {
-        this.$message.error('只能上传图片文件！');
+        this.$message.error('只能上传图片文件！')
       }
-      return isImage;
+      return isImage
     },
     handleScroll(e) {
-      this.scrollLeft = e.target.scrollLeft;
-      this.scrollTop = e.target.scrollTop;
-    },
-  },
-};
+      this.scrollLeft = e.target.scrollLeft
+      this.scrollTop = e.target.scrollTop
+    }
+  }
+}
 </script>
 
 <style scoped>
@@ -514,7 +584,6 @@ export default {
   color: #666;
 }
 
-
 /* 新增厂区选择器样式 */
 .factory-selector {
   margin-bottom: 20px;
@@ -549,14 +618,46 @@ export default {
   border: 1px solid #c0c4cc;
   cursor: move;
 }
-
-.editor-container {
+.center-box {
   flex: 1;
   position: relative;
+  overflow: auto;
+}
+.sbox {
+  margin: 0 20px;
+}
+.s-container {
+  display: flex;
+  /* justify-content: space-between; */
+}
+.sbox-t {
+  font-size: 20px;
+}
+.sbox-l {
+  display: flex;
+  justify-content: space-between;
+  border: 1px solid #ccc;
+  width: 150px;
+  height: 40px;
+  padding: 5px 4px;
+  margin: 2px 6px;
+}
+.s-txt {
+  display: inline-block;
+  font-size: 14px;
+  line-height: 26px;
+  margin-right: 5px;
+}
+.s-btn {
+  display: inline-block;
+}
+.editor-container {
+  /* flex: 1; */
+  position: relative;
   margin: 0 20px;
   /* min-height: 600px;
   max-height: 1080px; */
-  height: 650px;
+  height: 600px;
   overflow: auto;
 }
 
@@ -629,7 +730,7 @@ export default {
   text-align: center;
   /* box-sizing: border-box;
   border: 1px solid #0073e1 !important; */
-  /* line-height: 50px; */
+  line-height: 50px;
   box-sizing: border-box;
   /* border: 2px dashed rgb(77 187 249); */
 }
@@ -668,12 +769,30 @@ input {
   width: 100%;
   height: 100%;
   text-align: center;
+  line-height: 100%;
   background-size: 100% 100%;
 }
 .highlight-border {
   /* border: 3px solid #2196f3; */
   /* box-shadow: 0 0 8px rgba(33, 150, 243, 0.5); */
   border: 3px solid #ff0;
-  box-shadow: 0 0 20px rgb(255, 255, 0);
+  box-shadow: 0 0 5px rgb(255, 255, 0);
 }
-</style>
\ No newline at end of file
+.icon-container{
+  display: flex;
+  width: 100%;
+  justify-content: flex-start;
+}
+.iconbox {
+  display: inline-block;
+  box-sizing: border-box;
+  width: 60px;
+  height: 40px;
+  margin: 5px;
+  /* border: 1px solid #ccc; */
+}
+.iconbox img{
+  width: 100%;
+  height: 100%;
+}
+</style>