mirror of
https://github.com/Dadechin/XRoomDashboardFront.git
synced 2025-07-05 17:54:34 +00:00
Compare commits
No commits in common. "08906e48b465c298e784ef5558e6355e2954d4ed" and "a042a56a6722c011d4746a55c172b4927d2b7fef" have entirely different histories.
08906e48b4
...
a042a56a67
|
|
@ -102,6 +102,8 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import axios from 'axios';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'AddUserModal',
|
name: 'AddUserModal',
|
||||||
props: {
|
props: {
|
||||||
|
|
@ -138,9 +140,33 @@ export default {
|
||||||
if (!this.newUser.first_name || !this.newUser.last_name || !this.newUser.mobile_number || !this.newUser.password || !this.newUser.semat) {
|
if (!this.newUser.first_name || !this.newUser.last_name || !this.newUser.mobile_number || !this.newUser.password || !this.newUser.semat) {
|
||||||
alert('لطفاً تمام فیلدها را پر کنید.');
|
alert('لطفاً تمام فیلدها را پر کنید.');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
this.$emit('add-user', { ...this.newUser });
|
|
||||||
this.close();
|
const token = localStorage.getItem('token');
|
||||||
|
const userData = {
|
||||||
|
mobile_number: this.newUser.mobile_number,
|
||||||
|
first_name: this.newUser.first_name,
|
||||||
|
last_name: this.newUser.last_name,
|
||||||
|
semat: this.newUser.semat,
|
||||||
|
password: this.newUser.password,
|
||||||
|
isAdmin: this.newUser.isAdmin ? 'true' : 'false', // Sending as string "true" or "false"
|
||||||
|
};
|
||||||
|
|
||||||
|
axios.post('http://my.xroomapp.com:8000/add_teamMember', userData, {
|
||||||
|
headers: {
|
||||||
|
Authorization: `Token ${token}`,
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
})
|
||||||
|
.then((response) => {
|
||||||
|
console.log('کاربر جدید:', response.data);
|
||||||
|
alert('کاربر با موفقیت اضافه شد');
|
||||||
|
this.close();
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
console.error('Error adding user:', error);
|
||||||
|
alert('خطا در افزودن کاربر');
|
||||||
|
});
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -1,281 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="buy-subscription-container">
|
|
||||||
<div class="subscription-title">
|
|
||||||
<h3 style="text-align: center; margin-bottom: 20px;">
|
|
||||||
لطفا نوع اشتراک خود را انتخاب کنید
|
|
||||||
</h3>
|
|
||||||
<span>
|
|
||||||
ما مدل مجوزدهی انعطاف‌پذیری ارائه می‌دهد. شما می‌توانید به‌صورت ماهانه و به ازای هر کاربر پرداخت کنید. تعداد کاربران را می‌توان فوراً افزایش داد، اما در صورت کاهش مجوزها، تغییرات در پایان دوره‌ی صورتحساب اعمال خواهند شد.
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="user-count" style="text-align: start; margin: 3rem 0 2rem 0;">
|
|
||||||
<label for="memberCount" style="margin-left: 10px;">تعداد کاربران : </label>
|
|
||||||
<select
|
|
||||||
id="memberCount"
|
|
||||||
:value="memberCount"
|
|
||||||
@change="updateMemberCount($event)">
|
|
||||||
<option v-for="count in availableMemberOptions" :key="count" :value="count">
|
|
||||||
{{ count }} کاربر
|
|
||||||
</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div style="display: flex; justify-content: space-between; flex-wrap: wrap;">
|
|
||||||
<div class="plan-card">
|
|
||||||
<div class="card-inner">
|
|
||||||
<h4>هفتگی</h4>
|
|
||||||
<div class="card-price-title">
|
|
||||||
<p>{{ (plans.weekly.price * memberCount).toLocaleString() }} تومان</p>
|
|
||||||
<small>برای {{ memberCount }} کاربر، در هفته</small>
|
|
||||||
</div>
|
|
||||||
<button class="primary-button" @click="selectPlan('weekly')">
|
|
||||||
انتخاب طرح اشتراک
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="plan-card">
|
|
||||||
<div class="card-inner">
|
|
||||||
<h4>ماهانه</h4>
|
|
||||||
<div class="card-price-title">
|
|
||||||
<p>{{ (plans.monthly.price * memberCount).toLocaleString() }} تومان</p>
|
|
||||||
<small>برای {{ memberCount }} کاربر، در ماه</small>
|
|
||||||
</div>
|
|
||||||
<button class="primary-button" @click="selectPlan('monthly')">
|
|
||||||
انتخاب طرح اشتراک
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="plan-card">
|
|
||||||
<div class="card-inner">
|
|
||||||
<h4>سالانه</h4>
|
|
||||||
<div class="card-price-title">
|
|
||||||
<p>{{ (plans.yearly.price * memberCount).toLocaleString() }} تومان</p>
|
|
||||||
<small>برای {{ memberCount }} کاربر، در سال</small>
|
|
||||||
</div>
|
|
||||||
<button class="primary-button" @click="selectPlan('yearly')">
|
|
||||||
انتخاب طرح اشتراک
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- فاکتور -->
|
|
||||||
<div
|
|
||||||
v-if="selectedPlan"
|
|
||||||
class="invoice-box"
|
|
||||||
style="margin-top: 40px; background: white; padding: 20px; border-radius: 12px; max-width: 400px; margin-right: auto; margin-left: auto;"
|
|
||||||
>
|
|
||||||
<h4 style="margin-bottom: 16px;">پیش‌فاکتور اشتراک {{ selectedPlan.name }}</h4>
|
|
||||||
<div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
|
|
||||||
<span>قیمت پایه:</span>
|
|
||||||
<span>{{ selectedPlan.basePrice.toLocaleString() }} تومان</span>
|
|
||||||
</div>
|
|
||||||
<div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
|
|
||||||
<span>مالیات (۹٪):</span>
|
|
||||||
<span>{{ selectedPlan.tax.toLocaleString() }} تومان</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style="display: flex; justify-content: space-between; font-weight: bold; font-size: 16px; margin-bottom: 20px;"
|
|
||||||
>
|
|
||||||
<span>مبلغ قابل پرداخت:</span>
|
|
||||||
<span>{{ selectedPlan.total.toLocaleString() }} تومان</span>
|
|
||||||
</div>
|
|
||||||
<button class="primary-button" style="width: 100%;" @click="pay">
|
|
||||||
پرداخت
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import axios from 'axios';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'BuySubscription',
|
|
||||||
props: {
|
|
||||||
memberCount: {
|
|
||||||
type: Number,
|
|
||||||
default: 5,
|
|
||||||
},
|
|
||||||
availableMemberOptions: {
|
|
||||||
type: Array,
|
|
||||||
default: () => [5, 10, 20, 100],
|
|
||||||
},
|
|
||||||
baseUrl: {
|
|
||||||
type: String,
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
selectedPlan: null,
|
|
||||||
plans: {
|
|
||||||
weekly: { name: 'هفتگی', price: 250000 },
|
|
||||||
monthly: { name: 'ماهانه', price: 670000 },
|
|
||||||
yearly: { name: 'سالانه', price: 4600000 },
|
|
||||||
},
|
|
||||||
};
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
updateMemberCount(event) {
|
|
||||||
const newCount = Number(event.target.value);
|
|
||||||
this.$emit('update:memberCount', newCount);
|
|
||||||
if (this.selectedPlan) {
|
|
||||||
this.selectPlan(
|
|
||||||
this.selectedPlan.name === 'هفتگی' ? 'weekly' : this.selectedPlan.name === 'ماهانه' ? 'monthly' : 'yearly'
|
|
||||||
);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
selectPlan(planKey) {
|
|
||||||
const plan = this.plans[planKey];
|
|
||||||
if (!plan) return;
|
|
||||||
|
|
||||||
const base = plan.price * this.memberCount;
|
|
||||||
const tax = Math.round(base * 0.09);
|
|
||||||
|
|
||||||
this.selectedPlan = {
|
|
||||||
...plan,
|
|
||||||
basePrice: base,
|
|
||||||
tax,
|
|
||||||
total: base + tax,
|
|
||||||
};
|
|
||||||
this.$emit('plan-selected', this.selectedPlan);
|
|
||||||
},
|
|
||||||
async pay() {
|
|
||||||
if (!this.selectedPlan) {
|
|
||||||
alert('لطفاً ابتدا یک طرح اشتراک انتخاب کنید.');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
const startTime = new Date().toISOString();
|
|
||||||
let endTime;
|
|
||||||
if (this.selectedPlan.name === 'هفتگی') {
|
|
||||||
endTime = new Date(new Date().getTime() + 7 * 24 * 60 * 60 * 1000).toISOString();
|
|
||||||
} else if (this.selectedPlan.name === 'ماهانه') {
|
|
||||||
endTime = new Date(new Date().getTime() + 30 * 24 * 60 * 60 * 1000).toISOString();
|
|
||||||
} else if (this.selectedPlan.name === 'سالانه') {
|
|
||||||
endTime = new Date(new Date().getTime() + 365 * 24 * 60 * 60 * 1000).toISOString();
|
|
||||||
}
|
|
||||||
|
|
||||||
const subscriptionData = {
|
|
||||||
user_count: this.memberCount,
|
|
||||||
license_number: `ABC-${Math.random().toString(36).substr(2, 6).toUpperCase()}-XYZ`,
|
|
||||||
startTime: startTime,
|
|
||||||
endTime: endTime,
|
|
||||||
price: this.selectedPlan.total,
|
|
||||||
};
|
|
||||||
|
|
||||||
const token = localStorage.getItem('token');
|
|
||||||
await axios.post(`${this.baseUrl}/add_subscription/`, subscriptionData, {
|
|
||||||
headers: {
|
|
||||||
Authorization: `Token ${token}`,
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
alert(`پرداخت با موفقیت انجام شد برای ${this.memberCount} کاربر`);
|
|
||||||
this.selectedPlan = null;
|
|
||||||
this.$emit('payment-success');
|
|
||||||
} catch (error) {
|
|
||||||
console.error('خطا در ارسال اطلاعات اشتراک:', error);
|
|
||||||
alert('خطا در ثبت اشتراک. لطفاً دوباره تلاش کنید.');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.buy-subscription-container {
|
|
||||||
direction: rtl;
|
|
||||||
font-family: IRANSansXFaNum, sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
.plan-card {
|
|
||||||
background-color: white;
|
|
||||||
border-radius: 16px;
|
|
||||||
padding: 1px 1px 2px 1px;
|
|
||||||
width: 32%;
|
|
||||||
text-align: center;
|
|
||||||
height: 25rem;
|
|
||||||
background: linear-gradient(to right, #001940, #4364F7);
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-inner {
|
|
||||||
background-color: white;
|
|
||||||
border-radius: 14px;
|
|
||||||
height: 100%;
|
|
||||||
padding: 18px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding-top: 4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.plan-card h4 {
|
|
||||||
font-size: 25px;
|
|
||||||
color: #101010;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.primary-button {
|
|
||||||
background-color: #3a57e8;
|
|
||||||
color: white;
|
|
||||||
border: none;
|
|
||||||
padding: 12px 24px;
|
|
||||||
font-size: 14px;
|
|
||||||
border-radius: 10px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.primary-button:hover {
|
|
||||||
background-color: #2e45c8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.subscription-title {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.subscription-title h3 {
|
|
||||||
color: #101010;
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.subscription-title span {
|
|
||||||
color: #4F5A69;
|
|
||||||
line-height: 190%;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-count select {
|
|
||||||
padding: 8px 12px;
|
|
||||||
border-radius: 8px;
|
|
||||||
border-left: 16px solid transparent !important;
|
|
||||||
box-shadow: #00000029 0px 1px 4px 0px;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-count select:focus {
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-price-title p{
|
|
||||||
color: #101010;
|
|
||||||
font-size: 20px;
|
|
||||||
line-height: 140%;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-price-title small {
|
|
||||||
color: #8D99AB;
|
|
||||||
font-size: 17px;
|
|
||||||
line-height: 140%;
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,5 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<header class="header-container">
|
<header class="header-container">
|
||||||
|
<img class="line" src="https://c.animaapp.com/m9nvumalUMfQbN/img/line-1.svg" />
|
||||||
<div class="welcome-container">
|
<div class="welcome-container">
|
||||||
<p class="welcome-message">{{ pageTitle }} </p>
|
<p class="welcome-message">{{ pageTitle }} </p>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -9,11 +10,7 @@
|
||||||
<img class="user-avatar" :src="profileIcon" />
|
<img class="user-avatar" :src="profileIcon" />
|
||||||
</div>
|
</div>
|
||||||
<div class="user-name">{{ fullName }}</div>
|
<div class="user-name">{{ fullName }}</div>
|
||||||
<span>
|
<img class="user-icon" src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-10.svg" />
|
||||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M7.19922 10L11.9992 14L16.7992 10" stroke="#8D99AB" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<!-- Dropdown positioned relative to user-info-container -->
|
<!-- Dropdown positioned relative to user-info-container -->
|
||||||
<div v-if="showDropdown" class="dropdown-menu">
|
<div v-if="showDropdown" class="dropdown-menu">
|
||||||
|
|
@ -104,17 +101,15 @@ export default {
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.header-container {
|
.header-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
border-bottom: 1px solid #eaeaea;
|
background-color: #ffffff;
|
||||||
position: relative;
|
border-bottom: 1px solid #eaeaea;
|
||||||
z-index: 100;
|
position: relative;
|
||||||
padding-right: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* New green button styles */
|
/* New green button styles */
|
||||||
.green-button {
|
.green-button {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -174,9 +169,9 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
.user-name {
|
.user-name {
|
||||||
font-size: 16px;
|
font-size: 14px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: #101010;
|
color: #333333;
|
||||||
}
|
}
|
||||||
|
|
||||||
.avatar-wrapper {
|
.avatar-wrapper {
|
||||||
|
|
@ -284,7 +279,16 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Ensure header has proper z-index */
|
/* Ensure header has proper z-index */
|
||||||
|
.header-container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 20px;
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-bottom: 1px solid #eaeaea;
|
||||||
|
position: relative;
|
||||||
|
z-index: 100; /* Lower than dropdown but higher than page content */
|
||||||
|
}
|
||||||
|
|
||||||
.dropdown-menu {
|
.dropdown-menu {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
|
||||||
|
|
@ -1,202 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="tab-content">
|
|
||||||
<div class="access-container">
|
|
||||||
<div class="access-header" style="background: white; border-radius: 20px; padding: 20px;">
|
|
||||||
<img :src="require('@/assets/img/lock Icon.png')" alt="lock" class="lock-icon" />
|
|
||||||
<div class="header-text">
|
|
||||||
<h3>فعال‌سازی دسترسی XRoom</h3>
|
|
||||||
<p>دسترسی کامل به امکانات XRoom بدون واترمارک</p>
|
|
||||||
</div>
|
|
||||||
<button class="primary-button" @click="changeTab('buy-subscription')">
|
|
||||||
<img style="margin-left: 10px" :src="require('@/assets/img/hand.png')" alt="hand" />
|
|
||||||
انتخاب طرح اشتراکی
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<!-- subscription card -->
|
|
||||||
<div class="info-cards">
|
|
||||||
<div class="info-card">
|
|
||||||
<h4>وضعیت اشتراک تیم</h4>
|
|
||||||
<p v-if="subscriptionCount - teamMemberCapacity > 0">
|
|
||||||
ظرفیت کل تیم: <strong>{{ subscriptionCount }} کاربر</strong><br />
|
|
||||||
ظرفیت باقی‌مانده: <strong>{{ subscriptionCount - teamMemberCapacity }} کاربر</strong><br />
|
|
||||||
کاربران اضافه کرده: <strong>{{ teamMemberCapacity }} کاربر</strong>
|
|
||||||
</p>
|
|
||||||
<p class="invalid-subscription" v-else>شما اشتراک فعالی ندارین، لطفا اشتراک جدیدی خریداری نمایید.</p>
|
|
||||||
<button class="disable-button" v-if="subscriptionCount - teamMemberCapacity > 0">
|
|
||||||
اشتراک فعال دارید
|
|
||||||
</button>
|
|
||||||
<button class="secondary-button" @click="changeTab('buy-subscription')" v-else>
|
|
||||||
خرید اشتراک جدید
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="info-card">
|
|
||||||
<h4>جزئیات صورتحساب</h4>
|
|
||||||
<p>
|
|
||||||
اصفهان، خیابان وحید، نبش خیابان حسین آباد، مجتمع عسگری ۳، واحد ۳<br />
|
|
||||||
۸۱۷۵۹۴۹۹۹۱<br />
|
|
||||||
شماره تماس: ۰۹۳۷۹۸۹۸۶۲۳<br />
|
|
||||||
ایمیل: aminimperator@gmail.com
|
|
||||||
</p>
|
|
||||||
<button class="secondary-button" @click="openBillingModal">
|
|
||||||
ویرایش جزئیات صورتحساب
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="info-card">
|
|
||||||
<h4>عضویت‌ها</h4>
|
|
||||||
<p>
|
|
||||||
هنوز مجوزی فعال نیست. کاربران شما نمی‌توانند از XRoom با واترمارک استفاده کنند.
|
|
||||||
</p>
|
|
||||||
<button class="secondary-button">مدیریت عضویت‌ها</button>
|
|
||||||
</div>
|
|
||||||
<div class="info-card">
|
|
||||||
<h4>روش پرداخت</h4>
|
|
||||||
<p>هیچ روش پرداختی برای صورتحساب مرتبط نیست.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<EditBillingModal :isVisible="isBillingModalVisible" @close="closeBillingModal" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import EditBillingModal from '@/components/EditBillingModal.vue';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'Membership',
|
|
||||||
components: {
|
|
||||||
EditBillingModal,
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
subscriptionCount: {
|
|
||||||
type: Number,
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
teamMemberCapacity: {
|
|
||||||
type: Number,
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
isBillingModalVisible: {
|
|
||||||
type: Boolean,
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
changeTab(tabName) {
|
|
||||||
this.$emit('change-tab', tabName);
|
|
||||||
},
|
|
||||||
openBillingModal() {
|
|
||||||
this.$emit('update:isBillingModalVisible', true);
|
|
||||||
},
|
|
||||||
closeBillingModal() {
|
|
||||||
this.$emit('update:isBillingModalVisible', false);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.access-container {
|
|
||||||
direction: rtl;
|
|
||||||
font-family: IRANSansXFaNum, sans-serif;
|
|
||||||
padding: 20px;
|
|
||||||
background-color: #f9f9fb;
|
|
||||||
width: -webkit-fill-available;
|
|
||||||
}
|
|
||||||
|
|
||||||
.access-header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-text h3 {
|
|
||||||
font-size: 20px;
|
|
||||||
font-weight: 700;
|
|
||||||
color: #1a202c;
|
|
||||||
margin-bottom: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-text p {
|
|
||||||
color: #4a5568;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lock-icon {
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.primary-button {
|
|
||||||
background-color: #3a57e8;
|
|
||||||
color: white;
|
|
||||||
border: none;
|
|
||||||
padding: 12px 24px;
|
|
||||||
font-size: 14px;
|
|
||||||
border-radius: 10px;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-cards {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-card {
|
|
||||||
background: white;
|
|
||||||
border-radius: 16px;
|
|
||||||
padding: 20px;
|
|
||||||
width: 100%;
|
|
||||||
max-width: 300px;
|
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-card h4 {
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 600;
|
|
||||||
margin-bottom: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-card p {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #4a5568;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
line-height: 1.7;
|
|
||||||
}
|
|
||||||
|
|
||||||
.secondary-button {
|
|
||||||
background-color: #3a57e8;
|
|
||||||
color: white;
|
|
||||||
border: none;
|
|
||||||
padding: 10px 16px;
|
|
||||||
font-size: 13px;
|
|
||||||
border-radius: 8px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.invalid-subscription {
|
|
||||||
color: #f44336 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.disable-button {
|
|
||||||
background-color: #ebeeFD;
|
|
||||||
color: #101010;
|
|
||||||
border: none;
|
|
||||||
padding: 10px 16px;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 600;
|
|
||||||
border-radius: 8px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab-content {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 16px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,29 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="tab-content">
|
|
||||||
<div class="card">جزئیات تیم ۱</div>
|
|
||||||
<div class="card">جزئیات تیم ۲</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'TeamDetails',
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.tab-content {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
|
||||||
background-color: white;
|
|
||||||
border: 1px solid #e2e8f0;
|
|
||||||
border-radius: 12px;
|
|
||||||
padding: 20px;
|
|
||||||
min-width: 200px;
|
|
||||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
<div class="card license-card">
|
<div class="card license-card">
|
||||||
<span>لایسنس های قابل استفاده : 0</span>
|
<span>لایسنس های قابل استفاده : 0</span>
|
||||||
<div class="buy-subscription" @click="goToBuySubscription">
|
<div class="buy-subscription" @click="goToBuySubscription">
|
||||||
<p>خرید اشتراک</p>
|
خرید اشتراک
|
||||||
<span>
|
<span>
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 0 24 25" fill="none">
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 0 24 25" fill="none">
|
||||||
<path d="M12 19.5L5 12.5L12 5.5" stroke="#48BB78" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
<path d="M12 19.5L5 12.5L12 5.5" stroke="#48BB78" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user