<div class="card-widget heo-right-widget" id="card-wechat"
th:with="faceImg = ${theme.config.sidebar.wechat.wechatImgFace}, backImg=${theme.config.sidebar.wechat.wechatImgBack}"
     th:attr="onclick='javascript:window.open(\''+ ${theme.config.sidebar.wechat.url} +'\')'">
    <div id="flip-wrapper">
        <div id="flip-content">
            <div class="face"
                 th:style="'background: url('+ @{${#strings.isEmpty(faceImg) ?  assets_link + '/images/wechat/wechat1.png' : faceImg }} +') center center / 100% no-repeat;'"></div>
            <div class="back face"
                 th:style="'background: url('+ @{${#strings.isEmpty(backImg) ?  assets_link + '/images/wechat/wechat2.png' : backImg }} +') center center / 100% no-repeat;'"></div>
        </div>
    </div>

    <style>
        #aside-content .card-widget#card-wechat {
            background: [(${theme.config.sidebar.wechat.color})];
        }
        #aside-content .card-widget#card-wechat::before {
            position: absolute;
            width: 100%;
            height: 90%;
            left: 0;
            top: 0;
            background: url([[${theme.config.sidebar.wechat.wechatImg}]]) center center no-repeat;
            content: '';
            background-size: cover;
            transition: .2s cubic-bezier(.45,.04,.43,1.21)
        }
        #aside-content .card-widget#card-wechat:hover:before {
            top: 100%;
            opacity: 0;
            transition: .3s ease-out
        }

    </style>
</div>