init
This commit is contained in:
parent
13e74eef49
commit
cd89013e62
@ -3,7 +3,7 @@
|
||||
.HeaderIcon-container {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
max-width: 180px;
|
||||
max-width: 280px;
|
||||
margin-top: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
@ -28,7 +28,8 @@
|
||||
flex-direction: column;
|
||||
position: fixed;
|
||||
z-index: 99999;
|
||||
background: rgba($color: #000000, $alpha: .2);
|
||||
background: #fff;
|
||||
// background: rgba($color: #000000, $alpha: .2);
|
||||
.Header-container{
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
|
||||
@ -21,22 +21,22 @@ a {
|
||||
.nav-active {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&::before {
|
||||
content: '';
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
bottom: -30px;
|
||||
text-align: center;
|
||||
margin: 15px 0 auto;
|
||||
transition: 0.3s;
|
||||
border-width: 0 10px 10px;
|
||||
border-style: solid;
|
||||
border-color: transparent transparent white!important;
|
||||
// &::before {
|
||||
// content: '';
|
||||
// width: 0;
|
||||
// height: 0;
|
||||
// position: absolute;
|
||||
// bottom: -30px;
|
||||
// text-align: center;
|
||||
// margin: 15px 0 auto;
|
||||
// transition: 0.3s;
|
||||
// border-width: 0 10px 10px;
|
||||
// border-style: solid;
|
||||
// border-color: transparent transparent black!important;
|
||||
|
||||
}
|
||||
// }
|
||||
span {
|
||||
color: white !important;
|
||||
color: black !important;
|
||||
}
|
||||
|
||||
|
||||
@ -52,31 +52,31 @@ a {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
// color: rgb(198, 198, 198);
|
||||
color: white;
|
||||
color: black;
|
||||
position: relative;
|
||||
transition: 0.4s;
|
||||
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
bottom: -30px;
|
||||
text-align: center;
|
||||
margin: 15px 0 auto;
|
||||
transition: 0.3s;
|
||||
border-width: 0 10px 10px;
|
||||
border-style: solid;
|
||||
border-color: transparent transparent transparent;
|
||||
}
|
||||
// &::before {
|
||||
// content: '';
|
||||
// width: 0;
|
||||
// height: 0;
|
||||
// position: absolute;
|
||||
// bottom: -30px;
|
||||
// text-align: center;
|
||||
// margin: 15px 0 auto;
|
||||
// transition: 0.3s;
|
||||
// border-width: 0 10px 10px;
|
||||
// border-style: solid;
|
||||
// border-color: transparent transparent transparent;
|
||||
// }
|
||||
|
||||
&:hover {
|
||||
&::before{
|
||||
border-color: transparent transparent white!important;
|
||||
}
|
||||
// &::before{
|
||||
// border-color: transparent transparent black!important;
|
||||
// }
|
||||
span {
|
||||
color: white !important;
|
||||
color: #f9b54c !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,216 +0,0 @@
|
||||
.home-download-button {
|
||||
background-color: #228df2;
|
||||
border: none;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
padding: 10px 24px;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
|
||||
// 首页最外部盒子
|
||||
.home-main-box {
|
||||
padding-top: 10vw;
|
||||
overflow: hidden;
|
||||
|
||||
|
||||
// 首页内容盒子
|
||||
.home-box {
|
||||
width: 100%;
|
||||
// background-color: var(--rootColor);
|
||||
|
||||
// 顶部内容
|
||||
.top-content {
|
||||
|
||||
// 首页顶部标题盒子
|
||||
.home-top-title-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
color: white;
|
||||
|
||||
h1 {
|
||||
display: block;
|
||||
font-size: 2em;
|
||||
margin-block-start: 0.67em;
|
||||
margin-block-end: 0.67em;
|
||||
margin-inline-start: 0px;
|
||||
margin-inline-end: 0px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.home-top-title {
|
||||
font-size: 62px;
|
||||
letter-spacing: 5px;
|
||||
}
|
||||
|
||||
.home-sub-title {
|
||||
font-size: 25px;
|
||||
font-weight: 400;
|
||||
color: #aaa;
|
||||
text-align: center;
|
||||
letter-spacing: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
// 下载按钮盒子
|
||||
.home-download-box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: 3vw;
|
||||
|
||||
|
||||
.svg-content {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// 顶部展示图片
|
||||
.top-show-box {
|
||||
margin-top: 80px;
|
||||
width: 100%;
|
||||
height: 30vw;
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// 中间内容
|
||||
.middle-box {
|
||||
|
||||
h2 {
|
||||
font-size: 38px;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
letter-spacing: 10px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 18px;
|
||||
margin-top: 16px;
|
||||
margin-bottom: 32px;
|
||||
font-weight: 400;
|
||||
color: #aaa;
|
||||
text-align: center;
|
||||
line-height: 1.5;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.middle-img-box {
|
||||
position: relative;
|
||||
margin-top: 0px;
|
||||
width: 100%;
|
||||
height: 35vw;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
|
||||
>img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// 中间盒子
|
||||
.middle-content-big-box {
|
||||
margin-top: 10vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
|
||||
// 标题
|
||||
.middle-content-title-box {
|
||||
.middle-content-title {}
|
||||
|
||||
.middle-content-sub-title {}
|
||||
}
|
||||
}
|
||||
|
||||
// 一键建表 Navicat 图标
|
||||
.create-table-navicat-img-box {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
right: 30%;
|
||||
top: 5%;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
// 底部内容
|
||||
.bottom-box {
|
||||
margin-top: 8vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
|
||||
// gitee源码盒子
|
||||
.gitee-box {
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
height: 250px;
|
||||
|
||||
.gitee-img-box{
|
||||
width: 298px;
|
||||
height: 90px;
|
||||
overflow: hidden;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
||||
.gitee-content-title {
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@ -5,7 +5,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="Final op0" data-animation="animate__animated animate__fadeInUp">
|
||||
<div class="Final-float-box ">
|
||||
<!-- <div class="Final-float-box ">
|
||||
<div class="Final-float rootBg">
|
||||
<template v-for="item in shareList">
|
||||
<div class="float-items" @click="createShareCode(item.contact_scancode_img)">
|
||||
@ -14,7 +14,7 @@
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="Final-container" :style="FinalStyle">
|
||||
<div class="Final-big-box">
|
||||
<!-- <div class="Final-icon-box" :style="FinalStyle.FinalLeft">
|
||||
@ -107,7 +107,7 @@
|
||||
<div class="code-text">扫描关注微信公众号</div>
|
||||
<img :src=bottomData.wx_office_accounts_img alt="微信公众号图片">
|
||||
</div> -->
|
||||
<div class="Final-bottom-box">©2023 广州厚德艺术教育有限公司 版权所有</div>
|
||||
<div class="Final-bottom-box">©2023 米尔科技有限公司 版权所有</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<div class="HeaderIcon-container">
|
||||
<nuxt-link to="/" >
|
||||
<div class="HeaderIcon-box">
|
||||
<img class="pc_top_logo" id="top_logo" src="/img/icon/logo_white.png" alt="">
|
||||
<img class="pc_top_logo" id="top_logo" src="/img/icon/logo.png" alt="">
|
||||
</div>
|
||||
</nuxt-link>
|
||||
</div>
|
||||
|
||||
@ -61,19 +61,31 @@ let info_article_type_id = ref(0)
|
||||
// 'child'
|
||||
let navList = [
|
||||
{
|
||||
name: 'Home',
|
||||
name: '首页',
|
||||
children: [],
|
||||
href: '/',
|
||||
alias: 'index'
|
||||
},
|
||||
{
|
||||
name: 'Gitee',
|
||||
name: '产品中心',
|
||||
children: [],
|
||||
href: 'https://gitee.com/zhi-lan_0/aerowen-toolbox',
|
||||
alias: 'Gitee'
|
||||
},
|
||||
{
|
||||
name: 'GitHub',
|
||||
name: '服务与支持',
|
||||
children: [],
|
||||
href: 'https://github.com/Abbh1/AerwenTool',
|
||||
alias: 'GitHub'
|
||||
},
|
||||
{
|
||||
name: '新闻中心',
|
||||
children: [],
|
||||
href: 'https://github.com/Abbh1/AerwenTool',
|
||||
alias: 'GitHub'
|
||||
},
|
||||
{
|
||||
name: '关于我们',
|
||||
children: [],
|
||||
href: 'https://github.com/Abbh1/AerwenTool',
|
||||
alias: 'GitHub'
|
||||
|
||||
2
package-lock.json
generated
2
package-lock.json
generated
@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "templateV1.1",
|
||||
"name": "mr_web_nuxt",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
|
||||
176
pages/index.vue
176
pages/index.vue
@ -1,172 +1,22 @@
|
||||
<template>
|
||||
<!-- <Load></Load> -->
|
||||
<ImgDetail ref='ImgDetailRef' :imgList="imgList" :imgIdx="imgIdx"></ImgDetail>
|
||||
<!-- <ImgDetail ref='ImgDetailRef' :imgList="imgList" :imgIdx="imgIdx"></ImgDetail> -->
|
||||
|
||||
<Head>
|
||||
<Title>Aerwen工具箱 - 提供专业的研发效能工具和解决方案 | Aerwen官网</Title>
|
||||
<Meta name="keywords" content="Aerwen工具箱，研发效能平台，研发工具，解决方案，自动化，智能化" />
|
||||
<Meta name="description"
|
||||
content="欢迎访问Aerwen工具箱官网！我们致力于为研发团队提供一站式的研发效能平台。通过我们的工具和解决方案，您可以提高开发效率、优化团队协作，并实现高质量的软件交付。" />
|
||||
<Title></Title>
|
||||
<Meta name="keywords" content="" />
|
||||
<Meta name="description" content="" />
|
||||
<Meta name="baidu-site-verification" content="" />
|
||||
</Head>
|
||||
<Header></Header>
|
||||
|
||||
<main class="home-main-box">
|
||||
<section>
|
||||
|
||||
|
||||
<div class="home-box container">
|
||||
|
||||
<!-- 顶部内容 -->
|
||||
<div class="top-content animate__animated animate__fadeIn">
|
||||
|
||||
<!-- 标题 -->
|
||||
<div class="home-top-title-box">
|
||||
<h1 class="home-top-title">智能化开发助手，Aerwen工具箱</h1>
|
||||
<h3 class="home-sub-title">做项目轻轻松松的！</h3>
|
||||
</div>
|
||||
|
||||
<!-- 下载按钮盒子 -->
|
||||
<div class="home-download-box">
|
||||
<a class="home-download-button" target="_blank"
|
||||
href="http://tool.aerwen.net/prod-api/cdn/tool/AerwenTool.msi">
|
||||
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="windows"
|
||||
class="svg-inline--fa fa-windows svg-content" role="img" xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 448 512">
|
||||
<path fill="currentColor"
|
||||
d="M0 93.7l183.6-25.3v177.4H0V93.7zm0 324.6l183.6 25.3V268.4H0v149.9zm203.8 28L448 480V268.4H203.8v177.9zm0-380.6v180.1H448V32L203.8 65.7z">
|
||||
</path>
|
||||
</svg>
|
||||
Download for Windows
|
||||
</a>
|
||||
|
||||
<div class="mt-5">
|
||||
<a class="home-download-button" target="_blank"
|
||||
href="https://space.bilibili.com/270021386/channel/seriesdetail?sid=3334327">
|
||||
使用教程
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 顶部展示图片 -->
|
||||
<!-- 图片预览示例 -->
|
||||
<div class="top-show-box">
|
||||
<img @click="handleImg(0)" :src=openImg1 alt="">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 中间内容 -->
|
||||
<div class="middle-box">
|
||||
|
||||
<!-- 一键打开盒子 -->
|
||||
<div class="middle-content-big-box">
|
||||
<!-- 标题 -->
|
||||
<div class="middle-content-title-box op0" data-animation="animate__animated animate__fadeInUp ">
|
||||
<h2 class="middle-content-title">一键打开</h2>
|
||||
<h3 class="middle-content-sub-title">一个按钮，打开多个项目文件，高效便捷，让工作更轻松，提升生产力，体验全新的工作方式。</h3>
|
||||
</div>
|
||||
|
||||
<!-- 内容 -->
|
||||
<div class="middle-img-box op0" data-animation="animate__animated animate__fadeInLeft">
|
||||
<img @click="handleImg(1)" :src=openImg alt="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 一键建表盒子 -->
|
||||
<div class="middle-content-big-box">
|
||||
<!-- 标题 -->
|
||||
<div class="middle-content-title-box op0" data-animation="animate__animated animate__fadeInUp">
|
||||
<h2 class="middle-content-title">一键建表</h2>
|
||||
<h3 class="middle-content-sub-title">可视化操作，快速创建和执行数据库表格，轻松一键翻译字段，助力高效数据库管理。</h3>
|
||||
</div>
|
||||
|
||||
<!-- 内容 -->
|
||||
<div class="middle-img-box op0" data-animation="animate__animated animate__fadeInRight">
|
||||
<div class="create-table-navicat-img-box">
|
||||
<img src="https://navicat.com/images/02.Product_00_AllProducts_Premium16.svg" alt="">
|
||||
</div>
|
||||
<img @click="handleImg(2)" :src=createTableImg alt="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 资源中心 -->
|
||||
<div class="middle-content-big-box">
|
||||
<!-- 标题 -->
|
||||
<div class="middle-content-title-box op0" data-animation="animate__animated animate__fadeInUp">
|
||||
<h2 class="middle-content-title">资源中心</h2>
|
||||
<h3 class="middle-content-sub-title">聚合常用资源，快速导航，节省开发时间。一站式资源中心，助你高效开发。</h3>
|
||||
</div>
|
||||
|
||||
<!-- 内容 -->
|
||||
<div class="middle-img-box op0" data-animation="animate__animated animate__fadeInLeft">
|
||||
<img @click="handleImg(3)" :src=resourcesImg alt="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 数据库转思维导图 -->
|
||||
<div class="middle-content-big-box">
|
||||
<!-- 标题 -->
|
||||
<div class="middle-content-title-box op0" data-animation="animate__animated animate__fadeInUp">
|
||||
<h2 class="middle-content-title">数据库转思维导图</h2>
|
||||
<h3 class="middle-content-sub-title">数据库表与字段一键转换为Ximd思维导图格式。助力数据结构梳理，轻松可视化，提升工作效率。</h3>
|
||||
</div>
|
||||
|
||||
<!-- 内容 -->
|
||||
<div class="middle-img-box op0" data-animation="animate__animated animate__fadeInRight">
|
||||
<img @click="handleImg(4)" :src=dataBaseImg alt="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 底部内容 -->
|
||||
<div class="bottom-box">
|
||||
|
||||
<!-- gitee源码盒子 -->
|
||||
<div class="gitee-box op0" data-animation="animate__animated animate__lightSpeedInLeft">
|
||||
<div class="gitee-img-box">
|
||||
<img src="https://gitee.com/static/images/logo.svg?t=158106664" alt="">
|
||||
</div>
|
||||
<div class="gitee-content-box">
|
||||
<div class="gitee-content-title">Gitee 源码地址</div>
|
||||
<div class="gitee-content-link">
|
||||
<a class="home-download-button" target="_blank" href="https://gitee.com/zhi-lan_0/aerowen-toolbox">
|
||||
下载源码
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="gitee-box op0" data-animation="animate__animated animate__lightSpeedInRight">
|
||||
<div class="gitee-content-box">
|
||||
<div class="gitee-content-title">GitHub 源码地址</div>
|
||||
<div class="gitee-content-link">
|
||||
<a class="home-download-button" target="_blank" href="https://github.com/Abbh1/AerwenTool">
|
||||
下载源码
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gitee-img-box">
|
||||
<img src="/img/home/icons8-github.gif" alt="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- <Final></Final> -->
|
||||
<Final></Final>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@ -180,10 +30,6 @@ let ImgDetailRef = ref(null)
|
||||
|
||||
/**预对接的数据**/
|
||||
let openImg1 = ref("/img/home/open/open1.png")
|
||||
let openImg = ref("/img/home/open/open2.png")
|
||||
let createTableImg = ref("/img/home/createTable/createTable1.png")
|
||||
let resourcesImg = ref("/img/home/resources/resources1.png")
|
||||
let dataBaseImg = ref("/img/home/mind/mind1.png")
|
||||
|
||||
|
||||
/**js常量的定义**/
|
||||
@ -197,6 +43,8 @@ let dataBaseImg = ref("/img/home/mind/mind1.png")
|
||||
|
||||
|
||||
/**方法函数**/
|
||||
|
||||
// 预览图片
|
||||
function handleImg(v) {
|
||||
ImgDetailRef.value.showImgDetail()
|
||||
imgIdx.value = v
|
||||
@ -206,13 +54,9 @@ function handleImg(v) {
|
||||
|
||||
/**onMounted**/
|
||||
onMounted(() => {
|
||||
imgList.value.push(openImg1.value)
|
||||
imgList.value.push(openImg.value)
|
||||
imgList.value.push(createTableImg.value)
|
||||
imgList.value.push(resourcesImg.value)
|
||||
imgList.value.push(dataBaseImg.value)
|
||||
// imgList.value.push(openImg1.value)
|
||||
|
||||
htmlAddAnimations({ tagDom: 'home-main-box' })
|
||||
// htmlAddAnimations()
|
||||
})
|
||||
/**export**/
|
||||
defineExpose({
|
||||
|
||||
BIN
public/img/icon/logo.png
Normal file
BIN
public/img/icon/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 93 KiB |
Loading…
Reference in New Issue
Block a user