Skip to content

A
antaile-web
Commit 599cc9ce by wangyalan-git
Options

首页调整

parent e043575d
Showing with 1340 additions and 92 deletions
package-lock.json
......@@ -7324,6 +7324,11 @@
"type-check": "~0.3.2"
}
},
"lib-flexible": {
"version": "0.3.2",
"resolved": "https://registry.npm.taobao.org/lib-flexible/download/lib-flexible-0.3.2.tgz",
"integrity": "sha1-BvWnSDIxSi01wSA5vJw8otrqpCY="
},
"lines-and-columns": {
"version": "1.1.6",
"resolved": "https://registry.npm.taobao.org/lines-and-columns/download/lines-and-columns-1.1.6.tgz",
......@@ -9370,6 +9375,12 @@
}
}
},
"postcss-pxtorem": {
"version": "6.0.0",
"resolved": "https://registry.nlark.com/postcss-pxtorem/download/postcss-pxtorem-6.0.0.tgz",
"integrity": "sha1-8iik0F2Kc/BkLquulQ4rGYNjZtc=",
"dev": true
},
"postcss-reduce-initial": {
"version": "4.0.3",
"resolved": "https://registry.npm.taobao.org/postcss-reduce-initial/download/postcss-reduce-initial-4.0.3.tgz",
......
package.json
......@@ -11,6 +11,7 @@
"animate.css": "^3.5.1",
"core-js": "^3.6.5",
"element-ui": "^2.15.1",
"lib-flexible": "^0.3.2",
"vue": "^2.6.11",
"vue-router": "^3.5.1",
"vue-seamless-scroll": "^1.1.23",
......@@ -24,6 +25,7 @@
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"node-sass": "^4.14.1",
"postcss-pxtorem": "^6.0.0",
"sass-loader": "^8.0.2",
"vue-template-compiler": "^2.6.11"
},
......
public/index.html
......@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<!-- <meta name="viewport" content="width=device-width,initial-scale=1.0"> -->
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
......
src/components/Header.vue
<template>
<div class="header">
<div style="display: flex;flex: 1;">
<div class="header" >
<div style="display: flex; flex: 1" v-if="deviceType == 2">
<img src="@/assets/images/logo.png" alt="" class="logo" />
<ul class="right-ul">
<ul class="right-ul" >
<li>纪念馆列表</li>
<li>APP下载</li>
</ul>
</div>
<img src="@/assets/images/logo.png" alt="" class="logo" v-else />
<ul class="right-ul">
<li><img src="@/assets/images/Signin.png" alt="" class="avatar" />登录</li>
<li>用户协议</li>
<li>隐私协议</li>
<li>
<img src="@/assets/images/Signin.png" alt="" class="avatar" />登录
</li>
<li v-if="deviceType == 2">用户协议</li>
<li v-if="deviceType == 2">隐私协议</li>
</ul>
</div>
</template>
......@@ -18,7 +21,23 @@
<script>
export default {
name: "header",
data() {
return {
deviceType: null,
};
},
props: {},
mounted() {
if (this.common.isMobile()) {
this.deviceType = 1;
} else {
this.deviceType = 2;
}
},
methods: {
},
};
</script>
......@@ -31,16 +50,18 @@ export default {
justify-content: space-between;
align-items: center;
padding: 0 calc((100% - 1200px) / 2);
position:fixed;
position: fixed;
left: 0;
right: 0;
z-index: 999;
.logo{
>.logo{
margin-left: 38px;
}
.logo {
width: 200px;
margin-right: 30px;
object-fit: contain;
}
}
.header .right-ul {
display: flex;
......
src/main.js
import Vue from 'vue'
import App from './App.vue'
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
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import ElementUI from "element-ui";
import "lib-flexible";
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);
Vue.directive('class', {
inserted: function (el, binding) {
// 聚焦元素
binding.addClass = () => {
const { top } = el.getBoundingClientRect()
const h = document.documentElement.clientHeight || document.body.clientHeight
// console.log("h",top<h)
if (top < h) {
el.className = binding.value
if (binding.addClass) {
window.removeEventListener('mousewheel', binding.addClass)
}
}
}
import common from "@/utils/commonFunctions";
window.addEventListener('mousewheel', binding.addClass)
binding.addClass()
},
unbind: function (el, binding) {
if (binding.addClass) {
window.removeEventListener('mousewheel', binding.addClass)
console.log('取消事件绑定')
}
}
})
Vue.prototype.common = common; // 公共函数
new Vue({
router,
render: h => h(App),
}).$mount('#app')
render: (h) => h(App),
}).$mount("#app");
src/router/index.js
......@@ -10,6 +10,11 @@ const routes = [
component: () => import('@/views/Home/index')
},
{
path: '/mindex',
name: 'mindex',
component: () => import('@/views/Home/mindex')
},
{
path: '/login',
name: 'login',
component: () => import('@/views/Login/index')
......
src/utils/commonFunctions.js 0 → 100644
import { formatDate } from './date'
export default {
isMobile() {
let flag = navigator.userAgent.match(
/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
);
return flag;
},
// // 设置默认图片
// defaultImg() {
// return 'this.src="' + require('@/assets/images/default.png') + '"'
// },
// defaultAd() {
// return 'this.src="' + require('@/assets/images/bannerthree.png') + '"'
// },
// defaultAvatar() {
// return 'this.src="' + require('@/assets/images/portraittxs.png') + '"'
// },
// defaultDraw() {
// return 'this.src="' + require('@/assets/draw/banner.png') + '"'
// },
primaryColor() {
return '#41B9B2'
},
splitString(value) {
let flag = ''
if (!value) {
return
}
if(value.indexOf(',')!=-1){
flag = ','
}else {
flag = ' '
}
let arr = value.split(flag)
return arr
},
// 金额显示过滤 两位小数点，不足补0
priceFilter(value) {
if (!value) {
return '0.00'
}
var valueStr = Math.round(parseFloat(value) * 100) / 100
var xsd = valueStr.toString().split('.')
if (xsd.length == 1) {
valueStr = valueStr.toString() + '.00'
return valueStr
}
if (xsd.length > 1) {
if (xsd[1].length < 2) {
value = value.toString() + '0'
}
return value
}
},
renderTime(date) {
if (!date) {
return
}
var dateee = new Date(date).toJSON()
return new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
},
formatTime(value,format) {
let formatStr = ''
if (value) {
let date = new Date(value)
if(format){
formatStr = format
}else {
formatStr = 'yyyy-MM-dd hh:mm:ss'
}
return formatDate(date, formatStr)
} else {
return ''
}
},
isLogin() {
let token = localStorage.getItem('token')
if (token) {
return true
} else {
return false
}
},
goLogin() {
this.$router.push({
path: '/login'
})
},
/*
* 获取某个元素下标
* arr: 传入的数组
* obj: 需要获取下标的元素
* */
getArrayIndex(arr, obj) {
var i = arr.length
while (i--) {
if (arr[i] === obj) {
return i
}
}
return -1
},
uuid() {
var s = []
var hexDigits = "0123456789abcdef"
for (var i = 0; i < 36; i++) {
s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1)
}
s[14] = "4"
s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1)
s[8] = s[13] = s[18] = s[23] = "-"
var uuid = s.join("")
return uuid
},
showPic(url, params) {
if (url && params && url.indexOf('http://xieku.oss-cn-beijing.aliyuncs.com') != -1) {
return url + params
}
return url
}
}
src/utils/date.js 0 → 100644
// date.js
export function formatDate(date, fmt) {
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
}
let o = {
'M+': date.getMonth() + 1,
'd+': date.getDate(),
'h+': date.getHours(),
'm+': date.getMinutes(),
's+': date.getSeconds()
};
for (let k in o) {
if (new RegExp(`(${k})`).test(fmt)) {
let str = o[k] + '';
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str));
}
}
return fmt;
}
function padLeftZero(str) {
return ('00' + str).substr(str.length);
}
export function str2Date(dateStr, separator) {
if (!separator) {
separator = "-";
}
let dateArr = dateStr.split(separator);
let year = parseInt(dateArr[0]);
let month;
//处理月份为04这样的情况
if (dateArr[1].indexOf("0") == 0) {
month = parseInt(dateArr[1].substring(1));
} else {
month = parseInt(dateArr[1]);
}
let day = parseInt(dateArr[2]);
let date = new Date(year, month - 1, day);
return date;
}
src/utils/request.js 0 → 100644
// import axios from 'axios'
// import store from '../store'
// import router from '../router'
// import { Message } from 'view-design'
// // 创建axios实例
// const service = axios.create({
// baseURL: 'https://api.ecrentcn.com/mall-portal/',
// // baseURL: "http://api.v2.cnxieku.com/mall-portal/",
// // baseURL: "http://192.168.31.127:8201/mall-portal/",
// timeout: 60000 // 请求超时时间
// })
// // request拦截器
// service.interceptors.request.use(config => {
// config.headers['clientType'] = 5
// if (store.state.token) {
// config.headers['Authorization'] = store.state.token
// // Loading.service() // 请求开始 开启loading
// }
// return config
// }, error => {
// // Do something with request error
// window.console.log(error) // for debug
// Promise.reject(error)
// })
// // respone拦截器
// service.interceptors.response.use(
// response => {
// /**
// * code为非200是抛错 可结合自己业务进行修改
// */
// const res = response.data
// if (res.code !== 200) {
// // 401:未登录;
// if (res.code === 401 || res.code === 403) {
// store.commit('SET_TOKEN', '')
// router.replace({
// name: 'login',
// query: { redirect: router.currentRoute.fullPath } // 登录后再跳回此页面时要做的配置
// })
// } else {
// if (res.message != '支付失败') {
// Message.error(res.message)
// }
// }
// return Promise.reject(res)
// } else {
// return response.data
// }
// },
// error => {
// // 错误信息状态码提示
// if (error.response) {
// switch (error.response.status) {
// case 400:
// Message.error('数据请求错误')
// break
// case 401:
// // Message.error('未授权，请重新登录')
// store.commit('SET_TOKEN', '')
// router.replace({
// name: 'login',
// query: { redirect: router.currentRoute.fullPath } // 登录后再跳回此页面时要做的配置
// })
// break
// case 403:
// Message.error('拒绝访问')
// break
// case 404:
// Message.error('请求错误，未找到该资源')
// break
// case 405:
// Message.error('请求方法未允许')
// break
// case 408:
// Message.error('请求超时')
// break
// case 500:
// Message.error('服务器异常')
// break
// case 501:
// Message.error('网络未实现')
// break
// case 502:
// Message.error('网络错误')
// break
// case 503:
// Message.error('服务不可用')
// break
// case 504:
// Message.error('网络超时')
// break
// case 505:
// Message.error('http版本不支持该请求')
// break
// }
// }
// // window.console.log('err' + error)
// // Message.error('服务器开小差了，请稍后重试')
// return Promise.reject(error)
// }
// )
// export default service
src/views/Home/index.vue
......@@ -3,6 +3,7 @@
<custom-header></custom-header>
<!-- 第一屏 -->
<div class="page bg-image" id="page1" @mousewheel="scrollFun">
<!-- 首屏文字 -->
<transition leave-active-class="titleHidden">
<img
class="show-title"
......@@ -27,6 +28,7 @@
'show-video',
]"
>
<div class="video-mask"></div>
<video
autoplay
loop
......@@ -49,7 +51,7 @@
<!-- <source :src="PATH_TO_WEBM" type="video/webm"/>
浏览器不支持 video 标签，建议升级浏览器。 -->
</video>
<transition
<!-- <transition
:enter-active-class="screenIndex == 4 ? 'scaleLeftShow' : ''"
leave-active-class="scaleLeftHidden"
>
......@@ -65,41 +67,77 @@
class="show-border"
v-if="screenIndex == 4 || screenIndex == 5"
></div>
</transition>
</transition> -->
</div>
</transition>
<!-- 视频过渡第二屏 -->
<transition leave-active-class="animated bounceOutDown">
<div
class="show-mask"
v-if="screenIndex == 3 || screenIndex == 5"
v-if="screenIndex == 2 || screenIndex == 4"
></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"
/>
<div class="mask-img" v-if="screenIndex == 2">
<p>生命纪念馆</p>
<p class="special-color">为后人传承精神财富!</p>
<p class="gray-color">死亡不是人生的终点遗忘才是</p>
<p class="gray-color">为后人为亲人建馆，随时记录，时刻触及</p>
<p class="gray-color">纪念馆将承载一生的数据，世代相传</p>
</div>
</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=""
/>
<div class="mask-img" v-if="screenIndex == 4">
<p>爱的传承</p>
<p class="special-color">念念不忘 ，必有回想</p>
<p class="gray-color">爱的传承，是每一个家庭的朴素愿望与虔诚祷告</p>
<p class="gray-color">传承，不仅为逝者，也为自己，更是为后人</p>
<p class="gray-color">传承，让家有了永恒的生命力！</p>
</div>
</transition>
</div>
<div class="page" id="page2">
<div class="show-tab">
<img src="@/assets/images/Map.png" alt="" class="small" />
<video
v-if="checkedTab == 1"
autoplay
loop
v-on:canplay="canplay"
muted
ref="video"
>
<source src="https://atlimg.oss-cn-hangzhou.aliyuncs.com/web/home/homeTemplate.mp4" type="video/mp4" />
浏览器不支持 video 标签，建议升级浏览器。
<!-- <source :src="PATH_TO_WEBM" type="video/webm"/>
浏览器不支持 video 标签，建议升级浏览器。 -->
</video>
<video
v-if="checkedTab == 2"
autoplay
loop
v-on:canplay="canplay"
muted
ref="video"
>
<source :src="PATH_TO_MP4" type="video/mp4" />
浏览器不支持 video 标签，建议升级浏览器。
<!-- <source :src="PATH_TO_WEBM" type="video/webm"/>
浏览器不支持 video 标签，建议升级浏览器。 -->
</video>
<img
v-if="checkedTab == 3"
src="https://atlimg.oss-cn-hangzhou.aliyuncs.com/web/home/show.png"
alt=""
class="small"
/>
<div class="tab-mask"></div>
<div class="my-tab">
<ul>
......@@ -112,7 +150,15 @@
{{ item.name }}
</li>
</ul>
<div class="show-tip">我们提供了丰富模版，根据自己喜欢可自由选择</div>
<div class="show-tip" v-if="checkedTab == 1">
我们提供了丰富模版，根据自己喜欢可自由选择
</div>
<div class="show-tip" v-else-if="checkedTab == 2">
专属空间，不止线上。在线纪念功能可随时随地通过手机轻松
</div>
<div class="show-tip" v-else>
突破限制，可以将线上纪念馆呈现在手机，IPAD，电视，电脑上
</div>
</div>
</div>
</div>
......@@ -218,7 +264,10 @@ export default {
data() {
return {
vedioCanPlay: false,
PATH_TO_MP4: "https://atlimg.oss-cn-hangzhou.aliyuncs.com/web/2574.mp4",
templateVideo:
"https://atlimg.oss-cn-hangzhou.aliyuncs.com/web/home/homeTemplate.mp4",
PATH_TO_MP4:
"https://atlimg.oss-cn-hangzhou.aliyuncs.com/web/home/homeVideo.mp4",
screenWeight: 0, // 屏幕宽度
screenHeight: 0, // 屏幕高度
screenIndex: 1, //用于记录第一页面内部的顺序
......@@ -237,9 +286,15 @@ export default {
{ id: 2, name: "在线纪念功能" },
{ id: 3, name: "多端展示" },
],
deviceType: null,
};
},
mounted() {
if (this.common.isMobile()) {
this.deviceType = 1;
} else {
this.deviceType = 2;
}
this.screenWeight = document.documentElement.clientWidth;
this.screenHeight = document.documentElement.clientHeight;
this.main = document.getElementById("main");
......@@ -258,7 +313,7 @@ export default {
let delta = event.detail || -event.wheelDelta;
// 如果当前滚动开始时间和上次滚动结束时间的差值小于1.5s，则不执行翻页动作，这样做是为了实现类似节流的效果
if (this.startTime - this.endTime > 500) {
if (delta > 0 && this.screenIndex < 5) {
if (delta > 0 && this.screenIndex < 4) {
console.log(1, this.screenIndex);
this.screenIndex++;
}
......@@ -266,7 +321,7 @@ export default {
console.log(2, this.screenIndex);
this.screenIndex--;
}
if (this.screenIndex <= 5) {
if (this.screenIndex <= 4) {
console.log(3, this.screenIndex);
event.preventDefault();
}
......@@ -276,6 +331,7 @@ export default {
},
changeTab(id) {
this.checkedTab = id;
this.vedioCanPlay = false;
},
canplay() {
this.vedioCanPlay = true;
......@@ -310,7 +366,6 @@ export default {
}
.page {
width: 100%;
padding-top: 70px;
display: flex;
flex-direction: column;
justify-content: center;
......@@ -375,14 +430,14 @@ export default {
}
.show-title {
width: 30%;
width: 35%;
padding: 15% 0 140px;
box-sizing: border-box;
}
.show-mask {
width: 100%;
height: 100%;
background: rgba(11, 11, 20, 0.85);
background: rgba(29, 26, 26, 0.85);
position: absolute;
left: 0;
right: 0;
......@@ -393,17 +448,36 @@ export default {
}
}
.mask-img {
width: 40%;
width: 50%;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
// transform: translate(-50%, -50%);
margin-left: -20%;
margin-left: -25%;
margin-top: -150px;
z-index: 2;
font-size: 24px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.gray-color {
padding: 5px 0;
}
p:first-child {
font-size: 44px;
color: #ccc;
}
p:nth-child(2) {
font-size: 44px;
color: #ccc;
margin-bottom: 30px;
}
}
.show-scrollword {
width: 80%;
margin: 50px auto 80px;
width: 60%;
margin: 100px auto 120px;
text-align: center;
color: #cccccc;
font-size: 24px;
......@@ -413,19 +487,19 @@ export default {
p:first-child {
margin-bottom: 10px;
color: #fff;
font-size: 60px;
font-size: 50px;
}
p:nth-child(2) {
font-size: 60px;
font-size: 50px;
}
p:last-child {
text-align: left;
margin-top: 40px;
width: 76%;
width: 80%;
}
}
.scroll-table {
width: 70%;
width: 60%;
// height: 650px;
padding: 20px 0;
background: #202020;
......@@ -470,20 +544,38 @@ export default {
rgba(11, 11, 20, 0)
);
}
.video-mask {
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 30%;
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;
// background: no-repeat center bottom / 100% 100%;
background-image: url("~@/assets/images/ptfdjk.png");
video{
width: 100%;
}
.small {
width: 100%;
z-index: 2;
// z-index: 2;
position: absolute;
left: 50%;
top: 10%;
transform: translate(-50%);
width: 80%;
left: 0;
top: 0;
bottom: 0;
right: 0;
width: 100%;
}
.my-tab {
......@@ -515,9 +607,7 @@ export default {
left: 0;
right: 0;
bottom: -2px;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
transition: 0.3s;
transition: 1s all linear;
background-image: -webkit-gradient(
linear,
left top,
......@@ -576,13 +666,24 @@ export default {
-webkit-animation-name: scaleRightHidden;
animation-name: scaleRightHidden;
}
.rightLeft {
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-name: rightLeft;
animation-name: rightLeft;
}
.leftRight {
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-name: leftRight;
animation-name: leftRight;
}
.fallVideo {
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-name: fallVideo;
animation-name: fallVideo;
}
@keyframes fallVideo {
from {
-webkit-transform: translate3d(0px, 0px, 0px) rotateX(59.9972deg);
......@@ -725,9 +826,13 @@ export default {
.show-moretitle {
padding-bottom: 50px;
display: flex;
flex-direction: column;
align-items: center;
p:first-child {
font-size: 60px;
font-size: 50px;
color: #fff;
margin-bottom: 5px;
}
p:last-child {
font-size: 40px;
......@@ -735,7 +840,7 @@ export default {
}
.show-more {
display: flex;
align-items: center;
align-items: flex-start;
width: 80%;
> div {
width: calc(33.3% - 30px);
......@@ -751,10 +856,10 @@ export default {
}
p {
color: #ccc;
font-size: 24px;
font-size: 22px;
}
.show-subtitle {
font-size: 40px;
font-size: 30px;
margin-bottom: 30px;
color: #ffffff;
}
......@@ -798,5 +903,43 @@ export default {
border-bottom: 1px solid linear-gradient(to right, #b8832d, #f6c943);
position: relative;
}
.gray-color {
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
background-image: -webkit-gradient(
linear,
left top,
right top,
from(rgba(215, 215, 215, 0.85)),
to(rgba(255, 255, 255, 0.85))
);
background-image: -webkit-linear-gradient(
left,
rgba(215, 215, 215, 0.85),
rgba(255, 255, 255, 0.85)
);
background-image: -moz-linear-gradient(
left,
rgba(215, 215, 215, 0.85),
rgba(255, 255, 255, 0.85)
);
background-image: linear-gradient(
to right,
rgba(215, 215, 215, 0.85),
rgba(255, 255, 255, 0.85)
);
color: linear-gradient(
to right,
rgba(215, 215, 215, 0.85),
rgba(255, 255, 255, 0.85)
);
border-bottom: 1px solid
linear-gradient(
to right,
rgba(215, 215, 215, 0.85),
rgba(255, 255, 255, 0.85)
);
}
</style>
src/views/Home/mindex.vue 0 → 100644
<template>
<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':
screenIndex == 2 ||
screenIndex == 3 ||
screenIndex == 4 ||
screenIndex == 5,
},
'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"/>
浏览器不支持 video 标签，建议升级浏览器。 -->
</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="screenIndex == 4 ? 'scaleRightShow' : ''"
leave-active-class=" scaleRightHidden"
>
<div
class="show-border"
v-if="screenIndex == 4 || screenIndex == 5"
></div>
</transition>
</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>
</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>
</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>
</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>
</div>
<custom-footer></custom-footer>
</div>
</template>
<script>
import CustomHeader from "@/components/Header";
import CustomFooter from "@/components/Footer";
import vueSeamlessScroll from "vue-seamless-scroll";
export default {
name: "index",
components: {
CustomHeader,
CustomFooter,
vueSeamlessScroll,
},
props: {},
data() {
return {
vedioCanPlay: false,
PATH_TO_MP4: "https://atlimg.oss-cn-hangzhou.aliyuncs.com/web/2574.mp4",
screenWeight: 0, // 屏幕宽度
screenHeight: 0, // 屏幕高度
screenIndex: 1, //用于记录第一页面内部的顺序
startTime: 0, // 翻屏起始时间
endTime: 0, // 上一次翻屏结束时间
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: "风格多样化" },
{ id: 2, name: "在线纪念功能" },
{ id: 3, name: "多端展示" },
],
};
},
mounted() {
if (!this.common.isMobile) {
this.$router.replace("/pindex");
}
this.screenWeight = document.documentElement.clientWidth;
this.screenHeight = document.documentElement.clientHeight;
this.main = document.getElementById("main");
this.obj = document.getElementsByTagName("div");
for (let i = 0; i < this.obj.length; i++) {
if (this.obj[i].className.indexOf("page") != -1) {
this.obj[i].style.height = this.screenHeight + "px";
}
}
},
methods: {
scrollFun(event) {
this.startTime = new Date().getTime();
// mousewheel事件中的 “event.wheelDelta” 属性值：返回的如果是正值说明滚轮是向上滚动
// DOMMouseScroll事件中的 “event.detail” 属性值：返回的如果是负值说明滚轮是向上滚动
let delta = event.detail || -event.wheelDelta;
// 如果当前滚动开始时间和上次滚动结束时间的差值小于1.5s，则不执行翻页动作，这样做是为了实现类似节流的效果
if (this.startTime - this.endTime > 500) {
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();
}
},
changeTab(id) {
this.checkedTab = id;
},
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>
.root {
width: 100%;
background: #070d1d;
}
.bg-image {
background: url("~@/assets/images/BG.png") no-repeat;
background-size: 100% 100%;
}
.page {
width: 100%;
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 {
width: 70%;
height: 60%;
max-width: 800px;
max-height: 600px;
border-radius: 30px;
position: relative;
-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;
}
}
.show-url {
width: 35%;
position: absolute;
left: 0;
top: 0;
bottom: 0;
z-index: 1;
border: 10px solid #000;
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%;
padding: 15% 0 140px;
box-sizing: border-box;
}
.show-mask {
width: 100%;
height: 100%;
background: rgba(11, 11, 20, 0.85);
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
&.animate-hidden {
opacity: 0;
}
}
.mask-img {
width: 40%;
position: absolute;
left: 50%;
top: 50%;
// transform: translate(-50%, -50%);
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;
// background: no-repeat center bottom / 100% 100%;
background-image: url("~@/assets/images/ptfdjk.png");
.small {
width: 100%;
z-index: 2;
position: absolute;
left: 50%;
top: 10%;
transform: translate(-50%);
width: 80%;
}
.my-tab {
width: 40%;
position: absolute;
left: 50%;
left: 50%;
transform: translate(-50%, -50%);
bottom: 30px;
z-index: 1;
ul {
display: flex;
justify-content: space-between;
font-size: 20px;
border-bottom: 2px solid #fff;
}
li {
padding: 20px 10px;
color: #fff;
font-size: 26px;
font-weight: bold;
cursor: pointer;
&.special-color::after {
content: "";
// width: 20%;
height: 2px;
position: absolute;
left: 0;
right: 0;
bottom: -2px;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
transition: 0.3s;
background-image: -webkit-gradient(
linear,
left top,
right top,
from(#b8832d),
to(#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 {
font-size: 16px;
color: #ffffff;
margin: 20px;
text-align: left;
}
}
}
.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: 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 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;
}
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 {
// from {
// -webkit-transform: perspective(1200px) rotate3d(1, 0, 0, 50deg);
// transform: perspective(1200px) rotate3d(1, 0, 0, 50deg);
// -webkit-animation-timing-function: linear;
// animation-timing-function: linear;
// }
// 50% {
// -webkit-transform: perspective(1200px) rotate3d(1, 0, 0, 30deg);
// transform: perspective(1200px) rotate3d(1, 0, 0, 30deg) ;
// }
// to {
// -webkit-transform: perspective(1200px) ;
// transform: perspective(1200px) ;
// }
// }
@keyframes flipInX {
from {
-webkit-transform: perspective(1200px) rotate3d(1, 0, 0, 50deg) scale(1);
transform: perspective(1200px) rotate3d(1, 0, 0, 50deg) scale(1);
// transform-origin: center bottom;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
to {
// transform-origin: center bottom;
-webkit-transform: perspective(1200px) scale(1.2);
transform: perspective(1200px) scale(1.2);
}
}
.show-moretitle {
padding-bottom: 50px;
p:first-child {
font-size: 60px;
color: #fff;
}
p:last-child {
font-size: 40px;
}
}
.show-more {
display: flex;
align-items: center;
width: 80%;
> div {
width: calc(33.3% - 30px);
margin: 15px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
img {
width: 131px;
height: 131px;
margin-bottom: 34px;
}
p {
color: #ccc;
font-size: 24px;
}
.show-subtitle {
font-size: 40px;
margin-bottom: 30px;
color: #ffffff;
}
}
}
.show-btn {
background: #bb862e;
border-radius: 51px;
width: 390px;
padding: 10px 0;
margin: 80px auto;
color: #ffff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
p:first-child {
font-size: 38px;
margin-bottom: 5px;
}
p:last-child {
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>
src/vue.config.js
module.exports={
module.exports = {
css: {
loaderOptions: {
css: {},
postcss: {
plugins: [
require('postcss-px2rem')({
remUnit: 75 //根据设计图
//375的图就给37.5，也就是1rem=37.5px
})
]
}
}
},
}
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