精华内容
下载资源
问答
  • vue卡片化轮播图组件

    2020-12-31 09:18:05
    {{bannerTxt}} {{bannerIndex}}/4 请尽量保证上传的处方文字清晰可见,并保证红框内的信息完整不缺失import Swiper from'swiper';import'swiper/dist/css/swiper.min.css';exportdefault{data() {return{bannerIndex...

    {{bannerTxt}}

    {{bannerIndex}}/4

    请尽量保证上传的处方文字清晰可见,并保证红框内的信息完整不缺失

    import'swiper/dist/css/swiper.min.css';

    exportdefault{

    data() {return{

    bannerIndex:0,

    bannerTxt:'手写的处方',

    banner: [

    {

    picture_txt:'手写的处方',

    picture_path:'https://kmyhl.oss-cn-shenzhen.aliyuncs.com/e-medicine/NEXw6KmWH5.png',

    },

    {

    picture_txt:'机打的处方',

    picture_path:'https://kmyhl.oss-cn-shenzhen.aliyuncs.com/e-medicine/ZdXbcS77SK.png',

    },

    {

    picture_txt:'机打的处方',

    picture_path:'https://kmyhl.oss-cn-shenzhen.aliyuncs.com/e-medicine/BKfxNfcHpH.png',

    },

    {

    picture_txt:'机打的处方',

    picture_path:'https://kmyhl.oss-cn-shenzhen.aliyuncs.com/e-medicine/d3TNrsh75a.png'}

    ]

    };

    },

    mounted() {

    let that= this;/*eslint-disable*/let mySwiper= new Swiper('.swiper-container', {

    direction:'horizontal', //滑动方向,可设置水平(horizontal)或垂直(vertical)。

    loop: true, //设置为true 则开启loop模式

    autoplay: 3000, //自动切换时间

    slidesPerView: 'auto', //设置slider容器能够同时显示的slides数量(carousel模式)。类型:number or auto

    centeredSlides: true, //设定为true时,active slide会居中,而不是默认状态下的居左。

    spaceBetween: 10, //在slide之间设置距离(单位px)。

    loopAdditionaSlider: 0, //loop模式下会在slides前后复制若干个slide,,前后复制的个数不会大于原总个数。

    on: {

    slideChangeTransitionEnd:function(){if(this.activeIndex === 8 || this.activeIndex === 4) {

    that.bannerIndex= 1;

    that.bannerTxt= '手写的处方';

    }else{

    that.bannerIndex= this.activeIndex-3;

    that.bannerTxt= '机打的处方';

    }

    },

    },

    });

    },

    };

    position: absolute;

    top: 44px;

    left: 0px;

    right: 0px;

    bottom: 0px;

    overflow: auto;

    background-color: #f5f0f0;

    font-size: 14px;

    .tips{

    position: absolute;

    bottom: 0px;

    width:100%;

    height: 46px;

    background-color: #b5654d;

    text-align: center;

    img{

    width: 12px;

    height: 14px;

    position: absolute;

    top:7.5px;

    left: 12vw;

    color: #fff;

    }

    p{

    width: 240px;

    text-align: left;

    color: #fff;

    font-size: 12px;

    position: absolute;

    left: 18vw;

    top: 7px;

    line-height: 16px;

    }

    }

    }

    .bannerTxt{

    height: 60px;

    line-height: 60px;

    text-align: center;

    color: #666666;

    font-size: 15px;

    }

    .bannerIndex{

    line-height: 40px;

    text-align: center;

    color: #666666;

    font-size: 15px;

    text-align: center;

    span{

    color: #b5654d;

    }

    }

    .bannerBox{

    position: relative;

    height: 380px;

    }

    .swiper-container {

    width:100%;

    height:100%;

    }

    .swiper-container .swiper-wrapper .swiper-slide {

    width:80% !important;

    overflow: hidden;

    display: flex;

    align-items: center;

    }

    .swiper-container .swiper-wrapper .swiper-slide img {

    width:100%;

    height: 380px;

    border-radius: 5px;

    }

    .swiper-container .swiper-wrapper .swiper-slide-prev,.swiper-container .swiper-wrapper .swiper-slide-next{

    height: 340px!important;

    margin-top: 20px;

    }

    .swiper-container .swiper-wrapper .swiper-slide-prev img,.swiper-container .swiper-wrapper .swiper-slide-next img{

    width:100%;

    height:100%;

    }

    展开全文
  • vue卡片化轮播图

    2020-12-31 09:18:02
    {{bannerTxt}} {{bannerIndex}}/4 请尽量保证上传的处方文字清晰可见,并保证红框内的信息完整不缺失import Swiper from‘swiper‘;import‘swiper/dist/css/swiper.min.css‘;exportdefault{data() {return{...

    {{bannerTxt}}

    {{bannerIndex}}/4

    请尽量保证上传的处方文字清晰可见,并保证红框内的信息完整不缺失

    import‘swiper/dist/css/swiper.min.css‘;

    exportdefault{

    data() {return{

    bannerIndex:0,

    bannerTxt:‘手写的处方‘,

    banner: [

    {

    picture_txt:‘手写的处方‘,

    picture_path:‘https://kmyhl.oss-cn-shenzhen.aliyuncs.com/e-medicine/NEXw6KmWH5.png‘,

    },

    {

    picture_txt:‘机打的处方‘,

    picture_path:‘https://kmyhl.oss-cn-shenzhen.aliyuncs.com/e-medicine/ZdXbcS77SK.png‘,

    },

    {

    picture_txt:‘机打的处方‘,

    picture_path:‘https://kmyhl.oss-cn-shenzhen.aliyuncs.com/e-medicine/BKfxNfcHpH.png‘,

    },

    {

    picture_txt:‘机打的处方‘,

    picture_path:‘https://kmyhl.oss-cn-shenzhen.aliyuncs.com/e-medicine/d3TNrsh75a.png‘}

    ]

    };

    },

    mounted() {

    let that= this;/*eslint-disable*/let mySwiper= new Swiper(‘.swiper-container‘, {

    direction:‘horizontal‘, //滑动方向,可设置水平(horizontal)或垂直(vertical)。

    loop: true, //设置为true 则开启loop模式

    autoplay: 3000, //自动切换时间

    slidesPerView: ‘auto‘, //设置slider容器能够同时显示的slides数量(carousel模式)。类型:number or auto

    centeredSlides: true, //设定为true时,active slide会居中,而不是默认状态下的居左。

    spaceBetween: 10, //在slide之间设置距离(单位px)。

    loopAdditionaSlider: 0, //loop模式下会在slides前后复制若干个slide,,前后复制的个数不会大于原总个数。

    on: {

    slideChangeTransitionEnd:function(){if(this.activeIndex === 8 || this.activeIndex === 4) {

    that.bannerIndex= 1;

    that.bannerTxt= ‘手写的处方‘;

    }else{

    that.bannerIndex= this.activeIndex-3;

    that.bannerTxt= ‘机打的处方‘;

    }

    },

    },

    });

    },

    };

    position: absolute;

    top: 44px;

    left: 0px;

    right: 0px;

    bottom: 0px;

    overflow: auto;

    background-color: #f5f0f0;

    font-size: 14px;

    .tips{

    position: absolute;

    bottom: 0px;

    width:100%;

    height: 46px;

    background-color: #b5654d;

    text-align: center;

    img{

    width: 12px;

    height: 14px;

    position: absolute;

    top:7.5px;

    left: 12vw;

    color: #fff;

    }

    p{

    width: 240px;

    text-align: left;

    color: #fff;

    font-size: 12px;

    position: absolute;

    left: 18vw;

    top: 7px;

    line-height: 16px;

    }

    }

    }

    .bannerTxt{

    height: 60px;

    line-height: 60px;

    text-align: center;

    color: #666666;

    font-size: 15px;

    }

    .bannerIndex{

    line-height: 40px;

    text-align: center;

    color: #666666;

    font-size: 15px;

    text-align: center;

    span{

    color: #b5654d;

    }

    }

    .bannerBox{

    position: relative;

    height: 380px;

    }

    .swiper-container {

    width:100%;

    height:100%;

    }

    .swiper-container .swiper-wrapper .swiper-slide {

    width:80% !important;

    overflow: hidden;

    display: flex;

    align-items: center;

    }

    .swiper-container .swiper-wrapper .swiper-slide img {

    width:100%;

    height: 380px;

    border-radius: 5px;

    }

    .swiper-container .swiper-wrapper .swiper-slide-prev,.swiper-container .swiper-wrapper .swiper-slide-next{

    height: 340px!important;

    margin-top: 20px;

    }

    .swiper-container .swiper-wrapper .swiper-slide-prev img,.swiper-container .swiper-wrapper .swiper-slide-next img{

    width:100%;

    height:100%;

    }

    展开全文
  • Vue2-C-Swipe Mobile 一个简单的移动端卡片滑动组件,适用于Vue2.x
  • vue卡片切换效果仿探探

    千次阅读 2019-04-17 15:00:06
    先上效果图。 大概的效果就是这样。 我不是原作者,借鉴了这个作者的代码。原作者github地址仿探探git地址 在git仓库中拷贝下代码,只需要进行稍微的改动就可以使用。 感谢这位作者,喜欢的话 给这位作者点个star吧...

    先上效果图。
    在这里插入图片描述
    大概的效果就是这样。
    我不是原作者,借鉴了这个作者的代码。原作者github地址仿探探git地址

    在git仓库中拷贝下代码,只需要进行稍微的改动就可以使用。
    感谢这位作者,喜欢的话 给这位作者点个star吧。

    展开全文
  • antd+vue卡片的标题如何居中?

    千次阅读 2020-09-10 14:58:27
    antd+vue卡片的标题如何居中? 代码如下: <a-card title="卡片标题" :headStyle="{ 'text-align': 'center' }"> </a-card>

    antd+vue卡片的标题如何居中?

    在这里插入图片描述
    代码如下:

    <a-card title="卡片标题" :headStyle="{ 'text-align': 'center' }">
    
    </a-card>
    
    展开全文
  • 本文通过实例代码给大家介绍了vue中选项点击切换且能滑动切换功能,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友参考下
  • 项目场景: vue卡在 98% after emitting CopyPlugin 无报错 问题描述: npm run serve 时,卡在98% after emitting CopyPlugin不动 原因分析: 数据中存在请求空路径 解决方案: 完善路径或删除该代码; vue卡在 98%...
  • vue.js单排卡片滚动切换代码是一款简单的图片卡片文本单排三列布局,点击卡片滚动切换效果。
  • 用于VueJS的简单美观的卡片组件,带有精美的火花线。 演示可以在此处找到该组件的实时...安装npm i -S vue-info-card用法安装后,可以通过传递适当的道具来使用组件来显示数据和消息。 单个文件组件中的用法示例如下:
  • VUE 卡片拖拽、自动排列交换位置、拖拽数据存取 https://juejin.im/post/5da53e29e51d457822796ed8
  • Vue卡列表中不同卡片显示不同背景颜色 最近做一个项目的移动端页面,需要完成一个卡列表,不同银行显示不同颜色的问题,一开始考虑过通过识别银行图标色调生成,但最后为了考虑开发成本,只做几种通用的色调。 具体...
  • vue.js制作一款简单的单排图文卡片滚动切换代码,图片文字卡片布局,点击左右箭头控制卡片向左向左滚动切换。
  • vue开发中遇到类似原生这种卡片轮播,中间大两边小的需求 网上搜了下,很多都是修改前一个和后一个的高度,然后设置了margin-top,但个人感觉这样病不能保证很好的居中,在研究了官网的demo后,发现...
  • 主要介绍了vue实现选项选项切换效果,这里的Vue以单文件的形式引入,另外代码在实现上会一步步的进行优化。需要的朋友可以参考下
  • Vue选项案例

    2018-10-18 15:24:15
    简单的做了一个Vue选项和任务分类Demo,非常适合初学者
  • vue 在线答题制作

    2021-02-26 10:59:12
    vue开发 简单 答题制作
  • vue纯css数字滚动.vue

    2020-10-09 09:52:53
    vue纯css大屏数字滚动!
  • Vue步骤进度栏 演示版 安装 使用npm安装插件: npm install --save vue-step-progress 用法 :warning: 默认设置将“令人敬畏的字体”用作选中标记图标。 您可以使用“ icon-class”道具来更改css图标类。 在要...
  • 主要介绍了vue页面切换过渡transition效果,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 基于Vue自定义树形tableCard
  • vue.js单排卡片滚动切换代码是一款简单的图片卡片文本单排三列布局,点击卡片滚动切换效果。
  • 嗨,说起探探想必各位程序汪都不陌生(毕竟妹子很多),能在上面丝滑的翻牌子,探探的的堆叠滑动组件起到了关键的作用,下面就来看看如何用vue写一个探探的堆叠组件 一. 功能分析 简单使用下探探会发现,堆叠滑动的...
  • Vue Emoji Mart是可定制的Slack Vue的表情符号选择器组件,灵感来自[Emoji Mart]( )。 • 团队带给您的 安装 npm install --save vue-emoji-mart 组件 选择器 < Picker :emoji-size =" emojiSize " :...
  • 从模态弹框讲起前端攻城????️对模态弹框肯定很熟悉,不管是套用bootstrap...就像这样的↓↓↓先附上体验地址实现vue模版{{title}}{{content}}这里对熟悉vue的同学来讲没有什么特殊的地方,主要有一个slot标签会有疑...
  • vue选项封装组件

    2018-10-10 10:59:30
    根据vue实战,练习封装选项组件,代码里面有清晰的注释,不了解密我

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 24,033
精华内容 9,613
关键字:

vue卡

vue 订阅