This commit is contained in:
李志鹏
2025-10-16 14:49:01 +08:00
parent d2a7b76ec9
commit 3c1baa843e
7 changed files with 58 additions and 20 deletions

View File

@@ -1,6 +1,28 @@
<script setup lang="ts">
import HeaderTitle from '@/components/HeaderTitle.vue'
import FooterNavigation from '@/components/FooterNavigation.vue'
import { ref } from 'vue'
const emit = defineEmits(['viewType'])
const inputText = ref('');
const isLoved = ref(false);
const onSend = () => {
if (inputText.value === '') return
const text = inputText.value
inputText.value = ''
console.log('发送消息:', text)
}
const onLove = () => {
console.log("love")
isLoved.value = !isLoved.value
}
const onReload = () => {
console.log("reload")
}
const onDownload = () => {
console.log("download")
}
</script>
<template>
@@ -10,8 +32,13 @@
<p class="tip">Refine your Look</p>
<div class="input-box">
<div class="help">?</div>
<input type="text" placeholder="Try: “Change background to Tokyo City”" />
<div class="send"><SvgIcon name="send" size="48" /></div>
<input
type="text"
v-model="inputText"
@keyup.enter="onSend"
placeholder="Try: “Change background to Tokyo City”"
/>
<div class="send" @click="onSend"><SvgIcon name="send" size="48" /></div>
</div>
<div class="card">
<img src="@/assets/images/workshop/posture/posture_1.png" />
@@ -21,9 +48,9 @@
<div class="icon"><SvgIcon name="xialajiantou" size="29" /></div>
</div>
<div class="icons">
<div><SvgIcon name="love_0" size="35" /></div>
<div><SvgIcon name="reload" size="35" /></div>
<div><SvgIcon name="download" size="35" /></div>
<div @click="onLove"><SvgIcon :name="`love_${isLoved ? 1 : 0}`" size="35" /></div>
<div @click="onReload"><SvgIcon name="reload" size="35" /></div>
<div @click="onDownload"><SvgIcon name="download" size="35" /></div>
</div>
</div>
</div>
@@ -31,7 +58,6 @@
</template>
<style scoped lang="less">
.customize {
width: 100%;
position: relative;
@@ -95,7 +121,7 @@
height: 107.4rem;
border-radius: 2rem;
// box-shadow: 1.3rem 1.4rem 2rem 0.2rem #0000004d;
border: 0.2rem solid #D9D9D9;
border: 0.2rem solid #d9d9d9;
overflow: hidden;
> * {
position: absolute;

View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref, onMounted, inject } from 'vue'
import { ref, reactive, onMounted, inject } from 'vue'
import HeaderTitle from '@/components/HeaderTitle.vue'
import FooterNavigation from '@/components/FooterNavigation.vue'
const emit = defineEmits(['view-type'])
@@ -8,12 +8,24 @@
emit('view-type', 1)
})
const list = reactive([
{ id: 1, userID: '1111111111', datetime: '7/22/2025 18:20', lastopened: '18:20' },
{ id: 2, userID: '2222222222', datetime: '7/22/2025 18:20', lastopened: '18:20' },
{ id: 3, userID: '3333333333', datetime: '7/22/2025 18:20', lastopened: '18:20' },
{ id: 4, userID: '4444444444', datetime: '7/22/2025 18:20', lastopened: '18:20' },
{ id: 5, userID: '5555555555', datetime: '7/22/2025 18:20', lastopened: '18:20' },
{ id: 6, userID: '6666666666', datetime: '7/22/2025 18:20', lastopened: '18:20' },
{ id: 7, userID: '7777777777', datetime: '7/22/2025 18:20', lastopened: '18:20' },
{ id: 8, userID: '8888888888', datetime: '7/22/2025 18:20', lastopened: '18:20' },
{ id: 9, userID: '9999999999', datetime: '7/22/2025 18:20', lastopened: '18:20' },
{ id: 10, userID: '0000000000', datetime: '7/22/2025 18:20', lastopened: '18:20' }
])
const onRetrieveItem = (i: number) => {
console.log('检索' + i)
}
const deleteItem = (i: number) => {
console.log('删除' + i)
list.splice(i, 1)
}
</script>
@@ -22,14 +34,14 @@
<div class="library">
<div class="title">Library</div>
<div class="list">
<div class="item" v-for="i in 10" :key="i">
<div class="item" v-for="(v, i) in list" :key="v.id">
<div class="image">
<img src="@/assets/images/workshop/posture/posture_1.png" />
</div>
<div class="content">
<span class="userID">User ID: 1234567890</span>
<span class="datetime">7/22/2025 18:20</span>
<span class="lastopened">Last opened 18:20</span>
<span class="userID">User ID: {{ v.userID }}</span>
<span class="datetime">{{ v.datetime }}</span>
<span class="lastopened">Last opened {{ v.lastopened }}</span>
<button @click="onRetrieveItem(i)">Retrieve</button>
</div>
<div class="delete" @click="deleteItem(i)"><SvgIcon name="delete2" size="30" /></div>
@@ -65,7 +77,6 @@
right: -40rem;
background: linear-gradient(88.42deg, #ffffff 32.58%, #d9d9d9 94.9%);
transform: rotate(-45deg);
}
> .title {