format-code

king

2019-07-16 ed58afaaa564c54d22a42593265addce08bd5850

format-code

 config/index.js

@@ -5,72 +5,71 @@
const path = require('path')

module.exports = {
    dev: {
        // Paths
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
        proxyTable: {
          '/api': {
            target: 'http://192.168.1.106/mk/public/index.php/',
            changeOrigin: true,
            pathRewrite: {
              '^/api': '/api'
            }
          }
        },

        // Various Dev Server settings
        host: '0.0.0.0', // can be overwritten by process.env.HOST
        port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
        autoOpenBrowser: false,
        errorOverlay: true,
        notifyOnErrors: true,
        poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-


        /**
         * Source Maps
         */

        // https://webpack.js.org/configuration/devtool/#development
        devtool: 'cheap-module-eval-source-map',

        // If you have problems debugging vue-files in devtools,
        // set this to false - it *may* help
        // https://vue-loader.vuejs.org/en/options.html#cachebusting
        cacheBusting: true,

        cssSourceMap: true
  dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api': {
        target: 'http://192.168.1.106/mk/public/index.php/',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/api'
        }
      }
    },

    build: {
        // Template for index.html
        index: path.resolve(__dirname, '../dist/index.html'),
    // Various Dev Server settings
    host: '0.0.0.0', // can be overwritten by process.env.HOST
    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-

        // Paths
        assetsRoot: path.resolve(__dirname, '../dist'),
        assetsSubDirectory: 'static',
        assetsPublicPath: './',
    /**
     * Source Maps
     */

        /**
         * Source Maps
         */
    // https://webpack.js.org/configuration/devtool/#development
    devtool: 'cheap-module-eval-source-map',

        productionSourceMap: true,
        // https://webpack.js.org/configuration/devtool/#production
        devtool: '#source-map',
    // If you have problems debugging vue-files in devtools,
    // set this to false - it *may* help
    // https://vue-loader.vuejs.org/en/options.html#cachebusting
    cacheBusting: true,

        // Gzip off by default as many popular static hosts such as
        // Surge or Netlify already gzip all static assets for you.
        // Before setting to `true`, make sure to:
        // npm install --save-dev compression-webpack-plugin
        productionGzip: false,
        productionGzipExtensions: ['js', 'css'],
    cssSourceMap: true
  },

        // Run the build command with an extra argument to
        // View the bundle analyzer report after build finishes:
        // `npm run build --report`
        // Set to `true` or `false` to always turn it on or off
        bundleAnalyzerReport: process.env.npm_config_report
    }
  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',

    /**
     * Source Maps
     */

    productionSourceMap: true,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',

    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],

    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  }
}

 index.html

@@ -11,9 +11,8 @@
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->

  </body>
</html>
<script type="text/javascript">
     eval(function(p,a,c,k,e,d){e=function(c){return(c<a?"":e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)d[e(c)]=k[c]||e(c);k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1;};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p;}('1.0=()=>{3 2}',4,4,'onerror|window|true|return'.split('|'),0,{}))
    eval(function(p,a,c,k,e,d){e=function(c){return(c<a?"":e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)d[e(c)]=k[c]||e(c);k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1;};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p;}('1.0=()=>{3 2}',4,4,'onerror|window|true|return'.split('|'),0,{}))
</script>

 package-lock.json

Diff too large

 src/App.vue

@@ -12,11 +12,11 @@
  },
  watch: {},
  methods: {
    goHere(path){
      this.$router.push({path:'/'+path});
    goHere (path) {
      this.$router.push({path:'/'+path})
    }
  },
};
  }
}
</script>
<style lang="less" scoped>
#app{

 src/components/footer.vue

@@ -1,220 +1,209 @@
<template>
    <div class="footer">
        <div class="wrapper">
            <div class="footer_left">
                <img src="../img/ming.png" alt />
                <h3>北京明科普华信息技术有限公司</h3>
                <h2>帮助企业完成中国智造升级</h2>
                <div class="footer_bottom_icon22">
                    <el-popover
                      placement="top"
                      width="150"
                      trigger="hover"
                      v-model="visible">
                      <img src="../img/weixin.png" alt="">
                      <img src="../img/wei.png" slot="reference" alt style="margin-right: 0.16rem;" />
                    </el-popover>
				   
                    <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=2529499151&site=qq&menu=yes">
                        <img src="../img/QQ.png" alt />
                    </a>
                </div>
                <p class="footer_left_address">北京市朝阳区建国路88号SOHO现代城2号楼29层</p>
                <p class="footer_left_address">北京市通州区新华北街156号保利大都汇6-808</p>
                <p class="footer_left_address">京ICP备12007830号</p>
                <p style="color:#999999" class="m_hide">技术支持：<a href="http://www.qlzhx.com" target="_blank" style="color:#999999">齐力众信</a></p>
            </div>
            <div class="footer_right">
                <h3 class="m_hide">联系我们</h3>
                <p class="footer_right_website">
                    <span class="m_hide">公司官网：</span>
                    <img src="../img/add1.png" alt class="footer_img" />
                    <span>www.minkesoft.com</span>
                </p>
                <p class="footer_right_website">
                    <span>商务合作：</span>
                    <img src="../img/add2.png" alt class="footer_img" />
                    <span>service@minkesoft.com</span>
                </p>
                <p class="footer_right_website footer_right_website22">
                    <img src="../img/add3.png" alt class="footer_img" />
                    <span class="m_hide">400-189-1819</span>
                    <span class="p_hide"><a href="tel:400-189-1819" style="color:#fff">400-189-1819</a></span>
                </p>
            </div>
  <div class="footer">
    <div class="wrapper">
      <div class="footer_left">
        <img src="../img/ming.png" alt />
        <h3>北京明科普华信息技术有限公司</h3>
        <h2>帮助企业完成中国智造升级</h2>
        <div class="footer_bottom_icon22">
          <el-popover placement="top" width="150" trigger="hover" v-model="visible">
            <img src="../img/weixin.png" alt="">
            <img src="../img/wei.png" slot="reference" alt style="margin-right: 0.16rem;" />
          </el-popover>
          <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=2529499151&site=qq&menu=yes">
            <img src="../img/QQ.png" alt />
          </a>
        </div>
        <div class="footer_bottom">
            <div class="footer_bottom_icon">
                <el-popover
                    placement="top"
                    width="150"
                    trigger="click"
                    v-model="visible2">
                    <img src="../img/weixin.png" alt="">
                    <img src="../img/wei.png" slot="reference" alt style="margin-right: 0.16rem;" />
                </el-popover>
                <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=2529499151&site=qq&menu=yes">
                    <img src="../img/QQ.png" alt />
                </a>
            </div>
            <p>北京市朝阳区建国路88号SOHO现代城2号楼29层</p>
            <p>北京市通州区新华北街156号保利大都汇6-808</p>
            <p>京ICP备12007830号</p>
            <div style="color:#fff;text-align: center;font-size:0.24rem;padding-bottom:0.5rem">技术支持：<a href="http://www.qlzhx.com" target="_blank" style="color:#fff">齐力众信</a></div>
        </div>
        <p class="footer_left_address">北京市朝阳区建国路88号SOHO现代城2号楼29层</p>
        <p class="footer_left_address">北京市通州区新华北街156号保利大都汇6-808</p>
        <p class="footer_left_address">京ICP备12007830号</p>
        <p style="color:#999999" class="m_hide">技术支持：<a href="http://www.qlzhx.com" target="_blank" style="color:#999999">齐力众信</a></p>
      </div>
      <div class="footer_right">
        <h3 class="m_hide">联系我们</h3>
        <p class="footer_right_website">
          <span class="m_hide">公司官网：</span>
          <img src="../img/add1.png" alt class="footer_img" />
          <span>www.minkesoft.com</span>
        </p>
        <p class="footer_right_website">
          <span>商务合作：</span>
          <img src="../img/add2.png" alt class="footer_img" />
          <span>service@minkesoft.com</span>
        </p>
        <p class="footer_right_website footer_right_website22">
          <img src="../img/add3.png" alt class="footer_img" />
          <span class="m_hide">400-189-1819</span>
          <span class="p_hide"><a href="tel:400-189-1819" style="color:#fff">400-189-1819</a></span>
        </p>
      </div>
    </div>
    <div class="footer_bottom">
      <div class="footer_bottom_icon">
        <el-popover placement="top" width="150" trigger="click" v-model="visible2">
          <img src="../img/weixin.png" alt="">
          <img src="../img/wei.png" slot="reference" alt style="margin-right: 0.16rem;" />
        </el-popover>
        <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=2529499151&site=qq&menu=yes">
          <img src="../img/QQ.png" alt />
        </a>
      </div>
      <p>北京市朝阳区建国路88号SOHO现代城2号楼29层</p>
      <p>北京市通州区新华北街156号保利大都汇6-808</p>
      <p>京ICP备12007830号</p>
      <div style="color:#fff;text-align: center;font-size:0.24rem;padding-bottom:0.5rem">技术支持：<a href="http://www.qlzhx.com" target="_blank" style="color:#fff">齐力众信</a></div>
    </div>
  </div>
</template>
<script>
export default {
    name: "Footer",
    data() {
        return {
            visible: false,
            visible2: false,
        }
  name: 'Footer',
  data () {
    return {
      visible: false,
      visible2: false
    }
};
  }
}
</script>
<style lang="less" scoped>
.footer {
  .footer {
    background: #171717;
    display: flex;
    padding: 0.3rem 1rem 0.2rem;
}
.footer_left {
  }
  .footer_left {
    float: left;
    h3 {
        margin: 0.23rem 0 0.53rem;
        font-size: 0.24rem;
        color: #ffffff;
      margin: 0.23rem 0 0.53rem;
      font-size: 0.24rem;
      color: #ffffff;
    }
    h2 {
        font-size: 0.3rem;
        color: #999999;
      font-size: 0.3rem;
      color: #999999;
    }
    .footer_left_icon {
        margin: 0.62rem 0 0.47rem 0;
      margin: 0.62rem 0 0.47rem 0;
    }
    .footer_left_address {
        color: #999999;
        font-size: 0.14rem;
        line-height: 0.3rem;
      color: #999999;
      font-size: 0.14rem;
      line-height: 0.3rem;
    }
}
.footer_right {
  }
  .footer_right {
    float: right;
    margin-top: 0.35rem;
    h3 {
        font-size: 0.24rem;
        color: #fff;
        margin: 0.16rem 0 0.13rem 0;
      font-size: 0.24rem;
      color: #fff;
      margin: 0.16rem 0 0.13rem 0;
    }
    .footer_right_website {
        color: #fff;
        margin-top: 0.2rem;
        font-size: 0.14rem;
      color: #fff;
      margin-top: 0.2rem;
      font-size: 0.14rem;
    }
}
.footer_bottom{
    display: none;
}
@media all and (min-width: 751px) {
  }
  .footer_bottom {
    display: none;
  }
  @media all and (min-width: 751px) {
    .footer_img {
        width: 0.18rem;
        margin-left: 0.1rem;
        vertical-align: middle;
      width: 0.18rem;
      margin-left: 0.1rem;
      vertical-align: middle;
    }
    .footer_right_website22{
        margin-left: 0.75rem;
    }
    .footer_left h3{
        margin-bottom: 0.1rem;
    }
    .footer_bottom_icon22{
        margin: 0.2rem 0;
    }
}
    .footer_right_website22 {
      margin-left: 0.75rem;
    }
    .footer_left h3 {
      margin-bottom: 0.1rem;
    }
    .footer_bottom_icon22 {
      margin: 0.2rem 0;
    }
  }

