Merge branch 'hi-ucs-dev' of http://15.2.21.221:3000/wuhongjian/hi-ucs into hi-ucs-dev

# Conflicts:
#	front/src/views/personalCenter/components/MyApply.vue

back/src/views/modules/activiti/demo/putaway-process.vue

@@ -66,21 +66,35 @@
           </el-form-item>
         </div>
         <div v-if="!shifoushizujian">
-          <el-form-item label="组件名称">
+          <el-form-item label="组件名称" v-if="algorithmShow">
             <el-input
               v-model="dataForm.name"
               :disabled="fieldDisabled"
               placeholder="组件名称"
             ></el-input>
           </el-form-item>
-          <el-form-item label="应用描述">
+          <el-form-item label="算法名称" v-if="nameNotShow">
+            <el-input
+              v-model="dataForm.name"
+              :disabled="fieldDisabled"
+              placeholder="算法名称"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="应用描述" v-if="algorithmShow">
             <el-input
               v-model="dataForm.description"
               :disabled="fieldDisabled"
               placeholder="应用描述"
             ></el-input>
           </el-form-item>
-          <el-form-item label="部门联系人">
+          <el-form-item label="算法描述" v-if="nameNotShow">
+            <el-input
+              v-model="dataForm.description"
+              :disabled="fieldDisabled"
+              placeholder="算法描述"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="部门联系人" v-if="algorithmShow">
             <el-input
               v-model="dataForm.deptContacts"
               :disabled="fieldDisabled"
@@ -94,7 +108,7 @@
               placeholder="共享类型"
             ></el-input>
           </el-form-item>
-          <el-form-item label="共享方式"  v-if="coverageNotShow">
+          <el-form-item label="共享方式"  v-if="coverageNotShow && algorithmShow">
             <el-input
               v-model="dataForm.shareMode"
               :disabled="fieldDisabled"
@@ -117,7 +131,7 @@
           </el-form-item>
           <el-form-item label="接口请求方式"  v-if="coverageNotShow">
             <el-input
-              v-model="dataForm.applyCount"
+              v-model="dataForm.apiMethodType"
               :disabled="fieldDisabled"
               placeholder="接口请求方式"
             ></el-input>
@@ -180,7 +194,9 @@ export default {
       dataForm: [],
       id: '',
       shifoushizujian: true,
-      coverageNotShow: true
+      coverageNotShow: true,
+      nameNotShow: false,
+      algorithmShow: true
     }
   },
   watch: {},
@@ -209,13 +225,16 @@ export default {
         }
         this.dataForm = res.data.resourceDTO
         if (this.dataForm.type != '应用资源') {
+          this.shifoushizujian = false
           this.dataForm.infoList.forEach((val) => {
             if (val.attrValue === '图层服务') {
               this.coverageNotShow = false
-              console.log(this.coverageNotShow, 'wowowo')
+            } else if (val.attrValue === '智能算法') {
+              this.nameNotShow = true
+              this.algorithmShow = false
+              console.log(this.nameNotShow, 'wowowo')
             }
           })
-          this.shifoushizujian = false
         } else {
           this.shifoushizujian = true
         }

back/src/views/modules/workBench/components/dept-chart-view.vue

@@ -30,6 +30,12 @@ export default {
             type: Array,
             default: () => []
         },
