qp_onemap_ui/src/views/Wgn.vue

<template>
  <div class="wgn_box">
    <!-- <div class="server_title">
      <el-image
        style="width: 50%; height: calc(100vh - 120px)"
        src="static/images/wgn_title.png"
        fit="cover"
      />
      <div class="server_title_text">
        <div class="server_title_text_title">微功能服务</div>
        <div class="server_title_text_content">
          微功能子系统专注于提供强大的空间计算与数据处理能力，是支撑青浦区三维数字底板空间分析与数据流转的核心模块，聚焦
          “精准计算 + 灵活处理”
          两大核心能力，所有功能均以标准化服务接口形式对外提供（支持第三方委办、上层应用系统调用），同时在系统内部集成可视化操作界面，实现
          “计算 - 分析 - 展示” 闭环。
        </div>
        <div class="server_title_text_btu" v-if="$getUserType() == 3"> -->
          <!-- 先打开弹窗，然后上传文件保存信息到DMS的任务表，同时发送任务到微功能子系统，微功能子系统处理完成后，更新任务状态 -->
          <!-- <el-button type="primary" round plain size="large" @click="createTask"
            >大批量数据处理任务<el-icon><Position /></el-icon
          ></el-button>
        </div>
      </div>
    </div> -->

    <!-- 顶部横幅区域 -->
    <div class="banner">
      <div class="banner-content">
        <h1 class="banner-title">微功能服务</h1>
        <p class="banner-description">
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;微功能子系统专注于提供强大的空间计算与数据处理能力，是支撑青浦区三维数字底板空间分析与数据流转的核心模块，聚焦“精准计算 + 灵活处理”两大核心能力，所有功能均以标准化服务接口形式对外提供（支持第三方委办、上层应用系统调用），同时在系统内部集成可视化操作界面，实现“计算 - 分析 - 展示” 闭环。
        </p>
        <div v-if="$getUserType() == 3">
           <el-button type="primary" round plain size="large" @click="createTask"
            >大批量数据处理任务<el-icon><Position /></el-icon
          ></el-button>
        </div>
      </div>
    </div>

    <div class="server_list_box">
      <div class="server_list_box_title">微功能列表</div>
      <el-affix :offset="80">
        <div class="server_list_box_search">
          <el-input
            v-model="searchStr"
            style="width: 525px; margin-left: 37px"
            placeholder="输入搜索关键词"
            class="input-with-select"
            clearable
            size="large"
            @change="searchServerList()"
          >
            <template #append>
              <el-button icon="Search" @click="searchServerList()" />
            </template>
          </el-input>
        </div>
      </el-affix>
      <div class="server_list_box_table" v-if="dmsServerList">
        <div
          v-for="item in dmsServerList"
          :key="item.c_scene_name"
          class="server_list_box_table_item"
          :id="item.c_scene_name + 'list'"
        >
          <div class="server_list_box_table_item_content">
            <div class="server_list_box_table_item_content_title">{{ item.title }}</div>
            <div class="server_list_box_table_item_content_text">{{ item.content }}</div>
            <div class="server_list_box_table_item_content_button_box">
              <div
                class="server_list_box_table_item_content_button_box_item"
                @click.stop="handleOnlineDemo(item)"
              >
                在线演示
              </div>
              <div
                class="server_list_box_table_item_content_button_box_item"
                @click.stop="handleApply(item)"
              >
                申请使用
              </div>
            </div>
          </div>
          <div class="server_list_box_table_item_image">
            <el-image
              style="width: 690px; height: 410px"
              :src="dmsDataProxy + item.c_picture"
              fit="cover"
            />
          </div>
        </div>
      </div>
      <!-- 申请使用微功能服务的表单弹窗 -->
      <el-dialog
        title="申请使用微功能服务"
        v-model="showFrom"
        width="60%"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :show-close="true"
      >
        <el-form :model="column.from" :rules="rules" ref="formRef" label-width="120px">
          <el-form-item label="应用名称" prop="c_application_name">
            <el-input
              v-model="column.from.c_application_name"
              placeholder="请输入应用名称"
            />
          </el-form-item>
          <el-form-item label="接口路径" prop="c_interface_path">
            <el-input
              v-model="column.from.c_interface_path"
              disabled
              placeholder="请输入接口路径"
            />
          </el-form-item>
          <el-form-item label="联系电话" prop="c_phone">
            <el-input v-model="column.from.c_phone" placeholder="请输入联系电话" />
          </el-form-item>
          <el-form-item label="单位名称" prop="c_unit_name">
            <el-input v-model="column.from.c_unit_name" placeholder="请输入单位名称" />
          </el-form-item>
          <el-form-item label="部门名称" prop="c_department">
            <el-input v-model="column.from.c_department" placeholder="请输入部门名称" />
          </el-form-item>
          <!-- 项目负责人 -->
          <el-form-item label="项目负责人" prop="c_business_leader">
            <el-input
              v-model="column.from.c_business_leader"
              placeholder="请输入项目负责人"
            />
          </el-form-item>
          <!-- 申请使用微功能服务的详细信息 -->
          <el-form-item label="申请使用微功能服务的详细信息" prop="content">
            <el-input
              type="textarea"
              v-model="column.from.content"
              placeholder="请输入申请使用微功能服务的详细信息"
            />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="showFrom = false">取消</el-button>
            <el-button type="primary" @click="handleApplySubmit">确定</el-button>
          </div>
        </template>
      </el-dialog>
      <!-- 创建任务的表单弹窗 -->
      <el-dialog
        title="创建任务"
        v-model="showTaskFrom"
        width="60%"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :show-close="true"
      >
        <el-form
          :model="taskColumn.from"
          :rules="taskColumn.rules"
          ref="taskFormRef"
          label-width="120px"
        >
          <el-form-item label="任务名称" prop="c_name">
            <el-input
              v-model="taskColumn.from.c_name"
              placeholder="请输入任务名称"
              clearable
            >
              <template #prepend>{{
                $moment(new Date()).format("YYMMDD_HHmm") +
                "_" +
                (taskColumn.from.c_type
                  ? $getDmsTypes("yzt_task_type", taskColumn.from.c_type) + "_"
                  : "")
              }}</template>
            </el-input>
          </el-form-item>
          <el-form-item label="任务备注" prop="c_comment">
            <el-input
              type="textarea"
              clearable
              v-model="taskColumn.from.c_comment"
              placeholder="请输入任务备注"
            />
          </el-form-item>
          <!-- 下拉框选择任务类型 -->
          <el-form-item label="任务类型" prop="c_type">
            <el-select
              v-model="taskColumn.from.c_type"
              @change="changeTaskType"
              placeholder="请选择任务类型"
            >
              <el-option
                v-for="(name, index) in $store.state.DmsTypesMap['yzt_task_type']"
                :key="index"
                :label="name"
                :value="index"
              />
            </el-select>
          </el-form-item>
          <!-- 渲染任务描述:仅查看 -->
          <el-form-item
            label="任务描述"
            prop="apiDescription"
            v-if="taskColumn.apiFrom.apiDescription"
          >
            <el-input
              type="textarea"
              disabled
              v-model="taskColumn.apiFrom.apiDescription"
            />
          </el-form-item>
          <!-- 任务文件是必须的 -->
          <el-form-item label="任务文件" prop="c_source_file">
            <el-input disabled v-model="taskColumn.from.c_source_file" v-show="false" />
            <el-upload class="avatar-uploader" :http-request="handleTCUpload" :limit="1">
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </el-form-item>
          <el-divider />
          <!-- 其他参数数据 -->
          <el-form-item label="其他参数数据" prop="c_source_data" v-show="false">
            <el-input
              type="textarea"
              clearable
              v-model="taskColumn.from.c_source_data"
              placeholder="请输入其他参数数据"
            />
          </el-form-item>
          <div
            v-if="
              taskColumn.apiFrom.apiParameterRules &&
              includesKey(['lonKey', 'latKey', 'outFileType', 'inPrj', 'outPrj'])
            "
          >
            <template
              v-for="(rulesItem, index) in taskColumn.apiFrom.apiParameterRules"
              :key="index"
            >
              <el-form-item
                v-if="
                  ['lonKey', 'latKey', 'outFileType', 'inPrj', 'outPrj'].includes(
                    rulesItem
                  )
                "
                :label="rulesItem"
              >
                <el-input
                  v-if="['lonKey', 'latKey'].includes(rulesItem)"
                  v-model="taskColumn.from.c_source_data[rulesItem]"
                  placeholder="当文件为xlsx时必填"
                />
                <el-select
                  v-if="['outFileType', 'inPrj', 'outPrj'].includes(rulesItem)"
                  v-model="taskColumn.from.c_source_data[rulesItem]"
                  :placeholder="'请选择' + rulesItem"
                >
                  <el-option
                    v-for="item in taskColumn.selectOptions[rulesItem]"
                    :key="'wgn-task-selectOptions-form-' + item.label"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </template>
          </div>
          <!-- 任务状态默认为初始化 -->
          <el-form-item label="任务状态" prop="c_state" v-show="false">
            <el-select
              disabled
              v-model="taskColumn.from.c_state"
              placeholder="请选择任务状态"
            >
              <el-option
                v-for="(name, index) in $store.state.DmsTypesMap['task_status']"
                :key="'wgn-task-form-' + index"
                :label="name"
                :value="index"
              />
            </el-select>
          </el-form-item>
          <!-- 任务负责人默认为当前登录用户 -->
          <el-form-item label="用户id" prop="c_user_id" v-show="false">
            <el-input disabled v-model="taskColumn.from.c_user_id" />
          </el-form-item>
          <!-- 任务负责人默认为当前登录用户 -->
          <el-form-item label="用户名" prop="c_user_name" v-show="false">
            <el-input disabled v-model="taskColumn.from.c_user_name" />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="showTaskFrom = false">取消</el-button>
            <el-button type="primary" @click="handleTaskSubmit">确定</el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { ElNotification } from "element-plus";
