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