增加新闻分页

king

2021-02-18 7e1e46ff062dcffe4549da8892fed754fa768594

 src/views/successCase/caseSolution.vue

@@ -1,131 +1,36 @@
<template>
   <div id="wrap">
      <div class="banner" style="margin-bottom: 1rem;">
         <img src="../../img/solve.png" alt="" class="m_hide">
         <img src="../../img/jiejue.png" alt="" class="p_hide">
         <img src="../../img/solve.jpg" alt="">
      </div>
      <div class="wrapper">
         <div class="content_title"><span>数字化解决方案</span></div>
         <p class="p_txt">AI与IoT技术最终会将物理世界改造为万物互联世界，同时建立一个全新的数字化世界。基于自身核心的AI算法能力与软硬件结合能力，明科面向核心应用场景，构建了仓储物流、智能制造和商城营销三大业务体系，同时也通过开放基础人工智能算法赋能开发者实现应用创新。</p>
         <div class="content_title" v-if="title"><span v-text="title"></span></div>
         <p class="p_txt" v-text="description"></p>
         <div class="content_solution">
            <dl class="solution_box">
            <dl class="solution_box" v-for="(item, index) in datalist" :key="index">
               <dt class="solution_box_in">
                  <h3><span>仓储物流</span></h3>
                  <router-link to="/caseDetail" style="margin-right: 0.3rem;">
                     <p style="line-height: 0.22rem;">综合了软件系统、 条码应用、硬件系统、无线网络、系统扩展接 口等多种技术，通过无线移动终端设备，智能信息化应用渗透到仓库作业的每个细节及仓库现场</p>
                  </router-link>
                  <h3><span v-text="item.SubjClasName"></span></h3>
                  <p style="line-height: 0.22rem; margin-right: 0.3rem;font-size: 0.16rem;" v-text="item.Remark"></p>
                  <div class="title">
                     <router-link to="/caseDetail" style="margin-right: 0.3rem;">智慧仓储</router-link>
                     <router-link to="/caseDetail" style="margin-right: 0.3rem;">供应商协同</router-link>
                     <router-link to="/caseDetail">经销商管理</router-link>
                     <a href="javascript:;" style="margin-right: 0.3rem;" v-for="(menu, i) in item.Subject" :key="i"
                        v-text="menu.Title1" @click="jumpmenu(menu)"></a>
                  </div>
               </dt>
               <dd>
                  <img src="../../img/cang.png" alt="">
               </dd>
            </dl>
            <dl class="solution_box">
               <dt class="solution_box_in">
                  <h3><span>智能制造</span></h3>
                  <router-link to="/caseDetail" style="margin-right: 0.3rem;">
                     <p style="line-height: 0.22rem;">企业要实现智能制造，必须要先实现自动化，要实现自动化，就要实现人与设备的交互，由人远程操控 或者由设备自动感应运行，并通过人机交互减少人为操作，实现生产自动化</p>
                  </router-link>
                  <div class="title">
                     <router-link to="/caseDetail" style="margin-right: 0.3rem;">智能制造</router-link>
                     <router-link to="/caseDetail">质量追溯</router-link>
                  </div>
               </dt>
               <dd>
                  <img src="../../img/solution.png" alt="">
               </dd>
            </dl>
            <dl class="solution_box">
               <dt class="solution_box_in">
                  <h3><span>城市营销</span></h3>
                  <router-link to="/caseDetail">
                     <p style="line-height: 0.22rem;">以B2B2C的理念出发，创新模块化设计整合运营商，城市站点，供货 商，批发商，入驻商，分销商，门店于一体，各个模块可自由拆分组合，可以让商家在这个电 商多样化的时代下随时调整运营方案</p>
                  </router-link>
                  <div class="title">
                     <router-link to="/caseDetail" style="margin-right: 0.3rem;">微信商城</router-link>
                     <router-link to="/caseDetail" style="margin-right: 0.3rem;">红包抽奖</router-link>
                     <router-link to="/caseDetail">电商ERP</router-link>
                  </div>
               </dt>
               <dd>
                  <img src="../../img/c33.png" alt="">
               </dd>
            </dl>
            <dl class="solution_box">
               <dt class="solution_box_in">
                  <h3><span>明科商业智能开放平台</span></h3>
                  <router-link to="/caseDetail">
                     <p style="line-height: 0.22rem;">MingKeOS是由明科云计算事业部研发的可配置人工智能开发平台，她可以让用户通过简单配置、自然语言对话的交互方式，即可实现企业管理过程中复杂的业务逻辑处理</p>
                  </router-link>
                  <div class="title">
                     <router-link to="/caseDetail">MingKeOS</router-link>
                  </div>
               </dt>
               <dd>
                  <img src="../../img/ai4.png" alt="">
                  <img style="width: 100%;" :src="item.Images" alt="">
               </dd>
            </dl>
            
            <!-- 移动端样式 -->
            <div class="wrapper industry">
               <div class="content_industry_card">
                  <h3>仓储物流</h3>
                  <router-link to="/caseDetail">
                     <p>综合了软件系统、 条码应用、硬件系统、无线网络、系统扩展接 口等多种技术，通过无线移动终端设备，智能信息化应用渗透到仓库作业的每个细节及仓库现场。</p>
                  </router-link>
            <div class="wrapper industry" style="width: 100%;">
               <div class="content_industry_card" v-for="(item, index) in datalist" :key="index">
                  <h3 v-text="item.SubjClasName"></h3>
                  <p v-text="item.Remark"></p>
                  <div class="content_industry_list">
                     <ul>
                        <li @click="jump('/caseDetail')">智慧仓储</li>
                        <li @click="jump('/caseDetail')">供应商协同</li>
                        <li @click="jump('/caseDetail')">经销商管理</li>
                        <li style="font-size: 0.26rem;" v-for="(menu, i) in item.Subject" :key="i" @click="jumpmenu(menu)" v-text="menu.Title1"></li>
                     </ul>
                     <img src="../../img/wu1.png" alt="">
                  </div>
               </div>
					
               <div class="content_industry_card">
                  <h3>智能制造</h3>
                  <router-link to="/caseDetail">
                     <p>企业要实现智能制造，必须要先实现自动化，要实现自动化就要实现人与设备的交互，由人远程操控 或者由设备自动感应运行，并通过人机交互减少人为操作，实现生产自动化。</p>
                  </router-link>
                  <div class="content_industry_list">
                     <img src="../../img/wu2.png" alt="">
                     <ul>
                        <li @click="jump('/caseDetail')">智能制造</li>
                        <li @click="jump('/caseDetail')">质量追溯</li>
                     </ul>
                  </div>
               </div>
					
               <div class="content_industry_card">
                  <h3>城市营销</h3>
                  <router-link to="/caseDetail">
                     <p>以B2B2C的理念出发，创新模块化设计整合运营商，城市站点，供货 商，批发商，入驻商，分销商，门店于一体，各个模块可自由拆分组合，可以让商家在这个电 商多样化的时代下随时调整运营方案</p>
                  </router-link>
                  <div class="content_industry_list">
                     <ul>
                        <li @click="jump('/caseDetail')">微信商城</li>
                        <li @click="jump('/caseDetail')">红包抽奖</li>
                        <li @click="jump('/caseDetail')">电商ERP</li>
                     </ul>
                     <img src="../../img/wu3.png" alt="">
                  </div>
               </div>
					
               <div class="content_industry_card">
                  <h3>明科智能开放平台</h3>
                  <router-link to="/caseDetail">
                     <p>MingKeOS是由明科云计算事业部研发的可配置人工智能开发平台，她可以让用户通过简单配置、自然语言对话的交互方式，即可实现企业管理过程中复杂的业务逻辑处理</p>
                  </router-link>
                  <div class="content_industry_list">
                     <img src="../../img/wu4.png" alt="">
                     <ul>
                        <li @click="jump('/caseDetail')">MingKeOS</li>
                     </ul>
                     <img :src="item.Images" alt="">
                  </div>
               </div>
            </div>
