| 1 |
- {"version":3,"sources":["webpack:///./src/views/home/index.vue","webpack:///./src/views/home/index.vue?627c","webpack:///./src/views/home/index.vue?dc59"],"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","setNowDate","setInterval","timeArr","timeArr1","init","myVid","document","getElementById","aniThree","aniThree5","aniThree6","skSlogan","ani1","ani12","ani13","ani2","ani3","ani4","ani5","ani6","ani7","ani8","ani82","ani83","ani84","ani85","ani86","ani87","ani88","ani89","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-5050ccb1.6e6ffa8f.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 <div id=\"skSlogan\" class=\"skSlogan\">\n <!-- 长城部分 -->\n <!-- <img id=\"ani83\" class=\"ani83\" src=\"/sk/skImage/蓝天2.jpg\" alt=\"\"> -->\n <img id=\"ani84\" class=\"ani84\" src=\"/sk/skImage/云朵02.png\" alt=\"\" />\n\n <img id=\"ani82\" class=\"ani82\" src=\"/sk/skImage/长城2.png\" alt=\"\" />\n <img id=\"ani8\" class=\"ani8\" src=\"/sk/skImage/长城1.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-2.jpg\" alt=\"\"> -->\n <img id=\"ani1\" class=\"ani1\" src=\"/sk/skImage/蝴蝶3.png\" alt=\"\" />\n <img id=\"ani13\" class=\"ani13\" src=\"/sk/skImage/云朵-左上.png\" alt=\"\" />\n\n <img id=\"ani12\" class=\"ani12\" src=\"/sk/skImage/cc1-.png\" 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 <!-- <img id=\"ani2\" class=\"ani2\" src=\"/sk/skImage/time22.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 <!-- \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 // 设置现在时间\n setNowDate() {\n proxyData.intevell = setInterval(() => {\n let timeArr = formatEnergyDate();\n proxyData.nowTime = timeArr[2];\n proxyData.nowDate = timeArr[0];\n let timeArr1 = formatEnergyDate(2);\n proxyData.sTime = timeArr1[2];\n proxyData.week = getWeek();\n }, 1000);\n },\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 ani12 = document.getElementById(\"ani12\");\n let ani13 = document.getElementById(\"ani13\");\n\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 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 let ani89 = document.getElementById(\"ani89\");\n\n let ani9 = document.getElementById(\"ani9\");\n let ani10 = document.getElementById(\"ani10\");\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 $(ani12).addClass(\"ani12Active\");\n $(ani13).addClass(\"ani13Active\");\n\n $(ani2).addClass(\"ani2Active\");\n $(ani3).addClass(\"ani3Active\");\n $(ani4).addClass(\"ani4Active\");\n $(ani5).addClass(\"ani5Active\");\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 $(ani89).addClass(\"ani89Active\");\n\n $(ani9).addClass(\"ani9Active\");\n $(ani10).addClass(\"ani10Active\");\n $(slogan).addClass(\"sloganActive\");\n\n proxyData.updateStyle();\n // 第3部分轮播\n\n /**\n * 删除第三部分的时候用此代码\n */\n // let time2 = setTimeout(() => {\n // clearTimeout(time2);\n // router.push({\n // path: \"/weather\",\n // query: { type: proxyData.type },\n // });\n // // 30000\n // }, 30000);\n\n /**\n * 需要第三个画面的时候\n */\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 }, 30000);\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.08 + \"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 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\n#video1 {\n width: 100vw;\n height: 100vh;\n position: absolute;\n}\n\n/* 第3部分动画 */\n.aniThree {\n display: none;\n width: 100vw;\n height: 100vh;\n position: absolute;\n text-align:center;\n}\n\n.aniThreeActive {\n display: block;\n}\n.aniThree5 {\n opacity: 0;\n padding-left: 100px;\n margin-top: 330px;\n margin-bottom: 60px;\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}\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\n.logoLeft img {\n // width: 500px;\n // height: 450px;\n // height: 41vh;\n // width: 26vw;\n height: 400px;\n}\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\n.logoRight img {\n // height: 41vh;\n // width: 26vw;\n height: 400px;\n}\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(44.7vw, 0px);\n }\n\n 100% {\n opacity: 1;\n transform: translate(24vw, 0px);\n }\n}\n\n@keyframes logoRightAni {\n 0% {\n opacity: 0;\n transform: translate(44.7vw, 0px);\n }\n\n 100% {\n opacity: 1;\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\n.lineAni {\n animation: lineShow 1s forwards;\n}\n\n@keyframes lineShow {\n 0% {\n opacity: 0;\n }\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\n.text img {\n width: 100%;\n // height: 100%;\n // height: 18.5vh;\n // width: 36.4vw;\n}\n\n.lineAni {\n animation: lineShow 1s forwards;\n}\n\n/* 第2部分动画 */\n.skSlogan {\n /* display: none; */\n width: 100%;\n height: 100%;\n position: absolute;\n}\n\n.skSloganActive {\n display: block;\n}\n\n/* 长城左上 */\n.ani1 {\n width: 43%;\n // height: 69.4vh;\n opacity: 0;\n top: 0;\n position: absolute;\n}\n\n.ani1Active {\n animation: ani1Active 1s ease-in-out 4.7s forwards;\n}\n\n@keyframes ani1Active {\n 0% {\n opacity: 0;\n /* transform:translate(-700px,-200px) ; */\n }\n\n 100% {\n opacity: 1;\n /* transform:translate(0px,0px) ; */\n }\n}\n\n.ani12 {\n width: 43%;\n opacity: 0;\n top: 0;\n position: absolute;\n}\n\n.ani12Active {\n animation: ani12Active 1s ease-in-out 4.7s forwards;\n}\n\n@keyframes ani12Active {\n 0% {\n opacity: 0;\n /* transform:translate(-700px,-200px) ; */\n }\n\n 100% {\n opacity: 1;\n /* transform:translate(0px,0px) ; */\n }\n}\n\n.ani13 {\n opacity: 0;\n width: 29.9%;\n top: 9.25%;\n left: 11.45%;\n position: absolute;\n}\n\n.ani13Active {\n animation: ani13Active 5s infinite ease-in-out 4.7s forwards;\n}\n\n@keyframes ani13Active {\n 0% {\n opacity: 0;\n transform: translate(0px, 0px);\n }\n\n 20% {\n opacity: 1;\n }\n\n 80% {\n opacity: 1;\n }\n\n 100% {\n opacity: 0;\n transform: translate(-5.2vw, 0px);\n }\n}\n\n.ani3 {\n opacity: 0;\n top: 16.6vh;\n left: 50.7vw;\n position: absolute;\n}\n\n.ani3Active {\n animation: ani3Active 1s ease-in-out 4.8s forwards;\n}\n\n@keyframes ani3Active {\n 0% {\n opacity: 0;\n // transform: translate(100px, 0px);\n transform: translate(5.2vw, 0px);\n }\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: #01b59a;\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\n.ani2Active {\n animation: ani2Active 1s ease-in-out 4.8s forwards;\n}\n\n@keyframes ani2Active {\n 0% {\n opacity: 0;\n transform: translate(-20px, 0px);\n }\n\n 100% {\n opacity: 1;\n transform: translate(0px, 0px);\n }\n}\n\n.ani4 {\n width: 138px;\n opacity: 0;\n // top: 95px;\n top: 8vh;\n right: 120px;\n position: absolute;\n}\n\n.ani4Active {\n animation: ani4Active 1s ease-in-out 4.8s forwards;\n}\n\n@keyframes ani4Active {\n 0% {\n opacity: 0;\n transform: translate(50px, 0px);\n }\n\n 100% {\n opacity: 1;\n transform: translate(0px, 0px);\n }\n}\n\n.ani6 {\n opacity: 0;\n top: 500px;\n left: -100px;\n position: absolute;\n}\n\n.ani6Active {\n animation: ani6Active 1.4s ease-in-out forwards;\n}\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\n 10% {\n opacity: 1;\n transform: translate(300px, -460px), scale(2);\n /* top: 100px;\n left: 400px; */\n }\n\n 70% {\n opacity: 1;\n transform: translate(300px, -460px) scale(2);\n /* top: 100px;\n left: 400px; */\n }\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\n.ani7Active {\n animation: ani7Active 1s ease-in-out 1.1s forwards;\n}\n\n@keyframes ani7Active {\n 0% {\n opacity: 0;\n }\n\n 100% {\n opacity: 1;\n }\n}\n\n/* 长城-完整 */\n.ani8 {\n position: absolute;\n opacity: 0;\n // width: 1920px;\n width: 100%;\n top: 0px;\n}\n\n.ani8Active {\n animation: ani8Active 5s ease-in-out forwards;\n}\n\n@keyframes ani8Active {\n 0% {\n opacity: 0;\n }\n\n 5% {\n opacity: 1;\n }\n\n 80% {\n transform: translate(0px, 0px);\n\n opacity: 1;\n }\n\n 100% {\n transform: translate(-635px, -225px) scale(0.72);\n opacity: 1;\n }\n}\n\n.ani82 {\n top: 0px;\n position: absolute;\n opacity: 0;\n // width: 1920px;\n width: 100%;\n}\n\n.ani82Active {\n animation: ani82Active 5s ease-in-out forwards;\n}\n\n@keyframes ani82Active {\n 0% {\n opacity: 0;\n }\n\n 5% {\n opacity: 1;\n }\n\n 80% {\n transform: translate(0px, 0px);\n\n opacity: 1;\n }\n\n 90% {\n transform: translate(0px, 0px);\n\n opacity: 0;\n }\n\n 100% {\n transform: translate(-500px, -200px) scale(0.75);\n opacity: 0;\n }\n}\n\n/* 蓝天 */\n.ani83 {\n top: 0px;\n left: 0px;\n position: absolute;\n opacity: 0;\n width: 1920px;\n}\n\n.ani83Active {\n animation: ani82Active 5s ease-in-out forwards;\n}\n\n/* 云0 */\n.ani84 {\n // top: 76px;\n width: 79%;\n top: 7vh;\n left: 0;\n position: absolute;\n opacity: 0;\n}\n\n.ani84Active {\n animation: ani84Active 4.8s ease-in-out forwards;\n}\n\n@keyframes ani84Active {\n 0% {\n opacity: 1;\n transform: translate(15.6vw, 0px);\n }\n\n 90% {\n transform: translate(10.4vw, 0px);\n opacity: 1;\n }\n\n 100% {\n transform: translate(10.4vw, 0px);\n opacity: 0;\n }\n}\n\n/* 左上云 */\n.ani85 {\n top: 9.2vh;\n left: 26vw;\n position: absolute;\n opacity: 0;\n transform: scale(1);\n}\n\n.ani85Active {\n animation: ani85Active 4.6s infinite ease-in-out 5s forwards;\n}\n\n@keyframes ani85Active {\n 0% {\n opacity: 1;\n transform: translate(0px, 0px) scale(1);\n }\n\n 100% {\n transform: translate(26vw, 0px) scale(1);\n opacity: 1;\n }\n}\n\n/* 蝴蝶飞舞 */\n.ani9 {\n position: absolute;\n opacity: 0;\n width: 62.5%;\n /* left:0px;\n top: 0px; */\n transform: translate(0, 0) rotate(30deg);\n}\n\n.ani9Active {\n animation: ani9Active 5s ease-in-out forwards;\n}\n\n@keyframes ani9Active {\n 0% {\n opacity: 0;\n /* left:-500px;\n top: 0px; */\n transform: translate(-26vw, 27.7vh) 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(36.4vw, 9.25vh) rotate(60deg) scale(0.15);\n }\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(36.4vw, -9.25vh) rotate(-50deg) scale(0.15);\n }\n\n 80% {\n opacity: 1;\n // transform: translate(500px, -200px) rotate(-60deg) scale(0.1);\n transform: translate(26vw, -18.5vh) rotate(-60deg) scale(0.1);\n }\n\n 100% {\n opacity: 0;\n // transform: translate(0px, -200px) rotate(-60deg) scale(0.1);\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\n.ani10Active {\n animation: ani10Active 0.5s ease-in-out 6s forwards;\n}\n\n@keyframes ani10Active {\n 0% {\n // top: 700px;\n top: 64.8vh;\n left: 0px;\n opacity: 1;\n }\n\n 100% {\n top: 0px;\n left: 0px;\n opacity: 1;\n }\n}\n</style>\n","import { render } from \"./index.vue?vue&type=template&id=5c997ea6&scoped=true\"\nimport script from \"./index.vue?vue&type=script&lang=js\"\nexport * from \"./index.vue?vue&type=script&lang=js\"\n\nimport \"./index.vue?vue&type=style&index=0&id=5c997ea6&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-5c997ea6\"]])\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!./index.vue?vue&type=style&index=0&id=5c997ea6&lang=scss&scoped=true\""],"sourceRoot":""}
|
