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 = {
|
export const OpenAPI: OpenAPIConfig = {
|
||||||
BASE: 'http://127.0.0.1:8101',
|
BASE: 'http://oj.shuguangwl.com:8101',
|
||||||
VERSION: '1.0',
|
VERSION: '1.0',
|
||||||
WITH_CREDENTIALS: true,
|
WITH_CREDENTIALS: true,
|
||||||
CREDENTIALS: 'include',
|
CREDENTIALS: 'include',
|
||||||
|
|||||||
@ -20,7 +20,7 @@ export type OpenAPIConfig = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export const OpenAPI: OpenAPIConfig = {
|
export const OpenAPI: OpenAPIConfig = {
|
||||||
BASE: 'http://localhost:8101',
|
BASE: 'http://oj.shuguangwl.com:8101',
|
||||||
VERSION: '1.0',
|
VERSION: '1.0',
|
||||||
WITH_CREDENTIALS: true,
|
WITH_CREDENTIALS: true,
|
||||||
CREDENTIALS: 'include',
|
CREDENTIALS: 'include',
|
||||||
|
|||||||
@ -1,5 +1,236 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="about">
|
<div class="about-container">
|
||||||
<h1>This is an about page</h1>
|
<!-- 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>
|
</div>
|
||||||
</template>
|
</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,68 +1,70 @@
|
|||||||
<template>
|
<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/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/common.css">
|
||||||
<link rel="stylesheet" type="text/css" href="https://auth.idcbook.com/template/assets/home/shiwaiyun/static/index.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 菜单开始 -->
|
||||||
|
<div class="banner-box menu-box auto-menu-box home-menu-box">
|
||||||
|
<!-- 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">
|
||||||
|
<img class="t0 r0 sm-hidden banner-apy-photo" src="https://auth.idcbook.com//template/assets/home/shiwaiyun/static/banner_in.png" alt="">
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
<div>
|
<!-- banner 文字部分 -->
|
||||||
<!--banner菜单 start-->
|
<div class="slider-main auto-width">
|
||||||
<div class="banner-box menu-box auto-menu-box home-menu-box">
|
<div class="banner-text banner-common-text">
|
||||||
<!-- banner图片 start-->
|
<div class="slider-text sm-p-lr-15 typewriter">
|
||||||
<ul class="banner-ul clearfix" id="slider-back">
|
<!-- 动态打字效果 -->
|
||||||
<li class="banner-apy pos-rel overflow-hidden " style="opacity: 1;">
|
<p class="typing">Code Master编程学习系统</p>
|
||||||
<div class="pos-abs tar r0 banner-apy-inside">
|
<p class="font-size-18 color-main-596680 typing">
|
||||||
<img class="t0 r0 sm-hidden banner-apy-photo" src="https://auth.idcbook.com//template/assets/home/shiwaiyun/static/banner_in.png" alt="">
|
代码大师-在线编程学习系统-在线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>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</div>
|
||||||
</ul>
|
|
||||||
<!-- banner图片 end-->
|
|
||||||
|
|
||||||
<!-- banner文字 start-->
|
<!-- banner 索引部分，默认隐藏 -->
|
||||||
<div class="slider-main auto-width">
|
<div style="display: none;" class="banner-point">
|
||||||
<div class="banner-text banner-common-text">
|
<div class="auto">
|
||||||
<div class="slider-text sm-p-lr-15 typewriter" style="display: block; top: 0px; left: 0px;">
|
<ul class="banner-area" id="slider-btn">
|
||||||
<p class="typing">Code Master编程学习系统</p>
|
<li class="active" data-delay="12000"></li>
|
||||||
<p class="font-size-18 color-main-596680 typing">
|
</ul>
|
||||||
代码大师-在线编程学习系统-在线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">
|
|
||||||
立即使用
|
|
||||||
<svg class="icon-svg color-white m-l-20" aria-hidden="true">
|
|
||||||
<use xlink:href="#iconapayun_tongyongicon_jiantou"></use>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- banner文字 end-->
|
<!-- banner 菜单结束 -->
|
||||||
<!-- banner索引 start-->
|
|
||||||
<div style="display: none;" class="banner-point">
|
|
||||||
<div class="auto">
|
|
||||||
<ul class="banner-area" id="slider-btn">
|
|
||||||
<li class="active" data-delay="12000"></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- banner索引 end-->
|
|
||||||
</div>
|
|
||||||
<!--banner菜单 end-->
|
|
||||||
|
|
||||||
<!--优势 start-->
|
<!-- 优势部分 -->
|
||||||
<div class="advantage-box auto-width pos-rel z-1 box-sizing-border sm-p-lr-15">
|
<div class="advantage-box auto-width pos-rel z-1 box-sizing-border sm-p-lr-15">
|
||||||
<ul>
|
<ul>
|
||||||
<li layout-align="start center" class="advantage-li-1">
|
<li layout-align="start center" class="advantage-li-1">
|
||||||
<svg layout-flex="none" class="icon-svg advantage-icon" aria-hidden="true">
|
<svg layout-flex="none" class="icon-svg advantage-icon" aria-hidden="true">
|
||||||
<use xlink:href="#iconapayun_shouyeicon_jieshao1"></use>
|
<use xlink:href="#iconapayun_shouyeicon_jieshao1"></use>
|
||||||
</svg>
|
</svg>
|
||||||
|
<div>
|
||||||
<div>
|
<p class="color-main-596680 font-size-16">行业软件创新先驱者</p>
|
||||||
<p class="color-main-596680 font-size-16">行业软件创新先驱者</p>
|
<p class="color-main-8f9bb2 sm-hidden">更周全、更稳定、更细致的产品及服务</p>
|
||||||
<p class="color-main-8f9bb2 sm-hidden">更周全、更稳定、更细致的产品及服务</p>
|
</div>
|
||||||
</div>
|
</li>
|
||||||
</li>
|
<li layout-align="start center" class="advantage-li-1">
|
||||||
<li layout-align="start center" class="advantage-li-1">
|
|
||||||
<svg layout-flex="none" class="icon-svg advantage-icon" aria-hidden="true">
|
<svg layout-flex="none" class="icon-svg advantage-icon" aria-hidden="true">
|
||||||
<use xlink:href="#iconapayun_shouyeicon_jieshao2"></use>
|
<use xlink:href="#iconapayun_shouyeicon_jieshao2"></use>
|
||||||
</svg>
|
</svg>
|
||||||
@ -82,12 +84,14 @@
|
|||||||
<p class="color-main-8f9bb2 sm-hidden">让我们更懂如何解决不同客户的需求</p>
|
<p class="color-main-8f9bb2 sm-hidden">让我们更懂如何解决不同客户的需求</p>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<!--优势 end-->
|
|
||||||
|
<!-- 优势部分结束 -->
|
||||||
|
|
||||||
|
<!-- 开始使用部分 -->
|
||||||
<div class="start-box">
|
<div class="start-box">
|
||||||
<div class="auto-width join-apy-wrap sm-p-lr-15">
|
<div class="auto-width join-apy-wrap sm-p-lr-15">
|
||||||
|
|
||||||
<div class="text-content" layout-align="space-between center">
|
<div class="text-content" layout-align="space-between center">
|
||||||
<div class="bdr-5 font-size-18 font-weight-bold">
|
<div class="bdr-5 font-size-18 font-weight-bold">
|
||||||
<span class="sm-hidden">
|
<span class="sm-hidden">
|
||||||
@ -107,74 +111,93 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="tool-bar" class="tool-bar">
|
<!-- 工具栏 -->
|
||||||
<div class="tool-bar-warp">
|
<div id="tool-bar" class="tool-bar">
|
||||||
<div style="cursor: initial;" class="tool-bar-common tool-bar-contact" data-type="zk_icon_tb-service"
|
<div class="tool-bar-warp">
|
||||||
id="serviceBtnWrap">
|
<!-- 联系我们按钮 -->
|
||||||
<a class="cursign" id="serviceBtn">
|
<div style="cursor: initial;" class="tool-bar-common tool-bar-contact" id="serviceBtnWrap">
|
||||||
<svg class="icon-svg color-white font-size-26 vam m-b-10" aria-hidden="true">
|
<a class="cursign" id="serviceBtn">
|
||||||
<use xlink:href="#iconapayun_youcexuanfuicon_lianxiwomen"></use>
|
<svg class="icon-svg color-white font-size-26 vam m-b-10" aria-hidden="true">
|
||||||
</svg>
|
<use xlink:href="#iconapayun_youcexuanfuicon_lianxiwomen"></use>
|
||||||
<p style="width: 30px;" class="m-auto font-size-16 sm-hidden">
|
</svg>
|
||||||
联系我们
|
<p style="width: 30px;" class="m-auto font-size-16 sm-hidden">联系我们</p>
|
||||||
</p>
|
</a>
|
||||||
</a>
|
<div class="common-dialog-wrap contact-wrap">
|
||||||
<div class="common-dialog-wrap contact-wrap">
|
<div class="phone-wrap">
|
||||||
<div style="border-top: none;" class="phone-wrap">
|
<p class="contact-title">客服QQ</p>
|
||||||
<p class="contact-title">客服QQ</p>
|
<p class="phone-num color-main-0055ff">1270540423</p>
|
||||||
<p class="phone-num color-main-0055ff">2840472728</p>
|
</div>
|
||||||
</div>
|
<div class="QRCode-wrap sm-hidden">
|
||||||
<div class="QRCode-wrap sm-hidden">
|
<div layout-align="space-between center">
|
||||||
<div layout-align="space-between center">
|
<div>
|
||||||
<div>
|
<p class="tal contact-title">曙光工作室电话</p>
|
||||||
<p style="margin-bottom:20px;" class="tal contact-title">扫码关注</p>
|
<p class="text">400-805-5213</p>
|
||||||
<p class="text">微信公众号</p>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<img width="80" height="80" src="https://auth.idcbook.com/template/assets/home/shiwaiyun/static/611dd761517f8.jpg" alt="">
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div class="tool-bar-common tool-bar-gotop" style="display: none;" id="toTopBtn" data-type="zk_icon_tb-toTop">
|
<!-- 返回顶部按钮 -->
|
||||||
<svg class="icon-svg color-white font-size-26 vam0" aria-hidden="true">
|
<div class="tool-bar-common tool-bar-gotop" style="display: none;" id="toTopBtn">
|
||||||
<use xlink:href="#iconapayun_tongyongicon_shang"></use>
|
<svg class="icon-svg color-white font-size-26 vam0" aria-hidden="true">
|
||||||
</svg>
|
<use xlink:href="#iconapayun_tongyongicon_shang"></use>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { Options, Vue } from "vue-class-component";
|
import { ref } from 'vue';
|
||||||
import MdEditor from "@/components/MdEditor.vue"; // @ is an alias to /src
|
import UserLoginView from './user/UserLoginView.vue';
|
||||||
import CodeEditor from "@/components/CodeEditor.vue"; // @ is an alias to /src
|
|
||||||
import {ref} from 'vue'
|
|
||||||
|
|
||||||
|
const Mdvalue = ref<string>('');
|
||||||
|
|
||||||
const Mdvalue=ref()
|
const Codevalue = ref<string>('');
|
||||||
const Codevalue=ref()
|
|
||||||
const OnChange=(v:string)=>{
|
const OnChange = (v: string) => {
|
||||||
Mdvalue.value=v
|
Mdvalue.value = v;
|
||||||
console.log(Mdvalue.value)
|
console.log(Mdvalue.value);
|
||||||
}
|
};
|
||||||
const InChnage=(v:string)=>{
|
|
||||||
console.log(v)
|
const InChnage = (v: string) => {
|
||||||
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>
|
</script>
|
||||||
<style class="mpa-style-fix SideFunctionPanel" scoped>
|
|
||||||
#Home {
|
<style scoped>
|
||||||
|
/* 页面整体样式 */
|
||||||
|
#Home {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
/* 打字机动画 */
|
|
||||||
|
/* 打字机动画效果 */
|
||||||
@keyframes typing {
|
@keyframes typing {
|
||||||
from {
|
from {
|
||||||
width: 0;
|
width: 0;
|
||||||
@ -183,7 +206,8 @@ const InChnage=(v:string)=>{
|
|||||||
width: 50%;
|
width: 50%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
/* 光标动画 */
|
|
||||||
|
/* 光标闪烁效果 */
|
||||||
@keyframes blink-caret {
|
@keyframes blink-caret {
|
||||||
from,
|
from,
|
||||||
to {
|
to {
|
||||||
@ -193,19 +217,21 @@ const InChnage=(v:string)=>{
|
|||||||
border-color: #0a65cc;
|
border-color: #0a65cc;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
/* 按钮动画 */
|
|
||||||
|
/* 按钮滑入动画 */
|
||||||
@keyframes slidein {
|
@keyframes slidein {
|
||||||
0% {
|
0% {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transform: translateY(100%);
|
transform: translateY(100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
50% {
|
50% {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
pointer-events: auto;
|
pointer-events: auto;
|
||||||
transform: translateY(0%);
|
transform: translateY(0%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 打字机样式 */
|
||||||
.typewriter {
|
.typewriter {
|
||||||
margin-bottom: 100px;
|
margin-bottom: 100px;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -216,30 +242,33 @@ const InChnage=(v:string)=>{
|
|||||||
.typewriter .typing {
|
.typewriter .typing {
|
||||||
color: var(--color-text-1);
|
color: var(--color-text-1);
|
||||||
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
|
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
|
||||||
overflow: hidden; /* 保证文字在动画之前隐藏 */
|
overflow: hidden;
|
||||||
border-right: 0.15em solid #0a65cc; /* 使用边框实现光标 */
|
border-right: 0.15em solid #0a65cc;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
margin-bottom: 32px;
|
margin-bottom: 32px;
|
||||||
letter-spacing: 0.15em;
|
letter-spacing: 0.15em;
|
||||||
animation: typing 4s steps(16, end), blink-caret 0.5s step-end infinite;
|
animation: typing 4s steps(16, end), blink-caret 0.5s step-end infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 按钮动画 */
|
||||||
.typewriter .button {
|
.typewriter .button {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
color: #0a65cc;
|
color: #0a65cc;
|
||||||
animation: slidein 1s ease-in 4s forwards;
|
animation: slidein 1s ease-in 4s forwards;
|
||||||
}
|
}
|
||||||
.shiwaiyun{
|
|
||||||
vertical-align: middle;
|
/* 其他样式 */
|
||||||
display: inline-block;
|
.shiwaiyun {
|
||||||
width: 80px;
|
vertical-align: middle;
|
||||||
height: 30px;
|
display: inline-block;
|
||||||
line-height: 30px;
|
width: 80px;
|
||||||
text-align: center;
|
height: 30px;
|
||||||
background-color: #ffffff;
|
line-height: 30px;
|
||||||
border-radius: 5px;
|
text-align: center;
|
||||||
border: solid 1px #05f;
|
background-color: #ffffff;
|
||||||
color: #05f;
|
border-radius: 5px;
|
||||||
overflow: hidden;
|
border: solid 1px #05f;
|
||||||
}
|
color: #05f;
|
||||||
</style>
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@ -62,3 +62,6 @@ const handleSubmit = async () => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user