@@ -136,22 +41,43 @@
</template>
<script>
   export default {
      data(){
         return{
				
      data() {
         return {
            title: null,
            description: null,
            datalist: null
         }
      },
      methods:{
         jump(u){
            this.$router.push(u)
      methods: {
         jumpmenu (menu) {
            let _menuId = menu.ID
         _menuId = _menuId + '.html'
            this.$router.push({name: menu.PageType.toLowerCase(), params: {menuId: _menuId}})
         },
         load () {
            let param = {
               func: 'Web_Center_GetData',
               Centertype: 'Solution'
            }
            this.Service.getParamData(param).then(res => {
               this.title = res.HeadField
               this.description = res.LongText
               this.datalist = res.data
            })
         }
      },
      mounted () {
         this.load()
      }
   }
</script>

<style lang="less" scoped>
   .wrap {
      min-height: 80vh;
   }
   @media (min-width: 751px) {
      .banner_txt{
      .banner_txt {
         font-size: 0.6rem;
         font-family: SourceHanSansCN-Bold;
         font-weight: bold;
@@ -160,31 +86,27 @@
         top: 41%;
         left: 42%;
      }
      .p_hide{
      .p_hide {
         display: none;
      }
      .industry{
      .industry {
         display: none;
      }
      .content_title {
         margin-top: .5rem
      }

      p {
         padding: .4rem .4rem 0;
         color: #676767;
         font-size: .15rem;
         font-size: .16rem;
         line-height: 0.26rem;
      }

      .solution_box-m {
         display: none;
      }

      .content_solution {
         margin-top: 1rem;
      }

      .solution_box {
         float: left;
         padding: .3rem .4rem;
@@ -207,12 +129,10 @@
                  color:rgba(59,59,60,1);
               }
            }

            p {
               padding: .3rem 0;
               color: #3E3E3E;
            }

            .title {
               width: 100%;

@@ -223,7 +143,6 @@
               }
            }
         }

         dd {
            width: 30%;
            height: 80%;
@@ -237,12 +156,10 @@
         dd {
            float: left;
         }

         dt {
            float: right;
         }
      }

      .solution_box_in>h3>span:after {
         content: '';
         position: absolute;
@@ -256,29 +173,27 @@
   }

   @media (max-width: 750px) and (min-width: 0) {
      .m_hide{
         display: none;
      .banner {
         margin-top: 1.13rem;
         img {
            max-width: 150%;
            margin-left: -19%;
         }
      }
      .banner{
         margin-top: 1.14rem;
      }
      .m_hide{
         display: none;
      }
      .p_txt{
      .p_txt {
         font-size:0.24rem;
         font-family:PingFang-SC-Regular;
         font-weight:400;
         color:rgba(62,62,62,1);
         line-height:0.44rem;
      }
      .content_industry_card{
      .content_industry_card {
         background: #f4f4f4;
         padding: 0.3rem;
         margin-top: 0.4rem;
         
         h3{
            font-size:0.4rem;
            font-size: 0.36rem;
            font-family:PingFang-SC-Bold;
            font-weight:bold;
            color:rgba(59,59,60,1);
@@ -296,19 +211,18 @@
            left: calc(50% - 0.57rem);
         }
         
         p{
         p {
            margin: 0.32rem 0;
            color: #676767;
         }
			
         .content_industry_list{
         .content_industry_list {
            display: flex;
            font-size: 0.24rem;
				
            ul{

            ul {
               flex: 1;
               margin-top: 0.3rem;
               li{
               li {
                  color: #676767;
                  margin-bottom: 0.4rem;
                  font-size:0.24rem;
@@ -319,23 +233,19 @@
                  text-align: center;
               }
            }
            img{
            img {
               width: 3.6rem;
               height: 2rem;
               margin: auto 0;
            }
         }
      }
		
		
      .center {
         padding-top: .6rem;
      }

      .solution_box {
         display: none;
      }

      .content_solution {
         margin-top: .6rem;

@@ -371,7 +281,6 @@
               .dd-img {
                  width: 70%;
               }

               .title {
                  width: 30%;
                  text-align: center;
@@ -389,13 +298,10 @@
               }
            }
         }

      }

      .content_title {
         margin: 1rem 0 .3rem 0;
      }

      .solution_box_in>h3>span:after {
         content: '';
         position: absolute;