Vue导航页面-工具盒子

<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue导航页面</title>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        .search{
            margin: auto;
            width: 600px;
            height: 400px;
        }
        .searchBox{
            margin: 150px auto 0 auto;
            width: 400px;
            height: 35px;
            overflow: hidden;
            border: 2px solid #c4c7ce;
            border-radius: 15px;
        }
        .searchLeft{
            width: 15px;
            height: 35px;
            float: left;
        }
        input{
            height: 33px;
            width: 317px;
            float: left;
            font-size: 16px;
            border-radius: 0;
            border-style: none;
            outline: none;
        }
        .searchButton{
            width: 62px;
            height: 35px;
            background-color: #a917d3;
            border: #a917d3 solid 1px;
            float: left;
            color: white;
            text-align: center;
            line-height: 33px;
        }
        .searchButton:hover{
            cursor: pointer;
        }
        .nav{
            margin: 10px auto;
            width: 336px;
            height: 51px;
        }
        .navInfo{
            float: left;
            margin: 8px 5px 8px 5px;
            width: 100px;
            height: 35px;
            border-radius: 20px;
            text-align: center;
            line-height: 35px;
            border: 1px solid #c4c7ce;
        }
        .navInfo:hover{
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="search" id="root">
        <div class="searchBox">
            <div class="searchLeft"></div>
            <input v-model="text" type="text" @keyup.enter="goSearch">
            <div class="searchButton" @click ="goSearch">搜索</div>
        </div>
        <div class="nav">
            <div class="navInfo" :style={backgroundColor:baiduStyle} @click="baidu">百度</div>
            <div class="navInfo" :style={backgroundColor:BzStyle} @click="Bz">哔哩哔哩</div>
            <div class="navInfo" :style={backgroundColor:ByStyle} @click="By">必应</div>
        </div>
    </div>
</body>
<script>
    const vm = new Vue({
        el:'#root',
        data:{
            link:"https://www.baidu.com/s?wd=",
            text:"",
            baiduStyle:"",
            BzStyle:"",
            ByStyle:"",
        },
        methods:{
            goSearch(){
                open(this.link + this.text);
            },
            baidu(){
                this.baiduStyle = "#c4c7ce";
                this.BzStyle = "";
                this.ByStyle = "";
                this.link = "https://www.baidu.com/s?wd=";
            },
            Bz(){
                this.baiduStyle = "";
                this.BzStyle = "#c4c7ce";
                this.ByStyle = "";
                this.link = "https://search.bilibili.com/all?keyword=";
            },
            By(){
                this.baiduStyle = "";
                this.BzStyle = "";
                this.ByStyle = "#c4c7ce";
                this.link = "https://cn.bing.com/search?q=";
            }
        }
    })
</script>
</html>
界面展示
图片[1]-Vue导航页面-挨踢星球
51工具盒子

Vue导航页面

厉飞雨

相关推荐

最新文章

猜你喜欢

快捷分类