import api from "@/api/content";
export default {
  name: "微功能服务",
  data() {
    return {
      // 搜索关键词
      searchStr: "",
      // 微功能服务列表
      dmsServerList: [],
      // DMS数据代理地址
      dmsDataProxy: "",
      // 是否显示申请使用微功能服务的表单弹窗
      showFrom: false,
      // 是否显示创建任务的表单弹窗
      showTaskFrom: false,
      // 申请使用微功能服务的表单验证规则
      rules: {
        c_application_name: [
          { required: true, message: "请输入应用名称", trigger: "blur" },
        ],
        c_interface_path: [
          { required: true, message: "请输入接口路径", trigger: "blur" },
        ],
        c_business_leader: [
          { required: true, message: "请输入项目负责人", trigger: "blur" },
        ],
        // 添加手机号正则验证
        c_phone: [
          { required: true, message: "请输入联系电话", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              // 手机号正则验证
              let phoneRegex = /^1[3456789]\d{9}$/;
              if (!phoneRegex.test(value)) {
                callback(new Error("请输入正确的手机号"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        c_unit_name: [{ required: true, message: "请输入单位名称", trigger: "blur" }],
        c_department: [{ required: true, message: "请输入部门名称", trigger: "blur" }],
      },
      // 申请使用微功能服务的表单数据
      column: {
        columnId: systemConfig.columnIds[4],
        modelId: systemConfig.modelIds[2],
        from: {
          // 备注：申请使用微功能服务的详细信息，非必填
          content: "",
          // 项目负责人，必填
          c_business_leader: "",
          // 应用名称,必填
          c_application_name: "",
          // 接口路径，必填
          c_interface_path: "",
          // 联系电话，必填
          c_phone: "",
          // 单位名称，必填
          c_unit_name: "",
          // 部门名称，必填
          c_department: "",
        },
      },
      // 创建任务的表单数据
      taskColumn: {
        columnId: systemConfig.columnIds[6],
        modelId: systemConfig.modelIds[3],
        rules: {
          c_name: [{ required: true, message: "请输入任务名称", trigger: "blur" }],
          c_comment: [{ required: true, message: "请输入任务备注", trigger: "blur" }],
          c_type: [{ required: true, message: "请选择任务类型", trigger: "change" }],
          c_source_file: [
            { required: true, message: "请上传任务文件", trigger: "change" },
          ],
        },
        from: {
          title: "",
          content: "",
          // 任务名称，必填（默认应该是：日期-任务类型-用户自定义名称）,这里保存的就是用户自定义名称，提交的时候会自动补充日期-任务类型-
          c_name: "",
          // 备注：任务的详细信息，必填
          c_comment: "",
          // 任务类型，必填
          c_type: "",
          // 任务创建人用户名，必填
          c_user_name: "",
          // 任务创建人，必填
          c_user_id: "",
          // 任务文件，必填
          c_source_file: "",
          // 任务文件名,上传文件时自动带入
          c_source_file_name: "",
          // 其他参数数据
          c_source_data: {},
          // 申请状态，默认初始化【0:初始化；1:运行中；2:成功完成；3:异常中断】
          c_state: "0",
        },
        // 切换任务类型时，渲染的接口详情
        apiFrom: {
          // 任务描述，仅查看
          apiDescription: "",
          // 接口参数，仅查看
          apiParameterRules: [],
          // 接口路径
          apiUrl: "",
        },
        // 其他参数
        selectOptions: {
          // 单位
          unit: [
            {
              value: "METER",
              label: "米",
            },
            {
              value: "KILOMETER",
              label: "千米",
            },
          ],
          inPrj: [
            {
              value: "WGS84",
              label: "WGS84",
            },
            {
              value: "SH2000",
              label: "SH2000",
            },
            {
              value: "UTM",
              label: "UTM",
            },
            {
              value: "WEB_Mercator",
              label: "WEB_Mercator",
            },
          ],
          outPrj: [
            {
              value: "WGS84",
              label: "WGS84",
            },
            {
              value: "SH2000",
              label: "SH2000",
            },
            {
              value: "UTM",
              label: "UTM",
            },
            {
              value: "WEB_Mercator",
              label: "WEB_Mercator",
            },
          ],
          outFileType: [
            {
              value: "geoJson",
              label: "geoJson",
            },
            {
              value: "shp",
              label: "shp",
            },
            {
              value: "csv",
              label: "csv",
            },
            {
              value: "xlsx",
              label: "xlsx",
            },
          ],
        },
      },
      // 搜索微功能服务的防抖定时器
      searchTimeout: null,
    };
  },
  mounted() {
    this.dmsDataProxy = systemConfig.dmsDataProxy;
    // 任务负责人默认为当前登录用户
    this.taskColumn.from.c_user_id = this.$store.state.userInfo.id;
    // 任务创建人用户名默认为当前登录用户用户名
    this.taskColumn.from.c_user_name = this.$store.state.userInfo.username;
    this.searchServerList();
  },
  methods: {
    includesKey(keys) {
      let hasKey = false;
      keys.forEach((key) => {
        if (this.taskColumn.apiFrom.apiParameterRules.includes(key)) {
          hasKey = true;
        }
      });
      return hasKey;
    },
    handleTCUpload(emit) {
      // 上传任务文件
      let formData = new FormData();
      formData.append("file", emit.file);
      formData.append("columnId", this.taskColumn.columnId);
      formData.append("type", 0);
      formData.append("paraName", emit.file.name);
      api
        .uploadFile(formData)
        .then((res) => {
          if (res.code === 200) {
            this.taskColumn.from.c_source_file_name = emit.file.name;
            this.taskColumn.from.c_source_file = res.content;
            ElNotification.success({
              title: "成功",
              message: "上传任务文件成功",
              offset: 80,
            });
          } else {
            ElNotification.error({
              title: "失败",
              message: "上传任务文件失败" + res.msg,
              offset: 80,
            });
          }
        })
        .catch((e) => {
          ElNotification.error({
            title: "失败",
            message: "上传任务文件失败" + e,
            offset: 80,
          });
        });
    },
    changeTaskType() {
      if (this.taskColumn.from.c_type) {
        // 先把任务类型每个字符中间都添加一个句号
        let serviceId = this.taskColumn.from.c_type.split("").join(".");
        // 根据任务类型获取任务参数
        api
          .getSimpleContentList({
            columnId: systemConfig.columnIds[5],
            states: 0,
            pageSize: 1,
            page: 0,
            search: JSON.stringify([
              {
                field: "c_scene_name",
                searchType: 1,
                content: { value: serviceId },
              },
            ]),
          })
          .then((res) => {
            if (res.code === 200) {
              let apiInfo = res.content.data[0];
              // 接口描述
              this.taskColumn.apiFrom.apiDescription = apiInfo.content;
              // 接口参数规则
              this.taskColumn.apiFrom.apiParameterRules = JSON.parse(
                apiInfo.c_input_parameter_rules
              );
              // 接口路径
              this.taskColumn.apiFrom.apiUrl = apiInfo.c_url;
            } else {
              this.taskColumn.apiFrom.apiDescription = "";
              this.taskColumn.apiFrom.apiParameterRules = [];
              this.taskColumn.apiFrom.apiUrl = "";
              ElNotification.error({
                title: "失败",
                message: "获取任务参数失败" + res.msg,
                offset: 80,
              });
            }
          })
          .catch((e) => {
            this.taskColumn.apiFrom.apiDescription = "";
            this.taskColumn.apiFrom.apiParameterRules = "";
            ElNotification.error({
              title: "失败",
              message: "获取任务参数失败" + e,
              offset: 80,
            });
          });
        this.taskColumn.from.c_source_data = {};
      }
    },
    // 搜索微功能服务
    searchServerList() {
      // 添加防抖功能，避免频繁搜索导致性能问题
      if (this.searchTimeout != null) {
        clearTimeout(this.searchTimeout);
      }
      this.searchTimeout = setTimeout(() => {
        let requestParams = {
          columnId: systemConfig.columnIds[5],
          states: 0,
          pageSize: 999,
          page: 0,
        };
        if (this.searchStr) {
          requestParams.search = JSON.stringify([
            {
              field: "title",
              searchType: 2,
              content: { value: "%" + this.searchStr + "%" },
            },
          ]);
        }
        // 获取微功能服务列表
        api
          .getSimpleContentList(requestParams)
          .then((res) => {
            if (res.code === 200) {
              this.dmsServerList = res.content.data;
              ElNotification.success({
                title: "成功",
                message: "搜索到" + this.dmsServerList.length + "条微功能服务",
                offset: 80,
              });
            } else {
              ElNotification.error({
                title: "失败",
                message: "搜索到0条微功能服务",
                offset: 80,
              });
            }
          })
          .catch((e) => {
            ElNotification.error({
              title: "失败",
              message: "搜索微功能服务失败" + e,
              offset: 80,
            });
          });
      }, 0);
    },
    // 申请使用微功能服务
    handleApply(item) {
      // 申请使用微功能服务时，先从localStorage中获取数据，填充到表单中
      let applyInfo = localStorage.getItem("wgnApplyInfo");
      if (applyInfo) {
        this.column.from = JSON.parse(applyInfo);
      }
      // 先打开弹窗，显示from表单，用户输入表单数据并提交
      this.column.from.c_interface_path = item.c_url;
      this.showFrom = true;
    },
    // 创建任务
    createTask() {
      // 打开弹窗，显示任务创建表单
      this.showTaskFrom = true;
    },
    // 提交任务创建表单
    handleTaskSubmit() {
      let that = this;
      // 表单验证
      this.$refs.taskFormRef.validate((valid) => {
        if (valid) {
          let content = this.taskColumn.from;
          content.title =
            this.$moment(new Date()).format("YYMMDD_HHmm") +
            "_" +
            (this.taskColumn.from.c_type
              ? this.$getDmsTypes("yzt_task_type", this.taskColumn.from.c_type) + "_"
              : "") +
            content.c_name;
          content.content = this.taskColumn.apiFrom.apiDescription
            ? this.taskColumn.apiFrom.apiDescription
            : "";
          content.c_name = content.title;
          // 提交任务创建表单
          let params = {
            content: JSON.stringify(content),
            columnId: this.taskColumn.columnId,
            modelId: this.taskColumn.modelId,
          };
          api.addContent(params).then((res) => {
            if (res.code === 200) {
              that.$message({
                message: "任务创建成功",
                type: "success",
              });
              that.showTaskFrom = false;
            } else {
              that.$message({
                message: "任务创建失败" + res.msg,
                type: "error",
              });
            }
          });
        } else {
          // 表单验证失败，提示用户填写完整信息
          that.$message({
            message: "请填写完整信息",
            type: "warning",
          });
        }
      });
    },
    // 提交申请使用微功能服务表单
    handleApplySubmit() {
      let that = this;
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          // 提交时把信息添加到localStorage中,下次打开弹窗时，从localStorage中获取数据，填充到表单中
          localStorage.setItem("wgnApplyInfo", JSON.stringify(that.column.from));
          // 标题：电话+时间
          that.column.from.title =
            that.column.from.c_unit_name +
            "_" +
            that.column.from.c_business_leader +
            "_" +
            that.column.from.c_phone;
          // 备注：申请使用微功能服务的详细信息
          let params = {
            content: JSON.stringify(that.column.from),
            columnId: that.column.columnId,
            modelId: that.column.modelId,
          };
          api.addContent(params).then((res) => {
            if (res.code === 200) {
              // 确认申请使用
              that.$message({
                message: "申请成功，请等待审核通过后工作人员专人联系，请保持电话通畅！",
                type: "success",
              });
              that.showFrom = false;
            } else {
              that.$message({
                message: "申请使用" + item.title + "失败" + res.msg,
                type: "error",
              });
            }
          });
        } else {
          // 表单验证失败，提示用户填写完整信息
          that.$message({
            message: "请填写完整信息",
            type: "warning",
          });
        }
      });
    },
    // 在线演示微功能服务
    handleOnlineDemo(item) {
      let routerPath = {};
      // 1. 解析目标路由（支持传参、命名路由等）
      if (item.c_scene_name == "view") {
        routerPath = {
          path: item.c_url,
        };
        this.$router.push(routerPath);
      } else {
        routerPath = {
          path: "/wgnSingle", // 微功能
          query: { sceneId: item.c_scene_name },
        };
        const routeData = this.$router.resolve(routerPath);
        // 2. 打开新窗口（_blank 表示新窗口）
        window.open(routeData.href, "_blank");
      }
    },
  },
};
</script>

<style lang="less" scoped>
.wgn_box {
  width: 100vw;
  margin: 0 auto;
  background-color: #08224a;
}
.server_title {
  display: flex;
  justify-content: center;
  align-items: center;
}
.server_title_text {
  width: calc(77vw - 200px);
  height: calc(100vh - 120px);
  background-color: #1c2631;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: 0 100px;
  &_title {
    font-size: 64px;
    font-weight: bold;
    letter-spacing: 0.5rem;
  }
  &_content {
    margin-top: 77px;
    font-size: 22px;
  }
  &_btu {
    margin-top: 77px;
    font-size: 22px;
    letter-spacing: 0.2rem;
    color: #4095e5;
  }
}
.anchor_box {
  background: #ffffff32;
  float: left;
}
.server_list_box {
  width: 100vw;
  background-color: #00002e;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
  position: relative;
  &_menu {
    position: absolute;
    top: 100px;
    left: 10px;
    z-index: 1;
  }
  &_title {
    margin: 100px 0;
    font-size: 35px;
    font-weight: bold;
    position: relative;
    &::after {
      content: "";
      position: absolute;
      bottom: -12px;
      left: 50%;
      transform: translateX(-50%);
      width: 100px;
      height: 4px;
      background-image: linear-gradient(to right, #1d88f0, #00bfff);
    }
  }
  &_search {
    // margin-top: 100px;
    font-size: 25px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    width: -webkit-fill-available;
    justify-content: center;
    .input-with-select {
      background: #08224a;
    }
  }
  &_table {
    margin-top: 50px;
    width: 100vw;
    &_item {
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      padding: 100px 0;

      &:nth-child(odd) {
        flex-direction: row;
      }
      &:nth-child(even) {
        flex-direction: row-reverse;
      }
      &_content {
        width: 760px;
        height: 100px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        &_title {
          font-size: 35px;
          font-weight: bold;
          color: #fff;
        }
        &_text {
          margin-top: 35px;
          font-size: 18px;
        }
        &_button_box {
          display: flex;
          justify-content: space-evenly;
          width: 100%;
          &_item {
            margin-top: 35px;
            font-size: 20px;
            letter-spacing: 0.2rem;
            color: #4095e5;
            border: 1px solid #4095e5;
            border-radius: 10px;
            padding: 10px 36px;
            cursor: pointer;
            &:hover {
              background-color: #4095e5;
              color: #fff;
            }
          }
        }
      }
      &_image {
        width: 690px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 30px;
        overflow: hidden;
      }
    }
  }
}
/* 顶部横幅样式 */
.banner {
  width: 100%;
  // height: calc(100vh - 120px);
  height: 552px;
  background: url('@static/images/wgn/bg.png');
  background-size: cover;
  display: flex;
  justify-content: right;
  align-items: center;
  position: relative;
  overflow: hidden;

  .banner-content {
    position: relative;
    z-index: 2;
    text-align: right;
    max-width: 500px;
    padding: 0 10%;
    justify-content: right;
    display: grid;
  }

  .banner-title {
    font-size: 56px;
    font-weight: bold;
    letter-spacing: 0.5rem;
    // margin-bottom: 20px;
    color: #ffffff;
    text-align: right;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  }

  .banner-description {
    font-size: 16px;
    line-height: 1.8;
    margin: 40px 0px;
    text-align: left;
    color: rgba(255, 255, 255, 0.9);
  }

  .enter-button {
    padding: 12px 36px;
    font-size: 18px;
    border-radius: 10px;
    background-color: #1890ff;
    border: none;
    transition: all 0.3s ease;

    &:hover {
      background-color: #40a9ff;
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(24, 144, 255, 0.4);
    }
  }
}
</style>