Skip to content

M
mes-ui
Commit 7937e1c8 authored by 仇晓婷's avatar 仇晓婷
Browse files
Options

shoucang

parent f4354986
Hide whitespace changes
Inline Side-by-side
Showing with 138 additions and 33 deletions
pages/home/index.vue
View file @ 7937e1c8
......@@ -13,25 +13,27 @@
</p>
</div>
<div class="incon-carousel">
<div class="bg-b">
<Icon type="ios-arrow-back" />
</div>
<div class="bg" v-for="(item,i) in collect" :key="i" @click="toPage(item)">
<Icon :type="item.icon||'md-mail'" />
<p>{{item.title}}</p>
</div>
<div class="bg-l">
<Icon type="ios-arrow-forward" />
<Icon type="ios-arrow-back" class="bg-b" @click="clickLeft" :class="num1<0?'bg-b1':'bg-b'" />
<div
class="list-shoucang"
:style="{'margin-left': num1 * 230 + 'px','transition': 'all .3s ease-out .1s',}"
>
<div class="bg" v-for="(item,i) in collect" :key="i" @click="toPage(item)">
<Icon :type="item.icon||'md-mail'" />
<p>{{item.title}}</p>
</div>
</div>
<Icon
type="ios-arrow-forward"
class="bg-l"
@click="clickRight"
:class="collect.length>8 && showIcon ?'bg-l1':'bg-l'"
/>
</div>
</div>
<div class="card-list">
<!-- <div class="bg-b"> -->
<Icon type="ios-arrow-back" class="bg-b" />
<!-- </div> -->
<div class="list-c">
<Icon type="ios-arrow-back" @click="leftmove" :class="shuliang<=5?'bg-b1':'bg-b'" />
<div class="list-c" :style="{width:'98%','margin-left': num * 740 + 'px',}">
<div
v-for="(item,index) in listTask"
:key="index"
......@@ -47,9 +49,7 @@
</div>
</div>
</div>
<!-- <div class="bg-l"> -->
<Icon type="ios-arrow-forward" class="bg-l" />
<!-- </div> -->
<Icon type="ios-arrow-forward" :class="shuliang>5?'bg-l1':'bg-l'" @click="rightmove" />
</div>
<Row class="table" :gutter="16">
<Col :span="15">
......@@ -171,12 +171,19 @@ export default {
avatorPath: "",
imgPath: true,
setStatistics: true,
show: true,
show1: false,
show2: false,
show3: false,
show4: false,
num: 0,
num1: 0,
shuliang: 0,
showIcon: true,
// listdatas: [],
// index: 0,
// collectNum: this.$store.state.collect.length,
// collectNum1: this.$store.state.collect.length,
};
},
async fetch({ store, params }) {
......@@ -185,13 +192,64 @@ export default {
created() {
this.get();
this.getUserInfoFn();
console.log(this.$store.state.collect);
this.listdatas = this.collect;
// console.log(this.$store.state.collect);
// this.getList();
},
computed: {
...mapState({ collect: "collect" }),
// newList() {
// var arr = [];
// let data = this.listdatas;
// arr = data.slice(0, 8);
// return arr;
// },
},
methods: {
clickLeft() {
if (this.num1 < 0) {
this.num1 += 1;
}
alert(this.num1);
},
clickRight() {
alert("----:" + this.num1);
alert("----:" + this.collect.length);
if (this.num1 + this.collect.length > 8) {
this.num1 -= 1;
// if (this.num1 + this.collect.length == 8) {
// this.showIcon = true;
// return false;
// }
// } else if (
// this.num1 < -(this.collect.length + this.num1) &&
// -(this.collect.length + this.num1) != -0
// ) {
// if (this.num1 + this.collect.length == 8) {
// this.showIcon = true;
// return false;
// }
alert("-====:" + this.num1);
} else {
this.showIcon = false;
}
alert(this.num1);
},
leftmove() {
if (this.shuliang <= 5) {
if (this.num < 0) {
this.num += 1;
this.shuliang += 1;
}
}
},
rightmove() {
if (this.shuliang > 5) {
this.num -= 1;
this.shuliang -= 1;
}
},
getUserInfoFn() {
let userId = this.$store.state.userInfo.userId;
Api.getUserInfo({ id: userId }).then((res) => {
......@@ -215,7 +273,7 @@ export default {
this.$api.get(url).then((r) => {
list = r.result;
list.forEach((data) => {
console.log(data.totalUrl);
// console.log(data.totalUrl);
let ulrt = `http://${address}:` + data.totalUrl;
data.totalUrl = 0;
this.$api.get(ulrt).then((r) => {
......@@ -223,6 +281,7 @@ export default {
});
});
this.listTask = list;
this.shuliang = this.listTask.length;
});
},
goPage(u) {
......@@ -265,40 +324,71 @@ export default {
background: rgba(255, 255, 255, 1);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.16);
border-radius: 8px;
display: flex;
display: -webkit-flex;
.img-header {
margin-top: -10px;
float: left;
}
.ivu-avatar > img {
width: 100%;
height: 100%;
}
.user-text {
float: left;
width: 43%;
p {
margin: 10px 20px;
}
}
.incon-carousel {
float: right;
// margin-top: 8px;
width: 800px;
width: 980px;
position: relative;
text-align: center;
.bg-b {
float: left;
margin-top: 10px;
font-size: 30px;
color: #dcdfe6;
position: absolute;
top: 13px;
left: 0;
}
.bg-b1 {
margin-top: 10px;
font-size: 30px;
color: #a7b8cc;
cursor: pointer;
position: absolute;
top: 13px;
left: 0;
}
.bg-l {
float: right;
margin-top: 10px;
font-size: 30px;
color: #dcdfe6;
position: absolute;
top: 13px;
right: 0;
}
.bg-l1 {
float: right;
margin-top: 10px;
font-size: 30px;
color: #a7b8cc;
cursor: pointer;
position: absolute;
top: 13px;
right: 0;
}
.list-shoucang {
width: 960px;
display: -webkit-inline-box;
display: inline-box;
transition: margin-left 1s;
}
.bg {
text-align: center;
width: 120px;
float: left;
.ivu-icon {
font-size: 35px;
color: #2680eb;
......@@ -322,14 +412,20 @@ export default {
top: 45px;
left: 0;
}
.bg-b1 {
font-size: 30px;
color: #a7b8cc;
width: 35px;
position: absolute;
top: 45px;
left: 0;
cursor: pointer;
}
.list-c {
// display: flex;
// display: -webkit-flex;
// justify-content: space-around;
width: 98%;
transition: margin-left 1s;
margin: 0 auto;
display: -webkit-inline-box;
overflow-x: hidden;
display: inline-box;
}
.bg-l {
position: absolute;
......@@ -339,6 +435,15 @@ export default {
right: 0;
width: 35px;
}
.bg-l1 {
position: absolute;
font-size: 30px;
color: #a7b8cc;
top: 45px;
right: 0;
width: 35px;
cursor: pointer;
}
.img_bg01 {
background-color: #ff9100;
width: 290px;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment