Hooke / tswj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
c11cb3c7 1 parent 556a256a

✨ feat(首页入口背景): 测试动画效果

Inline Side-by-side
Showing 5 changed files with 41 additions and 4 deletions
......@@ -4,6 +4,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" />
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.compat.css" />
</head>
<body>
<div id="app"></div>
......
......@@ -8,6 +8,7 @@
"name": "tjws",
"version": "1.0.0",
"dependencies": {
"animate.css": "^4.1.1",
"html2canvas": "^1.4.1",
"jquery": "^3.6.0",
"js-cookie": "^3.0.1",
......@@ -286,6 +287,11 @@
"integrity": "sha512-ymN2pj6zEjiKJZbrf98UM2pfDd6F2H7ksKw7NDt/ZZ1fh5Ei39X5tABugtT03ZRlWd9imccoK0hE8hpjpU7irQ==",
"license": "MIT"
},
"node_modules/animate.css": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/animate.css/-/animate.css-4.1.1.tgz",
"integrity": "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ=="
},
"node_modules/ansi-styles": {
"version": "3.2.1",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
......@@ -1933,6 +1939,11 @@
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.31.tgz",
"integrity": "sha512-ymN2pj6zEjiKJZbrf98UM2pfDd6F2H7ksKw7NDt/ZZ1fh5Ei39X5tABugtT03ZRlWd9imccoK0hE8hpjpU7irQ=="
},
"animate.css": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/animate.css/-/animate.css-4.1.1.tgz",
"integrity": "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ=="
},
"ansi-styles": {
"version": "3.2.1",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
......
......@@ -14,6 +14,7 @@
"publish": "npm run build && npm run rm && npm run mv && npm run git && npm run update"
},
"dependencies": {
"animate.css": "^4.1.1",
"html2canvas": "^1.4.1",
"jquery": "^3.6.0",
"js-cookie": "^3.0.1",
......
<template>
<div class="client-index-page">
<div class="cloud-bg"></div>
<!-- TAG: animate 动画 -->
<!-- <transition name="fade" enter-active-class="animated animate__swing" leave-active-class="animated animate__swing">
<van-icon v-if="show" :name="icon_subscribed" size="5rem" style="position: absolute; top: 50%;" />
</transition> -->
</div>
<div class="entry-wrapper">
<p style="color: #B8B8B8; margin: 1rem; margin-bottom: 0;">请选择您的身份</p>
<p class="text">请选择您的身份</p>
<div class="control">
<div class="plain">
<my-button type="custom" :custom-style="styleObject1" @on-click="goVisit">访客</my-button>
......@@ -18,13 +21,15 @@
<script setup>
import Cookies from 'js-cookie'
import 'animate.css';
import icon_subscribed from '@images/icon-dingyue01@2x.png'
import MyButton from '@/components/MyButton/index.vue'
import $ from 'jquery';
import { useRoute, useRouter } from 'vue-router'
import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router'
import { Toast } from 'vant';
import { nextTick, onMounted, reactive } from 'vue'
import { nextTick, onMounted, reactive, ref } from 'vue'
const $route = useRoute();
const $router = useRouter();
......@@ -57,6 +62,15 @@ onMounted (() => {
// 背景颜色全屏
$('.client-index-page').height($(document).height());
})
// TEMP：临时测试动画效果
// const show = ref(true);
// const interval = setInterval(() => { // 图标动画效果
// show.value = !show.value
// }, 1000);
// onBeforeRouteLeave(() => {
// clearInterval(interval); // 清除调用
// })
</script>
<script>
......@@ -91,6 +105,11 @@ export default {
position: absolute;
bottom: 0;
width: 100%;
.text {
color: #B8B8B8;
margin: 1rem;
margin-bottom: 0;
}
.control {
margin: 1rem;
margin-top: 0.5rem;
......
......@@ -175,6 +175,11 @@
"resolved" "https://registry.npmjs.org/@vue/shared/-/shared-3.2.31.tgz"
"version" "3.2.31"
"animate.css@^4.1.1":
"integrity" "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ=="
"resolved" "https://registry.npmjs.org/animate.css/-/animate.css-4.1.1.tgz"
"version" "4.1.1"
"ansi-styles@^3.2.1":
"integrity" "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA=="
"resolved" "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz"
......