<template>
  <div class="index-wrap">
    <video v-if="!openMonitor" data-v-93f40d6c="" data-v-45e53fd3="" autoplay="autoplay" loop="loop" muted="muted" class="bg_video">
      <source data-v-93f40d6c="" data-v-45e53fd3="" :src="homeBg" type="video/mp4">
    </video>
    <div class="index">
      <div class="header">
        <div class="header-right">
          <el-button type="primary" size="mini" style="margin-right:12px;vertical-align: middle;" round @click="handleAdd">新 增</el-button>
          <i class="el-icon-refresh" style="font-size:20px;vertical-align: middle;margin-right:12px;" @click="toggle" />
          <el-dropdown class="avatar-container right-menu-item hover-effect" style="font-size:16px;" trigger="hover">
            <div class="avatar-wrapper">
              <span class="user-name">{{ name }}</span>
              <i class="el-icon-caret-bottom" />
            </div>
            <el-dropdown-menu slot="dropdown">
              <router-link to="/profile/index">
                <el-dropdown-item>个人中心</el-dropdown-item>
              </router-link>
              <el-dropdown-item>
                <span style="display:block;" @click="logout">退出登录</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
      <div v-if="!openMonitor" class="content">
        <div class="content-form">
          <div class="lg-logo">
            <img :src="logo" class="lg-img" width="32" height="32">
          </div>
          <el-form ref="queryForm" :model="queryParams" width="654px" :inline="true">
            <div class="content-form-flex">
              <el-select v-model="selectOption" placeholder="请选择" style="width:120px;border-radius: 8px 0 0 8px;">
                <el-option label="应用系统" value="1" />
                <el-option label="接口URL" value="2" />
                <el-option label="业务功能" value="3" />
              </el-select>
              <el-form-item v-if="selectOption == '1'" label="" prop="name">
                <el-select
                  v-model="queryParams.name"
                  style="width:100%;border-radius: 0 8px 8px 0;margin-top:4px;"
                  placeholder="请选择要访问的业务系统"
                  clearable
                  filterable
                  value-key="id"
                  @change="handChange"
                >
                  <el-option
                    v-for="app in appList"
                    :key="app.id"
                    :label="app.name"
                    :value="app"
                  />
                </el-select>
              </el-form-item>
              <el-form-item v-if="selectOption == '2'" label="" prop="url">
                <el-autocomplete
                  ref="autocompleteRef"
                  v-model="stateurl"
                  v-loading="loading"
                  v-scrollLoad="handelScroll"
                  :value-key="'Route'"
                  :debounce="0"
                  :fetch-suggestions="querySearchAsync"
                  placeholder="请输入url"
                  @select="handleSelect"
                >
                  <template slot-scope="{ item }">
                    <div v-show="item.Route" class="ob-select-box">
                      <el-tooltip placement="bottom" effect="dark" :content="item.Route">
                        <span ref="KnowledgeContent" class="ob-select-title">{{ item.Route }}</span>
                      </el-tooltip>
                      <div>
                        <el-tag size="mini" type="success" class="ob-tag-right">{{ item.Method }}</el-tag>
                        <el-tag size="mini">{{ item.ServiceName }}</el-tag>
                      </div>
                    </div>
                  </template>
                </el-autocomplete>
              </el-form-item>
              <!-- 业务的todo -->
              <el-form-item v-if="selectOption == '3'" label="">
                <el-autocomplete
                  ref="bizCompleteRef"
                  v-model="stateBiz"
                  v-loading="bizLoading"
                  v-scrollLoad="bizHandelScroll"
                  :value-key="'name'"
                  :debounce="0"
                  :fetch-suggestions="bizSearchAsync"
                  placeholder="请输入业务"
                  @select="bizHandleSelect"
                >
                  <template slot-scope="{ item }">
                    <div v-show="item.name" class="ob-select-box">
                      <el-tooltip placement="bottom" effect="dark" :content="item.name">
                        <span ref="bussinessContent" class="ob-select-title">{{ item.name }}</span>
                      </el-tooltip>
                      <div>
                        <!-- <el-tag size="mini" type="success" class="ob-tag-right">{{ item.Method }}</el-tag> -->
                        <el-tag size="mini">{{ item.app_name }}</el-tag>
                      </div>
                    </div>
                  </template>
                </el-autocomplete>
              </el-form-item>
            </div>
          </el-form>
        </div>
        <!-- <div class="block-container">
          <div class="row">
            <div class="col">
              <el-tooltip placement="bottom" effect="dark" :visible-arrow="false">
                <div slot="content">
                  <i class="dot" />
                  <span>{{ appList.length }}</span>
                </div>
                <div class="border-bottom">
                  <div class="block-box px-3 py-4">
                    <div class="col-tit">应用系统总量</div>
                    <div class="col-con">{{ appList.length !=undefined?appList.length:0 }}</div>
                  </div>
                </div>
              </el-tooltip>
            </div>
            <div class="col">
              <el-tooltip placement="bottom" effect="dark" :visible-arrow="false">
                <div slot="content"><i class="dot" />{{ rawdata.services }}</div>
                <div class="border-bottom">
                  <div class="block-box px-3 py-4">
                    <div class="col-tit">服务总量</div>
                    <div class="col-con">{{ statusData.services!=undefined?statusData.services:0 }}</div>
                  </div>
                </div>
              </el-tooltip>
            </div>
            <div class="col">
              <el-tooltip placement="bottom" effect="dark" :visible-arrow="false">
                <div slot="content"><i class="dot" /><span>{{ rawdata.traces }}</span></div>
                <div class="border-bottom">
                  <div class="block-box px-3 py-4">
                    <div class="col-tit">Trace总量</div>
                    <div class="col-con">{{ statusData.traces != undefined? statusData.traces:0 }}</div>
                  </div>
                </div>
              </el-tooltip>
            </div>
            <div class="col">
              <el-tooltip placement="bottom" effect="dark" :visible-arrow="false">
                <div slot="content"><i class="dot" />{{ rawdata.logs }}</div>
                <div class="border-bottom">
                  <div class="block-box px-3 py-4">
                    <div class="col-tit">日志总量</div>
                    <div class="col-con">{{ statusData.logs !=undefined?statusData.logs :0 }}</div>
                  </div>
                </div>
              </el-tooltip>
            </div>
            <div class="col">
              <el-tooltip placement="bottom" effect="dark" :visible-arrow="false">
                <div slot="content"><i class="dot" />{{ rawdata.users }}</div>
                <div class="border-bottom">
                  <div class="block-box px-3 py-4">
                    <div class="col-tit">用户总量</div>
                    <div class="col-con">{{ statusData.users !=undefined?statusData.users:0 }}</div>
                  </div>
                </div>
              </el-tooltip>
            </div>

          </div>
        </div> -->
      </div>
      <Monitoring v-if="openMonitor" :services-number="servicesNumber" />
    </div>
    <!-- 添加或修改应用配置对话框 -->
    <el-dialog v-if="open" :title="title" :visible.sync="open" width="700px" :center="true" :close-on-click-modal="false">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="应用名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入应用名称" />
        </el-form-item>
        <el-form-item label="应用别名" prop="alias">
          <el-input v-model="form.alias" placeholder="请输入应用别名" :disabled="isEdit" />
        </el-form-item>
        <el-form-item label="应用备注">
          <el-input v-model="form.desc" type="textarea" placeholder="请输入应用详情" />
        </el-form-item>
        <el-form-item label="应用图片" prop="imgUrl">
          <img v-if="form.imgUrl" :src="form.imgUrl" class="el-upload el-upload--picture-card" style="float:left">
          <el-upload ref="sys_app_logo" accept=".png,.jpg,.jpeg" :headers="headers" :file-list="appsfileList" :action="appsAction" style="float:left" :before-upload="beforeUpload" list-type="picture-card" :show-file-list="false" :on-success="uploadSuccess">
            <i class="el-icon-plus" />
          </el-upload>
        </el-form-item>
        <el-form-item label="负责人" prop="contractInfo">
          <el-input v-model="form.contractInfo" placeholder="请输入负责人" />
        </el-form-item>
        <el-form-item label="手机号码" prop="contractPhone">
          <el-input v-model="form.contractPhone" placeholder="请输入合作手机号" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listApps, addOtApps, updateOtApps, searchServiceUrl, searchBizName } from '@/api/apps'
