|
|
@@ -32,7 +32,7 @@
|
|
|
</view>
|
|
|
<view
|
|
|
v-if="index > 0"
|
|
|
- style="right: 375upx"
|
|
|
+ style="right: 375upx; top: 87upx"
|
|
|
class="move-btn move-btn-top"
|
|
|
:class="{ disabled: isOperating }"
|
|
|
@click.stop="topFn(item.id)"
|
|
|
@@ -43,7 +43,7 @@
|
|
|
|
|
|
<view
|
|
|
v-if="index < list.data.length - 1"
|
|
|
- style="right: 290upx"
|
|
|
+ style="right: 290upx; top: 87upx"
|
|
|
class="move-btn move-btn-bottom"
|
|
|
:class="{ disabled: isOperating }"
|
|
|
@click.stop="bottomFn(item.id)"
|
|
|
@@ -52,11 +52,11 @@
|
|
|
<zui-svg-icon icon="general-bottom-line" color="#fff" :width="22" :height="22" style="margin-top: 10upx" />
|
|
|
</view>
|
|
|
|
|
|
- <text style="right: 205upx" class="move-btn move-btn-up" :class="{ disabled: isOperating }" @click.stop="upFn(item.id)" title="上移一位"
|
|
|
+ <text style="right: 205upx; top: 87upx" class="move-btn move-btn-up" :class="{ disabled: isOperating }" @click.stop="upFn(item.id)" title="上移一位"
|
|
|
>↑</text
|
|
|
>
|
|
|
<text
|
|
|
- style="right: 120upx"
|
|
|
+ style="right: 120upx; top: 87upx"
|
|
|
class="move-btn move-btn-down"
|
|
|
:class="{ disabled: isOperating }"
|
|
|
@click.stop="downFn(item.id)"
|
|
|
@@ -72,7 +72,8 @@
|
|
|
@touchmove="dragMove"
|
|
|
@touchend="dragEnd"
|
|
|
>
|
|
|
- <text class="drag-tip">按住拖拽</text>
|
|
|
+ <text class="drag-tip">按住</text>
|
|
|
+ <text class="drag-tip">拖拽</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</block>
|
|
|
@@ -755,31 +756,45 @@ export default {
|
|
|
|
|
|
.drag-handle {
|
|
|
position: absolute;
|
|
|
- top: 88upx;
|
|
|
- right: 14upx;
|
|
|
+ top: 77upx;
|
|
|
+ right: 6upx;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
- width: 60upx;
|
|
|
- height: 60upx;
|
|
|
- border-radius: 8upx;
|
|
|
+ width: 76upx;
|
|
|
+ height: 76upx;
|
|
|
+ border-radius: 50%;
|
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
- box-shadow: 0 2upx 8upx rgba(102, 126, 234, 0.2);
|
|
|
+ box-shadow: 0 4upx 16upx rgba(102, 126, 234, 0.4);
|
|
|
-webkit-touch-callout: none;
|
|
|
-webkit-user-select: none;
|
|
|
user-select: none;
|
|
|
touch-action: none;
|
|
|
- border: 1px solid rgba(255, 255, 255, 0.2);
|
|
|
+ border: 2px solid rgba(255, 255, 255, 0.3);
|
|
|
+ transition: all 0.2s ease;
|
|
|
+ cursor: grab;
|
|
|
+
|
|
|
+ &:active {
|
|
|
+ transform: scale(0.92);
|
|
|
+ cursor: grabbing;
|
|
|
+ box-shadow: 0 2upx 10upx rgba(102, 126, 234, 0.5);
|
|
|
+ }
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ transform: translateY(-3upx);
|
|
|
+ box-shadow: 0 6upx 20upx rgba(102, 126, 234, 0.45);
|
|
|
+ }
|
|
|
|
|
|
.drag-tip {
|
|
|
- font-size: 18upx;
|
|
|
+ font-size: 19upx;
|
|
|
color: rgba(255, 255, 255, 0.95);
|
|
|
font-weight: 700;
|
|
|
letter-spacing: 0.5upx;
|
|
|
- line-height: 1.2;
|
|
|
+ line-height: 1.4;
|
|
|
text-align: center;
|
|
|
word-break: break-word;
|
|
|
+ display: block;
|
|
|
}
|
|
|
}
|
|
|
|
