@ndscnj/roomkit-web-vue3 25.12.2417 → 25.12.2418

package/src/TUIRoom/components/RoomVote/indexH5.vue

@@ -1,84 +1,141 @@
 <template>
-  <div class="more-container">
-    <slot name="content"></slot>
+  <div class="contact-container-main">
+    <div class="contact-title-main">
+      <div>{{ t('Contact us') }}</div>
+      <span v-tap="handleCloseContact" class="cancel">{{ t('Cancel') }}</span>
+    </div>
+    <div
+      v-for="item in contactContentList"
+      :key="item.id"
+      class="contact-content-main"
+    >
+      <span class="contact-title">{{ t(item.title) }}</span>
+      <span class="contact-content">{{ item.content }}</span>
+      <IconCopy v-tap="() => onCopy(item.copyLink)" class="copy" />
+    </div>
+    <span class="contact-bottom">
+      {{
+        t(
+          'If you have any questions, please feel free to join our QQ group or send an email'
+        )
+      }}
+    </span>
   </div>
 </template>
 
 <script setup lang="ts">
+import useRoomMoreControl from './useRoomMoreHooks';
+import { IconCopy } from '@tencentcloud/uikit-base-component-vue3';
+import vTap from '../../directives/vTap';
+
+const { t, onCopy, contactContentList } = useRoomMoreControl();
+
+const emit = defineEmits(['on-close-contact']);
+
+function handleCloseContact() {
+  emit('on-close-contact');
+}
 </script>
 
 <style lang="scss" scoped>
