submit
This commit is contained in:
parent
e710d39e5e
commit
cd161f33f4
@ -31,9 +31,10 @@
|
||||
|
||||
</div>
|
||||
<div class="content3">
|
||||
<div @touchstart="touchStart"
|
||||
@touchmove="touchMove"
|
||||
@touchend="touchEnd" class="wrap1">
|
||||
<div @touchstart="touchStart"
|
||||
@touchmove="touchMove"
|
||||
@touchend="touchEnd"
|
||||
:style="{transform: `translateX(${distanceX}px)`}" class="wrap1">
|
||||
<div class="wrap1_1">
|
||||
<image src="../../static/jx632@3x.png"></image>
|
||||
</div>
|
||||
@ -45,9 +46,9 @@
|
||||
</div>
|
||||
<div class="wrap1_3">
|
||||
<div class="wrap1_3_1">
|
||||
<div class="wrap1_3_1_1">2023.09.28</div>
|
||||
<div class="wrap1_3_1_2">已延期</div>
|
||||
<div class="wrap1_3_1_3">点击补款</div>
|
||||
<div class="wrap1_3_1_1">2023.09.28</div>
|
||||
<div class="wrap1_3_1_2">已延期</div>
|
||||
<div class="wrap1_3_1_3">点击补款</div>
|
||||
</div>
|
||||
<div class="wrap1_3_2">
|
||||
<div class="wrap1_3_2_1">货架号:</div>
|
||||
@ -55,7 +56,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrap1_4">
|
||||
|
||||
<image style="width: 80rpx;height: 80rpx" src="../../static/zu154@3x.png"></image>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -68,16 +69,34 @@ import UImage from "../../uview-ui/components/u--image/u--image.vue";
|
||||
|
||||
export default {
|
||||
name: "index",
|
||||
data(){
|
||||
return {
|
||||
startX: 0,
|
||||
distanceX: 0,
|
||||
windowWidth:0,
|
||||
}
|
||||
},
|
||||
components: {UImage, tabbar},
|
||||
mounted(){
|
||||
uni.getSystemInfo({
|
||||
success:(res)=>{
|
||||
this.windowWidth=res.windowWidth
|
||||
}
|
||||
})
|
||||
},
|
||||
methods:{
|
||||
touchMove(){
|
||||
console.log('touchMove')
|
||||
touchMove(e){
|
||||
this.distanceX = e.touches[0].clientX - this.startX;
|
||||
},
|
||||
touchStart(){
|
||||
console.log('touchStart')
|
||||
touchStart(e){
|
||||
this.startX = e.touches[0].clientX;
|
||||
},
|
||||
touchEnd(){
|
||||
console.log('touchEnd')
|
||||
if (this.distanceX < -((144/750)*this.windowWidth)) {
|
||||
this.distanceX = -((144/750)*this.windowWidth);
|
||||
} else {
|
||||
this.distanceX = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -94,15 +113,29 @@ export default {
|
||||
height: 100vh;
|
||||
.content3{
|
||||
margin-top: 28rpx;
|
||||
overflow: hidden;
|
||||
.wrap1{
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
padding-left: 20rpx;
|
||||
border-radius: 20rpx;
|
||||
background-color: #fff;
|
||||
height: 228rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.wrap1_4{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 228rpx;
|
||||
width: 154rpx;
|
||||
background-color: #B7C0C8;
|
||||
right: -144rpx;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
}
|
||||
.wrap1_3{
|
||||
border-top-right-radius: 20rpx;
|
||||
border-bottom-right-radius: 20rpx;
|
||||
display: flex;
|
||||
margin-left: auto;
|
||||
background-color: #FF4848;
|
||||
|
||||
BIN
static/zu154@3x.png
Normal file
BIN
static/zu154@3x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.2 KiB |
File diff suppressed because one or more lines are too long
@ -158,7 +158,7 @@ __webpack_require__.r(__webpack_exports__);
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
"use strict";
|
||||
|
||||
/* WEBPACK VAR INJECTION */(function(uni) {
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
@ -176,23 +176,43 @@ var UImage = function UImage() {
|
||||
};
|
||||
var _default = {
|
||||
name: "index",
|
||||
data: function data() {
|
||||
return {
|
||||
startX: 0,
|
||||
distanceX: 0,
|
||||
windowWidth: 0
|
||||
};
|
||||
},
|
||||
components: {
|
||||
UImage: UImage,
|
||||
tabbar: tabbar
|
||||
},
|
||||
mounted: function mounted() {
|
||||
var _this = this;
|
||||
uni.getSystemInfo({
|
||||
success: function success(res) {
|
||||
_this.windowWidth = res.windowWidth;
|
||||
}
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
touchMove: function touchMove() {
|
||||
console.log('touchMove');
|
||||
touchMove: function touchMove(e) {
|
||||
this.distanceX = e.touches[0].clientX - this.startX;
|
||||
},
|
||||
touchStart: function touchStart() {
|
||||
console.log('touchStart');
|
||||
touchStart: function touchStart(e) {
|
||||
this.startX = e.touches[0].clientX;
|
||||
},
|
||||
touchEnd: function touchEnd() {
|
||||
console.log('touchEnd');
|
||||
if (this.distanceX < -(144 / 750 * this.windowWidth)) {
|
||||
this.distanceX = -(144 / 750 * this.windowWidth);
|
||||
} else {
|
||||
this.distanceX = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
exports.default = _default;
|
||||
/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! ./node_modules/@dcloudio/uni-mp-weixin/dist/index.js */ 2)["default"]))
|
||||
|
||||
/***/ }),
|
||||
|
||||
|
||||
@ -1 +1 @@
|
||||
<view class="order-goods _div data-v-c0c42e9e" style="{{'background:'+('url('+'../../static/bbj1@3x.png'+')')+';'}}"><view class="content1 _div data-v-c0c42e9e"><view class="wrap1 _div data-v-c0c42e9e"><tm-menu vue-id="541fae75-1" list="{{['已延期','即将到期']}}" class="data-v-c0c42e9e" bind:__l="__l" vue-slots="{{['default']}}"><view class="wrap1_1 _div data-v-c0c42e9e"><view class="wrap1_1_1 _div data-v-c0c42e9e">全部状态</view><image style="width:12rpx;height:8rpx;" src="../../static/dbx2@3x.png" class="data-v-c0c42e9e"></image></view></tm-menu></view><view class="wrap2 _div data-v-c0c42e9e"><view class="wrap2_1 _div data-v-c0c42e9e">订单库</view><view class="wrap2_2 _div data-v-c0c42e9e">*滑动删除</view><view class="_div data-v-c0c42e9e"></view></view><view class="wrap3 _div data-v-c0c42e9e">上传</view></view><view class="content2 _div data-v-c0c42e9e"><view class="wrap1 _div data-v-c0c42e9e"><view class="wrap1_1 _div data-v-c0c42e9e"><image src="../../static/zu1@3x.png" class="data-v-c0c42e9e"></image></view><view class="wrap1_2 _div data-v-c0c42e9e"></view><input placeholder-style="color: #C7C7C7;font-size: 20rpx;" placeholder="在此处搜索您的订单" class="data-v-c0c42e9e"/></view><view class="wrap2 _div data-v-c0c42e9e">搜索</view></view><view class="content3 _div data-v-c0c42e9e"><view data-event-opts="{{[['touchstart',[['touchStart',['$event']]]],['touchmove',[['touchMove',['$event']]]],['touchend',[['touchEnd',['$event']]]]]}}" class="wrap1 _div data-v-c0c42e9e" bindtouchstart="__e" bindtouchmove="__e" bindtouchend="__e"><view class="wrap1_1 _div data-v-c0c42e9e"><image src="../../static/jx632@3x.png" class="data-v-c0c42e9e"></image></view><view class="wrap1_2 _div data-v-c0c42e9e"><view class="wrap1_2_1 _div data-v-c0c42e9e">画作的名称</view><view class="wrap1_2_2 _div data-v-c0c42e9e">订单号:0129181232101</view><view class="wrap1_2_3 _div data-v-c0c42e9e">16平尺</view><view class="wrap1_2_4 _div data-v-c0c42e9e">2023.09.01-2023.09.18</view></view><view class="wrap1_3 _div data-v-c0c42e9e"><view class="wrap1_3_1 _div data-v-c0c42e9e"><view class="wrap1_3_1_1 _div data-v-c0c42e9e">2023.09.28</view><view class="wrap1_3_1_2 _div data-v-c0c42e9e">已延期</view><view class="wrap1_3_1_3 _div data-v-c0c42e9e">点击补款</view></view><view class="wrap1_3_2 _div data-v-c0c42e9e"><view class="wrap1_3_2_1 _div data-v-c0c42e9e">货架号:</view><view class="wrap1_3_2_2 _div data-v-c0c42e9e">12-02-13</view></view></view><view class="wrap1_4 _div data-v-c0c42e9e"></view></view></view><tabbar vue-id="541fae75-2" current="{{1}}" class="data-v-c0c42e9e" bind:__l="__l"></tabbar></view>
|
||||
<view class="order-goods _div data-v-c0c42e9e" style="{{'background:'+('url('+'../../static/bbj1@3x.png'+')')+';'}}"><view class="content1 _div data-v-c0c42e9e"><view class="wrap1 _div data-v-c0c42e9e"><tm-menu vue-id="541fae75-1" list="{{['已延期','即将到期']}}" class="data-v-c0c42e9e" bind:__l="__l" vue-slots="{{['default']}}"><view class="wrap1_1 _div data-v-c0c42e9e"><view class="wrap1_1_1 _div data-v-c0c42e9e">全部状态</view><image style="width:12rpx;height:8rpx;" src="../../static/dbx2@3x.png" class="data-v-c0c42e9e"></image></view></tm-menu></view><view class="wrap2 _div data-v-c0c42e9e"><view class="wrap2_1 _div data-v-c0c42e9e">订单库</view><view class="wrap2_2 _div data-v-c0c42e9e">*滑动删除</view><view class="_div data-v-c0c42e9e"></view></view><view class="wrap3 _div data-v-c0c42e9e">上传</view></view><view class="content2 _div data-v-c0c42e9e"><view class="wrap1 _div data-v-c0c42e9e"><view class="wrap1_1 _div data-v-c0c42e9e"><image src="../../static/zu1@3x.png" class="data-v-c0c42e9e"></image></view><view class="wrap1_2 _div data-v-c0c42e9e"></view><input placeholder-style="color: #C7C7C7;font-size: 20rpx;" placeholder="在此处搜索您的订单" class="data-v-c0c42e9e"/></view><view class="wrap2 _div data-v-c0c42e9e">搜索</view></view><view class="content3 _div data-v-c0c42e9e"><view data-event-opts="{{[['touchstart',[['touchStart',['$event']]]],['touchmove',[['touchMove',['$event']]]],['touchend',[['touchEnd',['$event']]]]]}}" class="wrap1 _div data-v-c0c42e9e" style="{{'transform:'+('translateX('+distanceX+'px)')+';'}}" bindtouchstart="__e" bindtouchmove="__e" bindtouchend="__e"><view class="wrap1_1 _div data-v-c0c42e9e"><image src="../../static/jx632@3x.png" class="data-v-c0c42e9e"></image></view><view class="wrap1_2 _div data-v-c0c42e9e"><view class="wrap1_2_1 _div data-v-c0c42e9e">画作的名称</view><view class="wrap1_2_2 _div data-v-c0c42e9e">订单号:0129181232101</view><view class="wrap1_2_3 _div data-v-c0c42e9e">16平尺</view><view class="wrap1_2_4 _div data-v-c0c42e9e">2023.09.01-2023.09.18</view></view><view class="wrap1_3 _div data-v-c0c42e9e"><view class="wrap1_3_1 _div data-v-c0c42e9e"><view class="wrap1_3_1_1 _div data-v-c0c42e9e">2023.09.28</view><view class="wrap1_3_1_2 _div data-v-c0c42e9e">已延期</view><view class="wrap1_3_1_3 _div data-v-c0c42e9e">点击补款</view></view><view class="wrap1_3_2 _div data-v-c0c42e9e"><view class="wrap1_3_2_1 _div data-v-c0c42e9e">货架号:</view><view class="wrap1_3_2_2 _div data-v-c0c42e9e">12-02-13</view></view></view><view class="wrap1_4 _div data-v-c0c42e9e"><image style="width:80rpx;height:80rpx;" src="../../static/zu154@3x.png" class="data-v-c0c42e9e"></image></view></view></view><tabbar vue-id="541fae75-2" current="{{1}}" class="data-v-c0c42e9e" bind:__l="__l"></tabbar></view>
|
||||
Loading…
Reference in New Issue
Block a user