
<template>
  <div class="apikey">
    <div class="get-api-box">
      <div class="api-key-title">
        <div class="content">
          <div>
            <img src="../assets/storageImg/Frame 427318655.png" />
          </div>
          <div>{{ $t("API 密钥") }}</div>
          <div>
            <span>{{ $t("key1") }}</span>
            <span>{{ $t("key2") }}</span>
          </div>
          <div>{{ $t("key3") }}</div>
          <div>{{ $t("key4") }}</div>
          <div @click="getApiKey">
            {{ $t("API Key的使用方式") }}
          </div>
          <div @click="createBtn('create')">{{ $t("创建APIKey") }}</div>
        </div>
      </div>
      <div class="api-table-content" v-loading="tabloading">
        <div class="titan-table-box titan-table-box-center">
          <el-table
            border
            :data="tableData"
            :empty-text="$t('暂无数据')"
            style="width: 100%"
            :header-row-style="{
              color: '#000000',
              fontSize: '16px',
              fontWeight: '600',
            }"
          >
            <div
              slot="empty"
              class="empty-table-box"
              style="height: 513px"
              v-if="!tabloading"
            >
              <div>
                <img class="empty-img" src="../assets/storageImg/img1.png" />
                <div class="null">{{ $t("什么也没有") }}...</div>
              </div>
            </div>
            <el-table-column prop="name" :label="$t('名称')" align="center">
              <template slot-scope="scope">
                {{ scope.row.name }}
              </template>
            </el-table-column>
            <el-table-column prop="key" label="Key" align="center">
              <template slot-scope="scope">
                <span style="color: #9ca4ab">{{
                  ellipsisByLength(scope.row.key)
                }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="name" :label="$t('创建日期')" align="center">
              <template slot-scope="scope">
                {{ initTime(scope.row.time, "YYYY-MM-DD HH:mm:ss") }}
              </template>
            </el-table-column>
            <el-table-column prop="name" :label="$t('访问权限')" align="center">
              <template slot-scope="scope">
                <span
                  @click="viewpermissions(scope.row, 'edit')"
                  style="cursor: pointer; border-bottom: 1px solid #2f3133"
                  >{{ $t("查看权限") }}</span
                >
              </template>
            </el-table-column>
            <el-table-column
              prop="address"
              :label="$t('操作')"
              width="150"
              align="center"
            >
              <template slot-scope="scope">
                <img
                  class="imgColopointer"
                  @click="delateGetKey(scope.row)"
                  style="width: 20px; height: 18px"
                  src="../assets/storageImg/删除.png"
                />
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <my-modal :visible.sync="dialogVisible" width="525px">
      <div class="key-dialong">
        <div class="key-title">
          {{ modalType == "edit" ? $t("APIKEY信息") : $t("创建 APIKEY") }}
        </div>
        <div class="key-name">
          {{ $t("APIKEY名称") }}：<span v-if="modalType == 'edit'">{{
            namePassword
          }}</span>
        </div>
        <div class="key-name-value" v-if="modalType == 'create'">
          <input
            v-model="namePassword"
            :placeholder="$t('请输入50字以内的名称')"
          />
        </div>
        <div class="key-secret">
          <div class="api-sercret" @click="setRadioType(1)">
            <div v-if="radioType == 1" class="radio">
              <div></div>
            </div>
            <div v-else class="radio"></div>
            <div class="text">
              {{ $t("管理密钥") }}
              <span style="margin-left: 19px">{{
                $t("管理密钥可以拥有所有访问权限")
              }}</span>
            </div>
          </div>
          <div
            class="api-sercret"
            @click="setRadioType(2)"
            style="margin-top: 15px"
          >
            <div v-if="radioType == 2" class="radio">
              <div></div>
            </div>
            <div v-else class="radio"></div>
            <div class="text">{{ $t("普通密钥") }}</div>
          </div>
          <div v-if="radioType == 2" style="width: 380px">
            <div class="checkbox-box">
              <div
                v-for="(item, index) in checkList"
                :key="index"
                @click="toggleSelection(index)"
              >
                <div class="read-file">
                  <img
                    :src="
                      !item.selected
                        ? require('../assets/images/keypow2.png')
                        : require('../assets/images/kepow1.png')
                    "
                  />
                  <span :style="{ color: !item.selected ? '#C4CAC8' : '' }">{{
                    item.label
                  }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="key-click-color">
          <div></div>
          <div class="canl-query">
            <div @click="dialogVisible = false" style="display: none">
              {{ $t("取消") }}
            </div>
            <div class="hovercreate-money">
              <el-button
                :loading="loading1"
                @click="queryPassBtn"
                style="color: #a1ffa1; border: none"
                class="hover-Btn-color"
                >{{ $t("确认") }}</el-button
              >
              <div class="login-line"></div>
            </div>
          </div>
        </div>
      </div>
    </my-modal>

    <my-modal :visible.sync="confirm_dialogVisible" width="625px">
      <div class="public_box-new">
        <div class="title" style="margin-bottom: 14px">
          {{ modalType == "edit" ? $t("查看秘钥") : $t("创建新的秘钥") }}
        </div>
        <div class="Introduction">
          <div>
            <span>{{ $t("key5") }}</span>
          </div>
          <div style="color: #11c16d">{{ $t("key6") }}</div>
          <div>{{ $t("key7") }}</div>
        </div>
        <div class="input-key">
          <input v-model="newpassword" />
          <div>
            <img
              class="copy"
              :data-clipboard-text="newpassword"
              @click="handleOkPassword"
              src="../assets/storageImg/复制.png"
            />
          </div>
        </div>
      </div>
    </my-modal>
  </div>
</template>
<script>
import mapData from "@/components/map.vue";
import Clipboard from "clipboard";
import { mapState } from "vuex";
import { initTime } from "@/utils/config";
import MyModal from "@/components/myModal.vue";
export default {
  data() {
    return {
      initTime: initTime,
      modalType: "",
      dialogVisible: false,
      dialogpermissions: false,
      confirm_dialogVisible: false,
      RevisedialogVisible: false,
      RevisedialogVisible1: false,
      newpassword: "",
      namePassword: "",
      nameRevise: "",
      tableData: [],
      tabloading: false,
      keyChoose: false,
      readfil: true,
      radioType: 1,
      loading1: false,
      permissionsKeyNameValue: "",
      permissionskeyPow: "",
      checkList: [
        { label: this.$t("读取文件"), selected: false, key: "readFile" },
        { label: this.$t("文件上传"), selected: false, key: "createFile" },
        { label: this.$t("删除文件"), selected: false, key: "deleteFile" },
        { label: this.$t("访问文件夹"), selected: false, key: "readFolder" },
        { label: this.$t("创建文件夹"), selected: false, key: "createFolder" },
        { label: this.$t("删除文件夹"), selected: false, key: "deleteFolder" },
      ],
    };
  },
  components: {
    mapData,
    MyModal,
  },
  computed: {
    ...mapState(["emailAddress", "address"]),
  },
  mounted() {
    this.getKeysList();
  },
  watch: {
    dialogVisible(newValue, oldVal) {
      if (!newValue) {
        this.namePassword = "";
        this.radioType = 1;
        this.checkList = this.checkList.map((item) => {
          item.selected = false;
          return item;
        });
      }
    },
  },
  methods: {
    getApiKey() {
      window.open("https://github.com/Titannet-dao/titan-storage-sdk");
    },
    setRadioType(type) {
      if (this.modalType == "edit") return;
      this.radioType = type;
    },
    toggleSelection(index) {
      if (this.modalType == "edit") return;
      this.checkList[index].selected = !this.checkList[index].selected;
    },
    bnnerClick() {
      window.open("https://minefi.io/nftindex.html");
    },
    handleOkCid() {
      var clipboard = new Clipboard(".copy");
      clipboard.on("success", (e) => {
        this.$message.closeAll();
        this.$message.success(this.$t("复制成功"));
      });
    },
    viewpermissions(item, type) {
      //获取权限按钮
      this.modalType = type;
      this.dialogVisible = true;
      this.namePassword = item.name;
      this.newpassword = item.key;
      this.$http
        .get(
          "/api/v1/storage/get_key_perms?user_id=" +
            this.address +
            "&key_name=" +
            item.name
        )
        .then((res) => {
          const perms = res.perms;
          if (perms.length == 6) {
            this.radioType = 1;
          } else {
            this.radioType = 2;
            this.checkList = this.checkList.map((item) => {
              if (perms.includes(item.key)) {
                item.selected = true;
              }
              return item;
            });
          }
        });
    },
    ReviseNamebtn() {
      this.RevisedialogVisible = true;
    },
    queryreviseBtn() {},
    handleClose() {
      this.dialogVisible = false;
      this.namePassword = "";
    },
    handleClosere() {
      this.RevisedialogVisible = false;
      this.nameRevise = "";
    },
    getKeysList() {
      this.tabloading = true;
      this.$http
        .get("/api/v1/storage/get_keys?user_id=" + this.address)
        .then((res) => {
          this.tabloading = false;
          this.tableData = res.list || [];
        })
        .catch((err) => {
          this.tabloading = false;
        });
    },
    queryPassBtn() {
      console.log(
        this.checkList.filter((item) => {
          if (this.radioType == 1) return true;
          return item.selected;
        })
      );
      if (this.modalType == "edit") {
        this.dialogVisible = false;
        this.confirm_dialogVisible = true;
        return;
      }
      if (!this.namePassword) return this.$message.error(this.$t("请输入名称"));
      if (this.namePassword.length > 50) {
        this.$message.error(this.$t("请输入50字以内的名称"));
        return false;
      }
      const perms = this.checkList
        .filter((item) => {
          if (this.radioType == 1) return true;
          return item.selected;
        })
        .map((item) => item.key)
        .join(",");

      this.loading1 = true;
      this.$http
        .get(
          "/api/v1/storage/create_key?user_id=" +
            this.address +
            "&key_name=" +
            this.namePassword +
            "&perms=" +
            perms
        )
        .then((res) => {
          this.getKeysList();
          this.$message.success(this.$t("创建成功"));
          this.newpassword = res.key;
          this.dialogVisible = false;
          this.confirm_dialogVisible = true;
          this.namePassword = "";
          this.loading1 = false;
        })
        .catch((err) => {
          this.loading1 = false;
        });
    },

    delateGetKey(item) {
      //删除事件
      this.$confirm(this.$t("delate1"), {
        confirmButtonText: this.$t("确认"),
        cancelButtonText: this.$t("取消"),
        type: "warning",
        confirmButtonClass: "confirm-btnapi",
        cancelButtonClass: "cancel-btn",
      })
        .then(() => {
          this.$http
            .get(
              "/api/v1/storage/delete_key?user_id=" +
                this.address +
                "&key_name=" +
                item.name
            )
            .then((res) => {
              this.$message({
                type: "success",
                message: this.$t("删除成功"),
              });
              this.getKeysList();
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: this.$t("已取消删除"),
          });
        });
    },
    handleCloseConfirm() {
      this.confirm_dialogVisible = false;
    },
    createBtn(type) {
      this.modalType = type;
      this.dialogVisible = true;
    },
    handleOk() {},
    handleOkPassword() {
      var clipboard = new Clipboard(".copy");
      clipboard.on("success", (e) => {
        this.$message.closeAll();
        this.$message.success(this.$t("复制成功"));
      });
    },
  },
};
</script>
<style lang='less'>
.enlishBoxContent {
  .hoverBtn {
    width: 200px !important;
  }
}
.cancel-btn {
  color: #a1ffa1 !important;
  border: 1px solid #3a4a3b;
  background: none !important;
  &:hover {
    color: #a1ffa1 !important;
    border: 1px solid #3a4a3b;
  }
}
.confirm-btnapi {
  background: linear-gradient(
    180deg,
    #556d58 0%,
    #364b42 19%,
    #1e2b20 52%,
    #1f321f 76%,
    #354337 100%
  ) !important;
  border-color: #354337 !important;
  color: #a1ffa1 !important;
  &:hover {
    background: linear-gradient(
        180deg,
        #25775a 0%,
        #1a3f2f 26%,
        #0d3023 52%,
        #183629 76%,
        #154d35 100%
      )
      rgba(250, 251, 235, 0.1) !important;
    border-color: #67c23a;
  }
}
</style>
<style lang='less' scoped>
.enlishBoxContent {
  .api-key-title {
    .content {
      > div:nth-child(2) {
        margin-top: 15px !important;
      }
      > div:nth-child(3) {
        margin-top: 15px !important;
      }
      > div:nth-child(4),
      > div:nth-child(5) {
        margin-top: 15px !important;
      }
      > div:nth-child(6) {
        margin-top: 15px !important;
      }
      > div:nth-child(7) {
        margin-top: 15px !important;
      }
    }
  }
}
.public_box-new {
  .input-key {
    margin-top: 20px;
    display: flex;
    width: 561px;
    height: 46px;
    border-radius: 8px 8px 8px 8px;
    opacity: 1;
    border: 1px solid #415348;
    justify-content: space-between;
    > input {
      flex: 1;
      background: none;
      border: none;
      color: #fff;
    }
    > div {
      width: 60px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      > img {
        width: 20px;
        height: 20px;
      }
    }
  }

  .Introduction {
    color: #cae9ca;
  }
  .Introduction-input {
    display: flex;
    .left {
      width: 561px;
      height: 46px;
      border-radius: 8px 8px 8px 8px;
      opacity: 1;
      border: 1px solid #415348;
      > img {
        width: 20px;
        height: 20px;
      }
    }
  }
  .title {
    font-weight: bold;
    color: #cae9ca;
    font-size: 16px;
  }
}
/deep/ .apikbuttonHover.el-button--primary {
  width: 102px !important;
}
.dialogVisible-box {
  /deep/ .el-dialog__footer {
    padding: 0 39px 32px 40px !important;
  }
  /deep/ .el-dialog__body {
    padding: 28px 39px 45px 40px !important;
  }
  /deep/ .el-dialog {
    border-radius: 10px !important;
  }
}
.apikbuttonHover.el-button--default:hover {
  color: #bbbbbb !important;
}

.apikey .el-dialog {
  border-radius: 10px !important;
}
.el-button--primary:focus,
.el-button--primary:hover {
  background: #67c23a !important;
  color: #fff;
}
.apikey .el-dialog__header {
  padding: 0 !important;
}
.queryButtonColor {
  background: #67c23a !important;
  border: none !important;
}
.copyNewColor {
  background: #67c23a !important;
  border: 2px solid #67c23a !important;
}
.apikey .el-dialog__body {
  padding: 40px 40px 31px 40px !important;
}
.apikey .el-dialog__footer {
  padding: 0 40px 48px 40px;
}
.apikey .el-button--default > span {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
<style lang='less' scoped>
.el-button:focus,
.el-button:hover {
  color: none;
}
/deep/ .apikey .el-button--default :hover {
  color: #bbb !important;
}
.apikey-content .el-button--primary :hover {
  color: #fff !important;
}
.apikey {
  .key-dialong {
    .key-secret {
      margin-top: 19px;
      // display: flex;
      .checkbox-box {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* 创建三列，每列大小相同 */
        grid-gap: 12px; /* 可选：设置网格间距 */
        margin-top: 19px;
        .read-file {
          display: flex;
          align-items: center;
          color: #8db58d;
          font-size: 12px;
          line-height: 26px;
          font-weight: 500;
          width: 120px;
          cursor: pointer;
          > img {
            width: 18px;
            height: 18px;
            margin-right: 13px;
            cursor: pointer;
          }
        }
      }
      .api-sercret {
        display: flex;
        align-items: center;
        .text {
          font-weight: 400;
          color: #f3f3f3;
          font-size: 14px;
          margin-left: 10px;
        }
        .radio {
          width: 12px;
          height: 12px;
          border-radius: 0px 0px 0px 0px;
          opacity: 1;
          border: 1px solid #a1ffa1;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          > div {
            width: 6px;
            height: 6px;
            background: #a1ffa1;
            border-radius: 50%;
          }
        }
      }
    }
    .key-title {
      font-weight: bold;
      line-height: 24px;
      color: #cae9ca !important;
      margin-bottom: 10px;
    }
    .key-name {
      font-weight: 400;
      line-height: 24px;
      color: #cae9ca !important;
      font-size: 16px;
      margin-bottom: 21px;
    }
    .hovercreate-money {
      position: relative;
      /deep/ .el-button--default {
        background: linear-gradient(
          180deg,
          #556d58 0%,
          #364b42 19%,
          #1e2b20 52%,
          #1f321f 76%,
          #354337 100%
        ) !important;
        width: 180px !important;
        height: 40px !important;
        border: none !important;
        color: #a1ffa1 !important;
        font-size: 14px !important;
      }
      .login-line {
        position: absolute;
        width: 82px;
        height: 2px;
        background: #c7efc6;
        bottom: 0;
        left: 50%;
        margin-left: -41px;
        display: none;
      }
      &:hover {
        .hover-Btn-color {
          background: linear-gradient(
              180deg,
              #25775a 0%,
              #1a3f2f 26%,
              #0d3023 52%,
              #183629 76%,
              #154d35 100%
            )
            rgba(250, 251, 235, 0.1) !important;
        }
        .login-line {
          display: block;
        }
      }
    }
    .key-click-color {
      display: flex;
      justify-content: space-between;
      margin-top: 30px;
      .canl-query {
        display: flex;
        > div:nth-child(1) {
          width: 180px;
          height: 40px;
          border-radius: 8px 8px 8px 8px;
          opacity: 1;
          padding: 1px;
          margin-right: 23px;
          border: 1px solid #6c9d87;
          box-sizing: border-box;
          color: #a1ffa1;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
        }
        .hovercreate-money {
          color: #a1ffa1;
          width: 180px;
          height: 40px;
          border-radius: 8px 8px 8px 8px;
          padding: 1px;
          box-sizing: border-box;
          background: linear-gradient(
            180deg,
            rgba(108, 157, 135, 1),
            rgba(27, 39, 29, 1),
            rgba(58, 74, 59, 1)
          );
          .hover-Btn-color {
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 8px 8px 8px 8px;
            width: 100%;
            height: 100%;
            background: linear-gradient(
              180deg,
              #556d58 0%,
              #364b42 19%,
              #1e2b20 52%,
              #1f321f 76%,
              #354337 100%
            );
          }
        }
      }
    }
    > div:nth-child(1) {
      font-weight: bold;
      color: #cae9ca;
      font-size: 16px;
    }
    .key-name-value {
      margin-top: 20px;
      width: 461px;
      height: 46px;
      border-radius: 8px 8px 8px 8px;
      opacity: 1;
      border: 1px solid #415348;
      padding: 0 12px;
      box-sizing: border-box;
      > input {
        width: 100%;
        height: 100%;
        background: none;
        border: none;
        color: #cae9ca;
      }
    }
  }
  /deep/ .el-button--default {
    width: 102px !important;
    height: 58px !important;
    background: #ffffff !important;
    border: 2px solid #dddddd !important;
    border-radius: 8px !important;
    font-size: 18px !important;
    color: #bbb !important;
  }
  /deep/ .el-button--primary {
    width: 180px !important;
    height: 58px !important;
    background: #67c23a !important;
    border-radius: 10px !important;
    border: 2px solid #67c23a !important;
    margin-left: 31px;
    font-size: 18px !important;
  }
}

.public_box {
  .Introduction-input {
    display: flex;
    .copy-box-img {
      width: 20px;
      height: 20px;
    }
    > div:nth-child(2) {
      width: 42px;
      height: 42px;
      background: #7fa7ea;
      border: 2px solid #7fa7ea;
      border-radius: 5px;
      margin-left: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      > img {
        width: 29px;
        height: 29px;
      }
    }
    .left {
      width: 472px;
      height: 42px;
      background: #f1f1f1;
      border: 2px solid #dddddd;
      border-radius: 5px;
      display: flex;

      > input {
        border: none;
        padding-left: 15px;
        background: #f1f1f1;
        height: 100%;
        width: 100%;
        box-sizing: border-box;
        outline: none;
      }
    }
  }
  .Introduction {
    color: #666666;
    font-size: 16px;
    margin-bottom: 31px;
    line-height: 24px;
  }
  .button {
    margin-bottom: 31px;
  }
  .input {
    height: 42px;
    background: #f1f1f1;
    border: 2px solid #67c23a;
    border-radius: 5px;
    overflow: hidden;
    box-sizing: border-box;
    width: 522px;
    > input {
      background: #f1f1f1;
      width: 100%;
      height: 100%;
      border: none !important;
      padding-left: 20px;
      box-sizing: border-box;
      outline: none;
    }
  }
  .title {
    color: #000000;
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 42px;
    font-weight: 600;
  }
  .name {
    color: #000000;
    font-size: 16px;
    margin-bottom: 11px;
  }
}
.apikey {
  .get-api-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 620px;
    .api-table-content {
      flex: 1;
      background: #ffffff;
      box-shadow: 0px 3px 8px -1px rgba(50, 50, 71, 0.05);
      border-radius: 10px 10px 10px 10px;
      opacity: 1;
      border: 1px solid #eaeaea;
      margin-left: 24px;
      height: 620px;
      box-sizing: border-box;
      overflow: hidden;
    }
    .api-key-title {
      width: 332px;
      height: 620px;
      background: #ffffff;
      box-shadow: 0px 3px 8px -1px rgba(50, 50, 71, 0.05);
      border-radius: 10px 10px 10px 10px;
      opacity: 1;
      border: 1px solid #ececec;
      display: flex;
      justify-content: center;
      padding: 26px 49px 20px;
      box-sizing: border-box;
      .content {
        text-align: center;
        > div:nth-child(1) {
          display: flex;
          align-items: center;
          justify-content: center;
          > img {
            width: 168px;
            height: 180px;
          }
        }
        > div:nth-child(2) {
          font-weight: bold;
          color: #18191a;
          margin-top: 15px;
        }
        > div:nth-child(3) {
          margin-top: 27px;
          font-size: 12px;
          color: #8d9094;
        }
        > div:nth-child(4),
        > div:nth-child(5) {
          margin-top: 27px;
          font-size: 12px;
          color: #8d9094;
        }
        > div:nth-child(6) {
          margin-top: 28px;
          width: 256px;
          background: #06c270 !important;
          border-radius: 6px 6px 6px 6px;
          font-weight: normal;
          color: #fff;
          font-size: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          height: 52px;
        }
        > div:nth-child(7) {
          bottom: 30px;
          margin-top: 15px;
          width: 256px;
          height: 52px;
          background: #090c0e;
          border-radius: 6px 6px 6px 6px;
          font-weight: normal;
          color: #fff;
          font-size: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
        }
      }
    }
  }
  .el-dialog__header {
    padding: 0 !important;
  }
  .line {
    margin-top: 40px;
    > div {
      height: 2px;
      background: #dddddd;
      border-radius: 1px;
    }
  }
  .block {
    margin-top: 20px;
    text-align: center;
  }
  .null {
    margin-bottom: 24px;
    cursor: pointer;
  }
  .apikey-content {
    border-radius: 10px;
    .hoverBtn :hover {
      background: #67c23a !important;
      width: 100%;
      height: 100%;
      color: #fff !important;
      border: none !important;
    }
    > div:nth-child(2) {
      display: flex;
      justify-content: space-between;
      > div:nth-child(1) {
        color: #666666;
        font-size: 14px;
        line-height: 21px;
        margin-left: 24px;
        margin-top: 19px;
      }
      .hoverBtn {
        width: 180px;
        height: 72px;
        border-radius: 10px;
        > button {
          width: 100%;
          height: 100%;
          background: #67c23a;
          font-size: 24px;
          color: #fff;
          font-weight: 600;
          border: 2px solid #67c23a;
          border-radius: 10px;
          cursor: pointer;
        }
      }
    }
    > div:nth-child(1) {
      font-size: 30px;
      color: #000001;
      font-weight: 500;
      margin-left: 24px;
    }
  }
}
</style>
