完整代码:
<!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="vue.js"></script>
<link rel="stylesheet" href="css/body.css">
<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 */
</style>
<body>
<div id="box">
<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>
</div>
</body>
</html>