@ndscnj/roomkit-web-vue3 25.12.2319 → 25.12.2320

package/lib/components/RoomFooter/index/indexPC.vue2.js

@@ -75,11 +75,16 @@ const _hoisted_3 = { class: "center-container" };
 const _hoisted_4 = { class: "right-container" };
 const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
   __name: "indexPC",
-  setup(__props) {
+  emits: ["on-vote"],
+  setup(__props, { emit: __emit }) {
     const { roomStore, isMaster, isAdmin, isAudience } = useRoomFooterHooks.default();
     function handleControlClick(name) {
       useMitt.default.emit("experience-communication", name);
     }
+    const emit = __emit;
+    const onVote = (data) => {
+      emit("on-vote", { code: data.visible, message: "vote" });
+    };
     return (_ctx, _cache) => {
       return Vue.openBlock(), Vue.createElementBlock("div", _hoisted_1, [
         Vue.createElementVNode("div", _hoisted_2, [
@@ -135,7 +140,8 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
           })) : Vue.createCommentVNode("", true),
           Vue.createVNode(voteControl.default, {
             class: "center-container-item",
-            onClick: _cache[10] || (_cache[10] = ($event) => handleControlClick("voteControl"))
+            onClick: _cache[10] || (_cache[10] = ($event) => handleControlClick("voteControl")),
+            onOnVote: onVote
           }, {
             content: Vue.withCtx(() => [
               Vue.renderSlot(_ctx.$slots, "content", {}, void 0, true)

package/lib/components/RoomFooter/voteControl.vue.js

@@ -3,5 +3,5 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 const voteControl_vue_vue_type_script_setup_true_lang = require("./voteControl.vue2.js");
 ;/* empty css                  */
 const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.js");
-const voteControl = /* @__PURE__ */ _pluginVue_exportHelper.default(voteControl_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-92356fd2"]]);
+const voteControl = /* @__PURE__ */ _pluginVue_exportHelper.default(voteControl_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-e8dc762c"]]);
 exports.default = voteControl;

package/lib/components/RoomFooter/voteControl.vue2.js

@@ -11,13 +11,14 @@ require("../../services/manager/roomActionManager.js");
 require("@tencentcloud/tui-core");
 const IconButton = require("../common/base/IconButton.vue.js");
 const uikitBaseComponentVue3 = require("@tencentcloud/uikit-base-component-vue3");
+const index$1 = require("../RoomVote/index.js");
 const _hoisted_1 = {
   key: 0,
-  class: "more-container"
+  class: "vote-control-container"
 };
 const _hoisted_2 = {
   key: 0,
-  class: "tool-box"
+  class: "contact-container"
 };
 const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
   __name: "voteControl",
@@ -40,6 +41,9 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
         visible: showToolBox.value
       });
     }
+    function handleOnCloseContact() {
+      showToolBox.value = false;
+    }
     return (_ctx, _cache) => {
       return Vue.unref(voteControlConfig).visible ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_1, [
         Vue.createVNode(IconButton.default, {
@@ -52,11 +56,16 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
           ]),
           _: 1
         }, 8, ["is-active", "title"]),
-        Vue.createTextVNode(" " + Vue.toDisplayString(sidebarName.value) + " ", 1),
-        Vue.createElementVNode("div", { onClick: toggleToolBox }, "0测试0"),
         !isSidebarOpen.value && showToolBox.value ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_2, [
-          _cache[0] || (_cache[0] = Vue.createTextVNode(" 123 ", -1)),
-          Vue.renderSlot(_ctx.$slots, "content", {}, void 0, true)
+          Vue.createVNode(Vue.unref(index$1.default), {
+            ref: "contactRef",
+            onOnCloseContact: handleOnCloseContact
+          }, {
+            content: Vue.withCtx(() => [
+              Vue.renderSlot(_ctx.$slots, "content", {}, void 0, true)
+            ]),
+            _: 3
+          }, 512)
         ])) : Vue.createCommentVNode("", true)
       ])) : Vue.createCommentVNode("", true);
     };

package/lib/components/RoomVote/index.d.ts

@@ -2,5 +2,21 @@ declare const Index: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('v
     "on-close-contact": (...args: any[]) => void;
 }, string, import('vue').PublicProps, Readonly<{}> & Readonly<{
     "onOn-close-contact"?: ((...args: any[]) => any) | undefined;
-}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any> | import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any> | ({
+    new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {}, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, {}>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import('vue').ComponentOptionsBase<Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+    $slots: {
+        content?(_: {}): any;
+    };
+}));
 export default Index;

package/lib/components/RoomVote/indexPC.vue.d.ts

@@ -1,2 +1,11 @@
-declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare function __VLS_template(): {
+    content?(_: {}): any;
+};
+declare const __VLS_component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/components/RoomVote/indexPC.vue.js

