2019-08-14update

king

2019-08-14 68cbb649c933776838e937446ce9ed384916a5e8

2019-08-14update

 package-lock.json

@@ -3308,6 +3308,11 @@
        "assert-plus": "1.0.0"
      }
    },
    "dat.gui": {
      "version": "0.7.6",
      "resolved": "https://registry.npmjs.org/dat.gui/-/dat.gui-0.7.6.tgz",
      "integrity": "sha512-9Uqr4aQUvp9q5P2b4y6gK604HXafubOq578OmOS8mjrIkYrBP4EbQ9gz9YRXgyPh7aQi+b9H/jAG7EucmhYpSA=="
    },
    "data-uri-to-buffer": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-2.0.1.tgz",

 package.json

@@ -14,6 +14,7 @@
  },
  "dependencies": {
    "axios": "^0.18.1",
    "dat.gui": "^0.7.6",
    "element-ui": "^2.10.0",
    "vue": "^2.5.2",
    "vue-router": "^3.0.1"

 src/components/header.vue

@@ -3,77 +3,71 @@
        <div class="wrapper">
            <a class="logo"><img src="../img/index_logo.png" alt=""></a>
            <div class="nav" @mouseleave="leave()">
                <router-link tag="span" class="homeico m_hide" to="/"><img src="../img/homeico.png" alt=""></router-link>
                <span class="homeico p_hide" @click="jump('/')"><img src="../img/homeico.png" alt=""></span>
                <!-- 移动端header图标 -->
                <span class="homeico p_hide" @click="jump('Index')"><img src="../img/homeico.png" alt=""></span>
                <span class="navico" v-if="!isShow" @click="showNav"><img src="../img/navico.png" alt=""></span>
                <span class="navico" v-else @click="showNav"><img src="../img/close.png" alt=""></span>
                <!-- pc端菜单列表 -->
                <ul class="nav_ul" ref="nav_ul">
                    <router-link tag="li" v-for="(menu, index) in menus" :key="index" :to="menu.url" :class="{active1: cur === index}">
                        <span @mouseover="add(index)">{{ menu.text }}</span>
                    </router-link>
                    <!-- <div class="list1 list3" :class="{active:this.menus[1].flag === true}" @click="menus[1].flag = false" v-if="menus[1].flag"></div> -->
                    <div :class="{active:this.menus[1].flag==true}" class="list1" @click="adda(1)" v-if="menus[1].flag">
                    <li v-for="(menu, index) in menus" :key="index" :class="{active1: cur === index}" @click="jump(menu.url)">
                        <span @mouseover="contrlSubmenu(index)">{{ menu.text }}</span>
                    </li>
                    <div class="list1 active" v-if="menus[1].flag">
                        <ul class="abloutMingKe_ul">
                            <router-link @click="add1($event,index)" tag="li" v-for="(secondMenus,index) in secondMenus" :key="index" :to="secondMenus.url">{{secondMenus.text}}</router-link>
                            <li @click="jump(product.url, product.Id, 'submenu')" v-for="(product, index) in products" :key="index">{{product.text}}</li>
                        </ul>
                        <ul class="abloutMingKe_ul1">
                            <router-link tag="li" v-for="(secondMenus,index) in secondMenus1" :key="index" :to="secondMenus.url">{{secondMenus.text}}</router-link>
                            <li @click="jump(solution.url, solution.Id, 'submenu')" v-for="(solution, index) in solutions" :key="index">{{solution.text}}</li>
                        </ul>
                    </div>
                    <!-- <div class="list1 list33" :class="{active:this.menus[1].flag==true}" @click="menus[1].flag = false" v-if="menus[1].flag"></div> -->
                    <!-- <div :class="{active:this.menus[5].flag==true}" class="list1 list33" @click="menus[5].flag = false" v-if="menus[5].flag"></div> -->
                    <div :class="{active:this.menus[5].flag==true}" class="list2" @click="adda(5)" v-if="menus[5].flag">
                    <div class="list2 active" v-if="menus[5].flag">
                        <ul class="abloutMingKe_ul2">
                            <li v-for="(secondMenus,index) in secondMenus2" @click="add5(secondMenus.url,index+1)" :key="index">{{secondMenus.text}}</li>
                            <li v-for="(submenu, index) in minkesoft" @click="jump(submenu.url, index, 'aboutUs')" :key="index">{{submenu.text}}</li>
                        </ul>
                    </div>
                    <!-- <div :class="{active:this.menus[5].flag==true}" class="list2 list5" @click="menus[5].flag = false" v-if="menus[5].flag"></div> -->
                </ul>
            </div>
        </div>

        <div :class="!isShow ? 'nav_ul' : 'plane'" style="height: 100%;background-color: #282830;display: none;margin-top:0.3rem">
        <div :class="!isShow ? 'nav_ul' : 'plane'" class="hidden">
            <el-collapse accordion>
                <el-collapse-item>
                    <template slot="title">
                        <span class="title_s">产品中心</span>
                    </template>
                    <div class="menu3" @click="jump('center')" style="color: #fff;">产品中心</div>
                    <div class="menu3" @click="jump('productCenter')">MingKeOS</div>
                    <div class="menu3" @click="jump('productCenter')">智慧仓储</div>
                    <div class="menu3 more" @click="jump('center')">更多 <img src="../img/more.png" alt=""></div>
                    <div>
                        <div class="menu3" :class="{'more active': index === products.length - 1, 'active': selectedsubId === product.Id}"
                            @click="jump(product.url, product.Id, 'submenu')" v-for="(product, index) in products" :key="index">{{product.text}}</div>
                    <div style="clear: both;"></div>
                    <div class="menu3" @click="jump('caseSolution')" style="color: #fff;">解决方案</div>
                    <div class="menu3" @click="jump('caseDetail')">电动工具行业解决方案</div>
                    <div class="menu3" @click="jump('caseDetail')">系统集成行业解决方案</div>
                    <div class="menu3" @click="jump('caseDetail')">电子商务行业解决方案</div>
                    <div class="menu3" @click="jump('caseDetail')">制药行业解决方案</div>
                    <div class="menu3 more" @click="jump('caseSolution')">更多 <img src="../img/more.png" alt=""></div>
                    </div>
					
                    <div class="menu3" :class="{'more active': index === solutions.length - 1, 'active': selectedsubId === solution.Id}"
                        @click="jump(solution.url, solution.Id, 'submenu')" v-for="(solution, index) in solutions" :key="index">{{solution.text}}</div>
                    <div style="clear: both;"></div>
                </el-collapse-item>
                <el-collapse-item class="el_coll">
                    <template slot="title">
                        <span @click="jump('successCase')" class="title_s">成功案例</span>
                        <span @click="jump('SuccessCase')" class="title_s">成功案例</span>
                    </template>
                </el-collapse-item>
                <el-collapse-item class="el_coll">
                    <template slot="title">
                        <span @click="jump('partner')" class="title_s">渠道合作</span>
                        <span @click="jump('Partner')" class="title_s">渠道合作</span>
                    </template>
                </el-collapse-item>
                <el-collapse-item class="el_coll">
                    <template slot="title">
                        <span @click="jump('news')" class="title_s">新闻资讯</span>
                        <span @click="jump('News')" class="title_s">新闻资讯</span>
                    </template>
                </el-collapse-item>
                <el-collapse-item>
                    <template slot="title">
                        <span @click="jump('companyProfile')" class="title_s">关于明科</span>
                        <span @click="jump('CompanyProfile')" class="title_s">关于明科</span>
                    </template>
                    <div class="menu2" @click="jump('companyProfile#anchor-1')">企业文化</div>
                    <div class="menu2" @click="jump('companyProfile#anchor-2')">荣誉资质</div>
                    <div class="menu2" @click="jump('companyProfile#anchor-3')">联系明科</div>
                    <div class="menu2" @click="jump('joinMingKe')">加入明科</div>
                    <div class="menu2" @click="jump('CompanyProfile', 0, 'aboutUs')">企业文化</div>
                    <div class="menu2" @click="jump('CompanyProfile', 1, 'aboutUs')">荣誉资质</div>
                    <div class="menu2" @click="jump('CompanyProfile', 2, 'aboutUs')">联系明科</div>
                    <div class="menu2" @click="jump('JoinMingKe')">加入明科</div>
                </el-collapse-item>
            </el-collapse>
        </div>
@@ -88,10 +82,10 @@
                activeNames: ['1'],
                cur: 0,
                isShow: false,
                isShowChild: false,
                selectedsubId: null,
                menus: [{
                        text: '首页',
                        url: '/',
                        url: 'Index',
                    },
                    {
                        text: '产品中心',
@@ -100,139 +94,115 @@
                    },
                    {
                        text: '成功案例',
                        url: '/successCase',
                        url: 'SuccessCase',
                    },
                    {
                        text: '渠道合作',
                        url: '/partner'
                        url: 'Partner'
                    },
                    {
                        text: '新闻资讯',
                        url: '/news'
                        url: 'News'
                    },
                    {
                        text: '关于明科',
                        url: '/companyProfile',
                        url: 'CompanyProfile',
                        flag: false,
                    }
                ],
                secondMenus: [{
                        text: '产品中心',
                        url: 'center'
                    },
                    {
                        text: 'MingKeOS',
                        url: 'productCenter'
                    },
                    {
                        text: '智慧仓储',
                        url: 'productCenter'
                    },
                    {
                        text: '质量追溯',
                        url: 'productCenter'
                    },
                    {
                        text: '更多 》',
                        url: '/center'
                    },
                ],
                secondMenus1: [{
                        text: '解决方案',
                        url: '/caseSolution'
                    },
                    {
                        text: '电动工具行业解决方案',
                        url: '/caseDetail'
                    },
                    {
                        text: '系统集成行业解决方案',
                        url: '/caseDetail'
                    },
                    {
                        text: '电子商务行业解决方案',
                        url: '/caseDetail'
                    },
                    {
                        text: '制药行业解决方案',
                        url: '/caseDetail'
                    },
                    {
                        text: '更多 》',
                        url: '/caseSolution'
                    }
                ],
                secondMenus2: [{
                products: null,
                solutions: null,
                minkesoft: [{
                        text: '企业文化',
                        url: '/companyProfile'
                        url: 'CompanyProfile'
                    },
                    {
                        text: '荣誉资质',
                        url: '/companyProfile'
                        url: 'CompanyProfile'
                    },
                    {
                        text: '联系明科',
                        url: '/companyProfile'
                        url: 'CompanyProfile'
                    },
                    {
                        text: '加入明科',
                        url: '/joinMingKe'
                    },
                        url: 'JoinMingKe'
                    }
                ]
            }
        },
        methods: {
            goHere (path) {
                this.$router.push({
                    path: path
                });
            jump (name, index, type) {
                if (!name) return
                this.selectedsubId = null
                this.isShow = false
                if (!type) { // 主页面跳转
                    if (name === 'CompanyProfile') { // 关于明科,锚点参数
                        this.$router.push({name: name, params: {hash: 'null'}})
                    } else {
                        this.$router.push({name: name})
                    }
                } else if (type === 'submenu') { // 产品中心子页面跳转
                    this.menus[1].flag = false
                    this.menus[5].flag = false
                    this.selectedsubId = index
                    this.$router.push({name: name, params: {menuId: index}})
                } else if (type === 'aboutUs') { // 关于明科子页面跳转
                    if (index === 3) { // 加入明科
                        this.$router.push({name: name})
                    } else {
                        this.$router.push({name: 'CompanyProfile', params: {hash: `#anchor-${index + 1}`}})
                    }
                }
            },
            showNav () {
                this.isShow = !this.isShow;
                this.isShow = !this.isShow
                this.$refs.nav_ul.style.left = this.isShow ? (0 + 'px') : (-1000 + 'px')
            },
            add (index) {
            contrlSubmenu (index) {
                this.cur = index
                if (index == 1) {
                    this.menus[index].flag = !this.menus[index].flag;
                    this.menus[5].flag = false;
                    this.menus[index].flag = !this.menus[index].flag
                    this.menus[5].flag = false
                } else if (index == 5) {
                    this.menus[index].flag = !this.menus[index].flag;
                    this.menus[1].flag = false;
                    this.menus[index].flag = !this.menus[index].flag
                    this.menus[1].flag = false
                } else {
                    this.menus[1].flag = false;
                    this.menus[5].flag = false;
                    this.menus[1].flag = false
                    this.menus[5].flag = false
                }
            },
            leave () {
                this.menus[1].flag = false;
                this.menus[5].flag = false;
            },
            add5 (u,i) {
                if(i != 4){
                    this.$router.push(`${u}#anchor-${i}`)
                }else{
                    this.$router.push(u)
                }
            },
            adda (index) {
                if (index == 1 || index == 5) {
                    this.menus[index].flag = false;
                }
            },
            add1 (e, index) {
                console.log(index)
            },
            //移动端跳转
            jump (u) {
                this.isShow = false
                this.$router.push(u)
                this.menus[1].flag = false
                this.menus[5].flag = false
            },
            load () {
                this.$axios({
                    data: {
                        func: 'Web_Index_GetData'
                this.Service.getBaseData('Web_Index_GetData').then(res => {
                    this.products = res.Product.map(pro => {
                        return {
                            Id: pro.ID,
                            text: pro.Title1,
                            url: pro.PageType
                    }
                    })
                    this.products.push({
                        Id: this.products[0].Id,
                        text: '更多 >>',
                        url: this.products[0].url
                    })

                    this.solutions = res.Solution.map(pro => {
                        return {
                            Id: pro.ID,
                            text: pro.Title1,
                            url: pro.PageType
                        }
                    })
                    this.solutions.push({
                        Id: this.solutions[0].Id,
                        text: '更多 >>',
                        url: this.solutions[0].url
                    })
                })
            }
        },
@@ -315,6 +285,10 @@
                display: none;
            }

            .hidden {
                display: none;
            }

            li {
                float: left;
                line-height: 0.68rem;
@@ -368,7 +342,7 @@
            border-right: 1px solid #999999;

            li:last-child {
                margin-top: .3rem;
                // margin-top: .3rem;
                text-align: right;
            }
        }
@@ -410,7 +384,11 @@
        }

        .plane {
            display: block !important;
            display: block;
            height: 100%;
            background-color: #282830;
            padding: 0.3rem 0 1rem;
            overflow-y: scroll;
        }

        .nav_ul {
@@ -523,7 +501,9 @@
                margin-left: 0.2rem;
            }
        }

        .menu3.active {
            color: #ffffff;
        }
        .more {
            float: right;
            padding-right: 0.5rem;

 src/main.js

@@ -2,7 +2,7 @@
import App from '@/App'
import router from '@/router'
import Vuex from 'vuex'
import axios from '@/config/axios_init'
// import axios from '@/config/axios_init'
import ElementUi from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import store from '@/store'
@@ -12,6 +12,7 @@
import '@/css/el_reset.css'
import '@/css/fonts.css'
import '@/js/main.js'
import Service from '@/store/service.js'

import Header from "@/components/header.vue";
Vue.component(Header.name, Header); // 头部组件
@@ -23,7 +24,8 @@

Vue.config.productionTip = false
Vue.config.devtools = true
Vue.prototype.$axios = axios
// Vue.prototype.$axios = axios
Vue.prototype.Service = new Service()

Vue.use(ElementUi);
Vue.use(Vuex);

 src/router/index.js

@@ -45,7 +45,7 @@
      },
      {
        name: 'ProductCenter',
        path: '/productCenter',//产品软件
        path: '/productCenter/:menuId',//产品软件
        component: ProductCenter
      },
      {
@@ -53,13 +53,13 @@
        path: '/successCase',//成功案例
        component: SuccessCase,
      },{
        name: 'SuccessCaseIndex',
        path: '/SuccessCaseIndex',//成功案例 详情
        name: 'successCaseIndex',
        path: '/SuccessCaseIndex/:menuId',//成功案例 详情
        component: SuccessCaseIndex,
      },
      {
        name: 'CaseDetail',
        path: '/caseDetail',//解决方案 详情
        path: '/caseDetail/:menuId',//解决方案 详情
        component: CaseDetail
      },
      {
@@ -84,7 +84,7 @@
      },
      {
        name: 'CompanyProfile',
        path: '/companyProfile',//企业文化
        path: '/companyProfile/:hash',//企业文化
        component: CompanyProfile
      },
      {

 src/store/service.js

New file
@@ -0,0 +1,82 @@
import axios from 'axios'

axios.defaults.baseURL = '/minkesoft/webapi/dostar'
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
axios.defaults.crossDomain = true
axios.defaults.withCredentials = true

axios.interceptors.request.use((config) => {
  // 在发送请求之前做些什么
  config.data == undefined ? config.data = {} : false
  config.method = 'post'
  config.data.userid = ''
  config.data = JSON.stringify(config.data)
  return config
}, (error) => {
  // 对请求错误做些什么
  return Promise.reject(error)
});

axios.interceptors.response.use((response) => {
  // 对响应数据做点什么
  // response.data = JSON.parse(response.data)
  return Promise.resolve(response.data)
}, (error) => {
  // 对响应错误做点什么
  return Promise.resolve(error)
});

export default class Service {
  constructor () {

  }

  /**
   * @description 获取官网基础数据，并缓存至session
   * @param {String} DBS 存储过程
   */
  getBaseData (DBS) {
    // let cachedata = sessionStorage.getItem(DBS)
    let cachedata = ''
    if (cachedata) {
      return Promise.resolve(JSON.parse(cachedata))
    } else {
      return new Promise(resolve => {
        axios({
          data: {
            func: DBS
          }
        }).then(res => {
          if (res.status) {
            sessionStorage.setItem(DBS, JSON.stringify(res))
          }
          resolve(res)
        })
      })
    }
  }

  /**
   * @description 获取官网基础数据，并缓存至session
   * @param {String} param 请求参数
   */
  getParamData (param) {
    let _param = JSON.stringify(param)
    // let cachedata = sessionStorage.getItem(_param)
    let cachedata = ''
    if (cachedata) {
      return Promise.resolve(JSON.parse(cachedata))
    } else {
      return new Promise(resolve => {
        axios({
          data: param
        }).then(res => {
          if (res.status) {
            sessionStorage.setItem(_param, JSON.stringify(res))
          }
          resolve(res)
        })
      })
    }
  }
}

 src/views/companyProfile/index.vue

@@ -257,13 +257,16 @@
    data() {
        return {
      img_index:0,
      anchor:false,
      anchor: false
        }
    },
    mounted () {
    let url = location.href
    let hash = url.substring(url.length-9)
    this.get_anchor(hash)
  watch: { //监听路由
    $route (to, from) {
      if (to.params.hash && to.params.hash !== 'null') {
        this.anchor = true
        this.get_anchor(to.params.hash)
      }
    }
    },
    methods: {
    //根据hash值跳转不同锚点
@@ -273,16 +276,11 @@
      }
    }
  },
  destroyed () { //返回顶部
    document.body.scrollTop = 0
    document.documentElement.scrollTop = 0
  },
  watch: { //监听路由
    $route (to,from) {
      if (to.hash) {
    mounted () {
    let hash = this.$route.params.hash
    if (hash && hash !== 'null') {
        this.anchor = true
        this.get_anchor(to.hash)
      }
      this.get_anchor(hash)
    }
  }
}

 src/views/home/index.vue

@@ -80,7 +80,7 @@
            width: 0.6rem;
            height: 0.6rem;
            bottom: 2.2rem;
            z-index: 9999;
            z-index: 100;

            .img {
                width: 0.6rem;

 src/views/index/index.vue

@@ -1,6 +1,7 @@
<template>
    <div class="main">
        <div class="banner"><img src='../../img/home.jpg' alt=""></div>
        <canvas id="canvas" style="position: absolute;z-index: 1;top: 0px;"></canvas>
        <div class="banner"><img id="homeId" src='../../img/home.jpg' alt=""></div>
        <div class="wrapper-box">
            <h3 class="content_title fadeInUp zoomIn animated"><span>主营业务</span></h3>
            <div class="m_zhu" v-for="(business, index) in mainBusiness" :key="index">
@@ -30,7 +31,7 @@
            <div class="wrapper">
                <ul class="business_ul">
                    <router-link tag="li" to="/caseDetail" v-for="(business, index) in mainBusiness" :key="index" class="fadeInUp" v-drag>
                        <router-link tag="div" class="business_box animated pulse" :key="index" to="/caseDetail">
                        <router-link tag="div" class="business_box pulse" :key="index" to="/caseDetail">
                            <div class="business_box_t" :style="'background-image: url(' + business.Image1 + ')'">
                                <div class="bgopacity"></div>
                                <h2 v-text="business.Title2"></h2>
@@ -56,7 +57,7 @@
                                <el-button>查看更多</el-button>
                            </div>
                            <div class="particulars">
                                <a href="/caseDetail" style="color: #14A9E5;">了解详情 >></a>
                                <a href="/caseDetail">了解详情 &gt;&gt;</a>
                            </div>
                        </router-link>
                        <div class="business">
@@ -175,6 +176,8 @@
    </div>
</template>
<script>
// import * as dat from 'dat.gui'

    export default {
        data() {
            return {
@@ -191,23 +194,96 @@
                this.$router.push(u)
            },
            load () {
                this.$axios({
                    data: {
                        func: 'Web_Index_GetData'
                    }
                }).then(res => {
            this.Service.getBaseData('Web_Index_GetData').then(res => {
                    this.mainBusiness = res.Main
                    this.cases = res.Case
                    this.news = res.News
                })
                this.$axios({
                    data: {
                        func: 'Web_productCenter_GetData',
                        ID: '20190726105746487D81C9D31A08C4C55A81C'
                    }
                }).then(res => {
                    console.log(res)
        },
        setgui (radio) {
            let canvas = document.getElementById('canvas')
            let ctx = canvas.getContext('2d')
            let w = ctx.canvas.width = window.innerWidth
            let h = ctx.canvas.height = window.innerWidth / radio + 80
            let dots = []
            let cx = -200 // 绘图中点x
            let cy = -200 // 绘图中点y
            let emitter = null // 定时器
            let maxDots = 500 // 最大绘图点
            let maxSpeed = 3
            let minSpeed = 1
            let emitRate = 10
            let emitNum = 2
            let radius = 2
            let trail = 0.2
            let maxTime = 3000
            let minTime = 1000
            let glow = 0

            let emitDots = (x, y) => {
                if (dots.length < maxDots) {
                    for (let i = 0; i < emitNum; i++) {
                        let color = Math.floor(Math.random() * 255)
                        dots.push({
                            x: cx,
                            y: cy,
                            v: Math.random() * (maxSpeed - minSpeed) + minSpeed,
                            d: Math.random() * 360,
                            c: Math.random() * (5 - (-5)) + (-5),
                            h: color,
                            st: Date.now(),
                            lt: Math.random() * (maxTime - minTime) + minTime
                })
                    }
                }
            }

            let draw = () => {
                ctx.clearRect(0, 0, w, h)
                // ctx.fillStyle = 'rgba(0,0,0,' + trail + ')'
                ctx.fillStyle = 'rgba(255, 255, 255, 0)'
                ctx.fillRect(0, 0, w, h)
                ctx.fill()
                for (let i = 0; i < dots.length; i++) {
                    let pct = (Date.now() - dots[i].st) / dots[i].lt

                    ctx.save()
                    ctx.beginPath()
                    ctx.fillStyle = 'hsla(' + dots[i].h + ', 100%, 50%, ' + (1-pct) + ')'
                    ctx.shadowColor = 'hsla(' + dots[i].h + ', 100%, 50%, 1)'
                    ctx.shadowBlur = glow
                    ctx.arc(dots[i].x, dots[i].y, Math.pow(radius, 2) / dots[i].v, 0, Math.PI * 2)
                    ctx.fill()
                    ctx.closePath()
                    ctx.restore()

                    dots[i].x += dots[i].v * Math.cos(dots[i].d * Math.PI/180)
                    dots[i].y += dots[i].v * Math.sin(dots[i].d * Math.PI/180)
                    dots[i].d += dots[i].c
					
                    if (dots[i].x > w || dots[i].x < 0 || dots[i].y > h || dots[i].y < 0 || dots[i].st + dots[i].lt < Date.now()) {
                        dots.splice(i, 1)
                    }
                }
                requestAnimationFrame(draw) // 
            }

            emitter = setInterval(emitDots, emitRate)
            draw()

            canvas.onmousemove = (e) => {
                let offset = document.documentElement.scrollTop || document.body.scrollTop
                cx = e.clientX
                cy = e.clientY + offset
            }
            canvas.onmouseleave = () => {
                cx = -200
                cy = -200
            }
            window.onresize = () => {
                w = ctx.canvas.width = window.innerWidth
                h = ctx.canvas.height = window.innerWidth / radio + 80
            }
            }
        },
        directives: {
@@ -234,6 +310,13 @@
        },
        mounted () {
            this.load()
        let width = window.innerWidth
        if (width > 750) {
            setTimeout(() => {
                let radio = document.getElementById('homeId').width / document.getElementById('homeId').height
                this.setgui(radio)
            }, 2000)
        }
        }
    }
</script>
@@ -273,6 +356,7 @@
        }
    }
    .dynamic_ul li {
        position: relative;
        h2 {
            padding: 0 .11rem;

@@ -318,6 +402,9 @@
    }

    @media (max-width: 750px) and (min-width: 0) {
        #canvas {
            display: none;
        }
        .mob_case {
            background: #ffffff;
            position: relative;
@@ -432,6 +519,7 @@
            }

            .see-detail {
                cursor: pointer;
                font-size: 0.24rem;
                font-family: PingFang-SC-Medium;
                font-weight: 500;
@@ -664,25 +752,30 @@
            height: 3rem;
            margin: 0.69rem 0 .85rem;
        }
        .business_ul > li:hover {
            z-index: 1000;
        }
		
        .business_ul > li {
            display: inline-block;
            text-align: center;
            background: rgba(255, 255, 255, 1);
            background: transparent;
            flex: 1;
            height: 4rem;
            padding-bottom: 0.1rem;
            box-sizing: border-box;
            position: relative;
            -webkit-transition: transform 1s, opacity 1s;
            -moz-transition: transform 1s, opacity 1s;
            -o-transition: transform 1s, opacity 1s;
            transition: transform 1s, opacity 1s;
            // -webkit-transition: transform 1s, opacity 1s;
            // -moz-transition: transform 1s, opacity 1s;
            // -o-transition: transform 1s, opacity 1s;
            // transition: transform 1s, opacity 1s;
            transition: all 0.3s;

            .pulse {
                width: 85%;
                margin: 0 auto;
                opacity: 0;
            }
            .business {
                position: absolute;
                opacity: 1;
                top: .1rem;
                left: .3rem;
                width: 85%;
@@ -717,7 +810,17 @@
                margin-top: 0.04rem;
            }
        }

        .business_ul > li:hover {
            transform: scale(1.1);
            z-index: 1000;
            .business {
                z-index: -1;
                opacity: 0;
            }
            .pulse {
                opacity: 1;
            }
        }
        .business_box {
            display: none;
            width: 100%;
@@ -770,10 +873,10 @@
                    height: 0.55rem;

                    h3 {
                        img {
                            width: .2rem;
                            height: .2rem;
                            margin-bottom: 0.13rem;
                        margin-bottom: 0.07rem;
                        .fa {
                            font-size: 0.20rem;
                            color: #1CACE6;
                        }
                    }

@@ -781,6 +884,9 @@
                        font-size: 0.12rem;
                        color: #838383;
                    }
                    // div > p:last-child {
                    //     font-size: 0.12rem;
                    // }
                }
            }
        }
@@ -833,6 +939,11 @@
            padding: 0 .2rem;
            text-align: right;
            color: #14A9E5;
            a {
                display: inline-block;
                color: #14A9E5;
                cursor: pointer;
            }
        }

        .content_subtitle {
@@ -896,7 +1007,8 @@
        }

        .dynamic_ul_card {
            background: rgba(243, 243, 243, 1);
            // background: rgba(243, 243, 243, 1);
            background: rgba(0, 0, 0, 0.02);
            height: 2.56rem;

            h2 {
@@ -913,7 +1025,10 @@
        .wrapper:last-child .content_title {
            margin: 1rem 0 1.21rem;
        }

        .platform_ul>li {
            transition: all 0.5s;
            position: relative;
        }
        .platform_ul>li:hover {
            transform: scale(1.2);
            box-shadow: 0px 0px 38px 0px rgba(79, 78, 80, 0.15);

 src/views/productCenter/index.vue

@@ -1,133 +1,54 @@
<template>
  <div class="main">
    <div class="banner m_hide" style="margin-bottom: 1rem;"><img src="../../img/ban.png" alt=""></div>
    <div class="banner p_hide" style="margin-bottom: 1rem;"><img src="../../img/m_ban.png" alt=""></div>
    <div class="wrapper platform">
      <div class="content_title"><span>明科商业智能开放平台</span></div>
      <p>明科商业智能开放平台(MingKe Business Intelligen OS，简称：MingKeOS)是由明科云计算事业部研发的可配置人工智能开发平台，使用MingKeOS可以让用户通过简单配置、自然语言对话的交互方式，即可实现企业管理过程中复杂的业务逻辑处理，平台内置采购、生产、销售、技术、品控、追溯、售后、供应商、经销商、库存、财务电商、数据中心、接口、人工智能（Kane）等28大业务领域模块的功能操作，明科作为国内首家将人工智能应用于企业管理领域的企业，借助云计算中心，Kane可以进行深度学习，会成为企业管理的好帮手。</p>
    <div class="banner"><img :src="url" alt=""></div>
    <div v-for="(item, index) in details" :key="index">
      <div v-if="item.type === 'WLongText'" class="wrapper platform">
        <div class="content_title"><span v-text="item.title"></span></div>
        <p v-text="item.longText"></p>
    </div>
    <div class="wrapper scene">
      <div class="content_title"><span>应用场景</span></div>
      <div v-else-if="item.type === 'Wimages'" class="wrapper scene">
        <div class="content_title"><span v-text="item.title"></span></div>
      <div class="content_scene">
        <span class="scene scene-img"><img src="../../img/p1.png" alt=""><span class="txt">供应商协同</span></span>
        <span class="scene scene-img"><img src="../../img/p2.png" alt=""><span class="txt txt2">WMS<br />仓库管理系统</span></span>
        <span class="scene scene-img"><img src="../../img/p3.png" alt=""><span class="txt txt2">QTS<br />质量追溯系统</span></span>
        <span class="scene scene-img"><img src="../../img/p4.png" alt=""><span class="txt">经销商管理</span></span>
        <span class="scene scene-img"><img src="../../img/p5.png" alt=""><span class="txt txt2">MES<br />智能制造</span></span>
        <span class="scene scene-img">
          <img src="../../img/jing.png" alt="" class="m_img"><span class="txt m_img">经销商管理</span>
          <img src="../../img/p6.png" alt="" class="p_img">
          <span class="txt p_img" style="color: black;bottom: 0;">经销商管理</span>
          <span class="scene scene-img" v-for="(img, index) in item.imglist" :key="index">
            <img :src="img.url" alt="">
            <span class="txt" :class="'txt' + img.position" :style="'color:' + img.color">
              <p v-text="img.title"></p>
              <p v-text="img.tip"></p>
            </span>
        </span>
      </div>
    </div>
    <div class="wrapper skill">
      <div class="content_title"><span>核心技术</span></div>
      <div v-else-if="item.type === 'Wico'" class="wrapper skill">
        <div class="content_title"><span v-text="item.title"></span></div>
      <div class="content_skill" >
        <div class="content_skill_item">
          <div><img src="../../img/p7.png" alt=""></div>
          <p>可配置开发</p>
        </div>
        <div class="content_skill_item">
          <div><img src="../../img/p8.png" alt=""></div>
          <p>三屏合一</p>
        </div>
        <div class="content_skill_item">
          <div><img src="../../img/p9.png" alt=""></div>
          <p>接口技术</p>
        </div>
        <div class="content_skill_item">
          <div><img src="../../img/p10.png" alt=""></div>
          <p>语言包</p>
        </div>
        <div class="content_skill_item">
          <div><img src="../../img/p11.png" alt=""></div>
          <p>IOT</p>
          <div class="content_skill_item" v-for="(icon, index) in item.iconlist" :key="index">
            <div><img :src="icon.url" alt=""></div>
            <p v-text="icon.title"></p>
        </div>
      </div>
    </div>
    <div class="wrapper industry">
      <div class="content_title"><span>适用行业</span></div>
      <div class="content_industry">
        <div class="content_industry_card">
          <h3>装备制造</h3>
          <p>中国正在成为全球制造业的中心，中国是制造业大国，但还不是强国。因此，国家确定了通过信息化带动工业化的国策，推动制造企业实施制造业信息化，产品设计制造和企业管理的信息化、生产过程控制的智能化、制造装备的数控化以及咨询服务的网络化，全面提升制造业的竞争力。</p>
      <div v-else-if="item.type === 'Wcontent'" class="wrapper industry">
        <div class="content_title"><span v-text="item.title"></span></div>
        <div class="content_industry" v-for="(m, n) in Math.ceil(item.sublist.length / 2)" :key="n">
          <div class="content_industry_card" v-if="index >= n * 2 && index < (n + 1) * 2" v-for="(cell, index) in item.sublist" :key="index">
            <h3 v-text="cell.title"></h3>
            <p v-text="cell.tip"></p>
          <div class="content_industry_list">
            <ul>
              <li>· 供应商协同平台</li>
              <li>· 物料仓库管理系统</li>
              <li>· 制造执行系统</li>
              <li>· 成品仓库管理系统</li>
              <li>· 质量追溯系统</li>
              <li>· 经销商管理平台</li>
                <li v-for="(text, i) in cell.details" :key="i">· <span v-text="text"></span></li>
            </ul>
            <img src="../../img/p12.png" alt="">
          </div>
        </div>
        <div class="content_industry_card">
          <h3>商业流通</h3>
          <p>随着互联网的快速发展，电子商务行业发展迅猛，作为互联网和相关服务业中新业态，不仅创造了新的消费需求，同时也引发了新的投资新潮，开辟了就业增收新渠道，为大众、万众创新提供了新空间。</p>
          <div class="content_industry_list">
            <ul>
              <li>· 电商系统</li>
              <li>· 仓库管理系统</li>
            </ul>
            <img src="../../img/p13.png" alt="">
          </div>
        </div>
      </div>
      <div class="content_industry">
        <div class="content_industry_card">
          <h3>装备制造</h3>
          <p>中国正在成为全球制造业的中心，中国是制造业大国，但还不是强国。因此，国家确定了通过信息化带动工业化的国策，推动制造企业实施制造业信息化，产品设计制造和企业管理的信息化、生产过程控制的智能化、制造装备的数控化以及咨询服务的网络化，全面提升制造业的竞争力。</p>
          <div class="content_industry_list">
            <ul>
              <li>· 供应商协同平台</li>
              <li>· 物料仓库管理系统</li>
              <li>· 制造执行系统</li>
              <li>· 成品仓库管理系统</li>
              <li>· 质量追溯系统</li>
              <li>· 经销商管理平台</li>
              <li>· 医药电商</li>
            </ul>
            <img src="../../img/p14.png" alt="">
          </div>
        </div>
        <div class="content_industry_card">
          <h3>商业流通</h3>
          <p>随着互联网的快速发展，电子商务行业发展迅猛，作为互联网和相关服务业中新业态，不仅创造了新的消费需求，同时也引发了新的投资新潮，开辟了就业增收新渠道，为大众、万众创新提供了新空间。</p>
          <div class="content_industry_list">
            <ul>
              <li>· 仓储管理系统</li>
              <li>· 配送管理系统</li>
            </ul>
            <img src="../../img/p15.png" alt="">
              <img :src="cell.url" alt="">
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper join">
      <div class="content_title"><span>加盟代理</span></div>
    </div>
    <div class="wrapper industry other" v-if="otherlist">
      <div class="content_title"><span v-text="othertype.name"></span></div>
      <div class="content_skill">
        <div class="content_skill_item">
          <div><img src="../../img/p16.png" alt=""></div>
          <p>注册申请</p>
        </div>
        <div class="content_skill_item">
          <div><img src="../../img/p17.png" alt=""></div>
          <p>商务洽谈</p>
        </div>
        <div class="content_skill_item">
          <div><img src="../../img/p18.png" alt=""></div>
          <p>提交材料</p>
        </div>
        <div class="content_skill_item">
          <div><img src="../../img/p19.png" alt=""></div>
          <p>资质审核</p>
        </div>
        <div class="content_skill_item">
          <div><img src="../../img/p20.png" alt=""></div>
          <p>签订协议</p>
        <div class="content_skill_item" v-for="(other, index) in otherlist" :key="index">
          <img :src="other.Image2" alt="" @click="jumpmenu(other)">
          <p v-text="other.Title1"></p>
        </div>
      </div>
    </div>
@@ -141,16 +62,89 @@
export default {
    data () {
    return {

      menuId: null,
      url: null,
      details: null,
      othertype: null,
      otherlist: null
    }
  },
  watch: {
    $route () {
      this.menuId = this.$route.params.menuId
      this.load()
    }
  },
  methods: {
    jumpmenu (menu) {
      this.$router.push({name: menu.PageType, params: {menuId: menu.ID}})
    },
    load () {
      let param = {
        func: 'Web_productCenter_GetData',
        ID: this.menuId
      }
      this.Service.getParamData(param).then(res => {
        this.url = res.Image1
        this.details = res.Detail.map(det => {
          let item = {
            type: det.TypeCharOne,
            title: det.Title1
          }
          if (item.type === 'WLongText') {
            item.longText = det.DOne[0].LongText
          } else if (item.type === 'Wimages') {
            item.imglist = det.DOne.map(cell => {
              return {
                title: cell.CDefine1,
                tip: cell.CDefine2,
                url: cell.Images,
                position: cell.TypeCharThree,
                color: cell.TypeCharTwo
              }
            })
          } else if (item.type === 'Wico') {
            item.iconlist = det.DOne.map(cell => {
              return {
                url: cell.Images,
                title: cell.Title1
              }
            })
          } else if (item.type === 'Wcontent') {
            item.sublist = det.DOne.map(cell => {
              return {
                url: cell.Images,
                title: cell.Title1,
                tip: cell.LongText,
                details: cell.DTwo.map(two => {
                  return two.Title1
                })
              }
            })
          }
          return item
        })
        this.othertype = {
          type: res.Type,
          name: res.TypeName
        }
        this.otherlist = res.LinkDetail
      })
    }
  },
  created () {
    this.menuId = this.$route.params.menuId
  },
  mounted () {
    this.load()
    }
}
</script>

<style lang="less" scoped>
  @media (min-width: 751px){
    .p_hide {
      display: none !important;
    .banner {
      margin-bottom: 0.5rem;
    }
    .m_img {
      display: none;
@@ -172,16 +166,54 @@

      .txt {
        position: absolute;
        left: 1.16rem;
        bottom: 0.12rem;
        font-size: 20px;
        width: 33%;
        height: 33%;
        left: 0;
        top: 0;
        font-size: 16px;
        font-family: MicrosoftYaHei-Bold;
        font-weight: bold;
        color: rgba(255,255,255,1);
        text-align: center;
        padding: 0.1rem;
      }
      .txt2 {
        top: 0.19rem;
        left: 0.28rem;
        top: 0;
        left: 33%;
      }
      .txt3 {
        left: auto;
        top: 0;
        right: 0;
      }
      .txt4 {
        top: 33%;
      }
      .txt5 {
        left: 33%;
        top: 33%;
      }
      .txt6 {
        left: auto;
        top: 33%;
        right: 0;
      }
      .txt7 {
        height: auto;
        top: auto;
        bottom: 0;
      }
      .txt8 {
        height: auto;
        top: auto;
        bottom: 0;
        left: 33%;
      }
      .txt9 {
        height: auto;
        top: auto;
        left: auto;
        bottom: 0;
        right: 0;
      }
      .content_title {
        margin: .53rem 0 0.52rem;
@@ -261,6 +293,16 @@
        margin-top: 0.3rem;
      }
    }
    .wrapper.other .content_skill_item {
      padding: 0 0.5rem;

      img {
        cursor: pointer;
      }
      p {
        font-size: 0.16rem;
      }
    }
    .join {
      .content_title {
        margin: 0.85rem 0 0.53rem;
@@ -314,11 +356,23 @@
            width: 0.75rem;
            height: 0.75rem;
        }
        .m_hide {
            display: none !important;
    .wrapper.other .content_skill_item {
      padding: 0 0.2rem;

      p {
        font-size: 0.16rem;
      }
        }
        .main, .banner {
            margin-top: 1.14rem;
            margin-top: 1.13rem;
    }
    .banner {
      margin-bottom: 0.5rem;
      img {
        width: 140%;
        max-width: none;
        margin-left: -20%;
      }
        }
    .content_scene {
      width: 100%;

 src/views/successCase/caseDetail.vue

@@ -39,7 +39,6 @@
          </div>
        </div>
      </div>
    
    <div class="wrapper">
      <div class="content-box">
        <h3><span>应用场景</span></h3>
@@ -128,6 +127,74 @@

<script>
export default {
  data () {
    return {
      menuId: null,
      url: null,
      details: null
    }
  },
  watch: {
    $route () {
      this.menuId = this.$route.params.menuId
      this.load()
    }
  },
  methods: {
    load () {
      let param = {
        func: 'Web_productCenter_GetData',
        ID: this.menuId
      }
      this.Service.getParamData(param).then(res => {
        this.url = res.Image1
        this.details = res.Detail.map(det => {
          let item = {
            type: det.TypeCharOne,
            title: det.Title1
          }
          if (item.type === 'WLongText') {
            item.longText = det.DOne[0].LongText
          } else if (item.type === 'Wimages') {
            item.imglist = det.DOne.map(cell => {
              return {
                title: cell.CDefine1,
                tip: cell.CDefine2,
                url: cell.Images,
                position: cell.TypeCharThree,
                color: cell.TypeCharTwo
              }
            })
          } else if (item.type === 'Wico') {
            item.iconlist = det.DOne.map(cell => {
              return {
                url: cell.Images,
                title: cell.Title1
              }
            })
          } else if (item.type === 'Wcontent') {
            item.sublist = det.DOne.map(cell => {
              return {
                url: cell.Images,
                title: cell.Title1,
                tip: cell.LongText,
                details: cell.DTwo.map(two => {
                  return two.Title1
                })
              }
            })
          }
          return item
        })
      })
    }
  },
  created () {
    this.menuId = this.$route.params.menuId
  },
  mounted () {
    this.load()
  }
}
</script>

@@ -431,7 +498,6 @@
                padding-top: .07rem;
            }
        }
		
    }
    .program:first-child{
        margin-left: -0.55rem;

 src/views/successCase/index.vue

@@ -9,51 +9,19 @@
        <div class="content_title">
          <span>案例详情</span>
        </div>
        <div class="content">
          <div class="left_border">仓储物流</div>
        <div class="content" v-for="(_case, index) in caselist" :key="index" :class="(index % 2) && 'f-right'">
          <div class="left_border" :style="(index % 2) && 'float: right;'" v-text="_case.SubjClasName"></div>
          <div class="contnt-describe">
            <div class="left" style="float: left;padding-top: 0.1rem;">
              <ul>
                <router-link to="/successCaseIndex" style="padding: 0;">
                  <li><img src="../../img/s1.png" alt=""></li>
                </router-link>
                <router-link to="/successCaseIndex" style="padding: 0;">
                  <li><img src="../../img/s2.png" alt=""></li>
                </router-link>
                <router-link to="/successCaseIndex" style="padding: 0;">
                  <li><img src="../../img/s3.png" alt=""></li>
                </router-link>
                <router-link to="/successCaseIndex" style="padding: 0;">
                  <li><img src="../../img/s4.png" alt=""></li>
                </router-link>
            <div class="left" style="padding-top: 0.1rem;" :style="!(index % 2) && 'float: left;'">
              <ul :style="(index % 2) && 'padding-left: 0.7rem;'">
                <li v-for="(sub, i) in _case.Subject" :key="i" @click="jumpmenu(sub)">
                  <img :src="sub.Image3" alt="">
                </li>
              </ul>
            </div>
            <div class="right" style="position: relative;">
              <img src="../../img/s5.png" alt="" >
              <span v-if="isShow1" class="txt">明科为中石油实施了物资条码管理系统，实现了需求部门在线计划报批、供应商协同送货、项目现场收、发、盘、存等功能。系统采用了互联网、无线技术条码技术相结合的方案进行实施，为中石油节省大量人力、物力。</span>
            </div>
          </div>
          <div class="left_border" style="float: right;margin-top: 0.5rem;">智能制造</div>
          <div class="contnt-describe" style="margin-bottom: 1.48rem;">
            <div class="left">
              <ul style="margin-left: 1rem;">
                <router-link to="/successCaseIndex" style="padding: 0;">
                  <li><img src="../../img/s7.png" alt=""></li>
                </router-link>
                <router-link to="/successCaseIndex" style="padding: 0;">
                  <li><img src="../../img/s8.png" alt=""></li>
                </router-link>
                <router-link to="/successCaseIndex" style="padding: 0;">
                  <li><img src="../../img/s9.png" alt=""></li>
                </router-link>
                <router-link to="/successCaseIndex" style="padding: 0;">
                  <li><img src="../../img/s10.png" alt=""></li>
                </router-link>
              </ul>
            </div>
            <div class="right" style="position: relative;">
              <img src="../../img/s6.png" alt="">
              <span v-if="isShow2" class="txt">明科为中广核实施了物资条码追溯系统，该系统基于明科可配置平台K9 1.0实施，从来料验收开始，经过销售出库、生产装配等环节，完成追溯数据的采集并提供产品生命周期的数据追溯查询</span>
              <img :src="_case.Images" alt="" >
              <!-- <span class="txt"></span> -->
            </div>
          </div>
        </div>
@@ -62,40 +30,13 @@
    <!-- 移动端样式 -->
    <div class="webapp p_hide">
      <h3 class="content_title2 fadeInUp zoomIn animated"><span>案例详情</span></h3>
      <div class="project" style="padding: 0.2rem 0 0.3rem;">
        <h3 class="content_title3"><span>仓储物流</span></h3>
        <div class="img_box"><img src="../../img/an2.png" alt=""></div>
      <div class="project" v-for="(_case, index) in caselist" :key="index" style="padding: 0.1rem 0 0.3rem;">
        <h3 class="content_title3"><span v-text="_case.SubjClasName"></span></h3>
        <div class="img_box"><img :src="_case.Images" alt=""></div>
        <div class="three_box">
          <router-link tag="div" to="/successCaseIndex">
            <img src="../../img/an3.png" alt="">
          </router-link>
          <router-link tag="div" to="/successCaseIndex">
            <img src="../../img/an4.png" alt="">
          </router-link>
          <router-link tag="div" to="/successCaseIndex">
            <img src="../../img/an5.png" alt="">
          </router-link>
          <router-link tag="div" to="/successCaseIndex">
            <img src="../../img/an6.png" alt="">
          </router-link>
          <div v-for="(sub, i) in _case.Subject" :key="i" @click="jumpmenu(sub)">
            <img :src="sub.Image3" alt="">
        </div>
      </div>
      <div class="project" style="padding: 0.2rem 0 0.3rem;margin-bottom: 0.8rem;">
        <h3 class="content_title3"><span>智能制造</span></h3>
        <div class="img_box"><img src="../../img/an7.png" alt=""></div>
        <div class="three_box">
          <router-link tag="div" to="/successCaseIndex">
            <img src="../../img/an8.png" alt="">
          </router-link>
          <router-link tag="div" to="/successCaseIndex">
            <img src="../../img/an9.png" alt="">
          </router-link>
          <router-link tag="div" to="/successCaseIndex">
            <img src="../../img/an10.png" alt="">
          </router-link>
          <router-link tag="div" to="/successCaseIndex">
            <img src="../../img/an11.png" alt="">
          </router-link>
        </div>
      </div>
    </div>
@@ -106,20 +47,35 @@
export default {
    data () {
        return {
            isShow1: false,
            isShow2: true
            caselist: null
        }
  },
  methods: {
    jumpmenu (menu) {
      this.$router.push({name: menu.PageType, params: {menuId: menu.ID}})
    },
    load () {
      this.Service.getBaseData('Web_Case_GetData').then(res => {
        this.caselist = res.Case
      })
      let param = {
        func: 'Web_Center_GetData',
        Centertype: 'Product'
      }
      this.Service.getParamData(param).then(res => {

      })
        }
    },
    mounted () {
    document.body.scrollTop = 0
    document.documentElement.scrollTop = 0
    this.load()
  }
}
</script>

<style lang="less" scoped>
  .content_title {
    padding: 0.94rem 0 1.03rem;
    padding: 0.94rem 0 0.2rem;
    p {
      color: #838383;
      font-size: .16rem;
@@ -150,15 +106,11 @@
      margin-bottom: .2rem;
    }
  }
  .content:nth-child(2) {
    text-align: center;
    a {
      color:#3B3B3C;
      padding: 0.06rem 0.2rem;
      display: inline-block;
      font-size: 0.16rem;
      margin: 0.21rem 0.1rem;
  .content {
    padding-top: 0.4rem;
    }
  .content:last-child {
    padding-bottom: 0.5rem;
  }
  @media (min-width: 751px) {
    .contnt-describe {
@@ -184,10 +136,6 @@
      .right {
        margin-top: .3rem;
        float: right;
        // width: 3.85rem;
        // height: 2.38rem;
        background: url(../../img/shiyou.png);
        background-size: 100% 100%;
        position: relative;
        .txt {
          position: absolute;
@@ -225,7 +173,8 @@
        }
      }
    }
    .contnt-describe:nth-child(2n) {
    .content.f-right {
      .contnt-describe {
      .right {
        float: left;
      }
@@ -237,6 +186,7 @@
        }
      }
    }
    }
    .left_border {
      display: inline-block;
      width: 1rem;
@@ -244,6 +194,7 @@
      position: relative;
      padding-left: .2rem;
      margin-bottom: 0.3rem;
      font-size: 0.16rem;
      float: none;
    }
    .left_border::after {
@@ -267,7 +218,7 @@
        margin-top: 0.2rem;
        position: relative;
        span {
          font-size: 0.36rem;
          font-size: 0.30rem;
          margin-left: 0.18rem;
          margin-top: 0.02rem;
          display: inline-block;
@@ -275,8 +226,8 @@
      }
      .content_title3::after {
        content: '';
        width:0.09rem;
        height:0.45rem;
        width: 0.08rem;
        height:0.36rem;
        background:rgba(0,112,192,1);
        position: absolute;
        top: 0.05rem;