<!-- 角色管理 -->
<template>
  <div class="page_container">
    <bg-breadcrumb></bg-breadcrumb>
    <div class="main_container">
      <div class="form_content apaas_scroll_nor">
        <el-form ref="refForm" :model="formData" :rules="rules" label-width="82px" class="registerForm">
          <el-form-item label="LOGO" prop="logo">
            <bg-upload-image
              v-model="formData.logo"
              :fileSize="1"
              :showTips="true"
              customTips="请选择图片上传：支持jpg、png等格式，图片需小于500KBB"
              :limit="1"
              listType="picture-card"
              :accept="['.jpg', '.jpeg', '.png']"></bg-upload-image>
          </el-form-item>
          <el-form-item label="登录背景图" prop="banner">
            <bg-upload-image
              v-model="formData.banner"
              :fileSize="1"
              :showTips="true"
              customTips="请选择图片上传：大小1920 * 1026像素支持jpg、png等格式，图片需小于1MB"
              :limit="1"
              listType="picture-card"
              :accept="['.jpg', '.jpeg', '.png']"></bg-upload-image>
          </el-form-item>
          <bg-form-gap title="底部所有权内容"></bg-form-gap>
          <el-form-item label="内容" prop="force">
            <el-input placeholder="例如：Copyright © 某某大数据, All Rights Reserved." maxlength="100"></el-input>
          </el-form-item>

          <bg-form-gap title="底部ICP备案"></bg-form-gap>
          <el-form-item label="内容" prop="force">
            <el-input placeholder="请输入" maxlength="100"></el-input>
          </el-form-item>
          <el-form-item label="跳转连接" prop="force">
            <el-input placeholder="例如：https://...或http://..." maxlength="100"></el-input>
          </el-form-item>
          <bg-form-gap title="底部公安网备案"></bg-form-gap>
          <el-form-item label="内容" prop="force">
            <el-input placeholder="请输入" maxlength="100"></el-input>
          </el-form-item>
          <el-form-item label="跳转连接" prop="force">
            <el-input placeholder="例如：https://...或http://..." maxlength="100"></el-input>
          </el-form-item>

          <bg-form-gap title="法律声明"></bg-form-gap>
          <el-form-item label="跳转连接" prop="force">
            <el-input placeholder="例如：https://...或http://..." maxlength="100"></el-input>
          </el-form-item>

          <bg-form-gap title="隐私政策"></bg-form-gap>
          <el-form-item label="跳转连接" prop="force">
            <el-input placeholder="例如：https://...或http://..." maxlength="100"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="operate_btns">
        <el-button type="primary" @click="save"> 保存 </el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Search } from "@element-plus/icons-vue";
import { reactive, toRefs, ref, onBeforeMount, nextTick } from "vue";
import axios from "../../../../request/http.js";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import bgBreadcrumb from "@/components/bg-breadcrumb.vue";

//表单数据
const formData = reactive({
  logo: "",
});
//表单校验规则
const rules = reactive({});
</script>

<style lang="scss" scoped>
.page_container {
  .main_container {
    position: relative;
    margin: 0 0 16px;
    width: 100%;
    height: calc(100% - 62px);
    padding: 32px 0 70px;
    overflow: auto;
    background-color: #fff;
    box-shadow: 0px 1px 4px 0px rgba(0, 7, 101, 0.15);
    border-radius: 6px;
    .form_content {
      overflow: auto;
      height: 100%;
      padding-left: 24px;
      .el-form {
        width: 60%;
        :deep() .el-form-item {
          &:nth-of-type(1) {
            .el-upload--picture-card {
              width: 120px;
              height: 120px;
            }
          }
          &:nth-of-type(2) {
            .el-upload--picture-card {
              width: 367px;
              height: 196px;
            }
          }
        }
      }
      :deep() .gap-title {
        font-size: 16px;
        color: #202531;
      }
    }
    .operate_btns {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 70px;
      text-align: right;
      line-height: 68px;
      border-top: solid 1px #e6e9ef;
      .el-button {
        width: 92px;
        margin-right: 16px;
      }
    }
  }
}
</style>