@@ -3,5 +3,5 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 const indexPC_vue_vue_type_script_setup_true_lang = require("./indexPC.vue2.js");
 ;/* empty css              */
 const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.js");
-const indexPC = /* @__PURE__ */ _pluginVue_exportHelper.default(indexPC_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-17479e8d"]]);
+const indexPC = /* @__PURE__ */ _pluginVue_exportHelper.default(indexPC_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-d1a96ffd"]]);
 exports.default = indexPC;

package/lib/components/RoomVote/indexPC.vue2.js

@@ -14,6 +14,7 @@ const _hoisted_5 = { class: "item-title" };
 const _hoisted_6 = { class: "more-item" };
 const _hoisted_7 = { class: "item-title" };
 const _hoisted_8 = { class: "more-content" };
+const _hoisted_9 = { class: "more-item" };
 const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
   __name: "indexPC",
   setup(__props) {
@@ -40,6 +41,9 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
             class: "copy-icon",
             onClick: _cache[0] || (_cache[0] = ($event) => Vue.unref(onCopy)(Vue.unref(email)))
           })
+        ]),
+        Vue.createElementVNode("div", _hoisted_9, [
+          Vue.renderSlot(_ctx.$slots, "content", {}, void 0, true)
         ])
       ]);
     };

package/lib/index.js

@@ -3928,36 +3928,170 @@ to {
 }
 .footer .mirror-container .mirror-text[data-v-21a63691] {
   margin-left: 4px;
-}.tool-box[data-v-92356fd2] {
-  position: absolute;
-  bottom: 72px;
-  z-index: 2;
+}span[data-v-939000cb] {
+  padding-right: 5px;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 17px;
+}
+.contact-container-main[data-v-939000cb] {
+  position: fixed;
+  bottom: 0;
   display: flex;
   flex-direction: column;
+  width: 100%;
+  padding-bottom: 4vh;
+  border-radius: 15px 15px 0 0;
+  animation-name: popup-939000cb;
+  animation-duration: 200ms;
+  background-color: var(--bg-color-operate);
+}
+@keyframes popup-939000cb {
+from {
+    transform: scaleY(0);
+    transform-origin: bottom;
+}
+to {
+    transform: scaleY(1);
+    transform-origin: bottom;
+}
+}
+.contact-container-main .contact-title-main[data-v-939000cb] {
+  display: flex;
+  flex-direction: row;
   align-items: center;
-  justify-content: center;
-  padding: 5px 0;
-  border-radius: 15px;
-  background-color: var(--bg-color-dialog);
-  box-shadow: 0 -8px 30p var(--uikit-color-black-8);
+  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);
 }
