for_client/src/views/home/index.vue

<template>
    <div class="home-styles-box">
        <div class="hc-home-input-box">
            <div class="hc-home-content">
                <div class="hc-slogan-icon">
                    <img class="logo" :src="ImgText1" alt="" @click="getImgText(2)" v-if="ImgTextIndex === 1">
                    <img class="logo" :src="ImgText2" alt="" @click="getImgText(3)" v-if="ImgTextIndex === 2">
                    <img class="logo" :src="ImgText3" alt="" @click="getImgText(1)" v-if="ImgTextIndex === 3">
                </div>
                <SearchInput placeholder="请输入您想查找的内容" v-model="searchKey" @input="SearchKeyInput"/>
                <div class="home-link-box">
                    <span>他们都在搜索：</span>
                    <div class="home-link">资料填报</div>
                    <div class="home-link">资料查询</div>
                    <div class="home-link">操作手册</div>
                    <div class="home-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 ImgText1 from "~src/assets/view/text-1.png";
import ImgText2 from "~src/assets/view/text-2.png";
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
}

//切换图标
const ImgTextIndex = ref(3)
const getImgText = (index) => {
    ImgTextIndex.value = index
}

</script>

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