408 lines
9.6 KiB
HTML
408 lines
9.6 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>loading...</title>
|
|
<style type="text/css">
|
|
body,
|
|
html {
|
|
|
|
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 .row {
|
|
position: absolute;
|
|
bottom: 20px;
|
|
display: flex;
|
|
}
|
|
|
|
.fw_box .row .row-left {
|
|
width: 30%;
|
|
padding: 0 0 0 5px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.fw_box .row .row-right {
|
|
padding: 18px 0 0 5px;
|
|
text-align: left;
|
|
width: 70%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.fw_box .row .row-right .code {
|
|
line-height: 10px;
|
|
font-size: 8px;
|
|
}
|
|
|
|
.fw_box .row .row-right .quality {
|
|
line-height: 15px;
|
|
font-size: 12px;
|
|
color: green;
|
|
}
|
|
|
|
.fw_box .row .row-right .product {
|
|
line-height: 10px;
|
|
font-size: 8px;
|
|
}
|
|
|
|
.fw_box img.product-image {
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.center {
|
|
text-align: center;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
.separator {
|
|
width: 53px !important;
|
|
height: 2px !important;
|
|
margin: 20px auto !important;
|
|
display: block;
|
|
}
|
|
.content-section {
|
|
border-bottom: 1px dotted #666;
|
|
margin-bottom: 10px;
|
|
padding: 0 0 10px 10px;
|
|
}
|
|
.content-section .title {
|
|
color: #aaa;
|
|
margin-bottom: 10px;
|
|
}
|
|
.w-70 {
|
|
width: 80% !important;
|
|
}
|
|
.mx-auto {
|
|
display: block;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
.brand-info-title {
|
|
margin: 18px 0;
|
|
display: block;
|
|
text-align: center;
|
|
font-size: 0.6rem;
|
|
font-weight: bold;
|
|
color: #555;
|
|
}
|
|
img.icon {
|
|
margin: 0 3px 0 0 !important;
|
|
width: 10px !important;
|
|
height: 13px !important;
|
|
}
|
|
div.indented {
|
|
padding-left: 16px;
|
|
}
|
|
|
|
</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/head-bg-1.png" />
|
|
<div class="row">
|
|
<div class="row-left">
|
|
<img class="product-image" :src="get_property('产品图片')" />
|
|
</div>
|
|
<div class="row-right">
|
|
<div class="product">
|
|
{{ info.product }}
|
|
</div>
|
|
<div class="quality">
|
|
通过了QBS4000质量评价
|
|
</div>
|
|
<div class="code">溯源编码:{{code}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<img src="./images/green-dashed-separator.png" class="separator" />
|
|
<img src="./images/general-info.png" class="general-info" />
|
|
</div>
|
|
<div class="cd" v-if="active==1">
|
|
<img :src="get_property('产品图片')" class="w-70 mx-auto" @click="showImg" />
|
|
<img src="./images/green-dashed-separator.png" class="separator" />
|
|
<div class="content-section">
|
|
<div class="title">
|
|
产品名称 / Product name
|
|
</div>
|
|
<div class="content">
|
|
{{ info.product }}
|
|
</div>
|
|
</div>
|
|
<div class="content-section">
|
|
<div class="title">
|
|
产品型号 / Product model
|
|
</div>
|
|
<div class="content">
|
|
{{ get_property('产品型号') }}
|
|
</div>
|
|
</div>
|
|
<div class="content-section">
|
|
<div class="title">
|
|
产品类别 / Product Category
|
|
</div>
|
|
<div class="content">
|
|
{{ get_property('产品类别') }}
|
|
</div>
|
|
</div>
|
|
<div class="padding_all_30" style="margin-top: .2rem;">
|
|
</div>
|
|
</div>
|
|
<div class="cd" v-if="active==2">
|
|
<img src="./images/cert-1.png" />
|
|
<img src="./images/green-dashed-separator.png" class="separator" />
|
|
<img :src="get_property('检测报告')" @click="showImg" />
|
|
<img src="./images/green-dashed-separator.png" class="separator" />
|
|
<div class="center">
|
|
点击查看完整检测报告
|
|
</div>
|
|
</div>
|
|
<div class="cd" v-if="active==3">
|
|
<div class="content-section">
|
|
<div class="title">
|
|
<img src="images/house-icon.png" class="icon" alt=""/>
|
|
生产企业 / manufacturing enterprise
|
|
</div>
|
|
<div class="content indented">
|
|
{{ get_property('生产企业') }}
|
|
</div>
|
|
</div>
|
|
<div class="content-section">
|
|
<div class="title">
|
|
<img src="images/pos-icon.png" class="icon" alt=""/>
|
|
生产地址 / production address
|
|
</div>
|
|
<div class="content indented">
|
|
{{ get_property('生产地址') }}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<img src="./images/green-dashed-separator.png" class="separator" />
|
|
<img :src="get_property('位置图片')" @click="openAddress" />
|
|
</div>
|
|
</div>
|
|
<div class="cd" v-if="active==4">
|
|
<div class="content-section">
|
|
<div class="brand-info-title">
|
|
正规企业信用信息
|
|
</div>
|
|
<img :src="get_property('营业执照')" @click="showImg" />
|
|
<img src="./images/green-dashed-separator.png" class="separator" />
|
|
<div class="center">
|
|
点击查看完整企业信息
|
|
</div>
|
|
</div>
|
|
<div class="content-section">
|
|
<div class="brand-info-title">
|
|
商标注册信息
|
|
</div>
|
|
<img :src="get_property('商标信息')" @click="showImg" />
|
|
<img src="./images/green-dashed-separator.png" class="separator" />
|
|
<div class="center">
|
|
点击查看完整商标信息
|
|
</div>
|
|
</div>
|
|
</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>
|