-.more-container {
-  padding: 20px;
+span {
+  padding-right: 5px;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 17px;
+}
 
-  .more-title {
-    display: flex;
-    align-items: center;
+.contact-container-main {
+  position: fixed;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding-bottom: 4vh;
+  border-radius: 15px 15px 0 0;
+  animation-name: popup;
+  animation-duration: 200ms;
+  background-color: var(--bg-color-operate);
 
-    .email-icon {
-      color: var(--uikit-color-gray-7);
+  @keyframes popup {
+    from {
+      transform: scaleY(0);
+      transform-origin: bottom;
     }
 
-    .more-notice {
-      width: 100%;
-      height: 22px;
-      padding-left: 8px;
-      font-size: 14px;
-      font-weight: 400;
-      line-height: 22px;
-      color: var(--text-color-primary);
+    to {
+      transform: scaleY(1);
+      transform-origin: bottom;
     }
   }
 
-  .more-item {
-    position: relative;
+  .contact-title-main {
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
+    align-items: center;
+    padding: 30px 0 20px 25px;
+    font-family: 'PingFang SC';
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 24px;
+    color: var(--text-color-primary);
+  }
 
-    &:not(:first-child) {
-      margin-top: 20px;
+  .contact-content-main {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: 90%;
+    height: 15%;
+    padding: 0 0 0 25px;
+    margin-bottom: 10px;
+  }
 
-      .item-title {
-        width: 100%;
-        padding-bottom: 8px;
-        font-size: 14px;
-        font-weight: 400;
-        line-height: 22px;
-        color: var(--text-color-primary);
-      }
+  .contact-title,
+  .contact-content {
+    width: 28%;
+    font-family: 'PingFang SC';
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px;
+    white-space: nowrap;
+    color: var(--text-color-primary);
+  }
 
-      .more-content {
-        position: relative;
-        box-sizing: border-box;
-        display: inline-block;
-        flex: 1;
-        height: 42px;
-        padding: 10px 30px 10px 16px;
-        overflow: hidden;
-        font-size: 14px;
-        font-weight: 500;
-        line-height: 22px;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        border-radius: 8px;
-        outline: none;
-        transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
-        color: var(--text-color-primary);
-        background-color: var(--bg-color-input);
-        border: 1px solid var(--stroke-color-module);
-      }
+  .contact-content {
+    width: 62%;
+    overflow: hidden;
+    font-size: 14px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--text-color-secondary);
+  }
 
-      .copy-icon {
-        position: absolute;
-        top: 45px;
-        right: 10px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        cursor: pointer;
-        color: var(--text-color-link);
-      }
-    }
+  .contact-bottom {
+    width: 90%;
+    padding-left: 40px;
+    font-family: 'PingFang SC';
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 17px;
+    text-align: center;
+    color: var(--text-color-secondary);
   }
+
+  .copy {
+    margin-left: 30px;
+    color: var(--text-color-link);
+  }
+}
+
+.cancel {
+  flex: 1;
+  padding-right: 30px;
+  font-size: 16px;
+  font-weight: 400;
+  text-align: end;
 }
 </style>

package/src/TUIRoom/conference.vue

@@ -18,8 +18,11 @@
       @show-overlay="handleShowOverlay"
       @on-vote="onVote"
     >
+    <template #content>
+      <slot name="content"></slot>
+    </template>
     </room-footer>
-    <room-sidebar @on-vote="onVote">
+    <room-sidebar>
       <template #content>
           <slot name="content"></slot>
         </template>

package/es/assets/imgs/vote-icon.png.mjs

@@ -1,4 +0,0 @@
-const _imports_0 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAKhSURBVFiF7ZWxftMwEIf/F3lgI0yl1VDzBNwv8sBGusHWbt2IR6a2T9DyBC1P0HRkKmxsKVM7WI76BkxJx3RjiHMMOMW4tmO70Ilbkp9P0vfJ0p0VHhjMzFrrS631s8lkctF0vnooXCk1AvAcQF9rTU0lWgtk4CCitwAYwG5TiVYCWXiSJFtxHF+tra196nQ6b5pKNBZgZl8pdbmEO+ccANzc3PxoI9FIIIWPADzJwpfRRqK2QAbeLYK3laglkIH7IvJ+PB5/rRrfRGKlQA4exnE8rCNdV6JSoC28iQT9TXiv1xssFguXvx/M3FVKjQH4RLQVRdGdRKcpnJm7RXOCIDgiolOl1F5BejlnNp/PZ9nEPYEquDHmXCk1ZmY/DxeRQwAuSZKDkvUKq+eegFLquOK1nwHwlVKjpUQOvuWcu9thdjNEtFNUuvcEiOg6/X2dz1lrP4tIuJQIguC4DlxEwuy5/7Hh/IPJZHKhtSYA+xsbG/50Ov2SzU+nU7e+vn5LRLsAXtWBV13gwjKsIXGltf62PPO2cCzLkJm7nudxPikiewC2AQyttWHVQnk4gCERnZWNnc/nzjk3o8yntbC8MlEpkYPXjR0yxowAsIh8LBtFRC8BbBPRSRRFB/l87rafLBaL21VkInoHAJ6I+ETk4jg+qppgjDkVkf0gCG6jKLobmz9za22tdm2M2QQwKOyERZG+/qGIHAZBcITfLfY8hR80/VYAgNdksLU2NMYglXgqIn0ATEQfrLUnTeErBXq93qCoIeFXheynf2cismmMOS0Zdx3HcalcqQAzd4nouEZ1dAEMypJE9B1AcwHn3IyZX9QQWBWzqmTlEaQdrnKBh0btKvgv8K/CS29pP23JjxkMwHlJkoRpN+s/soBLkiT8CfdGvsMQPqX9AAAAAElFTkSuQmCC";
-export {
-  _imports_0 as default
-};

package/lib/assets/imgs/vote-icon.png.js

@@ -1,4 +0,0 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const _imports_0 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAKhSURBVFiF7ZWxftMwEIf/F3lgI0yl1VDzBNwv8sBGusHWbt2IR6a2T9DyBC1P0HRkKmxsKVM7WI76BkxJx3RjiHMMOMW4tmO70Ilbkp9P0vfJ0p0VHhjMzFrrS631s8lkctF0vnooXCk1AvAcQF9rTU0lWgtk4CCitwAYwG5TiVYCWXiSJFtxHF+tra196nQ6b5pKNBZgZl8pdbmEO+ccANzc3PxoI9FIIIWPADzJwpfRRqK2QAbeLYK3laglkIH7IvJ+PB5/rRrfRGKlQA4exnE8rCNdV6JSoC28iQT9TXiv1xssFguXvx/M3FVKjQH4RLQVRdGdRKcpnJm7RXOCIDgiolOl1F5BejlnNp/PZ9nEPYEquDHmXCk1ZmY/DxeRQwAuSZKDkvUKq+eegFLquOK1nwHwlVKjpUQOvuWcu9thdjNEtFNUuvcEiOg6/X2dz1lrP4tIuJQIguC4DlxEwuy5/7Hh/IPJZHKhtSYA+xsbG/50Ov2SzU+nU7e+vn5LRLsAXtWBV13gwjKsIXGltf62PPO2cCzLkJm7nudxPikiewC2AQyttWHVQnk4gCERnZWNnc/nzjk3o8yntbC8MlEpkYPXjR0yxowAsIh8LBtFRC8BbBPRSRRFB/l87rafLBaL21VkInoHAJ6I+ETk4jg+qppgjDkVkf0gCG6jKLobmz9za22tdm2M2QQwKOyERZG+/qGIHAZBcITfLfY8hR80/VYAgNdksLU2NMYglXgqIn0ATEQfrLUnTeErBXq93qCoIeFXheynf2cismmMOS0Zdx3HcalcqQAzd4nouEZ1dAEMypJE9B1AcwHn3IyZX9QQWBWzqmTlEaQdrnKBh0btKvgv8K/CS29pP23JjxkMwHlJkoRpN+s/soBLkiT8CfdGvsMQPqX9AAAAAElFTkSuQmCC";
-exports.default = _imports_0;