Среда, 22 апреля 2020 г.
Создание промокодов в RageMP сервер
Урок по разработки функционала промокодов на сервере RAGE MP в GTA 5. Это первая часть урока, где показывается верстка формы добавления и просмотра промокодов.
Добрый день, сегодня будем создавать промокоды в RageMP. Должно получиться у нас такое:
Первым делом верстаем шаблон на vue:
В router.js добавляем
import Promo from "./views/Promo/Promos";
Vue.use(VueRouter);
let router = new VueRouter({
mode: "history",
routes: [
{ path: "/promo", component: Promo },
],
});
export default router;
У меня есть другие страницы, поэтому выглядит так:
Верстаем
<template>
<div class="promos-container" id="app">
<div class="promos">
<div class="promo">
<div class="promo-element">
<div class="promo-element-container">
<a href="#" class="close"></a>
<div class="promo-element-title title">Управление промокодами</div>
<ul class="nav nav-tabs nav-justified">
<li class="nav-item">
<a
class="nav-link"
@click.prevent="setActive('codes')"
:class="{ active: isActive('codes') }"
href="#codes"
>Промокоды</a>
</li>
<li class="nav-item">
<a
class="nav-link"
@click.prevent="setActive('addnew')"
:class="{ active: isActive('addnew') }"
href="#addnew"
>Добавить новый</a>
</li>
</ul>
<div class="tab-content py-3" id="myTabContent">
<div class="tab-pane fade" :class="{ 'active show': isActive('codes') }" id="codes">
<div class="podtexter">
<table class="tg" width="100%">
<tr>
<th class="tg-header">Название промокода</th>
<th class="tg-header">Создатель промокода</th>
</tr>
<tr>
<td class="tg-0lax">#test</td>
<td class="tg-0lax">Full Name</td>
</tr>
<tr>
<td class="tg-0lax">#test</td>
<td class="tg-0lax">Full Name</td>
</tr>
<tr>
<td class="tg-0lax">#test</td>
<td class="tg-0lax">Full Name</td>
</tr>
<tr>
<td class="tg-0lax">#test</td>
<td class="tg-0lax">Full Name</td>
</tr>
<tr>
<td class="tg-0lax">#test</td>
<td class="tg-0lax">Full Name</td>
</tr>
</table>
</div>
</div>
<div class="tab-pane fade" :class="{ 'active show': isActive('addnew') }" id="addnew">
<div class="addpromocode">
<label for="name">Название промокода</label>
<input type="text" id="name" class="form-control" />
<br />
<label for="money">Деньги</label>
<input type="text" id="money" class="form-control" />
<br />
<label for="exp">Exp</label>
<input type="text" id="exp" class="form-control" />
<br />
<div class="md-form">
<div class="left-block w50">
<label for="premium">Премиум</label>
<input type="text" id="premium" class="form-control" />
</div>
<div class="right-block w50">
<label for="premium">Срок Премиум</label>
<input type="text" id="srokpremium" class="form-control" />
</div>
</div>
<br />
<div class="footer-button">
<a class="first-promo-element" href="#">Добавить</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
created() {
document.body.classList.add("promoback");
},
destroyed() {
document.body.classList.remove("promoback");
},
data() {
return { activeItem: "codes" };
},
methods: {
isActive(menuItem) {
return this.activeItem === menuItem;
},
setActive(menuItem) {
this.activeItem = menuItem;
}
}
};
</script>
<style>
.promoback {
background-image: url(../../assets/2.jpg);
}
</style>
<style scoped>
.first-promo-element {
border-radius: 100px;
padding: 15px 50px;
position: relative;
margin: 0 auto;
color: white;
font-size: 14px;
text-decoration: unset;
background: linear-gradient(90deg, #9e1c1b 0%, #ca302e 100%);
box-shadow: 0px 8px 35px rgba(0, 0, 0, 0.65);
border-radius: 100px;
}
.promo-element-title {
padding: 20px 0;
font-size: 25px;
text-align: center;
}
.promo-element-title:after {
content: "";
width: 24px;
height: 2px;
background: radial-gradient(50% 50% at 50% 50%, #d03231 0%, #981919 100%);
display: block;
margin: 15px auto;
}
.promos-container {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 1;
opacity: 0.9;
}
</style>
<style lang="scss" scoped>
.promo-element {
background: #080808;
border: 1px solid #000000;
border-radius: 12px;
color: #fff;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
&-container {
z-index: 2;
padding-top: 15px;
}
&-title {
margin-left: 10px;
}
}
.podtexter {
font-size: 19px;
margin-bottom: 20px;
text-align: left;
padding: 35px;
}
.promos {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 40px;
.promo {
width: 1000px;
margin-right: 15px;
&-last {
margin-right: 0;
}
&-bottom {
margin-top: 25px;
height: 245px;
}
}
}
.tg {
border-collapse: collapse;
border-spacing: 0;
}
.tg td {
padding: 10px 25px;
border-style: solid;
border-width: 1px;
overflow: hidden;
word-break: normal;
border-color: rgb(255, 255, 255);
}
.tg th {
font-weight: normal;
padding: 10px 5px;
border-style: solid;
border-width: 1px;
overflow: hidden;
word-break: normal;
text-align: center;
border-color: rgb(255, 255, 255);
}
.tg .tg-0lax {
text-align: left;
vertical-align: top;
}
.close {
position: absolute;
right: 22px;
top: 22px;
width: 32px;
height: 32px;
opacity: 0.3;
}
.close:hover {
opacity: 1;
}
.close:before,
.close:after {
position: absolute;
left: 15px;
content: " ";
height: 33px;
width: 2px;
background-color: rgb(255, 255, 255);
}
.close:before {
transform: rotate(45deg);
}
.close:after {
transform: rotate(-45deg);
}
.tab-pane {
display: none;
}
.show {
display: block;
}
ul li {
list-style: none;
}
.nav {
display: flex;
justify-content: space-evenly;
}
.nav-link {
color: #fff;
text-decoration: unset;
border: 1px;
border-style: solid;
padding: 15px 25px;
}
.form-control {
display: block;
width: 40%;
height: calc(1.5em + 0.75rem + 2px);
padding: 0.375rem 0.75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: 0.25rem;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
label {
display: inline-block;
margin-bottom: 0.5rem;
}
.addpromocode {
padding: 25px;
}
.md-form {
display: flex;
align-content: space-between;
padding-bottom: 20px;
}
.w50 {
width: 50%;
}
.md-form .form-control {
width: 90%;
}
.footer-button {
margin: 0 auto;
width: 200px;
padding-bottom: 20px;
}
</style>
Краткое видео урока можете посмотреть ниже: