technique_web3/src/views/main/hatch/twelve_2.vue

<template>
  <myMain>
    <div class="hatch">
      <el-row>
        <el-col :span="24" class="animate__animated animate__backInRight" v-loading="loading">
          <div class="head">
            <div class="head_1">产学研用平台孵化大脑</div>
            <div class="head_2" id="showTime">{{ formattedTime }}</div>
          </div>
          <div class="center">
            <ul class="clearfix">
              <li>
                <div class="boxall">
                  <div class="titleall">模块标题</div>
                  <div class="list">
                    <div class="list_1" v-for="i in listOne" :key="i.value">
                      <h2>{{ i.value }}</h2>
                      <span>{{ i.label }}</span>
                    </div>
                  </div>
                  <div class="boxfoot"></div>
                </div>
              </li>
              <li>
                <div class="barnav">
                  <div class="top">
                    <div class="list" v-for="i in listTwo" :key="i.value">
                      <div class="value">{{ i.value }}</div>
                    </div>
                  </div>
                  <div class="top">
                    <div class="list" v-for="i in listTwo" :key="i.value">
                      <div class="label">{{ i.label }}</div>
                    </div>
                  </div>
                  <div class="boxfoot"></div>
                </div>
                <div class="mapbox">
                  <map1 class="map"></map1>
                </div>
              </li>
              <li>
                <div class="boxall">
                  <div class="titleall">模块标题</div>
                  <div class="list">
                    <div class="list_1" v-for="i in listOne" :key="i.value">
                      <h2>{{ i.value }}</h2>
                      <span>{{ i.label }}</span>
                    </div>
                  </div>
                  <div class="boxfoot"></div>
                </div>
              </li>
            </ul>
            <ul class="clearfix">
              <li>
                <div class="boxall">
                  <div class="titleall">模块标题</div>
                  <div class="list thr">
                    <div class="list_1" v-for="i in listThr" :key="i.value">
                      <h2>{{ i.value }}</h2>
                      <span>{{ i.label }}</span>
                    </div>
                  </div>
                  <div class="boxfoot"></div>
                </div>
              </li>
              <li></li>
              <li>
                <div class="boxall">
                  <div class="titleall">优质企业</div>
                  <div class="list four">
                    <vue3-seamless-scroll
                      :list="listFour"
                      :hover="true"
                      :step="0.2"
                      :wheel="true"
                      :isWatch="true"
                      class="scroll"
                    >
                      <div class="wrap" v-for="(item, index) in listFour" :key="index">
                        <div class="other">{{ item.name }}</div>
                        <div class="other">{{ item.number }}人</div>
                        <div class="other">{{ item.time }}</div>
                      </div>
                    </vue3-seamless-scroll>
                  </div>
                  <div class="boxfoot"></div>
                </div>
              </li>
            </ul>
            <ul class="clearfix" style="display: flex; justify-content: space-between">
              <li style="width: 49.5%">
                <div class="boxall">
                  <div class="titleall">模块标题</div>
                  <div class="five">
                    <echarts1></echarts1>
                  </div>
                  <div class="boxfoot"></div>
                </div>
              </li>
              <li style="width: 49.5%">
                <div class="boxall">
                  <div class="titleall">模块标题</div>
                  <div class="six">
                    <echarts2></echarts2>
                  </div>
                  <div class="boxfoot"></div>
                </div>
              </li>
            </ul>
          </div>
        </el-col>
      </el-row>
      <!-- <div class="copyright">
      版权所有：Copyright©2007-2024 吉林省华欣数字科技股份有限公司 │ 吉ICP备14005689号
    </div> -->
    </div>
  </myMain>
</template>

