287 lines
7.3 KiB
HTML
287 lines
7.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
|
|
<link rel="stylesheet" type="text/css" href="css/vant.css" />
|
|
<!--<link rel="stylesheet" href="../../js/mz/font-awesome-4.7.0/css/font-awesome.css" />-->
|
|
|
|
<title>三清冲剂</title>
|
|
<style type="text/css">
|
|
body,
|
|
html {
|
|
|
|
line-height: 1.1rem;
|
|
font-size: .5rem;
|
|
color: #878787;
|
|
}
|
|
|
|
img {
|
|
vertical-align: bottom;
|
|
}
|
|
|
|
img,
|
|
div {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.container {
|
|
display: flex;
|
|
max-width: 500px;
|
|
margin: 0 auto;
|
|
background-color: #33a243;
|
|
}
|
|
|
|
.main {
|
|
position: relative;
|
|
width: 13rem;
|
|
height: 88vh;
|
|
padding: .7rem;
|
|
margin-top: .8rem;
|
|
margin-left: .5rem;
|
|
background-color: #ededed;
|
|
border-radius: .5rem 0 .5rem .5rem;
|
|
z-index: 10;
|
|
}
|
|
|
|
|
|
.main .cd {
|
|
height: calc(100% - .5rem);
|
|
box-sizing: border-box;
|
|
overflow: auto;
|
|
}
|
|
|
|
.main .cd img {
|
|
width: 100%;
|
|
margin-top: .3rem;
|
|
}
|
|
|
|
.fw_box {
|
|
position: relative;
|
|
padding: 0 .2rem;
|
|
}
|
|
|
|
.fw_box .code {
|
|
position: absolute;
|
|
top: 7.8rem;
|
|
left: 3.5rem;
|
|
font-size: .5rem;
|
|
transform: scale(.8);
|
|
}
|
|
|
|
.main .cd .tab1_4 {
|
|
width: 7rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.main .cd .tab1_5 {
|
|
padding: 0 .5rem;
|
|
}
|
|
|
|
.line {
|
|
display: flex;
|
|
margin-bottom: .3rem;
|
|
}
|
|
|
|
.line>div:first-child {
|
|
margin-right: .2rem;
|
|
flex-shrink: 0;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.line2 {
|
|
text-align: center;
|
|
margin-bottom: .2rem;
|
|
color: #afafaf;
|
|
}
|
|
|
|
.sy_msg {
|
|
position: relative;
|
|
}
|
|
|
|
.sy_msg .address {
|
|
position: absolute;
|
|
top: 10.4rem;
|
|
left: .3rem;
|
|
width: 10.5rem;
|
|
height: 6rem;
|
|
/* background-color: violet;
|
|
opacity: .6; */
|
|
}
|
|
|
|
.pb20 {
|
|
margin-bottom: .2rem;
|
|
}
|
|
|
|
|
|
|
|
.right {
|
|
position: relative;
|
|
left: -0.05rem;
|
|
width: calc(100% - 13rem);
|
|
height: 90vh;
|
|
box-sizing: border-box;
|
|
margin-top: .8rem;
|
|
padding-right: .6rem;
|
|
}
|
|
|
|
.right .item {
|
|
width: 100%;
|
|
margin-bottom: .3rem;
|
|
}
|
|
|
|
.right .item img {
|
|
width: 100%;
|
|
padding-left: .2rem;
|
|
}
|
|
|
|
.right .item .active {
|
|
background-color: #ededed;
|
|
border-radius: 0 .3rem .3rem 0;
|
|
}
|
|
|
|
.map_item {
|
|
height: 2rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.map_item1 {
|
|
height: 2.5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-top: .5rem solid #F4F4F4;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
[v-cloak] {
|
|
display: none;
|
|
}
|
|
|
|
|
|
|
|
.bottom_icon {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 100%;
|
|
max-width: 500px;
|
|
}
|
|
|
|
.border-bottom {
|
|
border-bottom: 1px solid #d4d4d4;
|
|
}
|
|
|
|
.padding_all_30 {
|
|
padding: .3rem;
|
|
}
|
|
|
|
.padding_rl_30 {
|
|
padding-left: .3rem;
|
|
padding-right: .3rem;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container" id="app" v-cloak>
|
|
<img src="./images/green_bottom.png" alt="" class="bottom_icon" />
|
|
<div class="main">
|
|
<div class="cd" v-if="active==0" style="text-align: center;">
|
|
<div class="fw_box">
|
|
<img src="./images/tab1_1.png" />
|
|
<div class="code">溯源编码:{{code}}</div>
|
|
</div>
|
|
<img src="./images/tab1_2.png" @click="showImg" data-url="./images/tab1_2.png" />
|
|
<img src="./images/tab1_3.png" class="tab1_5" style="margin-top: 1rem;" />
|
|
</div>
|
|
<div class="cd" v-if="active==1">
|
|
<img src="./images/tab2_1.jpg" @click="showImg" data-url="./images/tab2_1.jpg" />
|
|
<div class="border-bottom padding_all_30">
|
|
<div class="line" v-for="(item,index) in productMsg" v-key="index">
|
|
<div>{{item.title}}</div>
|
|
<div>{{item.msg}}</div>
|
|
</div>
|
|
</div>
|
|
<div class="padding_all_30" style="margin-top: .2rem;">
|
|
产品介绍:<br />
|
|
立健是一个专注于肠道调养的健康品牌,立健牌三清冲剂是国家食品药品监督管理局批准的首批益生元类保健产品。<br />
|
|
<br />
|
|
益生元与肠道健康:<br />
|
|
益生元,国际学名一一双岐因子,是肠道益生菌的最佳!食物”来源,能为肠道益生菌提供充足营养。益生元的生理功能是通过促进肠道内益生菌特别是双歧杆菌的大量增殖,有效抑制肠道内有害菌的生长,平衡肠道菌群环境,促进肠道蠕动,保持肠道年轻态。
|
|
</div>
|
|
</div>
|
|
<div class="cd" v-if="active==2">
|
|
<img src="./images/tab3_1.png" />
|
|
<div class="border-bottom padding_all_30">
|
|
<div class="line2">检验机构:华测检测认证集团股份有限公司</div>
|
|
<div class="line2">报告编号:qbs88888888</div>
|
|
</div>
|
|
<img src="./images/tab3_2.png" style="padding: 0 20rpx;" @click="previewReport" />
|
|
</div>
|
|
|
|
<div class="cd" v-if="active==3">
|
|
<div class="padding_all_30" style="padding-bottom: 0;">
|
|
<div class="line " v-for="(item,index) in syMsg" v-key="index">
|
|
<div>{{item.title}}</div>
|
|
<div>{{item.msg}}</div>
|
|
</div>
|
|
</div>
|
|
<div class="sy_msg">
|
|
<img src="./images/tab4_1.jpg" style="margin-top: 0;" />
|
|
<div class="address" @click="openAddress"></div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="cd" v-if="active==4">
|
|
<div class="padding_all_30">
|
|
<div class="pb20">
|
|
立健是一个专注于肠道养护的健康品牌,立健三清冲剂是国家食品药品监督管理局批准的首批保健食品、新华网大型科普栏目《健康解码》推荐产品。</div>
|
|
<div class="pb20"> 产品中的异麦芽低聚糖纯度高达90%,能改善胃肠道功能,有效调理肠道菌群环境,保持肠道健康,是国内同类产品的佼佼者。
|
|
</div>
|
|
<div class="pb20">
|
|
目前,立健三清冲剂已成功进入全国大中型医药连锁及时尚品连锁店渠道,在电商平台已初具规模,并已逐渐向美容品和童婴市场延伸。<br>
|
|
</div>
|
|
</div>
|
|
<img src="./images/tab5_1.png" style="margin-top: 0;" @click="showImg" data-url="./images/tab5_1.png" />
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="right">
|
|
<div class="item" v-for="(item,index) in btns" @click="changeBtn(index)">
|
|
<img :src="item.img1" v-if="index!==active">
|
|
<img :src="item.img" v-if="index===active" class="active">
|
|
</div>
|
|
</div>
|
|
|
|
<van-action-sheet v-model="mapShow" title="">
|
|
<div class="map_content">
|
|
<div class="map_item" @click="getMapApp('腾讯地图')">腾讯地图</div>
|
|
<div class="map_item1" @click="mapShow=false">取消</div>
|
|
</div>
|
|
</van-action-sheet>
|
|
</div>
|
|
</body>
|
|
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
|
|
<script src="js/vue.min.js"></script>
|
|
<script src="js/vant.min.js"></script>
|
|
<script src="js/rem.js"></script>
|
|
<script type="text/javascript" src="js/url.js"></script>
|
|
<script type="text/javascript">
|
|
$(function() {
|
|
loadJS('js/green.js');
|
|
})
|
|
</script>
|
|
</html>
|