【Vue】实现置顶菜单div卡片切换效果（图文+完整源代码）

编程语言 2022-05-16 22:24:50 阅读次数: 0 

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商家界面</title>
</head>
<script type="text/javascript" src="js/vue/vue.js"></script>
<link rel="stylesheet" href="css/body.css">
<link href="js/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<style>
    /* #region === 【商家头像区】 === */
    .top {
        background-color: white;
        margin-top: 10px;
    }

    .top_1 {

        height: 70px;
        display: flex;
        flex-direction: row;
        /* background-color: beige; */

    }

    .top_1_left {
        width: 0;
        flex-grow: 25;
        text-align: center;
        /* background-color: aquamarine; */
    }

    .top_1_left img {
        width: 65spx;
        height: 65px;
        margin-top: 2.5px;
    }

    .top_1_right {
        width: 0;
        flex-grow: 75;
        display: flex;
        flex-direction: column;
        /* background-color: blueviolet; */
    }

    .top_1_right_1 {
        height: 0;
        flex-grow: 40;
        font-size: 18px;
        font-weight: bold;
        line-height: 35px;
        /* background-color: yellow; */
    }

    .top_1_right_2 {
        height: 0;
        flex-grow: 30;
        font-size: 12px;
        color: rgb(74, 74, 74);
        line-height: 25px;
        /* background-color: rgb(211, 251, 214); */
    }

    .top_1_right_3 {
        height: 0;
        flex-grow: 30;
        font-size: 12px;
        color: rgb(74, 74, 74);
        /* background-color: rgb(247, 191, 247); */
    }

    /* #endregion */

    /* #region === 【商家按钮】 === */

    .top_2 {
        height: 40px;
        padding-left: 5px;
        color: rgb(78, 78, 78);
        /* background-color: rgb(249, 249, 239); */
    }

    .top_2_1 {
        float: left;
        border: 1px rgb(235, 234, 234) solid;
        padding-left: 12px;
        padding-right: 12px;
        padding-bottom: 3px;
        padding-top: 3px;
        border-radius: 4px;
        font-size: 12px;
        margin-left: 10px;
        margin-top: 15px;
        /* background-color: greenyellow; */
    }

    .top_2_1 i {
        margin-right: 5px;
        font-size: 13px;
    }

    /* #endregion */

    /* #region === 【会员卡】=== */

    .vip_card {
        margin: 0 auto;
        margin-top: 12px;
        width: 93%;
        height: 40px;
        background-color: rgb(255, 243, 235);
        border-radius: 8px;
        display: flex;
        flex-direction: row;
    }

    .vip_card_1 {
        width: 0;
        flex-grow: 7.5;
        /* background-color: aquamarine; */
    }

    .vip_card_2 {
        width: 0;
        flex-grow: 2.5;
        /* background-color: #fc0518; */
        line-height: 42px;
        font-size: 14px;
        text-align: right;
        color: rgb(249, 9, 1);
    }

    .vip_card_3 {
        width: 0;
        flex-grow: 0.8;
        line-height: 40px;
        font-size: 20px;
        text-align: center;
        color: rgb(249, 9, 1, 0.7);
        /* background-color: blue; */
    }

    /* 标签 */
    .csj_label {
        margin-left: 12px;
        margin-top: 8px;
        display: inline-block;
        width: auto;
        height: 20px;
        border: 0.8px rgb(249, 9, 1) solid;
        font-size: 13px;
        padding-left: 5px;
        padding-right: 5px;
        padding-top: 1px;
        padding-bottom: 1px;
        color: rgb(255, 2, 2);
        border-radius: 3px;
        line-height: 22px;

        /* transform: scale(0.8); */
        /* transform-origin: 0 0; */
    }

    /* #endregion */

    /* #region === 【置顶菜单】 === */
    .center_menu {
        margin-top: 15px;
        height: 60px;
        background-color: rgb(246, 246, 246);
        padding-left: 12px;
        line-height: 60px;
        overflow: hidden;
        /* font-weight: ; */
    }

    .center_menu_label {
        float: left;
        margin-left: 25px;
        color: rgb(117, 117, 117);
        /* font-weight: 500; */

    }

    /* #endregion  */


    /* #region === 【点餐页面】 === */

    .center_card_1 {
        width: 100%;
        height: 200px;
        text-align: center;
        line-height: 200px;
        background-color: aquamarine;
    }

    .center_card_2 {
        width: 100%;
        height: 200px;
        text-align: center;
        line-height: 200px;
        background-color: rgb(252, 255, 214);
    }

    .center_card_3 {
        width: 100%;
        height: 200px;
        text-align: center;
        line-height: 200px;
        background-color: rgb(193, 220, 250);
    }

    .center_card_4 {
        width: 100%;
        height: 200px;
        text-align: center;
        line-height: 200px;
        background-color: rgb(241, 149, 149);
    }


    /* #endregion  */
