feat: setting页面
This commit is contained in:
@@ -111,3 +111,30 @@ body,
|
|||||||
background-position: 50% 50%;
|
background-position: 50% 50%;
|
||||||
background-size: var(--mosaic-bg-size) var(--mosaic-bg-size);
|
background-size: var(--mosaic-bg-size) var(--mosaic-bg-size);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.flex{
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.flex-center{
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.flex-1{
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.flex-col{
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.align-center{
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.space-between{
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.justify-center{
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.relative{
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|||||||
5
src/assets/icons/ThumbEdit.svg
Normal file
5
src/assets/icons/ThumbEdit.svg
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<circle cx="15" cy="15" r="14.5" fill="#232323" stroke="white"/>
|
||||||
|
<path d="M8.18359 19.5693V22.3285H11.8137C12.056 22.3285 12.2879 22.2298 12.4559 22.055L22.7247 11.3755C23.061 11.0257 23.0556 10.4711 22.7125 10.128L20.4083 7.82384C20.0557 7.47124 19.4824 7.47665 19.1365 7.83584L8.43278 18.9513C8.27291 19.1173 8.18359 19.3388 8.18359 19.5693Z" stroke="white" stroke-width="0.89098" stroke-linecap="round"/>
|
||||||
|
<path d="M17.9883 8.96387L21.5522 12.5278" stroke="white" stroke-width="0.89098" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 641 B |
BIN
src/assets/images/edit.png
Normal file
BIN
src/assets/images/edit.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 928 B |
@@ -13,18 +13,33 @@ const router = createRouter({
|
|||||||
{
|
{
|
||||||
path: '/',
|
path: '/',
|
||||||
name: 'home',
|
name: 'home',
|
||||||
component: () => import('../views/home/index.vue'),
|
component: () => import('../views/home/index.vue')
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/collectionStory',
|
path: '/collectionStory',
|
||||||
name: 'collectionStory',
|
name: 'collectionStory',
|
||||||
component: () => import('../views/collectionStory/index.vue'),
|
component: () => import('../views/collectionStory/index.vue')
|
||||||
|
// {
|
||||||
|
// path: '/',
|
||||||
|
// redirect: '/welcome'
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// path: '/asistant',
|
||||||
|
// name: 'asistant',
|
||||||
|
// component: () => import('../views/asistant/index.vue'),
|
||||||
|
// meta: { cache: true, verify: () => VerifyIDs(2) }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/settings',
|
||||||
|
name: 'settings',
|
||||||
|
component: () => import('@/views/setting/index.vue'),
|
||||||
|
meta: { cache: true }
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/:pathMatch(.*)',
|
path: '/:pathMatch(.*)',
|
||||||
name: '404',
|
name: '404',
|
||||||
component: () => import('../views/404.vue'),
|
component: () => import('../views/404.vue')
|
||||||
},
|
}
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
|
|
||||||
@@ -32,7 +47,6 @@ router.beforeEach((to, from, next) => {
|
|||||||
next()
|
next()
|
||||||
})
|
})
|
||||||
|
|
||||||
router.afterEach(() => {
|
router.afterEach(() => {})
|
||||||
})
|
|
||||||
|
|
||||||
export default router
|
export default router
|
||||||
|
|||||||
99
src/views/setting/components/Radio.vue
Normal file
99
src/views/setting/components/Radio.vue
Normal file
@@ -0,0 +1,99 @@
|
|||||||
|
<template>
|
||||||
|
<div class="radio-button-group">
|
||||||
|
<button
|
||||||
|
v-for="item in options"
|
||||||
|
:key="item.value"
|
||||||
|
type="button"
|
||||||
|
:class="[
|
||||||
|
'radio-button',
|
||||||
|
{
|
||||||
|
'is-active': multiple ? selectedValues.includes(item.value) : modelValue === item.value
|
||||||
|
}
|
||||||
|
]"
|
||||||
|
@click="selectOption(item.value)"
|
||||||
|
>
|
||||||
|
{{ item.name }}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { computed } from 'vue'
|
||||||
|
|
||||||
|
interface Option {
|
||||||
|
name: string | number
|
||||||
|
value: string | number | boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
modelValue: string | number | boolean | Array<string | number | boolean> | null
|
||||||
|
options: Option[] // 按钮选项数组
|
||||||
|
multiple?: boolean // 是否支持多选，默认为 false
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const emit = defineEmits<{
|
||||||
|
(e: 'update:modelValue', value: any): void
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const multiple = props.multiple === true
|
||||||
|
|
||||||
|
const selectedValues = computed(() => {
|
||||||
|
if (!multiple) {
|
||||||
|
return typeof props.modelValue === 'undefined' || props.modelValue === null
|
||||||
|
? []
|
||||||
|
: [props.modelValue]
|
||||||
|
}
|
||||||
|
|
||||||
|
return Array.isArray(props.modelValue) ? props.modelValue : []
|
||||||
|
})
|
||||||
|
|
||||||
|
const selectOption = (value: any) => {
|
||||||
|
if (multiple) {
|
||||||
|
const current = Array.isArray(props.modelValue) ? [...props.modelValue] : []
|
||||||
|
const index = current.indexOf(value)
|
||||||
|
if (index >= 0) {
|
||||||
|
current.splice(index, 1)
|
||||||
|
} else {
|
||||||
|
current.push(value)
|
||||||
|
}
|
||||||
|
emit('update:modelValue', current)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (props.modelValue !== value) {
|
||||||
|
emit('update:modelValue', value)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.radio-button-group {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.8rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.radio-button {
|
||||||
|
border: 1px solid #979797;
|
||||||
|
height: 4rem;
|
||||||
|
min-width: 8rem;
|
||||||
|
padding: 0 2rem;
|
||||||
|
color: #979797;
|
||||||
|
cursor: pointer;
|
||||||
|
outline: none;
|
||||||
|
background-color: #fff;
|
||||||
|
font-size: 1.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.radio-button:hover {
|
||||||
|
border-color: #000;
|
||||||
|
color: #fff;
|
||||||
|
background-color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.radio-button.is-active {
|
||||||
|
color: #fff;
|
||||||
|
background-color: #000;
|
||||||
|
border-color: #000;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
512
src/views/setting/index.vue
Normal file
512
src/views/setting/index.vue
Normal file
@@ -0,0 +1,512 @@
|
|||||||
|
<template>
|
||||||
|
<div class="setting-wrapper">
|
||||||
|
<div class="banner flex flex-center flex-col">
|
||||||
|
<div class="title">Settings</div>
|
||||||
|
<div class="slogan">Manage your account settings and preferences</div>
|
||||||
|
</div>
|
||||||
|
<div class="setting-content">
|
||||||
|
<div class="setting-item profile-container flex">
|
||||||
|
<div class="label-container">
|
||||||
|
<div class="label">Profile</div>
|
||||||
|
<div class="label-desc">
|
||||||
|
Update your display name, avatar, social links and account security.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="context-container">
|
||||||
|
<div class="info flex align-center">
|
||||||
|
<div class="thumb relative">
|
||||||
|
<SvgIcon name="ThumbEdit" size="30" class="edit-icon" />
|
||||||
|
</div>
|
||||||
|
<div class="name-email flex flex-col">
|
||||||
|
<div class="name">{{ userData.firstName }} {{ userData.lastName }}</div>
|
||||||
|
<div class="email">{{ userData.email }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-container flex flex-col">
|
||||||
|
<div class="flex col-gap-2">
|
||||||
|
<div class="form-item">
|
||||||
|
<div class="form-item-label">FIRST NAME</div>
|
||||||
|
<div class="form-item-value name">
|
||||||
|
<el-input v-model="userData.firstName" placeholder="First Name" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-item">
|
||||||
|
<div class="form-item-label">LAST NAME</div>
|
||||||
|
<div class="form-item-value name">
|
||||||
|
<el-input v-model="userData.lastName" placeholder="Last Name" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-item">
|
||||||
|
<div class="form-item-label">USERNAME</div>
|
||||||
|
<div class="form-item-value">
|
||||||
|
<el-input v-model="userData.username" placeholder="Username" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-item">
|
||||||
|
<div class="form-item-label">ROLE</div>
|
||||||
|
<div class="form-item-value noborder radio">
|
||||||
|
<Radio multiple v-model="userData.role" :options="roleList" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="social-links">
|
||||||
|
<div class="title">SOCIAL LINKS</div>
|
||||||
|
<div class="links-list flex flex-col">
|
||||||
|
<div
|
||||||
|
class="links-item flex align-center"
|
||||||
|
v-for="(item, index) in userData.links"
|
||||||
|
:key="item"
|
||||||
|
>
|
||||||
|
<div class="link-index">link {{ index + 1 }}</div>
|
||||||
|
<div class="link-href flex-1">
|
||||||
|
<el-input v-model="userData.links[index]" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="gap" />
|
||||||
|
<div class="setting-item security flex">
|
||||||
|
<div class="label-container">
|
||||||
|
<div class="label">Security</div>
|
||||||
|
<div class="label-desc">Manage your login email and password.</div>
|
||||||
|
</div>
|
||||||
|
<div class="context-container">
|
||||||
|
<div class="security-section">
|
||||||
|
<div class="security-row flex align-center">
|
||||||
|
<div class="security-main flex-1">
|
||||||
|
<div class="security-label">EMAIL</div>
|
||||||
|
<div class="security-value">{{ userData.email }}</div>
|
||||||
|
</div>
|
||||||
|
<button type="button" class="small-action-btn" @click="resetEmailDraft">
|
||||||
|
CANCEL
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="security-row">
|
||||||
|
<div class="security-label">NEW EMAIL ADDRESS</div>
|
||||||
|
<div class="security-input-wrap verify-input">
|
||||||
|
<el-input v-model="userData.newEmail" placeholder="Enter new email" />
|
||||||
|
<button type="button" class="verify-btn">Verify</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="inner-divider" />
|
||||||
|
<div class="security-row flex align-center">
|
||||||
|
<div class="security-main flex-1">
|
||||||
|
<div class="security-label">PASSWORD</div>
|
||||||
|
<div class="security-value password-mask">.........</div>
|
||||||
|
</div>
|
||||||
|
<button type="button" class="small-action-btn" @click="resetPasswordDraft">
|
||||||
|
CANCEL
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="security-row">
|
||||||
|
<div class="security-label">NEW PASSWORD</div>
|
||||||
|
<div class="security-input-wrap">
|
||||||
|
<el-input
|
||||||
|
v-model="userData.newPassword"
|
||||||
|
type="password"
|
||||||
|
show-password
|
||||||
|
placeholder="Enter new password"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="security-tip">You must satisfy ALL password conditions to register.</div>
|
||||||
|
</div>
|
||||||
|
<div class="security-row">
|
||||||
|
<div class="security-label">CURRENT PASSWORD</div>
|
||||||
|
<div class="security-input-wrap">
|
||||||
|
<el-input
|
||||||
|
v-model="userData.currentPassword"
|
||||||
|
type="password"
|
||||||
|
show-password
|
||||||
|
placeholder="Confirm with your password"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="gap" />
|
||||||
|
<div class="setting-item region flex">
|
||||||
|
<div class="label-container">
|
||||||
|
<div class="label">Language & Region</div>
|
||||||
|
<div class="label-desc">Set your preferred language, region and currency display.</div>
|
||||||
|
</div>
|
||||||
|
<div class="context-container">
|
||||||
|
<div class="region-section">
|
||||||
|
<div class="region-row">
|
||||||
|
<div class="security-label">DISPLAY LANGUAGE</div>
|
||||||
|
<div class="select-wrap">
|
||||||
|
<el-select v-model="userData.language" placeholder="Select language">
|
||||||
|
<el-option v-for="item in languageList" :key="item" :label="item" :value="item" />
|
||||||
|
</el-select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="region-row">
|
||||||
|
<div class="security-label">REGION</div>
|
||||||
|
<div class="select-wrap">
|
||||||
|
<el-select v-model="userData.region" placeholder="Select region">
|
||||||
|
<el-option v-for="item in regionList" :key="item" :label="item" :value="item" />
|
||||||
|
</el-select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="gap" />
|
||||||
|
<div class="action-container flex">
|
||||||
|
<button type="button" class="save-btn">SAVE CHANGE</button>
|
||||||
|
<button type="button" class="discard-btn" @click="handleDiscard">DISCARD</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import Radio from './components/Radio.vue'
|
||||||
|
|
||||||
|
const userData = ref({
|
||||||
|
firstName: 'Alexandra',
|
||||||
|
lastName: 'Chen',
|
||||||
|
email: 'alexandra.chen@example.com',
|
||||||
|
username: '@alexandra.chen',
|
||||||
|
role: [],
|
||||||
|
links: ['https://instagram.com/username', 'https://...'],
|
||||||
|
newEmail: '',
|
||||||
|
newPassword: '',
|
||||||
|
currentPassword: '',
|
||||||
|
language: 'English',
|
||||||
|
region: 'Hong Kong SAR'
|
||||||
|
})
|
||||||
|
|
||||||
|
const roleList = [
|
||||||
|
'Fashion Enthusiast',
|
||||||
|
'Content Creator',
|
||||||
|
'Student',
|
||||||
|
'Retail / Buyer',
|
||||||
|
'Fashion Designer',
|
||||||
|
'Brand / Business',
|
||||||
|
'PR & Communications',
|
||||||
|
'Stylist',
|
||||||
|
'Graphic Designer',
|
||||||
|
'3D Artist',
|
||||||
|
'Other'
|
||||||
|
].map((el) => ({ name: el, value: el }))
|
||||||
|
|
||||||
|
const languageList = ['English', 'Chinese', 'Japanese']
|
||||||
|
const regionList = ['Hong Kong SAR', 'Mainland China', 'Singapore', 'United Kingdom']
|
||||||
|
|
||||||
|
const createDefaultData = () => ({
|
||||||
|
firstName: 'Alexandra',
|
||||||
|
lastName: 'Chen',
|
||||||
|
email: 'alexandra.chen@example.com',
|
||||||
|
username: '@alexandra.chen',
|
||||||
|
role: [],
|
||||||
|
links: ['https://instagram.com/username', 'https://...'],
|
||||||
|
newEmail: '',
|
||||||
|
newPassword: '',
|
||||||
|
currentPassword: '',
|
||||||
|
language: 'English',
|
||||||
|
region: 'Hong Kong SAR'
|
||||||
|
})
|
||||||
|
|
||||||
|
const resetEmailDraft = () => {
|
||||||
|
userData.value.newEmail = ''
|
||||||
|
}
|
||||||
|
|
||||||
|
const resetPasswordDraft = () => {
|
||||||
|
userData.value.newPassword = ''
|
||||||
|
userData.value.currentPassword = ''
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleDiscard = () => {
|
||||||
|
userData.value = createDefaultData()
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.setting-wrapper {
|
||||||
|
height: 100%;
|
||||||
|
overflow-y: auto;
|
||||||
|
.banner {
|
||||||
|
height: 14.8rem;
|
||||||
|
row-gap: 1.2rem;
|
||||||
|
background-color: #fafaf9;
|
||||||
|
.title {
|
||||||
|
font-family: 'KaiseiOpti-Bold';
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 4rem;
|
||||||
|
line-height: 3.6rem;
|
||||||
|
}
|
||||||
|
.slogan {
|
||||||
|
font-family: 'KaiseiOpti-Regular';
|
||||||
|
font-size: 1.6rem;
|
||||||
|
line-height: 2.4rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.setting-content {
|
||||||
|
padding: 0 18rem 12rem;
|
||||||
|
.setting-item {
|
||||||
|
column-gap: 21.4rem;
|
||||||
|
padding-top: 4rem;
|
||||||
|
.label-container {
|
||||||
|
width: 27.6rem;
|
||||||
|
font-family: 'KaiseiOpti-Medium';
|
||||||
|
.label {
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 2.8rem;
|
||||||
|
color: #232323;
|
||||||
|
}
|
||||||
|
.label-desc {
|
||||||
|
margin-top: 2rem;
|
||||||
|
font-size: 1.6rem;
|
||||||
|
color: #666666;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.context-container {
|
||||||
|
.info {
|
||||||
|
column-gap: 2.6rem;
|
||||||
|
margin-bottom: 3.6rem;
|
||||||
|
.thumb {
|
||||||
|
width: 8rem;
|
||||||
|
height: 8rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: #999;
|
||||||
|
.edit-icon {
|
||||||
|
position: absolute;
|
||||||
|
width: 3rem;
|
||||||
|
height: 3rem;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
border: 0.1rem solid #fff;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.name-email {
|
||||||
|
font-family: 'KaiseiOpti-Medium';
|
||||||
|
row-gap: 0.6rem;
|
||||||
|
.name {
|
||||||
|
font-size: 2.4rem;
|
||||||
|
color: #232323;
|
||||||
|
line-height: 3.6rem;
|
||||||
|
}
|
||||||
|
.email {
|
||||||
|
font-size: 1.8rem;
|
||||||
|
color: #979797;
|
||||||
|
line-height: 2.4rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.col-gap-2 {
|
||||||
|
column-gap: 2rem;
|
||||||
|
}
|
||||||
|
.form-container {
|
||||||
|
row-gap: 3rem;
|
||||||
|
.form-item {
|
||||||
|
.form-item-label {
|
||||||
|
font-family: 'KaiseiOpti-Medium';
|
||||||
|
font-size: 1.4rem;
|
||||||
|
color: #979797;
|
||||||
|
margin-bottom: 0.8rem;
|
||||||
|
}
|
||||||
|
.form-item-value {
|
||||||
|
border: 0.1rem solid #979797;
|
||||||
|
&.noborder {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
&.name {
|
||||||
|
width: 28.4rem;
|
||||||
|
}
|
||||||
|
&.radio {
|
||||||
|
width: 58rem;
|
||||||
|
}
|
||||||
|
:deep(.el-input) {
|
||||||
|
height: 4rem;
|
||||||
|
.el-input__wrapper {
|
||||||
|
box-shadow: none;
|
||||||
|
padding: 0 2rem;
|
||||||
|
.el-input__inner {
|
||||||
|
font-family: 'KaiseiOpti-Regular';
|
||||||
|
color: #232323;
|
||||||
|
font-size: 1.6rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.social-links {
|
||||||
|
margin-top: 5.8rem;
|
||||||
|
font-family: 'KaiseiOpti-Medium';
|
||||||
|
.title {
|
||||||
|
font-size: 1.4rem;
|
||||||
|
color: #585858;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
.links-list {
|
||||||
|
row-gap: 0.8rem;
|
||||||
|
}
|
||||||
|
.links-item {
|
||||||
|
column-gap: 3.4rem;
|
||||||
|
.link-index {
|
||||||
|
font-size: 1.4rem;
|
||||||
|
color: #979797;
|
||||||
|
}
|
||||||
|
.link-href {
|
||||||
|
color: #979797;
|
||||||
|
border: 0.1rem solid #979797;
|
||||||
|
:deep(.el-input) {
|
||||||
|
height: 4rem;
|
||||||
|
.el-input__wrapper {
|
||||||
|
box-shadow: none;
|
||||||
|
padding: 0 2rem;
|
||||||
|
.el-input__inner {
|
||||||
|
font-family: 'KaiseiOpti-Regular';
|
||||||
|
color: #979797;
|
||||||
|
font-size: 1.6rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.gap {
|
||||||
|
height: 0.05rem;
|
||||||
|
margin-top: 6rem;
|
||||||
|
background-color: #c4c4c4;
|
||||||
|
}
|
||||||
|
.security,
|
||||||
|
.region {
|
||||||
|
.context-container {
|
||||||
|
width: 58rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.security-section,
|
||||||
|
.region-section {
|
||||||
|
width: 58rem;
|
||||||
|
}
|
||||||
|
.security-row,
|
||||||
|
.region-row {
|
||||||
|
& + .security-row,
|
||||||
|
& + .region-row {
|
||||||
|
margin-top: 3rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.security-label {
|
||||||
|
margin-bottom: 0.8rem;
|
||||||
|
font-family: 'KaiseiOpti-Medium';
|
||||||
|
font-size: 1.4rem;
|
||||||
|
line-height: 2.4rem;
|
||||||
|
color: #585858;
|
||||||
|
}
|
||||||
|
.security-value {
|
||||||
|
height: 4rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-family: 'KaiseiOpti-Regular';
|
||||||
|
font-size: 1.6rem;
|
||||||
|
line-height: 2.4rem;
|
||||||
|
color: #232323;
|
||||||
|
}
|
||||||
|
.password-mask {
|
||||||
|
font-family: 'KaiseiOpti-Bold';
|
||||||
|
letter-spacing: 0.08rem;
|
||||||
|
}
|
||||||
|
.security-tip {
|
||||||
|
margin-top: 0.8rem;
|
||||||
|
font-family: 'KaiseiOpti-Regular';
|
||||||
|
font-size: 1.2rem;
|
||||||
|
line-height: 1.6rem;
|
||||||
|
color: #9f9f9f;
|
||||||
|
}
|
||||||
|
.security-input-wrap,
|
||||||
|
.select-wrap {
|
||||||
|
width: 58rem;
|
||||||
|
border: 0.1rem solid #979797;
|
||||||
|
:deep(.el-input),
|
||||||
|
:deep(.el-select) {
|
||||||
|
width: 100%;
|
||||||
|
height: 4rem;
|
||||||
|
}
|
||||||
|
:deep(.el-input__wrapper),
|
||||||
|
:deep(.el-select__wrapper) {
|
||||||
|
min-height: 4rem;
|
||||||
|
box-shadow: none;
|
||||||
|
border-radius: 0;
|
||||||
|
padding: 0 2rem;
|
||||||
|
}
|
||||||
|
:deep(.el-input__inner),
|
||||||
|
:deep(.el-select__selected-item),
|
||||||
|
:deep(.el-select__placeholder) {
|
||||||
|
font-family: 'KaiseiOpti-Regular';
|
||||||
|
font-size: 1.6rem;
|
||||||
|
color: #232323;
|
||||||
|
}
|
||||||
|
:deep(.el-input__inner::placeholder) {
|
||||||
|
color: #9f9f9f;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.verify-input {
|
||||||
|
display: flex;
|
||||||
|
align-items: stretch;
|
||||||
|
:deep(.el-input) {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.verify-btn {
|
||||||
|
width: 7.8rem;
|
||||||
|
border: none;
|
||||||
|
border-left: 0.1rem solid #979797;
|
||||||
|
background: #fff;
|
||||||
|
font-family: 'KaiseiOpti-Medium';
|
||||||
|
font-size: 1.4rem;
|
||||||
|
color: #232323;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.small-action-btn {
|
||||||
|
width: 10rem;
|
||||||
|
height: 3.2rem;
|
||||||
|
border: 0.1rem solid #c4c4c4;
|
||||||
|
background: #f6f6f6;
|
||||||
|
font-family: 'KaiseiOpti-Bold';
|
||||||
|
font-size: 1.2rem;
|
||||||
|
line-height: 2.6rem;
|
||||||
|
color: #232323;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.inner-divider {
|
||||||
|
height: 0.05rem;
|
||||||
|
margin: 2.8rem 0 3rem;
|
||||||
|
background-color: #c4c4c4;
|
||||||
|
}
|
||||||
|
.action-container {
|
||||||
|
justify-content: center;
|
||||||
|
column-gap: 1.2rem;
|
||||||
|
margin-top: 2.8rem;
|
||||||
|
}
|
||||||
|
.save-btn,
|
||||||
|
.discard-btn {
|
||||||
|
height: 4.4rem;
|
||||||
|
font-family: 'KaiseiOpti-Bold';
|
||||||
|
font-size: 1.6rem;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.save-btn {
|
||||||
|
width: 23.6rem;
|
||||||
|
border: 0.1rem solid #232323;
|
||||||
|
background: #232323;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.discard-btn {
|
||||||
|
width: 12rem;
|
||||||
|
border: 0.1rem solid #c4c4c4;
|
||||||
|
background: #fff;
|
||||||
|
color: #232323;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user