1587 lines
110 KiB
HTML
1587 lines
110 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<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="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css" />
|
|
<script src="./js/vue.global.js"></script>
|
|
<script src="./js/vuex.global.js"></script>
|
|
<script src="https://cdn.tailwindcss.com/3.3.5"></script>
|
|
<link rel="stylesheet" href="./css/style.css" />
|
|
<link rel="stylesheet" href="./css/responsive.css" />
|
|
|
|
<title>Codem LSTRANSIT</title>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="app">
|
|
<div v-if="show" class="w-full h-[100vh] flex items-center justify-center">
|
|
<div v-if="activePage == 'meter'" class="w-full h-full flex items-center justify-start">
|
|
<div
|
|
class="w-[12%] h-[15%] ml-[1vw] mt-[20vh] flex content-start flex-wrap"
|
|
style="background-image: url(./images/busmeter.png); background-size: 100% 100%"
|
|
>
|
|
<div class="w-full h-[28%] flex items-center justify-end">
|
|
<h2
|
|
v-if="busJobData.abb"
|
|
style="
|
|
color: #fff;
|
|
margin-right: 1.7vw;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 0.6vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%; /* 13.93px */
|
|
"
|
|
>
|
|
{{busJobData.abb}}
|
|
</h2>
|
|
</div>
|
|
<div class="w-full h-[4%] flex items-center justify-start"></div>
|
|
<div class="w-full h-[15.5%] flex items-center justify-start">
|
|
<h2
|
|
style="
|
|
color: #ff7480;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 0.5vw;
|
|
margin-left: 1.6vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%;
|
|
"
|
|
>
|
|
{{this.busJobData.fullseat}} {{this.locales['fuelseat']}}
|
|
</h2>
|
|
</div>
|
|
<div class="w-full h-[15.5%] flex items-center justify-start">
|
|
<h2
|
|
style="
|
|
color: white;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 0.5vw;
|
|
margin-left: 1.6vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%;
|
|
"
|
|
>
|
|
{{this.busJobData.emptyseat}} {{this.locales['emptyseat']}}
|
|
</h2>
|
|
</div>
|
|
<div class="w-full h-[14%] flex items-center justify-start">
|
|
<h2
|
|
style="
|
|
color: white;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 0.5vw;
|
|
margin-left: 1.6vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%;
|
|
"
|
|
>
|
|
{{currencyUnit}} {{busJobData.income}} {{this.locales['income']}}
|
|
</h2>
|
|
</div>
|
|
<div class="w-full h-[14%] flex items-center justify-start relative">
|
|
<div v-if="totalTime > 0" class="w-[20%] h-full absolute right-[1vw] flex items-center justify-center">
|
|
<h2
|
|
style="
|
|
color: white;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 0.5vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%;
|
|
"
|
|
>
|
|
{{formattedTime}}
|
|
</h2>
|
|
</div>
|
|
<h2
|
|
style="
|
|
color: white;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 0.5vw;
|
|
margin-left: 1.6vw;
|
|
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%;
|
|
"
|
|
>
|
|
{{this.locales['nextstop']}} - {{busJobData.routename}}
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-if="activePage == 'main'"
|
|
class="w-full h-full flex relative"
|
|
style="background-image: url(./images/background.png); background-size: 100% 100%"
|
|
>
|
|
<transition-group name="fade">
|
|
<div
|
|
class="w-[20%] h-[6.5%] absolute flex items-start justify-start"
|
|
style="background-image: url(./images/notificationbg.png); background-size: 100% 100%"
|
|
:style="{'border-radius': '0.5vw', 'bottom': `${15 + (index * 6)}vh`, 'left': '1%'}"
|
|
v-for="(notification, index) in notifications"
|
|
:key="notification.id"
|
|
>
|
|
<div class="w-[15%] h-full"></div>
|
|
<div class="w-full h-full flex flex-wrap">
|
|
<div class="w-full h-[40%] flex items-end">
|
|
<h2
|
|
style="
|
|
font-family: Gilroy-Bold;
|
|
font-size: 0.7vw;
|
|
text-indent: 0.4vw;
|
|
font-style: normal;
|
|
color: #4c4c4c;
|
|
font-weight: 400;
|
|
line-height: 99.5%; /* 19.9px */
|
|
"
|
|
>
|
|
{{notification.header}}
|
|
</h2>
|
|
</div>
|
|
<div class="w-full h-[60%] flex items-center">
|
|
<h2
|
|
style="
|
|
font-family: Gilroy-Bold;
|
|
font-size: 0.7vw;
|
|
text-indent: 0.4vw;
|
|
font-style: normal;
|
|
color: #4c4c4c;
|
|
font-weight: 400;
|
|
line-height: 99.5%; /* 19.9px */
|
|
"
|
|
>
|
|
{{notification.text}}
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- <h2 class="text-white">{{notification.text}}</h2> -->
|
|
</div>
|
|
</transition-group>
|
|
<div class="w-[31%] h-full">
|
|
<div
|
|
class="w-[25%] h-[5%] mt-[2vh] ml-[2vw]"
|
|
style="background-image: url(./images/logo.png); background-size: 100% 100%"
|
|
></div>
|
|
</div>
|
|
<div class="w-[69%] h-full flex flex-wrap content-start items-start justify-end">
|
|
<div class="w-[89.2%] h-[8.3%] flex">
|
|
<div
|
|
class="w-[76.5%] h-full flex items-center justify-between relative"
|
|
style="border-bottom: 2px solid rgba(0, 0, 0, 0.26)"
|
|
>
|
|
<div class="w-full h-[50%] absolute top-0 z-[1]">
|
|
<div
|
|
class="w-[20%] h-[80%]"
|
|
:style="getMarginStyle()"
|
|
style="background-image: url(./images/blur.png); transition: 0.5s all; background-size: 100% 100%"
|
|
></div>
|
|
</div>
|
|
<div
|
|
v-for="data in categories"
|
|
@click="changePage(data.name)"
|
|
class="w-[20%] h-[50%] flex items-center justify-center cursor-pointer z-[2]"
|
|
style="border-radius: 6px; transition: 0.5s all"
|
|
:style="getCategoryStyles(data.name)"
|
|
>
|
|
<h2
|
|
v-if="data && data.label && currentPage"
|
|
:style="currentPage == data.name ? 'color: #B51C29' : 'color: #000'"
|
|
style="
|
|
font-family: Gilroy-Bold;
|
|
font-size: 1vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%; /* 19.9px */
|
|
"
|
|
>
|
|
{{data.label}}
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
<div class="w-[22%] h-full flex items-end justify-between">
|
|
<div v-if="playerData" class="w-[70%] h-[70%] mb-[0.5vh] flex flex-col items-end justify-center">
|
|
<h2
|
|
style="
|
|
color: #555;
|
|
text-align: right;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 0.8vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%; /* 19.9px */
|
|
"
|
|
>
|
|
{{playerData.allData.profiledata.name}}
|
|
</h2>
|
|
<div class="w-full h-[30%] flex items-center justify-end mt-[0.2vh]">
|
|
<h2
|
|
style="
|
|
color: #b51c29;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 0.7vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%; /* 15.92px */
|
|
"
|
|
>
|
|
{{this.locales['lv']}} {{playerData.allData.profiledata.level}}
|
|
</h2>
|
|
<img class="h-[99%] ml-[0.3vw]" src="./images/lvicon.png" alt="" />
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="w-[21%] h-[60%] mb-[0.5vh] rounded-full flex items-center justify-center"
|
|
style="border: 2px solid #b51c29"
|
|
>
|
|
<img class="h-[93%] rounded-full" :src="playerData.allData.profiledata.avatar" alt="" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<transition-group name="changeCategoryPage">
|
|
<div v-if="currentPage == 'main' " class="w-[89.2%] h-[89.8%] flex flex-wrap content-start" style="overflow: hidden">
|
|
<div class="w-full h-[2.5%]"></div>
|
|
<div
|
|
class="w-[98%] h-[52%] flex flex-wrap content-start flex relative"
|
|
style="background-image: url(./images/mainroute.png); background-size: 100% 100%"
|
|
>
|
|
<div class="w-full h-[12.5%] mt-[5vh] flex items-end">
|
|
<h2
|
|
style="
|
|
font-family: Gilroy-Bold;
|
|
font-size: 4.5vw;
|
|
margin-left: 1.1vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
background: linear-gradient(179deg, #ff5f5f 2.72%, #000 100%);
|
|
background-clip: text;
|
|
text-transform: uppercase;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
"
|
|
>
|
|
{{mainPageRouteData.label}}
|
|
</h2>
|
|
</div>
|
|
<div class="w-full h-[19%] flex items-end">
|
|
<h2
|
|
style="
|
|
font-family: Gilroy-Bold;
|
|
font-size: 5vw;
|
|
margin-left: 1.1vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
background: linear-gradient(179deg, #ff5f5f 2.72%, #000 100%);
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
"
|
|
>
|
|
{{this.locales['route']}}
|
|
</h2>
|
|
</div>
|
|
<div class="w-full h-[27%]">
|
|
<div class="w-full h-[28%] flex items-center justify-start">
|
|
<div class="w-[1.5%] h-full"></div>
|
|
<div class="w-[3.7%] h-full flex items-center justify-center">
|
|
<img class="h-[70%]" src="./images/passenger.png" alt="" />
|
|
</div>
|
|
<h2
|
|
style="
|
|
color: #000;
|
|
text-indent: 1vw;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 16px;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%;
|
|
"
|
|
>
|
|
{{mainPageRouteData.busStopCount}} {{this.locales['busstop']}}
|
|
</h2>
|
|
</div>
|
|
<div class="w-full h-[39%] flex items-center justify-start">
|
|
<div class="w-[1.5%] h-full"></div>
|
|
<div class="w-[3.7%] h-full flex items-center justify-center">
|
|
<img class="h-[70%]" src="./images/moneyicon.png" alt="" />
|
|
</div>
|
|
<h2
|
|
v-if="mainPageRouteData.Profit"
|
|
style="
|
|
color: #000;
|
|
text-indent: 1vw;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 16px;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%;
|
|
"
|
|
>
|
|
{{currencyUnit}} {{mainPageRouteData.Profit.toLocaleString()}} - {{(mainPageRouteData.Profit +
|
|
500).toLocaleString()}} {{this.locales['est']}}
|
|
</h2>
|
|
</div>
|
|
<div class="w-full h-[35%] flex items-center justify-start">
|
|
<div class="w-[1.5%] h-full"></div>
|
|
<div class="w-[3.7%] h-full flex items-center justify-center">
|
|
<img class="h-[70%]" src="./images/timeicon.png" alt="" />
|
|
</div>
|
|
<h2
|
|
style="
|
|
color: #000;
|
|
text-indent: 1vw;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 16px;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%;
|
|
"
|
|
>
|
|
{{mainPageRouteData.time}} {{this.locales['mntotalroutetime']}}
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
<div class="w-full h-[12%] flex items-center justify-start">
|
|
<div class="w-[1.5%] h-full"></div>
|
|
<div
|
|
class="w-[15%] h-[50%] flex items-center justify-center cursor-pointer"
|
|
@click="selectRoute(mainPageRouteData)"
|
|
style="
|
|
border-radius: 5.44px;
|
|
border: 2.04px solid rgba(0, 0, 0, 0.22);
|
|
background: #fff;
|
|
box-shadow: 0px 1.36px 6.732px 0px rgba(0, 0, 0, 0.19);
|
|
"
|
|
>
|
|
<h2
|
|
style="
|
|
color: #b51c29;
|
|
font-family: Gilroy-ExtraBold;
|
|
font-size: 0.8vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%; /* 16.238px */
|
|
"
|
|
>
|
|
{{busJobStartStep.selectroute ? 'Selected Route' : 'Select Route'}}
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
<div id="mainswiper" class="w-full h-[17.5%] bottom-0 absolute" style="overflow: hidden">
|
|
<div class="swiper-wrapper w-full h-full ml-[1vw]">
|
|
<div
|
|
v-for="(data,index) in routes"
|
|
class="swiper-slide w-[21.5%] h-full cursor-pointer"
|
|
@click="changeRouteMainPage(index)"
|
|
:style="data.name == mainPageRouteData.name ? 'margin-top: 0vh' : 'margin-top: 4vh'"
|
|
style="background-image: url(./images/swiperbg.png); background-size: 100% 100%; transition: 0.5s all"
|
|
>
|
|
<div class="w-full h-[50%] flex items-center justify-center relative">
|
|
<div class="w-[10%] right-[1vw] h-full flex absolute items-center justify-center">
|
|
<img
|
|
v-if="playerData.allData.profiledata.level >= data.level"
|
|
class=""
|
|
src="./images/lockopenicon.png"
|
|
alt=""
|
|
/>
|
|
<img v-else class="" src="./images/lockicon.png" alt="" />
|
|
</div>
|
|
<div
|
|
class="inline-flex h-[60%] flex items-center justify-center pl-[1vw] pr-[1vw]"
|
|
style="border-radius: 5px; border: 1px solid #fff; background: #b51c29"
|
|
>
|
|
<h2
|
|
style="
|
|
color: #d9d9d9;
|
|
text-align: right;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 0.7vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%;
|
|
"
|
|
>
|
|
{{ data.abbreviation }}
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
<div class="w-full h-[50%] flex items-center justify-center">
|
|
<h2
|
|
style="
|
|
color: #d9d9d9;
|
|
text-align: right;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 0.7vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%;
|
|
"
|
|
>
|
|
{{ data.label }}
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-full h-[2.5%]"></div>
|
|
<div
|
|
class="w-[34%] h-[43%] flex items-center justify-center no-scrollbar"
|
|
style="background-image: url(./images/dailymissionbg.png); background-size: 100% 100%; overflow: auto"
|
|
>
|
|
<div class="w-[89%] h-full">
|
|
<div class="w-full h-[20%] flex items-center justify-start">
|
|
<div
|
|
class="w-[13%] h-[60%]"
|
|
style="background-image: url(./images/dailymissionsicon.png); background-size: 100% 100%"
|
|
></div>
|
|
<div class="w-[87%] h-[60%] flex items-center justify-between">
|
|
<h2
|
|
style="
|
|
color: #000;
|
|
font-family: Gilroy-ExtraBold;
|
|
font-size: 1vw;
|
|
text-indent: 0.8vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%; /* 19.9px */
|
|
"
|
|
>
|
|
{{this.locales['dailymissions']}}
|
|
</h2>
|
|
<h2
|
|
v-if="playerData.allData.dailymission.remainingtime > 0"
|
|
style="
|
|
color: #000;
|
|
font-family: Helvetica;
|
|
font-size: 1vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%; /* 15.92px */
|
|
"
|
|
>
|
|
{{playerData.allData.dailymission.remainingtime.toFixed(0)}}hr
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-for="data in playerDailyMission"
|
|
class="w-full h-[25%] border mt-[0.5vh] flex items-center justify-center"
|
|
style="border-radius: 3px; border: 2px solid rgba(0, 0, 0, 0.33); background: rgba(89, 28, 28, 0.54)"
|
|
>
|
|
<div class="w-[92%] h-full">
|
|
<h2
|
|
style="
|
|
color: #fff;
|
|
font-family: Gilroy-ExtraBold;
|
|
font-size: 0.7vw;
|
|
font-style: normal;
|
|
margin-top: 1vh;
|
|
font-weight: 400;
|
|
line-height: 99.5%; /* 13.93px */
|
|
"
|
|
>
|
|
{{data.header}}
|
|
</h2>
|
|
<div class="w-full h-[30%] flex items-center">
|
|
<h2
|
|
style="
|
|
color: rgba(0, 0, 0, 0.65);
|
|
font-family: Gilroy-SemiBold;
|
|
font-size: 0.62vw;
|
|
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%;
|
|
"
|
|
>
|
|
{{data.label}}
|
|
</h2>
|
|
</div>
|
|
<div class="w-full h-[14%] flex items-center justify-between">
|
|
<h2
|
|
style="
|
|
color: rgba(0, 0, 0, 0.65);
|
|
font-family: Gilroy-Medium;
|
|
font-size: 0.6vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%;
|
|
"
|
|
>
|
|
{{data.currentCount}}/{{data.count}}
|
|
</h2>
|
|
<h2
|
|
style="
|
|
color: rgba(0, 0, 0, 0.65);
|
|
font-family: Gilroy-Medium;
|
|
font-size: 0.6vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%; /* 9.95px */
|
|
"
|
|
>
|
|
+ {{data.xp}} XP
|
|
</h2>
|
|
</div>
|
|
<div
|
|
class="w-full h-[15%] mt-[0.3vh] flex items-center"
|
|
style="border-radius: 0.7vw; background: rgba(0, 0, 0, 0.24)"
|
|
>
|
|
<div
|
|
class="h-full"
|
|
v-if="data.progressbar > 0"
|
|
:style="{ width: data.progressbar + '%' }"
|
|
style="border-radius: 15px; border: 1px solid #000; background: #b51c29"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-[26%] ml-[1.1vw] h-[43%]" style="background-image: url(./images/badge.png); background-size: 100% 100%">
|
|
<div class="w-full h-[20%] flex items-center justify-center">
|
|
<h2
|
|
style="
|
|
color: #fff;
|
|
font-family: Gilroy-ExtraBold;
|
|
font-size: 1.2vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%;
|
|
"
|
|
>
|
|
{{this.locales['selectbusvehicle']}}
|
|
</h2>
|
|
</div>
|
|
<div class="w-full h-[40%]">
|
|
<div
|
|
id="mainswiper3"
|
|
class="w-full h-full flex flex-wrap content-start items-center justify-center relative"
|
|
style="overflow: hidden"
|
|
>
|
|
<div class="w-[8%] h-full absolute left-[10%] flex items-center justify-center z-[2]">
|
|
<img
|
|
class="h-[10%] object-contain cursor-pointer"
|
|
id="mainswiperright"
|
|
src="./images/righticon.png"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<div class="w-[8%] h-full absolute right-[10%] flex items-center justify-center z-[2]">
|
|
<img
|
|
id="mainswiperleft"
|
|
class="h-[10%] object-contain cursor-pointer"
|
|
style="transform: rotate(180deg)"
|
|
src="./images/righticon.png"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<div class="w-[50%] h-full swiper-wrapper relative flex items-center justify-start">
|
|
<div v-for="data in busJobVehicle" class="w-full h-full swiper-slide flex items-start justify-start">
|
|
<div class="w-[50%] h-full flex items-center justify-center">
|
|
<img class="h-[80%]" :src="'./images/'+data.vehiclename+'.png'" alt="" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- <div class="w-full h-[20%] border"></div> -->
|
|
</div>
|
|
</div>
|
|
<div class="w-full h-[20%] flex flex-col items-center justify-center">
|
|
<h2
|
|
style="
|
|
color: #fff;
|
|
font-family: Gilroy-ExtraBold;
|
|
font-size: 0.9vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
margin-bottom: 1vw;
|
|
line-height: 99.5%;
|
|
"
|
|
>
|
|
{{busJobVehicleData.label}}
|
|
</h2>
|
|
<h2
|
|
style="
|
|
color: #fff;
|
|
font-family: Gilroy-ExtraBold;
|
|
font-size: 0.7vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%;
|
|
"
|
|
>
|
|
{{this.locales['requiredlv']}} {{busJobVehicleData.level}}
|
|
</h2>
|
|
</div>
|
|
<div v-if="playerData.allData" class="w-full h-[18.5%] flex items-center justify-center relative">
|
|
<div
|
|
class="w-[85%] h-[60%] flex items-center justify-center cursor-pointer"
|
|
@click="selectBusVehicle(busJobVehicleData)"
|
|
style="border-radius: 7px; background: #fff; box-shadow: 0px -4px 1px 0px rgba(146, 146, 146, 0.99) inset"
|
|
>
|
|
<h2
|
|
style="
|
|
color: #000;
|
|
font-family: Gilroy-ExtraBold;
|
|
font-size: 0.9vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%; /* 15.92px */
|
|
"
|
|
>
|
|
{{playerData.allData.profiledata.level >= busJobVehicleData.level ? 'Select' : 'Locked'}}
|
|
</h2>
|
|
</div>
|
|
<div class="w-[20%] h-full absolute right-[1vw] flex items-center justify-center">
|
|
<img
|
|
v-if="playerData.allData.profiledata.level >= busJobVehicleData.level"
|
|
class=""
|
|
src="./images/lockopenicon.png"
|
|
alt=""
|
|
/>
|
|
<img v-else class="" src="./images/lockicon.png" alt="" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-[35%] ml-[1.1vw] h-[43%]">
|
|
<div
|
|
class="w-full h-[70%] flex flex-wrap"
|
|
style="background-image: url(./images/completesteps.png); background-size: 100% 100%"
|
|
>
|
|
<div class="w-full h-[19%] flex items-end justify-start">
|
|
<div class="w-[14%] h-[45%] flex items-center justify-end">
|
|
<img class="h-[120%]" src="./images/busicon.png" alt="" />
|
|
</div>
|
|
<div class="w-[80%] h-[45%] flex items-center justify-start">
|
|
<h2
|
|
style="
|
|
color: #000;
|
|
font-family: Gilroy-ExtraBold;
|
|
font-size: 1.1vw;
|
|
font-style: normal;
|
|
text-indent: 1vw;
|
|
font-weight: 400;
|
|
line-height: 99.5%; /* 19.9px */
|
|
"
|
|
>
|
|
{{this.locales['gettingready']}}
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
<div class="w-[20%] h-[77%] flex flex-col items-center justify-end">
|
|
<div
|
|
class="w-[40%] h-[14.7%] mb-[0.5vh] rounded-full flex items-center justify-center"
|
|
:style="busJobStartStep.rentthebus ? 'border: 2px solid #b51c29' : 'border: 2px solid black'"
|
|
>
|
|
<div
|
|
v-if="busJobStartStep.rentthebus"
|
|
class="w-[80%] h-[80%] rounded-full"
|
|
style="background-color: #b51c29"
|
|
></div>
|
|
</div>
|
|
<div
|
|
class="w-[10%] h-[4%] mb-[0.25vh] border rounded-full"
|
|
:style="busJobStartStep.rentthebus ? 'background-color: #B51C29' : 'background-color: black'"
|
|
></div>
|
|
<div
|
|
class="w-[10%] h-[4%] mb-[0.25vh] border rounded-full"
|
|
:style="busJobStartStep.rentthebus ? 'background-color: #b51c29' : 'background-color: black'"
|
|
></div>
|
|
<div
|
|
class="w-[10%] h-[4%] mb-[0.6vh] border rounded-full"
|
|
:style="busJobStartStep.selectroute ? 'background-color: #b51c29' : 'background-color: black'"
|
|
></div>
|
|
<div
|
|
class="w-[40%] h-[14.7%] flex items-center justify-center mb-[0.5vh] rounded-full"
|
|
:style="busJobStartStep.selectroute ? 'border: 2px solid #b51c29' : 'border: 2px solid black'"
|
|
>
|
|
<div
|
|
v-if="busJobStartStep.selectroute"
|
|
class="w-[80%] h-[80%] rounded-full"
|
|
style="background-color: #b51c29"
|
|
></div>
|
|
</div>
|
|
<div
|
|
class="w-[10%] h-[4%] mb-[0.25vh] border rounded-full"
|
|
:style="busJobStartStep.selectroute ? 'background-color: #B51C29' : 'background-color: black'"
|
|
></div>
|
|
<div
|
|
class="w-[10%] h-[4%] mb-[0.25vh] border rounded-full"
|
|
:style="busJobStartStep.selectroute ? 'background-color: #B51C29' : 'background-color: black'"
|
|
></div>
|
|
<div
|
|
class="w-[10%] h-[4%] mb-[0.6vh] border rounded-full"
|
|
:style="busJobStartStep.startthejob ? 'background-color: #B51C29' : 'background-color: black'"
|
|
></div>
|
|
<div
|
|
class="w-[40%] h-[15%] flex items-center justify-center mb-[0.5vh] rounded-full"
|
|
:style="busJobStartStep.startthejob ? 'border: 2px solid #b51c29' : 'border: 2px solid black'"
|
|
>
|
|
<div
|
|
v-if="busJobStartStep.startthejob"
|
|
class="w-[80%] h-[80%] rounded-full"
|
|
style="background-color: #b51c29"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
<div class="w-[60%] h-[77%]">
|
|
<h2
|
|
style="
|
|
color: #000;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 0.7vw;
|
|
font-style: normal;
|
|
margin-top: 3.8vh;
|
|
font-weight: 400;
|
|
line-height: 99.5%; /* 13.93px */
|
|
"
|
|
>
|
|
{{this.locales['rentthebusvehicle']}}
|
|
</h2>
|
|
<h2
|
|
style="
|
|
color: #000;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 0.7vw;
|
|
font-style: normal;
|
|
margin-top: 5.7vh;
|
|
font-weight: 400;
|
|
line-height: 99.5%; /* 13.93px */
|
|
"
|
|
>
|
|
{{this.locales['selectaroute']}}
|
|
</h2>
|
|
<h2
|
|
style="
|
|
color: #000;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 0.7vw;
|
|
font-style: normal;
|
|
margin-top: 5.9vh;
|
|
font-weight: 400;
|
|
line-height: 99.5%; /* 13.93px */
|
|
"
|
|
>
|
|
{{this.locales['startthejob']}}
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="w-full h-[25%] mt-[2.2vh] flex items-center justify-center cursor-pointer"
|
|
@click="startJob()"
|
|
style="border-radius: 8px; background: #fff"
|
|
>
|
|
<h2
|
|
style="
|
|
color: #b51c29;
|
|
font-family: Gilroy-Heavy;
|
|
font-size: 1.6vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%; /* 31.84px */
|
|
"
|
|
>
|
|
{{this.locales['startjob']}}
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="currentPage == 'leaderboard'" class="w-[89.2%] h-[92%] flex flex-wrap content-start" style="overflow: hidden">
|
|
<div class="w-full h-[2.5%]"></div>
|
|
<div class="w-full h-[60%] relative flex items-center justify-center">
|
|
<div
|
|
class="w-[110%] h-full absolute mr-[5vw] flex justify-start content-start"
|
|
style="background-image: url(./images/leaderboard.png); background-size: 100% 100%"
|
|
>
|
|
<div class="w-[36.5%] h-full flex items-start justify-end">
|
|
<div v-if="top50[1]" class="w-[33%] h-[45%] flex items-end flex-wrap content-end justify-center">
|
|
<div class="w-full h-[30%] flex items-center justify-center" style="opacity: 0.5">
|
|
<div
|
|
class="w-[42%] h-[82%] rounded-full flex items-center justify-center"
|
|
style="border: 2px solid #b51c29"
|
|
>
|
|
<img class="w-[94%] h-[97%] rounded-full" :src="top50[1]['avatar']" alt="" />
|
|
</div>
|
|
</div>
|
|
<div class="w-full h-[25%] flex flex-col items-center justify-center">
|
|
<h2
|
|
style="
|
|
color: #b51c29;
|
|
font-family: Gilroy-Black;
|
|
font-size: 1.1vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
opacity: 0.5;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
{{top50[1]['name']}}
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-[22%] h-full flex items-start justify-end">
|
|
<div v-if="top50[0]" class="w-[55%] h-[43%] flex items-end flex-wrap content-end justify-center">
|
|
<div class="w-full h-[30%] flex items-center justify-center">
|
|
<div
|
|
class="w-[42%] h-[87%] rounded-full flex items-center justify-center"
|
|
style="border: 2px solid #b51c29"
|
|
>
|
|
<img class="w-[94%] h-[97%] rounded-full" :src="top50[0]['avatar']" alt="" />
|
|
</div>
|
|
</div>
|
|
<div class="w-full h-[25%] flex flex-col items-center justify-center">
|
|
<h2
|
|
style="
|
|
color: #b51c29;
|
|
font-family: Gilroy-Black;
|
|
font-size: 1.1vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
opacity: 1;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
{{top50[0]['name']}}
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-[22%] h-full flex items-start justify-end">
|
|
<div v-if="top50[2]" class="w-[55%] h-[45%] flex items-end flex-wrap content-end justify-center">
|
|
<div class="w-full h-[30%] flex items-center justify-center" style="opacity: 0.5">
|
|
<div
|
|
class="w-[42%] h-[82%] rounded-full flex items-center justify-center"
|
|
style="border: 2px solid #b51c29"
|
|
>
|
|
<img class="w-[94%] h-[97%] rounded-full" :src="top50[2]['avatar']" alt="" />
|
|
</div>
|
|
</div>
|
|
<div class="w-full h-[25%] flex flex-col items-center justify-center">
|
|
<h2
|
|
style="
|
|
color: #b51c29;
|
|
font-family: Gilroy-Black;
|
|
font-size: 1.1vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
opacity: 0.5;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
{{top50[2]['name']}}
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-full h-[22%] ml-[1.8vw] absolute bottom-0 flex items-start justify-center">
|
|
<h2
|
|
style="
|
|
color: #b51c29;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 1.2vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
{{this.locales['youare']}} {{findMyRank}}
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-full h-[45.5%] no-scrollbar mt-[-8vh] z-[2]" style="overflow: auto">
|
|
<div
|
|
v-for="(data, index) in top50"
|
|
:key="index"
|
|
:style="index > 3 ? 'display: flex' : 'display: none'"
|
|
class="w-[98%] mt-[1vh] h-[13%] flex"
|
|
style="border-radius: 0.5vw; background: rgba(200, 200, 200, 0.72)"
|
|
>
|
|
<div class="w-full h-full flex">
|
|
<div class="w-[6%] h-full flex items-center justify-center">
|
|
<h2 class="text-1" style="font-size: 1.3vw">#{{index}}</h2>
|
|
</div>
|
|
<div class="w-[94%] h-full flex items-center justify-start">
|
|
<div class="w-[50%] h-full flex items-center">
|
|
<h2
|
|
style="
|
|
color: #b51c29;
|
|
text-indent: 1vw;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 1.1vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
"
|
|
>
|
|
{{data.name}}
|
|
</h2>
|
|
</div>
|
|
<div class="w-[50%] h-full flex justify-end items-center">
|
|
<h2
|
|
style="
|
|
color: #b51c29;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 1vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
margin-right: 0.5vw;
|
|
line-height: 99.5%; /* 19.9px */
|
|
"
|
|
>
|
|
{{this.locales['lv']}} {{data.level}}
|
|
</h2>
|
|
<img class="h-[40%] mr-[1vw]" src="./images/lvicon.png" alt="" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="currentPage == 'profile'" class="w-[89.2%] h-[92%] flex flex-wrap content-start" style="overflow: hidden">
|
|
<div class="w-full h-[2.5%]"></div>
|
|
<div class="w-full h-[45%] flex justify-center relative">
|
|
<div
|
|
class="w-[76%] h-[100%] flex absolute bottom-0 mb-[-5vh]"
|
|
style="background-image: url(./images/profilebg.png); background-size: 100% 100%"
|
|
>
|
|
<div class="w-[37.5%] h-full left-[14.6vw] absolute">
|
|
<div class="w-full h-[73%]">
|
|
<div class="w-full h-[25%] flex flex-col items-center justify-end">
|
|
<h2
|
|
style="
|
|
color: #b51c29;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 1.1vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%;
|
|
"
|
|
>
|
|
{{this.locales['current']}}
|
|
</h2>
|
|
<h2
|
|
style="
|
|
color: #b51c29;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 1.1vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%;
|
|
"
|
|
>
|
|
{{this.locales['level']}}
|
|
</h2>
|
|
</div>
|
|
<div class="w-full h-[36%] flex items-center justify-center">
|
|
<h1
|
|
style="
|
|
color: #fff;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 2.2vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%;
|
|
"
|
|
>
|
|
{{this.locales['lv']}}{{playerData.allData.profiledata.level}}
|
|
</h1>
|
|
</div>
|
|
<div class="w-full h-[25%] flex flex-col items-center justify-start">
|
|
<h2
|
|
style="
|
|
color: rgba(181, 28, 41, 0.52);
|
|
|
|
text-align: center;
|
|
font-family: Gilroy-SemiBold;
|
|
font-size: 1vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%;
|
|
"
|
|
>
|
|
{{this.locales['experience']}}
|
|
</h2>
|
|
<h2
|
|
style="
|
|
color: rgba(181, 28, 41, 0.52);
|
|
|
|
text-align: center;
|
|
font-family: Gilroy-SemiBold;
|
|
font-size: 1vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%;
|
|
"
|
|
>
|
|
{{playerData.allData.profiledata.xp}}/{{busJobData.requiredXp}}XP
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-[37%] h-full flex items-start justify-end">
|
|
<div class="w-[81%] h-[67%] flex flex-wrap content-end items-end justify-center">
|
|
<div class="w-full h-[25%] flex flex-col items-center justify-end">
|
|
<h2
|
|
style="
|
|
color: #b51c29;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 1.1vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%;
|
|
"
|
|
>
|
|
{{this.locales['completed']}}
|
|
</h2>
|
|
<h2
|
|
style="
|
|
color: #b51c29;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 1.1vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%;
|
|
"
|
|
>
|
|
{{this.locales['jobs']}}
|
|
</h2>
|
|
</div>
|
|
<div class="w-full h-[36%] flex items-center justify-center">
|
|
<h1
|
|
style="
|
|
color: #fff;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 2.2vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%;
|
|
"
|
|
>
|
|
{{playerData.allData.profiledata.completejobs}}
|
|
</h1>
|
|
</div>
|
|
<div class="w-full h-[25%] flex flex-col items-center justify-start">
|
|
<h2
|
|
style="
|
|
color: rgba(181, 28, 41, 0.52);
|
|
|
|
text-align: center;
|
|
font-family: Gilroy-SemiBold;
|
|
font-size: 1vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%;
|
|
"
|
|
>
|
|
{{playerData.allData.profiledata.completejobs}} {{this.locales['routetitle']}}
|
|
</h2>
|
|
<h2
|
|
style="
|
|
color: rgba(181, 28, 41, 0.52);
|
|
|
|
text-align: center;
|
|
font-family: Gilroy-SemiBold;
|
|
font-size: 1vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%;
|
|
"
|
|
>
|
|
{{this.locales['complete']}}
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-[18.5%] h-full"></div>
|
|
<div class="w-[37%] h-full flex items-start justify-end">
|
|
<div class="w-[81%] h-[67%] flex flex-wrap content-end items-end justify-center">
|
|
<div class="w-full h-[25%] flex flex-col items-center justify-end">
|
|
<h2
|
|
style="
|
|
color: #b51c29;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 1.1vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%;
|
|
"
|
|
>
|
|
{{this.locales['total']}}
|
|
</h2>
|
|
<h2
|
|
style="
|
|
color: #b51c29;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 1.1vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%;
|
|
"
|
|
>
|
|
{{this.locales['earnings']}}
|
|
</h2>
|
|
</div>
|
|
<div class="w-full h-[36%] flex items-center justify-center">
|
|
<h1
|
|
style="
|
|
color: #fff;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 2vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%;
|
|
"
|
|
>
|
|
{{currencyUnit}} {{playerData.allData.profiledata.totalearnings}}
|
|
</h1>
|
|
</div>
|
|
<div class="w-full h-[25%] flex flex-col items-center justify-start">
|
|
<h2
|
|
style="
|
|
color: rgba(181, 28, 41, 0.52);
|
|
|
|
text-align: center;
|
|
font-family: Gilroy-SemiBold;
|
|
font-size: 1vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%;
|
|
"
|
|
>
|
|
{{this.locales['since']}} {{playerData.allData.profiledata.sincedate}}
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-full h-[8.5%] flex">
|
|
<div class="w-[2.5%] h-full flex items-center justify-center">
|
|
<img class="h-[35%]" src="./images/latesticon.png" alt="" />
|
|
</div>
|
|
<div class="inline-flex h-full items-center justify-start">
|
|
<h2
|
|
style="
|
|
color: #000;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 1.3vw;
|
|
text-indent: 0.7vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%; /* 23.88px */
|
|
"
|
|
>
|
|
{{this.locales['latestworks']}}
|
|
</h2>
|
|
</div>
|
|
<div class="flex-1 h-full flex items-center justify-start">
|
|
<div class="w-[96%] h-[5%] ml-[0.5vw]" style="border-radius: 14px; background: rgba(0, 0, 0, 0.26)"></div>
|
|
</div>
|
|
</div>
|
|
<div v-if="playerData.allData" class="w-full h-[40%] no-scrollbar" style="overflow: auto">
|
|
<div
|
|
v-for="data in playerData.allData.historydata.slice().reverse()"
|
|
class="w-[98%] h-[16%] mt-[1vh] flex"
|
|
style="border-radius: 0.6vw; border: 2px solid rgba(0, 0, 0, 0.26); background: rgba(200, 200, 200, 0.72)"
|
|
>
|
|
<div class="w-[9.8%] h-full flex items-center justify-center">
|
|
<div
|
|
class="inline-flex h-[50%] flex items-center justify-center pl-[1.2vw] pr-[1.2vw]"
|
|
style="border-radius: 0.3vw; border: 1px solid #fff; background: #b51c29"
|
|
>
|
|
<h2
|
|
style="
|
|
color: #d9d9d9;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 14px;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%; /* 13.93px */
|
|
"
|
|
>
|
|
{{data.abbreviation}}
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
<div class="w-[46.5%] h-full flex items-center justify-start">
|
|
<h2
|
|
style="
|
|
font-family: Gilroy-Bold;
|
|
font-size: 1.05vw;
|
|
|
|
background: linear-gradient(90deg, #ff5f5f 2.72%, #000 100%);
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
"
|
|
>
|
|
{{data.routename}}
|
|
</h2>
|
|
</div>
|
|
<div class="w-[4%] h-full flex items-center justify-center">
|
|
<img class="h-[50%]" src="./images/passenger.png" alt="" />
|
|
</div>
|
|
<div
|
|
class="w-[10.5%] h-full flex items-center justify-start"
|
|
style="
|
|
color: #000;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 0.75vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%; /* 14.937px */
|
|
"
|
|
>
|
|
{{data.passenger}} {{this.locales['passenger']}}
|
|
</div>
|
|
<div class="w-[4%] h-full flex items-center justify-center">
|
|
<img class="h-[50%]" src="./images/moneyicon.png" alt="" />
|
|
</div>
|
|
<div
|
|
class="w-[10.5%] h-full flex items-center justify-start"
|
|
style="
|
|
color: #000;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 0.75vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%; /* 14.937px */
|
|
"
|
|
>
|
|
{{data.money.toLocaleString()}} {{currencyUnit}} {{this.locales['earned']}}
|
|
</div>
|
|
<div class="w-[4%] h-full flex items-center justify-center">
|
|
<img class="h-[50%]" src="./images/callendericon.png" alt="" />
|
|
</div>
|
|
<div
|
|
class="w-[10.5%] h-full flex items-center justify-start"
|
|
style="
|
|
color: #000;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 0.75vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%; /* 14.937px */
|
|
"
|
|
>
|
|
{{data.time}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="currentPage == 'routes'" class="w-[89.2%] h-[92%] flex flex-wrap content-start" style="overflow: hidden">
|
|
<div class="w-full h-[97.5%] flex items-end justify-start">
|
|
<div
|
|
class="w-[98%] h-[97.2%] relative"
|
|
style="background-image: url(./images/routebg.png); background-size: 100% 100%"
|
|
>
|
|
<div class="w-[20%] h-[20%] absolute top-[25vh] left-[40vw] flex items-center justify-center">
|
|
<img class="h-[90%]" src="./images/globalrouteicon.png" alt="" />
|
|
</div>
|
|
<div class="w-full h-[12.5%] flex items-end">
|
|
<h2
|
|
style="
|
|
font-family: Gilroy-Bold;
|
|
font-size: 5vw;
|
|
margin-left: 1.1vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
background: linear-gradient(179deg, #ff5f5f 2.72%, #000 100%);
|
|
background-clip: text;
|
|
text-transform: uppercase;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
"
|
|
>
|
|
{{routeData.label}}
|
|
</h2>
|
|
</div>
|
|
<div class="w-full h-[10%] flex items-end">
|
|
<h2
|
|
style="
|
|
font-family: Gilroy-Bold;
|
|
font-size: 5vw;
|
|
margin-left: 1.1vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
background: linear-gradient(179deg, #ff5f5f 2.72%, #000 100%);
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
"
|
|
>
|
|
{{this.locales['route']}}
|
|
</h2>
|
|
</div>
|
|
<div class="w-full h-[21%]">
|
|
<div class="w-full h-[24%] flex items-center justify-start">
|
|
<div class="w-[3%] h-full"></div>
|
|
<div class="w-[3.7%] h-full flex items-center justify-center">
|
|
<img class="h-[70%]" src="./images/passenger.png" alt="" />
|
|
</div>
|
|
<h2
|
|
style="
|
|
color: #000;
|
|
text-indent: 1vw;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 16px;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%;
|
|
"
|
|
>
|
|
{{routeData.busStopCount}} {{this.locales['busstop']}}
|
|
</h2>
|
|
</div>
|
|
<div class="w-full h-[25%] flex items-center justify-start">
|
|
<div class="w-[3%] h-full"></div>
|
|
<div class="w-[3.7%] h-full flex items-center justify-center">
|
|
<img class="h-[70%]" src="./images/moneyicon.png" alt="" />
|
|
</div>
|
|
<h2
|
|
v-if="routeData.Profit"
|
|
style="
|
|
color: #000;
|
|
text-indent: 1vw;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 16px;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%;
|
|
"
|
|
>
|
|
{{currencyUnit}} {{routeData.Profit.toLocaleString()}} - {{(routeData.Profit +
|
|
500).toLocaleString()}} {{this.locales['est']}}
|
|
</h2>
|
|
</div>
|
|
<div class="w-full h-[25%] flex items-center justify-start">
|
|
<div class="w-[3%] h-full"></div>
|
|
<div class="w-[3.7%] h-full flex items-center justify-center">
|
|
<img class="h-[70%]" src="./images/timeicon.png" alt="" />
|
|
</div>
|
|
<h2
|
|
style="
|
|
color: #000;
|
|
text-indent: 1vw;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 16px;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%;
|
|
"
|
|
>
|
|
{{routeData.time}} {{this.locales['mntotalroutetime']}}
|
|
</h2>
|
|
</div>
|
|
<div class="w-full h-[25%] flex items-center justify-start">
|
|
<div class="w-[3%] h-full"></div>
|
|
<div class="w-[3.7%] h-full flex items-center justify-center">
|
|
<img class="h-[70%]" src="./images/lvicon2.png" alt="" />
|
|
</div>
|
|
<h2
|
|
style="
|
|
color: #000;
|
|
text-indent: 1vw;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 16px;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%;
|
|
"
|
|
>
|
|
{{this.locales['requiredlevel']}} {{routeData.level}}
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
<div class="w-full h-[2.2%] flex items-end justify-start">
|
|
<div
|
|
class="w-[26%] h-[15%] ml-[2.1vw]"
|
|
style="border-radius: 14px; background: rgba(0, 0, 0, 0.26)"
|
|
></div>
|
|
</div>
|
|
<div class="w-full h-[6.2%] flex items-center">
|
|
<div class="w-[6.5%] h-full flex items-end justify-end">
|
|
<img class="h-[60%]" src="./images/busicon2.png" alt="" />
|
|
</div>
|
|
<h2
|
|
style="
|
|
color: #000;
|
|
text-indent: 0.7vw;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 0.8vw;
|
|
font-style: normal;
|
|
margin-top: 1vw;
|
|
font-weight: 400;
|
|
line-height: 99.5%;
|
|
"
|
|
>
|
|
{{this.locales['routestops']}}
|
|
</h2>
|
|
</div>
|
|
<div class="w-full h-[1.5%]"></div>
|
|
<div class="w-full h-[26%]">
|
|
<div
|
|
v-if="routeData && routeData.stopName"
|
|
class="w-[29.4%] h-full flex flex-wrap justify-end items-start no-scrollbar"
|
|
style="overflow: auto"
|
|
>
|
|
<div
|
|
v-for="data in routeData.stopName"
|
|
class="w-[88%] h-[21%] mt-[0.4vh] flex items-center justify-start"
|
|
style="
|
|
border-radius: 7px;
|
|
background-image: url(./images/backgroundflex.png);
|
|
background-size: 100% 100%;
|
|
"
|
|
>
|
|
<div class="w-[16%] h-full flex items-center justify-center">
|
|
<img class="h-[70%]" src="./images/passenger2.png" alt="" />
|
|
</div>
|
|
<div class="w-[50%] h-full flex items-center">
|
|
<h2
|
|
style="
|
|
color: #000;
|
|
text-indent: 0.7vw;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 0.8vw;
|
|
font-style: normal;
|
|
|
|
font-weight: 400;
|
|
line-height: 99.5%;
|
|
"
|
|
>
|
|
{{data}}
|
|
</h2>
|
|
</div>
|
|
<div class="w-[29%] h-full flex items-center justify-end">
|
|
<div
|
|
class="inline-flex flex items-center h-[50%] pl-[0.5vw] pr-[0.5vw]"
|
|
style="border-radius: 5px; border: 1px solid #fff; background: #b51c29"
|
|
>
|
|
<h2
|
|
style="
|
|
color: #d9d9d9;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 0.7vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%; /* 11.94px */
|
|
"
|
|
>
|
|
{{this.locales['str1']}}
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-full h-[20%] flex items-center justify-center">
|
|
<div id="mainswiper2" class="w-[95%] h-[80%]" style="overflow: hidden">
|
|
<div class="w-full h-full swiper-wrapper">
|
|
<div
|
|
v-for="data in routes"
|
|
class="w-[23.5%] h-full swiper-slide cursor-pointer"
|
|
@click="selectRouteRoutePage(data)"
|
|
:style="getRouteStyles(data.name, routeData.name)"
|
|
style="border-radius: 5px; transition: 0.5 all"
|
|
>
|
|
<div
|
|
class="w-full h-[25%] flex mt-[0.5vh] flex-wrap content-start items-end justify-center relative"
|
|
>
|
|
<div
|
|
class="inline-flex flex items-center h-[80%] pl-[0.5vw] pr-[0.5vw]"
|
|
style="border-radius: 5px; border: 1px solid #fff; background: #b51c29"
|
|
>
|
|
<h2
|
|
style="
|
|
color: #d9d9d9;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 0.7vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%; /* 11.94px */
|
|
"
|
|
>
|
|
{{data.abbreviation}}
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
<div class="w-full h-[40%] flex items-center justify-center">
|
|
<h2
|
|
style="
|
|
color: white;
|
|
font-family: Gilroy-Bold;
|
|
font-size: 0.9vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
opacity: 0.5;
|
|
line-height: 99.5%; /* 11.94px */
|
|
"
|
|
>
|
|
{{data.label}}
|
|
</h2>
|
|
</div>
|
|
<div class="w-full h-[15%] flex items-center justify-center">
|
|
<h2
|
|
style="
|
|
color: #fff;
|
|
font-family: Gilroy-Medium;
|
|
font-size: 0.7vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%;
|
|
opacity: 0.5;
|
|
"
|
|
>
|
|
{{this.locales['requiredlevel']}}
|
|
</h2>
|
|
</div>
|
|
<div class="w-full h-[15%] flex items-center justify-center">
|
|
<h2
|
|
style="
|
|
color: #fff;
|
|
font-family: Gilroy-Medium;
|
|
font-size: 0.7vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 99.5%;
|
|
opacity: 0.5;
|
|
"
|
|
>
|
|
{{this.locales['lv']}}{{data.level}}
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</transition-group>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="https://unpkg.com/swiper@5.3.8/js/swiper.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.1.1/howler.min.js" type="text/javascript"></script>
|
|
<script src="./js/app.js" type="module"></script>
|
|
</body>
|
|
</html>
|