<style lang="scss" scoped>
.section-box {
  margin-top: 32px;
  &:first-of-type {
    margin-top: 0;
  }
  .section-step {
    height: 22px;
    line-height: 22px;
    padding: 0 7px;
    text-align: center;
    color: #fff;
    background-color: #faad14;
    display: inline-block;
    font-size: 14px;
    margin-bottom: 12px;
  }
  .message {
    font-size: 14px;
    color: #606266;
    line-height: 22px;
    font-weight: 400;
  }
}
</style>

<template>
  <div class="main-page">
    <el-card shadow="never">
      <div class="section-box">
        <div class="section-step">什么是聊天工具栏？</div>
        <div class="message">
          企业微信3.0.16版本更新原聊天侧边栏升级为聊天工具栏。升级后：1.可以配置小程序了；2.入口更浅，交互体验更好；3.可配置第三方应用的页面了。
          <br />企业可以把CRM页面、商品页面、知识库等挂接到聊天工具栏，方便员工和在客户聊天时，快速查看和编辑客户信息、快速给客户发东西、快速查找回答等。
        </div>
      </div>
      <div class="section-box">
        <div class="section-step">员工视角：聊天工具栏</div>
        <div class="message">员工在与客户单聊或者外部群聊的时候，点击右上角的图标，对话框上方即可出现工具栏。</div>
        <img
          src="https://wscos-1253767630.cos.ap-nanjing.myqcloud.com/wework/assets/siber/1.png"
          class="image"
          style="width: 818px; height: 495px;"
        />
      </div>
      <div class="section-box">
        <div class="section-step">员工视角：电脑端外部群及单聊聊天侧边栏界面</div>
        <div class="message">员工在与客户单聊或者外部群聊的时候，点击右上角的图标，对话框上方即可出现工具栏。</div>
        <img
          src="https://wscos-1253767630.cos.ap-nanjing.myqcloud.com/wework/assets/siber/2.png"
          class="image"
          style="width: 818px; height: 494px;"
        />
        <img
          src="https://wscos-1253767630.cos.ap-nanjing.myqcloud.com/wework/assets/siber/3.png"
          class="image"
          style="width: 818px; height: 483px;"
        />
        <div
          class="message"
          style="margin-top: 32px;"
        >聊天侧边栏的素材支持文本、网页、图文视频及文件，售前售后在客户服务过程中选择需要的素材直接即可发送。</div>
        <img
          src="https://wscos-1253767630.cos.ap-nanjing.myqcloud.com/wework/assets/siber/4.png"
          class="image"
          style="width: 984px; height: 572px;"
        />
      </div>
      <div class="section-box">
        <div class="section-step">如何配置聊天工具栏？</div>
        <img
          src="https://wscos-1253767630.cos.ap-nanjing.myqcloud.com/wework/assets/siber/5.png"
          class="image"
          style="width: 1154px; height: 639px;"
        />
        <img
          src="https://wscos-1253767630.cos.ap-nanjing.myqcloud.com/wework/assets/siber/6.png"
          class="image"
          style="width: 550px; height: 634px;"
        />
      </div>
      <div class="section-box">
        <div class="section-step">聊天工具栏的内容是如何维护的？</div>
        <img
          src="https://wscos-1253767630.cos.ap-nanjing.myqcloud.com/wework/assets/siber/7.png"
          class="image"
          style="width: 1176px; height: 629px;"
        />
        <img
          src="https://wscos-1253767630.cos.ap-nanjing.myqcloud.com/wework/assets/siber/8.png"
          class="image"
          style="width: 555px; height: 634px;"
        />
        <img
          src="https://wscos-1253767630.cos.ap-nanjing.myqcloud.com/wework/assets/siber/9.png"
          class="image"
          style="width: 797px; height: 387px;"
        />
        <img
          src="https://wscos-1253767630.cos.ap-nanjing.myqcloud.com/wework/assets/siber/10.png"
          class="image"
          style="width: 797px; height: 387px;"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {};
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {},
  methods: {},
};
</script>
