|
@@ -20,7 +20,7 @@
|
|
|
<img class="job-member-avatar" :src="item.icon_url" />
|
|
<img class="job-member-avatar" :src="item.icon_url" />
|
|
|
<div class="job-member-name">
|
|
<div class="job-member-name">
|
|
|
<span class="job-member-name-text">{{ item.nickname }}</span>
|
|
<span class="job-member-name-text">{{ item.nickname }}</span>
|
|
|
- <level-tag :level="item.freework_level" />
|
|
|
|
|
|
|
+ <t-level-tag :level="item.freework_level" />
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="job-member-tips">
|
|
<div class="job-member-tips">
|
|
@@ -44,7 +44,7 @@
|
|
|
<img class="job-member-avatar" :src="item.icon_url" />
|
|
<img class="job-member-avatar" :src="item.icon_url" />
|
|
|
<div class="job-member-name">
|
|
<div class="job-member-name">
|
|
|
<span class="job-member-name-text">{{ item.nickname }}</span>
|
|
<span class="job-member-name-text">{{ item.nickname }}</span>
|
|
|
- <level-tag :level="item.freework_level" />
|
|
|
|
|
|
|
+ <t-level-tag :level="item.freework_level" />
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="job-member-tips">
|
|
<div class="job-member-tips">
|
|
@@ -60,11 +60,11 @@
|
|
|
|
|
|
|
|
<script>
|
|
<script>
|
|
|
// 接单,已认证
|
|
// 接单,已认证
|
|
|
-import LevelTag from "@/components/level-tag.vue";
|
|
|
|
|
|
|
+import TLevelTag from "@/components/t-level-tag.vue";
|
|
|
import moment from "moment";
|
|
import moment from "moment";
|
|
|
export default {
|
|
export default {
|
|
|
components: {
|
|
components: {
|
|
|
- LevelTag
|
|
|
|
|
|
|
+ TLevelTag
|
|
|
},
|
|
},
|
|
|
data() {
|
|
data() {
|
|
|
return {
|
|
return {
|
|
@@ -78,6 +78,45 @@ export default {
|
|
|
this.fetchData();
|
|
this.fetchData();
|
|
|
},
|
|
},
|
|
|
methods: {
|
|
methods: {
|
|
|
|
|
+ setKeyframes: function (len) {
|
|
|
|
|
+ const style = document.createElement('style');
|
|
|
|
|
+ style.setAttribute('type', 'text/css');
|
|
|
|
|
+ document.head.appendChild(style);
|
|
|
|
|
+
|
|
|
|
|
+ const sheet = style.sheet;
|
|
|
|
|
+
|
|
|
|
|
+ let total = len * (256 + 18)
|
|
|
|
|
+ let keyframesStr = `
|
|
|
|
|
+ @keyframes move2 {
|
|
|
|
|
+ from {
|
|
|
|
|
+ -webkit-transform: translateX(0);
|
|
|
|
|
+ transform: translateX(0);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ to {
|
|
|
|
|
+ -webkit-transform: translateX(-${total}px);
|
|
|
|
|
+ transform: translateX(-${total}px);
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ `
|
|
|
|
|
+
|
|
|
|
|
+ let keyframesStr2 = `
|
|
|
|
|
+ @-webkit-keyframes move2 {
|
|
|
|
|
+ from {
|
|
|
|
|
+ -webkit-transform: translateX(0);
|
|
|
|
|
+ transform: translateX(0);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ to {
|
|
|
|
|
+ -webkit-transform: translateX(-${total}px);
|
|
|
|
|
+ transform: translateX(-${total}px);
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ `
|
|
|
|
|
+
|
|
|
|
|
+ sheet.insertRule(keyframesStr, 0);
|
|
|
|
|
+ sheet.insertRule(keyframesStr2, 0);
|
|
|
|
|
+ },
|
|
|
async fetchData() {
|
|
async fetchData() {
|
|
|
let res = await this.$axios.$post("/uapi/cert/cert_user_list");
|
|
let res = await this.$axios.$post("/uapi/cert/cert_user_list");
|
|
|
if (res.status === 1) {
|
|
if (res.status === 1) {
|
|
@@ -103,6 +142,7 @@ export default {
|
|
|
this.firstGroup = res.data.list.slice(0, mid);
|
|
this.firstGroup = res.data.list.slice(0, mid);
|
|
|
this.secondGroup = res.data.list.slice(mid);
|
|
this.secondGroup = res.data.list.slice(mid);
|
|
|
}
|
|
}
|
|
|
|
|
+ this.setKeyframes(this.firstGroup.length)
|
|
|
} else {
|
|
} else {
|
|
|
this.jobMemberList = [];
|
|
this.jobMemberList = [];
|
|
|
}
|
|
}
|
|
@@ -184,33 +224,33 @@ export default {
|
|
|
margin-left: -137px;
|
|
margin-left: -137px;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-@-webkit-keyframes move {
|
|
|
|
|
- from {
|
|
|
|
|
- -webkit-transform: translateX(0);
|
|
|
|
|
- transform: translateX(0);
|
|
|
|
|
- }
|
|
|
|
|
|
|
+// @-webkit-keyframes move {
|
|
|
|
|
+// from {
|
|
|
|
|
+// -webkit-transform: translateX(0);
|
|
|
|
|
+// transform: translateX(0);
|
|
|
|
|
+// }
|
|
|
|
|
|
|
|
- to {
|
|
|
|
|
- -webkit-transform: translateX(-1644px);
|
|
|
|
|
- transform: translateX(-1644px);
|
|
|
|
|
- }
|
|
|
|
|
-}
|
|
|
|
|
|
|
+// to {
|
|
|
|
|
+// -webkit-transform: translateX(-1644px);
|
|
|
|
|
+// transform: translateX(-1644px);
|
|
|
|
|
+// }
|
|
|
|
|
+// }
|
|
|
|
|
|
|
|
-@keyframes move {
|
|
|
|
|
- from {
|
|
|
|
|
- -webkit-transform: translateX(0);
|
|
|
|
|
- transform: translateX(0);
|
|
|
|
|
- }
|
|
|
|
|
|
|
+// @keyframes move {
|
|
|
|
|
+// from {
|
|
|
|
|
+// -webkit-transform: translateX(0);
|
|
|
|
|
+// transform: translateX(0);
|
|
|
|
|
+// }
|
|
|
|
|
|
|
|
- to {
|
|
|
|
|
- -webkit-transform: translateX(-1644px);
|
|
|
|
|
- transform: translateX(-1644px);
|
|
|
|
|
- }
|
|
|
|
|
-}
|
|
|
|
|
|
|
+// to {
|
|
|
|
|
+// -webkit-transform: translateX(-1644px);
|
|
|
|
|
+// transform: translateX(-1644px);
|
|
|
|
|
+// }
|
|
|
|
|
+// }
|
|
|
|
|
|
|
|
.start-animte {
|
|
.start-animte {
|
|
|
- -webkit-animation-name: move;
|
|
|
|
|
- animation-name: move;
|
|
|
|
|
|
|
+ -webkit-animation-name: move2;
|
|
|
|
|
+ animation-name: move2;
|
|
|
-webkit-animation-timing-function: linear;
|
|
-webkit-animation-timing-function: linear;
|
|
|
animation-timing-function: linear;
|
|
animation-timing-function: linear;
|
|
|
-webkit-animation-duration: 30s;
|
|
-webkit-animation-duration: 30s;
|