master

分支 (1)

管理

管理

master

vue-web-navigation
/
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="./assets/icon.ico" type="image/x-icon">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/index.css">
    <title>233导航</title>
</head>

<body>
    <div id="app">
        <div class="left-nav">
            <div class="head-image" :style="{backgroundImage:'url('+settings.headImage+')'}"></div>
        </div>
        <div class="main-container">

            <div class="center-container">
                <!-- 搜索框部分 -->
                <div class="search-box" v-if="settings.searchEngine">
                    <!-- 搜索建议框 -->
                    <div class="advice_box" v-if="advices.length>0">
                        <div :class="index === advice_selected?'selected':''" class="advice_item" @mouseenter="advice_selected = index" v-for="advice,index in advices" @click="advice_clicked(index)">
                            {{advice}}</div>
                    </div>
                    <!-- 选择搜索引擎 -->
                    <div :class="show_engine_box?'show':'hide'" class="engine-box" @blur='hideEngineBox(30)' tabindex="0" hidefocus="true" v-show="show_engine_box === true">
                        <div class="engine" v-for="engine,id in getEngines()" @click="settings.searchEngine.selected = id;hideEngineBox()">
                            <div class="icon" :style="{backgroundImage:'url('+engine.icon+')',backgroundColor:engine.mainColor}"></div>
                            <div class="name" >{{engine.name}}</div>
                        </div>
                        <div class="engine not_show" v-for="i in 4"></div>
                    </div>
                    <!-- 搜索框左侧图标 -->
                    <div class="search-engins" :style="{backgroundColor:getSelectedEngine().mainColor}"
                        @click="show_engine_box?hideEngineBox():showEngineBox()">
                        <!-- @click="show_engine_box?hideEngineBox():showEngineBox()"> -->
                        <div class="selected-icon" :style="{backgroundImage:'url('+getSelectedEngine().icon+')'}"></div>
                        <div class="engine-name" :style="{color:getSelectedEngine().textColor}">
                            {{getSelectedEngine().name}}</div>
                        <div class="show-more"></div>
                    </div>
                    <!-- 搜索框主体 -->
                    <input id="search-input" autocomplete="off" onkeydown="return input_keydown(event)"  oninput="showAdvice()" />
                    <!-- 搜索按钮 -->
                    <div class="search-btn" @click="search()"></div>
                </div>
                <!-- 网站列表部分 -->
                <div class="sites-container">
                    <div class="second-kind" v-for="kind_val,kind_name,_ in sitesData">
                        <div class="kind-name">
                            <div class="icon" :style="{backgroundImage:'url('+kind_val.icon+')'}"></div>
                            <div class="name">{{kind_name}}</div>
                        </div>
                        <div class="sites-box">
                            <div @click="open(site_val.url)" class="site-box" v-for="site_val in kind_val.data">
                                <div class="icon" :data-original="site_val.icon">
                                </div>
                                <div class="info">
                                    <div class="name">{{site_val.name}}</div>
                                    <div class="describe">{{site_val.describe}}</div>
                                </div>
                            </div>
                            <div class="site-box not_show" v-for="i in 10"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</body>
<footer>
    <script src="./js/vue3.js"></script>
    <script src="./js/jquery.min.js"></script>
    <script src="./js/jquery.lazyload.min.js"></script>
    <script src="./js/utils.js"></script>
    <script src="./js/index.js"></script>
</footer>

</html>