feat:历史记录分享功能样式修改
This commit is contained in:
@@ -4,11 +4,19 @@
|
|||||||
:width="width"
|
:width="width"
|
||||||
:close-on-click-modal="true"
|
:close-on-click-modal="true"
|
||||||
:center="true"
|
:center="true"
|
||||||
:show-close="true"
|
:show-close="false"
|
||||||
top="20vh"
|
top="20vh"
|
||||||
title="链接分享"
|
|
||||||
@closed="handleClosed"
|
@closed="handleClosed"
|
||||||
>
|
>
|
||||||
|
<!-- 自定义关闭按钮 -->
|
||||||
|
<template #header>
|
||||||
|
<div class="dialog-header">
|
||||||
|
<span class="dialog-title">分享链接</span>
|
||||||
|
<button class="dialog-close-btn" @click="dialogVisible = false">
|
||||||
|
<SvgIcon icon-class="close" size="18px" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
<div class="share-content">
|
<div class="share-content">
|
||||||
<!-- 设置区域 -->
|
<!-- 设置区域 -->
|
||||||
<div v-if="!loading && !error" class="settings-section">
|
<div v-if="!loading && !error" class="settings-section">
|
||||||
@@ -259,6 +267,38 @@ defineExpose({
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
// 自定义对话框头部
|
||||||
|
.dialog-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.dialog-title {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--color-text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-close-btn {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 4px;
|
||||||
|
color: var(--color-text-regular);
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.share-content {
|
.share-content {
|
||||||
padding: 20px 0;
|
padding: 20px 0;
|
||||||
}
|
}
|
||||||
@@ -324,7 +364,9 @@ defineExpose({
|
|||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
background-color: var(--color-primary);
|
background-color: var(--color-primary);
|
||||||
color: white;
|
color: var(--color-text-result-detail-run);
|
||||||
|
font-weight: 600;
|
||||||
|
box-shadow: inset 0 0 0 2px var(--color-primary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -356,7 +398,9 @@ defineExpose({
|
|||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
background-color: var(--color-primary);
|
background-color: var(--color-primary);
|
||||||
color: white;
|
color: var(--color-text-result-detail-run);
|
||||||
|
font-weight: 600;
|
||||||
|
box-shadow: inset 0 0 0 2px var(--color-primary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user