Skip to content

A
antaile-web
Commit 7a61c4cd by wangyalan-git
Options

登录页/页脚

parent e1caac1a
Showing with 249 additions and 60 deletions
public/index.html
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- <meta name="viewport" content="width=device-width,initial-scale=1.0"> -->
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<title><%= htmlWebpackPlugin.options.title %></title>
<style>
body::-webkit-scrollbar {
display: none; /*ChromeSafari*/
}
</style>
</head>
<body>
<body class="body">
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
<strong
>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
properly without JavaScript enabled. Please enable it to
continue.</strong
>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
......
src/components/Footer.vue
<template>
<div class="footer">
<div>安泰乐官网 ｜ 福建福鼎姿国寺 ｜ 江苏沭阳圆觉禅林</div>
<div class="tip">
安泰乐集团有限公司 ｜ Copyright ATL All Rights Reserved
闽ICP备16020886号-3
<el-row :gutter="20" type="flex" justify="space-between">
<el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6" class="show-company">
<img src="@/assets/images/antail.png" alt="" />
<p class="show-name">安泰乐（厦门）集团有限公司</p>
<p class="show-intro">
安泰乐集团成立于2012年，中国总部位于厦门是
一家专注于中国生命关怀产业，为生命纪念馆提
供设计、装修、管理、服务，一站式解决方案的 专业化管理服务公司。
</p>
<p class="show-tip">©️2021ATL Group.All rights reserved</p>
<p class="show-tip">闽ICP备16020886号-3</p>
</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6" class="show-memorials">
<p class="show-name">安泰乐生命纪念馆</p>
<el-row :gutter="10">
<el-col :span="12" v-for="(item, index) in memorials" :key="index">
<div class="show-item">
<img src="@/assets/images/hallw.png" alt="" />
<div>
<p class="show-tip">{{ item.address }}</p>
<p>{{ item.name }}</p>
</div>
</div>
</el-col>
</el-row>
</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="4" :xl="4" class="show-app">
<div>
<img
src="https://atlimg.oss-cn-hangzhou.aliyuncs.com/web/home/whcbqhn.png"
alt=""
/>
<p>
<img src="@/assets/images/WeChat (2).png" alt="" />
关注公众号
</p>
</div>
<div>
<img
src="https://atlimg.oss-cn-hangzhou.aliyuncs.com/web/home/app.png"
alt=""
/>
<p>
<img src="@/assets/images/app.png" alt="" />
安泰乐app下载
</p>
</div>
</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6" class="show-address">
<div class="address">
<img src="@/assets/images/clouds.png" alt="" />
<div>
<p>地址：中国福建省厦门市湖里区同安 商务大厦1号楼9层</p>
<p>电话：0592-5539618</p>
<p>邮件：mail@atlgroup-asia.com</p>
<p>技术支持：云中祠信息科技</p>
</div>
</div>
<div class="show-num">
<img src="@/assets/images/embassy.png" alt="" />
<div>
<p>999,069,35</p>
<p class="show-tip">已建馆人数</p>
</div>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
name: "footer",
props: {},
data() {
return {
memorials: [
{ name: "天竺生命纪念馆", address: "福建晋江" },
{ name: "南宝生命纪念馆", address: "江西南昌" },
{ name: "天王生命纪念馆", address: "福建古田" },
{ name: "圆觉生命纪念馆", address: "福建晋江" },
{ name: "安泰乐生命纪念馆", address: "福建晋江" },
{ name: "天竺生命纪念馆", address: "湖北孝感" },
],
};
},
};
</script>
<style lang="scss" scoped>
.footer {
background: #f3f3f3;
text-align: center;
padding: 35px calc((100% - 1200px) / 2);
color: #A9A9A9;
font-size: 20px;
text-align: left;
padding: 40px 50px 90px;
color: #999;
font-size: 16px;
>div{
flex-wrap: wrap;
}
}
.tip{
.show-company {
img {
width: 92px;
height: 68px;
}
.show-intro {
color: #999;
font-size: 16px;
margin-top: 10px;
margin-bottom: 20px;
}
}
.show-memorials {
margin-top: 68px;
flex: 1;
.show-item {
display: flex;
align-items: center;
margin-bottom: 5px;
p:last-child {
color: #caa774;
font-size: 16px;
}
img {
width: 55px;
height: 55px;
object-fit: contain;
margin-right: 10px;
}
}
}
.show-app {
margin-top: 60px;
margin-bottom: 30px;
display: flex;
align-items: center;
justify-content: space-between;
img {
width: 106px;
height: 106px;
}
p {
color: #020202;
font-size: 12px;
display: flex;
align-items: center;
img {
width: 23px;
height: 27px;
margin-right: 5px;
object-fit: contain;
}
}
}
.show-address {
.address {
display: flex;
line-height: 30px;
img {
width: 134px;
height: 102px;
margin-right: 15px;
}
}
.show-num {
margin-top: 30px;
display: flex;
justify-content: center;
align-items: center;
color: #333;
font-size: 20px;
img {
width: 80px;
height: 58px;
margin-right: 20px;
}
}
}
.show-name {
color: #333;
font-size: 20px;
margin: 5px 0 10px 0;
// font-weight: bold;
}
.show-tip {
font-size: 16px;
color: #999;
}
</style>
src/views/Home/index.vue
......@@ -2,7 +2,7 @@
<div class="root">
<custom-header></custom-header>
<!-- 第一屏 -->
<div class="page bg-image" id="page1" @mousewheel="scrollFun">
<div class="page bg-image" id="page1" @mousewheel="scrollFun" :style="'height:' + screenHeight + 'px'">
<!-- 首屏文字 -->
<transition leave-active-class="titleHidden">
<img
......@@ -12,6 +12,7 @@
v-if="screenIndex == 1"
/>
</transition>
<!-- 视频 -->
<transition
:enter-active-class="screenIndex == 2 ? 'fallVideo' : ''"
leave-active-class="screenIndex == 1"
......@@ -20,10 +21,7 @@
:class="[
{
'animate-video':
screenIndex == 2 ||
screenIndex == 3 ||
screenIndex == 4 ||
screenIndex == 5,
screenIndex == 2 || screenIndex == 3 || screenIndex == 4,
},
'show-video',
]"
......@@ -35,10 +33,7 @@
:class="[
{
'animate-video':
screenIndex == 2 ||
screenIndex == 3 ||
screenIndex == 4 ||
screenIndex == 5,
screenIndex == 2 || screenIndex == 3 || screenIndex == 4,
},
'video',
]"
......@@ -71,7 +66,10 @@
</div>
</transition>
<!-- 视频过渡第二屏 -->
<transition leave-active-class="animated bounceOutDown">
<transition
enter-active-class="animated opacityShow"
leave-active-class="animated opacityHidden"
>
<div
class="show-mask"
v-if="screenIndex == 2 || screenIndex == 4"
......@@ -104,40 +102,13 @@
</div>
<div class="page" id="page2">
<div class="show-tab">
<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>
<span v-html="videoSource"></span>
<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>
......@@ -299,11 +270,11 @@ export default {
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";
}
}
// 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) {
......@@ -351,6 +322,18 @@ export default {
limitMoveNum: 1,
};
},
// 计算属性的 getter
videoSource: function () {
// `this` 指向 vm 实例
let url = "";
if (this.checkedTab == 1) {
url =
"https://atlimg.oss-cn-hangzhou.aliyuncs.com/web/home/homeTemplate.mp4";
} else if (this.checkedTab == 2) {
url = this.PATH_TO_MP4;
}
return `<video autoplay loop muted width="100%" height="100%"><source src="${url}" type="video/mp4"></video>`;
},
},
};
</script>
......@@ -564,8 +547,9 @@ export default {
height: 100%;
position: relative;
// background: no-repeat center bottom / 100% 100%;
video{
video {
width: 100%;
height: 100%;
}
.small {
width: 100%;
......@@ -660,6 +644,18 @@ export default {
-webkit-animation-name: scaleLeftHidden;
animation-name: scaleLeftHidden;
}
.opacityShow {
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-name: opacityShow;
animation-name: opacityShow;
}
.opacityHidden {
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-name: opacityHidden;
animation-name: opacityHidden;
}
.scaleRightHidden {
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
......@@ -716,6 +712,30 @@ export default {
transform: translate3d(0px, 93.7356px, 0px);
}
}
@keyframes opacityShow {
from {
opacity: 0;
// transform-origin: center bottom;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
to {
opacity: 1;
}
}
@keyframes opacityHidden {
from {
opacity: 1;
// transform-origin: center bottom;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
to {
opacity: 0;
}
}
@keyframes titleHidden {
from {
-webkit-transform: translate3d(0px, 93.7356px, 0px);
......@@ -825,7 +845,7 @@ export default {
}
.show-moretitle {
padding-bottom: 50px;
padding: 50px 0;
display: flex;
flex-direction: column;
align-items: center;
......
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