<script setup>
import myMain from './dataV/myMain.vue'
import map1 from './path/map.vue'
import echarts1 from './path/echarts1.vue'
import echarts2 from './path/echarts2.vue'
// 加载中
const loading = ref(false)
// 时间
const formattedTime = ref('')
const listOne = ref([
  { value: '1824', label: '华东地区' },
  { value: '1920', label: '华南地区' },
  { value: '19%', label: '华西地区' },
  { value: '1824', label: '华北地区' }
])
const listTwo = ref([
  { value: '1942', label: '字段名称' },
  { value: '98612', label: '字段名称' },
  { value: '2091', label: '字段名称' }
])
const listThr = ref([
  { value: '1942', label: '字段名称' },
  { value: '98612', label: '字段名称' },
  { value: '2091', label: '字段名称' },
  { value: '1942', label: '字段名称' },
  { value: '98612', label: '字段名称' },
  { value: '2091', label: '字段名称' },
  { value: '1942', label: '字段名称' },
  { value: '98612', label: '字段名称' },
  { value: '2091', label: '字段名称' }
])
const listFour = ref([
  { name: '深圳腾讯科技有限公司', number: '100', time: '2023-4-22' },
  { name: '网易科技有限公司', number: '1万人以上', time: '2023-6-15' },
  { name: '百度科技有限公司', number: '1000', time: '2023-5-30' },
  { name: '汽车之家科技有限公司', number: '1000', time: '2023-7-12' },
  { name: '小米科技有限公司', number: '1000', time: '2023-5-14' },
  { name: '网易科技有限公司', number: '1万人以上', time: '2023-6-15' },
  { name: '百度科技有限公司', number: '1000', time: '2023-5-30' },
  { name: '汽车之家科技有限公司', number: '1000', time: '2023-7-12' },
  { name: '小米科技有限公司', number: '1000', time: '2023-5-14' }
])

// 请求
onMounted(async () => {
  loading.value = true
  await updateTime()
  loading.value = false
})
// 创建一个函数来格式化时间并更新状态
const updateTime = () => {
  const now = new Date()
  const options = {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hour12: false
  }
  formattedTime.value = now.toLocaleString('zh-CN', options)
}

const timer = setInterval(updateTime, 1000)

onMounted(() => {
  timer // 开始计时器
})

