You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1055 lines
28 KiB
1055 lines
28 KiB
|
|
<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>
|