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

# Conflicts: # front/src/views/home/infrastructurePage.vue
2022-10-13 17:09:20 +08:00 · 2022-10-13 17:09:20 +08:00 · cfe88605cc
parent 78aabf704b 5568f82e52
commit cfe88605cc
11 changed files with 946 additions and 782 deletions
--- a/back/public/config/basicConfig.js
+++ b/back/public/config/basicConfig.js
@ -2,16 +2,16 @@
 * @Author: hisense.wuhongjian
 * @Date: 2022-08-25 14:37:49
 * @LastEditors: hisense.wuhongjian
- * @LastEditTime: 2022-10-12 15:25:01
+ * @LastEditTime: 2022-10-13 14:49:32
 * @Description: 告诉大家这是什么
 */
 var _global = {}
 var CONFIGITEM = {
  // version: 'qingdao', // 青岛
  // version: 'xihaian', // 西海岸
-  // version: 'test', // 测试
+  version: 'test', // 测试
  // version: 'frp', // 内网穿透
-  version: 'xihaian', // 开发
+  // version: 'xihaian', // 开发
  vNum: 'v0.8.7.2',
  configData: {
    // 青岛市大数据局
--- a/back/src/views/modules/ability/assignedScene/add-update-scene.vue
+++ b/back/src/views/modules/ability/assignedScene/add-update-scene.vue
@ -67,10 +67,19 @@
            </div>
            <InfrastructureModal v-model="dataForm" :dataForm="dataForm" @update="updateDataForm" type="基础设施"
              :modalType="modalType" ref="jcssDom"></InfrastructureModal>
+              <el-form-item label="基础设施总数" >
+           <el-input   v-model="dataForm.infrastructureCount"  onkeyup="value=value.replace(/[^\d]/g,0)" placeholder="请输入基础设施总数"></el-input>
+              </el-form-item>
            <combine-ability v-model="dataForm" :dataForm="dataForm" @update="updateDataForm" type="数据资源" ref="sjzyDom"
              :getDataParams="getListParams['数据资源']"></combine-ability>
+              <el-form-item label="数据资源总数" >
+           <el-input   v-model="dataForm.dataSourceCount"  onkeyup="value=value.replace(/[^\d]/g,0)" placeholder="请输入基础设施总数"></el-input>
+              </el-form-item>
            <combine-ability v-model="dataForm" :dataForm="dataForm" @update="updateDataForm" type="组件服务" ref="zjfwDom"
              :getDataParams="getListParams['组件服务']"></combine-ability>
+              <el-form-item label="组件服务总数" >
+           <el-input   v-model="dataForm.componentCount"  onkeyup="value=value.replace(/[^\d]/g,0)" placeholder="请输入基础设施总数"></el-input>
+              </el-form-item>
          </div>

          <!-- 更多能力 -->
@ -195,6 +204,9 @@ export default {
      painKeyTextObj: getDescJson('痛点'),
      solutionKeyTextObj: getDescJson('方案'),
      dataForm: {
+        infrastructureCount:null,
+        dataSourceCount:null,
+        componentCount:null,
        name: '',
        applicationArea: '',
        description: '',
--- a/back/src/views/modules/abilityStatistics/index.vue
+++ b/back/src/views/modules/abilityStatistics/index.vue
@ -25,6 +25,7 @@
      <el-form :inline="true">
        <!--起始日期 @keyup.enter.native="getDataList()"-->
        <el-form-item>
+          <span>日期：</span>
          <el-date-picker
            v-model="value1"
            type="datetimerange"
@ -38,6 +39,7 @@
        </el-form-item>
        <!--审核状态-->
        <el-form-item>
+          <span>审核状态：</span>
          <el-select
            v-model="examineStatus"
            placeholder="请选审核状态"
@ -51,6 +53,7 @@

        <!--部门-->
        <el-form-item>
+          <span>部门名称：</span>
          <el-select
            v-model="abilityDepartment"
            placeholder="请选择部门"
@ -67,6 +70,7 @@

        <!--类型-->
        <el-form-item>
+          <span>类型：</span>
          <el-select v-model="abilityType" placeholder="请选择类型" clearable>
            <el-option label="全部" value=""></el-option>
            <el-option
@ -109,7 +113,7 @@
                  ? 'departmentStyle'
                  : ''
              ]"
-              @click="handleChose(1)"
+              @click="handleChose(3)"
            >
              能力上架统计
            </span>
@ -119,7 +123,7 @@
                  ? 'departmentStyle'
                  : ''
              ]"
-              @click="handleChose(2)"
+              @click="handleChose(4)"
            >
              能力使用统计
            </span>
@ -144,7 +148,7 @@
            style="width: 100%"
            v-show="this.departmentId === 1"
          >
-            <el-table-column prop="name" label="部门名称" min-width="100%">
+            <el-table-column prop="name" label="上架部门" min-width="100%">
            </el-table-column>
            <el-table-column label="组件">
              <el-table-column prop="znsf" label="智能算法" min-width="100%">
@ -177,7 +181,7 @@
            style="width: 100%"
            v-show="this.departmentId === 2"
          >
-            <el-table-column prop="name" label="部门名称" min-width="100%">
+            <el-table-column prop="name" label="申请部门" min-width="100%">
            </el-table-column>
            <el-table-column label="组件">
              <el-table-column prop="znsf" label="智能算法" min-width="100%">
@ -211,11 +215,15 @@
            style="width: 100%"
            v-show="this.departmentId === 3 || this.departmentId === 4"
          >
-            <el-table-column prop="deptName" label="部门" min-width="100%">
+          <el-table-column v-if="this.departmentId === 3" prop="deptName" label="上架部门" min-width="100%">
+            </el-table-column>
+            <el-table-column v-if="this.departmentId === 4" prop="deptName" label="申请部门" min-width="100%">
            </el-table-column>
            <el-table-column prop="resourceName" label="资源名称" min-width="100%">
            </el-table-column>
            <el-table-column prop="type" label="类型" min-width="100%"> </el-table-column>
+            <el-table-column v-if="this.departmentId === 4"  prop="resourceDeptName" label="提供部门" min-width="100%">
+            </el-table-column>
            <el-table-column prop="createDate" label="日期" min-width="100%"> </el-table-column>
            <el-table-column prop="approveStatus" label="状态" min-width="100%">
            </el-table-column>
@ -390,7 +398,7 @@ export default {
        { name: '页面开发组件', value: 4 },
        { name: '应用资源', value: 5 }
      ], // 类型备选列表
-      detailFlag: true, // 明细返回按钮显示标志位
+      detailFlag: false, // 明细返回按钮显示标志位
      startDate: '', // 开始时间
      endDate: '' // 结束时间
    }
@ -410,7 +418,15 @@ export default {
    // this.value1.unshift(date2)
  },
  mounted () {
-    this.getFirstTree()
+    // this.getFirstTree()
+    if (this.departmentId === 1) {
+      this.handleChose(3)
+      // this.departmentId = 1;
+    } else if (this.departmentId === 2) {
+      this.handleChose(4)
+      // this.departmentId = 2;
+    } else {
+    }
  },
  computed: {
    ...mapState(['departmentSelects'])
@ -786,12 +802,14 @@ export default {
          // this.getUsedTree()
        }
      } else if (index === 3) {
+        this.detailFlag = false
        if (this.choseId === 0) {
          this.getOneDetail()
        } else {
          // this.getUsedTree()
        }
      } else if (index === 4) {
+        this.detailFlag = false
        if (this.choseId === 0) {
          this.getTwoDetail()
        } else {
@ -879,7 +897,7 @@ export default {
      this.value1 = []
      this.startDate = ''
      this.endDate = ''
-      this.examineStatus = '全部'
+      this.examineStatus = ''
      this.abilityDepartment = ''
      this.abilityType = ''
      if (this.departmentId === 1) {
--- a/front/public/static/config/basicConfig.js
+++ b/front/public/static/config/basicConfig.js
@ -2,16 +2,16 @@
 * @Author: hisense.wuhongjian
 * @Date: 2020-07-07 16:03:23
 * @LastEditors: hisense.wuhongjian
- * @LastEditTime: 2022-10-12 15:29:29
+ * @LastEditTime: 2022-10-13 13:50:44
 * @Description: 系统静态参数配置
 */
 var _global = {}
 var CONFIGITEM = {
  // version: 'qingdao', //青岛
  // version: 'xihaian', // 西海岸
-  version: 'dev', // 开发
+  // version: 'dev', // 开发
  // version: 'zhanTingDev', // 展厅dev (2022-09-13:姜永超让添加)
-  //version: 'test', // 测试
+  version: 'test', // 测试
  //version: 'frp', // 内网穿透
  vNum: 'v0.8.7.2',
  configData: {
--- a/front/public/static/config/location.js
+++ b/front/public/static/config/location.js
@ -2,7 +2,7 @@
 * @Author: hisense.wuhongjian
 * @Date: 2020-07-07 16:03:23
 * @LastEditors: hisense.wuhongjian
- * @LastEditTime: 2022-08-29 09:55:56
+ * @LastEditTime: 2022-10-13 15:29:31
 * @Description: 数据资源参数配置
 */
 // eslint-disable-next-line no-undef
@ -51,10 +51,10 @@ if (newLocation !== 'baotou' && newLocation !== 'xihaian') {
      right: '海信网络科技股份有限公司',
    },
    address: [
-      {
-        name: '鲁IC备00000000号',
-        value: '政府标识码3702000106',
-      },
+      // {
+      //   name: '鲁IC备00000000号',
+      //   value: '政府标识码3702000106',
+      // },
      {
        name: '版权所有：青岛市大数据发展管理局',
        value: '地址：山东省青岛市香港中路17号市级机关办公楼',
@ -523,6 +523,11 @@ else if (newLocation === 'xihaian') {
      },
    ],
  }
-  xhaHasPermissionUser.list = ['xihaian01', 'xihaian02', 'xihaian03', 'xihaian04', 'admin']
-  
+  xhaHasPermissionUser.list = [
+    'xihaian01',
+    'xihaian02',
+    'xihaian03',
+    'xihaian04',
+    'admin',
+  ]
 }
--- a/front/src/views/abilityStatistics/components/AbilityTotal.vue
+++ b/front/src/views/abilityStatistics/components/AbilityTotal.vue
@ -15,11 +15,26 @@
          ></div>
          <div class="name">{{ item.type }}</div>
          <div class="organization-value">
-            <span class="num">{{ item.amount }}</span>
+            <a-tooltip
+              placement="top"
+              v-if="
+                useName === 'admin' &&
+                (item.type === '已上架部门数' ||
+                  item.type === '用户量' ||
+                  item.type === '资源申请量')
+              "
+            >
+              <template #title>点击查看详情</template>
+              <span class="hover-click num" @click="showDetail(item.type)">
+                {{ item.amount }}
+              </span>
+            </a-tooltip>
+            <span v-else class="num">
+              {{ item.amount }}
+            </span>
            <span class="organization">{{ item.organization }}</span>
          </div>
        </div>
-
        <div class="shuxian"></div>
      </div>
    </div>
@ -27,20 +42,24 @@
 </template>
 <script setup>
  import { ref } from 'vue'
+  import { useStore } from 'vuex'
  import { totalResourceAggregation } from '@/api/abilityStatistics.js'
  let photo = ref([
+    require('../../../assets/abilityStatistics/Volume-of-covered-sectors.png'),
    require('../../../assets/abilityStatistics/pingtaifangwenliang.png'),
    require('../../../assets/abilityStatistics/yonghuliang.png'),
-    require('../../../assets/abilityStatistics/Volume-of-covered-sectors.png'),
    require('../../../assets/abilityStatistics/ziyuanhuijusnum.png'),
    require('../../../assets/abilityStatistics/ziyuanshenqingliang.png'),
  ])
  let dataList = ref([])
+  const store = useStore()
+  // 用户信息
+  const useName = ref(store.getters['user/username'])
  ///whole_amount接口
  function snum() {
    totalResourceAggregation().then((res) => {
-      dataList.value = res.data.data;
-      console.log('res.data.data------------>', res.data.data);
+      dataList.value = res.data.data
+      console.log('res.data.data------------>', res.data.data)

      res.data.data.map((item, index) => {
        console.log('dataList', dataList.value)
@ -68,6 +87,22 @@
    })
  }
  snum()
+  const showDetail = function (type) {
+    switch (type) {
+      case '已上架部门数':
+        window.open(window.SITE_CONFIG.backUrl + '/#/sys-dept', '_blank')
+        break
+      case '用户量':
+        window.open(window.SITE_CONFIG.backUrl + '/#/sys-user', '_blank')
+        break
+      case '资源申请量':
+        window.open(
+          window.SITE_CONFIG.backUrl + '/#/abilityStatistics-index',
+          '_blank'
+        )
+        break
+    }
+  }
 </script>
 <style lang="less" scoped>
  @font-face {
@ -84,6 +119,9 @@
    font-size: 32px;
    font-weight: 600;
  }
+  .hover-click {
+    cursor: pointer;
+  }
  .ability-total {
    background: #f1f4fb;
    font-size: 18px;
--- a/front/src/views/abilityStatistics/components/Footer.vue
+++ b/front/src/views/abilityStatistics/components/Footer.vue
@ -1,3 +1,10 @@
+<!--
+ * @Author: hisense.wuhongjian
+ * @Date: 2022-07-05 12:53:04
+ * @LastEditors: hisense.wuhongjian
+ * @LastEditTime: 2022-10-13 15:29:14
+ * @Description: 告诉大家这是什么
+-->
 <template>
  <div class="footer">
    <div class="fotter-son">
@ -18,10 +25,10 @@
 <script setup>
  import { reactive } from 'vue'
  let dataList = reactive([
-    {
-      name: '鲁IC备00000000号',
-      value: '政府标识码3702000106',
-    },
+    // {
+    //   name: '鲁IC备00000000号',
+    //   value: '政府标识码3702000106',
+    // },
    {
      name: '版权所有：青岛市大数据发展管理局',
      value: '地址：山东省青岛市香港中路17号市级机关办公楼',
--- a/front/src/views/home/AbilityToApplyFor.vue
+++ b/front/src/views/home/AbilityToApplyFor.vue
@ -105,7 +105,7 @@
              }}
            </div>
          </div>
-          <div class="remove" @click="removeFunction(val)"></div>
+          <div class="remove" v-if="item.arr.length>1" @click="removeFunction(val)"></div>
        </div>
      </template>
    </div>
--- a/front/src/views/home/infrastructurePage.vue
+++ b/front/src/views/home/infrastructurePage.vue
@ -386,7 +386,9 @@
            :wrapper-col="{ span: 14, offset: 4 }"
            style="text-align: center; margin-top: 0.4rem"
          >
-            <a-button @click="resetFields" type="primary" danger>取消</a-button>
+            <a-button @click="appointmentRoom = false" type="primary" danger>
+              取消
+            </a-button>
            <a-button
              style="margin-left: 10px"
              type="primary"
--- a/front/src/views/home/integrationServices.vue
+++ b/front/src/views/home/integrationServices.vue
@ -5,8 +5,13 @@
    <div class="top">
      <div class="top-title">
        全部：
-        <div v-for="(item, index) in titleName" :key="index" class="tabAll" @click="changeCards(index)"
-          :class="{ sel: index == number }">
+        <div
+          v-for="item in titleName"
+          :key="item.index"
+          class="tabAll"
+          @click="changeCards(item.index)"
+          :class="{ sel: item.index === number }"
+        >
          <span>
            {{ item.name === '赋能场景' ? '典型赋能场景' : '打包模式' }}
          </span>
@ -15,26 +20,55 @@
      <div class="resultListSearchInput-father" v-if="number === 0">
        <div class="resultListSearchInput-son">
          模糊搜索
-          <a-input-search v-model:value="searchValue" placeholder="请输入关键词" enter-button="搜索" size="large"
-            @search="getIntegrationList" @change="onSearch" class="resultListSearchInput" />
+          <a-input-search
+            v-model:value="searchValue"
+            placeholder="请输入关键词"
+            enter-button="搜索"
+            size="large"
+            @search="getIntegrationList"
+            @change="onSearch"
+            class="resultListSearchInput"
+          />
          <button class="button-reset" @click="resetAction()">重置</button>
          <div class="hengxian"></div>
        </div>
      </div>
      <div v-loading="loadingData">
-        <searchResultList v-if="number === 0" v-show="resourceList.data && resourceList.data.length > 0"
-          :resourceList="resourceList" :resourceTotal="resourceTotal" @saveSearchCodition="saveSearchCodition"
-          ref="searchResultListDom" :selectCardsname="number == 0 ? '融合服务' : '赋能场景'" />
-        <CanAssignCase v-else v-show="resourceList.data && resourceList.data.length > 0" :resourceList="resourceList"
-          @saveSearchCodition="saveSearchCodition" :resourceTotal="resourceTotal"
-          :selectCardsname="number == 0 ? '融合服务' : '赋能场景'" />
+        <searchResultList
+          v-if="number === 0"
+          v-show="resourceList.data && resourceList.data.length > 0"
+          :resourceList="resourceList"
+          :resourceTotal="resourceTotal"
+          @saveSearchCodition="saveSearchCodition"
+          ref="searchResultListDom"
+          :selectCardsname="number == 0 ? '融合服务' : '赋能场景'"
+        />
+        <CanAssignCase
+          v-else
+          v-show="resourceList.data && resourceList.data.length > 0"
+          :resourceList="resourceList"
+          @saveSearchCodition="saveSearchCodition"
+          :resourceTotal="resourceTotal"
+          :selectCardsname="number == 0 ? '融合服务' : '赋能场景'"
+        />
        <div class="pagination">
-          <a-pagination v-if="resourceList.data && resourceList.data.length > 0" v-model:current="currentPage"
-            v-model:pageSize="currentPageSize" show-size-changer show-less-items show-quick-jumper
-            :total="resourceTotal" :page-size-options="pageSizeOptions" @change="pageChange"
-            @showSizeChange="onShowSizeChange" />
+          <a-pagination
+            v-if="resourceList.data && resourceList.data.length > 0"
+            v-model:current="currentPage"
+            v-model:pageSize="currentPageSize"
+            show-size-changer
+            show-less-items
+            show-quick-jumper
+            :total="resourceTotal"
+            :page-size-options="pageSizeOptions"
+            @change="pageChange"
+            @showSizeChange="onShowSizeChange"
+          />
        </div>
-        <div v-if="resourceList.data && resourceList.data.length <= 0" style="margin-top: 2rem">
+        <div
+          v-if="resourceList.data && resourceList.data.length <= 0"
+          style="margin-top: 2rem"
+        >
          <a-empty />
        </div>
      </div>
@ -45,7 +79,14 @@
 <script>
  import HomeFooter from '@/views/newHome/components/Footer'
  import mybus from '@/myplugins/mybus'
-import { defineComponent, reactive, ref, toRefs, onMounted, nextTick } from 'vue'
+  import {
+    defineComponent,
+    reactive,
+    ref,
+    toRefs,
+    onMounted,
+    nextTick,
+  } from 'vue'
  import { getIntegrationServicesList } from '@/api/home.js'
  import { useRouter } from 'vue-router'
  import HomeHeader from '@/views/home/components/header'
@ -58,7 +99,10 @@ export default defineComponent({
      console.log('to---integrationServices--beforeRouteLeave------->', to)
      console.log('from---integrationServices--beforeRouteLeave------->', from)
      console.log('next---integrationServices--beforeRouteLeave------->', next)
-    if (to.name !== 'packagingDetails' && to.name !== 'integrationServicesDetails') {
+      if (
+        to.name !== 'packagingDetails' &&
+        to.name !== 'integrationServicesDetails'
+      ) {
        localStorage.removeItem('integrationServices')
      }
      next()
@ -79,13 +123,15 @@ export default defineComponent({
      // 选项卡
      const titleName = ref([
        {
-        name: '打包模式',
+          name: '赋能场景',
+          index: 1,
        },
        {
-        name: '赋能场景',
+          name: '打包模式',
+          index: 0,
        },
      ])
-    const number = ref(0)
+      let number = ref(1)
      // 查询参数
      const paramsGetResources = {
        page: currentPage.value,
@ -96,24 +142,31 @@ export default defineComponent({
        orderType: 'DESC', // ASC 升序  DESC 降序
      }
      const searchResultListDom = ref(null)
-    const storageSearchInfo = JSON.parse(localStorage.getItem('integrationServices'))
+      const storageSearchInfo = JSON.parse(
+        localStorage.getItem('integrationServices')
+      )
      // 读取本地存储：表单赋值
      const handleSetSearchData = () => {
        if (storageSearchInfo) {
-        number.value = storageSearchInfo.type == '打包模式' ? 0 : 1;
+          number.value = storageSearchInfo.type == '打包模式' ? 1 : 0
          // 搜索名称
-        searchValue.value = storageSearchInfo.name;
-        currentPage.value = storageSearchInfo.page;
-        currentPageSize.value = storageSearchInfo.limit;
-        paramsGetResources.limit = storageSearchInfo.limit;
-        paramsGetResources.page = storageSearchInfo.page;
-        paramsGetResources.type = storageSearchInfo.type;
+          searchValue.value = storageSearchInfo.name
+          currentPage.value = storageSearchInfo.page
+          currentPageSize.value = storageSearchInfo.limit
+          paramsGetResources.limit = storageSearchInfo.limit
+          paramsGetResources.page = storageSearchInfo.page
+          paramsGetResources.type = storageSearchInfo.type
          // 延迟使用，因为还没有返回跟挂载
          nextTick(() => {
-          searchResultListDom.value && searchResultListDom.value.changeCondition && searchResultListDom.value.changeCondition({
+            searchResultListDom.value &&
+              searchResultListDom.value.changeCondition &&
+              searchResultListDom.value.changeCondition(
+                {
                  value: storageSearchInfo.orderField,
                  orderType: storageSearchInfo.orderType,
-          }, true)
+                },
+                true
+              )
          })
          getIntegrationList()
        }
@ -121,8 +174,8 @@ export default defineComponent({

      const changeCards = (val) => {
        // 打包模式
-      number.value = val;
-      paramsGetResources.type = titleName.value[number.value].name;
+        number.value = val
+        paramsGetResources.type = titleName.value[number.value].name
        resetAction()
      }

@ -153,8 +206,11 @@ export default defineComponent({
      // 获取融合服务列表
      const getIntegrationList = () => {
        loadingData.value = true
-      paramsGetResources.name = searchValue.value;
-      console.log('paramsGetResources------参数下发------>', paramsGetResources);
+        paramsGetResources.name = searchValue.value
+        console.log(
+          'paramsGetResources------参数下发------>',
+          paramsGetResources
+        )
        getIntegrationServicesList(paramsGetResources).then(
          (res) => {
            loadingData.value = false
@ -217,7 +273,10 @@ export default defineComponent({

      // 存储查询条件到本地
      const saveSearchCodition = (n) => {
-      console.log('融合服务-----存储查询条件到本地------->', paramsGetResources);
+        console.log(
+          '融合服务-----存储查询条件到本地------->',
+          paramsGetResources
+        )
        localStorage.setItem(
          'integrationServices',
          JSON.stringify(paramsGetResources)
--- a/front/src/views/home/integrationServicesDetails.vue
+++ b/front/src/views/home/integrationServicesDetails.vue
@ -96,6 +96,21 @@
        >
          {{ i == 0 ? '基础设施' : i == 1 ? '组件服务' : '数据资源' }}
        </div>
+        <div
+          class="data-count"
+          style="font-size: 0.14rem; text-align: right; margin-bottom: 0.2rem"
+        >
+          <span style="color: #909399">
+            共
+            {{
+              i == 0
+                ? infrastructureCount
+                : i == 1
+                ? componentCount
+                : dataSourceCount
+            }}条数据，示例数据如下：
+          </span>
+        </div>
        <div class="bottom" style="display: flex; align-items: flex-start">
          <div class="title" :class="'title' + i"></div>
          <div class="table-box">
@ -171,6 +186,9 @@
  const solution = ref([])
  const step = ref([])
  const bgImg = ref('')
+  const dataSourceCount = ref(0)
+  const infrastructureCount = ref(0)
+  const componentCount = ref(0)
  const id = router.currentRoute.value.query.id
  document.documentElement.style.transition = 'all 0.3s ease'
  document.documentElement.scrollTop = 0
@ -283,6 +301,9 @@
          return message.error(res.data.msg)
        }
        detailInfoObj.value = res.data.data || {}
+        dataSourceCount.value = res.data.data.dataSourceCount || 0
+        infrastructureCount.value = res.data.data.infrastructureCount|| 0
+        componentCount.value = res.data.data.componentCount || 0
        // 资源属性
        let fuseAttrList = res.data.data.fuseAttrList || []
        // 融合关系
@ -667,6 +688,8 @@
        // width: 100%;
        font-size: 16px;
      }
+      .data-count {
+      }
    }

    .name-box {