You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
91 lines
2.3 KiB
91 lines
2.3 KiB
<template>
|
|
<div class="written-wrapper">
|
|
<ScrollView class="word-scroll" scroll-x :list="wordsList">
|
|
<div class="word-content">
|
|
<div class="word" @click="handleWord(item, index)" :class="{ active: wordIdx === index }" v-for="(item, index) of wordsList" :key="item">{{ item }}</div>
|
|
</div>
|
|
</ScrollView>
|
|
<Written @result="getWordList" :width="552" :height="196" background-color="#ffffff" fill-font-size="48px" fill-style="rgba(0, 0, 0, 0.02)" stroke-style="#516DD8" />
|
|
<div class="del" @click="del">
|
|
<img src="../../assets/images/search/del.svg" class="del-icon" alt="" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
import Written from '../Written/Written.vue'
|
|
import ScrollView from '@/base/ScrollView/ScrollView.vue'
|
|
|
|
const wordsList = ref([])
|
|
function getWordList(list) {
|
|
wordsList.value = list
|
|
}
|
|
|
|
const emits = defineEmits(['handle-word', 'del'])
|
|
const wordIdx = ref(-1)
|
|
const timer = ref(null)
|
|
function handleWord(item, index) {
|
|
clearTimeout(timer.value)
|
|
wordIdx.value = index
|
|
emits('handle-word', item)
|
|
timer.value = setTimeout(() => {
|
|
wordIdx.value = -1
|
|
clearTimeout(timer.value)
|
|
}, 300)
|
|
}
|
|
|
|
function del() {
|
|
emits('del')
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.written-wrapper {
|
|
position: relative;
|
|
width: 552px;
|
|
height: 252px;
|
|
background: #ffffff;
|
|
border-radius: 12px;
|
|
margin-top: 16px;
|
|
overflow: hidden;
|
|
.word-scroll {
|
|
position: relative;
|
|
height: 56px;
|
|
background: #ffffff;
|
|
box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.04);
|
|
.word-content {
|
|
display: inline-block;
|
|
white-space: nowrap;
|
|
}
|
|
.word {
|
|
display: inline-block;
|
|
width: 66px;
|
|
height: 56px;
|
|
text-align: center;
|
|
line-height: 56px;
|
|
font-weight: 700;
|
|
font-size: 18px;
|
|
font-family: 'font_bold';
|
|
color: rgba(0, 0, 0, 0.6);
|
|
&.active {
|
|
color: #fff;
|
|
background: linear-gradient(113.71deg, #435acd 0%, #749cf3 100%);
|
|
}
|
|
}
|
|
}
|
|
.del {
|
|
position: absolute;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 104px;
|
|
height: 48px;
|
|
right: 8px;
|
|
bottom: 8px;
|
|
background: rgba(0, 0, 0, 0.05);
|
|
box-shadow: inset 0px -1px 0px rgba(177, 189, 220, 0.1);
|
|
border-radius: 8px;
|
|
}
|
|
}
|
|
</style>
|
|
|