github/cool-admin-vue
1
0
Fork 0
mirror of https://github.com/cool-team-official/cool-admin-vue.git synced 2025-12-13 14:12:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

优化

Browse Source
This commit is contained in:
神仙都没用 2025-02-22 10:46:04 +08:00
parent 0a36286b57
commit dd56052406
1 changed files with 28 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/modules/helper/components/ai-code/btn.vue
View File

@ -1,29 +1,33 @@
<template> <template>
<div class="cl-comm__icon" @click="toCode"> <div class="cl-comm__icon" @click="toCode">
<div class="t1"><cl-svg name="quick" class="mr-2" /> {{ $t("AI极速编码") }}</div> <cl-svg name="quick" class="icon" />
<div class="t1">{{ $t('AI极速编码') }}</div>
<div class="t2">Start</div> <div class="t2">Start</div>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { useCool } from "/@/cool"; import { useCool } from '/@/cool';
const { router } = useCool(); const { router } = useCool();
function toCode() { function toCode() {
router.push("/helper/ai-code"); router.push('/helper/ai-code');
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.cl-comm__icon { .cl-comm__icon {
width: auto; width: auto;
font-size: 14px;
line-height: 1;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
width: 120px; width: 120px;
.icon {
position: absolute;
left: 8px;
}
.t1, .t1,
.t2 { .t2 {
display: flex; display: flex;
@ -31,7 +35,12 @@ function toCode() {
justify-content: center; justify-content: center;
transition: top 0.5s; transition: top 0.5s;
letter-spacing: 1px; letter-spacing: 1px;
position: absolute;
width: 100%;
padding-left: 18px;
top: 50%;
left: 0;
transform: translateY(-50%);
background: linear-gradient(to right, #9f9f9f 0, #fff 10%, #868686 20%); background: linear-gradient(to right, #9f9f9f 0, #fff 10%, #868686 20%);
background-position: 0; background-position: 0;
-webkit-background-clip: text; -webkit-background-clip: text;
@ -39,32 +48,28 @@ function toCode() {
animation: shine 3s infinite linear; animation: shine 3s infinite linear;
animation-fill-mode: forwards; animation-fill-mode: forwards;
-webkit-text-size-adjust: none; -webkit-text-size-adjust: none;
} font-size: 13px;
line-height: 1;
.t1 {
position: absolute;
width: 100%;
top: 50%;
left: 0;
transform: translateY(-50%);
} }
.t2 { .t2 {
position: absolute;
width: 100%;
top: 150%; top: 150%;
left: 0;
transform: translateY(-50%);
} }
&:hover .t1 { &:hover {
.icon {
color: var(--el-color-primary);
}
.t1 {
top: -100%; top: -100%;
} }
&:hover .t2 { .t2 {
top: 50%; top: 50%;
} }
} }
}
@keyframes shine { @keyframes shine {
0% { 0% {