</style>

<body>
    <div id="app">

        <!-- 头部区 -->
        <div class="top">
            <!-- 商家头像区 -->
            <div class="top_1">
                <div class="top_1_left">
                    <img src="images/shop/shop_1_logo.png">
                </div>
                <div class="top_1_right">
                    <div class="top_1_right_1">华莱士·全鸡汉堡（张飞店）</div>
                    <div class="top_1_right_2">邯郸市丛台区天天路335号</div>
                    <div class="top_1_right_3">营业时间：8:00-18:00</div>
                </div>
            </div>
            <!-- 商家按钮区 -->
            <div class="top_2">
                <div class="top_2_1">
                    <div>
                        <i class="fa fa-map-marker"></i> 到这去<br />
                    </div>
                </div>
                <div class="top_2_1"><i class="fa fa-jpy"></i>到店支付</div>
                <div class="top_2_1"><i class="fa fa-diamond"></i>经营资质</div>
                <div class="top_2_1"><i class="fa fa-phone"></i>客服</div>
            </div>
            <!-- 商家会员卡区 -->
            <div class="top_3">

                <!-- 会员卡 -->
                <div class="vip_card">

                    <div class="vip_card_1">

                        <div class="csj_label">
                            充1000 返100
                        </div>
                        <div class="csj_label">
                            充5000 返500
                        </div>

                    </div>

                    <div class="vip_card_2">会员卡充值</div>
                    <div class="vip_card_3">
                        <i class="fa fa-angle-right"></i>
                    </div>

                </div>
            </div>
        </div>

        <!-- 置顶菜单 -->
        <div class="center_menu">

            <div v-for="item in menu_name" class="center_menu_label"
                 @click="menu_tab(item.id)"
                :style="{color: item.color,fontWeight:item.weight}">
                {
   
   {item.name}}
            </div>

        </div>

        <!-- 菜单显示页 -->

        <!-- 店内点餐 -->

        <div v-show="menu_name[0].isShow===1" class="center_card_1">
            card_1:点餐
        </div>
        <div v-show="menu_name[1].isShow===1" class="center_card_2">
            card_2:外卖
        </div>
        <div v-show="menu_name[2].isShow===1" class="center_card_3">
            card_3:网店
        </div>
        <div v-show="menu_name[3].isShow===1" class="center_card_4">
            card_4:会员卡
        </div>



    </div>
</body>
<script type="text/javascript">
    var box = new Vue({
        el: "#app",
        data: {
            menu_name: [
                {
                    id: "0",
                    name: "点餐",
                    color: "black",
                    // color:"rgb(117, 117, 117)",
                    weight: "800",
                    isShow: 1,

                },
                {
                    id: "1",
                    name: "外卖",
                    color: "rgb(117, 117, 117)",
                    weight: "100",
                    isShow: 0,
                },
                {
                    id: "2",
                    name: "网店",
                    color: "rgb(117, 117, 117)",
                    weight: "100",
                    isShow: 0,
                },
                {
                    id: "3",
                    name: "会员卡",
                    color: "rgb(117, 117, 117)",
                    weight: "100",
                    isShow: 0,
                },
            ],
            name: "菜单名"
        },
        methods: {
            menu_tab(id) {

                this.menu_name.forEach((item) => {

                    if (item.id === id) {
                        item.isShow=1;
                        item.color="black";
                        item.weight="800";
                    }
                    else{
                        item.isShow=0;
                        item.color="rgb(117, 117, 117)";
                        item.weight="100";
                    }
                });

            },
        }
    })
</script>

</html>

猜你喜欢

转载自blog.csdn.net/dxnn520/article/details/124803877
今日推荐
富文本编辑器 Quill 2.0 重磅发布，特性、可靠性与开发者体验大幅提升
“开源信徒”周鸿祎开源360智脑大模型
周排行
Ubuntu 14.04 下Fuel6.0安装部署
香港一小巴侧翻致1死16伤 警方：未见机件故障
pikachu--XSS盲打
阅读 深入理解JVM虚拟机笔记一
java.sql.SQLException: ORA-00932: 数据类型不一致: 应为 -, 但却获得 CLOB
oracle delete all object under an user
[LeetCode]20 Valid Parentheses 有效的括号
树形DP求树的直径 【模板】
Context propagation over HTTP in Go
【PAT】（B）1053 住房空置率 (20)*
每日归档
更多
2024-04-18(0)
2024-04-17(5)
2024-04-16(70)
2024-04-15(42)
2024-04-14(0)
2024-04-13(119)
2024-04-12(38)
2024-04-11(14)
2024-04-10(68)
2024-04-09(5)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022