|
@@ -0,0 +1,638 @@
|
|
|
+<template>
|
|
|
+ <div class="max-home-button-box">
|
|
|
+ <div class="max-home-box">
|
|
|
+ <div class="max-bottom-box">
|
|
|
+ <div class="top-button-box">
|
|
|
+ <div class="left-box">
|
|
|
+ <div class="position-button top-margin" @click="goPage('EmergencyManagement','应急预警')">
|
|
|
+ <div>
|
|
|
+ <img src="@/assets/ZDimages/home/icon_sy_yjyj.png">
|
|
|
+ <p>应急预警</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="position-button" @click="goPage('GasManage','气瓶监测')">
|
|
|
+ <div>
|
|
|
+ <img src="@/assets/ZDimages/home/icon_sy_qpjc.png">
|
|
|
+ <p>气瓶监测</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="position-button" @click="goPage('ChemicalLibrary','化学品管理')">
|
|
|
+ <div>
|
|
|
+ <img src="@/assets/ZDimages/home/icon_sy_hxpgl.png">
|
|
|
+ <p>化学品管控</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--<div class="position-button top-margin" @click="goPage('SafetyEducationExam','安全教育与考试')">-->
|
|
|
+ <!--<div>-->
|
|
|
+ <!--<img src="@/assets/ZDimages/home/icon_sy_aqjyyks.png">-->
|
|
|
+ <!--<p>安全教育与考试</p>-->
|
|
|
+ <!--</div>-->
|
|
|
+ <!--</div>-->
|
|
|
+ <!--<div class="position-button" @click="goPage('null','责任体系')">-->
|
|
|
+ <!--<div>-->
|
|
|
+ <!--<img src="@/assets/ZDimages/home/icon_sy_zrtx.png">-->
|
|
|
+ <!--<p>责任体系</p>-->
|
|
|
+ <!--</div>-->
|
|
|
+ <!--</div>-->
|
|
|
+ <!--<div class="position-button" @click="goPage('SecureAccess','安全准入')">-->
|
|
|
+ <!--<div>-->
|
|
|
+ <!--<img src="@/assets/ZDimages/home/icon_sy_aqjyyks.png">-->
|
|
|
+ <!--<p>安全准入</p>-->
|
|
|
+ <!--</div>-->
|
|
|
+ <!--</div>-->
|
|
|
+ </div>
|
|
|
+ <div class="center-box">
|
|
|
+ <div class="position-button" @click="goPage('Https://www.sxitdlc.com','数据大屏')">
|
|
|
+ <div>
|
|
|
+ <img src="@/assets/ZDimages/home/icon_sydlpt_sjksh.png">
|
|
|
+ <p>数据可视化</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right-box">
|
|
|
+ <div class="position-button top-margin" @click="goPage('SecureAccess','安全准入')">
|
|
|
+ <div>
|
|
|
+ <img src="@/assets/ZDimages/home/icon_sy_aqzr.png">
|
|
|
+ <p>安全准入</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="position-button" @click="goPage('HazardManagement','危险源管理')">
|
|
|
+ <div>
|
|
|
+ <img src="@/assets/ZDimages/home/icon_tydlptsy_wxygl.png">
|
|
|
+ <p>危险源管理</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="position-button" @click="goPage('SecurityCheck','安全检查')">
|
|
|
+ <div>
|
|
|
+ <img src="@/assets/ZDimages/home/icon_sy_aqjc.png">
|
|
|
+ <p>安全检查</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--<div class="position-button top-margin" @click="goPage('HierarchicalControl','分级管控')">-->
|
|
|
+ <!--<div>-->
|
|
|
+ <!--<img src="@/assets/ZDimages/home/icon_sy_fjgk.png">-->
|
|
|
+ <!--<p>分级管控</p>-->
|
|
|
+ <!--</div>-->
|
|
|
+ <!--</div>-->
|
|
|
+ <!--<div class="position-button" @click="goPage('SecurityCheck','安全检查')">-->
|
|
|
+ <!--<div>-->
|
|
|
+ <!--<img src="@/assets/ZDimages/home/icon_sy_aqjc.png">-->
|
|
|
+ <!--<p>安全检查</p>-->
|
|
|
+ <!--</div>-->
|
|
|
+ <!--</div>-->
|
|
|
+ <!--<div class="position-button" @click="goPage('HazardManagement','危险源管理')">-->
|
|
|
+ <!--<div>-->
|
|
|
+ <!--<img src="@/assets/ZDimages/home/icon_tydlptsy_wxygl.png">-->
|
|
|
+ <!--<p>危险源管理</p>-->
|
|
|
+ <!--</div>-->
|
|
|
+ <!--</div>-->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="center-button-box display-none-one"></div>
|
|
|
+ <div class="bottom-button-box">
|
|
|
+ <div class="null-button"></div>
|
|
|
+ <div class="position-button" @click="goPage('SafetyEducationExam','安全教育与考试')">
|
|
|
+ <div>
|
|
|
+ <img src="@/assets/ZDimages/home/icon_sy_aqyuyks.png">
|
|
|
+ <p>安全教育与考试</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="position-button" @click="goPage('CreditViolation','信用管理')">
|
|
|
+ <div>
|
|
|
+ <img src="@/assets/ZDimages/home/icon_sy_xygl.png">
|
|
|
+ <p>信用管理</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="position-button" @click="goPage('HierarchicalControl','分级管控')">
|
|
|
+ <div>
|
|
|
+ <img src="@/assets/ZDimages/home/icon_sy_fjgk.png">
|
|
|
+ <p>分级管控</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="position-button" @click="goPage('null','安全档案')">
|
|
|
+ <div>
|
|
|
+ <img src="@/assets/ZDimages/home/icon_sy_aqda.png">
|
|
|
+ <p>安全档案</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="position-button" @click="goPage('Comprehensive','综合管理')">
|
|
|
+ <div>
|
|
|
+ <img src="@/assets/ZDimages/home/icon_sy_zhgl.png">
|
|
|
+ <p>综合管理</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--<div class="position-button" @click="goPage('EmergencyManagement','应急管理')">-->
|
|
|
+ <!--<div>-->
|
|
|
+ <!--<img src="@/assets/ZDimages/home/icon_sy_yjgl.png">-->
|
|
|
+ <!--<p>应急管理</p>-->
|
|
|
+ <!--</div>-->
|
|
|
+ <!--</div>-->
|
|
|
+ <!--<div class="position-button" @click="goPage('CreditViolation','信用管理')">-->
|
|
|
+ <!--<div>-->
|
|
|
+ <!--<img src="@/assets/ZDimages/home/icon_sy_xywg.png">-->
|
|
|
+ <!--<p>信用管理</p>-->
|
|
|
+ <!--</div>-->
|
|
|
+ <!--</div>-->
|
|
|
+ <!--<div class="position-button" @click="goPage('null','安全档案')">-->
|
|
|
+ <!--<div>-->
|
|
|
+ <!--<img src="@/assets/ZDimages/home/icon_sy_aqda.png">-->
|
|
|
+ <!--<p>安全档案</p>-->
|
|
|
+ <!--</div>-->
|
|
|
+ <!--</div>-->
|
|
|
+ <!--<div class="position-button" @click="goPage('Comprehensive','综合管理')">-->
|
|
|
+ <!--<div>-->
|
|
|
+ <!--<img src="@/assets/ZDimages/home/icon_sy_zhgl.png">-->
|
|
|
+ <!--<p>综合管理</p>-->
|
|
|
+ <!--</div>-->
|
|
|
+ <!--</div>-->
|
|
|
+ <div class="null-button"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <img class="img-1" src="@/assets/ZDimages/home/img_sy_lf.png">
|
|
|
+ <img class="img-2" src="@/assets/ZDimages/home/img_yh_db.png">
|
|
|
+ <img class="img-3" src="@/assets/ZDimages/home/img_yh_zj.png">
|
|
|
+ <img class="img-4" src="@/assets/ZDimages/home/img_yh_dd.png">
|
|
|
+ <img class="img-5" src="@/assets/ZDimages/home/img_yh_zj.png">
|
|
|
+ <img class="img-6" src="@/assets/ZDimages/home/img_yh_db.png">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ name: 'homeSubPagePublic.vue',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ routeData:{},
|
|
|
+ userType:localStorage.getItem('userType'),
|
|
|
+ initPage:localStorage.getItem('initPage'),
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created(){
|
|
|
+
|
|
|
+ },
|
|
|
+ mounted(){
|
|
|
+ let self =this
|
|
|
+ this.routeData = JSON.parse(localStorage.getItem("routeData"))
|
|
|
+ if(localStorage.getItem('initPage') == 'true'){
|
|
|
+ console.log("true")
|
|
|
+ if(localStorage.getItem('userType') == '22'){
|
|
|
+ for(let i=0;i<self.routeData.length;i++){
|
|
|
+ if(!self.routeData[i].hidden&&self.routeData[i].name != 'Https://www.sxitdlc.com'){
|
|
|
+ if (self.routeData[i].children){
|
|
|
+ for(let o=0;o<self.routeData[i].children.length;o++){
|
|
|
+ if(!self.routeData[i].children[o].alwaysShow&&!self.routeData[i].children[o].hidden){
|
|
|
+ let urlText = self.routeData[i].path + '/' + self.routeData[i].children[o].path;
|
|
|
+ console.log("urlText",urlText)
|
|
|
+ this.$router.push({ path: urlText });
|
|
|
+ return
|
|
|
+ }else{
|
|
|
+ if(self.routeData[i].children[o].children){
|
|
|
+ for(let x=0;x<self.routeData[i].children[o].children.length;x++){
|
|
|
+ if(!self.routeData[i].children[o].children[x].alwaysShow&&!self.routeData[i].children[o].children[x].hidden){
|
|
|
+ let urlText = self.routeData[i].path + '/' + self.routeData[i].children[o].path + '/' + self.routeData[i].children[o].children[x].path;
|
|
|
+ console.log("urlText",urlText)
|
|
|
+ this.$router.push({ path: urlText });
|
|
|
+ return
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ console.log("false")
|
|
|
+ for(let i=0;i<self.routeData.length;i++){
|
|
|
+ if(!self.routeData[i].hidden&&self.routeData[i].name != 'Https://www.sxitdlc.com'){
|
|
|
+ if (self.routeData[i].children){
|
|
|
+ for(let o=0;o<self.routeData[i].children.length;o++){
|
|
|
+ if(!self.routeData[i].children[o].alwaysShow&&!self.routeData[i].children[o].hidden){
|
|
|
+ let urlText = self.routeData[i].path + '/' + self.routeData[i].children[o].path;
|
|
|
+ console.log("urlText",urlText)
|
|
|
+ this.$router.push({ path: urlText });
|
|
|
+ return
|
|
|
+ }else{
|
|
|
+ if(self.routeData[i].children[o].children){
|
|
|
+ for(let x=0;x<self.routeData[i].children[o].children.length;x++){
|
|
|
+ if(!self.routeData[i].children[o].children[x].alwaysShow&&!self.routeData[i].children[o].children[x].hidden){
|
|
|
+ let urlText = self.routeData[i].path + '/' + self.routeData[i].children[o].path + '/' + self.routeData[i].children[o].children[x].path;
|
|
|
+ console.log("urlText",urlText)
|
|
|
+ this.$router.push({ path: urlText });
|
|
|
+ return
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //跳转按钮
|
|
|
+ goPage(type,title){
|
|
|
+ let self = this;
|
|
|
+ if(type == 'null'){
|
|
|
+ this.$alert(title+'暂未开放', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ callback: action => {}
|
|
|
+ });
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if(type == 'Https://www.sxitdlc.com'){
|
|
|
+ for(let i=0;i<self.routeData.length;i++){
|
|
|
+ if(type == self.routeData[i].name){
|
|
|
+ console.log("self.routeData[i].name",self.routeData[i].name)
|
|
|
+ window.open(localStorage.getItem('screenUrl') + '?identity=' + localStorage.getItem('identity'));
|
|
|
+ return
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.$alert('没有"'+title+'"系统权限,如有疑问,请联系管理员', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ callback: action => {}
|
|
|
+ });
|
|
|
+ }
|
|
|
+ //寻找跳转目标路由
|
|
|
+ let num = 0;
|
|
|
+ for(let i=0;i<self.routeData.length;i++){
|
|
|
+ if(type == self.routeData[i].name){
|
|
|
+ num++
|
|
|
+ if(!self.routeData[i].alwaysShow&&!self.routeData[i].hidden){
|
|
|
+ let urlText = self.routeData[i].path;
|
|
|
+ this.$router.push({ path: urlText });
|
|
|
+ console.log("urlText1",urlText)
|
|
|
+ return
|
|
|
+ }else if (self.routeData[i].children){
|
|
|
+ for(let o=0;o<self.routeData[i].children.length;o++){
|
|
|
+ if(!self.routeData[i].children[o].alwaysShow&&!self.routeData[i].children[o].hidden){
|
|
|
+ let urlText = self.routeData[i].path + '/' + self.routeData[i].children[o].path;
|
|
|
+ this.$router.push({ path: urlText });
|
|
|
+ console.log("urlText2",urlText)
|
|
|
+ return
|
|
|
+ }else{
|
|
|
+ if(self.routeData[i].children[o].children){
|
|
|
+ for(let x=0;x<self.routeData[i].children[o].children.length;x++){
|
|
|
+ if(!self.routeData[i].children[o].children[x].alwaysShow&&!self.routeData[i].children[o].children[x].hidden){
|
|
|
+ let urlText = self.routeData[i].path + '/' + self.routeData[i].children[o].path + '/' + self.routeData[i].children[o].children[x].path;
|
|
|
+ this.$router.push({ path: urlText });
|
|
|
+ console.log("urlText3",urlText)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if(num == 0){
|
|
|
+ this.$alert('没有"'+title+'"系统权限,如有疑问,请联系管理员', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ callback: action => {}
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+ @-webkit-keyframes centerButtonMover {
|
|
|
+ 0% {
|
|
|
+ transform:scale(1);
|
|
|
+ }
|
|
|
+ 30% {
|
|
|
+ transform: rotate(0deg) scale(0.9);
|
|
|
+ }
|
|
|
+ 40% {
|
|
|
+ transform: rotate(-5deg) scale(1);
|
|
|
+ }
|
|
|
+ 50% {
|
|
|
+ transform: rotate(5deg) scale(1);
|
|
|
+ }
|
|
|
+ 60% {
|
|
|
+ transform: rotate(-5deg) scale(1.1);
|
|
|
+ }
|
|
|
+ 70% {
|
|
|
+ transform: rotate(0deg) scale(1.2);
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ transform: rotate(0deg) scale(1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ @-webkit-keyframes centerMover {
|
|
|
+ 0% {
|
|
|
+ -webkit-transform: translateY(0);
|
|
|
+ /*transform:scale(0.5px;*/
|
|
|
+ }
|
|
|
+ 50% {
|
|
|
+ -webkit-transform: translateY(20px);
|
|
|
+ /*transform:scale(0.5px;*/
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ -webkit-transform: translateY(0);
|
|
|
+ /*transform:scale(0.6px;/*/
|
|
|
+ }
|
|
|
+ }
|
|
|
+ @-webkit-keyframes ringMove {
|
|
|
+ 0% {
|
|
|
+ -webkit-transform: translateY(0px);
|
|
|
+ /*transform:scale(0.5px;*/
|
|
|
+ opacity:1;
|
|
|
+ }
|
|
|
+ 50% {
|
|
|
+ -webkit-transform: translateY(20px);
|
|
|
+ /*transform:scale(0.5px;*/
|
|
|
+ opacity:0;
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ -webkit-transform: translateY(0);
|
|
|
+ /*transform:scale(0.6px;/*/
|
|
|
+ opacity:0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ @-webkit-keyframes buttonMove{
|
|
|
+ 50%{
|
|
|
+ -webkit-transform:scale(0.8);
|
|
|
+ transform:scale(0.8);
|
|
|
+ -webkit-filter:brightness(90%)
|
|
|
+ }
|
|
|
+ 100%{
|
|
|
+ -webkit-transform:scale(1);
|
|
|
+ transform:scale(1);
|
|
|
+ /*css3滤镜亮度百分比*/
|
|
|
+ -webkit-filter:brightness(100%)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ *{
|
|
|
+ margin:0;
|
|
|
+ }
|
|
|
+ .max-home-button-box{
|
|
|
+ /*width:1462px;*/
|
|
|
+ width:1300px;
|
|
|
+ /*height:848px;*/
|
|
|
+ height:760px;
|
|
|
+ top:50%;
|
|
|
+ left:50%;
|
|
|
+ margin-top:-380px;
|
|
|
+ margin-left:-650px;
|
|
|
+ position: absolute;
|
|
|
+ .max-home-box{
|
|
|
+ /*background: #E65D6E;*/
|
|
|
+ /*width:1462px;*/
|
|
|
+ width:1300px;
|
|
|
+ /*height:848px;*/
|
|
|
+ height:760px;
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ .img-1{
|
|
|
+ position: absolute;
|
|
|
+ /*width:863px;*/
|
|
|
+ width:690px;
|
|
|
+ /*height:504px;*/
|
|
|
+ height:403px;
|
|
|
+ top:191px;
|
|
|
+ left:50%;
|
|
|
+ margin-left:- 345px;
|
|
|
+ -webkit-animation-name: centerMover;
|
|
|
+ -webkit-animation-duration: 4s;
|
|
|
+ -webkit-animation-iteration-count: infinite;
|
|
|
+ -webkit-animation-delay: 0s;
|
|
|
+ }
|
|
|
+ .img-2{
|
|
|
+ position: absolute;
|
|
|
+ /*width:463px;*/
|
|
|
+ width:370px;
|
|
|
+ /*height:106px;*/
|
|
|
+ height:84px;
|
|
|
+ top:391px;
|
|
|
+ left:50%;
|
|
|
+ margin-left:- 185px;
|
|
|
+ -webkit-animation-name: ringMove;
|
|
|
+ -webkit-animation-duration: 2s;
|
|
|
+ -webkit-animation-iteration-count: infinite;
|
|
|
+ -webkit-animation-delay: 0s;
|
|
|
+ }
|
|
|
+ .img-3{
|
|
|
+ position: absolute;
|
|
|
+ /*width:493px;*/
|
|
|
+ width:394px;
|
|
|
+ /*height:107px;*/
|
|
|
+ height:85px;
|
|
|
+ top:319px;
|
|
|
+ left:50%;
|
|
|
+ margin-left:- 197px;
|
|
|
+ -webkit-animation-name: ringMove;
|
|
|
+ -webkit-animation-duration: 2s;
|
|
|
+ -webkit-animation-iteration-count: infinite;
|
|
|
+ -webkit-animation-delay: 0.2s;
|
|
|
+ }
|
|
|
+ .img-4{
|
|
|
+ position: absolute;
|
|
|
+ /*width:554px;*/
|
|
|
+ width:443px;
|
|
|
+ /*height:118px;*/
|
|
|
+ height:94px;
|
|
|
+ top:231px;
|
|
|
+ left:50%;
|
|
|
+ margin-left:- 221px;
|
|
|
+ -webkit-animation-name: ringMove;
|
|
|
+ -webkit-animation-duration: 2s;
|
|
|
+ -webkit-animation-iteration-count: infinite;
|
|
|
+ -webkit-animation-delay: 0.4s;
|
|
|
+ }
|
|
|
+ .img-5{
|
|
|
+ position: absolute;
|
|
|
+ width:394px;
|
|
|
+ /*width:493px;*/
|
|
|
+ /*height:107px;*/
|
|
|
+ height:85px;
|
|
|
+ /*width:644px;*/
|
|
|
+ /*height:118px;*/
|
|
|
+ top:141px;
|
|
|
+ left:50%;
|
|
|
+ //margin-left:-322px;
|
|
|
+ margin-left:- 197px;
|
|
|
+ -webkit-animation-name: ringMove;
|
|
|
+ -webkit-animation-duration: 2s;
|
|
|
+ -webkit-animation-iteration-count: infinite;
|
|
|
+ -webkit-animation-delay: 0.6s;
|
|
|
+ }
|
|
|
+ .img-6{
|
|
|
+ position: absolute;
|
|
|
+ width:354px;
|
|
|
+ /*width:443px;*/
|
|
|
+ /*height:106px;*/
|
|
|
+ height:84px;
|
|
|
+ /*width:734px;*/
|
|
|
+ /*height:118px;*/
|
|
|
+ top:051px;
|
|
|
+ left:50%;
|
|
|
+ //margin-left:-367px;
|
|
|
+ margin-left:- 177px;
|
|
|
+ -webkit-animation-name: ringMove;
|
|
|
+ -webkit-animation-duration: 2s;
|
|
|
+ -webkit-animation-iteration-count: infinite;
|
|
|
+ -webkit-animation-delay: 0.8s;
|
|
|
+ }
|
|
|
+ .max-bottom-box{
|
|
|
+ width:1300px;
|
|
|
+ margin:0 auto;
|
|
|
+ flex:1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ .top-button-box{
|
|
|
+ display: flex;
|
|
|
+ .left-box{
|
|
|
+ .position-button{
|
|
|
+ width:297px;
|
|
|
+ height:136px;
|
|
|
+ cursor: pointer;
|
|
|
+ position: relative;
|
|
|
+ z-index:5;
|
|
|
+ img{
|
|
|
+ width:297px;
|
|
|
+ height:136px;
|
|
|
+ }
|
|
|
+ p{
|
|
|
+ position: absolute;
|
|
|
+ top:43px;
|
|
|
+ left:142px;
|
|
|
+ text-align: center;
|
|
|
+ font-size:18px;
|
|
|
+ line-height:18px;
|
|
|
+ background: linear-gradient(to top, #06F6F7 , #FFFFFF );
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ color: transparent;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .position-button:nth-child(1){
|
|
|
+ margin-top:0;
|
|
|
+ }
|
|
|
+ .position-button:nth-child(2){
|
|
|
+ margin:55px 0 0 40px;
|
|
|
+ }
|
|
|
+ .position-button:nth-child(3){
|
|
|
+ margin:55px 0 0 80px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .center-box{
|
|
|
+ flex:1;
|
|
|
+ .position-button{
|
|
|
+ width:147px;
|
|
|
+ height:105px;
|
|
|
+ cursor: pointer;
|
|
|
+ position: relative;
|
|
|
+ z-index:5;
|
|
|
+ margin:0 auto 0;
|
|
|
+ -webkit-animation-name: centerButtonMover;
|
|
|
+ -webkit-animation-duration: 3s;
|
|
|
+ -webkit-animation-iteration-count: infinite;
|
|
|
+ -webkit-animation-delay: 0s;
|
|
|
+ img{
|
|
|
+ width:147px;
|
|
|
+ height:105px;
|
|
|
+ }
|
|
|
+ p{
|
|
|
+ position: absolute;
|
|
|
+ top:66px;
|
|
|
+ left:30px;
|
|
|
+ text-align: center;
|
|
|
+ font-size:18px;
|
|
|
+ line-height:18px;
|
|
|
+ background: linear-gradient(to top, #06F6F7 , #FFFFFF );
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ color: transparent;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right-box{
|
|
|
+ .position-button{
|
|
|
+ width:297px;
|
|
|
+ height:136px;
|
|
|
+ cursor: pointer;
|
|
|
+ z-index:5;
|
|
|
+ position: relative;
|
|
|
+ img{
|
|
|
+ width:297px;
|
|
|
+ height:136px;
|
|
|
+ }
|
|
|
+ p{
|
|
|
+ position: absolute;
|
|
|
+ top:43px;
|
|
|
+ left:56px;
|
|
|
+ text-align: center;
|
|
|
+ font-size:18px;
|
|
|
+ line-height:18px;
|
|
|
+ background: linear-gradient(to top, #06F6F7 , #FFFFFF );
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ color: transparent;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .position-button:nth-child(1){
|
|
|
+ margin:0 0 0 80px;
|
|
|
+ }
|
|
|
+ .position-button:nth-child(2){
|
|
|
+ margin:55px 0 0 40px;
|
|
|
+ }
|
|
|
+ .position-button:nth-child(3){
|
|
|
+ margin-top:55px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .center-button-box{
|
|
|
+ flex:1;
|
|
|
+ }
|
|
|
+ .bottom-button-box{
|
|
|
+ display: flex;
|
|
|
+ .null-button{
|
|
|
+ flex:1;
|
|
|
+ }
|
|
|
+ .position-button{
|
|
|
+ width:140px;
|
|
|
+ height:200px;
|
|
|
+ cursor: pointer;
|
|
|
+ z-index:5;
|
|
|
+ position: relative;
|
|
|
+ img{
|
|
|
+ width:140px;
|
|
|
+ height:230px;
|
|
|
+ }
|
|
|
+ p{
|
|
|
+ position: absolute;
|
|
|
+ top:154px;
|
|
|
+ /*left:34px;*/
|
|
|
+ width:140px;
|
|
|
+ text-align: center;
|
|
|
+ font-size:18px;
|
|
|
+ line-height:18px;
|
|
|
+ background: linear-gradient(to top, #06F6F7 , #FFFFFF );
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ color: transparent;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .position-button:nth-child(2),
|
|
|
+ .position-button:nth-child(3),
|
|
|
+ .position-button:nth-child(4),
|
|
|
+ .position-button:nth-child(5){
|
|
|
+ margin-right:95px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .position-button:hover{
|
|
|
+ -webkit-animation-name: buttonMove;
|
|
|
+ -webkit-animation-duration: 1.5s;
|
|
|
+ -webkit-animation-iteration-count: infinite;
|
|
|
+ -webkit-animation-delay: 0s;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .bottom-null-box{
|
|
|
+ height:60px;
|
|
|
+ }
|
|
|
+</style>
|