import { listStats } from '@/api/home'
import { getToken } from '@/utils/auth'
import storage from '@/utils/storage'
import { mapGetters } from 'vuex'
import Monitoring from '../global-monitoring/index.vue'
export default {
  directives: {
    scrollLoad: {
      bind(el, binding, vnode) {
        const wrapDom = el.querySelector('.el-autocomplete-suggestion__wrap')
        const listDom = el.querySelector('.el-autocomplete-suggestion__wrap .el-autocomplete-suggestion__list')
        wrapDom.addEventListener('scroll', (e) => {
          const condition = wrapDom.offsetHeight + wrapDom.scrollTop + 10 - listDom.offsetHeight
          if (condition > 0 && !vnode.context.loading) {
            // 滚动到底部则执行滚动方法 load，binding.value 就是 v-scrollLoad 绑定的值，加()表示执行绑定的方法
            binding.value()
          }
        })
      }
    }
  },
  components: {
    Monitoring
  },
  data() {
    return {
      homeBg: require('../../assets/home.mp4'),
      logo: require('../../assets/logo/app_logo.png'),
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      isEdit: false,
      // 表单参数
      form: {
      },
      // 表单校验
      rules: {
        name: [
          { required: true, message: '应用名称不能为空', trigger: 'blur' }
        ],
        alias: [
          { required: true, message: '应用别名不能为空', trigger: 'blur' }
        ],
        desc: [
          { required: true, message: '应用详情不能为空', trigger: 'blur' }
        ]
      },
      headers: { 'Authorization': 'Bearer ' + getToken() },
      appsAction: process.env.VUE_APP_BASE_API + '/api/v1/public/uploadFile',
      appsfileList: [],
      queryParams: {
        name: ''
      },
      appList: [],
      times: {
        start_time: Math.round((new Date().getTime()) / 1000 - (5 * 60)),
        end_time: Math.round(new Date().getTime() / 1000),
        // start_time:0,
        // end_time:0,
        live: false
      },
      statusData: {},
      rawdata: {},
      queryScore: {
        interval: 5,
        req_applist: []
      },
      queryNums: {
        start_time: Math.round((new Date().getTime()) / 1000 - (1 * 60)),
        end_time: Math.round(new Date().getTime() / 1000),
        // start_time:0,
        // end_time:0,
        pageSize: 10,
        pageIndex: 1,
        app_ids: 0
      },
      stateurl: '',
      suggestions: [],
      selectOption: '1',
      loading: false,
      suppilerListQuery: {
        url: this.stateurl,
        pageIndex: 1,
        pageSize: 100
      },
      pageTotal: 0,
      openMonitor: false,
      isShowTooltip: false,
      stateBiz: '',
      bizSearchQuery: {
        name: this.stateBiz,
        pageIndex: 1,
        pageSize: 100
      },
      bizSuggestions: [],
      bizLoading: false,
      bizPageTotal: 0,
      servicesNumber: 0
    }
  },
  computed: {
    ...mapGetters([
      'globalTimes',
      'name'
    ]),
    timeObj() {
      return this.globalTimes
    }
  },
  watch: {
    '$store.state.time.globalTimes': {
      handler(newValue, oldValue) {
        if (newValue) {
          this.times.start_time = newValue.startTime
          this.times.end_time = newValue.endTime
          this.queryScore.interval = newValue.interval
          this.queryNums.start_time = newValue.startTime
          this.queryNums.end_time = newValue.endTime
          this.getList()
          if (newValue.timeOut) {
            if (newValue.timeOut == 1) {
              this.times.live = false
              clearInterval(this.appTimer)
            } else {
              this.times.live = true
              clearInterval(this.appTimer)
              this.Refresh(newValue.timeOut)
            }
          }
        }
      },
      // immediate: true,
      deep: true
    },
    statusData: {
      handler(newValue, oldValue) {

      }
    }
  },
  created() {
    // this.times.start_time = this.timeObj.startTime;
    // this.times.end_time = this.timeObj.endTime;
    this.getData()
    this.getList()
    if (this.$route.query.openMonitor) {
      this.openMonitor = this.$route.query.openMonitor
      this.servicesNumber = this.$route.query.servicesNumber
    }
  },
  mounted() {
  },
  beforeDestroy() {
    clearInterval(this.appTimer)
  },
  methods: {
    onMouseOver(i) {
      const parentWidth = this.$refs.KnowledgeContent[i]?.parentNode?.offsetWidth // 获取当前元素父级可视宽度
      const contentWidth = this.$refs.KnowledgeContent[i]?.offsetWidth // 获取当前元素可视宽度
      this.isShowTooltip = contentWidth <= parentWidth
    },
    async logout() {
      this.$confirm('确定注销并退出系统吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('user/LogOut').then(() => {
          location.reload()
        })
        // this.$router.push('/login');
        // location.reload()
      })
    },
    handlerNumber(num) {
      let str
      // let str = num.toString();
      if (num != undefined && num != null) {
        if (isNaN(num)) {
          str = num.toString()
        } else {
          str = num
        }

        // let str = num
        let result
        if (str.length <= 4) {
          result = num
        } else if (str.length > 4 && str.length < 7) {
          result = (num / 1000).toFixed(2) + 'K'
        } else if (str.length >= 7 && str.length < 10) {
          // result = Math.round(num/1000000) + 'M'
          result = (num / 1000000).toFixed(2) + 'M'
        } else {
          result = (num / 1000000000).toFixed(2) + 'B'
        }
        return result
      }
    },
    handelerNumberjoin(num) {
      if (num != undefined && num != null) {
        return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
      } else {
        return 0
      }
    },
    getData() {
      listStats().then(res => {
        if (res.code == 200) {
          const statusData = res.data
          const rawdata = res.data
          this.rawdata.traces = this.handelerNumberjoin(rawdata.traces)
          this.rawdata.logs = this.handelerNumberjoin(rawdata.logs)
          this.rawdata.users = this.handelerNumberjoin(rawdata.users)
          this.rawdata.services = this.handelerNumberjoin(rawdata.services)

          this.statusData.traces = this.handlerNumber(statusData.traces)
          this.statusData.logs = this.handlerNumber(statusData.logs)
          this.statusData.users = this.handlerNumber(statusData.users)
          this.statusData.services = this.handlerNumber(statusData.services)
        }
      })
    },
    Refresh(timeOut) {
      this.appTimer = setInterval(() => {
        this.getList()
      }, timeOut)
    },
    handChange(val) {
      if (val) {
        const obj = val
        obj.live = this.times.live
        obj.start_time = this.times.start_time
        obj.end_time = this.times.end_time
        storage.set('appsItem', obj)
        this.$store.commit('alias/setCurrentAlias', val.alias)
        this.$router.push({
          path: '/business-analysis/system-space/index',
          query: {
            id: val.id,
            app_alias: val.alias,
            name: val.name,
            start_time: this.times.start_time,
            end_time: this.times.end_time,
            item: val,
            live: val.live
          }
        }).catch(err => err)
      }
    },
    getList() {
      listApps({ pageIndex: 0, pageSize: 200 }).then(res => {
        if (res.code === 200) {
          this.appList = res.data.list
        }
      })
    },
    beforeUpload(file) {
      const isRightSize = file.size / 1024 / 1024 < 2
      if (!isRightSize) {
        this.$message.error('文件大小超过 2MB')
      }
      const isJPG = ['image/jpeg', 'image/png', 'image/jpg'].includes(file.type)
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG/PNG/JPEG 格式!')
      }
      return isRightSize && isJPG
    },
    uploadSuccess(response, file, fileList) {
      this.form.imgUrl = process.env.VUE_APP_BASE_API + response.data.full_path
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        name: undefined,
        alias: undefined,
        desc: undefined,
        imgUrl: undefined,
        contractInfo: undefined,
        contractPhone: undefined
      }
      this.resetForm('form')
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      // this.getMenuTreeselect(0)
      this.open = true
      this.title = '添加应用'
      this.isEdit = false
    },
    /** 提交按钮 */
    submitForm: function() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (this.form.id !== undefined) {
            updateOtApps(this.form, this.form.id).then(response => {
              if (response.code === 200) {
                this.msgSuccess(response.msg)
                this.open = false
                this.getList()
              } else {
                this.msgError(response.msg)
              }
            })
          } else {
            addOtApps(this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess(response.msg)
                this.open = false
                this.getList()
              } else {
                this.msgError(response.msg)
              }
            })
          }
        }
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    toggle() {
      this.openMonitor = !this.openMonitor
      this.$router.push({
        path: '/homeNewIndex',
        query: {
          servicesNumber: this.statusData.services
        }
      })
    },
    // url-查询
    async querySearchAsync(queryString, cb, type) {
      this.suppilerListQuery.url = this.stateurl.trim()
      if (this.stateurl === '') {
        this.suppilerListQuery.pageIndex = 1
      }
      try {
        const res = await searchServiceUrl(this.suppilerListQuery)
        if (res && res.code === 200) {
          this.suggestions = res.data.list || []
          this.pageTotal = res.data.count || 0
          cb(this.suggestions)
        }
      } catch (e) {
        // console.log(e)
      } finally {
        this.loading = false
      }
    },
    // url-选中
    handleSelect(item) {
      // 处理选中项
      const obj = this.appList.filter(m => m.alias === item.AppAlias)[0]
      storage.set('appsItem', obj)
      const rowItem = {
        method: item.Method,
        service_name: item.ServiceName,
        kind: item.Route,
        name: item.Route,
        route: item.Route
      }
      storage.set('row', rowItem)
      this.$router.push({
        path: '/service/InterfaceDetail/index',
        query: {
          kind: item.Route,
          method: item.Method,
          name: item.Route,
          service_name: item.ServiceName,
          route: item.Route
        }
      })
    },
    // url-滚到底部执行的方法
    async handelScroll() {
      const suggestions = this.$refs.autocompleteRef.$data.suggestions
      if (Number(this.pageTotal) <= suggestions.length) { // 全部已经展示完了
        this.suppilerListQuery.pageIndex = 1
        return
      }
      this.suppilerListQuery.pageIndex++
      this.loading = true
      try {
        const result = await searchServiceUrl(this.suppilerListQuery)
        // 根据实际接口返回数据格式将数据插入到选项中
        this.$refs.autocompleteRef.$data.suggestions = suggestions.concat(result.data.list || [])
        this.pageTotal = result.data.count || 0
      } catch (e) {
        // console.log(e)
      } finally {
        this.loading = false
      }
    },
    // 业务查询
    async bizSearchAsync(queryString, cb, type) {
      this.bizSearchQuery.name = this.stateBiz.trim()
      if (this.stateBiz === '') {
        this.bizSearchQuery.pageIndex = 1
      }
      try {
        const res = await searchBizName(this.bizSearchQuery)
        if (res && res.code === 200) {
          this.bizSuggestions = res.data.list || []
          this.bizPageTotal = res.data.count || 0
          cb(this.bizSuggestions)
        }
      } catch (e) {
        // console.log(e)
      } finally {
        this.bizLoading = false
      }
    },
    // 业务-滚到底部执行的方法
    async bizHandelScroll() {
      const suggestions = this.$refs.bizCompleteRef.$data.suggestions
      if (Number(this.bizPageTotal) <= suggestions.length) { // 全部已经展示完了
        this.suppilerListQuery.pageIndex = 1
        return
      }
      this.suppilerListQuery.pageIndex++
      this.bizLoading = true
      try {
        const result = await searchBizName(this.suppilerListQuery)
        // 根据实际接口返回数据格式将数据插入到选项中
        this.$refs.bizCompleteRef.$data.suggestions = suggestions.concat(result.data.list || [])
        this.bizPageTotal = result.data.count || 0
      } catch (e) {
      // console.log(e)
      } finally {
        this.bizLoading = false
      }
    },
    // 业务-下拉选中
    bizHandleSelect(item) {
    // 处理选中项
      const obj = this.appList.filter(m => m.alias === item.app_alias)[0]
      storage.set('appsItem', obj)
      // const rowItem = {
      //   method: item.Method,
      //   service_name: item.service_name,
      //   kind: item.name,
      //   name: item.name,
      //   route: item.name
      // }
      // storage.set('row', rowItem)
      this.$router.push({
        path: '/business-analysis/business-topics/index',
        query: {
          rowHash: item.hash,
          rowId: item.id,
          service_name: item.service_name,
          name: item.name,
          subconditionValue: item.name
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.index-wrap{
    // min-width: 1250px;
    width:100%;
    height: 100%;
    // min-height: 600px;
    min-height: 100vh;
    font-family: Arial,sans-serif;
    // background: #fff;
    position: relative;
    .index{
        position: relative;
        padding-bottom: 0;
        height: 100%;
        min-height: 600px;
        text-align: center;
    }
    .header{
      position: absolute;
      z-index: 99;
      min-width: 1000px;
      width: 100%;
      border-bottom: 0;
      height: 60px;
      line-height: 60px;
      // background: #fff;
      left: 0px;
      .header-right{
          position: absolute;
          right: 0;
          top: 0;
          z-index: 100;
          height: 60px;
          padding-right: 24px;
          padding-left: 200px;
          cursor: pointer;
          -webkit-tap-highlight-color: transparent;
      }
    }
    .content{
      position: absolute;
      top:50%;
      left:50%;
      transform: translate(-50%,-50%);
      // height: 40%;
      // min-height: 314px;
      // max-height: 510px;
      width: 1000px;
      margin: 0 auto;
      .content-form{
        margin-top:20px;
        width: 850px;
        height: 100%;
        margin: 0 auto;
        text-align: left;
        display:flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 20px;
      }
      .content-form-flex{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        height:60px;
      }
      .lg-logo{
        width:32px;
        height: 32px;
        margin-right:16px;
      }
    }

    .content-form .el-select.el-select--medium {
      height: 44px;
      font-size: 16px;
      outline: 0;
      box-shadow: none;
      border-radius: 10px;
      background-color:rgba(255,255,255,0.8);
      color: #222;
      overflow: hidden;
      box-sizing: content-box;
      -webkit-tap-highlight-color: transparent;
      .el-input {
        // width: 512px;
        // padding: 12px 16px;
        height: 44px;

      }

    }
    .content-form .el-form--inline .el-form-item{
      margin-bottom: 0;
      width: calc(100% - 120px);
      margin-right: 0;
    }
    .content-form ::v-deep .el-form-item__content{
      line-height: normal;
      width: 100%;
    }
    .content-form .el-autocomplete{
      width: 100%;
    }
    .content-form .el-autocomplete ::v-deep .el-input--medium .el-input__inner{
      border-radius: 0 8px 8px 0;
    }

}
.bg_video{
  height: 100vh;
  width: 100vw;
  position: absolute;
  top: 0;
  left: 0;
  -o-object-fit: cover;
  object-fit: cover;
}
.content-form ::v-deep .el-form.el-form--inline{
      text-align: center;
      width:100%;
    }
.content-form ::v-deep .el-input--medium .el-input__inner{
        // width: 412px;
        // padding: 12px 16px;
        height: 44px;
        line-height: 44px;
        border:none;
        // border-radius: 10px;
        // border: 2px solid #c4c7ce;
        background-color:rgba(255,255,255,0.8);
        color: #222;
  }
.content-form ::v-deep .el-select .el-input.is-focus .el-input__inner {
    border-color:#c4c7ce;
    border:none;
    // background: transparent;
     background-color:rgba(255,255,255,0.8);
  }
  .block-container{
    width: 100%;
    padding: 12px;
    margin-right: auto;
    margin-left: auto;
    .row{
      display: flex;
      flex-wrap: wrap;
      flex: 1 1 auto;
      margin: -12px;
      justify-content:center;
      .col{
          max-width: 250px;
          flex: 0 0 auto;
          width: auto;
          padding: 12px;

      }
      .border-bottom{
            width: 150px;
            min-width: 120px;
            // background-color:transparent;
             background-color:rgba(255,255,255,0.8);
            // background-color: rgb(255, 255, 255);
            border: thin solid rgba(0,0,0,.12);
            border-bottom: 6px solid #00C5FF;
            color: rgba(0,0,0,.87);
            position: relative;
            border-radius: 8px;
            display: block;
            max-width: 100%;
            outline: none;
            text-decoration: none;
            transition-property: box-shadow,opacity;
            overflow-wrap: break-word;
            white-space: normal;
            .col-tit{
                text-transform: uppercase;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                font-size: 14px;
                letter-spacing: 0.009378px;
                line-height: 20px;
                font-weight: 400;
                font-family: "Roboto,sans-serif";
                color: #90a4ae;
                caret-color: #90a4ae;
                text-align: left;
            }
            .col-con{
                line-height: 32px;
                font-family: Roboto,sans-serif;
                font-size: 24px;
                font-weight: 400;
                letter-spacing: normal;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                padding-top: 16px;
                .col-con-unit{
                  color: #b0bec5;
                  caret-color: #b0bec5;
                  font-size: 16px;
                  font-weight: 400;
                  line-height: 28px;
                  letter-spacing: .0014px;
                  font-family: "Roboto,sans-serif";
                }
            }
      }
    }

  }
  .px-3{
    padding-right: 12px!important;
    padding-left: 12px!important;
  }
  .py-4{
    padding-top: 16px!important;
    padding-bottom: 16px!important;
  }
  .dot{
      display: inline-block !important;
      width:8px !important;
      height: 8px !important;
      border-radius: 50% !important;
      background: #1976d2 !important;
      margin-right: 12px !important;
    }
    .name_box{
      height: 50px;
      overflow: hidden;
      position: relative;
      background: #fff;
      // border-bottom: 1px solid #ddd;
      -webkit-box-shadow: 0 10px 10px rgba(0, 21, 41, 0.3);
      box-shadow: 0 10px 10px rgba(0, 21, 41, 0.3);
      text-align: right;
      padding-right: 20px;
      line-height: 50px;

      font-weight: bold;
      font-size: 18px;
    }
    .ob-select-title{
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      display: inline-block;
      max-width: 70%;
    }
    .ob-select-box{
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .ob-tag-right{
      margin-right: 10px;
    }
</style>

