style(邀请页面): 修复名称过长挤压其他内容的问题
This commit is contained in:
hzj
parent
e0f2242810
commit
e4b1bf2f82
@ -26,7 +26,12 @@
|
||||
height: max-content;
|
||||
"
|
||||
>
|
||||
<img src="../../assets/icon/search.png" alt="" width="24px" style="opacity: 0.6" />
|
||||
<img
|
||||
v-smart-img
|
||||
src="../../assets/icon/search.png"
|
||||
alt=""
|
||||
style="display: block; width: 2em; aspect-ratio: 1/1; opacity: 0.6"
|
||||
/>
|
||||
<input
|
||||
v-model="searchQuery"
|
||||
type="text"
|
||||
@ -39,24 +44,16 @@
|
||||
width: 100%;
|
||||
color: rgba(0, 0, 0, 0.4);
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
padding: 10px 8px;
|
||||
padding: 8px;
|
||||
"
|
||||
/>
|
||||
<button
|
||||
v-if="searchQuery"
|
||||
@click="clearSearch"
|
||||
style="
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 18px;
|
||||
color: #9ca3af;
|
||||
cursor: pointer;
|
||||
padding: 0 8px;
|
||||
"
|
||||
style="background: none; border: none; color: #9ca3af; cursor: pointer; padding: 0 8px"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
@ -126,39 +123,47 @@
|
||||
{{ t('success') }}
|
||||
</div>
|
||||
</div>
|
||||
<!-- 用户信息 -->
|
||||
<!-- 标题 -->
|
||||
<div style="font-weight: 600">{{ t('information') }}:</div>
|
||||
<div style="display: flex; align-items: center; justify-content: space-between">
|
||||
<div style="display: flex; align-items: center; flex: 1; min-width: 0">
|
||||
<!-- 用户信息 -->
|
||||
<div style="display: flex; align-items: center; justify-content: space-between; gap: 4px">
|
||||
<!-- 用户信息 -->
|
||||
<div
|
||||
style="
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
align-self: stretch;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
"
|
||||
>
|
||||
<!-- 头像 -->
|
||||
<div
|
||||
style="
|
||||
width: 50px;
|
||||
aspect-ratio: 1/1;
|
||||
width: 3em;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 12px;
|
||||
"
|
||||
>
|
||||
<img
|
||||
:src="user.userProfile.userAvatar || ''"
|
||||
:alt="user.userProfile.userNickname"
|
||||
style="
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
aspect-ratio: 1/1;
|
||||
border-radius: 50%;
|
||||
"
|
||||
style="width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 50%"
|
||||
alt=""
|
||||
@error="defaultAvatarUrl"
|
||||
/>
|
||||
</div>
|
||||
<div style="min-width: 0; flex: 1">
|
||||
|
||||
<!-- 基本信息 -->
|
||||
<div style="flex: 1; min-width: 0; align-self: stretch">
|
||||
<div
|
||||
style="
|
||||
margin-bottom: 4px;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
@ -171,7 +176,19 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: center; align-items: center">
|
||||
|
||||
<!-- 取消邀请按钮 -->
|
||||
<div
|
||||
style="
|
||||
width: auto;
|
||||
min-width: 0;
|
||||
align-self: stretch;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
<div
|
||||
v-if="user.status == 0"
|
||||
style="
|
||||
@ -356,7 +373,6 @@ onMounted(() => {
|
||||
|
||||
input::placeholder {
|
||||
font-weight: bold;
|
||||
font-size: 0.7em;
|
||||
color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
@ -366,7 +382,6 @@ input::placeholder {
|
||||
background: linear-gradient(135deg, #bb92ff 2.82%, #8b45ff 99.15%);
|
||||
color: white;
|
||||
border: none;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
@ -409,6 +424,12 @@ input::placeholder {
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1024px) {
|
||||
* {
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
/* RTL支持 */
|
||||
[dir='rtl'] .avatar {
|
||||
margin-right: 0;
|
||||
|
||||
@ -26,7 +26,12 @@
|
||||
height: max-content;
|
||||
"
|
||||
>
|
||||
<img src="../../assets/icon/search.png" alt="" width="24px" style="opacity: 0.6" />
|
||||
<img
|
||||
v-smart-img
|
||||
src="../../assets/icon/search.png"
|
||||
alt=""
|
||||
style="display: block; width: 2em; aspect-ratio: 1/1; opacity: 0.6"
|
||||
/>
|
||||
<input
|
||||
v-model="searchQuery"
|
||||
type="text"
|
||||
@ -39,24 +44,16 @@
|
||||
width: 100%;
|
||||
color: rgba(0, 0, 0, 0.4);
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
padding: 10px 8px;
|
||||
padding: 8px;
|
||||
"
|
||||
/>
|
||||
<button
|
||||
v-if="searchQuery"
|
||||
@click="clearSearch"
|
||||
style="
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 18px;
|
||||
color: #9ca3af;
|
||||
cursor: pointer;
|
||||
padding: 0 8px;
|
||||
"
|
||||
style="background: none; border: none; color: #9ca3af; cursor: pointer; padding: 0 8px"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
@ -126,50 +123,72 @@
|
||||
{{ t('success') }}
|
||||
</div>
|
||||
</div>
|
||||
<!-- 用户信息 -->
|
||||
<!-- 标题 -->
|
||||
<div style="font-weight: 600">{{ t('information') }}:</div>
|
||||
<div style="display: flex; align-items: center; justify-content: space-between">
|
||||
<div style="display: flex; align-items: center; flex: 1">
|
||||
<!-- 用户信息 -->
|
||||
<div style="display: flex; align-items: center; justify-content: space-between; gap: 4px">
|
||||
<!-- 用户信息 -->
|
||||
<div
|
||||
style="
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
align-self: stretch;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
"
|
||||
>
|
||||
<!-- 头像 -->
|
||||
<div
|
||||
style="
|
||||
width: 50px;
|
||||
aspect-ratio: 1/1;
|
||||
border-radius: 25px;
|
||||
background-color: #f59e0b;
|
||||
width: 3em;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin-right: 12px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
"
|
||||
>
|
||||
<img
|
||||
v-if="user.userProfile.userAvatar"
|
||||
:src="user.userProfile.userAvatar"
|
||||
:alt="user.userProfile.userNickname"
|
||||
style="width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 25px"
|
||||
@error="(e) => (e.target.style.display = 'none')"
|
||||
:src="user.userProfile.userAvatar || ''"
|
||||
style="width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 50%"
|
||||
alt=""
|
||||
@error="defaultAvatarUrl"
|
||||
/>
|
||||
<span
|
||||
v-if="!user.userProfile.userAvatar"
|
||||
style="color: white; font-size: 18px; font-weight: 600"
|
||||
>{{ user.userProfile.userNickname.charAt(0) }}</span
|
||||
>
|
||||
</div>
|
||||
<div>
|
||||
<div style="margin-bottom: 4px; font-size: 16px; font-weight: 700">
|
||||
|
||||
<!-- 基本信息 -->
|
||||
<div style="flex: 1; min-width: 0; align-self: stretch">
|
||||
<div
|
||||
style="
|
||||
margin-bottom: 4px;
|
||||
font-weight: 700;
|
||||
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
"
|
||||
>
|
||||
{{ user.userProfile.userNickname }}
|
||||
</div>
|
||||
<div style="font-size: 14px; color: rgba(0, 0, 0, 0.4); font-weight: 500">
|
||||
<div style="font-size: 0.9em; color: rgba(0, 0, 0, 0.4); font-weight: 500">
|
||||
ID: {{ user.userProfile.account }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: center; align-items: center">
|
||||
|
||||
<!-- 取消邀请按钮 -->
|
||||
<div
|
||||
style="
|
||||
width: auto;
|
||||
min-width: 0;
|
||||
align-self: stretch;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
<div
|
||||
v-if="user.status == 0"
|
||||
style="
|
||||
@ -177,7 +196,6 @@
|
||||
border-radius: 32px;
|
||||
background-color: red;
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
z-index: 5;
|
||||
"
|
||||
@ -231,6 +249,12 @@ const showUserList = computed(() => {
|
||||
}
|
||||
})
|
||||
|
||||
const defaultAvatarUrl = (e) => {
|
||||
console.log('头像资源出错')
|
||||
e.target.onerror = null //防止循环
|
||||
e.target.src = new URL('/src/assets/images/WeeklyStar/defaultAvatar.png', import.meta.url).href
|
||||
}
|
||||
|
||||
// 清空关键词
|
||||
const clearSearch = () => {
|
||||
searchQuery.value = ''
|
||||
@ -336,7 +360,6 @@ onMounted(() => {
|
||||
|
||||
input::placeholder {
|
||||
font-weight: bold;
|
||||
font-size: 0.7em;
|
||||
color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
@ -356,7 +379,6 @@ input::placeholder {
|
||||
background: linear-gradient(135deg, #bb92ff 2.82%, #8b45ff 99.15%);
|
||||
color: white;
|
||||
border: none;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
@ -399,6 +421,12 @@ input::placeholder {
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1024px) {
|
||||
* {
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
/* RTL支持 */
|
||||
[dir='rtl'] .avatar {
|
||||
margin-right: 0;
|
||||
|
||||
@ -26,7 +26,12 @@
|
||||
height: max-content;
|
||||
"
|
||||
>
|
||||
<img src="../../assets/icon/search.png" alt="" width="24px" style="opacity: 0.6" />
|
||||
<img
|
||||
v-smart-img
|
||||
src="../../assets/icon/search.png"
|
||||
alt=""
|
||||
style="display: block; width: 2em; aspect-ratio: 1/1; opacity: 0.6"
|
||||
/>
|
||||
<input
|
||||
v-model="searchQuery"
|
||||
type="text"
|
||||
@ -39,24 +44,16 @@
|
||||
width: 100%;
|
||||
color: rgba(0, 0, 0, 0.4);
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
padding: 10px 8px;
|
||||
padding: 8px;
|
||||
"
|
||||
/>
|
||||
<button
|
||||
v-if="searchQuery"
|
||||
@click="clearSearch"
|
||||
style="
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 18px;
|
||||
color: #9ca3af;
|
||||
cursor: pointer;
|
||||
padding: 0 8px;
|
||||
"
|
||||
style="background: none; border: none; color: #9ca3af; cursor: pointer; padding: 0 8px"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
@ -126,50 +123,71 @@
|
||||
{{ t('success') }}
|
||||
</div>
|
||||
</div>
|
||||
<!-- 用户信息 -->
|
||||
<!-- 标题 -->
|
||||
<div style="font-weight: 600">{{ t('information') }}:</div>
|
||||
<!-- 用户信息 -->
|
||||
<div style="display: flex; align-items: center; justify-content: space-between">
|
||||
<div style="display: flex; align-items: center; flex: 1">
|
||||
<!-- 基本信息 -->
|
||||
<div
|
||||
style="
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
align-self: stretch;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
"
|
||||
>
|
||||
<div
|
||||
style="
|
||||
width: 50px;
|
||||
aspect-ratio: 1/1;
|
||||
border-radius: 25px;
|
||||
background-color: #f59e0b;
|
||||
width: 3em;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin-right: 12px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
"
|
||||
>
|
||||
<img
|
||||
v-if="user.userProfile.userAvatar"
|
||||
:src="user.userProfile.userAvatar"
|
||||
:alt="user.userProfile.userNickname"
|
||||
style="width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 25px"
|
||||
@error="(e) => (e.target.style.display = 'none')"
|
||||
:src="user.userProfile.userAvatar || ''"
|
||||
style="width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 50%"
|
||||
alt=""
|
||||
@error="defaultAvatarUrl"
|
||||
/>
|
||||
<span
|
||||
v-if="!user.userProfile.userAvatar"
|
||||
style="color: white; font-size: 18px; font-weight: 600"
|
||||
>{{ user.userProfile.userNickname.charAt(0) }}</span
|
||||
>
|
||||
</div>
|
||||
<div>
|
||||
<div style="margin-bottom: 4px; font-size: 16px; font-weight: 700">
|
||||
|
||||
<!-- 基本信息 -->
|
||||
<div style="flex: 1; min-width: 0; align-self: stretch">
|
||||
<div
|
||||
style="
|
||||
margin-bottom: 4px;
|
||||
font-weight: 700;
|
||||
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
"
|
||||
>
|
||||
{{ user.userProfile.userNickname }}
|
||||
</div>
|
||||
<div style="font-size: 14px; color: rgba(0, 0, 0, 0.4); font-weight: 500">
|
||||
<div style="font-size: 0.9em; color: rgba(0, 0, 0, 0.4); font-weight: 500">
|
||||
ID: {{ user.userProfile.account }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: center; align-items: center">
|
||||
|
||||
<!-- 取消邀请按钮 -->
|
||||
<div
|
||||
style="
|
||||
width: auto;
|
||||
min-width: 0;
|
||||
align-self: stretch;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
<div
|
||||
v-if="user.status == 0"
|
||||
style="
|
||||
@ -233,6 +251,12 @@ const showUserList = computed(() => {
|
||||
}
|
||||
})
|
||||
|
||||
const defaultAvatarUrl = (e) => {
|
||||
console.log('头像资源出错')
|
||||
e.target.onerror = null //防止循环
|
||||
e.target.src = new URL('/src/assets/images/WeeklyStar/defaultAvatar.png', import.meta.url).href
|
||||
}
|
||||
|
||||
// 清空关键词
|
||||
const clearSearch = () => {
|
||||
searchQuery.value = ''
|
||||
@ -338,7 +362,6 @@ onMounted(() => {
|
||||
|
||||
input::placeholder {
|
||||
font-weight: bold;
|
||||
font-size: 0.7em;
|
||||
color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
@ -358,7 +381,6 @@ input::placeholder {
|
||||
background: linear-gradient(135deg, #bb92ff 2.82%, #8b45ff 99.15%);
|
||||
color: white;
|
||||
border: none;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
@ -401,6 +423,12 @@ input::placeholder {
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1024px) {
|
||||
* {
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
/* RTL支持 */
|
||||
[dir='rtl'] .avatar {
|
||||
margin-right: 0;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user