You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 lines
19 KiB
1 lines
19 KiB
{"version":3,"file":"js/385.450020f9.js","mappings":"m0nBAqEA,MAAMA,GAAOC,EAAAA,EAAAA,KAAI,GAKXC,GAAYD,EAAAA,EAAAA,KAAI,GAEhBE,EAAaC,EAAQ,MACrBC,GAAQJ,EAAAA,EAAAA,IAAI,CAAC,GACbK,GAAQL,EAAAA,EAAAA,IAAI,CAAC,GACbM,GAAQN,EAAAA,EAAAA,IAAI,CAAC,GACbO,GAAQP,EAAAA,EAAAA,IAAI,CAAC,GACbQ,GAAQR,EAAAA,EAAAA,IAAI,CAAC,GACbS,IAAUT,EAAAA,EAAAA,IAAI,IACdU,GAAeA,MACjBC,EAAAA,EAAAA,KAAUC,MAAMC,IACZ,IAAIC,EAAOD,EAAIC,KACf,IAAK,IAAIC,KAAKD,EACVA,EAAKC,GAAGC,MAAQC,OAAOF,GAAK,EACxBD,EAAKC,GAAGG,OAAOC,QAAQ,WAAa,IACpCL,EAAKC,GAAGG,OAAShB,GAGzBY,EAAKM,SAAQ,CAACC,EAAML,KACH,GAATA,IAAkBK,EAAKH,OAAOC,QAAQ,WAAa,IAAKE,EAAKH,OAAShB,GAAaE,EAAMkB,MAAQD,GACxF,GAATL,IAAkBK,EAAKH,OAAOC,QAAQ,WAAa,IAAKE,EAAKH,OAAShB,GAAaG,EAAMiB,MAAQD,GACxF,GAATL,IAAkBK,EAAKH,OAAOC,QAAQ,WAAa,IAAKE,EAAKH,OAAShB,GAAaI,EAAMgB,MAAQD,GACxF,GAATL,IAAkBK,EAAKH,OAAOC,QAAQ,WAAa,IAAKE,EAAKH,OAAShB,GAAaK,EAAMe,MAAQD,GACxF,GAATL,IAAkBK,EAAKH,OAAOC,QAAQ,WAAa,IAAKE,EAAKH,OAAShB,GAAaM,EAAMc,MAAQD,GACjGL,EAAQ,GACRP,GAAQa,MAAMC,KAAKF,EACvB,GACF,GACJ,EAENX,KACA,MAAMc,GAAgBA,KAClBvB,EAAUqB,OAAQ,EAClBG,YAAW,KACPxB,EAAUqB,OAAQ,EAClBb,GAAQa,MAAMC,KAAKd,GAAQa,MAAM,IACjCb,GAAQa,MAAMI,OAAO,GACtB,IAAK,E,OAEZC,EAAAA,EAAAA,KAAU,KACQC,YAAYJ,GAAe,KAAK,I,iyDC5GlD,MAAMK,IAA2B,QAAgB,GAAQ,CAAC,CAAC,YAAY,qBAEvE,S","sources":["webpack://lingyunge/./src/pages/lingyunge/lingyungeMobile/index.vue","webpack://lingyunge/./src/pages/lingyunge/lingyungeMobile/index.vue?9e38"],"sourcesContent":["<template>\r\n <div class='content'>\r\n <div class=\"bg\">\r\n <div class=\"cnt\">\r\n <div class=\"cntBg\"></div>\r\n <div class=\"cntRank\">\r\n <div class=\"rank1\">\r\n <img class=\"rankBg\" src=\"../../../assets/lingyungeImages/mobile/rank01.webp\" alt=\"\">\r\n <img class=\"rankAva\" :src=\"top01.avatar\" alt=\"\">\r\n <div class=\"rankNum\">{{ top01.score }}</div>\r\n <div class=\"rankName\">{{ top01.position_name }}-{{ top01.name }}</div>\r\n </div>\r\n <div class=\"rank2\">\r\n <img class=\"rankBg\" src=\"../../../assets/lingyungeImages/mobile/rank02.webp\" alt=\"\">\r\n <img class=\"rankAva\" :src=\"top02.avatar\" alt=\"\">\r\n <div class=\"rankNum\">{{ top02.score }}</div>\r\n <div class=\"rankName\">{{ top02.position_name }}-{{ top02.name }}</div>\r\n </div>\r\n <div class=\"rank3\">\r\n <img class=\"rankBg\" src=\"../../../assets/lingyungeImages/mobile/rank03.webp\" alt=\"\">\r\n <img class=\"rankAva\" :src=\"top03.avatar\" alt=\"\">\r\n <div class=\"rankNum\">{{ top03.score }}</div>\r\n <div class=\"rankName\">{{ top03.position_name }}-{{ top03.name }}</div>\r\n </div>\r\n <div class=\"rank4\">\r\n <img class=\"rankBg\" src=\"../../../assets/lingyungeImages/mobile/rank04.webp\" alt=\"\">\r\n <img class=\"rankAva\" :src=\"top04.avatar\" alt=\"\">\r\n <div class=\"rankNum\">{{ top04.score }}</div>\r\n <div class=\"rankName\">{{ top04.position_name }}-{{ top04.name }}</div>\r\n </div>\r\n <div class=\"rank5\">\r\n <img class=\"rankBg\" src=\"../../../assets/lingyungeImages/mobile/rank05.webp\" alt=\"\">\r\n <img class=\"rankAva\" :src=\"top05.avatar\" alt=\"\">\r\n <div class=\"rankNum\">{{ top05.score }}</div>\r\n <div class=\"rankName\">{{ top05.position_name }}-{{ top05.name }}</div>\r\n </div>\r\n </div>\r\n <div class=\"line\"></div>\r\n <div class=\"list\">\r\n <div class=\"rule\" @click=\"mask = true\">\r\n <img class=\"ruleImg\" src=\"../../../assets/lingyungeImages/mobile/rule.webp\" alt=\"\">\r\n 积分说明\r\n </div>\r\n <div style=\"overflow: hidden;height: 310px;\">\r\n <div class=\"listItem\" :class=\"{ 'animate-up': animateUp }\" v-for=\"(item, index) in topList\"\r\n :key=\"index\">\r\n <div class=\"itemBg\">{{ item.index }}</div>\r\n <div class=\"itemAva\">\r\n <img class=\"itemAvaImg\" :src=\"item.avatar\" alt=\"\">\r\n </div>\r\n <div class=\"itemText\">{{ item.position_name }}-{{ item.name }}</div>\r\n <div class=\"itemNum\">{{ item.score }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- mask -->\r\n <div class=\"mask\" v-if=\"mask\">\r\n <div class=\"maskContent\">\r\n <div class=\"title\">积分说明</div>\r\n <div class=\"tips\">此积分为各成员参与凌云阁活动累计积分。</div>\r\n <div class=\"btn\" @click=\"mask = false\">知道了</div>\r\n </div>\r\n </div>\r\n </div>\r\n</template>\r\n<script setup lang=\"js\">\r\nimport { ref, onMounted } from \"vue\";\r\nconst mask = ref(false);\r\nconst showMask = () => {\r\n console.log(mask)\r\n}\r\n//滚动播放\r\nconst animateUp = ref(false);\r\nimport { getList } from '../../../api/lingyuge'\r\nconst defaultImg = require('../../../assets/lingyungeImages/tx.png')\r\nconst top01 = ref({});\r\nconst top02 = ref({});\r\nconst top03 = ref({});\r\nconst top04 = ref({});\r\nconst top05 = ref({});\r\nconst topList = ref([]);\r\nconst getListArray = () => {\r\n getList().then((res) => {\r\n let data = res.data;\r\n for (let i in data) {\r\n data[i].index = Number(i) + 1;\r\n if (data[i].avatar.indexOf('storage') < 0) {\r\n data[i].avatar = defaultImg;\r\n }\r\n }\r\n data.forEach((item, index) => {\r\n if (index == 0) { if (item.avatar.indexOf('storage') < 0) { item.avatar = defaultImg } top01.value = item };\r\n if (index == 1) { if (item.avatar.indexOf('storage') < 0) { item.avatar = defaultImg } top02.value = item };\r\n if (index == 2) { if (item.avatar.indexOf('storage') < 0) { item.avatar = defaultImg } top03.value = item };\r\n if (index == 3) { if (item.avatar.indexOf('storage') < 0) { item.avatar = defaultImg } top04.value = item };\r\n if (index == 4) { if (item.avatar.indexOf('storage') < 0) { item.avatar = defaultImg } top05.value = item };\r\n if (index > 4) {\r\n topList.value.push(item);\r\n }\r\n });\r\n })\r\n}\r\ngetListArray();\r\nconst scrollAnimate = () => {\r\n animateUp.value = true;\r\n setTimeout(() => {\r\n animateUp.value = false\r\n topList.value.push(topList.value[0]);\r\n topList.value.shift();\r\n }, 1000)\r\n}\r\nonMounted(() => {\r\n const timer = setInterval(scrollAnimate, 1500);\r\n});\r\n\r\n</script>\r\n<style lang=\"scss\" scoped>\r\n.animate-up {\r\n transition: all 1s ease-in-out;\r\n transform: translateY(-50px);\r\n}\r\n\r\n.bg {\r\n background-image: url(\"../../../assets/lingyungeImages/mobile/bg.webp\");\r\n width: 100%;\r\n height: 100vh;\r\n overflow: hidden;\r\n background-size: 100% 100%;\r\n padding: 0 12px;\r\n box-sizing: border-box;\r\n padding-top: 33px;\r\n\r\n .cnt {\r\n border: 1px solid #F8BE5E;\r\n border-radius: 12px 12px 0 0;\r\n // width: 350px;\r\n margin: 0 auto;\r\n background: rgba(18, 44, 90, 0.6);\r\n margin-top: 30px;\r\n max-width: 350px;\r\n }\r\n\r\n .cntBg {\r\n background-image: url(\"../../../assets/lingyungeImages/mobile/title.webp\");\r\n width: 327px;\r\n height: 48px;\r\n background-size: 327px 48px;\r\n margin: 0 auto;\r\n display: block;\r\n position: relative;\r\n top: -24px;\r\n }\r\n @media screen and (max-width:320px){\r\n .bg{\r\n padding: 0 12rpx;\r\n }\r\n .cntBg{\r\n left:-15px;\r\n }\r\n }\r\n .cntRank {\r\n position: relative;\r\n min-height: 265px;\r\n max-width: 350px;\r\n margin: 0 auto;\r\n .rank1 {\r\n background-image: url(\"../../../assets/lingyungeImages/mobile/rank001.webp\");\r\n width: 153px;\r\n height: 168px;\r\n background-size: 153px 168px;\r\n position: absolute;\r\n left: 50%;\r\n margin-left: -76px;\r\n z-index: 5;\r\n\r\n .rankBg {\r\n width: 58px;\r\n height: 62px;\r\n position: relative;\r\n left: 50%;\r\n margin-left: -29px;\r\n margin-top: 17px;\r\n }\r\n\r\n .rankAva {\r\n width: 34px;\r\n height: 34px;\r\n border-radius: 50%;\r\n position: relative;\r\n left: 50%;\r\n margin-left: -46px;\r\n top: -15px;\r\n }\r\n\r\n .rankNum {\r\n font-size: 18px;\r\n text-align: center;\r\n font-weight: bold;\r\n color: #fff;\r\n }\r\n\r\n .rankName {\r\n font-size: 13px;\r\n text-align: center;\r\n color: #fff;\r\n }\r\n }\r\n\r\n .rank2 {\r\n background-image: url(\"../../../assets/lingyungeImages/mobile/rank002.webp\");\r\n width: 119px;\r\n height: 134px;\r\n background-size: 119px 134px;\r\n position: absolute;\r\n z-index: 4;\r\n left: 5px;\r\n top: 30px;\r\n\r\n .rankBg {\r\n width: 50px;\r\n height: 54px;\r\n position: relative;\r\n left: 50%;\r\n margin-left: -25px;\r\n margin-top: 11px;\r\n }\r\n\r\n .rankAva {\r\n width: 28px;\r\n height: 28px;\r\n border-radius: 50%;\r\n position: relative;\r\n left: 50%;\r\n margin-left: -40px;\r\n top: -15px;\r\n }\r\n\r\n .rankNum {\r\n font-size: 14px;\r\n text-align: center;\r\n font-weight: bold;\r\n color: #fff;\r\n }\r\n\r\n .rankName {\r\n font-size: 12px;\r\n text-align: center;\r\n color: #fff;\r\n }\r\n }\r\n\r\n .rank3 {\r\n background-image: url(\"../../../assets/lingyungeImages/mobile/rank002.webp\");\r\n width: 119px;\r\n height: 134px;\r\n background-size: 119px 134px;\r\n position: absolute;\r\n z-index: 4;\r\n right: 5px;\r\n top: 30px;\r\n\r\n .rankBg {\r\n width: 50px;\r\n height: 54px;\r\n position: relative;\r\n left: 50%;\r\n margin-left: -25px;\r\n margin-top: 11px;\r\n }\r\n\r\n .rankAva {\r\n width: 28px;\r\n height: 28px;\r\n border-radius: 50%;\r\n position: relative;\r\n left: 50%;\r\n margin-left: -40px;\r\n top: -15px;\r\n }\r\n\r\n .rankNum {\r\n font-size: 14px;\r\n text-align: center;\r\n font-weight: bold;\r\n color: #fff;\r\n }\r\n\r\n .rankName {\r\n font-size: 12px;\r\n text-align: center;\r\n color: #fff;\r\n }\r\n }\r\n\r\n .rank4 {\r\n background-image: url(\"../../../assets/lingyungeImages/mobile/rank003.webp\");\r\n width: 110px;\r\n height: 123px;\r\n background-size: 110px 123px;\r\n position: absolute;\r\n z-index: 3;\r\n left: 18%;\r\n top: 139px;\r\n\r\n .rankBg {\r\n width: 46px;\r\n height: 51px;\r\n position: relative;\r\n left: 50%;\r\n margin-left: -23px;\r\n margin-top: 9px;\r\n }\r\n\r\n .rankAva {\r\n width: 26px;\r\n height: 26px;\r\n border-radius: 50%;\r\n position: relative;\r\n left: 50%;\r\n margin-left: -37px;\r\n top: -15px;\r\n }\r\n\r\n .rankNum {\r\n font-size: 13px;\r\n text-align: center;\r\n font-weight: bold;\r\n color: #fff;\r\n }\r\n\r\n .rankName {\r\n font-size: 12px;\r\n text-align: center;\r\n color: #fff;\r\n }\r\n }\r\n\r\n .rank5 {\r\n background-image: url(\"../../../assets/lingyungeImages/mobile/rank003.webp\");\r\n width: 110px;\r\n height: 123px;\r\n background-size: 110px 123px;\r\n position: absolute;\r\n z-index: 3;\r\n right: 18%;\r\n top: 139px;\r\n\r\n .rankBg {\r\n width: 46px;\r\n height: 51px;\r\n position: relative;\r\n left: 50%;\r\n margin-left: -23px;\r\n margin-top: 9px;\r\n }\r\n\r\n .rankAva {\r\n width: 26px;\r\n height: 26px;\r\n border-radius: 50%;\r\n position: relative;\r\n left: 50%;\r\n margin-left: -37px;\r\n top: -15px;\r\n }\r\n\r\n .rankNum {\r\n font-size: 13px;\r\n text-align: center;\r\n font-weight: bold;\r\n color: #fff;\r\n }\r\n\r\n .rankName {\r\n font-size: 12px;\r\n text-align: center;\r\n color: #fff;\r\n }\r\n }\r\n }\r\n\r\n .line {\r\n // width: 330px;\r\n height: 3px;\r\n background-image: url(\"../../../assets/lingyungeImages/mobile/line.webp\");\r\n width: 331px;\r\n height: 24px;\r\n background-size: 331px 24px;\r\n margin: 0 auto;\r\n position: relative;\r\n top: -10px;\r\n // background: linear-gradient(79deg, rgba(93, 175, 254, 0) 0%, rgba(115, 193, 254, 0.5) 19%, #C0FEFF 46%, rgba(120, 213, 255, 0.5) 80%, rgba(96, 199, 255, 0) 100%);\r\n }\r\n\r\n .list {\r\n box-sizing: border-box;\r\n padding: 0 12px;\r\n margin-top:-10px;\r\n .rule {\r\n height: 20px;\r\n text-align: right;\r\n color: #F8BE5E;\r\n font-size: 14px;\r\n\r\n .ruleImg {\r\n width: 17px;\r\n height: 17px;\r\n position: relative;\r\n top: 3px;\r\n }\r\n }\r\n\r\n .listItem {\r\n display: flex;\r\n margin: 10px 0;\r\n\r\n .itemBg {\r\n background-image: url(\"../../../assets/lingyungeImages/mobile/tips.webp\");\r\n width: 27px;\r\n height: 30px;\r\n background-size: 27px 30px;\r\n text-align: center;\r\n color: #fff;\r\n font-weight: bold;\r\n position: relative;\r\n top: 7px;\r\n line-height: 24px;\r\n }\r\n\r\n .itemAva {\r\n background-image: url(\"../../../assets/lingyungeImages/mobile/avaBg.webp\");\r\n width: 40px;\r\n height: 40px;\r\n background-size: 40px 40px;\r\n position: relative;\r\n margin-left: 20px;\r\n\r\n .itemAvaImg {\r\n width: 32px;\r\n height: 32px;\r\n border-radius: 50%;\r\n position: absolute;\r\n top: 5px;\r\n left: 4px;\r\n }\r\n }\r\n\r\n .itemText {\r\n font-size: 15px;\r\n color: #fff;\r\n flex: 1;\r\n line-height: 40px;\r\n padding: 0 10px;\r\n }\r\n\r\n .itemNum {\r\n font-size: 18px;\r\n // font-weight: bold;\r\n color: #F8BE5E;\r\n line-height: 40px;\r\n }\r\n }\r\n }\r\n\r\n}\r\n\r\n// mask\r\n.mask {\r\n background: rgba(60, 61, 63, 0.8);\r\n width: 100%;\r\n min-height: 100%;\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n z-index: 5;\r\n\r\n .maskContent {\r\n background: #fff;\r\n width: 320px;\r\n box-sizing: border-box;\r\n padding: 20px;\r\n border-radius: 12px;\r\n margin: 0 auto;\r\n margin-top: 50%;\r\n\r\n .title {\r\n text-align: center;\r\n font-size: 17px;\r\n font-weight: bold;\r\n margin-bottom: 16px;\r\n }\r\n\r\n .tips {\r\n color: #3C3D3F;\r\n font-size: 14px;\r\n line-height: 25px;\r\n }\r\n\r\n .btn {\r\n width: 120px;\r\n height: 40px;\r\n background-size: 120px 40px;\r\n background-image: url(\"../../../assets/lingyungeImages/mobile/btn.webp\");\r\n text-align: center;\r\n color: #fff;\r\n font-size: 15px;\r\n font-weight: bold;\r\n line-height: 40px;\r\n display: block;\r\n margin: 0 auto;\r\n margin-top: 40px;\r\n }\r\n }\r\n}\r\n</style>","import script from \"./index.vue?vue&type=script&setup=true&lang=js\"\nexport * from \"./index.vue?vue&type=script&setup=true&lang=js\"\n\nimport \"./index.vue?vue&type=style&index=0&id=0c8f5e02&lang=scss&scoped=true\"\n\nimport exportComponent from \"../../../../node_modules/vue-loader/dist/exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['__scopeId',\"data-v-0c8f5e02\"]])\n\nexport default __exports__"],"names":["mask","ref","animateUp","defaultImg","require","top01","top02","top03","top04","top05","topList","getListArray","getList","then","res","data","i","index","Number","avatar","indexOf","forEach","item","value","push","scrollAnimate","setTimeout","shift","onMounted","setInterval","__exports__"],"sourceRoot":""} |