qp_onemap_ui/src/views/HomePage.vue

<template>
  <div class="home container">
    <div class="part1">
      <div class="part1-1">
        <div class="part1-1-1">
          <div class="number-container">
            <span class="text">调用总数</span>
            <span v-for="(num, index) in totalCall" :key="index">
              <span v-if="num.indexOf(',') > -1">
                <span class="separator">,</span>
              </span>
              <span v-else>
                <span class="number-item">{{ num }}</span>
              </span>
            </span>
            <span class="text">次</span>
          </div>
        </div>
        <div class="part1-1-2">
          <div class="call-count-container">
            <div class="line"></div>
            <div>
              <span class="text1">当日调用量</span>
              <span class="count">{{ todayCall }}</span>
              <span class="text2">次</span>
            </div>
            <div class="line"></div>
          </div>
        </div>
      </div>
      <div class="part1-2">
        <div class="part1-2-1">
          <div>服务总数</div>
          <div>{{ serveNum }}个</div>
        </div>
        <div class="part1-2-2">
          <div>授权用户数</div>
          <div>{{ userNum }}个</div>
        </div>
        <div class="part1-2-3">
          <div>授权应用数</div>
          <div>{{ appNum }}个</div>
        </div>
      </div>
      <div class="part1-3">
        <div id="echart1"></div>
      </div>
    </div>
    <div class="part2">
      <div class="chapter">核心服务</div>
      <div class="row">
        <div class="service">
          <h2 class="title yellow">空间数据查询</h2>
          <p>
            空间数据查询是从空间数据集中检索特定信息的操作。它可在关系型数据库如MySQL和SQL
            Server中进行，也能在NoSQL数据库如MongoDB里实现。通过特定函数和方法，能快速找到符合条件的数据，为地理信息等领域提供重要支持。
          </p>
        </div>
        <div class="service">
          <h2 class="title gray">数据分析</h2>
          <p>
            空间数据查询是从空间数据集中检索特定信息的操作。它可在关系型数据库如MySQL和SQL
            Server中进行，也能在NoSQL数据库如MongoDB里实现。通过特定函数和方法，能快速找到符合条件的数据，为地理信息等领域提供重要支持。
          </p>
        </div>
        <div class="service">
          <h2 class="title blue">可视化服务</h2>
          <p>
            空间数据查询是从空间数据集中检索特定信息的操作。它可在关系型数据库如MySQL和SQL
            Server中进行，也能在NoSQL数据库如MongoDB里实现。通过特定函数和方法，能快速找到符合条件的数据，为地理信息等领域提供重要支持。
          </p>
        </div>
      </div>
      <div class="row">
        <div class="service">
          <h2 class="title orange">空间数据查询</h2>
          <p>
            空间数据查询是从空间数据集中检索特定信息的操作。它可在关系型数据库如MySQL和SQL
            Server中进行，也能在NoSQL数据库如MongoDB里实现。通过特定函数和方法，能快速找到符合条件的数据，为地理信息等领域提供重要支持。
          </p>
        </div>
        <div class="service">
          <h2 class="title green">数据分析</h2>
          <p>
            空间数据查询是从空间数据集中检索特定信息的操作。它可在关系型数据库如MySQL和SQL
            Server中进行，也能在NoSQL数据库如MongoDB里实现。通过特定函数和方法，能快速找到符合条件的数据，为地理信息等领域提供重要支持。
          </p>
        </div>
        <div class="service">
          <h2 class="title yellow-green">可视化服务</h2>
          <p>
            空间数据查询是从空间数据集中检索特定信息的操作。它可在关系型数据库如MySQL和SQL
            Server中进行，也能在NoSQL数据库如MongoDB里实现。通过特定函数和方法，能快速找到符合条件的数据，为地理信息等领域提供重要支持。
          </p>
        </div>
      </div>
    </div>
    <div class="part3">
      <div class="container">
        <h1>二三维一体化引擎</h1>
        <p>
          GIS 通用计算功能，实用便捷超乎想象！
          <br />测距、剖面分析及点线面绘制轻松实现，坐标转换精准高效，路径规划快速准确，地名搜索智能推荐
        </p>
        <el-button type="primary" size="large" @click="gotoDetail">了解更多</el-button>
      </div>
    </div>
    <div class="part4">
      <div class="chapter">实践与探索</div>
      <div class="row">
        <div class="service">
          <h2 class="title yellow">空间数据查询</h2>
          <p>
            空间数据查询是从空间数据集中检索特定信息的操作。它可在关系型数据库如MySQL和SQL
            Server中进行，也能在NoSQL数据库如MongoDB里实现。通过特定函数和方法，能快速找到符合条件的数据，为地理信息等领域提供重要支持。
          </p>
          <el-button size="large" link>了解详情→</el-button>
        </div>
        <div class="service">
          <h2 class="title gray">数据分析</h2>
          <p>
            空间数据查询是从空间数据集中检索特定信息的操作。它可在关系型数据库如MySQL和SQL
            Server中进行，也能在NoSQL数据库如MongoDB里实现。通过特定函数和方法，能快速找到符合条件的数据，为地理信息等领域提供重要支持。
          </p>
          <el-button size="large" link>了解详情→</el-button>
        </div>
        <div class="service">
          <h2 class="title blue">可视化服务</h2>
          <p>
            空间数据查询是从空间数据集中检索特定信息的操作。它可在关系型数据库如MySQL和SQL
            Server中进行，也能在NoSQL数据库如MongoDB里实现。通过特定函数和方法，能快速找到符合条件的数据，为地理信息等领域提供重要支持。
          </p>
          <el-button size="large" link>了解详情→</el-button>
        </div>
      </div>
      <div class="row">
        <div class="service">
          <h2 class="title orange">空间数据查询</h2>
          <p>
            空间数据查询是从空间数据集中检索特定信息的操作。它可在关系型数据库如MySQL和SQL
            Server中进行，也能在NoSQL数据库如MongoDB里实现。通过特定函数和方法，能快速找到符合条件的数据，为地理信息等领域提供重要支持。
          </p>
          <el-button size="large" link>了解详情→</el-button>
        </div>
        <div class="service">
          <h2 class="title green">数据分析</h2>
          <p>
            空间数据查询是从空间数据集中检索特定信息的操作。它可在关系型数据库如MySQL和SQL
            Server中进行，也能在NoSQL数据库如MongoDB里实现。通过特定函数和方法，能快速找到符合条件的数据，为地理信息等领域提供重要支持。
          </p>
          <el-button size="large" link>了解详情→</el-button>
        </div>
        <div class="service">
          <h2 class="title yellow-green">可视化服务</h2>
          <p>
            空间数据查询是从空间数据集中检索特定信息的操作。它可在关系型数据库如MySQL和SQL
            Server中进行，也能在NoSQL数据库如MongoDB里实现。通过特定函数和方法，能快速找到符合条件的数据，为地理信息等领域提供重要支持。
          </p>
          <el-button size="large" link>了解详情→</el-button>
        </div>
      </div>
    </div>
    <div class="part5">
      <div class="chapter">应用案例</div>
      <div class="part5-1">
        <div class="part5-1-1">
          <div>
            约
            <p>545</p>
            万次
          </div>
          <div>地址</div>
        </div>
        <div class="part5-1-2">
          <div>
            <p>319</p>
            个
          </div>
          <div>应用场景</div>
        </div>
        <div class="part5-1-3">
          <div>
            约
            <p>230</p>
            万条
          </div>
          <div>服务人数</div>
        </div>
      </div>
      <div class="part5-2">
        <div class="tab-container">
          <div
            v-for="item in tabs"
            :key="item.key"
            @click="currentTab = item.key"
            :class="{ 'tab-item': true, 'tab-item-active': currentTab === item.key }"
          >
            <!-- <span class="tab-icon">{{ item.icon }}</span> -->
            <span class="tab-title">{{ item.title }}</span>
          </div>
        </div>
        <div class="row">
          <div class="service">
            <div class="content">
              <div class="tag">盈港街道、夏阳街道</div>
              <h2 class="title">上海市青浦区教育局·学区查询</h2>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod
                bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra
                justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus
                et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum,
                nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus
                pronin sapien nunc accuan eget.
              </p>
            </div>
          </div>
          <div class="service">
            <div class="content">
              <div class="tag">全区、快递实验室</div>
              <h2 class="title">上海市青浦区快递实验室</h2>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod
                bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra
                justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus
                et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum,
                nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus
                pronin sapien nunc accuan eget.
              </p>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="service">
            <div class="content">
              <div class="tag">盈港街道、夏阳街道</div>
              <h2 class="title">上海市青浦区教育局·学区查询</h2>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod
                bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra
                justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus
                et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum,
                nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus
                pronin sapien nunc accuan eget.
              </p>
            </div>
          </div>
          <div class="service">
            <div class="content">
              <div class="tag">全区、快递实验室</div>
              <h2 class="title">上海市青浦区快递实验室</h2>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod
                bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra
                justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus
                et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum,
                nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus
                pronin sapien nunc accuan eget.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "Home",
  data() {
    return {
      todayCall: "857,605",
      totalCall: [],

      serveNum: 456,
      userNum: 17,
      appNum: 43,

      currentTab: "data-governance", // 初始选中项
      tabs: [
        { key: "data-governance", icon: "", title: "数据治理" },
        { key: "business-app", icon: "", title: "业务应用" },
        { key: "comprehensive-decision", icon: "", title: "综合决策" },
      ],
    };
  },
  mounted() {
    this.handleTotalCallNumber(667507060);
    this.setChart();
  },
  methods: {
    gotoDetail() {
      this.$router.push({
        path: "/sksjgl",
      });
    },
    // 处理调用总数数字
    handleTotalCallNumber(num) {
      // 667507060
      let str = num.toString();
      let strArr = str.split("").reverse();
      this.totalCall = [];
      for (let i = 0; i < strArr.length; i++) {
        const num = strArr[i];
        this.totalCall.unshift(num);
        if (i % 3 == 2 && i != strArr.length - 1) {
          this.totalCall.unshift(",");
        }
      }
    },
    setChart() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("echart1"));

      let option = {
        tooltip: {
          trigger: "axis", // 坐标轴触发提示
          axisPointer: { type: "shadow" },
        },
        legend: {
          data: ["tokyo", "london"],
          textStyle: { color: "#fff" }, // 图例文字颜色
        },
        xAxis: {
          type: "category",
          data: [
            "Jan",
            "Feb",
            "Mar",
            "Apr",
            "May",
            "Jun",
            "Jul",
            "Aug",
            "Sep",
            "Oct",
            "Nov",
          ],
          axisLine: { lineStyle: { color: "#fff" } }, // 坐标轴颜色
          axisTick: { show: false }, // 隐藏刻度
          splitLine: { show: false }, // 隐藏分割线
        },
        yAxis: {
          type: "value",
          max: 30,
          axisLine: { lineStyle: { color: "#fff" } },
          splitLine: {
            lineStyle: {
              type: "dashed", // 虚线网格
              color: "#fff",
            },
          },
        },
        series: [
          {
            name: "tokyo",
            type: "line",
            data: [7, 7, 15, 19, 21, 22, 25, 26, 23, 19, 12], // 模拟数据
            lineStyle: { color: "#42a5f5" }, // 蓝色线条
            itemStyle: { color: "#42a5f5" }, // 节点颜色
            symbol: "circle", // 节点形状
            symbolSize: 6, // 节点大小
          },
          {
            name: "london",
            type: "line",
            data: [3, 3, 6, 12, 15, 17, 18, 17, 14, 10, 6], // 模拟数据
            lineStyle: { color: "#4caf50" }, // 绿色线条
            itemStyle: { color: "#4caf50" },
            symbol: "circle",
            symbolSize: 6,
          },
        ],
      };
      // 绘制图表
      myChart.setOption(option);
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  width: 1920px;
  margin: 0 auto;
}
.home {
  position: relative;
  .part1 {
    height: 810px;
    background: url(~@/assets/images/common/home-bg1.png) no-repeat;
    position: relative;
    overflow: hidden;
    .part1-1 {
      width: 1000px;
      height: 200px;
      background: #09284c;
      margin: 0 auto;
      margin-top: 30px;
      overflow: hidden;
      .part1-1-1 {
        height: 70px;
        width: fit-content;
        margin: 0 auto;
        margin-top: 30px;
        .number-container {
          display: flex;
          align-items: flex-start;
          font-size: 2em;
        }

        .number-item {
          width: 57px;
          height: 70px;
          background-color: #007bff;
          color: white;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 20px;
          font-size: 44px;
          line-height: 70px;
          font-weight: bold;
        }

        .separator {
          margin-right: 20px;
          font-size: 35px;
          text-align: end;
          color: #ffffff;
        }

        .text {
          font-size: 24px;
          line-height: 70px;
          margin-right: 20px;
          color: #ffffff;
          font-weight: bold;
        }
      }
      .part1-1-2 {
        height: 50px;
        width: 700px;
        margin: 0 auto;
        margin-top: 30px;
        background: #8080804d;
        border-radius: 5px;
        line-height: 50px;

        div {
          display: inline-block;
          vertical-align: top;
          &.line {
            height: 2px;
            background: #808080;
            width: 100px;
            margin: 24px 20px;
            margin-right: 20px;
          }
          &:nth-child(2) {
            width: 420px;
            text-align: center;
            color: #ffffff;
            font-size: 20px;
            font-weight: bold;
            .text1 {
              margin-right: 20px;
            }
            .text2 {
              margin-left: 20px;
            }
          }
          &:nth-child(4) {
            float: right;
          }
        }
      }
    }
    .part1-2 {
      color: #ffffff;
      margin-top: 20px;
      .part1-2-1,
      .part1-2-2,
      .part1-2-3 {
        display: inline-block;
        text-align: center;
        font-weight: bold;
        width: calc(100% / 3);
        div:nth-child(1) {
          font-size: 24px;
        }
        div:nth-child(2) {
          margin-top: 10px;
          font-size: 32px;
        }
      }
    }
    .part1-3 {
      margin-top: 20px;
      height: 450px;
      overflow: hidden;
      #echart1 {
        width: 100%;
        height: 100%;
      }
    }
  }
  .part2 {
    background: #08224a;
    padding-bottom: 1px;
    .chapter {
      text-align: center;
      font-size: 40px;
      width: 100%;
      height: 80px;
      line-height: 80px;
      color: #ffffff;
      font-weight: bold;
      border-bottom: 2px solid gray;
      margin-bottom: 20px;
    }

    .row {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
      padding: 0 100px;
    }

    .service {
      flex: 1;
      margin: 0 30px;
      text-align: center;
    }

    .title {
      position: relative;
      padding-bottom: 10px;
      margin-bottom: 15px;
      height: 50px;
      line-height: 90px;
      font-size: 30px;
    }

    .title::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      height: 15px;
    }

    .yellow {
      color: #f1c40f;
    }

    .yellow::before {
      background-color: #f1c40f;
    }

    .gray {
      color: #bdc3c7;
    }

    .gray::before {
      background-color: #bdc3c7;
    }

    .blue {
      color: #3498db;
    }

    .blue::before {
      background-color: #3498db;
    }

    .orange {
      color: #e67e22;
    }

    .orange::before {
      background-color: #e67e22;
    }

    .green {
      color: #27ae60;
    }

    .green::before {
      background-color: #27ae60;
    }

    .yellow-green {
      color: #b2be2c;
    }

    .yellow-green::before {
      background-color: #b2be2c;
    }

    p {
      font-size: 20px;
      line-height: 2;
      color: #ffffff;
    }
  }

  .part3 {
    .container {
      position: relative;
      width: 100%;
      height: 940px;
      background-image: url("~@/assets/images/common/u30.png"); /* 替换为实际图片路径 */
      background-size: cover;
      background-position: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      color: #000000;
      font-family: Arial, sans-serif;
      overflow: hidden;
    }

    h1 {
      position: absolute;
      top: 30px;
      font-size: 40px;
      font-weight: bold;
    }

    p {
      margin-bottom: 30px;
      font-weight: bold;
      font-size: 24px;
      line-height: 2;
    }
    .el-button {
      position: absolute;
      bottom: 150px;
    }
  }

  .part4 {
    background: #08224a;
    padding-bottom: 1px;
    .chapter {
      text-align: center;
      font-size: 40px;
      width: 100%;
      height: 80px;
      line-height: 80px;
      color: #ffffff;
      font-weight: bold;
      /* border-bottom: 2px solid gray; */
      margin-bottom: 20px;
    }

    .row {
      display: flex;
      justify-content: space-between;
      margin-bottom: 40px;
      padding: 0 100px;
    }

    .service {
      flex: 1;
      margin: 0 30px;
      width: 500px;
      height: 320px;
      border: 1px solid gray;
      border-radius: 8px;
      padding: 10px 10px;
      box-sizing: border-box;
      overflow: hidden;
      position: relative;
    }

    .title {
      position: relative;
      height: 30px;
      line-height: 30px;
      font-size: 30px;
      text-align: left;
      color: #ffffff;
      padding-bottom: 20px;
    }

    p {
      text-indent: 2rem;
      font-size: 20px;
      line-height: 2;
      color: #ffffff;
    }

    .el-button {
      position: absolute;
      bottom: 10px;
      left: 10px;
      font-size: 20px;
      color: #ffffff;
      &:hover {
        color: #3498db;
      }
    }
  }

  .part5 {
    background: #08224a;
    padding-bottom: 1px;
    .chapter {
      text-align: center;
      font-size: 40px;
      width: 100%;
      height: 80px;
      line-height: 80px;
      color: #ffffff;
      font-weight: bold;
      /* border-bottom: 2px solid gray; */
      margin-bottom: 20px;
    }
    .part5-1 {
      color: #ffffff;
      margin-top: 20px;
      margin-bottom: 20px;
      .part5-1-1,
      .part5-1-2,
      .part5-1-3 {
        display: inline-block;
        text-align: center;
        font-weight: bold;
        width: calc(100% / 3);
        div {
          font-size: 24px;
        }
        div:nth-child(2) {
          margin-top: 10px;
          font-size: 24px;
        }
        div p {
          display: inline-block;
          font-size: 40px;
        }
      }
    }
    .part5-2 {
      margin-top: 40px;
      padding-bottom: 1px;
      height: fit-content;
      .tab-container {
        display: flex;
        gap: 40px; /* 选项卡间距 */
        // border-bottom: 1px solid #eee; /* 可选底部分隔线 */
        width: fit-content;
        margin: 0 auto;
        position: relative;
        margin-bottom: 40px;
        height: 55px;
      }
      .tab-container::after {
        content: "";
        display: block;
        height: 1px;
        width: 100%;
        background: #eeeeee; /* 下划线颜色 */
        position: absolute;
        bottom: 0;
      }

      .tab-item {
        color: #ffffff;
        cursor: pointer;
        overflow: hidden;
        position: relative;
        font-size: 30px;
        height: 55px;
      }
      .tab-item-active {
        color: #66f; /* 选中文字颜色 */
      }
      .tab-item-active::after {
        content: "";
        display: block;
        height: 2px;
        width: 100%;
        background: #66f; /* 下划线颜色 */
        margin-top: 5px;
        position: absolute;
        bottom: 0;
        z-index: 1;
      }
      .tab-icon {
        margin-right: 5px; /* 图标与文字间距 */
      }

      .row {
        display: flex;
        justify-content: space-between;
        margin-bottom: 40px;
        padding: 0 120px;
        > :nth-child(1) {
          background: url(~@/assets/images/common/u301.png) no-repeat 0 0/100%;
        }
        > :nth-child(2) {
          background: url(~@/assets/images/common/u302.png) no-repeat 0 0/100%;
        }
      }

      .service {
        flex: 1;
        margin: 0 30px;
        height: 660px;
        border: 1px solid gray;
        border-radius: 10px;
        box-sizing: border-box;
        overflow: hidden;
        position: relative;
        .content {
          position: absolute;
          bottom: 0;
          width: 100%;
          height: 430px;
          background: #ffffff;
          border-radius: 10px;
          padding: 20px 20px;
          box-sizing: border-box;
          .tag {
            border-width: 0px;
            width: 213px;
            height: 52px;
            line-height: 52px;
            text-align: center;
            background: inherit;
            background-color: rgba(226, 228, 244, 1);
            border-radius: 5px;
            filter: drop-shadow(none);
            transition: none;
            font-size: 20px;
            color: #7281ee;
            margin-bottom: 20px;
          }
          .title {
            position: relative;
            height: 30px;
            line-height: 30px;
            font-size: 30px;
            text-align: left;
            padding-bottom: 20px;
          }

          p {
            font-size: 20px;
            line-height: 1.5;
          }
        }
      }
    }
  }
}
</style>