weex的w-image

2020-08-05 16:16:08 阅读:4 编辑

js/pages/common/components/image.vue

<template>
    <image :resize="resize" @load="load"></image>
</template>
<script>
    import console from './../../common/console.js';

    export default {
        props: {
            mode: {
                default: "scaleToFill",
            }
        },
        data: function () {
            return {
                resize: "stretch"
            }
        },
        created: function () {
            if (this.mode == "aspectFit") {
                this.resize = "contain";
            } else if (this.mode == "aspectFill") {
                this.resize = "cover";
            }
        },
        methods: {
            load(event) {
                if(this.$listeners.bindload || this.$listeners.binderror){
                    if (event.success) {
                        const E = {detail: {height: event.size.naturalHeight, width: event.size.naturalWidth}};
                        this.$emit('bindload', E);
                    } else {
                        const E = {detail: {errMsg: "load error"}};
                        this.$emit('binderror', E);
                    }
                }

            }
        }
    }
</script>

demo

<template>
<div class="div0 w_page" :style="page_style" bubble="true">
<scroller>

<w-loading :show="w_loading_show" :loading-text="w_loading_tile"></w-loading>
<div class="div3 page w_page" :style="page_style">
  <div class="div4 page__hd">
    <text class="text5 page__title">image</text>
    <text class="text6 page__desc">图片</text>
  </div>
  <image style="width: 200px; height: 200px; background-color: red;" resize="contain" :src="src"></image>
  <image style="width: 200px; height: 200px; background-color: red;" resize="cover" :src="src"></image>
  <image style="width: 200px; height: 200px; background-color: red;" resize="stretch" :src="src"></image>
  <w-image style="width: 200px; height: 200px; background-color: red;" mode="aspectFit" :src="src"></w-image>
  <w-image style="width: 200px; height: 200px; background-color: red;" mode="aspectFill" :src="src"></w-image>
  <w-image style="width: 200px; height: 200px; background-color: red;"  :src="src"></w-image>

</div>
</scroller>
</div>
</template>
<script>
import wx from './../../common/wx.js';
import console from './../../common/console.js';
import wloading from './../../common/components/loading';
import wimage from './../../common/components/image';