+        colorArray: {
+            type: Array,
+            default: () => [
+                '#fe845e', '#ff3e55', '#d5c438', '#ff9999', '#9c78ed', '#48c760', '#48c6c7', '#0058e1',
+            ]
+        },
     },
     watch: {
         dataList: {
@@ -62,9 +68,6 @@ export default {
             this.myChart = chartDom && echarts.init(chartDom);
 
             let lengendArr = this.dataListCopy.filter(v => v.name);
-            let colorArray = [
-                '#fe845e', '#ff3e55', '#d5c438', '#ff9999', '#9c78ed', '#48c760', '#48c6c7', '#0058e1',
-            ]
 
             let total = 0;
             this.dataListCopy.map(v => {
@@ -98,7 +101,17 @@ export default {
                     },
                 ],
                 tooltip: {
-                    triagger: 'item'
+                    triagger: 'item',
+                    formatter: (params) => {
+                        let str = ''
+                        if (params.name == '线') {
+                            str = ''
+                        } else {
+                            str = `<span style="display:inline-block;margin-right:5px;
+                            border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>${params.name}: ${params.value}`
+                        }
+                        return str;
+                    }
                 },
                 "legend": {
                     type: 'scroll',
@@ -119,7 +132,7 @@ export default {
                     "type": "pie",
                     "center": ["50%", "40%"],
                     "radius": ["50%", "63%"],
-                    "color": colorArray,
+                    "color": this.colorArray,
                     "startAngle": 135,
                     label: {
                         show: false
@@ -163,18 +176,19 @@ export default {
                     },
                     data: this.dataListCopy,
                 },
-
                 {
                     "type": "pie",
                     "center": ["50%", "40%"],
-                    "radius": ["35%", "36%"],
+                    "radius": ["38%", "39%"],
                     "label": {
                         "show": false
                     },
+                    hoverAnimation: false,
+                    showTooltip: false,
                     color: ['#d8dde8'],
                     "data": [{
-                        "value": 78,
-                        "name": "实例1",
+                        "value": 0,
+                        "name": "线",
                     }]
                 }
                 ]

back/src/views/modules/workBench/components/dept-todo-view.vue

@@ -12,9 +12,16 @@
             </div>
         </div>
         <div class="list-box" v-if="dataInfo.list.length > 0">
-            <div class="list-item" v-for="(item, i) in dataInfo.list" :key="i">
-                {{ item[dataInfo.nameStr] || '--' }}
+
+            <div v-for="(item, i) in dataInfo.list" :key="i">
+
+                <el-tooltip effect="dark" :content="item[dataInfo.nameStr]" placement="top">
+                    <div class="list-item ellipsis">
+                        {{ item[dataInfo.nameStr] || '--' }}
+                    </div>
+                </el-tooltip>
             </div>
+
             <div class="more">
                 查看更多 >
             </div>
@@ -49,6 +56,13 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+.ellipsis {
+    //超出一行省略号
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
 .no-margin-left {
     margin-left: 0;
 }
@@ -77,7 +91,8 @@ export default {
 .left-box {
     display: flex;
     justify-content: center;
-    width: 80px;
+    // width: 80px;
+    width: 100px;
     border-radius: 2px;
     height: 100%;
 }
@@ -100,6 +115,7 @@ export default {
     color: #000;
     margin-top: 25px;
     margin-bottom: 18px;
+    text-align: center;
 }
 
 .num {

back/src/views/modules/workBench/components/frequency-top5-view.vue

@@ -5,23 +5,25 @@
             <div class="no-box">
                 <div class="no no2">
                     <div class="name" :style="{ color: colorObj[2] }">{{ no2Obj.name || '--' }}</div>
-                    <div class="count">{{ no2Obj.count }}</div>
+                    <div class="count">{{ formatCount(no2Obj.count) }}</div>
                 </div>
                 <div class="no no1">
-                    <div class="name" :style="{ color: colorObj[1] }">{{ no1Obj.name }}</div>
-                    <div class="count">{{ no1Obj.count }}</div>
+                    <div class="name" :style="{ color: colorObj[1] }">{{ no1Obj.name || '--' }}</div>
+                    <div class="count">{{ formatCount(no1Obj.count) }}</div>
                 </div>
                 <div class="no no3">
-                    <div class="name" :style="{ color: colorObj[3] }">{{ no3Obj.name }}</div>
-                    <div class="count">{{ no3Obj.count }}</div>
+                    <div class="name" :style="{ color: colorObj[3] }">{{ no3Obj.name || '--' }}</div>
+                    <div class="count">{{ formatCount(no3Obj.count) }}</div>
                 </div>
             </div>
             <div class="flex-row-between row-name" v-for="(data, i) in listInfo" :key="i">
                 <div class="left">
                     <div class="row-index">{{ i + 3 }}</div>
-                    <div class="name-text">{{ data.name }}</div>
+                    <el-tooltip effect="dark" :content="data.name" placement="top">
+                        <div class="name-text ellipsis">{{ data.name || '--' }}</div>
+                    </el-tooltip>
                 </div>
-                <div class="count-text">{{ data.count }}</div>
+                <div class="count-text">{{ formatCount(data.count) }}</div>
             </div>
         </div>
         <div class="no-data" v-else>暂无数据</div>
@@ -84,19 +86,29 @@ export default {
                     this[`no${k}Obj`].count = _arr[i].count
                 }
                 this.listInfo = []
-                this.listInfo.push(_arr[3])
-                this.listInfo.push(_arr[4])
+                this.listInfo.push(_arr[3] || {})
+                this.listInfo.push(_arr[4] || {})
 
             }, err => {
                 this.loading = false;
                 this.$message.error(err);
             });
         },
+        formatCount(count) {
+            return count || count === 0 ? count : '--'
+        }
     },
     components: { contentTitle }
 }
 </script>
 <style lang="scss" scoped>
+.ellipsis {
+    //超出一行省略号
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
 .flex-row-between {
     display: flex;
     width: 100%;
@@ -161,6 +173,7 @@ export default {
     font-size: 16px;
     margin-bottom: 10px;
     margin-top: 70px;
+    width: 150px;
 }
 
 .count {
@@ -182,13 +195,14 @@ export default {
     font-size: 16px;
     color: #464545;
     margin-left: 10px;
+    width: 430px;
 }
 
 
 .num-text {
     font-size: 14px;
     color: #2b2b2b;
-   
+
 }
 
 .no-data {

back/src/views/modules/workBench/components/recommend-view.vue

@@ -23,7 +23,7 @@ export default {
           title: "名称",
           key: "name",
           dataIndex: "name",
-          width: 220
+          width: 250
         },
         {
           title: "类型",
@@ -35,7 +35,7 @@ export default {
           title: "单位",
           key: "deptContacts",
           dataIndex: "deptContacts",
-          width: 114
+          width: 144
         },
         {
           title: "时间",
@@ -47,14 +47,8 @@ export default {
           title: "当前申请数",
           key: "applyCount",
           dataIndex: "applyCount",
-          width: 115
+          width: 145
         },
-        {
-          title: "调用数量",
-          key: "visit",
-          dataIndex: "visit",
-          width: 90
-        }
       ],
       data: [
        

back/src/views/modules/workBench/workBench.vue

@@ -8,11 +8,14 @@
                     style="margin-left: 0"></dept-todo-view>
             </div>
             <div class="flex-row-start dept-chart-box">
-                <dept-chart-view id="shelves" title="部门上架" v-loading="loadingResource" :dataList="resourceData">
+                <dept-chart-view id="shelves" title="部门上架" v-loading="loadingResource" :dataList="resourceData"
+                    :colorArray="resourceColor">
                 </dept-chart-view>
-                <dept-chart-view id="apply" title="部门申请" v-loading="loadingApply" :dataList="applyData">
+                <dept-chart-view id="apply" title="部门申请" v-loading="loadingApply" :dataList="applyData"
+                    :colorArray="applyColor">
                 </dept-chart-view>
-                <dept-chart-view id="demand" title="部门需求" v-loading="loadingRequire" :dataList="requireData">
+                <dept-chart-view id="demand" title="部门需求" v-loading="loadingRequire" :dataList="requireData"
+                    :colorArray="requireColor">
                 </dept-chart-view>
             </div>
         </div>
@@ -65,12 +68,15 @@ export default {
                 list: [],
                 nameStr: 'processDefinitionName'
             },
-            // 上架
+            // 部门申请
             resourceData: [],
-            // 上架
+            resourceColor: ['#7b2cff', '#fd5151', , '#2ca1ff', '#0adbfa', '#febe13', '#65e5dd', '#f071ff', '#85f67a'],
+            // 部门申请
             applyData: [],
-            // 上架
+            applyColor: ["#5085f2", "#e75fc3", "#f87be2", "#f2719a", "#fca4bb", "#f59a8f", "#fdb301", "#57e7ec", "#cf9ef1"],
+            // 部门需求
             requireData: [],
+            requireColor: ['#FD866A', '#9E87FF', '#58D5FF', '#73DDFF', '#73ACFF', '#FDD56A', '#FDB36A',],
             loadingToDo: false,
             loadingHasToDo: false,
             loadingResource: false,
@@ -105,7 +111,7 @@ export default {
                 }
                 console.log('res----待办-------->', res.data);
                 this.toToData.list = res.data.data.records || []
-                this.toToData.num = res.data.data.records.length || 0
+                this.toToData.num = res.data.data.total || 0
             }, err => {
                 this.$message.error(err);
                 this.loadingToDo = false;
@@ -125,7 +131,7 @@ export default {
                 }
                 console.log('res----已办-------->', res.data);
                 this.hasToDodoData.list = res.data.data.records || []
-                this.hasToDodoData.num = res.data.data.records.length || 0
+                this.hasToDodoData.num = res.data.data.total || 0
             }, err => {
                 this.$message.error(err)
                 this.loadingHasToDo = false;

front/src/api/capabilityCloud.js

@@ -80,3 +80,17 @@ export function dataResourceInfo(params) {
     params,
   })
 }
+//能力云图-调用趋势
+export function callTheTrendPort(start, end, params) {
+  return request({
+    url: '/metrics/api/v1/query_range?query=sum(increase(apigateway_http_status%5B1d%5D))&start=' + start + '&end=' + end + '&step=' + params,
+    method: 'get',
+  })
+}
+//能力云图-调用次数
+export function totalCallsSnum(params) {
+  return request({
+    url: '/metrics/api/v1/query?query=sum(apigateway_http_status)&time=1655793262.495' + params,
+    method: 'get',
+  })
+}

front/src/views/capabilityCloud/components/ComponentServices.vue

@@ -117,6 +117,8 @@
   import {
     assemblerBaseStatic,
     componentServiceRank,
+    callTheTrendPort,
+    totalCallsSnum,
   } from '@/api/capabilityCloud'
   import * as moment from 'moment'
   let snum = ref([
@@ -145,20 +147,50 @@
           .subtract('days', 6 - i)
           .format('MM-DD')
         callTheTrendData.value.time.push(time)
-        callTheTrendData.value.snum.push('0')
         console.log('time', callTheTrendData.value, name)
       }
-      callTheTrend(callTheTrendData.value)
+      const start = parseInt(
+        (Date.parse(new Date()) - 168 * 60 * 60 * 1000) / 1000
+      )
+      const end = Date.parse(new Date()) / 1000
+      callTheTrendPort(start, end, 86400).then((res) => {
+        if (res.data.data.result) {
+          res.data.data.result[0].values.splice(0, 1)
+          res.data.data.result[0].values.map((item) => {
+            callTheTrendData.value.snum.push(parseInt(item[1]))
+          })
+          callTheTrend(callTheTrendData.value)
+        } else {
+          callTheTrendData.value.snum = ['0', '0', '0', '0', '0', '0', '0']
+          callTheTrend(callTheTrendData.value)
+        }
+      })
     } else {
       for (let i = 0; i < 31; i++) {
         let time = moment()
           .subtract('days', 30 - i)
           .format('MM-DD')
         callTheTrendData.value.time.push(time)
-        callTheTrendData.value.snum.push('0')
         console.log('time', callTheTrendData.value, name)
       }
-      callTheTrend(callTheTrendData.value)
+      const start = parseInt(
+        (Date.parse(new Date()) - 720 * 60 * 60 * 1000) / 1000
+      )
+      const end = Date.parse(new Date()) / 1000
+      callTheTrendPort(start, end, 86400).then((res) => {
+        if (res.data.data.result) {
+          // res.data.data.result.splice(0, 1)
+          res.data.data.result[0].values.map((item) => {
+            callTheTrendData.value.snum.push(parseInt(item[1]))
+          })
+          callTheTrend(callTheTrendData.value)
+        } else {
+          for (let i = 0; i < 30; i++) {
+            callTheTrendData.value.snum.push('0')
+          }
+          callTheTrend(callTheTrendData.value)
+        }
+      })
     }
   }
   //调用趋势echarts图
@@ -316,10 +348,18 @@
       })
     })
   }
+  //总调用次数接口
+  const TotalCallsAPI = () => {
+    const end = Date.parse(new Date()) / 1000
+    totalCallsSnum(end).then((res) => {
+      snum.value[1].num = res.data.data.result[0].value[1]
+    })
+  }
   const init = () => {
     timeSwitch(timeSwitchindex.value)
     NumberOfComponentServices()
     ranking(dataclick.value)
+    TotalCallsAPI()
   }
   onMounted(() => {
     init()

front/src/views/detailsAll/components/Algorithm/AlgorithmTopDetails.vue

@@ -28,10 +28,16 @@
         <!-- <span class="label">免费</span> -->
       </div>
       <div class="main">
-        <div>应用领域：{{ applicationArea }}</div>
-        <div>
-          {{ props.dataList.description }}
-        </div>
+        <a-tooltip placement="top">
+          <template #title>应用领域：{{ applicationArea }}</template>
+          <div>应用领域：{{ applicationArea }}</div>
+        </a-tooltip>
+        <a-tooltip placement="top">
+          <template #title>{{ props.dataList.description }}</template>
+          <div>
+            {{ props.dataList.description }}
+          </div>
+        </a-tooltip>
       </div>
       <div class="bottom" v-if="props.dataList.id">
         <a-button type="primary" @click="toView()">

front/src/views/detailsAll/components/Application/ApplicationTopDetails.vue

@@ -26,10 +26,16 @@
         <!-- <span class="label">免费</span> -->
       </div>
       <div class="main">
-        <div>应用领域：{{ applicationArea }}</div>
-        <div>
-          {{ props.dataList.description }}
-        </div>
+        <a-tooltip placement="top">
+          <template #title>应用领域：{{ applicationArea }}</template>
+          <div>应用领域：{{ applicationArea }}</div>
+        </a-tooltip>
+        <a-tooltip placement="top">
+          <template #title>{{ props.dataList.description }}</template>
+          <div>
+            {{ props.dataList.description }}
+          </div>
+        </a-tooltip>
       </div>
       <div class="bottom" v-if="props.dataList.id">
         <!-- <a-button type="primary" @click="toView()">

front/src/views/detailsAll/components/Business/BusinessTopDetails.vue

@@ -28,11 +28,16 @@
         <!-- <span class="label">免费</span> -->
       </div>
       <div class="main">
-        <div>应用领域：{{ businessArea }}</div>
-        <!-- 应用描述 -->
-        <div>
-          {{ props.dataList.description }}
-        </div>
+        <a-tooltip placement="top">
+          <template #title>应用领域：{{ applicationArea }}</template>
+          <div>应用领域：{{ applicationArea }}</div>
+        </a-tooltip>
+        <a-tooltip placement="top">
+          <template #title>{{ props.dataList.description }}</template>
+          <div>
+            {{ props.dataList.description }}
+          </div>
+        </a-tooltip>
       </div>
       <div class="bottom" v-if="props.dataList.id">
         <a-button type="primary" @click="toView()">

front/src/views/detailsAll/components/Developer/DeveloperTopDetails.vue

@@ -28,10 +28,16 @@
         <!-- <span class="label">免费</span> -->
       </div>
       <div class="main">
-        <div>应用领域：{{ applicationArea }}</div>
-        <div>
-          {{ props.dataList.description }}
-        </div>
+        <a-tooltip placement="top">
+          <template #title>应用领域：{{ applicationArea }}</template>
+          <div>应用领域：{{ applicationArea }}</div>
+        </a-tooltip>
+        <a-tooltip placement="top">
+          <template #title>{{ props.dataList.description }}</template>
+          <div>
+            {{ props.dataList.description }}
+          </div>
+        </a-tooltip>
       </div>
       <div class="bottom" v-if="props.dataList.id">
         <a-button type="primary" @click="toView()">

front/src/views/detailsAll/components/LayerService/LayerServiceTopDetails.vue

@@ -28,11 +28,16 @@
         <!-- <span class="label">免费</span> -->
       </div>
       <div class="main">
-        <div>应用领域：{{ businessArea }}</div>
-        <!-- 应用描述 -->
-        <div>
-          {{ props.dataList.description }}
-        </div>
+        <a-tooltip placement="top">
+          <template #title>应用领域：{{ applicationArea }}</template>
+          <div>应用领域：{{ applicationArea }}</div>
+        </a-tooltip>
+        <a-tooltip placement="top">
+          <template #title>{{ props.dataList.description }}</template>
+          <div>
+            {{ props.dataList.description }}
+          </div>
+        </a-tooltip>
       </div>
       <div class="bottom" v-if="props.dataList.id">
         <a-button type="primary" @click="toView()">

front/src/views/newHome/components/CapabilityConvergence.vue

@@ -284,6 +284,7 @@
           background-color: #fff;
           border-radius: 0.02rem;
           box-shadow: 0 0.05rem 0.2rem #ccc;
+          position: relative;
           div:nth-of-type(1) {
             height: 1.02rem;
             line-height: 1.02rem;
@@ -336,6 +337,8 @@
             text-align: center;
             margin-top: 0.1rem;
             margin-left: 0.85rem;
+            position: absolute;
+            bottom: 0.2rem;
           }
           .btn:hover {
             background: rgba(0, 88, 225, 0.3);

front/src/views/personalCenter/components/ApplyDetails.vue

@@ -367,20 +367,34 @@
         </a-form-item>
       </div>
       <div v-if="!shifoushizujian">
-        <a-form-item label="组件名称">
+        <a-form-item label="组件名称" v-if="algorithmShow">
           <a-input
             v-model:value="dataForm.data.name"
             disabled="true"
             placeholder="组件名称"
           ></a-input>
         </a-form-item>
-        <a-form-item label="应用描述">
+        <a-form-item label="算法名称" v-if="nameNotShow">
+          <a-input
+            v-model:value="dataForm.data.name"
+            disabled="true"
+            placeholder="算法名称"
+          ></a-input>
+        </a-form-item>
+        <a-form-item label="应用描述" v-if="algorithmShow">
           <a-input
             v-model:value="dataForm.data.description"
             disabled="true"
             placeholder="应用描述"
           ></a-input>
         </a-form-item>
+        <a-form-item label="算法描述" v-if="nameNotShow">
+          <a-input
+            v-model:value="dataForm.data.description"
+            disabled="true"
+            placeholder="算法描述"
+          ></a-input>
+        </a-form-item>
         <a-form-item label="部门联系人">
           <a-input
             v-model:value="dataForm.data.deptContacts"
@@ -418,7 +432,7 @@
         </a-form-item>
         <a-form-item label="接口请求方式">
           <a-input
-            v-model:value="dataForm.data.applyCount"
+            v-model:value="dataForm.data.apiMethodType"
             disabled="true"
             placeholder="接口请求方式"
           ></a-input>
@@ -551,6 +565,8 @@
     id: '',
   })
   let shifoushizujian = ref('')
+  let nameNotShow = ref('')
+  let algorithmShow = ref('')
   const dataForm = reactive({ data: {} })
   //流转详情
   const dataSource = reactive({ data: [] })
@@ -637,6 +653,17 @@
           shifoushizujian.value = true
         } else {
           shifoushizujian.value = false
+          console.log(res.data.data.resourceDTO)
+          debugger
+          res.data.data.resourceDTO.infoList.forEach((val) => {
+            console.log(val, '111111111111111111111111')
+            if (val.attrValue === '智能算法') {
+              nameNotShow.value = true
+              algorithmShow.value = false
+              console.log(nameNotShow.value, algorithmShow.value, 'wowowo')
+              debugger
+            }
+          })
         }
         console.log('222222222222', dataForm.data)
       })

front/src/views/personalCenter/components/MyApply.vue

@@ -664,13 +664,23 @@
           line-height: 16px;
           font-size: 12px;
           width: 100%;
-          text-overflow: -o-ellipsis-lastline;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          display: -webkit-box;
-          -webkit-line-clamp: 3;
-          -webkit-box-orient: vertical;
+          // text-overflow: -o-ellipsis-lastline;
+          // overflow: hidden;
+          // text-overflow: ellipsis;
+          // display: -webkit-box;
+          // -webkit-line-clamp: 3;
+          // -webkit-box-orient: vertical;
+          display: flex;
           color: #999999;
+          span {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: -webkit-box;
+            -webkit-line-clamp: 1;
+            -webkit-box-orient: vertical;
+            max-width: 8.1rem;
+            line-height: 24px;
+          }
         }
         .content-body-bottom {
           display: flex;