Skip to content

P
pica-professional-exam
提交 2a053fb3 编写于 作者: guangjun.yang's avatar guangjun.yang
浏览文件
操作

添加动画等

上级 d94953a4
隐藏空白字符变更
内嵌 并排
正在显示 包含 298 行增加 和 80 行删除
index.html
浏览文件 @ 2a053fb3
......@@ -11,8 +11,8 @@
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<script src='http://192.168.31.113:8081/src/assets/swiper.animate1.0.3.min.js'></script>
<link rel="stylesheet" href="http://192.168.31.113:8081/src/assets/animate.min.css">
<script src='https://file.yunqueyi.com/h5/js/swiper.animate1.0.3.min.js'></script>
<link rel="stylesheet" href="https://file.yunqueyi.com/h5/css/animate.min.css">
<title>云鹊·医</title>
</head>
<body id="appBody">
......
package-lock.json
浏览文件 @ 2a053fb3
......@@ -4455,6 +4455,15 @@
}
}
},
"dom7": {
"version": "3.0.0",
"resolved": "http://192.168.110.93:4873/dom7/-/dom7-3.0.0.tgz",
"integrity": "sha1-uGHOXWemvs16qjrQKUL/FLEkAzE=",
"dev": true,
"requires": {
"ssr-window": "^3.0.0-alpha.1"
}
},
"domain-browser": {
"version": "1.2.0",
"resolved": "http://192.168.110.93:4873/domain-browser/-/domain-browser-1.2.0.tgz",
......@@ -9626,6 +9635,12 @@
}
}
},
"ssr-window": {
"version": "3.0.0",
"resolved": "http://192.168.110.93:4873/ssr-window/-/ssr-window-3.0.0.tgz",
"integrity": "sha1-/VuCgBY4lD4MxwTEaRgBQ1r3rDc=",
"dev": true
},
"static-extend": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/static-extend/-/static-extend-0.1.2.tgz",
......@@ -9830,6 +9845,16 @@
"whet.extend": "~0.9.9"
}
},
"swiper": {
"version": "6.4.10",
"resolved": "http://192.168.110.93:4873/swiper/-/swiper-6.4.10.tgz",
"integrity": "sha1-0qi85HFxe3cNAF/NXor0KsYwysY=",
"dev": true,
"requires": {
"dom7": "^3.0.0",
"ssr-window": "^3.0.0"
}
},
"tapable": {
"version": "0.1.10",
"resolved": "http://192.168.110.93:4873/tapable/-/tapable-0.1.10.tgz",
......@@ -10308,11 +10333,6 @@
"resolved": "https://registry.npmjs.org/vue/-/vue-2.5.17.tgz",
"integrity": "sha512-mFbcWoDIJi0w0Za4emyLiW72Jae0yjANHbCVquMKijcavBGypqlF7zHRgMa5k4sesdv7hv2rB4JPdZfR+TPfhQ=="
},
"vue-awesome-swiper": {
"version": "4.1.1",
"resolved": "http://192.168.110.93:4873/vue-awesome-swiper/-/vue-awesome-swiper-4.1.1.tgz",
"integrity": "sha1-j3qyIa0AMCHXVrhqphj0KZJJAP4="
},
"vue-hot-reload-api": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.1.tgz",
......
src/components/annual-summary/card-1.vue
浏览文件 @ 2a053fb3
......@@ -4,11 +4,13 @@
<div class="bgi-wrapper"><img src="~@/images/annual/page-1-back.png" alt="" /></div>
<section class="detail">
<p class="title">尊敬的<span class="shareanimate" swiper-animate-effect="shareanimate" swiper-animate-duration="4s" swiper-animate-delay="0s">齐天大圣</span>医生</p>
<p style="line-height: 2;">我们在一起已经<span class="fbig6 cg2">100</span>天啦</p>
<p class="mt-15"><span class="cg2 b">2018</span> 年 <span class="cg2 b">12</span> 月 <span class="cg2 b"> 1 </span>日</p>
<p>第一次遇见您</p>
<p class="mt-20"><span class="cg2 b">陈半仙</span> 老师的<span class="cg2 b">《我的大学》</span>课程</p>
<p>是您学习的第一门课；</p>
<article class="shareanimate">
<p style="line-height: 2;">我们在一起已经<span class="fbig6 cg2">100</span>天啦</p>
<p class="mt-15"><span class="cg2 b">2018</span> 年 <span class="cg2 b">12</span> 月 <span class="cg2 b"> 1 </span>日</p>
<p>第一次遇见您</p>
<p class="mt-20"><span class="cg2 b">陈半仙</span> 老师的<span class="cg2 b">《我的大学》</span>课程</p>
<p>是您学习的第一门课；</p>
</article>
</section>
</div>
</template>
......@@ -65,62 +67,5 @@ export default {
line-height: 1.8;
}
}
.shareanimate {
animation: shareani 4s ease;
-webkit-animation: shareani 4s ease;
-moz-animation: shareani 4s ease;
-ms-animation: shareani 4s ease;
}
@keyframes shareani {
0% {
left: 50%;
top: 74%;
opacity: 0.1;
}
100% {
left: 85%;
top: 0;
opacity: 1;
}
}
@-webkit-keyframes shareani {
0% {
left: 50%;
top: 74%;
opacity: 0.8;
}
100% {
left: 85%;
top: 0;
opacity: 0;
}
}
@-moz-keyframes shareani {
0% {
left: 50%;
top: 74%;
opacity: 0.8;
}
100% {
left: 85%;
top: 0;
opacity: 0;
}
}
@-ms-keyframes shareani {
0% {
left: 50%;
top: 74%;
opacity: 0.8;
}
100% {
left: 85%;
top: 0;
opacity: 0;
}
}
}
</style>
\ No newline at end of file
src/components/annual-summary/card-2.vue
浏览文件 @ 2a053fb3
......@@ -3,12 +3,14 @@
<Logo></Logo>
<div class="bgi-wrapper"><img src="~@/images/annual/page-2-back.png" alt="" /></div>
<section class="detail">
<p>2020年，您一共学习了</p>
<p class="mt-10"><span class="fbig6 cg2">100</span> 分钟</p>
<p><span class="fbig6 cg2">100</span> 课程</p>
<p><span class="fbig6 cg2">100</span> 文章</p>
<p class="mt-5">您最关注的学科</p>
<p class="cg2 b">内科内科内科</p>
<div id="detail-content">
<p >2020年，您一共学习了</p>
<p class="mt-10"><span class="fbig6 cg2">100</span> 分钟</p>
<p><span class="fbig6 cg2">100</span> 课程</p>
<p><span class="fbig6 cg2">100</span> 文章</p>
<p class="mt-5">您最关注的学科</p>
<p class="cg2 b">内科内科内科</p>
</div>
</section>
</div>
</template>
......
src/main.js
浏览文件 @ 2a053fb3
......@@ -14,8 +14,6 @@ import 'vant/lib/index.css';
import clipboard from 'clipboard';
import { querystring } from '@/utils';
import 'swiper/swiper-bundle.css';
// import '@/utils/swiper.animate1.0.3.min'
// import '@/utils/animate.min'
Vue.prototype.clipboard = clipboard;
......
src/style/as-common.less
浏览文件 @ 2a053fb3
......@@ -59,3 +59,67 @@
.lh-25 {
line-height: 2.5 !important;
}
.shareanimate {
animation: shareani 4s ease;
-webkit-animation: shareani 4s ease;
-moz-animation: shareani 4s ease;
-ms-animation: shareani 4s ease;
}
.shareanimate2 {
animation: shareani 4s ease;
-webkit-animation: shareani 4s ease;
-moz-animation: shareani 4s ease;
-ms-animation: shareani 4s ease;
}
@keyframes shareani {
0% {
left: 50%;
top: 74%;
opacity: 0.1;
}
100% {
left: 85%;
top: 0;
opacity: 1;
}
}
@-webkit-keyframes shareani {
0% {
left: 50%;
top: 74%;
opacity: 0.8;
}
100% {
left: 85%;
top: 0;
opacity: 0;
}
}
@-moz-keyframes shareani {
0% {
left: 50%;
top: 74%;
opacity: 0.8;
}
100% {
left: 85%;
top: 0;
opacity: 0;
}
}
@-ms-keyframes shareani {
0% {
left: 50%;
top: 74%;
opacity: 0.8;
}
100% {
left: 85%;
top: 0;
opacity: 0;
}
}
\ No newline at end of file
src/views/annual-summary/detail copy.vue 0 → 100644
浏览文件 @ 2a053fb3
<template>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<Card1></Card1>
</div>
<div class="swiper-slide">
<Card2></Card2>
</div>
<div class="swiper-slide">
<Card3></Card3>
</div>
<div class="swiper-slide">
<Card4></Card4>
</div>
<div class="swiper-slide">
<Card5></Card5>
</div>
<div class="swiper-slide">
<Card6></Card6>
</div>
</div>
<Loading v-show="showLoading" />
</div>
</template>
<script>
import Loading from "@/components/common/common-loading";
import { Progress, Toast } from "vant";
import Card1 from "@/components/annual-summary/card-1";
import Card1No from "@/components/annual-summary/card-1-no";
import Card2 from "@/components/annual-summary/card-2";
import Card3 from "@/components/annual-summary/card-3";
import Card4 from "@/components/annual-summary/card-4";
import Card5 from "@/components/annual-summary/card-5";
import Card6 from "@/components/annual-summary/card-6";
import { mapGetters, mapActions } from "vuex";
import Swiper from "swiper";
import { getElement } from '../../../../better-scroll/packages/shared-utils/src';
let _this = null;
export default {
components: {
Loading,
Card1,
Card1No,
Card2,
Card3,
Card4,
Card5,
Card6
},
data() {
return {
isWeb: window.__isWeb,
isInfresh: false,
showLoading: false
};
},
computed: {
...mapGetters(["userInfo"])
},
created() {
_this = this;
window.__getUserInfoAS = function(param) {
console.log("__getUserInfoAS", param);
_this.token = param.userToken;
_this.userMobile = param.userMobile;
_this.setUserInfo(param);
_this.checkToken();
_this.initData();
};
if (_this.isWeb) {
_this.initData();
}
window.__refresh = function() {
_this.isInfresh = true;
_this.getUserInfo();
};
_this.getUserInfo();
},
mounted() {
new Swiper(".swiper-container", {
direction: "vertical",
speed: 300,
slidesPerView: 1,
// observer: true, //修改swiper自己或子元素时，自动初始化swiper
// observeParents: true //修改swiper的父元素时，自动初始化swiper
// // slidesPerGroup : 5,
on: {
init: function() {
// swiperAnimateCache(this);
console.log('---111');
swiperAnimate(this);
},
slideChangeTransitionEnd: function(se) {
let activeIndex = se.activeIndex;
swiperAnimate(this);
console.log('---2323', se);
if (activeIndex == 1) {
// document.getElementById('detail-content').className = 'shareanimate';
// $("#share").addClass("shareanimate");
}
}
}
});
},
methods: {
...mapActions(["setUserInfo"]),
// 获取数据
initData() {
let param = {
token: this.token,
setEntry: true
};
// this.showLoading = true;
// this.GET(`portal/titleTest/user/getBrushTitleInfo/${this.secondSubjectId}`, param).then(res => {
// if (res.code == "000000") {
// this.showLoading = false;
// } else {
// this.$toast(res.message);
// }
// });
},
//获取用户信息
getUserInfo() {
rocNative.getUserInfo({
__funcName: "__getUserInfoAS"
});
},
// token是否失效校验
checkToken() {
let param = {
token: this.userInfo.userToken || this.token,
setEntry: true
};
this.GET("campaign/admin/task/checkToken", param).then(res => {
if (res.code !== "000000") {
console.log("跳登录", this.isInfresh);
if (this.isInfresh) {
rocNative.goBack();
} else {
rocNative.gotoLogin();
}
this.isInfresh = false;
} else {
}
});
}
}
};
</script>
<style lang="less" scoped>
// .as-swipper-wrapper {
// transform: translate3d(0, 0, 0);
// // background: red;
// .swiper-container {
// transform: translate3d(0, 0, 0);
// overflow: hidden;
// }
// .swiper-slide {
// transform: translate3d(0, 0, 0);
// }
// }
.swiper-container {
height: 100vh;
width: 100vm;
/* height: 300px;
margin: 20px auto; */
}
.card {
height: 100vh;
}
</style>
\ No newline at end of file
src/views/annual-summary/detail.vue
浏览文件 @ 2a053fb3
......@@ -95,12 +95,15 @@ export default {
on: {
init: function() {
swiperAnimateCache(this);
console.log('---111');
swiperAnimate(this);
},
slideChangeTransitionEnd: function() {
slideChangeTransitionEnd: function(se) {
let activeIndex = se.activeIndex;
swiperAnimate(this);
if (this.activeIndex == 8) {
$("#share").addClass("shareanimate");
console.log('---2323', se);
if (activeIndex == 1) {
document.getElementById('detail-content').className = 'shareanimate';
}
}
}
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或