<template>
|
<div>
|
<div class="banner">
|
<img src="../../img/newsBanner.jpg" alt="" class="m_hide">
|
<img src="../../img/xin.jpg" alt="" class="p_hide">
|
</div>
|
<div class="wrapper">
|
<div class="contentTitle">
|
<i class="contentTitle_before"></i>
|
<span v-for="(tab, i) in tabs" :key="i" @click="cur=i" :class="{active:cur==i}">{{tab.name}}</span>
|
<i class="contentTitle_after"></i>
|
</div>
|
|
<div class="tab-content">
|
<div v-show="cur==0">
|
<ul class="news_ul">
|
<router-link to="/dynamicDetail" tag="li">
|
<h3>
|
<img src="../../img/qi1.jpg" alt="">
|
</h3>
|
<div class="news_ul_card">
|
<h2>
|
<span style="display: block;">明科产品质量安全追溯系统解决方案</span>
|
<span>2017-03-08</span>
|
</h2>
|
<p>明科公司面向生产型企业专门研发了一套质量监管系统，针对商品的生产日期、有效期批号等信息，创建唯一可识别条码，进行产品质量追溯，再根据此识别码的包装关联码查询流通过程中的商品流...</p>
|
</div>
|
</router-link>
|
<router-link to="/dynamicDetail" tag="li">
|
<h3>
|
<img src="../../img/qi2.jpg" alt="">
|
</h3>
|
<div class="news_ul_card">
|
<h2>
|
<span style="display: block;">宝时得电商平台项目启动会议隆重举行</span>
|
<span>2017-10-10</span>
|
</h2>
|
<p>9月22日上午，宝时得电商平台项目启动会在苏州厅隆重召开，专业工具营销中心朱总、财务张总、信息化管理部丁总，携项目组团队参加了此次会议。北京明科普华副总经理张富贵携顾问代表4人出席了会议。</p>
|
</div>
|
</router-link>
|
<router-link to="/dynamicDetail" tag="li">
|
<h3>
|
<img src="../../img/qi3.jpg" alt="">
|
</h3>
|
<div class="news_ul_card">
|
<h2>
|
<span style="display: block;">明科售后服务跟踪系统解决方案</span>
|
<span>2017-03-08</span>
|
</h2>
|
<p>明科服务跟踪系统MK-SES 是由明科公司首创的基于自动识别技术的服务系统，它能让企业能够更好的为用户提供更人性化的跟踪服务，并且能有效的降低服务成本。</p>
|
</div>
|
</router-link>
|
|
<router-link to="/dynamicDetail" tag="li">
|
<h3>
|
<img src="../../img/qi4.jpg" alt="">
|
</h3>
|
<div class="news_ul_card">
|
<h2>
|
<span style="display: block;">明科产品质量安全追溯系统解决方案</span>
|
<span>2017-03-08</span>
|
</h2>
|
<p>明科服务跟踪系统MK-SES 是由明科公司首创的基于自动识别技术的服务系统，它能让企业能够更好的为用户提供更人性化的跟踪服务，并且能有效的降低服务成本。</p>
|
</div>
|
</router-link>
|
<router-link to="/dynamicDetail" tag="li">
|
<h3>
|
<img src="../../img/qi5.jpg" alt="">
|
</h3>
|
<div class="news_ul_card">
|
<h2>
|
<span style="display: block;">明科产品质量安全追溯系统解决方案</span>
|
<span>2017-03-08</span>
|
</h2>
|
<p>明科公司面向生产型企业专门研发了一套质量监管系统，针对商品的生产日期、有效期、批号等信息，创建唯一可识别条码，进行产品质量追溯，再根据此识别码的包装关联码，查询流通过程中的商品流向，达到防伪...</p>
|
</div>
|
</router-link>
|
<router-link to="/dynamicDetail" tag="li">
|
<h3>
|
<img src="../../img/qi6.jpg" alt="">
|
</h3>
|
<div class="news_ul_card">
|
<h2>
|
<span style="display: block;">明科产品质量安全追溯系统解决方案</span>
|
<span>2017-03-08</span>
|
</h2>
|
<p>明科公司面向生产型企业专门研发了一套质量监管系统，针对商品的生产日期、有效期、批号等信息，创建唯一可识别条码，进行产品质量追溯，再根据此识别码的包装关联码，查询流通过程中的商品流向，达到防伪...</p>
|
</div>
|
</router-link>
|
</ul>
|
</div>
|
<div v-show="cur==1">
|
<ul class="news_ul">
|
<router-link to="/dynamicDetail" tag="li">
|
<h3>
|
<img src="../../img/qi1.jpg" alt="">
|
</h3>
|
<div class="news_ul_card">
|
<h2>
|
<span style="display: block;">明科产品质量安全追溯系统解决方案</span>
|
<span>2017-03-08</span>
|
</h2>
|
<p>明科公司面向生产型企业专门研发了一套质量监管系统，针对商品的生产日期、有效期批号等信息，创建唯一可识别条码，进行产品质量追溯，再根据此识别码的包装关联码查询流通过程中的商品流...</p>
|
</div>
|
</router-link>
|
<router-link to="/dynamicDetail" tag="li">
|
<h3>
|
<img src="../../img/qi4.jpg" alt="">
|
</h3>
|
<div class="news_ul_card">
|
<h2>
|
<span style="display: block;">明科产品质量安全追溯系统解决方案</span>
|
<span>2017-03-08</span>
|
</h2>
|
<p>明科公司面向生产型企业专门研发了一套质量监管系统，针对商品的生产日期、有效期批号等信息，创建唯一可识别条码，进行产品质量追溯，再根据此识别码的包装关联码查询流通过程中的商品流...</p>
|
</div>
|
</router-link>
|
</ul>
|
</div>
|
<div v-show="cur==2">
|
<ul class="news_ul">
|
<router-link to="/dynamicDetail" tag="li">
|
<h3>
|
<img src="../../img/qi2.jpg" alt="">
|
</h3>
|
<div class="news_ul_card">
|
<h2>
|
<span>明科售后服务跟踪系统解决方案</span>
|
<span>2017-03-08</span>
|
</h2>
|
<p>明科公司面向生产型企业专门研发了一套质量监管系统，针对商品的生产日期、有效期批号等信息，创建唯一可识别条码，进行产品质量追溯，再根据此识别码的包装关联码查询流通过程中的商品流...</p>
|
</div>
|
</router-link>
|
<router-link to="/dynamicDetail" tag="li">
|
<h3>
|
<img src="../../img/qi5.jpg" alt="">
|
</h3>
|
<div class="news_ul_card">
|
<h2>
|
<span>明科售后服务跟踪系统解决方案</span>
|
<span>2017-03-08</span>
|
</h2>
|
<p>明科公司面向生产型企业专门研发了一套质量监管系统，针对商品的生产日期、有效期批号等信息，创建唯一可识别条码，进行产品质量追溯，再根据此识别码的包装关联码查询流通过程中的商品流...</p>
|
</div>
|
</router-link>
|
</ul>
|
</div>
|
<div v-show="cur==3">
|
<ul class="news_ul">
|
<router-link to="/dynamicDetail" tag="li">
|
<h3>
|
<img src="../../img/qi3.jpg" alt="">
|
</h3>
|
<div class="news_ul_card">
|
<h2>
|
<span>明科产品质量安全追溯系统解决方案</span>
|
<span>2017-03-08</span>
|
</h2>
|
<p>明科公司面向生产型企业专门研发了一套质量监管系统，针对商品的生产日期、有效期批号等信息，创建唯一可识别条码，进行产品质量追溯，再根据此识别码的包装关联码查询流通过程中的商品流...</p>
|
</div>
|
</router-link>
|
<router-link to="/dynamicDetail" tag="li">
|
<h3>
|
<img src="../../img/qi6.jpg" alt="">
|
</h3>
|
<div class="news_ul_card">
|
<h2>
|
<span>明科产品质量安全追溯系统解决方案</span>
|
<span>2017-03-08</span>
|
</h2>
|
<p>明科公司面向生产型企业专门研发了一套质量监管系统，针对商品的生产日期、有效期批号等信息，创建唯一可识别条码，进行产品质量追溯，再根据此识别码的包装关联码查询流通过程中的商品流...</p>
|
</div>
|
</router-link>
|
</ul>
|
</div>
|
|
<div class="p_hide" style="margin-bottom: -1rem;"></div>
|
<div style="text-align: center;visibility: hidden;">
|
<el-pagination
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:current-page.sync="currentPage3"
|
:page-size="10"
|
background
|
prev-text="上一页"
|
next-text="下一页"
|
style="display: inline-block;margin: 0.6rem 0;"
|
layout="prev, pager, next, jumper"
|
:total="50">
|
</el-pagination>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
cur: 0,
|
tabs:[
|
{
|
name:'全部'
|
},
|
{
|
name:'企业资讯'
|
},
|
{
|
name:'公司活动'
|
},
|
{
|
name:'解决方案'
|
}
|
],
|
currentPage3: 5,
|
}
|
},
|
methods: {
|
handleSizeChange (val) {
|
console.log(`每页 ${val} 条`);
|
},
|
handleCurrentChange(val) {
|
console.log(`当前页: ${val}`);
|
}
|
},
|
mounted () {
|
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
@media (max-width: 750px) and (min-width: 0) {
|
.wrapper {
|
width: 100%;
|
}
|
.contentTitle {
|
width: 100%;
|
margin-bottom: .2rem;
|
span {
|
display: block;
|
height: .9rem;
|
line-height: .9rem;
|
font-size: .34rem;
|
text-align: center;
|
background-color: #F4F4F4;
|
border-bottom: 0.01rem solid #D7D7D7;
|
}
|
.active {
|
background: #20B7FE;
|
color: #fff;
|
border:none;
|
}
|
}
|
.news_ul {
|
width: 100%;
|
padding: 0.2rem 6% 0;
|
li {
|
margin-bottom: .35rem;
|
h3 {
|
position: relative;
|
span {
|
position: absolute;
|
left: 0.5rem;
|
bottom: 0.1rem;
|
color: #fff;
|
font-size: 0.3rem;
|
}
|
}
|
p {
|
font-size: .24rem;
|
padding: .2rem .25rem .5rem;
|
color:#676767;
|
font-family:PingFang-SC-Regular;
|
font-weight:400;
|
color:rgba(103,103,103,1);
|
line-height:0.44rem;
|
}
|
.news_ul_card {
|
background-color: #F4F4F4;
|
}
|
}
|
h2 {
|
width: 100%;
|
span {
|
display: block;
|
color: #676767;
|
}
|
span:first-child {
|
font-size: .27rem;
|
font-family:PingFang-SC-Bold;
|
font-weight:bold;
|
padding: .2rem 0.2rem 0;
|
}
|
span:nth-child(2) {
|
text-align: right;
|
font-size: .22rem;
|
padding: .2rem 0.2rem 0;
|
}
|
}
|
}
|
.is-background {
|
display: none;
|
}
|
button {
|
width: 50%;
|
margin-left:25%;
|
border: 1px solid #52b6E7;
|
color: #52b6E7;
|
background: #fff;
|
padding: .3rem 0;
|
margin-bottom: .4rem;
|
}
|
}
|
@media (min-width: 751px) {
|
.contentTitle {
|
position: relative;
|
text-align: center;
|
margin: 0.99rem auto;
|
display: flex;
|
width: 30%;
|
span {
|
flex:1;
|
padding: 0.1rem 0.1rem;
|
display: inline-block;
|
font-size: 0.13rem;
|
cursor: pointer;
|
}
|
.contentTitle_before,.contentTitle_after {
|
position: absolute;
|
height: 1px;
|
width: .7rem;
|
background: #999;
|
top: 50%;
|
}
|
.contentTitle_before {
|
left: -.8rem;
|
}
|
.contentTitle_after {
|
right: -.8rem;
|
}
|
}
|
.news_ul {
|
// width: 70%;
|
margin: 0 auto;
|
display: flex;
|
flex-wrap: wrap;
|
li {
|
width: 31.5%;
|
margin-right: .3rem;
|
margin-bottom: .4rem;
|
cursor: pointer;
|
h2 {
|
padding: 0 .11rem;
|
span:first-child{
|
color: #20242A;
|
font-size: 0.15rem;
|
line-height: .3rem;
|
}
|
span:nth-child(2){
|
color:#676767;
|
font-size: 0.11rem;
|
float: right;
|
margin-top: 0.03rem;
|
}
|
}
|
p {
|
padding: 0.14rem 0.11rem;
|
color: #676767;
|
font-size: 0.11rem;
|
line-height: 0.25rem;
|
margin-top: 0.25rem;
|
}
|
}
|
li:nth-child(3n) {
|
margin-right: 0;
|
}
|
h3 {
|
width: 3.6rem;
|
position: relative;
|
overflow: hidden;
|
span {
|
display: inline-block;
|
width: 50%;
|
height: .22rem;
|
position: relative;
|
bottom: 0.29rem;
|
right: 0;
|
color: #fff;
|
text-align: center;
|
}
|
.b_txt {
|
font-size: 0.2rem;
|
position: absolute;
|
top: 43%;
|
left: 26%;
|
}
|
}
|
}
|
|
.news_ul_card {
|
width: 3.6rem;
|
height: 2.2rem;
|
background:rgba(243,243,243,1);
|
padding: 0.2rem 0.1rem 0;
|
}
|
button {
|
display: none;
|
}
|
.is-background {
|
margin: .8rem 3rem;
|
}
|
.active {
|
background: #20B7FE;
|
color: #fff;
|
border:none;
|
}
|
}
|
</style>
|
<style>
|
.el-pagination.is-background .el-pager li {
|
width: 0.3rem;
|
height: 0.3rem;
|
line-height: 0.3rem;
|
}
|
.el-pagination button, .el-pagination span:not([class*="suffix"]) {
|
width: 0.45rem;
|
height: 0.3rem;
|
line-height: 0.3rem;
|
}
|
</style>
|
