fe / mars-static · Commits

Go to a project

Authored by 李靖
Commit 02f1862a22b0afc3ef3c867361bcec81a5b0284d 1 parent 2dca33d2

店铺mip

Inline Side-by-side
Showing 2 changed files with 903 additions and 0 deletions
<!DOCTYPE html>
<html mip>
<head>
<meta charset="utf-8">
<title></title>
<meta name="keywords" content="">
<meta name="description" content="">
<link rel="stylesheet" type="text/css" href="https://mipcache.bdstatic.com/static/v1/mip.css">
<link rel="stylesheet" href="../../src/css/mip/mip-shop-detail.css">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<link rel="canonical" href="http://www.yohomars.com/share/store/1"/>
</head>
<body>
<div class="shop-detail-page">
<div class="banner">
<div class="banner-main">
<mip-img class="shop-pic" layout="container" src="http://img01.yohomars.com/mars/2015/11/27/ee86451cb03411868a969fd336f76eb7.jpg"></mip-img>
<div class="shop-log">
<mip-img layout="container" src="http://img01.yohomars.com/mars/2015/12/20/bde1ed2c74d4149f4bab7f8af83159de.jpg"></mip-img>
</div>
<div class="star">
<div class="star-item active"></div>
<div class="star-item active"></div>
<div class="star-item active"></div>
<div class="star-item"></div>
<div class="star-item"></div>
</div>
<p class="tag">简餐</p>
</div>
</div>
<div class="shop-info">
<p class="en eps-1">Green&Safe</p>
<p class="ch eps-1">徐汇店</p>
<p class="tip">“品尝美妙生活品尝美妙生活品尝美妙生活品尝美妙生活品尝美妙生活品尝美妙”</p>
<p class="open-time">营业时间：9:00~21:00</p>
<div class="price">
人均消费：<span>CNY</span>1000/人
</div>
<p class="web eps-1">www.muji.com</p>
<div class="adr">
<i></i>
<span>徐汇区漕溪路126号宜家家居1楼(近中山西路)徐汇区漕溪路126号宜家家居1楼(近中山西路)</span>
</div>
<div class="adr tel">
<i></i>
<span>
<a href="tel:{{+86-25-3647374947}}">+86-25-3647374947</a>
<a href="tel:{{+86-25-3647374947}}">+86-25-3647374947</a>
</span>
</div>
<div class="des">正宗法餐，主厨是09年香港米其林推荐餐厅的主厨，美食精致而细腻。法国菜是西餐中最有地位的菜是西方文化的一颗明珠。法国菜的特点是选料广泛，用料新鲜，滋味鲜美，讲究色、香、味、形的配合，花式品种繁多，重用牛肉蔬菜禽类海鲜和水果，特别是蜗牛、黑菌、蘑菇、芦笋、洋百合和龙虾。法国菜肴通常烧得比较生，调味喜用酒。</div>
</div>
<div class="wh-box">
<div class="top">
<div class="title eps-1">WHAT TO EAT NOW</div>
<div class="s-title">
<div>限定酷套餐</div>
</div>
</div>
<div class="eat-list one">
<div class="eat-item">
<div class="pic">
<mip-img layout="container" src="http://imgmars.yohobuy.com/mars/2018/01/01/0a5790343cfe30423474df498ab0e62c.png"></mip-img>
</div>
<div class="info">
<p class="name eps-2">Vivienne Westwood GET A LIFE</p>
<p class="price epx-1">
<span class="span-1">CNY</span>
<span class="span-2">346/</span>
<span class="span-3">2人</span>
<span class="span-4">500</span>
</p>
</div>
</div>
<div class="eat-item">
<div class="pic">
<mip-img layout="container" src="http://imgmars.yohobuy.com/mars/2018/01/01/0a5790343cfe30423474df498ab0e62c.png"></mip-img>
</div>
<div class="info">
<p class="name eps-2">Vivienne Westwood GET A LIFE</p>
<p class="price epx-1">
<span class="span-1">CNY</span>
<span class="span-2">346/</span>
<span class="span-3">2人</span>
<span class="span-4">500</span>
</p>
</div>
</div>
</div>
</div>
<div class="wh-box">
<div class="top">
<div class="title eps-1">WHY WE LIKE IT</div>
<div class="s-title">
<div>探索亮点</div>
</div>
</div>
<div class="exploration">
<div class="exploration-item">
<p>111111小时候最常吃的快餐就是大汉堡啦！虽然是垃圾食品不过偶尔吃一次，享受一下大口啖肉的感觉。</p>
<mip-img layout="container" src="http://img01.yohomars.com/mars/2015/12/25/8cfc4fe90dca2fb5fe5f44be85e44e9b.jpg"></mip-img>
<mip-img layout="container" src="http://img01.yohomars.com/mars/2015/12/25/8cfc4fe90dca2fb5fe5f44be85e44e9b.jpg"></mip-img>
</div>
<mip-accordion class="more-container" sessions-key="mip_3" animatetime='0.24'>
<section>
<div class="get-more">
<span class="show-more">显示更多</span>
<span class="show-less">收起</span>
</div>
<div class="mip-accordion-content">
<div class="exploration-item">
<p>222222小时候最常吃的快餐就是大汉堡啦！虽然是垃圾食品不过偶尔吃一次，享受一下大口啖肉的感觉。</p>
<mip-img layout="container" src="http://img01.yohomars.com/mars/2015/12/25/8cfc4fe90dca2fb5fe5f44be85e44e9b.jpg"></mip-img>
<mip-img layout="container" src="http://img01.yohomars.com/mars/2015/12/25/8cfc4fe90dca2fb5fe5f44be85e44e9b.jpg"></mip-img>
</div>
</div>
</section>
</mip-accordion>
</div>
</div>
<a class="act-add" href="http://www.yohomars.com/download/index">
<i></i>
有活动在举办？来提交吧
</a>
<div class="wh-box">
<div class="top">
<div class="title eps-1">WHAT WE DO
<i></i>
</div>
<div class="s-title">
<div>潮流活动</div>
</div>
</div>
<div class="act-list">
<div>
<div class="act-item">
<div class="pic">
<mip-img layout="container" src="http://imgmars.yohobuy.com/mars/2018/01/01/0a5790343cfe30423474df498ab0e62c.png"></mip-img>
<div class="tag">音乐演出</div>
</div>
<div class="info">
<p class="act-name eps-2">Vivienne Westwood GET A LIFE</p>
<p class="place eps-1">九龙湾国际展贸中心</p>
<p class="time-limit eps-1">4月2日结束</p>
</div>
</div>
<div class="act-item">
<div class="pic">
<mip-img layout="container" src="http://imgmars.yohobuy.com/mars/2018/01/01/0a5790343cfe30423474df498ab0e62c.png"></mip-img>
<div class="tag">音乐</div>
</div>
<div class="info">
<p class="act-name eps-2">Vivienne Westwood GET A LIFE</p>
<p class="place eps-1">九龙湾国际展贸中心</p>
<p class="time-limit eps-1">4月2日结束</p>
</div>
</div>
</div>
<a class="more-act-list">查看更多&nbsp;&gt;</a>
</div>
</div>
<div class="wh-box need-to-known">
<div class="top">
<div class="title eps-1">WHAT YOU NEED TO KNOW</div>
<div class="s-title">
<div>城市热评</div>
</div>
</div>
<div class="know-list">
<div class="know-item">
<div class="line"></div>
<div class="left-part">
<mip-img layout="container" src="http://imgmars.yohobuy.com/mars/2017/11/12/eec7d84603a0a4e1130c28b632f6c7a8.png"></mip-img>
</div>
<div class="right-part">
<div class="name">POLE</div>
<div class="time">
4小时前
</div>
<div class="star">
<div class="star-item active"></div>
<div class="star-item active"></div>
<div class="star-item active"></div>
<div class="star-item"></div>
<div class="star-item"></div>
</div>
<div class="price">
<span>CNY</span>1000/人
</div>
<div class="container">
<p>埃利亚松的作品并非一个单一的平面或立体，而是一种整体的感受，他的作品在不断唤醒观众</p>
<div class="pic one">
<mip-img layout="container" src="http://imgmars.yohobuy.com/mars/2018/01/01/0a5790343cfe30423474df498ab0e62c.png"></mip-img>
</div>
</div>
</div>
</div>
<div class="know-item">
<div class="line"></div>
<div class="left-part">
<mip-img layout="container" src="http://imgmars.yohobuy.com/mars/2017/11/12/eec7d84603a0a4e1130c28b632f6c7a8.png"></mip-img>
</div>
<div class="right-part">
<div class="name">POLE</div>
<div class="time">
4小时前
</div>
<div class="star">
<div class="star-item active"></div>
<div class="star-item active"></div>
<div class="star-item active"></div>
<div class="star-item"></div>
<div class="star-item"></div>
</div>
<div class="price">
<span>CNY</span>1000/人
</div>
<div class="container">
<p>埃利亚松的作品并非一个单一的平面或立体，而是一种整体的感受，他的作品在不断唤醒观众</p>
<div class="pic">
<mip-img layout="container" src="http://imgmars.yohobuy.com/mars/2018/01/01/0a5790343cfe30423474df498ab0e62c.png"></mip-img>
</div>
<div class="pic">
<mip-img layout="container" src="http://imgmars.yohobuy.com/mars/2018/01/01/0a5790343cfe30423474df498ab0e62c.png"></mip-img>
</div>
<div class="pic">
<mip-img layout="container" src="http://imgmars.yohobuy.com/mars/2018/01/01/0a5790343cfe30423474df498ab0e62c.png"></mip-img>
</div>
<div class="pic">
<mip-img layout="container" src="http://imgmars.yohobuy.com/mars/2018/01/01/0a5790343cfe30423474df498ab0e62c.png"></mip-img>
</div>
</div>
</div>
</div>
</div>
</div>
<a class="more-comment" title="前往mars查看更多热评" href="http://www.yohomars.com/download/index">前往mars查看更多热评</a>
<a class="download" title="app下载" href="http://a.app.qq.com/o/simple.jsp?pkgname=com.yohobuy.mars"></a>
</div>
</body>
<mip-cambrian site-id="1583402501013173"></mip-cambrian>
<script src="https://mipcache.bdstatic.com/static/v1/mip.js"></script>
<script src="https://mipcache.bdstatic.com/static/v1/mip-stats-baidu/mip-stats-baidu.js"></script>
<script src="https://mipcache.bdstatic.com/static/v1/mip-anim/mip-anim.js"></script>
<script src="https://mipcache.bdstatic.com/static/v1/mip-audio/mip-audio.js"></script>
<script src="https://mipcache.bdstatic.com/extensions/platform/v1/mip-cambrian/mip-cambrian.js"></script>
<script src="https://c.mipcdn.com/static/v1/mip-accordion/mip-accordion.js"></script>
</html>
\ No newline at end of file
... ...
* {
padding: 0;
margin: 0;
border: 0;
text-decoration: none;
vertical-align: middle;
font-family: "PingFang SC", miui, system-ui, -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, sans-serif;
box-sizing: border-box;
}
html,
body {
background-color: #556f48;
}
.eps-1 {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.eps-2 {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
/* stylelint-disable-next-line */
mip-img {
display: block;
margin: 0 auto;
max-width: 100%;
border: 0;
}
.shop-detail-page {
width: 100%;
max-width: 750px;
margin: 0 auto;
overflow: hidden;
position: relative;
padding-bottom: 21%;
}
.shop-detail-page .banner {
width: 100%;
padding-top: 42%;
position: relative;
}
.shop-detail-page .banner .banner-main {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.shop-detail-page .banner .shop-pic {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.shop-detail-page .banner .shop-log {
position: absolute;
left: 50%;
bottom: -12%;
margin-left: -11.5%;
width: 23%;
padding-top: 23%;
}
/* stylelint-disable-next-line */
.shop-detail-page .banner .shop-log mip-img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
border: solid 4px #c5c5c5;
}
.shop-detail-page .star {
margin-top: 2%;
padding-right: 2%;
position: relative;
line-height: 0;
font-size: 0;
text-align: right;
}
.shop-detail-page .star .star-item {
margin-left: 1%;
width: 4%;
padding-top: 3%;
background-image: url("https://www.yohomars.com/mobile/img/store/share/crown-n.png");
background-size: 100% 100%;
display: inline-block;
}
.shop-detail-page .star .star-item.active {
background-image: url("https://www.yohomars.com/mobile/img/store/share/crown.png");
}
.shop-detail-page .banner .tag {
position: absolute;
right: 2%;
bottom: 3%;
color: #fff;
font-size: 18px;
}
.shop-info {
padding: 5% 4% 0;
text-align: center;
color: #1a1a1a;
background-color: #fff;
padding-bottom: 10px;
}
.shop-info .en {
font-weight: bold;
margin-top: 10px;
line-height: 40px;
font-size: 28px;
height: 40px;
}
.shop-info .ch {
line-height: 30px;
font-size: 20px;
height: 30px;
}
.shop-info .tip {
margin-top: 15px;
font-size: 14px;
padding: 0 10%;
line-height: 22px;
}
.shop-info .open-time {
margin-top: 10px;
line-height: 35px;
font-size: 16px;
}
.shop-info .price {
line-height: 35px;
font-size: 16px;
}
.shop-info .price span {
font-weight: bold;
vertical-align: initial;
font-size: 17px;
}
.shop-info .web {
line-height: 35px;
font-size: 16px;
}
.shop-info .adr {
margin-top: 15px;
text-align: left;
color: #89b374;
font-size: 0;
line-height: 0;
clear: both;
width: 100%;
min-height: 20px;
}
.shop-info .adr i {
line-height: 22px;
width: 4%;
padding-top: 5.5%;
background-size: 100% 100%;
background-image: url("https://www.yohomars.com/mobile/img/store/share/map-icon.png");
margin-right: 4%;
display: inline-block;
}
.shop-info .adr span {
width: 92%;
display: inline-block;
font-size: 14px;
line-height: 22px;
}
.shop-info .tel i {
padding-top: 3.5%;
background-image: url("https://www.yohomars.com/mobile/img/store/share/tel-icon.png");
}
.shop-info .tel a {
color: #89b374;
font-size: 16px;
margin-right: 10px;
}
.shop-info .des {
margin-top: 20px;
font-size: 14px;
line-height: 20px;
text-align: left;
}
.wh-box {
margin-top: 15px;
clear: both;
}
.wh-box .top {
background-color: #fff;
}
.wh-box .top .title {
color: #1a1a1a;
text-align: center;
height: 40px;
line-height: 40px;
font-weight: bold;
font-size: 20px;
position: relative;
}
.wh-box .top .title i {
position: absolute;
top: 10px;
right: 4%;
width: 20px;
height: 20px;
background-image: url("https://www.yohomars.com/mobile/img/store/share/activity-add.png");
background-size: 100% 100%;
}
.wh-box .top .s-title {
height: 20px;
line-height: 20px;
background-color: #1a1a1a;
text-align: center;
}
.wh-box .top .s-title div {
background-color: #fff;
display: inline-block;
color: #1a1a1a;
font-size: 12px;
vertical-align: super;
padding: 0 5px;
}
.exploration {
background-color: #fff;
}
.exploration-item {
border-bottom: solid 1px #f0f0f0;
}
.exploration .exploration-item p {
line-height: 20px;
font-size: 16px;
padding: 15px 4%;
}
/* stylelint-disable-next-line */
.exploration .exploration-item mip-img {
margin-bottom: 15px;
}
.shop-detail-page .act-add {
display: block;
width: 90%;
height: 40px;
line-height: 40px;
text-align: center;
background: #1a1a1a;
margin: 20px auto 0;
color: #fff;
font-size: 14px;
}
.eat-list {
background-color: #fff;
overflow-y: hidden;
overflow-x: scroll;
line-height: 0;
font-size: 0;
white-space: nowrap;
}
.eat-list.one .eat-item {
width: 70%;
}
.eat-list .eat-item {
width: 100%;
padding: 3%;
display: inline-block;
}
/* stylelint-disable-next-line */
.eat-list .eat-item mip-img {
width: 90px;
height: 90px;
float: left;
margin-right: 3%;
}
.eat-list .eat-item .info .name {
font-size: 18px;
line-height: 20px;
height: 40px;
white-space: normal;
}
.eat-list .eat-item .info .price {
margin-bottom: 20px;
line-height: 30px;
height: 30px;
}
.eat-list .eat-item .info .span-1 {
font-weight: bold;
font-size: 14px;
}
.eat-list .eat-item .info .span-2 {
font-size: 16px;
color: #89b374;
}
.eat-list .eat-item .info .span-3 {
font-size: 14px;
color: #89b374;
}
.eat-list .eat-item .info .span-4 {
font-size: 14px;
text-decoration: line-through;
color: #b0b0b0;
}
.act-list {
width: 100%;
background-color: #fff;
float: left;
}
.act-list .act-item {
width: 100%;
float: left;
padding: 3%;
padding-left: 0;
margin-left: 3%;
border-bottom: solid 1px #e0e0e0;
}
.act-list .act-item .tag {
background-color: #556f48;
text-align: center;
min-width: 55px;
color: #fff;
line-height: 24px;
font-size: 12px;
padding: 0 3px;
position: absolute;
top: 0;
left: 0;
}
.act-list .act-item .pic {
position: relative;
width: 132px;
height: 80px;
float: left;
margin-right: 3%;
}
.act-list .act-item:last-child {
border-bottom: 0;
}
.act-list .act-item .info {
height: 100%;
}
.act-list .act-item .info .act-name {
font-weight: bold;
font-size: 16px;
line-height: 20px;
height: 40px;
}
.act-list .act-item .info .place {
font-size: 14px;
line-height: 20px;
height: 20px;
}
.act-list .more-act-list {
clear: both;
display: block;
text-align: center;
font-size: 12px;
line-height: 30px;
}
.act-list .act-item .info .time-limit {
font-size: 12px;
color: #b0b0b0;
line-height: 20px;
height: 20px;
}
/* stylelint-disable-next-line */
.act-list .act-item .pic mip-img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
.shop-detail-page .act-add i {
width: 20px;
height: 20px;
display: inline-block;
background-image: url("https://www.yohomars.com/mobile/img/store/share/activity-add-w.png");
background-size: 100% 100%;
margin-right: 5px;
}
.need-to-known .top .title {
background-color: #556f48;
color: #fff;
}
.need-to-known .top .s-title {
background-color: #fff;
}
.need-to-known .top .s-title div {
background-color: #556f48;
color: #fff;
}
.know-list {
padding: 5% 3% 0;
line-height: 0;
font-size: 0;
}
.know-list .know-item {
position: relative;
margin-bottom: 15px;
}
.know-list .know-item .line {
width: 2px;
height: 100%;
background: -webkit-linear-gradient(top, #ccc, #556f48);
position: absolute;
top: 0;
left: 4.5%;
}
.know-list .left-part {
vertical-align: top;
display: inline-block;
width: 10%;
}
/* stylelint-disable-next-line */
.know-list .left-part mip-img {
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
border: solid 2px #ccc;
}
.know-list .right-part {
display: inline-block;
width: 85%;
background-color: #fff;
padding: 2.5%;
margin-left: 5%;
font-size: 20px;
line-height: 24px;
}
.right-part .name {
font-weight: bold;
font-size: 18px;
width: 70%;
float: left;
}
.right-part .time {
width: 30%;
float: left;
color: #b0b0b0;
font-size: 14px;
text-align: right;
}
.right-part .star {
text-align: left;
width: 35%;
float: left;
line-height: 35px;
margin-top: 0;
}
.right-part .star .star-item {
margin-left: 4%;
width: 16%;
padding-top: 12%;
line-height: 35px;
}
.right-part .price {
float: left;
line-height: 35px;
font-size: 16px;
}
.right-part .price span {
font-weight: bold;
vertical-align: initial;
font-size: 17px;
}
.right-part .container {
line-height: 0;
font-size: 0;
}
.right-part .container p {
width: 100%;
clear: both;
font-size: 14px;
line-height: 20px;
padding: 10px 0;
}
.right-part .container .pic {
margin: 0 1.5% 3%;
width: 30%;
padding-top: 30%;
position: relative;
display: inline-block;
}
.right-part .container .pic.one {
margin: 0 1.5% 3%;
width: 90%;
padding-top: 90%;
position: relative;
display: inline-block;
}
/* stylelint-disable-next-line */
.right-part .container .pic mip-img {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
@media (min-width: 750px) {
.shop-detail-page .download {
display: none !important;
}
}
.shop-detail-page .download {
position: fixed;
left: 0;
right: 0;
bottom: 0;
width: 100%;
padding-top: 21%;
display: block;
background-image: url("https://cdn.yoho.cn/mars-static/1.0.10/images/area/download.a18b6e.png");
background-size: 100% 100%;
}
.shop-detail-page .more-container {
position: relative;
padding-bottom: 40px;
}
.shop-detail-page .get-more {
width: 100%;
font-size: 14px;
background-color: #e8e8e8;
line-height: 40px;
position: absolute;
text-align: center;
left: 0;
bottom: 0;
right: 0;
}
.shop-detail-page .get-more .show-more:after {
content: "";
width: 0;
height: 0;
border-left: solid 5px transparent;
border-right: solid 5px transparent;
border-top: solid 5px #1a1a1a;
position: absolute;
margin-top: 17px;
margin-left: 5px;
}
.shop-detail-page .get-more .show-less:after {
content: "";
width: 0;
height: 0;
border-left: solid 5px transparent;
border-right: solid 5px transparent;
border-bottom: solid 5px #1a1a1a;
position: absolute;
margin-top: 17px;
margin-left: 5px;
}
.shop-detail-page .more-comment {
display: block;
text-align: center;
color: #fff;
font-size: 14px;
}
... ...