update fonts (thanks MrYash)
This commit is contained in:
才羽青空
parent
da402a5a28
commit
11901ec67a
7 changed files with 376 additions and 84 deletions
|
|
@ -1,3 +1,25 @@
|
|||
@font-face {
|
||||
font-family:"bombard";
|
||||
src: url("../fonts/BOMBARD_.ttf") format("truetype"),
|
||||
url("../fonts/BOMBARD_.otf") format("opentype");
|
||||
font-weight:normal;
|
||||
font-style:normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family:"moonshiner";
|
||||
src: url("../fonts/moonshiner-round.ttf") format("truetype");
|
||||
font-weight:normal;
|
||||
font-style:normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family:"overpass";
|
||||
src: url("../fonts/Overpass-VariableFont_wght.ttf") format("truetype");
|
||||
font-weight: 100 900;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family:"Pubg Sans Regular";
|
||||
src:url("../fonts/PUBG_SANS.eot?") format("eot"),
|
||||
|
|
@ -8,24 +30,6 @@
|
|||
font-style:normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family:"Bombard";
|
||||
src:url("../fonts/bombard.woff") format("woff"),
|
||||
url("../fonts/bombard.woff") format("woff2");
|
||||
font-weight:normal;
|
||||
font-style:normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family:"Moonshiner";
|
||||
src:url("../fonts/Moonshiner.woff") format("woff"),
|
||||
url("../fonts/Moonshiner.woff") format("woff2");
|
||||
font-weight:normal;
|
||||
font-style:normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
.fade-enter-active, .fade-leave-active {
|
||||
transition: opacity 0.5s
|
||||
}
|
||||
|
|
@ -57,7 +61,7 @@
|
|||
transform: translate(-50%);
|
||||
bottom: 3vh;
|
||||
font-size: 3vh;
|
||||
font-family: 'Overpass-Reg'
|
||||
font-family: 'overpass'
|
||||
}
|
||||
|
||||
.loading-text > img {
|
||||
|
|
@ -347,7 +351,7 @@ body {
|
|||
}
|
||||
|
||||
.sel-server-button {
|
||||
font-family: 'Agency';
|
||||
font-family: 'overpass', 'Agency';
|
||||
margin-bottom: 0.8vh;
|
||||
font-size: 2vh;
|
||||
text-align: left;
|
||||
|
|
@ -384,7 +388,7 @@ body {
|
|||
|
||||
/* Custom Match Button */
|
||||
.custom-match-button {
|
||||
font-family: 'Agency', sans-serif;
|
||||
font-family: 'overpass', 'Agency', sans-serif;
|
||||
font-size: 2.2vh;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
|
|
@ -451,7 +455,7 @@ body {
|
|||
|
||||
.friends-text {
|
||||
color: #fff;
|
||||
font-family: 'Agency';
|
||||
font-family: 'overpass', 'Agency';
|
||||
font-size: 2vh;
|
||||
margin-right: 1.5vh;
|
||||
}
|
||||
|
|
@ -684,7 +688,7 @@ body {
|
|||
.receive-invite-button {
|
||||
background-color: #E3B62F;
|
||||
color: #000;
|
||||
font-family: 'Agency';
|
||||
font-family: 'overpass';
|
||||
font-weight: bold;
|
||||
font-size: 1.8vh;
|
||||
padding: 0.1vh 2vh;
|
||||
|
|
@ -695,7 +699,7 @@ body {
|
|||
align-items: center;
|
||||
position: fixed;
|
||||
bottom: 0.8vh;
|
||||
left: 13vw;
|
||||
left: 16vw;
|
||||
z-index: 101;
|
||||
}
|
||||
|
||||
|
|
@ -724,6 +728,7 @@ body {
|
|||
|
||||
|
||||
.nav-item {
|
||||
font-family: 'overpass', 'Agency';
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
cursor: pointer;
|
||||
transition: color 0.2s ease;
|
||||
|
|
@ -804,6 +809,7 @@ body {
|
|||
}
|
||||
|
||||
.player-name {
|
||||
font-family: 'overpass', 'Agency';
|
||||
font-size: 2.5vh;
|
||||
font-weight: normal;
|
||||
color: #fff;
|
||||
|
|
@ -853,30 +859,33 @@ body {
|
|||
}
|
||||
|
||||
.play-text {
|
||||
font-family: 'Bombard', 'Agency', 'PUBG Sans Regular', sans-serif;
|
||||
font-family: 'bombard', 'PUBG Sans Regular';
|
||||
color: #fff;
|
||||
font-size: 6vh;
|
||||
font-size: 7vh;
|
||||
text-transform: uppercase;
|
||||
text-shadow: 0.2em 0.2em 0.4em rgba(0, 0, 0, 0.9);
|
||||
margin-bottom: 0.8vh;
|
||||
text-shadow: 0.1em 0.1em 0.2em rgba(0, 0, 0, 0.9);
|
||||
margin-bottom: 0;
|
||||
font-weight: bold;
|
||||
letter-spacing: 5px;
|
||||
letter-spacing: -0.03em;
|
||||
line-height: 1;
|
||||
text-align: left;
|
||||
opacity: 1;
|
||||
position: relative;
|
||||
top: -0.5vh;
|
||||
animation: pulse-opacity 5s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.tips-text {
|
||||
font-family: 'Moonshiner', 'Agency', 'PUBG Sans Regular', sans-serif;
|
||||
font-size: 3.2vh;
|
||||
font-family: 'moonshiner', 'PUBG Sans Regular';
|
||||
font-size: 4vh;
|
||||
text-transform: uppercase;
|
||||
color: rgba(227, 182, 47, 1);
|
||||
text-shadow: 0.15em 0.15em 0.3em rgba(0, 0, 0, 0.9);
|
||||
letter-spacing: 0.08em;
|
||||
text-shadow: 0.1em 0.1em 0.2em rgba(0, 0, 0, 0.9);
|
||||
letter-spacing: 0.05em;
|
||||
position: relative;
|
||||
opacity: 1;
|
||||
opacity: 0.9;
|
||||
line-height: 1;
|
||||
text-align: left;
|
||||
margin-top: -0.5vh;
|
||||
}
|
||||
|
||||
/* Tips text container */
|
||||
|
|
|
|||
BIN
fonts/BOMBARD_.otf
Normal file
BIN
fonts/BOMBARD_.otf
Normal file
Binary file not shown.
BIN
fonts/BOMBARD_.ttf
Normal file
BIN
fonts/BOMBARD_.ttf
Normal file
Binary file not shown.
BIN
fonts/Moonshiner-Round.ttf
Normal file
BIN
fonts/Moonshiner-Round.ttf
Normal file
Binary file not shown.
BIN
fonts/Overpass-VariableFont_wght.ttf
Normal file
BIN
fonts/Overpass-VariableFont_wght.ttf
Normal file
Binary file not shown.
BIN
icons/twitch lookin.png
Normal file
BIN
icons/twitch lookin.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
319
index.html
319
index.html
|
|
@ -39,6 +39,95 @@
|
|||
<p class="serial-text">Early Access v2.6.30.4</p>
|
||||
<!-- 底部文字结束 -->
|
||||
|
||||
<!-- Tab Content Area -->
|
||||
<div v-if="activeTab === 'home'">
|
||||
<!-- Friends Bar -->
|
||||
<div class="friends-bar" @click="toggleFriendsList">
|
||||
<img src="icons/Friend.png" class="friends-icon" alt="Friends">
|
||||
<span class="friends-text">OG:BG Friends 3 / 4</span>
|
||||
</div>
|
||||
|
||||
<!-- Friends List Dropdown -->
|
||||
<div class="friends-list-container" :class="{'show': showFriendsList}">
|
||||
<div class="friends-list-header">
|
||||
<span>OG:BG Friends</span>
|
||||
<button class="refresh-button">Refresh</button>
|
||||
</div>
|
||||
<div class="friends-list">
|
||||
<div class="friend-item" v-for="friend in friendsList" :key="friend.name" @click="selectFriend(friend)" :class="{'selected': selectedFriend && selectedFriend.name === friend.name}">
|
||||
<img :src="friend.avatar" class="friend-avatar" alt="Avatar">
|
||||
<div class="friend-info">
|
||||
<div class="friend-name">{{ friend.name }}</div>
|
||||
<div class="friend-status" :class="friend.status">{{ friend.status }}</div>
|
||||
</div>
|
||||
<button class="invite-button" v-if="friend.status === 'online'">INVITE</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Friend Action Dropdown -->
|
||||
<div class="friend-action-dropdown" v-if="selectedFriend" :class="{'show': showFriendActions}">
|
||||
<button class="friend-action-button view-button" @click="viewFriendProfile">VIEW PROFILE</button>
|
||||
<button class="friend-action-button invite-button" @click="inviteFriend" v-if="selectedFriend.status === 'online'">INVITE</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Receive Invite Button -->
|
||||
<button class="receive-invite-button" @click="toggleTickMark">
|
||||
<img v-if="tickMarkEnabled" src="icons/Tick_mark_true.png" class="tick-mark" alt="Online">
|
||||
<img v-else src="icons/Tick_mark_false.png" class="tick-mark" alt="Offline">
|
||||
RECEIVE INVITE
|
||||
</button>
|
||||
<!-- 选择框、开始按钮板块 -->
|
||||
<div class="game-play-container-top-left">
|
||||
<div class="button-container">
|
||||
<div class="multi-layer-button bro-loading"
|
||||
id="join"
|
||||
:class="{'active-hover': showServerDropdown, 'bro-loading': isLoading}"
|
||||
@mouseenter="showServerDropdown = true"
|
||||
@mouseleave="showServerDropdown = false"
|
||||
@click="joinServer">
|
||||
<img src="images/1.png" alt="Button Layer 1" class="button-layer layer-1">
|
||||
<img src="images/2.png" alt="Button Layer 2" class="button-layer layer-2">
|
||||
<img src="images/3.png" alt="Button Layer 3" class="button-layer layer-3">
|
||||
<!-- PUBG Title on Button -->
|
||||
<div class="pubg-title-on-button">
|
||||
<div class="play-text">PLAY</div>
|
||||
<div class="tips-text-container">
|
||||
<div class="tips-text default-text">BATTLEGROUNDS</div>
|
||||
<div class="tips-text hover-text">CLICK TO PLAY</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="join-server-container" id="server-dropdown" :class="{'show': showServerDropdown}" @mouseenter="showServerDropdown = true" @mouseleave="showServerDropdown = false">
|
||||
<div class="dropdown-section">
|
||||
<div class="dropdown-header">REGION</div>
|
||||
<button v-for="server in serverList"
|
||||
v-bind:class="{'sel-server-button': true, 'active': server.name === currentServer.name}"
|
||||
:id="server.name"
|
||||
v-on:click="selectServer(server)">
|
||||
<img class="checkmark" v-if="server.name === currentServer.name" src="icons/Tick_mark_true.png" alt="Selected">
|
||||
{{ server.name }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="dropdown-section">
|
||||
<div class="dropdown-header">TEAM</div>
|
||||
<button v-for="team in teamList"
|
||||
v-bind:class="{'sel-server-button': true, 'active': team === currentTeam}"
|
||||
:id="team"
|
||||
v-on:click="selectTeam(team)">
|
||||
<img class="checkmark" v-if="team === currentTeam" src="icons/Tick_mark_true.png" alt="Selected">
|
||||
{{ team }}
|
||||
</button>
|
||||
</div>
|
||||
<button class="custom-match-button" @click="joinCustomMatch">
|
||||
CUSTOM MATCH
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="activeTab === 'character'" class="tab-content">
|
||||
<!-- Friends Bar -->
|
||||
<div class="friends-bar" @click="toggleFriendsList">
|
||||
<img src="icons/Friend.png" class="friends-icon" alt="Friends">
|
||||
|
|
@ -76,7 +165,7 @@
|
|||
RECEIVE INVITE
|
||||
</button>
|
||||
|
||||
<!-- 选择框、开始按钮板块 -->
|
||||
<!-- 选择框、开始按钮板块 -->
|
||||
<div class="game-play-container-top-left">
|
||||
<div class="button-container">
|
||||
<div class="multi-layer-button bro-loading"
|
||||
|
|
@ -92,8 +181,8 @@
|
|||
<div class="pubg-title-on-button">
|
||||
<div class="play-text">PLAY</div>
|
||||
<div class="tips-text-container">
|
||||
<div class="tips-text default-text">CLICK TO PLAY</div>
|
||||
<div class="tips-text hover-text">CHOOSE YOUR REGION</div>
|
||||
<div class="tips-text default-text">BATTLEGROUNDS</div>
|
||||
<div class="tips-text hover-text">CLICK TO PLAY</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -124,6 +213,196 @@
|
|||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="character-tab">
|
||||
<h2>Character Management</h2>
|
||||
<p>Character settings and customization options would go here.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="activeTab === 'rewards'" class="tab-content">
|
||||
<!-- Friends Bar -->
|
||||
<div class="friends-bar" @click="toggleFriendsList">
|
||||
<img src="icons/Friend.png" class="friends-icon" alt="Friends">
|
||||
<span class="friends-text">OG:BG Friends 3 / 4</span>
|
||||
</div>
|
||||
|
||||
<!-- Friends List Dropdown -->
|
||||
<div class="friends-list-container" :class="{'show': showFriendsList}">
|
||||
<div class="friends-list-header">
|
||||
<span>OG:BG Friends</span>
|
||||
<button class="refresh-button">Refresh</button>
|
||||
</div>
|
||||
<div class="friends-list">
|
||||
<div class="friend-item" v-for="friend in friendsList" :key="friend.name" @click="selectFriend(friend)" :class="{'selected': selectedFriend && selectedFriend.name === friend.name}">
|
||||
<img :src="friend.avatar" class="friend-avatar" alt="Avatar">
|
||||
<div class="friend-info">
|
||||
<div class="friend-name">{{ friend.name }}</div>
|
||||
<div class="friend-status" :class="friend.status">{{ friend.status }}</div>
|
||||
</div>
|
||||
<button class="invite-button" v-if="friend.status === 'online'">INVITE</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Friend Action Dropdown -->
|
||||
<div class="friend-action-dropdown" v-if="selectedFriend" :class="{'show': showFriendActions}">
|
||||
<button class="friend-action-button view-button" @click="viewFriendProfile">VIEW PROFILE</button>
|
||||
<button class="friend-action-button invite-button" @click="inviteFriend" v-if="selectedFriend.status === 'online'">INVITE</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Receive Invite Button -->
|
||||
<button class="receive-invite-button" @click="toggleTickMark">
|
||||
<img v-if="tickMarkEnabled" src="icons/Tick_mark_true.png" class="tick-mark" alt="Online">
|
||||
<img v-else src="icons/Tick_mark_false.png" class="tick-mark" alt="Offline">
|
||||
RECEIVE INVITE
|
||||
</button>
|
||||
|
||||
<!-- 选择框、开始按钮板块 -->
|
||||
<div class="game-play-container-top-left">
|
||||
<div class="button-container">
|
||||
<div class="multi-layer-button bro-loading"
|
||||
id="join"
|
||||
:class="{'active-hover': showServerDropdown, 'bro-loading': isLoading}"
|
||||
@mouseenter="showServerDropdown = true"
|
||||
@mouseleave="showServerDropdown = false"
|
||||
@click="joinServer">
|
||||
<img src="images/1.png" alt="Button Layer 1" class="button-layer layer-1">
|
||||
<img src="images/2.png" alt="Button Layer 2" class="button-layer layer-2">
|
||||
<img src="images/3.png" alt="Button Layer 3" class="button-layer layer-3">
|
||||
<!-- PUBG Title on Button -->
|
||||
<div class="pubg-title-on-button">
|
||||
<div class="play-text">PLAY</div>
|
||||
<div class="tips-text-container">
|
||||
<div class="tips-text default-text">BATTLEGROUNDS</div>
|
||||
<div class="tips-text hover-text">CLICK TO PLAY</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="join-server-container" id="server-dropdown" :class="{'show': showServerDropdown}" @mouseenter="showServerDropdown = true" @mouseleave="showServerDropdown = false">
|
||||
<div class="dropdown-section">
|
||||
<div class="dropdown-header">REGION</div>
|
||||
<button v-for="server in serverList"
|
||||
v-bind:class="{'sel-server-button': true, 'active': server.name === currentServer.name}"
|
||||
:id="server.name"
|
||||
v-on:click="selectServer(server)">
|
||||
<img class="checkmark" v-if="server.name === currentServer.name" src="icons/Tick_mark_true.png" alt="Selected">
|
||||
{{ server.name }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="dropdown-section">
|
||||
<div class="dropdown-header">TEAM</div>
|
||||
<button v-for="team in teamList"
|
||||
v-bind:class="{'sel-server-button': true, 'active': team === currentTeam}"
|
||||
:id="team"
|
||||
v-on:click="selectTeam(team)">
|
||||
<img class="checkmark" v-if="team === currentTeam" src="icons/Tick_mark_true.png" alt="Selected">
|
||||
{{ team }}
|
||||
</button>
|
||||
</div>
|
||||
<button class="custom-match-button" @click="joinCustomMatch">
|
||||
CUSTOM MATCH
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rewards-tab">
|
||||
<h2>Rewards & Achievements</h2>
|
||||
<p>Your rewards and achievements would be displayed here.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="activeTab === 'statistics'" class="tab-content">
|
||||
<!-- Friends Bar -->
|
||||
<div class="friends-bar" @click="toggleFriendsList">
|
||||
<img src="icons/Friend.png" class="friends-icon" alt="Friends">
|
||||
<span class="friends-text">OG:BG Friends 3 / 4</span>
|
||||
</div>
|
||||
|
||||
<!-- Friends List Dropdown -->
|
||||
<div class="friends-list-container" :class="{'show': showFriendsList}">
|
||||
<div class="friends-list-header">
|
||||
<span>OG:BG Friends</span>
|
||||
<button class="refresh-button">Refresh</button>
|
||||
</div>
|
||||
<div class="friends-list">
|
||||
<div class="friend-item" v-for="friend in friendsList" :key="friend.name" @click="selectFriend(friend)" :class="{'selected': selectedFriend && selectedFriend.name === friend.name}">
|
||||
<img :src="friend.avatar" class="friend-avatar" alt="Avatar">
|
||||
<div class="friend-info">
|
||||
<div class="friend-name">{{ friend.name }}</div>
|
||||
<div class="friend-status" :class="friend.status">{{ friend.status }}</div>
|
||||
</div>
|
||||
<button class="invite-button" v-if="friend.status === 'online'">INVITE</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Friend Action Dropdown -->
|
||||
<div class="friend-action-dropdown" v-if="selectedFriend" :class="{'show': showFriendActions}">
|
||||
<button class="friend-action-button view-button" @click="viewFriendProfile">VIEW PROFILE</button>
|
||||
<button class="friend-action-button invite-button" @click="inviteFriend" v-if="selectedFriend.status === 'online'">INVITE</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Receive Invite Button -->
|
||||
<button class="receive-invite-button" @click="toggleTickMark">
|
||||
<img v-if="tickMarkEnabled" src="icons/Tick_mark_true.png" class="tick-mark" alt="Online">
|
||||
<img v-else src="icons/Tick_mark_false.png" class="tick-mark" alt="Offline">
|
||||
RECEIVE INVITE
|
||||
</button>
|
||||
|
||||
<!-- 选择框、开始按钮板块 -->
|
||||
<div class="game-play-container-top-left">
|
||||
<div class="button-container">
|
||||
<div class="multi-layer-button bro-loading"
|
||||
id="join"
|
||||
:class="{'active-hover': showServerDropdown, 'bro-loading': isLoading}"
|
||||
@mouseenter="showServerDropdown = true"
|
||||
@mouseleave="showServerDropdown = false"
|
||||
@click="joinServer">
|
||||
<img src="images/1.png" alt="Button Layer 1" class="button-layer layer-1">
|
||||
<img src="images/2.png" alt="Button Layer 2" class="button-layer layer-2">
|
||||
<img src="images/3.png" alt="Button Layer 3" class="button-layer layer-3">
|
||||
<!-- PUBG Title on Button -->
|
||||
<div class="pubg-title-on-button">
|
||||
<div class="play-text">PLAY</div>
|
||||
<div class="tips-text-container">
|
||||
<div class="tips-text default-text">BATTLEGROUNDS</div>
|
||||
<div class="tips-text hover-text">CLICK TO PLAY</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="join-server-container" id="server-dropdown" :class="{'show': showServerDropdown}" @mouseenter="showServerDropdown = true" @mouseleave="showServerDropdown = false">
|
||||
<div class="dropdown-section">
|
||||
<div class="dropdown-header">REGION</div>
|
||||
<button v-for="server in serverList"
|
||||
v-bind:class="{'sel-server-button': true, 'active': server.name === currentServer.name}"
|
||||
:id="server.name"
|
||||
v-on:click="selectServer(server)">
|
||||
<img class="checkmark" v-if="server.name === currentServer.name" src="icons/Tick_mark_true.png" alt="Selected">
|
||||
{{ server.name }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="dropdown-section">
|
||||
<div class="dropdown-header">TEAM</div>
|
||||
<button v-for="team in teamList"
|
||||
v-bind:class="{'sel-server-button': true, 'active': team === currentTeam}"
|
||||
:id="team"
|
||||
v-on:click="selectTeam(team)">
|
||||
<img class="checkmark" v-if="team === currentTeam" src="icons/Tick_mark_true.png" alt="Selected">
|
||||
{{ team }}
|
||||
</button>
|
||||
</div>
|
||||
<button class="custom-match-button" @click="joinCustomMatch">
|
||||
CUSTOM MATCH
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="statistics-tab">
|
||||
<h2>Statistics</h2>
|
||||
<p>Your game statistics would be displayed here.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 服务器玩家数量 -->
|
||||
|
||||
<!-- 右上角区域 -->
|
||||
|
|
@ -132,10 +411,10 @@
|
|||
<div class="top-right-controls">
|
||||
<!-- 顶部导航栏 -->
|
||||
<div class="top-navigation">
|
||||
<div class="nav-item active">HOME</div>
|
||||
<div class="nav-item">CHARACTER</div>
|
||||
<div class="nav-item">REWARDS</div>
|
||||
<div class="nav-item">STATISTICS</div>
|
||||
<div class="nav-item" :class="{ 'active': activeTab === 'home' }" @click="changeTab('home')">HOME</div>
|
||||
<div class="nav-item" :class="{ 'active': activeTab === 'character' }" @click="changeTab('character')">CHARACTER</div>
|
||||
<div class="nav-item" :class="{ 'active': activeTab === 'rewards' }" @click="changeTab('rewards')">REWARDS</div>
|
||||
<div class="nav-item" :class="{ 'active': activeTab === 'statistics' }" @click="changeTab('statistics')">STATISTICS</div>
|
||||
</div>
|
||||
|
||||
<!-- 系统按钮占位符 -->
|
||||
|
|
@ -152,13 +431,13 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 公告区域 -->
|
||||
<!-- 公告区域
|
||||
<div class="announcement-area">
|
||||
<div class="announcement-icon">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9M13.73 21a2 2 0 0 1-3.46 0" stroke="#E3B62F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<circle cx="12" cy="14" r="3" stroke="#E3B62F" stroke-width="2"/>
|
||||
<circle cx="12" cy="12" r="10" stroke="#E3B62F" stroke-width="2"/>
|
||||
<line x1="12" y1="8" x2="12" y2="14" stroke="#E3B62F" stroke-width="2" stroke-linecap="round"/>
|
||||
<circle cx="12" cy="17" r="1" fill="#E3B62F"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="announcement-text">
|
||||
|
|
@ -166,14 +445,13 @@
|
|||
<div class="announcement-link" onclick="joinDiscord()">interact with the community</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 第二个公告区域 -->
|
||||
<!-- 第二个公告区域
|
||||
<div class="announcement-area">
|
||||
<div class="announcement-icon">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="3" y="4" width="18" height="18" rx="2" ry="2" stroke="#E3B62F" stroke-width="2"/>
|
||||
<line x1="16" y1="2" x2="16" y2="6" stroke="#E3B62F" stroke-width="2" stroke-linecap="round"/>
|
||||
<line x1="8" y1="2" x2="8" y2="6" stroke="#E3B62F" stroke-width="2" stroke-linecap="round"/>
|
||||
<line x1="3" y1="10" x2="21" y2="10" stroke="#E3B62F" stroke-width="2" stroke-linecap="round"/>
|
||||
<circle cx="12" cy="12" r="10" stroke="#E3B62F" stroke-width="2"/>
|
||||
<line x1="12" y1="8" x2="12" y2="14" stroke="#E3B62F" stroke-width="2" stroke-linecap="round"/>
|
||||
<circle cx="12" cy="17" r="1" fill="#E3B62F"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="announcement-text">
|
||||
|
|
@ -181,7 +459,8 @@
|
|||
<div class="announcement-link" onclick="joinTelegram()">interact with the community</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>-->
|
||||
|
||||
</div> <!-- closes id="app" -->
|
||||
<script src="js/jquery-2.2.0.min.js"></script>
|
||||
<script src="js/jquery-ui-1.11.4.min.js"></script>
|
||||
|
|
@ -254,7 +533,8 @@
|
|||
{ name: "Land", avatar: "images/avatar/land.jpg", status: "online" },
|
||||
],
|
||||
selectedFriend: null,
|
||||
showFriendActions: false
|
||||
showFriendActions: false,
|
||||
activeTab: 'home'
|
||||
},
|
||||
methods: {
|
||||
selectServer: function(server) {
|
||||
|
|
@ -278,6 +558,9 @@
|
|||
toggleTickMark: function() {
|
||||
this.tickMarkEnabled = !this.tickMarkEnabled;
|
||||
},
|
||||
changeTab: function(tabName) {
|
||||
this.activeTab = tabName;
|
||||
},
|
||||
joinCustomMatch: function() {
|
||||
try {
|
||||
this.isLoading = true;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue