@aochuang/client-sdk 1.0.278

package/components/wechat-chat-control/transfer/transfer.vue

@@ -0,0 +1,263 @@
+<template>
+  <div class="sdk-chat-control-transfer" :class="['sdk-chat-control-transfer--' + type, { 'is-expire': isExpire }]">
+    <template v-if="type === 'default'">
+      <div class="sdk-chat-control-transfer__main">
+        <span class="sdk-chat-control-transfer__icon">
+          <img width="24px" :src="icon" alt="转账">
+        </span>
+        <div class="sdk-chat-control-transfer__info">
+          <div class="sdk-chat-control-transfer__desc" v-if="innerTitle" :title="innerTitle">{{innerTitle}}</div>
+          <div class="sdk-chat-control-transfer__text">{{feedesc}}</div>
+        </div>
+      </div>
+      <div class="sdk-chat-control-transfer__addon">
+        <span class="sdk-chat-control-transfer__category">微转账</span>
+        <div class="sdk-chat-control-transfer__action" v-if="paysubtype == 1">
+          <template v-if="receivable">
+            <span class="sdk-chat-control-transfer__action-item" @click="handleReceiveClick">
+              <span class="sdk-chat-control-transfer__action-item-icon" v-if="receiveing"><ui-loading size="mini"></ui-loading></span>
+              <span class="sdk-chat-control-transfer__action-item-text">领取</span>
+            </span>
+          </template>
+          <template v-if="refundable">
+            <span class="sdk-chat-control-transfer__action-item" @click="handleRefundClick">
+              <span class="sdk-chat-control-transfer__action-item-icon" v-if="refunding"><ui-loading size="mini"></ui-loading></span>
+              <span class="sdk-chat-control-transfer__action-item-text">退还</span>
+            </span>
+          </template>
+        </div>
+      </div>
+    </template>
+    <template v-else-if="type === 'quote'">
+      <div class="sdk-chat-control-transfer__icon"></div>
+      <div class="sdk-chat-control-transfer__title">{{innerTitle}}{{feedesc}}</div>
+    </template>
+  </div>
+</template>
+<script>
+import { parse } from '../../../utils/json'
+
+export default {
+  name: 'SdkChatControlTransfer',
+  props: {
+    id: {
+      type: String
+    },
+    type: {
+      type: String,
+      default: 'default',
+      validator (value) {
+        return ['quote', 'default'].includes(value)
+      }
+    },
+    content: {
+      type: [String, Object]
+    },
+    receivable: {
+      type: Boolean,
+      default: false
+    },
+    refundable: {
+      type: Boolean,
+      default: false
+    },
+    receiveMethod: {
+      type: Function
+    },
+    refundMethod: {
+      type: Function
+    },
+    updateChatBoxStyle: {
+      type: Function
+    }
+  },
+  data () {
+    return {
+      refunding: false,
+      receiveing: false
+    }
+  },
+  computed: {
+    nextContent () {
+      return parse(this.content) || {}
+    },
+    title () {
+      return this.nextContent.title
+    },
+    paysubtype () {
+      return this.nextContent.paysubtype
+    },
+    payMemo () {
+      return this.nextContent.payMemo
+    },
+    description () {
+      return this.nextContent.feedesc
+    },
+    feedesc () {
+      return this.description
+    },
+    isExpire () {
+      return this.paysubtype != 1
+    },
+    innerTitle () {
+      let rs
+      if (this.paysubtype == 1) {
+        rs = this.payMemo
+      } else if (this.paysubtype == 3) {
+        rs = '已收钱'
+      } else if (this.paysubtype == 4) {
+        rs = '已退还'
+      }
+      return rs || this.title
+    },
+    icon () {
+      let icon = require('./transfer.svg')
+      if (this.paysubtype == 3) {
+        icon = require('./collection.svg')
+      } else if (this.paysubtype == 4) {
+        icon = require('./refund.svg')
+      }
+      return icon
+    },
+    bgColor () {
+      let color = '#f59d4f'
+      if (this.paysubtype == 3 || this.paysubtype == 4) {
+        color = '#fecfa2'
+      }
+      return color
+    },
+    brColor () {
+      let color = '#f59d4f'
+      if (this.paysubtype == 3 || this.paysubtype == 4) {
+        color = '#fecfa2'
+      }
+      return color
+    }
+  },
+  created () {
+    if (this.isExpire && this.updateChatBoxStyle) {
+      this.updateChatBoxStyle({
+        brColor: '#f9b676',
+        bgColor: '#f9b676'
+      })
+    }
+  },
+  methods: {
+    handleRefundClick () {
+      const rs = this.refundMethod({
+        content: this.nextContent
+      })
+      if (rs && rs.finally) {
+        this.refunding = true
+        rs.finally(() => {
+          this.refunding = false
+        })
+      }
+    },
+    handleReceiveClick () {
+      const rs = this.receiveMethod({
+        content: this.nextContent
+      })
+      if (rs && rs.finally) {
+        this.receiveing = true
+        rs.finally(() => {
+          this.receiveing = false
+        })
+      }
+    }
+  }
+}
+</script>
+<style lang="less">
+.sdk-chat-control-transfer--default{
+  line-height: 1.5em;
+  &:not(.is-expire) {
+    background-color: #f79d46;
+    border: 1px solid #f79d46;
+  }
+  &.is-expire{
+    background-color: #f9b676;
+    border: 1px solid #f9b676;
+  }
+  .sdk-chat-control-transfer__main{
+    width: 212px;
+    padding: 12px;
+    display: flex;
+    flex-direction: row;
+    color: #fff;
+  }
+  .sdk-chat-control-transfer__info{
+    margin-top: -2px;
+  }
+  .sdk-chat-control-transfer__icon{
+    border: 1px solid #fff;
+    border-radius: 50%;
+    width: 30px;
+    height: 30px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin-right: 12px;
+  }
+  .sdk-chat-control-transfer__addon{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 0 12px;
+    justify-content: space-between;
+    height: 24px;
+    line-height: 24px;
+    background-color: #fff;
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .sdk-chat-control-transfer__category{
+    height: 24px;
+    line-height: 24px;
+    font-size: 12px;
+    display: block;
+    color: #999;
+  }
+  .sdk-chat-control-transfer__action{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+  .sdk-chat-control-transfer__action-item{
+    font-size: 12px;
+    opacity: 0.7;
+    cursor: pointer;
+    transition: all .25s;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-left: 12px;
+    &:hover {
+      opacity: 1;
+    }
+  }
+  .sdk-chat-control-transfer__action-item-icon {
+    margin-right: 4px;
+  }
+}
+.sdk-chat-control-transfer--quote {
+  display: flex;
+  flex-direction: row;
+  .sdk-chat-control-transfer__icon {
+    display: inline-block;
+    width: 18px;
+    height: 18px;
+    margin-right: 4px;
+    min-width: 18px;
+    vertical-align: top;
+    margin-top: 2px;
+    color: #999;
+    background: url('./quote-icon.svg') no-repeat 50% 50%;
+    background-size: cover;
+  }
+  .sdk-chat-control-transfer__title{
+    margin-right: 6px;
+  }
+}
+</style>

package/components/wechat-chat-control/unknow/unknow.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="sdk-chat-control-unkonw">未知消息类型</div>
+</template>
+<script>
+export default {
+  name: 'SdkChatControlUnkonw',
+  props: {
+    id: {
+      type: String
+    },
+    content: {
+      type: [String, Object]
+    }
+  }
+}
+</script>
+<style lang="less">
+.sdk-chat-control-unkonw{
+  padding: 10px;
+}
+</style>

package/components/wechat-chat-control/url/icons/link.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1752134896820" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3164" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M721.75097682 628.5429685L675.14697266 581.87304662l46.60400416-46.6040034a164.79492162 164.79492162 0 1 0-233.05297852-233.05297851L442.09399414 348.85302734 395.4570315 302.24902318 442.12695338 255.64501978a230.71289088 230.71289088 0 0 1 326.29394531 326.29394532l-46.6369634 46.6040034z m-93.20800832 93.20800832l-46.63696264 46.6040034a230.71289088 230.71289088 0 0 1-326.29394531-326.29394532l46.63696263-46.6040034L348.85302734 442.12695338l-46.60400416 46.6040034a164.79492162 164.79492162 0 1 0 233.05297852 233.05297851l46.60400416-46.6040034 46.63696264 46.6040034z m-23.33496094-349.59594778l46.6369634 46.6369634-233.05297852 233.02001928-46.6369634-46.60400416 233.05297852-233.02001928z" fill="#999" p-id="3165"></path></svg>

package/components/wechat-chat-control/url/icons/video.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg t="1731930511288" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1740" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
+<path d="M0 0h1024v1024H0z" fill="#3664f8" p-id="1741"></path>
+<path d="M363.05881933 813.70136597c-38.19004631 0-76.38009265-15.27601854-106.93212971-45.82805559-61.10407412-61.10407412-61.10407412-156.57918994-1e-8-217.68326407l80.1990973-80.19909727 53.46606485 53.46606485-80.19909728 80.19909729c-30.55203706 30.55203706-30.55203706 76.38009265 0 106.93212972 30.55203706 30.55203706 76.38009265 30.55203706 106.9321297 0l106.93212971-106.93212972c15.27601854-15.27601854 22.9140278-34.3710417 22.91402781-53.46606487S538.73303243 512 527.27601854 496.72398146L485.26696757 458.53393514l53.46606486-53.46606484 42.00905096 42.00905095C607.47511582 473.80995369 622.75113434 512 622.75113434 554.00905096c0 42.00905096-15.27601854 80.19909727-45.82805558 106.93212971l-106.93212972 106.93212972C443.25791661 798.42534744 401.24886566 813.70136597 363.05881933 813.70136597z" fill="#ffffff" p-id="9488"></path><path d="M485.26696757 618.93212971L443.25791661 580.74208339c-61.10407412-61.10407412-61.10407412-156.57918994 0-217.68326406l106.9321297-106.93212971c61.10407412-61.10407412 156.57918994-61.10407412 217.68326407 0 61.10407412 61.10407412 61.10407412 156.57918994 1e-8 217.68326406l-80.1990973 80.19909728-53.46606485-53.46606485 80.19909728-80.19909729c30.55203706-30.55203706 30.55203706-76.38009265 0-106.93212972-30.55203706-30.55203706-80.19909727-30.55203706-106.9321297 0L496.72398146 416.52488418c-30.55203706 30.55203706-30.55203706 76.38009265 1e-8 106.93212971l42.00905096 42.00905097L485.26696757 618.93212971z" fill="#ffffff" p-id="9489"></path>
+</svg>

package/components/wechat-chat-control/url/miniprogram.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1602418855817" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6268" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M712.388923 10.24A268.918154 268.918154 0 0 0 442.683077 279.788308v408.49723c0 74.830769-61.44 136.270769-136.192 136.27077-74.830769 0-138.870154-61.44-138.870154-138.948923 0-77.430154 61.44-136.113231 136.270769-136.113231a66.166154 66.166154 0 0 0 66.717539-66.796308 66.166154 66.166154 0 0 0-66.796308-66.717538A268.366769 268.366769 0 0 0 44.898462 675.052308C39.384615 824.556308 154.308923 949.956923 303.812923 955.470769a268.918154 268.918154 0 0 0 269.705846-269.784615V277.267692c0-74.830769 61.44-136.192 136.192-136.192 74.752 0 136.113231 61.44 136.113231 136.192 0 74.830769-61.44 136.192-133.435077 136.192H709.710769a66.166154 66.166154 0 0 0-66.796307 66.717539 66.166154 66.166154 0 0 0 66.796307 66.796307 268.918154 268.918154 0 0 0 269.627077-269.705846 264.428308 264.428308 0 0 0-267.027692-267.027692z" p-id="6269" fill="#999"></path></svg>

package/components/wechat-chat-control/url/url-file.vue

@@ -0,0 +1,47 @@
+<script>
+import fileUrl from '../file-url/file-url.vue'
+
+export default {
+  name: 'SdkChatPanelControlsUrlFile',
+  functional: true,
+  props: {
+    id: {
+      type: String
+    },
+    content: {
+      type: [Object, String]
+    },
+    type: {
+      type: String
+    },
+    updateChatBoxProp: {
+      type: Function
+    },
+    allowDownload: {
+      type: [Boolean, Function],
+      default: false
+    },
+    previewMethod: {
+      type: Function
+    },
+    allowPreview: {
+      type: [Boolean, Function],
+      default: false
+    },
+    getDownloadTipsMethod: {
+      type: Function
+    },
+    downloadMethod: {
+      type: Function
+    },
+    cancelDownloadMethod: {
+      type: Function
+    }
+  },
+  render (h, c) {
+    return h(fileUrl, {
+      props: c.props
+    })
+  }
+}
+</script>

package/components/wechat-chat-control/url/url-link.vue

@@ -0,0 +1,169 @@
+<template>
+  <div class="sdk-wechat-control-url-link" :class="['sdk-wechat-control-url-link--' + type, {'is-border': border}]">
+    <template v-if="type === 'default' || type === 'thumb'">
+      <div class="sdk-wechat-control-url-link__inner">
+        <div class="sdk-wechat-control-url-link__main">
+          <div class="sdk-wechat-control-url-link__info">
+            <strong class="sdk-wechat-control-url-link__title">{{title}}</strong>
+            <div class="sdk-wechat-control-url-link__description">{{description || url}}</div>
+          </div>
+          <div class="sdk-wechat-control-url-link__cover" v-if="cover" :style="{'background-image': `url(${cover})`}"></div>
+        </div>
+        <div class="sdk-wechat-control-url-link__foot">
+          超链接
+        </div>
+      </div>
+    </template>
+    <template v-else-if="type === 'quote'">
+      <span class="sdk-wechat-control-url-link__title">{{title}}</span>
+      <div class="sdk-wechat-control-url-link__cover" v-if="cover" :style="{'background-image': `url(${cover})`}"></div>
+    </template>
+  </div>
+</template>
+<script>
+import { parse } from '../../../utils/json'
+import { formatOssPath } from '@aochuang/common/utils/oss'
+
+export default {
+  name: 'SdkWecahtControlUrlLink',
+  props: {
+    id: {
+      type: String
+    },
+    type: {
+      type: String
+    },
+    content: {
+      type: [String, Object]
+    },
+    updateChatBoxProp: {
+      type: Function
+    }
+  },
+  inject: {
+    SdkChatPanelBox: {
+      default: null
+    }
+  },
+  computed: {
+    nextContent () {
+      return parse(this.content)
+    },
+    title () {
+      return this.nextContent.title
+    },
+    description () {
+      return this.nextContent.desc
+    },
+    cover () {
+      return formatOssPath(this.nextContent.thumbPath) || require('./icons/link.svg')
+    },
+    url () {
+      return this.nextContent.url
+    },
+    border () {
+      if (this.type === 'quote') {
+        return false
+      }
+      return !this.SdkChatPanelBox
+    }
+  },
+  created () {
+    if (this.url && this.updateChatBoxProp) {
+      this.updateChatBoxProp('href', this.url)
+    }
+  }
+}
+</script>
+<style lang="less">
+.sdk-wechat-control-url-link{
+  display: inline-block;
+  max-width: 100%;
+  &.is-border {
+    border: 1px solid #eee;
+    border-radius: 4px;
+  }
+}
+.sdk-wechat-control-url-link--default,
+.sdk-wechat-control-url-link--thumb{
+  word-break: break-all;
+  line-height: 1.5em;
+  border-radius: 4px;
+  .sdk-wechat-control-url-link__inner{
+    max-width: 100%;
+    width: 248px;
+    color: #484848;
+  }
+  .sdk-wechat-control-url-link__main{
+    display: flex;
+    flex-direction: row;
+    padding-top: 3px;
+    padding: 6px 12px;
+    line-height: 1.5em;
+  }
+  .sdk-wechat-control-url-link__description{
+    color: #999;
+    word-break: break-all;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+    overflow: hidden;
+  }
+  .sdk-wechat-control-url-link__info{
+    flex: 1;
+    min-width: 0;
+  }
+  .sdk-wechat-control-url-link__title{
+    display: block;
+    margin-bottom: 4px;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1; /* 限制显示3行 */
+    overflow: hidden;
+  }
+  .sdk-wechat-control-url-link__cover{
+    display: inline-block;
+    width: 48px;
+    height: 48px;
+    background-position: 50% 50%;
+    background-repeat: no-repeat;
+    background-size: cover;
+    margin-left: 12px;
+    margin-top: 12px;
+    background-color: rgba(0,0,0,.1);
+  }
+  .sdk-wechat-control-url-link__foot{
+    padding: 0 12px;
+    border-top: 1px solid #eee;
+    color: #999;
+    font-size: 12px;
+    height: 24px;
+    line-height: 24px;
+    box-sizing: content-box;
+  }
+}
+.sdk-wechat-control-url-link--thumb{
+  background-color: #fff;
+  .sdk-wechat-control-url-link__description{
+    -webkit-line-clamp: 2;
+  }
+}
+.sdk-wechat-control-url-link--quote {
+  display: flex;
+  flex-direction: row;
+  max-width: 320px;
+  .sdk-wechat-control-url-link__cover {
+    width: 52px;
+    height: 52px;
+    min-width: 52px;
+    background-position: 50% 50%;
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-color: rgba(0,0,0,.1);
+  }
+  .sdk-wechat-control-url-link__title{
+    margin-right: 6px;
+  }
+}
+</style>
+  

package/components/wechat-chat-control/url/url-merge.vue

@@ -0,0 +1,164 @@
+<template>
+  <div class="wechat-record-panel-chat-link-merged" :class="['wechat-record-panel-chat-link-merged--' + type]">
+    <template v-if="type === 'default' || type === 'thumb'">
+      <div class="wechat-record-panel-chat-link-merged__main" :class="{'is-loading': mergeding}" @click="handleLoadMergedMsg">
+        <span class="wechat-record-panel-chat-link-merged__trigger" v-if="!mergedData">
+          <ui-icon :name="mergeding ? 'loading' : 'arrow-down-circle-line'" :size="18"></ui-icon> 查看合并转发消息
+        </span>
+        <div class="wechat-record-panel-chat-link-merged__msgs" v-else-if="mergedData && mergedData.length">
+          <div
+            class="wechat-record-panel-chat-link-merged__msgs-item"
+            v-for="(item, index) in mergedData"
+            :key="index"
+          >
+            <div class="wechat-record-panel-chat-link-merged__msgs-item-head">
+              <span class="wechat-record-panel-chat-link-merged__msgs-item-user">{{ item.sourcename }}</span>
+              <span class="wechat-record-panel-chat-link-merged__msgs-item-date">{{ handleFormatSourceTime(item.sourcetime) }}</span>
+            </div>
+            <div class="wechat-record-panel-chat-link-merged__msgs-item-body">
+              <template v-if="item.datatype == '2'">
+                【图片】
+              </template>
+              <template v-else>
+                <div class="wechat-record-panel-chat-link-merged__msgs-item-text" v-html="handleFormatMergedDesc(item.datadesc)"></div>
+              </template>
+            </div>
+          </div>
+        </div>
+        <div v-else>暂无消息数据</div>
+        <div class="wechat-record-panel-chat-link-merged__msgs-foot">聊天记录</div>
+      </div>
+    </template>
+    <template v-else-if="type === 'quote'">
+      [聊天记录]合并的聊天记录
+    </template>
+  </div>
+</template>
+<script>
+import axios from 'axios'
+import { unUnicode, html2Escape } from '../../../utils/string'
+import { parseXml } from '../../../utils/json'
+import { formatOssPath } from '@aochuang/common/utils/oss'
+
+export default {
+  name: 'AcWechatChatPanelControlUrlMerge',
+  props: {
+    id: {
+      type: String
+    },
+    type: {
+      type: String
+    },
+    content: {
+      type: String
+    },
+    beforeLoad: {
+      type: Function
+    }
+  },
+  data () {
+    return {
+      mergeding: false,
+      mergedData: null
+    }
+  },
+  methods: {
+    handleFormatMergedDesc (desc) {
+      return html2Escape(unUnicode(desc))
+    },
+    handleFormatSourceTime (date) {
+      if (!date) {
+        return date
+      }
+      return date.replace('&#x20;', ' ')
+    },
+    handleLoadMergedMsg () {
+      if (!this.content) {
+        return
+      }
+      if (this.mergeding) {
+        return
+      }
+      let ps = Promise.resolve()
+      if (this.beforeLoad) {
+        const rs = this.beforeLoad()
+        if (rs && rs.then) {
+          ps = rs
+        } else if (rs === false) {
+          return
+        }
+      }
+      ps.then(() => {
+        this.mergeding = true
+        axios.get(formatOssPath(this.content)).then(({ data }) => {
+          if (typeof data === 'string') {
+            const xmlData = parseXml(data)
+            if (xmlData && xmlData.recorditem && xmlData.recorditem.recordinfo && xmlData.recorditem.recordinfo.datalist) {
+              data = xmlData.recorditem.recordinfo.datalist.dataitem
+            }
+          }
+          this.mergeding = false
+          this.mergedData = (data || []).filter(v => {
+            return v.datadesc || v.sourcename || v.sourcetime
+          })
+        }, () => {
+          this.mergeding = false
+        })
+      })
+    }
+  }
+}
+</script>
+<style lang="less">
+.wechat-record-panel-chat-link-merged__main{
+  width: 340px;
+  &.is-loading{
+    cursor: not-allowed;
+    .wechat-record-panel-chat-link-merged__trigger {
+      color: #888;
+    }
+  }
+}
+.wechat-record-panel-chat-link-merged__trigger{
+  padding: 12px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  cursor: pointer;
+  .ui-icon{
+    vertical-align: top;
+    display: inline-block;
+    margin-right: 4px;
+  }
+}
+.wechat-record-panel-chat-link-merged__msgs{
+  padding: 6px 12px;
+}
+.wechat-record-panel-chat-link-merged__msgs-item{
+  padding: 6px 0;
+  border-bottom: 1px solid #eee;
+  &:last-child{
+    border-bottom: 0;
+  }
+}
+.wechat-record-panel-chat-link-merged__msgs-item-head{
+  margin-bottom: 4px;
+  display: flex;
+  justify-content: space-between;
+  color: #888;
+}
+.wechat-record-panel-chat-link-merged__msgs-foot{
+  padding: 0 12px;
+  border-top: 1px solid rgba(0,0,0,.1);
+  background-size: 12px;
+  font-size: 12px;
+  height: 24px;
+  line-height: 24px;
+  color: #888;
+}
+.wechat-record-panel-chat-link-merged--thumb {
+  border: 1px solid #eee;
+  border-radius: 3px;
+  display: inline-block;
+}
+</style>