Vue_element Backstage

screenshot of Vue_element Backstage
vue
less
scss

vue+element ui框架搭建的CTF信息竞赛平台

Overview

The CTF Information Security Competition Frontend Project presents a comprehensive solution tailored for the backend Go project, aimed at enhancing user interaction and engagement. This project offers an intuitive interface and a variety of features designed to streamline the user experience and management capabilities, making it ideal for both participants and administrators.

Features

  • Homepage Carousel: Includes notifications, article recommendations, announcements, and a ranking system for enhanced visibility of important information.
  • Practice Area: Offers three types of questions for users to select from, with a clear indication of which questions have been completed.
  • Dynamic Login Page: Features a visually appealing and modern terminal-style login interface that captures user interest.
  • Random Dynamic Avatars: Users' avatars switch randomly based on token verification from the backend, seamlessly transitioning between avatar display and login/register screens.
  • Admin Management Panel: Provides tools to manage the homepage carousel, articles, users, and questions, with a rich text editor for writing articles to improve content quality and appeal.
vue
Vue

Vue.js is a lightweight and flexible JavaScript framework that allows developers to easily build dynamic and reactive user interfaces. Its intuitive syntax, modular architecture, and focus on performance make it a popular choice for modern web development.

less
LESS

Less CSS is a dynamic stylesheet language that extends the capabilities of CSS, allowing developers to write cleaner, more modular, and reusable stylesheets with features like variables, mixins, and nested rules.

scss
SCSS

SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.

eslint
Eslint

ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.