<!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>
【Vue】实现置顶菜单div卡片切换效果(图文+完整源代码)
猜你喜欢
转载自blog.csdn.net/dxnn520/article/details/124803877
今日推荐
周排行