-.tool-box .tool-box-item[data-v-92356fd2] {
+.contact-container-main .contact-content-main[data-v-939000cb] {
   display: flex;
+  flex-direction: row;
   align-items: center;
-  justify-content: flex-start;
-  width: 100%;
-  padding: 7px 10px;
-  font-size: 12px;
+  width: 90%;
+  height: 15%;
+  padding: 0 0 0 25px;
+  margin-bottom: 10px;
+}
+.contact-container-main .contact-title[data-v-939000cb],
+.contact-container-main .contact-content[data-v-939000cb] {
+  width: 28%;
+  font-family: "PingFang SC";
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px;
   white-space: nowrap;
-  cursor: pointer;
+  color: var(--text-color-primary);
 }
-.tool-box .tool-box-item .icon[data-v-92356fd2] {
-  margin-right: 8px;
+.contact-container-main .contact-content[data-v-939000cb] {
+  width: 62%;
+  overflow: hidden;
+  font-size: 14px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--text-color-secondary);
 }
-.tool-box .tool-box-item[data-v-92356fd2]:hover {
+.contact-container-main .contact-bottom[data-v-939000cb] {
+  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);
+}
+.contact-container-main .copy[data-v-939000cb] {
+  margin-left: 30px;
+  color: var(--text-color-link);
+}
+.cancel[data-v-939000cb] {
+  flex: 1;
+  padding-right: 30px;
+  font-size: 16px;
+  font-weight: 400;
+  text-align: end;
+}.more-container[data-v-d1a96ffd] {
+  padding: 20px;
+}
+.more-container .more-title[data-v-d1a96ffd] {
+  display: flex;
+  align-items: center;
+}
+.more-container .more-title .email-icon[data-v-d1a96ffd] {
+  color: var(--uikit-color-gray-7);
+}
+.more-container .more-title .more-notice[data-v-d1a96ffd] {
+  width: 100%;
+  height: 22px;
+  padding-left: 8px;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 22px;
+  color: var(--text-color-primary);
+}
+.more-container .more-item[data-v-d1a96ffd] {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+.more-container .more-item[data-v-d1a96ffd]:not(:first-child) {
+  margin-top: 20px;
+}
+.more-container .more-item:not(:first-child) .item-title[data-v-d1a96ffd] {
+  width: 100%;
+  padding-bottom: 8px;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 22px;
+  color: var(--text-color-primary);
+}
+.more-container .more-item:not(:first-child) .more-content[data-v-d1a96ffd] {
+  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;
-  background-color: var(--list-color-hover);
-}.footer-container[data-v-6b90d75f] {
+  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);
+}
+.more-container .more-item:not(:first-child) .copy-icon[data-v-d1a96ffd] {
+  position: absolute;
+  top: 45px;
+  right: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: var(--text-color-link);
+}.contact-container[data-v-e8dc762c] {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 11;
+  box-sizing: border-box;
+  width: 100vw;
+  height: auto;
+  background-color: var(--uikit-color-black-8);
+}.footer-container[data-v-604d8288] {
   position: absolute;
   bottom: 0;
   display: flex;
@@ -3971,25 +4105,25 @@ to {
   background-color: var(--bg-color-topbar);
   box-shadow: 0 -8px 30px var(--uikit-color-black-8);
 }
-.footer-container .left-container[data-v-6b90d75f] {
+.footer-container .left-container[data-v-604d8288] {
   display: flex;
   align-items: center;
   height: 100%;
 }
-.footer-container .left-container .left-container-item[data-v-6b90d75f]:not(:first-child) {
+.footer-container .left-container .left-container-item[data-v-604d8288]:not(:first-child) {
   margin-left: 1rem;
 }
-.footer-container .center-container[data-v-6b90d75f] {
+.footer-container .center-container[data-v-604d8288] {
   position: relative;
   display: flex;
   align-items: center;
   height: 100%;
   margin: 0 auto;
 }
-.footer-container .center-container .center-container-item[data-v-6b90d75f]:not(:first-child) {
+.footer-container .center-container .center-container-item[data-v-604d8288]:not(:first-child) {
   margin-left: 16px;
 }
-.footer-container .right-container[data-v-6b90d75f] {
+.footer-container .right-container[data-v-604d8288] {
   display: flex;
   align-items: center;
   height: 100%;
@@ -4977,159 +5111,6 @@ to {
   right: 0;
   z-index: 101;
   height: 100%;
-}span[data-v-939000cb] {
-  padding-right: 5px;
-  font-size: 12px;
-  font-weight: 500;
-  line-height: 17px;
-}
-.contact-container-main[data-v-939000cb] {
-  position: fixed;
-  bottom: 0;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  padding-bottom: 4vh;
-  border-radius: 15px 15px 0 0;
-  animation-name: popup-939000cb;
-  animation-duration: 200ms;
-  background-color: var(--bg-color-operate);
-}
-@keyframes popup-939000cb {
-from {
-    transform: scaleY(0);
-    transform-origin: bottom;
-}
-to {
-    transform: scaleY(1);
-    transform-origin: bottom;
-}
-}
-.contact-container-main .contact-title-main[data-v-939000cb] {
-  display: flex;
-  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);
-}
-.contact-container-main .contact-content-main[data-v-939000cb] {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  width: 90%;
-  height: 15%;
-  padding: 0 0 0 25px;
-  margin-bottom: 10px;
-}
-.contact-container-main .contact-title[data-v-939000cb],
-.contact-container-main .contact-content[data-v-939000cb] {
-  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);
-}
-.contact-container-main .contact-content[data-v-939000cb] {
-  width: 62%;
-  overflow: hidden;
-  font-size: 14px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: var(--text-color-secondary);
-}
-.contact-container-main .contact-bottom[data-v-939000cb] {
-  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);
-}
-.contact-container-main .copy[data-v-939000cb] {
-  margin-left: 30px;
-  color: var(--text-color-link);
-}
-.cancel[data-v-939000cb] {
-  flex: 1;
-  padding-right: 30px;
-  font-size: 16px;
-  font-weight: 400;
-  text-align: end;
-}.more-container[data-v-17479e8d] {
-  padding: 20px;
-}
-.more-container .more-title[data-v-17479e8d] {
-  display: flex;
-  align-items: center;
-}
-.more-container .more-title .email-icon[data-v-17479e8d] {
-  color: var(--uikit-color-gray-7);
-}
-.more-container .more-title .more-notice[data-v-17479e8d] {
-  width: 100%;
-  height: 22px;
-  padding-left: 8px;
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 22px;
-  color: var(--text-color-primary);
-}
-.more-container .more-item[data-v-17479e8d] {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-}
-.more-container .more-item[data-v-17479e8d]:not(:first-child) {
-  margin-top: 20px;
-}
-.more-container .more-item:not(:first-child) .item-title[data-v-17479e8d] {
-  width: 100%;
-  padding-bottom: 8px;
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 22px;
-  color: var(--text-color-primary);
-}
-.more-container .more-item:not(:first-child) .more-content[data-v-17479e8d] {
-  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);
-}
-.more-container .more-item:not(:first-child) .copy-icon[data-v-17479e8d] {
-  position: absolute;
-  top: 45px;
-  right: 10px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  color: var(--text-color-link);
 }.conversation[data-v-b897add1] {
   height: 100%;
   padding: 20px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndscnj/roomkit-web-vue3",
-  "version": "25.12.2319",
+  "version": "25.12.2320",
   "main": "./lib/index.js",
   "module": "./es/index.mjs",
   "types": "./es/index.d.ts",

package/src/TUIRoom/components/RoomFooter/index/indexPC.vue

@@ -54,6 +54,7 @@
       <voteControl
         class="center-container-item"
         @click="handleControlClick('voteControl')"
+        @on-vote="onVote"
       >
       <template #content>
         <slot name="content"></slot>
@@ -81,6 +82,7 @@
 </template>
 
 <script setup lang="ts">
+import { defineEmits } from "vue";
 import {
   AudioSetting,
   VideoSetting,
@@ -108,6 +110,10 @@ const { roomStore, isMaster, isAdmin, isAudience } = useRoomFooter();
 function handleControlClick(name: string) {
   bus.emit('experience-communication', name);
 }
+const emit = defineEmits(['on-vote']);
+const onVote = (data: { name: string; visible: boolean }) => {
+  emit('on-vote', { code: data.visible, message: 'vote' });
+};
 </script>
 
 <style lang="scss" scoped>

package/src/TUIRoom/components/RoomFooter/voteControl.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="more-container" v-if="voteControlConfig.visible">
+  <div class="vote-control-container" v-if="voteControlConfig.visible">
     <icon-button
       :is-active="sidebarName === 'vote'"
       :title="t('Vote')"
@@ -7,11 +7,12 @@
     >
       <IconAIIcon size="24" />
     </icon-button>
-    {{ sidebarName }}
-    <div @click="toggleToolBox">0测试0</div>
-    <div class="tool-box" v-if="!isSidebarOpen && showToolBox">
-      123
-      <slot name="content"></slot>
+    <div class="contact-container" v-if="!isSidebarOpen && showToolBox">
+      <room-vote ref="contactRef" @on-close-contact="handleOnCloseContact">
+        <template #content>
+          <slot name="content"></slot>
+        </template>
+      </room-vote>
     </div>
   </div>
 </template>
@@ -24,6 +25,7 @@ import IconButton from '../common/base/IconButton.vue';
 import {
   IconAIIcon,
 } from '@tencentcloud/uikit-base-component-vue3';
+import roomVote from '../RoomVote';
 const { basicStore } = roomService;
 const isSidebarOpen = computed(() => basicStore.isSidebarOpen);
 const sidebarName = computed(() => basicStore.sidebarName);
@@ -37,45 +39,25 @@ const emit = defineEmits(['on-vote']);
 function toggleToolBox() {
   showToolBox.value = !showToolBox.value;
   emit('on-vote', {
-      name: 'onVote',
-      visible: showToolBox.value,
-    });
+    name: 'onVote',
+    visible: showToolBox.value,
+  });
+}
+function handleOnCloseContact() {
+  showToolBox.value = false;
 }
-
 </script>
 
 <style lang="scss" scoped>
-.tool-box {
-  position: absolute;
-  bottom: 72px;
-  z-index: 2;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 5px 0;
-  border-radius: 15px;
-  background-color: var(--bg-color-dialog);
-  box-shadow: 0 -8px 30p var(--uikit-color-black-8);
-
-  .tool-box-item {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    width: 100%;
-    padding: 7px 10px;
-    font-size: 12px;
-    white-space: nowrap;
-    cursor: pointer;
-
-    .icon {
-      margin-right: 8px;
-    }
-  }
-
-  .tool-box-item:hover {
-    border-radius: 8px;
-    background-color: var(--list-color-hover);
-  }
+.contact-container {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 11;
+  box-sizing: border-box;
+  width: 100vw;
+  height: auto;
+  background-color: var(--uikit-color-black-8);
 }
 </style>

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

@@ -15,6 +15,9 @@
       <div class="more-content">{{ email }}</div>
       <IconCopy class="copy-icon" @click="onCopy(email)" />
     </div>
+    <div class="more-item">
+      <slot name="content"></slot>
+    </div>
   </div>
 </template>