139 lines
2.6 KiB
Vue
139 lines
2.6 KiB
Vue
<script setup lang="ts">
|
||
import { ref, onMounted, onUnmounted, reactive, toRefs, computed } from "vue";
|
||
import VersionTreeIndex from './versionTree/index.vue'
|
||
import GenerateSketch from './generateSketch/index.vue'
|
||
//const props = defineProps({
|
||
//})
|
||
//const emit = defineEmits([
|
||
//])
|
||
let data = reactive({
|
||
})
|
||
const versionTreeData = ref({
|
||
drawer:false,
|
||
list:computed(()=>{
|
||
return []
|
||
})
|
||
})
|
||
const generateData = ref({
|
||
list:[
|
||
{
|
||
id:'1',
|
||
type:'waiting',
|
||
},
|
||
{
|
||
id:'2',
|
||
type:'success',
|
||
img:'/img/success.png',
|
||
},
|
||
{
|
||
id:'3',
|
||
type:'success',
|
||
img:'/img/success.png',
|
||
},
|
||
{
|
||
id:'4',
|
||
type:'success',
|
||
img:'/img/success.png',
|
||
},
|
||
{
|
||
id:'5',
|
||
type:'success',
|
||
img:'/img/success.png',
|
||
},
|
||
{
|
||
id:'6',
|
||
type:'success',
|
||
img:'/img/success.png',
|
||
},
|
||
{
|
||
id:'7',
|
||
type:'success',
|
||
img:'/img/success.png',
|
||
},
|
||
{
|
||
id:'8',
|
||
type:'success',
|
||
img:'/img/success.png',
|
||
},
|
||
{
|
||
id:'9',
|
||
type:'success',
|
||
img:'/img/success.png',
|
||
},
|
||
]
|
||
})
|
||
const generateSketch = ()=>{
|
||
generateData.value.list.push(
|
||
{
|
||
id:'2',
|
||
type:'waiting',
|
||
img:'/img/success.png',
|
||
}
|
||
)
|
||
sketchRestore('2')
|
||
}
|
||
|
||
const sketchRestore = (id)=>{
|
||
generateData.value.list.forEach((item)=>{
|
||
if(item.id == id){
|
||
item.type = 'waiting'
|
||
}
|
||
})
|
||
}
|
||
|
||
onMounted(()=>{
|
||
})
|
||
onUnmounted(()=>{
|
||
})
|
||
defineExpose({})
|
||
const {} = toRefs(data);
|
||
</script>
|
||
<template>
|
||
<div class="homeNavBox">
|
||
<div>
|
||
<el-button type="primary" @click="versionTreeData.drawer = true">open Version Tree</el-button>
|
||
<el-button type="primary" @click="generateSketch">Generate</el-button>
|
||
<!-- <div class="test">
|
||
彩色文字
|
||
</div> -->
|
||
</div>
|
||
<VersionTreeIndex v-model:versionTreeData="versionTreeData" />
|
||
<div class="generateSketchBox">
|
||
<GenerateSketch v-model:generateData="generateData"></GenerateSketch>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<style lang="less" scoped>
|
||
.homeNavBox{
|
||
width: 100%;
|
||
height: 100%;
|
||
position: relative;
|
||
display: flex;
|
||
.test{
|
||
font-size: 100px;
|
||
font-weight: bold;
|
||
|
||
/* 关键步骤1：设置背景图片 */
|
||
background: url('https://img.soogif.com/yUgKq3cRdJeNjcMCK0m8s5g8ApeBakgv.gif');
|
||
background-size: cover;
|
||
|
||
/* 关键步骤2：将背景裁剪到文字形状 */
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
|
||
/* 关键步骤3：将文字颜色设为透明，让背景透出来 */
|
||
color: transparent;
|
||
|
||
/* 确保在Chrome/Safari中生效 */
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
> .generateSketchBox{
|
||
height: 100%;
|
||
width: 50%;
|
||
overflow-y: auto;
|
||
&::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
}
|
||
}
|
||
</style> |