| 1 |
- {"version":3,"sources":["webpack:///./src/views/home/tiantan.vue","webpack:///./src/views/home/tiantan.vue?66bd","webpack:///./src/views/home/tiantan.vue?7c15"],"names":["class","id","muted","autoplay","src","type","alt","showFalg","nowTime","sTime","nowDate","week","components","setup","props","formatEnergyDate","dates","Date","setHours","getHours","months","getMonth","day","getDate","year","getFullYear","hours","minutes","getMinutes","getSeconds","getWeek","getDay","str","router","route","proxyData","intevell","init","myVid","document","getElementById","aniThree","aniThree5","aniThree6","skSlogan","ani1","ani2","ani3","ani4","ani5","ani51","ani52","ani53","ani54","ani6","ani7","ani8","ani82","ani83","ani84","ani85","ani86","ani87","ani88","ani9","ani10","slogan","controls","bind","fadeOut","show","addClass","updateStyle","timer","setTimeout","clearTimeout","time2","push","path","query","style","top","offsetHeight","winChange","window","addEventListener","__exports__","render"],"mappings":"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","file":"static/js/chunk-01583e5c.26fefc56.js","sourcesContent":["<template>\n <div class=\"main\" v-if=\"showFalg\">\n <video id=\"video1\" muted autoplay>\n <!-- <source src=\"/sk/skImage/媒体1.mp4\" type=\"video/mp4\" /> -->\n <source src=\"/sk/skImage/720p.mp4\" type=\"video/mp4\" />\n 您的浏览器不支持 HTML5 video 标签。\n </video>\n\n <div id=\"skSlogan\" class=\"skSlogan\">\n <!-- 天坛部分 -->\n <img id=\"ani83\" class=\"ani83\" src=\"/sk/skImage/蓝天.jpg\" alt=\"\" />\n <img id=\"ani84\" class=\"ani84\" src=\"/sk/skImage/云朵0.png\" alt=\"\" />\n\n <img id=\"ani85\" class=\"ani85\" src=\"/sk/skImage/鸽子1-白色.gif\" alt=\"\" />\n <img id=\"ani86\" class=\"ani86\" src=\"/sk/skImage/鸽子2-白色.gif\" alt=\"\" />\n <img id=\"ani87\" class=\"ani87\" src=\"/sk/skImage/鸽子1-白色.gif\" alt=\"\" />\n <img id=\"ani88\" class=\"ani88\" src=\"/sk/skImage/鸽子2-白色.gif\" alt=\"\" />\n\n <img id=\"ani8\" class=\"ani8\" src=\"/sk/skImage/天坛1.png\" alt=\"\" />\n <img id=\"ani82\" class=\"ani82\" src=\"/sk/skImage/天坛2.png\" alt=\"\" />\n\n <img id=\"ani9\" class=\"ani9\" src=\"/sk/skImage/蝴蝶2.gif\" alt=\"\" />\n <!-- 天坛左上 -->\n <img id=\"ani1\" class=\"ani1\" src=\"/sk/skImage/ani1.jpg\" alt=\"\" />\n <!-- 左上鸽子 -->\n <!-- <img id=\"ani5\" class=\"ani5\" src=\"/sk/skImage/ani5.jpg\" alt=\"\"> -->\n <img id=\"ani51\" class=\"ani51\" src=\"/sk/skImage/鸽子1-橙色.gif\" alt=\"\" />\n <img id=\"ani52\" class=\"ani52\" src=\"/sk/skImage/鸽子2-橙色.gif\" alt=\"\" />\n <img id=\"ani53\" class=\"ani53\" src=\"/sk/skImage/鸽子1-橙色.gif\" alt=\"\" />\n <img id=\"ani54\" class=\"ani54\" src=\"/sk/skImage/鸽子2-橙色.gif\" alt=\"\" />\n\n <!-- 文字slogan -->\n <div id=\"slogan\" class=\"slogan\">\n <img id=\"slogan11\" class=\"slogan11\" src=\"/sk/skImage/word/幸.png\" alt=\"\" />\n <img id=\"slogan12\" class=\"slogan12\" src=\"/sk/skImage/word/福.png\" alt=\"\" />\n\n <img id=\"slogan21\" class=\"slogan21\" src=\"/sk/skImage/word/S.png\" alt=\"\" />\n <img id=\"slogan22\" class=\"slogan22\" src=\"/sk/skImage/word/U.png\" alt=\"\" />\n <img id=\"slogan23\" class=\"slogan23\" src=\"/sk/skImage/word/P.png\" alt=\"\" />\n <img id=\"slogan24\" class=\"slogan24\" src=\"/sk/skImage/word/e.png\" alt=\"\" />\n <img id=\"slogan25\" class=\"slogan25\" src=\"/sk/skImage/word/X.png\" alt=\"\" />\n\n <img id=\"slogan31\" class=\"slogan31\" src=\"/sk/skImage/word/P2.png\" alt=\"\" />\n <img id=\"slogan32\" class=\"slogan32\" src=\"/sk/skImage/word/a.png\" alt=\"\" />\n <img id=\"slogan33\" class=\"slogan33\" src=\"/sk/skImage/word/e2.png\" alt=\"\" />\n <img id=\"slogan34\" class=\"slogan34\" src=\"/sk/skImage/word/-.png\" alt=\"\" />\n <img id=\"slogan35\" class=\"slogan35\" src=\"/sk/skImage/word/g.png\" alt=\"\" />\n <img id=\"slogan36\" class=\"slogan36\" src=\"/sk/skImage/word/i.png\" alt=\"\" />\n </div>\n\n <img id=\"ani4\" class=\"ani4\" src=\"/sk/skImage/ani4.jpg\" alt=\"\" />\n\n <!-- 时间部分 -->\n <!-- <img id=\"ani2\" class=\"ani2\" src=\"/sk/skImage/ani21.jpg\" alt=\"\" />\n -->\n <div id=\"ani2\" class=\"ani2\">\n <div class=\"time-top\">\n <span>北京时间</span>\n <span>首尔时间</span>\n </div>\n <div class=\"time-box\">\n <span>{{ nowTime }}</span>\n <span></span>\n <span>{{ sTime }}</span>\n </div>\n <div class=\"time-line\"></div>\n <div class=\"time-bottom\">\n <img src=\"/sk/skImage/time-icon.svg\" alt=\"\" />\n <span>{{ nowDate }}</span>\n <div class=\"time-right\">\n <span>{{ week }}</span>\n </div>\n </div>\n </div>\n </div>\n <div id=\"aniThree\" class=\"aniThree\">\n <div id=\"aniThree5\" class=\"aniThree5\"><img src=\"/sk/skImage/word/SK 1.png\" alt=\"\"></div>\n <div id=\"aniThree6\" class=\"aniThree6\"><img src=\"/sk/skImage/word/text4.png\" alt=\"\"></div>\n </div>\n <!-- <div id=\"aniThree\" class=\"aniThree\">\n <div id=\"logoLeft\" class=\"logoLeft\">\n <img src=\"/sk/skImage/EXPOlogo.jpg\" alt=\"\" />\n </div>\n <div id=\"logoRight\" class=\"logoRight\">\n <img src=\"/sk/skImage/skLogo.jpg\" alt=\"\" />\n </div>\n <div class=\"line\" id=\"line\"></div>\n <div class=\"text\" id=\"text\">\n <img src=\"/sk/skImage/text.jpg\" alt=\"\" />\n </div>\n </div> -->\n </div>\n</template>\n \n<script>\nimport { useRouter, useRoute } from \"vue-router\";\nimport { formatEnergyDate, getWeek } from \"@/utils\";\nimport $ from \"jquery\";\nimport { nextTick } from \"vue\";\nimport {\n defineComponent,\n reactive,\n toRefs,\n onMounted,\n onBeforeUnmount,\n} from \"vue\";\nexport default defineComponent({\n components: {},\n setup(props) {\n const formatEnergyDate = function (type = 1) {\n //三目运算符\n let dates = null;\n if (type == 2) {\n dates = new Date(new Date().setHours(new Date().getHours() + 1));\n } else {\n dates = new Date();\n }\n //月份下标是0-11\n const months =\n dates.getMonth() + 1 < 10\n ? \"0\" + (dates.getMonth() + 1)\n : dates.getMonth() + 1;\n //具体的天数\n const day =\n dates.getDate() < 10 ? \"0\" + dates.getDate() : dates.getDate();\n const year = dates.getFullYear();\n const hours =\n dates.getHours() < 10 ? \"0\" + dates.getHours() : dates.getHours();\n // //分钟\n const minutes =\n dates.getMinutes() < 10 ? \"0\" + dates.getMinutes() : dates.getMinutes();\n const seconds =\n dates.getSeconds() < 10 ? \"0\" + dates.getSeconds() : dates.getSeconds();\n //返回数据格式\n return [\n year + \"年\" + months + \"月\" + day + \"日\",\n months + \"月\" + day + \"日\",\n hours + \":\" + minutes,\n ];\n };\n const getWeek = function () {\n let week = new Date().getDay();\n let str = \"\";\n if (week == 0) {\n str = \"星期日\";\n } else if (week == 1) {\n str = \"星期一\";\n } else if (week == 2) {\n str = \"星期二\";\n } else if (week == 3) {\n str = \"星期三\";\n } else if (week == 4) {\n str = \"星期四\";\n } else if (week == 5) {\n str = \"星期五\";\n } else if (week == 6) {\n str = \"星期六\";\n }\n return str;\n };\n const router = useRouter();\n const route = useRoute();\n const proxyData = reactive({\n nowTime: formatEnergyDate()[2],\n sTime: formatEnergyDate(2)[2],\n nowDate: formatEnergyDate()[0],\n intevell: null,\n type: \"\",\n showFalg: false,\n week: getWeek(),\n init() {\n let myVid = document.getElementById(\"video1\");\n let aniThree = document.getElementById(\"aniThree\");\n let aniThree5 = document.getElementById(\"aniThree5\");\n let aniThree6 = document.getElementById(\"aniThree6\");\n let logoLeft = document.getElementById(\"logoLeft\");\n let logoRight = document.getElementById(\"logoRight\");\n let line = document.getElementById(\"line\");\n let text = document.getElementById(\"text\");\n let skSlogan = document.getElementById(\"skSlogan\");\n let ani1 = document.getElementById(\"ani1\");\n let ani2 = document.getElementById(\"ani2\");\n let ani3 = document.getElementById(\"ani3\");\n let ani4 = document.getElementById(\"ani4\");\n let ani5 = document.getElementById(\"ani5\");\n let ani51 = document.getElementById(\"ani51\");\n let ani52 = document.getElementById(\"ani52\");\n let ani53 = document.getElementById(\"ani53\");\n let ani54 = document.getElementById(\"ani54\");\n\n let ani6 = document.getElementById(\"ani6\");\n let ani7 = document.getElementById(\"ani7\");\n\n let ani8 = document.getElementById(\"ani8\");\n let ani82 = document.getElementById(\"ani82\");\n let ani83 = document.getElementById(\"ani83\");\n let ani84 = document.getElementById(\"ani84\");\n let ani85 = document.getElementById(\"ani85\");\n let ani86 = document.getElementById(\"ani86\");\n let ani87 = document.getElementById(\"ani87\");\n let ani88 = document.getElementById(\"ani88\");\n\n let ani9 = document.getElementById(\"ani9\");\n let ani10 = document.getElementById(\"ani10\");\n\n let slogan = document.getElementById(\"slogan\");\n\n myVid.autoplay = true;\n myVid.controls = false;\n\n // 视频播放完成\n $(myVid).bind(\"ended\", function () {\n $(myVid).fadeOut();\n\n // 第2部分\n $(skSlogan).show();\n $(ani1).addClass(\"ani1Active\");\n $(ani2).addClass(\"ani2Active\");\n $(ani3).addClass(\"ani3Active\");\n $(ani4).addClass(\"ani4Active\");\n $(ani5).addClass(\"ani5Active\");\n $(ani51).addClass(\"ani51Active\");\n $(ani52).addClass(\"ani52Active\");\n $(ani53).addClass(\"ani53Active\");\n $(ani54).addClass(\"ani54Active\");\n\n $(ani6).addClass(\"ani6Active\");\n $(ani7).addClass(\"ani7Active\");\n\n $(ani8).addClass(\"ani8Active\");\n $(ani82).addClass(\"ani82Active\");\n $(ani83).addClass(\"ani83Active\");\n $(ani84).addClass(\"ani84Active\");\n $(ani85).addClass(\"ani85Active\");\n $(ani86).addClass(\"ani86Active\");\n $(ani87).addClass(\"ani87Active\");\n $(ani88).addClass(\"ani88Active\");\n\n $(ani9).addClass(\"ani9Active\");\n $(ani10).addClass(\"ani10Active\");\n\n $(slogan).addClass(\"sloganActive\");\n\n proxyData.updateStyle();\n let type = proxyData.type;\n // 第3部分\n\n /**\n * 需要第三个画面的时候\n */\n // let timer = setTimeout(function() {\n // $(skSlogan).fadeOut();\n // // $(aniThree).show();\n // $(logoLeft).addClass(\"logoLeftAni\");\n // $(logoRight).addClass(\"logoRightAni\");\n // $(line).addClass(\"lineAni\");\n // $(text).addClass(\"lineAni\");\n // clearTimeout(timer);\n // let time2 = setTimeout(() => {\n // clearTimeout(time2);\n // console.log(\"/weather\" + \"?type=\" + type);\n // router.push({\n // path: \"/weather\",\n // query: { type: proxyData.type },\n // });\n // }, 30000);\n // }, 30000);\n\n /**\n * 删除第三部分的时候用此代码\n */\n // let time2 = setTimeout(() => {\n // clearTimeout(time2);\n // console.log(\"/weather\" + \"?type=\" + type);\n // router.push({\n // path: \"/weather\",\n // query: { type: proxyData.type },\n // });\n // }, 30000);\n let timer = setTimeout(function () {\n $(skSlogan).fadeOut();\n $(aniThree).show();\n $(aniThree).addClass(\"aniThreeActive\");\n $(aniThree5).addClass(\"aniThreeActive5\");\n $(aniThree6).addClass(\"aniThreeActive6\");\n // $(logoLeft).addClass(\"logoLeftAni\");\n // $(logoRight).addClass(\"logoRightAni\");\n // $(line).addClass(\"lineAni\");\n // $(text).addClass(\"lineAni\");\n clearTimeout(timer);\n let time2 = setTimeout(() => {\n clearTimeout(time2);\n router.push({\n path: \"/weather\",\n query: { type: proxyData.type },\n });\n }, 30000);\n }, 15000);\n });\n },\n // 动态修改样式\n updateStyle() {\n let ani1 = document.getElementById(\"ani1\");\n let ani2 = document.getElementById(\"ani2\");\n if (ani1 && ani2) {\n ani2.style.top = ani1.offsetHeight - ani1.offsetHeight * 0.014 + \"px\";\n }\n // let line = document.getElementById(\"line\");\n // let text = document.getElementById(\"text\");\n // line.style.height = logoLeft.offsetHeight + \"px\";\n // text.style.top = logoLeft.offsetHeight + logoLeft.offsetTop + 20 + \"px\";\n },\n // 窗口变化的时候调整适配\n winChange() {\n window.addEventListener(\n \"resize\",\n function () {\n proxyData.updateStyle();\n },\n false\n );\n },\n });\n onBeforeUnmount(() => { });\n onMounted(() => {\n let type = route.query.type;\n proxyData.type = type;\n console.log(proxyData.type);\n proxyData.showFalg = true;\n nextTick(() => {\n proxyData.init();\n setTimeout(() => {\n proxyData.updateStyle();\n }, 200);\n proxyData.winChange();\n });\n });\n return {\n ...toRefs(proxyData),\n };\n },\n});\n</script>\n \n<style lang=\"scss\" scoped>\n* {\n margin: 0px;\n padding: 0px;\n box-sizing: border-box;\n overflow: hidden;\n}\n#video1 {\n width: 100vw;\n height: 100vh;\n position: absolute;\n}\n\n/* 第3部分动画 */\n.aniThree {\n display: none;\n width: 100%;\n height: 100%;\n position: absolute;\n}\n.aniThreeActive {\n display: block;\n}\n.aniThree5 {\n opacity: 0;\n margin-top: 330px;\n margin-bottom: 60px;\n display: flex;\n justify-content: center;\n}\n.aniThreeActive5 {\n animation: aniThreeActive5 1.5s ease-in-out 0.1s forwards;\n}\n@keyframes aniThreeActive5 {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n\n.aniThree6 {\n opacity: 0;\n justify-content: center;\n display: flex;\n}\n.aniThreeActive6 {\n animation: aniThreeActive6 1.5s ease-in-out 0.9s forwards;\n}\n@keyframes aniThreeActive6 {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n\n.logoLeft {\n top: 20vh;\n position: absolute;\n opacity: 0;\n}\n.logoLeft img {\n height: 400px;\n}\n.logoLeftAni {\n opacity: 1;\n animation: logoLeftAni 0.6s ease-in-out forwards;\n}\n\n.logoRight {\n top: 20vh;\n position: absolute;\n opacity: 0;\n}\n.logoRight img {\n height: 400px;\n // width: 26vw;\n}\n.logoRightAni {\n opacity: 1;\n animation: logoRightAni 0.6s ease-in-out forwards;\n}\n\n@keyframes logoLeftAni {\n 0% {\n opacity: 0;\n // transform: translate(860px, 0px);\n transform: translate(44.7vw, 0px);\n }\n 100% {\n opacity: 1;\n // transform: translate(460px, 0px);\n transform: translate(24vw, 0px);\n }\n}\n\n@keyframes logoRightAni {\n 0% {\n opacity: 0;\n // transform: translate(860px, 0px);\n transform: translate(44.7vw, 0px);\n }\n 100% {\n opacity: 1;\n // transform: translate(1000px, 0px);\n transform: translate(52vw, 0px);\n }\n}\n\n.line {\n opacity: 0;\n position: absolute;\n top: 20vh;\n left: 52vw;\n height: 41vh;\n width: 4px;\n background-color: #ccc;\n}\n.lineAni {\n animation: lineShow 1s forwards;\n}\n@keyframes lineShow {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n\n.text {\n opacity: 0;\n position: absolute;\n // height: 18.5vh;\n width: 36.4vw;\n // top: 75vh;\n left: 50%;\n transform: translateX(-50%);\n}\n.text img {\n // height: 200px;\n width: 100%;\n}\n.lineAni {\n animation: lineShow 1s forwards;\n}\n\n/* 第2部分动画 */\n.skSlogan {\n /* display: none; */\n width: 100vw;\n height: 100vh;\n position: absolute;\n}\n.skSloganActive {\n display: block;\n}\n/* 天坛左上 */\n.ani1 {\n width: 43%;\n opacity: 0;\n top: 0;\n position: absolute;\n}\n.ani1Active {\n animation: ani1Active 1s ease-in-out 4.7s forwards;\n}\n@keyframes ani1Active {\n 0% {\n opacity: 0;\n /* transform:translate(-700px,-200px) ; */\n }\n 100% {\n opacity: 1;\n /* transform:translate(0px,0px) ; */\n }\n}\n\n.ani3 {\n opacity: 0;\n // top: 180px;\n // left: 975px;\n width: 29.9%;\n top: 9.25%;\n left: 11.45%;\n position: absolute;\n}\n.ani3Active {\n animation: ani3Active 1s ease-in-out 4.8s forwards;\n}\n@keyframes ani3Active {\n 0% {\n opacity: 0;\n transform: translate(100px, 0px);\n }\n 100% {\n opacity: 1;\n transform: translate(0px, 0px);\n }\n}\n\n.ani2 {\n opacity: 0;\n font-size: 0;\n left: 10.4vw;\n position: absolute;\n .time-top {\n // display: flex;\n // justify-content: space-between;\n span {\n display: inline-block;\n font-size: 34px;\n color: #7e7e82;\n &:nth-child(1) {\n padding-left: 10px;\n margin-right: 8.2vw;\n }\n }\n }\n .time-line {\n margin: 0 auto;\n margin-top: 0.7vh;\n margin-bottom: 0.7vh;\n // width: 440px;\n width: 95%;\n height: 1px;\n background: #cacaca;\n }\n .time-bottom {\n display: inline-block;\n vertical-align: middle;\n font-size: 34px;\n padding-left: 10px;\n color: #7e7e82;\n img {\n display: inline-block;\n vertical-align: middle;\n width: 34px;\n height: 34px;\n }\n span {\n display: inline-block;\n vertical-align: middle;\n font-size: 34px;\n padding-left: 15px;\n }\n .time-right {\n display: inline-block;\n margin-top: -2px;\n vertical-align: middle;\n font-size: 34px;\n padding-left: 20px;\n }\n }\n .time-box {\n padding-top: 0.1vh;\n font-size: 70px;\n font-family: \"HarmonyOS Sans TC\";\n color: #ff7a00;\n span {\n display: inline-block;\n vertical-align: middle;\n &:nth-child(2) {\n margin-left: 52px;\n margin-right: 52px;\n height: 45px;\n border-left: 1px solid #cacaca;\n }\n }\n }\n}\n.ani2Active {\n animation: ani2Active 1s ease-in-out 4.8s forwards;\n}\n@keyframes ani2Active {\n 0% {\n opacity: 0;\n transform: translate(-20px, 0px);\n }\n 100% {\n opacity: 1;\n transform: translate(0px, 0px);\n }\n}\n\n.ani4 {\n opacity: 0;\n // top: 95px;\n top: 8vh;\n right: 120px;\n width: 138px;\n opacity: 0;\n position: absolute;\n}\n.ani4Active {\n animation: ani4Active 1s ease-in-out 4.8s forwards;\n}\n@keyframes ani4Active {\n 0% {\n opacity: 0;\n transform: translate(50px, 0px);\n }\n 100% {\n opacity: 1;\n transform: translate(0px, 0px);\n }\n}\n\n/* 左上鸽子 */\n.ani5 {\n opacity: 0;\n // top: -80px;\n top: -7.4vw;\n // left: 700px;\n left: 36.4vw;\n position: absolute;\n}\n.ani5Active {\n animation: ani5Active 3s infinite ease-in-out 5s forwards;\n}\n@keyframes ani5Active {\n 0% {\n opacity: 0;\n transform: translate(0px, 0px);\n }\n 40% {\n opacity: 1;\n // transform: translate(-300px, 150px);\n transform: translate(-15.625vw, 13.8vh);\n }\n 100% {\n opacity: 1;\n // transform: translate(-800px, 200px);\n transform: translate(-41.67vw, 18.5vh);\n }\n}\n\n.ani51 {\n opacity: 0;\n // top: -80px;\n // left: 680px;\n top: -7.4vh;\n left: 680px;\n transform: scale(0.2);\n position: absolute;\n}\n.ani51Active {\n animation: ani51Active 5s infinite ease-in-out 5s forwards;\n}\n@keyframes ani51Active {\n 0% {\n opacity: 0;\n transform: translate(0px, 0px) scale(0.2);\n }\n 40% {\n opacity: 1;\n transform: translate(-160px, 120px) scale(0.2);\n }\n 100% {\n opacity: 1;\n transform: translate(-900px, 80px) scale(0.2);\n }\n}\n.ani52 {\n opacity: 0;\n top: -80px;\n left: 720px;\n transform: scale(0.5);\n\n position: absolute;\n}\n.ani52Active {\n animation: ani52Active 5s infinite ease-in-out 5s forwards;\n}\n@keyframes ani52Active {\n 0% {\n opacity: 0;\n transform: translate(0px, 0px) scale(0.5);\n }\n 40% {\n opacity: 1;\n transform: translate(-210px, 160px) scale(0.5);\n }\n 100% {\n opacity: 1;\n transform: translate(-900px, 160px) scale(0.5);\n }\n}\n.ani53 {\n opacity: 0;\n top: -80px;\n left: 800px;\n transform: scale(0.6);\n\n position: absolute;\n}\n.ani53Active {\n animation: ani53Active 5s infinite ease-in-out 5s forwards;\n}\n@keyframes ani53Active {\n 0% {\n opacity: 0;\n transform: translate(0px, 0px) scale(0.6);\n }\n 40% {\n opacity: 1;\n transform: translate(-240px, 210px) scale(0.6);\n }\n 100% {\n opacity: 1;\n transform: translate(-1000px, 170px) scale(0.6);\n }\n}\n\n.ani54 {\n opacity: 0;\n transform: scale(0.5);\n top: -80px;\n left: 770px;\n position: absolute;\n}\n.ani54Active {\n animation: ani54Active 5s infinite ease-in-out 5s forwards;\n}\n@keyframes ani54Active {\n 0% {\n opacity: 0;\n transform: translate(0px, 0px) scale(0.5);\n }\n 40% {\n opacity: 1;\n transform: translate(-150px, 130px) scale(0.5);\n }\n 100% {\n opacity: 1;\n transform: translate(-900px, 100px) scale(0.5);\n }\n}\n\n.ani6 {\n opacity: 0;\n top: 500px;\n left: -100px;\n position: absolute;\n}\n.ani6Active {\n animation: ani6Active 1.4s ease-in-out forwards;\n}\n@keyframes ani6Active {\n 0% {\n opacity: 1;\n transform: translate(-100px, 500px), scale(1.5);\n\n /* top: 800px;\n left: -500px; */\n }\n 10% {\n opacity: 1;\n transform: translate(300px, -460px), scale(2);\n /* top: 100px;\n left: 400px; */\n }\n 70% {\n opacity: 1;\n transform: translate(300px, -460px) scale(2);\n /* top: 100px;\n left: 400px; */\n }\n 100% {\n opacity: 1;\n transform: translate(-260px, -720px) scale(1);\n /* top: -223px;\n left: -360px; */\n }\n}\n\n.ani7 {\n opacity: 0;\n top: 87px;\n left: 159px;\n position: absolute;\n}\n.ani7Active {\n animation: ani7Active 1s ease-in-out 1.1s forwards;\n}\n@keyframes ani7Active {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n/* 天坛-完整 */\n.ani8 {\n position: absolute;\n opacity: 0;\n width: 100%;\n // width: 100vw;\n top: 0px;\n}\n.ani8Active {\n animation: ani8Active 5s ease-in-out forwards;\n}\n@keyframes ani8Active {\n 0% {\n opacity: 0;\n }\n 5% {\n opacity: 1;\n }\n 80% {\n transform: translate(0px, 0px);\n\n opacity: 1;\n }\n 100% {\n transform: translate(-563px, -238px) scale(0.58);\n opacity: 1;\n }\n}\n.ani82 {\n // top: 60px;\n // top:1vh;\n top: 0;\n position: absolute;\n opacity: 0;\n width: 100%;\n z-index: 99;\n}\n.ani82Active {\n animation: ani82Active 5s ease-in-out forwards;\n}\n@keyframes ani82Active {\n 0% {\n opacity: 0;\n }\n 5% {\n opacity: 1;\n }\n 80% {\n transform: translate(0px, 0px);\n\n opacity: 1;\n }\n 90% {\n transform: translate(0px, 0px);\n\n opacity: 0;\n }\n 100% {\n transform: translate(-500px, -200px) scale(0.75);\n opacity: 0;\n }\n}\n/* 蓝天 */\n.ani83 {\n top: 0px;\n left: 0px;\n position: absolute;\n opacity: 0;\n // width: 1920px;\n width: 100%;\n}\n.ani83Active {\n animation: ani82Active 5s ease-in-out forwards;\n}\n\n/* 云0 */\n.ani84 {\n top: 26px;\n left: 0;\n position: absolute;\n opacity: 0;\n}\n.ani84Active {\n animation: ani84Active 4.8s ease-in-out forwards;\n}\n@keyframes ani84Active {\n 0% {\n opacity: 1;\n transform: translate(300px, 0px);\n }\n 90% {\n transform: translate(200px, 0px);\n opacity: 1;\n }\n 100% {\n transform: translate(200px, 0px);\n opacity: 0;\n }\n}\n/* 鸽子0 */\n.ani85 {\n top: 50px;\n left: 1200px;\n position: absolute;\n opacity: 0;\n transform: scale(0.2);\n}\n.ani85Active {\n animation: ani85Active 4.6s ease-in-out forwards;\n}\n@keyframes ani85Active {\n 0% {\n opacity: 1;\n transform: translate(0px, 0px) scale(0.2);\n }\n 90% {\n opacity: 1;\n // transform: translate(-30px, 80px) scale(0.2);\n transform: translate(-30px, 7.4vh) scale(0.2);\n }\n 100% {\n // transform: translate(-100px, -50px) scale(0.2);\n transform: translate(-100px, -4.6vh) scale(0.2);\n opacity: 0;\n }\n}\n\n.ani86 {\n // top: 30px;\n // left: 1280px;\n top: 2.78vh;\n left: 66.67vw;\n position: absolute;\n opacity: 0;\n transform: scale(0.5);\n}\n.ani86Active {\n animation: ani86Active 4.6s ease-in-out forwards;\n}\n@keyframes ani86Active {\n 0% {\n opacity: 1;\n transform: translate(0px, 0px) scale(0.5);\n }\n 90% {\n opacity: 1;\n // transform: translate(-150px, 180px) scale(0.5);\n transform: translate(-150px, 16.67vh) scale(0.5);\n }\n 100% {\n // transform: translate(-540px, -150px) scale(0.5);\n transform: translate(-540px, -13.89vh) scale(0.5);\n opacity: 0;\n }\n}\n\n.ani87 {\n // top: 130px;\n // left: 1270px;\n top: 12.04vh;\n left: 66%;\n position: absolute;\n opacity: 0;\n transform: scale(0.7);\n}\n.ani87Active {\n animation: ani87Active 4.6s ease-in-out forwards;\n}\n@keyframes ani87Active {\n 0% {\n opacity: 1;\n transform: translate(0px, 0px) scale(0.7);\n }\n 90% {\n opacity: 1;\n // transform: translate(-100px, 150px) scale(0.7);\n transform: translate(-100px, 13.89vh) scale(0.7);\n }\n 100% {\n transform: translate(-330px, -4.63vh) scale(0.7);\n opacity: 0;\n }\n}\n.ani88 {\n // top: 90px;\n // left: 1350px;\n top: 8.34vh;\n left: 70%;\n position: absolute;\n opacity: 0;\n transform: scale(0.5);\n}\n.ani88Active {\n animation: ani88Active 4.6s ease-in-out forwards;\n}\n@keyframes ani88Active {\n 0% {\n opacity: 1;\n transform: translate(0px, 0px) scale(0.5);\n }\n 90% {\n opacity: 1;\n // transform: translate(-80px, 120px) scale(0.5);\n transform: translate(-80px, 11.1vh) scale(0.5);\n }\n 100% {\n transform: translate(-380px, -4.63vh) scale(0.5);\n opacity: 0;\n }\n}\n\n/* 蝴蝶飞舞 */\n.ani9 {\n position: absolute;\n opacity: 0;\n /* left:0px;\n top: 0px; */\n transform: translate(0, 0) rotate(30deg);\n}\n.ani9Active {\n animation: ani9Active 5s ease-in-out forwards;\n}\n@keyframes ani9Active {\n 0% {\n opacity: 0;\n /* left:-500px;\n top: 0px; */\n // transform: translate(-600px, 300px) rotate(60deg) scale(1.5);\n transform: translate(-600px, 2.78vh) rotate(60deg) scale(1.5);\n }\n\n 40% {\n opacity: 1;\n /* left:-500px;\n top: 0px; */\n // transform: translate(700px, 100px) rotate(60deg) scale(0.15);\n transform: translate(700px, 9.26vh) rotate(60deg) scale(0.15);\n }\n 60% {\n opacity: 1;\n /* left:-500px;\n top: 0px; */\n // transform: translate(700px, -100px) rotate(-50deg) scale(0.15);\n transform: translate(700px, -9.26vh) rotate(-50deg) scale(0.15);\n }\n 80% {\n opacity: 1;\n transform: translate(500px, -18.5vh) rotate(-60deg) scale(0.1);\n }\n 100% {\n opacity: 0;\n transform: translate(0px, -18.5vh) rotate(-60deg) scale(0.1);\n }\n}\n\n.ani10 {\n width: 100vw;\n opacity: 0;\n position: absolute;\n}\n.ani10Active {\n animation: ani10Active 0.5s ease-in-out 6s forwards;\n}\n@keyframes ani10Active {\n 0% {\n // top: 700px;\n top: 64.8vh;\n left: 0px;\n opacity: 1;\n }\n 100% {\n top: 0px;\n left: 0px;\n opacity: 1;\n }\n}\n</style>\n ","import { render } from \"./tiantan.vue?vue&type=template&id=285a81d8&scoped=true\"\nimport script from \"./tiantan.vue?vue&type=script&lang=js\"\nexport * from \"./tiantan.vue?vue&type=script&lang=js\"\n\nimport \"./tiantan.vue?vue&type=style&index=0&id=285a81d8&lang=scss&scoped=true\"\n\nimport exportComponent from \"/Users/jing/work/sagacare/sagaclound-sagacare-sk/node_modules/vue-loader-v16/dist/exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['render',render],['__scopeId',\"data-v-285a81d8\"]])\n\nexport default __exports__","export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../node_modules/vue-loader-v16/dist/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../../node_modules/style-resources-loader/lib/index.js??ref--8-oneOf-1-4!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader-v16/dist/index.js??ref--0-1!./tiantan.vue?vue&type=style&index=0&id=285a81d8&lang=scss&scoped=true\""],"sourceRoot":""}
|