export default {
components: {
'w-loading': wloading,
'w-image': wimage,
    },
    name: 'pages_home_home',
    data: function () {
        return {
            array: [
                {
                    mode: 'scaleToFill',
                    text: 'scaleToFill\uFF1A不保持纵横比缩放图片\uFF0C使图片完全适应'
                },
                {
                    mode: 'aspectFit',
                    text: 'aspectFit\uFF1A保持纵横比缩放图片\uFF0C使图片的长边能完全显示出来'
                },
                {
                    mode: 'aspectFill',
                    text: 'aspectFill\uFF1A保持纵横比缩放图片\uFF0C只保证图片的短边能完全显示出来'
                },
                {
                    mode: 'top',
                    text: 'top\uFF1A不缩放图片\uFF0C只显示图片的顶部区域'
                },
                {
                    mode: 'bottom',
                    text: 'bottom\uFF1A不缩放图片\uFF0C只显示图片的底部区域'
                },
                {
                    mode: 'center',
                    text: 'center\uFF1A不缩放图片\uFF0C只显示图片的中间区域'
                },
                {
                    mode: 'left',
                    text: 'left\uFF1A不缩放图片\uFF0C只显示图片的左边区域'
                },
                {
                    mode: 'right',
                    text: 'right\uFF1A不缩放图片\uFF0C只显示图片的右边边区域'
                },
                {
                    mode: 'top left',
                    text: 'top left\uFF1A不缩放图片\uFF0C只显示图片的左上边区域'
                },
                {
                    mode: 'top right',
                    text: 'top right\uFF1A不缩放图片\uFF0C只显示图片的右上边区域'
                },
                {
                    mode: 'bottom left',
                    text: 'bottom left\uFF1A不缩放图片\uFF0C只显示图片的左下边区域'
                },
                {
                    mode: 'bottom right',
                    text: 'bottom right\uFF1A不缩放图片\uFF0C只显示图片的右下边区域'
                }
            ],
            src: 'https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg'
        };
    },
    mixins: [require('./../../common/publish').publish,require('./../../mixins.js').basePage],
    methods: { 

        imageError: function (e) {

        }
    },
    created :function() {

    },
    beforeMount: function () {
    },
    mounted :function() {
        this.bindEventBus();

    },
    beforeDestroy: function () {
    },
    destroyed: function () {
    },
    eros: {
        backAppeared(params, options) {
            if (this.onShow) {
                this.onShow();
            }
        },
        beforeDisappear(options) {
            this.handleBack();
        }
    }
};
</script>
<style scoped>
.w_button {
 position: relative;
 border: none;
 display: flex;
 flex-direction: column;
 box-sizing: border-box;
 font-size: 28px;
 text-align: center;
 text-decoration: none;
 line-height: 26px;
 border-top-left-radius: 5px;
 border-top-right-radius: 5px;
 border-bottom-right-radius: 5px;
 border-bottom-left-radius: 5px;
 overflow: hidden;
 color: #000000;
 background-color: #F8F8F8;
}
.share-item {
 height: 60px;
}
.loading-wrap {
 position: fixed;
 width: 750px;
 height: 100%;
 top: 0;
 z-index: 11;
 background-color: #fff;
}
.gif-loading {
 position: absolute;
 width: 60px;
 height: 60px;
 left: 30px;
 top: 30px;
 transform: translate(-50%, -50%);
}
.k-letter-holder {
 position: absolute;
 width: 300px;
 height: 100px;
 top: 50px;
 left: 150px;
 transform: translate(-50%,-50%);
 flex-direction: row;
 align-items: center;
 justify-content: center;
 font-size: 40px;
 background-color: #fff;
 border-top-left-radius: 50px;
 border-top-right-radius: 50px;
 border-bottom-right-radius: 50px;
 border-bottom-left-radius: 50px;
}
.k-letter {
 animation-name: k-loadingF;
 animation-duration: 1.6s;
 animation-iteration-count: infinite;
 animation-direction: linear;
}
.k-letter-1 {
 animation-delay: 0.48s;
}
.k-letter-2 {
 animation-delay: 0.6s;
}
.k-letter-3 {
 animation-delay: 0.72s;
}
.k-letter-4 {
 animation-delay: 0.84s;
}
.k-letter-5 {
 animation-delay: 0.96s;
}
.k-letter-6 {
 animation-delay: 1.08s;
}
.k-letter-7 {
 animation-delay: 1.2s;
}
.k-letter-8 {
 animation-delay: 1.32s;
}
.k-letter-9 {
 animation-delay: 1.44s;
}
.k-letter-10 {
 animation-delay: 1.56s;
}
.k-letter-1b {
 animation-delay: 0.48s;
 color: #f44336;
}
.k-letter-2b {
 animation-delay: 0.6s;
 color: #3f51b5;
}
.k-letter-3b {
 animation-delay: 0.72s;
 color: #009688;
}
.k-letter-4b {
 animation-delay: 0.84s;
 color: #4caf50;
}
.k-letter-5b {
 animation-delay: 0.96s;
 color: #8bc34a;
}
.k-letter-6b {
 animation-delay: 1.08s;
 color: #cddc39;
}
.k-letter-7b {
 animation-delay: 1.2s;
 color: #ff9800;
}
.k-letter-8b {
 animation-delay: 1.32s;
 color: #ff5722;
}
.k-letter-9b {
 animation-delay: 1.44s;
 color: #795548;
}
.k-letter-10b {
 animation-delay: 1.56s;
 color: #607d8b;
}
.w_page {
 --fonta: #222;
 --fontb: #666;
 --fontc: #999;
 --white: #fff;
 --skin: #fe433f;
 --pink: #ffc8c7;
 --yellow: #ffc12d;
 --tab: #d7a85a;
 --normal: linear-gradient(to right, #fe433f, #ff8044);
 --prevent: linear-gradient(to right, #999, #666);
 font-size: 28px;
 color: #222;
 background-color: #f2f2f2;
}
.relative {
 position: relative;
}
.ellips1 {
 display: -webkit-box;
 -webkit-box-orient: vertical;
 lines: 1;
 overflow: hidden;
 text-overflow: ellipsis;
}
.ellipss1 {
 overflow: hidden;
 text-overflow: ellipsis;
 lines: 1;
 white-space: nowrap;
}
.ellips2 {
 display: -webkit-box;
 -webkit-box-orient: vertical;
 lines: 1;
 overflow: hidden;
 text-overflow: ellipsis;
}
button {
 position: relative;
 padding-left: 0;
 padding-right: 0;
 padding-top: 0;
 padding-bottom: 0;
 border: none;
 flex-direction: column;
 box-sizing: border-box;
 text-align: center;
 text-decoration: none;
 border-top-left-radius: 0;
 border-top-right-radius: 0;
 border-bottom-right-radius: 0;
 border-bottom-left-radius: 0;
 overflow: hidden;
}
.none {
 height: 64px;
 line-height: 64px;
 text-align: center;
 color: #999;
 font-size: 24px;
}
.right-arrow {
 position: relative;
 width: 30px;
 height: 40px;
 margin-top: 6px;
}
.down-arrow {
 position: relative;
 width: 40px;
 height: 30px;
 display: inline-block;
}
.triangle {
 position: relative;
 width: 40px;
 height: 40px;
 border-left-width: 10px;
 border-left-style: solid;
 border-left-color: transparent;
 border-right-width: 10px;
 border-right-style: solid;
 border-right-color: transparent;
 border-top-width: 10px;
 border-top-style: solid;
 border-top-color: transparent;
 border-bottom-width: 10px;
 border-bottom-style: solid;
 border-bottom-color: transparent;
 display: inline-block;
 top: 6px;
 margin-left: 10px;
}
.bgw {
 background-color: #fff;
}
.f-c {
 flex-direction: row;
 align-items: center;
}
.hide {
 display: none;
}
.mt30 {
 margin-top: 30px;
}
.no-more {
 padding-left: 0;
 padding-right: 0;
 padding-top: 30px;
 padding-bottom: 30px;
 text-align: center;
 color: #999;
 font-size: 26px;
}
.wxParse-p img {
 width: 100% !important;
 flex-direction: column;
}
.choicePay {
 position: fixed;
 width: 100%;
 left: 0;
 bottom: 0;
 background-color: #fff;
 z-index: 10;
}
.webChat {
 padding-left: 30px;
 padding-right: 30px;
 padding-top: 0;
 padding-bottom: 0;
 height: 122px;
 border-top-width: 1px;
 border-top-style: solid;
 border-top-color: #eee;
 flex-direction: row;
 align-items: center;
}
.payIcon {
 width: 60px;
 height: 60px;
 margin-right: 30px;
}
.choicepayTit {
 line-height: 80px;
 text-align: center;
 font-size: 30px;
}
.iconRight {
 width: 34px;
 height: 24px;
}
.webChat div:nth-child(3) {
 flex: 1;
 margin-left: 20px;
 color: #fe433f;
}
.pay-footer {
 padding-left: 20px;
 padding-right: 20px;
 padding-top: 15px;
 padding-bottom: 15px;
 border-top-width: 1px;
 border-top-style: solid;
 border-top-color: #ececec;
}
.pay-footer>.w_button {
 width: 710px;
 height: 90px;
 line-height: 90px;
 background-color: #f87d6d;
 font-size: 34px;
 color: #fff;
 border-top-left-radius: 16px;
 border-top-right-radius: 16px;
 border-bottom-right-radius: 16px;
 border-bottom-left-radius: 16px;
}
.fixed-box {
 position: fixed;
 width: 100px;
 bottom: 60px;
 right: 20px;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 z-index: 100;
}
.fixed-box .w_button {
 padding-left: 0;
 padding-right: 0;
 width: 96px;
 height: 96px;
 margin-bottom: 40px;
 border-top-left-radius: 48px;
 border-top-right-radius: 48px;
 border-bottom-right-radius: 48px;
 border-bottom-left-radius: 48px;
}
.fixed-box-img {
 width: 96px;
 height: 96px;
 border-top-left-radius: 48px;
 border-top-right-radius: 48px;
 border-bottom-right-radius: 48px;
 border-bottom-left-radius: 48px;
}
.share-box {
 position: fixed;
 width: 100%;
 bottom: 0;
 left: 0;
 z-index: 99;
 box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
 background-color: #fff;
}
.rel {
 position: relative;
}
.ab {
 position: absolute;
}
.mt20 {
 margin-top: 20px;
}
.flex-mid {
 align-items: center;
}
.flex-andmid {
 flex-direction: row;
 align-items: center;
}
.flex-center {
 justify-content: center;
 align-items: center;
}
.flex-all {
 flex-direction: row;
 align-items: center;
 justify-content: center;
}
.flex-sb {
 flex-direction: row;
 align-items: center;
 justify-content: space-between;
}
.is-headimg img {
 width: 100px;
 height: 100px;
 border-top-left-radius: 50px;
 border-top-right-radius: 50px;
 border-bottom-right-radius: 50px;
 border-bottom-left-radius: 50px;
}
.item-style2 {
 padding-left: 0;
 padding-right: 0;
 padding-top: 28px;
 padding-bottom: 0;
 background-color: #fff;
 margin-bottom: 10px;
}
.item-style2:last-child {
 margin-bottom: 0;
}
.is-headtit {
 font-size: 30px;
 color: #0ba7f4;
}
.is-headimg {
 padding-right: 20px;
}
.is-headlabel {
 margin-top: 10px;
}
.is-headlabel text {
 padding-left: 6px;
 padding-right: 6px;
 padding-top: 0;
 padding-bottom: 0;
 height: 38px;
 margin-right: 20px;
 line-height: 38px;
 color: #fff;
 border-top-left-radius: 8px;
 border-top-right-radius: 8px;
 border-bottom-right-radius: 8px;
 border-bottom-left-radius: 8px;
 font-size: 24px;
 background-color: #d7a85a;
}
.is-mid {
 padding-left: 30px;
 padding-right: 30px;
 padding-top: 0;
 padding-bottom: 0;
 margin-top: 30px;
}
.is-midtext {
 line-height: 40px;
}
.is-scrollx {
 height: 150px;
 overflow: hidden;
 white-space: nowrap;
 margin-top: 20px;
}
.is-scrollx img {
 width: 150px;
 height: 150px;
 display: inline-block;
 margin-right: 30px;
 border-top-left-radius: 6px;
 border-top-right-radius: 6px;
 border-bottom-right-radius: 6px;
 border-bottom-left-radius: 6px;
}
.is-address {
 padding-bottom: 20px;
 margin-top: 20px;
 color: #999;
}
.is-address img {
 width: 20px;
 height: 25px;
}
.is-address text:nth-child(2) {
 margin-left: 10px;
}
.is-address text:nth-child(3) {
 position: absolute;
 right: 30px;
}
.browse-gray {
 width: 40px;
 height: 25px;
 margin-right: 10px;
}
.like {
 width: 30px;
 height: 25px;
 margin: 0 10px 0 48px;
}
.is-bot {
 padding-left: 30px;
 padding-right: 30px;
 padding-top: 0;
 padding-bottom: 0;
 height: 67px;
 border-top-width: 1px;
 border-top-style: solid;
 border-top-color: #eee;
 font-size: 26px;
 color: #999;
}
.is-details {
 position: absolute;
 color: #d7a85a;
 right: 30px;
 font-size: 26px;
}
.il-phoe {
 position: absolute;
 padding-left: 20px;
 padding-right: 20px;
 padding-top: 0;
 padding-bottom: 0;
 right: 30px;
 top: 20px;
 background-color: #d7a85a;
 font-size: 26px;
 color: #fff;
 border-top-left-radius: 25px;
 border-top-right-radius: 25px;
 border-bottom-right-radius: 25px;
 border-bottom-left-radius: 25px;
 line-height: 50px;
}
.iw-release {
 width: 140px;
 background-color: #d7a85a;
 right: 30px;
 top: 30px;
 color: #fff;
 text-align: center;
 line-height: 50px;
 border-top-left-radius: 10px;
 border-top-right-radius: 10px;
 border-bottom-right-radius: 10px;
 border-bottom-left-radius: 10px;
 font-size: 30px;
}
.dis-box30 {
 padding-left: 30px;
 padding-right: 30px;
 padding-top: 0;
 padding-bottom: 0;
 box-sizing: border-box;
 -webkit-box-sizing: border-box;
}
.bot-com {
 position: fixed;
 width: 100%;
 height: 100px;
 left: 0;
 bottom: 0;
}
.transmit {
 width: 45px;
 height: 45px;
 margin: 0 15px 0 80px;
}
.collec-gray {
 width: 45px;
 height: 45px;
 margin: 0 15px 0 50px;
}
.com-btn {
 width: 260px;
 line-height: 100px;
 background-color: #e9472c;
 font-size: 34px;
 color: #fff;
 text-align: center;
}
.is-headtitandlabel {
 flex: 1;
}
.item-com {
 right: 0;
 top: 0;
 color: #0ba7f4;
}
.item-comment {
 padding-left: 30px;
 padding-right: 30px;
 padding-top: 20px;
 padding-bottom: 0;
}
.is-headtitandlabel .c9 {
 margin-top: 10px;
}
.cc-txt {
 padding-left: 30px;
 padding-right: 30px;
 padding-top: 10px;
 padding-bottom: 30px;
}
.comments-cont1 {
 border-bottom-width: 1px;
 border-bottom-style: solid;
 border-bottom-color: #eee;
}
.comments-cont1:last-child {
 border-bottom: 0;
}
.circle-footer {
 position: fixed;
 width: 100%;
 height: 100px;
 bottom: 0;
 left: 0;
 flex-direction: row;
 align-items: center;
 background-color: #fff;
}
.icon-txt {
 flex: 1;
 flex-direction: row;
 align-items: center;
 justify-content: center;
}
.icon-txt img {
 width: 50px;
 height: 50px;
 margin-right: 14px;
}
.red-btn30 {
 background-color: #e9472c;
 color: #fff;
 width: 160px;
 height: 50px;
 margin-left: 20px;
 text-align: center;
 line-height: 50px;
 border-top-left-radius: 10px;
 border-top-right-radius: 10px;
 border-bottom-right-radius: 10px;
 border-bottom-left-radius: 10px;
 font-size: 30px;
 right: 30px;
 top: 30px;
}
.red-btn20 {
 background-color: #e9472c;
 color: #fff;
 width: 160px;
 height: 50px;
 margin-left: 20px;
 text-align: center;
 line-height: 50px;
 border-top-left-radius: 10px;
 border-top-right-radius: 10px;
 border-bottom-right-radius: 10px;
 border-bottom-left-radius: 10px;
 font-size: 30px;
 right: 30px;
 top: 20px;
}
.red-btn {
 width: 160px;
 height: 50px;
 margin-left: 20px;
 text-align: center;
 line-height: 50px;
 border-top-left-radius: 10px;
 border-top-right-radius: 10px;
 border-bottom-right-radius: 10px;
 border-bottom-left-radius: 10px;
 font-size: 30px;
 background-color: #00a0ea;
 color: #fff;
}
.red-bor {
 width: 160px;
 height: 50px;
 margin-left: 20px;
 text-align: center;
 line-height: 50px;
 border-top-left-radius: 10px;
 border-top-right-radius: 10px;
 border-bottom-right-radius: 10px;
 border-bottom-left-radius: 10px;
 font-size: 30px;
 border-left-width: 1px;
 border-left-style: solid;
 border-left-color: #e9472c;
 border-right-width: 1px;
 border-right-style: solid;
 border-right-color: #e9472c;
 border-top-width: 1px;
 border-top-style: solid;
 border-top-color: #e9472c;
 border-bottom-width: 1px;
 border-bottom-style: solid;
 border-bottom-color: #e9472c;
 background-color: #fff;
 color: #e9472c;
}
.red-borlef {
 padding-left: 9px;
 padding-bottom: 2px;
 border-left-width: 6px;
 border-left-style: solid;
 border-left-color: #e9472c;
 margin-left: 30px;
 font-size: 30px;
}
.yel-btn {
 width: 160px;
 height: 50px;
 margin-left: 20px;
 text-align: center;
 line-height: 50px;
 border-top-left-radius: 20px;
 border-top-right-radius: 20px;
 border-bottom-right-radius: 20px;
 border-bottom-left-radius: 20px;
 font-size: 30px;
 background-color: #ffb825;
 top: 30px;
 right: 30px;
 color: #fff;
}
.bor-bot {
 border-bottom-width: 1px;
 border-bottom-style: solid;
 border-bottom-color: #eee;
}
.tg-icon {
 width: 31px;
 height: 31px;
}
.pro-img {
 width: 335px;
 height: 335px;
}
.store-join {
 height: 132px;
 border-top-width: 1px;
 border-top-style: solid;
 border-top-color: #eee;
 background-color: #fff;
 margin-top: 20px;
 flex-direction: row;
 align-items: center;
 justify-content: center;
}
.store-join div {
 width: 606px;
 border-left-width: 1px;
 border-left-style: solid;
 border-left-color: #e9472c;
 border-right-width: 1px;
 border-right-style: solid;
 border-right-color: #e9472c;
 border-top-width: 1px;
 border-top-style: solid;
 border-top-color: #e9472c;
 border-bottom-width: 1px;
 border-bottom-style: solid;
 border-bottom-color: #e9472c;
 background-color: #fff;
 line-height: 88px;
 border-top-left-radius: 10px;
 border-top-right-radius: 10px;
 border-bottom-right-radius: 10px;
 border-bottom-left-radius: 10px;
 text-align: center;
}
.is-address .txt1 {
 width: 360px;
}
.drawer-screen {
 position: fixed;
 left: 0;
 right: 0;
 top: 0;
 bottom: 0;
 width: 100%;
 height: 100%;
 z-index: 10;
 background-color: rgba(0, 0, 0, 0.5);
 overflow: hidden;
}
.drawer-box {
 position: fixed;
 width: 750px;
 bottom: 0px;
 left: 0;
 z-index: 11;
 background-color: #fff;
 font-size: 30px;
}
.db-tit {
 line-height: 90px;
 background-color: #e9472c;
 text-align: center;
 color: #fff;
}
.db-tit .v1 {
 position: absolute;
 margin-left: 30px;
}
.db-cont {
 padding-left: 20px;
 padding-right: 20px;
 padding-top: 20px;
 padding-bottom: 20px;
 box-sizing: border-box;
}
.db-btn {
 width: 80%;
 border-left-width: 1px;
 border-left-style: solid;
 border-left-color: #e9472c;
 border-right-width: 1px;
 border-right-style: solid;
 border-right-color: #e9472c;
 border-top-width: 1px;
 border-top-style: solid;
 border-top-color: #e9472c;
 border-bottom-width: 1px;
 border-bottom-style: solid;
 border-bottom-color: #e9472c;
 font-size: 30px;
 margin: 25px auto;
 line-height: 88px;
 color: #e9472c;
 text-align: center;
 border-top-left-radius: 10px;
 border-top-right-radius: 10px;
 border-bottom-right-radius: 10px;
 border-bottom-left-radius: 10px;
}
.w_page .wx-swiper-dot {
 width: 10px;
 height: 10px;
 display: inline-flex;
 margin-right: 18px;
}
.share-box .w_button {
 background-color: #fff;
}
.is-head {
 padding-left: 30px;
 padding-right: 30px;
 padding-top: 0;
 padding-bottom: 0;
}
.black-btn {
 width: 160px;
 height: 50px;
 margin-left: 20px;
 text-align: center;
 line-height: 50px;
 border-top-left-radius: 10px;
 border-top-right-radius: 10px;
 border-bottom-right-radius: 10px;
 border-bottom-left-radius: 10px;
 font-size: 30px;
}
.div0 {
 flex-direction: column;
}
.div3 {
 flex-direction: column;
}
.div4 {
 flex-direction: row;
}
.text5 {
 color: rgb(34, 34, 34);
 font-size: 28px;
}
.text6 {
 color: rgb(34, 34, 34);
 font-size: 28px;
}
.div7 {
 flex-direction: column;
}
.div8 {
 flex-direction: column;
}
.div9 {
 flex-direction: column;
}
.text10 {
 color: rgb(34, 34, 34);
 font-size: 28px;
}
.div11 {
 flex-direction: column;
}
.w_page_wx-swiper-dot_before {
 content: '';
 background-color: #d3d3d3;
 flex-grow: 1;
 border-top-left-radius: 0px;
 border-top-right-radius: 0px;
 border-bottom-right-radius: 0px;
 border-bottom-left-radius: 0px;
}
.w_page_wx-swiper-dot-active_before {
 content: '';
 background-color: #f77a14;
 flex-grow: 1;
 border-top-left-radius: 0px;
 border-top-right-radius: 0px;
 border-bottom-right-radius: 0px;
 border-bottom-left-radius: 0px;
}
.button_after {
 border: none;
 border-top-left-radius: 0;
 border-top-right-radius: 0;
 border-bottom-right-radius: 0;
 border-bottom-left-radius: 0;
}
.right-arrow_after {
 position: absolute;
 width: 24px;
 height: 24px;
 display: inline-block;
 content: " ";
 border-right-width: 4px;
 border-top-width: 4px;
 border-left-width: 0;
 border-bottom-width: 0;
 border-color: #c7c7cc;
 border-style: solid;
 transform: rotate(45deg);
 top: 8px;
 right: 4px;
}
.down-arrow_after {
 position: absolute;
 width: 18px;
 height: 18px;
 display: inline-block;
 content: " ";
 border-width: 0 2px 2px 0;
 border-color: #111;
 border-style: solid;
 transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
 transform-origin: center;
 transition: transform 0.3s;
 top: 9px;
 right: 10px;
 margin-top: -10px;
}
.down-arrow_active_after {
 transform-origin: center;
 transform: rotate(-135deg);
 transition: transform 0.3s;
}

</style>