fix: 修复问题。
This commit is contained in:
@@ -83,7 +83,7 @@
|
|||||||
<span class="tool-sort tool-drag-handle">排序: {{ tool.sortOrder || 0 }}</span>
|
<span class="tool-sort tool-drag-handle">排序: {{ tool.sortOrder || 0 }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="tool-url-row">
|
<div class="tool-url-row">
|
||||||
<div class="tool-url" @click="openToolUrl(tool.url, $event)" title="点击打开">{{ tool.url }}</div>
|
<div class="tool-url" @click="openToolUrl(tool.url, $event)" :title="tool.url">{{ tool.url }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="tool-footer">
|
<div class="tool-footer">
|
||||||
<div class="tool-actions" @click.stop>
|
<div class="tool-actions" @click.stop>
|
||||||
@@ -287,7 +287,6 @@ export default {
|
|||||||
{ name: '紫蓝', value: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' },
|
{ name: '紫蓝', value: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' },
|
||||||
{ name: '青色', value: 'linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%)' },
|
{ name: '青色', value: 'linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%)' },
|
||||||
{ name: '蓝绿', value: 'linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)' },
|
{ name: '蓝绿', value: 'linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)' },
|
||||||
{ name: '深紫', value: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' },
|
|
||||||
{ name: '粉蓝', value: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)' },
|
{ name: '粉蓝', value: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)' },
|
||||||
{ name: '深绿', value: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)' },
|
{ name: '深绿', value: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)' },
|
||||||
{ name: '淡紫', value: 'linear-gradient(135deg, #fbc2eb 0%, #a6c1ee 100%)' },
|
{ name: '淡紫', value: 'linear-gradient(135deg, #fbc2eb 0%, #a6c1ee 100%)' },
|
||||||
@@ -1178,6 +1177,9 @@ export default {
|
|||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
background: @primary-gradient;
|
background: @primary-gradient;
|
||||||
padding-top: 64px; // 为固定头部预留空间
|
padding-top: 64px; // 为固定头部预留空间
|
||||||
|
width: 100%; // 确保页面宽度不超出
|
||||||
|
overflow-x: hidden; // 防止横向滚动
|
||||||
|
box-sizing: border-box; // 包含padding在内
|
||||||
}
|
}
|
||||||
|
|
||||||
.manage-header {
|
.manage-header {
|
||||||
@@ -1252,11 +1254,11 @@ export default {
|
|||||||
.fixed-section {
|
.fixed-section {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 64px; // 紧贴header底部
|
top: 64px; // 紧贴header底部
|
||||||
left: 0;
|
left: 8px; // 与容器左边距保持一致
|
||||||
right: 0;
|
right: 8px; // 与容器右边距保持一致
|
||||||
z-index: 999;
|
z-index: 999;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
border-radius: 0;
|
border-radius: 12px; // 添加圆角,与其他section保持一致
|
||||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||||
padding: 20px; // PC端padding
|
padding: 20px; // PC端padding
|
||||||
}
|
}
|
||||||
@@ -1267,6 +1269,8 @@ export default {
|
|||||||
padding: 10px 12px;
|
padding: 10px 12px;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
||||||
|
max-width: 100%; // 防止超出屏幕宽度
|
||||||
|
box-sizing: border-box; // 包含padding和border在内
|
||||||
|
|
||||||
.section-header {
|
.section-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -1547,6 +1551,8 @@ export default {
|
|||||||
|
|
||||||
.tool-group {
|
.tool-group {
|
||||||
margin-bottom: 24px;
|
margin-bottom: 24px;
|
||||||
|
max-width: 100%; // 防止超出屏幕宽度
|
||||||
|
overflow: hidden; // 防止内容溢出
|
||||||
|
|
||||||
&:last-child {
|
&:last-child {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
@@ -1572,6 +1578,7 @@ export default {
|
|||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
|
max-width: 100%; // 防止grid布局超出
|
||||||
|
|
||||||
.tool-item {
|
.tool-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -1582,6 +1589,9 @@ export default {
|
|||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
border: 1px solid #e5e7eb;
|
border: 1px solid #e5e7eb;
|
||||||
transition: all 0.2s ease;
|
transition: all 0.2s ease;
|
||||||
|
max-width: 100%; // 限制最大宽度
|
||||||
|
overflow: hidden; // 隐藏溢出内容
|
||||||
|
box-sizing: border-box; // 包含padding和border
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background: #f3f4f6;
|
background: #f3f4f6;
|
||||||
@@ -1669,6 +1679,8 @@ export default {
|
|||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
border: 1px solid rgba(102, 126, 234, 0.1);
|
border: 1px solid rgba(102, 126, 234, 0.1);
|
||||||
transition: all 0.2s ease;
|
transition: all 0.2s ease;
|
||||||
|
max-width: 100%; // 限制最大宽度
|
||||||
|
overflow: hidden; // 隐藏溢出内容
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background: linear-gradient(135deg, #f0f4ff 0%, #e8f0ff 100%);
|
background: linear-gradient(135deg, #f0f4ff 0%, #e8f0ff 100%);
|
||||||
@@ -1688,6 +1700,7 @@ export default {
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
min-width: 0; // 关键:允许flex子项缩小到0
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: #5568d3;
|
color: #5568d3;
|
||||||
@@ -2152,11 +2165,13 @@ button {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.manage-container {
|
.manage-container {
|
||||||
padding: 16px 8px;
|
padding: 16px 12px; // 手机端增加左右内边距,与固定区域保持一致
|
||||||
padding-top: 200px; // 手机端为固定区域预留更多空间
|
padding-top: 200px; // 手机端为固定区域预留更多空间
|
||||||
|
|
||||||
// 手机端固定区域增加左右padding
|
// 手机端固定区域增加左右padding
|
||||||
.fixed-section {
|
.fixed-section {
|
||||||
|
left: 12px !important; // 与容器左边距保持一致
|
||||||
|
right: 12px !important; // 与容器右边距保持一致
|
||||||
padding-left: 12px !important;
|
padding-left: 12px !important;
|
||||||
padding-right: 12px !important;
|
padding-right: 12px !important;
|
||||||
}
|
}
|
||||||
@@ -2171,14 +2186,16 @@ button {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.tool-list {
|
.tool-list {
|
||||||
grid-template-columns: 1fr !important;
|
grid-template-columns: 1fr !important; // 手机端单列布局,自适应屏幕宽度
|
||||||
|
|
||||||
.tool-item {
|
.tool-item {
|
||||||
padding: 12px; // 增加padding防止按钮被截断
|
padding: 12px; // 增加padding防止按钮被截断
|
||||||
overflow: visible; // 允许内容超出
|
overflow: visible; // 允许内容超出
|
||||||
|
width: 100%; // 确保占满容器宽度
|
||||||
|
box-sizing: border-box; // 包含padding和border在内
|
||||||
|
|
||||||
.tool-url-row {
|
.tool-url-row {
|
||||||
padding: 6px 0;
|
padding: 6px 10px; // 手机端增加左右内边距,确保网址不贴边
|
||||||
}
|
}
|
||||||
|
|
||||||
.tool-footer {
|
.tool-footer {
|
||||||
|
|||||||
Reference in New Issue
Block a user