onBeforeUnmount(() => {
  clearInterval(timer) // 组件卸载前清除计时器
})
</script>
<style scoped lang="scss">
.hatch {
  min-height: 100%;
  width: 100%;
  position: relative;
  background: url('./images/bg.jpg');
  background-size: 100% 100%;
  padding: 0px;
  margin: 0px;
  color: #222;
  font-family: '微软雅黑';
  cursor: default; /* 将鼠标样式更改为箭头 */
  @font-face {
    font-family: electronicFont;
    src: url(./font/DS-DIGIT.TTF);
  }
  a:hover {
    color: #06c;
    text-decoration: none !important;
  }
  .head {
    position: relative;
    height: 4.5rem;
    background: url('./images/head_bg.png') no-repeat center center;
    background-size: 100% 100%;
    .head_1 {
      color: #fff;
      text-align: center;
      font-size: 2.3rem;
      line-height: 2.3rem;
      margin: 1rem 0;
    }
    .head_2 {
      position: absolute;
      right: 1rem;
      top: 0.2rem;
      line-height: 1.5rem;
      color: rgba(255, 255, 255, 0.7);
      font-size: 1.5rem;
      padding-right: 0.5rem;
      font-family: electronicFont;
    }
  }
  .clearfix {
    display: flex;
    padding: 0 0.5rem;
    list-style-type: none;
    margin: 0.5rem 0;
  }
  .center {
    .titleall {
      font-size: 0.9rem;
      color: #fff;
      line-height: 0.9rem;
      padding: 0 0 0.7rem 0;
      border-bottom: 1px dotted rgba(255, 255, 255, 0.2);
    }
    .boxall {
      border: 1px solid rgba(25, 186, 139, 0.17);
      padding: 0.8rem;
      background: rgba(255, 255, 255, 0.04) url('./images/line.png');
      background-size: 100% auto;
      position: relative;
      z-index: 10;
      .list {
        display: flex;
        align-items: center;
        .list_1 {
          position: relative;
          width: 10rem;
          display: flex;
          flex-direction: column;
          align-items: center;
          h2 {
            margin: 0.8rem 0;
            font-size: 1.5rem;
            font-weight: bold;
            font-family: electronicFont;
            color: #46b8ff;
          }
          span {
            font-size: 1rem;
            color: #fff;
            opacity: 0.5;
          }
        }
        .list_1:before {
          position: absolute;
          content: '';
          height: 25%;
          width: 0.1rem;
          background: rgba(255, 255, 255, 0.1);
          right: 0;
          top: 25%;
        }
        .list_1:last-child:before {
          width: 0;
        }
      }
      .thr {
        flex-wrap: wrap;
        justify-content: center;
        .list_1 {
          width: 8rem;
          h2 {
            color: #2ad08a;
          }
        }
        .list_1:nth-child(3n):before {
          width: 0;
        }
      }
      .four {
        height: 13.2rem;
        overflow: hidden;
        .scroll {
          width: 100%;
          .wrap {
            display: flex;
            justify-content: space-between;
            border: 1px solid rgba(25, 186, 139, 0.17);
            padding: 0.2rem;
            margin: 0 0 0.5rem 0;
            .other:first-child {
              width: 40%;
            }
            .other {
              width: 30%;
              color: rgba(255, 255, 255, 0.6);
              text-align: center;
              text-overflow: ellipsis;
              white-space: nowrap;
              overflow: hidden;
              font-size: 0.8rem;
            }
          }
        }
      }
      .boxfoot {
        position: absolute;
        bottom: 0;
        width: 100%;
        left: 0;
      }
    }
    .boxall:before,
    .boxfoot:before {
      border-left: 2px solid #02a6b5;
      left: 0;
    }
    .boxall:before {
      position: absolute;
      width: 0.7rem;
      height: 0.7rem;
      content: '';
      border-top: 2px solid #02a6b5;
      top: 0;
    }
    .boxall:after,
    .boxfoot:after {
      border-right: 2px solid #02a6b5;
      right: 0;
    }
    .boxall:before,
    .boxall:after {
      position: absolute;
      width: 0.7rem;
      height: 0.7rem;
      content: '';
      border-top: 2px solid #02a6b5;
      top: 0;
    }
    .boxfoot:before,
    .boxfoot:after {
      position: absolute;
      width: 0.7rem;
      height: 0.7rem;
      content: '';
      border-bottom: 2px solid #02a6b5;
      bottom: 0;
    }
    .boxall:before,
    .boxfoot:before {
      border-left: 2px solid #02a6b5;
      left: 0;
    }
    .barnav {
      margin: 0 0.5rem;
      position: relative;
      background: hsla(225, 68%, 64%, 0.1);
      .top {
        display: flex;
        border: 1px solid rgba(25, 186, 139, 0.17);
        padding: 0.3rem;

        .list {
          width: 33%;
          text-align: center;
          .value {
            font-size: 2.5rem;
            color: #ffeb7b;
            padding: 0.5rem 0;
            font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif';
            font-weight: bold;
            font-family: electronicFont;
          }
          .label {
            font-size: 1rem;
            color: rgba(255, 255, 255, 0.7);
          }
        }
      }
    }
    .boxfoot {
      position: absolute;
      bottom: 0;
      width: 100%;
      left: 0;
    }
    .barnav:before,
    .boxfoot:before {
      border-left: 2px solid #02a6b5;
      left: 0;
    }
    .barnav:before {
      position: absolute;
      width: 0.7rem;
      height: 0.7rem;
      content: '';
      border-top: 2px solid #02a6b5;
      top: 0;
    }
    .barnav:after,
    .boxfoot:after {
      border-right: 2px solid #02a6b5;
      right: 0;
    }
    .barnav:before,
    .barnav:after {
      position: absolute;
      width: 0.7rem;
      height: 0.7rem;
      content: '';
      border-top: 2px solid #02a6b5;
      top: 0;
    }
    .boxfoot:before,
    .boxfoot:after {
      position: absolute;
      width: 0.7rem;
      height: 0.7rem;
      content: '';
      border-bottom: 2px solid #02a6b5;
      bottom: 0;
    }
    .barnav:before,
    .boxfoot:before {
      border-left: 2px solid #02a6b5;
      left: 0;
    }
    .map {
      position: absolute;
      top: 0;
      left: -4%;
      width: 100%;
    }
  }
  .center > ul > li {
    float: left;
    height: 100%;
    width: 30%;
  }
  .center > ul > li:nth-child(2) {
    width: 40%;
  }
  .copyright {
    position: absolute;
    bottom: 0.5rem;
    left: 0;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.7rem;
    width: 100%;
  }
}
</style>