init
This commit is contained in:
293
wx05cb767e6530b48f/components/imgDrag/imgDrag.js
Normal file
293
wx05cb767e6530b48f/components/imgDrag/imgDrag.js
Normal file
@@ -0,0 +1,293 @@
|
||||
var e = require("../../@babel/runtime/helpers/interopRequireDefault")(require("../../@babel/runtime/regenerator")), t = require("../../@babel/runtime/helpers/asyncToGenerator"), a = require("../../@babel/runtime/helpers/toConsumableArray"), i = require("../../@babel/runtime/helpers/defineProperty");
|
||||
|
||||
Component({
|
||||
options: {
|
||||
multipleSlots: !0
|
||||
},
|
||||
properties: {
|
||||
previewSize: {
|
||||
type: Number,
|
||||
value: 100
|
||||
},
|
||||
defaultGoodsId: {
|
||||
type: Number,
|
||||
value: 0,
|
||||
observer: function(e) {
|
||||
console.log("id", e), null == this.data.goodsId ? this.setData({
|
||||
goodsId: e
|
||||
}) : (console.log("来新的了"), this.setData({
|
||||
goodsId: e,
|
||||
newGoods: !0
|
||||
}));
|
||||
}
|
||||
},
|
||||
defaultImgUrlList: {
|
||||
type: Array,
|
||||
value: [],
|
||||
observer: function(e) {
|
||||
null != e && e.length && !this.data.imageUrlList.length ? (console.log("初始化-defaultImgUrlList"),
|
||||
this.setData({
|
||||
imageUrlList: e
|
||||
})) : (console.log("未初始化aaa-defaultImgUrlList"), this.data.newGoods && (console.log("初始化bbb-defaultImgUrlList"),
|
||||
this.setData({
|
||||
imageUrlList: e
|
||||
})));
|
||||
}
|
||||
},
|
||||
defaultImgList: {
|
||||
type: Array,
|
||||
value: [],
|
||||
observer: function(e) {
|
||||
if (null != e && e.length && !this.data.dragImgList.length) {
|
||||
console.log("初始化-defaultImgList");
|
||||
var t = this.getDragImgList(e);
|
||||
this.setUploaPosition(t.length), this.setData({
|
||||
dragImgList: t
|
||||
});
|
||||
} else if (console.log("未初始化aaa-defaultImgList"), this.data.newGoods) {
|
||||
console.log("初始化bbb-defaultImgList");
|
||||
var a = this.getDragImgList(e);
|
||||
this.setUploaPosition(a.length), this.setData({
|
||||
dragImgList: a
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
maxCount: {
|
||||
type: Number,
|
||||
value: 9
|
||||
},
|
||||
columns: {
|
||||
type: Number,
|
||||
value: 3
|
||||
},
|
||||
gap: {
|
||||
type: Number,
|
||||
value: 9
|
||||
},
|
||||
deleteStyle: {
|
||||
type: String,
|
||||
value: ""
|
||||
}
|
||||
},
|
||||
data: {
|
||||
goodsId: null,
|
||||
newGoods: !1,
|
||||
imageUrlList: [],
|
||||
dragImgList: [],
|
||||
containerRes: {
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: 0,
|
||||
height: 0
|
||||
},
|
||||
currentKey: -1,
|
||||
currentIndex: -1,
|
||||
tranX: 0,
|
||||
tranY: 0,
|
||||
uploadPosition: {
|
||||
tranX: 0,
|
||||
tranY: 0
|
||||
}
|
||||
},
|
||||
lifetimes: {
|
||||
ready: function() {
|
||||
var e = this;
|
||||
this.createSelectorQuery().select(".drag-container").boundingClientRect(function(t) {
|
||||
var a, r = t.top, n = t.left;
|
||||
e.setData((i(a = {}, "containerRes.top", r), i(a, "containerRes.left", n), a));
|
||||
}).exec();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
longPress: function(e) {
|
||||
var t = e.mark.index, a = e.touches[0], i = a.pageX, r = a.pageY, n = this.data, o = n.previewSize, s = n.containerRes, l = s.top, u = s.left;
|
||||
this.setData({
|
||||
currentIndex: t,
|
||||
tranX: i - o / 2 - u,
|
||||
tranY: r - o / 2 - l
|
||||
});
|
||||
},
|
||||
touchMove: function(e) {
|
||||
if (!(this.data.currentIndex < 0)) {
|
||||
var t = e.touches[0], a = t.pageX, i = t.pageY, r = this.data, n = r.previewSize, o = r.containerRes, s = o.top, l = a - n / 2 - o.left, u = i - n / 2 - s;
|
||||
this.setData({
|
||||
tranX: l,
|
||||
tranY: u
|
||||
});
|
||||
var g = e.mark.key, c = this.getMoveKey(l, u);
|
||||
g !== c && this.data.currentKey !== g && (this.data.currentKey = g, this.replace(g, c));
|
||||
}
|
||||
},
|
||||
getMoveKey: function(e, t) {
|
||||
var a = this.data, i = a.dragImgList, r = a.previewSize, n = a.columns, o = function(e, t) {
|
||||
var a = Math.round(e / r);
|
||||
return a >= t ? t - 1 : a < 0 ? 0 : a;
|
||||
}, s = n * o(t, Math.ceil(i.length / n)) + o(e, n);
|
||||
return s >= i.length ? i.length - 1 : s;
|
||||
},
|
||||
replace: function(e, t) {
|
||||
var a = this.data.dragImgList;
|
||||
console.log("dragImgList", a), a.forEach(function(a) {
|
||||
e < t ? a.key > e && a.key <= t ? a.key-- : a.key === e && (a.key = t) : e > t && (a.key >= t && a.key < e ? a.key++ : a.key === e && (a.key = t));
|
||||
}), this.getListPosition(a);
|
||||
},
|
||||
getListPosition: function(e) {
|
||||
var t = this.data, a = t.previewSize, i = t.columns, r = t.gap, n = e.map(function(e) {
|
||||
return e.tranX = (a + r) * (e.key % i), e.tranY = Math.floor(e.key / i) * (a + r),
|
||||
e;
|
||||
});
|
||||
this.setData({
|
||||
dragImgList: n
|
||||
}), this.updateEvent(n);
|
||||
},
|
||||
touchEnd: function() {
|
||||
this.setData({
|
||||
tranX: 0,
|
||||
tranY: 0,
|
||||
currentIndex: -1
|
||||
}), this.data.currentKey = -1;
|
||||
},
|
||||
updateEvent: function(e) {
|
||||
console.log(e);
|
||||
var t = a(e).sort(function(e, t) {
|
||||
return e.key - t.key;
|
||||
}).map(function(e) {
|
||||
return {
|
||||
src: e.src,
|
||||
image_id: e.imageId
|
||||
};
|
||||
});
|
||||
this.triggerEvent("updateImageList", {
|
||||
list: t
|
||||
});
|
||||
},
|
||||
preview: function(e) {
|
||||
var t = e.currentTarget.dataset.src;
|
||||
console.log(t);
|
||||
var a = this.data.imageUrlList;
|
||||
console.log(a), wx.previewImage({
|
||||
current: t,
|
||||
urls: a
|
||||
});
|
||||
},
|
||||
uploadImage: function() {
|
||||
var a = this;
|
||||
return t(e.default.mark(function t() {
|
||||
var i, r, n, o, s, l, u;
|
||||
return e.default.wrap(function(e) {
|
||||
for (;;) switch (e.prev = e.next) {
|
||||
case 0:
|
||||
return i = a, r = a.data, n = r.dragImgList, o = r.maxCount, e.prev = 2, e.next = 5,
|
||||
wx.chooseMedia({
|
||||
count: o - n.length,
|
||||
mediaType: [ "image" ],
|
||||
sourceType: [ "album", "camera" ],
|
||||
maxDuration: 30,
|
||||
sizeType: [ "compressed" ],
|
||||
camera: "back"
|
||||
});
|
||||
|
||||
case 5:
|
||||
if (s = e.sent, console.log("res", s), "chooseMedia:ok" == s.errMsg) {
|
||||
e.next = 10;
|
||||
break;
|
||||
}
|
||||
return wx.showToast({
|
||||
title: "上传失败",
|
||||
icon: "none",
|
||||
duration: 3e3
|
||||
}), e.abrupt("return");
|
||||
|
||||
case 10:
|
||||
if ("image" == s.type) {
|
||||
e.next = 13;
|
||||
break;
|
||||
}
|
||||
return wx.showToast({
|
||||
title: "只能上传图片类型",
|
||||
icon: "none",
|
||||
duration: 3e3
|
||||
}), e.abrupt("return");
|
||||
|
||||
case 13:
|
||||
for (wx.showLoading({
|
||||
title: "图片上传中"
|
||||
}), l = s.tempFiles, u = 0; u < l.length; u++) wx.uploadFile({
|
||||
name: "iFile",
|
||||
url: "https://wxminiapp.19year.cn/index.php?s=/api/upload/image&wxapp_id=10001",
|
||||
filePath: l[u].tempFilePath,
|
||||
success: function(e) {
|
||||
console.log("resp", e);
|
||||
var t = JSON.parse(e.data);
|
||||
if (console.log("resp", t), 1 == t.code) {
|
||||
var a = i.data.imageUrlList, r = {
|
||||
file_path: t.data.file_path,
|
||||
image_id: parseInt(t.data.file_id)
|
||||
};
|
||||
console.log("imageObj", r);
|
||||
var o = i.getDragImgList([ r ], !1);
|
||||
n = n.concat(o), i.setUploaPosition(n.length), a.push(t.data.file_path), i.setData({
|
||||
dragImgList: n,
|
||||
imageUrlList: a
|
||||
}), i.updateEvent(n), wx.hideLoading();
|
||||
} else wx.hideLoading(), wx.showModal({
|
||||
title: "提示",
|
||||
content: "上传失败",
|
||||
showCancel: !1
|
||||
});
|
||||
}
|
||||
});
|
||||
e.next = 21;
|
||||
break;
|
||||
|
||||
case 18:
|
||||
e.prev = 18, e.t0 = e.catch(2), console.log(e.t0);
|
||||
|
||||
case 21:
|
||||
case "end":
|
||||
return e.stop();
|
||||
}
|
||||
}, t, null, [ [ 2, 18 ] ]);
|
||||
}))();
|
||||
},
|
||||
getContainerRect: function(e) {
|
||||
var t = this.data, a = t.columns, i = t.previewSize, r = t.maxCount, n = t.gap, o = e === r ? e : e + 1, s = Math.ceil(o / a);
|
||||
return {
|
||||
width: a * i + (a - 1) * n,
|
||||
height: s * i + n * (s - 1)
|
||||
};
|
||||
},
|
||||
getDragImgList: function(e) {
|
||||
var t = !(arguments.length > 1 && void 0 !== arguments[1]) || arguments[1], a = this.data, i = a.dragImgList, r = a.previewSize, n = a.columns, o = a.gap;
|
||||
return e.map(function(e, a) {
|
||||
var s = (t ? 0 : i.length) + a;
|
||||
return {
|
||||
tranX: (r + o) * (s % n),
|
||||
tranY: Math.floor(s / n) * (r + o),
|
||||
src: e.file_path,
|
||||
id: s,
|
||||
key: s,
|
||||
imageId: e.image_id
|
||||
};
|
||||
});
|
||||
},
|
||||
setUploaPosition: function(e) {
|
||||
var t, a = this.data, r = a.previewSize, n = a.columns, o = a.gap, s = {
|
||||
tranX: e % n * (r + o),
|
||||
tranY: Math.floor(e / n) * (r + o)
|
||||
}, l = this.getContainerRect(e), u = l.width, g = l.height;
|
||||
this.setData((i(t = {
|
||||
uploadPosition: s
|
||||
}, "containerRes.width", u), i(t, "containerRes.height", g), t));
|
||||
},
|
||||
deleteImg: function(e) {
|
||||
var t = e.mark.key, a = this.data.dragImgList.filter(function(e) {
|
||||
return e.key !== t;
|
||||
});
|
||||
a.forEach(function(e) {
|
||||
e.key > t && e.key--;
|
||||
}), this.getListPosition(a), this.setUploaPosition(a.length);
|
||||
}
|
||||
}
|
||||
});
|
||||
4
wx05cb767e6530b48f/components/imgDrag/imgDrag.json
Normal file
4
wx05cb767e6530b48f/components/imgDrag/imgDrag.json
Normal file
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
16
wx05cb767e6530b48f/components/imgDrag/imgDrag.wxml
Normal file
16
wx05cb767e6530b48f/components/imgDrag/imgDrag.wxml
Normal file
@@ -0,0 +1,16 @@
|
||||
<view class="drag-container" style="width: {{containerRes.width}}px; height: {{containerRes.height}}px;">
|
||||
<view catch:longpress="longPress" catch:touchend="touchEnd" catch:touchmove="touchMove" class="drag-item drag-item-transition" mark:index="{{index}}" mark:key="{{item.key}}" style="transform: translate({{index===currentIndex?tranX:item.tranX}}px, {{index===currentIndex?tranY:item.tranY}}px); z-index: {{index===currentIndex?10:1}}; width: {{previewSize}}px; height: {{previewSize}}px;" wx:for="{{dragImgList}}" wx:key="id">
|
||||
<image bindtap="preview" class="drag-item-img" data-list="{{dragImgList}}" data-src="{{item.src}}" mode="aspectFill" src="{{item.src}}"></image>
|
||||
<view catch:tap="deleteImg" class="drag-item-delete" mark:key="{{item.key}}">
|
||||
<view class="drag-item-delete_default" style="{{deleteStyle}}">x</view>
|
||||
</view>
|
||||
</view>
|
||||
<view bindtap="uploadImage" class="drag-item drag-upload" hidden="{{dragImgList.length>=maxCount}}" style="transform: translate({{uploadPosition.tranX}}px, {{uploadPosition.tranY}}px); width: {{previewSize}}px; height: {{previewSize}}px;">
|
||||
<view class="drag-upload_solt">
|
||||
<slot name="upload"></slot>
|
||||
</view>
|
||||
<view class="drag-upload_default">
|
||||
<text>+</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
52
wx05cb767e6530b48f/components/imgDrag/imgDrag.wxss
Normal file
52
wx05cb767e6530b48f/components/imgDrag/imgDrag.wxss
Normal file
@@ -0,0 +1,52 @@
|
||||
.drag-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.drag-item {
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.drag-item-transition {
|
||||
transition: transform .1s;
|
||||
transition: transform .1s,-webkit-transform .1s;
|
||||
}
|
||||
|
||||
.drag-item-img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.drag-item-delete {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.drag-item-delete_default {
|
||||
background-color: rgba(0,0,0,.7);
|
||||
border-radius: 0 0 0 12px;
|
||||
color: #fefefe;
|
||||
display: flex;
|
||||
height: 15px;
|
||||
justify-content: center;
|
||||
line-height: 10px;
|
||||
width: 21px;
|
||||
}
|
||||
|
||||
.drag-upload .drag-upload_solt:empty+.drag-upload_default {
|
||||
border: 2px dashed;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
font-size: 70px;
|
||||
font-weight: 700;
|
||||
height: 100%;
|
||||
line-height: 100%;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.drag-upload .drag-upload_default {
|
||||
display: none;
|
||||
}
|
||||
31
wx05cb767e6530b48f/components/shortcut/shortcut.js
Normal file
31
wx05cb767e6530b48f/components/shortcut/shortcut.js
Normal file
@@ -0,0 +1,31 @@
|
||||
var t = getApp();
|
||||
|
||||
Component({
|
||||
options: {
|
||||
multipleSlots: !0
|
||||
},
|
||||
properties: {
|
||||
title: {
|
||||
type: String,
|
||||
value: "弹窗标题"
|
||||
}
|
||||
},
|
||||
data: {
|
||||
isShow: !1,
|
||||
transparent: !0
|
||||
},
|
||||
methods: {
|
||||
_onToggleShow: function(t) {
|
||||
this.setData({
|
||||
isShow: !this.data.isShow,
|
||||
transparent: !1
|
||||
});
|
||||
},
|
||||
_onTargetPage: function(a) {
|
||||
var e = t.getTabBarLinks();
|
||||
wx.switchTab({
|
||||
url: "/" + e[a.detail.target.dataset.index]
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
4
wx05cb767e6530b48f/components/shortcut/shortcut.json
Normal file
4
wx05cb767e6530b48f/components/shortcut/shortcut.json
Normal file
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
22
wx05cb767e6530b48f/components/shortcut/shortcut.wxml
Normal file
22
wx05cb767e6530b48f/components/shortcut/shortcut.wxml
Normal file
@@ -0,0 +1,22 @@
|
||||
<view class="shortcut">
|
||||
<form bindsubmit="_onTargetPage">
|
||||
<button class="nav-item btn-normal {{isShow?'show_60':transparent?'':'hide_60'}}" data-index="0" formType="submit">
|
||||
<text class="iconfont icon-home"></text>
|
||||
</button>
|
||||
</form>
|
||||
<form bindsubmit="_onTargetPage">
|
||||
<button class="nav-item btn-normal {{isShow?'show_40':transparent?'':'hide_40'}}" data-index="2" formType="submit">
|
||||
<text class="iconfont icon-cart"></text>
|
||||
</button>
|
||||
</form>
|
||||
<form bindsubmit="_onTargetPage">
|
||||
<button class="nav-item btn-normal {{isShow?'show_20':transparent?'':'hide_20'}}" data-index="3" formType="submit">
|
||||
<text class="iconfont icon-profile"></text>
|
||||
</button>
|
||||
</form>
|
||||
<form bindsubmit="_onToggleShow">
|
||||
<button class="nav-item nav-item__switch btn-normal {{isShow?'shortcut_click_show':''}}" formType="submit">
|
||||
<text class="iconfont icon-daohang"></text>
|
||||
</button>
|
||||
</form>
|
||||
</view>
|
||||
626
wx05cb767e6530b48f/components/shortcut/shortcut.wxss
Normal file
626
wx05cb767e6530b48f/components/shortcut/shortcut.wxss
Normal file
@@ -0,0 +1,626 @@
|
||||
./utils/iconfont.wxssrpx.container,wx-input {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-family: PingFang-Medium,PingFangSC-Regular,Heiti,Heiti SC,DroidSans,DroidSansFallback,Microsoft YaHei,sans-serif;
|
||||
}
|
||||
|
||||
.b-f {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.tf-180 {
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
|
||||
.tf-90 {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.dis-block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dis-flex {
|
||||
display: flex!important;
|
||||
}
|
||||
|
||||
.flex-box {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.flex-dir-row {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.flex-dir-column {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.flex-x-center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.flex-x-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.flex-x-around {
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.flex-x-end {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.flex-y-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.flex-y-end {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.flex-five {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 50%;
|
||||
}
|
||||
|
||||
.flex-three {
|
||||
float: left;
|
||||
width: 33.3%;
|
||||
}
|
||||
|
||||
.flex-four {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 25%;
|
||||
}
|
||||
|
||||
.t-l {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.t-c {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.t-r {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.p-a {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.p-r {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.fl {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.fr {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.clear::after {
|
||||
clear: both;
|
||||
content: " ";
|
||||
display: table;
|
||||
}
|
||||
|
||||
.oh {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tb-lr-center {
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex!important;
|
||||
display: flex!important;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.f-34 {
|
||||
font-size: 34rpx;
|
||||
}
|
||||
|
||||
.f-32 {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.f-31 {
|
||||
font-size: 31rpx;
|
||||
}
|
||||
|
||||
.f-30 {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.f-29 {
|
||||
font-size: 29rpx;
|
||||
}
|
||||
|
||||
.f-28 {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.f-26 {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.f-25 {
|
||||
font-size: 25rpx;
|
||||
}
|
||||
|
||||
.f-24 {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.f-22 {
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.f-w {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.f-n {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.col-f {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.col-3 {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.col-6 {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.col-7 {
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.col-8 {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.col-9 {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.col-m {
|
||||
color: #ff495e!important;
|
||||
}
|
||||
|
||||
.col-s {
|
||||
color: #be0117!important;
|
||||
}
|
||||
|
||||
.col-green {
|
||||
color: #0ed339!important;
|
||||
}
|
||||
|
||||
.cont-box {
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.cont-bot {
|
||||
margin-bottom: 120rpx;
|
||||
}
|
||||
|
||||
.padding-box {
|
||||
box-sizing: border-box;
|
||||
padding: 0 24rpx;
|
||||
}
|
||||
|
||||
.pl-12 {
|
||||
padding-left: 12px;
|
||||
}
|
||||
|
||||
.pr-12 {
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
||||
.pr-6 {
|
||||
padding-right: 6px;
|
||||
}
|
||||
|
||||
.m-top4 {
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
|
||||
.m-top10 {
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.m-top20 {
|
||||
margin-top: 25rpx;
|
||||
}
|
||||
|
||||
.p-bottom {
|
||||
padding-bottom: 112rpx;
|
||||
}
|
||||
|
||||
.onelist-hidden {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.onelist-hidden,.twolist-hidden {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.twolist-hidden {
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
display: -webkit-box;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.b-r {
|
||||
border-right: 1rpx solid #eee;
|
||||
}
|
||||
|
||||
.b-b {
|
||||
border-bottom: 1rpx solid #eee;
|
||||
}
|
||||
|
||||
.b-t {
|
||||
border-top: 1rpx solid #eee;
|
||||
}
|
||||
|
||||
.ts-1 {
|
||||
transition: all .1s;
|
||||
}
|
||||
|
||||
.ts-2 {
|
||||
transition: all .2s;
|
||||
}
|
||||
|
||||
.ts-3 {
|
||||
transition: all .3s;
|
||||
}
|
||||
|
||||
.ts-5 {
|
||||
transition: all .5s;
|
||||
}
|
||||
|
||||
.btn-normal {
|
||||
background: none;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
display: block;
|
||||
font-size: unset;
|
||||
line-height: normal;
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
padding: 0;
|
||||
text-align: unset;
|
||||
}
|
||||
|
||||
.btn-normal:after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-normal.button-hover {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.shortcut {
|
||||
bottom: 250rpx;
|
||||
line-height: 1;
|
||||
position: fixed;
|
||||
right: 12px;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.nav-item,.shortcut {
|
||||
border-radius: 50%;
|
||||
width: 76rpx;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
background: rgba(0,0,0,.4);
|
||||
bottom: 0;
|
||||
color: #fff;
|
||||
height: 76rpx;
|
||||
line-height: 76rpx;
|
||||
opacity: 0;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
.nav-item text {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.nav-item__switch {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.shortcut_click_show {
|
||||
background: #ff5454;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.show_80 {
|
||||
animation: show_80 .3s forwards;
|
||||
bottom: 384rpx;
|
||||
}
|
||||
|
||||
.show_60 {
|
||||
animation: show_60 .3s forwards;
|
||||
bottom: 288rpx;
|
||||
}
|
||||
|
||||
.show_40 {
|
||||
animation: show_40 .3s forwards;
|
||||
bottom: 192rpx;
|
||||
}
|
||||
|
||||
.show_20 {
|
||||
animation: show_20 .3s forwards;
|
||||
bottom: 96rpx;
|
||||
}
|
||||
|
||||
@-webkit-keyframes show_20 {
|
||||
from {
|
||||
bottom: 0;
|
||||
opacity: 0;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
bottom: 96rpx;
|
||||
opacity: 1;
|
||||
transform: rotate(1turn);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes show_20 {
|
||||
from {
|
||||
bottom: 0;
|
||||
opacity: 0;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
bottom: 96rpx;
|
||||
opacity: 1;
|
||||
transform: rotate(1turn);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes show_40 {
|
||||
from {
|
||||
bottom: 0;
|
||||
opacity: 0;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
bottom: 192rpx;
|
||||
opacity: 1;
|
||||
transform: rotate(1turn);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes show_40 {
|
||||
from {
|
||||
bottom: 0;
|
||||
opacity: 0;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
bottom: 192rpx;
|
||||
opacity: 1;
|
||||
transform: rotate(1turn);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes show_60 {
|
||||
from {
|
||||
bottom: 0;
|
||||
opacity: 0;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
bottom: 288rpx;
|
||||
opacity: 1;
|
||||
transform: rotate(1turn);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes show_60 {
|
||||
from {
|
||||
bottom: 0;
|
||||
opacity: 0;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
bottom: 288rpx;
|
||||
opacity: 1;
|
||||
transform: rotate(1turn);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes show_80 {
|
||||
from {
|
||||
bottom: 0;
|
||||
opacity: 0;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
bottom: 384rpx;
|
||||
opacity: 1;
|
||||
transform: rotate(1turn);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes show_80 {
|
||||
from {
|
||||
bottom: 0;
|
||||
opacity: 0;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
bottom: 384rpx;
|
||||
opacity: 1;
|
||||
transform: rotate(1turn);
|
||||
}
|
||||
}
|
||||
|
||||
.hide_80 {
|
||||
animation: hide_80 .3s;
|
||||
}
|
||||
|
||||
.hide_60,.hide_80 {
|
||||
bottom: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.hide_60 {
|
||||
animation: hide_60 .3s;
|
||||
}
|
||||
|
||||
.hide_40 {
|
||||
animation: hide_40 .3s;
|
||||
}
|
||||
|
||||
.hide_20,.hide_40 {
|
||||
bottom: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.hide_20 {
|
||||
animation: hide_20 .3s;
|
||||
}
|
||||
|
||||
@-webkit-keyframes hide_20 {
|
||||
from {
|
||||
bottom: 96rpx;
|
||||
opacity: 1;
|
||||
transform: rotate(1turn);
|
||||
}
|
||||
|
||||
to {
|
||||
bottom: 0;
|
||||
opacity: 0;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes hide_20 {
|
||||
from {
|
||||
bottom: 96rpx;
|
||||
opacity: 1;
|
||||
transform: rotate(1turn);
|
||||
}
|
||||
|
||||
to {
|
||||
bottom: 0;
|
||||
opacity: 0;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes hide_40 {
|
||||
from {
|
||||
bottom: 192rpx;
|
||||
opacity: 1;
|
||||
transform: rotate(1turn);
|
||||
}
|
||||
|
||||
to {
|
||||
bottom: 0;
|
||||
opacity: 0;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes hide_40 {
|
||||
from {
|
||||
bottom: 192rpx;
|
||||
opacity: 1;
|
||||
transform: rotate(1turn);
|
||||
}
|
||||
|
||||
to {
|
||||
bottom: 0;
|
||||
opacity: 0;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes hide_60 {
|
||||
from {
|
||||
bottom: 288rpx;
|
||||
opacity: 1;
|
||||
transform: rotate(1turn);
|
||||
}
|
||||
|
||||
to {
|
||||
bottom: 0;
|
||||
opacity: 0;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes hide_60 {
|
||||
from {
|
||||
bottom: 288rpx;
|
||||
opacity: 1;
|
||||
transform: rotate(1turn);
|
||||
}
|
||||
|
||||
to {
|
||||
bottom: 0;
|
||||
opacity: 0;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes hide_80 {
|
||||
from {
|
||||
bottom: 384rpx;
|
||||
opacity: 1;
|
||||
transform: rotate(1turn);
|
||||
}
|
||||
|
||||
to {
|
||||
bottom: 0;
|
||||
opacity: 0;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes hide_80 {
|
||||
from {
|
||||
bottom: 384rpx;
|
||||
opacity: 1;
|
||||
transform: rotate(1turn);
|
||||
}
|
||||
|
||||
to {
|
||||
bottom: 0;
|
||||
opacity: 0;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user