Skip to content

A
antaile-web
Commit e043575d by wangyalan-git
Options

首页

parent f09a3c67
Showing with 714 additions and 542 deletions
package-lock.json
......@@ -3595,6 +3595,11 @@
}
}
},
"comutils": {
"version": "1.1.19",
"resolved": "https://registry.npm.taobao.org/comutils/download/comutils-1.1.19.tgz",
"integrity": "sha1-PgfzBqv0joNyZRFxOnKyBWUDREM="
},
"concat-map": {
"version": "0.0.1",
"resolved": "https://registry.npm.taobao.org/concat-map/download/concat-map-0.0.1.tgz",
......@@ -12201,6 +12206,14 @@
"resolved": "https://registry.npm.taobao.org/vue-router/download/vue-router-3.5.1.tgz?cache=0&sync_timestamp=1617697788171&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-router%2Fdownload%2Fvue-router-3.5.1.tgz",
"integrity": "sha1-7fPPSQeVLR4Fg+B5I3Igxf9utsk="
},
"vue-seamless-scroll": {
"version": "1.1.23",
"resolved": "https://registry.npm.taobao.org/vue-seamless-scroll/download/vue-seamless-scroll-1.1.23.tgz",
"integrity": "sha1-3egbPHmqSZeRs8O//Q/bIv8+Wac=",
"requires": {
"comutils": "^1.1.9"
}
},
"vue-style-loader": {
"version": "4.1.3",
"resolved": "https://registry.nlark.com/vue-style-loader/download/vue-style-loader-4.1.3.tgz",
......
package.json
......@@ -13,6 +13,7 @@
"element-ui": "^2.15.1",
"vue": "^2.6.11",
"vue-router": "^3.5.1",
"vue-seamless-scroll": "^1.1.23",
"vue-video-player": "^5.0.2"
},
"devDependencies": {
......
src/assets/images/Map.png
src/assets/images/Map.png

242 KB | W: | H:

src/assets/images/Map.png

906 KB | W: | H:

src/assets/images/Map.png
src/assets/images/Map.png
src/assets/images/Map.png
src/assets/images/Map.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/Password.png
src/assets/images/Password.png

1.31 KB | W: | H:

src/assets/images/Password.png

1.32 KB | W: | H:

src/assets/images/Password.png
src/assets/images/Password.png
src/assets/images/Password.png
src/assets/images/Password.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/logo.png
src/assets/images/logo.png

6.94 KB | W: | H:

src/assets/images/logo.png

6.06 KB | W: | H:

src/assets/images/logo.png
src/assets/images/logo.png
src/assets/images/logo.png
src/assets/images/logo.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/user.png
src/assets/images/user.png

1.32 KB | W: | H:

src/assets/images/user.png

1.34 KB | W: | H:

src/assets/images/user.png
src/assets/images/user.png
src/assets/images/user.png
src/assets/images/user.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/styles/element-variables.scss
/* 改变主题色变量 */
$--color-primary: #CAA774;
$--color-primary: #caa774;
/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';
$--font-path: "~element-ui/lib/theme-chalk/fonts";
* {
margin: 0;
padding: 0;
}
html, body {
font-size: 12px;
min-height: 100%;
}
.font12 {
font-size: 12px;
}
.font14 {
font-size: 14px;
}
.font18 {
font-size: 18px;
}
.font24 {
font-size: 24px;
}
.font30 {
font-size: 30px;
}
.bold {
font-weight: bold;
}
a {
color: #020202;
}
a:hover {
color: $--color-primary;
}
html,
body,
p,
div,
ul,
li {
margin: 0;
padding: 0;
}
html,
body {
font-size: 12px;
min-height: 100%;
}
.font12 {
font-size: 12px;
}
.font14 {
font-size: 14px;
}
.font18 {
font-size: 18px;
}
.font24 {
font-size: 24px;
}
.font30 {
font-size: 30px;
}
.bold {
font-weight: bold;
}
a {
color: #020202;
}
a:hover {
color: $--color-primary;
}
img {
width: 100%;
object-fit: cover;
}
.my_icon {
width: 15px;
margin-right: 5px;
vertical-align: middle;
}
.banner {
img {
width: 100%;
object-fit: cover;
}
.my_icon {
width: 15px;
margin-right: 5px;
vertical-align: middle;
}
.banner {
img {
max-height: 300px;
}
}
ul,
ol,
dl {
list-style: none;
}
.align_left {
text-align: left;
}
.align_center {
text-align: center;
}
.clearFix {
zoom: 1;
}
.clearFix:after {
content: '';
display: block;
height: 0;
clear: both;
}
.flex,
.flexRow {
display: flex;
justify-content: space-between;
align-items: center;
}
.flexCol {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
.flex_start {
display: flex;
align-items: baseline;
}
.pointer {
cursor: pointer;
}
.right {
list-style: none;
}
.mr_10 {
margin-right: 10px;
}
.mt_10 {
margin-top: 10px;
}
.mt_20 {
margin-top: 20px;
}
.ml_10 {
margin-left: 10px;
}
.mb_10 {
margin-bottom: 10px;
max-height: 300px;
}
.mr_15 {
margin-right: 15px;
}
.mr_20 {
margin-right: 20px;
}
.position_relative {
position: relative;
}
.primary {
color: $--color-primary !important;
}
.back_primary {
background: $--color-primary !important;
color: #fff !important;
}
.border_primary {
border: 1px solid $--color-primary;
}
.back_two {
background: #f17123 !important;
color: #fff !important;
}
.back_three {
background: #ffb400 !important;
color: #fff !important;
}
//图片放大功能
.zoom {
width: 220px;
height: 220px;
overflow: hidden;
}
.zoom_img {
transition: all 1s;
}
.zoom_img:hover {
transform: scale(1.2);
}
@import "~element-ui/packages/theme-chalk/src/index";
\ No newline at end of file
}
ul,
ol,
dl {
list-style: none;
}
.align_left {
text-align: left;
}
.align_center {
text-align: center;
}
.clearFix {
zoom: 1;
}
.clearFix:after {
content: "";
display: block;
height: 0;
clear: both;
}
.flex,
.flexRow {
display: flex;
justify-content: space-between;
align-items: center;
}
.flexCol {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
.flex_start {
display: flex;
align-items: baseline;
}
.pointer {
cursor: pointer;
}
.right {
list-style: none;
}
.mr_10 {
margin-right: 10px;
}
.mt_10 {
margin-top: 10px;
}
.mt_20 {
margin-top: 20px;
}
.ml_10 {
margin-left: 10px;
}
.mb_10 {
margin-bottom: 10px;
}
.mr_15 {
margin-right: 15px;
}
.mr_20 {
margin-right: 20px;
}
.position_relative {
position: relative;
}
.primary {
color: $--color-primary !important;
}
.back_primary {
background: $--color-primary !important;
color: #fff !important;
}
.border_primary {
border: 1px solid $--color-primary;
}
.back_two {
background: #f17123 !important;
color: #fff !important;
}
.back_three {
background: #ffb400 !important;
color: #fff !important;
}
//图片放大功能
.zoom {
width: 220px;
height: 220px;
overflow: hidden;
}
.zoom_img {
transition: all 1s;
}
.zoom_img:hover {
transform: scale(1.2);
}
@import "~element-ui/packages/theme-chalk/src/index";
src/components/Header.vue
<template>
<div class="header">
<img src="@/assets/images/logo.png" alt="" class="logo" />
<div style="display: flex;flex: 1;">
<img src="@/assets/images/logo.png" alt="" class="logo" />
<ul class="right-ul">
<li>纪念馆列表</li>
<li>APP下载</li>
</ul>
</div>
<ul class="right-ul">
<li><img src="@/assets/images/Signin.png" alt="" class="avatar" />登录</li>
<li>用户协议</li>
......@@ -30,12 +36,15 @@ export default {
right: 0;
z-index: 999;
.logo{
width: 200px;
width: 200px;
margin-right: 30px;
object-fit: contain;
}
}
.header .right-ul {
display: flex;
flex-shrink: 0;
align-items: center;
> li {
margin-right: 25px;
......
src/main.js
......@@ -4,7 +4,6 @@ import router from './router'
import ElementUI from 'element-ui';
import '@/assets/styles/element-variables.scss'
import animated from 'animate.css' // npm install animate.css --save安装，在引入
Vue.use(animated)
Vue.config.productionTip = false
Vue.use(ElementUI);
......
src/views/Home/index.vue
<template>
<div>
<div id="wrap" :style="{ height: screenHeight + 'px' }">
<Header></Header>
<div class="main" id="main" :style="{ top: nowTop + 'px' }">
<!-- 第一屏 -->
<div class="show-bg page" id="page1">
<transition leave-active-class="animateTitle">
<img
class="show-title"
src="@/assets/images/writtenwords.png"
alt=""
v-if="screenIndex == 1"
/>
</transition>
<div
<div class="root">
<custom-header></custom-header>
<!-- 第一屏 -->
<div class="page bg-image" id="page1" @mousewheel="scrollFun">
<transition leave-active-class="titleHidden">
<img
class="show-title"
src="@/assets/images/writtenwords.png"
alt=""
v-if="screenIndex == 1"
/>
</transition>
<transition
:enter-active-class="screenIndex == 2 ? 'fallVideo' : ''"
leave-active-class="screenIndex == 1"
>
<div
:class="[
{
'animate-video':
screenIndex == 2 ||
screenIndex == 3 ||
screenIndex == 4 ||
screenIndex == 5,
},
'show-video',
]"
>
<video
autoplay
loop
:class="[
{
'animate-video':
......@@ -22,120 +38,180 @@
screenIndex == 4 ||
screenIndex == 5,
},
'show-video',
'video',
]"
v-on:canplay="canplay"
muted
ref="video"
>
<video
autoplay
loop
:class="[{ 'show-border': screenIndex == 4 }, 'video']"
v-on:canplay="canplay"
muted
ref="video"
>
<source :src="PATH_TO_MP4" type="video/mp4" />
浏览器不支持 video 标签，建议升级浏览器。
<!-- <source :src="PATH_TO_WEBM" type="video/webm"/>
<source :src="PATH_TO_MP4" type="video/mp4" />
浏览器不支持 video 标签，建议升级浏览器。
<!-- <source :src="PATH_TO_WEBM" type="video/webm"/>
浏览器不支持 video 标签，建议升级浏览器。 -->
</video>
<transition
enter-active-class="animated mask-video"
leave-active-class="animated bounceOutDown"
>
<div class="show-url" v-if="screenIndex == 4 || screenIndex == 5">
<img src="@/assets/images/1605239923175.png" alt="" />
</div>
</transition>
</div>
<transition leave-active-class="animated bounceOutDown">
<div class="show-mask" v-if="screenIndex == 3"></div>
</video>
<transition
:enter-active-class="screenIndex == 4 ? 'scaleLeftShow' : ''"
leave-active-class="scaleLeftHidden"
>
<div class="show-url" v-if="screenIndex == 4 || screenIndex == 5">
<img src="@/assets/images/1605239923175.png" alt="" />
</div>
</transition>
<transition
enter-active-class="animated bounceInUp"
leave-active-class="animated bounceOutDown"
:enter-active-class="screenIndex == 4 ? 'scaleRightShow' : ''"
leave-active-class=" scaleRightHidden"
>
<img
class="mask-img"
src="@/assets/images/writtenwordsone.png"
alt=""
v-if="screenIndex == 3"
/>
<div
class="show-border"
v-if="screenIndex == 4 || screenIndex == 5"
></div>
</transition>
<div class="show-mask" v-if="screenIndex == 5">
<img src="@/assets/images/writtenwordstwo.png" alt="" />
</div>
</div>
<div class="show-bg page" id="page2">
<div class="show-tab">
<img src="@/assets/images/198A5253.png" alt="" />
<div class="my-tab">
<ul>
<li
@click="changeTab(item.id)"
:class="checkedTab == item.id ? 'checked' : ''"
v-for="(item, index) in tabs"
:key="index"
>
{{ item.name }}
</li>
</ul>
<div class="show-tip">
我们提供了丰富模版，根据自己喜欢可自由选择
</div>
</div>
</div>
</transition>
<transition leave-active-class="animated bounceOutDown">
<div
class="show-mask"
v-if="screenIndex == 3 || screenIndex == 5"
></div>
</transition>
<transition
enter-active-class="animated bounceInUp"
leave-active-class="animated bounceOutDown"
>
<img
class="mask-img"
src="@/assets/images/writtenwordsone.png"
alt=""
v-if="screenIndex == 3"
/>
</transition>
<transition
enter-active-class="animated bounceInUp"
leave-active-class="animated bounceOutDown"
>
<img
src="@/assets/images/writtenwordstwo.png"
v-if="screenIndex == 5"
class="mask-img"
alt=""
/>
</transition>
</div>
<div class="page" id="page2">
<div class="show-tab">
<img src="@/assets/images/Map.png" alt="" class="small" />
<div class="tab-mask"></div>
<div class="my-tab">
<ul>
<li
@click="changeTab(item.id)"
:class="checkedTab == item.id ? 'special-color' : ''"
v-for="(item, index) in tabs"
:key="index"
>
{{ item.name }}
</li>
</ul>
<div class="show-tip">我们提供了丰富模版，根据自己喜欢可自由选择</div>
</div>
<div class="show-bg page" id="page3">
<img
src="@/assets/images/writtenwordssix.png"
class="show-moretitle"
alt=""
/>
<div class="show-more">
<div v-class="'animated bounce'">
<img src="@/assets/images/Warehouse.png" alt="" />
<p class="show-subtitle">应用仓库</p>
<p>不断扩展应用库</p>
<p>满足不同用户需求</p>
</div>
<div v-class="'animated bounce'">
<img src="@/assets/images/Administration.png" alt="" />
<p class="show-subtitle">轻管理</p>
<p>有APP、PC两端</p>
<p>管理</p>
</div>
<div v-class="'animated bounce'">
<img src="@/assets/images/security.png" alt="" />
<p class="show-subtitle">更安全</p>
<p>资料可存入私人</p>
<p>oss存储空间</p>
</div>
<div v-class="'animated bounce'">
<img src="@/assets/images/Multiterminal.png" alt="" />
<p class="show-subtitle">多端展示</p>
<p>手机端、IAPD和</p>
<p>TV端</p>
</div>
</div>
</div>
<div class="page" id="page3">
<div class="show-scrollword">
<p>尊重生命</p>
<p class="special-color">传承文化</p>
<p>
无限的数据空间，可以承载无数的文化传承，我们尊重生命，感恩世界，那些曾经的过往，也是我们及子孙后代无价的宝藏！
</p>
</div>
<div class="scroll-table">
<p class="title">部分纪念馆案例</p>
<vue-seamless-scroll
:data="hallList"
:class-option="optionLeft"
class="seamless-warp2"
>
<ul class="item">
<li v-for="(item, index) in hallList" :key="index">
<img :src="item.icon" alt="" />
</li>
</ul>
</vue-seamless-scroll>
<vue-seamless-scroll
:data="hallList"
:class-option="optionRight"
class="seamless-warp2"
>
<ul class="item">
<li v-for="(item, index) in hallList" :key="index">
<img :src="item.icon" alt="" />
</li>
</ul>
</vue-seamless-scroll>
<vue-seamless-scroll
:data="hallList"
:class-option="optionLeft"
class="seamless-warp2"
>
<ul class="item">
<li v-for="(item, index) in hallList" :key="index">
<img :src="item.icon" alt="" />
</li>
</ul>
</vue-seamless-scroll>
</div>
</div>
<div class="page bg-image" id="page4">
<div class="show-moretitle">
<p>突破技术壁垒</p>
<p class="special-color">安全、便捷、极致体验</p>
</div>
<div class="show-more">
<transition enter-active-class="animated bounce">
<div>
<img src="@/assets/images/application.png" alt="" />
<p class="show-subtitle">云应用</p>
<p>应用商店，不断扩展应用库</p>
<p>根据需要可自行安装，满足</p>
<p>不同用户需求</p>
</div>
<div class="show-btn">
<p>立即创建</p>
<p>安泰乐·网上生命记念馆</p>
</transition>
<transition enter-active-class="animated bounce">
<div>
<img src="@/assets/images/Deposit.png" alt="" />
<p class="show-subtitle">私有云存储</p>
<p>可将数据存入个人的云存储</p>
<p>空间，保证用户数据安全。</p>
</div>
</div>
</transition>
<transition enter-active-class="animated bounce">
<div>
<img src="@/assets/images/Exhibition.png" alt="" />
<p class="show-subtitle">多端展示</p>
<p>线上生命纪念馆可以展示在</p>
<p>手机、电脑、TV上,不同的</p>
<p>应用场景可以随时可切换</p>
</div>
</transition>
</div>
<div class="show-btn">
<p>立即创建</p>
<p>安泰乐·网上生命记念馆</p>
</div>
<Footer></Footer>
</div>
<custom-footer></custom-footer>
</div>
</template>
<script>
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import CustomHeader from "@/components/Header";
import CustomFooter from "@/components/Footer";
import vueSeamlessScroll from "vue-seamless-scroll";
export default {
name: "index",
components: {
Header,
Footer,
CustomHeader,
CustomFooter,
vueSeamlessScroll,
},
props: {},
......@@ -143,18 +219,18 @@ export default {
return {
vedioCanPlay: false,
PATH_TO_MP4: "https://atlimg.oss-cn-hangzhou.aliyuncs.com/web/2574.mp4",
scrollTop: 0,
screenWeight: 0, // 屏幕宽度
screenHeight: 0, // 屏幕高度
index: 1, // 用于判断翻页
screenIndex: 1, //用于记录第一页面内部的顺序
curIndex: 1, // 当前页的index
startTime: 0, // 翻屏起始时间
endTime: 0, // 上一次翻屏结束时间
nowTop: 0, // 翻屏后top的位置
pageNum: 0, // 一共有多少页
main: Object,
obj: Object,
hallList: new Array(60).fill({
icon:
"https://thirdwx.qlogo.cn/mmopen/vi_32/exXiaSqNfYBXic1ibB6Ugfg5OPWBDZibM46VibhlRdSovAIic8uYrgmkQD7HgRrQGuKxhTW56T9NMy28KlwkfkdMvxLg/132",
}),
checkedTab: 1,
tabs: [
{ id: 1, name: "风格多样化" },
......@@ -170,23 +246,9 @@ export default {
this.obj = document.getElementsByTagName("div");
for (let i = 0; i < this.obj.length; i++) {
if (this.obj[i].className.indexOf("page") != -1) {
// console.log("this.obj[i]",this.obj[i].className)
this.obj[i].style.height = this.screenHeight + "px";
}
}
this.pageNum = document.querySelectorAll(".page").length;
// console.log("page",this.pageNum,this.obj)
// 浏览器兼容
if (navigator.userAgent.toLowerCase().indexOf("firefox") != -1) {
document.addEventListener("DOMMouseScroll", this.scrollFun, false);
} else if (document.addEventListener) {
document.addEventListener("mousewheel", this.scrollFun, false);
} else if (document.attachEvent) {
document.attachEvent("onmousewheel", this.scrollFun);
} else {
document.onmousewheel = this.scrollFun;
}
},
methods: {
scrollFun(event) {
......@@ -196,119 +258,69 @@ export default {
let delta = event.detail || -event.wheelDelta;
// 如果当前滚动开始时间和上次滚动结束时间的差值小于1.5s，则不执行翻页动作，这样做是为了实现类似节流的效果
if (this.startTime - this.endTime > 500) {
if (
delta > 0 &&
parseInt(this.main.offsetTop) >=
-(this.screenHeight * (this.pageNum - 2))
) {
console.log("向下");
if (this.index == 1) {
this.screenIndex++;
}
if (this.screenIndex == 5) {
// 向下滚动
this.index++;
this.toPage(this.index);
}
} else if (delta < 0 && parseInt(this.main.offsetTop) < 0) {
console.log("向上，index", this.index);
if (this.index == 1) {
this.screenIndex--;
}
if (this.screenIndex == 5) {
// 向上滚动
this.index--;
this.toPage(this.index);
}
if (delta > 0 && this.screenIndex < 5) {
console.log(1, this.screenIndex);
this.screenIndex++;
}
if (delta < 0 && this.screenIndex > 1) {
console.log(2, this.screenIndex);
this.screenIndex--;
}
if (this.screenIndex <= 5) {
console.log(3, this.screenIndex);
event.preventDefault();
}
// 本次翻页结束，记录结束时间，用于下次判断
this.endTime = new Date().getTime();
} else {
console.log(
"this.index例外",
this.index,
this.screenIndex,
this.main.offsetTop
);
if (delta < 0 && this.index == 1) {
if (this.screenIndex > 1) {
console.log(111111);
this.screenIndex--;
}
}
}
},
// 翻页
toPage(index) {
if (index != this.curIndex) {
let delta = index - this.curIndex;
this.nowTop = this.nowTop - delta * this.screenHeight;
this.curIndex = index;
console.log("index", this.curIndex);
}
},
changeTab(id) {
this.checkedTab = id;
},
handleScroll() {
// 实现当滚动到指定位置，触发动画
console.log(11111);
let scrollHeight =
document.documentElement.scrollTop || document.body.scrollTop; //滚动高度
this.scrollTop = scrollHeight;
console.log("scrollHeight", scrollHeight);
},
canplay() {
this.vedioCanPlay = true;
console.log(this.vedioCanPlay);
},
},
computed: {
optionLeft() {
return {
direction: 2,
limitMoveNum: 1,
};
},
optionRight() {
return {
direction: 3,
limitMoveNum: 1,
};
},
},
};
</script>
<style lang="scss" scoped>
html,
body {
height: 100%;
}
body,
ul,
li,
a,
p,
div {
/*慎删*/
padding: 0px;
margin: 0px;
}
#wrap {
overflow: hidden;
.root {
width: 100%;
background: #091a38;
background: #070d1d;
}
#main {
position: relative;
width: 100%;
text-align: center;
margin: 0 auto;
margin-bottom: 100px;
transition: top 1.5s;
.bg-image {
background: url("~@/assets/images/BG.png") no-repeat;
background-size: 100% 100%;
}
.page {
/*谨删*/
width: 100%;
margin: 0;
}
.show-bg {
padding-top: 70px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
box-sizing: border-box;
overflow: scroll;
}
::-webkit-scrollbar {
display: none; /*ChromeSafari*/
}
.show-video {
......@@ -316,56 +328,56 @@ div {
height: 60%;
max-width: 800px;
max-height: 600px;
margin-top: 140px;
border-radius: 30px;
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
position: relative;
transform: perspective(1200px) rotate3d(1, 0, 0, 50deg);
.show-border {
border: 10px solid #000;
box-sizing: border-box;
}
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective: 1200px;
-moz-perspective: 1200px;
perspective: 1200px;
.video {
object-fit: fill;
border-radius: 10px;
width: 100%;
height: 100%;
transform: translate3d(0px, 0px, 0px) rotateX(59.9972deg);
&.animate-video {
transform: translate(0px, 0px);
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-name: fallVideo;
animation-name: fallVideo;
}
}
&.animate-video {
transform: perspective(1200px) scale(1.2);
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-name: flipInX;
animation-name: flipInX;
}
// .scale-video{
// -webkit-animation-duration: 0.5s;
// animation-duration: 0.5s;
// transform: scale(1.5);
// }
.show-url {
width: 35%;
position: absolute;
left: 0;
top: 0;
bottom: 5px;
bottom: 0;
z-index: 1;
border: 10px solid #000;
transform: translate(0px, 0px);
img {
width: 100%;
height: 100%;
}
}
.show-border {
width: 62%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
z-index: 1;
border: 10px solid #000;
}
}
.show-title {
width: 30%;
transform: translate3d(0px, 129.735px, 0px);
}
.animateTitle {
transform: translate(0px, -288.333px);
padding: 15% 0 140px;
box-sizing: border-box;
}
.show-mask {
width: 100%;
......@@ -389,15 +401,91 @@ div {
margin-left: -20%;
z-index: 2;
}
.show-scrollword {
width: 80%;
margin: 50px auto 80px;
text-align: center;
color: #cccccc;
font-size: 24px;
display: flex;
flex-direction: column;
align-items: center;
p:first-child {
margin-bottom: 10px;
color: #fff;
font-size: 60px;
}
p:nth-child(2) {
font-size: 60px;
}
p:last-child {
text-align: left;
margin-top: 40px;
width: 76%;
}
}
.scroll-table {
width: 70%;
// height: 650px;
padding: 20px 0;
background: #202020;
border-radius: 20px;
.title {
color: #ffffff;
padding: 0 30px 10px;
font-size: 30px;
text-align: left;
}
// 动画效果
.seamless-warp2 {
overflow: hidden;
width: 100%;
ul.item {
display: flex;
align-items: center;
margin-top: 10px;
li {
img {
width: 160px;
height: 160px;
border-radius: 25px;
margin-right: 10px;
}
}
}
}
}
.tab-mask {
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 50%;
background-image: linear-gradient(
to top,
#070d1d,
rgba(11, 11, 20, 0.85) 25%,
rgba(11, 11, 20, 0.45) 50%,
rgba(11, 11, 20, 0)
);
}
.show-tab {
width: 100%;
height: 100%;
position: relative;
img {
// background: no-repeat center bottom / 100% 100%;
background-image: url("~@/assets/images/ptfdjk.png");
.small {
width: 100%;
// max-height: 70%;
height: 100%;
z-index: 2;
position: absolute;
left: 50%;
top: 10%;
transform: translate(-50%);
width: 80%;
}
.my-tab {
width: 40%;
position: absolute;
......@@ -406,6 +494,7 @@ div {
transform: translate(-50%, -50%);
bottom: 30px;
z-index: 1;
ul {
display: flex;
justify-content: space-between;
......@@ -418,25 +507,7 @@ div {
font-size: 26px;
font-weight: bold;
cursor: pointer;
&.checked {
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
background-image: -webkit-gradient(
linear,
left top,
right top,
from(#b8832d),
to(#f6c943)
);
background-image: -webkit-linear-gradient(left, #b8832d, #f6c943);
background-image: -moz-linear-gradient(left, #b8832d, #f6c943);
background-image: linear-gradient(to right, #b8832d, #f6c943);
color: linear-gradient(to right, #b8832d, #f6c943);
border-bottom: 1px solid linear-gradient(to right, #b8832d, #f6c943);
position: relative;
}
&.checked::after {
&.special-color::after {
content: "";
// width: 20%;
height: 2px;
......@@ -454,9 +525,11 @@ div {
from(#b8832d),
to(#f6c943)
);
background-image: -webkit-linear-gradient(left, #b8832d, #f6c943);
background-image: -moz-linear-gradient(left, #b8832d, #f6c943);
background-image: linear-gradient(to right, #b8832d, #f6c943);
background-image: -webkit-linear-gradient(top, #b8832d, #f6c943);
background-image: -moz-linear-gradient(top, #b8832d, #f6c943);
background-image: linear-gradient(to bottom, #b8832d, #f6c943);
color: linear-gradient(to bottom, #b8832d, #f6c943);
border-bottom: 1px solid linear-gradient(to bottom, #b8832d, #f6c943);
}
}
.show-tip {
......@@ -467,17 +540,115 @@ div {
}
}
}
.mask-video {
transform: translate3d(-692px, 0px, 576.667px) scale(1.3, 1.3);
.titleShow {
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-name: titleShow;
animation-name: titleShow;
}
.titleHidden {
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-name: titleHidden;
animation-name: titleHidden;
}
.scaleLeftShow {
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-name: scaleLeftShow;
animation-name: scaleLeftShow;
}
.scaleRightShow {
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-name: scaleRightShow;
animation-name: scaleRightShow;
}
.scaleLeftHidden {
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-name: scaleLeftHidden;
animation-name: scaleLeftHidden;
}
.scaleRightHidden {
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-name: scaleRightHidden;
animation-name: scaleRightHidden;
}
.fallVideo {
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-name: scaleHidden;
animation-name: scaleHidden;
-webkit-animation-name: fallVideo;
animation-name: fallVideo;
}
@keyframes fallVideo {
from {
-webkit-transform: translate3d(0px, 0px, 0px) rotateX(59.9972deg);
transform: translate3d(0px, 0px, 0px) rotateX(59.9972deg);
transform-origin: center bottom;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
to {
// transform-origin: center bottom;
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
@keyframes titleShow {
from {
-webkit-transform: translate(0px, -208.333px);
transform: translate(0px, -208.333px);
// transform-origin: center bottom;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
to {
// transform-origin: center bottom;
-webkit-transform: translate3d(0px, 93.7356px, 0px);
transform: translate3d(0px, 93.7356px, 0px);
}
}
@keyframes titleHidden {
from {
-webkit-transform: translate3d(0px, 93.7356px, 0px);
transform: translate3d(0px, 93.7356px, 0px);
// transform-origin: center bottom;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
to {
// transform-origin: center bottom;
-webkit-transform: translate(0px, -208.333px);
transform: translate(0px, -208.333px);
}
}
@keyframes scaleHidden {
@keyframes scaleLeftShow {
from {
-webkit-transform: translate3d(-692px, 0px, 576.667px) scale(1.3, 1.3);
transform: translate3d(-692px, 0px, 576.667px) scale(1.3, 1.3);
// transform-origin: center bottom;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
to {
// transform-origin: center bottom;
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
@keyframes scaleRightShow {
from {
-webkit-transform: translate3d(500px, 0px, 416.667px) scale(1.3, 1.3);
transform: translate3d(500px, 0px, 416.667px) scale(1.3, 1.3);
// transform-origin: center bottom;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
......@@ -485,8 +656,38 @@ div {
to {
// transform-origin: center bottom;
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
@keyframes scaleLeftHidden {
from {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
// transform-origin: center bottom;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
to {
-webkit-transform: translate3d(-692px, 0px, 576.667px) scale(1.3, 1.3);
transform: translate3d(-692px, 0px, 576.667px) scale(1.3, 1.3);
// transform-origin: center bottom;
}
}
@keyframes scaleRightHidden {
from {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
// transform-origin: center bottom;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
to {
-webkit-transform: translate3d(500px, 0px, 416.667px) scale(1.3, 1.3);
transform: translate3d(500px, 0px, 416.667px) scale(1.3, 1.3);
// transform-origin: center bottom;
}
}
// @-webkit-keyframes flipInX {
......@@ -522,99 +723,27 @@ div {
}
}
@keyframes bounceOutDown {
/*向下，向上，再直接下去：透明度为0*/
20% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
}
40%,
45% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
.show-moretitle {
padding-bottom: 50px;
p:first-child {
font-size: 60px;
color: #fff;
}
to {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0);
p:last-child {
font-size: 40px;
}
}
/*动画持续时间*/
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
/*动画无限循环*/
.animated.infinite {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
/*动画延时*/
.animated.delay-1s {
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.animated.delay-2s {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
.animated.delay-3s {
-webkit-animation-delay: 3s;
animation-delay: 3s;
}
.animated.delay-4s {
-webkit-animation-delay: 4s;
animation-delay: 4s;
}
.animated.delay-5s {
-webkit-animation-delay: 5s;
animation-delay: 5s;
}
.animated.fast {
-webkit-animation-duration: 800ms;
animation-duration: 800ms;
}
.animated.faster {
-webkit-animation-duration: 500ms;
animation-duration: 500ms;
}
.animated.slow {
-webkit-animation-duration: 2s;
animation-duration: 2s;
}
.animated.slower {
-webkit-animation-duration: 3s;
animation-duration: 3s;
}
.show-moretitle {
width: 10%;
margin: 100px 0;
}
.show-more {
display: flex;
align-items: center;
width: 80%;
> div {
width: calc(25% - 30px);
width: calc(33.3% - 30px);
margin: 15px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
justify-content: flex-start;
img {
width: 131px;
height: 131px;
......@@ -633,11 +762,11 @@ div {
}
.show-btn {
background: linear-gradient(260deg, #b8832d 0%, #f6c943 100%);
background: #bb862e;
border-radius: 51px;
width: 330px;
width: 390px;
padding: 10px 0;
margin: 150px auto 300px;
margin: 80px auto;
color: #ffff;
display: flex;
flex-direction: column;
......@@ -651,6 +780,23 @@ div {
font-size: 14px;
}
}
// 动画效果
.special-color {
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
background-image: -webkit-gradient(
linear,
left top,
right top,
from(#b8832d),
to(#f6c943)
);
background-image: -webkit-linear-gradient(left, #b8832d, #f6c943);
background-image: -moz-linear-gradient(left, #b8832d, #f6c943);
background-image: linear-gradient(to right, #b8832d, #f6c943);
color: linear-gradient(to right, #b8832d, #f6c943);
border-bottom: 1px solid linear-gradient(to right, #b8832d, #f6c943);
position: relative;
}
</style>
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