for_client/src/views/home/index.vue

<template>
    <div class="home-styles-box">
        <div class="hc-home-bg-box">
            <img v-if="HomeTheme.bg" id="imagebox" :src="HomeTheme.bg" alt="" crossOrigin="anonymous">
        </div>
        <div class="hc-home-input-box">
            <div class="hc-home-content">
                <div class="hc-slogan-icon">
                    <img class="logo" :src="ImgText3" alt="">
                </div>
                <SearchInput v-model="searchKey" placeholder="请输入您想查找的内容" @input="SearchKeyInput" />
                <div class="home-link-box">
                    <span>他们都在搜索：</span>
                    <div class="home-link">
                        <router-link to="/data-fill/wbs">资料填报</router-link>
                    </div>
                    <div class="home-link">
                        <router-link to="/data-fill/query">资料查询</router-link>
                    </div>
                    <div class="home-link">
                        <router-link to="/ledger/query">日志填报</router-link>
                    </div>
                    <div class="home-link">
                        <router-link to="/schedule/data">资料进度</router-link>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useAppStore } from '~src/store'
import SearchInput from '~com/home/SearchInput.vue'
import ImgText3 from '~src/assets/view/text-3.png'

//变量
const useAppState = useAppStore()
const HomeTheme = ref(useAppState.getHomeTheme)

//监听
watch(() => [
    useAppState.getHomeTheme,
], ([theme]) => {
    HomeTheme.value = theme
})

//搜索
const searchKey = ref('')
const SearchKeyInput = (value) => {
    searchKey.value = value
}
</script>

<style lang="scss" scoped>
@import "../../styles/view/home.scss";
</style>

<style lang="scss">
.home-link a {
    color: inherit;
    text-decoration: none;
}
</style>