
    .btn {
      display: inline-block;
      overflow: visible;
      padding: 0 22px;
      height: 30px;
      line-height: 30px;
      *line-height: 28px;
      vertical-align: middle;
      text-align: center;
      text-decoration: none;
      border-radius: 3px;
      -moz-border-radius: 3px;
      -webkit-border-radius: 3px;
      font-size: 14px;
      border-width: 1px;
      border-style: solid;
      cursor: pointer
    }

    .btn:hover {
      text-decoration: none
    }

    .btn_default {
      background-color: #fff;
      background-image: -moz-linear-gradient(top, #fff 0, #fff 100%);
      background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#fff));
      background-image: -webkit-linear-gradient(top, #fff 0, #fff 100%);
      background-image: -o-linear-gradient(top, #fff 0, #fff 100%);
      background-image: linear-gradient(to bottom, #fff 0, #fff 100%);
      border-color: #e7e7eb;
      color: #222
    }

    .btn_default:hover {
      background-color: #e7e7eb;
      background-image: -moz-linear-gradient(top, #e7e7eb 0, #e7e7eb 100%);
      background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#e7e7eb), to(#e7e7eb));
      background-image: -webkit-linear-gradient(top, #e7e7eb 0, #e7e7eb 100%);
      background-image: -o-linear-gradient(top, #e7e7eb 0, #e7e7eb 100%);
      background-image: linear-gradient(to bottom, #e7e7eb 0, #e7e7eb 100%);
      border-color: #dadbe0;
      box-shadow: none;
      -moz-box-shadow: none;
      -webkit-box-shadow: none;
      color: #222
    }

    .poper-wrap {
      width: 100%;
      height: 100%;
      position: fixed;
      z-index:250;
      left: 0;
      top: 0;
    }

    .mask {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      filter: alpha(opacity=75);
      -moz-opacity: .75;
      -khtml-opacity: .75;
      opacity: .75;
      background-color: rgba(0, 0, 0, 0.5)
    }

    .wx_phone_preview {
      position: fixed;
      top: 50%;
      left: 50%;
      margin-top: -365px;
      margin-left: -180px;
      background: url(~@static/assets/images/socialmedia/wx_phone_preview.png) 0 0 no-repeat;
      width: 402px;
      height: 742px;
      background-size: cover
    }

    .wx_view_list {
      line-height: 40px;
      border-radius: 5px;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      text-align: center;
      overflow: hidden;
      position: absolute;
      right: 105%;
      top: 90px
    }

    .wx_view_item {
      background-color: #f0eff4;
      border-bottom: 1px solid #dfdfe4;
      white-space: nowrap;
      cursor: pointer;
      min-width: 120px
    }

    .wx_view_item.selected {
      background-color: #47b54a;
      color: #fff;
      border-bottom-color: #5bab5e
    }

    .btn_wx_phone_preview_wrp {
      position: absolute;
      bottom: 130px;
      text-align: center;
      left: -138px
    }

    .btn_phone_preview_closed {
      position: absolute;
      left: -138px;
      bottom: 90px
    }

    .btn_phone_preview_closed,
    .btn_wx_phone_preview {
      padding: 0;
      min-width: 120px
    }


    .wx_phone {
      padding: 92px 63px 0 20px
    }

    .wx_phone_hd {
      text-align: center;
      color: #fff;
      line-height: 38px;
      height: 38px;
      width: auto;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      word-wrap: normal;
      padding: 0 20px;
      position: relative
    }


    .wx_phone_bd {
      position: relative;
      overflow: auto;
      background-color: #fff;
      height: 524px
    }

    /**分享到会话消息布局**/

    .wx_phone_preview_card_wrp {
      background-color: #f2f2f2
    }

    .wx_phone_preview_card {
      padding: 15px;
      cursor: pointer
    }

    .wx_phone_preview_card .msg_card_bd {
      padding: 8px
    }

    .wx_phone_preview_card .msg_card_ft {
      background-color: #fff;
      line-height: 38px;
      padding: 0;
      margin: 0 8px;
      font-size: 12px
    }

    .wx_phone_preview_card .msg_card_ft .icon_arrow_default {
      float: right;
      margin-top: 10px
    }

    .wx_phone_preview_card .msg_card_title {
      margin-bottom: 6px;
      max-height: 40px;
      font-size: 14px
    }

    .wx_phone_preview_card .msg_card_desc {
      max-height: 42px;
      overflow: hidden;
      font-size: 12px
    }

    .wx_phone_preview_multi_card {
      padding: 15px;
      cursor: pointer
    }

    .wx_phone_preview_multi_card .card_cover_appmsg_item {
      position: relative
    }

    .wx_phone_preview_multi_card .card_cover_appmsg_inner {
      position: relative;
      height: 140px;
      overflow: hidden;
      background-repeat: no-repeat;
      background-position: center center;
      background-size: cover
    }

    .wx_phone_preview_multi_card .card_cover_thumb {
      display: block;
      width: 100%
    }

    .wx_phone_preview_multi_card .msg_card_cover_desc {
      color: #8d8d8d;
      word-wrap: break-word;
      word-break: break-all;
      max-height: 45px;
      overflow: hidden
    }

    .wx_phone_preview_multi_card .card_appmsg_item {
      overflow: hidden;
      *zoom: 1;
      padding: 6px;
      border-top: 1px solid #e7e7eb
    }

    .wx_phone_preview_multi_card .card_appmsg_item:first-child {
      border-top-width: 0
    }

    .wx_phone_preview_multi_card .card_appmsg_thumb_wrp {
      float: right;
      margin-left: 10px
    }

    .wx_phone_preview_multi_card .card_appmsg_content {
      overflow: hidden;
      *zoom: 1
    }

    .wx_phone_preview_multi_card .card_cover_title {
      font-weight: 400
    }

    .wx_phone_preview_multi_card.has_first_cover .card_cover_title {
      position: absolute;
      max-height: 42px;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(0, 0, 0, 0.5) !important;
      filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#80000000', endcolorstr='#80000000');
      color: #fff;
      padding: 5px 6px
    }

    .card_media {
      word-wrap: break-word;
      word-break: break-all;
      border-radius: 6px;
      -moz-border-radius: 6px;
      -webkit-border-radius: 6px;
      overflow: hidden;
      background-color: #fff;
      border: 1px solid rgba(229, 229, 229, 0.5)
    }

    .card_appmsg_inner {
      position: relative;
      padding-top: 56.25%
    }

    .card_appmsg_title {
      position: absolute;
      left: 15px;
      right: 15px;
      bottom: 15px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      color: #fff;
      font-weight: 400;
      z-index: 1
    }

    .card_appmsg_title a {
      color: #fff
    }

    .card_appmsg_thumb {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      width: auto;
      height: auto;
      -webkit-background-size: cover;
      background-size: cover;
      background-position: 50% 50%;
      background-repeat: no-repeat;
      background-color: #f6f8f9
    }

    .card_appmsg_thumb:before {
      content: " ";
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.3)
    }

    .sub_card_media {
      padding: 15px;
      position: relative
    }

    .sub_card_media:before {
      content: " ";
      position: absolute;
      left: 15px;
      right: 78px;
      top: 0;
      height: 1px;
      background-color: #e4e8eb
    }

    .sub_card_media:nth-child(2):before {
      right: 15px
    }

    .sub_card_media .weui-desktop-vm_default {
      padding-left: 15px
    }

    .sub_card_media .card_video_wrp,
    .sub_card_media .card_video_hd,
    .sub_card_media .card_video_bd {
      padding: 0
    }

    .sub_card_media .card_video {
      position: static
    }

    .sub_card_media .card_video_hd {
      z-index: 0
    }

    .sub_card_media .card_video_title {
      color: #353535
    }

    .sub_card_media .card_video_title a {
      color: #353535
    }

    .sub_card_media .card_video_thumb {
      position: relative;
      width: 48px;
      height: 48px;
      display: block
    }

    .sub_card_media .card_video_player {
      right: auto;
      left: 50%;
      margin-left: -18px;
      -webkit-background-size: 24px;
      background-size: 24px
    }

    .sub_card_media .card_video_length {
      display: none
    }

    .sub_card_media .card_audio_inner {
      padding: 0
    }

    .sub_card_media .card_audio_player {
      width: 48px;
      height: 48px;
      background-color: #f6f8f9;
      -webkit-background-size: 24px;
      background-size: 24px
    }

    .sub_card_media .card_audio_length {
      display: none
    }

    .sub_card_media .card_img_inner {
      padding: 0
    }

    .sub_card_media .card_img_title,
    .sub_card_media .card_img_thumb {
      position: static
    }

    .sub_card_media .card_img_title {
      color: #353535
    }

    .sub_card_media .card_img_title a {
      color: #353535
    }

    .sub_card_media .card_img_thumb {
      width: 48px;
      height: 48px;
      display: block
    }

    .sub_card_media .card_img_thumb:before {
      display: none
    }

    .sub_card_media .card_appmsg_inner {
      padding: 0
    }

    .sub_card_media .card_appmsg_title {
      position: static
    }

    .sub_card_media .card_appmsg_thumb {
      position: relative
    }

    .sub_card_media .card_appmsg_thumb:before {
      display: none
    }

    .sub_card_media .card_appmsg_title {
      color: #353535;
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1
    }

    .sub_card_media .card_appmsg_title a {
      color: #353535
    }

    .sub_card_media .card_appmsg_thumb {
      width: 48px;
      height: 48px;
      display: block
    }

    .weui-desktop-vm_default,
    .weui-desktop-vm_primary {
      display: table-cell;
      vertical-align: middle;
      word-wrap: break-word;
      word-break: break-all
    }

    .weui-desktop-vm_default {
      white-space: nowrap
    }

    .weui-desktop-vm_primary {
      width: 2000px
    }

    /**分享到朋友圈布局**/

    .wx_phone_preview_moments {
      overflow: hidden;
      *zoom: 1;
      padding: 15px
    }

    .wx_phone_preview_moments .moments_user_avatar {
      width: 28px;
      height: 28px;
      float: left;
      margin-right: 12px
    }

    .wx_phone_preview_moments .moments_content_wrp {
      overflow: hidden;
      *zoom: 1
    }

    .wx_phone_preview_moments .moments_nickname {
      font-size: 12px;
      padding-bottom: 5px
    }

    .wx_phone_preview_moments .moments_content {
      overflow: hidden;
      *zoom: 1;
      background-color: #f0eff4;
      padding: 8px 10px;
      cursor: pointer
    }

    .wx_phone_preview_moments .moments_appmsg_thumb {
      float: left;
      width: 30px;
      height: 30px;
      margin-right: 5px
    }

    .wx_phone_preview_moments .moments_appmsg_title {
      *zoom: 1;
      width: auto;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      word-wrap: normal
    }

    /**发送给朋友**/

    .wx_phone_preview_chat {
    overflow: hidden;
    *zoom: 1;
    padding: 15px
}

.wx_phone_preview_chat_wrp {
    background-color: #f2f2f2
}

.wx_phone_preview_chat .chat_user_avatar {
    float: left;
    width: 28px;
    height: 28px
}

.wx_phone_preview_chat .chat_content {
    overflow: hidden;
    *zoom: 1;
    padding-left: 12px;
    padding-right: 30px
}

.wx_phone_preview_chat .chat_appmsg_msg {
    position: relative;
    background-color: #fff;
    padding: 8px 10px;
    border: 1px solid #e7e7eb;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    cursor: pointer
}

.wx_phone_preview_chat .chat_appmsg_title {
    padding-bottom: 5px;
    width: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal
}

.wx_phone_preview_chat .chat_appmsg_content {
    overflow: hidden;
    *zoom: 1
}

.wx_phone_preview_chat .chat_appmsg_thumb {
    float: left;
    width: 40px;
    height: 40px;
    margin-right: 5px
}

.wx_phone_preview_chat .chat_appmsg_desc {
    font-size: 12px;
    color: #8d8d8d;
    margin-top: 3px;
    max-height: 3.2em;
    overflow: hidden
}

.wx_phone_preview_chat .chat_arrow_wrp {
    position: absolute;
    left: -6px;
    top: 6px
}

.wx_phone_preview_chat .chat_arrow {
    position: absolute;
    display: inline-block;
    width: 0;
    height: 0;
    border-width: 6px;
    border-style: dashed;
    border-color: transparent;
    border-left-width: 0;
    border-right-color: #e7e7eb;
    border-right-style: solid
}

.wx_phone_preview_chat .arrow_in {
    left: 1px;
    border-right-color: #fff
}
