精华内容
下载资源
问答
  • vue jq实现鼠标拖动

    2018-12-18 14:58:30
    console.log("进入") var abs_change = Math.abs(change_x) var new_change = before_change + abs_change $box.css({left: String(new_change) + 'px'}) } } } } if(Number(mar_left.slice(0,-2)) (width ...
    <template>
        <div class="icontent">
            <div class="my-gaofen-tab-content">
            <div class="my-gaofen-tab">
                <ul id="pic">
                    <li @click="itabclick($event)" myAttr="2014">
                        2014年精彩回顾
                    </li>
                    <li @click="itabclick($event)" myAttr="2015">
                        2015年精彩回顾
                    </li>
                    <li @click="itabclick($event)" myAttr="2016">
                        2016年精彩回顾
                    </li>
                    <li @click="itabclick($event)" myAttr="2017">
                        2017年精彩回顾
                    </li>
                    <li @click="itabclick($event)" myAttr="2018">
                        2018年精彩回顾
                    </li>
                    <li @click="itabclick($event)" myAttr="2018">
                        2019年精彩回顾
                    </li>
                    <li @click="itabclick($event)" myAttr="2018">
                        2020年精彩回顾
                    </li>
                </ul>
            </div>
            </div>
        </div>
    </template>
    
    <script>
        import $ from 'jquery'
        $(function () {
            var $box = $("#pic")
            $box.mousedown(function (event) {
                //获取鼠标按下的时候左侧偏移量和上侧偏移量
                var old_left = $(this).offset().left;//距离页面左边的距离
                var old_top = $(this).offset().top;//距离页面顶边的距离
                // console.log(old_left,old_top)
    
                //获取鼠标的位置
                var old_position_left = event.originalEvent.x;
                var old_position_top = event.originalEvent.y;
                console.log("初始位置:",old_position_left,old_position_top)
                var width =  document.getElementById("pic").scrollWidth
                var f_w = $('.my-gaofen-tab').width()
                console.log('ul宽度:',width)
                console.log('div宽度:',f_w)
                console.log('ul与div差距:',width - f_w)
                var before_change = Number($box.css("left").slice(0,-2))
                console.log('改变之前:',before_change)
                $box.mousemove(function (event) {
                    var new_position_left = event.originalEvent.x;
                    var new_position_top = event.originalEvent.y;
                    var change_x = old_position_left - new_position_left
                    console.log('鼠标移动变化值:',change_x)
                    var mar_left =  $box.css("left")
                    if(Number(mar_left.slice(0,-2)) <= 0 && Number(mar_left.slice(0,-2)) >= -(width - f_w)) {
                        if(change_x >= 0) {
                            console.log(Number($box.css("left").slice(0,-2)))
                            if(before_change < 0) {
                                var need_change = before_change - change_x
                                console.log("xx:",need_change)
                                $box.css({left: String(need_change) + 'px'})
                            } else {
                                $box.css({left: '-' + String(change_x) + 'px'})
                            }
                        }else if(change_x < 0){
                            console.log(before_change)
                            if(before_change < 0) {
                                if(Number(mar_left.slice(0,-2)) < 0) {
                                    console.log("进入")
                                    var abs_change = Math.abs(change_x)
                                    var new_change = before_change + abs_change
                                    $box.css({left: String(new_change) + 'px'})
                                }
                            }
                        }
                    }
                    if(Number(mar_left.slice(0,-2)) < -(width - f_w)) {
                        if(change_x < 0){
                            console.log(before_change)
                            if(before_change < 0) {
                                if(Number(mar_left.slice(0,-2)) < 0) {
                                    console.log("进入")
                                    var abs_change = Math.abs(change_x)
                                    var new_change = before_change + abs_change
                                    $box.css({left: String(new_change) + 'px'})
                                }
                            }
                        }
                    }
                    if(Number(mar_left.slice(0,-2)) > 0){
                        if(change_x >= 0) {
                            console.log(Number($box.css("left").slice(0,-2)))
                            if(before_change < 0) {
                                var need_change = before_change - change_x
                                console.log("xx:",need_change)
                                $box.css({left: String(need_change) + 'px'})
                            } else {
                                $box.css({left: '-' + String(change_x) + 'px'})
                            }
                        }
                    }
                })
                $(document).mouseup(function(){
                    $box.off("mousemove");
                })
            })
    
        });
        export default {
            name: "forum",
            data () {
                return {
                    msg: 'forum'
                }
            },
            methods: {
                itabclick(e) {
                    var eventdom = e.target
                    var all_div = eventdom.parentElement.children
                    var all_len = $(all_div).length
                    this.dongtai_title = $(eventdom).text()
                    for(var i=0;i<all_len;i++){
                        $(all_div[i]).removeClass('my-xuanzhong')
                    }
                    $(eventdom).addClass('my-xuanzhong')
                },
            },
            created: function() {
            }
        }
    </script>
    
    <style scoped>
        .icontent{
            overflow: hidden;
            width: 100%;
        }
        .my-gaofen-tab-content{
            margin: 50px 0 0 0;
            height: 60px;
            background:rgba(9,65,167,1);
            width: 100%;
        }
        .my-gaofen-tab{
            margin: 34px calc(50% - 550px) auto calc(50% - 550px);
            width: 1100px;
            height: 60px;
            -webkit-user-select:none;
            -moz-user-select:none;
            -ms-user-select:none;
            user-select:none;
            overflow: hidden;
            position: relative;
            background:rgba(9,65,167,1);
        }
        .my-gaofen-tab ul{
            width: auto;
            list-style: none;
            padding: 0;
            margin: 0;
            overflow: hidden;
            white-space: nowrap;
            position: absolute;
            left: 0;
            top: 0;
            /* overflow-x: scroll; */
            /* display: inline-block; */
        }
        .my-gaofen-tab ul::-webkit-scrollbar {
            display: none;
        }
        .my-gaofen-tab ul li:hover{
            cursor: pointer;
        }
        .my-gaofen-tab ul li{
            width:204px;
            text-align: center;
            display: inline-block;
            height: 60px;
            padding: 0 6px 0 6px;
            text-align: center;
            color: #AAAAAA;
            line-height: 60px;
            font-size:18px;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color: white;
        }
        .my-xuanzhong{
            color:rgba(9,65,167,1) !important;
            background:rgba(255,204,102,1);
        }
    </style>
    
    展开全文
  • web端 主要用的框架现阶段是区分于微信 pad端的,主要用了vue + element的基础框架,微信端,pad端用了jq+mui的基础框架,基于两个不同类型的项目,前端页面性能优化总结了几个方面: 1.webpack打包优化(vue)。 2...

    项目分析web

    web端 主要用的框架现阶段是区分于微信 pad端的,主要用了vue + element的基础框架,微信端,pad端用了jq+mui的基础框架,基于两个不同类型的项目,前端页面性能优化总结了几个方面:

    1.webpack打包优化(vue)。
    2.组件细化,动态加载(vue)。
    3.无阻塞:css文件在头部引入,js在也页面尾部,防止页面阻塞(jq)
    4.压缩HTML、CSS、JS(jq)。
    5.减少http请求。
    6.图片的优化。
    7.优化代码的质量。
    8.cdn引入。
    9.利用浏览器的indexedDb缓存。
    10.加入一些等待转圈的动画,优化用户的体验。

    1.webpack打包优化(vue)。

    1)路由懒加载。
    2)css文件过大处理 :build=>webpack.prod.conf.js=>allChunks: false,
    3) css浏览器无映射 .map 打包去掉 config=>index.js=>build productionSourceMap:false
    4) vue webpack 单页面 加载慢 gzip 访问(大大的提高了加载速度 )
    5) 插件的按需加载减少vonder.js的体积。
    6) cdn 加载, 要做处理防止资源奔溃,在服务器上也放一个插件包
    第一:cdn引入,script需要放在头部,不然会报错,注意顺序,每个script后跟着一个script防止cdn不稳定,引入自己服务器上得对应得插件。在这里插入图片描述
    第二:webpack.base.conf.js中配置以下信息,前面是插件名,后面是全局得使用名,然后直接使用即可,无需import在这里插入图片描述

    2组件细化,动态加载(vue)。

    有点类似于路由懒加载。在一些页面用require代替import
    在这里插入图片描述

    3.无阻塞:css文件在头部引入,js在也页面尾部,防止页面阻塞(jq)

    浏览器的渲染机制:
    1)解析HTML,生成DOM树(DOM)
    2)解析CSS,生成CSSOM树(CSSOM)
    3)将DOM和CSSOM合并,生成渲染树(Render-Tree) Script标签的处理
    4)计算渲染树的布局(Layout)
    5)将布局渲染到屏幕上(Paint)

    css阻塞:DOM树和CSSOM树是完全独立的。css放在底部,只能html加载完才能加载,渲染树是要等DOM树和CSSOM树加载完才能合成。这就是所谓的css阻塞,应放头部一起加载。

    js阻塞:浏览器在解析HTML时,一旦碰到script,就会立即停止HTML的解析(而CSS不会)

    4.压缩HTML、CSS、JS(jq)。

    vue端webpack自动打包压缩的。jq找一个代码打包工具打包下再上传

    5.减少http请求。

    其中大约80%的时间都耗在了http请求上,所以要想大幅度优化页面,必须从http请求上入手

    1)减少请求,把一些公共的信息一次请求到位存放在浏览器缓存。
    2)图片的请求下一页讲

    6.图片的优化

    图片的优化方案:
    1)大型图片在保存不失真的情况下尽量压缩他的大小
    2)小型图标尽量用字体代替(参考Iconfont-阿里巴巴矢量图标库) 或者是 SVG
    3) 利用css sprites 雪碧图技术,减少http请求 (合成雪碧图,网上有挺多的工具的,问题:背景定位比较麻烦)
    优点:减少加载网页图片时对服务器的请求次数;提高页面的加载速度
    缺点:维护比较麻烦,当前项目图标比较少的时候没必要用(个人感觉适用于移动端 vue项目,雪碧 图从进入就加载,不刷新的情况下还是比较能提高速度的。不过相比较vue打包后小图片转base64展示,提高效果不大)
    4)vue项目可以控制图片大小多少以内转base64
    5)很多图片的时候可以实行图片懒加载(我们项目中暂时没那么多图片用不到)
    6)图片合理加载,尽量一次加载一次大的图片
    7)图片压缩https://compresspng.com/zh/

    7.优化代码的质量

    代码质量比较重要,后期也比较利于维护
    1)多用es6的语言,精简代码。
    2)多用一些js的原生方法,例如map(), filter(),forEach()等 尽量少用for循环。
    3) 多封装一些复用的组件,代码,方法。
    4)用mvc框架 区分视图层,控制层,数据层,复用接口。
    5)多人开发时需要多交流沟通,分配工作,由一个人去写一些公共的样式,组件。

    8.利用浏览器的indexedDb缓存

    浏览器本地数据库。
    将页面渲染的一些信息放在浏览器本地数据库中直接往里面取,提升页面的加载速度以及优化了用户体验。

    9.加入一些等待转圈的动画,优化用户的体验。

    考虑到一些页面的数据请求会比较慢,
    1)后台简化逻辑,加快接口的请求速度。
    2)优化用户体验,加一个等待框。

    展开全文
  • 概要: jsp代表了传统的...最后写当项目中遇到jqvue 共同使用时候的解决方法。 一.对比目录结构 1.jsp jsp传统页面目录结构 2.vue 目录结构 2.复用代码的对比 2.1 jsp复用 <%@include file="/WEB-INF/include-he

    概要: jsp代表了传统的开发服务模式,让数据在服务端渲染完毕发送给浏览器。Vue代表着现代化的前端开发模式。对比两者的不同可以更好的理解web前端开发。本文开始将从目录结构,代码复用,路由,增删改查等方面进行对比。然后简单的了解下Nuxt(服务端渲染)。最后写当项目中遇到jq和vue 共同使用时候的解决方法。

    一.对比目录结构

    1.jsp

    jsp
    jsp传统页面目录结构

    2.vue 目录结构

    在这里插入图片描述

    2.复用代码的对比

    2.1 jsp复用

    <%@include file="/WEB-INF/include-head.jsp" %>
    <%@include file="/WEB-INF/modal-menu-add.jsp"%>
    <%@include file="/WEB-INF/modal-menu-edit.jsp"%>
    <%@include file="/WEB-INF/modal-menu-confirm.jsp"%>
    

    将公共的头尾抽取出来公共的部分,然后使用include标签嵌入

    2.2 vue组件复用

    vue通过封装components嵌入页面直接使用
    比如下方分页组件的应用

    <template>
      <a-pagination v-model="current" :total="50" show-less-items />
    </template>
    <script>
    export default {
      data() {
        return {
          current: 2,
        };
      },
    };
    </script>
    

    3.路由的对比

    3.1 jsp

    1.js实现

     <script type="text/javascript">
                function next(){
                    window.location = "page2.jsp";
                }
     </script>
    

    2.jsp自带的forword标签来实现跳转

      <jsp:forward page="page2.jsp" />
    

    3.重定向

     response.sendRedirect("page2.jsp"); 
    

    3.2vue路由

    const mainRoutes = {
      path: '/',
      component: _import('main'),
      name: 'main',
      redirect: { name: 'home' },
      meta: { title: '主入口整体布局' },
      children: [
        { path: '/home', component: _import('common/home'), name: 'home', meta: { title: '首页' } },
        { path: '/theme', component: _import('common/theme'), name: 'theme', meta: { title: '主题' } },
        { path: '/demo-echarts', component: _import('demo/echarts'), name: 'demo-echarts', meta: { title: 'demo-echarts', isTab: true } },
        { path: '/demo-ueditor', component: _import('demo/ueditor'), name: 'demo-ueditor', meta: { title: 'demo-ueditor', isTab: true } },
        { path: '/product-attrupdate', component: _import('modules/product/attrupdate'), name: 'attr-update', meta: { title: '规格维护', isTab: true } }
      ],
    }
    

    通过路由的方式来实现页面的跳转。

    4.编辑页面 回显出现的差异

    4.1 vue解决回显问题

    通常的解决方案是在管理界面写上调出所有数据的data,进入增删改查子组件后,在需要回显的地方emit调用父组件的方法取值;

     // 父组件的处理回显的函数
       async getSelectTeam() {
       	  //父组件获取数据,写入方法,供子组件调用
          await this.getData();
        },
    
    
    
       <!-- 编辑 进入时候将值放入editItem 然后可以获得初始值,在提交的时候防止后续的bug
       		使用父子组件传值的方式 -->
          <activity-edit
            :editItem="editItem"
            :editVisible="editVisible"
            @closeModal="closeModal"
            @getDetail="getDetail"
            @getSelectTeam="getSelectTeam"
          />
    
    // 再提交的时候调用父组件方法解决回显问题
    handleSubmit(e) {
          e.preventDefault();
          this.form.validateFieldsAndScroll(async (err, values) => {
            if (!err) {
              try {
                if (!this.verificationTime()) return;
                const params = { param: values };
                const res = await update(params);
                const { data, msg, code } = res.data;
                if (code === 200) {
                  this.$message.success('修改成功');
                  this.$emit('getSelectTeam');
                } else {
                  throw msg;
                }
                this.$emit('closeModal');
              } catch (error) {
                this.$emit('closeModal');
                this.$message.error(error || '修改失败');
              }
            }
          });
    

    4.2 jsp编辑页面的回显

    点击修改按钮后提交获取到的数据然后重新生成树状结构;

     		// 修改的模态框”修改按钮“的单击事件
            $("#menuEditBtn").click(function () {
                var name = $.trim($("#menuEditModal [name=name]").val());
                var url = $.trim($("#menuEditModal [name=url]").val());
                var icon = $("#menuEditModal [name=icon]:checked").val();
                $.ajax({
                    url:"menu/edit.json",
                    type:"post",
                    "data":{
                        "id":window.id,
                        "name":name,
                        "url":url,
                        "icon":icon
                    },
                    dataType:"json",
                    success:function (response) {
                        if(response.result == "SUCCESS"){
                            layer.msg("操作成功!");
                            // 重新生成树形结构
                            generateTree();
                        }
                        if (response.result == "FAILED"){
                            layer.msg("操作失败!");
                        }
                    },
                    error:function (response) {
                        layer.msg(response.status + " " + response.statusText);
                    }
    
                });
    
    

    向后台重新生成数据后返回;

    // 封装生成树形结构的代码
    function generateTree(){
        $.ajax({
            url:"menu/do/get.json",
            type:"post",
            dataType:"json",
            success:function (response) {
                if (response.result == "SUCCESS"){
                    var setting = {
                        view:{
                            "addDiyDom":myAddDiyDom,
                            "addHoverDom":myAddHoverDom,
                            "removeHoverDom":myRemoveHoverDom
                        },
                        data:{
                            key:{     
                                url: "NotExist"
                            }
                        }
                    };
                    var zNodes = response.data;
                    $.fn.zTree.init($("#treeDemo"), setting, zNodes);
                }
                if (response.result == "FAILED")
                    layer.msg("操作失败"+response.message)
            },
            error:function (response) {
                layer.msg("statusCode="+response.status + " message="+response.statusText);
            }
        });
    

    其他小方面的对比: jq的数据获取方面使用dom的方式来获取数据,而vue使用虚拟dom 来绑定数据,jq面对动态生成的时候使用拼接html字符串的形式改变页面,vue 虚拟dom完成拼接入新的代码片段。

    5.Nuxt 页面的处理方案

    nuxt是nodejs的一个框架。在服务端做技术的渲染,将数据一次性返回给浏览器。
    使用服务端渲染还需要对node有一定的了解,通常情况下使用用Express执行Nuxt,使用服务端渲染主要使用Vue 后的两大问题:

    1、seo问题,有利于搜索引擎蜘蛛抓取网站内容。

    2、首屏加载过慢问题,打开首页需要加载很多资源,通过服务端渲染可以加速首屏渲染。

    同样服务端渲染也会有弊端,主要是根据自己的业务场景来选择适合方式,由于服务端渲染前端页面,必将会给服务器增加压力。
    vue后端渲染主要插件:vue-server-renderer

    // nuxt
    const {
      Nuxt,
      Builder
    } = require('nuxt') // 引入核心构建属性
     
    // 判断开发环境
    const isProd = (process.env.NODE_ENV === 'production')
    const port = process.env.PORT || 80
     
    // 引入nuxt配置
    const config = require('./nuxt.config.js')
    config.dev = !isProd;
    const nuxt = new Nuxt(config);
     
    // 判断生产模式 dev(开发者模式)表示重新构建 ;pro(生产模式)表示直接从yanr build的文件直接执行
    if (config.dev) {
      new Builder(nuxt).build()
        .then(listen)
        .catch((error) => {
          console.error(error)
          process.exit(1)
        })
    } else {
      listen()
    }复制代码
    

    参考博文:https://blog.csdn.net/weixin_33720956/article/details/87959135

    6.jq 与vue共同使用

    项目有有可能会出现jq 和vue都需要使用的情况。具体的结合思路是 Vue 渲染完所有的 HTML组件之后再通过 JQuery 处理,而使用 JQuery 时应避免直接操作 DOM ,但是应用动画是允许的。

    6.1 mounted 情况

    //**注意** mounted 不会保证所有的子组件也都一起被挂载。
    //如果你希望等到整个视图都渲染完毕,可以在 mounted 内部使用 vm.$nextTick:
    mounted: function () {
      this.$nextTick(function () {
        //JQ
      })
    }
    

    6.2 载入页面的情况下:

    $(document).ready(function () {
        //先执行vue
        var app = new Vue({
            el: '#app',
            data: {
            hello: 'Hello Vue',
        }
      $(function () {})
        //再jQ
    }) 
    

    第六部分参考博文:https://www.jianshu.com/p/ddab3ac9ab25

    展开全文
  • vue-$nextTick及安装jq

    2019-03-08 10:49:21
    一个页面中页面元素有图片、文字、外部文件链接,这些加载时候都会占据时间,js在做操作...这里使用了jq 操作dom 楼层滚动定位,添加一点安装步骤 1、npm install jquery --save-dev 2、build.js 中 webpack.base....

    一个页面中页面元素有图片、文字、外部文件链接,这些加载时候都会占据时间,js在做操作时,需要等所有元素都加载完进行操作,这个问题做项目时没有考虑到,导致在做dom操作时,获取页面高度,查找了很长时间的问题才解决。

    这里使用了jq 操作dom 楼层滚动定位,添加一点安装步骤

    1、npm install jquery --save-dev

    2、build.js 中 webpack.base.dev.js 添加 var webpack = require('webpack');

    module.exports中添加新对象配置

    plugins: [

    new webpack.ProvidePlugin({

    $: "jquery",

    jQuery: "jquery"

    })

    ]

    3、mian.js 中   引入 import $ from 'jquery'

     

    <template>
        <div class="page-container">
            <div class="box-row top-tit">
                <template v-for="(item,index) in tabBarTit">
                    <div :key="index" class="tit-to" :class='{active: thisActive == index}' @click='tabBarActive(index)'>{{item.tex}}</div>
                </template>
            </div>
            <div class="floor">
                <div class="banner">
                    <img class="" src='../../assets/image/aboutus/banner.png' />
                </div>
                <div class="who conten-tit ">
    
                    <div class="h1">
    
                        我们是谁
                    </div>
                    <div class="h2">
                        WHO
                    </div>
                    <div class="intro">
                        <div>
                            贝登医械购是南京贝登医疗股份有限公司针对诊所客户量身定制的一站式耗材和设备采购平台。通过精选300多个国内外知名医疗器械品牌,进行年度签约、产品直采和集中备货,医械购为全国中小诊所、门诊客户提供专业、高效、低成本的一站式耗材产品采购服务。</div>
                        <div id="id1"></div>
                    </div>
                </div>
            </div>
    
            <div class="conten-tit floor our-advantage-box">
                <div class="h1">
                    我们的优势
                </div>
                <div class="h2">
                    ADVANTAGE
                </div>
                <div class="intro our-advtage">
                    <template v-for="(item,index) in advatages">
                        <div class="content" :key="index">
                            <div class="why-download-img">
                                <img class="" :src="item.url" />
                            </div>
                            <div class="why-download-text box-col">
                                <div class="why-tip">{{item.tip}}</div>
                                <div class="why-download-tit">{{item.title}}</div>
                                <div class="why-download-cont" decode='true'>{{item.content1}}</div>
                                <div class="why-download-cont" decode='true'>{{item.content2}}</div>
                            </div>
                        </div>
                    </template>
    
                </div>
                <div id="id2"></div>
            </div>
            <!--我们的文化-->
            <div class="conten-tit  culture-conten floor">
                <div class="culture-tit">
                    <div class="h1">
                        我们的文化
                    </div>
                    <div class="h2">
                        CULTURE
                    </div>
                </div>
                <div class="intro ">
                    <template v-for="(items,index ) in cultureContent">
                        <div class='box-row culture-box' :class='items.lastChild? "pb0" : ""' :key="index">
                            <div class="culture">
                                <img class="" :src='items.url' />
                            </div>
                            <div class="box-col advantage-tip">
                                <div class="advantage-tip1">{{items.title}}</div>
                                <div class="advantage-tip2" decode='true' v-html="items.content"></div>
                            </div>
                        </div>
                    </template>
    
                </div>
                <div id="id3"></div>
    
            </div>
            <!--我们的文化-->
            <!--贝登大事记-->
            <div class="conten-tit floor">
    
                <div class="h1">
                    贝登大事记
                </div>
                <div class="h2">
                    MEMORABILIA
                </div>
                <div class="intro big-event-box">
                    <template v-for='(items,index) in bigEvents'>
                        <div class='box-row culture-box' :key='index'>
                            <div class="big-event box-col">
                                <div class="big-event-circle"></div>
                                <div :class='items.lastChild ? "big-event-line" : ""'></div>
                            </div>
                            <div class="box-col advantage-tip">
                                <div class="advantage-tip1"> {{items.dates}}</div>
                                <div class="advantage-tip2">{{items.whatEvent}}</div>
                            </div>
                        </div>
                    </template>
                </div>
                <div id="id4"></div>
    
            </div>
            <!--贝登大事记-->
            <!--联系方式-->
            <div class="conten-tit  culture-conten linkbg floor">
                <div class="culture-tit">
                    <div class="h1">
                        联系方式
                    </div>
                    <div class="h2">
                        CONTACT
                    </div>
                </div>
                <div class="conect-us-box">
                    <div class="conect-us">
                        <div class="conect-us-tit">全国统一服务热线</div>
                        <div class="box-row tel-number-box">
                            <div class="box-col" bindtap='call' data-tel='4006-999-569'>
                                <div class="tel-number">
                                    4006-999-569
                                </div>
                                <div class="tel-number-icon box-row">
                                    <div class="hc-icon icon-call">
                                    </div>
                                    <div class="call-us">
                                        呼叫
                                    </div>
                                </div>
                            </div>
                            <div class="box-col" bindtap='call' data-tel='025-66857288'>
                                <div class="tel-number">
                                    025-66857288
                                </div>
                                <div class="tel-number-icon box-row">
                                    <div class="hc-icon icon-call">
                                    </div>
                                    <div class=" call-us">
                                        呼叫
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="conect-us conect-us-20">
                        <div class="conect-us-tit">服务时间</div>
                        <div class="conect-us-content">周一至周五 8:30 – 17:45</div>
                    </div>
                    <div class="conect-us conect-us-20">
                        <div class="conect-us-tit">传真</div>
                        <div class="conect-us-content">025-68538235</div>
                    </div>
                    <div class="conect-us conect-us-20">
                        <div class="conect-us-tit">邮箱</div>
                        <div class="conect-us-content">sales@vedeng.com</div>
                    </div>
                    <div class="conect-us conect-us-20 conect-us-address">
                        <div class="conect-us-tit">地址</div>
                        <div class="conect-us-content box-row ">
                            <div class="address">江苏南京白下高新技术产业园永顺路2号斯坦德电子商务大厦北楼3楼</div>
                            <div class="hc-icon icon-address" bindtap="intoMap" type="primary"></div>
                        </div>
                    </div>
                </div>
            </div>
            <!--贝登大事记-->
        </div>
    </template>
    <script>
        export default {
            name: 'aboutUsApp',
            data() {
                return {
                    tabBarTit: [{ 'tex': '我们是谁' }, { 'tex': '优势' }, { 'tex': '文化' }, { 'tex': '大事记' }, { 'tex': '联系方式' }],
                    cultureContent: [
                        { 'title': '使命', 'url': require('../../assets/image/aboutus/shiming.png'), 'content': '让医疗器械采购更简单', 'lastChild': false },
                        { 'title': '愿景', 'url': require('../../assets/image/aboutus/yuanjing.png'), 'content': '成为全球最大的电商平台', 'lastChild': false },
                        { 'title': '价值观', 'url': require('../../assets/image/aboutus/jiazhiguan.png'), 'content': '客户第一  团队合作 <br/>使命必达  诚信  激情  创新', 'lastChild': false },
                        { 'title': '使命必达', 'url': require('../../assets/image/aboutus/bida.png'), 'content': '忠于目标  勇担责任  绝不推诿', 'lastChild': true }
                    ],
                    advatages: [
                        { 'tip': '产品全', 'url': require('../../assets/image/aboutus/pic1.png'), 'title': '全面的产品线', 'content1': '精选100+国内外知名医疗器械生产厂家品牌', 'content2': '提供30000+覆盖各大科室的器械和耗材产品' },
                        { 'tip': '价格低', 'url': require('../../assets/image/aboutus/pic2.png'), 'title': '实惠的电商价格', 'content1': '年度签约品牌厂家,产品直接采购和集中备货,价格更优', 'content2': '100%原厂正品货源,买的放心,用的安心' },
                        { 'tip': '服务好', 'url': require('../../assets/image/aboutus/pic3.png'), 'title': '周到的服务体验', 'content1': '线上客服即时响应,实时解决您的困惑与问题', 'content2': '售后团队半小时内响应,提供服务保障,售后无忧' },
                        { 'tip': '放心买', 'url': require('../../assets/image/aboutus/pic4.png'), 'title': '安全的支付环境', 'content1': '支持银行打款、支付宝、微信等多种支付方式,担保交易', 'content2': '合同制采购交易,合规经营,支付安全有保障' },
                    ],
                    bigEvents: [
                        { 'dates': '2010年4月', 'whatEvent': '贝登成立,打造工业品综合电商平台', 'lastChild': true },
                        { 'dates': '2011年4月', 'whatEvent': '获得天使投资人数百万投资', 'lastChild': true },
                        { 'dates': '2014年6月', 'whatEvent': '转型进入医疗器械流通领域', 'lastChild': true },
                        { 'dates': '2015年6月', 'whatEvent': '获得医疗产业基金分享投资和鹏瑞投资3000万Pre-A轮融资', 'lastChild': true },
                        { 'dates': '2015年10月', 'whatEvent': '与中国最大的医疗器械生产商迈瑞达成电商战略合作', 'lastChild': true },
                        { 'dates': '2016年11月', 'whatEvent': '获得中卫基金、东方富海和普华资本6500万A轮融资', 'lastChild': true },
                        { 'dates': '2017年7月', 'whatEvent': '布局线下服务,设立4个子公司', 'lastChild': true },
                        { 'dates': '2017年12月', 'whatEvent': '与迈瑞达成更深入的战略合作', 'lastChild': true },
                        { 'dates': '2018年4月', 'whatEvent': '入选“2018南京第一批关注独角兽企业和瞪羚企业”', 'lastChild': true },
                        { 'dates': '2018年5月', 'whatEvent': '完成1亿元A+轮融资,打造医疗器械流通产业链“新链主”', 'lastChild': false }
                    ],
                    thisActive: 0,
    
                }
            },
            mounted() {
                this.$nextTick(function () {
                    this.handleScroll();
                })
    
            },
            methods: {
                tabBarActive(i) {
                    this.thisActive = i;
                },
                handleScroll() {
                    var posArr = [];
                    var heightArr = [];
                    var flag = true //设置标识。防止出现跑马灯
                    var _this = this;
                    var $floors = $(".floor");
                    var $topTit = $('.top-tit');
                    $('.top-tit .tit-to').each(function (i) {
                        $(this).click(function () {
                            flag = false;
                            var offsetTop = $floors.eq(i).offset().top - 40;
                              $("html,body").animate({
                                scrollTop: offsetTop
                            }, 300, function () { flag = true })
                       
                        })
                    })
                    $(window).scroll(() => {
                        if (flag) {
                            var scrollTop = $(window).scrollTop();
                            $floors.each((i, elem) => {
                                var $f = $(elem);
                                if ($f.offset().top < scrollTop + 43)
                                     _this.thisActive = i
                                if ($floors.eq(4).offset().top < scrollTop + 300){
                                    _this.thisActive = 4
                                }
                            });
    
                        }
                    });
                }
            }
        }
    </script>
    
    <style lang="scss" scoped>
        .box-row {
            display: flex;
            flex-direction: row;
        }
    
        .page-container {
            background: #e6ebf2;
            max-width: 750px;
            margin: 0 auto;
    
            .top-tit {
                background: #fff;
                position: fixed;
                top: 0;
                width: 100%;
                border-bottom: 1px solid #ced2d9;
                z-index: 1000;
                display: flex;
                flex-direction: row;
    
                .tit-to {
                    color: #333;
                    padding: 10px;
                    display: block;
    
                    &.active {
                        color: #09f;
                        font-weight: 700;
                        border-bottom: 2px solid #09f;
                        margin-bottom: -1px;
                    }
                }
            }
    
            .banner {
                padding: 60px 0 0px 0;
    
                img {
                    display: block;
                    margin: 0 auto;
                    width: calc(100% - 30px);
                }
            }
        }
    
        .conten-tit {
            padding: 30px 15px 0 15px;
    
            .h1 {
                font-size: 18rpx;
                font-weight: 700;
                text-align: center;
            }
    
            .h2 {
                font-size: 12rpx;
                color: #999;
                padding-bottom: 10px;
                text-align: center;
    
            }
    
            .intro {
                // margin: 0 15px;
                line-height: 26px;
                padding: 15px;
                background: #fff;
                border-radius: 4px;
                color: #000;
                box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
            }
        }
    
        .advantage-bor {
            border-bottom: 1px solid #e6ebf2;
            padding: 20px 0 20px 50px;
        }
    
        .advantage-bor:first-child {
            padding-top: 0;
        }
    
        .advantage-bor.last-child {
            border-bottom: none;
            padding-bottom: 0;
        }
    
        .advantage img {
            height: 74px;
            width: 77px;
            margin-right: 20px;
        }
    
        .advantage-tip {
            width: calc(100% - 97px);
        }
    
        .advantage-tip1 {
            margin-top: 14px;
            margin-bottom: 5px;
            font-size: 15px;
            font-weight: 700;
            color: #000;
            line-height: 22px;
    
        }
    
        .advantage-tip2 {
            font-size: 12px;
            color: #999;
            line-height: 18px;
        }
    
        .culture-tit {
            padding-bottom: 20px;
        }
    
        .culture-tit .h1 {
            color: #fff;
        }
    
        .culture-tit .h2 {
            color: #bec9cc;
        }
    
        .culture-conten {
            margin-top: 30px;
            padding-top: 35px;
            background-image: url('../../assets/image/aboutus/culturebg.jpg');
            background-size: 100% 200px;
            background-repeat: no-repeat;
            .culture-box {
                padding-left: 30px;
                padding-bottom: 20px;
                position: relative;
            }
    
        }
    
        .linkbg {
            background-image: url('../../assets/image/aboutus/linkbg.jpg');
            background-size: 100% 200px;
            background-repeat: no-repeat;
            padding-bottom: 1px;
        }
    
        .culture-box:last-child,
        .pb0 {
            padding-bottom: 0px;
        }
    
        .culture-box .culture img {
            width: 40px;
            height: 40px;
            margin-right: 18px;
        }
    
        .culture-box .culture img.jiazhiguan {
            margin: 11px 18px 0 0;
        }
    
        .culture-box .advantage-tip {
            width: calc(100% - 58px);
        }
    
        .culture-box .advantage-tip1 {
            margin-top: 0;
        }
    
        .big-event {
            position: relative;
            padding: 8px 18px 0 0px;
        }
    
        .big-event-circle {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #09f;
            position: absolute;
            top: 8px;
            z-index: 2;
    
        }
    
        .big-event-line {
            background: #e6ebf2;
            width: 2px;
            height: 143%;
            position: absolute;
            top: 10px;
            left: 3px;
            z-index: 1;
    
        }
    
        .big-event-box .culture-box:last-child .big-event-line {
            display: none;
        }
    
        .big-event-box {
            margin-bottom: 30px;
        }
    
        .big-event-box .culture-box {
            padding-left: 25px;
            padding-bottom: 20px;
        }
    
        .our-advantage-box{
            margin-bottom: 30px;
            .our-advtage {
                  padding: 0 15px;
            }
        }
      
    
        .content {
            background: #fff;
            border-radius: 3px;
            position: relative;
            display: flex;
            flex-direction: row;
            padding: 15px 0;
            border-bottom: 1px solid#e6ebf2;
            &:last-child{
                border-bottom: none;
            }
        }
    
        .mb0 {
            margin-bottom: 0rpx;
        }
    
        .mt30 {
            margin-top: 15px;
        }
    
        .why-img {
            position: absolute;
            top: -4px;
            left: 15px;
            width: 58px;
            height: 30px;
    
        }
    
        .why-download-img {
            img {
                width: 140px;
                height: 140px;
                margin-right: 10px;
                display: inline-template;
            }
        }
    
        .why-download-div {
            width: calc(100% - 150px);
        }
    
        .why-download-tit {
            font-size: 14px;
            font-weight: 700;
            line-height: 21px;
            margin-bottom: 5px;
            color: #333;
        }
    
        .why-download-cont {
            font-size: 12px;
            font-weight: 400;
            line-height: 27px;
            color: #999;
            line-height: 18px;
            margin-bottom: 5px;
        }
    
        .why-download-cont:last-child {
            margin-bottom: 0;
        }
    
        .why-tip {
            background: #eb4849;
            color: #fff;
            font-size: 12px;
            height: 20px;
            line-height: 18px;
            margin-bottom: 5px;
            width: fit-content;
            border-radius: 20px;
            padding: 0 5px;
        }
    
        .conect-us-box {
            padding: 25px 15px 15px 15px;
            margin: 0 0px 30px 0px;
            background: #fff;
            border-radius: 4px;
            color: #000;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
        }
    
        .conect-us {
            border-bottom: 1px solid #e6ebf2;
        }
    
        .conect-us-tit {
            color: #999;
            font-size: 12px;
        }
    
        .tel-number-box .box-col {
            // padding: 0 15px;
            width: 50%;
            text-align: center;
            margin: 5px 0 15px 0;
    
        }
    
        .tel-number-box .box-col:first-child {
            border-right: 1px solid #e6ebf2;
        }
    
        .tel-number-box .tel-number {
            font-size: 15px;
            font-weight: 700;
            margin-bottom: 5px;
            line-height: 22px;
            white-space: nowrap;
        }
    
        .tel-number-icon {
            justify-content: center;
    
        }
    
        .tel-number-box .icon-call {
            font-size: 16px;
            color: #666;
            margin-right: 5px;
        }
    
        .tel-number-box .call-us {
            font-size: 12px;
            color: #666;
        }
    
        .conect-us-content {
            font-weight: 700;
            font-size: 14px;
            line-height: 22px;
            text-align: left;
        }
    
        .conect-us-20 {
            padding: 10px 0;
        }
    
        .conect-us-address {
            border-bottom: 0;
            padding-bottom: 0;
        }
    
        .conect-us-address .box-row {
            justify-content: space-between;
        }
    
        .address {
            // width: 240px;
            text-indent: 0rpx;
            padding-left: 0rpx;
            text-align: left;
            margin-right: 15px;
        }
    
        .icon-address {
            font-size: 24px;
            color: #666;
            margin: 9px 0 0 0;
        }
        @media only screen and (min-width: 320px) and (max-width: 359px){
          .why-download-img {
                img {
                    width: 120px;
                    height: 120px;
                    margin-right: 10px;
                    display: inline-template;
                }
            }
        }
    </style>

     

    展开全文
  • Vue

    2021-01-26 22:38:26
    Vue组件 一、Vue组件中的data和props属性 二、单文件组件 三、vue-cli的使用
  • VUE

    2020-12-06 21:26:59
    现在的vue+less+js+jq less基于node.js,可以动态生成css文件,可以动态的修改页面样式 前端开发IDE 也可以用IDEA开发 第一个VUE程序 新建一个空的项目,idea安装vue插件 vue.js插件 html中引入vue(cdn链接方式...
  • 进入一家老的公司,公司规模也不大,但是我们从git上下载后,我们猛然发现,这项目有一种心痛的感觉。 这都2020年了,居然还有人用这么古老的方案去进行一个项目。那么这时候,我们该怎么办,我们陷入了...
  • vue

    2021-04-29 15:54:21
    Vue vue基础 前端框架发展史 最早期的网页是静态网页 后来出现了新的创建动态HTML的方式(数据嵌入到html文件中)如:ASP、JSP和PHP 这时候的互联网,兴起了数据嵌入模板,模板直接写样式的开发模式,例如MVC模式,...
  • 前言 ...例如:在淘宝登录账户,那么再进入天猫等其他业务的时候会自动登录。另外还有一个好处就是在一定时间内可以不用重复登录账户。 废话不多说直接上视频,看看是不是想要的效果 四个参数 lo..
  • Vue cli的安装Vue cli使用中经常会遇到依赖没有安装完全(没有安装全)下面是需要安装的建议由有一些js,html,css基础的小伙子的观看1. VUEX (单向数据,状态管理器,小项目不需要)2. Jquery3. Less4.字体包5. ...
  • JQ 参数进入表达式

    2019-05-22 19:49:17
    因为jq里面可以写 {“attr”:value},{“attr”:“value”},第一种形式也就可以写参数进去 $(".slider").stop().animate({ "left": id * 100 }, 1000); <!DOCTYPE html> <html lang="en"&...
  • vue引入jq我觉得真的没必要,会产生很多bug,可能可以解决,但是我之前遇到过引入jq出现单页面进入之后jq没法挂载,要刷新才能挂载的情况,蛋疼,一直没解决。所有我打算自己封装一个vue版本的adminlte3. 目前已经...
  • 首先这个全选,反选一开始做的时候我进入了一个盲区就是一直想判断 每一个checkbox选中的状态全等于true的时候 要 All => checkbox 在等于true。虽然看似很简单的一个逻辑缺让我想的很复杂!那一下看一下我们正确的...
  • vue基础

    千次阅读 2019-11-10 22:29:35
    Vue Vue介绍 构建用户界面(UI网页)的框架,关注视图层 框架:综合功能的封装 MVVM(数据驱动视图)model view modelview 可以轻松构建单页面应用程序(spa) single page application 核心特点: 数据操作视图更新...
  • //进入详情页 VueFilter(); }) function loadData(){  var data = {workTitle : $("#txt").val()};  layer.open({type: 2,style: 'color:#ccc; border:none;'});  $.post(actionUrl, data, function(e) { ...
  • 换工作了,由于受不了每天调试接口的枯燥与乏味,找了个vue项目,回到了西安,工资加了近3k,双休,通知加班双倍,五险一金着实少了些,不过已经决定了加入这个vue项目团队,就决定好好的做下去,我相信这个项目会给...
  • vue-cli(vue脚手架)

    2019-02-20 11:29:04
    都说Vue2简单上手容易,的确,看了官方文档确实觉得上手很快,除了ES6语法和webpack的配置让你感到陌生,重要的是思路的变换,以前用jq随便拿全局变量和修改dom的锤子不能用了,vue只用关心数据本身,不用再频繁繁琐...
  •  都说Vue2简单上手容易,的确,看了官方文档确实觉得上手很快,除了ES6语法和webpack的配置让你感到陌生,重要的是思路的变换,以前用jq随便拿全局变量和修改dom的锤子不能用了,vue只用关心数据本身,不用再频繁...
  • vue整理

    2018-10-08 20:35:00
    html: 页面架构css: 样式布局js:操作数据,页面行为(前后端交互)jq:js的封装,及其方便的完成页面特效 vue:js的框架1.数据驱动2.数据的双向绑定3.虚拟DOM 1 认识vue 2 引入vue 3 vue实例 4 实例生命周期...
  • Vue 动画

    2020-06-24 19:42:13
    vue 中给组件或元素添加动画的方式可以分为多种,但总体无非还是通过 css 和 JavaScript 来进行处理 1-1、CSS 通过 css 添加动画的方式特别的简单,只需要利用 css 中的 transition 就可以做到 <!DOCTYPE ...
  • Vue面试题

    2021-09-16 22:26:49
    vue跨域的解决方式Vue的生命周期请简述Vue路由模式hash和history,简单讲一下Vue生命周期的作用Vue路由传参的两种方式,params和query方式与区别Vue数据绑定的几种方式Vue注册一个全局组件vue.component
  • VUE总结

    2019-06-28 10:03:41
    vue.js: 优点:单页面,更轻量,简单易学 缺点:不支持IE8 开发团队:中国国内团队开发, 作者:尤雨溪 angular: 优点:完善的框架,包含模板,数据双向绑定,路由,模块化,服务,过滤器,依赖...
  • vue饿了么

    千次阅读 2017-10-20 16:58:43
    项目一、Vue外卖AppMVVM架构:View ==== ViewModel ==== Model 视图 通讯 数据 DOM 观察者 Javascrip对象View和model通过 ViewModel来通信,但数据发生变化,Viewmodel能够观
  • 都说Vue2简单上手容易,的确,看了官方文档确实觉得上手很快,除了ES6语法和webpack的配置让你感到陌生,重要的是思路的变换,以前用jq随便拿全局变量和修改dom的锤子不能用了,vue只用关心数据本身,不用再频繁繁琐...
  • 搭建vue

    2019-02-27 11:29:33
    在做 Vue.js 开发时,大家需要了解并安装以下开发工具。 1.Node.js Node.js是一个基于Chrome JavaScript运行时建立的平台,用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动,非阻塞 I/O 模型...
  • vue-cli

    2018-11-14 09:08:51
    都说Vue2简单上手容易,的确,看了官方文档确实觉得上手很快,除了ES6语法和webpack的配置让你感到陌生,重要的是思路的变换,以前用jq随便拿全局变量和修改dom的锤子不能用了,vue只用关心数据本身,不用再频繁繁琐...
  • b) win+r,输入cmd进入命令行工具;c) 安装vue-cli:(-g:全局安装)i. 方法一:npm install vue-cli -g:此方法链接的是国外网站会比较卡;ii. 方法二:安装cnpm,通过淘宝镜像安装:npm install -g cnpm --...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,608
精华内容 643
关键字:

vue进入jq

vue 订阅