mirror of
https://github.com/shuguangnet/Code-Master.git
synced 2025-01-23 07:58:44 +08:00
修改
This commit is contained in:
曙光
parent
cbe9912399
commit
d7efd98fb6
@ -20,7 +20,7 @@ export type OpenAPIConfig = {
|
||||
};
|
||||
|
||||
export const OpenAPI: OpenAPIConfig = {
|
||||
BASE: 'http://127.0.0.1:8101',
|
||||
BASE: 'http://oj.shuguangwl.com:8101',
|
||||
VERSION: '1.0',
|
||||
WITH_CREDENTIALS: true,
|
||||
CREDENTIALS: 'include',
|
||||
|
||||
@ -20,7 +20,7 @@ export type OpenAPIConfig = {
|
||||
};
|
||||
|
||||
export const OpenAPI: OpenAPIConfig = {
|
||||
BASE: 'http://localhost:8101',
|
||||
BASE: 'http://oj.shuguangwl.com:8101',
|
||||
VERSION: '1.0',
|
||||
WITH_CREDENTIALS: true,
|
||||
CREDENTIALS: 'include',
|
||||
|
||||
@ -1,5 +1,236 @@
|
||||
<template>
|
||||
<div class="about">
|
||||
<h1>This is an about page</h1>
|
||||
<div class="about-container">
|
||||
<!-- Banner Section -->
|
||||
<section class="about-banner">
|
||||
<div class="banner-content">
|
||||
<h1 class="animate__animated animate__fadeInDown">关于曙光</h1>
|
||||
<p class="animate__animated animate__fadeInUp">
|
||||
一名热爱技术与创新的前端工程师，致力于用代码构建更美好的互联网世界。
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- About Content Section -->
|
||||
<section class="about-content">
|
||||
<!-- Personal Info -->
|
||||
<div class="info-box">
|
||||
<h2 class="animate__animated animate__fadeInLeft">我的使命</h2>
|
||||
<p class="animate__animated animate__fadeInRight">
|
||||
用技术改变世界，专注于前端开发、UI/UX设计与全栈技术。我的目标是为客户和开发者提供最佳的用户体验与开发支持。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Links Section -->
|
||||
<div class="links-section">
|
||||
<h2 class="animate__animated animate__fadeInUp">我的主页</h2>
|
||||
<div class="links-cards">
|
||||
<a
|
||||
v-for="link in links"
|
||||
:key="link.name"
|
||||
:href="link.url"
|
||||
target="_blank"
|
||||
class="link-card animate__animated animate__zoomIn"
|
||||
>
|
||||
<div class="link-icon">
|
||||
<i :class="link.icon"></i>
|
||||
</div>
|
||||
<h3>{{ link.name }}</h3>
|
||||
<p>{{ link.description }}</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Contact Section -->
|
||||
<section class="contact-section">
|
||||
<h2>联系我</h2>
|
||||
<p>我随时欢迎您的咨询与合作，欢迎交流前端技术与开发心得。</p>
|
||||
<a href="mailto:jasvip@vip.qq.com" class="contact-button">
|
||||
发送邮件
|
||||
</a>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from "vue";
|
||||
|
||||
export default {
|
||||
name: "AboutUs",
|
||||
setup() {
|
||||
const links = ref([
|
||||
{
|
||||
name: "GitHub",
|
||||
url: "https://github.com/shuguangnet",
|
||||
icon: "fab fa-github",
|
||||
description: "查看我的代码仓库",
|
||||
},
|
||||
{
|
||||
name: "博客",
|
||||
url: "https://pqblog.com",
|
||||
icon: "fas fa-blog",
|
||||
description: "阅读我的技术博客",
|
||||
},
|
||||
{
|
||||
name: "API聚合登录平台",
|
||||
url: "https://api.shuguangwl.com",
|
||||
icon: "fas fa-globe",
|
||||
description: "了解我的更多作品与项目",
|
||||
},
|
||||
{
|
||||
name: "曙光互联",
|
||||
url: "https://idcbook.com",
|
||||
icon: "fab fa-twitter",
|
||||
description: "-vps销售平台",
|
||||
},{
|
||||
name: "191商城",
|
||||
url: "https://191ka.cn",
|
||||
icon: "fab fa-twitter",
|
||||
description: "虚拟寄售平台",
|
||||
},
|
||||
]);
|
||||
|
||||
// Return any reactive variables or methods to the template
|
||||
return {
|
||||
links,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
/* Banner Section */
|
||||
.about-container {
|
||||
font-family: 'Arial', sans-serif;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.about-banner {
|
||||
background: linear-gradient(135deg, #0052d9, #287aff, #4db8ff);
|
||||
text-align: center;
|
||||
padding: 100px 20px;
|
||||
background-size: 200% 200%;
|
||||
animation: gradientAnimation 5s ease infinite;
|
||||
}
|
||||
|
||||
@keyframes gradientAnimation {
|
||||
0% { background-position: 0% 50%; }
|
||||
50% { background-position: 100% 50%; }
|
||||
100% { background-position: 0% 50%; }
|
||||
}
|
||||
|
||||
.banner-content h1 {
|
||||
font-size: 4rem;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.banner-content p {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
/* About Content Section */
|
||||
.about-content {
|
||||
background: #f4f4f4;
|
||||
padding: 60px 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.info-box {
|
||||
margin: 40px 0;
|
||||
padding: 20px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
|
||||
max-width: 800px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.info-box h2 {
|
||||
font-size: 2.5rem;
|
||||
color: #0052d9;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.info-box p {
|
||||
font-size: 1.2rem;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* Links Section */
|
||||
.links-section {
|
||||
padding: 40px 20px;
|
||||
background: #287aff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.links-section h2 {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.links-cards {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.link-card {
|
||||
background: #fff;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
width: 200px;
|
||||
text-align: center;
|
||||
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease, color 0.3s;
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.link-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
|
||||
color: #0052d9;
|
||||
}
|
||||
|
||||
.link-icon {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 15px;
|
||||
color: #0052d9;
|
||||
}
|
||||
|
||||
/* Contact Section */
|
||||
.contact-section {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
background: #0052d9;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.contact-section h2 {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.contact-section p {
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.contact-button {
|
||||
display: inline-block;
|
||||
background: #287aff;
|
||||
color: #fff;
|
||||
padding: 12px 30px;
|
||||
border-radius: 5px;
|
||||
text-decoration: none;
|
||||
transition: background 0.3s ease, transform 0.3s ease;
|
||||
}
|
||||
|
||||
.contact-button:hover {
|
||||
background: #1a5fb9;
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,14 +1,15 @@
|
||||
<template>
|
||||
<!-- 添加所需的样式表 -->
|
||||
<link rel="stylesheet" type="text/css" href="https://auth.idcbook.com/template/assets/home/shiwaiyun/static/main.css">
|
||||
<link rel="stylesheet" type="text/css" href="https://auth.idcbook.com/template/assets/home/shiwaiyun/static/common.css">
|
||||
<link rel="stylesheet" type="text/css" href="https://auth.idcbook.com/template/assets/home/shiwaiyun/static/index.css">
|
||||
<body mpa-version="8.0.8" mpa-extension-id="ibefaeehajgcpooopoegkifhgecigeeg">
|
||||
|
||||
|
||||
<!-- 页面主要内容 -->
|
||||
<div>
|
||||
<!--banner菜单 start-->
|
||||
<!-- banner 菜单开始 -->
|
||||
<div class="banner-box menu-box auto-menu-box home-menu-box">
|
||||
<!-- banner图片 start-->
|
||||
<!-- banner 图片部分 -->
|
||||
<ul class="banner-ul clearfix" id="slider-back">
|
||||
<li class="banner-apy pos-rel overflow-hidden" style="opacity: 1;">
|
||||
<div class="pos-abs tar r0 banner-apy-inside">
|
||||
@ -16,17 +17,20 @@
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- banner图片 end-->
|
||||
|
||||
<!-- banner文字 start-->
|
||||
<!-- banner 文字部分 -->
|
||||
<div class="slider-main auto-width">
|
||||
<div class="banner-text banner-common-text">
|
||||
<div class="slider-text sm-p-lr-15 typewriter" style="display: block; top: 0px; left: 0px;">
|
||||
<div class="slider-text sm-p-lr-15 typewriter">
|
||||
<!-- 动态打字效果 -->
|
||||
<p class="typing">Code Master编程学习系统</p>
|
||||
<p class="font-size-18 color-main-596680 typing">
|
||||
代码大师-在线编程学习系统-在线oj判题系统 </p>
|
||||
<a href="https://auth.idcbook.com/user.php/Index/index">
|
||||
<button class="a-zk-btn a-free-reg bg-color-0055ff bdr-5 font-size-18 color-white font-weight-bold">
|
||||
代码大师-在线编程学习系统-在线oj判题系统
|
||||
</p>
|
||||
<a href="">
|
||||
<button class="a-zk-btn a-free-reg bg-color-0055ff bdr-5 font-size-18 color-white font-weight-bold"
|
||||
@click.prevent="useLogin"
|
||||
>
|
||||
立即使用
|
||||
<svg class="icon-svg color-white m-l-20" aria-hidden="true">
|
||||
<use xlink:href="#iconapayun_tongyongicon_jiantou"></use>
|
||||
@ -36,8 +40,8 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- banner文字 end-->
|
||||
<!-- banner索引 start-->
|
||||
|
||||
<!-- banner 索引部分，默认隐藏 -->
|
||||
<div style="display: none;" class="banner-point">
|
||||
<div class="auto">
|
||||
<ul class="banner-area" id="slider-btn">
|
||||
@ -45,18 +49,16 @@
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- banner索引 end-->
|
||||
</div>
|
||||
<!--banner菜单 end-->
|
||||
<!-- banner 菜单结束 -->
|
||||
|
||||
<!--优势 start-->
|
||||
<!-- 优势部分 -->
|
||||
<div class="advantage-box auto-width pos-rel z-1 box-sizing-border sm-p-lr-15">
|
||||
<ul>
|
||||
<li layout-align="start center" class="advantage-li-1">
|
||||
<svg layout-flex="none" class="icon-svg advantage-icon" aria-hidden="true">
|
||||
<use xlink:href="#iconapayun_shouyeicon_jieshao1"></use>
|
||||
</svg>
|
||||
|
||||
<div>
|
||||
<p class="color-main-596680 font-size-16">行业软件创新先驱者</p>
|
||||
<p class="color-main-8f9bb2 sm-hidden">更周全、更稳定、更细致的产品及服务</p>
|
||||
@ -84,10 +86,12 @@
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!--优势 end-->
|
||||
|
||||
<!-- 优势部分结束 -->
|
||||
|
||||
<!-- 开始使用部分 -->
|
||||
<div class="start-box">
|
||||
<div class="auto-width join-apy-wrap sm-p-lr-15">
|
||||
|
||||
<div class="text-content" layout-align="space-between center">
|
||||
<div class="bdr-5 font-size-18 font-weight-bold">
|
||||
<span class="sm-hidden">
|
||||
@ -108,65 +112,83 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 工具栏 -->
|
||||
<div id="tool-bar" class="tool-bar">
|
||||
<div class="tool-bar-warp">
|
||||
<div style="cursor: initial;" class="tool-bar-common tool-bar-contact" data-type="zk_icon_tb-service"
|
||||
id="serviceBtnWrap">
|
||||
<!-- 联系我们按钮 -->
|
||||
<div style="cursor: initial;" class="tool-bar-common tool-bar-contact" id="serviceBtnWrap">
|
||||
<a class="cursign" id="serviceBtn">
|
||||
<svg class="icon-svg color-white font-size-26 vam m-b-10" aria-hidden="true">
|
||||
<use xlink:href="#iconapayun_youcexuanfuicon_lianxiwomen"></use>
|
||||
</svg>
|
||||
<p style="width: 30px;" class="m-auto font-size-16 sm-hidden">
|
||||
联系我们
|
||||
</p>
|
||||
<p style="width: 30px;" class="m-auto font-size-16 sm-hidden">联系我们</p>
|
||||
</a>
|
||||
<div class="common-dialog-wrap contact-wrap">
|
||||
<div style="border-top: none;" class="phone-wrap">
|
||||
<div class="phone-wrap">
|
||||
<p class="contact-title">客服QQ</p>
|
||||
<p class="phone-num color-main-0055ff">2840472728</p>
|
||||
<p class="phone-num color-main-0055ff">1270540423</p>
|
||||
</div>
|
||||
<div class="QRCode-wrap sm-hidden">
|
||||
<div layout-align="space-between center">
|
||||
<div>
|
||||
<p style="margin-bottom:20px;" class="tal contact-title">扫码关注</p>
|
||||
<p class="text">微信公众号</p>
|
||||
</div>
|
||||
<img width="80" height="80" src="https://auth.idcbook.com/template/assets/home/shiwaiyun/static/611dd761517f8.jpg" alt="">
|
||||
<p class="tal contact-title">曙光工作室电话</p>
|
||||
<p class="text">400-805-5213</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tool-bar-common tool-bar-gotop" style="display: none;" id="toTopBtn" data-type="zk_icon_tb-toTop">
|
||||
</div>
|
||||
|
||||
<!-- 返回顶部按钮 -->
|
||||
<div class="tool-bar-common tool-bar-gotop" style="display: none;" id="toTopBtn">
|
||||
<svg class="icon-svg color-white font-size-26 vam0" aria-hidden="true">
|
||||
<use xlink:href="#iconapayun_tongyongicon_shang"></use>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <script src="https://auth.idcbook.com/template/assets/home/shiwaiyun/static/common.min.js"></script> -->
|
||||
</body>
|
||||
|
||||
|
||||
|
||||
<!-- 登录弹框 -->
|
||||
<a-modal v-model:visible="visible" @cancel="handleCancel" :footer="null" >
|
||||
<UserLoginView />
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { Options, Vue } from "vue-class-component";
|
||||
import MdEditor from "@/components/MdEditor.vue"; // @ is an alias to /src
|
||||
import CodeEditor from "@/components/CodeEditor.vue"; // @ is an alias to /src
|
||||
import {ref} from 'vue'
|
||||
import { ref } from 'vue';
|
||||
import UserLoginView from './user/UserLoginView.vue';
|
||||
|
||||
const Mdvalue = ref<string>('');
|
||||
|
||||
const Codevalue = ref<string>('');
|
||||
|
||||
const Mdvalue=ref()
|
||||
const Codevalue=ref()
|
||||
const OnChange = (v: string) => {
|
||||
Mdvalue.value=v
|
||||
console.log(Mdvalue.value)
|
||||
}
|
||||
Mdvalue.value = v;
|
||||
console.log(Mdvalue.value);
|
||||
};
|
||||
|
||||
const InChnage = (v: string) => {
|
||||
console.log(v)
|
||||
Codevalue.value=v
|
||||
}
|
||||
Codevalue.value = v;
|
||||
console.log(Codevalue.value);
|
||||
};
|
||||
// 控制弹框显示/隐藏
|
||||
const visible = ref(false);
|
||||
|
||||
// 打开登录框
|
||||
const useLogin = () => {
|
||||
visible.value = true;
|
||||
};
|
||||
|
||||
// 关闭登录框
|
||||
const handleCancel = () => {
|
||||
visible.value = false;
|
||||
};
|
||||
</script>
|
||||
<style class="mpa-style-fix SideFunctionPanel" scoped>
|
||||
|
||||
<style scoped>
|
||||
/* 页面整体样式 */
|
||||
#Home {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
@ -174,7 +196,8 @@ const InChnage=(v:string)=>{
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
/* 打字机动画 */
|
||||
|
||||
/* 打字机动画效果 */
|
||||
@keyframes typing {
|
||||
from {
|
||||
width: 0;
|
||||
@ -183,7 +206,8 @@ const InChnage=(v:string)=>{
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
/* 光标动画 */
|
||||
|
||||
/* 光标闪烁效果 */
|
||||
@keyframes blink-caret {
|
||||
from,
|
||||
to {
|
||||
@ -193,19 +217,21 @@ const InChnage=(v:string)=>{
|
||||
border-color: #0a65cc;
|
||||
}
|
||||
}
|
||||
/* 按钮动画 */
|
||||
|
||||
/* 按钮滑入动画 */
|
||||
@keyframes slidein {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
transform: translateY(0%);
|
||||
}
|
||||
}
|
||||
|
||||
/* 打字机样式 */
|
||||
.typewriter {
|
||||
margin-bottom: 100px;
|
||||
display: flex;
|
||||
@ -216,19 +242,23 @@ const InChnage=(v:string)=>{
|
||||
.typewriter .typing {
|
||||
color: var(--color-text-1);
|
||||
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
|
||||
overflow: hidden; /* 保证文字在动画之前隐藏 */
|
||||
border-right: 0.15em solid #0a65cc; /* 使用边框实现光标 */
|
||||
overflow: hidden;
|
||||
border-right: 0.15em solid #0a65cc;
|
||||
white-space: nowrap;
|
||||
margin-bottom: 32px;
|
||||
letter-spacing: 0.15em;
|
||||
animation: typing 4s steps(16, end), blink-caret 0.5s step-end infinite;
|
||||
}
|
||||
|
||||
/* 按钮动画 */
|
||||
.typewriter .button {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
color: #0a65cc;
|
||||
animation: slidein 1s ease-in 4s forwards;
|
||||
}
|
||||
|
||||
/* 其他样式 */
|
||||
.shiwaiyun {
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
@ -240,6 +270,5 @@ const InChnage=(v:string)=>{
|
||||
border-radius: 5px;
|
||||
border: solid 1px #05f;
|
||||
color: #05f;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
@ -62,3 +62,6 @@ const handleSubmit = async () => {
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user