sketch生成基础结构
This commit is contained in:
X1627315083@163.com
164
src/views/home/generateSketch/generateItem.vue
Normal file
164
src/views/home/generateSketch/generateItem.vue
Normal file
@@ -0,0 +1,164 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
|
||||
const props = defineProps({
|
||||
item: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
} as any,
|
||||
})
|
||||
const emit = defineEmits([
|
||||
'sketchRestore','sketchDelete'
|
||||
])
|
||||
let data = reactive({
|
||||
})
|
||||
|
||||
const morePopoverRef = ref(null)
|
||||
const handleClick = ()=>{
|
||||
morePopoverRef.value?.hide()
|
||||
}
|
||||
|
||||
const sketchRestore = ()=>{
|
||||
emit('sketchRestore')
|
||||
handleClick()
|
||||
}
|
||||
const sketchDelete = ()=>{
|
||||
emit('sketchDelete')
|
||||
handleClick()
|
||||
}
|
||||
|
||||
onMounted(()=>{
|
||||
})
|
||||
onUnmounted(()=>{
|
||||
})
|
||||
defineExpose({})
|
||||
const {} = toRefs(data);
|
||||
</script>
|
||||
<template>
|
||||
<div class="generateItem">
|
||||
<div v-if="item.type === 'waiting'" class="waitingItem">
|
||||
等待
|
||||
<!-- <el-spinner style="display: inline-block;" /> -->
|
||||
</div>
|
||||
|
||||
<div v-else-if="item.type === 'success'" class="successItem">
|
||||
<img :src="item.img" alt="">
|
||||
<div class="more">
|
||||
<el-popover
|
||||
width="10rem"
|
||||
min-width="10rem"
|
||||
ref="morePopoverRef"
|
||||
trigger="click"
|
||||
popper-class="moreBox"
|
||||
placement="bottom-end"
|
||||
>
|
||||
<template #reference>
|
||||
<span class="icon"><svg-icon name="more" size="25" /></span>
|
||||
</template>
|
||||
<template #default>
|
||||
<div class="item" @click="sketchRestore">
|
||||
<div class="icon">
|
||||
<SvgIcon name="sketchRestore" size="14" />
|
||||
</div>
|
||||
<span>{{ $t('generateSketch.restore') }}</span>
|
||||
</div>
|
||||
<div class="item delete" @click="sketchDelete">
|
||||
<div class="icon">
|
||||
<SvgIcon name="sketchDelete" size="14" />
|
||||
</div>
|
||||
<span>{{ $t('generateSketch.delete') }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-popover>
|
||||
</div>
|
||||
<div class="edit" @click="$emit('edit')">
|
||||
<span>{{ $t('generateSketch.edit') }}</span>
|
||||
<div class="icon">
|
||||
<SvgIcon name="generateSketchEdit" size="7" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="less">
|
||||
.el-popover.el-popper.moreBox{
|
||||
border-radius: 1rem;
|
||||
padding: .6rem .7rem;
|
||||
min-width: 10rem;
|
||||
.item{
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
border-radius: .4rem;
|
||||
align-items: center;
|
||||
padding: .6rem .7rem;
|
||||
margin-bottom: 1.2rem;
|
||||
&.delete{
|
||||
margin-bottom: 0rem;
|
||||
color: #ff4747;
|
||||
}
|
||||
&:hover{
|
||||
background-color: #f6f6f6;
|
||||
}
|
||||
> .icon{
|
||||
margin-right: .7rem;
|
||||
}
|
||||
> span{
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
font-size: 1.3rem;
|
||||
line-height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="less" scoped>
|
||||
.generateItem{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
> div{
|
||||
position: relative;
|
||||
}
|
||||
> .waitingItem,.successItem{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
> .successItem{
|
||||
> .more{
|
||||
position: absolute;
|
||||
top: 1.2rem;
|
||||
right: 1.2rem;
|
||||
transition: all .3s;
|
||||
border-radius: .3rem;
|
||||
&:hover{
|
||||
background-color: #e8e8e8;
|
||||
}
|
||||
.icon{
|
||||
width: 2.4rem;
|
||||
height: 2.4rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
> .edit{
|
||||
position: absolute;
|
||||
bottom: 1rem;
|
||||
right: 1rem;
|
||||
border-radius: 2rem;
|
||||
border: 2px solid #e5e5e5;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: .65rem 1.2rem;
|
||||
cursor: pointer;
|
||||
> span{
|
||||
margin-right: .6rem;
|
||||
font-weight: 500;
|
||||
font-size: 1.4rem;
|
||||
line-height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
52
src/views/home/generateSketch/index.vue
Normal file
52
src/views/home/generateSketch/index.vue
Normal file
@@ -0,0 +1,52 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
|
||||
import GenerateItem from './generateItem.vue'
|
||||
|
||||
const props = defineProps({
|
||||
generateData:{
|
||||
type:Object,
|
||||
default:()=>{
|
||||
return {
|
||||
list:[]
|
||||
}
|
||||
},
|
||||
},
|
||||
})
|
||||
//const emit = defineEmits([
|
||||
//])
|
||||
let data = reactive({
|
||||
})
|
||||
onMounted(()=>{
|
||||
})
|
||||
onUnmounted(()=>{
|
||||
})
|
||||
defineExpose({})
|
||||
const {} = toRefs(data);
|
||||
</script>
|
||||
<template>
|
||||
<div class="generateSketch">
|
||||
<div v-for="item in generateData.list" :key="item.id" class="item">
|
||||
<GenerateItem :item="item" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.generateSketch{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
gap: 1.2rem;
|
||||
.item{
|
||||
width: calc((100% - 1.2rem * 3) / 4);
|
||||
//设置比例属性 1 / 1
|
||||
aspect-ratio: 1 / 1;
|
||||
background-color: #fff;
|
||||
border-radius: 1.6rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user