手机登录/注册
X
登录
纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端。
能实现触屏焦点图、触屏Tab切换、触屏轮播图切换等常用效果。
开源、免费、稳定、使用简单、功能强大,是架构移动终端网站的重要选择!
npm i -S swiper@5.4.5
import Swiper from "swiper";
import "swiper/css/swiper.min.css";
<template>
<div class="grand-task">
<div class="swiper-container grand-task-figure-lists-box">
<div class="swiper-wrapper grand-task-figure-lists">
<div
v-for="(item, index) in grand_task_finish_list"
:key="index"
class="swiper-slide grand-task-figure-list"
>
<img :src="item.image" class="grand-task-figure-list-img" />
</div>
</div>
</div>
</div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
import { getAchievement } from "@/apis/index";
import { openOtherPages } from "@/utils/long";
import DailyTask from "@/components/main-content/grand-task/daily-task";
import Swiper from "swiper";
import "swiper/css/swiper.min.css";
export default {
name: "GrandTask",
components: {
DailyTask,
},
data() {
return {
progress: {},
// 是否显示
showNumber: true,
};
},
computed: {
...mapState(["commonState", "init", "cacheData"]),
selected() {
return this.commonState.isBlessingBag;
},
uInfo() {
return this.init.uInfo;
},
grand_task_finish_list() {
return this.cacheData.grand_task_finish_list;
},
grand_task_list() {
return this.cacheData.grand_task_list;
},
},
mounted() {
this.getList();
},
methods: {
...mapMutations([
"updateCommonState",
"updateBounced",
"updateInitUserInfo",
"updateCacheData",
]),
async getList() {
try {
const res = await getAchievement();
const status = res.data.response_status;
const data = res.data.response_data;
if (status.code === 0) {
console.log(data);
// 已获取到成就任务 / 成就任务列表
this.updateCacheData({
grand_task_finish_list: data.finish_list,
grand_task_list: data.list,
});
console.log(this.progress);
this.$nextTick(() => {
// 创建一个swiper实例来实现轮播
// eslint-disable-next-line no-unused-vars
const swiper = new Swiper(".swiper-container", {
// 循环播放
autoplay: true,
slidesPerView: 4,
paginationClickable: true,
spaceBetween: 20,
// 切换效果
// effect: "fade",
// 撞击模式
freeMode: {
momentumVelocityRatio: 5,
},
});
});
} else {
this.toast(status.error.replace(/\[.*?\]/g, ""));
}
} catch (e) {
this.toast(e);
}
},
sowTOP10(id) {
console.log(id);
// 有数据,才弹框
if (this.list[id - 1].uInfos.length) {
this.updateCommonState({ top10_index: id - 1 });
this.updateBounced({ showBouncedTop10: true });
}
},
goActivity(url) {
openOtherPages(url);
},
onDetails(id) {
this.updateCommonState({ top10_index: id - 1 });
this.updateBounced({ showBouncedInformationCenter: true });
},
goGrandAchievement() {
this.$router.push("/GrandAchievement");
},
onAppointment(isCan) {
if (!isCan) {
console.log("111");
return;
}
alert("我要预约了");
},
onSwitch(tab) {
console.log(tab);
this.updateCommonState({ isBlessingBag: tab });
},
},
};
</script>
<style lang="scss">
.grand-task {
z-index: 30;
box-sizing: border-box;
width: 6.9rem;
height: 10.4rem;
margin: -0.04rem auto 0;
padding: 0.2rem;
color: #fff;
font-weight: bold;
font-size: 0.36rem;
line-height: 0.73rem;
text-align: center;
background-image: url(~@/img/main-content-2.png);
background-size: 100% 100%;
.grand-task-title {
position: relative;
width: 3rem;
height: 0.5rem;
color: #f1cc5e;
font-weight: bold;
font-size: 0.36rem;
line-height: 0.5rem;
background: linear-gradient(0deg, #ffe38b 0%, #e0e0ba 100%);
background-clip: text;
-webkit-text-fill-color: transparent;
&::after {
position: absolute;
top: 0.15rem;
left: 2.4rem;
width: 0.45rem;
height: 0.15rem;
background: url(~@/img/annual-event-title-3.png);
background-size: 100% 100%;
content: "";
}
&::before {
position: absolute;
top: 0.15rem;
right: 2.4rem;
width: 0.45rem;
height: 0.15rem;
background: url(~@/img/annual-event-title-3.png);
background-size: 100% 100%;
transform: scaleX(-1);
content: "";
}
}
.grand-task-figure {
.grand-task-figure-top {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
.grand-task-figure-ico {
width: 2.29rem;
height: 0.61rem;
}
}
.grand-task-figure-lists-box {
width: 6.4rem;
height: 1.4rem;
margin: 0.2rem 0 -0.1rem;
padding: 0 0.1rem;
.grand-task-figure-lists {
.grand-task-figure-list {
// flex-shrink: 0;
width: 1.28rem;
height: 1.28rem;
// margin: 0 0.1rem 0 0;
background: url(~@/img/grand-task-1.png);
background-size: 100% 100%;
.grand-task-figure-list-img {
width: 1rem;
height: 1rem;
margin: 0.14rem;
}
}
}
}
.grand-task-figure-lists-p {
position: relative;
display: inline-block;
width: 3.8rem;
height: 0.26rem;
margin: 0.3rem auto;
color: #f1cc5e;
font-size: 0.26rem;
line-height: 0.26rem;
text-align: center;
background: linear-gradient(0deg, #ffe38b 0%, #e0e0ba 100%);
background-clip: text;
-webkit-text-fill-color: transparent;
&::after {
position: absolute;
top: 0.08rem;
right: 0;
width: 0.41rem;
height: 0.15rem;
background: url(~@/img/annual-event-title-3.png);
background-size: 100% 100%;
content: "";
}
&::before {
position: absolute;
top: 0.08rem;
left: 0;
width: 0.41rem;
height: 0.15rem;
background: url(~@/img/annual-event-title-3.png);
background-size: 100% 100%;
transform: scaleX(-1);
content: "";
}
}
}
.grand-task-switch {
display: flex;
align-items: center;
justify-content: center;
.grand-task-select {
z-index: 29;
flex-shrink: 0;
width: 3.42rem;
height: 0.95rem;
margin: 0 0 0 -0.1rem;
}
}
}
</style>