feat: 页面风格优化
This commit is contained in:
old burden
parent
edbebf0d5d
commit
21dfc72068
|
|
@ -5,10 +5,9 @@
|
|||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width,initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0" />
|
||||
<link
|
||||
rel="icon"
|
||||
href="/images/logo.png" />
|
||||
<title>asio</title>
|
||||
<link rel="icon" href="/images/favicon.svg" type="image/svg+xml" />
|
||||
<link rel="alternate icon" href="/images/default/logo.jpg" type="image/jpeg" />
|
||||
<title>智绘影视</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@import './var.less';
|
||||
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
|
|
@ -17,31 +19,38 @@ body {
|
|||
body {
|
||||
font-size: 14px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
color: #1f2329;
|
||||
color: var(--portal-text-strong);
|
||||
font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
background-color: var(--portal-bg-deep);
|
||||
}
|
||||
|
||||
body:not([arco-theme='dark']) {
|
||||
color: #1f2329;
|
||||
background-color: #f8fafc;
|
||||
}
|
||||
|
||||
// firefox 滚动条样式
|
||||
* {
|
||||
scrollbar-color: rgba(144, 147, 153, 0.5) #0f0f12;
|
||||
scrollbar-color: rgba(34, 211, 238, 0.35) var(--portal-bg-surface);
|
||||
}
|
||||
|
||||
/*滚动条整体样式*/
|
||||
::-webkit-scrollbar {
|
||||
background-color: #0f0f12;
|
||||
background-color: var(--portal-bg-surface);
|
||||
}
|
||||
|
||||
/*滚动条里面小方块*/
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: red;
|
||||
border: 3px solid #0f0f12;
|
||||
background: linear-gradient(180deg, rgba(34, 211, 238, 0.45), rgba(56, 189, 248, 0.25));
|
||||
border: 3px solid var(--portal-bg-surface);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
/*滚动条里面轨道*/
|
||||
::-webkit-scrollbar-track {
|
||||
background: #0f0f12;
|
||||
background: var(--portal-bg-surface);
|
||||
}
|
||||
|
||||
:focus {
|
||||
|
|
@ -195,11 +204,11 @@ fieldset {
|
|||
padding: 20px 10px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: #fd8000;
|
||||
color: rgb(var(--primary-6));
|
||||
}
|
||||
|
||||
.page-error {
|
||||
color: red;
|
||||
color: #fbbf24;
|
||||
font-size: 20px;
|
||||
padding: 30px;
|
||||
}
|
||||
|
|
@ -240,14 +249,15 @@ input:-webkit-autofill {
|
|||
width: 100vw !important;
|
||||
height: 100vh !important;
|
||||
z-index: 100 !important;
|
||||
background: #fff;
|
||||
background: var(--portal-bg-deep);
|
||||
padding: 12px !important;
|
||||
}
|
||||
|
||||
.arco-modal-simple {
|
||||
background: #0f0f12;
|
||||
background: var(--portal-bg-raised);
|
||||
border-radius: 10px;
|
||||
border: 2px solid #e6217a;
|
||||
border: 1px solid var(--portal-border-glow);
|
||||
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 24px 48px rgba(0, 0, 0, 0.45);
|
||||
.arco-modal-title {
|
||||
color: #fff;
|
||||
}
|
||||
|
|
@ -257,11 +267,13 @@ input:-webkit-autofill {
|
|||
|
||||
.arco-modal-footer {
|
||||
.arco-btn-secondary {
|
||||
color: #ffffff;
|
||||
background-color: #1a1a1a;
|
||||
border: 1px solid #1a1a1a;
|
||||
color: #fff;
|
||||
background-color: rgba(30, 41, 59, 0.35);
|
||||
border: 1px solid rgba(92, 107, 138, 0.45);
|
||||
&:hover {
|
||||
background-color: #262626;
|
||||
color: #fff;
|
||||
background-color: rgba(30, 41, 59, 0.55);
|
||||
border-color: #5c6b8a;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,99 @@
|
|||
/**
|
||||
* 全站按钮：暗色主题下文字统一为白色；线框/文本/虚线在亮色主题保留灰字以保证对比度
|
||||
* 不改动 danger 状态按钮
|
||||
*/
|
||||
@portal-btn-slate: #1e293b;
|
||||
@portal-btn-slate-hover: #334155;
|
||||
@portal-btn-slate-active: #0f172a;
|
||||
@portal-btn-gray: #5c6b8a;
|
||||
@portal-btn-gray-hover: #94a3b8;
|
||||
|
||||
.arco-btn-primary:not(.arco-btn-disabled):not(.arco-btn-status-danger) {
|
||||
background-color: @portal-btn-slate !important;
|
||||
border-color: @portal-btn-slate !important;
|
||||
color: #fff !important;
|
||||
|
||||
&:hover {
|
||||
background-color: @portal-btn-slate-hover !important;
|
||||
border-color: @portal-btn-slate-hover !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: @portal-btn-slate-active !important;
|
||||
border-color: @portal-btn-slate-active !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
|
||||
.arco-btn-secondary:not(.arco-btn-disabled):not(.arco-btn-status-danger) {
|
||||
background-color: rgba(30, 41, 59, 0.42) !important;
|
||||
border: 1px solid rgba(92, 107, 138, 0.45) !important;
|
||||
color: #fff !important;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(30, 41, 59, 0.62) !important;
|
||||
border-color: @portal-btn-gray !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
|
||||
.arco-btn-outline:not(.arco-btn-disabled):not(.arco-btn-status-danger) {
|
||||
background-color: transparent !important;
|
||||
border-color: rgba(92, 107, 138, 0.55) !important;
|
||||
color: #fff !important;
|
||||
|
||||
&:hover {
|
||||
border-color: @portal-btn-gray !important;
|
||||
color: #fff !important;
|
||||
background-color: rgba(92, 107, 138, 0.08) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.arco-btn-outline.arco-btn-primary:not(.arco-btn-disabled):not(.arco-btn-status-danger) {
|
||||
background-color: transparent !important;
|
||||
border-color: rgba(92, 107, 138, 0.55) !important;
|
||||
color: #fff !important;
|
||||
|
||||
&:hover {
|
||||
border-color: @portal-btn-gray !important;
|
||||
color: #fff !important;
|
||||
background-color: rgba(92, 107, 138, 0.1) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.arco-btn-text:not(.arco-btn-disabled):not(.arco-btn-status-danger) {
|
||||
color: #fff !important;
|
||||
background-color: transparent !important;
|
||||
|
||||
&:hover {
|
||||
color: #fff !important;
|
||||
background-color: rgba(148, 163, 184, 0.08) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.arco-btn-dashed:not(.arco-btn-disabled):not(.arco-btn-status-danger) {
|
||||
color: #fff !important;
|
||||
border-color: rgba(92, 107, 138, 0.5) !important;
|
||||
background-color: transparent !important;
|
||||
|
||||
&:hover {
|
||||
color: #fff !important;
|
||||
border-color: @portal-btn-gray !important;
|
||||
background-color: rgba(92, 107, 138, 0.06) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* 亮色主题：透明底按钮若仍用白字会看不清，恢复石板灰字 */
|
||||
body:not([arco-theme='dark']) {
|
||||
.arco-btn-outline:not(.arco-btn-disabled):not(.arco-btn-status-danger),
|
||||
.arco-btn-outline.arco-btn-primary:not(.arco-btn-disabled):not(.arco-btn-status-danger),
|
||||
.arco-btn-text:not(.arco-btn-disabled):not(.arco-btn-status-danger),
|
||||
.arco-btn-dashed:not(.arco-btn-disabled):not(.arco-btn-status-danger) {
|
||||
color: @portal-btn-gray !important;
|
||||
|
||||
&:hover {
|
||||
color: @portal-btn-gray-hover !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,10 +1,20 @@
|
|||
/* Portal 主题令牌：暗色科技风基底 + 青/Cyan 点缀 */
|
||||
body {
|
||||
// 背景色 - 浅
|
||||
--portal-bg-void: #06080d;
|
||||
--portal-bg-deep: #0a0e14;
|
||||
--portal-bg-surface: #0f141c;
|
||||
--portal-bg-raised: #141b26;
|
||||
--portal-border-subtle: rgba(148, 163, 184, 0.12);
|
||||
--portal-border-glow: rgba(34, 211, 238, 0.22);
|
||||
--portal-text-strong: rgba(248, 250, 252, 0.96);
|
||||
--portal-text-muted: rgba(148, 163, 184, 0.85);
|
||||
--portal-accent: #22d3ee;
|
||||
--portal-accent-soft: rgba(34, 211, 238, 0.14);
|
||||
// 背景色 - 浅（兼容旧变量）
|
||||
--mf-color-bg-3: #f8f8fa;
|
||||
--his-border-color: rgb(166, 124, 82, 0.3);
|
||||
}
|
||||
|
||||
body[arco-theme='dark'] {
|
||||
// 背景色 - 浅
|
||||
--mf-color-bg-3: #17171a;
|
||||
--mf-color-bg-3: #0f141c;
|
||||
}
|
||||
|
|
@ -43,7 +43,7 @@ export default {
|
|||
overflow: hidden;
|
||||
background: #0f0f12;
|
||||
border-radius: 20px;
|
||||
border: 2px solid #e6217a;
|
||||
border: 1px solid rgb(var(--primary-6));
|
||||
height: 520px;
|
||||
width: 864px;
|
||||
top: 45% !important;
|
||||
|
|
|
|||
|
|
@ -528,7 +528,7 @@ export default {
|
|||
rgba(230, 33, 122, 0.7) 49%
|
||||
);
|
||||
border-radius: 20px;
|
||||
border: 2px solid #e6217a;
|
||||
border: 1px solid rgb(var(--primary-6));
|
||||
width: 500px;
|
||||
// height: 320px;
|
||||
top: 45% !important;
|
||||
|
|
@ -629,7 +629,7 @@ export default {
|
|||
rgba(230, 33, 122, 0.7) 49%
|
||||
);
|
||||
border-radius: 20px;
|
||||
border: 2px solid #e6217a;
|
||||
border: 1px solid rgb(var(--primary-6));
|
||||
width: 600px;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
|
|
@ -701,7 +701,7 @@ export default {
|
|||
|
||||
:deep(.arco-select-dropdown) {
|
||||
background-color: rgba(39, 20, 51, 0.95);
|
||||
border: 1px solid #e6217a;
|
||||
border: 1px solid rgb(var(--primary-6));
|
||||
}
|
||||
|
||||
:deep(.arco-select-option) {
|
||||
|
|
|
|||
|
|
@ -126,7 +126,7 @@ export default {
|
|||
overflow: hidden;
|
||||
background: #0f0f12;
|
||||
border-radius: 20px;
|
||||
border: 2px solid #e6217a;
|
||||
border: 1px solid rgb(var(--primary-6));
|
||||
width: 500px;
|
||||
top: 45% !important;
|
||||
transform: translateY(-45%) !important;
|
||||
|
|
|
|||
|
|
@ -1971,13 +1971,13 @@ defineExpose({
|
|||
.vg-compose-left-upload:deep(.arco-btn) {
|
||||
background: rgba(0, 202, 224, 0.2);
|
||||
border-color: rgba(0, 202, 224, 0.35);
|
||||
color: #7eeaf2;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.vg-compose-left-upload:deep(.arco-btn:hover) {
|
||||
background: rgba(0, 202, 224, 0.28);
|
||||
border-color: rgba(0, 202, 224, 0.45);
|
||||
color: #a8f4f9;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.vg-asset-controls {
|
||||
|
|
@ -2292,11 +2292,11 @@ defineExpose({
|
|||
}
|
||||
|
||||
.vg-compose-clear:deep(.arco-btn) {
|
||||
color: rgba(255, 255, 255, 0.75);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.vg-compose-clear:deep(.arco-btn:hover) {
|
||||
color: #7eeaf2;
|
||||
color: #fff;
|
||||
background: rgba(0, 202, 224, 0.1);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -16,14 +16,13 @@
|
|||
}
|
||||
|
||||
&.arco-btn-text {
|
||||
// padding: 0 10px 0 0;
|
||||
&.arco-btn-status-default {
|
||||
color: var(--color-text-3);
|
||||
color: #fff;
|
||||
&:hover {
|
||||
color: rgb(var(--primary-5));
|
||||
color: #fff;
|
||||
}
|
||||
&:active {
|
||||
color: rgb(var(--primary-7));
|
||||
color: #fff;
|
||||
background-color: transparent;
|
||||
}
|
||||
&.arco-btn-disabled {
|
||||
|
|
@ -37,10 +36,14 @@
|
|||
}
|
||||
|
||||
&.arco-btn-primary {
|
||||
color: #FFF;
|
||||
background-color: #1e293b;
|
||||
border-color: #1e293b;
|
||||
color: #fff;
|
||||
&.arco-btn-loading,
|
||||
&:hover {
|
||||
color: #FFF;
|
||||
color: #fff;
|
||||
background-color: #334155;
|
||||
border-color: #334155;
|
||||
}
|
||||
|
||||
&.arco-btn-disabled {
|
||||
|
|
@ -48,3 +51,18 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 与 portal-buttons.less 一致：亮色主题下文本按钮用灰字 */
|
||||
body:not([arco-theme='dark']) {
|
||||
.mf-button.arco-btn-text.arco-btn-status-default:not(.arco-btn-disabled) {
|
||||
color: #5c6b8a;
|
||||
|
||||
&:hover {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: #94a3b8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -179,7 +179,7 @@ export default {
|
|||
if (inputType == 'password') {
|
||||
return (
|
||||
<a-input-password
|
||||
invisible-button={true}
|
||||
invisible-button={false}
|
||||
{...inputProps}
|
||||
v-slots={inputSlots}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -47,6 +47,9 @@ export default {
|
|||
logout: '退出登入',
|
||||
userEmailPlaceholder: '請輸入郵箱或帳號',
|
||||
passwordPlaceholder: '請輸入密碼',
|
||||
loginLabelAccount: '郵箱或帳號',
|
||||
loginLabelPassword: '密碼',
|
||||
loginSubtitle: '請輸入帳號與密碼以登入',
|
||||
forgetPassword: '忘記密碼？',
|
||||
register: '註冊',
|
||||
login: '登入',
|
||||
|
|
@ -150,7 +153,6 @@ export default {
|
|||
seedance20: 'Seedance 2.0',
|
||||
seedance20Fast: 'Seedance 2.0 Fast',
|
||||
// 富文本编辑器
|
||||
insertImage: '插入圖片',
|
||||
mentionImage: '引用圖片',
|
||||
noImageToMention: '暫無可引用的圖片',
|
||||
// VM支付相關
|
||||
|
|
|
|||
|
|
@ -197,7 +197,7 @@ export default {
|
|||
);
|
||||
background-color: transparent !important;
|
||||
border-radius: 20px;
|
||||
border: 2px solid #e6217a;
|
||||
border: 1px solid rgb(var(--primary-6));
|
||||
width: 500px;
|
||||
top: 45% !important;
|
||||
transform: translateY(-45%) !important;
|
||||
|
|
|
|||
|
|
@ -244,7 +244,7 @@ export default {
|
|||
);
|
||||
background-color: transparent !important;
|
||||
border-radius: 20px;
|
||||
border: 2px solid #e6217a;
|
||||
border: 1px solid rgb(var(--primary-6));
|
||||
width: 500px;
|
||||
top: 45% !important;
|
||||
transform: translateY(-45%) !important;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
<template>
|
||||
<div class="menu-wrapper">
|
||||
<div
|
||||
class="menu-wrapper"
|
||||
:class="{ 'menu-wrapper--collapsed': collapsed }">
|
||||
<a-scrollbar>
|
||||
<a-menu
|
||||
:collapsed="collapsed"
|
||||
|
|
@ -166,16 +168,39 @@ const getMenuSvg = (key) => {
|
|||
<style lang="less" scoped>
|
||||
.menu-wrapper {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
box-sizing: border-box;
|
||||
overflow-x: hidden;
|
||||
|
||||
.arco-scrollbar {
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
|
||||
:deep(.arco-scrollbar-container) {
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&--collapsed {
|
||||
overflow-x: hidden;
|
||||
|
||||
:deep(.arco-scrollbar) {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
:deep(.arco-scrollbar-container) {
|
||||
overflow-x: hidden !important;
|
||||
}
|
||||
|
||||
/* 避免出现横向滚动条轨道 */
|
||||
:deep(.arco-scrollbar-track-direction-horizontal) {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
|
|
@ -190,7 +215,7 @@ const getMenuSvg = (key) => {
|
|||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: rgba(255, 255, 255, 0.74);
|
||||
color: var(--portal-text-muted);
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
|
|
@ -202,6 +227,7 @@ const getMenuSvg = (key) => {
|
|||
}
|
||||
|
||||
.menu-svg-icon.active {
|
||||
color: #ffffff;
|
||||
color: #e2e8f0;
|
||||
filter: none;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -102,7 +102,7 @@ export default {
|
|||
&-save {
|
||||
width: 410px;
|
||||
height: 40px;
|
||||
background: #e6217a;
|
||||
background: rgb(var(--primary-6));
|
||||
border-radius: 10px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -272,7 +272,7 @@ export default {
|
|||
);
|
||||
background-color: transparent !important;
|
||||
border-radius: 20px;
|
||||
border: 2px solid #e6217a;
|
||||
border: 1px solid rgb(var(--primary-6));
|
||||
width: 500px;
|
||||
top: 45% !important;
|
||||
transform: translateY(-45%) !important;
|
||||
|
|
|
|||
|
|
@ -19,9 +19,19 @@
|
|||
<a-tabs
|
||||
v-model="current"
|
||||
lazy-load>
|
||||
<a-tab-pane
|
||||
key="account"
|
||||
:title="$t('common.myAccount')">
|
||||
<a-tab-pane key="account">
|
||||
<template #title>
|
||||
<span class="user-tab-title">
|
||||
<svg
|
||||
class="user-tab-icon"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true">
|
||||
<path
|
||||
d="M12 12a4 4 0 1 0-4-4a4 4 0 0 0 4 4Zm0 2c-3.33 0-6 1.34-6 3v1h12v-1c0-1.66-2.67-3-6-3Z" />
|
||||
</svg>
|
||||
{{ $t('common.myAccount') }}
|
||||
</span>
|
||||
</template>
|
||||
<UserAccount />
|
||||
</a-tab-pane>
|
||||
<!-- 隐藏有奖邀请 -->
|
||||
|
|
@ -32,9 +42,19 @@
|
|||
:title="$t('common.rechargeRecord')">
|
||||
<RechargeRecord />
|
||||
</a-tab-pane> -->
|
||||
<a-tab-pane
|
||||
key="resume"
|
||||
:title="$t('common.myProduct')">
|
||||
<a-tab-pane key="resume">
|
||||
<template #title>
|
||||
<span class="user-tab-title">
|
||||
<svg
|
||||
class="user-tab-icon"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true">
|
||||
<path
|
||||
d="M4 6.5A2.5 2.5 0 0 1 6.5 4H14l1.6 2H17.5A2.5 2.5 0 0 1 20 8.5v8a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 4 16.5v-10ZM6 8v8h12V9.5h-2.2L14 7H6.5A.5.5 0 0 0 6 7.5V8Zm3 2.5h6v1.5H9V10.5Zm0 3h4v1.5H9V13.5Z" />
|
||||
</svg>
|
||||
{{ $t('common.myProduct') }}
|
||||
</span>
|
||||
</template>
|
||||
<ResumeRecord />
|
||||
</a-tab-pane>
|
||||
<!-- 隐藏邀请消费记录 -->
|
||||
|
|
@ -159,11 +179,12 @@ export default {
|
|||
|
||||
<style lang="less">
|
||||
.user-dialog {
|
||||
overflow: hidden;
|
||||
/* 允许头像半圆伸出卡片，不被裁掉 */
|
||||
overflow: visible;
|
||||
background: #0f0f12;
|
||||
border-radius: 10px;
|
||||
border-radius: 20px;
|
||||
border: 2px solid #e6217a;
|
||||
border: 1px solid rgba(92, 107, 138, 0.46);
|
||||
width: 500px;
|
||||
min-height: 520px;
|
||||
top: 45% !important;
|
||||
|
|
@ -179,6 +200,7 @@ export default {
|
|||
|
||||
.arco-modal-body {
|
||||
padding: 24px 30px 30px 30px;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.user-close {
|
||||
|
|
@ -194,22 +216,42 @@ export default {
|
|||
}
|
||||
|
||||
.user-wrapper {
|
||||
.user-tab-title {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.user-tab-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
flex-shrink: 0;
|
||||
fill: currentColor;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.arco-tabs {
|
||||
&-tab {
|
||||
width: 130px;
|
||||
min-width: 120px;
|
||||
width: auto;
|
||||
padding: 0 14px;
|
||||
height: 40px;
|
||||
border-radius: 10px;
|
||||
font-size: 14px;
|
||||
color: #ffffff;
|
||||
color: #cbd5e1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background-color 0.2s ease, color 0.2s ease;
|
||||
&-active {
|
||||
background: #e6217a;
|
||||
background: #1e293b;
|
||||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #e6217a;
|
||||
background: rgba(30, 41, 59, 0.78);
|
||||
color: #e2e8f0;
|
||||
|
||||
.arco-tabs-tab-title {
|
||||
&:before {
|
||||
|
|
@ -247,9 +289,16 @@ export default {
|
|||
.user-wrapper {
|
||||
.arco-tabs {
|
||||
&-tab {
|
||||
width: 120px;
|
||||
min-width: 0;
|
||||
width: auto;
|
||||
padding: 0 10px;
|
||||
font-size: 12px;
|
||||
margin: 0 8px;
|
||||
margin: 0 6px;
|
||||
}
|
||||
|
||||
.user-tab-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
&-nav-button {
|
||||
color: #fff !important;
|
||||
|
|
|
|||
|
|
@ -284,7 +284,7 @@ export default {
|
|||
background: #0f0f12;
|
||||
border-radius: 10px;
|
||||
border-radius: 20px;
|
||||
border: 2px solid #e6217a;
|
||||
border: 1px solid rgba(92, 107, 138, 0.46);
|
||||
width: 500px;
|
||||
min-height: 400px;
|
||||
top: 45% !important;
|
||||
|
|
@ -403,11 +403,18 @@ export default {
|
|||
<style lang="less" scoped>
|
||||
.user-account {
|
||||
padding: 70px 24px 30px 24px;
|
||||
overflow: visible;
|
||||
|
||||
&-wrap {
|
||||
background: #1a1b20;
|
||||
border-radius: 10px;
|
||||
padding: 60px 60px 30px 60px;
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
:deep(.mf-image-upload-wrap) {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
:deep(.mf-image-upload) {
|
||||
|
|
@ -419,27 +426,68 @@ export default {
|
|||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
overflow: visible;
|
||||
box-sizing: border-box;
|
||||
/* 头像外圈：深色底上也能看清边界 */
|
||||
border: 2px solid rgba(148, 163, 184, 0.45);
|
||||
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
|
||||
background: rgba(15, 20, 28, 0.95);
|
||||
|
||||
.arco-upload-list-item {
|
||||
.arco-upload-list-picture {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.arco-upload-list-picture {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
margin: 0;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
border: 1px solid rgba(148, 163, 184, 0.2);
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.mf-image-upload-btn {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
margin: 0;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(30, 41, 59, 0.65);
|
||||
border: 1px dashed rgba(148, 163, 184, 0.35);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.mf-image-upload-btn .arco-image {
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.arco-upload-list-picture-mask {
|
||||
line-height: 60px;
|
||||
line-height: 56px;
|
||||
border-radius: 50%;
|
||||
.mf-icon {
|
||||
margin-right: 8px;
|
||||
}
|
||||
// display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
// .user-account-avatar-edit {
|
||||
// display: flex;
|
||||
// }
|
||||
border-color: rgba(203, 213, 225, 0.55);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -448,7 +496,7 @@ export default {
|
|||
position: absolute;
|
||||
right: -8px;
|
||||
bottom: -8px;
|
||||
color: rgba(var(--primary-6));
|
||||
color: #94a3b8;
|
||||
// display: none;
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
|
|
|
|||
|
|
@ -86,6 +86,13 @@ export default {
|
|||
height: 100%;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
background: var(--portal-bg-surface);
|
||||
background-image: radial-gradient(
|
||||
ellipse 80% 50% at 100% 0%,
|
||||
rgba(56, 189, 248, 0.05) 0%,
|
||||
transparent 45%
|
||||
),
|
||||
radial-gradient(ellipse 60% 40% at 0% 100%, rgba(34, 211, 238, 0.04) 0%, transparent 40%);
|
||||
&-wrap {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
|
|
|||
|
|
@ -52,12 +52,12 @@
|
|||
v-if="userInfo.username"
|
||||
@click="showUser">
|
||||
<span>
|
||||
<a-image
|
||||
class="wallet"
|
||||
:preview="false"
|
||||
:width="16"
|
||||
fit="cover"
|
||||
src="/images/nav/img_money@2x.png" />
|
||||
<span class="wallet-icon" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M3.8 7.2A2.2 2.2 0 0 1 6 5h11.7A2.3 2.3 0 0 1 20 7.3v1.1h.4a1.6 1.6 0 0 1 1.6 1.6v4a1.6 1.6 0 0 1-1.6 1.6H20v1.1a2.3 2.3 0 0 1-2.3 2.3H6a2.2 2.2 0 0 1-2.2-2.2V7.2Zm2.2-.7a.7.7 0 0 0-.7.7v.2h12.4a.8.8 0 1 0 0-1.6H6Zm12.5 3.4v4.2h2V9.9h-2Zm-.9 5.7V9.4H5.3v7.4c0 .4.3.7.7.7h11.7a.8.8 0 0 0 .8-.8v-1.1h-.9Zm.8-3.6a1.2 1.2 0 1 1 0-2.4a1.2 1.2 0 0 1 0 2.4Z" />
|
||||
</svg>
|
||||
</span>
|
||||
{{ userInfo.balance || '0.00' }}
|
||||
</span>
|
||||
<mf-avatar
|
||||
|
|
@ -70,7 +70,8 @@
|
|||
class="right-menu-item logout"
|
||||
v-if="userInfo.username">
|
||||
<mf-button
|
||||
type="text"
|
||||
class="navbar-logout-btn"
|
||||
type="outline"
|
||||
@click="logout">
|
||||
{{ $t('common.logout') }}
|
||||
</mf-button>
|
||||
|
|
@ -244,6 +245,33 @@ export default {
|
|||
box-sizing: content-box;
|
||||
padding-left: 20px;
|
||||
padding-right: 30px;
|
||||
position: relative;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(15, 20, 28, 0.97) 0%,
|
||||
rgba(10, 14, 20, 0.94) 100%
|
||||
);
|
||||
backdrop-filter: blur(14px);
|
||||
-webkit-backdrop-filter: blur(14px);
|
||||
border-bottom: 1px solid var(--portal-border-subtle);
|
||||
box-shadow: 0 1px 0 rgba(92, 107, 138, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.03);
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 1px;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent 0%,
|
||||
rgba(92, 107, 138, 0.35) 50%,
|
||||
transparent 100%
|
||||
);
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.left-menu {
|
||||
display: flex;
|
||||
|
|
@ -331,26 +359,55 @@ export default {
|
|||
&.language {
|
||||
.mf-button {
|
||||
font-size: 14px;
|
||||
color: #999999;
|
||||
color: #fff;
|
||||
background-color: transparent;
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.language-display[disabled] {
|
||||
color: #999999 !important;
|
||||
color: rgba(255, 255, 255, 0.55) !important;
|
||||
opacity: 0.85;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
&.logout {
|
||||
.mf-button {
|
||||
background-color: transparent;
|
||||
.navbar-logout-btn.mf-button {
|
||||
height: 32px;
|
||||
padding: 0 14px;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.02em;
|
||||
color: #f8fafc !important;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(30, 41, 59, 0.85) 0%,
|
||||
rgba(15, 23, 42, 0.92) 100%
|
||||
) !important;
|
||||
border: 1px solid rgba(34, 211, 238, 0.42) !important;
|
||||
box-shadow:
|
||||
0 0 0 1px rgba(0, 0, 0, 0.35),
|
||||
0 1px 10px rgba(34, 211, 238, 0.12);
|
||||
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
color: #fff !important;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(51, 65, 85, 0.95) 0%,
|
||||
rgba(30, 41, 59, 0.98) 100%
|
||||
) !important;
|
||||
border-color: rgba(34, 211, 238, 0.65) !important;
|
||||
box-shadow:
|
||||
0 0 0 1px rgba(34, 211, 238, 0.2),
|
||||
0 0 16px rgba(34, 211, 238, 0.18);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0.5px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -363,12 +420,13 @@ export default {
|
|||
|
||||
&.user {
|
||||
width: 150px;
|
||||
color: rgb(var(--primary-6));
|
||||
color: #cbd5e1;
|
||||
border: 2px solid transparent;
|
||||
height: 32px;
|
||||
border: 1px solid #5c5d68;
|
||||
background: #26272e;
|
||||
border: 1px solid rgba(92, 107, 138, 0.46);
|
||||
background: linear-gradient(135deg, rgba(30, 41, 59, 0.58) 0%, rgba(15, 20, 28, 0.98) 100%);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 0 0 1px rgba(92, 107, 138, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.04);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
@ -380,8 +438,21 @@ export default {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
.arco-image {
|
||||
color: #e2e8f0;
|
||||
.wallet-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-right: 8px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #94a3b8;
|
||||
|
||||
svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
fill: currentColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -112,23 +112,88 @@ export default {
|
|||
position: relative;
|
||||
transition: width 0.3s;
|
||||
z-index: 12;
|
||||
background-color: #000;
|
||||
border-right: 1px solid; /* 宽度随你调整 */
|
||||
border-image: linear-gradient(
|
||||
to bottom,
|
||||
#0f0f12 0%,
|
||||
rgba(255,255,255, 0.7) 40%,
|
||||
rgba(255,255,255, 0.7) 60%,
|
||||
#0f0f12 100%
|
||||
)
|
||||
1 100%;
|
||||
background: linear-gradient(180deg, var(--portal-bg-void) 0%, var(--portal-bg-deep) 32%, #0c1018 100%);
|
||||
border-right: 1px solid var(--portal-border-subtle);
|
||||
box-shadow: inset -1px 0 0 rgba(92, 107, 138, 0.12);
|
||||
|
||||
&.collapsed {
|
||||
width: 56px !important;
|
||||
overflow: hidden;
|
||||
min-width: 56px !important;
|
||||
max-width: 56px !important;
|
||||
overflow-x: hidden;
|
||||
box-sizing: border-box;
|
||||
|
||||
:deep(.arco-menu) {
|
||||
padding-left: 0px;
|
||||
padding: 6px 2px 10px;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
box-sizing: border-box;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* 收起：更小一号的图标格，避免撑出横向滚动 */
|
||||
:deep(.arco-menu-collapsed) {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
overflow-x: hidden;
|
||||
|
||||
.arco-menu-item {
|
||||
width: 40px !important;
|
||||
min-width: 40px;
|
||||
max-width: 40px;
|
||||
height: 40px;
|
||||
min-height: 40px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 6px;
|
||||
padding: 0 !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.arco-menu-item-inner {
|
||||
padding: 0 !important;
|
||||
width: 100%;
|
||||
justify-content: center !important;
|
||||
}
|
||||
|
||||
.arco-menu-icon {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
/* 收起时标题不占布局宽度，避免图标挤偏；保留节点以免 Tooltip 异常 */
|
||||
.arco-menu-title {
|
||||
flex: 0 0 0 !important;
|
||||
min-width: 0 !important;
|
||||
max-width: 0 !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
overflow: hidden !important;
|
||||
opacity: 0 !important;
|
||||
font-size: 0 !important;
|
||||
line-height: 0 !important;
|
||||
}
|
||||
|
||||
.arco-menu-item.arco-menu-selected {
|
||||
background: rgba(30, 41, 59, 0.92) !important;
|
||||
box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.35) !important;
|
||||
}
|
||||
|
||||
.arco-menu-item.arco-menu-selected .arco-menu-icon {
|
||||
color: #e2e8f0;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.arco-menu-collapsed .menu-svg-icon) {
|
||||
width: 18px !important;
|
||||
height: 18px !important;
|
||||
}
|
||||
|
||||
:deep(.arco-menu-collapsed .menu-svg-icon svg) {
|
||||
width: 18px !important;
|
||||
height: 18px !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -141,13 +206,20 @@ export default {
|
|||
line-height: 1.4;
|
||||
font-size: 15px;
|
||||
background-color: transparent;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
color: var(--portal-text-muted);
|
||||
border-radius: 10px;
|
||||
margin-bottom: 10px;
|
||||
transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
|
||||
|
||||
&.arco-menu-selected,
|
||||
&:hover {
|
||||
background-color: rgb(var(--primary-6));
|
||||
&:hover:not(.arco-menu-selected) {
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
color: var(--portal-text-strong);
|
||||
}
|
||||
|
||||
&.arco-menu-selected {
|
||||
color: var(--portal-text-strong);
|
||||
background: rgba(30, 41, 59, 0.55);
|
||||
box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -82,7 +82,13 @@ export default {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
background: #0f0f12;
|
||||
background: var(--portal-bg-deep);
|
||||
background-image: radial-gradient(
|
||||
ellipse 100% 60% at 50% -10%,
|
||||
rgba(34, 211, 238, 0.07) 0%,
|
||||
transparent 55%
|
||||
),
|
||||
linear-gradient(180deg, var(--portal-bg-void) 0%, var(--portal-bg-deep) 40%, var(--portal-bg-deep) 100%);
|
||||
|
||||
.sidebar-backdrop {
|
||||
display: none;
|
||||
|
|
|
|||
|
|
@ -104,4 +104,6 @@ import {
|
|||
} from './directive/clamp'
|
||||
app.use(useClamp)
|
||||
|
||||
import '@/assets/styles/portal-buttons.less'
|
||||
|
||||
app.mount('#app')
|
||||
|
|
@ -23,8 +23,11 @@ const state = {
|
|||
// 当前语言
|
||||
// 多语言切换已禁用：全站固定繁体中文（zh_HK）
|
||||
language: 'zh_HK',
|
||||
// 主题 ''：亮色 / dark:暗黑
|
||||
theme: $storage.get('theme') || '',
|
||||
// 主题 ''：亮色 / dark:暗黑（未存储时默认暗色；显式存 '' 仍为亮色）
|
||||
theme: (() => {
|
||||
const t = $storage.get('theme')
|
||||
return t === undefined || t === null ? 'dark' : t
|
||||
})(),
|
||||
// 系统端
|
||||
system: $storage.get('system') || '',
|
||||
// 当前系统的所有多语言数据
|
||||
|
|
|
|||
|
|
@ -5,8 +5,28 @@
|
|||
</div>
|
||||
<div class="view-tabs">
|
||||
<a-tabs v-model="activeTab" @change="handleTabChange" type="card">
|
||||
<a-tab-pane key="personal" title="个人" />
|
||||
<a-tab-pane key="department" title="部门" />
|
||||
<a-tab-pane key="personal">
|
||||
<template #title>
|
||||
<span class="ga-tab-title">
|
||||
<svg class="ga-tab-icon" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path
|
||||
d="M12 12a4 4 0 1 0-4-4a4 4 0 0 0 4 4Zm0 2c-3.33 0-6 1.34-6 3v1h12v-1c0-1.66-2.67-3-6-3Z" />
|
||||
</svg>
|
||||
个人
|
||||
</span>
|
||||
</template>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="department">
|
||||
<template #title>
|
||||
<span class="ga-tab-title">
|
||||
<svg class="ga-tab-icon" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path
|
||||
d="M4 18v-1c0-1.66 2.03-3 4.5-3c.97 0 1.87.22 2.64.6c.73-.55 1.7-.88 2.86-.88s2.13.33 2.86.88A4.48 4.48 0 0 1 19 17v1H4Zm13-6.5a3 3 0 1 0 0-6a3 3 0 0 0 0 6Zm-8.5-1a3.5 3.5 0 1 0 0-7a3.5 3.5 0 0 0 0 7Z" />
|
||||
</svg>
|
||||
部门
|
||||
</span>
|
||||
</template>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</div>
|
||||
<!-- 查询区域 -->
|
||||
|
|
@ -866,10 +886,24 @@ export default {
|
|||
margin-bottom: 20px;
|
||||
padding: 0 4px;
|
||||
|
||||
.ga-tab-title {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.ga-tab-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
flex-shrink: 0;
|
||||
fill: currentColor;
|
||||
opacity: 0.92;
|
||||
}
|
||||
|
||||
::v-deep(.arco-tabs) {
|
||||
.arco-tabs-nav {
|
||||
background: rgba(22, 24, 30, 0.98) !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.12) !important;
|
||||
border: 1px solid rgba(148, 163, 184, 0.18) !important;
|
||||
border-radius: 12px !important;
|
||||
padding: 6px !important;
|
||||
margin-bottom: 0;
|
||||
|
|
@ -877,9 +911,9 @@ export default {
|
|||
}
|
||||
|
||||
.arco-tabs-tab {
|
||||
color: rgba(255, 255, 255, 0.85) !important;
|
||||
color: rgba(203, 213, 225, 0.92) !important;
|
||||
margin: 0 4px !important;
|
||||
padding: 10px 28px !important;
|
||||
padding: 10px 20px !important;
|
||||
border-radius: 8px !important;
|
||||
transition: all 0.2s ease !important;
|
||||
font-size: 14px;
|
||||
|
|
@ -888,17 +922,17 @@ export default {
|
|||
}
|
||||
|
||||
.arco-tabs-tab:hover {
|
||||
color: white !important;
|
||||
background: rgba(0, 102, 204, 0.25) !important;
|
||||
border-color: rgba(0, 102, 204, 0.3) !important;
|
||||
color: #e2e8f0 !important;
|
||||
background: rgba(30, 41, 59, 0.65) !important;
|
||||
border-color: rgba(148, 163, 184, 0.25) !important;
|
||||
}
|
||||
|
||||
.arco-tabs-tab-active {
|
||||
color: white !important;
|
||||
background: #0066cc !important;
|
||||
border-color: #0066cc !important;
|
||||
color: #f1f5f9 !important;
|
||||
background: #1e293b !important;
|
||||
border-color: rgba(148, 163, 184, 0.35) !important;
|
||||
font-weight: 600 !important;
|
||||
box-shadow: 0 4px 15px rgba(0, 102, 204, 0.5) !important;
|
||||
box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.2) !important;
|
||||
}
|
||||
|
||||
.arco-tabs-ink-bar {
|
||||
|
|
|
|||
|
|
@ -1714,11 +1714,11 @@ export default {
|
|||
}
|
||||
|
||||
.vg-toolbar-clear:deep(.arco-btn) {
|
||||
color: rgba(255, 255, 255, 0.75);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.vg-toolbar-clear:deep(.arco-btn:hover) {
|
||||
color: #7eeaf2;
|
||||
color: #fff;
|
||||
background: rgba(0, 202, 224, 0.1);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,33 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" role="img" aria-label="Site icon">
|
||||
<title>asio</title>
|
||||
<defs>
|
||||
<linearGradient id="favicon-bg" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#141b26"/>
|
||||
<stop offset="100%" stop-color="#0a0e14"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="32" height="32" rx="8" fill="url(#favicon-bg)"/>
|
||||
<rect
|
||||
x="1"
|
||||
y="1"
|
||||
width="30"
|
||||
height="30"
|
||||
rx="7"
|
||||
fill="none"
|
||||
stroke="#22d3ee"
|
||||
stroke-opacity="0.35"
|
||||
stroke-width="1"/>
|
||||
<rect
|
||||
x="1.5"
|
||||
y="1.5"
|
||||
width="29"
|
||||
height="29"
|
||||
rx="6.5"
|
||||
fill="none"
|
||||
stroke="#5c6b8a"
|
||||
stroke-opacity="0.45"
|
||||
stroke-width="0.75"/>
|
||||
<path
|
||||
fill="#22d3ee"
|
||||
d="M13.2 9.8c0-.45.48-.73.87-.5l8.8 5.2a.58.58 0 0 1 0 1l-8.8 5.2a.58.58 0 0 1-.87-.5v-10.4Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 789 B |
Loading…
Reference in New Issue