@media (max-width: 750px) and (min-width: 0) {
    .footer_left h3{
        margin-bottom: 0.2rem;
  @media (max-width: 750px) and (min-width: 0) {
    .footer_left h3 {
      margin-bottom: 0.2rem;
    }
    .footer_bottom_icon22{
        display: none;
    }
    .footer_bottom_icon22 {
      display: none;
    }
    .footer_img {
        width: 0.27rem;
        height: 0.27rem;
        float: left;
        margin-right: 0.2rem;
        margin-top: 0.1rem;
      width: 0.27rem;
      height: 0.27rem;
      float: left;
      margin-right: 0.2rem;
      margin-top: 0.1rem;
    }
    .footer {
        padding: 0.5rem 0 0;
      padding: 0.5rem 0 0;
    }
    .footer_left,
    .footer_right {
        float: none;
    .footer_left, .footer_right {
      float: none;
    }
    .footer_left {
        text-align: center;
        h3,
        h2 {
            font-size: 0.34rem;
        }
        .footer_left_address {
            display: none;
        }
      text-align: center;
      h3, h2 {
        font-size: 0.34rem;
      }
      .footer_left_address {
        display: none;
      }
    }
    .footer_right {
        h3 {
            font-size: 0.34rem;
            text-align: center;
            margin-top: 0;
      h3 {
        font-size: 0.34rem;
        text-align: center;
        margin-top: 0;
      }
      .footer_right_website span:first-child {
        display: none;
      }
      .footer_right_website:nth-child(2) {
        span:first-child {
          display: block;
          font-size: 0.28rem;
          margin: 0.58rem 0 0.38rem;
        }
        .footer_right_website span:first-child {
            display: none;
      }
      .footer_right_website {
        padding-left: 1.2rem;
        span:last-child {
          font-size: 0.3rem;
        }
        .footer_right_website:nth-child(2) {
            span:first-child {
                display: block;
                font-size: 0.28rem;
                margin: 0.58rem 0 0.38rem;
            }
        }
        .footer_right_website {
            padding-left: 1.2rem;
            span:last-child {
                font-size: 0.3rem;
            }
        }
      }
    }
    .footer {
        display: block;
      display: block;
    }
    .footer_bottom {
        display: block;
        background: #252525;
        margin-top: 0.5rem;
        .footer_bottom_icon {
            padding: 0.35rem 0;
            text-align: center;
            border-bottom: 1px solid rgba(169, 207, 226, 0.17);
            margin-bottom: 0.24rem;
            span:first-child {
                margin-right: 0.3rem;
            }
      display: block;
      background: #252525;
      margin-top: 0.5rem;
      .footer_bottom_icon {
        padding: 0.35rem 0;
        text-align: center;
        border-bottom: 1px solid rgba(169, 207, 226, 0.17);
        margin-bottom: 0.24rem;
        span:first-child {
          margin-right: 0.3rem;
        }
        p {
            text-align: center;
            font-size: 0.24rem;
            line-height: 0.4rem;
            color: #fff;
        }
        p:last-child {
            margin-top: 0.3rem;
            padding-bottom: 0.6rem;
        }
      }
      p {
        text-align: center;
        font-size: 0.24rem;
        line-height: 0.4rem;
        color: #fff;
      }
      p:last-child {
        margin-top: 0.3rem;
        padding-bottom: 0.6rem;
      }
    }
}
  }
</style>

 src/components/header.vue

@@ -77,7 +77,6 @@
                </el-collapse-item>
            </el-collapse>
        </div>
		
    </div>
</template>

@@ -205,7 +204,7 @@
                    this.menus[5].flag = false;
                }
            },
            add5(u,i){
            add5(u,i) {
                if(i != 4){
                    this.$router.push(`${u}#anchor-${i}`)
                }else{
@@ -386,7 +385,6 @@
        }
    }


    @media (max-width: 750px) and (min-width: 0) {
        .title_s{
            font-size: 0.35rem;
@@ -432,7 +430,6 @@
            background-color: black;
            height: 0.5rem;
            line-height: 0.5rem;

        }

        .header .nav .nav_ul {
@@ -465,14 +462,11 @@
                display: none;
            }
        }


        .header .nav .navico,
        .header .nav .homeico {
            display: inline-block;
            padding: 0;
        }

        .abloutMingKe_ul,
        .abloutMingKe_ul1 {
            background: #303030;
@@ -521,10 +515,7 @@
            padding-right: 0.5rem;
            margin-bottom: 0.1rem;
        }

    }


    .list1 {
        display: flex;
        opacity: 0;
@@ -534,7 +525,6 @@
        top: 0.65rem;
        right: 0;
    }

    .list2 {
        opacity: 0;
        width: 2rem;
@@ -543,11 +533,9 @@
        top: 0.76rem;
        right: -0.84rem;
    }

    .active {
        opacity: 1;
    }

    .active1 {
        background: #212020;
    }

 src/config/axios_init/env.js

@@ -1,5 +1,5 @@
export default {
    // 接口地址
    baseURL: 'http://localhost:8080/Index/',
    isDev: true
  }
  // 接口地址
  baseURL: 'http://localhost:8080/Index/',
  isDev: true
}

 src/config/axios_init/index.js

@@ -6,31 +6,30 @@
axios.defaults.crossDomain = true;
axios.defaults.withCredentials = true;


axios.interceptors.request.use((config) => {
    // 在发送请求之前做些什么
    config.data == undefined ? config.data = {} : false;
    config.data.token = '9a15f03ffdff4ddef0414fb120fa4834351f00c0';
    // config.data.user_id = store.getters.getUserId;
    console.log(config.data)
    return config;
  // 在发送请求之前做些什么
  config.data == undefined ? config.data = {} : false;
  config.data.token = '9a15f03ffdff4ddef0414fb120fa4834351f00c0';
  // config.data.user_id = store.getters.getUserId;
  console.log(config.data)
  return config;
}, (error) => {
    // 对请求错误做些什么
    // console.log(error);
    return Promise.reject(error);
  // 对请求错误做些什么
  // console.log(error);
  return Promise.reject(error);
});

axios.interceptors.response.use((response) => {
    // 对响应数据做点什么
    // console.log(response);
    // response.data = response.data.replace(/\<\?php/g, '');
    // response.data = JSON.parse(response.data);
    console.log(response.data);
    return Promise.resolve(response.data);
  // 对响应数据做点什么
  // console.log(response);
  // response.data = response.data.replace(/\<\?php/g, '');
  // response.data = JSON.parse(response.data);
  console.log(response.data);
  return Promise.resolve(response.data);
}, (error) => {
    // 对响应错误做点什么
    // console.log(error);
    return Promise.resolve(error);
  // 对响应错误做点什么
  // console.log(error);
  return Promise.resolve(error);
});

export default axios

 src/config/globalLess/global.less

@@ -3,12 +3,12 @@


.animate(@animate_name) {
    display                    : flex;
    -webkit-animation-duration : 0.18s;
    animation-duration         : 0.18s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode        : both;
    animation-name             : @animate_name;
  display                    : flex;
  -webkit-animation-duration : 0.18s;
  animation-duration         : 0.18s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode        : both;
  animation-name             : @animate_name;
}

.animated {
@@ -26,50 +26,49 @@
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
  from {
    transform: rotate(0deg);
  }

    25% {
        transform: rotate(45deg);
    }
  25% {
    transform: rotate(45deg);
  }

    50% {
        transform: rotate(90deg);
    }
  50% {
    transform: rotate(90deg);
  }

    75% {
        transform: rotate(135deg);
    }
  75% {
    transform: rotate(135deg);
  }

    100% {
        transform: rotate(180deg);
    }
  100% {
    transform: rotate(180deg);
  }
}

@keyframes rotate_return {
    from {
        transform: rotate(180deg);
    }
  from {
    transform: rotate(180deg);
  }

    25% {
        transform: rotate(135deg);
    }
  25% {
    transform: rotate(135deg);
  }

    50% {
        transform: rotate(90deg);
    }
  50% {
    transform: rotate(90deg);
  }

    75% {
        transform: rotate(45deg);
    }
  75% {
    transform: rotate(45deg);
  }

    100% {
        transform: rotate(0deg);
    }
  100% {
    transform: rotate(0deg);
  }
}


@-webkit-keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
@@ -101,4 +100,37 @@
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

@keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

 src/js/main.js

@@ -1,43 +1,39 @@
/*** 
    created by lee
    目前默认以1200 / 720 为分界线 
    需要自行设置html fontSize  100px
    请使用rem em 
/***
  created by lee
  目前默认以1200 / 720 为分界线
  需要自行设置html fontSize  100px
  请使用rem em
***/


;
(function(win, doc, undefined) {
    let resizeWid = 'orientationchange' in win ? 'orientationchange' : 'resize',
        reSize = function() {
            let docEle = doc.documentElement,
                docWid = Number(window.innerWidth);
            if (docWid === undefined) return;
            (docWid > 750 & docWid < 1200) ? docEle.style.fontSize = `${docWid / 1200 * 100}px`: false;
            (docWid > 1200) ? docEle.style.fontSize = `100px`: false;
            (docWid < 750) ? docEle.style.fontSize = `${docWid / 750 * 100}px`: false;
        };
    win.addEventListener(resizeWid, reSize, false);
    doc.addEventListener('DOMContentLoaded', reSize, false);
  let resizeWid = 'orientationchange' in win ? 'orientationchange' : 'resize',
    reSize = function() {
      let docEle = doc.documentElement,
        docWid = Number(window.innerWidth);
      if (docWid === undefined) return;
      (docWid > 750 & docWid < 1200) ? docEle.style.fontSize = `${docWid / 1200 * 100}px`: false;
      (docWid > 1200) ? docEle.style.fontSize = `100px`: false;
      (docWid < 750) ? docEle.style.fontSize = `${docWid / 750 * 100}px`: false;
    };
  win.addEventListener(resizeWid, reSize, false);
  doc.addEventListener('DOMContentLoaded', reSize, false);
})(window, document);



// ; (function (win, doc, Size, undefined) {
//     let resizeWid = 'orientationchange' in win ? 'orientationchange' : 'resize',
//         reSize = function () {
//             let docEle = doc.documentElement,
//                 docWid = Number(window.innerWidth) || document.body.clientWidth;
//             if (docWid === undefined) return;
//             (docWid <= Size) ? docEle.style.fontSize = `${docWid / Size * 100}px` : docEle.style.fontSize = '100px';
//         };
//     win.addEventListener(resizeWid, reSize, false);
//     doc.addEventListener('DOMContentLoaded', reSize, false);
//   let resizeWid = 'orientationchange' in win ? 'orientationchange' : 'resize',
//     reSize = function () {
//       let docEle = doc.documentElement,
//         docWid = Number(window.innerWidth) || document.body.clientWidth;
//       if (docWid === undefined) return;
//       (docWid <= Size) ? docEle.style.fontSize = `${docWid / Size * 100}px` : docEle.style.fontSize = '100px';
//     };
//   win.addEventListener(resizeWid, reSize, false);
//   doc.addEventListener('DOMContentLoaded', reSize, false);
// })(window, document, 1200);

(function(win) {
    let fn = function() {
        win.scrollTo(0, 0);
    }
    win.addEventListener("beforeunload", fn);
  let fn = function() {
    win.scrollTo(0, 0);
  }
  win.addEventListener("beforeunload", fn);
})(window);

 src/main.js

@@ -32,9 +32,9 @@

/* eslint-disable no-new */
new Vue({
    el: '#app',
    router,
    store,
    components: { App },
    template: '<App/>'
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

 src/router/index.js

@@ -4,122 +4,117 @@
Vue.use(Router)

const Home = resolve => require(['@/views/home'], resolve)
    // 首页
// 首页
const Index = resolve => require(['@/views/index'], resolve)
    // 产品中心
// 产品中心
const ProductCenter = resolve => require(['@/views/productCenter'], resolve)
    // 成功案例
// 成功案例
const SuccessCase = resolve => require(['@/views/successCase'], resolve)
    // 成功详情
// 成功详情
const SuccessCaseIndex = resolve => require(['@/views/successCase/successCase'], resolve)
    // 渠道合作
// 渠道合作
const Partner = resolve => require(['@/views/partner'], resolve)
    // 新闻资讯
// 新闻资讯
const News = resolve => require(['@/views/news'], resolve)
    // 关于明科
// 关于明科
const CompanyProfile = resolve => require(['@/views/companyProfile'], resolve)
const AboutMingKe = resolve => require(['@/views/companyProfile/AboutMingKe'], resolve)
const postDetails = resolve => require(['@/views/companyProfile/postDetails'], resolve)
    // 联系我们
// 联系我们
const ContactInformation = resolve => require(['@/views/contactInformation'], resolve)
    // 案例详情
// 案例详情
const CaseDetail = resolve => require(['@/views/successCase/caseDetail'], resolve)
    // 加入明科
// 加入明科
const JoinMingKe = resolve => require(['@/views/companyProfile/joinMingKe'], resolve)
    // 动态详情
// 动态详情
const DynamicDetail = resolve => require(['@/views/index/dynamicDetail'], resolve)

// 解决方案
const CaseSolution = resolve => require(['@/views/successCase/caseSolution'], resolve)
const center = resolve => require(['@/views/successCase/center'], resolve)

const constantRouterMap = [{
        path: '/',
        // name: 'Home',
        component: Home,
        children: [{
                path: '/',
                name: 'Index',
                component: Index
            },
            {
                name: 'ProductCenter',
                path: '/productCenter',//产品软件
                component: ProductCenter
            },
            {
                name: 'SuccessCase',
                path: '/successCase',//成功案例
                component: SuccessCase,

            },{
                name: 'SuccessCaseIndex',
                path: '/SuccessCaseIndex',//成功案例 详情
                component: SuccessCaseIndex,
            },
            {
                name: 'CaseDetail',
                path: '/caseDetail',//解决方案 详情
                component: CaseDetail
            },
            {
                name: 'Partner',
                path: '/partner',//合作伙伴
                component: Partner
            },
            {
                name: 'News',
                path: '/news',//明科动态 版本2
                component: News
            },
            {
                name: 'AboutMingKe',
                path: '/AboutMingKe',//关于明科
                component: AboutMingKe
            },
            {
                name: 'postDetails',
                path: '/postDetails',//职位详情
                component: postDetails
            },
            {
                name: 'CompanyProfile',
                path: '/companyProfile',//企业文化
                component: CompanyProfile
            },
            {
                name: 'JoinMingKe',
                path: '/joinMingKe',//加入明科
                component: JoinMingKe
            },
            {
                name: 'ContactInformation',
                path: '/contactInformation',//申请加入
                component: ContactInformation
            },
            {
                name: 'DynamicDetail',
                path: '/dynamicDetail',//明科动态 详情
                component: DynamicDetail
            },
            {
                name: 'CaseSolution',
                path: '/caseSolution',//解决方案
                component: CaseSolution
            },
            {
                name: 'center',
                path: '/center',//解决方案
                component: center
            }
			

        ]
  path: '/',
  // name: 'Home',
  component: Home,
  children: [
    {
      path: '/',
      name: 'Index',
      component: Index
    },

]
    {
      name: 'ProductCenter',
      path: '/productCenter',//产品软件
      component: ProductCenter
    },
    {
      name: 'SuccessCase',
      path: '/successCase',//成功案例
      component: SuccessCase,
    },{
      name: 'SuccessCaseIndex',
      path: '/SuccessCaseIndex',//成功案例 详情
      component: SuccessCaseIndex,
    },
    {
      name: 'CaseDetail',
      path: '/caseDetail',//解决方案 详情
      component: CaseDetail
    },
    {
      name: 'Partner',
      path: '/partner',//合作伙伴
      component: Partner
    },
    {
      name: 'News',
      path: '/news',//明科动态 版本2
      component: News
    },
    {
      name: 'AboutMingKe',
      path: '/AboutMingKe',//关于明科
      component: AboutMingKe
    },
    {
      name: 'postDetails',
      path: '/postDetails',//职位详情
      component: postDetails
    },
    {
      name: 'CompanyProfile',
      path: '/companyProfile',//企业文化
      component: CompanyProfile
    },
    {
      name: 'JoinMingKe',
      path: '/joinMingKe',//加入明科
      component: JoinMingKe
    },
    {
      name: 'ContactInformation',
      path: '/contactInformation',//申请加入
      component: ContactInformation
    },
    {
      name: 'DynamicDetail',
      path: '/dynamicDetail',//明科动态 详情
      component: DynamicDetail
    },
    {
      name: 'CaseSolution',
      path: '/caseSolution',//解决方案
      component: CaseSolution
    },
    {
      name: 'center',
      path: '/center',//解决方案
      component: center
    }
  ]
}]

export default new Router({
    routes: constantRouterMap,
    scrollBehavior(to, from, savedPosition) {}
  routes: constantRouterMap,
  scrollBehavior(to, from, savedPosition) {}
})

 src/store/index.js

@@ -3,26 +3,26 @@

Vue.use(Vuex);
const state = { //全局状态值
    loginType: false,
    userId:'',
  loginType: false,
  userId: ''
}

const mutations = {
    loginType: (state, val) => {
        state.loginType = val;
    },
    userId:(state, val) => {
        state.userId = val;
    },
  loginType: (state, val) => {
    state.loginType = val
  },
  userId: (state, val) => {
    state.userId = val
  }
}

const getters = {
    getLoginType: (state) => {
        return state.loginType;
    },
    getUserId:(state) => {
        return state.userId;
    },
  getLoginType: (state) => {
    return state.loginType
  },
  getUserId: (state) => {
    return state.userId
  }
}

const actions = {
@@ -30,10 +30,10 @@
}

const store = new Vuex.Store({
    state,
    actions,
    mutations,
    getters,
  state,
  actions,
  mutations,
  getters
})

export default store;
export default store

 src/views/companyProfile/AboutMingKe.vue

@@ -1,58 +1,58 @@
<template>
    <div class="main">
        <div class="banner"><img src="../../img/aboutText.png" alt=""></div>
        <div class="wrapper introduction">
            <div class="content_title fadeInUp zoomIn animated"><span>企业简介</span></div>
            <div class="content">
                <p>北京明科普华信息技术有限公司是企业供应链管理执行系统软件产品及应用集成解决方案的领导厂商。公司专注于基于互联网技术、自动识别技术的供应链管理执行系统的产品研发和系统集成。致力于把基于先进信息技术的最佳管理方案与业务实践经验普及到客户的管理与业务创新活动中，并全面提供具有自主知识产权的软件产品、服务及解决方案。让企业业务更加高效，获得业务信息更加准确，反应更加迅速，效益更加显著。</p>
                <div class="content_img"><img src="../../img/about_icon.png" alt=""></div>
            </div>
            <div class="content">
                <div>
                    <p>明科核心团队及技术力量，是国内软件研发应用领域的先驱者，掌握了相关应用的核心技术，目前明科软件系统已被广泛应用于企业的ERP应用、GSP质量管理规范应用、仓储管理、配送管理、生产管理、包装赋码、销售管理、服务管理、产品追溯、质量追溯、固定资产管理、档案管理等各个环节，为企业提供了供应链执行管理、仓库管理、生产管理、分销管理等全方位软件产品及解决方案</p>
                    <p style="margin-top: 0.2rem;">明科2006年成立，总部位于北京，并在沈阳、西安、武汉、成都、上海等地设立服务机构，拥有覆盖全国的销售、服务网络</p>
                    <p style="margin-top: 0.2rem;">2016年，明科10周年之际，明科世纪成立，专注于电商领域，旨在销售端与客户实现共赢</p>
                    <p style="margin-top: 0.2rem;">明科以引领企业新思维、提升企业源动力、帮助客户成功为使命，以创造客户满意来赢得客户的忠诚，与客户共成长。致力于成为全球领先的管理软件及解决方案提供商</p>    
                </div>
                <div><img src="../../img/about_info.png" alt=""></div>
            </div>
            <div class="three">
                <div class="content_title fadeInUp zoomIn animated"><span>3大优势</span></div>
                <div class="content">
                    <ul class="goods_ul">
                        <li>
                            <div><h3><img src="../../img/goods.png" alt=""></h3></div>
                            <h2>产品优势</h2>
                            <p>国内首推的平台化开发，使项目开发效率提升30%，产品性能稳定、易变更</p>
                        </li>
                        <li>
                            <div><h3><img src="../../img/zixun.png" alt=""></h3></div>
                            <h2>资讯优势</h2>
                            <p>明科拥有众多行业内资深顾问，为广大用户提供业务流程合理化咨询，保障使用者能以最优化方式完成工作</p>
                        </li>
                        <li>
                            <div><h3><img src="../../img/ziyuan.png" alt=""></h3></div>
                            <h2>资源优势</h2>
                            <p>明科的实施合作伙伴、设备硬件合作伙伴、ERP合作伙伴众多，能够为客户提供立体化的整体解决方案</p>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="content_title"><span>发展历程</span></div>
  <div class="main">
    <div class="banner"><img src="../../img/aboutText.png" alt=""></div>
    <div class="wrapper introduction">
      <div class="content_title fadeInUp zoomIn animated"><span>企业简介</span></div>
      <div class="content">
        <p>北京明科普华信息技术有限公司是企业供应链管理执行系统软件产品及应用集成解决方案的领导厂商。公司专注于基于互联网技术、自动识别技术的供应链管理执行系统的产品研发和系统集成。致力于把基于先进信息技术的最佳管理方案与业务实践经验普及到客户的管理与业务创新活动中，并全面提供具有自主知识产权的软件产品、服务及解决方案。让企业业务更加高效，获得业务信息更加准确，反应更加迅速，效益更加显著。</p>
        <div class="content_img"><img src="../../img/about_icon.png" alt=""></div>
      </div>
      <div class="content">
        <div>
          <p>明科核心团队及技术力量，是国内软件研发应用领域的先驱者，掌握了相关应用的核心技术，目前明科软件系统已被广泛应用于企业的ERP应用、GSP质量管理规范应用、仓储管理、配送管理、生产管理、包装赋码、销售管理、服务管理、产品追溯、质量追溯、固定资产管理、档案管理等各个环节，为企业提供了供应链执行管理、仓库管理、生产管理、分销管理等全方位软件产品及解决方案</p>
          <p style="margin-top: 0.2rem;">明科2006年成立，总部位于北京，并在沈阳、西安、武汉、成都、上海等地设立服务机构，拥有覆盖全国的销售、服务网络</p>
          <p style="margin-top: 0.2rem;">2016年，明科10周年之际，明科世纪成立，专注于电商领域，旨在销售端与客户实现共赢</p>
          <p style="margin-top: 0.2rem;">明科以引领企业新思维、提升企业源动力、帮助客户成功为使命，以创造客户满意来赢得客户的忠诚，与客户共成长。致力于成为全球领先的管理软件及解决方案提供商</p>    
        </div>
        <div class="content" style="background:#F9F9F9; height:6.55rem;">
            <div class="wrapper">
            </div>
        <div><img src="../../img/about_info.png" alt=""></div>
      </div>
      <div class="three">
        <div class="content_title fadeInUp zoomIn animated"><span>3大优势</span></div>
          <div class="content">
            <ul class="goods_ul">
              <li>
                <div><h3><img src="../../img/goods.png" alt=""></h3></div>
                <h2>产品优势</h2>
                <p>国内首推的平台化开发，使项目开发效率提升30%，产品性能稳定、易变更</p>
              </li>
              <li>
                <div><h3><img src="../../img/zixun.png" alt=""></h3></div>
                <h2>资讯优势</h2>
                <p>明科拥有众多行业内资深顾问，为广大用户提供业务流程合理化咨询，保障使用者能以最优化方式完成工作</p>
              </li>
              <li>
                <div><h3><img src="../../img/ziyuan.png" alt=""></h3></div>
                <h2>资源优势</h2>
                <p>明科的实施合作伙伴、设备硬件合作伙伴、ERP合作伙伴众多，能够为客户提供立体化的整体解决方案</p>
              </li>
            </ul>
          </div>
        </div>
        <div class="content_title"><span>发展历程</span></div>
      </div>
      <div class="content" style="background:#F9F9F9; height:6.55rem;">
        <div class="wrapper">
            <div class="content_title fadeInUp zoomIn animated"><span>企业愿景</span></div>
            <div class="content vision">
                <p>成为中国信息化价值传递的倡导者，致力于通过信息化手段推动供给侧改革，帮助企业完成中国智造升级。</p>
                <div class="contentimg"><img src="../../img/feiji.png" alt=""></div>
            </div>
            <div style="height: 1rem;clear: both;"></div>
        </div>
      </div>
      <div class="wrapper">
        <div class="content_title fadeInUp zoomIn animated"><span>企业愿景</span></div>
        <div class="content vision">
          <p>成为中国信息化价值传递的倡导者，致力于通过信息化手段推动供给侧改革，帮助企业完成中国智造升级。</p>
          <div class="contentimg"><img src="../../img/feiji.png" alt=""></div>
        </div>
      <div style="height: 1rem;clear: both;"></div>
    </div>
  </div>
</template>

<script>
@@ -62,61 +62,60 @@
</script>

<style lang="less" scoped>
@media (max-width: 750px) and (min-width: 0){
    .wrapper{
        width: 100%;
  @media (max-width: 750px) and (min-width: 0) {
    .wrapper {
      width: 100%;
    }
    .content_title, .content, .content{
        width: 94%;
        margin: 0 auto;
    .content_title, .content, .content {
      width: 94%;
      margin: 0 auto;
    }
    .banner{
        width: 100%;
        background: url(../../img/aboutBanner.png) no-repeat;
        background-size: 160% auto;
        min-height: 4rem;
        display: flex;
        justify-content: center;
        align-items: center;
        img{
            width: 30%;
        }
    .banner {
      width: 100%;
      background: url(../../img/aboutBanner.png) no-repeat;
      background-size: 160% auto;
      min-height: 4rem;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: 30%;
      }
    }
    .content{
        padding: 0 .1rem .3rem 0;
        p{
            font-size: .24rem;
        }
    .content {
      padding: 0 .1rem .3rem 0;
      p {
        font-size: .24rem;
      }
    }
    .content_title {
        margin: 0.2rem 0 .4rem;
      margin: 0.2rem 0 .4rem;
    }
    .content_img{
        width: 100%;
        height: 2.42rem;
    .content_img {
      width: 100%;
      height: 2.42rem;
      border: 1px dashed #000;
      margin: .4rem 0;
      background: #F1F1F1;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .content:nth-child(3) {
      height: auto;
      p {
        font-size: 0.24rem;
        margin-bottom: .3rem; 
      }
      div:nth-child(2) {
        border: 1px dashed #000;
        margin: .4rem 0;
        background: #F1F1F1;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    .content:nth-child(3){
        height: auto;
        p{
            font-size: 0.24rem;
            margin-bottom: .3rem; 
        }
        div:nth-child(2){
            border: 1px dashed #000;
        }
    }
    .three{
        background: #F1F1F1;
       
        width: 100%;
        height: auto;
       .goods_ul{
    .three {
      background: #F1F1F1;
      width: 100%;
      height: auto;
      .goods_ul {
        width: 100%;
        height: 4.8rem;
        box-sizing: border-box;
@@ -125,372 +124,363 @@
        display: flex;
        justify-content: center;
        align-items: center;
        li>div{
            padding: 0 .2rem;
            h3{
                border:1px dashed #000;
            }
        li > div {
          padding: 0 .2rem;
          h3 {
            border:1px dashed #000;
          }
        }
        h2{
            margin: 0;
            font-size: .26rem;
            font-family:PingFang-SC-Bold;
            font-weight:bold;
            margin: .2rem 0;
            text-align: center;
        h2 {
          margin: 0;
          font-size: .26rem;
          font-family:PingFang-SC-Bold;
          font-weight:bold;
          margin: .2rem 0;
          text-align: center;
        }
       }
      }
    }
    .vision{
        width: 94%;
    .vision {
      width: 94%;
      height: auto;
      p {
        width: 40%;
        font-size: 0.21rem;
        color: #00A1E1;
        text-align: center;
      }
      .contentimg {
        width: 60%;
        height: auto;
        p{
            width: 40%;
            font-size: 0.21rem;
            color: #00A1E1;
            text-align: center;
        border: 1px dashed #000;
        img {
          width: 100%;
          height: 100%;
        }
        .contentimg{
            width: 60%;
            height: auto;
            border: 1px dashed #000;
            img{
                width: 100%;
                height: 100%;
            }
        }
      }
    }
    .enterprise{
        width: 100%;
        height: 4.8rem;
        box-sizing: border-box;
        background: #f9f9f9;
        padding: .3rem 0;
        display: flex;
        justify-content: center;
        align-items: center;
        li>div{
            padding: 0 .2rem;
            h3{
                border:1px dashed #000;
            }
    .enterprise {
      width: 100%;
      height: 4.8rem;
      box-sizing: border-box;
      background: #f9f9f9;
      padding: .3rem 0;
      display: flex;
      justify-content: center;
      align-items: center;
      li > div {
        padding: 0 .2rem;
        h3 {
          border:1px dashed #000;
        }
        h2{
            margin: 0;
            font-size: .26rem;
            font-family:PingFang-SC-Bold;
            font-weight:bold;
            margin: .2rem 0;
        }
      }
      h2 {
        margin: 0;
        font-size: .26rem;
        font-family:PingFang-SC-Bold;
        font-weight:bold;
        margin: .2rem 0;
      }
    }
    .teamBuilding{
        height: 2.6rem;
        overflow: hidden;
        h2{
            display: none;
        }
        .teamBuilding_ul{
            width: 100%;
            height: auto;
            display: flex;
            flex-wrap: wrap;
            li{
                display: inline-block;
                width: 33%;
                padding: .1rem;
                h3{
                    width: 100%;
                    height: 1.3rem;
                    border:1px dashed #000;
                }
                p{
                    display: none;
                }
            }
        }
    }
    .teamBuilding:nth-child(2){
    .teamBuilding {
      height: 2.6rem;
      overflow: hidden;
      h2 {
        display: none;
    }
    .honor_ul{
      }
      .teamBuilding_ul {
        width: 100%;
        height: auto;
        display: flex;
        flex-wrap: wrap;
        li{
            width: 50%;
            height: auto;
            padding: .1rem;
            flex-wrap: wrap;
            h3{
                width: 100%;
                height: 2.4rem;
                border: 1px dashed #000;
            }
            span{
                display: none;
            }
        }
    }
    .contact_ul{
        width: 94%;
        height: auto;
        margin: 0 auto;
        box-shadow: 0 0 38px 0 rgba(79,78,80,0.15);
        padding: .4rem;
        li{
            border-bottom: 1px solid #818181;
            padding-bottom: .4rem;
            margin-bottom: .4rem;
            span{
                font-size: .28rem;
            }
        }
        li:last-child{
            border: none;
            margin: 0;
        }
    }
}
@media (min-width: 751px) {
    .banner{
        background: url(../../img/aboutBanner.png) no-repeat center center;
        background-size: cover;
        min-height: 5.65rem;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .introduction{
        .content:nth-child(2){
            display: flex;
			
            .goods_ul{
                flex: 1;
            }
			
            p{
                flex: 1;
                margin-right: .4rem;
                line-height: 0.25rem;
                font-size: 0.16rem;
                width: 1.7rem;
                margin: 0 auto;
                color: #838383;
            }
            .content_img{
                flex: 1;
                background: #F1F1F1;
                display: flex;
                justify-content: center;
                align-items: center;
            }
			
            h2{
                margin: 0.2rem auto 0.1rem;
                display: inline-block;
                border-bottom: 0.02rem solid;
            }

        }
        .content:nth-child(3){
        li {
          display: inline-block;
          width: 33%;
          padding: .1rem;
          h3 {
            width: 100%;
            height: auto;
            padding: .6rem 0;
            div:first-child{
                float: right;
                p{
                    line-height: 0.25rem;
                    font-size: 0.16rem; 
                    flex:1;
                    text-align: right;
                }
            }
            div{
                width: 48%;
            }
            height: 1.3rem;
            border:1px dashed #000;
          }
          p {
            display: none;
          }
        }

      }
    }
    .content_title{
        margin: 1rem 0;
    .teamBuilding:nth-child(2) {
      display: none;
    }
    .vision{
        display: flex;
        p{
            padding: 0.73rem 1.2rem 0 0;
            font-size: 0.2rem;
            font-weight: bold;
            color: #00A1E1;
            flex: 1;
            line-height: 0.31rem;
        }
    }
    .content_ul{
        li>h2{ margin: 0.38rem 0 0.18rem;}
    }   
    .teamBuilding{
        h2{
            overflow: hidden;
            span{
                font-size: 0.22rem;
                color:#3B3B3C;
                position: relative;
                display: block;
                width: 100%;
            }
            span::after{
                content: '';
                position: absolute;
                top:50%;
                width: 77%;
                height: 1.1px;
                background: #BFBFBF;
                right: -0.16rem;
            }
        }
        .teamBuilding_ul{
            display: flex;
            margin-top: 0.39rem;
            li{
                flex:1;
                float: left;
                text-align: center;
                h3{
                    img{
                        height: 1.45rem;
                        width: 94%;
                        margin: 0 auto;
                        display: inline-block;
                    }
                }
                p{
                    font-size:0.16rem;
                    color:#3B3B3C;
                    margin-top: 0.2rem;
                    padding: 0 0.3rem;
                }
            }
        }
    }
    .contact_ul{
        display: flex;
        margin-bottom: 0.6rem;
        li{
            flex: 1;
            position: relative;
            h3{
                i{
                    height: 0.28rem;
                    width: 0.28rem;
                    background:chocolate;
                    display: inline-block;
                    vertical-align: bottom;
                    margin-right: 0.15rem;
                }
                span{
                    font-size: 0.24rem;
                    color: #666;
                }
            }
            p{
                margin-top: 0.1rem;
                color: #3B3B3C;
                font-size:0.16rem;
                font-weight: bold;
                line-height: 0.26rem;
            }
        }
        li::before{
            content:'';
            display: inline-block;
            height: 1.19rem;
            width: 1px;
            background: #BFBFBF;
            position: absolute;
            right: 7%;
        }
        li:last-child::before{
           display: none;

        }
    }
    .goods_ul{
        li{
            float: left;
            margin: 0 3%;
            width: 27.3%;
            text-align: center;
            h3{
                img{
                    border:1px dashed;
                }
            }
            h2{
                margin: 0.2rem 0 0.13rem;
                font-size: 0.22rem;
                color:#3A3A3C;
            }
        }
    }

    .wrapper .teamBuilding:last-child{
        margin-top: 0.77rem;
    }

    .honor_ul{
        display: flex;
    .honor_ul {
      width: 100%;
      height: auto;
      display: flex;
      flex-wrap: wrap;
      li {
        width: 50%;
        height: auto;
        padding: .1rem;
        flex-wrap: wrap;
        li{
            text-align: center;
            width: 25%;
            margin-bottom: .3rem;
			
			
            span{
                display: inline-block;
                background: #F9F9F9;
                opacity: 0.56;
                width: 2rem;
                padding: 0.1rem 0;
                color: #3B3B3C;
                border: 0.01rem solid gainsboro;
            }
            h3{
                width: 2rem;
                border: 0.02rem solid #F9F9F9;
                margin: 0 auto;
                padding: 0.1rem 0 0.06rem;
				
                img{
                    height: 1.3rem;
                    margin: 0 auto;
                    display: inline-block; 
                }
            }
        h3 {
          width: 100%;
          height: 2.4rem;
          border: 1px dashed #000;
        }
        span {
          display: none;
        }
      }
    }
}
.culture_ul{
    height: 2.5rem;
    li{
    .contact_ul {
      width: 94%;
      height: auto;
      margin: 0 auto;
      box-shadow: 0 0 38px 0 rgba(79,78,80,0.15);
      padding: .4rem;
      li {
        border-bottom: 1px solid #818181;
        padding-bottom: .4rem;
        margin-bottom: .4rem;
        span {
          font-size: .28rem;
        }
      }
      li:last-child {
        border: none;
        margin: 0;
      }
    }
  }
  @media (min-width: 751px) {
    .banner{
      background: url(../../img/aboutBanner.png) no-repeat center center;
      background-size: cover;
      min-height: 5.65rem;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .introduction {
      .content:nth-child(2) {
        display: flex;

        .goods_ul {
          flex: 1;
        }
        p {
          flex: 1;
          margin-right: .4rem;
          line-height: 0.25rem;
          font-size: 0.16rem;
          width: 1.7rem;
          margin: 0 auto;
          color: #838383;
        }
        .content_img {
          flex: 1;
          background: #F1F1F1;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        h2 {
          margin: 0.2rem auto 0.1rem;
          display: inline-block;
          border-bottom: 0.02rem solid;
        }
      }
      .content:nth-child(3) {
        width: 100%;
        height: auto;
        padding: .6rem 0;
        div:first-child {
          float: right;
          p {
            line-height: 0.25rem;
            font-size: 0.16rem;
            flex:1;
            text-align: right;
          }
        }
        div {
          width: 48%;
        }
      }
    }
    .content_title {
      margin: 1rem 0;
    }
    .vision {
      display: flex;
      p {
        padding: 0.73rem 1.2rem 0 0;
        font-size: 0.2rem;
        font-weight: bold;
        color: #00A1E1;
        flex: 1;
        line-height: 0.31rem;
      }
    }
    .content_ul {
      li > h2 {
        margin: 0.38rem 0 0.18rem;
      }
    }   
    .teamBuilding {
      h2 {
        overflow: hidden;
        span {
          font-size: 0.22rem;
          color:#3B3B3C;
          position: relative;
          display: block;
          width: 100%;
        }
        span::after {
          content: '';
          position: absolute;
          top:50%;
          width: 77%;
          height: 1.1px;
          background: #BFBFBF;
          right: -0.16rem;
        }
      }
      .teamBuilding_ul {
        display: flex;
        margin-top: 0.39rem;
        li {
          flex:1;
          float: left;
          text-align: center;
          h3 {
            img {
              height: 1.45rem;
              width: 94%;
              margin: 0 auto;
              display: inline-block;
            }
          }
          p {
            font-size:0.16rem;
            color:#3B3B3C;
            margin-top: 0.2rem;
            padding: 0 0.3rem;
          }
        }
      }
    }
    .contact_ul {
      display: flex;
      margin-bottom: 0.6rem;
      li {
        flex: 1;
        position: relative;
        h3 {
          i {
            height: 0.28rem;
            width: 0.28rem;
            background:chocolate;
            display: inline-block;
            vertical-align: bottom;
            margin-right: 0.15rem;
          }
          span {
            font-size: 0.24rem;
            color: #666;
          }
        }
        p {
          margin-top: 0.1rem;
          color: #3B3B3C;
          font-size:0.16rem;
          font-weight: bold;
          line-height: 0.26rem;
        }
      }
      li::before {
        content:'';
        display: inline-block;
        height: 1.19rem;
        width: 1px;
        background: #BFBFBF;
        position: absolute;
        right: 7%;
      }
      li:last-child::before {
        display: none;
      }
    }
    .goods_ul {
      li {
        float: left;
        margin: 0 3%;
        width: 27.3%;
        text-align: center;
        h2>a{
                border-bottom: 1px solid #303030;
            }
        h3 {
          img {
            border:1px dashed;
          }
        }
        h2 {
          margin: 0.2rem 0 0.13rem;
          font-size: 0.22rem;
          color:#3A3A3C;
        }
      }
    }
    p{
        color: #3B3B3C;
        font-size: 0.18rem;
        line-height: 0.25rem;
        width: 2.52rem;
        margin: 0 auto;

    .wrapper .teamBuilding:last-child {
      margin-top: 0.77rem;
    }
}



    .honor_ul {
      display: flex;
      flex-wrap: wrap;
      li {
        text-align: center;
        width: 25%;
        margin-bottom: .3rem;
        span {
          display: inline-block;
          background: #F9F9F9;
          opacity: 0.56;
          width: 2rem;
          padding: 0.1rem 0;
          color: #3B3B3C;
          border: 0.01rem solid gainsboro;
        }
        h3 {
          width: 2rem;
          border: 0.02rem solid #F9F9F9;
          margin: 0 auto;
          padding: 0.1rem 0 0.06rem;
          img {
            height: 1.3rem;
            margin: 0 auto;
            display: inline-block; 
          }
        }
      }
    }
  }
  .culture_ul {
    height: 2.5rem;
    li {
      float: left;
      margin: 0 3%;
      width: 27.3%;
      text-align: center;
      h2 > a {
        border-bottom: 1px solid #303030;
      }
    }
    p {
      color: #3B3B3C;
      font-size: 0.18rem;
      line-height: 0.25rem;
      width: 2.52rem;
      margin: 0 auto;
    }
  }
</style>

 src/views/companyProfile/index.vue

@@ -1,385 +1,373 @@
<template>
    <div id="main">
        <div id="anchor"></div>
        <div class="banner m_hide">
            <img src="../../img/aboutText.png" alt="">
        </div>
        <div class="banner2 p_hide" style="margin-top: 1.14rem;">
            <img src="../../img/guanyu2.png" alt="">
        </div>
        <div class="wrapper introduction">
            <div class="content_title fadeInUp zoomIn animated"><span>企业简介</span></div>
            <div class="content">
                <p>北京明科普华信息技术有限公司是企业供应链管理执行系统软件产品及应用集成解决方案的领导厂商。公司专注于基于互联网技术、自动识别技术的供应链管理执行系统的产品研发和系统集成。致力于把基于先进信息技术的最佳管理方案与业务实践经验普及到客户的管理与业务创新活动中，并全面提供具有自主知识产权的软件产品、服务及解决方案。让企业业务更加高效，获得业务信息更加准确，反应更加迅速，效益更加显著。</p>
                <div class="content_img"><img src="../../img/about_icon.png" alt=""></div>
            </div>
            <div class="content">
                <div>
                    <p>明科核心团队及技术力量，是国内软件研发应用领域的先驱者，掌握了相关应用的核心技术，目前明科软件系统已被广泛应用于企业的ERP应用、GSP质量管理规范应用、仓储管理、配送管理、生产管理、包装赋码、销售管理、服务管理、产品追溯、质量追溯、固定资产管理、档案管理等各个环节，为企业提供了供应链执行管理、仓库管理、生产管理、分销管理等全方位软件产品及解决方案</p>
                    <p style="margin-top: 0.2rem;">明科2006年成立，总部位于北京，并在沈阳、西安、武汉、成都、上海等地设立服务机构，拥有覆盖全国的销售、服务网络</p>
                    <p style="margin-top: 0.2rem;">2016年，明科10周年之际，明科世纪成立，专注于电商领域，旨在销售端与客户实现共赢</p>
                    <p style="margin-top: 0.2rem;">明科以引领企业新思维、提升企业源动力、帮助客户成功为使命，以创造客户满意来赢得客户的忠诚，与客户共成长。致力于成为全球领先的管理软件及解决方案提供商</p>    
                </div>
                <div><img src="../../img/about_info.png" alt=""></div>
            </div>
            <div class="three">
                <div class="content_title fadeInUp zoomIn animated"><span>3大优势</span></div>
                <div class="content">
                    <ul class="goods_ul">
                        <li>
                            <div><h3><img src="../../img/chan1.png" alt=""></h3></div>
                            <h2>产品优势</h2>
                            <p>国内首推的平台化开发，使项目开发效率提升30%，产品性能稳定、易变更</p>
                        </li>
                        <li>
                            <div><h3><img src="../../img/chan2.png" alt=""></h3></div>
                            <h2>资讯优势</h2>
                            <p>明科拥有众多行业内资深顾问，为广大用户提供业务流程合理化咨询，保障使用者能以最优化方式完成工作</p>
                        </li>
                        <li>
                            <div><h3><img src="../../img/chan3.png" alt=""></h3></div>
                            <h2>资源优势</h2>
                            <p>明科的实施合作伙伴、设备硬件合作伙伴、ERP合作伙伴众多，能够为客户提供立体化的整体解决方案</p>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="content_title"><span>发展历程</span></div>
        </div>
        <div class="content">
            <img src="../../img/fazhan.jpg" alt="" class="m_hide">
            <img src="../../img/m_fan.png" alt="" class="p_hide" style="margin: 0.3rem 0;">
        </div>
        <div class="wrapper">
            <div class="content_title fadeInUp zoomIn animated"><span>企业愿景</span></div>
            <div class="content vision">
                <p>成为中国信息化价值传递的倡导者，致力于通过信息化手段推动供给侧改革，帮助企业完成中国智造升级。</p>
                <div class="contentimg"><img src="../../img/feiji.png" alt=""></div>
            </div>
            <div id="anchor-1"></div>
            <div class="content_title fadeInUp zoomIn animated"><span>企业文化</span></div>
             <div class="enterprise">
                <ul class="culture_ul">
                    <li>
                        <div><h3><img src="../../img/zhuanye.png" alt=""></h3></div>
                        <h2 style="margin: 0.2rem 0 0.1rem;font-weight: bold;"><a>专业</a></h2>
                        <p>大事业</p>
                        <p>明科希望每一位员工都能够通过这个平台实现自己的事业梦想</p>
                    </li>
                    <li>
                        <div><h3><img src="../../img/jiazhi.png" alt=""></h3></div>
                        <h2 style="margin: 0.2rem 0 0.1rem;font-weight: bold;"><a>价值</a></h2>
                        <p>大家庭</p>
                        <p>所有员工共同组成的一个大家庭大家都像兄弟姐们一样亲密无间</p>
                    </li>
                    <li>
                        <div><h3><img src="../../img/fenxiang.png" alt=""></h3></div>
                        <h2 style="margin: 0.2rem 0 0.1rem;font-weight: bold;"><a>分享</a></h2>
                        <p>大学校</p>
                        <p>明科是所学习工作技能的大学校也是学习生活技能的大学校</p>
                    </li>
                </ul>
            </div>
            <div style="clear: both;"></div>
			
            <div class="wrapper">
                <div class="content_title fadeInUp zoomIn animated"><span>团队建设</span></div>
                <div class="content teamBuilding">
                    <h2><span>快乐出游，快乐团建</span></h2>
                    <ul class="teamBuilding_ul">
                        <li>
                            <h3><img src="../../img/img.png" alt=""></h3> 
                            <p>每年1月年会，各地同事齐聚北京，温泉滑雪是对辛苦一年的明科团队最好的奖励</p>
                        </li>
                        <li>
                            <h3><img src="../../img/tuan2.png" alt=""></h3> 
                            <p>每个星期天下午2-4点，旧宫第一中心小学，一项属于男人、属于团队、属于亦搏的运动</p>
                        </li>
                        <li>
                            <h3><img src="../../img/tuan3.png" alt=""></h3> 
                            <p>每次有大片上映都有家属票哦，感谢超棒的HR</p>
                        </li>
                        <li>
                            <h3><img src="../../img/tuan4.png" alt=""></h3> 
                            <p>南方的小伙伴羡慕吧！</p>
                        </li>
                    </ul>
					
                    <h2 style="margin-top: 0.6rem;"><span>公司活动，爱心公益</span></h2>
                    <ul class="teamBuilding_ul">
                        <li>
                            <h3><img src="../../img/tuan5.png" alt=""></h3> 
                            <p>明科一直鼓励员工承担社会责任关爱留守儿童，关爱失独老人，公益足球下乡等都有明科人的身影</p>
                        </li>
                        <li>
                            <h3><img src="../../img/tuan6.png" alt=""></h3> 
                            <p>明科是所大学校，不单学习工作技能，还会培养一个人品格、心智</p>
                        </li>
                        <li>
                            <h3><img src="../../img/tuan7.png" alt=""></h3> 
                            <p>明科的成功是所有明科人努力的结果，每一个团队齐心协力完成的项目都是件精美的艺术品</p>
                        </li>
                        <li>
                            <h3><img src="../../img/tuan8.png" alt=""></h3> 
                            <p>大家一起做公益</p>
                        </li>
                    </ul>
                </div>
				
                <!-- 移动端样式 -->
                <div class="three_box p_hide">
                    <div><img src="../../img/dui1.png" alt=""></div>
                    <div><img src="../../img/dui1.png" alt=""></div>
                    <div><img src="../../img/dui1.png" alt=""></div>
                </div>
                <div class="three_box p_hide">
                    <div><img src="../../img/dui1.png" alt=""></div>
                    <div><img src="../../img/dui1.png" alt=""></div>
                    <div><img src="../../img/dui1.png" alt=""></div>
                </div>
            </div>
			
            <div id="anchor-2"></div>
            <div class="wrapper">
                <div class="content_title fadeInUp zoomIn animated" style="margin-bottom: 0.8rem;"><span>荣誉资质</span></div>
                <div class="m_bakcg">
                    <div class="content honor">
                        <ul class="honor_ul">
                            <li class="h33">
                                <h3><img src="../../img/zheng1.png" alt="" @mouseover="img_index = 1" @mouseout="img_index = 0" class="animated" :class="img_index == 1 ? 'tada' : ''"></h3>
                                <span>高新技术企业</span>
                            </li>
                            <li>
                                <h3 class="h33"><img src="../../img/zheng2.png" alt="" @mouseover="img_index = 2" @mouseout="img_index = 0" class="animated" :class="img_index == 2 ? 'tada' : ''"></h3>
                                <span>软件企业认证</span>
                            </li>
                            <li>
                                <h3 class="h33"><img src="../../img/zheng3.png" alt="" @mouseover="img_index = 3" @mouseout="img_index = 0" class="animated" :class="img_index == 3 ? 'tada' : ''"></h3>
                                <span>软件产品认证</span>
                            </li>
                            <li>
                                <h3 class="h33"><img src="../../img/zheng6.png" alt="" @mouseover="img_index = 4" @mouseout="img_index = 0" class="animated" :class="img_index == 4 ? 'tada' : ''"></h3>
                                <span>霍尼韦尔合作伙伴</span>
                            </li>
							
							
                            <li>
                                <h3 class="h33"><img src="../../img/zheng5.png" alt="" @mouseover="img_index = 5" @mouseout="img_index = 0" class="animated" :class="img_index == 5 ? 'tada' : ''"></h3>
                                <span>优秀企业</span>
                            </li>
                            <li>
                                <h3 class="h33"><img src="../../img/zheng9.png" alt="" @mouseover="img_index = 6" @mouseout="img_index = 0" class="animated" :class="img_index == 6 ? 'tada' : ''"></h3>
                                <span>摩托罗拉合作伙伴</span>
                            </li>
                            <li>
                                <h3 class="h33"><img src="../../img/zheng7.png" alt="" @mouseover="img_index = 7" @mouseout="img_index = 0" class="animated" :class="img_index == 7 ? 'tada' : ''"></h3>
                                <span>Intermec合作伙伴</span>
                            </li>
                            <li>
                                <h3 class="h33"><img src="../../img/zheng4.png" alt="" @mouseover="img_index = 8" @mouseout="img_index = 0" class="animated" :class="img_index == 8 ? 'tada' : ''"></h3>
                                <span>优秀解决方案奖</span>
                            </li>
							
							
                            <li>
                                <h3 class="h33"><img src="../../img/zheng8.png" alt="" @mouseover="img_index = 9" @mouseout="img_index = 0" class="animated" :class="img_index == 9 ? 'tada' : ''"></h3>
                                <span>斑马合作伙伴</span>
                            </li>

                            <li>
                                <h3 class="h33"><img src="../../img/zheng10.png" alt="" @mouseover="img_index = 10" @mouseout="img_index = 0" class="animated" :class="img_index == 10 ? 'tada' : ''"></h3>
                                <span>仓库管理系统著作权</span>
                            </li>
                            <li>
                                <h3 class="h33"><img src="../../img/zheng10.png" alt="" @mouseover="img_index = 11" @mouseout="img_index = 0" class="animated" :class="img_index == 11 ? 'tada' : ''"></h3>
                                <span>制造执行系统著作权</span>
                            </li>
                            <li>
                                <h3 class="h33"><img src="../../img/zheng10.png" alt="" @mouseover="img_index = 12" @mouseout="img_index = 0" class="animated" :class="img_index == 12 ? 'tada' : ''"></h3>
                                <span>质量追溯系统著作权</span>
                            </li>
							
							
                            <li>
                                <h3 class="h33"><img src="../../img/zheng10.png" alt="" @mouseover="img_index = 13" @mouseout="img_index = 0" class="animated" :class="img_index == 13 ? 'tada' : ''"></h3>
                                <span>物流配送管理系统著作权</span>
                            </li>
                            <li>
                                <h3 class="h33"><img src="../../img/zheng10.png" alt="" @mouseover="img_index = 14" @mouseout="img_index = 0" class="animated" :class="img_index == 14 ? 'tada' : ''"></h3>
                                <span>经销商管理平台著作权</span>
                            </li>
                            <li>
                                <h3 class="h33"><img src="../../img/zheng10.png" alt="" @mouseover="img_index = 15" @mouseout="img_index = 0" class="animated" :class="img_index == 15 ? 'tada' : ''"></h3>
                                <span>生产线赋码系统著作权</span>
                            </li>
                            <li>
                                <h3 class="h33"><img src="../../img/zheng11.png" alt="" @mouseover="img_index = 16" @mouseout="img_index = 0" class="animated" :class="img_index == 16 ? 'tada' : ''"></h3>
                                <span>企业资源计划著作权</span>
                            </li>
							
                            <li>
                                <h3 class="h33"><img src="../../img/zheng11.png" alt="" @mouseover="img_index = 17" @mouseout="img_index = 0" class="animated" :class="img_index == 17 ? 'tada' : ''"></h3>
                                <span>商城系统著作权</span>
                            </li>
                            <li>
                                <h3 class="h33"><img src="../../img/zheng11.png" alt="" @mouseover="img_index = 18" @mouseout="img_index = 0" class="animated" :class="img_index == 18 ? 'tada' : ''"></h3>
                                <span>订单管理系统著作权</span>
                            </li>
                            <li>
                                <h3 class="h33"><img src="../../img/zheng11.png" alt="" @mouseover="img_index = 19" @mouseout="img_index = 0" class="animated" :class="img_index == 19 ? 'tada' : ''"></h3>
                                <span>客户关系管理系统著作权</span>
                            </li>
                        </ul>
                    </div>
                </div>
				
                <div id="anchor-3"></div>
                <div class="content_title fadeInUp zoomIn animated"><span>联系明科</span></div>
                <div class="content contact">
                    <ul class="contact_ul">
                        <li style="flex: none;padding-right: 1.2rem;">
                            <h3 class="p_txt"><img src="../../img/lian1.png" alt="" class="m_img" style="margin: -0.08rem 0.15rem 0 0;"><span>商务合作</span></h3>
                            <p class="p_txt p_txt2" style="margin-top: 0.4rem;">service@minkesoft.com</p>
                            <p class="p_txt p_txt2">www.minkesoft.com</p>
                            <p class="p_txt p_txt2">400-189-1819</p>
                        </li>
                        <li class="p_li">
                            <h3 class="p_txt"><img src="../../img/lian2.png" alt="" class="m_img" style="margin: -0.08rem 0.15rem 0 0;"><span>明科总部</span></h3>
                            <p class="p_txt2" style="margin-top: 0.4rem;">北京市朝阳区建国路88号SOHO现代城2号楼29层</p>
                        </li>
                        <li class="p_li2">
                            <h3 class="p_txt "><img src="../../img/lian2.png" alt="" class="m_img" style="margin: -0.08rem 0.15rem 0 0;"><span>明科分部</span></h3>
                            <p class="p_txt2" style="margin-top: 0.4rem;">北京：通州区新华北街156号保利大都汇6-808</p>
                            <p class="p_txt2">上海：闸北共和新路3088弄祥腾财富广场</p>
                            <p class="p_txt2">武汉：汉阳区鹦鹉大道46号长江广场</p>
                            <p class="p_txt2">成都：科园二路10号航利中心</p>
                            <p class="p_txt2">西安：高新区科技路火炬大厦</p>
                            <p class="p_txt2">沈阳：铁西区兴华街沈辽路万达广场C座</p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
  <div id="main">
    <div id="anchor"></div>
    <div class="banner m_hide">
      <img src="../../img/aboutText.png" alt="">
    </div>
    <div class="banner2 p_hide" style="margin-top: 1.14rem;">
      <img src="../../img/guanyu2.png" alt="">
    </div>
    <div class="wrapper introduction">
      <div class="content_title fadeInUp zoomIn animated"><span>企业简介</span></div>
      <div class="content">
        <p>北京明科普华信息技术有限公司是企业供应链管理执行系统软件产品及应用集成解决方案的领导厂商。公司专注于基于互联网技术、自动识别技术的供应链管理执行系统的产品研发和系统集成。致力于把基于先进信息技术的最佳管理方案与业务实践经验普及到客户的管理与业务创新活动中，并全面提供具有自主知识产权的软件产品、服务及解决方案。让企业业务更加高效，获得业务信息更加准确，反应更加迅速，效益更加显著。</p>
        <div class="content_img"><img src="../../img/about_icon.png" alt=""></div>
      </div>
      <div class="content">
        <div>
          <p>明科核心团队及技术力量，是国内软件研发应用领域的先驱者，掌握了相关应用的核心技术，目前明科软件系统已被广泛应用于企业的ERP应用、GSP质量管理规范应用、仓储管理、配送管理、生产管理、包装赋码、销售管理、服务管理、产品追溯、质量追溯、固定资产管理、档案管理等各个环节，为企业提供了供应链执行管理、仓库管理、生产管理、分销管理等全方位软件产品及解决方案</p>
          <p style="margin-top: 0.2rem;">明科2006年成立，总部位于北京，并在沈阳、西安、武汉、成都、上海等地设立服务机构，拥有覆盖全国的销售、服务网络</p>
          <p style="margin-top: 0.2rem;">2016年，明科10周年之际，明科世纪成立，专注于电商领域，旨在销售端与客户实现共赢</p>
          <p style="margin-top: 0.2rem;">明科以引领企业新思维、提升企业源动力、帮助客户成功为使命，以创造客户满意来赢得客户的忠诚，与客户共成长。致力于成为全球领先的管理软件及解决方案提供商</p>    
        </div>
        <div><img src="../../img/about_info.png" alt=""></div>
      </div>
      <div class="three">
        <div class="content_title fadeInUp zoomIn animated"><span>3大优势</span></div>
        <div class="content">
          <ul class="goods_ul">
            <li>
              <div><h3><img src="../../img/chan1.png" alt=""></h3></div>
              <h2>产品优势</h2>
              <p>国内首推的平台化开发，使项目开发效率提升30%，产品性能稳定、易变更</p>
            </li>
            <li>
              <div><h3><img src="../../img/chan2.png" alt=""></h3></div>
              <h2>资讯优势</h2>
              <p>明科拥有众多行业内资深顾问，为广大用户提供业务流程合理化咨询，保障使用者能以最优化方式完成工作</p>
            </li>
            <li>
              <div><h3><img src="../../img/chan3.png" alt=""></h3></div>
              <h2>资源优势</h2>
              <p>明科的实施合作伙伴、设备硬件合作伙伴、ERP合作伙伴众多，能够为客户提供立体化的整体解决方案</p>
            </li>
          </ul>
        </div>
      </div>
      <div class="content_title"><span>发展历程</span></div>
    </div>
    <div class="content">
      <img src="../../img/fazhan.jpg" alt="" class="m_hide">
      <img src="../../img/m_fan.png" alt="" class="p_hide" style="margin: 0.3rem 0;">
    </div>
    <div class="wrapper">
      <div class="content_title fadeInUp zoomIn animated"><span>企业愿景</span></div>
      <div class="content vision">
        <p>成为中国信息化价值传递的倡导者，致力于通过信息化手段推动供给侧改革，帮助企业完成中国智造升级。</p>
        <div class="contentimg"><img src="../../img/feiji.png" alt=""></div>
      </div>
      <div id="anchor-1"></div>
      <div class="content_title fadeInUp zoomIn animated"><span>企业文化</span></div>
      <div class="enterprise">
        <ul class="culture_ul">
          <li>
            <div><h3><img src="../../img/zhuanye.png" alt=""></h3></div>
            <h2 style="margin: 0.2rem 0 0.1rem;font-weight: bold;"><a>专业</a></h2>
            <p>大事业</p>
            <p>明科希望每一位员工都能够通过这个平台实现自己的事业梦想</p>
          </li>
          <li>
            <div><h3><img src="../../img/jiazhi.png" alt=""></h3></div>
            <h2 style="margin: 0.2rem 0 0.1rem;font-weight: bold;"><a>价值</a></h2>
            <p>大家庭</p>
            <p>所有员工共同组成的一个大家庭大家都像兄弟姐们一样亲密无间</p>
          </li>
          <li>
            <div><h3><img src="../../img/fenxiang.png" alt=""></h3></div>
            <h2 style="margin: 0.2rem 0 0.1rem;font-weight: bold;"><a>分享</a></h2>
            <p>大学校</p>
            <p>明科是所学习工作技能的大学校也是学习生活技能的大学校</p>
          </li>
        </ul>
      </div>
      <div style="clear: both;"></div>
      <div class="wrapper">
        <div class="content_title fadeInUp zoomIn animated"><span>团队建设</span></div>
        <div class="content teamBuilding">
          <h2><span>快乐出游，快乐团建</span></h2>
          <ul class="teamBuilding_ul">
            <li>
              <h3><img src="../../img/img.png" alt=""></h3> 
              <p>每年1月年会，各地同事齐聚北京，温泉滑雪是对辛苦一年的明科团队最好的奖励</p>
            </li>
            <li>
              <h3><img src="../../img/tuan2.png" alt=""></h3> 
              <p>每个星期天下午2-4点，旧宫第一中心小学，一项属于男人、属于团队、属于亦搏的运动</p>
            </li>
            <li>
              <h3><img src="../../img/tuan3.png" alt=""></h3> 
              <p>每次有大片上映都有家属票哦，感谢超棒的HR</p>
            </li>
            <li>
              <h3><img src="../../img/tuan4.png" alt=""></h3> 
              <p>南方的小伙伴羡慕吧！</p>
            </li>
          </ul>
          <h2 style="margin-top: 0.6rem;"><span>公司活动，爱心公益</span></h2>
          <ul class="teamBuilding_ul">
            <li>
              <h3><img src="../../img/tuan5.png" alt=""></h3> 
              <p>明科一直鼓励员工承担社会责任关爱留守儿童，关爱失独老人，公益足球下乡等都有明科人的身影</p>
            </li>
            <li>
              <h3><img src="../../img/tuan6.png" alt=""></h3> 
              <p>明科是所大学校，不单学习工作技能，还会培养一个人品格、心智</p>
            </li>
            <li>
              <h3><img src="../../img/tuan7.png" alt=""></h3> 
              <p>明科的成功是所有明科人努力的结果，每一个团队齐心协力完成的项目都是件精美的艺术品</p>
            </li>
            <li>
              <h3><img src="../../img/tuan8.png" alt=""></h3> 
              <p>大家一起做公益</p>
            </li>
          </ul>
        </div>
        <!-- 移动端样式 -->
        <div class="three_box p_hide">
          <div><img src="../../img/dui1.png" alt=""></div>
          <div><img src="../../img/dui1.png" alt=""></div>
          <div><img src="../../img/dui1.png" alt=""></div>
        </div>
        <div class="three_box p_hide">
          <div><img src="../../img/dui1.png" alt=""></div>
          <div><img src="../../img/dui1.png" alt=""></div>
          <div><img src="../../img/dui1.png" alt=""></div>
        </div>
      </div>

      <div id="anchor-2"></div>
      <div class="wrapper">
        <div class="content_title fadeInUp zoomIn animated" style="margin-bottom: 0.8rem;"><span>荣誉资质</span></div>
        <div class="m_bakcg">
          <div class="content honor">
            <ul class="honor_ul">
              <li class="h33">
                <h3><img src="../../img/zheng1.png" alt="" @mouseover="img_index = 1" @mouseout="img_index = 0" class="animated" :class="img_index == 1 ? 'tada' : ''"></h3>
                <span>高新技术企业</span>
              </li>
              <li>
                <h3 class="h33"><img src="../../img/zheng2.png" alt="" @mouseover="img_index = 2" @mouseout="img_index = 0" class="animated" :class="img_index == 2 ? 'tada' : ''"></h3>
                <span>软件企业认证</span>
              </li>
              <li>
                <h3 class="h33"><img src="../../img/zheng3.png" alt="" @mouseover="img_index = 3" @mouseout="img_index = 0" class="animated" :class="img_index == 3 ? 'tada' : ''"></h3>
                <span>软件产品认证</span>
              </li>
              <li>
                <h3 class="h33"><img src="../../img/zheng6.png" alt="" @mouseover="img_index = 4" @mouseout="img_index = 0" class="animated" :class="img_index == 4 ? 'tada' : ''"></h3>
                <span>霍尼韦尔合作伙伴</span>
              </li>
              <li>
                <h3 class="h33"><img src="../../img/zheng5.png" alt="" @mouseover="img_index = 5" @mouseout="img_index = 0" class="animated" :class="img_index == 5 ? 'tada' : ''"></h3>
                <span>优秀企业</span>
              </li>
              <li>
                <h3 class="h33"><img src="../../img/zheng9.png" alt="" @mouseover="img_index = 6" @mouseout="img_index = 0" class="animated" :class="img_index == 6 ? 'tada' : ''"></h3>
                <span>摩托罗拉合作伙伴</span>
              </li>
              <li>
                <h3 class="h33"><img src="../../img/zheng7.png" alt="" @mouseover="img_index = 7" @mouseout="img_index = 0" class="animated" :class="img_index == 7 ? 'tada' : ''"></h3>
                <span>Intermec合作伙伴</span>
              </li>
              <li>
                <h3 class="h33"><img src="../../img/zheng4.png" alt="" @mouseover="img_index = 8" @mouseout="img_index = 0" class="animated" :class="img_index == 8 ? 'tada' : ''"></h3>
                <span>优秀解决方案奖</span>
              </li>
              <li>
                <h3 class="h33"><img src="../../img/zheng8.png" alt="" @mouseover="img_index = 9" @mouseout="img_index = 0" class="animated" :class="img_index == 9 ? 'tada' : ''"></h3>
                <span>斑马合作伙伴</span>
              </li>
              <li>
                <h3 class="h33"><img src="../../img/zheng10.png" alt="" @mouseover="img_index = 10" @mouseout="img_index = 0" class="animated" :class="img_index == 10 ? 'tada' : ''"></h3>
                <span>仓库管理系统著作权</span>
              </li>
              <li>
                <h3 class="h33"><img src="../../img/zheng10.png" alt="" @mouseover="img_index = 11" @mouseout="img_index = 0" class="animated" :class="img_index == 11 ? 'tada' : ''"></h3>
                <span>制造执行系统著作权</span>
              </li>
              <li>
                <h3 class="h33"><img src="../../img/zheng10.png" alt="" @mouseover="img_index = 12" @mouseout="img_index = 0" class="animated" :class="img_index == 12 ? 'tada' : ''"></h3>
                <span>质量追溯系统著作权</span>
              </li>
              <li>
                <h3 class="h33"><img src="../../img/zheng10.png" alt="" @mouseover="img_index = 13" @mouseout="img_index = 0" class="animated" :class="img_index == 13 ? 'tada' : ''"></h3>
                <span>物流配送管理系统著作权</span>
              </li>
              <li>
                <h3 class="h33"><img src="../../img/zheng10.png" alt="" @mouseover="img_index = 14" @mouseout="img_index = 0" class="animated" :class="img_index == 14 ? 'tada' : ''"></h3>
                <span>经销商管理平台著作权</span>
              </li>
              <li>
                <h3 class="h33"><img src="../../img/zheng10.png" alt="" @mouseover="img_index = 15" @mouseout="img_index = 0" class="animated" :class="img_index == 15 ? 'tada' : ''"></h3>
                <span>生产线赋码系统著作权</span>
              </li>
              <li>
                <h3 class="h33"><img src="../../img/zheng11.png" alt="" @mouseover="img_index = 16" @mouseout="img_index = 0" class="animated" :class="img_index == 16 ? 'tada' : ''"></h3>
                <span>企业资源计划著作权</span>
              </li>
              <li>
                <h3 class="h33"><img src="../../img/zheng11.png" alt="" @mouseover="img_index = 17" @mouseout="img_index = 0" class="animated" :class="img_index == 17 ? 'tada' : ''"></h3>
                <span>商城系统著作权</span>
              </li>
              <li>
                <h3 class="h33"><img src="../../img/zheng11.png" alt="" @mouseover="img_index = 18" @mouseout="img_index = 0" class="animated" :class="img_index == 18 ? 'tada' : ''"></h3>
                <span>订单管理系统著作权</span>
              </li>
              <li>
                <h3 class="h33"><img src="../../img/zheng11.png" alt="" @mouseover="img_index = 19" @mouseout="img_index = 0" class="animated" :class="img_index == 19 ? 'tada' : ''"></h3>
                <span>客户关系管理系统著作权</span>
              </li>
            </ul>
          </div>
        </div>

        <div id="anchor-3"></div>
        <div class="content_title fadeInUp zoomIn animated"><span>联系明科</span></div>
        <div class="content contact">
          <ul class="contact_ul">
            <li style="flex: none;padding-right: 1.2rem;">
              <h3 class="p_txt"><img src="../../img/lian1.png" alt="" class="m_img" style="margin: -0.08rem 0.15rem 0 0;"><span>商务合作</span></h3>
              <p class="p_txt p_txt2" style="margin-top: 0.4rem;">service@minkesoft.com</p>
              <p class="p_txt p_txt2">www.minkesoft.com</p>
              <p class="p_txt p_txt2">400-189-1819</p>
            </li>
            <li class="p_li">
              <h3 class="p_txt"><img src="../../img/lian2.png" alt="" class="m_img" style="margin: -0.08rem 0.15rem 0 0;"><span>明科总部</span></h3>
              <p class="p_txt2" style="margin-top: 0.4rem;">北京市朝阳区建国路88号SOHO现代城2号楼29层</p>
            </li>
            <li class="p_li2">
              <h3 class="p_txt "><img src="../../img/lian2.png" alt="" class="m_img" style="margin: -0.08rem 0.15rem 0 0;"><span>明科分部</span></h3>
              <p class="p_txt2" style="margin-top: 0.4rem;">北京：通州区新华北街156号保利大都汇6-808</p>
              <p class="p_txt2">上海：闸北共和新路3088弄祥腾财富广场</p>
              <p class="p_txt2">武汉：汉阳区鹦鹉大道46号长江广场</p>
              <p class="p_txt2">成都：科园二路10号航利中心</p>
              <p class="p_txt2">西安：高新区科技路火炬大厦</p>
              <p class="p_txt2">沈阳：铁西区兴华街沈辽路万达广场C座</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            img_index:0,
            anchor:false,
    data() {
        return {
      img_index:0,
      anchor:false,
        }
    },
    mounted() {
        let url = location.href
        let hash = url.substring(url.length-9)
        this.get_anchor(hash)
    mounted () {
    let url = location.href
    let hash = url.substring(url.length-9)
    this.get_anchor(hash)
    },
    methods:{
        //根据hash值跳转不同锚点
        get_anchor(hash){
            if(this.anchor){
                document.querySelector(hash).scrollIntoView(true);
            }
        }
    },
    destroyed(){ //返回顶部
        document.body.scrollTop = 0
        document.documentElement.scrollTop = 0
    },
    watch:{ //监听路由
        $route(to,from){
           if(to.hash){
              this.anchor = true
              this.get_anchor(to.hash)
           }
           
        }
    methods: {
    //根据hash值跳转不同锚点
        get_anchor (hash) {
      if (this.anchor) {
        document.querySelector(hash).scrollIntoView(true)
      }
    }
  },
  destroyed () { //返回顶部
    document.body.scrollTop = 0
    document.documentElement.scrollTop = 0
  },
  watch: { //监听路由
    $route (to,from) {
      if (to.hash) {
        this.anchor = true
        this.get_anchor(to.hash)
      }
    }
  }
}
</script>

<style lang="less" scoped>
@media (max-width: 750px) and (min-width: 0){
    .p_txt2{
        margin-left: 0.53rem;
    }
    .m_img{
        width: 0.35rem;
    }
    .m_bakcg{
        background-color: #F9F9F9;
        padding: 0.3rem 0;
    }
    .three_box{
        display: flex;
        padding: 0 0.3rem;
        div{
            flex: 1;
            padding-right: 0.15rem;
            padding-top: 0.15rem;
        }
        div:nth-child(3n){
            padding-right: 0;
        }
    }
    .three_box:last-child{
        margin-bottom: 0.8rem;
    }
    .wrapper{
        width: 100%;
  @media (max-width: 750px) and (min-width: 0) {
    .p_txt2 {
      margin-left: 0.53rem;
    }
    .content_title, .content, .content{
        width: 94%;
        margin: 0 auto;
    .m_img {
      width: 0.35rem;
    }
    .banner{
        width: 100%;
        background: url(../../img/aboutBanner.png) no-repeat;
        background-size: 160% auto;
        min-height: 4rem;
        display: flex;
        justify-content: center;
        align-items: center;
    .m_bakcg {
      background-color: #F9F9F9;
      padding: 0.3rem 0;
    }
    .content{
        padding: 0 .1rem .3rem;
        p{
            font-size: .24rem;
            font-family:PingFang-SC-Regular;
            font-weight:400;
            color:rgba(62,62,62,1);
            line-height:0.35rem;
        }
    .three_box {
      display: flex;
      padding: 0 0.3rem;
      div {
        flex: 1;
        padding-right: 0.15rem;
        padding-top: 0.15rem;
      }
      div:nth-child(3n) {
        padding-right: 0;
      }
    }
    .three_box:last-child {
      margin-bottom: 0.8rem;
    }
    .wrapper {
      width: 100%;
    }
    .content_title, .content, .content {
      width: 94%;
      margin: 0 auto;
    }
    .banner {
      width: 100%;
      background: url(../../img/aboutBanner.png) no-repeat;
      background-size: 160% auto;
      min-height: 4rem;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .content {
      padding: 0 .1rem .3rem;
      p {
        font-size: .24rem;
        font-family:PingFang-SC-Regular;
        font-weight:400;
        color:rgba(62,62,62,1);
        line-height:0.35rem;
      }
    }
    .content_title {
        margin: 0.4rem auto !important;
      margin: 0.4rem auto !important;
    }
    .content_img{
        width: 100%;
        height: 2.42rem;
        margin: .4rem 0;
        background: #F1F1F1;
        display: flex;
        justify-content: center;
        align-items: center;
    .content_img {
      width: 100%;
      height: 2.42rem;
      margin: .4rem 0;
      background: #F1F1F1;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .content:nth-child(3){
        height: auto;
        p{
            font-size: 0.24rem;
            margin-bottom: .3rem; 
        }
    .content:nth-child(3) {
      height: auto;
      p {
        font-size: 0.24rem;
        margin-bottom: .3rem; 
      }
    }
    .three{
        background: #F1F1F1;
        width: 100%;
        height: auto;
        padding-top: 0.3rem;
        margin-bottom: 0.7rem;
		
       .goods_ul{
    .three {
      background: #F1F1F1;
      width: 100%;
      height: auto;
      padding-top: 0.3rem;
      margin-bottom: 0.7rem;

      .goods_ul {
        width: 100%;
        height: 4.8rem;
        box-sizing: border-box;
@@ -387,414 +375,406 @@
        display: flex;
        justify-content: center;
        align-items: center;
		
        li{
            flex: 1;
            padding-right: 0.3rem;
            h3{
                text-align: center;
                img{
                    width: 1.48rem;
                    height: 1.52rem;
                }
            }
        }
        li:first-child{
            margin-top: -0.3rem;
        }
        li:last-child{
            padding-right: 0;
        }
        li>div{
            padding: 0 .2rem;
        }
        h2{
            margin: 0;
            font-size: .26rem;
            font-family:PingFang-SC-Bold;
            font-weight:bold;
            margin: .2rem 0;

        li {
          flex: 1;
          padding-right: 0.3rem;
          h3 {
            text-align: center;
        }
       }
    }
    .vision{
        width: 94%;
        height: auto;
        p{
            font-size:0.28rem;
            font-family:PingFang-SC-Bold;
            font-weight:bold;
            color:rgba(0,161,225,1);
            line-height:0.43rem;
            text-align: center;
            margin-bottom: 0.46rem;
        }
        .contentimg{
            img{
                width: 100%;
                height: 100%;
            img {
              width: 1.48rem;
              height: 1.52rem;
            }
          }
        }
        li:first-child {
          margin-top: -0.3rem;
        }
        li:last-child {
          padding-right: 0;
        }
        li > div {
          padding: 0 .2rem;
        }
        h2 {
          margin: 0;
          font-size: .26rem;
          font-family:PingFang-SC-Bold;
          font-weight:bold;
          margin: .2rem 0;
          text-align: center;
        }
      }
    }
    .enterprise{
        width: 100%;
        box-sizing: border-box;
        background: #f9f9f9;
        padding: .4rem 0;
    .vision {
      width: 94%;
      height: auto;
      p {
        font-size:0.28rem;
        font-family:PingFang-SC-Bold;
        font-weight:bold;
        color:rgba(0,161,225,1);
        line-height:0.43rem;
        text-align: center;
        margin-bottom: 0.46rem;
      }
      .contentimg {
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .enterprise {
      width: 100%;
      box-sizing: border-box;
      background: #f9f9f9;
      padding: .4rem 0;
      display: flex;
      justify-content: center;
      align-items: center;

      .culture_ul {
        display: flex;
        justify-content: center;
        align-items: center;
		
        .culture_ul{
            display: flex;
            height: auto;
            li{
                flex: 1;
				
                p{
                    width: auto;
                    font-size: 0.24rem;
                    line-height: 0.35rem;
                }
            }
        }
        li>div{
            padding: 0 .2rem;
            h3{
                img{
                    width: 1.23rem;
                }
            }
        height: auto;
        li {
          flex: 1;
          p {
            width: auto;
            font-size: 0.24rem;
            line-height: 0.35rem;
          }
        }
        h2{
            margin: 0;
            font-size: .26rem;
            font-family:PingFang-SC-Bold;
            font-weight:bold;
            margin: .2rem 0;
      }
      li > div {
        padding: 0 .2rem;
        h3 {
          img {
            width: 1.23rem;
          }
        }
      }
      h2 {
        margin: 0;
        font-size: .26rem;
        font-family:PingFang-SC-Bold;
        font-weight:bold;
        margin: .2rem 0;
      }
    }
    .teamBuilding{
        height: 2.6rem;
        overflow: hidden;
        h2{
            display: none;
        }
        .teamBuilding_ul{
            width: 100%;
            height: auto;
            display: flex;
            flex-wrap: wrap;
            li{
                display: inline-block;
                width: 33%;
                padding: .1rem;
                h3{
                    width: 100%;
                    height: 1.3rem;
                }
                p{
                    display: none;
                }
            }
        }
    }
    .teamBuilding:nth-child(2){
    .teamBuilding {
      height: 2.6rem;
      overflow: hidden;
      h2 {
        display: none;
    }
    .honor_ul{
      }
      .teamBuilding_ul {
        width: 100%;
        height: auto;
        display: flex;
        flex-wrap: wrap;
        li{
            width: 50%;
            height: auto;
            padding: .2rem 0.1rem;
            flex-wrap: wrap;
            h3{
                width: 100%;
                text-align: center;
            }
            span{
                display: none;
            }
        }
		
    }
    .contact_ul{
        width: 98%;
        height: auto;
        margin: 0 auto;
        box-shadow: 0 0 0.38rem 0 rgba(79,78,80,0.15);
        padding: .4rem;
        li{
            padding-bottom: .4rem;
            span{
                font-size: .28rem;
            }
        }
        li:last-child{
            border: none;
            margin: 0;
        }
    }
}
@media (min-width: 751px) {
    .hover2{
        cursor: pointer;
        transform: scale(1.2);
        z-index: 99999;
    }
    .p_li{
        padding: 0px 1.1rem 0px 0.5rem;
        flex: none;
    }
    .p_li2{
        padding-left: 0.4rem;
    }
    .p_txt{
        text-align: center;
    }
    .banner{
        background: url(../../img/aboutBanner.png) no-repeat center center;
        background-size: cover;
        min-height: 5.65rem;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .introduction{
        .content:nth-child(2){
            display: flex;
			
            .goods_ul{
                flex: 1;
            }
			
            p{
                flex: 1;
                margin-right: .4rem;
                line-height: 0.25rem;
                font-size: 0.16rem;
                width: 1.7rem;
                margin: 0 auto;
            }
            .content_img{
                flex: 1;
                background: #F1F1F1;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-left: 0.2rem;
            }
			
            h2{
                margin: 0.2rem auto 0.1rem;
                display: inline-block;
                border-bottom: 0.02rem solid;
            }

        }
        .content:nth-child(3){
        li {
          display: inline-block;
          width: 33%;
          padding: .1rem;
          h3 {
            width: 100%;
            height: auto;
            padding: .6rem 0;
            div:first-child{
                float: right;
                p{
                    line-height: 0.25rem;
                    font-size: 0.16rem; 
                    flex:1;
                }
            }
            div{
                width: 48%;
            }
            height: 1.3rem;
          }
          p {
            display: none;
          }
        }

      }
    }
    .content_title{
        margin: 1rem 0;
    .teamBuilding:nth-child(2) {
      display: none;
    }
    .vision{
        display: flex;
        p{
            padding: 0.73rem 1.2rem 0 0;
            font-size: 0.2rem;
            font-weight: bold;
            color: #00A1E1;
            flex: 1;
            line-height: 0.31rem;
        }
    }
    .content_ul{
        li>h2{ margin: 0.38rem 0 0.18rem;}
    }   
    .teamBuilding{
        h2{
            overflow: hidden;
            span{
                font-size: 0.22rem;
                // font-family: MicrosoftYaHei;
                color:#3B3B3C;
                position: relative;
                display: block;
                width: 100%;
            }
            span::after{
                content: '';
                position: absolute;
                top:50%;
                width: 77%;
                height: 1.1px;
                background: #BFBFBF;
                right: -0.16rem;
            }
        }
        .teamBuilding_ul{
            display: flex;
            margin-top: 0.39rem;
            li{
                flex:1;
                float: left;
                text-align: center;
                h3{
                    img{
                        height: 1.45rem;
                        width: 94%;
                        margin: 0 auto;
                        display: inline-block;
                    }
                }
                p{
                    font-size:0.16rem;
                    color:#3B3B3C;
                    margin-top: 0.2rem;
                    padding: 0 0.3rem;
                }
            }
        }
    }
    .contact_ul{
        display: flex;
        margin-bottom: 0.6rem;
        li{
            flex: 1;
            position: relative;
            h3{
                i{
                    height: 0.28rem;
                    width: 0.28rem;
                    background:chocolate;
                    display: inline-block;
                    vertical-align: bottom;
                    margin-right: 0.15rem;
                }
                span{
                    font-size: 0.24rem;
                    color: #666;
                }
            }
            p{
                margin-top: 0.1rem;
                color: #3B3B3C;
                font-size:0.16rem;
                font-weight: bold;
                line-height: 0.26rem;
            }
        }
        li::before{
            content:'';
            display: inline-block;
            height: 1.19rem;
            width: 1px;
            background: #BFBFBF;
            position: absolute;
            right: 7%;
        }
        li:last-child::before{
           display: none;

        }
    }
    .goods_ul{
        li{
            float: left;
            margin: 0 3%;
            width: 27.3%;
            text-align: center;
           
            h2{
                margin: 0.2rem 0 0.13rem;
                font-size: 0.22rem;
                color:#3A3A3C;
            }
        }
    }

    .wrapper .teamBuilding:last-child{
        margin-top: 0.77rem;
    }

    .honor_ul{
        display: flex;
    .honor_ul {
      width: 100%;
      height: auto;
      display: flex;
      flex-wrap: wrap;
      li {
        width: 50%;
        height: auto;
        padding: .2rem 0.1rem;
        flex-wrap: wrap;
        li{
            text-align: center;
            width: 25%;
            margin-bottom: .3rem;
            
            //线上测试失效
            // &:hover .h33{ 
            //     .animated;
            //     .tada;
            // }
            span{
                display: inline-block;
                background: #F9F9F9;
                opacity: 0.56;
                width: 2rem;
                padding: 0.1rem 0;
                color: #3B3B3C;
                border: 0.01rem solid gainsboro;
            }
            h3{
                width: 2rem;
                border: 0.02rem solid #F9F9F9;
                margin: 0 auto;
                padding: 0.1rem 0 0.06rem;
				
                img{
                    height: 1.3rem;
                    margin: 0 auto;
                    display: inline-block; 
                }
            }
        h3 {
          width: 100%;
          text-align: center;
        }
        span {
          display: none;
        }
      }
    }
}
.culture_ul{
    height: 2.5rem;
    li{
    .contact_ul {
      width: 98%;
      height: auto;
      margin: 0 auto;
      box-shadow: 0 0 0.38rem 0 rgba(79,78,80,0.15);
      padding: .4rem;
      li {
        padding-bottom: .4rem;
        span {
          font-size: .28rem;
        }
      }
      li:last-child {
        border: none;
        margin: 0;
      }
    }
  }
  @media (min-width: 751px) {
    .hover2 {
      cursor: pointer;
      transform: scale(1.2);
      z-index: 99999;
    }
    .p_li {
      padding: 0px 1.1rem 0px 0.5rem;
      flex: none;
    }
    .p_li2 {
      padding-left: 0.4rem;
    }
    .p_txt {
      text-align: center;
    }
    .banner {
      background: url(../../img/aboutBanner.png) no-repeat center center;
      background-size: cover;
      min-height: 5.65rem;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .introduction {
      .content:nth-child(2) {
        display: flex;

        .goods_ul {
          flex: 1;
        }
        p {
          flex: 1;
          margin-right: .4rem;
          line-height: 0.25rem;
          font-size: 0.16rem;
          width: 1.7rem;
          margin: 0 auto;
        }
        .content_img {
          flex: 1;
          background: #F1F1F1;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-left: 0.2rem;
        }
        h2 {
          margin: 0.2rem auto 0.1rem;
          display: inline-block;
          border-bottom: 0.02rem solid;
        }
      }
      .content:nth-child(3) {
        width: 100%;
        height: auto;
        padding: .6rem 0;
        div:first-child {
          float: right;
          p {
            line-height: 0.25rem;
            font-size: 0.16rem; 
            flex:1;
          }
        }
        div {
          width: 48%;
        }
      }
    }
    .content_title {
      margin: 1rem 0;
    }
    .vision {
      display: flex;
      p {
        padding: 0.73rem 1.2rem 0 0;
        font-size: 0.2rem;
        font-weight: bold;
        color: #00A1E1;
        flex: 1;
        line-height: 0.31rem;
      }
    }
    .content_ul {
      li > h2 {
        margin: 0.38rem 0 0.18rem;
      }
    }   
    .teamBuilding {
      h2 {
        overflow: hidden;
        span {
          font-size: 0.22rem;
          // font-family: MicrosoftYaHei;
          color:#3B3B3C;
          position: relative;
          display: block;
          width: 100%;
        }
        span::after {
          content: '';
          position: absolute;
          top:50%;
          width: 77%;
          height: 1.1px;
          background: #BFBFBF;
          right: -0.16rem;
        }
      }
      .teamBuilding_ul {
        display: flex;
        margin-top: 0.39rem;
        li {
          flex:1;
          float: left;
          text-align: center;
          h3 {
            img {
              height: 1.45rem;
              width: 94%;
              margin: 0 auto;
              display: inline-block;
            }
          }
          p {
            font-size:0.16rem;
            color:#3B3B3C;
            margin-top: 0.2rem;
            padding: 0 0.3rem;
          }
        }
      }
    }
    .contact_ul {
      display: flex;
      margin-bottom: 0.6rem;
      li {
        flex: 1;
        position: relative;
        h3 {
          i {
            height: 0.28rem;
            width: 0.28rem;
            background:chocolate;
            display: inline-block;
            vertical-align: bottom;
            margin-right: 0.15rem;
          }
          span {
            font-size: 0.24rem;
            color: #666;
          }
        }
        p {
          margin-top: 0.1rem;
          color: #3B3B3C;
          font-size:0.16rem;
          font-weight: bold;
          line-height: 0.26rem;
        }
      }
      li::before {
        content:'';
        display: inline-block;
        height: 1.19rem;
        width: 1px;
        background: #BFBFBF;
        position: absolute;
        right: 7%;
      }
      li:last-child::before {
        display: none;
      }
    }
    .goods_ul {
      li {
        float: left;
        margin: 0 3%;
        width: 27.3%;
        text-align: center;
        h2>a{
                border-bottom: 1px solid #303030;
            }

        h2 {
          margin: 0.2rem 0 0.13rem;
          font-size: 0.22rem;
          color:#3A3A3C;
        }
      }
    }
    p{
        color: #3B3B3C;
        font-size: 0.18rem;
        line-height: 0.25rem;
        width: 2.52rem;
        margin: 0 auto;

    .wrapper .teamBuilding:last-child {
      margin-top: 0.77rem;
    }
}

    .honor_ul {
      display: flex;
      flex-wrap: wrap;
      li {
        text-align: center;
        width: 25%;
        margin-bottom: .3rem;
            
        //线上测试失效
        // &:hover .h33 { 
        //     .animated;
        //     .tada;
        // }
        span {
          display: inline-block;
          background: #F9F9F9;
          opacity: 0.56;
          width: 2rem;
          padding: 0.1rem 0;
          color: #3B3B3C;
          border: 0.01rem solid gainsboro;
        }
        h3 {
          width: 2rem;
          border: 0.02rem solid #F9F9F9;
          margin: 0 auto;
          padding: 0.1rem 0 0.06rem;


          img {
            height: 1.3rem;
            margin: 0 auto;
            display: inline-block; 
          }
        }
      }
    }
  }
  .culture_ul {
    height: 2.5rem;
    li {
      float: left;
      margin: 0 3%;
      width: 27.3%;
      text-align: center;
      h2 > a {
        border-bottom: 1px solid #303030;
      }
    }
    p {
      color: #3B3B3C;
      font-size: 0.18rem;
      line-height: 0.25rem;
      width: 2.52rem;
      margin: 0 auto;
    }
  }
</style>

 src/views/companyProfile/joinMingKe.vue

@@ -1,143 +1,143 @@
<template>
    <div class="main">
        <div class="banner m_hide"><img src="../../img/aboutText.png" alt=""></div>
        <div class="banner2 p_hide" style="margin-top: 1.14rem;">
            <img src="../../img/guanyu2.png" alt="">
        </div>
        <div style="background-color: #F9F9F9;">
            <div class="content_title fadeInUp zoomIn animated"><span>加入明科</span></div>
            <div class="wrapper">
                <div class="join">
                    <div class="join_t">
                        <span>MingKeOS</span>
                        <div>
                            <p>hr@minkesoft.com</p>
                            <p>400-189-1819</p>
                        </div>
                    </div>
                    <div class="join_m">
                        <h2>广纳天下有识之士，以明日科技普惠中华！</h2>
                        <p>明科致力于将先进的IT技术推广至广大生产制造企业，为中国制造输送信息技术、IT人才、管理人才；为社会培养有用的栋梁之才。</p>
                        <p>大事业、大家庭、大学校是明科文化的精髓，现在已经很少有人能一生只在一家企业工作，不管将来身在何方，明科都会努力为广大员工创造创业平台，学习知识，享受家庭温暖，并将这份家庭之爱传向全社会。</p>
  <div class="main">
    <div class="banner m_hide"><img src="../../img/aboutText.png" alt=""></div>
    <div class="banner2 p_hide" style="margin-top: 1.14rem;">
    <img src="../../img/guanyu2.png" alt="">
  </div>
  <div style="background-color: #F9F9F9;">
    <div class="content_title fadeInUp zoomIn animated"><span>加入明科</span></div>
    <div class="wrapper">
      <div class="join">
        <div class="join_t">
          <span>MingKeOS</span>
          <div>
            <p>hr@minkesoft.com</p>
            <p>400-189-1819</p>
          </div>
        </div>
        <div class="join_m">
          <h2>广纳天下有识之士，以明日科技普惠中华！</h2>
          <p>明科致力于将先进的IT技术推广至广大生产制造企业，为中国制造输送信息技术、IT人才、管理人才；为社会培养有用的栋梁之才。</p>
          <p>大事业、大家庭、大学校是明科文化的精髓，现在已经很少有人能一生只在一家企业工作，不管将来身在何方，明科都会努力为广大员工创造创业平台，学习知识，享受家庭温暖，并将这份家庭之爱传向全社会。</p>

                        <p>请您将简历命名为（职位-姓名）形式发送至邮箱：<span style="color: ;">hr@mingkesoft.com</span></p>
                    </div>
                    <div class="join_b">
                        <p>北京明科普华信息技术有限公司</p>
                        <p>www.minkesoft.com</p>
                    </div>
                </div>
                <div class="join_content">
                    <div class="join_content_card"> 
                        <h2>大客户经理</h2>
                        <ul>岗位要求：
                            <li>1、大专及以上学历；</li>
                            <li>2、市场营销、工商管理类相关专业；</li>
                            <li>3、从事销售五年以上工作经验。有一定的客户资源者优先；</li>
                            <li>4、具有较强的公关、谈判、沟通能力，较强的分析问题和解决问题能力；</li>
                            <li>5、责任心强，具备优秀团队合作精神，够承受较大的工作压力。</li>
                        </ul>
          <p>请您将简历命名为（职位-姓名）形式发送至邮箱：<span style="color: ;">hr@mingkesoft.com</span></p>
        </div>
        <div class="join_b">
          <p>北京明科普华信息技术有限公司</p>
          <p>www.minkesoft.com</p>
        </div>
      </div>
      <div class="join_content">
        <div class="join_content_card"> 
          <h2>大客户经理</h2>
          <ul>岗位要求：
            <li>1、大专及以上学历；</li>
            <li>2、市场营销、工商管理类相关专业；</li>
            <li>3、从事销售五年以上工作经验。有一定的客户资源者优先；</li>
            <li>4、具有较强的公关、谈判、沟通能力，较强的分析问题和解决问题能力；</li>
            <li>5、责任心强，具备优秀团队合作精神，够承受较大的工作压力。</li>
          </ul>

                        <ul>岗位职责：
                            <li>1、管理与大客户的日常沟通，发展和维护与大客户的良好业务关系；</li>
                            <li>2、深度挖掘重点客户的潜在需求，为客户提供满意的解决方案；</li>
                            <li>3、对潜在客户进行定期跟踪，定期提交销售进度报告，完成大客户销售目标；</li>
                            <li>4、配合销售团队，完成销售目标；</li>
                        </ul>
                    </div>
					
                    <div class="join_content_card"> 
                        <h2>售前顾问</h2>
                        <ul>岗位要求：
                            <li>1、学历要求：本科以上；</li>
                            <li>2、相关工作经验： 3年以上管理软件项目销售、售前咨询或项目实施管理经验；</li>
                            <li>3、熟练的使用各种Office工具，描述企业业务需求及撰写解决方案，有优秀的沟通和PPT演讲能力、业务分析能力、文案写作能力；</li>
                            <li>4、能够适应出差；</li>
                            <li>5、有顾问式营销背景优先，营销、财务、工商管理、计算机专业优先；</li>
                            <li>6、有条码系统营销背景的人优先。</li>
                        </ul>
						
					
                        <ul>岗位职责：
                            <li>1、负责条码系统售前支持工作，包括客户调研、需求分析和应用解决方案的制定、方案讲解与交流、数据的整理、产品演示等；</li>
                            <li>2、负责所辖区域机构软件业务的销售推动和拓展支持；</li>
                            <li>3、协助完善行业方案、样板客户案例及知识库贡献。</li>
                        </ul>
                    </div>
                </div>
			
                <div class="join_content">
                    <div class="join_content_card"> 
                        <h2>实施顾问</h2>
                        <ul>岗位职责：
                            <li>1、负责依据项目蓝图设计要求，对当前项目进行实施搭建、测试、文档输出工作；</li>
                            <li>2、在客户现场完成系统部署，调试、试运行、培训、验收等工作；</li>
                            <li>3、完成对客户系统使用过程中的问题解答、疑难排查等售后服务工作；</li>
                        </ul>
          <ul>岗位职责：
            <li>1、管理与大客户的日常沟通，发展和维护与大客户的良好业务关系；</li>
            <li>2、深度挖掘重点客户的潜在需求，为客户提供满意的解决方案；</li>
            <li>3、对潜在客户进行定期跟踪，定期提交销售进度报告，完成大客户销售目标；</li>
            <li>4、配合销售团队，完成销售目标；</li>
          </ul>
        </div>
        
        <div class="join_content_card"> 
          <h2>售前顾问</h2>
          <ul>岗位要求：
            <li>1、学历要求：本科以上；</li>
            <li>2、相关工作经验： 3年以上管理软件项目销售、售前咨询或项目实施管理经验；</li>
            <li>3、熟练的使用各种Office工具，描述企业业务需求及撰写解决方案，有优秀的沟通和PPT演讲能力、业务分析能力、文案写作能力；</li>
            <li>4、能够适应出差；</li>
            <li>5、有顾问式营销背景优先，营销、财务、工商管理、计算机专业优先；</li>
            <li>6、有条码系统营销背景的人优先。</li>
          </ul>
          
        
          <ul>岗位职责：
            <li>1、负责条码系统售前支持工作，包括客户调研、需求分析和应用解决方案的制定、方案讲解与交流、数据的整理、产品演示等；</li>
            <li>2、负责所辖区域机构软件业务的销售推动和拓展支持；</li>
            <li>3、协助完善行业方案、样板客户案例及知识库贡献。</li>
          </ul>
        </div>
      </div>
    
      <div class="join_content">
        <div class="join_content_card"> 
          <h2>实施顾问</h2>
          <ul>岗位职责：
            <li>1、负责依据项目蓝图设计要求，对当前项目进行实施搭建、测试、文档输出工作；</li>
            <li>2、在客户现场完成系统部署，调试、试运行、培训、验收等工作；</li>
            <li>3、完成对客户系统使用过程中的问题解答、疑难排查等售后服务工作；</li>
          </ul>

                        <ul>岗位要求：
                            <li>1、要有主人翁精神，能够对公司负责、对工作负责、对自己负责，能充分理解责任与担当的含义；</li>
                            <li>2、能适应出差；</li>
                            <li>3、精通SQLServer 对数据库语句能熟练掌握，能独立完成数据库存储过程的编写；</li>
                            <li>4、有较强文案能力（Word,excel,ppt, Visio等），熟悉系统说明书撰写规范；</li>
                            <li>5、性格活泼开朗，善于与客户沟通，引导用户需求；</li>
                            <li>6、能适应加班及较大工作压力；</li>
                            <li>7、学历要求：大专以上。</li>
                        </ul>
                    </div>
				
                        
                    <div class="join_content_card"> 
                        <h2>项目经理</h2>
                        <ul>岗位要求：
                            <li>1、正规大学本科及以上学历，计算机相关专业；</li>
                            <li>2、具有至少2年以上IT行业项目管理工作经验，如具有多年技术开发实践经验的更佳；</li>
                            <li>3、熟悉传统供应链IT产品的研发流程，具有深刻的理解和实践经验；；</li>
                            <li>4、具有强烈的事业心、责任心，具有良好的语言表达能力、沟通协调能力，良好的管理、组织能力;</li>
                            <li>5、思维清晰敏捷，逻辑分析能力强, 良好的语言与书面表达能力；</li>
                            <li>6、熟悉项目管理理论，有PMP证书者优先。</li>
                        </ul>
					
                        <ul>岗位职责：
                            <li>1、负责供应链系统项目管理工作，包括售前项目、研发项目、实施项目等项目管理工作；</li>
                            <li>2、能带领项目团队，根据客户需求和行业特点，提出并形成企业供应链管理解决方案；</li>
                            <li>3、负责与客户方项目经理及项目高层进行项目工作沟通及团队建设及管理工作;</li>
                            <li>4、界定项目范围，管理项目需求，综合控制项目整体风险；</li>
                            <li>5、管理客户关系，达成客户满意度，以目标为导向，完成项目交付。;</li>
                        </ul>
                    </div>
                </div>
				
                        
                <div class="join_content" style="padding-bottom: 0.9rem;">
                    <div class="join_content_card"> 
                        <h2>UI设计师</h2>
                        <ul>岗位要求：
                            <li>1、有两年以上手机端软件界面设计或大型网站设计经验，且会手绘者优先；</li>
                            <li>2、有较强的美术功底，具有出色的艺术设计能力，能够灵活控制设计风格，把握时代前沿，富有创造力和激情；</li>
                            <li>3、熟练掌握photoshop,illustrator等设计软件，熟练掌握icon原创设计；</li>
                            <li>4、能够自己独立完成,热衷于图形界面设计与相关研究；</li>
                            <li>5、具有良好的沟通表达能力，需求判断力，团队协作能力。</li>
                        </ul>
				
                        <ul>岗位职责：
                            <li>1、参与公司营销设计和产品项目的客户端界面设计工作；公司网页、广告宣传设计； 包括：把握产品整体形象设计、风格设计和表现形式设计；注重用户操作体验设计，优化用户操作。</li>
                        </ul>
                    </div>
                    <!-- 占位 -->
                    <div class="join_content_card" style="visibility: hidden;"></div>
                </div>

            </div>
            <div class="p_hide">
                <div v-for="(item,index) in person" @click="jump(index)" class="box" :class="active_index == index ? 'active' : ''">
                    <div class="line1">{{item.name}}<span>面议</span></div>
                    <div class="line2"><img src="../../img/jingli.png" alt="">北京明科普华信息技术有限公司<span>2019-03-28</span></div>
                </div>
            </div>
        </div>
          <ul>岗位要求：
            <li>1、要有主人翁精神，能够对公司负责、对工作负责、对自己负责，能充分理解责任与担当的含义；</li>
            <li>2、能适应出差；</li>
            <li>3、精通SQLServer 对数据库语句能熟练掌握，能独立完成数据库存储过程的编写；</li>
            <li>4、有较强文案能力（Word,excel,ppt, Visio等），熟悉系统说明书撰写规范；</li>
            <li>5、性格活泼开朗，善于与客户沟通，引导用户需求；</li>
            <li>6、能适应加班及较大工作压力；</li>
            <li>7、学历要求：大专以上。</li>
          </ul>
        </div>
      
                      
        <div class="join_content_card"> 
          <h2>项目经理</h2>
          <ul>岗位要求：
            <li>1、正规大学本科及以上学历，计算机相关专业；</li>
            <li>2、具有至少2年以上IT行业项目管理工作经验，如具有多年技术开发实践经验的更佳；</li>
            <li>3、熟悉传统供应链IT产品的研发流程，具有深刻的理解和实践经验；；</li>
            <li>4、具有强烈的事业心、责任心，具有良好的语言表达能力、沟通协调能力，良好的管理、组织能力;</li>
            <li>5、思维清晰敏捷，逻辑分析能力强, 良好的语言与书面表达能力；</li>
            <li>6、熟悉项目管理理论，有PMP证书者优先。</li>
          </ul>
        
          <ul>岗位职责：
            <li>1、负责供应链系统项目管理工作，包括售前项目、研发项目、实施项目等项目管理工作；</li>
            <li>2、能带领项目团队，根据客户需求和行业特点，提出并形成企业供应链管理解决方案；</li>
            <li>3、负责与客户方项目经理及项目高层进行项目工作沟通及团队建设及管理工作;</li>
            <li>4、界定项目范围，管理项目需求，综合控制项目整体风险；</li>
            <li>5、管理客户关系，达成客户满意度，以目标为导向，完成项目交付。;</li>
          </ul>
        </div>
      </div>
      
                      
      <div class="join_content" style="padding-bottom: 0.9rem;">
        <div class="join_content_card"> 
          <h2>UI设计师</h2>
          <ul>岗位要求：
            <li>1、有两年以上手机端软件界面设计或大型网站设计经验，且会手绘者优先；</li>
            <li>2、有较强的美术功底，具有出色的艺术设计能力，能够灵活控制设计风格，把握时代前沿，富有创造力和激情；</li>
            <li>3、熟练掌握photoshop,illustrator等设计软件，熟练掌握icon原创设计；</li>
            <li>4、能够自己独立完成,热衷于图形界面设计与相关研究；</li>
            <li>5、具有良好的沟通表达能力，需求判断力，团队协作能力。</li>
          </ul>
      
          <ul>岗位职责：
            <li>1、参与公司营销设计和产品项目的客户端界面设计工作；公司网页、广告宣传设计； 包括：把握产品整体形象设计、风格设计和表现形式设计；注重用户操作体验设计，优化用户操作。</li>
          </ul>
        </div>
        <!-- 占位 -->
        <div class="join_content_card" style="visibility: hidden;"></div>
      </div>

    </div>
    <div class="p_hide">
      <div v-for="(item,index) in person" @click="jump(index)" class="box" :key="index" :class="active_index == index ? 'active' : ''">
        <div class="line1">{{item.name}}<span>面议</span></div>
        <div class="line2"><img src="../../img/jingli.png" alt="">北京明科普华信息技术有限公司<span>2019-03-28</span></div>
      </div>
    </div>
  </div>

  </div>
</template>

<script>
@@ -169,7 +169,7 @@
</script>

<style lang="less" scoped>
.banner{
  .banner {
    width: 100%;
    background: url(../../img/aboutBanner.png) no-repeat;
    background-size: cover;
@@ -177,202 +177,202 @@
    display: flex;
    justify-content: center;
    align-items: center;
}
.content_title{
  }
  .content_title {
    padding: 0.7rem 0 0.67rem;
}
.join{
    width: 10.5rem;
    height: 11.6rem;
  }
  .join {
    width: 10.5rem;
    height: 11.6rem;
    background: url(../../img/joinBanner.png) no-repeat;
    background-size: 100% 100%;
    margin: 0 auto;
	
    .join_t{
        padding: 1.12rem 2.02rem 0 2.57rem;
        display: flex;
        justify-content: space-between;
        span{
            font-size: 0.4rem;
            color: #3B3B3C;
    background-size: 100% 100%;
    margin: 0 auto;
    
    .join_t {
      padding: 1.12rem 2.02rem 0 2.57rem;
      display: flex;
      justify-content: space-between;
      span {
        font-size: 0.4rem;
        color: #3B3B3C;
      }
      div {
        p {
          font-size: 0.16rem;
          color:#3B3B3C;
        }
        div{
            p{
                font-size: 0.16rem;
                color:#3B3B3C;
            }
            p:last-child{
                margin-top: 0.15rem;
            }
        p:last-child {
          margin-top: 0.15rem;
        }
      }
    }
    .join_m{
        margin-top: 2.24rem;
        padding:0 2.2rem 0 2.6rem;
        h2{
    .join_m {
      margin-top: 2.24rem;
      padding:0 2.2rem 0 2.6rem;
      h2 {
        font-size: 0.3rem;
        color: #3B3B3C;
        margin-bottom: 0.41rem;
        }
        p{
            font-size: 0.18rem;
            color:#3E3E3E;
            line-height: 0.28rem;
            margin-top: 0.2rem;
        }
        p:nth-child(2){
            margin-top: 0;
        }
      }
      p {
        font-size: 0.18rem;
        color:#3E3E3E;
        line-height: 0.28rem;
        margin-top: 0.2rem;
      }
      p:nth-child(2) {
        margin-top: 0;
      }
    }
    .join_b{
        margin-top: 1.8rem;
        text-align: right;
        margin-right: 2.02rem;
        p{
            font-size: 0.16rem;
            color: #3B3B3C;
        }
        p:last-child{
            margin-top: 0.12rem;
        }
    .join_b {
      margin-top: 1.8rem;
      text-align: right;
      margin-right: 2.02rem;
      p {
        font-size: 0.16rem;
        color: #3B3B3C;
      }
      p:last-child {
        margin-top: 0.12rem;
      }
    }
}
@media (min-width: 751px) {
    .join_content{
        display:flex;
  }
  @media (min-width: 751px) {
    .join_content {
      display:flex;
    }
    .join_content_card{
        width: 50%;
        background: #fff;
        border: 1px solid #E8E8E8;
        padding: 0.2rem 0.18rem;
        margin: 0.46rem 0.19rem 0;
        h2{
            text-align: center;
            font-weight: bold;
            color: #3B3B3C;
            font-size: 0.24rem;
    .join_content_card {
      width: 50%;
      background: #fff;
      border: 1px solid #E8E8E8;
      padding: 0.2rem 0.18rem;
      margin: 0.46rem 0.19rem 0;
      h2 {
        text-align: center;
        font-weight: bold;
        color: #3B3B3C;
        font-size: 0.24rem;
      }
      ul { 
        font-size: 0.16rem;
        color: #3E3E3E;
        font-weight: bold;
        margin-top: 0.2rem;
        li {
          line-height: 0.25rem;
          font-weight: 400;
        }
        ul{ 
            font-size: 0.16rem;
            color: #3E3E3E;
            font-weight: bold;
            margin-top: 0.2rem;
            li{
                line-height: 0.25rem;
                font-weight: 400;
            }
      }
    }
    .join_content-m {
      display: none;
    }
  }
  @media (max-width: 750px) and (min-width: 0) {
    .box {
      height: 1.6rem;
      padding-top: 0.29rem;
      
      .line1 {
        font-size:0.34rem;
        font-family:PingFang-SC-Medium;
        font-weight:500;
        color:rgba(59,59,60,1);
        margin: 0 0.48rem;
        
        span {
          float: right;
        }
    }
    .join_content-m{
        display: none;
    }
}
@media (max-width: 750px) and (min-width: 0){
    .box{
        height: 1.6rem;
        padding-top: 0.29rem;
		
        .line1{
            font-size:0.34rem;
            font-family:PingFang-SC-Medium;
            font-weight:500;
            color:rgba(59,59,60,1);
            margin: 0 0.48rem;
			
            span{
                float: right;
            }
        }
        .line2{
            margin: 0.3rem 0.48rem 0;
            font-size:0.24rem;
            font-family:PingFang-SC-Regular;
            font-weight:400;
            color:rgba(122,122,122,1);
			
            img{
                width: 0.27rem;
                margin-right: 0.21rem;
            }
            span{
                float: right;
            }
        }
    }
    .box:first-child{
        margin-top: 0.53rem;
    }
    .active{
        background:rgba(199,230,242,0.2);
    }
    .box:last-child{
        padding-bottom: 1.9rem;
    }
	
    .banner{
        min-height: 4rem;
        img{
            height: .46rem;
      }
      .line2 {
        margin: 0.3rem 0.48rem 0;
        font-size:0.24rem;
        font-family:PingFang-SC-Regular;
        font-weight:400;
        color:rgba(122,122,122,1);
        
        img {
          width: 0.27rem;
          margin-right: 0.21rem;
        }
        span {
          float: right;
        }
      }
    }
    .join{
    .box:first-child {
      margin-top: 0.53rem;
    }
    .active {
      background:rgba(199,230,242,0.2);
    }
    .box:last-child {
      padding-bottom: 1.9rem;
    }
    
    .banner {
      min-height: 4rem;
      img {
        height: .46rem;
      }
    }
    .join {
      width: 90%;
      height:auto;
      background: none;
      box-shadow:0px 0px 38px 0px rgba(79,78,80,0.15);
      margin: 0 auto;
      padding-bottom: .56rem;
      .join_t {
        padding: .56rem 0 0.4rem;
        span {
          margin: 0 auto;
        }
        div {
          display: none;
        }
      }
      .join_m {
        padding: 0 .34rem;
        margin: 0;
        h2 {
          font-size: .28rem;
          text-align: center;
        }
        p {
          font-size: .24rem;
          line-height:.35rem;
          span {
            color: #4CB1FF
          }
        }
      }
      .join_b {
        padding-right: 5%;
        margin:.57rem 0 0 0;
      }
    }
    .join_content {
      display: none;
    }
    .join_content-m {
      width: 100%;
      margin-top: .3rem;
      .join_content_card {
        width: 90%;
        height:auto;
        background: none;
        box-shadow:0px 0px 38px 0px rgba(79,78,80,0.15);
        margin: 0 auto;
        padding-bottom: .56rem;
        .join_t{
            padding: .56rem 0 0.4rem;
            span{
                margin: 0 auto;
            }
            div{
                display: none;
            }
        padding: .3rem 0;
        h3 {
          display: flex;
          justify-content: space-between;
          font-size: .24rem;
          color:#7A7A7A;
        }
        .join_m{
            padding: 0 .34rem;
            margin: 0;
            h2{
                font-size: .28rem;
                text-align: center;
            }
            p{
                font-size: .24rem;
                line-height:.35rem;
                span{
                    color: #4CB1FF
                }
            }
        h3:first-child {
          font-size: .34rem;
          color: #000;
        }
        .join_b{
            padding-right: 5%;
            margin:.57rem 0 0 0;
        }
      }
    }
    .join_content{
        display: none;
    }
    .join_content-m{
        width: 100%;
        margin-top: .3rem;
        .join_content_card{
            width: 90%;
            margin: 0 auto;
            padding: .3rem 0;
            h3{
                display: flex;
                justify-content: space-between;
                font-size: .24rem;
                color:#7A7A7A;
            }
            h3:first-child{
                font-size: .34rem;
                color: #000;
            }
        }
    }
}
  }
</style>

 src/views/companyProfile/postDetails.vue

@@ -33,7 +33,7 @@
                <span>岗位要求</span>
            </div>
            <div class="content">
                1、学历要求：本科以上；<br />
                1、学历要求：本科以上；<br />
                2、相关工作经验： 3年以上管理软件项目销售、售前咨询或项目实施管理经验；<br />
                3、熟练的使用各种Office工具，描述企业业务需求及撰写解决方案，有优秀的沟通和PPT演讲能力、业务分析能力、文案写作能力；<br />
                4、能够适应出差；<br />
@@ -45,7 +45,7 @@
                <span>岗位职责</span>
            </div>
            <div class="content">
                1、负责条码系统售前支持工作，包括客户调研、需求分析和应用解决方案的制定、方案讲解与交流、数据的整理、产品演示等；<br />
                1、负责条码系统售前支持工作，包括客户调研、需求分析和应用解决方案的制定、方案讲解与交流、数据的整理、产品演示等；<br />
                2、负责所辖区域机构软件业务的销售推动和拓展支持；<br />
                3、协助完善行业方案、样板客户案例及知识库贡献。        
            </div>
@@ -58,7 +58,7 @@
                <span>岗位要求</span>
            </div>
            <div class="content">
                负责依据项目蓝图设计要求，对当前项目进行实施搭建、测试、文档输出工作；<br />
                负责依据项目蓝图设计要求，对当前项目进行实施搭建、测试、文档输出工作；<br />
                在客户现场完成系统部署，调试、试运行、培训、验收等工作；<br />
                完成对客户系统使用过程中的问题解答、疑难排查等售后服务工作；          
            </div>
@@ -70,8 +70,8 @@
                1、要有主人翁精神，能够对公司负责、对工作负责、对自己负责，能充分理解责任与担当的含义；<br />
                2、能适应出差；<br />
                3、精通SQLServer 对数据库语句能熟练掌握，能独立完成数据库存储过程的编写；<br />
                4、    有较强文案能力（Word,excel,ppt, Visio等），熟悉系统说明书撰写规范；<br />
                5、    性格活泼开朗，善于与客户沟通，引导用户需求；<br />
                4、有较强文案能力（Word,excel,ppt, Visio等），熟悉系统说明书撰写规范；<br />
                5、性格活泼开朗，善于与客户沟通，引导用户需求；<br />
                6、能适应加班及较大工作压力；<br />
                7、学历要求：大专以上。       
            </div>
@@ -115,14 +115,14 @@
                2、有较强的美术功底，具有出色的艺术设计能力，能够灵活控制设计风格，把握时代前沿，富有创造力和激情；<br />
                3、熟练掌握photoshop,illustrator等设计软件，熟练掌握icon原创设计；<br />
                4、能够自己独立完成,热衷于图形界面设计与相关研究；<br />
                5、具有良好的沟通表达能力，需求判断力，团队协作能力。                               
                5、具有良好的沟通表达能力，需求判断力，团队协作能力。
            </div>
            <div class="title_b">
                <img src="../../img/zhi1.png" alt="" style="width: 0.35rem;">
                <span>岗位职责</span>
            </div>
            <div class="content">
                1、参与公司营销设计和产品项目的客户端界面设计工作；公司网页、广告宣传设计； 包括：把握产品整体形象设计、风格设计和表现形式设计；注重用户操作体验设计，优化用户操作。                 
                1、参与公司营销设计和产品项目的客户端界面设计工作；公司网页、广告宣传设计； 包括：把握产品整体形象设计、风格设计和表现形式设计；注重用户操作体验设计，优化用户操作。                 
            </div>
        </div>
    </div>
@@ -130,12 +130,12 @@

<script>
    export default {
        data(){
        data () {
            return{
                id:'',
            }
        },
        mounted() {
        mounted () {
            this.id = this.$route.query.id
        }
    }
@@ -178,8 +178,6 @@
                line-height: 0.37rem;
            }
        }


    }

    .footer {

 src/views/contactInformation/index.vue

@@ -1,214 +1,211 @@
<template>
    <div class="content1">
        <div class="wrapper mainContact">
            <h2>联系方式</h2>
            <ul class="contact_ul">
                <li>
                    <h3><img src="../../img/call.png" alt=""></h3>
                    <p style="margin-top: 0.2rem;">400-189-1819</p>
                    <p>周一到周五</p>
                </li>
                <li>
                    <h3><img src="../../img/email.png" style="margin-top: 0.1rem;" alt=""></h3>
                    <p style="margin-top: 0.28rem;">service@minkesoft.com</p>
                </li>
                <li>
                    <h3><img src="../../img/di.png" alt=""></h3>
                    <p style="margin-top: 0.2rem;">北京市朝阳区建国路88号</p>
                    <p>SOHO现代城2号楼29层</p>
                </li>
            </ul>
            <h2>留下您的联系方式，我们将尽快和您联系</h2>
            <el-form class="ruleForm" label-width="50px" :rules="rules" >
                <el-row>
                    <el-col :span="12">
                        <el-form-item>
                            <el-input class="color" placeholder="手机号码"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item >
                            <el-input class="color" placeholder="称呼"></el-input>
                        </el-form-item>
                    </el-col>

                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item style="background:#fff">
                            <el-input class="color" placeholder="邮箱" style="background:#fff"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item >
                            <el-input class="color" placeholder="公司"></el-input>
                        </el-form-item>
                    </el-col>

                </el-row>
                <el-row>
                    <el-col>
                        <el-form-item >
                            <el-input class="color"  type="textarea" placeholder="简单描述您的需求" style="height: 1rem;"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row style="text-align:center;margin-top: 0.3rem;">
                    <el-col>
                        <el-form-item >
                            <el-button type="primary" >提交</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
  <div class="content1">
    <div class="wrapper mainContact">
      <h2>联系方式</h2>
      <ul class="contact_ul">
        <li>
          <h3><img src="../../img/call.png" alt=""></h3>
          <p style="margin-top: 0.2rem;">400-189-1819</p>
          <p>周一到周五</p>
        </li>
        <li>
          <h3><img src="../../img/email.png" style="margin-top: 0.1rem;" alt=""></h3>
          <p style="margin-top: 0.28rem;">service@minkesoft.com</p>
        </li>
        <li>
          <h3><img src="../../img/di.png" alt=""></h3>
          <p style="margin-top: 0.2rem;">北京市朝阳区建国路88号</p>
          <p>SOHO现代城2号楼29层</p>
        </li>
      </ul>
      <h2>留下您的联系方式，我们将尽快和您联系</h2>
      <el-form class="ruleForm" label-width="50px" :rules="rules" >
        <el-row>
          <el-col :span="12">
            <el-form-item>
              <el-input class="color" placeholder="手机号码"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item >
              <el-input class="color" placeholder="称呼"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item style="background:#fff">
              <el-input class="color" placeholder="邮箱" style="background:#fff"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item >
              <el-input class="color" placeholder="公司"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item >
              <el-input class="color"  type="textarea" placeholder="简单描述您的需求" style="height: 1rem;"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="text-align:center;margin-top: 0.3rem;">
          <el-col>
            <el-form-item >
              <el-button type="primary" >提交</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            rules:{
  data () {
    return {
      rules: {

            }
        }
    },

      }
    }
  }
}
</script>

<style lang="less" >
@media (max-width: 750px) and (min-width: 0){
    .content1{
        background: url(../../img/contactBanner.png) no-repeat;
        background-size: 100% 100%;
        background-size: cover;
        padding: 1.3rem 0;
  @media (max-width: 750px) and (min-width: 0){
    .content1 {
      background: url(../../img/contactBanner.png) no-repeat;
      background-size: 100% 100%;
      background-size: cover;
      padding: 1.3rem 0;
    }
    .el-form-item__content{
        margin: 0
    .el-form-item__content {
      margin: 0
    }
    .mainContact{
        margin-top: 1.27rem;
        >h2{
            font-size: 0.26rem;
            color: #3B3B3C;
            margin:0.6rem 0 0.17rem;
        }
        ul{
            width: 100%;
            height: auto;
            padding: .4rem;
            li{
                width: 80%;
                display: flex;
                align-items: center;
                margin: .2rem auto;
                padding:  .2rem .4rem;
                p{
                    display: none
                }
                h3{
                    display: block;
                    width: .38rem;
                    height: 80%;
                    margin-right: .2rem;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                h2{
                    color:#fff;
                }
    .mainContact {
      margin-top: 1.27rem;
      > h2 {
        font-size: 0.26rem;
        color: #3B3B3C;
        margin:0.6rem 0 0.17rem;
      }
      ul {
        width: 100%;
        height: auto;
        padding: .4rem;
        li {
          width: 80%;
          display: flex;
          align-items: center;
          margin: .2rem auto;
          padding:  .2rem .4rem;
          p {
            display: none
          }
          h3 {
            display: block;
            width: .38rem;
            height: 80%;
            margin-right: .2rem;
            img {
              width: 100%;
              height: 100%;
            }
            li:first-child{
                background: #1DA1F2;
            }
            li:nth-child(2){
                background: #3B5998;
            }
            li:nth-child(3){
                 background: #4285F4;
            }
          }
          h2 {
            color:#fff;
          }
        }
        .el-col-12 {
            width: 84%;
        li:first-child {
          background: #1DA1F2;
        }
        .partner_info .ruleForm[data-v-238abfa1] {
            padding: 0;       
        li:nth-child(2) {
          background: #3B5998;
        }
        .element .style {
            margin: 0;
        li:nth-child(3) {
          background: #4285F4;
        }
        .el-button--primary{
            width: 40%;
            background: #00A1E1;
        }
        .color>.el-input__inne{
            background: #fff;
        }
        .el-textarea {
            width: 82%;
            background: #fff;
        }
      }
      .el-col-12 {
        width: 84%;
      }
      .partner_info .ruleForm[data-v-238abfa1] {
        padding: 0;       
      }
      .element .style {
        margin: 0;
      }
      .el-button--primary {
        width: 40%;
        background: #00A1E1;
      }
      .color > .el-input__inne {
        background: #fff;
      }
      .el-textarea {
        width: 82%;
        background: #fff;
      }
    }
}
@media (min-width: 751px) {
    .content1{
        padding: 1.3rem 0;
        background: url(../../img/contactBanner.png) no-repeat;
        min-height: 14.42rem;
        background-size: cover;
  }
  @media (min-width: 751px) {
    .content1 {
      padding: 1.3rem 0;
      background: url(../../img/contactBanner.png) no-repeat;
      min-height: 14.42rem;
      background-size: cover;
    }
    .contact_ul{
        display: flex;
        padding-bottom: 0.72rem;
        margin-top: 0.85rem;
        border-bottom: 1px solid #EBECF0;
    .contact_ul {
      display: flex;
      padding-bottom: 0.72rem;
      margin-top: 0.85rem;
      border-bottom: 1px solid #EBECF0;

        li{
            float: left;
            flex: 1;
            text-align: center;
            h2{
                font-size: 0.3rem;
                color: #3B3B3C;
                margin:0.24rem 0 0.17rem;
            }
            p{
                font-size: 0.16rem;
                color: #4E6C8D;
            }
      li {
        float: left;
        flex: 1;
        text-align: center;
        h2 {
          font-size: 0.3rem;
          color: #3B3B3C;
          margin:0.24rem 0 0.17rem;
        }
    }
    .el-button--primary{
        background: #5E8EEB;
        border-color: #5E8EEB;
        padding: 0.13rem 0.79rem;
    }
    .mainContact{
        margin: 2.17rem auto 1.84rem;
        padding:0.72rem 1.65rem 0.69rem;
    }
}
.mainContact{
        background: rgba(255,255,255,1);
        box-shadow: 0px 0px 29px 0px rgba(34,62,114,0.29);
        border-radius: 0.3rem;
        h2{
            text-align: center;
            font-size: 0.3rem;
            color:#3B3B3C;
        p {
          font-size: 0.16rem;
          color: #4E6C8D;
        }
        h2:nth-child(3){
            margin: 0.85rem 0 0.91rem;
        }
      }
    }
    .el-button--primary {
      background: #5E8EEB;
      border-color: #5E8EEB;
      padding: 0.13rem 0.79rem;
    }
    .mainContact {
      margin: 2.17rem auto 1.84rem;
      padding:0.72rem 1.65rem 0.69rem;
    }
  }
  .mainContact {
    background: rgba(255,255,255,1);
    box-shadow: 0px 0px 29px 0px rgba(34,62,114,0.29);
    border-radius: 0.3rem;
    h2 {
      text-align: center;
      font-size: 0.3rem;
      color:#3B3B3C;
    }
    h2:nth-child(3) {
      margin: 0.85rem 0 0.91rem;
    }
  }
</style>
<style>
    .el-textarea__inner{
    .el-textarea__inner {
        height: 1rem;
    }
</style>

 src/views/home/index.vue

@@ -28,8 +28,8 @@
            }
        },
        watch:{ //监听路由
            $route(to,from){
                if(to.path == '/postDetails'){
            $route(to, from) {
                if (to.path === '/postDetails') {
                    this.isShow = false
                }
            }

 src/views/index/dynamicDetail.vue

@@ -1,116 +1,109 @@
<template>
    <div class="main">
        <div class="wrapper dynamic">
            <div class="dynamic_l">
                <h4>明科 > 新闻资讯 > 企业资讯 > 宝时得电商平台项目启动会议隆重举行</h4>
                <h2 class="dynamic_title">宝时得电商平台项目启动会议隆重举行</h2>
                <h3 class="dynamic_subtitle">企业资讯 | 2018-10-10</h3>
                <div class="dynamic_content">
                    <p>
                        9月22日上午，宝时得电商平台项目启动会在苏州厅隆重召开，专业工具营销中心朱总、财务张总、信息化管理部丁总，携项目组团队参加了此次会议。北京明科普华副总经理张富贵，携顾问代表4人出席了会议。<br />
                        会议由电商销售部经理纪锦露主持召开。
                    </p>
                    <img src="../../img/dynamicDetail.png" alt="">
                </div>
                <div class="dynamic_content">
                    <p>
                        会议伊始，电商销售部经理纪锦露首先分析了近几年由于电商销量的不断上升，电商部门在工作中所遇到的各类问题，纪经理尤其指出在每年双十一期间巨大的订单量给电商部门带来了巨大的工作量。<br />
                        <div style="margin: 0.3rem 0;">2017年的双十一即将来临，通过IT平台打通电商平台与SAP系统实现数据流对接，提高物流发货效率，降低人为出错率，降低人工成本，已经迫在眉睫。</div>
                        接着，北京明科普华项目总监兼项目经理刘畅向与会各位介绍了北京明科各类电商管理项目实施经验，以及明科项目将会给宝时得电商管理带来什么变化。在时间上本项目预计从项目正式启动后的2个月内完成平台搭建、平台开发与一期功能实施，项目上线。二期在一期上线后的一个月内完成相关的开发与上线工作。
                     </p>
                    <img src="../../img/da2.png" alt="">
                </div>
                <div class="dynamic_content">
                    <p>随后，北京明科副总经理张富贵向宝时得作出了项目时间、投入资源与平台质量上的承诺，以及今后的一些展望。</p>
                    <img src="../../img/da3.png" alt="">
                </div>
                <div class="dynamic_content">
                    <p>
                        最后，专业工具营销中心朱总为此次会议做了总结，并指出本次项目时间比较紧张，并且一上线就将面临双十一的这场‘大战’，希望项目组团队能够高质量的完成任务。<br />
                        电商平台项目将会给宝时得电商运营带来巨大变化。让我们在互联网+的大时代背景下，通过全新的电商管理平台，共同努力，为宝时得创下新的销售传奇！
                    </p>
                    <img src="../../img/da4.png" alt="">
                </div>
            </div>
            <div class="dynamic_r">
                <h3>热门文章</h3>
                <ul class="dynamic_ul">
                    <li>
                        <img src="../../img/caseList.png" alt="">
                        <div>
                            <p>明科产品质量安全追溯系统解决方案</p>
                            <span>2017-03-08</span>
                        </div>
                    </li>
                    <li>
                        <img src="../../img/r2.png" alt="">
                        <div>
                            <p>供应商管理解决方案</p>
                            <span>2017-03-08</span>
                        </div>
                    </li>
                    <li>
                        <img src="../../img/r3.png" alt="">
                        <div>
                            <p>明科产品质量安全追溯系统解决方案</p>
                            <span>2017-03-08</span>
                        </div>
                    </li>
                    <li>
                        <img src="../../img/r4.png" alt="">
                        <div>
                            <p>明科防窜货管理解决方案</p>
                            <span>2017-03-08</span>
                        </div>
                    </li>
					
					
                    <li>
                        <img src="../../img/r5.png" alt="">
                        <div>
                            <p>明科售后服务跟踪系统解决方案</p>
                            <span>2017-03-08</span>
                        </div>
                    </li>
                    <li>
                        <img src="../../img/r6.png" alt="">
                        <div>
                            <p>明科资产及档案系统解决方案</p>
                            <span>2017-03-08</span>
                        </div>
                    </li>
                    <li>
                        <img src="../../img/r7.png" alt="">
                        <div>
                            <p>明科产品质量安全追溯系统解决方案</p>
                            <span>2017-03-08</span>
                        </div>
                    </li>
                    <li>
                        <img src="../../img/r8.png" alt="">
                        <div>
                            <p>明科电子标签拣货系统</p>
                            <span>2017-03-08</span>
                        </div>
                    </li>
                </ul>
            </div>
  <div class="main">
    <div class="wrapper dynamic">
      <div class="dynamic_l">
        <h4>明科 > 新闻资讯 > 企业资讯 > 宝时得电商平台项目启动会议隆重举行</h4>
        <h2 class="dynamic_title">宝时得电商平台项目启动会议隆重举行</h2>
        <h3 class="dynamic_subtitle">企业资讯 | 2018-10-10</h3>
        <div class="dynamic_content">
          <p>9月22日上午，宝时得电商平台项目启动会在苏州厅隆重召开，专业工具营销中心朱总、财务张总、信息化管理部丁总，携项目组团队参加了此次会议。北京明科普华副总经理张富贵，携顾问代表4人出席了会议。<br />
            会议由电商销售部经理纪锦露主持召开。
          </p>
          <img src="../../img/dynamicDetail.png" alt="">
        </div>
		
        <div class="wechat p_hide">
            <div class="title_a">媒体合作</div>
            <div class="title_c">
                <img src="../../img/code.png" alt="">
            </div>
            <div class="title_b">更多动态请关注</div>
            <div class="title_b">明科企业官方公众号</div>
        </div>

        <div class="wrapper dynamic_b">
            <p>上一篇：这已经是第一篇了 <span>企业资讯 | 2017-03-08</span></p>
            <p>下一篇：明科产品质量安全追溯系统解决方案 <span>企业资讯 | 2017-03-08</span></p>
        <div class="dynamic_content">
          <p>会议伊始，电商销售部经理纪锦露首先分析了近几年由于电商销量的不断上升，电商部门在工作中所遇到的各类问题，纪经理尤其指出在每年双十一期间巨大的订单量给电商部门带来了巨大的工作量。<br />
            <span style="margin: 0.3rem 0;display: inline-block;">2017年的双十一即将来临，通过IT平台打通电商平台与SAP系统实现数据流对接，提高物流发货效率，降低人为出错率，降低人工成本，已经迫在眉睫。</span>
            接着，北京明科普华项目总监兼项目经理刘畅向与会各位介绍了北京明科各类电商管理项目实施经验，以及明科项目将会给宝时得电商管理带来什么变化。在时间上本项目预计从项目正式启动后的2个月内完成平台搭建、平台开发与一期功能实施，项目上线。二期在一期上线后的一个月内完成相关的开发与上线工作。
          </p>
          <img src="../../img/da2.png" alt="">
        </div>
        <div class="dynamic_content">
          <p>随后，北京明科副总经理张富贵向宝时得作出了项目时间、投入资源与平台质量上的承诺，以及今后的一些展望。</p>
          <img src="../../img/da3.png" alt="">
        </div>
        <div class="dynamic_content">
          <p>最后，专业工具营销中心朱总为此次会议做了总结，并指出本次项目时间比较紧张，并且一上线就将面临双十一的这场‘大战’，希望项目组团队能够高质量的完成任务。<br />
            电商平台项目将会给宝时得电商运营带来巨大变化。让我们在互联网+的大时代背景下，通过全新的电商管理平台，共同努力，为宝时得创下新的销售传奇！
          </p>
          <img src="../../img/da4.png" alt="">
        </div>
      </div>
      <div class="dynamic_r">
        <h3>热门文章</h3>
        <ul class="dynamic_ul">
          <li>
            <img src="../../img/caseList.png" alt="">
            <div>
              <p>明科产品质量安全追溯系统解决方案</p>
              <span>2017-03-08</span>
            </div>
          </li>
          <li>
            <img src="../../img/r2.png" alt="">
            <div>
              <p>供应商管理解决方案</p>
              <span>2017-03-08</span>
            </div>
          </li>
          <li>
            <img src="../../img/r3.png" alt="">
            <div>
              <p>明科产品质量安全追溯系统解决方案</p>
              <span>2017-03-08</span>
            </div>
          </li>
          <li>
            <img src="../../img/r4.png" alt="">
            <div>
              <p>明科防窜货管理解决方案</p>
              <span>2017-03-08</span>
            </div>
          </li>
          <li>
            <img src="../../img/r5.png" alt="">
            <div>
              <p>明科售后服务跟踪系统解决方案</p>
              <span>2017-03-08</span>
            </div>
          </li>
          <li>
            <img src="../../img/r6.png" alt="">
            <div>
              <p>明科资产及档案系统解决方案</p>
              <span>2017-03-08</span>
            </div>
          </li>
          <li>
            <img src="../../img/r7.png" alt="">
            <div>
              <p>明科产品质量安全追溯系统解决方案</p>
              <span>2017-03-08</span>
            </div>
          </li>
          <li>
            <img src="../../img/r8.png" alt="">
            <div>
              <p>明科电子标签拣货系统</p>
              <span>2017-03-08</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="wechat p_hide">
      <div class="title_a">媒体合作</div>
      <div class="title_c">
        <img src="../../img/code.png" alt="">
      </div>
      <div class="title_b">更多动态请关注</div>
      <div class="title_b">明科企业官方公众号</div>
    </div>
    <div class="wrapper dynamic_b">
      <p>上一篇：这已经是第一篇了 <span>企业资讯 | 2017-03-08</span></p>
      <p>下一篇：明科产品质量安全追溯系统解决方案 <span>企业资讯 | 2017-03-08</span></p>
    </div>
  </div>
</template>

<script>
@@ -120,159 +113,154 @@
</script>

<style lang="less" scoped>
.dynamic{
  .dynamic {
    padding-top: 0.31rem;
    display: flex;
}
.dynamic_l{
  }
  .dynamic_l {
    padding: 0 0.19rem 0.93rem 0;
    border-bottom: 1px solid #DBDBDB;
    h3{
    h3 {
      font-size: 0.16rem;
      color: #3A3A3C;
    }
    .dynamic_title {
      margin: 0.43rem 0 0.19rem;
      text-align: center;
      font-size: 0.24rem;
      font-weight: bold;
    }
    .dynamic_subtitle {
      text-align: center;
      color: #838383;
      font-size: 0.18rem;
      padding-bottom: 0.19rem;
      border-bottom: 1px solid #DBDBDB;
    }
    .dynamic_content {
      p {
        font-size: 0.14rem;
        color: #3F3F3F;
        line-height: 0.24rem;
        margin: 0.3rem 0;
      }
    }
  }
  @media (max-width: 750px) and (min-width: 0) {
    .wechat {
      margin-top: 0.77rem;
      margin-bottom: 0.5rem;
      .title_a {
        text-align: center;
        font-size:0.36rem;
        font-family:PingFang-SC-Medium;
        font-weight:500;
        color:rgba(55,55,55,1);
        line-height:0.21rem;
        opacity:0.83;
        margin-bottom: 0.39rem;
      }
      .title_b {
        text-align: center;
        font-size:0.28rem;
        font-family:PingFang-SC-Medium;
        font-weight:500;
        color:rgba(44,44,45,1);
      }
      .title_c {
        text-align: center;
        img {
          width: 1.5rem;
        }
      }
    }

    .dynamic {
      margin-top: 0.9rem;
    }
    .dynamic_l .dynamic_title {
      font-size: 0.32rem;
    }
    .dynamic_b-m {
      width: 100%;
      margin: .5rem 0;
      h3 {
        width: 100%;
        text-align: center;
      }
    }
    .dynamic_b {
      display: none;
    }
    .dynamic_r {
      display: none;
    }
    .dynamic_l {
      width: 100%;
      padding: 0 .3rem;
      border: 0;
      > h4 {
        display: none;
      }
      .dynamic_content {
        p {
          font-size: .28rem;
          line-height: .4rem;
        }
      }
    }
  }
  @media (min-width: 751px) {
    .dynamic {
      display:flex;
    }
    .dynamic_b-m {
      display: none;
    }
    .dynamic_b {
      padding: .4rem 0;
      p {
        margin: .1rem 0;
        span{
          font-family: MicrosoftYaHei;
          font-weight: 400;
          color: rgba(175,173,173,1);
          margin-left: 0.2rem;
        }
      }
    }
    .dynamic_l {
      flex: 0.75;
    }
    .dynamic_r {
      flex:0.25;
      margin-top: 0.2rem;
      h3 {
        font-size: 0.16rem;
        color: #3A3A3C;
    }
    .dynamic_title{
        margin: 0.43rem 0 0.19rem;
        text-align: center;
        font-size: 0.24rem;
        color:#3A3A3C;
        font-weight: bold;
    }
    .dynamic_subtitle{
        text-align: center;
        color: #838383;
        font-size: 0.18rem;
        padding-bottom: 0.19rem;
        border-bottom: 1px solid #DBDBDB;
    }
    .dynamic_content{
        p{
            font-size: 0.14rem;
            color: #3F3F3F;
            line-height: 0.24rem;
            margin: 0.3rem 0;
        }
    }
}
@media (max-width: 750px) and (min-width: 0){
    .wechat{
        margin-top: 0.77rem;
        margin-bottom: 0.5rem;
        .title_a{
            text-align: center;
            font-size:0.36rem;
            font-family:PingFang-SC-Medium;
            font-weight:500;
            color:rgba(55,55,55,1);
            line-height:0.21rem;
            opacity:0.83;
            margin-bottom: 0.39rem;
        }
        .title_b{
            text-align: center;
            font-size:0.28rem;
            font-family:PingFang-SC-Medium;
            font-weight:500;
            color:rgba(44,44,45,1);
        }
        .title_c{
            text-align: center;
            img{
                width: 1.5rem;
            }
        }
    }
	
    .dynamic{
        margin-top: 0.9rem;
    }
    .dynamic_l .dynamic_title{
        font-size: 0.32rem;
    }
    .dynamic_b-m{
      }
      .dynamic_ul {
        padding-top: 0.06rem;
        width: 100%;
        margin: .5rem 0;
        h3{
            width: 100%;
            text-align: center;
        li {
          display: flex;
          margin-top: 0.1rem;
          img {
            margin-right: .1rem;
          }
          p {
            width: 1.26rem;
            font-size: 0.07rem;
            color: #676767;
            line-height: 0.22rem;
          }
          span {
            font-size: 0.06rem;
            color: #AFADAD;
          }
        }
      }
    }
    .dynamic_b{
        display: none;
    }
    .dynamic_r{
        display: none;
    }
    .dynamic_l{
        width: 100%;
        padding: 0 .3rem;
        border: 0;
        >h4{
            display: none;
        }
        .dynamic_content {
            
            p{
                font-size: .28rem;
                line-height: .4rem;
            }
        }
    }
}
@media (min-width: 751px) {
    .dynamic{
        display:flex;
    }
    .dynamic_b-m{
        display: none;
    }
    .dynamic_b{
        padding: .4rem 0;
        p{
            margin: .1rem 0;
			
            span{
                font-family:MicrosoftYaHei;
                font-weight:400;
                color:rgba(175,173,173,1);
                margin-left: 0.2rem;
            }
        }
    }
    .dynamic_l{
        flex: 0.75;
    }
    .dynamic_r{
        flex:0.25;
        margin-top: 0.2rem;
		
        h3{
            font-size: 0.16rem;
            color:#3A3A3C;
            font-weight: bold;
        }
        .dynamic_ul{
            padding-top: 0.06rem;
            width: 100%;
            li{
                display: flex;
                margin-top: 0.1rem;
                img{
                    margin-right: .1rem;
                }
                p{
                    width: 1.26rem;
                    font-size: 0.07rem;
                    color: #676767;
                    line-height: 0.22rem;
                }
                span{
                    font-size: 0.06rem;
                    color: #AFADAD;
                }

            }
        }
    }
}

  }
</style>

 src/views/index/index.vue

@@ -3,7 +3,6 @@
        <div class="banner"><img src='../../img/home.png' alt=""></div>
        <div class="wrapper-box">
            <h3 class="content_title fadeInUp zoomIn animated"><span>主营业务</span></h3>

            <div class="m_zhu">
                <div class="title_a">明科商业智能开放平台</div>
                <div class="title_b">MingKeOS</div>
@@ -834,8 +833,10 @@
            height: 3rem;
            margin: 0.69rem 0 .85rem;
        }

        .business_ul>li {
        .business_ul > li:hover {
            z-index: 1000;
        }
        .business_ul > li {
            display: inline-block;
            text-align: center;
            background: rgba(255, 255, 255, 1);

 src/views/news/index.vue

@@ -1,431 +1,430 @@
<template>
    <div>
        <div class="banner">
            <img src="../../img/newsBanner.png" alt="" class="m_hide">
            <img src="../../img/xin.png" 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.png" 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.png" 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.png" 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.png" 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.png" 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.png" 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.png" 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.png" 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.png" 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.png" 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.png" 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.png" 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>
    <div class="banner">
      <img src="../../img/newsBanner.png" alt="" class="m_hide">
      <img src="../../img/xin.png" 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.png" 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.png" 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.png" 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.png" 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.png" 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.png" 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.png" 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.png" 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.png" 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.png" 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.png" 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.png" 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,
  data() {
    return {
      cur: 0,
      tabs:[
        {
          name:'全部'
        },
        {
          name:'企业资讯'
        },
        {
          name:'公司活动'
        },
        {
          name:'解决方案'
        }
    },
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
    },
    mounted(){
        
      ],
      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%;
@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;
    }
    .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;
        }
        .active{
            background: #20B7FE;
            color: #fff;
            border:none;
        }
      }
      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;
      }
    }
    .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;
            }
        }
    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;
    }
  }
  .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{
  .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;
        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;
        bottom: 0.29rem;
        right: 0;
        color: #fff;
        border:none;
        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{
    .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"]){
    .el-pagination button, .el-pagination span:not([class*="suffix"]) {
        width: 0.45rem;
        height: 0.3rem;
        line-height: 0.3rem;

 src/views/partner/index.vue

@@ -1,346 +1,338 @@
<template>
    <div class="main">
        <div class="banner">
            <img src="../../img/partner.png" alt="" class="m_hide">
            <img src="../../img/huo0.png" alt="" class="p_hide">
        </div>
        <div class="wrapper">
            <div class="content_title"><span>合作伙伴</span></div>
            <h2><i></i> <span>partner</span></h2>
            <div class="content">
                <ul class="partner_ul">
                    <li @click="point('实施伙伴','Implementing partners')">
                        <a href="#id1">
                            <h3><img src="../../img/icon.png" alt=""></h3>
                            <p>成为实施伙伴</p>
                        </a>
                    </li>
                    <li @click="point('营销伙伴','The marketing partner')">
                        <a href="#id1">
                            <h3><img src="../../img/tu2.png" alt=""></h3>
                            <p>成为营销伙伴</p>
                        </a>
                    </li>
                    <li @click="point('推广伙伴','partner')">
                        <a href="#id1">
                            <h3><img src="../../img/tu3.png" alt=""></h3>
                            <p>成为推广伙伴</p>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <div id="id1" class="p_hide" style="height: 1rem;margin-top: -1rem;"></div>
        <div class="partner_info">
            <div class="wrapper">
                <h2><i></i><span>{{p_txt}}</span></h2>
                <h1>{{p_txt}}</h1>
                <h3>{{e_txt}}</h3>
                <el-form class="ruleForm">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item style="position: relative;">
                                <img src="../../img/huo5.png" alt="" class="left_img p_hide">
                                <el-input placeholder="公司名称" v-model="input1"></el-input>
                                <img src="../../img/huo1.png" class="right_img p_hide" alt="">
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item style="position: relative;">
                                <img src="../../img/huo5.png" alt="" class="left_img p_hide">
                                <el-input placeholder="您的职位" v-model="input2"></el-input>
                                <img src="../../img/huo2.png" class="right_img p_hide" alt="" style="right: 0.4rem;">
                            </el-form-item>
                        </el-col>

                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item style="position: relative;">
                                <img src="../../img/huo5.png" alt="" class="left_img p_hide">
                                <el-input placeholder="您的姓名" v-model="input3"></el-input>
                                <img src="../../img/huo3.png" class="right_img p_hide" alt="">
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item style="position: relative;">
                                <img src="../../img/huo5.png" alt="" class="left_img p_hide">
                                <el-input placeholder="您的电话" v-model="input4"></el-input>
                                <img src="../../img/huo4.png" class="right_img p_hide" alt="">
                            </el-form-item>
                        </el-col>

                    </el-row>
                    <el-row>
                        <el-col>
                            <el-form-item>
                                <img src="../../img/huo5.png" alt="" class="left_img p_hide">
                                <el-input type="textarea" placeholder="咨询内容" v-model="input5"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row style="text-align:center">
                        <el-col>
                            <el-form-item>
                                <el-button type="primary" style="margin: 0.47rem 0 0.3rem;" @click="refer">提交</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </div>
  <div class="main">
    <div class="banner">
      <img src="../../img/partner.png" alt="" class="m_hide">
      <img src="../../img/huo0.png" alt="" class="p_hide">
    </div>
    <div class="wrapper">
      <div class="content_title"><span>合作伙伴</span></div>
      <h2><i></i> <span>partner</span></h2>
      <div class="content">
        <ul class="partner_ul">
          <li @click="point('实施伙伴','Implementing partners')">
            <a href="#id1">
              <h3><img src="../../img/icon.png" alt=""></h3>
              <p>成为实施伙伴</p>
            </a>
          </li>
          <li @click="point('营销伙伴','The marketing partner')">
            <a href="#id1">
              <h3><img src="../../img/tu2.png" alt=""></h3>
              <p>成为营销伙伴</p>
            </a>
          </li>
          <li @click="point('推广伙伴','partner')">
            <a href="#id1">
              <h3><img src="../../img/tu3.png" alt=""></h3>
              <p>成为推广伙伴</p>
            </a>
          </li>
        </ul>
      </div>
    </div>
    <div id="id1" class="p_hide" style="height: 1rem;margin-top: -1rem;"></div>
    <div class="partner_info">
      <div class="wrapper">
        <h2><i></i><span>{{p_txt}}</span></h2>
        <h1>{{p_txt}}</h1>
        <h3>{{e_txt}}</h3>
        <el-form class="ruleForm">
          <el-row>
            <el-col :span="12">
              <el-form-item style="position: relative;">
                <img src="../../img/huo5.png" alt="" class="left_img p_hide">
                <el-input placeholder="公司名称" v-model="input1"></el-input>
                <img src="../../img/huo1.png" class="right_img p_hide" alt="">
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item style="position: relative;">
                <img src="../../img/huo5.png" alt="" class="left_img p_hide">
                <el-input placeholder="您的职位" v-model="input2"></el-input>
                <img src="../../img/huo2.png" class="right_img p_hide" alt="" style="right: 0.4rem;">
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item style="position: relative;">
                <img src="../../img/huo5.png" alt="" class="left_img p_hide">
                <el-input placeholder="您的姓名" v-model="input3"></el-input>
                <img src="../../img/huo3.png" class="right_img p_hide" alt="">
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item style="position: relative;">
                <img src="../../img/huo5.png" alt="" class="left_img p_hide">
                <el-input placeholder="您的电话" v-model="input4"></el-input>
                <img src="../../img/huo4.png" class="right_img p_hide" alt="">
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item>
                <img src="../../img/huo5.png" alt="" class="left_img p_hide">
                <el-input type="textarea" placeholder="咨询内容" v-model="input5"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row style="text-align:center">
            <el-col>
              <el-form-item>
                <el-button type="primary" style="margin: 0.47rem 0 0.3rem;" @click="refer">提交</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            input1:'',
            input2:'',
            input3:'',
            input4:'',
            input5:'',
            isPhone:true,//手机 PC
            p_txt:'实施伙伴',
            e_txt:'Implementing partners',
        }
    },
    methods:{
        point(t,e){
  data () {
    return {
      input1: '',
      input2: '',
      input3: '',
      input4: '',
      input5: '',
      isPhone: true,//手机 PC
      p_txt: '实施伙伴',
      e_txt: 'Implementing partners'
    }
  },
    methods: {
        point (t,e) {
            this.p_txt = t
            this.e_txt = e
        },
        refer(){
        refer () {
            if(!this.input1){
                this.err_msg('公司名称不能为空');
                return false;
            }
			

            if(!this.input2){
                this.err_msg('您的职位不能为空');
                return false;
            }
			

            if(!this.input3){
                this.err_msg('您的姓名不能为空');
                return false;
            }
			

            if(!this.input4){
                this.err_msg('您的电话不能为空');
                return false;
            }
			

            if(!this.input5){
                this.err_msg('咨询内容不能为空');
                return false;
            }
        },
        //错误提示（区分手机 PC）
        err_msg(err){
        err_msg (err) {
            if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
               alert(err)
              alert(err)
            }else{
               this.$message.error(err);
        this.$message.error(err);
            }
        }
    },

    }
}
</script>

<style lang="less" scoped>
@media (max-width: 750px) and (min-width: 0){
    h2{
        display: none;
  @media (max-width: 750px) and (min-width: 0) {
    h2 {
      display: none;
    }
    .content_title{
        margin: 0.99rem 0 0.5rem;
    .content_title {
      margin: 0.99rem 0 0.5rem;
    }
    .partner_ul{
        width: 100%;
        height: auto;
        li{
            width: 70%;
            margin: .4rem auto;
            text-align: center;
            h3{
                width: 3rem;
                height: 2.8rem;
                margin: 0 auto;
            }
            p{
                margin: .3rem 0 .5rem;
            }
    .partner_ul {
      width: 100%;
      height: auto;
      li {
        width: 70%;
        margin: .4rem auto;
        text-align: center;
        h3 {
          width: 3rem;
          height: 2.8rem;
          margin: 0 auto;
        }
        p {
          margin: .3rem 0 .5rem;
        }
      }
    }
    .partner_info{
        padding: .5rem .9rem;
        background: #303940;
        h2{
            text-align: center;
            position: absolute;
        }
        h1{
            color:#fff;
            font-size: .26rem;
            text-align: center;
        }
        h3{
            color:#fff;
            font-size: .2rem;
            text-align: center;
            margin-bottom: .4rem;
        }
    .partner_info {
      padding: .5rem .9rem;
      background: #303940;
      h2 {
        text-align: center;
        position: absolute;
      }
      h1 {
        color:#fff;
        font-size: .26rem;
        text-align: center;
      }
      h3 {
        color:#fff;
        font-size: .2rem;
        text-align: center;
        margin-bottom: .4rem;
      }
    }
    .el-col-12 {
        width: 100%;
      width: 100%;
    }
    .partner_info .ruleForm[data-v-238abfa1] {
        padding: 0;       
      padding: 0;       
    }
    .ruleForm{
        .left_img{
            width: 0.15rem;
            height: 0.15rem;
            position: absolute;
            left: -0.4rem;
            top: 0.3rem;
        }
        .right_img{
            height: 0.29rem;
            position: absolute;
            right: 0.35rem;
            top: 0.25rem;
        }
    }
    .el-input, .el-textarea{
        background: #303940;
    }
    .ruleForm {
      .left_img {
        width: 0.15rem;
        height: 0.15rem;
        position: absolute;
        left: -0.4rem;
        top: 0.3rem;
      }
      .right_img {
        height: 0.29rem;
        position: absolute;
        right: 0.35rem;
        top: 0.25rem;
      }
    }
    .el-input, .el-textarea {
      background: #303940;
    }
    .element.style {
        margin: 0;
      margin: 0;
    }
    .el-button--primary{
        width: 100%;
        background: #00A1E1;
    .el-button--primary {
      width: 100%;
      background: #00A1E1;
    }
    
}
@media (min-width: 751px) {
    h1{
        display: none;
  }
  @media (min-width: 751px) {
    h1 {
      display: none;
    }
    .partner_ul{
        // padding:0 1.92rem;
        li{
            float: left;
            width: 33%;
            text-align: center;
            border-right: 0.01rem solid #D8D8D8;
            cursor: pointer;
            h3{
                img{
                    width: 1.52rem;
                    height: 1.4rem;
                    display: inline-block;
                }
            }
            p{
                font-size:0.2rem;
                color:#3B3B3C;
                margin-top: 0.16rem;
            }
    .partner_ul {
      // padding:0 1.92rem;
      li {
        float: left;
        width: 33%;
        text-align: center;
              border-right: 0.01rem solid #D8D8D8;
              cursor: pointer;
        h3 {
          img {
            width: 1.52rem;
            height: 1.4rem;
            display: inline-block;
          }
        }
        li:last-child{
            border-right:0;
        }
    }
    .partner_info{
        background: url(../../img/formBanner.png) no-repeat;
        padding-top: 0.51rem;
        margin-bottom: 2.64rem;
        background-size: cover;
        h2{
            margin-bottom: 0;
        p {
          font-size:0.2rem;
          color:#3B3B3C;
          margin-top: 0.16rem;
        }
        h3{
            color:#4E6C8D;
            font-size:0.12rem;
            padding-left:0.1rem;
        }
        .ruleForm{
            margin-top: 0.28rem;
            padding:0 1.32rem;
        }

      }
      li:last-child {
        border-right:0;
      }
    }
    .el-input--mini .el-input__inner{
        height: 47px;
        line-height: 47px;
    .partner_info {
      background: url(../../img/formBanner.png) no-repeat;
      padding-top: 0.51rem;
      margin-bottom: 2.64rem;
      background-size: cover;
      h2 {
        margin-bottom: 0;
      }
      h3 {
        color: #4E6C8D;
        font-size: 0.12rem;
        padding-left: 0.1rem;
      }
      .ruleForm {
        margin-top: 0.28rem;
        padding: 0 1.32rem;
      }
    }

    .el-button--primary{
        padding: 0.13rem 1.70rem;
    .el-input--mini .el-input__inner {
      height: 47px;
      line-height: 47px;
    }
    .el-button--primary {
      padding: 0.13rem 1.70rem;
    }
    .el-form-item__content {
        line-height: 40px;
        position: relative;
        font-size: 14px;
        padding: 0 .4rem;
        margin: 0;
      line-height: 40px;
      position: relative;
      font-size: 14px;
      padding: 0 .4rem;
      margin: 0;
    }
    .el-input, .el-textarea{
        padding: 0 .4rem;
    .el-input, .el-textarea {
      padding: 0 .4rem;
    }
}

.wrapper,.partner_info{
    .content_title:first-child{
        margin: 0.99rem 0 0.95rem;
  }
  .wrapper,.partner_info {
    .content_title:first-child {
      margin: 0.99rem 0 0.95rem;
    }
    h2{
        i{
            display: inline-block;
            height: 0.2rem;
            width: 0.03rem;
            background: #00A1E1;
            vertical-align: middle;
            float: left;
            margin-top: 0.04rem;
        }
        span{
            margin-left: 0.06rem;
        }
    h2 {
      i {
        display: inline-block;
        height: 0.2rem;
        width: 0.03rem;
        background: #00A1E1;
        vertical-align: middle;
        // float: left;
        float: none;
        margin-top: 0.04rem;
      }
      span {
        margin-left: 0.06rem;
      }
    }
}
.content:nth-child(3){
  }
  .content:nth-child(3) {
    margin-bottom: 0.82rem;
}
  }
</style>
<style>
    .el-textarea__inner{
    .el-textarea__inner {
        height: 1rem;
    }
    .el-message--error{
    .el-message--error {
        z-index: 9999 !important;
    }
	
    @media (max-width: 750px) and (min-width: 0){
        .el-textarea__inner{
            line-height: 1;
    @media (max-width: 750px) and (min-width: 0) {
        .el-textarea__inner {
      line-height: 1;
        }
        .el-message--error{
        .el-message--error {
            min-width: 2rem;
            padding: 0.2rem;
        }
        .el-input__inner{
        .el-input__inner {
            color: #fff !important;
            background-color: #303940 !important;
        }
        .el-textarea__inner{
        .el-textarea__inner {
            background-color: #303940 !important;
        }
    }
	
</style>

 src/views/productCenter/index.vue

@@ -1,428 +1,414 @@
<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>
        <div class="wrapper scene">
            <div class="content_title"><span>应用场景</span></div>
            <div class="content_scene"> 
                <span :class="h_index == 1 ? 'hover2' : 'scene'" @mouseover="h_index = 1" @mouseout="h_index = 0"><img src="../../img/p1.png" alt=""><span class="txt">供应商协同</span></span>
                <span :class="h_index == 2 ? 'hover2' : 'scene'" @mouseover="h_index = 2" @mouseout="h_index = 0"><img src="../../img/p2.png" alt=""><span class="txt txt2">WMS<br />仓库管理系统</span></span>
                <span :class="h_index == 3 ? 'hover2' : 'scene'" @mouseover="h_index = 3" @mouseout="h_index = 0"><img src="../../img/p3.png" alt=""><span class="txt txt2">QTS<br />质量追溯系统</span></span>
                <span :class="h_index == 4 ? 'hover2' : 'scene'" @mouseover="h_index = 4" @mouseout="h_index = 0"><img src="../../img/p4.png" alt=""><span class="txt">经销商管理</span></span>
                <span :class="h_index == 5 ? 'hover2' : 'scene'" @mouseover="h_index = 5" @mouseout="h_index = 0"><img src="../../img/p5.png" alt=""><span class="txt txt2">MES<br />智能制造</span></span>
                <span :class="h_index == 6 ? 'hover2' : 'scene'" @mouseover="h_index = 6" @mouseout="h_index = 0">
                    <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>
            </div>
        </div>
        <div class="wrapper skill">
            <div class="content_title"><span>核心技术</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>
            </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 class="content_industry_list">
                        <ul>
                            <li>· 供应商协同平台</li>
                            <li>· 物料仓库管理系统</li>
                            <li>· 制造执行系统</li>
                            <li>· 成品仓库管理系统</li>
                            <li>· 质量追溯系统</li>
                            <li>· 经销商管理平台</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="">
                    </div>
                </div>
            </div>
        </div>
        <div class="wrapper join">
            <div class="content_title"><span>加盟代理</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>
            </div>
        </div>
        <div class="wrapper joinBtnBox">
            <router-link to="/partner#4" tag="el-button">申请加入</router-link>
        </div>
  <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>
    <div class="wrapper scene">
      <div class="content_title"><span>应用场景</span></div>
      <div class="content_scene">
        <span :class="h_index == 1 ? 'hover2' : 'scene'" @mouseover="h_index = 1" @mouseout="h_index = 0"><img src="../../img/p1.png" alt=""><span class="txt">供应商协同</span></span>
        <span :class="h_index == 2 ? 'hover2' : 'scene'" @mouseover="h_index = 2" @mouseout="h_index = 0"><img src="../../img/p2.png" alt=""><span class="txt txt2">WMS<br />仓库管理系统</span></span>
        <span :class="h_index == 3 ? 'hover2' : 'scene'" @mouseover="h_index = 3" @mouseout="h_index = 0"><img src="../../img/p3.png" alt=""><span class="txt txt2">QTS<br />质量追溯系统</span></span>
        <span :class="h_index == 4 ? 'hover2' : 'scene'" @mouseover="h_index = 4" @mouseout="h_index = 0"><img src="../../img/p4.png" alt=""><span class="txt">经销商管理</span></span>
        <span :class="h_index == 5 ? 'hover2' : 'scene'" @mouseover="h_index = 5" @mouseout="h_index = 0"><img src="../../img/p5.png" alt=""><span class="txt txt2">MES<br />智能制造</span></span>
        <span :class="h_index == 6 ? 'hover2' : 'scene'" @mouseover="h_index = 6" @mouseout="h_index = 0">
          <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>
      </div>
    </div>
    <div class="wrapper skill">
      <div class="content_title"><span>核心技术</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>
      </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 class="content_industry_list">
            <ul>
              <li>· 供应商协同平台</li>
              <li>· 物料仓库管理系统</li>
              <li>· 制造执行系统</li>
              <li>· 成品仓库管理系统</li>
              <li>· 质量追溯系统</li>
              <li>· 经销商管理平台</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="">
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper join">
      <div class="content_title"><span>加盟代理</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>
      </div>
    </div>
    <div class="wrapper joinBtnBox">
      <router-link to="/partner#4" tag="el-button">申请加入</router-link>
    </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            h_index:0,
    data() {
        return {
            h_index: 0
        }
    }
}
</script>

<style lang="less" scoped>

@media (min-width: 751px){
    .p_hide{
        display: none !important;
    }
    .m_img{
        display: none;
    }
    .platform{
        .content_title{
            margin: 0.1rem 0 0.38rem;
        }
        p{
            font-size: 0.12rem;
            color: #676767;
            line-height: .18rem;
        }
  @media (min-width: 751px){
    .p_hide {
      display: none !important;
    }
    .scene{
        margin: 0 auto;
        position: relative;
		
        .txt{
            position: absolute;
            left: 1.16rem;
            bottom: 0.12rem;
            font-size:20px;
            font-family:MicrosoftYaHei-Bold;
            font-weight:bold;
            color:rgba(255,255,255,1);
        }
        .txt2{
            top:0.19rem;
            left: 0.28rem;
        }
		
        .content_title{
            margin: .53rem 0 0.52rem;
    .m_img {
      display: none;
    }
    .platform {
      .content_title {
        margin: 0.1rem 0 0.38rem;
      }
      p {
        font-size: 0.12rem;
        color: #676767;
        line-height: .18rem;
      }
    }
    .scene {
      margin: 0 auto;
          position: relative;
      .txt {
        position: absolute;
        left: 1.16rem;
        bottom: 0.12rem;
        font-size: 20px;
        font-family: MicrosoftYaHei-Bold;
        font-weight: bold;
        color: rgba(255,255,255,1);
      }
      .txt2 {
        top: 0.19rem;
        left: 0.28rem;
      }
      .content_title {
        margin: .53rem 0 0.52rem;
      }
      .content_scene {
        width: 100%;
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        span {
          display: inline-block;
          margin-bottom: .15rem;
        }
        .content_scene{
            width: 100%;
            height: 100%;
            display: flex;
            flex-wrap: wrap;
			
            span{
                display: inline-block;
                margin-bottom: .15rem;
      }
    }
    .hover2 {
      cursor: pointer;
      transform: scale(1.2);
      z-index: 99999;
    }
    .center .skill {
      .content_title {
        margin: 0.69rem 0 0.63rem;
      }
    }
    .industry {
      .content_title {
        margin: 1.06rem 0 0.69rem;
      }
      .content_industry {
        display: flex;
        .content_industry_card {
          width: 50%;
          background: rgba(244,244,244,1);
          margin-right: 0.33rem;
          padding: 0.19rem 0.22rem 0.35rem;
          position: relative;
          h3 {
            margin-bottom: 0.16rem;
            a {
              font-size: 0.22rem;
              color: #3A3A3C;
              text-decoration: underline;
            }
			
        }
    }

    .hover2{
        cursor: pointer;
        transform: scale(1.2);
        z-index: 99999;
    }
    .center .skill{
        .content_title{
            margin: 0.69rem 0 0.63rem;
        }
    }
    .industry{
        .content_title{
            margin: 1.06rem 0 0.69rem;
        }
        .content_industry{
          }
          p {
            min-height:1rem;
            font-size:0.14rem;
            font-family:MicrosoftYaHei;
            font-weight:400;
            color:rgba(103,103,103,1);
            line-height:0.25rem;
          }
          .content_industry_list {
            display: flex;
            .content_industry_card{
                width: 50%;
                background: rgba(244,244,244,1);
                margin-right: 0.33rem;
                padding: 0.19rem 0.22rem 0.35rem;
                position: relative;
                h3{
                    margin-bottom: 0.16rem;
                    a{
                        font-size: 0.22rem;
                        color: #3A3A3C;
                        text-decoration: underline;
                    }
                }
                p{
                    min-height:1rem;
                    font-size:0.14rem;
                    font-family:MicrosoftYaHei;
                    font-weight:400;
                    color:rgba(103,103,103,1);
                    line-height:0.25rem;
                }
                .content_industry_list{
                    display: flex;
                    margin-top: 0.27rem;
                    ul{
                        margin-right: .4rem;
                        li{
                            font-size: 0.08rem;
                            line-height: 0.25rem;
                        }
                    }
                    img{
                        position: absolute;
                        right: 0.3rem;
                        bottom: 0.3rem;
                    }
                }
            margin-top: 0.27rem;
            ul {
              margin-right: .4rem;
              li {
                font-size: 0.08rem;
                line-height: 0.25rem;
              }
            }
            img {
              position: absolute;
              right: 0.3rem;
              bottom: 0.3rem;
            }
          }
        }
        .content_industry:last-child{
            margin-top: 0.3rem;
        }
      }
      .content_industry:last-child {
        margin-top: 0.3rem;
      }
    }
    .join{
        .content_title{
            margin: 0.85rem 0 0.53rem;
        }
    .join {
      .content_title {
        margin: 0.85rem 0 0.53rem;
      }
    }
    .el-button{
        padding:0.2rem 0.8rem;
        background: #3A3A3C;
        color: #fff;
        font-size: 0.2rem;
        span{
            font-size: 0.3rem;
            color: #fff;
            font-weight: bold;
        }
    .el-button {
      padding:0.2rem 0.8rem;
      background: #3A3A3C;
      color: #fff;
      font-size: 0.2rem;
      span {
        font-size: 0.3rem;
        color: #fff;
        font-weight: bold;
      }
    }
}
.joinBtnBox{
  }
  .joinBtnBox {
    text-align: center;
    margin: 1.08rem auto 1.9rem;
}
.content_agent{
  }
  .content_agent {
    display: flex;
}
.content_skill{
        width: 100%;
        overflow: hidden;
        display: flex;
        .content_skill_item{
            text-align: center;
            flex: 1;
            font-size: .1rem;
            div{
                width: 1.2rem;
                height: 1.2rem;
                display: inline-block;
            }
            p{
                font-size: 0.12rem;
                color:#3A3A3C;
                margin: 0.2rem 0;
                text-align: center;
            }
        }
  }
  .content_skill {
    width: 100%;
    overflow: hidden;
    display: flex;
    .content_skill_item {
      text-align: center;
      flex: 1;
      font-size: .1rem;
      div {
        width: 1.2rem;
        height: 1.2rem;
        display: inline-block;
      }
      p {
        font-size: 0.12rem;
        color:#3A3A3C;
        margin: 0.2rem 0;
        text-align: center;
      }
    }
	
    @media (max-width: 750px) and (min-width: 0){
        .hover2{
  }
    @media (max-width: 750px) and (min-width: 0) {
        .hover2 {
            pointer-events: none;
        }
        .joinBtnBox{
        .joinBtnBox {
            margin: 0.6rem auto 1rem;
        }
        .content_skill .content_skill_item div{
        .content_skill .content_skill_item div {
            width: 0.75rem;
            height: 0.75rem;
        }
        .m_hide{
        .m_hide {
            display: none !important;
        }
        .main, .banner{
        .main, .banner {
            margin-top: 1.14rem;
        }
        .content_scene{
            width: 100%;
            height: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
			
            .scene{
                display: inline-block;
                width: 48%;
                height: 2.48rem;
                margin: 1%;
                position: relative;
                img{
                    width: 100%;
                    height: 2.4rem;
                }
                .p_img{
                    display: none;
                }
                .txt{
                    position: absolute;
                    left: 30%;
                    bottom: 10%;
                    color: #fff;
                }
            }
        }
        .content_title{
            margin: 0.5rem 0 0.38rem;
        }
        .content_industry_card{
            width: 100%;
            height: auto;
            background: #f4f4f4;
            padding: 0.3rem .2rem;
            h3{
                width:1.2rem;
                font-size: .28rem;
                font-family: PingFang-SC-Bold;
                font-weight: bold;
                color:#3A3A3C;
                border-bottom: 1px solid #3A3A3C;
            }
            p{
                margin: .32rem 0;
                color: #676767;
            }
            .content_industry_list{
                width: 100%;
                height: auto;
                display: flex;
                justify-content: space-between;
                font-size: .24rem;
                ul{
                    flex: 1;
                }
                li{
                    width: 100%;
                    color: #676767;
                    margin: .1rem 0 .1rem .2rem;
                }
                img{
                    width: 3.6rem;
                    height: 2rem;
                    margin: auto 0;
                }
            }
        }
        .el-button{
            padding:0.2rem 0.8rem;
            background: #6395ff;
            color: #fff;
            span{
                font-size: 0.3rem;
                color: #fff;
                font-weight: bold;
            }
        }
        .content_title>span::before{
            display: none;
        }
        .content_title>span::after {
            content: '';
            position: absolute;
            top: 102%;
            left: 29%;
            width: 1.1rem;
            height: 2px;
            background: #000000;
        }
        .content_industry div:nth-child(2n){
            background: #ffff;
        }
    .content_scene {
      width: 100%;
      height: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .scene {
        display: inline-block;
        width: 48%;
        height: 2.48rem;
        margin: 1%;
        position: relative;
        img {
          width: 100%;
          height: 2.4rem;
        }
        .p_img {
          display: none;
        }
        .txt {
          position: absolute;
          left: 30%;
          bottom: 10%;
          color: #fff;
        }
      }
    }
    .content_title {
      margin: 0.5rem 0 0.38rem;
    }
    .content_industry_card {
      width: 100%;
      height: auto;
      background: #f4f4f4;
      padding: 0.3rem .2rem;
      h3 {
        width:1.2rem;
        font-size: .28rem;
        font-family: PingFang-SC-Bold;
        font-weight: bold;
        color:#3A3A3C;
        border-bottom: 1px solid #3A3A3C;
      }
      p {
        margin: .32rem 0;
        color: #676767;
      }
      .content_industry_list {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: space-between;
        font-size: .24rem;
        ul {
          flex: 1;
        }
        li {
          width: 100%;
          color: #676767;
          margin: .1rem 0 .1rem .2rem;
        }
        img {
          width: 3.6rem;
          height: 2rem;
          margin: auto 0;
        }
      }
    }
    .el-button {
      padding: 0.2rem 0.8rem;
      background: #6395ff;
      color: #fff;
      span {
        font-size: 0.3rem;
        color: #fff;
        font-weight: bold;
      }
    }
    .content_title > span::before {
      display: none;
    }
    .content_title > span::after {
      content: '';
      position: absolute;
      top: 102%;
      left: 29%;
      width: 1.1rem;
      height: 2px;
      background: #000000;
    }
    .content_industry div:nth-child(2n) {
      background: #ffff;
    }
    }
</style>

 src/views/successCase/caseDetail.vue

@@ -1,129 +1,129 @@
<template>
    <div class="main">
        <div class="banner">
            <img src="../../img/Solutionbanner.png" alt="" class="m_hide">
            <img src="../../img/gongchang.png" alt="" class="p_hide">
        </div>    
        <div class="wrapper caseDetail">
            <div class="content_title"><span>智慧仓储WMS</span></div>
            <div class="content_title_p" style="margin:.4rem auto">
                随着人们生活水平的提高，消费者的需求从单一化、标准化逐渐向个性化、多样化转变，这对传统工业制造的生产物流组织形式带来巨大的冲击。明科积极响应“智能+”战略，通过IoT技术连接生产侧物流各环节的不同类型智能终端和执行单元，在统一的平台调度控制下，完成物理世界人、机、物、料、法、环的协同、优化与控制，从而适应大规模个性化生产模式下对物流组织模式柔性化、智能化、透明化的发展要求。
            </div>
            <div class="content_title_p" style="margin:.1rem auto">		
                明科围绕“降本、增效、提质、创收”的本质需求，整合认证生态链中的优秀伙伴，为工业客户提供涵盖原料收货入库、原料货到人及分拣上线、半成品暂存及转运上线、成品下线入库、成品货到人仓储管理、成品排序出库发运等全场景的智慧生产物流产品、解决方案及服务。
            </div>
            <div class="content-img"><img src="../../img/png2.png" alt=""></div>
            <div class="p_backg">
                <div class="wrapper">
                    <div class="project" style="padding: 0.2rem 0 0.3rem;">
                        <h3><span>方案特点</span></h3>
                        <div class="program">
                            <dl>
                                <dt><img src="../../img/coverage4.png" alt=""></dt>
                                <dd>可配置开发</dd>
                            </dl>
                            <dl>
                                <dt><img src="../../img/f2.png" alt=""></dt>
                                <dd>高效、低成本需求变更</dd>
                            </dl>
                            <dl>
                                <dt><img src="../../img/f3.png" alt=""></dt>
                                <dd>智能连接IoT设备</dd>
                            </dl>
                            <dl>
                                <dt><img src="../../img/f4.png" alt=""></dt>
                                <dd class="m_hide">数字化生态、开放式融合、平台化运营</dd>
                                <dd class="p_hide">数字化生态<br />开放式融合<br />平台化运营</dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>
			
            <div class="wrapper">
                <div class="content-box">
                    <h3><span>应用场景</span></h3>
                    <ul class="scene m_hide">
                        <li>
                            <img src="../../img/y1.png" alt="">
                            <p>原料收货入库</p>
                        </li>
                        <li>
                            <img src="../../img/y2.png" alt="">
                            <p>原料货到人及分拣上线</p>
                        </li>
                        <li>
                            <img src="../../img/y3.png" alt="">
                            <p>半成品暂存及转运上线</p>
                        </li>
                    </ul>
                    <ul class="scene m_hide">
                        <li>
                            <img src="../../img/y4.png" alt="">
                            <p>成品下线入库</p>
                        </li>
                        <li>
                            <img src="../../img/y5.png" alt="">
                            <p>成品货到人仓储管理</p>
                        </li>
                        <li>
                            <img src="../../img/y6.png" alt="">
                            <p>成品排序出库发运</p>
                        </li>
                    </ul>
					
                    <ul class="scene p_hide">
                        <li>
                            <img src="../../img/y1.png" alt="">
                            <p>原料收货入库</p>
                        </li>
                        <li>
                            <img src="../../img/y2.png" alt="">
                            <p>原料货到人及分拣上线</p>
                        </li>
                        <li>
                            <img src="../../img/y3.png" alt="">
                            <p>半成品暂存及转运上线</p>
                        </li>
                        <li>
                            <img src="../../img/y4.png" alt="">
                            <p>成品下线入库</p>
                        </li>
                        <li>
                            <img src="../../img/y5.png" alt="">
                            <p>成品货到人仓储管理</p>
                        </li>
                        <li>
                            <img src="../../img/y6.png" alt="">
                            <p>成品排序出库发运</p>
                        </li>
                    </ul>
                </div>
            </div>
			
            <div class="wrapper" style="margin-bottom: 0.3rem;">
                <div class="content-bottom">
                    <h3 class="h3"><span>合作伙伴</span></h3>
                </div>
            </div>
            <div class="m_hide" style="background-color: #F9FBFD;">
                <div class="wrapper">
                    <div class="content-bottom">
                        <img src="../../img/c11.png" alt="">
                    </div>
                </div>
            </div>
            <div class="three_box p_hide">
                <div><img src="../../img/he1.png" alt=""></div>
                <div><img src="../../img/he2.png" alt=""></div>
                <div><img src="../../img/he3.png" alt=""></div>
            </div>
            <div class="title">
                <a class="m_hide" style="visibility: hidden;">了解更多</a>
                <a class="title-m">查看更多</a>
            </div>
        </div>    
  <div class="main">
    <div class="banner">
      <img src="../../img/Solutionbanner.png" alt="" class="m_hide">
      <img src="../../img/gongchang.png" alt="" class="p_hide">
    </div>
    <div class="wrapper caseDetail">
      <div class="content_title"><span>智慧仓储WMS</span></div>
      <div class="content_title_p" style="margin:.4rem auto">
        随着人们生活水平的提高，消费者的需求从单一化、标准化逐渐向个性化、多样化转变，这对传统工业制造的生产物流组织形式带来巨大的冲击。明科积极响应“智能+”战略，通过IoT技术连接生产侧物流各环节的不同类型智能终端和执行单元，在统一的平台调度控制下，完成物理世界人、机、物、料、法、环的协同、优化与控制，从而适应大规模个性化生产模式下对物流组织模式柔性化、智能化、透明化的发展要求。
      </div>
      <div class="content_title_p" style="margin:.1rem auto">		
        明科围绕“降本、增效、提质、创收”的本质需求，整合认证生态链中的优秀伙伴，为工业客户提供涵盖原料收货入库、原料货到人及分拣上线、半成品暂存及转运上线、成品下线入库、成品货到人仓储管理、成品排序出库发运等全场景的智慧生产物流产品、解决方案及服务。
      </div>
      <div class="content-img"><img src="../../img/png2.png" alt=""></div>
      <div class="p_backg">
        <div class="wrapper">
          <div class="project" style="padding: 0.2rem 0 0.3rem;">
            <h3><span>方案特点</span></h3>
            <div class="program">
              <dl>
                <dt><img src="../../img/coverage4.png" alt=""></dt>
                <dd>可配置开发</dd>
              </dl>
              <dl>
                <dt><img src="../../img/f2.png" alt=""></dt>
                <dd>高效、低成本需求变更</dd>
              </dl>
              <dl>
                <dt><img src="../../img/f3.png" alt=""></dt>
                <dd>智能连接IoT设备</dd>
              </dl>
              <dl>
                <dt><img src="../../img/f4.png" alt=""></dt>
                <dd class="m_hide">数字化生态、开放式融合、平台化运营</dd>
                <dd class="p_hide">数字化生态<br />开放式融合<br />平台化运营</dd>
              </dl>
            </div>
          </div>
        </div>
      </div>
    
    <div class="wrapper">
      <div class="content-box">
        <h3><span>应用场景</span></h3>
        <ul class="scene m_hide">
          <li>
            <img src="../../img/y1.png" alt="">
            <p>原料收货入库</p>
          </li>
          <li>
            <img src="../../img/y2.png" alt="">
            <p>原料货到人及分拣上线</p>
          </li>
          <li>
            <img src="../../img/y3.png" alt="">
            <p>半成品暂存及转运上线</p>
          </li>
        </ul>
        <ul class="scene m_hide">
          <li>
            <img src="../../img/y4.png" alt="">
            <p>成品下线入库</p>
          </li>
          <li>
            <img src="../../img/y5.png" alt="">
            <p>成品货到人仓储管理</p>
          </li>
          <li>
            <img src="../../img/y6.png" alt="">
            <p>成品排序出库发运</p>
          </li>
        </ul>
        
        <ul class="scene p_hide">
          <li>
            <img src="../../img/y1.png" alt="">
            <p>原料收货入库</p>
          </li>
          <li>
            <img src="../../img/y2.png" alt="">
            <p>原料货到人及分拣上线</p>
          </li>
          <li>
            <img src="../../img/y3.png" alt="">
            <p>半成品暂存及转运上线</p>
          </li>
          <li>
            <img src="../../img/y4.png" alt="">
            <p>成品下线入库</p>
          </li>
          <li>
            <img src="../../img/y5.png" alt="">
            <p>成品货到人仓储管理</p>
          </li>
          <li>
            <img src="../../img/y6.png" alt="">
            <p>成品排序出库发运</p>
          </li>
        </ul>
      </div>
          </div>
    
    <div class="wrapper" style="margin-bottom: 0.3rem;">
      <div class="content-bottom">
        <h3 class="h3"><span>合作伙伴</span></h3>
      </div>
    </div>
    <div class="m_hide" style="background-color: #F9FBFD;">
      <div class="wrapper">
        <div class="content-bottom">
          <img src="../../img/c11.png" alt="">
        </div>
      </div>
    </div>
    <div class="three_box p_hide">
      <div><img src="../../img/he1.png" alt=""></div>
      <div><img src="../../img/he2.png" alt=""></div>
      <div><img src="../../img/he3.png" alt=""></div>
    </div>
          <div class="title">
              <a class="m_hide" style="visibility: hidden;">了解更多</a>
              <a class="title-m">查看更多</a>
          </div>
      </div>    
  </div>
</template>

<script>

 src/views/successCase/caseSolution.vue

@@ -136,13 +136,13 @@
</template>
<script>
    export default {
        data(){
            return{
				
        data() {
            return {

            }
        },
        methods:{
            jump(u){
        methods: {
            jump (u) {
                this.$router.push(u)
            }
        }
@@ -151,7 +151,7 @@

<style lang="less" scoped>
    @media (min-width: 751px) {
        .banner_txt{
        .banner_txt {
            font-size: 0.6rem;
            font-family: SourceHanSansCN-Bold;
            font-weight: bold;
@@ -160,31 +160,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;
            line-height: 0.26rem;
        }

        .solution_box-m {
            display: none;
        }

        .content_solution {
            margin-top: 1rem;
        }

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

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

                .title {
                    width: 100%;

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

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

            dt {
                float: right;
            }
        }

        .solution_box_in>h3>span:after {
            content: '';
            position: absolute;
@@ -256,23 +247,23 @@
    }

    @media (max-width: 750px) and (min-width: 0) {
        .m_hide{
        .m_hide {
            display: none;
        }
        .banner{
        .banner {
            margin-top: 1.14rem;
        }
        .m_hide{
        .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;
@@ -296,19 +287,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 +309,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 +357,6 @@
                    .dd-img {
                        width: 70%;
                    }

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

        }

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

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

 src/views/successCase/center.vue

@@ -138,13 +138,13 @@
</template>
<script>
    export default {
        data(){
            return{
        data() {
            return {
                
            }
        },
        methods:{
            jump(u){
        methods: {
            jump (u) {
                this.$router.push(u)
            }
        }
@@ -177,15 +177,12 @@
            color: #676767;
            font-size: .14rem;
        }

        .solution_box-m {
            display: none;
        }

        .content_solution {
            margin-top: 1rem;
        }

        .solution_box {
            float: left;
            padding: .3rem .4rem;
@@ -338,7 +335,6 @@
            }
        }
        
		
        .center {
            padding-top: .6rem;
        }
@@ -400,13 +396,11 @@
                    }
                }
            }

        }

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

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

 src/views/successCase/index.vue

@@ -1,399 +1,384 @@
<template>
    <div class="main">
        <div class="banner">
            <img src="../../img/successBanner.png" alt="" class="m_hide">
            <img src="../../img/an1.png" alt="" class="p_hide">
        </div>
        <div style="background-color: #f9f9f9;" class="m_hide">
            <div class="wrapper">
                <div class="content_title">
                    <span>案例详情</span>
                </div>
                <div class="content">
                    <div class="left_border">仓储物流</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>
                            </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>
                        </div>
                    </div>
                </div>
            </div>
        </div>
		
        <!-- 移动端样式 -->
        <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="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>
            </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>
  <div class="main">
    <div class="banner">
      <img src="../../img/successBanner.png" alt="" class="m_hide">
      <img src="../../img/an1.png" alt="" class="p_hide">
    </div>
    <div style="background-color: #f9f9f9;" class="m_hide">
      <div class="wrapper">
        <div class="content_title">
          <span>案例详情</span>
        </div>
        <div class="content">
          <div class="left_border">仓储物流</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>
              </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>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 移动端样式 -->
    <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="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>
      </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>
  </div>
</template>

<script>
export default {
    data(){
        return{
            isShow1:false,
            isShow2:false,
    data () {
        return {
            isShow1: false,
            isShow2: true
        }
    },
    mounted(){
        document.body.scrollTop = 0
        document.documentElement.scrollTop = 0
    }
    mounted () {
    document.body.scrollTop = 0
    document.documentElement.scrollTop = 0
  }
}
</script>

<style lang="less" scoped>

.content_title{
  .content_title {
    padding: 0.94rem 0 1.03rem;
    p{
        color: #838383;
        font-size: .16rem;
        text-align: center;
        margin-top: .26rem;
    p {
      color: #838383;
      font-size: .16rem;
      text-align: center;
      margin-top: .26rem;
    }
}
h3{
    font-family:MicrosoftYaHei;
    font-weight:400;
  }
  h3 {
    font-family: MicrosoftYaHei;
    font-weight: 400;
    font-size: .3rem;
    color:rgba(58,58,60,1);
    color: rgba(58,58,60,1);
    text-align: left;
    margin:.2rem 4%;
}
.contnt-describe{
    margin: .2rem 4%;
  }
  .contnt-describe {
    width: 100%;
    height: auto;
    margin: 0 auto;
    padding: 0.1rem 0.3rem 0.3rem;
    border: 1px solid gainsboro;
    border: 1px solid gainsboro;
    // background: #f9f9f9;
    p{
        width: 92%;
        margin: 0 auto;
        text-align-last: left;
        font-size: .16rem;
        margin-bottom: .2rem;
    p {
      width: 92%;
      margin: 0 auto;
      text-align-last: left;
      font-size: .16rem;
      margin-bottom: .2rem;
    }
}
.content:nth-child(2){
  }
  .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;
    a {
      color:#3B3B3C;
      padding: 0.06rem 0.2rem;
      display: inline-block;
      font-size: 0.16rem;
      margin: 0.21rem 0.1rem;
    }
}
@media (min-width: 751px) {
    .contnt-describe{
  }
  @media (min-width: 751px) {
    .contnt-describe {
      float: left;
      margin-bottom: .2rem;
      .left {
        float: left;
        margin-bottom: .2rem;

        .left{
            float: left;
            width: 50%;
           
            span{
                display: inline-block;
                padding-top: .3rem;
            }
        width: 50%;
        span {
          display: inline-block;
          padding-top: .3rem;
        }
        .right{
            float: right;
            width: 50%;
        }
      }
      .right {
        float: right;
        width: 50%;
      }
    }
    h3{
        font-size: .3rem;
    h3 {
      font-size: .3rem;
    }
    .contnt-describe {
        .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;
                left: 0.12rem;
                top: 2.65rem;
                width:545px;
                height:67px;
                font-size:16px;
                font-family:MicrosoftYaHei;
                font-weight:400;
                color:rgba(255,255,255,1);
                line-height:25px;
                text-align: left;
            }
            p{
                font-size: .08rem;
                color:#fff;
                position: absolute;;
                bottom: -.1rem;
            }
      .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;
          left: 0.12rem;
          top: 2.65rem;
          width:545px;
          height:67px;
          font-size:16px;
          font-family:MicrosoftYaHei;
          font-weight:400;
          color:rgba(255,255,255,1);
          line-height:25px;
          text-align: left;
        }
        .left{
            float: left;
            
            ul{
                width: 100%;
                display: flex;
                flex-wrap: wrap;
                padding: 0.4rem 0.1rem;
                li{
                    width: 2rem;
                    height: 1rem;
                    padding: .2rem;
                    margin-top: 0.15rem;
                }
            }
        p {
          font-size: .08rem;
          color:#fff;
          position: absolute;;
          bottom: -.1rem;
        }
      }
      .left {
        float: left;
        ul {
          width: 100%;
          display: flex;
          flex-wrap: wrap;
          padding: 0.4rem 0.1rem;
          li {
            width: 2rem;
            height: 1rem;
            padding: .2rem;
            margin-top: 0.15rem;
          }
        }
      }
    }
    .contnt-describe:nth-child(2n){
        .right{
            float: left;
    .contnt-describe:nth-child(2n) {
      .right {
        float: left;
      }
      .left {
        float: right;
        span {
          text-align: right;
          float: right;
        }
        .left{
            float: right;
            span{
                text-align: right;
                float: right;
      }
    }
    .left_border {
      display: inline-block;
      width: 1rem;
      text-align: left;
      position: relative;
      padding-left: .2rem;
      margin-bottom: 0.3rem;
      float: none;
    }
    .left_border::after {
      content: '';
      position: absolute;
      left: 0;
      top: .02rem;
      width: 0.04rem;
      height: 80%;
      background: #0070c0;
    }
  }
  @media (max-width: 750px) and (min-width: 0) {
    .webapp {
      width: 94%;
      margin: 0 auto;
      .content_title3 {
        font-size: 0.16rem;
        color: #3A3A3C;
        padding-left: .06rem;
        margin-top: 0.2rem;
        position: relative;
        span {
          font-size: 0.36rem;
          margin-left: 0.18rem;
          margin-top: 0.02rem;
          display: inline-block;
        }
      }
      .content_title3::after {
        content: '';
        width:0.09rem;
        height:0.45rem;
        background:rgba(0,112,192,1);
        position: absolute;
        top: 0.05rem;
        left: 0;
      }
      .content_title2 {
        font-size: 0.36rem;
        font-family: PingFang-SC-Bold;
        font-weight: bold;
        color: rgba(59,59,60,1);
        padding: 0.55rem 0 0.25rem;
        position: relative;
        text-align: center;
        span {
          border: 0;
        }
      }
      .content_title2:before {
        content: '';
        position: absolute;
        left: 0.9rem;
        top: 0.82rem;
        width: 1.4rem;
        height: 0.02rem;
        background: #999999;
      }
      .content_title2:after {
        content: '';
        position: absolute;
        right: 0.9rem;
        top: 0.82rem;
        width: 1.4rem;
        height: 0.02rem;
        background: #999999;
      }
      .img_box {
        margin: 0.3rem 0.3rem 0.4rem;
      }
      .project {
        background: #f9f9f9;
        box-sizing: border-box;
        margin: .4rem auto;
        padding: .1rem 0;
        .program {
          width: 100%;
          height: auto;
          display: flex;
          padding: .34rem 0;
          dl {
            width: 25%;
            dt {
              width: .94rem;
              height: .94rem;
              margin: 0 auto;
            }
            dd {
              text-align: center;
              padding-top: .07rem;
            }
          }
        }
        .three_box {
          margin: 0.4rem 0.3rem 0;
          display: flex;
          div {
            flex: 1;
            padding-right: 0.3rem;
          }
          div:last-child {
            padding-right: 0;
          }
        }
      }
    }
    .left_border{
        display: inline-block;
        width: 1rem;
        text-align: left;
        position: relative;
        padding-left: .2rem;
        margin-bottom: 0.3rem;
        float: left;
    }
    .left_border::after{
        content: '';
        position: absolute;
        left: 0;
        top: .02rem;
        width: 0.04rem;
        height: 80%;
        background: #0070c0;
    }
}
@media (max-width: 750px) and (min-width: 0){
    .webapp{
        width: 94%;
        margin: 0 auto;
        .content_title3{
            font-size: 0.16rem;
            color: #3A3A3C;
            padding-left: .06rem;
            margin-top: 0.2rem;
            position: relative;
			
            span{
                font-size: 0.36rem;
                margin-left: 0.18rem;
                margin-top: 0.02rem;
                display: inline-block;
            }
        }
        .content_title3::after{
            content: '';
            width:0.09rem;
            height:0.45rem;
            background:rgba(0,112,192,1);
            position: absolute;
            top: 0.05rem;
            left: 0;
        }
		
        .content_title2{
            font-size:0.36rem;
            font-family:PingFang-SC-Bold;
            font-weight:bold;
            color:rgba(59,59,60,1);
            padding: 0.55rem 0 0.25rem;
            position: relative;
            text-align: center;
            span{
                border: 0;
            }
        }
        .content_title2:before {
            content: '';
            position: absolute;
            left: 0.9rem;
            top: 0.82rem;
            width: 1.4rem;
            height: 0.02rem;
            background: #999999;
        }
        .content_title2:after {
            content: '';
            position: absolute;
            right: 0.9rem;
            top: 0.82rem;
            width: 1.4rem;
            height: 0.02rem;
            background: #999999;
        }
		
        .img_box{
            margin: 0.3rem 0.3rem 0.4rem;
        }
		
        .project{
            background: #f9f9f9;
            box-sizing: border-box;
            margin: .4rem auto;
            padding: .1rem 0;
            .program{
                width: 100%;
                height: auto;
                display: flex;
                padding: .34rem 0;
                dl{
                    width: 25%;
                    dt{
                        width: .94rem;
                        height: .94rem;
                        margin: 0 auto;
                    }
                    dd{
                        text-align: center;
                        padding-top: .07rem;
                    }
                }
            }
			
            .three_box{
                margin: 0.4rem 0.3rem 0;
                display: flex;
				
                div{
                    flex: 1;
                    padding-right: 0.3rem;
                }
                div:last-child{
                    padding-right: 0;
                }
            }
        }
    }
	
	
	
    .header{
        padding: 0 2%;
    .header {
      padding: 0 2%;
    }
    .wrapper{
        width: 100%;
    .wrapper {
      width: 100%;
    }
    .content_title > span::after ,.content_title > span::before {
        display: none;
      display: none;
    }
    .content_title{
        text-align: center;
    .content_title {
      text-align: center;
    }
    .content_title >span{
        display: inline-block;
        border-bottom: 1px solid #3B3B3C;
    .content_title > span {
      display: inline-block;
      border-bottom: 1px solid #3B3B3C;
    }
    .contnt-describe{
    .contnt-describe {
      width: 100%;
      .left, .right {
        width: 100%;
        .left, .right{
            width: 100%;
        }
      }
    }
    .contnt-describe img{
        display: inline-block;
        margin: .6rem 1.6rem;
        width: 3.85rem;
        height: 2.38rem;
        border:1px solid #000;
    .contnt-describe img {
      display: inline-block;
      margin: .6rem 1.6rem;
      width: 3.85rem;
      height: 2.38rem;
      border:1px solid #000;
    }
}
  }
</style>

 src/views/successCase/successCase.vue

@@ -1,320 +1,316 @@
<template>
    <div class="main">
        <div class="banner m_hide">
            <img src="../../img/cheng.png" alt="">
            <div class="txt">
                成功案例 | CASE <div class="txt_s">每一个经典案例都是明科与伙伴们的沥心之作</div>
            </div>
        </div>
        <div class="banner p_hide">
            <img src="../../img/anli2.png" alt="">
        </div>
        <div class="wrapper">
            <div class="content_title">
                <span>中石油</span>
                <p>项目实施落地: 北京 <label style="margin:0 0.05rem;">行业: 能源行业</label> 时间: 2012年3月</p>
            </div>
            <div class="content">
                <div class="contnt-describe">
                    <div class="left">
                        <h3>企业背景</h3>
                        <p>中国石油工程建设公司隶属于中国石油天然气集团公司，是集团公司专门从事石油工程设计、制造、施工和工程总承包的专业公司，现已发展成为集团公司在国内外石油工程建设领域最具代表性的公司 。</p>
                        <p>CPECC前身为原石油工业部基建局，1980年经国务院批准成立对外经济合作企业，是中国首批进入国际市场的八大公司之一。1998年经集团公司报经国家经贸委批准，组建为中国石油工程建设（集团）公司，下属中国石油天然气第一、六、七建设公司和华东勘察设计研究院。2000年成为中油国际工程有限责任公司的全资子公司，下属中国石油天然气华东勘察设计研究院。2008年，集团公司将中国石油天然气第一建设公司和华东勘察设计研究院与中国石油工程建设（集团）公司合并重组，组建为中国石油工程建设公司。公司经过内部业务整合，在原第一建设公司和华东设计院的基础上，组建了华东设计、北京设计、第一建设、重工制造、技术服务五个国内专业分公司。</p>
                    </div>
                    <div class="right" style="margin-top: 1rem;">
                        <img src="../../img/china.png" alt="" class="shiyou">
                    </div>
                </div>
            </div>
            <div class="content_title">
                <span>项目情况</span>
            </div>
            <div class="content">
                <div class="contnt-describe">
                    <div class="right" style="margin-top: 0.8rem;padding-right: 0.35rem;">
                        <h3>物资条码管理系统</h3>
                        <p class="m_hide">中国石油工程建设公司在早期实施了SAP系统，当时在乌兹别克斯坦进行开设管道架设项目，许多物料需要从国内采购，通关，再到现场使用，物料众多，并且缺乏管理人员，为物料管理、调配工作带来很大困扰。经过业务调研，中石油决定采用明科的条码管理系统进行物料管理。</p>
                        <p class="p_hide">
                            中国石油工程建设公司在早期实施了SAP系统，当时在乌兹别克斯坦进行开设管道架设项目，许多物料需要从国内采购，通关，再到现场使用，物料众多，并且缺乏管理人员，为物料管理、调配工作带来很大困扰。<br />
                            经过业务调研，中石油决定采用明科的条码管理系统进行物料管理.<br />
                            明科为中石油实施了物资条码管理系统，该系统基于B/S+胖客户端设计，实现了需求部门在线计划报批、供应商协同送货、项目现场收货、领用、库存盘点等功能系统采用了互联网、无线技术、条码技术相结合的方案进行实施，为中石油节省大量人力、物力。
                        </p>
                    </div>
                    <div class="left">
                        <img src="../../img/shiyou.png" alt="" class="left_img">
                        <img src="../../img/s33.png" alt="" class="right_img p_hide">
                    </div>
                </div>
            </div>
            <div class="content m_hide">
                <div class="contnt-describe" style="padding: 0.5rem 0.2rem;">
                    <div class="left">
                        <p style="margin-top:0.7rem">明科为中石油实施了物资条码管理系统，该系统基于B/S+胖客户端设计，实现了需求部门在线计划报批、供应商协同送货、项目现场收货、领用、库存盘点等功能系统采用了互联网、无线技术、条码技术相结合的方案进行实施，为中石油节省大量人力、物力。</p>
                    </div>
                    <div class="right" style="padding-left: 0.6rem;">
                        <img src="../../img/s33.png" alt="">
                    </div>
                </div>
            </div>
            <div class="content_title">
                <span>效果评估</span>
            </div>
            <div class="content content22">
                <div class="contnt-describe" style="padding: 0.5rem 0.3rem 1rem;">
                    <div class="right" style="width: 55%;">
                        <p style="text-align-last: left;margin: 0.5rem 1rem 0 0;">
                            国内条码行业首例境外实施项目<br />
                            完成SAP接口实施，条码扫描收发货数据实时回传<br />
                            实施交叉驳运模块，减少数据采集工作量，提高库房运转效率<br />
                            供应商协同，完成订单确认、备货、条码标识协同<br />
                            同时集成无线实时与批处理方案，满足各种环境需要<br />
                            实行订单库存管理，库存依据订单需求领用，有效合理控制物料需求计划
                        </p>
                    </div>
                    <div class="p_hide" style="height: 0.3rem;"></div>
                    <div class="left" style="width: 45%;">
                        <div class="p_txt">提高工作效率</div>
                        <img src="../../img/s44.png" alt="" class="p_img">
                        <div class="p_txt2">
                            <label>降低管理成本</label>
                            <label style="float: right;">提高企业效益</label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
  <div class="main">
    <div class="banner m_hide">
      <img src="../../img/cheng.png" alt="">
      <div class="txt">
        成功案例 | CASE <div class="txt_s">每一个经典案例都是明科与伙伴们的沥心之作</div>
      </div>
    </div>
    <div class="banner p_hide">
      <img src="../../img/anli2.png" alt="">
    </div>
    <div class="wrapper">
      <div class="content_title">
        <span>中石油</span>
        <p>项目实施落地: 北京 <label style="margin:0 0.05rem;">行业: 能源行业</label> 时间: 2012年3月</p>
      </div>
      <div class="content">
        <div class="contnt-describe">
          <div class="left">
            <h3>企业背景</h3>
            <p>中国石油工程建设公司隶属于中国石油天然气集团公司，是集团公司专门从事石油工程设计、制造、施工和工程总承包的专业公司，现已发展成为集团公司在国内外石油工程建设领域最具代表性的公司 。</p>
            <p>CPECC前身为原石油工业部基建局，1980年经国务院批准成立对外经济合作企业，是中国首批进入国际市场的八大公司之一。1998年经集团公司报经国家经贸委批准，组建为中国石油工程建设（集团）公司，下属中国石油天然气第一、六、七建设公司和华东勘察设计研究院。2000年成为中油国际工程有限责任公司的全资子公司，下属中国石油天然气华东勘察设计研究院。2008年，集团公司将中国石油天然气第一建设公司和华东勘察设计研究院与中国石油工程建设（集团）公司合并重组，组建为中国石油工程建设公司。公司经过内部业务整合，在原第一建设公司和华东设计院的基础上，组建了华东设计、北京设计、第一建设、重工制造、技术服务五个国内专业分公司。</p>
          </div>
          <div class="right" style="margin-top: 1rem;">
            <img src="../../img/china.png" alt="" class="shiyou">
          </div>
        </div>
      </div>
      <div class="content_title">
        <span>项目情况</span>
      </div>
      <div class="content">
        <div class="contnt-describe">
          <div class="right" style="margin-top: 0.8rem;padding-right: 0.35rem;">
            <h3>物资条码管理系统</h3>
            <p class="m_hide">中国石油工程建设公司在早期实施了SAP系统，当时在乌兹别克斯坦进行开设管道架设项目，许多物料需要从国内采购，通关，再到现场使用，物料众多，并且缺乏管理人员，为物料管理、调配工作带来很大困扰。经过业务调研，中石油决定采用明科的条码管理系统进行物料管理。</p>
            <p class="p_hide">
              中国石油工程建设公司在早期实施了SAP系统，当时在乌兹别克斯坦进行开设管道架设项目，许多物料需要从国内采购，通关，再到现场使用，物料众多，并且缺乏管理人员，为物料管理、调配工作带来很大困扰。<br />
              经过业务调研，中石油决定采用明科的条码管理系统进行物料管理.<br />
              明科为中石油实施了物资条码管理系统，该系统基于B/S+胖客户端设计，实现了需求部门在线计划报批、供应商协同送货、项目现场收货、领用、库存盘点等功能系统采用了互联网、无线技术、条码技术相结合的方案进行实施，为中石油节省大量人力、物力。
            </p>
          </div>
          <div class="left">
            <img src="../../img/shiyou.png" alt="" class="left_img">
            <img src="../../img/s33.png" alt="" class="right_img p_hide">
          </div>
        </div>
      </div>
      <div class="content m_hide">
        <div class="contnt-describe" style="padding: 0.5rem 0.2rem;">
          <div class="left">
            <p style="margin-top:0.7rem">明科为中石油实施了物资条码管理系统，该系统基于B/S+胖客户端设计，实现了需求部门在线计划报批、供应商协同送货、项目现场收货、领用、库存盘点等功能系统采用了互联网、无线技术、条码技术相结合的方案进行实施，为中石油节省大量人力、物力。</p>
          </div>
          <div class="right" style="padding-left: 0.6rem;">
            <img src="../../img/s33.png" alt="">
          </div>
        </div>
      </div>
      <div class="content_title">
        <span>效果评估</span>
      </div>
      <div class="content content22">
        <div class="contnt-describe" style="padding: 0.5rem 0.3rem 1rem;">
          <div class="right" style="width: 55%;">
            <p style="text-align-last: left;margin: 0.5rem 1rem 0 0;">
              国内条码行业首例境外实施项目<br />
              完成SAP接口实施，条码扫描收发货数据实时回传<br />
              实施交叉驳运模块，减少数据采集工作量，提高库房运转效率<br />
              供应商协同，完成订单确认、备货、条码标识协同<br />
              同时集成无线实时与批处理方案，满足各种环境需要<br />
              实行订单库存管理，库存依据订单需求领用，有效合理控制物料需求计划
            </p>
          </div>
          <div class="p_hide" style="height: 0.3rem;"></div>
          <div class="left" style="width: 45%;">
            <div class="p_txt">提高工作效率</div>
            <img src="../../img/s44.png" alt="" class="p_img">
            <div class="p_txt2">
              <label>降低管理成本</label>
              <label style="float: right;">提高企业效益</label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
  data () {
    return {

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

<style lang="less" scoped>

.content_title{
  .content_title {
    margin: 0.6rem 0 0.5rem;
    p{
        color: #838383;
        font-size: .16rem;
        text-align: center;
        margin-top: .26rem;
    p {
      color: #838383;
      font-size: .16rem;
      text-align: center;
      margin-top: .26rem;
    }
}
h3{
  }
  h3 {
    font-family:MicrosoftYaHei;
    font-weight:400;
    font-size: .3rem;
    color:rgba(58,58,60,1);
    text-align: left;
    margin:.2rem 4%;
}
.contnt-describe{
  }
  .contnt-describe {
    width: 100%;
    height: auto;
    margin: 0 auto;
    padding: .3rem 0;
    background: #f9f9f9;
    p{
        text-align: left;
        font-size: .16rem;
        line-height: 0.25rem;
        margin-bottom: .2rem;
        margin-left: 0.25rem;
    p {
      text-align: left;
      font-size: .16rem;
      line-height: 0.25rem;
      margin-bottom: .2rem;
      margin-left: 0.25rem;
    }
}
.content:nth-child(2){
  }
  .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;
    a {
      color:#3B3B3C;
      padding: 0.06rem 0.2rem;
      display: inline-block;
      font-size: 0.16rem;
      margin: 0.21rem 0.1rem;
    }
}
.case_list > li{
  }
  .case_list > li {
    width: 19%;
    float: left;
    float: none;
    text-align: center;
    margin: 0.48rem 3% 0;
    display: inline-block;
    border:1px solid #C0C0C0;
    span{
        display: inline-block;
        background: rgba(0,0,0,1);
        opacity: 0.56;
        width: 100%;
        padding: 0.12rem 0;
        color: #fff;
    span {
      display: inline-block;
      background: rgba(0,0,0,1);
      opacity: 0.56;
      width: 100%;
      padding: 0.12rem 0;
      color: #fff;
    }

}
.content:nth-child(3){
  }
  .content:nth-child(3) {
    margin:0.72rem 0 2.88rem;
}
@media (min-width: 751px) {
    .content22{
        margin-bottom: 0.5rem;
    }
    .p_txt{
        margin-left: 1.55rem;
        font-size: 0.2rem;
    }
    .p_txt2{
        width: 3rem;
        margin:0.1rem 0 0 0.7rem;
        font-size: 0.2rem;
		
        label{
            float: left;
        }
    }
    .p_img{
        margin-left: 1rem;
    }
    .banner{
        position: relative;
        .txt{
            position: absolute;
            left: 33%;
            top: 35%;
            text-align: center;
            line-height: 0.8rem;
            font-size:0.7rem;
            font-family:SourceHanSansCN-Bold;
            font-weight:bold;
            color: #fff;
            .txt_s{
                font-size: 0.3rem;
                font-weight: 400;
            }
        }
    }
	
    .contnt-describe{
  }
  @media (min-width: 751px) {
    .content22 {
      margin-bottom: 0.5rem;
    }
    .p_txt {
      margin-left: 1.55rem;
      font-size: 0.2rem;
    }
    .p_txt2 {
      width: 3rem;
      margin:0.1rem 0 0 0.7rem;
      font-size: 0.2rem;

      label {
        float: left;
        padding: .1rem .2rem 0.3rem;
        margin-bottom: .2rem;
        .left{
            float: left;
            width: 50%;
           
            span{
                display: inline-block;
                padding-top: .3rem;
            }
      }
    }
    .p_img {
      margin-left: 1rem;
    }
    .banner {
      position: relative;
      .txt {
        position: absolute;
        left: 33%;
        top: 35%;
        text-align: center;
        line-height: 0.8rem;
        font-size: 0.7rem;
        font-family: SourceHanSansCN-Bold;
        font-weight: bold;
        color: #fff;
        .txt_s {
          font-size: 0.3rem;
          font-weight: 400;
        }
        .right{
            float: right;
            width: 50%;
      }
    }
    .contnt-describe {
      float: left;
      padding: .1rem .2rem 0.3rem;
      margin-bottom: .2rem;
      .left {
        float: left;
        width: 50%;

        span {
          display: inline-block;
          padding-top: .3rem;
        }
      }
      .right {
        float: right;
        width: 50%;
      }
    }
    .content_title{
        text-align: center;
        span{
            display: inline-block;
            border-bottom: 0.02rem solid;
        }
    }
    .content_title>span::after {
        display: none;
    }
    .content_title>span::before{
        display: none;
    }
    h3{
        font-size: .3rem;
    }
    .contnt-describe img{
    .content_title {
      text-align: center;
      span {
        display: inline-block;
        margin-top: 0.1rem;
        border-bottom: 0.02rem solid;
      }
    }
}
@media (max-width: 750px) and (min-width: 0){
    .shiyou{
        width: 4.6rem;
    }
    .p_txt2{
        width: 4rem;
        margin: 0 auto;
        padding-bottom: 0.4rem;
		
        label{
            float: left;
        }
    }
    .left_img{
        width: 3rem;
        height: 2.1rem;
        margin-top: 0.4rem;
    }
    .right_img{
        width: 3.6rem;
        height: 2.1rem;
        float: right;
        margin-top: 0.4rem;
    }
    h3{
        font-size:0.38rem;
        font-family:PingFang-SC-Medium;
        font-weight:500;
        color:rgba(58,58,60,1);
        margin: 0.2rem 0;
    }
    .contnt-describe{
        padding: 0.3rem 0.32rem 0.8rem;
        p{
            font-size:0.24rem;
            font-family:PingFang-SC-Regular;
            font-weight:400;
            color:rgba(62,62,62,1);
            line-height:0.44rem;
        }
        .right{
            padding-right: 0 !important;
            margin-top: 0.3rem !important;
        }
    }
    .header{
        padding: 0 2%;
    .content_title > span::after {
          display: none;
    }
    .wrapper{
        width: 100%;
    .content_title > span::before {
      display: none;
    }
    h3 {
      font-size: .3rem;
    }
    .contnt-describe img {
      display: inline-block;
      margin-top: 0.1rem;
    }
  }
  @media (max-width: 750px) and (min-width: 0) {
    .shiyou {
      width: 4.6rem;
    }
    .p_txt2 {
      width: 4rem;
      margin: 0 auto;
      padding-bottom: 0.4rem;

      label {
        float: left;
      }
    }
    .left_img {
      width: 3rem;
      height: 2.1rem;
      margin-top: 0.4rem;
    }
    .right_img {
      width: 3.6rem;
      height: 2.1rem;
      float: right;
      margin-top: 0.4rem;
    }
    h3 {
      font-size:0.38rem;
      font-family:PingFang-SC-Medium;
      font-weight:500;
      color:rgba(58,58,60,1);
      margin: 0.2rem 0;
    }
    .contnt-describe {
      padding: 0.3rem 0.32rem 0.8rem;
      p {
        font-size: 0.24rem;
        font-family: PingFang-SC-Regular;
        font-weight: 400;
        color: rgba(62,62,62,1);
        line-height: 0.44rem;
      }
      .right {
        padding-right: 0 !important;
        margin-top: 0.3rem !important;
      }
    }
    .header {
      padding: 0 2%;
    }
    .wrapper {
      width: 100%;
    }
    .content_title > span::after ,.content_title > span::before {
        display: none;
      display: none;
    }
    .content_title{
        text-align: center;
    .content_title {
      text-align: center;
    }
    .content_title >span{
        display: inline-block;
        border-bottom: 1px solid #3B3B3C;
    .content_title > span {
      display: inline-block;
      border-bottom: 1px solid #3B3B3C;
    }
    .contnt-describe{
        width: 100%;
        .left, .right{
            width: 100% !important;
        }
    .contnt-describe {
      width: 100%;
      .left, .right {
        width: 100% !important;
      }
    }
	
    .left{
        text-align: center;
        .p_img{
            width: 2.36rem;
            margin: 0.2rem 0;
        }
    }
}
    .left {
      text-align: center;
      .p_img {
        width: 2.36rem;
        margin: 0.2rem 0;
      }
    }
  }
</style>